@salutejs/plasma-web 1.356.0-dev.0 → 1.356.1-dev.0

package/es/components/Pagination/Pagination.config.js

@@ -9,30 +9,30 @@ export var config = {
   },
   variations: {
     view: {
-      secondary: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 85%\n                );\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 80%\n                );\n\n                ", ": 0.4;\n\n                ", ": var(--surface-solid-secondary);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.selectBackgroundColor, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
-      clear: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-clear);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);\n\n                ", ": 0.4;\n\n                ", ": var(--surface-solid-card);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.selectBackgroundColor, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
-      "default": /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 80%\n                );\n\n                ", ": 0.4;\n\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.selectBackgroundColor, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--inverse-text-primary-hover);\n                ", ": var(--inverse-text-primary-active);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--surface-solid-default-active);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--inverse-text-secondary);\n                ", ": var(--inverse-text-secondary-hover);\n                ", ": var(--inverse-text-secondary-hover);\n\n                ", ": 0.4;\n\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.selectBackgroundColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+      secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary-hover);\n                ", ": var(--text-primary-active);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--surface-transparent-secondary-active);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n\n                ", ": 0.4;\n\n                ", ": var(--surface-clear);\n                ", ": var(--surface-solid-secondary);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
+      clear: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary-hover);\n                ", ": var(--text-primary-active);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n\n                ", ": 0.4;\n\n                ", ": var(--surface-clear);\n                ", ": var(--surface-solid-card);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor),
       /**
        * @deprecated
        * использовать `default`
        */
-      primary: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 80%\n                );\n\n                ", ": 0.4;\n\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonHoverColor, paginationTokens.buttonHoverBackgroundColor, paginationTokens.buttonActiveColor, paginationTokens.buttonActiveBackgroundColor, paginationTokens.buttonDisabledOpacity, paginationTokens.selectBackgroundColor, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
+      primary: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--inverse-text-primary-hover);\n                ", ": var(--inverse-text-primary-active);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--surface-solid-default-active);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--inverse-text-secondary);\n                ", ": var(--inverse-text-secondary-hover);\n                ", ": var(--inverse-text-secondary-hover);\n\n                ", ": 0.4;\n\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-secondary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n            "])), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.buttonDisabledOpacity, paginationTokens.selectBackgroundColor, paginationTokens.inputBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor)
     },
     viewCurrentPage: {
       "default": /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 80%\n                );\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
+      secondary: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 85%\n                );\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 80%\n                );\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
+      clear: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-clear);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
       /**
        * @deprecated
        * использовать `default`
        */
-      primary: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 80%\n                );\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
-      secondary: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 85%\n                );\n                ", ": var(--text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-transparent-secondary) 80%\n                );\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor),
-      clear: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-clear);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);\n                ", ": var(--text-primary);\n                ", ": color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
+      primary: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 85%\n                );\n                ", ": var(--inverse-text-primary);\n                ", ": color-mix(\n                    in srgb,\n                    var(--inverse-text-primary),\n                    var(--surface-solid-default) 80%\n                );\n            "])), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
     },
     size: {
-      l: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 3.5rem;\n                ", ": 3rem;\n                ", ": 2.25rem;\n                ", ": 4rem;\n                ", ": 0.875rem;\n                ", ": 1.2rem;\n                ", ": 1.45rem;\n\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 1.875rem;\n                ", ": transparent;\n\n                ", ": 1rem;\n                ", ": 100%;\n                ", ": 0 3.5rem 0 1.5rem;\n                ", ": 0 3.625rem 0 0.375rem;\n                ", ": 0 3.625rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.875rem;\n                ", ": 4rem;\n                ", ": 3.5rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      m: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 3rem;\n                ", ": 3rem;\n                ", ": 2rem;\n                ", ": 3.5rem;\n                ", ": 0.75rem;\n                ", ": 1.05rem;\n                ", ": 1.3rem;\n\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 0.75rem;\n                ", ": 0.75rem;\n                ", ": 0.75rem;\n                ", ": 0.75rem;\n                ", ": 1.75rem;\n                ", ": transparent;\n\n                ", ": 0.875rem;\n                ", ": 100%;\n                ", ": 0 3.25rem 0 1.25rem;\n                ", ": 0 3.375rem 0 0.375rem;\n                ", ": 0 3.375rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.75rem;\n                ", ": 3.5rem;\n                ", ": 3rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      s: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 2.5rem;\n                ", ": 2.5rem;\n                ", ": 1.75rem;\n                ", ": 3rem;\n                ", ": 0.625rem;\n                ", ": 0.9rem;\n                ", ": 1.15rem;\n\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 1.75rem;\n                ", ": transparent;\n\n                ", ": 0.75rem;\n                ", ": 100%;\n                ", ": 0 3rem 0 1rem;\n                ", ": 0 3.125rem 0 0.375rem;\n                ", ": 0 3.125rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.625rem;\n                ", ": 3rem;\n                ", ": 2.5rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
-      xs: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 2rem;\n                ", ": 2.5rem;\n                ", ": 0.5rem;\n                ", ": 2rem;\n                ", ": 1.5rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": auto;\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 1.25rem;\n                ", ": transparent;\n\n                ", ": 0.5rem;\n                ", ": 100%;\n                ", ": 0 2.5rem 0 0.75rem;\n                ", ": 0 2.625rem 0 0.375rem;\n                ", ": 0 2.625rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.5rem;\n                ", ": 2.5rem;\n                ", ": 2rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.selectWidth, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemWidth, paginationTokens.selectItemHeight, paginationTokens.selectItemPaddingTop, paginationTokens.selectItemPaddingRight, paginationTokens.selectItemPaddingBottom, paginationTokens.selectItemPaddingLeft, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetWidth, paginationTokens.selectTargetPadding, paginationTokens.selectTargetPaddingHasChips, paginationTokens.selectTargetPaddingWithInput, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
+      l: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 3.5rem;\n                ", ": 3rem;\n                ", ": 2.25rem;\n                ", ": 4rem;\n                ", ": 0.875rem;\n                ", ": 1.2rem;\n                ", ": 1.45rem;\n                ", ": 0 -0.125rem 0 0.5rem;\n\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1rem 1rem 1rem;\n                ", ": 1.875rem;\n                ", ": transparent;\n\n                ", ": 1rem;\n                ", ": 1.5rem 0 1.5rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.875rem;\n                ", ": 4rem;\n                ", ": 3.5rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      m: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 3rem;\n                ", ": 3rem;\n                ", ": 2rem;\n                ", ": 3.5rem;\n                ", ": 0.75rem;\n                ", ": 1.05rem;\n                ", ": 1.3rem;\n                ", ": 0 -0.125rem 0 0.375rem;\n\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.75rem 0.75rem 0.75rem;\n                ", ": 1.75rem;\n                ", ": transparent;\n\n                ", ": 0.875rem;\n                ", ": 1.25rem 0 1.25rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.75rem;\n                ", ": 3.5rem;\n                ", ": 3rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      s: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 2.5rem;\n                ", ": 2.5rem;\n                ", ": 1.75rem;\n                ", ": 3rem;\n                ", ": 0.625rem;\n                ", ": 0.9rem;\n                ", ": 1.15rem;\n                ", ": 0 -0.125rem 0 0.25rem;\n\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem 0.5rem 0.75rem;\n                ", ": 1.75rem;\n                ", ": transparent;\n\n                ", ": 0.75rem;\n                ", ": 1rem 0 1rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.625rem;\n                ", ": 3rem;\n                ", ": 2.5rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth),
+      xs: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\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                ", ": 2rem;\n                ", ": 2.5rem;\n                ", ": 0.5rem;\n                ", ": 2rem;\n                ", ": 1.5rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0 -0.125rem 0 0.25rem;\n\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem 0.5rem 0.5rem 0.5rem;\n                ", ": 1.25rem;\n                ", ": transparent;\n\n                ", ": 0.5rem;\n                ", ": 0.75rem 0 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.5rem;\n                ", ": 2.5rem;\n                ", ": 2rem;\n                ", ": 0 0.625rem;\n                ", ": 0.0625rem;\n            "])), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
     },
     type: {
       compact: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral([""]))),

