@salutejs/plasma-new-hope 0.133.2-canary.1396.10611246152.0 → 0.134.0-canary.1352.10609199302.0

package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { checkboxConfig } from '../../../../components/Checkbox';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Link } from '../Link/Link';
+
+import { config } from './Checkbox.config';
+import { Checkbox } from './Checkbox';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const meta: Meta<typeof Checkbox> = {
+    title: 'sds_engineer/Checkbox',
+    decorators: [WithTheme],
+    component: Checkbox,
+    argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
+    args: {
+        view: 'accent',
+        size: 'm',
+        disabled: false,
+        focused: true,
+    },
+};
+
+export default meta;
+
+type CheckboxProps = ComponentProps<typeof Checkbox>;
+
+const name = 'languages';
+
+const items = [
+    {
+        name,
+        value: 'natural',
+        label: 'Natural languages',
+        disabled: false,
+        description: 'Languages that people speak. They were not designed by people and they evolved naturally.',
+    },
+    { name, value: 'russian', label: 'Russian', disabled: false, parent: 'natural' },
+    {
+        name,
+        value: 'english',
+        label: 'English',
+        disabled: false,
+        parent: 'natural',
+        description: (
+            <div>
+                The most spoken language in the <Link href="/#">world</Link>
+            </div>
+        ),
+    },
+    { name, value: 'french', label: 'French', disabled: false, parent: 'natural' },
+    { name, value: 'klingon', label: 'Klingon', disabled: false, parent: 'natural' },
+    { name, value: 'elvish', label: 'Elvish', disabled: true, parent: 'natural' },
+    { name, value: 'dothraki', label: 'Dothraki', disabled: true, parent: 'natural' },
+    {
+        name,
+        value: 'chinese',
+        label: (
+            <div>
+                Chinese is the hardest <Link href="/#">language</Link>
+            </div>
+        ),
+        parent: 'natural',
+    },
+];
+
+const getChildren = (value: string) => items.filter((item) => item.parent === value);
+
+const getState = (values: Record<string, boolean | undefined>, value: string) => {
+    const allChildren = getChildren(value);
+
+    if (!allChildren.length) {
+        return { checked: values[value], indeterminate: false };
+    }
+
+    const checkedChildren = allChildren.filter((child) => values[child.value]);
+
+    if (checkedChildren.length === 0) {
+        return { checked: false, indeterminate: false };
+    }
+
+    if (allChildren.length !== checkedChildren.length) {
+        return { checked: false, indeterminate: true };
+    }
+
+    return { checked: true, indeterminate: false };
+};
+
+const StoryDefault = (props: CheckboxProps) => {
+    return (
+        <>
+            <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
+            <Checkbox
+                name="item.name"
+                value="item.value"
+                singleLine
+                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
+                {...props}
+            />
+        </>
+    );
+};
+
+export const Default: StoryObj<CheckboxProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryComplex = (props: CheckboxProps) => {
+    const [values, setValues] = useState({
+        russian: true,
+        english: true,
+        french: true,
+        klingon: false,
+        elvish: true,
+        dothraki: false,
+        chinese: true,
+    });
+
+    return (
+        <>
+            {items.map((item) => (
+                <Checkbox
+                    {...getState(values, item.value)}
+                    style={{ marginLeft: item.parent ? 36 : 0 }}
+                    key={item.value}
+                    name={item.name}
+                    value={item.value}
+                    label={item.label}
+                    disabled={item.disabled}
+                    description={item.description}
+                    onChange={(event) => {
+                        const { checked } = event.target;
+
+                        if (item.parent) {
+                            setValues({ ...values, [item.value]: checked });
+                        } else {
+                            setValues({
+                                ...values,
+                                ...getChildren(item.value).reduce(
+                                    (acc, child) => ({ ...acc, [child.value]: checked }),
+                                    {},
+                                ),
+                            });
+                        }
+
+                        onChange(event);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    {...props}
+                />
+            ))}
+        </>
+    );
+};
+
+export const Complex: StoryObj<CheckboxProps> = {
+    render: (args) => <StoryComplex {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Chip/Chip.config.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Chip = /*#__PURE__*/require("../../../../components/Chip");
+var config = exports.config = {
+  defaults: {
+    view: 'primary',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":rgba(12,143,230,0.11);", ":var(--text-primary);", ":rgba(12,143,230,0.11);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":auto;", ":2.5rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":-0.25rem;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":auto;", ":1.75rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":-0.25rem;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":auto;", ":1.25rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":-0.125rem;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize),
+      xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":0.875rem;", ":0.5rem;", ":0.5rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0.25rem;", ":-0.125rem;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.closeIconSize)
+    },
+    readOnly: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":rgba(12,143,230,0.11);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":rgba(12,143,230,0.11);", ":var(--text-accent);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Chip/Chip.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = void 0;
+var _Chip = /*#__PURE__*/require("../../../../components/Chip");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Chip2 = /*#__PURE__*/require("./Chip.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Chip.chipConfig, _Chip2.config);
+var Chip = exports.Chip = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/sds_engineer/components/Chip/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { chipConfig } from '../../../../components/Chip';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+
+import { config } from './Chip.config';
+import { Chip } from './Chip';
+
+const onClear = action('onClear');
+
+const meta: Meta<typeof Chip> = {
+    title: 'sds_engineer/Chip',
+    component: Chip,
+    decorators: [WithTheme],
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(chipConfig, config)),
+        ...disableProps(['onClear', 'disabled', 'contentLeft']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+    args: {
+        text: 'Hello',
+        view: 'primary',
+        size: 'm',
+        hasClear: true,
+        readOnly: false,
+        onClear,
+    },
+};

package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.config.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Counter = /*#__PURE__*/require("../../../../components/Counter");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'xs'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
+      xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Counter = void 0;
+var _Counter = /*#__PURE__*/require("../../../../components/Counter");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Counter2 = /*#__PURE__*/require("./Counter.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Counter.counterConfig, _Counter2.config);
+var Counter = exports.Counter = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Counter } from './Counter';
+
+const meta: Meta<typeof Counter> = {
+    title: 'sds_engineer/Counter',
+    component: Counter,
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: ['xs', 'xxs'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['contentLeft', 'contentRight']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Counter>;
+
+export const Default: Story = {
+    args: {
+        count: 25,
+        maxCount: 100,
+        view: 'default',
+        size: 'xs',
+    },
+};

package/styled-components/cjs/examples/sds_engineer/components/Divider/Divider.config.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Divider = /*#__PURE__*/require("../../../../components/Divider");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    orientation: 'horizontal'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);"], _Divider.dividerTokens.background),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-surface-transparent-tertiary);"], _Divider.dividerTokens.background),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-surface-transparent-tertiary);"], _Divider.dividerTokens.background),
+      // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится
+      inverse: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-tertiary);"], _Divider.dividerTokens.background)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.0625rem;"], _Divider.dividerTokens.borderRadius)
+    },
+    orientation: {
+      horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.0625rem;"], _Divider.dividerTokens.baseSideSize),
+      vertical: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.0625rem;"], _Divider.dividerTokens.baseSideSize)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Divider/Divider.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+var _Divider = /*#__PURE__*/require("../../../../components/Divider");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Divider2 = /*#__PURE__*/require("./Divider.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Divider.dividerConfig, _Divider2.config);
+var Divider = exports.Divider = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/sds_engineer/components/Divider/Divider.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { bodyS } from '../../../../mixins';
+
+import { Divider } from './Divider';
+
+const meta: Meta<typeof Divider> = {
+    title: 'sds_engineer/Divider',
+    decorators: [WithTheme],
+    argTypes: {
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'horizontal' } },
+        },
+        view: {
+            options: ['default', 'dark', 'light', 'inverse'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'default' } },
+        },
+    },
+};
+
+export default meta;
+
+const StyledWrapper = styled.div<{ orientation?: string }>`
+    display: inline-flex;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: #aab1e9;
+    align-items: center;
+    justify-content: center;
+    flex-direction: ${(props) => (props.orientation === 'horizontal' ? 'column' : 'row')};
+`;
+
+const StyledBody = styled.div`
+    ${bodyS};
+`;
+
+export const Default: StoryObj<ComponentProps<typeof Divider>> = {
+    args: {
+        view: 'default',
+        orientation: 'horizontal',
+        length: '100%',
+    },
+    render: (args) => (
+        <StyledWrapper orientation={args.orientation}>
+            <StyledBody>Before</StyledBody>
+            <Divider {...args} />
+            <StyledBody>After</StyledBody>
+        </StyledWrapper>
+    ),
+};

