@salutejs/plasma-new-hope 0.187.0-canary.1539.11742294440.0 → 0.187.0-dev.0

package/styled-components/cjs/components/NumberInput/ui/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionButton", {
+  enumerable: true,
+  get: function get() {
+    return _ActionButton.ActionButton;
+  }
+});
+Object.defineProperty(exports, "NumberInput", {
+  enumerable: true,
+  get: function get() {
+    return _Input.NumberInput;
+  }
+});
+var _ActionButton = /*#__PURE__*/require("./ActionButton/ActionButton");
+var _Input = /*#__PURE__*/require("./Input/Input");

package/styled-components/cjs/components/NumberInput/utils/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.numberSchema = exports.excludingNumberSchema = exports.defaultCharacterWidth = void 0;
+var defaultCharacterWidth = exports.defaultCharacterWidth = '1ch';
+var numberSchema = exports.numberSchema = /^(-)?\d+(\.\d+)?$/;
+var excludingNumberSchema = exports.excludingNumberSchema = /[^-.\d]/g;

package/styled-components/cjs/components/NumberInput/variations/_background-type/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var _Input = /*#__PURE__*/require("../../ui/Input/Input.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", ":hover{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}"], _Input.InputWrapper, _NumberInput.tokens.backgroundColor, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderColor, _NumberInput.classes.manualInput, _NumberInput.tokens.backgroundColorHover, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderColorHover);

package/styled-components/cjs/components/NumberInput/variations/_background-type/tokens.json

@@ -0,0 +1,6 @@
+[
+    "--plasma-number-input_background-color",
+    "--plasma-number-input_background-color-hover",
+    "--plasma-number-input_border-color",
+    "--plasma-number-input_border-color-hover"
+]

package/styled-components/cjs/components/NumberInput/variations/_disabled/base.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&&.", "{pointer-events:none;opacity:var(", ");cursor:not-allowed;}"], _NumberInput.classes.disabled, _NumberInput.tokens.disabledOpacity);

package/styled-components/cjs/components/NumberInput/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-number-input_disabled-opacity"]
+}

