@salutejs/plasma-web 1.620.1-next-sbcom.0 → 1.621.0-dev.0

package/dist/styled-components/cjs/components/NumberInput/NumberInput.config.js

@@ -8,358 +8,8 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-negative);\n                ",
-        ": var(--surface-negative);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--inverse-text-tertiary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-solid-default);\n\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--surface-solid-default);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--inverse-text-primary-hover);\n                ",
-        ": var(--surface-solid-default-hover);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--inverse-text-primary-active);\n                ",
-        ": var(--surface-solid-default-active);\n\n                ",
-        ": 0.4;\n\n                ",
-        ": inherit;\n                ",
-        ": inherit;\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-negative);\n                ",
-        ": var(--surface-negative);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-transparent-secondary);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary-hover);\n                ",
-        ": var(--surface-transparent-secondary-hover);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary-active);\n                ",
-        ": var(--surface-transparent-secondary-active);\n\n                ",
-        ": 0.4;\n\n                ",
-        ": inherit;\n                ",
-        ": inherit;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--text-negative);\n                ",
-        ": var(--surface-negative);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--inverse-text-tertiary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--light-background-primary);\n                ",
-        ": var(--surface-accent);\n\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--inverse-text-primary-hover);\n                ",
-        ": var(--surface-accent-hover);\n                ",
-        ": var(--inverse-text-primary);\n                ",
-        ": var(--inverse-text-primary-active);\n                ",
-        ": var(--surface-accent-active);\n\n                ",
-        ": 0.4;\n\n                ",
-        ": inherit;\n                ",
-        ": inherit;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-negative);\n                ",
-        ": var(--surface-negative);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": transparent;\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": transparent;\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-primary-hover);\n                ",
-        ": transparent;\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-transparent-secondary);\n                ",
-        ": transparent;\n\n                ",
-        ": 0.4;\n\n                ",
-        ": inherit;\n                ",
-        ": inherit;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 11.75rem;\n                ",
-        ": 3.5rem;\n                ",
-        ": 3.5rem;\n                ",
-        ": 1.5rem;\n                ",
-        ": var(--plasma-typo-body-l-font-family);\n                ",
-        ": var(--plasma-typo-body-l-font-size);\n                ",
-        ": var(--plasma-typo-body-l-font-style);\n                ",
-        ": var(--plasma-typo-body-l-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n\n                ",
-        ": 0.875rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": 0 0.125rem;\n                ",
-        ": 0.875rem;\n                ",
-        ": 3.5rem;\n                ",
-        ": 0.063rem;\n                ",
-        ": 1.063rem 1.125rem;\n\n                ",
-        ": var(--plasma-typo-body-l-font-family);\n                ",
-        ": var(--plasma-typo-body-l-font-size);\n                ",
-        ": var(--plasma-typo-body-l-font-style);\n                ",
-        ": var(--plasma-typo-body-l-font-weight);\n                ",
-        ": var(--plasma-typo-body-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 1.375rem;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 10.25rem;\n                ",
-        ": 3rem;\n                ",
-        ": 3rem;\n                ",
-        ": 1.25rem;\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0 0.125rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 3rem;\n                ",
-        ": 0.063rem;\n                ",
-        ": 0.875rem 1rem;\n\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 1.375rem;\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 8.75rem;\n                ",
-        ": 2.5rem;\n                ",
-        ": 2.5rem;\n                ",
-        ": 1rem;\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0 0.125rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 2.5rem;\n                ",
-        ": 0.063rem;\n                ",
-        ": 0.688rem 0.875rem;\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 1.375rem;\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 6.875rem;\n                ",
-        ": 2rem;\n                ",
-        ": 2rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": var(--plasma-typo-body-xs-font-family);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-font-style);\n                ",
-        ": var(--plasma-typo-body-xs-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 0 0.125rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 2rem;\n                ",
-        ": 0.063rem;\n                ",
-        ": 0.563rem 0.625rem;\n\n                ",
-        ": var(--plasma-typo-body-xs-font-family);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-font-style);\n                ",
-        ": var(--plasma-typo-body-xs-font-weight);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 1rem;\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 50%;\n            "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--surface-transparent-tertiary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": transparent;\n                ",
-        ": transparent;\n            "
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject12() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject12 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject13() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject13 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject14() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0;\n            "
-    ]);
-    _templateObject14 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject15() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.4;\n            "
-    ]);
-    _templateObject15 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const config = {
     defaults: {
         view: 'default',
         size: 'l',
@@ -368,32 +18,277 @@ var config = {
     },
     variations: {
         view: {
-            default: (0, _styledcomponents.css)(_templateObject(), _styledcomponents.numberInputTokens.caretColor, _styledcomponents.numberInputTokens.errorColor, _styledcomponents.numberInputTokens.borderErrorColor, _styledcomponents.numberInputTokens.color, _styledcomponents.numberInputTokens.colorSolid, _styledcomponents.numberInputTokens.additionalTextColor, _styledcomponents.numberInputTokens.additionalTextColorSolid, _styledcomponents.numberInputTokens.borderColorFocus, _styledcomponents.numberInputTokens.borderColorSolidFocus, _styledcomponents.numberInputTokens.backgroundColorSolid, _styledcomponents.numberInputTokens.iconButtonColor, _styledcomponents.numberInputTokens.iconButtonBackgroundColor, _styledcomponents.numberInputTokens.iconButtonColorHover, _styledcomponents.numberInputTokens.iconButtonColorSolidHover, _styledcomponents.numberInputTokens.iconButtonBackgroundColorHover, _styledcomponents.numberInputTokens.iconButtonColorActive, _styledcomponents.numberInputTokens.iconButtonColorSolidActive, _styledcomponents.numberInputTokens.iconButtonBackgroundColorActive, _styledcomponents.numberInputTokens.actionButtonDisabledOpacity, _styledcomponents.numberInputTokens.loaderSpinnerColor, _styledcomponents.numberInputTokens.loaderSpinnerColorSolid),
-            secondary: (0, _styledcomponents.css)(_templateObject1(), _styledcomponents.numberInputTokens.caretColor, _styledcomponents.numberInputTokens.errorColor, _styledcomponents.numberInputTokens.borderErrorColor, _styledcomponents.numberInputTokens.color, _styledcomponents.numberInputTokens.colorSolid, _styledcomponents.numberInputTokens.additionalTextColor, _styledcomponents.numberInputTokens.additionalTextColorSolid, _styledcomponents.numberInputTokens.borderColorFocus, _styledcomponents.numberInputTokens.borderColorSolidFocus, _styledcomponents.numberInputTokens.backgroundColorSolid, _styledcomponents.numberInputTokens.iconButtonColor, _styledcomponents.numberInputTokens.iconButtonBackgroundColor, _styledcomponents.numberInputTokens.iconButtonColorHover, _styledcomponents.numberInputTokens.iconButtonColorSolidHover, _styledcomponents.numberInputTokens.iconButtonBackgroundColorHover, _styledcomponents.numberInputTokens.iconButtonColorActive, _styledcomponents.numberInputTokens.iconButtonColorSolidActive, _styledcomponents.numberInputTokens.iconButtonBackgroundColorActive, _styledcomponents.numberInputTokens.actionButtonDisabledOpacity, _styledcomponents.numberInputTokens.loaderSpinnerColor, _styledcomponents.numberInputTokens.loaderSpinnerColorSolid),
-            accent: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.numberInputTokens.caretColor, _styledcomponents.numberInputTokens.caretColorSolid, _styledcomponents.numberInputTokens.errorColor, _styledcomponents.numberInputTokens.borderErrorColor, _styledcomponents.numberInputTokens.color, _styledcomponents.numberInputTokens.colorSolid, _styledcomponents.numberInputTokens.additionalTextColor, _styledcomponents.numberInputTokens.additionalTextColorSolid, _styledcomponents.numberInputTokens.borderColorFocus, _styledcomponents.numberInputTokens.borderColorSolidFocus, _styledcomponents.numberInputTokens.backgroundColorSolid, _styledcomponents.numberInputTokens.iconButtonColor, _styledcomponents.numberInputTokens.iconButtonBackgroundColor, _styledcomponents.numberInputTokens.iconButtonColorHover, _styledcomponents.numberInputTokens.iconButtonColorSolidHover, _styledcomponents.numberInputTokens.iconButtonBackgroundColorHover, _styledcomponents.numberInputTokens.iconButtonColorActive, _styledcomponents.numberInputTokens.iconButtonColorSolidActive, _styledcomponents.numberInputTokens.iconButtonBackgroundColorActive, _styledcomponents.numberInputTokens.actionButtonDisabledOpacity, _styledcomponents.numberInputTokens.loaderSpinnerColor, _styledcomponents.numberInputTokens.loaderSpinnerColorSolid),
-            clear: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.numberInputTokens.caretColor, _styledcomponents.numberInputTokens.errorColor, _styledcomponents.numberInputTokens.borderErrorColor, _styledcomponents.numberInputTokens.color, _styledcomponents.numberInputTokens.colorSolid, _styledcomponents.numberInputTokens.additionalTextColor, _styledcomponents.numberInputTokens.additionalTextColorSolid, _styledcomponents.numberInputTokens.borderColorFocus, _styledcomponents.numberInputTokens.borderColorSolidFocus, _styledcomponents.numberInputTokens.backgroundColorSolid, _styledcomponents.numberInputTokens.iconButtonColor, _styledcomponents.numberInputTokens.iconButtonBackgroundColor, _styledcomponents.numberInputTokens.iconButtonColorHover, _styledcomponents.numberInputTokens.iconButtonColorSolidHover, _styledcomponents.numberInputTokens.iconButtonBackgroundColorHover, _styledcomponents.numberInputTokens.iconButtonColorActive, _styledcomponents.numberInputTokens.backgroundColorFocus, _styledcomponents.numberInputTokens.iconButtonBackgroundColorActive, _styledcomponents.numberInputTokens.actionButtonDisabledOpacity, _styledcomponents.numberInputTokens.loaderSpinnerColor, _styledcomponents.numberInputTokens.loaderSpinnerColorSolid)
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
+                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
+                ${_styledcomponents.numberInputTokens.borderErrorColor}: var(--surface-negative);
+
+                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.colorSolid}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--inverse-text-tertiary);
+                ${_styledcomponents.numberInputTokens.borderColorFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.borderColorSolidFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-solid-default);
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+
+                ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColor}: inherit;
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
+            `,
+            secondary: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
+                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
+                ${_styledcomponents.numberInputTokens.borderErrorColor}: var(--surface-negative);
+
+                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.colorSolid}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.borderColorFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.borderColorSolidFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-transparent-secondary);
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--text-primary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--text-primary-active);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+
+                ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColor}: inherit;
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
+            `,
+            accent: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
+                ${_styledcomponents.numberInputTokens.caretColorSolid}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
+                ${_styledcomponents.numberInputTokens.borderErrorColor}: var(--surface-negative);
+
+                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.colorSolid}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--inverse-text-tertiary);
+                ${_styledcomponents.numberInputTokens.borderColorFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.borderColorSolidFocus}: var(--light-background-primary);
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-accent);
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--inverse-text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+
+                ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColor}: inherit;
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
+            `,
+            clear: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
+                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
+                ${_styledcomponents.numberInputTokens.borderErrorColor}: var(--surface-negative);
+
+                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.colorSolid}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--text-tertiary);
+                ${_styledcomponents.numberInputTokens.borderColorFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.borderColorSolidFocus}: var(--surface-accent);
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: transparent;
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: transparent;
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--text-primary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: transparent;
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: transparent;
+
+                ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColor}: inherit;
+                ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
+            `
         },
         size: {
-            l: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.numberInputTokens.rootMinWidth, _styledcomponents.numberInputTokens.iconButtonHeight, _styledcomponents.numberInputTokens.iconButtonWidth, _styledcomponents.numberInputTokens.iconButtonPadding, _styledcomponents.numberInputTokens.iconButtonFontFamily, _styledcomponents.numberInputTokens.iconButtonFontSize, _styledcomponents.numberInputTokens.iconButtonFontStyle, _styledcomponents.numberInputTokens.iconButtonFontWeight, _styledcomponents.numberInputTokens.iconButtonLetterSpacing, _styledcomponents.numberInputTokens.iconButtonLineHeight, _styledcomponents.numberInputTokens.iconButtonRadius, _styledcomponents.numberInputTokens.iconButtonSegmentationRadius, _styledcomponents.numberInputTokens.inputWrapperMargin, _styledcomponents.numberInputTokens.inputWrapperBorderRadius, _styledcomponents.numberInputTokens.textWrapperHeight, _styledcomponents.numberInputTokens.inputWrapperBorderWidth, _styledcomponents.numberInputTokens.textWrapperPadding, _styledcomponents.numberInputTokens.fontFamily, _styledcomponents.numberInputTokens.fontSize, _styledcomponents.numberInputTokens.fontStyle, _styledcomponents.numberInputTokens.fontWeight, _styledcomponents.numberInputTokens.letterSpacing, _styledcomponents.numberInputTokens.lineHeight, _styledcomponents.numberInputTokens.textBeforeMarginRight, _styledcomponents.numberInputTokens.textAfterMarginLeft, _styledcomponents.numberInputTokens.loaderSpinnerSize),
-            m: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.numberInputTokens.rootMinWidth, _styledcomponents.numberInputTokens.iconButtonHeight, _styledcomponents.numberInputTokens.iconButtonWidth, _styledcomponents.numberInputTokens.iconButtonPadding, _styledcomponents.numberInputTokens.iconButtonFontFamily, _styledcomponents.numberInputTokens.iconButtonFontSize, _styledcomponents.numberInputTokens.iconButtonFontStyle, _styledcomponents.numberInputTokens.iconButtonFontWeight, _styledcomponents.numberInputTokens.iconButtonLetterSpacing, _styledcomponents.numberInputTokens.iconButtonLineHeight, _styledcomponents.numberInputTokens.iconButtonRadius, _styledcomponents.numberInputTokens.iconButtonSegmentationRadius, _styledcomponents.numberInputTokens.inputWrapperMargin, _styledcomponents.numberInputTokens.inputWrapperBorderRadius, _styledcomponents.numberInputTokens.textWrapperHeight, _styledcomponents.numberInputTokens.inputWrapperBorderWidth, _styledcomponents.numberInputTokens.textWrapperPadding, _styledcomponents.numberInputTokens.fontFamily, _styledcomponents.numberInputTokens.fontSize, _styledcomponents.numberInputTokens.fontStyle, _styledcomponents.numberInputTokens.fontWeight, _styledcomponents.numberInputTokens.letterSpacing, _styledcomponents.numberInputTokens.lineHeight, _styledcomponents.numberInputTokens.textBeforeMarginRight, _styledcomponents.numberInputTokens.textAfterMarginLeft, _styledcomponents.numberInputTokens.loaderSpinnerSize),
-            s: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.numberInputTokens.rootMinWidth, _styledcomponents.numberInputTokens.iconButtonHeight, _styledcomponents.numberInputTokens.iconButtonWidth, _styledcomponents.numberInputTokens.iconButtonPadding, _styledcomponents.numberInputTokens.iconButtonFontFamily, _styledcomponents.numberInputTokens.iconButtonFontSize, _styledcomponents.numberInputTokens.iconButtonFontStyle, _styledcomponents.numberInputTokens.iconButtonFontWeight, _styledcomponents.numberInputTokens.iconButtonLetterSpacing, _styledcomponents.numberInputTokens.iconButtonLineHeight, _styledcomponents.numberInputTokens.iconButtonRadius, _styledcomponents.numberInputTokens.iconButtonSegmentationRadius, _styledcomponents.numberInputTokens.inputWrapperMargin, _styledcomponents.numberInputTokens.inputWrapperBorderRadius, _styledcomponents.numberInputTokens.textWrapperHeight, _styledcomponents.numberInputTokens.inputWrapperBorderWidth, _styledcomponents.numberInputTokens.textWrapperPadding, _styledcomponents.numberInputTokens.fontFamily, _styledcomponents.numberInputTokens.fontSize, _styledcomponents.numberInputTokens.fontStyle, _styledcomponents.numberInputTokens.fontWeight, _styledcomponents.numberInputTokens.letterSpacing, _styledcomponents.numberInputTokens.lineHeight, _styledcomponents.numberInputTokens.textBeforeMarginRight, _styledcomponents.numberInputTokens.textAfterMarginLeft, _styledcomponents.numberInputTokens.loaderSpinnerSize),
-            xs: (0, _styledcomponents.css)(_templateObject7(), _styledcomponents.numberInputTokens.rootMinWidth, _styledcomponents.numberInputTokens.iconButtonHeight, _styledcomponents.numberInputTokens.iconButtonWidth, _styledcomponents.numberInputTokens.iconButtonPadding, _styledcomponents.numberInputTokens.iconButtonFontFamily, _styledcomponents.numberInputTokens.iconButtonFontSize, _styledcomponents.numberInputTokens.iconButtonFontStyle, _styledcomponents.numberInputTokens.iconButtonFontWeight, _styledcomponents.numberInputTokens.iconButtonLetterSpacing, _styledcomponents.numberInputTokens.iconButtonLineHeight, _styledcomponents.numberInputTokens.iconButtonRadius, _styledcomponents.numberInputTokens.iconButtonSegmentationRadius, _styledcomponents.numberInputTokens.inputWrapperMargin, _styledcomponents.numberInputTokens.inputWrapperBorderRadius, _styledcomponents.numberInputTokens.textWrapperHeight, _styledcomponents.numberInputTokens.inputWrapperBorderWidth, _styledcomponents.numberInputTokens.textWrapperPadding, _styledcomponents.numberInputTokens.fontFamily, _styledcomponents.numberInputTokens.fontSize, _styledcomponents.numberInputTokens.fontStyle, _styledcomponents.numberInputTokens.fontWeight, _styledcomponents.numberInputTokens.letterSpacing, _styledcomponents.numberInputTokens.lineHeight, _styledcomponents.numberInputTokens.textBeforeMarginRight, _styledcomponents.numberInputTokens.textAfterMarginLeft, _styledcomponents.numberInputTokens.loaderSpinnerSize)
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.rootMinWidth}: 11.75rem;
+                ${_styledcomponents.numberInputTokens.iconButtonHeight}: 3.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonWidth}: 3.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.875rem;
+                ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.375rem;
+
+                ${_styledcomponents.numberInputTokens.inputWrapperMargin}: 0 0.125rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderRadius}: 0.875rem;
+                ${_styledcomponents.numberInputTokens.textWrapperHeight}: 3.5rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderWidth}: 0.063rem;
+                ${_styledcomponents.numberInputTokens.textWrapperPadding}: 1.063rem 1.125rem;
+
+                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
+                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
+                ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerSize}: 1.375rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.rootMinWidth}: 10.25rem;
+                ${_styledcomponents.numberInputTokens.iconButtonHeight}: 3rem;
+                ${_styledcomponents.numberInputTokens.iconButtonWidth}: 3rem;
+                ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1.25rem;
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.75rem;
+                ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.inputWrapperMargin}: 0 0.125rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderRadius}: 0.75rem;
+                ${_styledcomponents.numberInputTokens.textWrapperHeight}: 3rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderWidth}: 0.063rem;
+                ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.875rem 1rem;
+
+                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
+                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-m-font-size);
+                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
+                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
+                ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerSize}: 1.375rem;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.rootMinWidth}: 8.75rem;
+                ${_styledcomponents.numberInputTokens.iconButtonHeight}: 2.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonWidth}: 2.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1rem;
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.625rem;
+                ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.inputWrapperMargin}: 0 0.125rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderRadius}: 0.625rem;
+                ${_styledcomponents.numberInputTokens.textWrapperHeight}: 2.5rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderWidth}: 0.063rem;
+                ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.688rem 0.875rem;
+
+                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
+                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
+                ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerSize}: 1.375rem;
+            `,
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.rootMinWidth}: 6.875rem;
+                ${_styledcomponents.numberInputTokens.iconButtonHeight}: 2rem;
+                ${_styledcomponents.numberInputTokens.iconButtonWidth}: 2rem;
+                ${_styledcomponents.numberInputTokens.iconButtonPadding}: 0.75rem;
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.5rem;
+                ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.125rem;
+
+                ${_styledcomponents.numberInputTokens.inputWrapperMargin}: 0 0.125rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderRadius}: 0.5rem;
+                ${_styledcomponents.numberInputTokens.textWrapperHeight}: 2rem;
+                ${_styledcomponents.numberInputTokens.inputWrapperBorderWidth}: 0.063rem;
+                ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.563rem 0.625rem;
+
+                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
+                ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
+
+                ${_styledcomponents.numberInputTokens.loaderSpinnerSize}: 1rem;
+            `
         },
         shape: {
-            cornered: (0, _styledcomponents.css)(_templateObject8()),
-            pilled: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.numberInputTokens.iconButtonRadius)
+            cornered: (0, _styledcomponents.css)``,
+            pilled: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.iconButtonRadius}: 50%;
+            `
         },
         inputBackgroundType: {
-            fill: (0, _styledcomponents.css)(_templateObject10(), _styledcomponents.numberInputTokens.borderColor, _styledcomponents.numberInputTokens.borderColorHover),
-            clear: (0, _styledcomponents.css)(_templateObject11(), _styledcomponents.numberInputTokens.borderColor, _styledcomponents.numberInputTokens.borderColorHover)
+            fill: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.borderColor}: var(--surface-transparent-tertiary);
+                ${_styledcomponents.numberInputTokens.borderColorHover}: var(--text-secondary);
+            `,
+            clear: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.borderColor}: transparent;
+                ${_styledcomponents.numberInputTokens.borderColorHover}: transparent;
+            `
         },
         segmentation: {
-            default: (0, _styledcomponents.css)(_templateObject12()),
-            segmented: (0, _styledcomponents.css)(_templateObject13()),
-            solid: (0, _styledcomponents.css)(_templateObject14(), _styledcomponents.numberInputTokens.iconButtonSegmentationRadius)
+            default: (0, _styledcomponents.css)``,
+            segmented: (0, _styledcomponents.css)``,
+            solid: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0;
+            `
         },
         disabled: {
-            true: (0, _styledcomponents.css)(_templateObject15(), _styledcomponents.numberInputTokens.disabledOpacity)
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.numberInputTokens.disabledOpacity}: 0.4;
+            `
         }
     }
 };