package/styled-components/cjs/examples/sds_engineer/components/Drawer/Drawer.config.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Drawer = /*#__PURE__*/require("../../../../components/Drawer");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":0 3.75rem 7rem -0.5rem rgba(0,0,0,0.08);", ":var(--surface-transparent-primary);", ":var(--overlay-blur);", ":var(--overlay-soft);"], _Drawer.drawerTokens.background, _Drawer.drawerTokens.shadow, _Drawer.drawerTokens.contentBackgroundColor, _Drawer.drawerTokens.drawerOverlayWithBlurColor, _Drawer.drawerTokens.drawerOverlayColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Drawer.drawerTokens.padding)
+    },
+    borderRadius: {
+      none: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;"], _Drawer.drawerTokens.borderRadius),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem;"], _Drawer.drawerTokens.borderRadius)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Drawer/Drawer.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerHeader = exports.DrawerFooter = exports.DrawerContent = exports.Drawer = void 0;
+var _Drawer = /*#__PURE__*/require("../../../../components/Drawer");
+var _Drawer2 = /*#__PURE__*/require("../../../../components/Drawer/Drawer");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Drawer3 = /*#__PURE__*/require("./Drawer.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Drawer2.drawerConfig, _Drawer3.config);
+var Drawer = exports.Drawer = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedContentConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Drawer.drawerContentConfig);
+var DrawerContent = exports.DrawerContent = /*#__PURE__*/(0, _engines.component)(mergedContentConfig);
+var mergedHeaderConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Drawer.drawerHeaderConfig);
+var DrawerHeader = exports.DrawerHeader = /*#__PURE__*/(0, _engines.component)(mergedHeaderConfig);
+var mergedFooterConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Drawer.drawerFooterConfig);
+var DrawerFooter = exports.DrawerFooter = /*#__PURE__*/(0, _engines.component)(mergedFooterConfig);