package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var _ActionButton = /*#__PURE__*/require("../../ui/ActionButton/ActionButton.styles");
+var _Input = /*#__PURE__*/require("../../ui/Input/Input.styles");
+var _Spinner = /*#__PURE__*/require("../../../Spinner");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{border-radius:var(", ");}", "{", ":var(", ");&.", ",&.", "{", ":var(", ",var(", "));}&.", "{border-radius:var(", ") var(", ") var(", ") var(", ");}&.", "{border-radius:var(", ") var(", ") var(", ") var(", ");}}&.", "{", "{border-radius:var(", ");}}&.", "{", ":inset 0 var(", ") var(", ");", ":inset 0 calc(-1 * var(", ")) var(", ");", ":inset var(", ") 0 var(", ");", ":inset calc(-1 * var(", ")) 0 var(", ");&.", ":not(", "),&.", ":not(", "){", ":inset 0 var(", ") var(", ");", ":inset 0 calc(-1 * var(", ")) var(", ");", ":inset var(", ") 0 var(", ");", ":inset calc(-1 * var(", ")) 0 var(", ");}position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", ") * 2);height:100%;background:var(", ");box-shadow:var(", "),var(", ");}", "{position:relative;color:var(", ");&:not(", ").", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{&.", "{box-shadow:var(", "),var(", "),var(", ");}&.", "{box-shadow:var(", "),var(", "),var(", ");}:hover,:active{background-color:var(", ");}:hover{color:var(", ");}:active{color:var(", ");}&.", ",&.", "{opacity:1;svg{opacity:var(", ");}:hover,:active{color:var(", ");svg{opacity:var(", ");}}}}&.", "{", "{&.", ",&.", "{:hover,:active{background-color:transparent;}}}}", "{", ":var(", ");}", "{caret-color:var(", ",var(", "));&:not(.", "){color:var(", ");}}", "{color:var(", ");}}"], _Input.InputWrapper, _NumberInput.tokens.inputWrapperBorderRadius, _ActionButton.StyledIconButton, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.tokens.iconButtonRadius, _NumberInput.classes.segmentedView, _NumberInput.classes.solidView, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.tokens.iconButtonSegmentationRadius, _NumberInput.tokens.iconButtonRadius, _NumberInput.classes.actionButtonDecrement, _NumberInput.tokens.iconButtonRadius, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.tokens.iconButtonRadius, _NumberInput.classes.actionButtonIncrement, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.tokens.iconButtonRadius, _NumberInput.tokens.iconButtonRadius, _NumberInput.privateTokens.segmentationBorderRadius, _NumberInput.classes.segmentedView, _Input.InputWrapper, _NumberInput.tokens.iconButtonSegmentationRadius, _NumberInput.classes.solidView, _NumberInput.privateTokens.topBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColor, _NumberInput.privateTokens.bottomBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColor, _NumberInput.privateTokens.leftBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColor, _NumberInput.privateTokens.rightBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColor, _NumberInput.classes.focused, _NumberInput.classes.loading, _NumberInput.classes.focused, _NumberInput.classes.disabled, _NumberInput.privateTokens.topBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColorFocus, _NumberInput.privateTokens.bottomBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColorFocus, _NumberInput.privateTokens.leftBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColorFocus, _NumberInput.privateTokens.rightBoxShadow, _NumberInput.tokens.rootBorderWidth, _NumberInput.tokens.wrapperBorderColorFocus, _NumberInput.tokens.iconButtonWidth, _NumberInput.tokens.backgroundColorSolid, _NumberInput.privateTokens.topBoxShadow, _NumberInput.privateTokens.bottomBoxShadow, _Input.InputWrapper, _NumberInput.tokens.colorSolid, _NumberInput.classes.errorAnimation, _NumberInput.classes.manualInput, _NumberInput.tokens.backgroundColorSolidFocus, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderColorSolidFocus, _ActionButton.StyledIconButton, _NumberInput.classes.actionButtonDecrement, _NumberInput.privateTokens.bottomBoxShadow, _NumberInput.privateTokens.topBoxShadow, _NumberInput.privateTokens.leftBoxShadow, _NumberInput.classes.actionButtonIncrement, _NumberInput.privateTokens.bottomBoxShadow, _NumberInput.privateTokens.topBoxShadow, _NumberInput.privateTokens.rightBoxShadow, _NumberInput.tokens.iconButtonBackgroundColor, _NumberInput.tokens.iconButtonColorSolidHover, _NumberInput.tokens.iconButtonColorSolidActive, _NumberInput.classes.actionButtonDecrementDisabled, _NumberInput.classes.actionButtonIncrementDisabled, _NumberInput.tokens.actionButtonDisabledOpacity, _NumberInput.tokens.iconButtonColor, _NumberInput.tokens.actionButtonDisabledOpacity, _NumberInput.classes.clearView, _ActionButton.StyledIconButton, _NumberInput.classes.actionButtonDecrementDisabled, _NumberInput.classes.actionButtonIncrementDisabled, _Input.StyledSpinner, _Spinner.spinnerTokens.color, _NumberInput.tokens.loaderSpinnerColorSolid, _Input.Input, _NumberInput.tokens.caretColorSolid, _NumberInput.tokens.caretColor, _NumberInput.classes.errorAnimation, _NumberInput.tokens.colorSolid, _Input.AdditionalText, _NumberInput.tokens.additionalTextColorSolid);

package/styled-components/cjs/components/NumberInput/variations/_segmentation/tokens.json

@@ -0,0 +1 @@
+["--plasma-number-input_icon-button_segmentation_radius", "--plasma-number-input_background-color-solid"]

package/styled-components/cjs/components/NumberInput/variations/_shape/base.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var _IconButton = /*#__PURE__*/require("../../../IconButton");
+var _ActionButton = /*#__PURE__*/require("../../ui/ActionButton/ActionButton.styles");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{", ":var(", ");}"], _ActionButton.StyledIconButton, _IconButton.iconButtonTokens.iconButtonRadius, _NumberInput.tokens.iconButtonRadius);

