@salutejs/sdds-serv 0.314.0-canary.2021.15824070198.0 → 0.314.0-canary.2022.15754718552.0

package/emotion/cjs/components/Tokens/Typography/Typography.stories.tsx

@@ -0,0 +1,278 @@
+import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { sdds_serv__dark, sdds_serv__light } from '@salutejs/sdds-themes';
+import {
+    InSpacingDecorator,
+    getGroupedTypographyTokens,
+    typographyPangrams,
+    upperFirstLetter,
+    typographyToCssMap,
+} from '@salutejs/plasma-sb-utils';
+import type {
+    TypographyStructure,
+    Breakpoint,
+    TypographyProperties,
+    TypographyWeight,
+} from '@salutejs/plasma-sb-utils';
+
+import { Accordion } from '../../Accordion/Accordion';
+import { ToastProvider, useToast } from '../../Toast/Toast';
+import { SegmentGroup } from '../../Segment/Segment';
+import type { ShowToastArgs } from '../../Toast';
+import { SegmentProvider, useSegment } from '../../Segment';
+
+import {
+    AccordionInfo,
+    AccordionTypographyTitle,
+    BreakpointSwitcher,
+    FontFamily,
+    FontPropsSwitcher,
+    FontWeightSwitcher,
+    StyledAccordionItem,
+    StyledSegmentItem,
+    TokenInfo,
+    TokenInfoWrapper,
+    TokenPropName,
+    TokenProps,
+    TokenPropsWrapper,
+    TokenPropValue,
+    TokenShortName,
+    TokenText,
+    TypographyTokensWrapper,
+} from './Typography.styles';
+
+const meta: Meta = {
+    title: 'Tokens/Typography',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+const themes: Record<string, TypographyStructure> = {
+    'sdds-serv:light': getGroupedTypographyTokens(sdds_serv__light[0]),
+    'sdds-serv:dark': getGroupedTypographyTokens(sdds_serv__dark[0]),
+};
+
+type FontWeightControllerProps = {
+    fontWeights: Array<TypographyWeight>;
+    setFontWeight: Dispatch<SetStateAction<TypographyWeight>>;
+};
+
+type BreakpointControllerProps = {
+    breakpoints: Array<Breakpoint>;
+    setBreakPoint: Dispatch<SetStateAction<Breakpoint>>;
+};
+
+type FontControllerProps = {
+    controlledParams: FontWeightControllerProps['fontWeights'] | BreakpointControllerProps['breakpoints'];
+    setCurrentParam: FontWeightControllerProps['setFontWeight'] | BreakpointControllerProps['setBreakPoint'];
+};
+
+const FontController: FC<FontControllerProps> = ({ controlledParams, setCurrentParam }) => {
+    const { selectedSegmentItems } = useSegment();
+
+    useEffect(() => {
+        setCurrentParam(selectedSegmentItems[0] as TypographyWeight & Breakpoint);
+    }, [selectedSegmentItems]);
+
+    return (
+        <SegmentGroup view="clear" size="xs" hasBackground pilled>
+            {controlledParams.map((param) => (
+                <StyledSegmentItem
+                    key={`label_${param}`}
+                    value={param}
+                    label={upperFirstLetter(param)}
+                    view="default"
+                    pilled
+                />
+            ))}
+        </SegmentGroup>
+    );
+};
+
+const FontParamsSwitcher: FC<FontWeightControllerProps & BreakpointControllerProps> = ({
+    fontWeights,
+    setFontWeight,
+    breakpoints,
+    setBreakPoint,
+}) => {
+    return (
+        <FontPropsSwitcher>
+            <SegmentProvider defaultSelected={[fontWeights[0]]} singleSelectedRequired>
+                <FontWeightSwitcher>
+                    <FontController controlledParams={fontWeights} setCurrentParam={setFontWeight} />
+                </FontWeightSwitcher>
+            </SegmentProvider>
+            <SegmentProvider defaultSelected={[breakpoints[0]]} singleSelectedRequired>
+                <BreakpointSwitcher>
+                    <FontController controlledParams={breakpoints} setCurrentParam={setBreakPoint} />
+                </BreakpointSwitcher>
+            </SegmentProvider>
+        </FontPropsSwitcher>
+    );
+};
+
+type TokenDataProps = {
+    title: string;
+    token: string;
+    size: string;
+    fontFamily: string;
+    fontWeight: TypographyWeight;
+    data: TypographyProperties;
+    copyToClipboard: (value: string) => Promise<void>;
+};
+
+const getFontProps = (fontFamily: string, data: TypographyProperties) => {
+    return Object.entries(data).reduce((acc, [name, value]) => {
+        acc += `${typographyToCssMap[name]}: ${value};\n`;
+        return acc;
+    }, `font-family: ${fontFamily};\n`);
+};
+
+const getFontTokens = (fontFamily: string, title: string, token: string, size: string, isBold) => {
+    return Object.values(typographyToCssMap).reduce((acc, value) => {
+        const tokenName = title === 'header' ? '' : `${token}-`;
+        const boldPart = isBold && value === 'font-weight' ? 'bold-' : '';
+        const fullTokenName = `--plasma-typo-${tokenName}${size}-${boldPart}`;
+
+        acc += `${value}: var(${fullTokenName}${value});\n`;
+        return acc;
+    }, `font-family: ${fontFamily};\n`);
+};
+
+const TokenData: FC<TokenDataProps> = ({ title, token, size, fontFamily, fontWeight, data, copyToClipboard }) => {
+    const actualTitle = title === 'header' ? size : title + size.toLocaleUpperCase();
+    const isBold = fontWeight === 'bold';
+
+    const copyFontTokens = () => {
+        const fontTokens = getFontTokens(fontFamily, title, token, size, isBold);
+        copyToClipboard(fontTokens);
+    };
+
+    const copyFontProps = () => {
+        const fontProps = getFontProps(fontFamily, data);
+        copyToClipboard(fontProps);
+    };
+
+    return (
+        <AccordionInfo>
+            <TokenShortName onClick={copyFontTokens}>
+                {actualTitle} {fontWeight.charAt(0).toLocaleUpperCase()}
+            </TokenShortName>
+
+            <TokenInfo>
+                <TokenText {...data} isDisplay={token === 'dspl'}>
+                    {typographyPangrams[token]}
+                </TokenText>
+                <TokenPropsWrapper onClick={copyFontProps}>
+                    {Object.entries(data).map(([name, value]) => {
+                        const cleanValue =
+                            name === 'fontSize' || name === 'lineHeight'
+                                ? Number(value.replace('rem', '')) * 16
+                                : value;
+                        return (
+                            <TokenProps>
+                                <TokenPropValue>{cleanValue}</TokenPropValue>
+                                <TokenPropName>{name}</TokenPropName>
+                            </TokenProps>
+                        );
+                    })}
+                </TokenPropsWrapper>
+            </TokenInfo>
+        </AccordionInfo>
+    );
+};
+
+const StoryDemoTypography = ({ context }) => {
+    const groupedTokens = themes[context.globals.theme];
+
+    const actualFontWeights = Object.keys(groupedTokens) as Array<TypographyWeight>;
+    const [fontWeight, setFontWeight] = useState<TypographyWeight>(actualFontWeights[0]);
+
+    const actualBreakpoints = Object.keys(groupedTokens[fontWeight]) as Array<Breakpoint>;
+    const [breakpoint, setBreakpoint] = useState<Breakpoint>(actualBreakpoints[0]);
+
+    const { showToast } = useToast();
+    const toastData = {
+        view: 'default',
+        size: 'm',
+        hasClose: true,
+        fade: false,
+        position: 'bottom',
+        offset: 0,
+        timeout: 3000,
+        role: 'alert',
+    } as ShowToastArgs;
+
+    const copyToClipboard = async (value: string) => {
+        try {
+            await navigator.clipboard.writeText(value);
+
+            showToast({
+                ...toastData,
+                text: 'Скопировано',
+            });
+        } catch (err) {
+            showToast({
+                ...toastData,
+                text: 'Ошибка при копировании текста',
+            });
+        }
+    };
+
+    if (!groupedTokens[fontWeight][breakpoint]) {
+        return null;
+    }
+
+    return (
+        <TypographyTokensWrapper>
+            <FontParamsSwitcher
+                fontWeights={actualFontWeights}
+                setFontWeight={setFontWeight}
+                breakpoints={actualBreakpoints}
+                setBreakPoint={setBreakpoint}
+            />
+            <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
+                {Object.entries(groupedTokens[fontWeight][breakpoint]).map(([token, { fontFamily, sizes }], index) => {
+                    const title = token === 'dspl' ? 'display' : token;
+
+                    return (
+                        <StyledAccordionItem
+                            key={title + fontFamily}
+                            eventKey={index}
+                            type="arrow"
+                            title={
+                                <AccordionTypographyTitle>
+                                    {upperFirstLetter(title)} <FontFamily>{fontFamily}</FontFamily>
+                                </AccordionTypographyTitle>
+                            }
+                        >
+                            <TokenInfoWrapper>
+                                {Object.entries(sizes).map(([size, data]) => (
+                                    <TokenData
+                                        key={size + title}
+                                        title={title}
+                                        fontWeight={fontWeight}
+                                        fontFamily={fontFamily}
+                                        token={token}
+                                        size={size}
+                                        data={data}
+                                        copyToClipboard={copyToClipboard}
+                                    />
+                                ))}
+                            </TokenInfoWrapper>
+                        </StyledAccordionItem>
+                    );
+                })}
+            </Accordion>
+        </TypographyTokensWrapper>
+    );
+};
+
+export const Default: StoryObj = {
+    render: (_, context) => (
+        <ToastProvider>
+            <StoryDemoTypography context={context} />
+        </ToastProvider>
+    ),
+};

package/emotion/cjs/components/Tokens/Typography/Typography.styles.js

@@ -1,208 +1,48 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get AccordionInfo () {
-        return AccordionInfo;
-    },
-    get AccordionTypographyTitle () {
-        return AccordionTypographyTitle;
-    },
-    get BreakpointSwitcher () {
-        return BreakpointSwitcher;
-    },
-    get FontFamily () {
-        return FontFamily;
-    },
-    get FontPropsSwitcher () {
-        return FontPropsSwitcher;
-    },
-    get FontWeightSwitcher () {
-        return FontWeightSwitcher;
-    },
-    get StyledAccordionItem () {
-        return StyledAccordionItem;
-    },
-    get StyledSegmentItem () {
-        return StyledSegmentItem;
-    },
-    get TokenInfo () {
-        return TokenInfo;
-    },
-    get TokenInfoWrapper () {
-        return TokenInfoWrapper;
-    },
-    get TokenPropName () {
-        return TokenPropName;
-    },
-    get TokenPropValue () {
-        return TokenPropValue;
-    },
-    get TokenProps () {
-        return TokenProps;
-    },
-    get TokenPropsWrapper () {
-        return TokenPropsWrapper;
-    },
-    get TokenShortName () {
-        return TokenShortName;
-    },
-    get TokenText () {
-        return TokenText;
-    },
-    get TypographyTokensWrapper () {
-        return TypographyTokensWrapper;
-    }
+exports.TypographyTokensWrapper = exports.TokenText = exports.TokenShortName = exports.TokenPropsWrapper = exports.TokenProps = exports.TokenPropValue = exports.TokenPropName = exports.TokenInfoWrapper = exports.TokenInfo = exports.StyledSegmentItem = exports.StyledAccordionItem = exports.FontWeightSwitcher = exports.FontPropsSwitcher = exports.FontFamily = exports.BreakpointSwitcher = exports.AccordionTypographyTitle = exports.AccordionInfo = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _plasmaNewHope = /*#__PURE__*/require("@salutejs/plasma-new-hope");
+var _Accordion = /*#__PURE__*/require("../../Accordion");
+var _Segment = /*#__PURE__*/require("../../Segment/Segment");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var TypographyTokensWrapper = exports.TypographyTokensWrapper = /*#__PURE__*/_styledComponents["default"].div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: 100%;\n    margin: 1.5rem auto auto 2.5rem;\n"])));
+var FontPropsSwitcher = exports.FontPropsSwitcher = /*#__PURE__*/_styledComponents["default"].div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin: -0.5rem 0 2.5rem;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    position: relative;\n    box-sizing: border-box;\n"])));
+var FontWeightSwitcher = exports.FontWeightSwitcher = /*#__PURE__*/_styledComponents["default"].div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n"])));
+var BreakpointSwitcher = exports.BreakpointSwitcher = /*#__PURE__*/_styledComponents["default"].div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: fit-content;\n\n    position: relative;\n\n    &:before {\n        content: '\u042D\u043A\u0440\u0430\u043D';\n        position: absolute;\n        top: 50%;\n        transform: translate(-100%, -50%);\n        left: -0.75rem;\n        color: var(--text-tertiary);\n\n        ", ";\n    }\n"])), _plasmaNewHope.bodyXS);
+var StyledSegmentItem = exports.StyledSegmentItem = /*#__PURE__*/(0, _styledComponents["default"])(_Segment.SegmentItem)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ": 1.75rem;\n    ", ": 0.375rem 0.5rem;\n"])), _plasmaNewHope.segmentTokens.itemHeight, _plasmaNewHope.segmentTokens.itemPilledPadding);
+var AccordionTypographyTitle = exports.AccordionTypographyTitle = /*#__PURE__*/_styledComponents["default"].div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-secondary);\n\n    ", ";\n"])), _plasmaNewHope.bodyM);
+var FontFamily = exports.FontFamily = /*#__PURE__*/_styledComponents["default"].span(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-tertiary);\n"])));
+var AccordionInfo = exports.AccordionInfo = /*#__PURE__*/_styledComponents["default"].div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 16.75rem 35.75rem;\n    grid-column-gap: 1.5rem;\n\n    max-width: 55.5rem;\n"])));
+var StyledAccordionItem = exports.StyledAccordionItem = /*#__PURE__*/(0, _styledComponents["default"])(_Accordion.AccordionItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n    --plasma-accordion-item-padding: 0;\n    --plasma-accordion-item-padding-vertical: 0;\n\n    border-bottom: unset;\n\n    .accordion-item-body {\n        margin-bottom: 2rem;\n        padding-top: 0.125rem;\n        transition: margin-bottom 0.2s, padding-top 0.2s;\n    }\n\n    [aria-expanded] {\n        margin-bottom: 1rem;\n    }\n\n    [aria-expanded='false'] {\n        margin-bottom: 1.125rem;\n\n        ", " {\n            opacity: 0;\n        }\n    }\n\n    [aria-expanded='false'] + div > .accordion-item-body {\n        margin: 0;\n        padding: 0;\n    }\n"])), AccordionInfo);
+var TokenInfoWrapper = exports.TokenInfoWrapper = /*#__PURE__*/_styledComponents["default"].div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n"])));
+var TokenShortName = exports.TokenShortName = /*#__PURE__*/_styledComponents["default"].div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n    cursor: copy;\n    color: var(--text-paragraph);\n\n    ", ";\n\n    &:hover {\n        color: var(--text-paragraph-hover);\n    }\n\n    &:active {\n        color: var(--text-paragraph-active);\n    }\n"])), _plasmaNewHope.bodyM);
+var TokenInfo = exports.TokenInfo = /*#__PURE__*/_styledComponents["default"].div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
+var TokenText = exports.TokenText = /*#__PURE__*/_styledComponents["default"].div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-primary);\n\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-style: ", ";\n\n    white-space: ", ";\n"])), function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var fontWeight = _ref2.fontWeight;
+  return fontWeight;
+}, function (_ref3) {
+  var lineHeight = _ref3.lineHeight;
+  return lineHeight;
+}, function (_ref4) {
+  var letterSpacing = _ref4.letterSpacing;
+  return letterSpacing;
+}, function (_ref5) {
+  var fontStyle = _ref5.fontStyle;
+  return fontStyle;
+}, function (_ref6) {
+  var isDisplay = _ref6.isDisplay;
+  return isDisplay ? 'nowrap' : 'normal';
 });
