@salutejs/plasma-new-hope 0.78.0-canary.1195.8939186735.0 → 0.78.0-canary.1201.8968491632.0

package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx

@@ -1,195 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-
-import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
-import { mergeConfig } from '../../../../../engines';
-import { dropdownConfig } from '../../../../../components/Dropdown';
-import { Button } from '../../Button/Button';
-import { Radiobox } from '../../Radiobox/Radiobox';
-import { Checkbox } from '../../Checkbox/Checkbox';
-import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
-
-import { Dropdown, DropdownItem } from './Dropdown';
-import { config } from './Dropdown.config';
-
-const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
-const triggers: Array<DropdownTrigger> = ['click', 'hover'];
-
-type StoryDropdownPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
-
-const meta: Meta<StoryDropdownProps> = {
-    title: 'plasma_web/Dropdown',
-    decorators: [WithTheme],
-    component: Dropdown,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        trigger: {
-            options: triggers,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
-    },
-    args: {
-        placement: 'bottom',
-        trigger: 'click',
-        closeOnOverlayClick: false,
-        closeOnEsc: true,
-        isFocusTrapped: true,
-        skidding: 0,
-        distance: 0,
-    },
-};
-
-export default meta;
-
-const onSelect = action('onSelect');
-const onClick = action('onClick');
-const onChange = action('onChange');
-
-const getDropdownItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StyledRadiobox = styled(Radiobox)`
-    margin-right: 0.5rem;
-`;
-
-const StyledCheckbox = styled(Checkbox)`
-    margin-left: auto;
-`;
-
-const StyledDisclosureRightIcon = styled.div`
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-left: auto;
-`;
-
-const DisclosureRightIcon = (props) => (
-    <StyledDisclosureRightIcon>
-        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-            <path
-                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
-                fill="currentColor"
-            />
-        </svg>
-    </StyledDisclosureRightIcon>
-);
-
-const StoryNormal = (args: StoryDropdownProps) => {
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
-
-    const { skidding, distance, placement, ...rest } = args;
-
-    const onMainClose = () => {
-        setIsOpen(false);
-        setIsOpenDropdown2(false);
-    };
-
-    const onMainToggle = (openValue: boolean) => {
-        setIsOpen(openValue);
-
-        if (!openValue) {
-            onMainClose();
-        }
-    };
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        onSelect(value, text);
-        setIsOpen(false);
-    };
-
-    return (
-        <div>
-            <h3>This is header</h3>
-            <Dropdown
-                target={<Button>Target</Button>}
-                isOpen={isOpen}
-                onToggle={onMainToggle}
-                offset={[Number(skidding), Number(distance)]}
-                placement={placement}
-                {...rest}
-            >
-                {getDropdownItems('item', 6).map((item) => (
-                    <DropdownItem
-                        key={item.value}
-                        isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
-                        onClick={onClick}
-                        value={item.value}
-                    >
-                        {item.child}
-                    </DropdownItem>
-                ))}
-                <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
-                    onToggle={(is) => setIsOpenDropdown2(is)}
-                    isOpen={isOpenDropdown2}
-                    offset={[0, 0]}
-                    isNested
-                    {...rest}
-                >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
-                    {getDropdownItems('nested', 4).map((item) => (
-                        <DropdownItem
-                            key={item.value}
-                            isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
-                            onClick={onClick}
-                            value={item.value}
-                        >
-                            {item.child}
-                        </DropdownItem>
-                    ))}
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="1"
-                        onChange={onChange}
-                        text="Radiobox 1"
-                    />
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="2"
-                        onChange={onChange}
-                        text="Radiobox 2"
-                    />
-                </Dropdown>
-
-                <DropdownItem
-                    isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
-                    onClick={onClick}
-                    value="disabled"
-                    disabled
-                >
-                    disabled
-                </DropdownItem>
-            </Dropdown>
-        </div>
-    );
-};
-
-export const Normal: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryNormal {...args} />,
-};

package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js

