@salutejs/plasma-new-hope 0.135.0-canary.1404.10631789671.0 → 0.135.0-canary.1405.10631388441.0

package/styled-components/cjs/examples/plasma_b2c/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { TextField } from '../TextField/TextField';
+
+import { InputGroup } from './InputGroup';
+
+type StoryProps = Omit<ComponentProps<typeof InputGroup>, 'gap'> & {
+    itemsCount?: number;
+    gapDefaultShape?: string;
+    gapSegmentedShape?: string;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const orientationValues = ['horizontal', 'vertical'];
+const gapDefaultValues = ['dense', 'wide'];
+const gapSegmentedValues = ['none', 'dense'];
+const shapeValues = ['segmented', 'default'];
+const stretchingValues = ['auto', 'filled'];
+
+const meta: Meta<typeof InputGroup> = {
+    title: 'plasma_b2c/InputGroup',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: orientationValues,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapeValues,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['gap']),
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    argTypes: {
+        gapDefaultShape: {
+            options: gapDefaultValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'default' },
+        },
+        gapSegmentedShape: {
+            options: gapSegmentedValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'segmented' },
+        },
+    },
+    args: {
+        size: 'm',
+        shape: 'default',
+        gapDefaultShape: 'dense',
+        gapSegmentedShape: 'dense',
+        orientation: 'horizontal',
+        itemsCount: 5,
+        stretching: 'auto',
+    },
+    render: ({ itemsCount, gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                {Array(itemsCount)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+        );
+    },
+};
+
+export const CustomInputs: Story = {
+    args: {
+        ...Default.args,
+        isCommonInputStyles: false,
+    },
+    argTypes: {
+        ...Default.argTypes,
+        ...disableProps(['itemsCount']),
+    },
+    render: ({ gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <>
+                <h3>Группа Input с разными размерами</h3>
+                <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                    <TextField placeholder="Размер l" size="l" />
+                    <TextField placeholder="Размер m" size="m" />
+                    <TextField placeholder="Размер s" size="s" />
+                    <TextField placeholder="Размер xs" size="xs" />
+                </InputGroup>
+            </>
+        );
+    },
+};

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -47,12 +47,6 @@ const meta: Meta = {
                 type: 'date',
             },
         },
-        lang: {
-            options: ['ru', 'en'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
     },
 };
 
@@ -69,8 +63,6 @@ const StoryDefault = ({
     valueError,
     valueSuccess,
     size,
-    lang,
-    format,
     ...rest
 }: StoryPropsDefault) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -91,8 +83,6 @@ const StoryDefault = ({
             onChangeValue={(e, currentValue) => {
                 onChangeValue(e, currentValue);
             }}
-            lang={lang}
-            format={format}
             onCommitDate={() => setIsOpen(false)}
             {...rest}
         />
@@ -112,12 +102,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',
@@ -125,7 +109,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         placeholder: '30.05.2024',
         size: 'l',
         view: 'default',
-        labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
@@ -137,8 +120,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         enableContentRight: true,
         valueError: false,
         valueSuccess: false,
-        lang: 'ru',
-        format: 'DD.MM.YYYY',
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -248,12 +229,6 @@ export const Range: StoryObj<StoryPropsRange> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',
@@ -280,9 +255,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         enableSecondTextfieldContentLeft: false,
         enableSecondTextfieldContentRight: false,
 
-        lang: 'ru',
-        format: 'DD.MM.YYYY',
-
         firstValueError: false,
         firstValueSuccess: false,
         secondValueError: false,
@@ -348,12 +320,6 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
                 type: 'inline-radio',
             },
         },
-        format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         label: 'Лейбл',

