@salutejs/plasma-new-hope 0.83.0-canary.1194.9174145281.0 → 0.83.0-canary.1208.9176013022.0

package/styled-components/cjs/components/TextField/TextField.js

@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
 var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks = /*#__PURE__*/require("./hooks");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -40,6 +40,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       contentRight = _ref.contentRight,
       label = _ref.label,
       labelPlacement = _ref.labelPlacement,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
       placeholder = _ref.placeholder,
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
@@ -54,7 +56,6 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
       onSearch = _ref.onSearch,
-      onKeyDown = _ref.onKeyDown,
       rest = _objectWithoutProperties(_ref, _excluded);
     var contentRef = (0, _react.useRef)(null);
     var inputRef = (0, _react.useRef)(null);
@@ -134,10 +135,6 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
         chipsRefs.current[index] = element;
       }
     };
-    var handleOnKeyDown = function handleOnKeyDown(event) {
-      handleInputKeydown(event);
-      onKeyDown && onKeyDown(event);
-    };
     (0, _react.useEffect)(function () {
       if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
         return;
@@ -169,7 +166,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
       className: withHasChips
-    }, isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
+    }, textBefore && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextBefore, null, textBefore), isChipEnumeration && Boolean(chips === null || chips === void 0 ? void 0 : chips.length) && /*#__PURE__*/_react["default"].createElement(_TextField.StyledChips, null, chips === null || chips === void 0 ? void 0 : chips.map(function (_ref2, index) {
       var chipId = _ref2.id,
         text = _ref2.text;
       return /*#__PURE__*/_react["default"].createElement(_ui.TextFieldChip, {
@@ -199,11 +196,11 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       disabled: disabled,
       readOnly: !disabled && readOnly,
       onChange: handleChange,
-      onKeyDown: handleOnKeyDown
+      onKeyDown: handleInputKeydown
     })), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
+    }, innerLabelValue), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

package/styled-components/cjs/components/TextField/TextField.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
+exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _TextField = /*#__PURE__*/require("./TextField.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -30,4 +30,10 @@ var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledCompon
 })(["margin:var(", ");"], _TextField.tokens.rightContentMargin);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
+})([""]);
+var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-8"
+})([""]);
+var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-9"
 })([""]);

package/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -68,6 +68,11 @@ var tokens = exports.tokens = {
   leftHelperFontWeight: '--plasma-textfield__left-helper-font-weight',
   leftHelperLetterSpacing: '--plasma-textfield__left-helper-letter-spacing',
   leftHelperLineHeight: '--plasma-textfield__left-helper-line-height',
+  /** Токены вспомогательного текста */
+  textBeforeColor: '--plasma-textfield__before-text-color',
+  textAfterColor: '--plasma-textfield__after-text-color',
+  textBeforeMargin: '--plasma-textfield__before-text-margin',
+  textAfterMargin: '--plasma-textfield__after-text-margin',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textfield-disabled-opacity',
   /** Токены чипа */

package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js

@@ -7,4 +7,4 @@ exports.labelPlacement_inner = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.styles");
 var _TextField2 = /*#__PURE__*/require("../../TextField.tokens");
-var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);
+var labelPlacement_inner = exports.labelPlacement_inner = /*#__PURE__*/(0, _styledComponents.css)(["", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], _TextField.Input, _TextField2.tokens.contentLabelInnerPadding, _TextField.StyledTextAfter, _TextField.StyledTextBefore, _TextField2.tokens.contentLabelInnerPadding, _TextField.Input, _TextField.Label, _TextField.Input, _TextField.Label, _TextField2.tokens.labelInnerPadding, _TextField2.tokens.labelInnerFontFamily, _TextField2.tokens.labelInnerFontSize, _TextField2.tokens.labelInnerFontStyle, _TextField2.tokens.labelInnerFontWeight, _TextField2.tokens.labelInnerLetterSpacing, _TextField2.tokens.labelInnerLineHeight, _TextField.Input, _TextField.Input, _TextField.Label, _TextField2.tokens.placeholderColor, _TextField2.tokens.height, _TextField2.tokens.height, _TextField2.tokens.height);