@@ -1,21 +0,0 @@
-import { css } from 'styled-components';
-import { dropdownTokens } from '../../../../../components/Dropdown';
-var dropdownSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.width, ": 12.5rem;\n    ").concat(dropdownTokens.height, ": auto;\n    ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n    ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n    ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n    ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n    ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
-var dropdownItemSizeCommon = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemWidth, ": auto;\n    ").concat(dropdownTokens.itemHeight, ": auto;\n    ").concat(dropdownTokens.itemMarginTop, ": 0;\n    ").concat(dropdownTokens.itemMarginRight, ": 0;\n    ").concat(dropdownTokens.itemMarginBottom, ": 0;\n    ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      xs: /*#__PURE__*/css(["", ";", ";", ":0.3125rem;", ":0.5rem;", ":0.3125rem;", ":0.5rem;", ":0.375rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      s: /*#__PURE__*/css(["", ";", ";", ":0.4375rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      m: /*#__PURE__*/css(["", ";", ";", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
-      l: /*#__PURE__*/css(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
-    },
-    view: {
-      "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
-    }
-  }
-};

package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js

@@ -1,7 +0,0 @@
-import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
-import { component, mergeConfig } from '../../../../../engines';
-import { config } from './Dropdown.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
-export var Dropdown = /*#__PURE__*/component(mergedConfig);
-var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
-export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);

package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -1,195 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-
-import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
-import { mergeConfig } from '../../../../../engines';
-import { dropdownConfig } from '../../../../../components/Dropdown';
-import { Button } from '../../Button/Button';
-import { Radiobox } from '../../Radiobox/Radiobox';
-import { Checkbox } from '../../Checkbox/Checkbox';
-import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
-
-import { Dropdown, DropdownItem } from './Dropdown';
-import { config } from './Dropdown.config';
-
-const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
-const triggers: Array<DropdownTrigger> = ['click', 'hover'];
-
-type StoryDropdownPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
-
-const meta: Meta<StoryDropdownProps> = {
-    title: 'plasma_web/Dropdown',
-    decorators: [WithTheme],
-    component: Dropdown,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        trigger: {
-            options: triggers,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
-    },
-    args: {
-        placement: 'bottom',
-        trigger: 'click',
-        closeOnOverlayClick: false,
-        closeOnEsc: true,
-        isFocusTrapped: true,
-        skidding: 0,
-        distance: 0,
-    },
-};
-
-export default meta;
-
-const onSelect = action('onSelect');
-const onClick = action('onClick');
-const onChange = action('onChange');
-
-const getDropdownItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StyledRadiobox = styled(Radiobox)`
-    margin-right: 0.5rem;
-`;
-
-const StyledCheckbox = styled(Checkbox)`
-    margin-left: auto;
-`;
-
-const StyledDisclosureRightIcon = styled.div`
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-left: auto;
-`;
-
-const DisclosureRightIcon = (props) => (
-    <StyledDisclosureRightIcon>
-        <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-            <path
-                d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
-                fill="currentColor"
-            />
-        </svg>
-    </StyledDisclosureRightIcon>
-);
-
-const StoryTight = (args: StoryDropdownProps) => {
-    const [selected, setSelected] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
-
-    const { skidding, distance, placement, ...rest } = args;
-
-    const onMainClose = () => {
-        setIsOpen(false);
-        setIsOpenDropdown2(false);
-    };
-
-    const onMainToggle = (openValue: boolean) => {
-        setIsOpen(openValue);
-
-        if (!openValue) {
-            onMainClose();
-        }
-    };
-
-    const handleSelect = (value: string, text: string) => {
-        setSelected(value);
-        onSelect(value, text);
-        setIsOpen(false);
-    };
-
-    return (
-        <div>
-            <h3>This is header</h3>
-            <Dropdown
-                target={<Button>Target</Button>}
-                isOpen={isOpen}
-                onToggle={onMainToggle}
-                offset={[Number(skidding), Number(distance)]}
-                placement={placement}
-                {...rest}
-            >
-                {getDropdownItems('item', 6).map((item) => (
-                    <DropdownItem
-                        key={item.value}
-                        isSelected={Boolean(item.value === selected)}
-                        onSelect={() => handleSelect(item.value, item.child)}
-                        onClick={onClick}
-                        value={item.value}
-                    >
-                        {item.child}
-                    </DropdownItem>
-                ))}
-                <Dropdown
-                    target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
-                    onToggle={(is) => setIsOpenDropdown2(is)}
-                    isOpen={isOpenDropdown2}
-                    offset={[0, 0]}
-                    isNested
-                    {...rest}
-                >
-                    <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
-                    {getDropdownItems('nested', 4).map((item) => (
-                        <DropdownItem
-                            key={item.value}
-                            isSelected={Boolean(item.value === selected)}
-                            onSelect={() => handleSelect(item.value, item.child)}
-                            onClick={onClick}
-                            value={item.value}
-                        >
-                            {item.child}
-                        </DropdownItem>
-                    ))}
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="1"
-                        onChange={onChange}
-                        text="Radiobox 1"
-                    />
-                    <DropdownItem
-                        contentLeft={StyledRadiobox}
-                        name="radio"
-                        value="2"
-                        onChange={onChange}
-                        text="Radiobox 2"
-                    />
-                </Dropdown>
-
-                <DropdownItem
-                    isSelected={selected === 'disabled'}
-                    onSelect={() => handleSelect('disabled', 'disabled')}
-                    onClick={onClick}
-                    value="disabled"
-                    disabled
-                >
-                    disabled
-                </DropdownItem>
-            </Dropdown>
-        </div>
-    );
-};
-
-export const Tight: StoryObj<StoryDropdownProps> = {
-    render: (args) => <StoryTight {...args} />,
-};

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js