-var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
-var _plasmanewhope = require("@salutejs/plasma-new-hope");
-var _Accordion = require("../../Accordion");
-var _Segment = require("../../Segment/Segment");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-var TypographyTokensWrapper = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TypographyTokensWrapper",
-    componentId: "sc-93225963-0"
-})([
-    "width:100%;margin:1.5rem auto auto 2.5rem;"
-]);
-var FontPropsSwitcher = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__FontPropsSwitcher",
-    componentId: "sc-93225963-1"
-})([
-    "margin:-0.5rem 0 2.5rem;display:flex;justify-content:center;width:100%;position:relative;box-sizing:border-box;"
-]);
-var FontWeightSwitcher = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__FontWeightSwitcher",
-    componentId: "sc-93225963-2"
-})([
-    "position:absolute;top:0;left:0;"
-]);
-var BreakpointSwitcher = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__BreakpointSwitcher",
-    componentId: "sc-93225963-3"
-})([
-    "width:fit-content;position:relative;&:before{content:'Экран';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);",
-    ";}"
-], _plasmanewhope.bodyXS);
-var StyledSegmentItem = (0, _styledcomponents.default)(_Segment.SegmentItem).withConfig({
-    displayName: "Typography.styles__StyledSegmentItem",
-    componentId: "sc-93225963-4"
-})([
-    "",
-    ":1.75rem;",
-    ":0.375rem 0.5rem;"
-], _plasmanewhope.segmentTokens.itemHeight, _plasmanewhope.segmentTokens.itemPilledPadding);
-var AccordionTypographyTitle = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__AccordionTypographyTitle",
-    componentId: "sc-93225963-5"
-})([
-    "color:var(--text-secondary);",
-    ";"
-], _plasmanewhope.bodyM);
-var FontFamily = _styledcomponents.default.span.withConfig({
-    displayName: "Typography.styles__FontFamily",
-    componentId: "sc-93225963-6"
-})([
-    "color:var(--text-tertiary);"
-]);
-var AccordionInfo = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__AccordionInfo",
-    componentId: "sc-93225963-7"
-})([
-    "display:grid;grid-template-columns:16.75rem 35.75rem;grid-column-gap:1.5rem;max-width:55.5rem;"
-]);
-var StyledAccordionItem = (0, _styledcomponents.default)(_Accordion.AccordionItem).withConfig({
-    displayName: "Typography.styles__StyledAccordionItem",
-    componentId: "sc-93225963-8"
-})([
-    "--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;.accordion-item-body{margin-bottom:2rem;padding-top:0.125rem;transition:margin-bottom 0.2s,padding-top 0.2s;}[aria-expanded]{margin-bottom:1rem;}[aria-expanded='false']{margin-bottom:1.125rem;",
-    "{opacity:0;}}[aria-expanded='false'] + div > .accordion-item-body{margin:0;padding:0;}"
-], AccordionInfo);
-var TokenInfoWrapper = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenInfoWrapper",
-    componentId: "sc-93225963-9"
-})([
-    "display:flex;flex-direction:column;gap:2rem;"
-]);
-var TokenShortName = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenShortName",
-    componentId: "sc-93225963-10"
-})([
-    "cursor:copy;color:var(--text-paragraph);",
-    ";&:hover{color:var(--text-paragraph-hover);}&:active{color:var(--text-paragraph-active);}"
-], _plasmanewhope.bodyM);
-var TokenInfo = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenInfo",
-    componentId: "sc-93225963-11"
-})([
-    "display:flex;flex-direction:column;gap:1rem;"
-]);
-var TokenText = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenText",
-    componentId: "sc-93225963-12"
-})([
-    "color:var(--text-primary);font-size:",
-    ";font-weight:",
-    ";line-height:",
-    ";letter-spacing:",
-    ";font-style:",
-    ";white-space:",
-    ";"
-], function(param) {
-    var fontSize = param.fontSize;
-    return fontSize;
-}, function(param) {
-    var fontWeight = param.fontWeight;
-    return fontWeight;
-}, function(param) {
-    var lineHeight = param.lineHeight;
-    return lineHeight;
-}, function(param) {
-    var letterSpacing = param.letterSpacing;
-    return letterSpacing;
-}, function(param) {
-    var fontStyle = param.fontStyle;
-    return fontStyle;
-}, function(param) {
-    var isDisplay = param.isDisplay;
-    return isDisplay ? 'nowrap' : 'normal';
-});
-var TokenPropValue = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenPropValue",
-    componentId: "sc-93225963-13"
-})([
-    "color:var(--text-paragraph);"
-]);
-var TokenPropName = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenPropName",
-    componentId: "sc-93225963-14"
-})([
-    "color:var(--text-tertiary);"
-]);
-var TokenPropsWrapper = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenPropsWrapper",
-    componentId: "sc-93225963-15"
-})([
-    "cursor:copy;width:fit-content;display:flex;flex-direction:column;gap:0.5rem;",
-    ";&:hover{",
-    "{color:var(--text-paragraph-hover);}}&:active{",
-    "{color:var(--text-paragraph-active);}",
-    "{color:var(--text-tertiary-active);}}"
-], _plasmanewhope.bodyXS, TokenPropValue, TokenPropValue, TokenPropName);
-var TokenProps = _styledcomponents.default.div.withConfig({
-    displayName: "Typography.styles__TokenProps",
-    componentId: "sc-93225963-16"
-})([
-    "display:flex;gap:1rem;"
-]);
+var TokenPropValue = exports.TokenPropValue = /*#__PURE__*/_styledComponents["default"].div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-paragraph);\n"])));
+var TokenPropName = exports.TokenPropName = /*#__PURE__*/_styledComponents["default"].div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-tertiary);\n"])));
+var TokenPropsWrapper = exports.TokenPropsWrapper = /*#__PURE__*/_styledComponents["default"].div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n    cursor: copy;\n    width: fit-content;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    ", ";\n\n    &:hover {\n        ", " {\n            color: var(--text-paragraph-hover);\n        }\n    }\n\n    &:active {\n        ", " {\n            color: var(--text-paragraph-active);\n        }\n\n        ", " {\n            color: var(--text-tertiary-active);\n        }\n    }\n"])), _plasmaNewHope.bodyXS, TokenPropValue, TokenPropValue, TokenPropName);
+var TokenProps = exports.TokenProps = /*#__PURE__*/_styledComponents["default"].div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    gap: 1rem;\n"])));

