@salutejs/plasma-new-hope 0.78.0-canary.1185.8913944828.0 → 0.78.0-canary.1195.8913931601.0

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

@@ -0,0 +1,21 @@
+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_b2c/components/Dropdown/Tight/Dropdown.js

@@ -0,0 +1,7 @@
+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_b2c/components/Dropdown/Tight/Dropdown.stories.tsx

@@ -0,0 +1,195 @@
+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_b2c/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_b2c/components/IconButton/IconButton.config.js

@@ -0,0 +1,40 @@
+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),
+      primary: /*#__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.5remm;", ":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_b2c/components/IconButton/IconButton.js

@@ -0,0 +1,5 @@
+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_b2c/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,65 @@
+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_b2c/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) => {
+    if (size === 'mr') {
+        return 'm';
+    }
+    if (size === 'lr') {
+        return 'l';
+    }
+    if (size === 'sr') {
+        return 's';
+    }
+    if (size === 'xsr') {
+        return 'xs';
+    }
+    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} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
+};

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

@@ -0,0 +1,21 @@
+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.5625rem;", ":0.5rem;", ":0.5625rem;", ":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.6875rem;", ":0.75rem;", ":0.6875rem;", ":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.875rem;", ":0.875rem;", ":0.875rem;", ":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(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":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/Normal/Dropdown.js

@@ -0,0 +1,7 @@
+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/Normal/Dropdown.stories.tsx

@@ -0,0 +1,195 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,7 @@
+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);