@salutejs/sdds-cs 0.229.1-canary.1705.12809393515.0 → 0.230.0-canary.1696.12814018283.0

package/api/sdds-cs.api.md

@@ -67,6 +67,7 @@ import { CommitInstanceCallback } from '@salutejs/plasma-new-hope/types/componen
 import { ComponentProps } from 'react';
 import { CounterProps } from '@salutejs/plasma-new-hope/styled-components';
 import { counterTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { CustomCounterProps } from '@salutejs/plasma-new-hope/types/components/Counter/Counter.types';
 import { CustomHeaderTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/Tabs.types';
 import { CustomHorizontalTabsProps } from '@salutejs/plasma-new-hope/types/components/Tabs/Tabs.types';
 import { CustomPopoverProps } from '@salutejs/plasma-new-hope/types/components/Popover/Popover.types';
@@ -769,8 +770,8 @@ fit: PolymorphicClassName;
 focused: {
 true: PolymorphicClassName;
 };
-}> & HTMLAttributes<HTMLDivElement> & {
-size: "s" | "m" | "l" | "xxl" | "fit";
+}> & ((HTMLAttributes<HTMLDivElement> & {
+size?: string | undefined;
 name?: string | undefined;
 url?: string | undefined;
 customText?: string | undefined;
@@ -778,7 +779,46 @@ status?: "active" | "inactive" | undefined;
 isScalable?: boolean | undefined;
 focused?: boolean | undefined;
 statusLabels?: StatusLabels | undefined;
-} & RefAttributes<HTMLDivElement>>;
+hasExtra?: boolean | undefined;
+type?: "badge" | "counter" | undefined;
+extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+badgeView?: string | undefined;
+pilled?: boolean | undefined;
+text?: string | undefined;
+customColor?: string | undefined;
+customBackgroundColor?: string | undefined;
+contentLeft?: ReactNode;
+contentRight?: ReactNode;
+} & {
+counterView?: undefined;
+count?: undefined;
+maxCount?: undefined;
+} & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
+size?: string | undefined;
+name?: string | undefined;
+url?: string | undefined;
+customText?: string | undefined;
+status?: "active" | "inactive" | undefined;
+isScalable?: boolean | undefined;
+focused?: boolean | undefined;
+statusLabels?: StatusLabels | undefined;
+hasExtra?: boolean | undefined;
+type?: "badge" | "counter" | undefined;
+extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+counterView?: string | undefined;
+count?: number | undefined;
+maxCount?: number | undefined;
+} & {
+badgeView?: undefined;
+pilled?: undefined;
+text?: undefined;
+customColor?: undefined;
+customBackgroundColor?: undefined;
+contentLeft?: undefined;
+contentRight?: undefined;
+} & RefAttributes<HTMLDivElement>))>;
 
 // @public (undocumented)
 export const AvatarGroup: FunctionComponent<PropsType<Variants> & HTMLAttributes<HTMLDivElement> & {
@@ -820,11 +860,9 @@ view?: string | undefined;
 contentLeft?: ReactNode;
 contentRight?: undefined;
 } & {
-children?: ReactNode;
-} & {
 clear?: true | undefined;
-pilled?: false | undefined;
-transparent?: false | undefined;
+pilled?: undefined;
+transparent?: undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 text?: string | undefined;
 customColor?: string | undefined;
@@ -836,27 +874,9 @@ view?: string | undefined;
 contentLeft?: ReactNode;
 contentRight?: undefined;
 } & {
-children?: ReactNode;
-} & {
-pilled?: true | undefined;
-transparent?: boolean | undefined;
-clear?: false | undefined;
-} & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
-text?: string | undefined;
-customColor?: string | undefined;
-customBackgroundColor?: string | undefined;
-maxWidth?: Property.Width<string | number> | undefined;
-size?: string | undefined;
-view?: string | undefined;
-} & {
-contentLeft?: ReactNode;
-contentRight?: undefined;
-} & {
-children?: ReactNode;
-} & {
 pilled?: boolean | undefined;
-transparent?: true | undefined;
-clear?: false | undefined;
+transparent?: boolean | undefined;
+clear?: undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 text?: string | undefined;
 customColor?: string | undefined;
@@ -868,11 +888,9 @@ view?: string | undefined;
 contentLeft?: undefined;
 contentRight?: ReactNode;
 } & {
-children?: ReactNode;
-} & {
 clear?: true | undefined;
-pilled?: false | undefined;
-transparent?: false | undefined;
+pilled?: undefined;
+transparent?: undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 text?: string | undefined;
 customColor?: string | undefined;
@@ -884,27 +902,9 @@ view?: string | undefined;
 contentLeft?: undefined;
 contentRight?: ReactNode;
 } & {
-children?: ReactNode;
-} & {
-pilled?: true | undefined;
-transparent?: boolean | undefined;
-clear?: false | undefined;
-} & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
-text?: string | undefined;
-customColor?: string | undefined;
-customBackgroundColor?: string | undefined;
-maxWidth?: Property.Width<string | number> | undefined;
-size?: string | undefined;
-view?: string | undefined;
-} & {
-contentLeft?: undefined;
-contentRight?: ReactNode;
-} & {
-children?: ReactNode;
-} & {
 pilled?: boolean | undefined;
-transparent?: true | undefined;
-clear?: false | undefined;
+transparent?: boolean | undefined;
+clear?: undefined;
 } & RefAttributes<HTMLDivElement>))>;
 
 export { BadgeProps }
@@ -1285,12 +1285,7 @@ negative: PolymorphicClassName;
 size: {
 s: PolymorphicClassName;
 };