package/es/components/Select/Select.js

@@ -1,135 +1,4 @@
 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); }
-// import React, { forwardRef, CSSProperties, Ref } from 'react';
-// import type { SelectProps, SelectRefElement } from '@salutejs/plasma-hope';
-// import {
-//     selectConfig,
-//     component,
-//     mergeConfig,
-//     selectItemConfig,
-//     cx,
-//     popoverClasses,
-// } from '@salutejs/plasma-new-hope/styled-components';
-// import { IconDone } from '@salutejs/plasma-icons';
-// import styled from 'styled-components';
-//
-// import { Checkbox } from '../Checkbox';
-//
-// import { config } from './Select.config';
-
-// const mergedConfig = mergeConfig(selectConfig, config);
-// export const SelectComponent = component(mergedConfig);
-//
-// const mergedItemConfig = mergeConfig(selectItemConfig);
-// export const SelectItem = component(mergedItemConfig);
-//
-// const getColor = (status?: SelectProps['status']): string => {
-//     switch (status) {
-//         case 'success':
-//             return '--text-positive';
-//         case 'warning':
-//             return '--text-warning';
-//         case 'error':
-//             return '--text-negative';
-//         default:
-//             return '--text-secondary';
-//     }
-// };
-//
-// const HelperText = styled.div<{ status?: SelectProps['status'] }>`
-//     color: ${({ status }) => `var(${getColor(status)})`};
-//     margin-top: 0.25rem;
-//     font-family: var(--plasma-typo-body-xs-font-family), sans-serif;
-//     font-size: var(--plasma-typo-body-xs-font-size);
-//     font-style: var(--plasma-typo-body-xs-font-style);
-//     font-weight: var(--plasma-typo-body-xs-font-weight);
-//     letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
-//     line-height: var(--plasma-typo-body-xs-line-height);
-// `;
-//
-// const SelectWrapper = styled.div<{
-//     listHeight?: number | CSSProperties['height'];
-// }>`
-//     width: 100%;
-//
-//     & .select-height {
-//         --plasma-select-height: ${({ listHeight }) =>
-//             Number.isNaN(Number(listHeight)) ? listHeight : `${listHeight}rem`};
-//     }
-// `;
-//
-// /**
-//  * Выпадающий список для использования в формах.
-//  * Поддерживает выбор одного или нескольких значений.
-//  */
-// export const Select = forwardRef<SelectRefElement, SelectProps>(
-//     (
-//         {
-//             value,
-//             items,
-//             onChange,
-//             multiselect,
-//             separator,
-//             status,
-//             placeholder,
-//             helperText,
-//             disabled,
-//             onItemSelect,
-//             isOpen,
-//             listHeight,
-//             listOverflow,
-//             className,
-//             ...rest
-//         },
-//         ref,
-//     ) => {
-//         const handleItemSelect: SelectProps['onItemSelect'] = (item, e) => {
-//             if (onItemSelect) {
-//                 onItemSelect(item, e);
-//             }
-//         };
-//
-//         return (
-//             <SelectWrapper listHeight={listHeight}>
-//                 <SelectComponent
-//                     {...(rest as any)}
-//                     frame="theme-root"
-//                     value={value}
-//                     valueType={multiselect ? 'multiple' : 'single'}
-//                     placement="bottom"
-//                     target="button-like"
-//                     disabled={disabled}
-//                     onChangeValue={onChange}
-//                     label={placeholder}
-//                     opened={isOpen}
-//                     ref={ref as Ref<HTMLSelectElement>}
-//                     className={cx(className, 'select-height')}
-//                 >
-//                     {items.map((item) => (
-//                         <SelectItem
-//                             key={item.value}
-//                             value={item.value}
-//                             text={item.label}
-//                             onClick={(e) => handleItemSelect(item, e)}
-//                             disabled={item.isDisabled}
-//                             contentLeft={
-//                                 // eslint-disable-next-line no-nested-ternary
-//                                 multiselect ? (
-//                                     <Checkbox size="m" />
-//                                 ) : item.value === value ? (
-//                                     <IconDone size="s" color="inherit" />
-//                                 ) : undefined
-//                             }
-//                         />
-//                     ))}
-//                 </SelectComponent>
-//
-//                 {/* TODO: #1153 */}
-//                 {helperText && <HelperText status={status}>{helperText}</HelperText>}
-//             </SelectWrapper>
-//         );
-//     },
-// );
-
 import React, { forwardRef } from 'react';
 import { Select as SelectHope } from '@salutejs/plasma-hope';
 // TODO: Удалить Select из hope с внедрением компонента SelectNested в new-hope

