@alfalab/core-components 47.12.1 → 47.13.0

package/select/cssm/components/clear-button/index.module.css

@@ -0,0 +1,56 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-neutral-translucent-500-hover: rgba(5, 8, 29, 0.38);
+    --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root {
+} :root {
+} :root {
+
+    /* disabled */
+
+    /* read-only */
+
+    /* error */
+
+    /* display */
+    --input-error-icon-display: none;
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+} :root {
+
+    /* options list */
+
+    /* option */
+
+    /* checkmark */
+
+    /* optgroup */
+} .clearIcon {
+    display: block;
+    color: var(--color-light-neutral-translucent-500)
+} .clearIcon:hover {
+        color: var(--color-light-neutral-translucent-500-hover);
+    } .clearIcon:active {
+        color: var(--color-light-neutral-translucent-500-press);
+    } .clearButton + [data-addon='error-icon'] {
+    display: var(--input-error-icon-display);
+} .clearButton + * {
+    margin-left: var(--gap-2xs);
+}

package/select/cssm/components/field/Component.d.ts

@@ -9,5 +9,5 @@ type FieldProps = {
      */
     FormControlComponent?: ElementType;
 };
-declare const Field: ({ size, open, multiple, error, hint, disabled, label, labelView, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, FormControlComponent, ...restProps }: BaseFieldProps & FormControlProps & FieldProps) => React.JSX.Element;
+declare const Field: ({ size, open, multiple, error, hint, disabled, label, labelView, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, FormControlComponent, clear, onClear, ...restProps }: BaseFieldProps & FormControlProps & FieldProps) => React.JSX.Element;
 export { Field };

package/select/cssm/components/field/Component.js

@@ -6,6 +6,7 @@ var cn = require('classnames');
 var coreComponentsShared = require('../../../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var utils = require('../../utils.js');
+var components_clearButton_Component = require('../clear-button/Component.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -16,7 +17,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Field = function (_a) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 56 : _d, open = _a.open; _a.multiple; var error = _a.error, hint = _a.hint, disabled = _a.disabled, label = _a.label, _e = _a.labelView, labelView = _e === void 0 ? 'inner' : _e, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, selected = _a.selected, rightAddons = _a.rightAddons, _g = _a.valueRenderer, valueRenderer = _g === void 0 ? utils.joinOptions : _g; _a.setSelectedItems; _a.toggleMenu; var Arrow = _a.Arrow, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, FormControlComponent = _a.FormControlComponent, restProps = tslib.__rest(_a, ["size", "open", "multiple", "error", "hint", "disabled", "label", "labelView", "placeholder", "selectedMultiple", "selected", "rightAddons", "valueRenderer", "setSelectedItems", "toggleMenu", "Arrow", "innerProps", "dataTestId", "fieldClassName", "FormControlComponent"]);
+    var _d = _a.size, size = _d === void 0 ? 56 : _d, open = _a.open; _a.multiple; var error = _a.error, hint = _a.hint, disabled = _a.disabled, label = _a.label, _e = _a.labelView, labelView = _e === void 0 ? 'inner' : _e, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, selected = _a.selected, rightAddons = _a.rightAddons, _g = _a.valueRenderer, valueRenderer = _g === void 0 ? utils.joinOptions : _g; _a.setSelectedItems; _a.toggleMenu; var Arrow = _a.Arrow, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, FormControlComponent = _a.FormControlComponent, clear = _a.clear, onClear = _a.onClear, restProps = tslib.__rest(_a, ["size", "open", "multiple", "error", "hint", "disabled", "label", "labelView", "placeholder", "selectedMultiple", "selected", "rightAddons", "valueRenderer", "setSelectedItems", "toggleMenu", "Arrow", "innerProps", "dataTestId", "fieldClassName", "FormControlComponent", "clear", "onClear"]);
     var _h = React.useState(false), focused = _h[0], setFocused = _h[1];
     var wrapperRef = React.useRef(null);
     var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
@@ -31,6 +32,7 @@ var Field = function (_a) {
             _b[styles__default.default.focusVisible] = focusVisible,
             _b)), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: (Arrow || rightAddons) && (React__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
+            clear && filled ? (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })) : null,
             Arrow
                 ? React__default.default.cloneElement(Arrow, { className: styles__default.default.arrow })
                 : null)), "data-test-id": dataTestId }, restProps, innerProps),