package/styled-components/cjs/components/NumberInput/variations/_shape/tokens.json

@@ -0,0 +1 @@
+["--plasma-number-input_icon-button_radius"]

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var _IconButton = /*#__PURE__*/require("../../../IconButton");
+var _ActionButton = /*#__PURE__*/require("../../ui/ActionButton/ActionButton.styles");
+var _Input = /*#__PURE__*/require("../../ui/Input/Input.styles");
+var _Spinner = /*#__PURE__*/require("../../../Spinner");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["width:var(", ");min-width:var(", ");", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}", "{margin:var(", ");}", "{height:var(", ");padding:var(", ");}", ",", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{&.", "{margin-right:var(", ");}&.", "{margin-left:var(", ");}}", "{", ":var(", ");}"], _NumberInput.privateTokens.inputWidth, _NumberInput.tokens.rootMinWidth, _ActionButton.StyledIconButton, _IconButton.iconButtonTokens.iconButtonHeight, _NumberInput.tokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _NumberInput.tokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _NumberInput.tokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonFontFamily, _NumberInput.tokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _NumberInput.tokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _NumberInput.tokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _NumberInput.tokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _NumberInput.tokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _NumberInput.tokens.iconButtonLineHeight, _Input.InputWrapper, _NumberInput.tokens.inputWrapperMargin, _Input.TextWrapper, _NumberInput.tokens.textWrapperHeight, _NumberInput.tokens.textWrapperPadding, _Input.DynamicInput, _Input.Input, _Input.AdditionalText, _NumberInput.tokens.fontFamily, _NumberInput.tokens.fontSize, _NumberInput.tokens.fontStyle, _NumberInput.tokens.fontWeight, _NumberInput.tokens.letterSpacing, _NumberInput.tokens.lineHeight, _Input.AdditionalText, _NumberInput.classes.textBefore, _NumberInput.tokens.textBeforeMarginRight, _NumberInput.classes.textAfter, _NumberInput.tokens.textAfterMarginLeft, _Input.StyledSpinner, _Spinner.spinnerTokens.size, _NumberInput.tokens.loaderSpinnerSize);

package/styled-components/cjs/components/NumberInput/variations/_size/tokens.json

@@ -0,0 +1,22 @@
+[
+    "--plasma-number-input_icon-button_height",
+    "--plasma-number-input_icon-button_width",
+    "--plasma-number-input_icon-button_padding",
+    "--plasma-number-input_icon-button_font-family",
+    "--plasma-number-input_icon-button_font-size",
+    "--plasma-number-input_icon-button_font-style",
+    "--plasma-number-input_icon-button_font-weight",
+    "--plasma-number-input_icon-button_letter-spacing",
+    "--plasma-number-input_icon-button_line-height",
+    "--plasma-number-input_font-family",
+    "--plasma-number-input_font-style",
+    "--plasma-number-input_font-size",
+    "--plasma-number-input_font-weight",
+    "--plasma-number-input_letter-spacing",
+    "--plasma-number-input_line-height",
+    "--plasma-number-input_text-wrapper_height",
+    "--plasma-number-input_text-wrapper_padding",
+    "--plasma-number-input_loader-spinner_size",
+    "--plasma-number-input_text-before_margin-right",
+    "--plasma-number-input_text-after_margin-left"
+]

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
+var _IconButton = /*#__PURE__*/require("../../../IconButton");
+var _ActionButton = /*#__PURE__*/require("../../ui/ActionButton/ActionButton.styles");
+var _Input = /*#__PURE__*/require("../../ui/Input/Input.styles");
+var _Spinner = /*#__PURE__*/require("../../../Spinner");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", ",&.", "{opacity:var(", ");cursor:not-allowed;:hover,:active{scale:none;color:var(", ");background-color:var(", ");}}}&& ", "{&.", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", ".", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");animation:shakingError 0.3s forwards;", "{color:var(", ");animation:fadeError 0.3s forwards;}&:focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{opacity:1;}100%{opacity:0;}}}", "{", ":var(", ");}", "{color:var(", ");caret-color:var(", ");}", "{color:var(", ");}"], _ActionButton.StyledIconButton, _IconButton.iconButtonTokens.iconButtonColor, _NumberInput.tokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _NumberInput.tokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _NumberInput.tokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _NumberInput.tokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _NumberInput.tokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive, _NumberInput.tokens.iconButtonBackgroundColorActive, _NumberInput.classes.actionButtonDecrementDisabled, _NumberInput.classes.actionButtonIncrementDisabled, _NumberInput.tokens.actionButtonDisabledOpacity, _NumberInput.tokens.iconButtonColor, _NumberInput.tokens.iconButtonBackgroundColor, _Input.InputWrapper, _NumberInput.classes.manualInput, _NumberInput.tokens.backgroundColorFocus, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderColorFocus, _NumberInput.classes.manualInput, _NumberInput.classes.errorAnimation, _NumberInput.tokens.backgroundErrorColor, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderErrorColor, _Input.Input, _NumberInput.tokens.errorColor, _NumberInput.tokens.backgroundErrorColor, _NumberInput.tokens.inputWrapperBorderWidth, _NumberInput.tokens.borderErrorColor, _Input.StyledSpinner, _Spinner.spinnerTokens.color, _NumberInput.tokens.loaderSpinnerColor, _Input.Input, _NumberInput.tokens.color, _NumberInput.tokens.caretColor, _Input.AdditionalText, _NumberInput.tokens.additionalTextColor);

