@salutejs/plasma-web 1.355.0-canary.1233.10010303428.0 → 1.355.0-canary.1233.10042812952.0

package/api/plasma-web.api.md

@@ -38,7 +38,7 @@ import { BadgeProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
-import { BasicProps } from '@salutejs/plasma-new-hope/types/components/SelectNew/Select.types';
+import { BasicProps } from '@salutejs/plasma-new-hope/types/components/Select/Select.types';
 import { BlurProps } from '@salutejs/plasma-core';
 import { blurs } from '@salutejs/plasma-core';
 import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types';

package/components/Select/Select.js

@@ -9,135 +9,7 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _plasmaHope = /*#__PURE__*/require("@salutejs/plasma-hope");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // 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>
-//         );
-//     },
-// );
+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); }
 // TODO: Удалить Select из hope с внедрением компонента SelectNested в new-hope
 
 var SelectBase = /*#__PURE__*/(0, _plasmaHope.Select)({

package/components/SelectNew/Select.config.js

@@ -15,27 +15,27 @@ var config = exports.config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.padding, _styledComponents.selectNewTokens.borderRadius, _styledComponents.selectNewTokens.focusOffset, _styledComponents.selectNewTokens.itemHeight, _styledComponents.selectNewTokens.itemPadding, _styledComponents.selectNewTokens.itemPaddingTight, _styledComponents.selectNewTokens.itemBorderRadius, _styledComponents.selectNewTokens.itemIconSize, _styledComponents.selectNewTokens.itemIconSizeTight, _styledComponents.selectNewTokens.itemIconMargin, _styledComponents.selectNewTokens.fontFamily, _styledComponents.selectNewTokens.fontSize, _styledComponents.selectNewTokens.fontStyle, _styledComponents.selectNewTokens.fontWeight, _styledComponents.selectNewTokens.fontLetterSpacing, _styledComponents.selectNewTokens.fontLineHeight, _styledComponents.selectNewTokens.checkboxTriggerSize, _styledComponents.selectNewTokens.checkboxTriggerSizeTight, _styledComponents.selectNewTokens.checkboxTriggerBorderRadius, _styledComponents.selectNewTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectNewTokens.checkboxFillColor, _styledComponents.selectNewTokens.checkboxIconColor, _styledComponents.selectNewTokens.checkboxTriggerBorderColor, _styledComponents.selectNewTokens.indicatorSize, _styledComponents.selectNewTokens.chipGap, _styledComponents.selectNewTokens.chipBorderRadius, _styledComponents.selectNewTokens.chipHeight, _styledComponents.selectNewTokens.chipPaddingRight, _styledComponents.selectNewTokens.chipPaddingLeft, _styledComponents.selectNewTokens.chipClearContentMarginLeft, _styledComponents.selectNewTokens.chipClearContentMarginRight, _styledComponents.selectNewTokens.chipCloseIconSize, _styledComponents.selectNewTokens.targetButtonArrowMargin, _styledComponents.selectNewTokens.targetTextfieldArrowMargin, _styledComponents.selectNewTokens.targetHeight, _styledComponents.selectNewTokens.targetButtonPadding, _styledComponents.selectNewTokens.targetTextfieldPadding, _styledComponents.selectNewTokens.targetTextfieldChipPadding, _styledComponents.selectNewTokens.labelOffset, _styledComponents.selectNewTokens.innerLabelGap, _styledComponents.selectNewTokens.helperTextOffset, _styledComponents.selectNewTokens.spinnerSize, _styledComponents.selectNewTokens.spinnerSizeTight),
-      s: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.padding, _styledComponents.selectNewTokens.borderRadius, _styledComponents.selectNewTokens.focusOffset, _styledComponents.selectNewTokens.itemHeight, _styledComponents.selectNewTokens.itemPadding, _styledComponents.selectNewTokens.itemPaddingTight, _styledComponents.selectNewTokens.itemBorderRadius, _styledComponents.selectNewTokens.itemIconSize, _styledComponents.selectNewTokens.itemIconSizeTight, _styledComponents.selectNewTokens.itemIconMargin, _styledComponents.selectNewTokens.fontFamily, _styledComponents.selectNewTokens.fontSize, _styledComponents.selectNewTokens.fontStyle, _styledComponents.selectNewTokens.fontWeight, _styledComponents.selectNewTokens.fontLetterSpacing, _styledComponents.selectNewTokens.fontLineHeight, _styledComponents.selectNewTokens.checkboxTriggerSize, _styledComponents.selectNewTokens.checkboxTriggerSizeTight, _styledComponents.selectNewTokens.checkboxTriggerBorderRadius, _styledComponents.selectNewTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectNewTokens.checkboxFillColor, _styledComponents.selectNewTokens.checkboxIconColor, _styledComponents.selectNewTokens.checkboxTriggerBorderColor, _styledComponents.selectNewTokens.indicatorSize, _styledComponents.selectNewTokens.chipGap, _styledComponents.selectNewTokens.chipBorderRadius, _styledComponents.selectNewTokens.chipHeight, _styledComponents.selectNewTokens.chipPaddingRight, _styledComponents.selectNewTokens.chipPaddingLeft, _styledComponents.selectNewTokens.chipClearContentMarginLeft, _styledComponents.selectNewTokens.chipClearContentMarginRight, _styledComponents.selectNewTokens.chipCloseIconSize, _styledComponents.selectNewTokens.targetButtonArrowMargin, _styledComponents.selectNewTokens.targetTextfieldArrowMargin, _styledComponents.selectNewTokens.targetHeight, _styledComponents.selectNewTokens.targetButtonPadding, _styledComponents.selectNewTokens.targetTextfieldPadding, _styledComponents.selectNewTokens.targetTextfieldChipPadding, _styledComponents.selectNewTokens.labelOffset, _styledComponents.selectNewTokens.innerLabelGap, _styledComponents.selectNewTokens.helperTextOffset, _styledComponents.selectNewTokens.spinnerSize, _styledComponents.selectNewTokens.spinnerSizeTight),
-      m: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.padding, _styledComponents.selectNewTokens.borderRadius, _styledComponents.selectNewTokens.focusOffset, _styledComponents.selectNewTokens.itemHeight, _styledComponents.selectNewTokens.itemPadding, _styledComponents.selectNewTokens.itemPaddingTight, _styledComponents.selectNewTokens.itemBorderRadius, _styledComponents.selectNewTokens.itemIconMargin, _styledComponents.selectNewTokens.itemIconSize, _styledComponents.selectNewTokens.itemIconSizeTight, _styledComponents.selectNewTokens.fontFamily, _styledComponents.selectNewTokens.fontSize, _styledComponents.selectNewTokens.fontStyle, _styledComponents.selectNewTokens.fontWeight, _styledComponents.selectNewTokens.fontLetterSpacing, _styledComponents.selectNewTokens.fontLineHeight, _styledComponents.selectNewTokens.checkboxTriggerSize, _styledComponents.selectNewTokens.checkboxTriggerSizeTight, _styledComponents.selectNewTokens.checkboxTriggerBorderRadius, _styledComponents.selectNewTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectNewTokens.checkboxFillColor, _styledComponents.selectNewTokens.checkboxIconColor, _styledComponents.selectNewTokens.checkboxTriggerBorderColor, _styledComponents.selectNewTokens.indicatorSize, _styledComponents.selectNewTokens.chipGap, _styledComponents.selectNewTokens.chipBorderRadius, _styledComponents.selectNewTokens.chipHeight, _styledComponents.selectNewTokens.chipPaddingRight, _styledComponents.selectNewTokens.chipPaddingLeft, _styledComponents.selectNewTokens.chipClearContentMarginLeft, _styledComponents.selectNewTokens.chipClearContentMarginRight, _styledComponents.selectNewTokens.chipCloseIconSize, _styledComponents.selectNewTokens.targetButtonArrowMargin, _styledComponents.selectNewTokens.targetTextfieldArrowMargin, _styledComponents.selectNewTokens.targetHeight, _styledComponents.selectNewTokens.targetButtonPadding, _styledComponents.selectNewTokens.targetTextfieldPadding, _styledComponents.selectNewTokens.targetTextfieldChipPadding, _styledComponents.selectNewTokens.labelOffset, _styledComponents.selectNewTokens.innerLabelGap, _styledComponents.selectNewTokens.helperTextOffset, _styledComponents.selectNewTokens.spinnerSize, _styledComponents.selectNewTokens.spinnerSizeTight),
-      l: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.padding, _styledComponents.selectNewTokens.borderRadius, _styledComponents.selectNewTokens.focusOffset, _styledComponents.selectNewTokens.itemHeight, _styledComponents.selectNewTokens.itemPadding, _styledComponents.selectNewTokens.itemPaddingTight, _styledComponents.selectNewTokens.itemBorderRadius, _styledComponents.selectNewTokens.itemIconMargin, _styledComponents.selectNewTokens.itemIconSize, _styledComponents.selectNewTokens.itemIconSizeTight, _styledComponents.selectNewTokens.fontFamily, _styledComponents.selectNewTokens.fontSize, _styledComponents.selectNewTokens.fontStyle, _styledComponents.selectNewTokens.fontWeight, _styledComponents.selectNewTokens.fontLetterSpacing, _styledComponents.selectNewTokens.fontLineHeight, _styledComponents.selectNewTokens.checkboxTriggerSize, _styledComponents.selectNewTokens.checkboxTriggerSizeTight, _styledComponents.selectNewTokens.checkboxTriggerBorderRadius, _styledComponents.selectNewTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectNewTokens.checkboxFillColor, _styledComponents.selectNewTokens.checkboxIconColor, _styledComponents.selectNewTokens.checkboxTriggerBorderColor, _styledComponents.selectNewTokens.indicatorSize, _styledComponents.selectNewTokens.chipGap, _styledComponents.selectNewTokens.chipBorderRadius, _styledComponents.selectNewTokens.chipHeight, _styledComponents.selectNewTokens.chipPaddingRight, _styledComponents.selectNewTokens.chipPaddingLeft, _styledComponents.selectNewTokens.chipClearContentMarginLeft, _styledComponents.selectNewTokens.chipClearContentMarginRight, _styledComponents.selectNewTokens.chipCloseIconSize, _styledComponents.selectNewTokens.targetButtonArrowMargin, _styledComponents.selectNewTokens.targetTextfieldArrowMargin, _styledComponents.selectNewTokens.targetHeight, _styledComponents.selectNewTokens.targetButtonPadding, _styledComponents.selectNewTokens.targetTextfieldPadding, _styledComponents.selectNewTokens.targetTextfieldChipPadding, _styledComponents.selectNewTokens.labelOffset, _styledComponents.selectNewTokens.innerLabelGap, _styledComponents.selectNewTokens.helperTextOffset, _styledComponents.selectNewTokens.spinnerSize, _styledComponents.selectNewTokens.spinnerSizeTight)
+      xs: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.padding, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.focusOffset, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPadding, _styledComponents.selectTokens.itemPaddingTight, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemIconSize, _styledComponents.selectTokens.itemIconSizeTight, _styledComponents.selectTokens.itemIconMargin, _styledComponents.selectTokens.fontFamily, _styledComponents.selectTokens.fontSize, _styledComponents.selectTokens.fontStyle, _styledComponents.selectTokens.fontWeight, _styledComponents.selectTokens.fontLetterSpacing, _styledComponents.selectTokens.fontLineHeight, _styledComponents.selectTokens.checkboxTriggerSize, _styledComponents.selectTokens.checkboxTriggerSizeTight, _styledComponents.selectTokens.checkboxTriggerBorderRadius, _styledComponents.selectTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectTokens.checkboxFillColor, _styledComponents.selectTokens.checkboxIconColor, _styledComponents.selectTokens.checkboxTriggerBorderColor, _styledComponents.selectTokens.indicatorSize, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.targetButtonArrowMargin, _styledComponents.selectTokens.targetTextfieldArrowMargin, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetButtonPadding, _styledComponents.selectTokens.targetTextfieldPadding, _styledComponents.selectTokens.targetTextfieldChipPadding, _styledComponents.selectTokens.labelOffset, _styledComponents.selectTokens.innerLabelGap, _styledComponents.selectTokens.helperTextOffset, _styledComponents.selectTokens.spinnerSize, _styledComponents.selectTokens.spinnerSizeTight),
+      s: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.padding, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.focusOffset, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPadding, _styledComponents.selectTokens.itemPaddingTight, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemIconSize, _styledComponents.selectTokens.itemIconSizeTight, _styledComponents.selectTokens.itemIconMargin, _styledComponents.selectTokens.fontFamily, _styledComponents.selectTokens.fontSize, _styledComponents.selectTokens.fontStyle, _styledComponents.selectTokens.fontWeight, _styledComponents.selectTokens.fontLetterSpacing, _styledComponents.selectTokens.fontLineHeight, _styledComponents.selectTokens.checkboxTriggerSize, _styledComponents.selectTokens.checkboxTriggerSizeTight, _styledComponents.selectTokens.checkboxTriggerBorderRadius, _styledComponents.selectTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectTokens.checkboxFillColor, _styledComponents.selectTokens.checkboxIconColor, _styledComponents.selectTokens.checkboxTriggerBorderColor, _styledComponents.selectTokens.indicatorSize, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.targetButtonArrowMargin, _styledComponents.selectTokens.targetTextfieldArrowMargin, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetButtonPadding, _styledComponents.selectTokens.targetTextfieldPadding, _styledComponents.selectTokens.targetTextfieldChipPadding, _styledComponents.selectTokens.labelOffset, _styledComponents.selectTokens.innerLabelGap, _styledComponents.selectTokens.helperTextOffset, _styledComponents.selectTokens.spinnerSize, _styledComponents.selectTokens.spinnerSizeTight),
+      m: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.padding, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.focusOffset, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPadding, _styledComponents.selectTokens.itemPaddingTight, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemIconMargin, _styledComponents.selectTokens.itemIconSize, _styledComponents.selectTokens.itemIconSizeTight, _styledComponents.selectTokens.fontFamily, _styledComponents.selectTokens.fontSize, _styledComponents.selectTokens.fontStyle, _styledComponents.selectTokens.fontWeight, _styledComponents.selectTokens.fontLetterSpacing, _styledComponents.selectTokens.fontLineHeight, _styledComponents.selectTokens.checkboxTriggerSize, _styledComponents.selectTokens.checkboxTriggerSizeTight, _styledComponents.selectTokens.checkboxTriggerBorderRadius, _styledComponents.selectTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectTokens.checkboxFillColor, _styledComponents.selectTokens.checkboxIconColor, _styledComponents.selectTokens.checkboxTriggerBorderColor, _styledComponents.selectTokens.indicatorSize, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.targetButtonArrowMargin, _styledComponents.selectTokens.targetTextfieldArrowMargin, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetButtonPadding, _styledComponents.selectTokens.targetTextfieldPadding, _styledComponents.selectTokens.targetTextfieldChipPadding, _styledComponents.selectTokens.labelOffset, _styledComponents.selectTokens.innerLabelGap, _styledComponents.selectTokens.helperTextOffset, _styledComponents.selectTokens.spinnerSize, _styledComponents.selectTokens.spinnerSizeTight),
+      l: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.padding, _styledComponents.selectTokens.borderRadius, _styledComponents.selectTokens.focusOffset, _styledComponents.selectTokens.itemHeight, _styledComponents.selectTokens.itemPadding, _styledComponents.selectTokens.itemPaddingTight, _styledComponents.selectTokens.itemBorderRadius, _styledComponents.selectTokens.itemIconMargin, _styledComponents.selectTokens.itemIconSize, _styledComponents.selectTokens.itemIconSizeTight, _styledComponents.selectTokens.fontFamily, _styledComponents.selectTokens.fontSize, _styledComponents.selectTokens.fontStyle, _styledComponents.selectTokens.fontWeight, _styledComponents.selectTokens.fontLetterSpacing, _styledComponents.selectTokens.fontLineHeight, _styledComponents.selectTokens.checkboxTriggerSize, _styledComponents.selectTokens.checkboxTriggerSizeTight, _styledComponents.selectTokens.checkboxTriggerBorderRadius, _styledComponents.selectTokens.checkboxTriggerBorderRadiusTight, _styledComponents.selectTokens.checkboxFillColor, _styledComponents.selectTokens.checkboxIconColor, _styledComponents.selectTokens.checkboxTriggerBorderColor, _styledComponents.selectTokens.indicatorSize, _styledComponents.selectTokens.chipGap, _styledComponents.selectTokens.chipBorderRadius, _styledComponents.selectTokens.chipHeight, _styledComponents.selectTokens.chipPaddingRight, _styledComponents.selectTokens.chipPaddingLeft, _styledComponents.selectTokens.chipClearContentMarginLeft, _styledComponents.selectTokens.chipClearContentMarginRight, _styledComponents.selectTokens.chipCloseIconSize, _styledComponents.selectTokens.targetButtonArrowMargin, _styledComponents.selectTokens.targetTextfieldArrowMargin, _styledComponents.selectTokens.targetHeight, _styledComponents.selectTokens.targetButtonPadding, _styledComponents.selectTokens.targetTextfieldPadding, _styledComponents.selectTokens.targetTextfieldChipPadding, _styledComponents.selectTokens.labelOffset, _styledComponents.selectTokens.innerLabelGap, _styledComponents.selectTokens.helperTextOffset, _styledComponents.selectTokens.spinnerSize, _styledComponents.selectTokens.spinnerSizeTight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.helperTextColor, _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetTextfieldArrowColor, _styledComponents.selectNewTokens.targetTextfieldArrowColorHover, _styledComponents.selectNewTokens.targetTextfieldArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive, _styledComponents.selectNewTokens.targetTextfieldBackgroundColor, _styledComponents.selectNewTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectNewTokens.targetTextfieldBorderColor),
-      positive: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.helperTextColor, _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetTextfieldArrowColor, _styledComponents.selectNewTokens.targetTextfieldArrowColorHover, _styledComponents.selectNewTokens.targetTextfieldArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive, _styledComponents.selectNewTokens.targetTextfieldBackgroundColor, _styledComponents.selectNewTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectNewTokens.targetTextfieldBorderColor),
-      warning: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.helperTextColor, _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetTextfieldArrowColor, _styledComponents.selectNewTokens.targetTextfieldArrowColorHover, _styledComponents.selectNewTokens.targetTextfieldArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive, _styledComponents.selectNewTokens.targetTextfieldBackgroundColor, _styledComponents.selectNewTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectNewTokens.targetTextfieldBorderColor),
-      negative: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.helperTextColor, _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetTextfieldArrowColor, _styledComponents.selectNewTokens.targetTextfieldArrowColorHover, _styledComponents.selectNewTokens.targetTextfieldArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive, _styledComponents.selectNewTokens.targetTextfieldBackgroundColor, _styledComponents.selectNewTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectNewTokens.targetTextfieldBorderColor),
-      accent: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive),
-      secondary: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive),
-      clear: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive),
-      dark: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive),
-      black: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive),
-      white: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.targetButtonColor, _styledComponents.selectNewTokens.targetButtonColorHover, _styledComponents.selectNewTokens.targetButtonColorActive, _styledComponents.selectNewTokens.targetButtonArrowColor, _styledComponents.selectNewTokens.targetButtonArrowColorHover, _styledComponents.selectNewTokens.targetButtonArrowColorActive, _styledComponents.selectNewTokens.targetButtonBackgroundColor, _styledComponents.selectNewTokens.targetButtonBackgroundColorHover, _styledComponents.selectNewTokens.targetButtonBackgroundColorActive)
+      "default": /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.helperTextColor, _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetTextfieldArrowColor, _styledComponents.selectTokens.targetTextfieldArrowColorHover, _styledComponents.selectTokens.targetTextfieldArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive, _styledComponents.selectTokens.targetTextfieldBackgroundColor, _styledComponents.selectTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectTokens.targetTextfieldBorderColor),
+      positive: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.helperTextColor, _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetTextfieldArrowColor, _styledComponents.selectTokens.targetTextfieldArrowColorHover, _styledComponents.selectTokens.targetTextfieldArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive, _styledComponents.selectTokens.targetTextfieldBackgroundColor, _styledComponents.selectTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectTokens.targetTextfieldBorderColor),
+      warning: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.helperTextColor, _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetTextfieldArrowColor, _styledComponents.selectTokens.targetTextfieldArrowColorHover, _styledComponents.selectTokens.targetTextfieldArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive, _styledComponents.selectTokens.targetTextfieldBackgroundColor, _styledComponents.selectTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectTokens.targetTextfieldBorderColor),
+      negative: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.helperTextColor, _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetTextfieldArrowColor, _styledComponents.selectTokens.targetTextfieldArrowColorHover, _styledComponents.selectTokens.targetTextfieldArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive, _styledComponents.selectTokens.targetTextfieldBackgroundColor, _styledComponents.selectTokens.targetTextfieldBackgroundColorOpened, _styledComponents.selectTokens.targetTextfieldBorderColor),
+      accent: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.targetButtonColor, _styledComponents.selectTokens.targetButtonColorHover, _styledComponents.selectTokens.targetButtonColorActive, _styledComponents.selectTokens.targetButtonArrowColor, _styledComponents.selectTokens.targetButtonArrowColorHover, _styledComponents.selectTokens.targetButtonArrowColorActive, _styledComponents.selectTokens.targetButtonBackgroundColor, _styledComponents.selectTokens.targetButtonBackgroundColorHover, _styledComponents.selectTokens.targetButtonBackgroundColorActive)
     },
     chipView: {
-      "default": /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.chipColor, _styledComponents.selectNewTokens.chipBackground, _styledComponents.selectNewTokens.chipBackgroundHover, _styledComponents.selectNewTokens.chipBackgroundActive),
-      secondary: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.chipColor, _styledComponents.selectNewTokens.chipBackground, _styledComponents.selectNewTokens.chipBackgroundHover, _styledComponents.selectNewTokens.chipBackgroundActive),
-      accent: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectNewTokens.chipColor, _styledComponents.selectNewTokens.chipBackground, _styledComponents.selectNewTokens.chipBackgroundHover, _styledComponents.selectNewTokens.chipBackgroundActive)
+      "default": /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.chipColor, _styledComponents.selectTokens.chipBackground, _styledComponents.selectTokens.chipBackgroundHover, _styledComponents.selectTokens.chipBackgroundActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.chipColor, _styledComponents.selectTokens.chipBackground, _styledComponents.selectTokens.chipBackgroundHover, _styledComponents.selectTokens.chipBackgroundActive),
+      accent: /*#__PURE__*/(0, _styledComponents.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            "])), _styledComponents.selectTokens.chipColor, _styledComponents.selectTokens.chipBackground, _styledComponents.selectTokens.chipBackgroundHover, _styledComponents.selectTokens.chipBackgroundActive)
     }
   }
 };

