@salutejs/sdds-serv 0.314.0-canary.2020.15824629894.0 → 0.314.0-canary.2021.15776478579.0

package/emotion/es/components/Typography/Text.config.js

@@ -1,119 +1,43 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-l-font-family);\n                ",
-        ": var(--plasma-typo-text-l-font-size);\n                ",
-        ": var(--plasma-typo-text-l-font-style);\n                ",
-        ": var(--plasma-typo-text-l-font-weight);\n                ",
-        ": var(--plasma-typo-text-l-bold-font-weight);\n                ",
-        ": var(--plasma-typo-text-l-medium-font-weight);\n                ",
-        ": var(--plasma-typo-text-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-text-l-line-height);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-m-font-family);\n                ",
-        ": var(--plasma-typo-text-m-font-size);\n                ",
-        ": var(--plasma-typo-text-m-font-style);\n                ",
-        ": var(--plasma-typo-text-m-font-weight);\n                ",
-        ": var(--plasma-typo-text-m-bold-font-weight);\n                ",
-        ": var(--plasma-typo-text-m-medium-font-weight);\n                ",
-        ": var(--plasma-typo-text-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-text-m-line-height);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-s-font-family);\n                ",
-        ": var(--plasma-typo-text-s-font-size);\n                ",
-        ": var(--plasma-typo-text-s-font-style);\n                ",
-        ": var(--plasma-typo-text-s-font-weight);\n                ",
-        ": var(--plasma-typo-text-s-bold-font-weight);\n                ",
-        ": var(--plasma-typo-text-s-medium-font-weight);\n                ",
-        ": var(--plasma-typo-text-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-text-s-line-height);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-text-xs-font-family);\n                ",
-        ": var(--plasma-typo-text-xs-font-size);\n                ",
-        ": var(--plasma-typo-text-xs-font-style);\n                ",
-        ": var(--plasma-typo-text-xs-font-weight);\n                ",
-        ": var(--plasma-typo-text-xs-bold-font-weight);\n                ",
-        ": var(--plasma-typo-text-xs-medium-font-weight);\n                ",
-        ": var(--plasma-typo-text-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-text-xs-line-height);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion';
 export var configL = {
-    defaults: {
-        size: 'l'
-    },
-    variations: {
-        size: {
-            l: css(_templateObject(), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
-        }
+  defaults: {
+    size: 'l'
+  },
+  variations: {
+    size: {
+      l: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-l-font-family);\n                ", ": var(--plasma-typo-text-l-font-size);\n                ", ": var(--plasma-typo-text-l-font-style);\n                ", ": var(--plasma-typo-text-l-font-weight);\n                ", ": var(--plasma-typo-text-l-bold-font-weight);\n                ", ": var(--plasma-typo-text-l-medium-font-weight);\n                ", ": var(--plasma-typo-text-l-letter-spacing);\n                ", ": var(--plasma-typo-text-l-line-height);\n            "])), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
     }
+  }
 };
 export var configM = {
-    defaults: {
-        size: 'm'
-    },
-    variations: {
-        size: {
-            m: css(_templateObject1(), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
-        }
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-m-font-family);\n                ", ": var(--plasma-typo-text-m-font-size);\n                ", ": var(--plasma-typo-text-m-font-style);\n                ", ": var(--plasma-typo-text-m-font-weight);\n                ", ": var(--plasma-typo-text-m-bold-font-weight);\n                ", ": var(--plasma-typo-text-m-medium-font-weight);\n                ", ": var(--plasma-typo-text-m-letter-spacing);\n                ", ": var(--plasma-typo-text-m-line-height);\n            "])), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
     }
+  }
 };
 export var configS = {
-    defaults: {
-        size: 's'
-    },
-    variations: {
-        size: {
-            s: css(_templateObject2(), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
-        }
+  defaults: {
+    size: 's'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-s-font-family);\n                ", ": var(--plasma-typo-text-s-font-size);\n                ", ": var(--plasma-typo-text-s-font-style);\n                ", ": var(--plasma-typo-text-s-font-weight);\n                ", ": var(--plasma-typo-text-s-bold-font-weight);\n                ", ": var(--plasma-typo-text-s-medium-font-weight);\n                ", ": var(--plasma-typo-text-s-letter-spacing);\n                ", ": var(--plasma-typo-text-s-line-height);\n            "])), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
     }
+  }
 };
 export var configXS = {
-    defaults: {
-        size: 'xs'
-    },
-    variations: {
-        size: {
-            xs: css(_templateObject3(), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
-        }
+  defaults: {
+    size: 'xs'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-text-xs-font-family);\n                ", ": var(--plasma-typo-text-xs-font-size);\n                ", ": var(--plasma-typo-text-xs-font-style);\n                ", ": var(--plasma-typo-text-xs-font-weight);\n                ", ": var(--plasma-typo-text-xs-bold-font-weight);\n                ", ": var(--plasma-typo-text-xs-medium-font-weight);\n                ", ": var(--plasma-typo-text-xs-letter-spacing);\n                ", ": var(--plasma-typo-text-xs-line-height);\n            "])), typographyTokens.typoFontFamily, typographyTokens.typoFontSize, typographyTokens.typoFontStyle, typographyTokens.typoFontWeight, typographyTokens.typoFontWeightBold, typographyTokens.typoFontWeightMedium, typographyTokens.typoFontLetterSpacing, typographyTokens.typoFontLineHeight)
     }
-};
+  }
+};

