@salutejs/plasma-new-hope 0.78.0-canary.1203.8970261959.0 → 0.79.0-canary.1195.9053577477.0

package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_view/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Dropdown/ui/DropdownOld/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/components/Dropdown/ui/index.js

@@ -2,4 +2,8 @@ export { dropdownDividerRoot, dropdownDividerConfig } from './DropdownDivider/Dr
 export { dropdownFooterRoot, dropdownFooterConfig } from './DropdownFooter/DropdownFooter';
 export { dropdownGroupRoot, dropdownGroupConfig } from './DropdownGroup/DropdownGroup';
 export { dropdownHeaderRoot, dropdownHeaderConfig } from './DropdownHeader/DropdownHeader';
-export { dropdownItemRoot, dropdownItemConfig } from './DropdownItem/DropdownItem';
+export { DropdownItem } from './DropdownItem/DropdownItem';
+export { DropdownInner } from './DropdownInner/DropdownInner';
+export { dropdownItemOldRoot, dropdownItemOldConfig } from './DropdownItemOld/DropdownItemOld';
+export { dropdownOldRoot, dropdownOldConfig } from './DropdownOld/DropdownOld';
+export { tokens as dropdownOldTokens } from './DropdownOld/DropdownOld.tokens';

package/styled-components/es/components/Dropdown/utils/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import React, { cloneElement, isValidElement } from 'react';
+import React, { Children, cloneElement, isValidElement } from 'react';
 export var getPlacement = function getPlacement(placement) {
   return "".concat(placement, "-start");
 };
@@ -15,6 +15,20 @@ export var getPlacements = function getPlacements(placements) {
     return getPlacement(placement);
   });
 };
+export var getCorrectHeight = function getCorrectHeight(listHeight) {
+  if (Number.isNaN(Number(listHeight))) {
+    return listHeight.toString();
+  }
+  return "".concat(listHeight, "rem");
+};
+export var childrenWithProps = function childrenWithProps(children, additionalProps) {
+  return Children.map(children, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, additionalProps);
+    }
+    return child;
+  });
+};
 var isReactObject = function isReactObject(element) {
   return _typeof(element) === 'object' || typeof element === 'function';
 };

package/styled-components/es/components/Dropdown/variations/_size/tokens.json

@@ -1,9 +1 @@
-[
-    " --plasma-dropdown-width",
-    " --plasma-dropdown-height",
-    " --plasma-dropdown-border-radius",
-    " --plasma-dropdown-padding-top",
-    " --plasma-dropdown-padding-right",
-    " --plasma-dropdown-padding-bottom",
-    " --plasma-dropdown-padding-left"
-]
+[]

package/styled-components/es/components/Dropdown/variations/_view/tokens.json

@@ -1 +1 @@
-["--plasma-dropdown-background", "--plasma-dropdown-box-shadow"]
+[]

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

@@ -0,0 +1,41 @@
+import { buttonRoot } from '../Button';
+import { base as viewCSS } from '../Button/variations/_view/base';
+import { base as sizeCSS } from '../Button/variations/_size/base';
+import { base as disabledCSS } from '../Button/variations/_disabled/base';
+import { base as focusedCSS } from '../Button/variations/_focused/base';
+import { base as blurredCSS } from '../Button/variations/_blurred/base';
+import { base as stretchingCSS } from '../Button/variations/_stretching/base';
+import { base } from './IconButton.styles';
+export var iconButtonRoot = buttonRoot;
+export var iconButtonConfig = {
+  name: 'IconButton',
+  tag: 'button',
+  layout: iconButtonRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    },
+    focused: {
+      css: focusedCSS
+    },
+    blurred: {
+      css: blurredCSS
+    },
+    stretching: {
+      css: stretchingCSS
+    }
+  },
+  defaults: {
+    view: 'secondary',
+    size: 'm',
+    stretching: 'fixed'
+  }
+};