package/emotion/cjs/components/Toolbar/Toolbar.config.js

@@ -1,110 +1,26 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-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                /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */\n                ",
-        ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ",
-        ": var(--surface-solid-card-brightness);\n\n                ",
-        ": var(--surface-transparent-tertiary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 2.5rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.75rem;\n\n                ",
-        ": 1.25rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.0625rem;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 3rem;\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.875rem;\n\n                ",
-        ": 1.5rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.0625rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 3.75rem;\n                ",
-        ": 0.375rem;\n                ",
-        ": 1rem;\n\n                ",
-        ": 1.75rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.0625rem;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 4.5rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 1.25rem;\n\n                ",
-        ": 2rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.0625rem;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        size: 'm'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                /* TODO: \u0437\u0430\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 box-shadow \u043D\u0430 var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--surface-solid-card-brightness);\n\n                ", ": var(--surface-transparent-tertiary);\n            "])), _emotion.toolbarTokens.boxShadow, _emotion.toolbarTokens.background, _emotion.toolbarTokens.dividerColor)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.toolbarTokens.boxShadow, _emotion.toolbarTokens.background, _emotion.toolbarTokens.dividerColor)
-        },
-        size: {
-            xs: (0, _emotion.css)(_templateObject1(), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
-            s: (0, _emotion.css)(_templateObject2(), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
-            m: (0, _emotion.css)(_templateObject3(), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
-            l: (0, _emotion.css)(_templateObject4(), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius)
-        }
+    size: {
+      xs: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.5rem;\n                ", ": 0.25rem;\n                ", ": 0.75rem;\n\n                ", ": 1.25rem;\n                ", ": 0.5rem;\n                ", ": 0.0625rem;\n            "])), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3rem;\n                ", ": 0.25rem;\n                ", ": 0.875rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 0.0625rem;\n            "])), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 3.75rem;\n                ", ": 0.375rem;\n                ", ": 1rem;\n\n                ", ": 1.75rem;\n                ", ": 0.625rem;\n                ", ": 0.0625rem;\n            "])), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius),
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 4.5rem;\n                ", ": 0.5rem;\n                ", ": 1.25rem;\n\n                ", ": 2rem;\n                ", ": 0.75rem;\n                ", ": 0.0625rem;\n            "])), _emotion.toolbarTokens.size, _emotion.toolbarTokens.padding, _emotion.toolbarTokens.borderRadius, _emotion.toolbarTokens.dividerSize, _emotion.toolbarTokens.dividerOffset, _emotion.toolbarTokens.dividerBorderRadius)
     }
-};
+  }
+};