package/styled-components/cjs/components/TextField/variations/_size/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");}"], _TextField2.Input, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.InputWrapper, _TextField.tokens.height, _TextField.tokens.borderRadius, _TextField.tokens.padding, _TextField.classes.hasChips, _TextField.tokens.paddingWithChips, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentLeft, _TextField.tokens.paddingWithChips, _TextField.classes.hasEmptyContentRight, _TextField.tokens.paddingWithChips, _TextField2.Label, _TextField.tokens.labelFontFamily, _TextField.tokens.labelFontSize, _TextField.tokens.labelFontStyle, _TextField.tokens.labelFontWeight, _TextField.tokens.labelLetterSpacing, _TextField.tokens.labelLineHeight, _TextField2.LeftHelper, _TextField.tokens.leftHelperOffset, _TextField.tokens.leftHelperFontFamily, _TextField.tokens.leftHelperFontSize, _TextField.tokens.leftHelperFontStyle, _TextField.tokens.leftHelperFontWeight, _TextField.tokens.leftHelperLetterSpacing, _TextField.tokens.leftHelperLineHeight, _TextField2.StyledTextBefore, _TextField2.StyledTextAfter, _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeMargin, _TextField2.StyledTextAfter, _TextField.tokens.textAfterMargin);

package/styled-components/cjs/components/TextField/variations/_view/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.borderColor), /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField.tokens.color, _TextField.tokens.borderWidth, _TextField.tokens.caretColor, _TextField2.InputWrapper, _TextField.tokens.borderColorHover, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorHover, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.InputWrapper, _TextField.tokens.borderColorFocus, /*#__PURE__*/String(_TextField.tokens.borderColor), _TextField.tokens.backgroundColorFocus, /*#__PURE__*/String(_TextField.tokens.backgroundColor), _TextField2.Input, _TextField.tokens.placeholderColor, _TextField2.Input, _TextField.tokens.color, _TextField2.LeftHelper, _TextField.tokens.leftHelperColor, _TextField2.StyledTextBefore, _TextField.tokens.textBeforeColor, _TextField2.StyledTextAfter, _TextField.tokens.textAfterColor);

package/styled-components/cjs/engines/common.js