-}> & HTMLAttributes<HTMLDivElement> & {
-count: number;
-maxCount?: number | undefined;
-size?: string | undefined;
-view?: string | undefined;
-} & RefAttributes<HTMLDivElement>>;
+}> & HTMLAttributes<HTMLDivElement> & CustomCounterProps & RefAttributes<HTMLDivElement>>;
 
 export { CounterProps }
 
@@ -1490,7 +1485,10 @@ export { DrawerProps }
 // @public (undocumented)
 export const Dropdown: <T extends DropdownItemOption>(props: Omit<DropdownNewProps<T>, "size" | "view"> & Pick<PropsType<    {
 size: {
+l: PolymorphicClassName;
+m: PolymorphicClassName;
 s: PolymorphicClassName;
+xs: PolymorphicClassName;
 };
 view: {
 default: PolymorphicClassName;
@@ -2446,7 +2444,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: "clear" | undefined;
 inputBackgroundType?: undefined;
-} & Omit<InputHTMLAttributes_2<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>) | ({
+} & Omit<InputHTMLAttributes_2<HTMLInputElement>, "size" | "onChange" | "value"> & RefAttributes<HTMLInputElement>) | ({
 value?: number | undefined;
 min?: number | undefined;
 max?: number | undefined;
@@ -2472,7 +2470,7 @@ onDecrement?: ((value: number) => void) | undefined;
 } & {
 segmentation?: string | undefined;
 inputBackgroundType?: string | undefined;
-} & Omit<InputHTMLAttributes_2<HTMLInputElement>, "onChange" | "size" | "value"> & RefAttributes<HTMLInputElement>))>;
+} & Omit<InputHTMLAttributes_2<HTMLInputElement>, "size" | "onChange" | "value"> & RefAttributes<HTMLInputElement>))>;
 
 export { numberInputClasses }
 

package/components/Avatar/Avatar.d.ts

@@ -23,8 +23,8 @@ declare const mergedConfig: import("@salutejs/plasma-new-hope/styled-components"
     focused: {
         true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
     };
-}>, import("react").HTMLAttributes<HTMLDivElement> & {
-    size: "s" | "m" | "l" | "xxl" | "fit";
+}>, (import("react").HTMLAttributes<HTMLDivElement> & {
+    size?: string | undefined;
     name?: string | undefined;
     url?: string | undefined;
     customText?: string | undefined;
@@ -32,7 +32,46 @@ declare const mergedConfig: import("@salutejs/plasma-new-hope/styled-components"
     isScalable?: boolean | undefined;
     focused?: boolean | undefined;
     statusLabels?: import("@salutejs/plasma-new-hope/types/components/Avatar/Avatar.types").StatusLabels | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    hasExtra?: boolean | undefined;
+    type?: "badge" | "counter" | undefined;
+    extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+    badgeView?: string | undefined;
+    pilled?: boolean | undefined;
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    contentLeft?: import("react").ReactNode;
+    contentRight?: import("react").ReactNode;
+} & {
+    counterView?: undefined;
+    count?: undefined;
+    maxCount?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
+    size?: string | undefined;
+    name?: string | undefined;
+    url?: string | undefined;
+    customText?: string | undefined;
+    status?: "active" | "inactive" | undefined;
+    isScalable?: boolean | undefined;
+    focused?: boolean | undefined;
+    statusLabels?: import("@salutejs/plasma-new-hope/types/components/Avatar/Avatar.types").StatusLabels | undefined;
+    hasExtra?: boolean | undefined;
+    type?: "badge" | "counter" | undefined;
+    extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+    counterView?: string | undefined;
+    count?: number | undefined;
+    maxCount?: number | undefined;
+} & {
+    badgeView?: undefined;
+    pilled?: undefined;
+    text?: undefined;
+    customColor?: undefined;
+    customBackgroundColor?: undefined;
+    contentLeft?: undefined;
+    contentRight?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>)>;
 declare const Avatar: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
     view: {
         default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
@@ -45,8 +84,32 @@ declare const Avatar: import("react").FunctionComponent<import("@salutejs/plasma
     focused: {
         true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
     };
-}> & import("react").HTMLAttributes<HTMLDivElement> & {
-    size: "s" | "m" | "l" | "xxl" | "fit";
+}> & ((import("react").HTMLAttributes<HTMLDivElement> & {
+    size?: string | undefined;
+    name?: string | undefined;
+    url?: string | undefined;
+    customText?: string | undefined;
+    status?: "active" | "inactive" | undefined;
+    isScalable?: boolean | undefined;
+    focused?: boolean | undefined;
+    statusLabels?: import("@salutejs/plasma-new-hope/types/components/Avatar/Avatar.types").StatusLabels | undefined;
+    hasExtra?: boolean | undefined;
+    type?: "badge" | "counter" | undefined;
+    extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+    badgeView?: string | undefined;
+    pilled?: boolean | undefined;
+    text?: string | undefined;
+    customColor?: string | undefined;
+    customBackgroundColor?: string | undefined;
+    contentLeft?: import("react").ReactNode;
+    contentRight?: import("react").ReactNode;
+} & {
+    counterView?: undefined;
+    count?: undefined;
+    maxCount?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
+    size?: string | undefined;
     name?: string | undefined;
     url?: string | undefined;
     customText?: string | undefined;
@@ -54,5 +117,20 @@ declare const Avatar: import("react").FunctionComponent<import("@salutejs/plasma
     isScalable?: boolean | undefined;
     focused?: boolean | undefined;
     statusLabels?: import("@salutejs/plasma-new-hope/types/components/Avatar/Avatar.types").StatusLabels | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    hasExtra?: boolean | undefined;
+    type?: "badge" | "counter" | undefined;
+    extraPlacement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined;
+} & {
+    counterView?: string | undefined;
+    count?: number | undefined;
+    maxCount?: number | undefined;
+} & {
+    badgeView?: undefined;
+    pilled?: undefined;
+    text?: undefined;
+    customColor?: undefined;
+    customBackgroundColor?: undefined;
+    contentLeft?: undefined;
+    contentRight?: undefined;
+} & import("react").RefAttributes<HTMLDivElement>))>;
 export { Avatar, mergedConfig };

package/components/Badge/Badge.d.ts

@@ -31,28 +31,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
 } & {
     contentLeft?: import("react").ReactNode;
     contentRight?: undefined;
-} & {
-    children?: import("react").ReactNode;
 } & {
     clear?: true | undefined;
-    pilled?: false | undefined;
-    transparent?: false | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
-    text?: string | undefined;
-    customColor?: string | undefined;
-    customBackgroundColor?: string | undefined;
-    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
-    size?: string | undefined;
-    view?: string | undefined;
-} & {
-    contentLeft?: import("react").ReactNode;
-    contentRight?: undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    pilled?: true | undefined;
-    transparent?: boolean | undefined;
-    clear?: false | undefined;
+    pilled?: undefined;
+    transparent?: undefined;
 } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
     text?: string | undefined;
     customColor?: string | undefined;
@@ -63,12 +45,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
 } & {
     contentLeft?: import("react").ReactNode;
     contentRight?: undefined;
-} & {
-    children?: import("react").ReactNode;
 } & {
     pilled?: boolean | undefined;
-    transparent?: true | undefined;
-    clear?: false | undefined;
+    transparent?: boolean | undefined;
+    clear?: undefined;
 } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
     text?: string | undefined;
     customColor?: string | undefined;
@@ -79,28 +59,10 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
 } & {
     contentLeft?: undefined;
     contentRight?: import("react").ReactNode;
-} & {
-    children?: import("react").ReactNode;
 } & {
     clear?: true | undefined;
-    pilled?: false | undefined;
-    transparent?: false | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
-    text?: string | undefined;
-    customColor?: string | undefined;
-    customBackgroundColor?: string | undefined;
-    maxWidth?: import("csstype").Property.Width<string | number> | undefined;
-    size?: string | undefined;
-    view?: string | undefined;
-} & {
-    contentLeft?: undefined;
-    contentRight?: import("react").ReactNode;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    pilled?: true | undefined;
-    transparent?: boolean | undefined;
-    clear?: false | undefined;
+    pilled?: undefined;
+    transparent?: undefined;
 } & import("react").RefAttributes<HTMLDivElement>) | (import("react").HTMLAttributes<HTMLDivElement> & {
     text?: string | undefined;
     customColor?: string | undefined;
@@ -111,10 +73,8 @@ export declare const Badge: import("react").FunctionComponent<import("@salutejs/
 } & {
     contentLeft?: undefined;
     contentRight?: import("react").ReactNode;
-} & {
-    children?: import("react").ReactNode;
 } & {
     pilled?: boolean | undefined;
-    transparent?: true | undefined;
-    clear?: false | undefined;
+    transparent?: boolean | undefined;
+    clear?: undefined;
 } & import("react").RefAttributes<HTMLDivElement>))>;