package/es/components/SelectNew/Select.config.js

@@ -0,0 +1,35 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, selectTokens } from '@salutejs/plasma-new-hope/styled-components';
+export var config = {
+  defaults: {
+    view: 'default',
+    chipView: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n\n                ", ": 1rem;\n                ", ": 0.5rem 0.5rem 0.5rem 0.375rem;\n                ", ": 0.25rem 0.5rem 0.25rem 0.375rem;\n                ", ": 0.375rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0 0.25rem 0 0;\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.875rem;\n                ", ": 0.875rem;\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": var(--text-accent);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--text-secondary);\n\n                ", ": 0.375rem;\n\n                ", ": 0.25rem;\n                ", ": 0.125rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n                ", ": 0.625rem;\n                ", ": 0.25rem;\n                ", ": 0rem;\n                ", ": 0.75rem;\n\n                ", ": 0 -0.125rem 0 0.25rem;\n                ", ": 0 0 0 0.375rem;\n                ", ": 2rem;\n                ", ": 0.75rem 0 0.75rem;\n                ", ": 0.5rem 0 0.625rem;\n                ", ": 0.5rem 0 0.25rem;\n\n                ", ": 0.375rem;\n\n                ", ": 0;\n\n                ", ": 0.25rem;\n\n                ", ": 1rem;\n                ", ": 1rem;\n            "])), selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.itemIconMargin, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight),
+      s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem 0.5rem 0.675rem;\n                ", ": 0.25rem 0.75rem 0.25rem 0.675rem;\n                ", ": 0.5rem;\n                ", ": 1.5rem;\n                ", ": 1rem;\n                ", ": 0 0.375rem 0 0;\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                ", ": 1.25rem;\n                ", ": 0.875rem;\n                ", ": 0.375rem;\n                ", ": 0.25rem;\n                ", ": var(--text-accent);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--text-secondary);\n\n                ", ": 0.375rem;\n\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n                ", ": 1.75rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0rem;\n                ", ": 0.75rem;\n\n                ", ": 0 -0.125rem 0 0.25rem;\n                ", ": 0 0 0 0.375rem;\n                ", ": 2.5rem;\n                ", ": 1rem 0 1rem;\n                ", ": 0.75rem 0 0.875rem;\n                ", ": 0.75rem 0 0.25rem;\n\n                ", ": 0.5rem;\n\n                ", ": 0;\n\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem;\n            "])), selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.itemIconMargin, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight),
+      m: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.75rem 0.75rem 0.75rem 0.75rem;\n                ", ": 0.5rem 0.75rem 0.5rem 0.75rem;\n                ", ": 0.625rem;\n                ", ": 0 0.375rem 0 0;\n                ", ": 1.5rem;\n                ", ": 1.5rem;\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                ", ": 1.25rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n                ", ": var(--text-accent);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--text-secondary);\n\n                ", ": 0.375rem;\n\n                ", ": 0.25rem;\n                ", ": 0.375rem;\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0rem;\n                ", ": 1rem;\n\n                ", ": 0 -0.125rem 0 0.375rem;\n                ", ": 0 0 0 0.625rem;\n                ", ": 3rem;\n                ", ": 1.25rem 0 1.25rem;\n                ", ": 0.875rem 0 1rem;\n                ", ": 0.875rem 0 0.25rem;\n\n                ", ": 0.625rem;\n\n                ", ": 0.125rem;\n\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n            "])), selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight),
+      l: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.125rem;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 1rem 1rem 1rem 0.875rem;\n                ", ": 0.75rem 1rem 0.75rem 0.875rem;\n                ", ": 0.75rem;\n                ", ": 0 0.5rem 0 0;\n                ", ": 1.5rem;\n                ", ": 1.5rem;\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                ", ": 1.25rem;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n                ", ": var(--text-accent);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--text-secondary);\n\n                ", ": 0.375rem;\n\n                ", ": 0.25rem;\n                ", ": 0.5rem;\n                ", ": 2.75rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0rem;\n                ", ": 1rem;\n\n                ", ": 0 -0.125rem 0 0.5rem;\n                ", ": 0 0 0 0.75rem;\n                ", ": 3.5rem;\n                ", ": 1.5rem 0 1.5rem;\n                ", ": 1rem 0 1.125rem;\n                ", ": 1rem 0 0.25rem;\n\n                ", ": 0.75rem;\n\n                ", ": 0.125rem;\n\n                ", ": 0.25rem;\n\n                ", ": 1.5rem;\n                ", ": 1.5rem;\n            "])), selectTokens.padding, selectTokens.borderRadius, selectTokens.focusOffset, selectTokens.itemHeight, selectTokens.itemPadding, selectTokens.itemPaddingTight, selectTokens.itemBorderRadius, selectTokens.itemIconMargin, selectTokens.itemIconSize, selectTokens.itemIconSizeTight, selectTokens.fontFamily, selectTokens.fontSize, selectTokens.fontStyle, selectTokens.fontWeight, selectTokens.fontLetterSpacing, selectTokens.fontLineHeight, selectTokens.checkboxTriggerSize, selectTokens.checkboxTriggerSizeTight, selectTokens.checkboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderRadiusTight, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor, selectTokens.indicatorSize, selectTokens.chipGap, selectTokens.chipBorderRadius, selectTokens.chipHeight, selectTokens.chipPaddingRight, selectTokens.chipPaddingLeft, selectTokens.chipClearContentMarginLeft, selectTokens.chipClearContentMarginRight, selectTokens.chipCloseIconSize, selectTokens.targetButtonArrowMargin, selectTokens.targetTextfieldArrowMargin, selectTokens.targetHeight, selectTokens.targetButtonPadding, selectTokens.targetTextfieldPadding, selectTokens.targetTextfieldChipPadding, selectTokens.labelOffset, selectTokens.innerLabelGap, selectTokens.helperTextOffset, selectTokens.spinnerSize, selectTokens.spinnerSizeTight)
+    },
+    view: {
+      "default": /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": var(--inverse-text-primary);\n                ", ": var(--inverse-text-primary-hover);\n                ", ": var(--inverse-text-primary-active);\n                ", ": var(--inverse-text-secondary);\n                ", ": var(--inverse-text-secondary-hover);\n                ", ": var(--inverse-text-secondary-hover);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--surface-solid-default);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-transparent-tertiary);\n            "])), selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened, selectTokens.targetTextfieldBorderColor),
+      positive: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-positive);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n                ", ":var(--surface-positive);\n                ", ":var(--surface-positive-hover);\n                ", ":var(--surface-positive-active);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-positive);\n            "])), selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened, selectTokens.targetTextfieldBorderColor),
+      warning: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-warning);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n                ", ":var(--surface-warning);\n                ", ":var(--surface-warning-hover);\n                ", ":var(--surface-warning-active);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-warning);\n            "])), selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened, selectTokens.targetTextfieldBorderColor),
+      negative: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-negative);\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n                ", ":var(--surface-negative);\n                ", ": var(--surface-negative-hover);\n                ", ":var(--surface-negative-active);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-negative);\n            "])), selectTokens.helperTextColor, selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetTextfieldArrowColor, selectTokens.targetTextfieldArrowColorHover, selectTokens.targetTextfieldArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive, selectTokens.targetTextfieldBackgroundColor, selectTokens.targetTextfieldBackgroundColorOpened, selectTokens.targetTextfieldBorderColor),
+      accent: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-accent-hover);\n                ", ": var(--surface-accent-active);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary-hover);\n                ", ": var(--text-primary-active);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--surface-transparent-secondary-active);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
+      clear: /*#__PURE__*/css(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary-hover);\n                ", ": var(--text-primary-active);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary-hover);\n                ", ": var(--text-secondary-active);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
+      dark: /*#__PURE__*/css(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-active);\n                ", ":var(--on-light-surface-transparent-deep);\n                ", ":var(--on-light-surface-transparent-deep-hover);\n                ", ":var(--on-light-surface-transparent-deep-active);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
+      black: /*#__PURE__*/css(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--on-dark-text-primary-hover);\n                ", ": var(--on-dark-text-primary-active);\n                ", ": var(--on-dark-text-secondary);\n                ", ": var(--on-dark-text-secondary-hover);\n                ", ": var(--on-dark-text-secondary-active);\n                ", ":var(--on-light-surface-solid-default);\n                ", ":var(--on-light-surface-solid-default-hover);\n                ", ": var(--on-light-surface-solid-default-active);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive),
+      white: /*#__PURE__*/css(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-light-text-primary);\n                ", ": var(--on-light-text-primary-hover);\n                ", ": var(--on-light-text-primary-active);\n                ", ": var(--on-light-text-secondary);\n                ", ": var(--on-light-text-secondary-hover);\n                ", ": var(--on-light-text-secondary-active);\n                ", ":var(--on-dark-surface-solid-default);\n                ", ":var(--on-dark-surface-solid-default-hover);\n                ", ":var(--on-dark-surface-solid-default-active);\n            "])), selectTokens.targetButtonColor, selectTokens.targetButtonColorHover, selectTokens.targetButtonColorActive, selectTokens.targetButtonArrowColor, selectTokens.targetButtonArrowColorHover, selectTokens.targetButtonArrowColorActive, selectTokens.targetButtonBackgroundColor, selectTokens.targetButtonBackgroundColorHover, selectTokens.targetButtonBackgroundColorActive)
+    },
+    chipView: {
+      "default": /*#__PURE__*/css(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--inverse-text-primary);\n                ", ": var(--surface-solid-default);\n                ", ": var(--surface-solid-default-hover);\n                ", ": var(--surface-solid-default-active);\n            "])), selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive),
+      secondary: /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--surface-transparent-secondary-active);\n            "])), selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive),
+      accent: /*#__PURE__*/css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--on-dark-text-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--surface-accent-hover);\n                ", ": var(--surface-accent-active);\n            "])), selectTokens.chipColor, selectTokens.chipBackground, selectTokens.chipBackgroundHover, selectTokens.chipBackgroundActive)
+    }
+  }
+};