package/styled-components/cjs/examples/plasma_web/components/InputGroup/InputGroup.config.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _InputGroup = /*#__PURE__*/require("../../../../components/InputGroup");
+var config = exports.config = {
+  defaults: {
+    size: 'm'
+  },
+  variations: {
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":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);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _InputGroup.inputGroupTokens.inputDefaultRadius, _InputGroup.inputGroupTokens.inputSegmentedRadius, _InputGroup.inputGroupTokens.inputSideRadius, _InputGroup.inputGroupTokens.height, _InputGroup.inputGroupTokens.padding, _InputGroup.inputGroupTokens.paddingWithChips, _InputGroup.inputGroupTokens.leftContentMargin, _InputGroup.inputGroupTokens.rightContentMargin, _InputGroup.inputGroupTokens.textBeforeMargin, _InputGroup.inputGroupTokens.textAfterMargin, _InputGroup.inputGroupTokens.fontFamily, _InputGroup.inputGroupTokens.fontSize, _InputGroup.inputGroupTokens.fontStyle, _InputGroup.inputGroupTokens.fontWeight, _InputGroup.inputGroupTokens.letterSpacing, _InputGroup.inputGroupTokens.lineHeight, _InputGroup.inputGroupTokens.labelOffset, _InputGroup.inputGroupTokens.labelFontFamily, _InputGroup.inputGroupTokens.labelFontSize, _InputGroup.inputGroupTokens.labelFontStyle, _InputGroup.inputGroupTokens.labelFontWeight, _InputGroup.inputGroupTokens.labelLetterSpacing, _InputGroup.inputGroupTokens.labelLineHeight, _InputGroup.inputGroupTokens.leftHelperOffset, _InputGroup.inputGroupTokens.leftHelperFontFamily, _InputGroup.inputGroupTokens.leftHelperFontSize, _InputGroup.inputGroupTokens.leftHelperFontStyle, _InputGroup.inputGroupTokens.leftHelperFontWeight, _InputGroup.inputGroupTokens.leftHelperLetterSpacing, _InputGroup.inputGroupTokens.leftHelperLineHeight, _InputGroup.inputGroupTokens.labelInnerPadding, _InputGroup.inputGroupTokens.contentLabelInnerPadding, _InputGroup.inputGroupTokens.chipGap, _InputGroup.inputGroupTokens.chipBorderRadius, _InputGroup.inputGroupTokens.chipWidth, _InputGroup.inputGroupTokens.chipHeight, _InputGroup.inputGroupTokens.chipPaddingRight, _InputGroup.inputGroupTokens.chipPaddingLeft, _InputGroup.inputGroupTokens.chipClearContentMarginLeft, _InputGroup.inputGroupTokens.chipClearContentMarginRight, _InputGroup.inputGroupTokens.chipCloseIconSize, _InputGroup.inputGroupTokens.chipFontFamily, _InputGroup.inputGroupTokens.chipFontSize, _InputGroup.inputGroupTokens.chipFontStyle, _InputGroup.inputGroupTokens.chipFontWeight, _InputGroup.inputGroupTokens.chipLetterSpacing, _InputGroup.inputGroupTokens.chipLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.25rem;", ":0.75rem;", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":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);", ":0.25rem;", ":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);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":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);"], _InputGroup.inputGroupTokens.inputDefaultRadius, _InputGroup.inputGroupTokens.inputSegmentedRadius, _InputGroup.inputGroupTokens.inputSideRadius, _InputGroup.inputGroupTokens.height, _InputGroup.inputGroupTokens.padding, _InputGroup.inputGroupTokens.paddingWithChips, _InputGroup.inputGroupTokens.leftContentMargin, _InputGroup.inputGroupTokens.rightContentMargin, _InputGroup.inputGroupTokens.textBeforeMargin, _InputGroup.inputGroupTokens.textAfterMargin, _InputGroup.inputGroupTokens.fontFamily, _InputGroup.inputGroupTokens.fontSize, _InputGroup.inputGroupTokens.fontStyle, _InputGroup.inputGroupTokens.fontWeight, _InputGroup.inputGroupTokens.letterSpacing, _InputGroup.inputGroupTokens.lineHeight, _InputGroup.inputGroupTokens.labelOffset, _InputGroup.inputGroupTokens.labelFontFamily, _InputGroup.inputGroupTokens.labelFontSize, _InputGroup.inputGroupTokens.labelFontStyle, _InputGroup.inputGroupTokens.labelFontWeight, _InputGroup.inputGroupTokens.labelLetterSpacing, _InputGroup.inputGroupTokens.labelLineHeight, _InputGroup.inputGroupTokens.leftHelperOffset, _InputGroup.inputGroupTokens.leftHelperFontFamily, _InputGroup.inputGroupTokens.leftHelperFontSize, _InputGroup.inputGroupTokens.leftHelperFontStyle, _InputGroup.inputGroupTokens.leftHelperFontWeight, _InputGroup.inputGroupTokens.leftHelperLetterSpacing, _InputGroup.inputGroupTokens.leftHelperLineHeight, _InputGroup.inputGroupTokens.labelInnerPadding, _InputGroup.inputGroupTokens.contentLabelInnerPadding, _InputGroup.inputGroupTokens.chipGap, _InputGroup.inputGroupTokens.chipBorderRadius, _InputGroup.inputGroupTokens.chipWidth, _InputGroup.inputGroupTokens.chipHeight, _InputGroup.inputGroupTokens.chipPaddingRight, _InputGroup.inputGroupTokens.chipPaddingLeft, _InputGroup.inputGroupTokens.chipClearContentMarginLeft, _InputGroup.inputGroupTokens.chipClearContentMarginRight, _InputGroup.inputGroupTokens.chipCloseIconSize, _InputGroup.inputGroupTokens.chipFontFamily, _InputGroup.inputGroupTokens.chipFontSize, _InputGroup.inputGroupTokens.chipFontStyle, _InputGroup.inputGroupTokens.chipFontWeight, _InputGroup.inputGroupTokens.chipLetterSpacing, _InputGroup.inputGroupTokens.chipLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.625rem;", ":0.625rem;", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":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);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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);"], _InputGroup.inputGroupTokens.inputSegmentedRadius, _InputGroup.inputGroupTokens.inputSideRadius, _InputGroup.inputGroupTokens.inputDefaultRadius, _InputGroup.inputGroupTokens.height, _InputGroup.inputGroupTokens.padding, _InputGroup.inputGroupTokens.paddingWithChips, _InputGroup.inputGroupTokens.leftContentMargin, _InputGroup.inputGroupTokens.rightContentMargin, _InputGroup.inputGroupTokens.textBeforeMargin, _InputGroup.inputGroupTokens.textAfterMargin, _InputGroup.inputGroupTokens.fontFamily, _InputGroup.inputGroupTokens.fontSize, _InputGroup.inputGroupTokens.fontStyle, _InputGroup.inputGroupTokens.fontWeight, _InputGroup.inputGroupTokens.letterSpacing, _InputGroup.inputGroupTokens.lineHeight, _InputGroup.inputGroupTokens.labelOffset, _InputGroup.inputGroupTokens.labelFontFamily, _InputGroup.inputGroupTokens.labelFontSize, _InputGroup.inputGroupTokens.labelFontStyle, _InputGroup.inputGroupTokens.labelFontWeight, _InputGroup.inputGroupTokens.labelLetterSpacing, _InputGroup.inputGroupTokens.labelLineHeight, _InputGroup.inputGroupTokens.leftHelperOffset, _InputGroup.inputGroupTokens.leftHelperFontFamily, _InputGroup.inputGroupTokens.leftHelperFontSize, _InputGroup.inputGroupTokens.leftHelperFontStyle, _InputGroup.inputGroupTokens.leftHelperFontWeight, _InputGroup.inputGroupTokens.leftHelperLetterSpacing, _InputGroup.inputGroupTokens.leftHelperLineHeight, _InputGroup.inputGroupTokens.labelInnerPadding, _InputGroup.inputGroupTokens.contentLabelInnerPadding, _InputGroup.inputGroupTokens.chipGap, _InputGroup.inputGroupTokens.chipBorderRadius, _InputGroup.inputGroupTokens.chipWidth, _InputGroup.inputGroupTokens.chipHeight, _InputGroup.inputGroupTokens.chipPaddingRight, _InputGroup.inputGroupTokens.chipPaddingLeft, _InputGroup.inputGroupTokens.chipClearContentMarginLeft, _InputGroup.inputGroupTokens.chipClearContentMarginRight, _InputGroup.inputGroupTokens.chipCloseIconSize, _InputGroup.inputGroupTokens.chipFontFamily, _InputGroup.inputGroupTokens.chipFontSize, _InputGroup.inputGroupTokens.chipFontStyle, _InputGroup.inputGroupTokens.chipFontWeight, _InputGroup.inputGroupTokens.chipLetterSpacing, _InputGroup.inputGroupTokens.chipLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":0.5rem;", ":0.5rem;", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":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);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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);"], _InputGroup.inputGroupTokens.inputSegmentedRadius, _InputGroup.inputGroupTokens.inputDefaultRadius, _InputGroup.inputGroupTokens.inputSideRadius, _InputGroup.inputGroupTokens.height, _InputGroup.inputGroupTokens.padding, _InputGroup.inputGroupTokens.paddingWithChips, _InputGroup.inputGroupTokens.leftContentMargin, _InputGroup.inputGroupTokens.rightContentMargin, _InputGroup.inputGroupTokens.textBeforeMargin, _InputGroup.inputGroupTokens.textAfterMargin, _InputGroup.inputGroupTokens.fontFamily, _InputGroup.inputGroupTokens.fontSize, _InputGroup.inputGroupTokens.fontStyle, _InputGroup.inputGroupTokens.fontWeight, _InputGroup.inputGroupTokens.letterSpacing, _InputGroup.inputGroupTokens.lineHeight, _InputGroup.inputGroupTokens.labelOffset, _InputGroup.inputGroupTokens.labelFontFamily, _InputGroup.inputGroupTokens.labelFontSize, _InputGroup.inputGroupTokens.labelFontStyle, _InputGroup.inputGroupTokens.labelFontWeight, _InputGroup.inputGroupTokens.labelLetterSpacing, _InputGroup.inputGroupTokens.labelLineHeight, _InputGroup.inputGroupTokens.leftHelperOffset, _InputGroup.inputGroupTokens.leftHelperFontFamily, _InputGroup.inputGroupTokens.leftHelperFontSize, _InputGroup.inputGroupTokens.leftHelperFontStyle, _InputGroup.inputGroupTokens.leftHelperFontWeight, _InputGroup.inputGroupTokens.leftHelperLetterSpacing, _InputGroup.inputGroupTokens.leftHelperLineHeight, _InputGroup.inputGroupTokens.labelInnerPadding, _InputGroup.inputGroupTokens.contentLabelInnerPadding, _InputGroup.inputGroupTokens.chipGap, _InputGroup.inputGroupTokens.chipBorderRadius, _InputGroup.inputGroupTokens.chipWidth, _InputGroup.inputGroupTokens.chipHeight, _InputGroup.inputGroupTokens.chipPaddingRight, _InputGroup.inputGroupTokens.chipPaddingLeft, _InputGroup.inputGroupTokens.chipClearContentMarginLeft, _InputGroup.inputGroupTokens.chipClearContentMarginRight, _InputGroup.inputGroupTokens.chipCloseIconSize, _InputGroup.inputGroupTokens.chipFontFamily, _InputGroup.inputGroupTokens.chipFontSize, _InputGroup.inputGroupTokens.chipFontStyle, _InputGroup.inputGroupTokens.chipFontWeight, _InputGroup.inputGroupTokens.chipLetterSpacing, _InputGroup.inputGroupTokens.chipLineHeight)
+    },
+    orientation: {
+      horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":row;"], _InputGroup.inputGroupTokens.inputGroupOrientation),
+      vertical: /*#__PURE__*/(0, _styledComponents.css)(["", ":column;"], _InputGroup.inputGroupTokens.inputGroupOrientation)
+    },
+    gap: {
+      none: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":-0.063rem;", ":inset(0 0.063rem 0 0);", ":-0.063rem;", ":inset(0.063rem 0 0 0);"], _InputGroup.inputGroupTokens.inputGroupItemsGap, _InputGroup.inputGroupTokens.inputGroupWebMarginLeft, _InputGroup.inputGroupTokens.inputGroupWebClipPath, _InputGroup.inputGroupTokens.inputGroupWebMarginTop, _InputGroup.inputGroupTokens.inputGroupWebVerticalClipPath),
+      dense: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;"], _InputGroup.inputGroupTokens.inputGroupItemsGap),
+      wide: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;"], _InputGroup.inputGroupTokens.inputGroupItemsGap)
+    },
+    shape: {
+      segmented: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      "default": /*#__PURE__*/(0, _styledComponents.css)([""])
+    },
+    stretching: {
+      auto: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      filled: /*#__PURE__*/(0, _styledComponents.css)([""])
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/InputGroup/InputGroup.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputGroup = void 0;
+var _InputGroup = /*#__PURE__*/require("../../../../components/InputGroup");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _InputGroup2 = /*#__PURE__*/require("./InputGroup.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_InputGroup.inputGroupConfig, _InputGroup2.config);
+var InputGroup = exports.InputGroup = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { TextField } from '../TextField/TextField';
+
+import { InputGroup } from './InputGroup';
+
+type StoryProps = Omit<ComponentProps<typeof InputGroup>, 'gap'> & {
+    itemsCount?: number;
+    gapDefaultShape?: string;
+    gapSegmentedShape?: string;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const orientationValues = ['horizontal', 'vertical'];
+const gapDefaultValues = ['dense', 'wide'];
+const gapSegmentedValues = ['none', 'dense'];
+const shapeValues = ['segmented', 'default'];
+const stretchingValues = ['auto', 'filled'];
+
+const meta: Meta<typeof InputGroup> = {
+    title: 'plasma_web/InputGroup',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: orientationValues,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapeValues,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['gap']),
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    argTypes: {
+        gapDefaultShape: {
+            options: gapDefaultValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'default' },
+        },
+        gapSegmentedShape: {
+            options: gapSegmentedValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'segmented' },
+        },
+    },
+    args: {
+        size: 'm',
+        shape: 'default',
+        gapDefaultShape: 'dense',
+        gapSegmentedShape: 'dense',
+        orientation: 'horizontal',
+        itemsCount: 5,
+        stretching: 'auto',
+    },
+    render: ({ itemsCount, gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                {Array(itemsCount)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+        );
+    },
+};
+
+export const CustomInputs: Story = {
+    args: {
+        ...Default.args,
+        isCommonInputStyles: false,
+    },
+    argTypes: {
+        ...Default.argTypes,
+        ...disableProps(['itemsCount']),
+    },
+    render: ({ gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <>
+                <h3>Группа Input с разными размерами</h3>
+                <InputGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                    <TextField placeholder="Размер l" size="l" />
+                    <TextField placeholder="Размер m" size="m" />
+                    <TextField placeholder="Размер s" size="s" />
+                    <TextField placeholder="Размер xs" size="xs" />
+                </InputGroup>
+            </>
+        );
+    },
+};

package/styled-components/cjs/index.js

@@ -190,6 +190,17 @@ Object.keys(_TextField).forEach(function (key) {
     }
   });
 });
