@salutejs/plasma-new-hope 0.134.0-canary.1404.10612716409.0 → 0.134.0-canary.1405.10615646161.0

package/emotion/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/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx → emotion/cjs/examples/plasma_web/components/InputGroup/InputGroup.stories.tsx}

@@ -4,22 +4,21 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 
-import { ButtonGroup } from './ButtonGroup';
+import { InputGroup } from './InputGroup';
 
-type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
+type StoryProps = ComponentProps<typeof InputGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
-const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+const sizes = ['l', 'm', 's', 'xs'];
 const orientationValues = ['horizontal', 'vertical'];
 const gapValues = ['none', 'dense', 'wide'];
 const shapeValues = ['segmented', 'default'];
 const stretchingValues = ['auto', 'filled'];
 
-const meta: Meta<typeof ButtonGroup> = {
-    title: 'sds_engineer/ButtonGroup',
+const meta: Meta<typeof InputGroup> = {
+    title: 'plasma_web/InputGroup',
     decorators: [WithTheme],
     argTypes: {
         size: {
@@ -28,12 +27,6 @@ const meta: Meta<typeof ButtonGroup> = {
                 type: 'select',
             },
         },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
         orientation: {
             options: orientationValues,
             control: {
@@ -65,7 +58,6 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        view: 'default',
         size: 'm',
         gap: 'dense',
         orientation: 'horizontal',
@@ -75,21 +67,21 @@ export const Default: Story = {
     },
     render: ({ itemsCount, ...args }: StoryProps) => {
         return (
-            <ButtonGroup {...args}>
+            <InputGroup {...args}>
                 {Array(itemsCount)
                     .fill(true)
                     .map((_, i) => (
-                        <Button text={`Button ${i}`} />
+                        <TextField placeholder={`input #${i}`} />
                     ))}
-            </ButtonGroup>
+            </InputGroup>
         );
     },
 };
 
-export const CustomButtons: Story = {
+export const CustomInputs: Story = {
     args: {
         ...Default.args,
-        isCommonButtonStyles: false,
+        isCommonInputStyles: false,
     },
     argTypes: {
         ...disableProps(['itemsCount']),
@@ -97,21 +89,13 @@ export const CustomButtons: Story = {
     render: (args: StoryProps) => {
         return (
             <>
-                <h3>Группа кнопок с разными темами</h3>
-                <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" />
-                    <Button text="Negative" view="negative" />
-                    <Button text="Positive" view="positive" />
-                    <Button text="Clear" view="clear" />
-                </ButtonGroup>
-
-                <h3>Группа кнопок с разными размерами</h3>
-                <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" size="l" />
-                    <Button text="Negative" view="negative" size="m" />
-                    <Button text="Positive" view="positive" size="s" />
-                    <Button text="Clear" view="clear" size="l" />
-                </ButtonGroup>
+                <h3>Группа Input с разными размерами</h3>
+                <InputGroup {...args}>
+                    <TextField placeholder="Размер l" size="l" />
+                    <TextField placeholder="Размер m" size="m" />
+                    <TextField placeholder="Размер s" size="s" />
+                    <TextField placeholder="Размер xs" size="xs" />
+                </InputGroup>
             </>
         );
     },

package/emotion/cjs/examples/themes/index.js

@@ -6,12 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.themes = void 0;
 var _plasma_b2cModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_b2c.module.css"));
 var _plasma_webModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./plasma_web.module.css"));
-var _sds_engineerModule = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./sds_engineer.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /* eslint-disable camelcase */
 
 var themes = exports.themes = {
   plasma_b2c: _plasma_b2cModule["default"],
-  plasma_web: _plasma_webModule["default"],
-  sds_engineer: _sds_engineerModule["default"]
+  plasma_web: _plasma_webModule["default"]
 };

package/emotion/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/emotion/cjs/utils/datejs.js

@@ -8,7 +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");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 _dayjs["default"].extend(_customParseFormat["default"]);
 _dayjs["default"].extend(_quarterOfYear["default"]);

package/emotion/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."); }
@@ -9,7 +9,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { createRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { useDidMountEffect } from '../../../hooks';
 import { cx } from '../../../utils';
 import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
 import { useDatePicker } from '../hooks/useDatePicker';
@@ -62,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,
@@ -136,7 +133,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -155,7 +151,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -247,12 +242,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
       setInputSecondValue(formatInputValue(defaultSecondDate, format));
     }, [defaultSecondDate]);
-    useDidMountEffect(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/emotion/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."); }
@@ -15,7 +15,6 @@ import { useDatePicker } from '../hooks/useDatePicker';
 import { classes } from '../DatePicker.tokens';
 import { StyledCalendar } from '../DatePickerBase.styles';
 import { useKeyNavigation } from '../hooks/useKeyboardNavigation';
-import { useDidMountEffect } from '../../../hooks';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
@@ -47,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,
@@ -80,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];
@@ -99,7 +96,6 @@ export var datePickerRoot = function datePickerRoot(Root) {
         setIsInnerOpen: setIsInnerOpen,
         dateFormatDelimiter: dateFormatDelimiter,
         format: format,
-        lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
@@ -150,12 +146,8 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }, [opened]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setInputValue(formatInputValue(defaultDate, format));
     }, [defaultDate]);
-    useDidMountEffect(function () {
-      setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
-    }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

package/emotion/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,
@@ -41,7 +39,7 @@ export var useDatePicker = function useDatePicker(_ref) {
     } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
       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,8 +52,8 @@ 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;
@@ -63,8 +61,8 @@ export var useDatePicker = function useDatePicker(_ref) {
       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 {

package/emotion/es/components/DatePicker/utils/dateHelper.js

@@ -1,41 +1,39 @@
 import { customDayjs } from '../../../utils/datejs';
-import 'dayjs/locale/ru';
-import 'dayjs/locale/en';
-export var formatInputValue = function formatInputValue(value, format, lang) {
-  if (!value || !lang) {
+export var formatInputValue = function formatInputValue(value, format) {
+  if (!value) {
     return '';
   }
   if (format && customDayjs(value, format, true).isValid()) {
-    return customDayjs(value, format).locale(lang).format(format);
+    return customDayjs(value, format).format(format);
   }
   if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
-    return customDayjs(value).locale(lang).format(format);
+    return customDayjs(value).format(format);
   }
   return String(value);
 };
-export var formatCalendarValue = function formatCalendarValue(value, format, lang) {
-  if (!value || !lang) {
+export var formatCalendarValue = function formatCalendarValue(value, format) {
+  if (!value) {
     return undefined;
   }
   if (format && customDayjs(value, format, true).isValid()) {
-    return customDayjs(value, format, true).locale(lang).toDate();
+    return customDayjs(value, format, true).toDate();
   }
   if (String(new Date(value)) !== 'Invalid Date') {
-    return customDayjs(value).locale(lang).toDate();
+    return customDayjs(value).toDate();
   }
   return undefined;
 };
-export var getDateFromFormat = function getDateFromFormat(value, format, lang) {
-  if (format && customDayjs(value, format, true).isValid() && lang) {
+export var getDateFromFormat = function getDateFromFormat(value, format) {
+  if (format && customDayjs(value, format, true).isValid()) {
     return {
-      value: customDayjs(value, format, true).locale(lang).toDate(),
+      value: customDayjs(value, format, true).toDate(),
       isError: false,
       isSuccess: true
     };
   }
-  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
+  if (!format && String(new Date(value)) !== 'Invalid Date') {
     return {
-      value: customDayjs(value).locale(lang).toDate(),
+      value: customDayjs(value).toDate(),
       isError: false,
       isSuccess: true
     };

package/emotion/es/components/InputGroup/InputGroup.js

@@ -0,0 +1,74 @@
+var _excluded = ["children", "className", "size", "stretching", "gap", "orientation", "shape", "isCommonInputStyles"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef } from 'react';
+import { cx } from '../../utils';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as gapCSS } from './variations/_gap/base';
+import { base as shapeCSS } from './variations/_shape/base';
+import { base as orientationCSS } from './variations/_orientation/base';
+import { base as stretchingCSS } from './variations/_stretching/base';
+import { base } from './InputGroup.styles';
+import { classes } from './InputGroup.tokens';
+export var inputGroupRoot = function inputGroupRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    var children = props.children,
+      className = props.className,
+      size = props.size,
+      _props$stretching = props.stretching,
+      stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
+      _props$gap = props.gap,
+      gap = _props$gap === void 0 ? 'dense' : _props$gap,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'default' : _props$shape,
+      _props$isCommonInputS = props.isCommonInputStyles,
+      isCommonInputStyles = _props$isCommonInputS === void 0 ? true : _props$isCommonInputS,
+      rest = _objectWithoutProperties(props, _excluded);
+    var orientationClass = classes[orientation];
+    var gapClass = classes[gap];
+    var shapeClass = classes[shape];
+    var stretchingClass = classes["".concat(stretching, "Stretching")];
+    var overrideStylesClass = isCommonInputStyles ? classes.inputGroupOverrideStyles : undefined;
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref,
+      size: size,
+      gap: gap,
+      orientation: orientation,
+      shape: shape,
+      className: cx(overrideStylesClass, orientationClass, gapClass, shapeClass, stretchingClass, className)
+    }, rest), children);
+  });
+};
+export var inputGroupConfig = {
+  name: 'InputGroup',
+  tag: 'div',
+  layout: inputGroupRoot,
+  base: base,
+  variations: {
+    size: {
+      css: sizeCSS
+    },
+    gap: {
+      css: gapCSS
+    },
+    orientation: {
+      css: orientationCSS
+    },
+    shape: {
+      css: shapeCSS
+    },
+    stretching: {
+      css: stretchingCSS
+    }
+  },
+  defaults: {
+    size: 'm',
+    gap: 'dense',
+    orientation: 'horizontal',
+    shape: 'default',
+    stretching: 'auto'
+  }
+};

package/emotion/es/components/InputGroup/InputGroup.styles.js

@@ -0,0 +1,11 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from '@emotion/react';
+export var base = process.env.NODE_ENV === "production" ? {
+  name: "d6pg61-plasma-new-hope__base",
+  styles: "display:inline-flex;label:plasma-new-hope__base;"
+} : {
+  name: "d6pg61-plasma-new-hope__base",
+  styles: "display:inline-flex;label:plasma-new-hope__base;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvSW5wdXRHcm91cC9JbnB1dEdyb3VwLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9JbnB1dEdyb3VwL0lucHV0R3JvdXAuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};

package/emotion/es/components/InputGroup/InputGroup.template-doc.mdx

@@ -0,0 +1,124 @@
+---
+id: inputGroup
+title: InputGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# InputGroup
+<Description name="InputGroup" />
+<PropsTable name="InputGroup" exclude={['css']} />
+
+## Использование
+Компонент `InputGroup` - это обертка для Input. Принимает в себя группу input.
+
+```tsx live
+import React from 'react';
+import { InputGroup, TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <InputGroup>
+            {Array(5)
+                .fill(true)
+                .map((_, i) => (
+                    <TextField placeholder={`input #${i}`} />
+                ))}
+        </InputGroup>
+    );
+}
+```
+
+## Примеры
+
+### Размер группы input
+Размер InputGroup задается с помощью свойства `size`.
+С помощью свойства `isCommonInputStyles` можно отключить переопределение стилей для всех input внутри группы. 
+Тогда каждкаждый input будет иметь настраиваемый размер. 
+
+```tsx live
+import React from 'react';
+import { InputGroup, TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <InputGroup size="s" view="secondary">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+            
+            <InputGroup isCommonButtonStyles={false}>
+                <TextField placeholder="Размер l" size="l" />
+                <TextField placeholder="Размер m" size="m" />
+                <TextField placeholder="Размер s" size="s" />
+                <TextField placeholder="Размер xs" size="xs" />
+            </InputGroup>
+        </div>
+    );
+}
+```
+
+### Ориентация InputGroup и отступы между input
+
+InputGroup может располагаться вертикально или горизонтально и иметь три вида отступов:
+
+```tsx live
+import React from 'react';
+import { InputGroup, TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <InputGroup size="xs" orientation="vertical" gap="none">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+
+            <InputGroup size="xs" orientation="horizontal" gap="wide">
+                {Array(4)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+        </div>
+    );
+}
+```
+
+### Границы input
+Границы input задаются с помощью свойства `shape`.
+
+```tsx live
+import React from 'react';
+import { InputGroup, TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <InputGroup size="xs" shape="segmented">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+
+            <InputGroup size="xs" shape="default">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </InputGroup>
+        </div>
+    );
+}
+```