package/styled-components/es/components/IconButton/IconButton.styles.js

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+import { buttonTokens } from '../Button';
+import { baseContent as buttonBase } from '../Button/Button.styles';
+import { tokens } from './IconButton.tokens';
+
+// Переопределние токенов из Button
+export var mappingOverride = /*#__PURE__*/"\n    ".concat(buttonTokens.buttonPadding, ": 0;\n\n    ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n    ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n    ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n    ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n    ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n    ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n    ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n    ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n    ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n    ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n    ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n    ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n    ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
+export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);

package/styled-components/es/components/IconButton/IconButton.tokens.js

@@ -0,0 +1,25 @@
+export var tokens = {
+  iconButtonColor: '--plasma-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonColorHover: '--plasma-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
+  iconButtonColorActive: '--plasma-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
+  iconButtonScaleHover: '--plasma-icon-button-scale-hover',
+  iconButtonScaleActive: '---plasma-icon-button-scale-active',
+  iconButtonHeight: '--plasma-icon-button-height',
+  iconButtonWidth: '--plasma-icon-button-width',
+  iconButtonPadding: '--plasma-icon-button-padding',
+  iconButtonRadius: '--plasma-icon-button-radius',
+  iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
+  iconButtonFontFamily: '--plasma-icon-button-font-family',
+  iconButtonFontSize: '--plasma-icon-button-font-size',
+  iconButtonFontStyle: '--plasma-icon-button-font-style',
+  iconButtonFontWeight: '--plasma-icon-button-font-weight',
+  iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
+  iconButtonLineHeight: '--plasma-icon-button-line-height',
+  iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
+  iconButtonFocusColor: '--plasma-icon-button-focus-color',
+  iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
+  iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
+};

package/styled-components/es/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export { iconButtonRoot, iconButtonConfig } from './IconButton';
+export { tokens as iconButtonTokens } from './IconButton.tokens';

package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js