+var _InputGroup = /*#__PURE__*/require("./components/InputGroup");
+Object.keys(_InputGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputGroup[key];
+    }
+  });
+});
 var _Switch = /*#__PURE__*/require("./components/Switch");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/styled-components/cjs/utils/datejs.js

@@ -8,8 +8,6 @@ var _dayjs = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs"))
 var _customParseFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/customParseFormat"));
 var _quarterOfYear = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/quarterOfYear"));
 var _advancedFormat = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("dayjs/plugin/advancedFormat"));
-require("dayjs/locale/ru");
-require("dayjs/locale/en");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 _dayjs["default"].extend(_customParseFormat["default"]);
 _dayjs["default"].extend(_quarterOfYear["default"]);

package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -70,38 +70,6 @@ export function App() {
 }
 ```
 
-### Язык даты
-Язык даты задается с помощью свойства `lang`.
-
-| Обозначение | Отображение | Описание            |
-|-------------|-------------|---------------------|
-| ru          | June        | Английский Язык     |
-| en          | июнь        | Русский язык        |
-
-По умолчанию используется `ru`
-
-```tsx live
-import React from 'react';
-import { DatePicker } from '@salutejs/{{ package }}';
-import { IconDone } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div style=\{{ height: "450px" }}>
-            <DatePicker
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                placeholder="Введите дату"
-                format="DD MMMM YYYY"
-                lang="en"
-                maskWithFormat
-                contentRight={<IconDone size="s" />}
-            />
-        </div>
-    );
-}
-```
-
 ### Валидация и индикация успешного ввода даты.
 За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`.
 В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -61,8 +61,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       secondTextfieldTextAfter = _ref.secondTextfieldTextAfter,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