package/styled-components/cjs/components/NumberInput/variations/_view/tokens.json

@@ -0,0 +1,14 @@
+[
+    "--plasma-number-input_icon-button_color",
+    "--plasma-number-input_icon-button_background-color",
+    "--plasma-number-input_icon-button_color-hover",
+    "--plasma-number-input_icon-button_background-color-hover",
+    "--plasma-number-input_icon-button_color-active",
+    "--plasma-number-input_icon-button_background-color-active",
+    "--plasma-number-input_loader-spinner_color",
+    "--plasma-number-input_color",
+    "--plasma-number-input_additional-text_color",
+    "--plasma-number-input_action-button_disabled-opacity",
+    "--plasma-number-input_background-color-focus",
+    "--plasma-number-input_border-color-focus"
+]

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

@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.switchRoot = exports.switchConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _base = /*#__PURE__*/require("../Switch/_size/base");
-var _base2 = /*#__PURE__*/require("../Switch/_toggleSize/base");
-var _base3 = /*#__PURE__*/require("../Switch/_view/base");
-var _base4 = /*#__PURE__*/require("../Switch/_focused/base");
-var _base5 = /*#__PURE__*/require("../Switch/_disabled/base");
+var _base2 = /*#__PURE__*/require("../Switch/_view/base");
+var _base3 = /*#__PURE__*/require("../Switch/_focused/base");
+var _base4 = /*#__PURE__*/require("../Switch/_disabled/base");
 var _utils = /*#__PURE__*/require("../../utils");
 var _Switch = /*#__PURE__*/require("./Switch.styles");
 var _Switch2 = /*#__PURE__*/require("./Switch.tokens");
 var _StyledTrigger;
-var _excluded = ["size", "toggleSize", "view", "focused", "outlined", "disabled", "labelPosition", "label", "description", "id", "style", "className", "checked", "pressed", "defaultChecked"];
+var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
 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); }
@@ -24,14 +23,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var switchRoot = exports.switchRoot = function switchRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var size = props.size,
-      toggleSize = props.toggleSize,
       view = props.view,
       focused = props.focused,
       outlined = props.outlined,
       disabled = props.disabled,
       labelPosition = props.labelPosition,
       label = props.label,
-      description = props.description,
       id = props.id,
       style = props.style,
       className = props.className,