package/emotion/es/components/Typography/Typography.js

@@ -3,40 +3,40 @@ import { configL as bodyConfigLCustom, configM as bodyConfigMCustom, configS as
 import { configL as dsplConfigLCustom, configM as dsplConfigMCustom, configS as dsplConfigSCustom } from './Dspl.config';
 import { configH1 as headingConfigH1Custom, configH2 as headingConfigH2Custom, configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom } from './Heading.config';
 import { configL as textConfigLCustom, configM as textConfigMCustom, configS as textConfigSCustom, configXS as textConfigXSCustom } from './Text.config';
-var bodyMConfig = mergeConfig(bodyConfig, bodyConfigMCustom);
-var BodyMComponent = component(bodyMConfig);
-var bodyLConfig = mergeConfig(bodyConfig, bodyConfigLCustom);
-var BodyLComponent = component(bodyLConfig);
-var bodySConfig = mergeConfig(bodyConfig, bodyConfigSCustom);
-var BodySComponent = component(bodySConfig);
-var bodyXSConfig = mergeConfig(bodyConfig, bodyConfigXSCustom);
-var BodyXSComponent = component(bodyXSConfig);
-var bodyXXSConfig = mergeConfig(bodyConfig, bodyConfigXXSCustom);
-var BodyXXSComponent = component(bodyXXSConfig);
-var dsplMConfig = mergeConfig(dsplConfig, dsplConfigMCustom);
-var DsplMComponent = component(dsplMConfig);
-var dsplLConfig = mergeConfig(dsplConfig, dsplConfigLCustom);
-var DsplLComponent = component(dsplLConfig);
-var dsplSConfig = mergeConfig(dsplConfig, dsplConfigSCustom);
-var DsplSComponent = component(dsplSConfig);
-var heading1Config = mergeConfig(headingConfig, headingConfigH1Custom);
-var Heading1Component = component(heading1Config);
-var heading2Config = mergeConfig(headingConfig, headingConfigH2Custom);
-var Heading2Component = component(heading2Config);
-var heading3Config = mergeConfig(headingConfig, headingConfigH3Custom);
-var Heading3Component = component(heading3Config);
-var heading4Config = mergeConfig(headingConfig, headingConfigH4Custom);
-var Heading4Component = component(heading4Config);
-var heading5Config = mergeConfig(headingConfig, headingConfigH5Custom);
-var Heading5Component = component(heading5Config);
-var textMConfig = mergeConfig(textConfig, textConfigMCustom);
-var TextMComponent = component(textMConfig);
-var textLConfig = mergeConfig(textConfig, textConfigLCustom);
-var TextLComponent = component(textLConfig);
-var textSConfig = mergeConfig(textConfig, textConfigSCustom);
-var TextSComponent = component(textSConfig);
-var textXSConfig = mergeConfig(textConfig, textConfigXSCustom);
-var TextXSComponent = component(textXSConfig);
+var bodyMConfig = /*#__PURE__*/mergeConfig(bodyConfig, bodyConfigMCustom);
+var BodyMComponent = /*#__PURE__*/component(bodyMConfig);
+var bodyLConfig = /*#__PURE__*/mergeConfig(bodyConfig, bodyConfigLCustom);
+var BodyLComponent = /*#__PURE__*/component(bodyLConfig);
+var bodySConfig = /*#__PURE__*/mergeConfig(bodyConfig, bodyConfigSCustom);
+var BodySComponent = /*#__PURE__*/component(bodySConfig);
+var bodyXSConfig = /*#__PURE__*/mergeConfig(bodyConfig, bodyConfigXSCustom);
+var BodyXSComponent = /*#__PURE__*/component(bodyXSConfig);
+var bodyXXSConfig = /*#__PURE__*/mergeConfig(bodyConfig, bodyConfigXXSCustom);
+var BodyXXSComponent = /*#__PURE__*/component(bodyXXSConfig);
+var dsplMConfig = /*#__PURE__*/mergeConfig(dsplConfig, dsplConfigMCustom);
+var DsplMComponent = /*#__PURE__*/component(dsplMConfig);
+var dsplLConfig = /*#__PURE__*/mergeConfig(dsplConfig, dsplConfigLCustom);
+var DsplLComponent = /*#__PURE__*/component(dsplLConfig);
+var dsplSConfig = /*#__PURE__*/mergeConfig(dsplConfig, dsplConfigSCustom);
+var DsplSComponent = /*#__PURE__*/component(dsplSConfig);
+var heading1Config = /*#__PURE__*/mergeConfig(headingConfig, headingConfigH1Custom);
+var Heading1Component = /*#__PURE__*/component(heading1Config);
+var heading2Config = /*#__PURE__*/mergeConfig(headingConfig, headingConfigH2Custom);
+var Heading2Component = /*#__PURE__*/component(heading2Config);
+var heading3Config = /*#__PURE__*/mergeConfig(headingConfig, headingConfigH3Custom);
+var Heading3Component = /*#__PURE__*/component(heading3Config);
+var heading4Config = /*#__PURE__*/mergeConfig(headingConfig, headingConfigH4Custom);
+var Heading4Component = /*#__PURE__*/component(heading4Config);
+var heading5Config = /*#__PURE__*/mergeConfig(headingConfig, headingConfigH5Custom);
+var Heading5Component = /*#__PURE__*/component(heading5Config);
+var textMConfig = /*#__PURE__*/mergeConfig(textConfig, textConfigMCustom);
+var TextMComponent = /*#__PURE__*/component(textMConfig);
+var textLConfig = /*#__PURE__*/mergeConfig(textConfig, textConfigLCustom);
+var TextLComponent = /*#__PURE__*/component(textLConfig);
+var textSConfig = /*#__PURE__*/mergeConfig(textConfig, textConfigSCustom);
+var TextSComponent = /*#__PURE__*/component(textSConfig);
+var textXSConfig = /*#__PURE__*/mergeConfig(textConfig, textConfigXSCustom);
+var TextXSComponent = /*#__PURE__*/component(textXSConfig);
 export var BodyM = BodyMComponent;
 export var BodyL = BodyLComponent;
 export var BodyS = BodySComponent;
@@ -53,4 +53,4 @@ export var H5 = Heading5Component;
 export var TextM = TextMComponent;
 export var TextL = TextLComponent;
 export var TextS = TextSComponent;
-export var TextXS = TextXSComponent;
+export var TextXS = TextXSComponent;

package/emotion/es/components/Typography/Typography.stories.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import {
+    DsplL,
+    DsplM,
+    DsplS,
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    BodyL,
+    BodyM,
+    BodyS,
+    BodyXS,
+    BodyXXS,
+    TextL,
+    TextM,
+    TextS,
+    TextXS,
+} from '.';
+
+const meta: Meta = {
+    title: 'Data Display/Typography',
+    component: DsplL,
+    argTypes: {
+        ...disableProps(['size', 'bold', 'medium', 'as', 'forwardedAs', 'isNumeric']),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+        breakWord: true,
+    },
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Dspl: Story = {
+    render: (props) => (
+        <>
+            <DsplL bold={false} {...props}>
+                DsplL
+            </DsplL>
+            <DsplL {...props}>DsplL Bold</DsplL>
+            <DsplL medium {...props}>
+                DsplL Medium
+            </DsplL>
+            <DsplL bold={false} isNumeric {...props}>
+                1234567890
+            </DsplL>
+            <DsplM bold={false} {...props}>
+                DsplM
+            </DsplM>
+            <DsplM {...props}>DsplM Bold</DsplM>
+            <DsplM medium {...props}>
+                DsplM Medium
+            </DsplM>
+            <DsplM bold={false} isNumeric {...props}>
+                1234567890
+            </DsplM>
+            <DsplS bold={false} {...props}>
+                DsplS
+            </DsplS>
+            <DsplS {...props}>DsplS Bold</DsplS>
+            <DsplS medium {...props}>
+                DsplS Medium
+            </DsplS>
+            <DsplS bold={false} isNumeric {...props}>
+                1234567890
+            </DsplS>
+        </>
+    ),
+};
+
+export const H: Story = {
+    render: (props) => (
+        <>
+            <H1 bold={false} {...props}>
+                H1
+            </H1>
+            <H1 {...props}>H1 Bold</H1>
+            <H1 medium {...props}>
+                H1 Medium
+            </H1>
+            <H1 bold={false} isNumeric {...props}>
+                1234567890
+            </H1>
+            <H2 bold={false} {...props}>
+                H2
+            </H2>
+            <H2 {...props}>H2 Bold</H2>
+            <H2 medium {...props}>
+                H2 Medium
+            </H2>
+            <H2 bold={false} isNumeric {...props}>
+                1234567890
+            </H2>
+            <H3 bold={false} {...props}>
+                H3
+            </H3>
+            <H3 {...props}>H3 Bold</H3>
+            <H3 medium {...props}>
+                H3 Medium
+            </H3>
+            <H3 bold={false} isNumeric {...props}>
+                1234567890
+            </H3>
+            <H4 bold={false} {...props}>
+                H4
+            </H4>
+            <H4 {...props}>H4 Bold</H4>
+            <H4 medium {...props}>
+                H4 Medium
+            </H4>
+            <H4 bold={false} isNumeric {...props}>
+                1234567890
+            </H4>
+            <H5 bold={false} {...props}>
+                H5
+            </H5>
+            <H5 {...props}>H5 Bold</H5>
+            <H5 medium {...props}>
+                H5 Medium
+            </H5>
+            <H5 bold={false} isNumeric {...props}>
+                1234567890
+            </H5>
+        </>
+    ),
+};
+
+export const Body: Story = {
+    render: (props) => (
+        <>
+            <BodyL {...props}>BodyL</BodyL>
+            <BodyL bold {...props}>
+                BodyL Bold
+            </BodyL>
+            <BodyL medium {...props}>
+                BodyL Medium
+            </BodyL>
+            <BodyL isNumeric {...props}>
+                1234567890
+            </BodyL>
+            <BodyM {...props}>BodyM</BodyM>
+            <BodyM bold {...props}>
+                BodyM Bold
+            </BodyM>
+            <BodyM medium {...props}>
+                BodyM Medium
+            </BodyM>
+            <BodyM isNumeric {...props}>
+                1234567890
+            </BodyM>
+            <BodyS {...props}>BodyS</BodyS>
+            <BodyS bold {...props}>
+                BodyS Bold
+            </BodyS>
+            <BodyS medium {...props}>
+                BodyS Medium
+            </BodyS>
+            <BodyS isNumeric {...props}>
+                1234567890
+            </BodyS>
+            <BodyXS {...props}>BodyXS</BodyXS>
+            <BodyXS bold {...props}>
+                BodyXS Bold
+            </BodyXS>
+            <BodyXS medium {...props}>
+                BodyXS Medium
+            </BodyXS>
+            <BodyXS isNumeric {...props}>
+                1234567890
+            </BodyXS>
+            <BodyXXS {...props}>BodyXXS</BodyXXS>
+            <BodyXXS bold {...props}>
+                BodyXXS Bold
+            </BodyXXS>
+            <BodyXXS medium {...props}>
+                BodyXXS Medium
+            </BodyXXS>
+            <BodyXXS isNumeric {...props}>
+                1234567890
+            </BodyXXS>
+        </>
+    ),
+};
+
+export const Text: Story = {
+    render: (props) => (
+        <>
+            <TextL {...props}>TextL</TextL>
+            <TextL bold {...props}>
+                TextL Bold
+            </TextL>
+            <TextL medium {...props}>
+                TextL Medium
+            </TextL>
+            <TextL isNumeric {...props}>
+                1234567890
+            </TextL>
+            <TextM {...props}>TextM</TextM>
+            <TextM bold {...props}>
+                TextM Bold
+            </TextM>
+            <TextM medium {...props}>
+                TextM Medium
+            </TextM>
+            <TextM isNumeric {...props}>
+                1234567890
+            </TextM>
+            <TextS {...props}>TextS</TextS>
+            <TextS bold {...props}>
+                TextS Bold
+            </TextS>
+            <TextS medium {...props}>
+                TextS Medium
+            </TextS>
+            <TextS isNumeric {...props}>
+                1234567890
+            </TextS>
+            <TextXS {...props}>TextXS</TextXS>
+            <TextXS bold {...props}>
+                TextXS Bold
+            </TextXS>
+            <TextXS medium {...props}>
+                TextXS Medium
+            </TextXS>
+            <TextXS isNumeric {...props}>
+                1234567890
+            </TextXS>
+        </>
+    ),
+};

package/emotion/es/components/Typography/index.js

@@ -1 +1 @@
-export { BodyL, BodyM, BodyS, BodyXS, BodyXXS, DsplL, DsplM, DsplS, H1, H2, H3, H4, H5, TextL, TextM, TextS, TextXS } from './Typography';
+export { BodyL, BodyM, BodyS, BodyXS, BodyXXS, DsplL, DsplM, DsplS, H1, H2, H3, H4, H5, TextL, TextM, TextS, TextXS } from './Typography';

package/emotion/es/components/ViewContainer/ViewContainer.config.js

@@ -1,40 +1,12 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        "\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        "\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from '@salutejs/plasma-new-hope/emotion';
 import { viewContainer } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export var config = {
-    variations: {
-        view: {
-            onDark: css(_templateObject(), viewContainer.dark),
-            onLight: css(_templateObject1(), viewContainer.light)
-        }
+  variations: {
+    view: {
+      onDark: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", "\n            "])), viewContainer.dark),
+      onLight: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", "\n            "])), viewContainer.light)
     }
-};
+  }
+};

package/emotion/es/components/ViewContainer/ViewContainer.js

@@ -1,4 +1,4 @@
 import { viewContainerConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './ViewContainer.config';
-var mergedConfig = mergeConfig(viewContainerConfig, config);
-export var ViewContainer = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(viewContainerConfig, config);
+export var ViewContainer = /*#__PURE__*/component(mergedConfig);

package/emotion/es/components/ViewContainer/ViewContainer.stories.tsx

@@ -0,0 +1,67 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
+import { Checkbox } from '../Checkbox/Checkbox';
+
+import { ViewContainer } from './ViewContainer';
+
+type StoryViewProps = ComponentProps<typeof ViewContainer>;
+
+const meta: Meta<StoryViewProps> = {
+    title: 'Data Display/ViewContainer',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<StoryViewProps>;
+
+const ViewExample = ({ view }: StoryViewProps) => {
+    const style = view
+        ? {
+              background: view === 'onDark' ? '#1a1a1a' : '#ededed',
+              color: view === 'onDark' ? 'white' : 'black',
+          }
+        : undefined;
+
+    return (
+        <>
+            <h4>view: {view ?? 'default'}</h4>
+            <div>
+                <ViewContainer
+                    view={view}
+                    style={{
+                        ...style,
+                        padding: '1rem',
+                        borderRadius: '1rem',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '1rem',
+                    }}
+                >
+                    <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
+                    <Button text="default Button" />
+                    <Checkbox checked label="Label" />
+                    <TextField value="Example Value" label="Label" labelPlacement="inner" />
+                </ViewContainer>
+            </div>
+        </>
+    );
+};
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <>
+                <ViewExample />
+                <br />
+                <ViewExample view="onDark" />
+                <br />
+                <ViewExample view="onLight" />
+            </>
+        );
+    },
+};

package/emotion/es/components/ViewContainer/index.js

@@ -1 +1 @@
-export { ViewContainer } from './ViewContainer';
+export { ViewContainer } from './ViewContainer';

package/emotion/es/index.js

@@ -69,4 +69,4 @@ export * from './components/CodeField';
 export * from './components/List';
 export * from './components/Carousel';
 export * from './mixins';
-export * from './tokens';
+export * from './tokens';

package/emotion/es/mixins/index.js

@@ -1,4 +1,4 @@
 import { createApplyPaperMixin } from '@salutejs/plasma-new-hope/emotion';
 import * as allTokens from '@salutejs/sdds-themes/tokens/sdds_serv';
 export { addFocus, mediaQuery } from '@salutejs/plasma-new-hope/emotion';
-export var applyPaper = createApplyPaperMixin(allTokens);
+export var applyPaper = /*#__PURE__*/createApplyPaperMixin(allTokens);

package/emotion/es/tokens/index.js

@@ -1,2 +1,2 @@
 export { dsplL, dsplLBold, dsplM, dsplMBold, dsplS, dsplSBold, h1, h1Bold, h2, h2Bold, h3, h3Bold, h4, h4Bold, h5, h5Bold, bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, bodyXXS, bodyXXSBold, textL, textLBold, textM, textMBold, textS, textSBold, textXS, textXSBold } from '@salutejs/sdds-themes/tokens';
-export * from '@salutejs/sdds-themes/tokens/sdds_serv';
+export * from '@salutejs/sdds-themes/tokens/sdds_serv';

package/es/components/Carousel/Carousel.config.js

@@ -1,4 +1,4 @@
-import './Carousel.config_uusoxc.css';
+import './Carousel.config_1r461vi.css';
 var config = {
   defaults: {
     view: 'default',

package/es/components/Carousel/Carousel.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.config.js","sources":["../../../src-css/components/Carousel/Carousel.config.ts"],"sourcesContent":["import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        size: 's',\n    },\n    variations: {\n        view: {\n            default: css`\n                ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary);\n                ${tokens.paginationDotActiveBackground}: var(--surface-solid-default);\n                ${tokens.controlIconButtonColor}: var(--text-primary);\n                ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary);\n                ${tokens.controlIconButtonColorHover}: var(--text-primary);\n                ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n                ${tokens.controlIconButtonColorActive}: var(--text-primary);\n                ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n            `,\n        },\n        size: {\n            s: css`\n                ${tokens.controlIconButtonRadius}: 100%;\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","size","variations","default","s"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,SAAA;KAUV;AACDF,IAAAA,IAAI,EAAE;AACFG,MAAAA,CAAC,EAAA,UAAA;AAGL,KAAA;AACJ,GAAA;AACJ;;;;"}
+{"version":3,"file":"Carousel.config.js","sources":["../../../src-css/components/Carousel/Carousel.config.ts"],"sourcesContent":["import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        size: 's',\n    },\n    variations: {\n        view: {\n            default: css`\n                ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary);\n                ${tokens.paginationDotActiveBackground}: var(--surface-solid-default);\n            `,\n        },\n        size: {\n            s: css``,\n        },\n    },\n};\n"],"names":["config","defaults","view","size","variations","default","s"],"mappings":"AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;MACFG,SAAO,EAAA,SAAA;KAIV;AACDF,IAAAA,IAAI,EAAE;AACFG,MAAAA,CAAC,EAAA,UAAA;AACL,KAAA;AACJ,GAAA;AACJ;;;;"}

package/es/components/Carousel/Carousel.config_1r461vi.css

@@ -0,0 +1,2 @@
+.dv63qpm{--plasma-carousel-pagination-dot-background:var(--surface-transparent-tertiary);--plasma-carousel-pagination-dot-active-background:var(--surface-solid-default);}
+

package/es/components/Carousel/Carousel.css

@@ -1,2 +1,2 @@
-.Carousel_config_uusoxc_dv63qpm__af6cec3a{--plasma-carousel-pagination-dot-background:var(--surface-transparent-tertiary);--plasma-carousel-pagination-dot-active-background:var(--surface-solid-default);--plasma-carousel-control-icon-button-color:var(--text-primary);--plasma-carousel-control-icon-button-background-color:var(--surface-transparent-secondary);--plasma-carousel-control-icon-button-color-hover:var(--text-primary);--plasma-carousel-control-icon-button-background-color-hover:var(--surface-transparent-secondary-hover);--plasma-carousel-control-icon-button-color-active:var(--text-primary);--plasma-carousel-control-icon-button-background-color-active:var(--surface-transparent-secondary-active);}
-.Carousel_config_uusoxc_s13btmod__af6cec3a{--plasma-carousel-control-icon-button-radius:100%;}
+.Carousel_config_1r461vi_dv63qpm__2a4ae68a{--plasma-carousel-pagination-dot-background:var(--surface-transparent-tertiary);--plasma-carousel-pagination-dot-active-background:var(--surface-solid-default);}
+