@salutejs/sdds-cs 0.319.0-canary.2010.15854111527.0 → 0.319.0-canary.2016.15703018170.0

package/emotion/es/components/ToastNew/ToastNew.js

@@ -1,6 +1,6 @@
 import { component, mergeConfig, showToast as showToastOriginal, toastContainerConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './ToastNew.config';
-var mergedConfig = mergeConfig(toastContainerConfig, config);
-export var ToastContainer = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(toastContainerConfig, config);
+export var ToastContainer = /*#__PURE__*/component(mergedConfig);
 var showToast = showToastOriginal;
-export { showToast };
+export { showToast };

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

@@ -0,0 +1,87 @@
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconDone } from '@salutejs/plasma-icons';
+
+import { Button } from '../Button';
+
+import { ToastContainer, showToast } from './ToastNew';
+
+const views = ['default'];
+const sizes = ['s'];
+const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+
+const meta: Meta<typeof ToastContainer> = {
+    title: 'Overlay/Toast',
+    component: ToastContainer,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        pilled: {
+            control: { type: 'boolean' },
+        },
+        hasClose: {
+            control: { type: 'boolean' },
+        },
+        enableContentLeft: {
+            control: { type: 'boolean' },
+        },
+        width: {
+            control: { type: 'text' },
+        },
+        textColor: {
+            control: { type: 'text' },
+        },
+        duration: {
+            control: { type: 'number' },
+        },
+        position: {
+            options: positions,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof ToastContainer> & {
+    enableContentLeft?: boolean;
+};
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const handleShowToast = () => {
+        showToast('Текст всплывающего уведомления');
+    };
+
+    return (
+        <div>
+            <ToastContainer {...args} contentLeft={args.enableContentLeft && <IconDone size="s" color="inherit" />} />
+
+            <Button onClick={handleShowToast}>Показать тост</Button>
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 's',
+        pilled: false,
+        hasClose: true,
+        enableContentLeft: true,
+    },
+    render: StoryDefault,
+};

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

@@ -1 +1 @@
-export { ToastContainer, showToast } from './ToastNew';
+export { ToastContainer, showToast } from './ToastNew';

package/emotion/es/components/Tokens/Colors/Colors.stories.tsx

@@ -0,0 +1,196 @@
+import React, { FC } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
+import { InSpacingDecorator, getGroupedTokens, upperFirstLetter } from '@salutejs/plasma-sb-utils';
+import type { GroupedTokens, TokenData } from '@salutejs/plasma-sb-utils';
+import { cx } from '@salutejs/plasma-new-hope';
+
+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,
+    ColorCircle,
+    ColorTokensWrapper,
+    ColumnTitle,
+    StyledAccordionItem,
+    StyledSegmentItem,
+    Subcategory,
+    SubthemeSwitcher,
+    TokenInfoWrapper,
+    ColorTokenDataWrapper,
+    StateDataWrapper,
+    TokenInfo,
+    OpacityPart,
+} from './Colors.styles';
+
+type ColorTokenDataProps = {
+    token: string;
+    tokenData: Omit<TokenData, 'states'>;
+    copyToClipboard: (value: string, opacity?: string | null) => Promise<void>;
+    className?: string;
+    initialTokenName?: string;
+};
+
+const meta: Meta = {
+    title: 'Tokens/Colors',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+const themes: Record<string, GroupedTokens> = {
+    'sdds-srvc:light': getGroupedTokens(sdds_cs__light[0]),
+};
+
+const ColorTokenData: FC<ColorTokenDataProps> = ({
+    token,
+    tokenData,
+    copyToClipboard,
+    className,
+    initialTokenName,
+}) => {
+    const { value, opacity, tone, colorName } = tokenData;
+
+    return (
+        <AccordionInfo>
+            <TokenInfo className={cx('copy', className)} onClick={() => copyToClipboard(initialTokenName || token)}>
+                {token}
+            </TokenInfo>
+            <TokenInfo
+                className={cx('color', colorName && 'copy')}
+                onClick={() => Boolean(colorName) && copyToClipboard(value, opacity?.alpha)}
+            >
+                <ColorCircle background={value + (opacity?.alpha || '')} />
+                <div>{value.includes('gradient') ? 'Градиент' : colorName || ''}</div>
+            </TokenInfo>
+            <TokenInfo className="no-interaction">{tone !== 'none' && tone}</TokenInfo>
+            <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
+            <TokenInfo className="color copy hex" onClick={() => copyToClipboard(value, opacity?.alpha)}>
+                <div>
+                    {value.includes('gradient') ? '' : value}
+                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
+                </div>
+            </TokenInfo>
+        </AccordionInfo>
+    );
+};
+
+const StoryDemoColor = ({ context }) => {
+    const groupedTokens = themes[context.globals.theme];
+    const { showToast } = useToast();
+    const { selectedSegmentItems } = useSegment();
+    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, opacity?: string | null) => {
+        try {
+            await navigator.clipboard.writeText(value + (opacity || ''));
+
+            showToast({
+                ...toastData,
+                text: 'Скопировано',
+            });
+        } catch (err) {
+            showToast({
+                ...toastData,
+                text: 'Ошибка при копировании текста',
+            });
+        }
+    };
+
+    if (!groupedTokens || !groupedTokens[selectedSegmentItems[0]]) {
+        return null;
+    }
+
+    const subcategories = groupedTokens[selectedSegmentItems[0]];
+
+    return (
+        <ColorTokensWrapper>
+            <SubthemeSwitcher>
+                <SegmentGroup view="clear" size="xs" hasBackground pilled>
+                    {Object.entries(groupedTokens).map(([category]) => (
+                        <StyledSegmentItem key={`label_${category}`} value={category} view="default" pilled>
+                            {category}
+                        </StyledSegmentItem>
+                    ))}
+                </SegmentGroup>
+            </SubthemeSwitcher>
+            <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
+                {Object.entries(subcategories).map(([subcategory, subcategoryTokens], index) => (
+                    <StyledAccordionItem
+                        key={subcategory}
+                        eventKey={index}
+                        type="arrow"
+                        title={
+                            <AccordionInfo>
+                                <Subcategory>{subcategory}/</Subcategory>
+                                <ColumnTitle className="color">
+                                    <ColorCircle disableShadow />
+                                    Color
+                                </ColumnTitle>
+                                <ColumnTitle>Tone</ColumnTitle>
+                                <ColumnTitle>Opacity</ColumnTitle>
+                                <ColumnTitle className="hex">Hex</ColumnTitle>
+                            </AccordionInfo>
+                        }
+                    >
+                        <TokenInfoWrapper>
+                            {Object.entries(subcategoryTokens).map(([_, { states, ...tokenData }]) => {
+                                return (
+                                    tokenData.value !== 'undefined' && (
+                                        <ColorTokenDataWrapper>
+                                            <ColorTokenData
+                                                key={tokenData.fullTokenName}
+                                                token={tokenData.fullTokenName}
+                                                tokenData={tokenData}
+                                                copyToClipboard={copyToClipboard}
+                                            />
+                                            {states && Object.keys(states).length > 0 && (
+                                                <StateDataWrapper>
+                                                    {Object.entries(states).map(([state, stateTokenData]) => (
+                                                        <ColorTokenData
+                                                            key={state}
+                                                            token={state}
+                                                            tokenData={stateTokenData}
+                                                            copyToClipboard={copyToClipboard}
+                                                            className="state"
+                                                            initialTokenName={
+                                                                tokenData.fullTokenName + upperFirstLetter(state)
+                                                            }
+                                                        />
+                                                    ))}
+                                                </StateDataWrapper>
+                                            )}
+                                        </ColorTokenDataWrapper>
+                                    )
+                                );
+                            })}
+                        </TokenInfoWrapper>
+                    </StyledAccordionItem>
+                ))}
+            </Accordion>
+        </ColorTokensWrapper>
+    );
+};
+
+export const Default: StoryObj = {
+    render: (_, context) => (
+        <ToastProvider>
+            <SegmentProvider defaultSelected={['Default']} singleSelectedRequired>
+                <StoryDemoColor context={context} />
+            </SegmentProvider>
+        </ToastProvider>
+    ),
+};