@@ -1,39 +0,0 @@
-import { css } from 'styled-components';
-import { iconButtonTokens } from '../../../../components/IconButton';
-export var config = {
-  defaults: {
-    view: 'default',
-    focused: 'true',
-    size: 'm'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
-      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
-    },
-    size: {
-      l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
-      xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
-    },
-    disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
-    },
-    focused: {
-      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
-    }
-  }
-};

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js

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

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx

@@ -1,69 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { iconButtonConfig } from '../../../../components/IconButton';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { IconChevronLeft } from '../../../../components/_Icon';
-
-import { config } from './IconButton.config';
-import { IconButton } from './IconButton';
-
-const meta: Meta<typeof IconButton> = {
-    title: 'plasma_web/IconButton',
-    decorators: [WithTheme],
-    component: IconButton,
-    argTypes: {
-        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
-        pin: {
-            options: [
-                'square-square',
-                'square-clear',
-                'clear-square',
-                'clear-clear',
-                'clear-circle',
-                'circle-clear',
-                'circle-circle',
-                '',
-            ],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-        },
-    },
-};
-
-export default meta;
-
-const getSizeForIcon = (size) => {
-    const map = {
-        mr: 's',
-        lr: 's',
-        m: 's',
-        l: 's',
-        sr: 's',
-        xsr: 'xs',
-    };
-    if (map[size]) {
-        return map[size];
-    }
-
-    return size;
-};
-
-export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
-    args: {
-        children: <IconChevronLeft />,
-        view: 'default',
-        size: 'm',
-        disabled: false,
-        focused: true,
-        isLoading: false,
-    },
-    render: (args) => (
-        <IconButton {...args}>
-            <IconChevronLeft size={getSizeForIcon(args.size)} />
-        </IconButton>
-    ),
-};

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