package/es/components/SelectNew/Select.js

@@ -0,0 +1,5 @@
+import { selectConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { config } from './Select.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(selectConfig, config);
+var Select = /*#__PURE__*/component(mergedConfig);
+export { Select };

package/es/components/SelectNew/index.js

@@ -0,0 +1 @@
+export { Select as SelectNew } from './Select';

package/es/index.js

@@ -38,6 +38,7 @@ export * from './components/Radiobox';
 export * from './components/Range';
 export * from './components/Segment';
 export * from './components/Select';
+export * from './components/SelectNew';
 export * from './components/Sheet';
 export * from './components/Skeleton';
 export * from './components/Spinner';

package/index.d.ts

@@ -38,6 +38,7 @@ export * from './components/Radiobox';
 export * from './components/Range';
 export * from './components/Segment';
 export * from './components/Select';
+export * from './components/SelectNew';
 export * from './components/Sheet';
 export * from './components/Skeleton';
 export * from './components/Spinner';

package/index.js

@@ -443,6 +443,17 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
+var _SelectNew = /*#__PURE__*/require("./components/SelectNew");
+Object.keys(_SelectNew).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SelectNew[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SelectNew[key];
+    }
+  });
+});
 var _Sheet = /*#__PURE__*/require("./components/Sheet");
 Object.keys(_Sheet).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-web",