package/components/Counter/Counter.d.ts

@@ -12,9 +12,4 @@ export declare const Counter: import("react").FunctionComponent<import("@salutej
     size: {
         s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
     };
-}> & import("react").HTMLAttributes<HTMLDivElement> & {
-    count: number;
-    maxCount?: number | undefined;
-    size?: string | undefined;
-    view?: string | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+}> & import("react").HTMLAttributes<HTMLDivElement> & import("@salutejs/plasma-new-hope/types/components/Counter/Counter.types").CustomCounterProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/Dropdown/Dropdown.config.d.ts

@@ -5,7 +5,10 @@ export declare const config: {
     };
     variations: {
         size: {
+            l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
             s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
         };
         view: {
             default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;

package/components/Dropdown/Dropdown.config.js

@@ -5,19 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var config = exports.config = {
   defaults: {
     view: 'default',
-    size: 's'
+    size: 'm'
   },
   variations: {
     size: {
-      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), _styledComponents.dropdownTokens.padding, _styledComponents.dropdownTokens.width, _styledComponents.dropdownTokens.borderRadius, _styledComponents.dropdownTokens.borderWidth, _styledComponents.dropdownTokens.itemHeight, _styledComponents.dropdownTokens.itemMargin, _styledComponents.dropdownTokens.itemPadding, _styledComponents.dropdownTokens.itemPaddingTight, _styledComponents.dropdownTokens.itemBorderRadius, _styledComponents.dropdownTokens.dividerMarginTop, _styledComponents.dropdownTokens.dividerMarginRight, _styledComponents.dropdownTokens.dividerMarginBottom, _styledComponents.dropdownTokens.dividerMarginLeft, _styledComponents.dropdownTokens.dividerMarginTopTight, _styledComponents.dropdownTokens.dividerMarginBottomTight, _styledComponents.dropdownTokens.itemFontFamily, _styledComponents.dropdownTokens.itemFontSize, _styledComponents.dropdownTokens.itemFontStyle, _styledComponents.dropdownTokens.itemFontWeightBold, _styledComponents.dropdownTokens.itemFontLetterSpacing, _styledComponents.dropdownTokens.itemFontLineHeight, _styledComponents.dropdownTokens.cellPadding, _styledComponents.dropdownTokens.cellPaddingLeftContent, _styledComponents.dropdownTokens.cellPaddingContent, _styledComponents.dropdownTokens.cellPaddingRightContent, _styledComponents.dropdownTokens.cellTextboxGap, _styledComponents.dropdownTokens.cellGap, _styledComponents.dropdownTokens.cellTitleFontFamily, _styledComponents.dropdownTokens.cellTitleFontSize, _styledComponents.dropdownTokens.cellTitleFontStyle, _styledComponents.dropdownTokens.cellTitleFontWeight, _styledComponents.dropdownTokens.cellTitleLetterSpacing, _styledComponents.dropdownTokens.cellTitleLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 17.5rem;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1.125rem;\n                ", ": 0.75rem 1.125rem;\n\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n            "])), _styledComponents.dropdownTokens.padding, _styledComponents.dropdownTokens.width, _styledComponents.dropdownTokens.borderRadius, _styledComponents.dropdownTokens.borderWidth, _styledComponents.dropdownTokens.itemHeight, _styledComponents.dropdownTokens.itemPadding, _styledComponents.dropdownTokens.itemPaddingTight, _styledComponents.dropdownTokens.dividerMarginTop, _styledComponents.dropdownTokens.dividerMarginRight, _styledComponents.dropdownTokens.dividerMarginBottom, _styledComponents.dropdownTokens.dividerMarginLeft, _styledComponents.dropdownTokens.dividerMarginTopTight, _styledComponents.dropdownTokens.dividerMarginBottomTight, _styledComponents.dropdownTokens.itemFontFamily, _styledComponents.dropdownTokens.itemFontSize, _styledComponents.dropdownTokens.itemFontStyle, _styledComponents.dropdownTokens.itemFontWeightBold, _styledComponents.dropdownTokens.itemFontLetterSpacing, _styledComponents.dropdownTokens.itemFontLineHeight, _styledComponents.dropdownTokens.cellPadding, _styledComponents.dropdownTokens.cellPaddingLeftContent, _styledComponents.dropdownTokens.cellPaddingContent, _styledComponents.dropdownTokens.cellPaddingRightContent, _styledComponents.dropdownTokens.cellTextboxGap, _styledComponents.dropdownTokens.cellGap, _styledComponents.dropdownTokens.cellTitleFontFamily, _styledComponents.dropdownTokens.cellTitleFontSize, _styledComponents.dropdownTokens.cellTitleFontStyle, _styledComponents.dropdownTokens.cellTitleFontWeight, _styledComponents.dropdownTokens.cellTitleLetterSpacing, _styledComponents.dropdownTokens.cellTitleLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 15rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.875rem;\n                ", ": 0.5rem 0.875rem;\n\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), _styledComponents.dropdownTokens.padding, _styledComponents.dropdownTokens.width, _styledComponents.dropdownTokens.borderRadius, _styledComponents.dropdownTokens.borderWidth, _styledComponents.dropdownTokens.itemHeight, _styledComponents.dropdownTokens.itemPadding, _styledComponents.dropdownTokens.itemPaddingTight, _styledComponents.dropdownTokens.dividerMarginTop, _styledComponents.dropdownTokens.dividerMarginRight, _styledComponents.dropdownTokens.dividerMarginBottom, _styledComponents.dropdownTokens.dividerMarginLeft, _styledComponents.dropdownTokens.dividerMarginTopTight, _styledComponents.dropdownTokens.dividerMarginBottomTight, _styledComponents.dropdownTokens.itemFontFamily, _styledComponents.dropdownTokens.itemFontSize, _styledComponents.dropdownTokens.itemFontStyle, _styledComponents.dropdownTokens.itemFontWeightBold, _styledComponents.dropdownTokens.itemFontLetterSpacing, _styledComponents.dropdownTokens.itemFontLineHeight, _styledComponents.dropdownTokens.cellPadding, _styledComponents.dropdownTokens.cellPaddingLeftContent, _styledComponents.dropdownTokens.cellPaddingContent, _styledComponents.dropdownTokens.cellPaddingRightContent, _styledComponents.dropdownTokens.cellTextboxGap, _styledComponents.dropdownTokens.cellGap, _styledComponents.dropdownTokens.cellTitleFontFamily, _styledComponents.dropdownTokens.cellTitleFontSize, _styledComponents.dropdownTokens.cellTitleFontStyle, _styledComponents.dropdownTokens.cellTitleFontWeight, _styledComponents.dropdownTokens.cellTitleLetterSpacing, _styledComponents.dropdownTokens.cellTitleLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), _styledComponents.dropdownTokens.padding, _styledComponents.dropdownTokens.width, _styledComponents.dropdownTokens.borderRadius, _styledComponents.dropdownTokens.borderWidth, _styledComponents.dropdownTokens.itemHeight, _styledComponents.dropdownTokens.itemPadding, _styledComponents.dropdownTokens.itemPaddingTight, _styledComponents.dropdownTokens.dividerMarginTop, _styledComponents.dropdownTokens.dividerMarginRight, _styledComponents.dropdownTokens.dividerMarginBottom, _styledComponents.dropdownTokens.dividerMarginLeft, _styledComponents.dropdownTokens.dividerMarginTopTight, _styledComponents.dropdownTokens.dividerMarginBottomTight, _styledComponents.dropdownTokens.itemFontFamily, _styledComponents.dropdownTokens.itemFontSize, _styledComponents.dropdownTokens.itemFontStyle, _styledComponents.dropdownTokens.itemFontWeightBold, _styledComponents.dropdownTokens.itemFontLetterSpacing, _styledComponents.dropdownTokens.itemFontLineHeight, _styledComponents.dropdownTokens.cellPadding, _styledComponents.dropdownTokens.cellPaddingLeftContent, _styledComponents.dropdownTokens.cellPaddingContent, _styledComponents.dropdownTokens.cellPaddingRightContent, _styledComponents.dropdownTokens.cellTextboxGap, _styledComponents.dropdownTokens.cellGap, _styledComponents.dropdownTokens.cellTitleFontFamily, _styledComponents.dropdownTokens.cellTitleFontSize, _styledComponents.dropdownTokens.cellTitleFontStyle, _styledComponents.dropdownTokens.cellTitleFontWeight, _styledComponents.dropdownTokens.cellTitleLetterSpacing, _styledComponents.dropdownTokens.cellTitleLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 10rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem 0.5rem;\n\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n            "])), _styledComponents.dropdownTokens.padding, _styledComponents.dropdownTokens.width, _styledComponents.dropdownTokens.borderRadius, _styledComponents.dropdownTokens.borderWidth, _styledComponents.dropdownTokens.itemHeight, _styledComponents.dropdownTokens.itemPadding, _styledComponents.dropdownTokens.itemPaddingTight, _styledComponents.dropdownTokens.dividerMarginTop, _styledComponents.dropdownTokens.dividerMarginRight, _styledComponents.dropdownTokens.dividerMarginBottom, _styledComponents.dropdownTokens.dividerMarginLeft, _styledComponents.dropdownTokens.dividerMarginTopTight, _styledComponents.dropdownTokens.dividerMarginBottomTight, _styledComponents.dropdownTokens.itemFontFamily, _styledComponents.dropdownTokens.itemFontSize, _styledComponents.dropdownTokens.itemFontStyle, _styledComponents.dropdownTokens.itemFontWeightBold, _styledComponents.dropdownTokens.itemFontLetterSpacing, _styledComponents.dropdownTokens.itemFontLineHeight, _styledComponents.dropdownTokens.cellPadding, _styledComponents.dropdownTokens.cellPaddingLeftContent, _styledComponents.dropdownTokens.cellPaddingContent, _styledComponents.dropdownTokens.cellPaddingRightContent, _styledComponents.dropdownTokens.cellTextboxGap, _styledComponents.dropdownTokens.cellGap, _styledComponents.dropdownTokens.cellTitleFontFamily, _styledComponents.dropdownTokens.cellTitleFontSize, _styledComponents.dropdownTokens.cellTitleFontStyle, _styledComponents.dropdownTokens.cellTitleFontWeight, _styledComponents.dropdownTokens.cellTitleLetterSpacing, _styledComponents.dropdownTokens.cellTitleLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-accent);\n            "])), _styledComponents.dropdownTokens.dividerColor, _styledComponents.dropdownTokens.disabledOpacity, _styledComponents.dropdownTokens.borderColor, _styledComponents.dropdownTokens.focusColor, _styledComponents.dropdownTokens.background, _styledComponents.dropdownTokens.boxShadow, _styledComponents.dropdownTokens.disclosureIconColor, _styledComponents.dropdownTokens.itemBackground, _styledComponents.dropdownTokens.itemBackgroundHover, _styledComponents.dropdownTokens.itemColor, _styledComponents.dropdownTokens.disclosureIconColor, _styledComponents.dropdownTokens.dividerColor, _styledComponents.dropdownTokens.disclosureIconColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n            "])), _styledComponents.dropdownTokens.dividerColor, _styledComponents.dropdownTokens.disabledOpacity, _styledComponents.dropdownTokens.borderColor, _styledComponents.dropdownTokens.focusColor, _styledComponents.dropdownTokens.background, _styledComponents.dropdownTokens.boxShadow, _styledComponents.dropdownTokens.disclosureIconColor, _styledComponents.dropdownTokens.itemBackground, _styledComponents.dropdownTokens.itemBackgroundHover, _styledComponents.dropdownTokens.itemColor, _styledComponents.dropdownTokens.disclosureIconColor, _styledComponents.dropdownTokens.dividerColor)
     }
   }
 };