@@ -43,15 +40,12 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
     return /*#__PURE__*/_react["default"].createElement(Root, {
       view: view,
       size: size,
-      toggleSize: toggleSize,
       disabled: disabled,
       focused: focused !== null && focused !== void 0 ? focused : outlined,
       labelPosition: labelPosition,
       id: id,
       style: style,
-      className: (0, _utils.cx)(className)
-    }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledContent, {
-      className: (0, _utils.cx)(_Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
+      className: (0, _utils.cx)(className, _Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
     }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledInput, _extends({}, rest, {
       ref: ref,
       role: "switch",
@@ -64,7 +58,7 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
       tabIndex: -1
     }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/_react["default"].createElement(_Switch.StyledTrigger, {
       "aria-hidden": true
-    }))), description && /*#__PURE__*/_react["default"].createElement(_Switch.StyledDescription, null, description));
+    })));
   });
 };
 var switchConfig = exports.switchConfig = {
@@ -77,17 +71,14 @@ var switchConfig = exports.switchConfig = {
       css: _base.base
     },
     view: {
-      css: _base3.base
-    },
-    toggleSize: {
       css: _base2.base
     },
     disabled: {
-      css: _base5.base,
+      css: _base4.base,
       attrs: true
     },
     focused: {
-      css: _base4.base
+      css: _base3.base
     }
   },
   defaults: {

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

@@ -4,25 +4,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = exports.StyledDescription = exports.StyledContent = void 0;
+exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _Switch = /*#__PURE__*/require("./Switch.tokens");
 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; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;flex-direction:column;gap:var(", ");cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}"], _Switch.tokens.verticalGap);
-var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-0"
-})(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
-var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-1"
-})(["position:relative;"]);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
 var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-2"
+  componentId: "plasma-new-hope__sc-i4fgom-0"
 })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
 var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-3"
+  componentId: "plasma-new-hope__sc-i4fgom-1"
 })(["user-select:none;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-i4fgom-4"
+  componentId: "plasma-new-hope__sc-i4fgom-2"
 })(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);

package/styled-components/cjs/components/Switch/Switch.template-doc.mdx

@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
-    );
-}
-```
-
-## Примеры
-
-### Размер Switch
-Размер компонента задается с помощью свойства `size`.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div>
-            <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
-            <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
-            <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
-        </div>
-    );
-}
-```
-
-Размер переключателя задается с помощью свойства `toggleSize`.
-
-```tsx live
-import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{ alignItems: "center" }}>
-            <Switch toggleSize="s" label="Переключатель" defaultChecked />
-            <Switch toggleSize="l" label="Переключатель" defaultChecked />
-        </div>
+        <Switch label="Переключатель" defaultChecked />
     );
 }
 ```

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