package/emotion/es/components/Tokens/Colors/Colors.styles.js

@@ -1,94 +1,23 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import styled from 'styled-components';
 import { segmentTokens } from '@salutejs/plasma-new-hope';
 import { AccordionItem } from '../../Accordion';
 import { SegmentItem } from '../../Segment/Segment';
-export var ColorTokensWrapper = styled.div.withConfig({
-    displayName: "Colors.styles__ColorTokensWrapper",
-    componentId: "sc-998f2ec3-0"
-})([
-    "padding-top:1.5rem;width:100%;"
-]);
-export var SubthemeSwitcher = styled.div.withConfig({
-    displayName: "Colors.styles__SubthemeSwitcher",
-    componentId: "sc-998f2ec3-1"
-})([
-    "margin:-0.5rem auto 2.5rem auto;width:fit-content;position:relative;&:before{content:'Подтема';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);bold-font-weight:var(--plasma-typo-body-xs-bold-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}"
-]);
-export var StyledSegmentItem = styled(SegmentItem).withConfig({
-    displayName: "Colors.styles__StyledSegmentItem",
-    componentId: "sc-998f2ec3-2"
-})([
-    "",
-    ":1.75rem;",
-    ":0.375rem 0.5rem;"
-], segmentTokens.itemHeight, segmentTokens.itemPilledPadding);
-export var AccordionInfo = styled.div.withConfig({
-    displayName: "Colors.styles__AccordionInfo",
-    componentId: "sc-998f2ec3-3"
-})([
-    "display:grid;grid-template-columns:16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"
-]);
-export var Subcategory = styled.div.withConfig({
-    displayName: "Colors.styles__Subcategory",
-    componentId: "sc-998f2ec3-4"
-})([
-    "color:var(--text-secondary);"
-]);
-export var ColumnTitle = styled.div.withConfig({
-    displayName: "Colors.styles__ColumnTitle",
-    componentId: "sc-998f2ec3-5"
-})([
-    "color:var(--text-tertiary);transition:opacity 0.2s;&.color{display:flex;align-items:center;gap:2.5rem;}&.hex{padding-left:3.75rem;}"
-]);
-export var StyledAccordionItem = styled(AccordionItem).withConfig({
-    displayName: "Colors.styles__StyledAccordionItem",
-    componentId: "sc-998f2ec3-6"
-})([
-    "--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;width:50.375rem;div > div > div > svg{color:var(--text-secondary);}.accordion-item-body{margin-bottom:2.375rem;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, ColumnTitle);
-export var TokenInfoWrapper = styled.div.withConfig({
-    displayName: "Colors.styles__TokenInfoWrapper",
-    componentId: "sc-998f2ec3-7"
-})([
-    "display:flex;flex-direction:column;gap:0.75rem;margin-top:-0.125rem;"
-]);
-export var ColorTokenDataWrapper = styled.div.withConfig({
-    displayName: "Colors.styles__ColorTokenDataWrapper",
-    componentId: "sc-998f2ec3-8"
-})([
-    "display:flex;flex-direction:column;gap:0.5rem;"
-]);
-export var StateDataWrapper = styled.div.withConfig({
-    displayName: "Colors.styles__StateDataWrapper",
-    componentId: "sc-998f2ec3-9"
-})([
-    "display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;"
-]);
-export var OpacityPart = styled.span.withConfig({
-    displayName: "Colors.styles__OpacityPart",
-    componentId: "sc-998f2ec3-10"
-})([
-    "color:var(--text-secondary);padding-left:0.125rem;"
-]);
-export var TokenInfo = styled.div.withConfig({
-    displayName: "Colors.styles__TokenInfo",
-    componentId: "sc-998f2ec3-11"
-})([
-    "color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:2.5rem;}&.no-interaction{text-align:right;}&.hex{padding-left:3.75rem;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);",
-    "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);",
-    "{color:var(--text-secondary-active);}}&.state{padding-left:1.5rem;color:var(--text-secondary);&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary-active);}}"
-], OpacityPart, OpacityPart);
-export var ColorCircle = styled.div.withConfig({
-    displayName: "Colors.styles__ColorCircle",
-    componentId: "sc-998f2ec3-12"
-})([
-    "width:1.25rem;height:1.25rem;border-radius:50%;background:",
-    ";box-shadow:",
-    ";"
-], function(props) {
-    return props.background || 'transparent';
-}, function(props) {
-    return props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)';
-});
+export var ColorTokensWrapper = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    padding-top: 1.5rem;\n    width: 100%;\n"])));
+export var SubthemeSwitcher = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin: -0.5rem auto 2.5rem auto;\n    width: fit-content;\n\n    position: relative;\n\n    &:before {\n        content: '\u041F\u043E\u0434\u0442\u0435\u043C\u0430';\n        position: absolute;\n        top: 50%;\n        transform: translate(-100%, -50%);\n        left: -0.75rem;\n        color: var(--text-tertiary);\n\n        font-family: var(--plasma-typo-body-xs-font-family);\n        font-size: var(--plasma-typo-body-xs-font-size);\n        font-style: var(--plasma-typo-body-xs-font-style);\n        font-weight: var(--plasma-typo-body-xs-font-weight);\n        bold-font-weight: var(--plasma-typo-body-xs-bold-font-weight);\n        letter-spacing: var(--plasma-typo-body-xs-letter-spacing);\n        line-height: var(--plasma-typo-body-xs-line-height);\n    }\n"])));
+export var StyledSegmentItem = /*#__PURE__*/styled(SegmentItem)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ": 1.75rem;\n    ", ": 0.375rem 0.5rem;\n"])), segmentTokens.itemHeight, segmentTokens.itemPilledPadding);
+export var AccordionInfo = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;\n    grid-column-gap: 1.5rem;\n\n    font-family: var(--plasma-typo-body-m-font-family);\n    font-size: var(--plasma-typo-body-m-font-size);\n    font-style: var(--plasma-typo-body-m-font-style);\n    font-weight: var(--plasma-typo-body-m-font-weight);\n    letter-spacing: var(--plasma-typo-body-m-letter-spacing);\n    line-height: var(--plasma-typo-body-m-line-height);\n"])));
+export var Subcategory = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-secondary);\n"])));
+export var ColumnTitle = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-tertiary);\n    transition: opacity 0.2s;\n\n    &.color {\n        display: flex;\n        align-items: center;\n        gap: 2.5rem;\n    }\n\n    &.hex {\n        padding-left: 3.75rem;\n    }\n"])));
+export var StyledAccordionItem = /*#__PURE__*/styled(AccordionItem)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n    --plasma-accordion-item-padding: 0;\n    --plasma-accordion-item-padding-vertical: 0;\n\n    border-bottom: unset;\n    width: 50.375rem;\n\n    div > div > div > svg {\n        color: var(--text-secondary);\n    }\n\n    .accordion-item-body {\n        margin-bottom: 2.375rem;\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, ColumnTitle);
+export var TokenInfoWrapper = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    margin-top: -0.125rem;\n"])));
+export var ColorTokenDataWrapper = /*#__PURE__*/styled.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n"])));
+export var StateDataWrapper = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 0.75rem;\n"])));
+export var OpacityPart = /*#__PURE__*/styled.span(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-secondary);\n    padding-left: 0.125rem;\n"])));
+export var TokenInfo = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n    color: var(--text-paragraph);\n\n    cursor: default;\n\n    &.copy {\n        cursor: copy;\n    }\n\n    &.color {\n        display: flex;\n        align-items: center;\n        gap: 2.5rem;\n    }\n\n    &.no-interaction {\n        text-align: right;\n    }\n\n    &.hex {\n        padding-left: 3.75rem;\n    }\n\n    &:not(.no-interaction):hover {\n        color: var(--text-paragraph-hover);\n\n        ", " {\n            color: var(--text-paragraph-hover);\n        }\n    }\n\n    &:not(.no-interaction):active {\n        color: var(--text-paragraph-active);\n\n        ", " {\n            color: var(--text-secondary-active);\n        }\n    }\n\n    &.state {\n        padding-left: 1.5rem;\n        color: var(--text-secondary);\n\n        &:hover {\n            color: var(--text-secondary);\n        }\n\n        &:active {\n            color: var(--text-secondary-active);\n        }\n    }\n"])), OpacityPart, OpacityPart);
+export var ColorCircle = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n    width: 1.25rem;\n    height: 1.25rem;\n    border-radius: 50%;\n\n    background: ", ";\n    box-shadow: ", ";\n"])), function (props) {
+  return props.background || 'transparent';
+}, function (props) {
+  return props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)';
+});