@@ -1,8 +1,8 @@
-import { dropdownItemRoot } from '../../../Dropdown';
+import { dropdownItemOldRoot } from '../../../Dropdown';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base } from './SelectItem.styles';
-export var selectItemRoot = dropdownItemRoot;
+export var selectItemRoot = dropdownItemOldRoot;
 export var selectItemConfig = {
   name: 'SelectItem',
   tag: 'div',

package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { tokens } from '../../Select.tokens';
 import { dropdownTokens } from '../../../Dropdown';
-import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
+import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles';
 
 // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
 export var mappingOverride = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n    ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n    ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n    ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n    ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n    ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n    ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n    ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n    ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n    ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n    ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n    ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n    ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n    ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n    ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n    ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n    ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n    ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n    ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n    ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n    ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n    ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n    ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n    ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n    ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n    ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n    ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n    ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n    ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n    ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");

package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js

@@ -11,8 +11,7 @@ export var DisclosureRight = function DisclosureRight(props) {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M9.883 4.707a1 1 0 011.414-1.414L16.004 8l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 8 9.883 4.707z",
-      fill: "currentColor",
-      fillOpacity: 0.56
+      fill: "currentColor"
     })));
   }
   return /*#__PURE__*/React.createElement("svg", _extends({

package/styled-components/es/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx

@@ -79,7 +79,7 @@ const baseEvents = [
 ];
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
+    const { isRange, isDouble, min, max, date } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -110,7 +110,6 @@ const StoryDefault = (args: CalendarProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
-            includeEdgeDates={includeEdgeDates}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -122,13 +121,12 @@ export const Default: StoryObj<CalendarProps> = {
         max: new Date(2023, 11, 24),
         isDouble: false,
         isRange: false,
-        includeEdgeDates: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps) => {
-    const { min, max, type, includeEdgeDates } = args;
+    const { min, max, type } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
 
     const handleOnChange = useCallback((newValue: Date) => {
@@ -152,7 +150,6 @@ const StoryBase = (args: CalendarBaseProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
-            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -171,14 +168,13 @@ export const Base: StoryObj<CalendarBaseProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
-        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryDouble = (args: CalendarDoubleProps) => {
-    const { min, max, includeEdgeDates } = args;
+    const { min, max } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const handleOnChange = useCallback((newValue: Date) => {
         setValue(newValue);
@@ -201,7 +197,6 @@ const StoryDouble = (args: CalendarDoubleProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
-            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -211,13 +206,12 @@ export const Double: StoryObj<CalendarDoubleProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
-        includeEdgeDates: false,
     },
     render: (args) => <StoryDouble {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps) => {
-    const { min, max, type, includeEdgeDates } = args;
+    const { min, max, type } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -243,7 +237,6 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
-            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -262,14 +255,13 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
-        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryRange {...args} />,
 };
 
 const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
-    const { min, max, includeEdgeDates } = args;
+    const { min, max } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -295,7 +287,6 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
-            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -305,13 +296,12 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
-        includeEdgeDates: false,
     },
     render: (args) => <StoryRangeDouble {...args} />,
 };
 
 const StoryWithPopover = (args: CalendarProps) => {
-    const { isDouble, min, max, includeEdgeDates } = args;
+    const { isDouble, min, max } = args;
     const [isOpen, setIsOpen] = useState(false);
     const [textValue, setTextValue] = useState('2023-10-16');
     const [value, setValue] = useState(new Date(textValue));
@@ -350,7 +340,6 @@ const StoryWithPopover = (args: CalendarProps) => {
                 disabledList={disabledDays}
                 min={min}
                 max={max}
-                includeEdgeDates={includeEdgeDates}
                 isDouble={isDouble}
                 isRange={false}
                 onChangeValue={handleOnChange}
@@ -364,7 +353,6 @@ export const WithPopover: StoryObj<CalendarProps> = {
         min: new Date(2023, 9, 1),
         max: new Date(2023, 11, 24),
         isDouble: false,
-        includeEdgeDates: false,
     },
     render: (args) => <StoryWithPopover {...args} />,
 };

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

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { dropdownTokens } from '../../../../components/Dropdown';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(["", ":0.125rem;", ":10rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":0.375rem;", ":0.3125rem;", ":0.3125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      s: /*#__PURE__*/css(["", ":0.125rem;", ":12.5rem;", ":0.625rem;", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.4375rem;", ":0.4375rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      m: /*#__PURE__*/css(["", ":0.125rem;", ":15rem;", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":0.625rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
+      l: /*#__PURE__*/css(["", ":0.125rem;", ":17.5rem;", ":0.875rem;", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":0.8125rem;", ":0.8125rem;", ":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);"], dropdownTokens.padding, dropdownTokens.width, dropdownTokens.borderRadius, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemPaddingTopTight, dropdownTokens.itemPaddingBottomTight, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-accent);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--text-secondary);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.focusColor, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.disclosureIconColor, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemColor)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { dropdownConfig } 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);

package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,292 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import type { DropdownPlacement, DropdownTrigger } from '../../../../components/Dropdown/Dropdown.types';
+
+import { Dropdown } from './Dropdown';
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown>;
+
+const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<DropdownTrigger> = ['click', 'hover'];
+const size = ['xs', 's', 'm', 'l'];
+const variant = ['normal', 'tight'];
+
+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',
+            },
+        },
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        trigger: 'click',
+        offset: [0, 0],
+        listWidth: 'auto',
+        hasArrow: true,
+        closeOnOverlayClick: true,
+        closeOnSelect: true,
+        size: 'm',
+        variant: 'normal',
+    },
+};
+
+export default meta;
+
+const items = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'south_america',
+        label: 'Южная Америка',
+        items: [
+            {
+                value: 'brazil',
+                label: 'Бразилия',
+                items: [
+                    {
+                        value: 'rio_de_janeiro',
+                        label: 'Рио-де-Жанейро',
+                    },
+                    {
+                        value: 'sao_paulo',
+                        label: 'Сан-Паулу',
+                    },
+                ],
+            },
+            {
+                value: 'argentina',
+                label: 'Аргентина',
+                items: [
+                    {
+                        value: 'buenos_aires',
+                        label: 'Буэнос-Айрес',
+                    },
+                    {
+                        value: 'cordoba',
+                        label: 'Кордова',
+                    },
+                ],
+            },
+            {
+                value: 'colombia',
+                label: 'Колумбия',
+                items: [
+                    {
+                        value: 'bogota',
+                        label: 'Богота',
+                    },
+                    {
+                        value: 'medellin',
+                        label: 'Медельин',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+        items: [
+            {
+                value: 'france',
+                label: 'Франция',
+                items: [
+                    {
+                        value: 'paris',
+                        label: 'Париж',
+                    },
+                    {
+                        value: 'lyon',
+                        label: 'Лион',
+                    },
+                ],
+            },
+            {
+                value: 'germany',
+                label: 'Германия',
+                items: [
+                    {
+                        value: 'berlin',
+                        label: 'Берлин',
+                    },
+                    {
+                        value: 'munich',
+                        label: 'Мюнхен',
+                    },
+                ],
+            },
+            {
+                value: 'italy',
+                label: 'Италия',
+                items: [
+                    {
+                        value: 'rome',
+                        label: 'Рим',
+                    },
+                    {
+                        value: 'milan',
+                        label: 'Милан',
+                    },
+                ],
+            },
+            {
+                value: 'spain',
+                label: 'Испания',
+                items: [
+                    {
+                        value: 'madrid',
+                        label: 'Мадрид',
+                    },
+                    {
+                        value: 'barcelona',
+                        label: 'Барселона',
+                    },
+                ],
+            },
+            {
+                value: 'united_kingdom',
+                label: 'Великобритания',
+                items: [
+                    {
+                        value: 'london',
+                        label: 'Лондон',
+                    },
+                    {
+                        value: 'manchester',
+                        label: 'Манчестер',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+        items: [
+            {
+                value: 'china',
+                label: 'Китай',
+                items: [
+                    {
+                        value: 'beijing',
+                        label: 'Пекин',
+                    },
+                    {
+                        value: 'shanghai',
+                        label: 'Шанхай',
+                    },
+                ],
+            },
+            {
+                value: 'japan',
+                label: 'Япония',
+                items: [
+                    {
+                        value: 'tokyo',
+                        label: 'Токио',
+                    },
+                    {
+                        value: 'osaka',
+                        label: 'Осака',
+                    },
+                ],
+            },
+            {
+                value: 'india',
+                label: 'Индия',
+                items: [
+                    {
+                        value: 'delhi',
+                        label: 'Дели',
+                    },
+                    {
+                        value: 'mumbai',
+                        label: 'Мумбаи',
+                    },
+                ],
+            },
+            {
+                value: 'south_korea',
+                label: 'Южная Корея',
+                items: [
+                    {
+                        value: 'seoul',
+                        label: 'Сеул',
+                    },
+                    {
+                        value: 'busan',
+                        label: 'Пусан',
+                    },
+                ],
+            },
+            {
+                value: 'thailand',
+                label: 'Таиланд',
+                items: [
+                    {
+                        value: 'bangkok',
+                        label: 'Бангкок',
+                    },
+                    {
+                        value: 'phuket',
+                        label: 'Пхукет',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+        disabled: true,
+    },
+];
+
+const StoryNormal = (args: StoryDropdownProps) => {
+    return (
+        <Dropdown
+            {...args}
+            items={items}
+            onToggle={action('onToggle')}
+            onHover={action('onHover')}
+            onItemSelect={action('onItemSelect')}
+            onItemClick={action('onItemClick')}
+        >
+            <Button text="Список стран" />
+        </Dropdown>
+    );
+};
+
+export const Default: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryNormal {...args} />,
+};