package/components/Dropdown/Dropdown.d.ts

@@ -2,7 +2,10 @@ import type { DropdownItemOption, DropdownNewProps } from '@salutejs/plasma-new-
 import React from 'react';
 declare const Dropdown: <T extends DropdownItemOption>(props: Omit<DropdownNewProps<T>, "size" | "view"> & Pick<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
     size: {
+        l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
         s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
     };
     view: {
         default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;

package/components/NumberInput/NumberInput.d.ts

@@ -45,7 +45,7 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
 } & {
     segmentation?: "clear" | undefined;
     inputBackgroundType?: undefined;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>) | ({
+} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> & import("react").RefAttributes<HTMLInputElement>) | ({
     value?: number | undefined;
     min?: number | undefined;
     max?: number | undefined;
@@ -71,4 +71,4 @@ export declare const NumberInput: import("react").FunctionComponent<import("@sal
 } & {
     segmentation?: string | undefined;
     inputBackgroundType?: string | undefined;
-} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "value"> & import("react").RefAttributes<HTMLInputElement>))>;
+} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> & import("react").RefAttributes<HTMLInputElement>))>;

package/components/Tabs/TabItem.d.ts

@@ -24,7 +24,7 @@ declare const HorizontalTabItem: React.FunctionComponent<(import("@salutejs/plas
     pilled?: boolean | undefined;
     animated?: boolean | undefined;
     view?: string | undefined;
-    size?: "s" | "m" | "xs" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xs" | undefined;
     isActive?: boolean | undefined;
 } & {
     value?: string | number | undefined;
@@ -54,7 +54,7 @@ declare const HorizontalTabItem: React.FunctionComponent<(import("@salutejs/plas
     pilled?: boolean | undefined;
     animated?: boolean | undefined;
     view?: string | undefined;
-    size?: "s" | "m" | "xs" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xs" | undefined;
     isActive?: boolean | undefined;
 } & {
     value?: undefined;

package/emotion/cjs/components/Dropdown/Dropdown.config.js

@@ -5,19 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var config = exports.config = {
   defaults: {
     view: 'default',
-    size: 's'
+    size: 'm'
   },
   variations: {
     size: {
-      s: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), _emotion.dropdownTokens.padding, _emotion.dropdownTokens.width, _emotion.dropdownTokens.borderRadius, _emotion.dropdownTokens.borderWidth, _emotion.dropdownTokens.itemHeight, _emotion.dropdownTokens.itemMargin, _emotion.dropdownTokens.itemPadding, _emotion.dropdownTokens.itemPaddingTight, _emotion.dropdownTokens.itemBorderRadius, _emotion.dropdownTokens.dividerMarginTop, _emotion.dropdownTokens.dividerMarginRight, _emotion.dropdownTokens.dividerMarginBottom, _emotion.dropdownTokens.dividerMarginLeft, _emotion.dropdownTokens.dividerMarginTopTight, _emotion.dropdownTokens.dividerMarginBottomTight, _emotion.dropdownTokens.itemFontFamily, _emotion.dropdownTokens.itemFontSize, _emotion.dropdownTokens.itemFontStyle, _emotion.dropdownTokens.itemFontWeightBold, _emotion.dropdownTokens.itemFontLetterSpacing, _emotion.dropdownTokens.itemFontLineHeight, _emotion.dropdownTokens.cellPadding, _emotion.dropdownTokens.cellPaddingLeftContent, _emotion.dropdownTokens.cellPaddingContent, _emotion.dropdownTokens.cellPaddingRightContent, _emotion.dropdownTokens.cellTextboxGap, _emotion.dropdownTokens.cellGap, _emotion.dropdownTokens.cellTitleFontFamily, _emotion.dropdownTokens.cellTitleFontSize, _emotion.dropdownTokens.cellTitleFontStyle, _emotion.dropdownTokens.cellTitleFontWeight, _emotion.dropdownTokens.cellTitleLetterSpacing, _emotion.dropdownTokens.cellTitleLineHeight)
+      l: /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 17.5rem;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1.125rem;\n                ", ": 0.75rem 1.125rem;\n\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n            "])), _emotion.dropdownTokens.padding, _emotion.dropdownTokens.width, _emotion.dropdownTokens.borderRadius, _emotion.dropdownTokens.borderWidth, _emotion.dropdownTokens.itemHeight, _emotion.dropdownTokens.itemPadding, _emotion.dropdownTokens.itemPaddingTight, _emotion.dropdownTokens.dividerMarginTop, _emotion.dropdownTokens.dividerMarginRight, _emotion.dropdownTokens.dividerMarginBottom, _emotion.dropdownTokens.dividerMarginLeft, _emotion.dropdownTokens.dividerMarginTopTight, _emotion.dropdownTokens.dividerMarginBottomTight, _emotion.dropdownTokens.itemFontFamily, _emotion.dropdownTokens.itemFontSize, _emotion.dropdownTokens.itemFontStyle, _emotion.dropdownTokens.itemFontWeightBold, _emotion.dropdownTokens.itemFontLetterSpacing, _emotion.dropdownTokens.itemFontLineHeight, _emotion.dropdownTokens.cellPadding, _emotion.dropdownTokens.cellPaddingLeftContent, _emotion.dropdownTokens.cellPaddingContent, _emotion.dropdownTokens.cellPaddingRightContent, _emotion.dropdownTokens.cellTextboxGap, _emotion.dropdownTokens.cellGap, _emotion.dropdownTokens.cellTitleFontFamily, _emotion.dropdownTokens.cellTitleFontSize, _emotion.dropdownTokens.cellTitleFontStyle, _emotion.dropdownTokens.cellTitleFontWeight, _emotion.dropdownTokens.cellTitleLetterSpacing, _emotion.dropdownTokens.cellTitleLineHeight),
+      m: /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 15rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.875rem;\n                ", ": 0.5rem 0.875rem;\n\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), _emotion.dropdownTokens.padding, _emotion.dropdownTokens.width, _emotion.dropdownTokens.borderRadius, _emotion.dropdownTokens.borderWidth, _emotion.dropdownTokens.itemHeight, _emotion.dropdownTokens.itemPadding, _emotion.dropdownTokens.itemPaddingTight, _emotion.dropdownTokens.dividerMarginTop, _emotion.dropdownTokens.dividerMarginRight, _emotion.dropdownTokens.dividerMarginBottom, _emotion.dropdownTokens.dividerMarginLeft, _emotion.dropdownTokens.dividerMarginTopTight, _emotion.dropdownTokens.dividerMarginBottomTight, _emotion.dropdownTokens.itemFontFamily, _emotion.dropdownTokens.itemFontSize, _emotion.dropdownTokens.itemFontStyle, _emotion.dropdownTokens.itemFontWeightBold, _emotion.dropdownTokens.itemFontLetterSpacing, _emotion.dropdownTokens.itemFontLineHeight, _emotion.dropdownTokens.cellPadding, _emotion.dropdownTokens.cellPaddingLeftContent, _emotion.dropdownTokens.cellPaddingContent, _emotion.dropdownTokens.cellPaddingRightContent, _emotion.dropdownTokens.cellTextboxGap, _emotion.dropdownTokens.cellGap, _emotion.dropdownTokens.cellTitleFontFamily, _emotion.dropdownTokens.cellTitleFontSize, _emotion.dropdownTokens.cellTitleFontStyle, _emotion.dropdownTokens.cellTitleFontWeight, _emotion.dropdownTokens.cellTitleLetterSpacing, _emotion.dropdownTokens.cellTitleLineHeight),
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), _emotion.dropdownTokens.padding, _emotion.dropdownTokens.width, _emotion.dropdownTokens.borderRadius, _emotion.dropdownTokens.borderWidth, _emotion.dropdownTokens.itemHeight, _emotion.dropdownTokens.itemPadding, _emotion.dropdownTokens.itemPaddingTight, _emotion.dropdownTokens.dividerMarginTop, _emotion.dropdownTokens.dividerMarginRight, _emotion.dropdownTokens.dividerMarginBottom, _emotion.dropdownTokens.dividerMarginLeft, _emotion.dropdownTokens.dividerMarginTopTight, _emotion.dropdownTokens.dividerMarginBottomTight, _emotion.dropdownTokens.itemFontFamily, _emotion.dropdownTokens.itemFontSize, _emotion.dropdownTokens.itemFontStyle, _emotion.dropdownTokens.itemFontWeightBold, _emotion.dropdownTokens.itemFontLetterSpacing, _emotion.dropdownTokens.itemFontLineHeight, _emotion.dropdownTokens.cellPadding, _emotion.dropdownTokens.cellPaddingLeftContent, _emotion.dropdownTokens.cellPaddingContent, _emotion.dropdownTokens.cellPaddingRightContent, _emotion.dropdownTokens.cellTextboxGap, _emotion.dropdownTokens.cellGap, _emotion.dropdownTokens.cellTitleFontFamily, _emotion.dropdownTokens.cellTitleFontSize, _emotion.dropdownTokens.cellTitleFontStyle, _emotion.dropdownTokens.cellTitleFontWeight, _emotion.dropdownTokens.cellTitleLetterSpacing, _emotion.dropdownTokens.cellTitleLineHeight),
+      xs: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 10rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem 0.5rem;\n\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n            "])), _emotion.dropdownTokens.padding, _emotion.dropdownTokens.width, _emotion.dropdownTokens.borderRadius, _emotion.dropdownTokens.borderWidth, _emotion.dropdownTokens.itemHeight, _emotion.dropdownTokens.itemPadding, _emotion.dropdownTokens.itemPaddingTight, _emotion.dropdownTokens.dividerMarginTop, _emotion.dropdownTokens.dividerMarginRight, _emotion.dropdownTokens.dividerMarginBottom, _emotion.dropdownTokens.dividerMarginLeft, _emotion.dropdownTokens.dividerMarginTopTight, _emotion.dropdownTokens.dividerMarginBottomTight, _emotion.dropdownTokens.itemFontFamily, _emotion.dropdownTokens.itemFontSize, _emotion.dropdownTokens.itemFontStyle, _emotion.dropdownTokens.itemFontWeightBold, _emotion.dropdownTokens.itemFontLetterSpacing, _emotion.dropdownTokens.itemFontLineHeight, _emotion.dropdownTokens.cellPadding, _emotion.dropdownTokens.cellPaddingLeftContent, _emotion.dropdownTokens.cellPaddingContent, _emotion.dropdownTokens.cellPaddingRightContent, _emotion.dropdownTokens.cellTextboxGap, _emotion.dropdownTokens.cellGap, _emotion.dropdownTokens.cellTitleFontFamily, _emotion.dropdownTokens.cellTitleFontSize, _emotion.dropdownTokens.cellTitleFontStyle, _emotion.dropdownTokens.cellTitleFontWeight, _emotion.dropdownTokens.cellTitleLetterSpacing, _emotion.dropdownTokens.cellTitleLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-accent);\n            "])), _emotion.dropdownTokens.dividerColor, _emotion.dropdownTokens.disabledOpacity, _emotion.dropdownTokens.borderColor, _emotion.dropdownTokens.focusColor, _emotion.dropdownTokens.background, _emotion.dropdownTokens.boxShadow, _emotion.dropdownTokens.disclosureIconColor, _emotion.dropdownTokens.itemBackground, _emotion.dropdownTokens.itemBackgroundHover, _emotion.dropdownTokens.itemColor, _emotion.dropdownTokens.disclosureIconColor, _emotion.dropdownTokens.dividerColor, _emotion.dropdownTokens.disclosureIconColor)
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n            "])), _emotion.dropdownTokens.dividerColor, _emotion.dropdownTokens.disabledOpacity, _emotion.dropdownTokens.borderColor, _emotion.dropdownTokens.focusColor, _emotion.dropdownTokens.background, _emotion.dropdownTokens.boxShadow, _emotion.dropdownTokens.disclosureIconColor, _emotion.dropdownTokens.itemBackground, _emotion.dropdownTokens.itemBackgroundHover, _emotion.dropdownTokens.itemColor, _emotion.dropdownTokens.disclosureIconColor, _emotion.dropdownTokens.dividerColor)
     }
   }
 };