package/components/SelectNew/Select.d.ts

@@ -23,7 +23,7 @@ declare const Select: import("react").FunctionComponent<import("@salutejs/plasma
         secondary: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
         accent: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
     };
-}> & ((import("@salutejs/plasma-new-hope/types/components/SelectNew/Select.types").BasicProps & {
+}> & ((import("@salutejs/plasma-new-hope/types/components/Select/Select.types").BasicProps & {
     multiselect?: false | undefined;
     value?: string | undefined;
     onChange?: ((value: string) => void) | undefined;
@@ -36,7 +36,7 @@ declare const Select: import("react").FunctionComponent<import("@salutejs/plasma
     labelPlacement?: "outer" | "inner" | undefined;
     placeholder?: string | undefined;
     helperText?: string | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/SelectNew/Select.types").BasicProps & {
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/Select/Select.types").BasicProps & {
     multiselect?: false | undefined;
     value?: string | undefined;
     onChange?: ((value: string) => void) | undefined;
@@ -49,7 +49,7 @@ declare const Select: import("react").FunctionComponent<import("@salutejs/plasma
     labelPlacement?: undefined;
     placeholder?: undefined;
     helperText?: undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/SelectNew/Select.types").BasicProps & {
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/Select/Select.types").BasicProps & {
     multiselect: true;
     value?: string[] | undefined;
     onChange?: ((value: string[]) => void) | undefined;
@@ -62,7 +62,7 @@ declare const Select: import("react").FunctionComponent<import("@salutejs/plasma
     labelPlacement?: "outer" | "inner" | undefined;
     placeholder?: string | undefined;
     helperText?: string | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/SelectNew/Select.types").BasicProps & {
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/Select/Select.types").BasicProps & {
     multiselect: true;
     value?: string[] | undefined;
     onChange?: ((value: string[]) => void) | undefined;

package/components/SelectNew/Select.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.Select = void 0;
 var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
 var _Select = /*#__PURE__*/require("./Select.config");
-var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.selectNewConfig, _Select.config);
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.selectConfig, _Select.config);
 var Select = exports.Select = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);

package/css/cjs/components/SelectNew/Select.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.config.js","sources":["../../../../src-css/components/SelectNew/Select.config.ts"],"sourcesContent":["import { css, selectNewTokens as selectTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        chipView: 'default',\n        size: 'm',\n    },\n    variations: {\n        size: {\n            xs: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.5rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.5rem 0.5rem 0.375rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.5rem 0.25rem 0.375rem;\n                ${selectTokens.itemBorderRadius}: 0.375rem;\n                ${selectTokens.itemIconSize}: 1rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.25rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-xs-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 0.875rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.25rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.125rem;\n                ${selectTokens.chipHeight}: 1.25rem;\n                ${selectTokens.chipPaddingRight}: 0.375rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.25rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2rem;\n                ${selectTokens.targetButtonPadding}: 0.75rem 0 0.75rem;\n                ${selectTokens.targetTextfieldPadding}: 0.5rem 0 0.625rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.5rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.375rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            s: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.625rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.75rem 0.5rem 0.675rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.75rem 0.25rem 0.675rem;\n                ${selectTokens.itemBorderRadius}: 0.5rem;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-s-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-s-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-s-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.25rem;\n                ${selectTokens.chipHeight}: 1.75rem;\n                ${selectTokens.chipPaddingRight}: 0.5rem;\n                ${selectTokens.chipPaddingLeft}: 0.75rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.375rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2.5rem;\n                ${selectTokens.targetButtonPadding}: 1rem 0 1rem;\n                ${selectTokens.targetTextfieldPadding}: 0.75rem 0 0.875rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.75rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.5rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            m: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.75rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem;\n                ${selectTokens.itemPaddingTight}: 0.5rem 0.75rem 0.5rem 0.75rem;\n                ${selectTokens.itemBorderRadius}: 0.625rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-m-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.375rem;\n                ${selectTokens.chipHeight}: 2.25rem;\n                ${selectTokens.chipPaddingRight}: 0.875rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.5rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.375rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.625rem;\n                ${selectTokens.targetHeight}: 3rem;\n                ${selectTokens.targetButtonPadding}: 1.25rem 0 1.25rem;\n                ${selectTokens.targetTextfieldPadding}: 0.875rem 0 1rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.875rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.625rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n            l: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.875rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 1rem 1rem 1rem 0.875rem;\n                ${selectTokens.itemPaddingTight}: 0.75rem 1rem 0.75rem 0.875rem;\n                ${selectTokens.itemBorderRadius}: 0.75rem;\n                ${selectTokens.itemIconMargin}: 0 0.5rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-l-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-l-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-l-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.5rem;\n                ${selectTokens.chipHeight}: 2.75rem;\n                ${selectTokens.chipPaddingRight}: 0.75rem;\n                ${selectTokens.chipPaddingLeft}: 1rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.5rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.75rem;\n                ${selectTokens.targetHeight}: 3.5rem;\n                ${selectTokens.targetButtonPadding}: 1.5rem 0 1.5rem;\n                ${selectTokens.targetTextfieldPadding}: 1rem 0 1.125rem;\n                ${selectTokens.targetTextfieldChipPadding}: 1rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.75rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n        },\n        view: {\n            default: css`\n                ${selectTokens.helperTextColor}: var(--text-secondary);\n                ${selectTokens.targetButtonColor}: var(--inverse-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--inverse-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--inverse-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--inverse-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-solid-default-hover);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-transparent-tertiary);\n            `,\n            positive: css`\n                ${selectTokens.helperTextColor}: var(--text-positive);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-positive);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-positive-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-positive-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-positive);\n            `,\n            warning: css`\n                ${selectTokens.helperTextColor}: var(--text-warning);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-warning);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-warning-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-warning-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-warning);\n            `,\n            negative: css`\n                ${selectTokens.helperTextColor}: var(--text-negative);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-negative);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-negative-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-negative-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-negative);\n            `,\n            accent: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-accent);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-accent-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-accent-active);\n            `,\n            secondary: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-transparent-secondary);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n            `,\n            clear: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-clear);\n            `,\n            dark: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-transparent-deep);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active);\n            `,\n            black: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);\n            `,\n            white: css`\n                ${selectTokens.targetButtonColor}: var(--on-light-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-light-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-light-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-light-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-light-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-light-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-dark-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-dark-surface-solid-default-active);\n            `,\n        },\n        chipView: {\n            default: css`\n                ${selectTokens.chipColor}: var(--inverse-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-solid-default);\n                ${selectTokens.chipBackgroundHover}: var(--surface-solid-default-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-solid-default-active);\n            `,\n            secondary: css`\n                ${selectTokens.chipColor}: var(--text-primary);\n                ${selectTokens.chipBackground}: var(--surface-transparent-secondary);\n                ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);\n            `,\n            accent: css`\n                ${selectTokens.chipColor}: var(--on-dark-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-accent);\n                ${selectTokens.chipBackgroundHover}: var(--surface-accent-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-accent-active);\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","chipView","size","variations","xs","s","m","l","default","positive","warning","negative","accent","secondary","clear","dark","black","white"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,QAAQ,EAAE,SAAS;AACnBC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRD,IAAAA,IAAI,EAAE;AACFE,MAAAA,EAAE,EAsDD,UAAA;AACDC,MAAAA,CAAC,EAsDA,SAAA;AACDC,MAAAA,CAAC,EAsDA,SAAA;AACDC,MAAAA,CAAC,EAAA,SAAA;KAuDJ;AACDP,IAAAA,IAAI,EAAE;AACFQ,MAAAA,SAAAA,EAiBC,UAAA;AACDC,MAAAA,QAAQ,EAiBP,SAAA;AACDC,MAAAA,OAAO,EAiBN,UAAA;AACDC,MAAAA,QAAQ,EAiBP,UAAA;AACDC,MAAAA,MAAM,EAUL,UAAA;AACDC,MAAAA,SAAS,EAUR,SAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,IAAI,EAUH,SAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;KAWR;AACDhB,IAAAA,QAAQ,EAAE;AACNO,MAAAA,SAAAA,EAKC,SAAA;AACDK,MAAAA,SAAS,EAKR,UAAA;AACDD,MAAAA,MAAM,EAAA,SAAA;AAMV,KAAA;AACJ,GAAA;AACJ;;;;"}
+{"version":3,"file":"Select.config.js","sources":["../../../../src-css/components/SelectNew/Select.config.ts"],"sourcesContent":["import { css, selectTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        chipView: 'default',\n        size: 'm',\n    },\n    variations: {\n        size: {\n            xs: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.5rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.5rem 0.5rem 0.375rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.5rem 0.25rem 0.375rem;\n                ${selectTokens.itemBorderRadius}: 0.375rem;\n                ${selectTokens.itemIconSize}: 1rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.25rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-xs-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 0.875rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.25rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.125rem;\n                ${selectTokens.chipHeight}: 1.25rem;\n                ${selectTokens.chipPaddingRight}: 0.375rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.25rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2rem;\n                ${selectTokens.targetButtonPadding}: 0.75rem 0 0.75rem;\n                ${selectTokens.targetTextfieldPadding}: 0.5rem 0 0.625rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.5rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.375rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            s: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.625rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.75rem 0.5rem 0.675rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.75rem 0.25rem 0.675rem;\n                ${selectTokens.itemBorderRadius}: 0.5rem;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-s-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-s-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-s-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.25rem;\n                ${selectTokens.chipHeight}: 1.75rem;\n                ${selectTokens.chipPaddingRight}: 0.5rem;\n                ${selectTokens.chipPaddingLeft}: 0.75rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.375rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2.5rem;\n                ${selectTokens.targetButtonPadding}: 1rem 0 1rem;\n                ${selectTokens.targetTextfieldPadding}: 0.75rem 0 0.875rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.75rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.5rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            m: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.75rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem;\n                ${selectTokens.itemPaddingTight}: 0.5rem 0.75rem 0.5rem 0.75rem;\n                ${selectTokens.itemBorderRadius}: 0.625rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-m-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.375rem;\n                ${selectTokens.chipHeight}: 2.25rem;\n                ${selectTokens.chipPaddingRight}: 0.875rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.5rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.375rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.625rem;\n                ${selectTokens.targetHeight}: 3rem;\n                ${selectTokens.targetButtonPadding}: 1.25rem 0 1.25rem;\n                ${selectTokens.targetTextfieldPadding}: 0.875rem 0 1rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.875rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.625rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n            l: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.875rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 1rem 1rem 1rem 0.875rem;\n                ${selectTokens.itemPaddingTight}: 0.75rem 1rem 0.75rem 0.875rem;\n                ${selectTokens.itemBorderRadius}: 0.75rem;\n                ${selectTokens.itemIconMargin}: 0 0.5rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-l-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-l-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-l-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.5rem;\n                ${selectTokens.chipHeight}: 2.75rem;\n                ${selectTokens.chipPaddingRight}: 0.75rem;\n                ${selectTokens.chipPaddingLeft}: 1rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.5rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.75rem;\n                ${selectTokens.targetHeight}: 3.5rem;\n                ${selectTokens.targetButtonPadding}: 1.5rem 0 1.5rem;\n                ${selectTokens.targetTextfieldPadding}: 1rem 0 1.125rem;\n                ${selectTokens.targetTextfieldChipPadding}: 1rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.75rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n        },\n        view: {\n            default: css`\n                ${selectTokens.helperTextColor}: var(--text-secondary);\n                ${selectTokens.targetButtonColor}: var(--inverse-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--inverse-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--inverse-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--inverse-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-solid-default-hover);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-transparent-tertiary);\n            `,\n            positive: css`\n                ${selectTokens.helperTextColor}: var(--text-positive);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-positive);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-positive-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-positive-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-positive);\n            `,\n            warning: css`\n                ${selectTokens.helperTextColor}: var(--text-warning);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-warning);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-warning-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-warning-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-warning);\n            `,\n            negative: css`\n                ${selectTokens.helperTextColor}: var(--text-negative);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-negative);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-negative-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-negative-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-negative);\n            `,\n            accent: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-accent);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-accent-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-accent-active);\n            `,\n            secondary: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-transparent-secondary);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n            `,\n            clear: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-clear);\n            `,\n            dark: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-transparent-deep);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active);\n            `,\n            black: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);\n            `,\n            white: css`\n                ${selectTokens.targetButtonColor}: var(--on-light-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-light-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-light-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-light-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-light-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-light-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-dark-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-dark-surface-solid-default-active);\n            `,\n        },\n        chipView: {\n            default: css`\n                ${selectTokens.chipColor}: var(--inverse-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-solid-default);\n                ${selectTokens.chipBackgroundHover}: var(--surface-solid-default-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-solid-default-active);\n            `,\n            secondary: css`\n                ${selectTokens.chipColor}: var(--text-primary);\n                ${selectTokens.chipBackground}: var(--surface-transparent-secondary);\n                ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);\n            `,\n            accent: css`\n                ${selectTokens.chipColor}: var(--on-dark-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-accent);\n                ${selectTokens.chipBackgroundHover}: var(--surface-accent-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-accent-active);\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","chipView","size","variations","xs","s","m","l","default","positive","warning","negative","accent","secondary","clear","dark","black","white"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,QAAQ,EAAE,SAAS;AACnBC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRD,IAAAA,IAAI,EAAE;AACFE,MAAAA,EAAE,EAsDD,UAAA;AACDC,MAAAA,CAAC,EAsDA,SAAA;AACDC,MAAAA,CAAC,EAsDA,SAAA;AACDC,MAAAA,CAAC,EAAA,SAAA;KAuDJ;AACDP,IAAAA,IAAI,EAAE;AACFQ,MAAAA,SAAAA,EAiBC,UAAA;AACDC,MAAAA,QAAQ,EAiBP,SAAA;AACDC,MAAAA,OAAO,EAiBN,UAAA;AACDC,MAAAA,QAAQ,EAiBP,UAAA;AACDC,MAAAA,MAAM,EAUL,UAAA;AACDC,MAAAA,SAAS,EAUR,SAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,IAAI,EAUH,SAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,KAAK,EAAA,SAAA;KAWR;AACDhB,IAAAA,QAAQ,EAAE;AACNO,MAAAA,SAAAA,EAKC,SAAA;AACDK,MAAAA,SAAS,EAKR,UAAA;AACDD,MAAAA,MAAM,EAAA,SAAA;AAMV,KAAA;AACJ,GAAA;AACJ;;;;"}

package/css/cjs/components/SelectNew/Select.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var plasmaNewHope = require('@salutejs/plasma-new-hope');
 var Select_config = require('./Select.config.js');
 
-var mergedConfig = /*#__PURE__*/plasmaNewHope.mergeConfig(plasmaNewHope.selectNewConfig, Select_config.config);
+var mergedConfig = /*#__PURE__*/plasmaNewHope.mergeConfig(plasmaNewHope.selectConfig, Select_config.config);
 var Select = /*#__PURE__*/plasmaNewHope.component(mergedConfig);
 
 exports.Select = Select;

package/css/cjs/components/SelectNew/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src-css/components/SelectNew/Select.tsx"],"sourcesContent":["import { selectNewConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Select.config';\n\nconst mergedConfig = mergeConfig(selectNewConfig, config);\nconst Select = component(mergedConfig);\n\nexport { Select };\n"],"names":["mergedConfig","mergeConfig","selectNewConfig","config","Select","component"],"mappings":";;;;;;;AAIA,IAAMA,YAAY,gBAAGC,yBAAW,CAACC,6BAAe,EAAEC,oBAAM,CAAC,CAAA;AACzD,IAAMC,MAAM,gBAAGC,uBAAS,CAACL,YAAY;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../../src-css/components/SelectNew/Select.tsx"],"sourcesContent":["import { selectConfig, component, mergeConfig } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Select.config';\n\nconst mergedConfig = mergeConfig(selectConfig, config);\nconst Select = component(mergedConfig);\n\nexport { Select };\n"],"names":["mergedConfig","mergeConfig","selectConfig","config","Select","component"],"mappings":";;;;;;;AAIA,IAAMA,YAAY,gBAAGC,yBAAW,CAACC,0BAAY,EAAEC,oBAAM,CAAC,CAAA;AACtD,IAAMC,MAAM,gBAAGC,uBAAS,CAACL,YAAY;;;;"}

package/css/cjs/index.js

@@ -37,8 +37,7 @@ var Progress = require('./components/Progress/Progress.js');
 var Radiobox = require('./components/Radiobox/Radiobox.js');
 var Range = require('./components/Range/Range.js');
 var Segment = require('./components/Segment/Segment.js');
-var Select = require('./components/Select/Select.js');
-var Select$1 = require('./components/SelectNew/Select.js');
+var Select = require('./components/SelectNew/Select.js');
 var Sheet = require('./components/Sheet/Sheet.js');
 var Skeleton = require('./components/Skeleton/Skeleton.js');
 var Slider = require('./components/Slider/Slider.js');
@@ -208,10 +207,6 @@ exports.Drawer = Drawer.Drawer;
 exports.DrawerContent = Drawer.DrawerContent;
 exports.DrawerFooter = Drawer.DrawerFooter;
 exports.DrawerHeader = Drawer.DrawerHeader;
-Object.defineProperty(exports, 'SelectGroup', {
-	enumerable: true,
-	get: function () { return plasmaHope.SelectGroup; }
-});
 Object.defineProperty(exports, 'TextFieldView', {
 	enumerable: true,
 	get: function () { return plasmaHope.TextFieldView; }
@@ -240,8 +235,7 @@ exports.Radiobox = Radiobox.Radiobox;
 exports.Range = Range.Range;
 exports.SegmentGroup = Segment.SegmentGroup;
 exports.SegmentItem = Segment.SegmentItem;
-exports.Select = Select.Select;
-exports.SelectNew = Select$1.Select;
+exports.SelectNew = Select.Select;
 exports.Sheet = Sheet.Sheet;
 exports.LineSkeleton = Skeleton.LineSkeleton;
 exports.TextSkeleton = Skeleton.TextSkeleton;

package/css/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}