@alfalab/core-components-select 17.4.1 → 17.4.3

package/components/option/index.css

@@ -1,4 +1,4 @@
-/* hash: t0w6h */
+/* hash: 113gg */
 :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-border-primary: #d5d6dc;
@@ -53,7 +53,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_1lrv5 {
+} .select__option_1s1ri {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -68,10 +68,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer
-} .select__option_1lrv5:not(.select__disabled_1lrv5):active {
+} .select__option_1s1ri:not(.select__disabled_1s1ri):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_1lrv5:before {
+    } .select__option_1s1ri:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -81,42 +81,42 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_1lrv5:first-child:before {
+    } .select__option_1s1ri:first-child:before {
         display: none;
-    } .select__size-48_1lrv5 {
+    } .select__size-48_1s1ri {
     min-height: var(--size-s-height);
-} .select__size-56_1lrv5 {
+} .select__size-56_1s1ri {
     min-height: var(--size-m-height);
-} .select__size-64_1lrv5 {
+} .select__size-64_1s1ri {
     min-height: var(--size-l-height);
-} .select__size-72_1lrv5 {
+} .select__size-72_1s1ri {
     min-height: var(--size-xl-height);
-} .select__size-64_1lrv5,
-.select__size-72_1lrv5 {
+} .select__size-64_1s1ri,
+.select__size-72_1s1ri {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding)
-} .select__size-64_1lrv5:before, .select__size-72_1lrv5:before {
+} .select__size-64_1s1ri:before, .select__size-72_1s1ri:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_1lrv5 {
+    } .select__selected_1s1ri {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_1lrv5 {
+} .select__highlighted_1s1ri {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color)
-} .select__highlighted_1lrv5:before,
-    .select__highlighted_1lrv5 + .select__option_1lrv5:before {
+} .select__highlighted_1s1ri:before,
+    .select__highlighted_1s1ri + .select__option_1s1ri:before {
         opacity: 0;
-    } .select__disabled_1lrv5 {
+    } .select__disabled_1s1ri {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_1lrv5 {
+} .select__content_1s1ri {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_1lrv5 {
+} .select__textContent_1s1ri {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 }

package/components/options-list/Component.js

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"optionsList":"select__optionsList_1odff","optionsListHeader":"select__optionsListHeader_1odff","headerHighlighted":"select__headerHighlighted_1odff","optionsListFooter":"select__optionsListFooter_1odff","withBorder":"select__withBorder_1odff","scrollable":"select__scrollable_1odff","emptyPlaceholder":"select__emptyPlaceholder_1odff","size-64":"select__size-64_1odff","size-72":"select__size-72_1odff"};
+var styles = {"optionsList":"select__optionsList_xlrxl","optionsListHeader":"select__optionsListHeader_xlrxl","headerHighlighted":"select__headerHighlighted_xlrxl","optionsListFooter":"select__optionsListFooter_xlrxl","withBorder":"select__withBorder_xlrxl","scrollable":"select__scrollable_xlrxl","emptyPlaceholder":"select__emptyPlaceholder_xlrxl","size-64":"select__size-64_xlrxl","size-72":"select__size-72_xlrxl"};
 require('./index.css')
 
 var createCounter = function () {

package/components/options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: xjttz */
+/* hash: aoctl */
 :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-300: #e7e8eb;
@@ -29,32 +29,32 @@
     /* checkmark */
 
     /* optgroup */
-} .select__optionsList_1odff {
+} .select__optionsList_xlrxl {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
-} .select__optionsListHeader_1odff {
+} .select__optionsListHeader_xlrxl {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease
-} .select__optionsListHeader_1odff.select__headerHighlighted_1odff {
+} .select__optionsListHeader_xlrxl.select__headerHighlighted_xlrxl {
         border-bottom-color: var(--color-light-neutral-300);
-    } .select__optionsListFooter_1odff {
+    } .select__optionsListFooter_xlrxl {
     position: sticky;
     bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease
-} .select__optionsListFooter_1odff.select__withBorder_1odff {
+} .select__optionsListFooter_xlrxl.select__withBorder_xlrxl {
         border-top-color: var(--color-light-neutral-300);
-    } .select__scrollable_1odff {
+    } .select__scrollable_xlrxl {
     overflow: auto;
     width: 100%;
-} .select__emptyPlaceholder_1odff {
+} .select__emptyPlaceholder_xlrxl {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__size-64_1odff .select__emptyPlaceholder_1odff,
-.select__size-72_1odff .select__emptyPlaceholder_1odff {
+} .select__size-64_xlrxl .select__emptyPlaceholder_xlrxl,
+.select__size-72_xlrxl .select__emptyPlaceholder_xlrxl {
     padding: var(--gap-xl) var(--gap-m);
 }

package/components/search/Component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select__component_17bsx"};
+var styles = {"component":"select__component_1biy3"};
 require('./index.css')
 
 var Search = React.forwardRef(function (_a, ref) {

package/components/search/index.css

@@ -1,4 +1,4 @@
-/* hash: 1k0kl */
+/* hash: x4c7d */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -23,6 +23,6 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_17bsx.select__component_17bsx {
+} .select__component_1biy3.select__component_1biy3 {
     width: auto;
 }

package/components/virtual-options-list/Component.js

@@ -20,7 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"virtualOptionsList":"select__virtualOptionsList_oupgh","virtualOptionsListHeader":"select__virtualOptionsListHeader_oupgh","virtualOptionsListFooter":"select__virtualOptionsListFooter_oupgh","withBorder":"select__withBorder_oupgh","scrollable":"select__scrollable_oupgh","inner":"select__inner_oupgh","virtualRow":"select__virtualRow_oupgh","highlighted":"select__highlighted_oupgh","emptyPlaceholder":"select__emptyPlaceholder_oupgh","size-64":"select__size-64_oupgh","size-72":"select__size-72_oupgh"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_v3ufw","virtualOptionsListHeader":"select__virtualOptionsListHeader_v3ufw","virtualOptionsListFooter":"select__virtualOptionsListFooter_v3ufw","withBorder":"select__withBorder_v3ufw","scrollable":"select__scrollable_v3ufw","inner":"select__inner_v3ufw","virtualRow":"select__virtualRow_v3ufw","highlighted":"select__highlighted_v3ufw","emptyPlaceholder":"select__emptyPlaceholder_v3ufw","size-64":"select__size-64_v3ufw","size-72":"select__size-72_v3ufw"};
 require('./index.css')
 
 var VirtualOptionsList = React.forwardRef(function (_a, ref) {

package/components/virtual-options-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tud2 */
+/* hash: 16y4o */
 :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-border-primary: #d5d6dc;
@@ -35,34 +35,34 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_oupgh {
+} .select__virtualOptionsList_v3ufw {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
-} .select__virtualOptionsListHeader_oupgh {
+} .select__virtualOptionsListHeader_v3ufw {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
-} .select__virtualOptionsListFooter_oupgh {
+} .select__virtualOptionsListFooter_v3ufw {
     position: sticky;
     bottom: 0;
     box-sizing: border-box;
     border-top: 1px solid transparent
-} .select__virtualOptionsListFooter_oupgh.select__withBorder_oupgh {
+} .select__virtualOptionsListFooter_v3ufw.select__withBorder_v3ufw {
         border-top: 1px solid var(--color-light-neutral-300);
-    } .select__scrollable_oupgh {
+    } .select__scrollable_v3ufw {
     position: relative;
     overflow: auto;
     width: 100%;
-} .select__inner_oupgh {
+} .select__inner_v3ufw {
     position: relative;
     width: 100%;
-} .select__virtualRow_oupgh {
+} .select__virtualRow_v3ufw {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
-} .select__virtualRow_oupgh:before {
+} .select__virtualRow_v3ufw:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -72,15 +72,15 @@
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
-    } .select__virtualRow_oupgh:first-child:before {
+    } .select__virtualRow_v3ufw:first-child:before {
         display: none;
-    } .select__highlighted_oupgh:before,
-    .select__highlighted_oupgh + .select__virtualRow_oupgh:before {
+    } .select__highlighted_v3ufw:before,
+    .select__highlighted_v3ufw + .select__virtualRow_v3ufw:before {
         display: none;
-    } .select__emptyPlaceholder_oupgh {
+    } .select__emptyPlaceholder_v3ufw {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__size-64_oupgh .select__emptyPlaceholder_oupgh,
-.select__size-72_oupgh .select__emptyPlaceholder_oupgh {
+} .select__size-64_v3ufw .select__emptyPlaceholder_v3ufw,
+.select__size-72_v3ufw .select__emptyPlaceholder_v3ufw {
     padding: var(--gap-xl) var(--gap-m);
 }

package/cssm/components/base-option/Component.js

@@ -21,8 +21,12 @@ var BaseOption = function (_a) {
     var _f = option.showCheckMark, showCheckMark = _f === void 0 ? true : _f;
     var isTextContent = !React.isValidElement(content);
     var renderCheckmark = function () {
+        var _a;
         if (Checkmark && showCheckMark) {
-            return React__default.default.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple });
+            return (React__default.default.createElement(Checkmark, { className: cn__default.default((_a = {},
+                    _a[styles__default.default.checkmarkBeforeContent] = checkmarkPosition === 'before',
+                    _a[styles__default.default.checkmarkAfterContent] = checkmarkPosition === 'after',
+                    _a)), disabled: disabled, selected: selected, multiple: multiple }));
         }
         return null;
     };

package/cssm/components/base-option/index.module.css

@@ -49,8 +49,6 @@
 
     display: flex;
     align-items: center;
-    grid-gap: var(--gap-s);
-    gap: var(--gap-s);
     transition: background-color 0.2s ease;
     background: var(--select-option-background);
     color: var(--select-option-color);
@@ -84,6 +82,10 @@
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
+} .checkmarkBeforeContent {
+    margin-right: var(--gap-s);
+} .checkmarkAfterContent {
+    margin-left: var(--gap-s);
 } .content {
     flex: 1;
 }

package/cssm/hook-d4f77aed.d.ts

@@ -57,7 +57,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -90,7 +90,7 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
         options: (OptionShape | import("./typings").GroupShape)[];
         selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
         onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
-        OptionsList: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         optionsListProps: unknown;
         showClear: boolean;
         showSelectAll: boolean;

package/cssm/typings.d.ts

@@ -1,4 +1,4 @@
-import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
+import { AriaAttributes, ComponentType, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
 import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
 import { FormControlProps } from "@alfalab/core-components-form-control";
 import { InputProps } from "@alfalab/core-components-input";
@@ -191,11 +191,11 @@ type BaseSelectProps = {
     /**
      * Компонент стрелки
      */
-    Arrow?: FC<ArrowProps> | null | false;
+    Arrow?: ComponentType<ArrowProps> | null | false;
     /**
      * Компонент поля
      */
-    Field?: FC<FieldProps>;
+    Field?: ComponentType<FieldProps>;
     /**
      * Пропсы, которые будут прокинуты в компонент поля
      */
@@ -211,15 +211,15 @@ type BaseSelectProps = {
     /**
      * Компонент выпадающего меню
      */
-    OptionsList?: FC<OptionsListProps & RefAttributes<HTMLDivElement>>;
+    OptionsList?: ComponentType<OptionsListProps & RefAttributes<HTMLDivElement>>;
     /**
      * Компонент группы
      */
-    Optgroup?: FC<OptgroupProps>;
+    Optgroup?: ComponentType<OptgroupProps>;
     /**
      * Компонент пункта меню
      */
-    Option?: FC<OptionProps>;
+    Option?: ComponentType<OptionProps>;
     /**
      * Включает отображение поиска
      */
@@ -227,7 +227,7 @@ type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps>;
+    Search?: ComponentType<SearchProps>;
     /**
      * Настройки поиска
      */
@@ -389,7 +389,7 @@ type OptionsListProps = {
     /**
      * Компонент пункта меню
      */
-    Option: FC<OptionProps>;
+    Option: ComponentType<OptionProps>;
     /**
      * Функция для получения пропсов для ячейки
      */

package/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_hwff6","open":"select__open_hwff6"};
+var styles = {"arrow":"select__arrow_19zwm","open":"select__open_19zwm"};
 require('./index.css')
 
 var Arrow = function (_a) {

package/esm/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: 1mz9x */
+/* hash: 1ewpo */
 :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-700: 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 */
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_hwff6 {
+} .select__arrow_19zwm {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_hwff6 {
+} .select__open_19zwm {
     transform: var(--arrow-transform);
 }

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/esm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-var styles = {"checkmark":"select__checkmark_ezvja","single":"select__single_ezvja","selected":"select__selected_ezvja"};
+var styles = {"checkmark":"select__checkmark_1hl5n","single":"select__single_1hl5n","selected":"select__selected_1hl5n"};
 require('./index.css')
 
 var BaseCheckmark = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 1la0m */
+/* hash: 1tckv */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -23,14 +23,14 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_ezvja {
+} .select__checkmark_1hl5n {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__single_ezvja {
+} .select__single_1hl5n {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_ezvja.select__selected_ezvja {
+} .select__single_1hl5n.select__selected_1hl5n {
         opacity: 1;
     }

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

@@ -3,7 +3,7 @@ import React, { isValidElement } from 'react';
 import cn from 'classnames';
 import { BaseCheckmark } from '../base-checkmark/Component.js';
 
-var styles = {"option":"select__option_19rg3","disabled":"select__disabled_19rg3","checkmarkBefore":"select__checkmarkBefore_19rg3","mobile":"select__mobile_19rg3","checkmarkAfter":"select__checkmarkAfter_19rg3","textContent":"select__textContent_19rg3","selected":"select__selected_19rg3","highlighted":"select__highlighted_19rg3","content":"select__content_19rg3"};
+var styles = {"option":"select__option_daus5","disabled":"select__disabled_daus5","checkmarkBefore":"select__checkmarkBefore_daus5","mobile":"select__mobile_daus5","checkmarkAfter":"select__checkmarkAfter_daus5","textContent":"select__textContent_daus5","selected":"select__selected_daus5","highlighted":"select__highlighted_daus5","checkmarkBeforeContent":"select__checkmarkBeforeContent_daus5","checkmarkAfterContent":"select__checkmarkAfterContent_daus5","content":"select__content_daus5"};
 require('./index.css')
 
 var BaseOption = function (_a) {
@@ -13,8 +13,12 @@ var BaseOption = function (_a) {
     var _f = option.showCheckMark, showCheckMark = _f === void 0 ? true : _f;
     var isTextContent = !isValidElement(content);
     var renderCheckmark = function () {
+        var _a;
         if (Checkmark && showCheckMark) {
-            return React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple });
+            return (React.createElement(Checkmark, { className: cn((_a = {},
+                    _a[styles.checkmarkBeforeContent] = checkmarkPosition === 'before',
+                    _a[styles.checkmarkAfterContent] = checkmarkPosition === 'after',
+                    _a)), disabled: disabled, selected: selected, multiple: multiple }));
         }
         return null;
     };

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

@@ -1,4 +1,4 @@
-/* hash: fpznv */
+/* hash: 1ruvb */
 :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-modal-bg-primary: #fff;
@@ -43,16 +43,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_19rg3 {
+} .select__option_daus5 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 
     display: flex;
     align-items: center;
-    grid-gap: var(--gap-s);
-    grid-gap: var(--gap-s);
-    gap: var(--gap-s);
     transition: background-color 0.2s ease;
     background: var(--select-option-background);
     color: var(--select-option-color);
@@ -60,32 +57,36 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_19rg3:not(.select__disabled_19rg3):active {
+} .select__option_daus5:not(.select__disabled_daus5):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_19rg3.select__checkmarkBefore_19rg3 {
+    } .select__option_daus5.select__checkmarkBefore_daus5 {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_19rg3.select__checkmarkBefore_19rg3.select__mobile_19rg3 {
+    } .select__option_daus5.select__checkmarkBefore_daus5.select__mobile_daus5 {
             padding-left: var(--gap-m);
-        } .select__option_19rg3.select__checkmarkAfter_19rg3.select__checkmarkAfter_19rg3 {
+        } .select__option_daus5.select__checkmarkAfter_daus5.select__checkmarkAfter_daus5 {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_19rg3.select__checkmarkAfter_19rg3.select__checkmarkAfter_19rg3.select__mobile_19rg3 {
+    } .select__option_daus5.select__checkmarkAfter_daus5.select__checkmarkAfter_daus5.select__mobile_daus5 {
             padding-right: var(--gap-l);
-        } .select__option_19rg3.select__textContent_19rg3 {
+        } .select__option_daus5.select__textContent_daus5 {
         padding: var(--gap-s)
-    } .select__option_19rg3.select__textContent_19rg3.select__mobile_19rg3 {
+    } .select__option_daus5.select__textContent_daus5.select__mobile_daus5 {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_19rg3 {
+        } .select__selected_daus5 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_19rg3 {
+} .select__highlighted_daus5 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_19rg3 {
+} .select__disabled_daus5 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_19rg3 {
+} .select__checkmarkBeforeContent_daus5 {
+    margin-right: var(--gap-s);
+} .select__checkmarkAfterContent_daus5 {
+    margin-left: var(--gap-s);
+} .select__content_daus5 {
     flex: 1;
 }

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

@@ -10,10 +10,10 @@ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 
-var styles = {"component":"select__component_66ti6","popoverInner":"select__popoverInner_66ti6","optionsListWrapper":"select__optionsListWrapper_66ti6","optionsListBorder":"select__optionsListBorder_66ti6","nativeSelect":"select__nativeSelect_66ti6","block":"select__block_66ti6","emptySearchPlaceholder":"select__emptySearchPlaceholder_66ti6","search":"select__search_66ti6"};
+var styles = {"component":"select__component_wyh0c","popoverInner":"select__popoverInner_wyh0c","optionsListWrapper":"select__optionsListWrapper_wyh0c","optionsListBorder":"select__optionsListBorder_wyh0c","nativeSelect":"select__nativeSelect_wyh0c","block":"select__block_wyh0c","emptySearchPlaceholder":"select__emptySearchPlaceholder_wyh0c","search":"select__search_wyh0c"};
 require('./index.css')
 
-var mobileStyles = {"sheet":"select__sheet_d8fga","sheetContent":"select__sheetContent_d8fga","modalContent":"select__modalContent_d8fga","sheetContainer":"select__sheetContainer_d8fga","optionsListWrapper":"select__optionsListWrapper_d8fga","optionsList":"select__optionsList_d8fga","scrollbar":"select__scrollbar_d8fga","search":"select__search_d8fga","option":"select__option_d8fga","optionGroup":"select__optionGroup_d8fga"};
+var mobileStyles = {"sheet":"select__sheet_1lind","sheetContent":"select__sheetContent_1lind","modalContent":"select__modalContent_1lind","sheetContainer":"select__sheetContainer_1lind","optionsListWrapper":"select__optionsListWrapper_1lind","optionsList":"select__optionsList_1lind","scrollbar":"select__scrollbar_1lind","search":"select__search_1lind","option":"select__option_1lind","optionGroup":"select__optionGroup_1lind"};
 require('./mobile.css')
 
 var itemToString = function (option) { return (option ? option.key : ''); };