-  "version": "1.356.0-dev.0",
+  "version": "1.356.1-dev.0",
   "description": "Salute Design System / React UI kit for web applications",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -19,9 +19,9 @@
     "directory": "packages/plasma-web"
   },
   "dependencies": {
-    "@salutejs/plasma-core": "1.163.0-dev.0",
-    "@salutejs/plasma-hope": "1.289.0-dev.0",
-    "@salutejs/plasma-new-hope": "0.110.0-dev.0",
+    "@salutejs/plasma-core": "1.163.1-dev.0",
+    "@salutejs/plasma-hope": "1.289.1-dev.0",
+    "@salutejs/plasma-new-hope": "0.110.1-dev.0",
     "@salutejs/plasma-tokens-b2b": "1.41.0",
     "@salutejs/plasma-tokens-b2c": "0.51.0",
     "@salutejs/plasma-tokens-web": "1.56.0",
@@ -48,9 +48,9 @@
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@salutejs/plasma-colors": "0.13.0",
-    "@salutejs/plasma-cy-utils": "0.95.0-dev.0",
+    "@salutejs/plasma-cy-utils": "0.95.1-dev.0",
     "@salutejs/plasma-icons": "1.199.0",
-    "@salutejs/plasma-sb-utils": "0.161.0-dev.0",
+    "@salutejs/plasma-sb-utils": "0.161.1-dev.0",
     "@storybook/addon-docs": "7.6.17",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addons": "7.6.17",
@@ -110,5 +110,5 @@
     "Fanil Zubairov"
   ],
   "sideEffects": false,
-  "gitHead": "a658419757f0c12c15c277e7ccd7ff0ce13e16c5"
+  "gitHead": "66e4c01162bcb0720b0a13d0803a9faffc2b4e1f"
 }

package/components/Select/Select.config.d.ts

@@ -1,22 +0,0 @@
-export declare const config: {
-    defaults: {
-        target: string;
-        view: string;
-        size: string;
-    };
-    variations: {
-        target: {
-            'textField-like': import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-            'button-like': import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-        };
-        size: {
-            xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-            s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-            m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-            l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-        };
-        view: {
-            default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
-        };
-    };
-};