package/emotion/cjs/components/Dropdown/Dropdown.stories.tsx

@@ -12,7 +12,7 @@ type DropdownProps = ComponentProps<typeof Dropdown>;
 
 const placements: DropdownProps['placement'][] = ['auto', 'top', 'right', 'bottom', 'left'];
 const triggers: DropdownProps['trigger'][] = ['click', 'hover'];
-const size = ['s'];
+const size = ['xs', 's', 'm', 'l'];
 const variant = ['normal', 'tight'];
 
 const meta: Meta<DropdownProps> = {
@@ -58,7 +58,7 @@ const meta: Meta<DropdownProps> = {
         },
     },
     args: {
-        size: 's',
+        size: 'm',
         variant: 'normal',
         placement: 'bottom-start',
         trigger: 'click',
@@ -72,6 +72,7 @@ const meta: Meta<DropdownProps> = {
     parameters: {
         controls: {
             include: [
+                'size',
                 'variant',
                 'placement',
                 'trigger',

package/emotion/es/components/Dropdown/Dropdown.config.js

@@ -1,17 +1,20 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
   defaults: {
     view: 'default',
-    size: 's'
+    size: 'm'
   },
   variations: {
     size: {
-      s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemMargin, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
+      l: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 17.5rem;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1.125rem;\n                ", ": 0.75rem 1.125rem;\n\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      m: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 15rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.875rem;\n                ", ": 0.5rem 0.875rem;\n\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      xs: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 10rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem 0.5rem;\n\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-accent);\n            "])), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor, tokens.disclosureIconColor)
+      "default": /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n            "])), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor)
     }
   }
 };

package/emotion/es/components/Dropdown/Dropdown.stories.tsx

@@ -12,7 +12,7 @@ type DropdownProps = ComponentProps<typeof Dropdown>;
 
 const placements: DropdownProps['placement'][] = ['auto', 'top', 'right', 'bottom', 'left'];
 const triggers: DropdownProps['trigger'][] = ['click', 'hover'];
-const size = ['s'];
+const size = ['xs', 's', 'm', 'l'];
 const variant = ['normal', 'tight'];
 
 const meta: Meta<DropdownProps> = {
@@ -58,7 +58,7 @@ const meta: Meta<DropdownProps> = {
         },
     },
     args: {
-        size: 's',
+        size: 'm',
         variant: 'normal',
         placement: 'bottom-start',
         trigger: 'click',
@@ -72,6 +72,7 @@ const meta: Meta<DropdownProps> = {
     parameters: {
         controls: {
             include: [
+                'size',
                 'variant',
                 'placement',
                 'trigger',

package/es/components/Dropdown/Dropdown.config.js

@@ -1,17 +1,20 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
 export var config = {
   defaults: {
     view: 'default',
-    size: 's'
+    size: 'm'
   },
   variations: {
     size: {
-      s: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemMargin, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
+      l: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 17.5rem;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1.125rem;\n                ", ": 0.75rem 1.125rem;\n\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.5rem;\n                ", ": 1.125rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-l-font-family);\n                ", ": var(--plasma-typo-body-l-font-size);\n                ", ": var(--plasma-typo-body-l-font-style);\n                ", ": var(--plasma-typo-body-l-font-weight);\n                ", ": var(--plasma-typo-body-l-letter-spacing);\n                ", ": var(--plasma-typo-body-l-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      m: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 15rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.875rem;\n                ", ": 0.5rem 0.875rem;\n\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 12.5rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem;\n                ", ": 0.25rem 0.75rem;\n\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0.75rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.375rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight),
+      xs: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 10rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem 0.5rem;\n\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0rem;\n                ", ": 0.125rem;\n                ", ": 0.25rem;\n                ", ": var(--plasma-typo-body-xs-font-family);\n                ", ": var(--plasma-typo-body-xs-font-size);\n                ", ": var(--plasma-typo-body-xs-font-style);\n                ", ": var(--plasma-typo-body-xs-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n            "])), tokens.padding, tokens.width, tokens.borderRadius, tokens.borderWidth, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.dividerMarginTop, tokens.dividerMarginRight, tokens.dividerMarginBottom, tokens.dividerMarginLeft, tokens.dividerMarginTopTight, tokens.dividerMarginBottomTight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-accent);\n            "])), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor, tokens.disclosureIconColor)
+      "default": /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.4;\n                ", ": var(--outline-solid-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-solid-card-brightness);\n                ", ": 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-accent);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-primary);\n            "])), tokens.dividerColor, tokens.disabledOpacity, tokens.borderColor, tokens.focusColor, tokens.background, tokens.boxShadow, tokens.disclosureIconColor, tokens.itemBackground, tokens.itemBackgroundHover, tokens.itemColor, tokens.disclosureIconColor, tokens.dividerColor)
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-cs",
-  "version": "0.229.1-canary.1705.12809393515.0",
+  "version": "0.230.0-canary.1696.12814018283.0",
   "description": "Salute Design System / React UI kit for SDDS CS web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "directory": "packages/sdds-cs"
   },
   "dependencies": {
-    "@salutejs/plasma-new-hope": "0.240.1-canary.1705.12809393515.0",
+    "@salutejs/plasma-new-hope": "0.241.0-canary.1696.12814018283.0",
     "@salutejs/sdds-themes": "0.31.0"
   },
   "peerDependencies": {
@@ -122,5 +122,5 @@
     "Anton Vinogradov"
   ],
   "sideEffects": false,
-  "gitHead": "eaa36af473f211d12017f072dcc843a5b24b42dd"
+  "gitHead": "1972aee0efc325d5fa7fbea728900a63adfd4455"
 }