@salutejs/plasma-new-hope 0.134.0-canary.1403.10590022490.0 → 0.134.0-canary.1404.10615452870.0

package/styled-components/es/examples/sds_engineer/components/Radiobox/Radiobox.stories.tsx

@@ -1,134 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { RadioGroup, radioboxConfig } from '../../../../components/Radiobox';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { Link } from '../Link/Link';
-
-import { config } from './Radiobox.config';
-import { Radiobox } from './Radiobox';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const meta: Meta<typeof Radiobox> = {
-    title: 'sds_engineer/Radiobox',
-    decorators: [WithTheme],
-    component: Radiobox,
-    argTypes: argTypesFromConfig(mergeConfig(radioboxConfig, config)),
-    args: {
-        view: 'accent',
-        size: 'm',
-        disabled: false,
-        focused: true,
-    },
-};
-
-export default meta;
-
-type RadioboxProps = ComponentProps<typeof Radiobox>;
-
-const langName = 'language';
-
-const items = [
-    {
-        langName,
-        value: 'c',
-        label: 'C',
-        disabled: false,
-        description: (
-            <div>
-                A general-purpose, procedural computer programming <Link href="/#">language</Link>{' '}
-            </div>
-        ),
-    },
-    { langName, value: 'cpp', label: 'C++', disabled: false },
-    { langName, value: 'assembly', label: 'Assembly', disabled: false },
-    { langName, value: 'elixir', label: 'Elixir', disabled: true },
-];
-
-const StoryDefault = (props: RadioboxProps) => {
-    const value = 0;
-    const [checked, setChecked] = useState(true);
-
-    return (
-        <>
-            <Radiobox
-                name="item.name"
-                value={value}
-                singleLine
-                label="Label"
-                description="Description"
-                checked={checked}
-                onChange={(event) => {
-                    event.persist();
-
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...props}
-            />
-            <Radiobox
-                name="item.name"
-                value={value}
-                singleLine
-                label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
-                description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
-                checked={checked}
-                onChange={(event) => {
-                    event.persist();
-
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...props}
-            />
-        </>
-    );
-};
-
-export const Default: StoryObj<RadioboxProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryComplex = (props: RadioboxProps) => {
-    const [value, setValue] = useState('c');
-
-    return (
-        <RadioGroup>
-            <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
-                Radiogroup Title
-            </div>
-            {items.map((item) => (
-                <Radiobox
-                    key={item.value}
-                    name={item.langName}
-                    value={item.value}
-                    label={item.label}
-                    disabled={item.disabled}
-                    checked={value[item.value]}
-                    description={item.description}
-                    onChange={(event) => {
-                        setValue(item.value);
-                        onChange(event);
-                    }}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    {...props}
-                />
-            ))}
-        </RadioGroup>
-    );
-};
-
-export const Complex: StoryObj<RadioboxProps> = {
-    render: (args) => <StoryComplex {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Segment/Segment.js

@@ -1,8 +0,0 @@
-import { segmentItemConfig, segmentGroupConfig } from '../../../../components/Segment';
-import { component, mergeConfig } from '../../../../engines';
-import { config as groupConfig } from './SegmentGroup.config';
-import { config as itemConfig } from './SegmentItem.config';
-var mergedSegmentGroupConfig = /*#__PURE__*/mergeConfig(segmentGroupConfig, groupConfig);
-var mergedSegmentItemConfig = /*#__PURE__*/mergeConfig(segmentItemConfig, itemConfig);
-export var SegmentGroup = /*#__PURE__*/component(mergedSegmentGroupConfig);
-export var SegmentItem = /*#__PURE__*/component(mergedSegmentItemConfig);

package/styled-components/es/examples/sds_engineer/components/Segment/Segment.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { segmentGroupConfig } from '../../../../components/Segment';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
-
-import { config } from './SegmentGroup.config';
-import { SegmentItem, SegmentGroup } from './Segment';
-
-const segmentItemViews = ['clear', 'default', 'secondary'];
-
-type CustomStorySegmentProps = {
-    segmentItemView?: string;
-    contentItemsNumber?: number;
-};
-
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
-
-const meta: Meta<StorySegmentProps> = {
-    title: 'sds_engineer/Segment',
-    decorators: [WithTheme],
-    component: SegmentGroup,
-    argTypes: {
-        ...argTypesFromConfig(mergeConfig(segmentGroupConfig, config)),
-        selectionMode: {
-            options: ['single', 'multiple'],
-            control: {
-                type: 'select',
-            },
-        },
-        segmentItemView: {
-            options: segmentItemViews,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
-    const contentItems = Array(contentItemsNumber).fill(0);
-
-    return (
-        <>
-            <h3>Segment with auto width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-
-            <h3>Segment with fixed width</h3>
-            <SegmentProvider>
-                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
-                    {contentItems.map((_, i) => (
-                        <SegmentItem
-                            view={segmentItemView}
-                            label={`Label ${i}`}
-                            value={`label_${i}`}
-                            key={`label_${i}`}
-                            {...args}
-                        />
-                    ))}
-                </SegmentGroup>
-            </SegmentProvider>
-        </>
-    );
-};
-
-export const Default: StoryObj<StorySegmentProps> = {
-    args: {
-        view: 'clear',
-        size: 'xs',
-        segmentItemView: 'clear',
-        selectionMode: 'single',
-        contentItemsNumber: 11,
-        pilled: false,
-        filledBackground: false,
-        disabled: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Segment/SegmentGroup.config.js

@@ -1,29 +0,0 @@
-import { css } from 'styled-components';
-import { segmentTokens } from '../../../../components/Segment';
-export var config = {
-  defaults: {
-    view: 'clear',
-    size: 'xs'
-  },
-  variations: {
-    view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
-    },
-    size: {
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      s: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight),
-      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":auto;"], segmentTokens.groupBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight)
-    },
-    disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
-    },
-    pilled: {
-      "true": /*#__PURE__*/css(["", ":1.75rem;"], segmentTokens.groupPilledBorderRadius)
-    },
-    filledBackground: {
-      "true": /*#__PURE__*/css(["", ":var(--plasma-colors-surface-liquid02);"], segmentTokens.groupFilledBackgroundColor)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Segment/SegmentItem.config.js

@@ -1,27 +0,0 @@
-import { css } from 'styled-components';
-import { segmentTokens } from '../../../../components/Segment';
-export var config = {
-  defaults: {
-    view: 'clear',
-    size: 'xs'
-  },
-  variations: {
-    view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.outlineFocusColor)
-    },
-    size: {
-      xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":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);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),
-      l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight)
-    },
-    disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;"], segmentTokens.disabledOpacity)
-    },
-    pilled: {
-      "true": /*#__PURE__*/css(["", ":1.5rem;"], segmentTokens.itemPilledBorderRadius)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Skeleton/LineSkeleton.config.js

@@ -1,28 +0,0 @@
-import { css } from 'styled-components';
-import { skeletonTokens } from '../../../../components/Skeleton';
-export var config = {
-  defaults: {
-    size: 'bodyM'
-  },
-  variations: {
-    size: {
-      bodyL: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      bodyM: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      bodyS: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      bodyXS: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      bodyXXS: /*#__PURE__*/css(["", ":var(--plasma-typo-body-xxs-line-height);", ":var(--plasma-typo-body-xxs-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      dsplL: /*#__PURE__*/css(["", ":var(--plasma-typo-dspl-l-line-height);", ":var(--plasma-typo-dspl-l-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      dsplM: /*#__PURE__*/css(["", ":var(--plasma-typo-dspl-m-line-height);", ":var(--plasma-typo-dspl-m-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      dsplS: /*#__PURE__*/css(["", ":var(--plasma-typo-dspl-s-line-height);", ":var(--plasma-typo-dspl-s-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      h1: /*#__PURE__*/css(["", ":var(--plasma-typo-h1-line-height);", ":var(--plasma-typo-h1-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      h2: /*#__PURE__*/css(["", ":var(--plasma-typo-h2-line-height);", ":var(--plasma-typo-h2-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      h3: /*#__PURE__*/css(["", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      h4: /*#__PURE__*/css(["", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      h5: /*#__PURE__*/css(["", ":var(--plasma-typo-h5-line-height);", ":var(--plasma-typo-h5-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      textL: /*#__PURE__*/css(["", ":var(--plasma-typo-text-l-line-height);", ":var(--plasma-typo-text-l-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      textM: /*#__PURE__*/css(["", ":var(--plasma-typo-text-m-line-height);", ":var(--plasma-typo-text-m-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      textS: /*#__PURE__*/css(["", ":var(--plasma-typo-text-s-line-height);", ":var(--plasma-typo-text-s-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight),
-      textXS: /*#__PURE__*/css(["", ":var(--plasma-typo-text-xs-line-height);", ":var(--plasma-typo-text-xs-font-size);"], skeletonTokens.lineHeight, skeletonTokens.visibleLineHeight)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Skeleton/Skeleton.js

@@ -1,7 +0,0 @@
-import { lineSkeletonConfig, textSkeleton } from '../../../../components/Skeleton';
-import { component, mergeConfig } from '../../../../engines';
-import { config as lineSkeletonCustomConfig } from './LineSkeleton.config';
-export { RectSkeleton, withSkeleton } from '../../../../components/Skeleton';
-var mergedLineSkeletonConfig = /*#__PURE__*/mergeConfig(lineSkeletonConfig, lineSkeletonCustomConfig);
-export var LineSkeleton = /*#__PURE__*/component(mergedLineSkeletonConfig);
-export var TextSkeleton = /*#__PURE__*/textSkeleton(LineSkeleton);

package/styled-components/es/examples/sds_engineer/components/Skeleton/Skeleton.stories.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { mergeConfig } from '../../../../engines';
-import { lineSkeletonConfig } from '../../../../components/Skeleton';
-import type { WithSkeletonProps } from '../../../../components/Skeleton';
-import { radiuses } from '../../../../mixins';
-import { Button as BasicButton } from '../Button/Button';
-
-import { config as lineSkeletonCustomConfig } from './LineSkeleton.config';
-import { LineSkeleton, TextSkeleton, RectSkeleton, withSkeleton } from './Skeleton';
-
-type StoryLineSkeletonProps = ComponentProps<typeof LineSkeleton>;
-type StoryTextSkeletonProps = ComponentProps<typeof TextSkeleton>;
-type StoryRectSkeletonProps = ComponentProps<typeof RectSkeleton>;
-type BasicButtonProps = ComponentProps<typeof BasicButton>;
-
-const meta: Meta = {
-    title: 'sds_engineer/Skeleton',
-    decorators: [WithTheme],
-};
-
-export default meta;
-
-const roundnessKeys = Object.keys(radiuses).map((r) => String(r));
-
-const Default: StoryObj = {
-    argTypes: {
-        roundness: {
-            options: roundnessKeys,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        roundness: '16',
-        customGradientColor: '',
-        lighter: false,
-    },
-};
-
-export const Line: StoryObj<StoryLineSkeletonProps> = {
-    argTypes: {
-        ...argTypesFromConfig(mergeConfig(lineSkeletonConfig, lineSkeletonCustomConfig)),
-        ...Default.argTypes,
-    },
-    args: {
-        size: 'bodyM',
-        ...Default.args,
-    },
-    render: (args) => <LineSkeleton {...args} />,
-};
-
-export const Text: StoryObj<StoryTextSkeletonProps> = {
-    argTypes: {
-        ...argTypesFromConfig(mergeConfig(lineSkeletonConfig, lineSkeletonCustomConfig)),
-        ...Default.argTypes,
-    },
-    args: {
-        size: 'bodyM',
-        lines: 5,
-        width: '',
-        ...Default.args,
-    },
-    render: (args) => <TextSkeleton {...args} />,
-};
-
-export const Rect: StoryObj<StoryRectSkeletonProps> = {
-    argTypes: {
-        ...Default.argTypes,
-    },
-    args: {
-        width: '4rem',
-        height: '4rem',
-        ...Default.args,
-    },
-    render: (args) => <RectSkeleton {...args} />,
-};
-
-const ButtonSkeleton = withSkeleton<BasicButtonProps & WithSkeletonProps>(BasicButton);
-
-export const Button: StoryObj = {
-    args: {
-        skeleton: true,
-    },
-    render: (args) => <ButtonSkeleton view="default" text="test" {...args} />,
-};

package/styled-components/es/examples/sds_engineer/components/Spinner/Spinner.config.js

@@ -1,25 +0,0 @@
-import { css } from 'styled-components';
-import { spinnerTokens } from '../../../../components/Spinner';
-export var config = {
-  defaults: {
-    view: 'accent',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      s: /*#__PURE__*/css(["", ":16px;"], spinnerTokens.size),
-      m: /*#__PURE__*/css(["", ":24px;"], spinnerTokens.size),
-      l: /*#__PURE__*/css(["", ":36px;"], spinnerTokens.size)
-    },
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);"], spinnerTokens.color),
-      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);"], spinnerTokens.color),
-      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);"], spinnerTokens.color),
-      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);"], spinnerTokens.color),
-      accent: /*#__PURE__*/css(["", ":var(--text-accent);"], spinnerTokens.color),
-      positive: /*#__PURE__*/css(["", ":var(--text-positive);"], spinnerTokens.color),
-      warning: /*#__PURE__*/css(["", ":var(--text-warning);"], spinnerTokens.color),
-      negative: /*#__PURE__*/css(["", ":var(--text-negative);"], spinnerTokens.color)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Spinner/Spinner.js

@@ -1,5 +0,0 @@
-import { spinnerConfig } from '../../../../components/Spinner';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Spinner.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig, config);
-export var Spinner = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/sds_engineer/components/Spinner/Spinner.stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { spinnerConfig } from '../../../../components/Spinner';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-
-import { config } from './Spinner.config';
-import { Spinner } from './Spinner';
-
-const meta: Meta<typeof Spinner> = {
-    title: 'sds_engineer/Spinner',
-    decorators: [WithTheme],
-    component: Spinner,
-};
-
-export default meta;
-
-type Story = StoryObj<ComponentProps<typeof Spinner>>;
-
-const mergedConfig = mergeConfig(spinnerConfig, config);
-
-export const Default: Story = {
-    argTypes: {
-        ...argTypesFromConfig(mergedConfig),
-    },
-    args: {
-        view: 'accent',
-        size: 'm',
-    },
-};
-
-export const CustomSize: Story = {
-    argTypes: {
-        ...argTypesFromConfig(mergedConfig, ['size']),
-        width: {
-            control: {
-                type: 'text',
-            },
-        },
-        height: {
-            control: {
-                type: 'text',
-            },
-        },
-    },
-    args: {
-        width: '100px',
-        height: '100px',
-        view: 'accent',
-    },
-};

package/styled-components/es/examples/sds_engineer/components/Switch/Switch.config.js

@@ -1,30 +0,0 @@
-import { css } from 'styled-components';
-import { switchTokens } from '../../../../components/Switch';
-import { labelPosition_After } from '../../../../components/Switch/_label-position/after';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 's',
-    focused: 'true',
-    labelPosition: 'after'
-  },
-  variations: {
-    size: {
-      xs: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-line-height);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":1.75rem;", ":1rem;", ":calc(var(", ") / 2);", ":0.85rem;", ":0.05rem;", ":calc(var(", ") / 2);", ":1.25;", ":0.5rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbPressScale, switchTokens.labelOffset),
-      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-line-height);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":1.75rem;", ":1rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":0.05rem;", ":calc(var(", ") / 2);", ":1.25;", ":0.5rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbPressScale, switchTokens.labelOffset),
-      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-line-height);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":1.75rem;", ":1rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":0.05rem;", ":calc(var(", ") / 2);", ":1.25;", ":0.5rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbPressScale, switchTokens.labelOffset)
-    },
-    view: {
-      "default": /*#__PURE__*/css(["", ":rgb(71,212,95);", ":rgb(22,200,62);", ":rgba(30,131,198,0.11);", ":rgba(30,131,198,0.25);", ":var(--on-dark-surface-solid-default);", ":0 0 0.25rem 0 rgba(1,111,0,0.71);", ":0 0 0.25rem 0 rgba(70,106,251,0.71);"], switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadowOn, switchTokens.thumbBoxShadow)
-    },
-    labelPosition: {
-      after: labelPosition_After
-    },
-    disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
-    },
-    focused: {
-      "true": /*#__PURE__*/css(["", ":rgb(22,200,62);"], switchTokens.trackFocusColor)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Switch/Switch.js

@@ -1,5 +0,0 @@
-import { switchConfig } from '../../../../components/Switch';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Switch.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(switchConfig, config);
-export var Switch = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/sds_engineer/components/Switch/Switch.stories.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { switchConfig } from '../../../../components/Switch';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-
-import { config } from './Switch.config';
-import { Switch } from './Switch';
-
-type SwitchProps = ComponentProps<typeof Switch>;
-
-const meta: Meta<SwitchProps> = {
-    title: 'sds_engineer/Switch',
-    decorators: [WithTheme],
-    component: Switch,
-    argTypes: argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
-    args: {
-        label: 'Label',
-    },
-};
-
-export default meta;
-
-const StyledWrapper = styled.div`
-    width: 13.75rem;
-`;
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const StoryDefault = (args: SwitchProps) => {
-    const value = 'yes';
-    const name = 'agree';
-    const [checked, setChecked] = useState(true);
-
-    return (
-        <StyledWrapper>
-            <Switch
-                value={value}
-                name={name}
-                checked={checked}
-                onChange={(event) => {
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...args}
-            />
-        </StyledWrapper>
-    );
-};
-
-export const Default: StoryObj<SwitchProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};