package/select/cssm/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AriaAttributes, ComponentType, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
 import { BottomSheetProps } from "../../bottom-sheet";
 import { FormControlProps } from "../../form-control";
@@ -267,6 +268,14 @@ type BaseSelectProps = {
      * Обработчик скрола
      */
     onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Флаг, показать крестик для очистки поля
+     */
+    clear?: boolean;
     /**
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
@@ -718,4 +727,18 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
-export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };
+type ClearButtonProps = {
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };

package/select/cssm/utils.d.ts

@@ -63,6 +63,7 @@ declare function getSelectTestIds(dataTestId: string): {
     fieldRightAddons: string;
     fieldError: string;
     fieldHint: string;
+    fieldClearIcon: string;
     searchInput: string;
     searchFormControl: string;
     searchInner: string;

package/select/cssm/utils.js

@@ -164,6 +164,7 @@ function getSelectTestIds(dataTestId) {
         fieldRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-message'),
         fieldHint: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-hint'),
+        fieldClearIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-clear-icon'),
         searchInput: coreComponentsShared.getDataTestId(dataTestId, 'search'),
         searchFormControl: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control'),
         searchInner: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-inner'),

package/select/esm/Component.responsive.js

@@ -19,14 +19,17 @@ import '@alfalab/hooks';
 import './utils.js';
 import './components/native-select/Component.js';
 import './components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import './list-popover-desktop-62c7f1c5.js';
+import './list-popover-desktop-5d823442.js';
 import './components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import './components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import './components/base-select/components/list-mobile/list-mobile.js';
 import './components/base-select/components/list-mobile/list-bottom-sheet-mobile.js';
-import './mobile.module-9a7d38ac.js';
+import './mobile.module-83cac113.js';
 import './components/base-select/components/list-mobile/list-modal-mobile.js';
 import './components/field/Component.js';
+import './components/clear-button/Component.js';
+import '../../button/esm';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
 import './components/optgroup/Component.js';
 import './consts.js';
 import './components/option/Component.js';
@@ -49,7 +52,7 @@ import '../../base-modal/esm';
 import '../../button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-ac88c045.js';
+import './hook-92fc6541.js';
 import 'deep-equal';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/esm/desktop';

package/select/esm/components/arrow/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 
-var styles = {"arrow":"select__arrow_ltgpc","open":"select__open_ltgpc"};
+var styles = {"arrow":"select__arrow_lknvf","open":"select__open_lknvf"};
 require('./index.css');
 
 var Arrow = function (_a) {

package/select/esm/components/arrow/index.css

@@ -30,13 +30,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_ltgpc {
+} .select__arrow_lknvf {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_ltgpc {
+} .select__open_lknvf {
     transform: var(--arrow-transform);
 }

package/select/esm/components/base-checkmark/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '../../../../checkbox/esm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_r6wzb","start":"select__start_r6wzb","center":"select__center_r6wzb","single":"select__single_r6wzb","selected":"select__selected_r6wzb"};
+var styles = {"checkmark":"select__checkmark_1oliv","start":"select__start_1oliv","center":"select__center_1oliv","single":"select__single_1oliv","selected":"select__selected_1oliv"};
 require('./index.css');
 
 var BaseCheckmark = function (_a) {

package/select/esm/components/base-checkmark/index.css

@@ -27,18 +27,18 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_r6wzb {
+} .select__checkmark_1oliv {
     flex-shrink: 0;
     box-sizing: border-box
-} .select__checkmark_r6wzb.select__start_r6wzb {
+} .select__checkmark_1oliv.select__start_1oliv {
         align-self: start;
-    } .select__checkmark_r6wzb.select__center_r6wzb {
+    } .select__checkmark_1oliv.select__center_1oliv {
         align-self: center;
-    } .select__single_r6wzb {
+    } .select__single_1oliv {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_r6wzb.select__selected_r6wzb {
+} .select__single_1oliv.select__selected_1oliv {
         opacity: 1;
     }

package/select/esm/components/base-option/Component.js

@@ -5,7 +5,7 @@ import { BaseCheckmark } from '../base-checkmark/Component.js';
 import '../../../../checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"option":"select__option_4riqk","disabled":"select__disabled_4riqk","checkmarkBefore":"select__checkmarkBefore_4riqk","mobile":"select__mobile_4riqk","checkmarkAfter":"select__checkmarkAfter_4riqk","textContent":"select__textContent_4riqk","selected":"select__selected_4riqk","highlighted":"select__highlighted_4riqk","checkmarkBeforeContent":"select__checkmarkBeforeContent_4riqk","checkmarkAfterContent":"select__checkmarkAfterContent_4riqk","content":"select__content_4riqk"};
+var styles = {"option":"select__option_ghc0e","disabled":"select__disabled_ghc0e","checkmarkBefore":"select__checkmarkBefore_ghc0e","mobile":"select__mobile_ghc0e","checkmarkAfter":"select__checkmarkAfter_ghc0e","textContent":"select__textContent_ghc0e","selected":"select__selected_ghc0e","highlighted":"select__highlighted_ghc0e","checkmarkBeforeContent":"select__checkmarkBeforeContent_ghc0e","checkmarkAfterContent":"select__checkmarkAfterContent_ghc0e","content":"select__content_ghc0e"};
 require('./index.css');
 
 var BaseOption = function (_a) {

package/select/esm/components/base-option/index.css

@@ -47,7 +47,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_4riqk {
+} .select__option_ghc0e {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -61,36 +61,36 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_4riqk:not(.select__disabled_4riqk):active {
+} .select__option_ghc0e:not(.select__disabled_ghc0e):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_4riqk.select__checkmarkBefore_4riqk {
+    } .select__option_ghc0e.select__checkmarkBefore_ghc0e {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_4riqk.select__checkmarkBefore_4riqk.select__mobile_4riqk {
+    } .select__option_ghc0e.select__checkmarkBefore_ghc0e.select__mobile_ghc0e {
             padding-left: var(--gap-m);
-        } .select__option_4riqk.select__checkmarkAfter_4riqk.select__checkmarkAfter_4riqk {
+        } .select__option_ghc0e.select__checkmarkAfter_ghc0e.select__checkmarkAfter_ghc0e {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_4riqk.select__checkmarkAfter_4riqk.select__checkmarkAfter_4riqk.select__mobile_4riqk {
+    } .select__option_ghc0e.select__checkmarkAfter_ghc0e.select__checkmarkAfter_ghc0e.select__mobile_ghc0e {
             padding-right: var(--gap-l);
-        } .select__option_4riqk.select__textContent_4riqk {
+        } .select__option_ghc0e.select__textContent_ghc0e {
         padding: var(--gap-s)
-    } .select__option_4riqk.select__textContent_4riqk.select__mobile_4riqk {
+    } .select__option_ghc0e.select__textContent_ghc0e.select__mobile_ghc0e {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_4riqk {
+        } .select__selected_ghc0e {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_4riqk {
+} .select__highlighted_ghc0e {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_4riqk {
+} .select__disabled_ghc0e {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__checkmarkBeforeContent_4riqk {
+} .select__checkmarkBeforeContent_ghc0e {
     margin-right: var(--gap-s);
-} .select__checkmarkAfterContent_4riqk {
+} .select__checkmarkAfterContent_ghc0e {
     margin-left: var(--gap-s);
-} .select__content_4riqk {
+} .select__content_ghc0e {
     flex: 1;
 }

package/select/esm/components/base-select/Component.js

@@ -10,11 +10,11 @@ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 import { getListPopoverDesktopProps } from './components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import { s as styles, L as ListPopoverDesktop } from '../../list-popover-desktop-62c7f1c5.js';
+import { s as styles, L as ListPopoverDesktop } from '../../list-popover-desktop-5d823442.js';
 import { getListModalMobileProps } from './components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import { getListBottomSheetMobileProps } from './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import { ListMobile } from './components/list-mobile/list-mobile.js';
-import { m as mobileStyles } from '../../mobile.module-9a7d38ac.js';
+import { m as mobileStyles } from '../../mobile.module-83cac113.js';
 import './components/list-mobile/list-bottom-sheet-mobile.js';
 import './components/list-mobile/list-modal-mobile.js';
 
@@ -26,7 +26,7 @@ var BaseSelect = forwardRef(
 function (props, ref) {
     var _a;
     var _b, _c;
-    var dataTestId = props.dataTestId, className = props.className, fieldClassName = props.fieldClassName, optionGroupClassName = props.optionGroupClassName, optionsListClassName = props.optionsListClassName, optionClassName = props.optionClassName, options = props.options, _d = props.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = props.multiple, multiple = _e === void 0 ? false : _e, _f = props.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = props.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = props.nativeSelect, nativeSelect = _k === void 0 ? false : _k, _l = props.defaultOpen, defaultOpen = _l === void 0 ? false : _l, openProp = props.open, _m = props.optionsListWidth, optionsListWidth = _m === void 0 ? 'content' : _m, name = props.name, id = props.id, selected = props.selected, _o = props.size, size = _o === void 0 ? 48 : _o, _p = props.optionsSize, optionsSize = _p === void 0 ? size : _p, error = props.error, hint = props.hint, block = props.block, label = props.label, labelView = props.labelView, placeholder = props.placeholder, _q = props.fieldProps, fieldProps = _q === void 0 ? {} : _q, _r = props.optionsListProps, optionsListProps = _r === void 0 ? {} : _r, _s = props.optionProps, optionProps = _s === void 0 ? {} : _s, _t = props.groupOptionProps, groupOptionProps = _t === void 0 ? {} : _t, _u = props.searchProps, searchProps = _u === void 0 ? {} : _u, _v = props.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = props.valueRenderer, onChange = props.onChange, onOpen = props.onOpen, onFocus = props.onFocus, onBlur = props.onBlur, onScroll = props.onScroll, Arrow = props.Arrow, _w = props.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = props.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = props.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = props.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = props.Search, Search = _0 === void 0 ? function () { return null; } : _0, _1 = props.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = props.visibleOptions, view = props.view, _2 = props.isBottomSheet, isBottomSheet = _2 === void 0 ? true : _2, modalProps = props.modalProps, bottomSheetProps = props.bottomSheetProps, limitDynamicOptionGroupSize = props.limitDynamicOptionGroupSize;
+    var dataTestId = props.dataTestId, className = props.className, fieldClassName = props.fieldClassName, optionGroupClassName = props.optionGroupClassName, optionsListClassName = props.optionsListClassName, optionClassName = props.optionClassName, options = props.options, _d = props.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = props.multiple, multiple = _e === void 0 ? false : _e, _f = props.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = props.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = props.nativeSelect, nativeSelect = _k === void 0 ? false : _k, _l = props.defaultOpen, defaultOpen = _l === void 0 ? false : _l, openProp = props.open, _m = props.optionsListWidth, optionsListWidth = _m === void 0 ? 'content' : _m, name = props.name, id = props.id, selected = props.selected, _o = props.size, size = _o === void 0 ? 48 : _o, _p = props.optionsSize, optionsSize = _p === void 0 ? size : _p, error = props.error, hint = props.hint, block = props.block, label = props.label, labelView = props.labelView, placeholder = props.placeholder, _q = props.fieldProps, fieldProps = _q === void 0 ? {} : _q, _r = props.optionsListProps, optionsListProps = _r === void 0 ? {} : _r, _s = props.optionProps, optionProps = _s === void 0 ? {} : _s, _t = props.groupOptionProps, groupOptionProps = _t === void 0 ? {} : _t, _u = props.searchProps, searchProps = _u === void 0 ? {} : _u, _v = props.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = props.valueRenderer, onChange = props.onChange, onOpen = props.onOpen, onFocus = props.onFocus, onBlur = props.onBlur, onScroll = props.onScroll, onClear = props.onClear, clear = props.clear, Arrow = props.Arrow, _w = props.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = props.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = props.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = props.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = props.Search, Search = _0 === void 0 ? function () { return null; } : _0, _1 = props.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = props.visibleOptions, view = props.view, _2 = props.isBottomSheet, isBottomSheet = _2 === void 0 ? true : _2, modalProps = props.modalProps, bottomSheetProps = props.bottomSheetProps, limitDynamicOptionGroupSize = props.limitDynamicOptionGroupSize;
     var shouldSearchBlurRef = useRef(true);
     var rootRef = useRef(null);
     var fieldRef = useRef(null);
@@ -333,6 +333,10 @@ function (props, ref) {
             : (selectedItems[0] || {}).key;
         return (React.createElement(NativeSelect, __assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: filteredOptions })));
     };
+    var handleFieldClear = function (event) {
+        setSelectedItems([]);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    };
     var renderSearch = function () {
         var _a;
         var _b, _c;
@@ -391,7 +395,7 @@ function (props, ref) {
     };
     return (React.createElement("div", __assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, (_a = {}, _a[styles.block] = block, _a), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
-        React.createElement(Field, __assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
+        React.createElement(Field, __assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
                 onBlur: handleFieldBlur,
                 onFocus: disabled ? undefined : handleFieldFocus,
                 onClick: disabled ? undefined : handleFieldClick,

package/select/esm/components/base-select/components/list-desktop/list-popover-desktop.js

@@ -1,4 +1,4 @@
 import 'tslib';
 import 'react';
 import 'classnames';
-export { L as ListPopoverDesktop } from '../../../../list-popover-desktop-62c7f1c5.js';
+export { L as ListPopoverDesktop } from '../../../../list-popover-desktop-5d823442.js';

package/select/esm/components/base-select/components/list-mobile/list-bottom-sheet-mobile.js

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { getDataTestId } from '../../../../../../shared/esm';
-import { m as mobileStyles } from '../../../../mobile.module-9a7d38ac.js';
+import { m as mobileStyles } from '../../../../mobile.module-83cac113.js';
 
 var ListBottomSheetMobile = function (props) {
     var BottomSheet = props.BottomSheet, dataTestId = props.dataTestId, open = props.open, label = props.label, placeholder = props.placeholder, footer = props.footer, swipeable = props.swipeable, showSearch = props.showSearch, bottomSheetProps = props.bottomSheetProps, menuRef = props.menuRef, scrollableContainerRef = props.scrollableContainerRef, onScroll = props.onScroll, flatOptions = props.flatOptions, closeMenu = props.closeMenu, handleEntered = props.handleEntered, renderSearch = props.renderSearch, renderOptionsList = props.renderOptionsList;

package/select/esm/components/base-select/components/list-mobile/list-mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { ListBottomSheetMobile } from './list-bottom-sheet-mobile.js';
 import { ListModalMobile } from './list-modal-mobile.js';
 import '../../../../../../shared/esm';
-import '../../../../mobile.module-9a7d38ac.js';
+import '../../../../mobile.module-83cac113.js';
 import 'react-merge-refs';
 import 'classnames';
 

package/select/esm/components/base-select/components/list-mobile/list-modal-mobile.js

@@ -3,7 +3,7 @@ import React from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../../../shared/esm';
-import { m as mobileStyles } from '../../../../mobile.module-9a7d38ac.js';
+import { m as mobileStyles } from '../../../../mobile.module-83cac113.js';
 
 var ListModalMobile = function (props) {
     var ModalMobile = props.ModalMobile, dataTestId = props.dataTestId, open = props.open, modalProps = props.modalProps, modalHeaderProps = props.modalHeaderProps, modalFooterProps = props.modalFooterProps, menuRef = props.menuRef, scrollableContainerRef = props.scrollableContainerRef, label = props.label, placeholder = props.placeholder, onScroll = props.onScroll, flatOptions = props.flatOptions, closeMenu = props.closeMenu, handleEntered = props.handleEntered, renderSearch = props.renderSearch, renderOptionsList = props.renderOptionsList;

package/select/esm/components/base-select/index.css

@@ -41,21 +41,21 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_n2ejo {
+} .select__component_1oo5b {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_n2ejo {
+} .select__popoverInner_1oo5b {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     background: transparent;
     border-radius: 0;
     position: relative;
-} .select__popoverInner_n2ejo.select__popoverInner_n2ejo {
+} .select__popoverInner_1oo5b.select__popoverInner_1oo5b {
     box-shadow: none;
     border: none;
-} .select__optionsListWrapper_n2ejo {
+} .select__optionsListWrapper_1oo5b {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -64,7 +64,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_n2ejo {
+} .select__optionsListBorder_1oo5b {
     position: absolute;
     top: 0;
     right: 0;
@@ -73,7 +73,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-neutral-300);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_n2ejo {
+} .select__nativeSelect_1oo5b {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -86,12 +86,12 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_n2ejo {
+} .select__block_1oo5b {
     width: 100%;
-} .select__emptySearchPlaceholder_n2ejo {
+} .select__emptySearchPlaceholder_1oo5b {
     text-align: center;
-} .select__search_n2ejo {
+} .select__search_1oo5b {
     margin: var(--gap-s) var(--gap-s) 0
-} .select__search_n2ejo:last-child {
+} .select__search_1oo5b:last-child {
         margin-bottom: var(--gap-s);
     }

package/select/esm/components/base-select/index.js

@@ -11,10 +11,10 @@ import '@alfalab/hooks';
 import '../../utils.js';
 import '../native-select/Component.js';
 import './components/list-desktop/helpers/get-list-popover-desktop-props.js';
-import '../../list-popover-desktop-62c7f1c5.js';
+import '../../list-popover-desktop-5d823442.js';
 import './components/list-mobile/helpers/get-list-modal-mobile-props.js';
 import './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
 import './components/list-mobile/list-mobile.js';
 import './components/list-mobile/list-bottom-sheet-mobile.js';
-import '../../mobile.module-9a7d38ac.js';
+import '../../mobile.module-83cac113.js';
 import './components/list-mobile/list-modal-mobile.js';

package/select/esm/components/base-select/mobile.css

@@ -31,30 +31,30 @@
     /* checkmark */
 
     /* optgroup */
-} .select__sheet_1gft1 {
+} .select__sheet_14pzr {
     overflow: hidden;
-} .select__sheetContent_1gft1.select__sheetContent_1gft1 {
+} .select__sheetContent_14pzr.select__sheetContent_14pzr {
     padding: 0
-} .select__sheetContent_1gft1.select__sheetContent_1gft1 .select__modalContent_1gft1 {
+} .select__sheetContent_14pzr.select__sheetContent_14pzr .select__modalContent_14pzr {
         padding: 0;
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_1gft1 {
+    } .select__sheetContainer_14pzr {
     padding: 0;
-} .select__optionsListWrapper_1gft1 {
+} .select__optionsListWrapper_14pzr {
     flex: 1;
-} .select__optionsList_1gft1.select__optionsList_1gft1 {
+} .select__optionsList_14pzr.select__optionsList_14pzr {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_1gft1 {
+} .select__scrollbar_14pzr {
     flex: 1;
-} .select__search_1gft1 {
+} .select__search_14pzr {
     padding: var(--gap-xs);
-} .select__option_1gft1.select__option_1gft1 {
+} .select__option_14pzr.select__option_14pzr {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
-} .select__option_1gft1.select__option_1gft1:before {
+} .select__option_14pzr.select__option_14pzr:before {
         display: none;
-    } .select__optionGroup_1gft1.select__optionGroup_1gft1 {
+    } .select__optionGroup_14pzr.select__optionGroup_14pzr {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

package/select/esm/components/checkmark/Component.js

@@ -5,7 +5,7 @@ import { Checkbox } from '../../../../checkbox/esm';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_g7dk3","after":"select__after_g7dk3","single":"select__single_g7dk3","selected":"select__selected_g7dk3","before":"select__before_g7dk3","multiple":"select__multiple_g7dk3","colorIcon":"select__colorIcon_g7dk3"};
+var styles = {"checkmark":"select__checkmark_rx6tx","after":"select__after_rx6tx","single":"select__single_rx6tx","selected":"select__selected_rx6tx","before":"select__before_rx6tx","multiple":"select__multiple_rx6tx","colorIcon":"select__colorIcon_rx6tx"};
 require('./index.css');
 
 var Checkmark = function (_a) {

package/select/esm/components/checkmark/index.css

@@ -43,12 +43,12 @@
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */
-} .select__checkmark_g7dk3 {
+} .select__checkmark_rx6tx {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin)
-} .select__checkmark_g7dk3.select__after_g7dk3 {
+} .select__checkmark_rx6tx.select__after_rx6tx {
         margin: var(--select-checkmark-margin-after);
-    } .select__single_g7dk3 {
+    } .select__single_rx6tx {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -58,17 +58,17 @@
     border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size)
-} .select__single_g7dk3.select__selected_g7dk3 {
+} .select__single_rx6tx.select__selected_rx6tx {
         opacity: 1;
-    } .select__before_g7dk3 {
+    } .select__before_rx6tx {
     display: var(--select-checkmark-before-display)
-} .select__before_g7dk3.select__multiple_g7dk3 {
+} .select__before_rx6tx.select__multiple_rx6tx {
         margin-right: var(--gap-s);
         display: var(--select-checkmark-before-display-multiple);
-    } .select__after_g7dk3.select__after_g7dk3 {
+    } .select__after_rx6tx.select__after_rx6tx {
     display: var(--select-checkmark-after-display)
-} .select__after_g7dk3.select__after_g7dk3.select__single_g7dk3 {
+} .select__after_rx6tx.select__after_rx6tx.select__single_rx6tx {
         display: var(--select-checkmark-after-display-single);
-    } .select__colorIcon_g7dk3 {
+    } .select__colorIcon_rx6tx {
     color: var(--color-light-status-positive);
 }