package/components/Select/Select.config.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = void 0;
-var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var config = exports.config = {
-  defaults: {
-    target: 'button-like',
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    target: {
-      'textField-like': /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-transparent-primary);\n                ", ": var(--surface-transparent-primary-hover);\n                ", ": var(--surface-transparent-primary-active);\n                ", ": var(--surface-transparent-secondary);\n            "])), _styledComponents.selectTokens.targetColor, _styledComponents.selectTokens.targetLabelColor, _styledComponents.selectTokens.targetArrowColor, _styledComponents.selectTokens.targetBackgroundColor, _styledComponents.selectTokens.targetBackgroundColorHover, _styledComponents.selectTokens.targetBackgroundColorActive, _styledComponents.selectTokens.targetBackgroundColorOpen),
-      'button-like': /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--text-primary);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--surface-transparent-secondary-active);\n                ", ": var(--surface-transparent-secondary);\n                ", ": 600 !important; /* TODO: \u041F\u0435\u0440\u0435\u0434\u0435\u043B\u0430\u0442\u044C \u043A\u043E\u0433\u0434\u0430 \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C \u043F\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043D\u0438\u044F \u0441\u0432\u043E\u0439\u0441\u0442\u0432 */\n            "])), _styledComponents.selectTokens.targetColor, _styledComponents.selectTokens.targetLabelColor, _styledComponents.selectTokens.targetArrowColor, _styledComponents.selectTokens.targetBackgroundColor, _styledComponents.selectTokens.targetBackgroundColorHover, _styledComponents.selectTokens.targetBackgroundColorActive, _styledComponents.selectTokens.targetBackgroundColorOpen, _styledComponents.selectTokens.targetFontWeight)
-    },
-    size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.5rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.063rem;\n                ", ": 0;\n                ", ": 0.5rem;\n                ", ": 0;\n                ", ": 0.375rem;\n\n                ", ": auto;\n                ", ": 1rem;\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n                ", ": 0.375rem;\n                ", ": 1.25rem;\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.125rem;\n                ", ": auto;\n                ", ": 1.25rem;\n                ", ": 0.375rem;\n                ", ": 0.625rem;\n                ", ": 0.25rem;\n                ", ": 0rem;\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-font-weight);\n                ", ": var(--plasma-typo-body-xs-letter-spacing);\n                ", ": var(--plasma-typo-body-xs-line-height);\n\n                ", ": 0.5rem;\n                ", ": 2rem;\n                ", ": 100%;\n                ", ": 0.5rem;\n                ", ": 0 2.5rem 0 0.75rem;\n                ", ": 0 2.625rem 0 0.375rem;\n                ", ": 0 2.625rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\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                ", ": 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            "])), _styledComponents.selectTokens.width, _styledComponents.selectTokens.height, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.paddingTop, _styledComponents.selectTokens.paddingRight, _styledComponents.selectTokens.paddingBottom, _styledComponents.selectTokens.paddingLeft, _styledComponents.selectTokens.dividerColor, _styledComponents.selectTokens.dividerHeight, _styledComponents.selectTokens.dividerMarginTop, _styledComponents.selectTokens.dividerMarginRight, _styledComponents.selectTokens.dividerMarginBottom, _styledComponents.selectTokens.dividerMarginLeft, _styledComponents.selectTokens.itemWidth, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPaddingTop, _styledComponents.selectTokens.itemPaddingRight, _styledComponents.selectTokens.itemPaddingBottom, _styledComponents.selectTokens.itemPaddingLeft, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemContentLeftWidth, _styledComponents.selectTokens.itemFontFamily, _styledComponents.selectTokens.itemFontSize, _styledComponents.selectTokens.itemFontStyle, _styledComponents.selectTokens.itemFontWeightBold, _styledComponents.selectTokens.itemFontLetterSpacing, _styledComponents.selectTokens.itemFontLineHeight, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipWidth, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.chipFontFamily, _styledComponents.selectTokens.chipFontSize, _styledComponents.selectTokens.chipFontStyle, _styledComponents.selectTokens.chipFontWeight, _styledComponents.selectTokens.chipLetterSpacing, _styledComponents.selectTokens.chipLineHeight, _styledComponents.selectTokens.targetArrowRight, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetWidth, _styledComponents.selectTokens.targetRadius, _styledComponents.selectTokens.targetPadding, _styledComponents.selectTokens.targetPaddingHasChips, _styledComponents.selectTokens.targetPaddingWithInput, _styledComponents.selectTokens.targetInnerTop, _styledComponents.selectTokens.targetLabelInnerTop, _styledComponents.selectTokens.targetFontFamily, _styledComponents.selectTokens.targetFontSize, _styledComponents.selectTokens.targetFontStyle, _styledComponents.selectTokens.targetFontWeight, _styledComponents.selectTokens.targetLetterSpacing, _styledComponents.selectTokens.targetLineHeight, _styledComponents.selectTokens.targetLabelInnerFontFamily, _styledComponents.selectTokens.targetLabelInnerFontSize, _styledComponents.selectTokens.targetLabelInnerFontStyle, _styledComponents.selectTokens.targetLabelInnerFontWeight, _styledComponents.selectTokens.targetLabelInnerLetterSpacing, _styledComponents.selectTokens.targetLabelInnerLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.625rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.063rem;\n                ", ": 0;\n                ", ": 0.75rem;\n                ", ": 0;\n                ", ": 0.75rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.5rem;\n                ", ": 1.75rem;\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                ", ": auto;\n                ", ": 1.75rem;\n                ", ": 0.5rem;\n                ", ": 0.75rem;\n                ", ": 0.375rem;\n                ", ": 0rem;\n                ", ": 0.75rem;\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.75rem;\n                ", ": 2.5rem;\n                ", ": 100%;\n                ", ": 0.625rem;\n                ", ": 0 3rem 0 1rem;\n                ", ": 0 3.125rem 0 0.375rem;\n                ", ": 0 3.125rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\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                ", ": var(--plasma-typo-body-xxs-font-family);\n                ", ": var(--plasma-typo-body-xxs-font-size);\n                ", ": var(--plasma-typo-body-xxs-font-style);\n                ", ": var(--plasma-typo-body-xxs-font-weight);\n                ", ": var(--plasma-typo-body-xxs-letter-spacing);\n                ", ": var(--plasma-typo-body-xxs-line-height);\n            "])), _styledComponents.selectTokens.width, _styledComponents.selectTokens.height, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.paddingTop, _styledComponents.selectTokens.paddingRight, _styledComponents.selectTokens.paddingBottom, _styledComponents.selectTokens.paddingLeft, _styledComponents.selectTokens.dividerColor, _styledComponents.selectTokens.dividerHeight, _styledComponents.selectTokens.dividerMarginTop, _styledComponents.selectTokens.dividerMarginRight, _styledComponents.selectTokens.dividerMarginBottom, _styledComponents.selectTokens.dividerMarginLeft, _styledComponents.selectTokens.itemWidth, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPaddingTop, _styledComponents.selectTokens.itemPaddingRight, _styledComponents.selectTokens.itemPaddingBottom, _styledComponents.selectTokens.itemPaddingLeft, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemContentLeftWidth, _styledComponents.selectTokens.itemFontFamily, _styledComponents.selectTokens.itemFontSize, _styledComponents.selectTokens.itemFontStyle, _styledComponents.selectTokens.itemFontWeightBold, _styledComponents.selectTokens.itemFontLetterSpacing, _styledComponents.selectTokens.itemFontLineHeight, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipWidth, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.chipFontFamily, _styledComponents.selectTokens.chipFontSize, _styledComponents.selectTokens.chipFontStyle, _styledComponents.selectTokens.chipFontWeight, _styledComponents.selectTokens.chipLetterSpacing, _styledComponents.selectTokens.chipLineHeight, _styledComponents.selectTokens.targetArrowRight, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetWidth, _styledComponents.selectTokens.targetRadius, _styledComponents.selectTokens.targetPadding, _styledComponents.selectTokens.targetPaddingHasChips, _styledComponents.selectTokens.targetPaddingWithInput, _styledComponents.selectTokens.targetInnerTop, _styledComponents.selectTokens.targetLabelInnerTop, _styledComponents.selectTokens.targetFontFamily, _styledComponents.selectTokens.targetFontSize, _styledComponents.selectTokens.targetFontStyle, _styledComponents.selectTokens.targetFontWeight, _styledComponents.selectTokens.targetLetterSpacing, _styledComponents.selectTokens.targetLineHeight, _styledComponents.selectTokens.targetLabelInnerFontFamily, _styledComponents.selectTokens.targetLabelInnerFontSize, _styledComponents.selectTokens.targetLabelInnerFontStyle, _styledComponents.selectTokens.targetLabelInnerFontWeight, _styledComponents.selectTokens.targetLabelInnerLetterSpacing, _styledComponents.selectTokens.targetLabelInnerLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.75rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.063rem;\n                ", ": 0;\n                ", ": 0.875rem;\n                ", ": 0;\n                ", ": 0.875rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 0.75rem;\n                ", ": 0.875rem;\n                ", ": 0.75rem;\n                ", ": 0.875rem;\n                ", ": 0.625rem;\n                ", ": 1.75rem;\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.375rem;\n                ", ": auto;\n                ", ": 2.25rem;\n                ", ": 0.875rem;\n                ", ": 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0rem;\n                ", ": 1rem;\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.875rem;\n                ", ": 3rem;\n                ", ": 100%;\n                ", ": 0.75rem;\n                ", ": 0 3.25rem 0 1.25rem;\n                ", ": 0 3.375rem 0 0.375rem;\n                ", ": 0 3.375rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\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                ", ": 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            "])), _styledComponents.selectTokens.width, _styledComponents.selectTokens.height, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.paddingTop, _styledComponents.selectTokens.paddingRight, _styledComponents.selectTokens.paddingBottom, _styledComponents.selectTokens.paddingLeft, _styledComponents.selectTokens.dividerColor, _styledComponents.selectTokens.dividerHeight, _styledComponents.selectTokens.dividerMarginTop, _styledComponents.selectTokens.dividerMarginRight, _styledComponents.selectTokens.dividerMarginBottom, _styledComponents.selectTokens.dividerMarginLeft, _styledComponents.selectTokens.itemWidth, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPaddingTop, _styledComponents.selectTokens.itemPaddingRight, _styledComponents.selectTokens.itemPaddingBottom, _styledComponents.selectTokens.itemPaddingLeft, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemContentLeftWidth, _styledComponents.selectTokens.itemFontFamily, _styledComponents.selectTokens.itemFontSize, _styledComponents.selectTokens.itemFontStyle, _styledComponents.selectTokens.itemFontWeightBold, _styledComponents.selectTokens.itemFontLetterSpacing, _styledComponents.selectTokens.itemFontLineHeight, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipWidth, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.chipFontFamily, _styledComponents.selectTokens.chipFontSize, _styledComponents.selectTokens.chipFontStyle, _styledComponents.selectTokens.chipFontWeight, _styledComponents.selectTokens.chipLetterSpacing, _styledComponents.selectTokens.chipLineHeight, _styledComponents.selectTokens.targetArrowRight, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetWidth, _styledComponents.selectTokens.targetRadius, _styledComponents.selectTokens.targetPadding, _styledComponents.selectTokens.targetPaddingHasChips, _styledComponents.selectTokens.targetPaddingWithInput, _styledComponents.selectTokens.targetInnerTop, _styledComponents.selectTokens.targetLabelInnerTop, _styledComponents.selectTokens.targetFontFamily, _styledComponents.selectTokens.targetFontSize, _styledComponents.selectTokens.targetFontStyle, _styledComponents.selectTokens.targetFontWeight, _styledComponents.selectTokens.targetLetterSpacing, _styledComponents.selectTokens.targetLineHeight, _styledComponents.selectTokens.targetLabelInnerFontFamily, _styledComponents.selectTokens.targetLabelInnerFontSize, _styledComponents.selectTokens.targetLabelInnerFontStyle, _styledComponents.selectTokens.targetLabelInnerFontWeight, _styledComponents.selectTokens.targetLabelInnerLetterSpacing, _styledComponents.selectTokens.targetLabelInnerLineHeight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 100%;\n                ", ": auto;\n                ", ": 0.875rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": var(--surface-transparent-tertiary);\n                ", ": 0.063rem;\n                ", ": 0;\n                ", ": 1rem;\n                ", ": 0;\n                ", ": 1rem;\n\n                ", ": auto;\n                ", ": 1.5rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 1rem;\n                ", ": 0.75rem;\n                ", ": 1.875rem;\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.5rem;\n                ", ": auto;\n                ", ": 2.75rem;\n                ", ": 0.75rem;\n                ", ": 1rem;\n                ", ": 0.625rem;\n                ", ": 0rem;\n                ", ": 1rem;\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                ", ": 1rem;\n                ", ": 3.5rem;\n                ", ": 100%;\n                ", ": 0.875rem;\n                ", ": 0 3.5rem 0 1.5rem;\n                ", ": 0 3.625rem 0 0.375rem;\n                ", ": 0 3.625rem 0 0.625rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\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                ", ": 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            "])), _styledComponents.selectTokens.width, _styledComponents.selectTokens.height, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.paddingTop, _styledComponents.selectTokens.paddingRight, _styledComponents.selectTokens.paddingBottom, _styledComponents.selectTokens.paddingLeft, _styledComponents.selectTokens.dividerColor, _styledComponents.selectTokens.dividerHeight, _styledComponents.selectTokens.dividerMarginTop, _styledComponents.selectTokens.dividerMarginRight, _styledComponents.selectTokens.dividerMarginBottom, _styledComponents.selectTokens.dividerMarginLeft, _styledComponents.selectTokens.itemWidth, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPaddingTop, _styledComponents.selectTokens.itemPaddingRight, _styledComponents.selectTokens.itemPaddingBottom, _styledComponents.selectTokens.itemPaddingLeft, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemContentLeftWidth, _styledComponents.selectTokens.itemFontFamily, _styledComponents.selectTokens.itemFontSize, _styledComponents.selectTokens.itemFontStyle, _styledComponents.selectTokens.itemFontWeightBold, _styledComponents.selectTokens.itemFontLetterSpacing, _styledComponents.selectTokens.itemFontLineHeight, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipWidth, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.chipFontFamily, _styledComponents.selectTokens.chipFontSize, _styledComponents.selectTokens.chipFontStyle, _styledComponents.selectTokens.chipFontWeight, _styledComponents.selectTokens.chipLetterSpacing, _styledComponents.selectTokens.chipLineHeight, _styledComponents.selectTokens.targetArrowRight, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetWidth, _styledComponents.selectTokens.targetRadius, _styledComponents.selectTokens.targetPadding, _styledComponents.selectTokens.targetPaddingHasChips, _styledComponents.selectTokens.targetPaddingWithInput, _styledComponents.selectTokens.targetInnerTop, _styledComponents.selectTokens.targetLabelInnerTop, _styledComponents.selectTokens.targetFontFamily, _styledComponents.selectTokens.targetFontSize, _styledComponents.selectTokens.targetFontStyle, _styledComponents.selectTokens.targetFontWeight, _styledComponents.selectTokens.targetLetterSpacing, _styledComponents.selectTokens.targetLineHeight, _styledComponents.selectTokens.targetLabelInnerFontFamily, _styledComponents.selectTokens.targetLabelInnerFontSize, _styledComponents.selectTokens.targetLabelInnerFontStyle, _styledComponents.selectTokens.targetLabelInnerFontWeight, _styledComponents.selectTokens.targetLabelInnerLetterSpacing, _styledComponents.selectTokens.targetLabelInnerLineHeight)
-    },
-    view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--surface-solid-card);\n                ", ": var(--shadow-down-soft-s);\n\n                ", ": var(--plasma-colors-transparent);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--text-accent);\n\n                ", ": var(--text-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary-hover);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary-active);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-transparent-secondary);\n                ", ": var(--text-primary);\n                ", ": 0.72;\n\n                ", ": 0.4;\n                ", ": var(--surface-accent);\n            "])), _styledComponents.selectTokens.background, _styledComponents.selectTokens.boxShadow, _styledComponents.selectTokens.itemBackground, _styledComponents.selectTokens.itemBackgroundHover, _styledComponents.selectTokens.itemBackgroundSelectedHover, _styledComponents.selectTokens.itemColor, _styledComponents.selectTokens.itemContentLeftColor, _styledComponents.selectTokens.chipCloseIconColor, _styledComponents.selectTokens.chipColor, _styledComponents.selectTokens.chipBackground, _styledComponents.selectTokens.chipColorHover, _styledComponents.selectTokens.chipBackgroundHover, _styledComponents.selectTokens.chipColorActive, _styledComponents.selectTokens.chipBackgroundActive, _styledComponents.selectTokens.chipBackgroundReadOnly, _styledComponents.selectTokens.chipColorReadOnly, _styledComponents.selectTokens.chipBackgroundReadOnlyHover, _styledComponents.selectTokens.chipColorReadOnlyHover, _styledComponents.selectTokens.chipOpacityReadonly, _styledComponents.selectTokens.disabledOpacity, _styledComponents.selectTokens.focusColor)
-    }
-  }
-};