package/emotion/es/components/Tokens/NumberTokens/CornerRadius.stories.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
+import { InSpacingDecorator, getGroupedSpacingTokens } from '@salutejs/plasma-sb-utils';
+import type { GroupedNumberTokens } from '@salutejs/plasma-sb-utils';
+
+import { ToastProvider, useToast } from '../../Toast/Toast';
+import type { ShowToastArgs } from '../../Toast';
+
+import {
+    TokenData,
+    TokenDataHeader,
+    TokenInfo,
+    TokensDataWrapper,
+    TokensTitle,
+    TokensWrapper,
+} from './NumberTokens.styles';
+
+const meta: Meta = {
+    title: 'Tokens/Spacing',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+const themes: Record<string, GroupedNumberTokens> = {
+    'sdds-srvc:light': getGroupedSpacingTokens(sdds_cs__light[0]),
+};
+
+const StoryDemo = ({ context }) => {
+    const groupedTokens = themes[context.globals.theme];
+    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, opacity?: string | null) => {
+        try {
+            await navigator.clipboard.writeText(value + (opacity || ''));
+
+            showToast({
+                ...toastData,
+                text: 'Скопировано',
+            });
+        } catch (err) {
+            showToast({
+                ...toastData,
+                text: 'Ошибка при копировании текста',
+            });
+        }
+    };
+
+    if (!groupedTokens) {
+        return null;
+    }
+
+    return (
+        <TokensWrapper>
+            <TokensTitle>Spacing</TokensTitle>
+            <TokensDataWrapper>
+                <TokenDataHeader>
+                    <TokenInfo>Token/</TokenInfo>
+                    <TokenInfo className="value">px</TokenInfo>
+                </TokenDataHeader>
+                <TokenData>
+                    {Object.entries(groupedTokens).map(([tokenName, tokenValue]) => (
+                        <>
+                            <TokenInfo onClick={() => copyToClipboard(tokenName)}>{tokenName}</TokenInfo>
+                            <TokenInfo className="value" onClick={() => copyToClipboard(tokenValue)}>
+                                {tokenValue}
+                            </TokenInfo>
+                        </>
+                    ))}
+                </TokenData>
+            </TokensDataWrapper>
+        </TokensWrapper>
+    );
+};
+
+export const Default: StoryObj = {
+    render: (_, context) => (
+        <ToastProvider>
+            <StoryDemo context={context} />
+        </ToastProvider>
+    ),
+};