-      _ref$lang = _ref.lang,
-      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -109,19 +107,19 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format, lang)),
+    var _useState7 = useState(formatCalendarValue(defaultFirstDate, format)),
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue(defaultFirstDate, format, lang)),
+    var _useState9 = useState(formatInputValue(defaultFirstDate, format)),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
-    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format, lang)),
+    var _useState11 = useState(formatCalendarValue(defaultSecondDate, format)),
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultSecondDate, format, lang)),
+    var _useState13 = useState(formatInputValue(defaultSecondDate, format)),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -135,7 +133,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -154,7 +151,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -239,19 +235,13 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format));
     }, [defaultFirstDate]);
     useEffect(function () {
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format));
     }, [defaultSecondDate]);
-    useEffect(function () {
-      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
-      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
-    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -46,8 +46,6 @@ export var datePickerRoot = function datePickerRoot(Root) {
       valueSuccess = _ref.valueSuccess,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD.MM.YYYY' : _ref$format,
-      _ref$lang = _ref.lang,
-      lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
       maskWithFormat = _ref.maskWithFormat,
       min = _ref.min,
       max = _ref.max,
@@ -79,11 +77,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
+    var _useState3 = useState(formatCalendarValue(defaultDate, format)),
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
+    var _useState5 = useState(formatInputValue(defaultDate, format)),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -98,7 +96,6 @@ export var datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -148,13 +145,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
       });
     }, [opened]);
     useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setCalendarValue(formatCalendarValue(defaultDate, format));