@@ -21,10 +21,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-//
-// Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
-//
-
 var getStaticVariants = exports.getStaticVariants = function getStaticVariants(config) {
   if (!config.variations) {
     return [];

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Range = /*#__PURE__*/require("../../../../components/Range");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], _Range.rangeTokens.background, _Range.rangeTokens.backgroundError, _Range.rangeTokens.backgroundSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBackgroundColorFocus, _Range.rangeTokens.textFieldBackgroundErrorColor, _Range.rangeTokens.textFieldBackgroundErrorColorFocus, _Range.rangeTokens.textFieldBackgroundSuccessColor, _Range.rangeTokens.textFieldBackgroundSuccessColorFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.375rem 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":0.5rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-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;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
+    },
+    readOnly: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var((--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js

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

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

@@ -0,0 +1,312 @@
+import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+import { IconButton } from '../IconButton/IconButton';
+
+import { Range } from './Range';
+
+const onChangeFirstValue = action('onChangeFirstValue');
+const onChangeSecondValue = action('onChangeSecondValue');
+const onSearchFirstValue = action('onSearchFirstValue');
+const onSearchSecondValue = action('onSearchSecondValue');
+const onFocusFirstTextfield = action('onFocusFirstTextfield');
+const onFocusSecondTextfield = action('onFocusSecondTextfield');
+const onBlurFirstTextfield = action('onBlurFirstTextfield');
+const onBlurSecondTextfield = action('onBlurSecondTextfield');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default'];
+const dividers = ['none', 'dash', 'icon'];
+
+const meta: Meta<typeof Range> = {
+    title: 'plasma_b2c/Range',
+    component: Range,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Range> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+    enableFirstTextfieldContentLeft: boolean;
+    enableSecondTextfieldContentLeft: boolean;
+    enableFirstTextfieldContentRight: boolean;
+    enableSecondTextfieldContentRight: boolean;
+};
+
+const getSizeForIcon = (size) => {
+    const map = {
+        m: 's',
+        l: 's',
+        s: 's',
+        xs: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+const ActionButton = ({ size }) => {
+    return (
+        <IconButton view="clear" size={size}>
+            <IconChevronLeft size={getSizeForIcon(size)} />
+        </IconButton>
+    );
+};
+
+const StoryDefault = ({
+    dividerVariant,
+    enableContentLeft,
+    enableContentRight,
+    firstTextfieldTextBefore,
+    secondTextfieldTextBefore,
+    enableFirstTextfieldContentLeft,
+    enableSecondTextfieldContentLeft,
+    enableFirstTextfieldContentRight,
+    enableSecondTextfieldContentRight,
+    size,
+    ...rest
+}: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const showDividerIcon = dividerVariant === 'icon';
+    const showDefaultTextBefore = dividerVariant === 'none';
+
+    const dividerIconProps = {
+        dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
+        dividerVariant,
+    };
+
+    return (
+        <Range
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            firstTextfieldContentLeft={
+                enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldContentRight={
+                enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentLeft={
+                enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            secondTextfieldContentRight={
+                enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
+            }
+            firstTextfieldTextBefore={
+                showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
+            }
+            secondTextfieldTextBefore={
+                showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
+            }
+            onChangeFirstValue={(e) => {
+                setFirstValue(e.target.value);
+                onChangeFirstValue(e, e.target.value);
+            }}
+            onChangeSecondValue={(e) => {
+                setSecondValue(e.target.value);
+                onChangeSecondValue(e, e.target.value);
+            }}
+            onSearchFirstValue={onSearchFirstValue}
+            onSearchSecondValue={onSearchSecondValue}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...dividerIconProps}
+            {...rest}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        dividerVariant: {
+            options: dividers,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        label: 'Лейбл',
+        leftHelper: 'Подсказка к полю',
+        firstPlaceholder: 'Заполните поле 1',
+        secondPlaceholder: 'Заполните поле 2',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: 'С',
+        secondTextfieldTextBefore: 'ПО',
+        enableContentLeft: true,
+        enableContentRight: true,
+        dividerVariant: 'dash',
+        enableFirstTextfieldContentLeft: false,
+        enableFirstTextfieldContentRight: false,
+        enableSecondTextfieldContentLeft: false,
+        enableSecondTextfieldContentRight: false,
+        firstValueError: false,
+        secondValueError: false,
+        firstValueSuccess: false,
+        secondValueSuccess: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
+    const [firstValue, setFirstValue] = useState('');
+    const [secondValue, setSecondValue] = useState('');
+
+    const [firstValueError, setFirstValueError] = useState(false);
+    const [secondValueError, setSecondValueError] = useState(false);
+
+    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
+    const [secondValueSuccess, setSecondValueSuccess] = useState(false);
+
+    const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
+
+    const handleChangeValue = (
+        e: ChangeEvent<HTMLInputElement>,
+        setter: Dispatch<SetStateAction<string>>,
+        error: boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        success: boolean,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        const { value } = e.target;
+        if (!checkValue(value)) {
+            return;
+        }
+
+        if (error) {
+            errorSetter(false);
+        }
+
+        if (success) {
+            successSetter(false);
+        }
+
+        setter(value);
+    };
+
+    const firstValueConstraint = (value: number) =>
+        value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
+    const secondValueConstraint = (value: number) =>
+        value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
+
+    const handleCommitValue = (
+        value: string,
+        constraint: (currentValue: number) => boolean,
+        errorSetter: Dispatch<SetStateAction<boolean>>,
+        successSetter: Dispatch<SetStateAction<boolean>>,
+    ) => {
+        if (!value) {
+            return;
+        }
+
+        if (!checkValue(value)) {
+            return errorSetter(true);
+        }
+
+        if (constraint(Number(value))) {
+            return errorSetter(true);
+        }
+
+        successSetter(true);
+    };
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    return (
+        <Range
+            dividerVariant="dash"
+            size={size}
+            firstValue={firstValue}
+            secondValue={secondValue}
+            firstValueError={firstValueError}
+            secondValueError={secondValueError}
+            firstValueSuccess={firstValueSuccess}
+            secondValueSuccess={secondValueSuccess}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            onChangeFirstValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setFirstValue,
+                    firstValueError,
+                    setFirstValueError,
+                    firstValueSuccess,
+                    setFirstValueSuccess,
+                );
+            }}
+            onChangeSecondValue={(e) => {
+                handleChangeValue(
+                    e,
+                    setSecondValue,
+                    secondValueError,
+                    setSecondValueError,
+                    secondValueSuccess,
+                    setSecondValueSuccess,
+                );
+            }}
+            onSearchFirstValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
+            }}
+            onSearchSecondValue={(e) => {
+                const { value } = e.target as HTMLInputElement;
+                handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
+            }}
+            onFocusFirstTextfield={onFocusFirstTextfield}
+            onFocusSecondTextfield={onFocusSecondTextfield}
+            onBlurFirstTextfield={onBlurFirstTextfield}
+            onBlurSecondTextfield={onBlurSecondTextfield}
+            {...rest}
+        />
+    );
+};
+
+export const Demo: StoryObj<StoryPropsDefault> = {
+    args: {
+        label: 'Введите кол-во товара',
+        leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
+        firstPlaceholder: '1',
+        secondPlaceholder: '5',
+        size: 'l',
+        view: 'default',
+        disabled: false,
+        readOnly: false,
+        firstTextfieldTextBefore: '',
+        secondTextfieldTextBefore: '',
+        enableContentLeft: true,
+        enableContentRight: true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};