package/emotion/es/components/Tokens/NumberTokens/NumberTokens.styles.js

@@ -1,38 +1,9 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import styled from 'styled-components';
-export var TokensWrapper = styled.div.withConfig({
-    displayName: "NumberTokens.styles__TokensWrapper",
-    componentId: "sc-5cff0c2a-0"
-})([
-    "margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;gap:2rem;"
-]);
-export var TokensTitle = styled.h2.withConfig({
-    displayName: "NumberTokens.styles__TokensTitle",
-    componentId: "sc-5cff0c2a-1"
-})([
-    "margin:0;font-family:var(--plasma-typo-h2-font-family);font-size:var(--plasma-typo-h2-font-size);font-style:var(--plasma-typo-h2-font-style);font-weight:var(--plasma-typo-h2-font-weight);letter-spacing:var(--plasma-typo-h2-letter-spacing);line-height:var(--plasma-typo-h2-line-height);"
-]);
-export var TokensDataWrapper = styled.div.withConfig({
-    displayName: "NumberTokens.styles__TokensDataWrapper",
-    componentId: "sc-5cff0c2a-2"
-})([
-    "display:flex;flex-direction:column;gap:1rem;"
-]);
-export var TokenInfo = styled.p.withConfig({
-    displayName: "NumberTokens.styles__TokenInfo",
-    componentId: "sc-5cff0c2a-3"
-})([
-    "margin:0;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);cursor:copy;color:var(--text-paragraph);&.value{text-align:end;}&:hover{color:var(--text-paragraph-hover);}&:active{color:var(--text-paragraph-active);}"
-]);
-export var TokenData = styled.div.withConfig({
-    displayName: "NumberTokens.styles__TokenData",
-    componentId: "sc-5cff0c2a-4"
-})([
-    "display:grid;grid-template-columns:16.75rem 3.813rem;column-gap:1.5rem;row-gap:0.75rem;"
-]);
-export var TokenDataHeader = styled(TokenData).withConfig({
-    displayName: "NumberTokens.styles__TokenDataHeader",
-    componentId: "sc-5cff0c2a-5"
-})([
-    "",
-    "{color:var(--text-secondary);cursor:default;pointer-events:none;&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary);}}"
-], TokenInfo);
+export var TokensWrapper = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin-top: 1.5rem;\n    margin-left: 3rem;\n\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n"])));
+export var TokensTitle = /*#__PURE__*/styled.h2(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin: 0;\n    font-family: var(--plasma-typo-h2-font-family);\n    font-size: var(--plasma-typo-h2-font-size);\n    font-style: var(--plasma-typo-h2-font-style);\n    font-weight: var(--plasma-typo-h2-font-weight);\n    letter-spacing: var(--plasma-typo-h2-letter-spacing);\n    line-height: var(--plasma-typo-h2-line-height);\n"])));
+export var TokensDataWrapper = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
+export var TokenInfo = /*#__PURE__*/styled.p(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin: 0;\n    font-family: var(--plasma-typo-body-m-font-family);\n    font-size: var(--plasma-typo-body-m-font-size);\n    font-style: var(--plasma-typo-body-m-font-style);\n    font-weight: var(--plasma-typo-body-m-font-weight);\n    letter-spacing: var(--plasma-typo-body-m-letter-spacing);\n    line-height: var(--plasma-typo-body-m-line-height);\n    cursor: copy;\n\n    color: var(--text-paragraph);\n\n    &.value {\n        text-align: end;\n    }\n\n    &:hover {\n        color: var(--text-paragraph-hover);\n    }\n\n    &:active {\n        color: var(--text-paragraph-active);\n    }\n"])));
+export var TokenData = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: 16.75rem 3.813rem;\n    column-gap: 1.5rem;\n    row-gap: 0.75rem;\n"])));
+export var TokenDataHeader = /*#__PURE__*/styled(TokenData)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", " {\n        color: var(--text-secondary);\n        cursor: default;\n        pointer-events: none;\n\n        &:hover {\n            color: var(--text-secondary);\n        }\n\n        &:active {\n            color: var(--text-secondary);\n        }\n    }\n"])), TokenInfo);

package/emotion/es/components/Tokens/NumberTokens/Spacing.stories.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
+import { InSpacingDecorator, getGroupedCornerRadiusTokens } from '@salutejs/plasma-sb-utils';
+import type { GroupedNumberTokens } from '@salutejs/plasma-sb-utils';
+
+import { ToastProvider, useToast } from '../../Toast/Toast';
+import type { ShowToastArgs } from '../../Toast';
+
+import {
+    TokenData,
+    TokenDataHeader,
+    TokenInfo,
+    TokensDataWrapper,
+    TokensTitle,
+    TokensWrapper,
+} from './NumberTokens.styles';
+
+const meta: Meta = {
+    title: 'Tokens/Corner Radius',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+const themes: Record<string, GroupedNumberTokens> = {
+    'sdds-srvc:light': getGroupedCornerRadiusTokens(sdds_cs__light[0]),
+};
+
+const StoryDemo = ({ context }) => {
+    const groupedTokens = themes[context.globals.theme];
+    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, opacity?: string | null) => {
+        try {
+            await navigator.clipboard.writeText(value + (opacity || ''));
+
+            showToast({
+                ...toastData,
+                text: 'Скопировано',
+            });
+        } catch (err) {
+            showToast({
+                ...toastData,
+                text: 'Ошибка при копировании текста',
+            });
+        }
+    };
+
+    if (!groupedTokens) {
+        return null;
+    }
+
+    return (
+        <TokensWrapper>
+            <TokensTitle>CornerRadius</TokensTitle>
+            <TokensDataWrapper>
+                <TokenDataHeader>
+                    <TokenInfo>Token/</TokenInfo>
+                    <TokenInfo className="value">px</TokenInfo>
+                </TokenDataHeader>
+                <TokenData>
+                    {Object.entries(groupedTokens).map(([tokenName, tokenValue]) => (
+                        <>
+                            <TokenInfo onClick={() => copyToClipboard(tokenName)}>{tokenName}</TokenInfo>
+                            <TokenInfo className="value" onClick={() => copyToClipboard(tokenValue)}>
+                                {tokenValue}
+                            </TokenInfo>
+                        </>
+                    ))}
+                </TokenData>
+            </TokensDataWrapper>
+        </TokensWrapper>
+    );
+};
+
+export const Default: StoryObj = {
+    render: (_, context) => (
+        <ToastProvider>
+            <StoryDemo context={context} />
+        </ToastProvider>
+    ),
+};