+      setInputValue(formatInputValue(defaultDate, format));
     }, [defaultDate]);
-    useEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
-    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

package/styled-components/es/components/DatePicker/hooks/useDatePicker.js

@@ -7,8 +7,6 @@ export var useDatePicker = function useDatePicker(_ref) {
     setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
-    _ref$lang = _ref.lang,
-    lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     maskWithFormat = _ref.maskWithFormat,
@@ -39,9 +37,9 @@ export var useDatePicker = function useDatePicker(_ref) {
     if (!format) {
       setCalendarValue(formatCalendarValue(newValue));
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
-      setCalendarValue(formatCalendarValue(newValue, format, lang));
+      setCalendarValue(formatCalendarValue(newValue, format));
     }
-    setInputValue(formatInputValue(newValue, format, lang));
+    setInputValue(formatInputValue(newValue, format));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -54,17 +52,17 @@ export var useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      setCalendarValue(formatCalendarValue(date, format, lang));
-      setInputValue(formatInputValue(date, format, lang));
+      setCalendarValue(formatCalendarValue(date, format));
+      setInputValue(formatInputValue(date, format));
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
     }
     var formatString = applyFormat ? format : undefined;
-    var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
+    var _getDateFromFormat = getDateFromFormat(date, formatString),
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    setCalendarValue(formatCalendarValue(newDate, format, lang));
-    setInputValue(formatInputValue(newDate, format, lang));
+    setCalendarValue(formatCalendarValue(newDate, format));
+    setInputValue(formatInputValue(newDate, format));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {