;
+
+const backgroundPrimary = '--background-primary';
+const textPrimary = '--text-primary';
+
+const ViewExample = ({ view }: StoryViewProps) => {
+ return (
+ <>
+ view: {view}
+
+
+ Inside ViewContainer
+
+
+
+
+
+ );
+};
+
+export const Default: Story = {
+ render: () => {
+ return (
+ <>
+
+
+
+
+
+
+ Inverse in progress
+
+
+ );
+ },
+};
diff --git a/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.ts b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.ts
new file mode 100644
index 0000000000..62c65c2742
--- /dev/null
+++ b/packages/plasma-b2c/src/components/ViewContainer/ViewContainer.ts
@@ -0,0 +1,7 @@
+import { viewContainerConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './ViewContainer.config';
+
+const mergedConfig = mergeConfig(viewContainerConfig, config);
+
+export const ViewContainer = component(mergedConfig);
diff --git a/packages/plasma-b2c/src/components/ViewContainer/index.ts b/packages/plasma-b2c/src/components/ViewContainer/index.ts
new file mode 100644
index 0000000000..3788330cf0
--- /dev/null
+++ b/packages/plasma-b2c/src/components/ViewContainer/index.ts
@@ -0,0 +1 @@
+export { ViewContainer } from './ViewContainer';
diff --git a/packages/plasma-new-hope/.storybook/decoratorViewContainer.tsx b/packages/plasma-new-hope/.storybook/decoratorViewContainer.tsx
new file mode 100644
index 0000000000..7462616acb
--- /dev/null
+++ b/packages/plasma-new-hope/.storybook/decoratorViewContainer.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { ViewContainer } from '../src/examples/plasma_b2c/components/ViewContainer/ViewContainer';
+
+import { ThemeType, themes } from '../src/examples/themes';
+
+export const withViewContainer = (Story, context) => {
+ const themeType = context.globals.theme as keyof ThemeType;
+ const themeName = context.title.split('/')[0];
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/plasma-new-hope/.storybook/preview.ts b/packages/plasma-new-hope/.storybook/preview.ts
index aff9366d14..340ca47eff 100644
--- a/packages/plasma-new-hope/.storybook/preview.ts
+++ b/packages/plasma-new-hope/.storybook/preview.ts
@@ -1,9 +1,11 @@
import type { Preview } from '@storybook/react';
+import { withViewContainer } from './decoratorViewContainer';
const LIGHT_THEME = 'light';
const DARK_THEME = 'dark';
const preview: Preview = {
+ decorators: [withViewContainer],
parameters: {
docs: {
source: { type: 'code', language: 'tsx' },
diff --git a/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.tsx b/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.tsx
index 02411493ae..e06a241e46 100644
--- a/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.tsx
+++ b/packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.tsx
@@ -57,10 +57,10 @@ export const AccordionItem: React.FC (
-
+
@@ -69,7 +69,7 @@ export const AccordionItem: React.FC : undefined);
+ const leftContent = contentLeft ?? (type === 'arrow' ? : undefined);
const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
const rightContent = contentRight ?? (type === 'sign' ? : undefined);
diff --git a/packages/plasma-new-hope/src/components/ViewContainer/ViewContainer.tsx b/packages/plasma-new-hope/src/components/ViewContainer/ViewContainer.tsx
new file mode 100644
index 0000000000..8bce72cd78
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/ViewContainer/ViewContainer.tsx
@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import { css } from '@linaria/core';
+
+import type { RootProps } from '../../engines/types';
+
+import { base as viewCSS } from './_view/base';
+
+const base = css`
+ position: relative;
+`;
+
+export type ViewContainerCustomProps = {
+ /**
+ * Вид компонента.
+ */
+ view?: string;
+};
+
+type ViewContainerProps = React.HTMLAttributes & ViewContainerCustomProps;
+
+export const viewContainerRoot = (Root: RootProps) =>
+ forwardRef((props, ref) => {
+ const { children, ...rest } = props;
+
+ return (
+
+ {children}
+
+ );
+ });
+
+export const viewContainerConfig = {
+ name: 'ViewContainer',
+ tag: 'div',
+ layout: viewContainerRoot,
+ base,
+ variations: {
+ view: {
+ css: viewCSS,
+ },
+ },
+ defaults: {
+ view: undefined,
+ },
+};
diff --git a/packages/plasma-new-hope/src/components/ViewContainer/_view/base.ts b/packages/plasma-new-hope/src/components/ViewContainer/_view/base.ts
new file mode 100644
index 0000000000..cd585b76c4
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/ViewContainer/_view/base.ts
@@ -0,0 +1,3 @@
+import { css } from '@linaria/core';
+
+export const base = css``;
diff --git a/packages/plasma-new-hope/src/components/ViewContainer/_view/tokens.json b/packages/plasma-new-hope/src/components/ViewContainer/_view/tokens.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/ViewContainer/_view/tokens.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/plasma-new-hope/src/components/ViewContainer/index.ts b/packages/plasma-new-hope/src/components/ViewContainer/index.ts
new file mode 100644
index 0000000000..19e2c09dfa
--- /dev/null
+++ b/packages/plasma-new-hope/src/components/ViewContainer/index.ts
@@ -0,0 +1 @@
+export { viewContainerRoot, viewContainerConfig } from './ViewContainer';
diff --git a/packages/plasma-new-hope/src/examples/_helpers.tsx b/packages/plasma-new-hope/src/examples/_helpers.tsx
index d80f289555..95bc322dcf 100644
--- a/packages/plasma-new-hope/src/examples/_helpers.tsx
+++ b/packages/plasma-new-hope/src/examples/_helpers.tsx
@@ -1,20 +1,21 @@
import React from 'react';
-import type { ArgTypes, StoryContext, Decorator } from '@storybook/react';
+import type { ArgTypes, Decorator } from '@storybook/react';
import { ComponentConfig } from '../engines';
import type { HTMLAttributesOmitOnChange, HTMLTagList, PropsType, Variants } from '../engines/types';
-import { ThemeType, themes } from './themes';
+// import { ThemeType, themes } from './themes';
-export const WithTheme: Decorator = (Story, context: StoryContext) => {
- const themeType = context.globals.theme as keyof ThemeType;
- const themeName = context.title.split('/')[0];
+export const WithTheme: Decorator = (Story) => {
+ // const themeType = context.globals.theme as keyof ThemeType;
+ // const themeName = context.title.split('/')[0];
return (
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx
index ff66cd742a..f4fb61cfb6 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx
@@ -65,7 +65,7 @@ export const Default: StoryObj> = {
argTypes: { ...disableProps(['children']) },
render: (args) => (
-
+
),
};
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.ts
new file mode 100644
index 0000000000..ec875a78c4
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.ts
@@ -0,0 +1,18 @@
+import { css } from '@linaria/core';
+
+// здесь будет импорт непосредственно из темы, например
+// import { containerTokens } from '@salutejs/plasma-themes/tokens';
+import { containerTokens } from './tokens';
+
+export const config = {
+ variations: {
+ view: {
+ onDark: css`
+ ${containerTokens.onDark}
+ `,
+ onLight: css`
+ ${containerTokens.onLight}
+ `,
+ },
+ },
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx
new file mode 100644
index 0000000000..184868f947
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx
@@ -0,0 +1,57 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Heading } from '../../../typograpy/components/Heading/Heading';
+import { Button } from '../../components/Button/Button';
+
+import { ViewContainer } from './ViewContainer';
+
+type StoryViewProps = ComponentProps;
+
+const meta: Meta = {
+ title: 'plasma_b2c/ViewContainer',
+ decorators: [WithTheme],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const backgroundPrimary = '--background-primary';
+const textPrimary = '--text-primary';
+
+const ViewExample = ({ view }: StoryViewProps) => {
+ return (
+ <>
+ view: {view}
+
+
+ Inside ViewContainer
+
+
+
+
+
+ );
+};
+
+export const Default: Story = {
+ render: () => {
+ return (
+ <>
+
+
+
+
+
+
+ Inverse in progress
+
+
+ );
+ },
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.ts
new file mode 100644
index 0000000000..e915ded389
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.ts
@@ -0,0 +1,8 @@
+import { viewContainerConfig } from '../../../../components/ViewContainer';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './ViewContainer.config';
+
+const mergedConfig = mergeConfig(viewContainerConfig, config);
+
+export const ViewContainer = component(mergedConfig);
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/tokens.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/tokens.ts
new file mode 100644
index 0000000000..1569e79ebf
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/tokens.ts
@@ -0,0 +1,183 @@
+// Этот файл будет генерироваться автоматически складываться рядом с темой, например plasma_b2c и т.д.
+
+export const containerTokens = {
+ onDark: `
+ --background-primary: var(--dark-background-primary);
+ --text-primary-hover: var(--on-dark-text-primary-hover);
+ --text-primary-active: var(--on-dark-text-primary-active);
+ --text-primary: var(--on-dark-text-primary);
+ --text-secondary-hover: var(--on-dark-text-secondary-hover);
+ --text-secondary-active: var(--on-dark-text-secondary-active);
+ --text-secondary: var(--on-dark-text-secondary);
+ --text-tertiary-hover: var(--on-dark-text-tertiary-hover);
+ --text-tertiary-active: var(--on-dark-text-tertiary-active);
+ --text-tertiary: var(--on-dark-text-tertiary);
+ --text-paragraph-hover: var(--on-dark-text-paragraph-hover);
+ --text-paragraph-active: var(--on-dark-text-paragraph-active);
+ --text-paragraph: var(--on-dark-text-paragraph);
+ --text-accent-hover: var(--on-dark-text-accent-hover);
+ --text-accent-active: var(--on-dark-text-accent-active);
+ --text-accent: var(--on-dark-text-accent);
+ --text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover);
+ --text-accent-gradient-active: var(--on-dark-text-accent-gradient-active);
+ --text-accent-gradient: var(--on-dark-text-accent-gradient);
+ --text-positive-hover: var(--on-dark-text-positive-hover);
+ --text-positive-active: var(--on-dark-text-positive-active);
+ --text-positive: var(--on-dark-text-positive);
+ --text-warning-hover: var(--on-dark-text-warning-hover);
+ --text-warning-active: var(--on-dark-text-warning-active);
+ --text-warning: var(--on-dark-text-warning);
+ --text-negative-hover: var(--on-dark-text-negative-hover);
+ --text-negative-active: var(--on-dark-text-negative-active);
+ --text-negative: var(--on-dark-text-negative);
+ --surface-solid-primary-hover: var(--on-dark-surface-solid-primary-hover);
+ --surface-solid-primary-active: var(--on-dark-surface-solid-primary-active);
+ --surface-solid-primary: var(--on-dark-surface-solid-primary);
+ --surface-solid-secondary-hover: var(--on-dark-surface-solid-secondary-hover);
+ --surface-solid-secondary-active: var(--on-dark-surface-solid-secondary-active);
+ --surface-solid-secondary: var(--on-dark-surface-solid-secondary);
+ --surface-solid-tertiary-hover: var(--on-dark-surface-solid-tertiary-hover);
+ --surface-solid-tertiary-active: var(--on-dark-surface-solid-tertiary-active);
+ --surface-solid-tertiary: var(--on-dark-surface-solid-tertiary);
+ --surface-solid-card-hover: var(--on-dark-surface-solid-card-hover);
+ --surface-solid-card-active: var(--on-dark-surface-solid-card-active);
+ --surface-solid-card: var(--on-dark-surface-solid-card);
+ --surface-solid-default-hover: var(--on-dark-surface-solid-default-hover);
+ --surface-solid-default-active: var(--on-dark-surface-solid-default-active);
+ --surface-solid-default: var(--on-dark-surface-solid-default);
+ --surface-transparent-primary-hover: var(--on-dark-surface-transparent-primary-hover);
+ --surface-transparent-primary-active: var(--on-dark-surface-transparent-primary-active);
+ --surface-transparent-primary: var(--on-dark-surface-transparent-primary);
+ --surface-transparent-secondary-hover: var(--on-dark-surface-transparent-secondary-hover);
+ --surface-transparent-secondary-active: var(--on-dark-surface-transparent-secondary-active);
+ --surface-transparent-secondary: var(--on-dark-surface-transparent-secondary);
+ --surface-transparent-tertiary-hover: var(--on-dark-surface-transparent-tertiary-hover);
+ --surface-transparent-tertiary-active: var(--on-dark-surface-transparent-tertiary-active);
+ --surface-transparent-tertiary: var(--on-dark-surface-transparent-tertiary);
+ --surface-transparent-deep-hover: var(--on-dark-surface-transparent-deep-hover);
+ --surface-transparent-deep-active: var(--on-dark-surface-transparent-deep-active);
+ --surface-transparent-deep: var(--on-dark-surface-transparent-deep);
+ --surface-transparent-card-hover: var(--on-dark-surface-transparent-card-hover);
+ --surface-transparent-card-active: var(--on-dark-surface-transparent-card-active);
+ --surface-transparent-card: var(--on-dark-surface-transparent-card);
+ --surface-accent-hover: var(--on-dark-surface-accent-hover);
+ --surface-accent-active: var(--on-dark-surface-accent-active);
+ --surface-accent: var(--on-dark-surface-accent);
+ --surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover);
+ --surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active);
+ --surface-accent-gradient: var(--on-dark-surface-accent-gradient);
+ --surface-positive-hover: var(--on-dark-surface-positive-hover);
+ --surface-positive-active: var(--on-dark-surface-positive-active);
+ --surface-positive: var(--on-dark-surface-positive);
+ --surface-warning-hover: var(--on-dark-surface-warning-hover);
+ --surface-warning-active: var(--on-dark-surface-warning-active);
+ --surface-warning: var(--on-dark-surface-warning);
+ --surface-negative-hover: var(--on-dark-surface-negative-hover);
+ --surface-negative-active: var(--on-dark-surface-negative-active);
+ --surface-negative: var(--on-dark-surface-negative);
+ --inverse-text-primary-hover: var(--on-light-text-primary-hover);
+ --inverse-text-primary-active: var(--on-light-text-primary-active);
+ --inverse-text-primary: var(--on-light-text-primary);
+ --inverse-text-secondary-hover: var(--on-light-text-secondary-hover);
+ --inverse-text-secondary-active: var(--on-light-text-secondary-active);
+ --inverse-text-secondary: var(--on-light-text-secondary);
+ --inverse-text-tertiary-hover: var(--on-light-text-tertiary-hover);
+ --inverse-text-tertiary-active: var(--on-light-text-tertiary-active);
+ --inverse-text-tertiary: var(--on-light-text-tertiary);
+ --inverse-text-paragraph-hover: var(--on-light-text-paragraph-hover);
+ --inverse-text-paragraph-active: var(--on-light-text-paragraph-active);
+ --inverse-text-paragraph: var(--on-light-text-paragraph);
+ --inverse-text-paragraph: var(--on-light-text-paragraph);
+ --surface-skeleton-gradient: var(--on-dark-surface-skeleton-gradient);
+ --surface-skeleton-deep-gradient: var(--on-dark-surface-skeleton-deep-gradient);
+ `,
+ onLight: `
+ --background-primary: var(--light-background-primary);
+ --text-primary-hover: var(--on-light-text-primary-hover);
+ --text-primary-active: var(--on-light-text-primary-active);
+ --text-primary: var(--on-light-text-primary);
+ --text-secondary-hover: var(--on-light-text-secondary-hover);
+ --text-secondary-active: var(--on-light-text-secondary-active);
+ --text-secondary: var(--on-light-text-secondary);
+ --text-tertiary-hover: var(--on-light-text-tertiary-hover);
+ --text-tertiary-active: var(--on-light-text-tertiary-active);
+ --text-tertiary: var(--on-light-text-tertiary);
+ --text-paragraph-hover: var(--on-light-text-paragraph-hover);
+ --text-paragraph-active: var(--on-light-text-paragraph-active);
+ --text-paragraph: var(--on-light-text-paragraph);
+ --text-accent-hover: var(--on-light-text-accent-hover);
+ --text-accent-active: var(--on-light-text-accent-active);
+ --text-accent: var(--on-light-text-accent);
+ --text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover);
+ --text-accent-gradient-active: var(--on-light-text-accent-gradient-active);
+ --text-accent-gradient: var(--on-light-text-accent-gradient);
+ --text-positive-hover: var(--on-light-text-positive-hover);
+ --text-positive-active: var(--on-light-text-positive-active);
+ --text-positive: var(--on-light-text-positive);
+ --text-warning-hover: var(--on-light-text-warning-hover);
+ --text-warning-active: var(--on-light-text-warning-active);
+ --text-warning: var(--on-light-text-warning);
+ --text-negative-hover: var(--on-light-text-negative-hover);
+ --text-negative-active: var(--on-light-text-negative-active);
+ --text-negative: var(--on-light-text-negative);
+ --surface-solid-primary-hover: var(--on-light-surface-solid-primary-hover);
+ --surface-solid-primary-active: var(--on-light-surface-solid-primary-active);
+ --surface-solid-primary: var(--on-light-surface-solid-primary);
+ --surface-solid-secondary-hover: var(--on-light-surface-solid-secondary-hover);
+ --surface-solid-secondary-active: var(--on-light-surface-solid-secondary-active);
+ --surface-solid-secondary: var(--on-light-surface-solid-secondary);
+ --surface-solid-tertiary-hover: var(--on-light-surface-solid-tertiary-hover);
+ --surface-solid-tertiary-active: var(--on-light-surface-solid-tertiary-active);
+ --surface-solid-tertiary: var(--on-light-surface-solid-tertiary);
+ --surface-solid-card-hover: var(--on-light-surface-solid-card-hover);
+ --surface-solid-card-active: var(--on-light-surface-solid-card-active);
+ --surface-solid-card: var(--on-light-surface-solid-card);
+ --surface-solid-default-hover: var(--on-light-surface-solid-default-hover);
+ --surface-solid-default-active: var(--on-light-surface-solid-default-active);
+ --surface-solid-default: var(--on-light-surface-solid-default);
+ --surface-transparent-primary-hover: var(--on-light-surface-transparent-primary-hover);
+ --surface-transparent-primary-active: var(--on-light-surface-transparent-primary-active);
+ --surface-transparent-primary: var(--on-light-surface-transparent-primary);
+ --surface-transparent-secondary-hover: var(--on-light-surface-transparent-secondary-hover);
+ --surface-transparent-secondary-active: var(--on-light-surface-transparent-secondary-active);
+ --surface-transparent-secondary: var(--on-light-surface-transparent-secondary);
+ --surface-transparent-tertiary-hover: var(--on-light-surface-transparent-tertiary-hover);
+ --surface-transparent-tertiary-active: var(--on-light-surface-transparent-tertiary-active);
+ --surface-transparent-tertiary: var(--on-light-surface-transparent-tertiary);
+ --surface-transparent-deep-hover: var(--on-light-surface-transparent-deep-hover);
+ --surface-transparent-deep-active: var(--on-light-surface-transparent-deep-active);
+ --surface-transparent-deep: var(--on-light-surface-transparent-deep);
+ --surface-transparent-card-hover: var(--on-light-surface-transparent-card-hover);
+ --surface-transparent-card-active: var(--on-light-surface-transparent-card-active);
+ --surface-transparent-card: var(--on-light-surface-transparent-card);
+ --surface-accent-hover: var(--on-light-surface-accent-hover);
+ --surface-accent-active: var(--on-light-surface-accent-active);
+ --surface-accent: var(--on-light-surface-accent);
+ --surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover);
+ --surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active);
+ --surface-accent-gradient: var(--on-light-surface-accent-gradient);
+ --surface-positive-hover: var(--on-light-surface-positive-hover);
+ --surface-positive-active: var(--on-light-surface-positive-active);
+ --surface-positive: var(--on-light-surface-positive);
+ --surface-warning-hover: var(--on-light-surface-warning-hover);
+ --surface-warning-active: var(--on-light-surface-warning-active);
+ --surface-warning: var(--on-light-surface-warning);
+ --surface-negative-hover: var(--on-light-surface-negative-hover);
+ --surface-negative-active: var(--on-light-surface-negative-active);
+ --surface-negative: var(--on-light-surface-negative);
+ --inverse-text-primary-hover: var(--on-dark-text-primary-hover);
+ --inverse-text-primary-active: var(--on-dark-text-primary-active);
+ --inverse-text-primary: var(--on-dark-text-primary);
+ --inverse-text-secondary-hover: var(--on-dark-text-secondary-hover);
+ --inverse-text-secondary-active: var(--on-dark-text-secondary-active);
+ --inverse-text-secondary: var(--on-dark-text-secondary);
+ --inverse-text-tertiary-hover: var(--on-dark-text-tertiary-hover);
+ --inverse-text-tertiary-active: var(--on-dark-text-tertiary-active);
+ --inverse-text-tertiary: var(--on-dark-text-tertiary);
+ --inverse-text-paragraph-hover: var(--on-dark-text-paragraph-hover);
+ --inverse-text-paragraph-active: var(--on-dark-text-paragraph-active);
+ --inverse-text-paragraph: var(--on-dark-text-paragraph);
+ --surface-skeleton-gradient: var(--on-light-surface-skeleton-gradient);
+ --surface-skeleton-deep-gradient: var(--on-light-surface-skeleton-deep-gradient);
+ `,
+};
diff --git a/packages/plasma-new-hope/src/examples/themes/plasma_b2c.module.css b/packages/plasma-new-hope/src/examples/themes/plasma_b2c.module.css
index 46ef3f89e8..de16490784 100644
--- a/packages/plasma-new-hope/src/examples/themes/plasma_b2c.module.css
+++ b/packages/plasma-new-hope/src/examples/themes/plasma_b2c.module.css
@@ -258,6 +258,10 @@
--on-light-overlay-blur: rgba(249, 249, 249, 0.28);
--surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
--surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-dark-surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+ --on-dark-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-light-surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+ --on-light-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
--shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
--shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
@@ -532,6 +536,10 @@
--on-light-overlay-blur: rgba(249, 249, 249, 0.28);
--surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
--surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+ --on-dark-surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+ --on-dark-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-light-surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+ --on-light-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
--shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
--shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
diff --git a/packages/plasma-new-hope/src/examples/themes/plasma_web.module.css b/packages/plasma-new-hope/src/examples/themes/plasma_web.module.css
index 46ef3f89e8..de16490784 100644
--- a/packages/plasma-new-hope/src/examples/themes/plasma_web.module.css
+++ b/packages/plasma-new-hope/src/examples/themes/plasma_web.module.css
@@ -258,6 +258,10 @@
--on-light-overlay-blur: rgba(249, 249, 249, 0.28);
--surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
--surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-dark-surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+ --on-dark-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-light-surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+ --on-light-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
--shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
--shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
@@ -532,6 +536,10 @@
--on-light-overlay-blur: rgba(249, 249, 249, 0.28);
--surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
--surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+ --on-dark-surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+ --on-dark-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+ --on-light-surface-skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+ --on-light-surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
--shadow-down-soft-s: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
--shadow-down-soft-m: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
--shadow-down-soft-l: 0px 60px 112px -8px rgba(0, 0, 0, 0.08);
diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts
index 1a971d949e..e2b74b0201 100644
--- a/packages/plasma-new-hope/src/index.ts
+++ b/packages/plasma-new-hope/src/index.ts
@@ -52,3 +52,4 @@ export * from './components/Range';
export * from './components/Accordion';
export * from './components/DatePicker';
export * from './components/Portal';
+export * from './components/ViewContainer';