@@ -1,16 +0,0 @@
-import { css } from 'styled-components';
-import { dropdownTokens } from '../../../../components/Dropdown';
-export var config = {
-  defaults: {
-    view: 'primary',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      m: /*#__PURE__*/css(["", ":15rem;", ":auto;", ":0;", ":0.5rem;", ":0;", ":0.5rem;", ":0;", ":auto;", ":1.25rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);", ":auto;", ":auto;", ":0.3125rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);", ":auto;", ":0.063rem;", ":0;", ":0;", ":0;", ":0;", ":auto;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0.25rem;", ":0;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0;", ":0;", ":0;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);"], dropdownTokens.width, dropdownTokens.height, dropdownTokens.borderRadius, dropdownTokens.paddingTop, dropdownTokens.paddingRight, dropdownTokens.paddingBottom, dropdownTokens.paddingLeft, dropdownTokens.headerWidth, dropdownTokens.headerHeight, dropdownTokens.headerPaddingTop, dropdownTokens.headerPaddingRight, dropdownTokens.headerPaddingBottom, dropdownTokens.headerPaddingLeft, dropdownTokens.headerMarginTop, dropdownTokens.headerMarginRight, dropdownTokens.headerMarginBottom, dropdownTokens.headerMarginLeft, dropdownTokens.headerFontFamily, dropdownTokens.headerFontSize, dropdownTokens.headerFontStyle, dropdownTokens.headerFontWeightBold, dropdownTokens.headerFontLetterSpacing, dropdownTokens.headerFontLineHeight, dropdownTokens.itemWidth, dropdownTokens.itemHeight, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemMarginTop, dropdownTokens.itemMarginRight, dropdownTokens.itemMarginBottom, dropdownTokens.itemMarginLeft, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight, dropdownTokens.dividerWidth, dropdownTokens.dividerHeight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.groupWidth, dropdownTokens.groupPaddingTop, dropdownTokens.groupPaddingRight, dropdownTokens.groupPaddingBottom, dropdownTokens.groupPaddingLeft, dropdownTokens.groupMarginTop, dropdownTokens.groupMarginRight, dropdownTokens.groupMarginBottom, dropdownTokens.groupMarginLeft, dropdownTokens.groupLabelPaddingTop, dropdownTokens.groupLabelPaddingRight, dropdownTokens.groupLabelPaddingBottom, dropdownTokens.groupLabelPaddingLeft, dropdownTokens.groupLabelMarginTop, dropdownTokens.groupLabelMarginRight, dropdownTokens.groupLabelMarginBottom, dropdownTokens.groupLabelMarginLeft, dropdownTokens.groupLabelFontFamily, dropdownTokens.groupLabelFontSize, dropdownTokens.groupLabelFontStyle, dropdownTokens.groupLabelFontWeight, dropdownTokens.groupLabelLetterSpacing, dropdownTokens.groupLabelLineHeight, dropdownTokens.footerWidth, dropdownTokens.footerHeight, dropdownTokens.footerPaddingTop, dropdownTokens.footerPaddingRight, dropdownTokens.footerPaddingBottom, dropdownTokens.footerPaddingLeft, dropdownTokens.footerMarginTop, dropdownTokens.footerMarginRight, dropdownTokens.footerMarginBottom, dropdownTokens.footerMarginLeft, dropdownTokens.footerFontFamily, dropdownTokens.footerFontSize, dropdownTokens.footerFontStyle, dropdownTokens.footerFontWeightBold, dropdownTokens.footerFontLetterSpacing, dropdownTokens.footerFontLineHeight)
-    },
-    view: {
-      primary: /*#__PURE__*/css(["", ":0.4;", ":var(--plasma-colors-white);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);", ":rgba(12,143,230,0.12);", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--plasma-colors-overlay-blur);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.headerBackground, dropdownTokens.itemBackground, dropdownTokens.itemColor, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.dividerColor, dropdownTokens.footerBackground, dropdownTokens.groupBackground, dropdownTokens.groupLabelColor)
-    }
-  }
-};

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

@@ -1,15 +0,0 @@
-import { dropdownConfig, dropdownDividerConfig, dropdownFooterConfig, dropdownGroupConfig, dropdownHeaderConfig, dropdownItemConfig } from '../../../../components/Dropdown';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Dropdown.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
-export var Dropdown = /*#__PURE__*/component(mergedConfig);
-var mergedDividerConfig = /*#__PURE__*/mergeConfig(dropdownDividerConfig);
-export var DropdownDivider = /*#__PURE__*/component(mergedDividerConfig);
-var mergedFooterConfig = /*#__PURE__*/mergeConfig(dropdownFooterConfig);
-export var DropdownFooter = /*#__PURE__*/component(mergedFooterConfig);
-var mergedGroupConfig = /*#__PURE__*/mergeConfig(dropdownGroupConfig);
-export var DropdownGroup = /*#__PURE__*/component(mergedGroupConfig);
-var mergedHeaderConfig = /*#__PURE__*/mergeConfig(dropdownHeaderConfig);
-export var DropdownHeader = /*#__PURE__*/component(mergedHeaderConfig);
-var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
-export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);