@@ -11,22 +11,11 @@ var tokens = exports.tokens = {
   fontWeight: '--plasma-switch-font-weight',
   letterSpacing: '--plasma-switch-letter-spacing',
   lineHeight: '--plasma-switch-line-height',
-  /* Токены description */
-  descriptionFontFamily: '--plasma-switch-description-font-family',
-  descriptionFontStyle: '--plasma-switch-description-font-style',
-  descriptionFontSize: '--plasma-switch-description-font-size',
-  descriptionFontWeight: '--plasma-switch-description-font-weight',
-  descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
-  descriptionLineHeight: '--plasma-switch-description-line-height',
   /* Цвет подписи */
   labelColor: '--plasma-switch__label-color',
   labelOffset: '--plasma-switch__label-offset',
-  /* Цвет описания */
-  descriptionColor: '--plasma-switch__description-color',
-  descriptionOffset: '--plasma-switch__description-offset',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-switch-disabled-opacity',
-  verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
   trackBorderRadius: '--plasma-switch__track-border-radius',

package/styled-components/cjs/components/Switch/_size/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{margin:var(", ",0);}"], _Switch2.StyledContent, _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledDescription, _Switch.tokens.descriptionFontFamily, _Switch.tokens.descriptionFontStyle, _Switch.tokens.descriptionFontWeight, _Switch.tokens.descriptionLetterSpacing, _Switch.tokens.descriptionLineHeight, _Switch.tokens.descriptionFontSize, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);

package/styled-components/cjs/components/Switch/_view/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Switch = /*#__PURE__*/require("../Switch.tokens");
 var _Switch2 = /*#__PURE__*/require("../Switch.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../../../components/NumberInput");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    shape: 'cornered',
+    inputBackgroundType: 'fill'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--inverse-surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-solid-default-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.backgroundErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.backgroundColorFocus, _NumberInput.numberInputTokens.backgroundColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-active);", ":var(--surface-transparent-secondary-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.backgroundErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.backgroundColorFocus, _NumberInput.numberInputTokens.backgroundColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--inverse-text-primary);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--on-dark-text-primary);", ":var(--text-tertiary);", ":var(--on-dark-text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--on-dark-surface-transparent-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--on-dark-text-primary-hover);", ":var(--surface-accent-hover);", ":var(--inverse-text-primary);", ":var(--on-dark-text-primary-active);", ":var(--surface-accent-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.caretColorSolid, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.backgroundErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.backgroundColorFocus, _NumberInput.numberInputTokens.backgroundColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary-active);", ":transparent;", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.caretColorSolid, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.backgroundErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.backgroundColorFocus, _NumberInput.numberInputTokens.backgroundColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":11.75rem;", ":3.5rem;", ":3.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.875rem;", ":0.375rem;", ":0 0.125rem;", ":0.875rem;", ":3.5rem;", ":1.063rem 1.125rem;", ":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;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":10.25rem;", ":3rem;", ":3rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.25rem;", ":0 0.125rem;", ":0.75rem;", ":3rem;", ":0.875rem 1rem;", ":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;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":8.75rem;", ":2.5rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.625rem;", ":0.25rem;", ":0 0.125rem;", ":0.625rem;", ":2.5rem;", ":0.688rem 0.875rem;", ":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;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.875rem;", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.125rem;", ":0 0.125rem;", ":0.5rem;", ":2rem;", ":0.563rem 0.625rem;", ":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;", ":0.25rem;", ":1rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize)
+    },
+    shape: {
+      cornered: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      pilled: /*#__PURE__*/(0, _styledComponents.css)(["", ":50%;"], _NumberInput.numberInputTokens.iconButtonRadius)
+    },
+    inputBackgroundType: {
+      fill: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary);"], _NumberInput.numberInputTokens.backgroundColor, _NumberInput.numberInputTokens.backgroundColorHover),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":transparent;"], _NumberInput.numberInputTokens.backgroundColor, _NumberInput.numberInputTokens.backgroundColorHover)
+    },
+    segmentation: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)([""]),
+      segmented: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      solid: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;"], _NumberInput.numberInputTokens.iconButtonSegmentationRadius)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _NumberInput.numberInputTokens.disabledOpacity)
+    }
+  }
+};

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

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

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

@@ -0,0 +1,108 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { NumberInput } from './NumberInput';
+
+const onChange = action('onChange');
+const onDecrement = action('onDecrement');
+const onIncrement = action('onIncrement');
+
+const views = ['default', 'secondary', 'accent', 'clear'];
+const sizes = ['l', 'm', 's', 'xs'];
+const shapes = ['cornered', 'pilled'];
+const inputBackgroundTypes = ['fill', 'clear'];
+const segmentation = ['default', 'segmented', 'solid'];
+
+const meta: Meta<typeof NumberInput> = {
+    title: 'plasma_b2c/NumberInput',
+    component: NumberInput,
+    decorators: [WithTheme],
+    argTypes: {
+        min: {
+            control: {
+                type: 'number',
+            },
+        },
+        max: {
+            control: {
+                type: 'number',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        inputBackgroundType: {
+            options: inputBackgroundTypes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        segmentation: {
+            options: segmentation,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof NumberInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState(5);
+
+    const handleChange = (_: any, newValue: number) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return (
+        <NumberInput
+            {...args}
+            value={value}
+            onChange={handleChange}
+            onDecrement={onDecrement}
+            onIncrement={onIncrement}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        shape: 'cornered',
+        inputBackgroundType: 'fill',
+        segmentation: 'default',
+        min: 0,
+        max: 9,
+        step: 1,
+        width: 188,
+        isManualInput: false,
+        textBefore: '',
+        textAfter: '',
+        isLoading: false,
+        disabled: false,
+    },
+    render: StoryDefault,
+};