@alfalab/core-components-select 18.0.1 → 18.1.0

package/components/checkmark-mobile/index.css

@@ -1,20 +1,20 @@
 :root {
     --select-mobile-checkmark-display-icon: block;
     --select-mobile-checkmark-display-badge: none;
-} .select__checkmark_1k9hd {
+} .select__checkmark_kdosv {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
-    opacity: 0
-} .select__checkmark_1k9hd:first-child {
+    opacity: 0;
+} .select__checkmark_kdosv:first-child {
         display: none;
-    } .select__checkmark_1k9hd.select__selected_1k9hd {
+    } .select__checkmark_kdosv.select__selected_kdosv {
         opacity: 1;
-    } .select__displayIcon_1k9hd {
+    } .select__displayIcon_kdosv {
     display: var(--select-mobile-checkmark-display-icon);
-} .select__displayBadge_1k9hd {
+} .select__displayBadge_kdosv {
     display: var(--select-mobile-checkmark-display-badge);
 }

package/components/checkmark-mobile/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"checkmark":"select__checkmark_1k9hd","selected":"select__selected_1k9hd","displayIcon":"select__displayIcon_1k9hd"};
+var styles = {"checkmark":"select__checkmark_kdosv","selected":"select__selected_kdosv","displayIcon":"select__displayIcon_kdosv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/checkmark-mobile/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/checkmark-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.checkmark {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    opacity: 0;\n\n    &:first-child {\n        display: none;\n    }\n\n    &.selected {\n        opacity: 1;\n    }\n}\n\n.displayIcon {\n    display: var(--select-mobile-checkmark-display-icon);\n}\n\n.displayBadge {\n    display: var(--select-mobile-checkmark-display-badge);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAAuE,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/checkmark-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.checkmark {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    opacity: 0;\n\n    &:first-child {\n        display: none;\n    }\n\n    &.selected {\n        opacity: 1;\n    }\n}\n\n.displayIcon {\n    display: var(--select-mobile-checkmark-display-icon);\n}\n\n.displayBadge {\n    display: var(--select-mobile-checkmark-display-badge);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAAuE,CAAC;;;;"}

package/components/clear-button/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { ClearButtonProps } from '../../typings';
+import { type ClearButtonProps } from '../../typings';
 export declare const ClearButton: ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => React.JSX.Element;

package/components/clear-button/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/clear-button/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';\nimport { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';\n\nimport { ClearButtonProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const ClearButton = ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => {\n    const IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon;\n\n    return (\n        <Button\n            type='button'\n            view='text'\n            disabled={disabled}\n            aria-label='Очистить'\n            className={cn(styles.clearButton)}\n            onClick={onClick}\n            tabIndex={-1}\n            dataTestId={dataTestId}\n        >\n            <IconComponent className={styles.clearIcon} />\n        </Button>\n    );\n};\n"],"names":["CrossCircleSIcon","CrossCircleMIcon","React","Button","cn","styles"],"mappings":";;;;;;;;;;;;;;;;AAWO,IAAM,WAAW,GAAG,UAAC,EAAyD,EAAA;QAAvD,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA;AAC7D,IAAA,IAAM,aAAa,GAAG,IAAI,KAAK,EAAE,GAAGA,iCAAgB,GAAGC,iCAAgB;AAEvE,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,2BAAM,EACH,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACP,kDAAU,EACrB,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EAAA;QAEtBH,sBAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,SAAS,EAAEG,YAAM,CAAC,SAAS,EAAA,CAAI,CACzC;AAEjB;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/components/clear-button/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';\nimport { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon';\n\nimport { type ClearButtonProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const ClearButton = ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => {\n    const IconComponent = size === 40 ? CrossCircleSIcon : CrossCircleMIcon;\n\n    return (\n        <Button\n            type='button'\n            view='text'\n            disabled={disabled}\n            aria-label='Очистить'\n            className={cn(styles.clearButton)}\n            onClick={onClick}\n            tabIndex={-1}\n            dataTestId={dataTestId}\n        >\n            <IconComponent className={styles.clearIcon} />\n        </Button>\n    );\n};\n"],"names":["CrossCircleSIcon","CrossCircleMIcon","React","Button","cn","styles"],"mappings":";;;;;;;;;;;;;;;;AAWO,IAAM,WAAW,GAAG,UAAC,EAAyD,EAAA;QAAvD,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA;AAC7D,IAAA,IAAM,aAAa,GAAG,IAAI,KAAK,EAAE,GAAGA,iCAAgB,GAAGC,iCAAgB;AAEvE,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,2BAAM,EACH,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACP,kDAAU,EACrB,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,WAAW,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,EAAE,EACZ,UAAU,EAAE,UAAU,EAAA;QAEtBH,sBAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,SAAS,EAAEG,YAAM,CAAC,SAAS,EAAA,CAAI,CACzC;AAEjB;;;;"}

package/components/clear-button/index.css

@@ -4,13 +4,13 @@
     --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47);
 } :root {
     --input-error-icon-display: none;
-} .select__clearIcon_kbz8b {
+} .select__clearIcon_k815o {
     display: block;
-    color: var(--color-light-neutral-translucent-500)
-} .select__clearIcon_kbz8b:hover {
+    color: var(--color-light-neutral-translucent-500);
+} .select__clearIcon_k815o:hover {
         color: var(--color-light-neutral-translucent-500-hover);
-    } .select__clearIcon_kbz8b:active {
+    } .select__clearIcon_k815o:active {
         color: var(--color-light-neutral-translucent-500-press);
-    } .select__clearButton_kbz8b + [data-addon='error-icon'] {
+    } .select__clearButton_k815o + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/components/clear-button/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"clearIcon":"select__clearIcon_kbz8b","clearButton":"select__clearButton_kbz8b"};
+var styles = {"clearIcon":"select__clearIcon_k815o","clearButton":"select__clearButton_k815o"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/field/Component.d.ts

@@ -1,6 +1,6 @@
-import React, { ElementType } from 'react';
-import type { FormControlProps } from '@alfalab/core-components-form-control';
-import { FieldProps as BaseFieldProps } from '../../typings';
+import React, { type ElementType } from 'react';
+import { type FormControlProps } from '@alfalab/core-components-form-control';
+import { type FieldProps as BaseFieldProps } from '../../typings';
 declare type FieldProps = {
     /**
      * Компонент FormControl

package/components/field/Component.js

@@ -28,15 +28,22 @@ var Field = function (_a) {
     var filled = Boolean(value);
     var showLabel = !!label || labelView === 'outer';
     var showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');
+    var shouldShowClearButton = clear && filled;
     return (React__default.default.createElement("div", { className: index_module.component, ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur }, FormControlComponent ? (React__default.default.createElement(FormControlComponent, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), fieldClassName: cn__default.default(index_module.field, fieldClassName, (_b = {},
             _b[index_module.disabled] = disabled,
             _b[index_module.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,
+            _b)), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: 
+        /**
+         * Right addon priority [4] <= [3] <= [2] <= [1]
+         * [4] - Clear
+         * [3] - Status (error, success)
+         * [2] - Common (info, e.g.)
+         * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
+         */
+        (Arrow || rightAddons) && (React__default.default.createElement(React.Fragment, null,
+            shouldShowClearButton && (React__default.default.createElement(Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })),
             rightAddons,
-            clear && filled ? (React__default.default.createElement(Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })) : null,
-            Arrow
-                ? React__default.default.cloneElement(Arrow, { className: index_module.arrow })
-                : null)), "data-test-id": dataTestId }, restProps, innerProps),
+            Arrow && React__default.default.cloneElement(Arrow, { className: index_module.arrow }))), "data-test-id": dataTestId }, restProps, innerProps),
         React__default.default.createElement("div", { className: cn__default.default(index_module.contentWrapper, index_module["size-".concat(size)]) },
             showPlaceholder && (React__default.default.createElement("span", { className: cn__default.default(index_module.placeholder, (_c = {},
                     _c[index_module.focused] = focused || open,

package/components/field/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/field/Component.tsx"],"sourcesContent":["import React, { ElementType, useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport type { FormControlProps } from '@alfalab/core-components-form-control';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { FieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\nimport { ClearButton } from '../clear-button';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\nexport const Field = ({\n    size = 56,\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    labelView = 'inner',\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    setSelectedItems,\n    toggleMenu,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    FormControlComponent,\n    clear,\n    onClear,\n    valueSeparator,\n    ...restProps\n}: BaseFieldProps & FormControlProps & FieldProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple, valueSeparator });\n\n    const filled = Boolean(value);\n    const showLabel = !!label || labelView === 'outer';\n    const showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n        >\n            {FormControlComponent ? (\n                <FormControlComponent\n                    dataTestId={getDataTestId(dataTestId, 'form-control')}\n                    fieldClassName={cn(styles.field, fieldClassName, {\n                        [styles.disabled]: disabled,\n                        [styles.focusVisible]: focusVisible,\n                    })}\n                    block={true}\n                    size={size}\n                    focused={focused || open}\n                    disabled={disabled}\n                    filled={filled || (!!placeholder && open)}\n                    label={showLabel && label}\n                    labelView={labelView}\n                    error={error}\n                    hint={hint}\n                    rightAddons={\n                        (Arrow || rightAddons) && (\n                            <React.Fragment>\n                                {rightAddons}\n                                {clear && filled ? (\n                                    <ClearButton\n                                        onClick={onClear}\n                                        disabled={disabled}\n                                        dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                                        size={size}\n                                    />\n                                ) : null}\n                                {/* TODO: стоит переделать, но это будет мажорка */}\n                                {Arrow\n                                    ? React.cloneElement(Arrow, { className: styles.arrow })\n                                    : null}\n                            </React.Fragment>\n                        )\n                    }\n                    data-test-id={dataTestId}\n                    {...restProps}\n                    {...innerProps}\n                >\n                    <div className={cn(styles.contentWrapper, styles[`size-${size}`])}>\n                        {showPlaceholder && (\n                            <span\n                                className={cn(styles.placeholder, {\n                                    [styles.focused]: focused || open,\n                                })}\n                            >\n                                {placeholder}\n                            </span>\n                        )}\n                        {filled && (\n                            <div className={cn(styles.value, styles[`size-${size}`])}>{value}</div>\n                        )}\n                    </div>\n                </FormControlComponent>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["joinOptions","__rest","useState","useRef","useFocus","useCallback","React","styles","__assign","getDataTestId","cn","ClearButton"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../src/components/field/Component.tsx"],"sourcesContent":["import React, { type ElementType, Fragment, useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { type FormControlProps } from '@alfalab/core-components-form-control';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type FieldProps as BaseFieldProps } from '../../typings';\nimport { joinOptions } from '../../utils';\nimport { ClearButton } from '../clear-button';\n\nimport styles from './index.module.css';\n\ntype FieldProps = {\n    /**\n     * Компонент FormControl\n     */\n    FormControlComponent?: ElementType;\n};\n\nexport const Field = ({\n    size = 56,\n    open,\n    multiple,\n    error,\n    hint,\n    disabled,\n    label,\n    labelView = 'inner',\n    placeholder,\n    selectedMultiple = [],\n    selected,\n    rightAddons,\n    valueRenderer = joinOptions,\n    setSelectedItems,\n    toggleMenu,\n    Arrow,\n    innerProps,\n    dataTestId,\n    fieldClassName,\n    FormControlComponent,\n    clear,\n    onClear,\n    valueSeparator,\n    ...restProps\n}: BaseFieldProps & FormControlProps & FieldProps) => {\n    const [focused, setFocused] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const [focusVisible] = useFocus(wrapperRef, 'keyboard');\n\n    const handleFocus = useCallback(() => setFocused(true), []);\n    const handleBlur = useCallback(() => setFocused(false), []);\n\n    const value = valueRenderer({ selected, selectedMultiple, valueSeparator });\n\n    const filled = Boolean(value);\n    const showLabel = !!label || labelView === 'outer';\n    const showPlaceholder = !!placeholder && !filled && (open || !label || labelView === 'outer');\n\n    const shouldShowClearButton = clear && filled;\n\n    return (\n        <div\n            className={styles.component}\n            ref={wrapperRef}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n        >\n            {FormControlComponent ? (\n                <FormControlComponent\n                    dataTestId={getDataTestId(dataTestId, 'form-control')}\n                    fieldClassName={cn(styles.field, fieldClassName, {\n                        [styles.disabled]: disabled,\n                        [styles.focusVisible]: focusVisible,\n                    })}\n                    block={true}\n                    size={size}\n                    focused={focused || open}\n                    disabled={disabled}\n                    filled={filled || (!!placeholder && open)}\n                    label={showLabel && label}\n                    labelView={labelView}\n                    error={error}\n                    hint={hint}\n                    rightAddons={\n                        /**\n                         * Right addon priority [4] <= [3] <= [2] <= [1]\n                         * [4] - Clear\n                         * [3] - Status (error, success)\n                         * [2] - Common (info, e.g.)\n                         * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n                         */\n                        (Arrow || rightAddons) && (\n                            <Fragment>\n                                {shouldShowClearButton && (\n                                    <ClearButton\n                                        onClick={onClear}\n                                        disabled={disabled}\n                                        dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                                        size={size}\n                                    />\n                                )}\n                                {rightAddons}\n                                {/* TODO: стоит переделать, но это будет мажорка */}\n                                {Arrow && React.cloneElement(Arrow, { className: styles.arrow })}\n                            </Fragment>\n                        )\n                    }\n                    data-test-id={dataTestId}\n                    {...restProps}\n                    {...innerProps}\n                >\n                    <div className={cn(styles.contentWrapper, styles[`size-${size}`])}>\n                        {showPlaceholder && (\n                            <span\n                                className={cn(styles.placeholder, {\n                                    [styles.focused]: focused || open,\n                                })}\n                            >\n                                {placeholder}\n                            </span>\n                        )}\n                        {filled && (\n                            <div className={cn(styles.value, styles[`size-${size}`])}>{value}</div>\n                        )}\n                    </div>\n                </FormControlComponent>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["joinOptions","__rest","useState","useRef","useFocus","useCallback","React","styles","__assign","getDataTestId","cn","Fragment","ClearButton"],"mappings":"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"}

package/components/field/index.css

@@ -10,22 +10,22 @@
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
 } :root {
     --select-arrow-hover-opacity: 0.7;
-} .select__component_1pgmu {
+} .select__component_15ovn {
     width: 100%;
     outline: none;
-} .select__field_1pgmu:not(.select__disabled_1pgmu) {
-    cursor: pointer
-} .select__field_1pgmu:not(.select__disabled_1pgmu):hover .select__arrow_1pgmu {
+} .select__field_15ovn:not(.select__disabled_15ovn) {
+    cursor: pointer;
+} .select__field_15ovn:not(.select__disabled_15ovn):hover .select__arrow_15ovn {
             opacity: var(--select-arrow-hover-opacity);
-        } .select__disabled_1pgmu {
+        } .select__disabled_15ovn {
     cursor: var(--disabled-cursor);
-} .select__placeholder_1pgmu {
+} .select__placeholder_15ovn {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_1pgmu 0.2s ease
-} .select__placeholder_1pgmu.select__focused_1pgmu {
+    animation: select__show-placeholder_15ovn 0.2s ease;
+} .select__placeholder_15ovn.select__focused_15ovn {
         color: var(--input-focus-placeholder-color);
-    } .select__contentWrapper_1pgmu {
+    } .select__contentWrapper_15ovn {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -33,23 +33,23 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100%
-} .select__contentWrapper_1pgmu.select__size-40_1pgmu {
+    width: 100%;
+} .select__contentWrapper_15ovn.select__size-40_15ovn {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__value_1pgmu {
+    } .select__value_15ovn {
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left
-} .select__value_1pgmu.select__size-40_1pgmu {
+    text-align: left;
+} .select__value_15ovn.select__size-40_15ovn {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__focusVisible_1pgmu {
+    } .select__focusVisible_15ovn {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} @keyframes select__show-placeholder_1pgmu {
+} @keyframes select__show-placeholder_15ovn {
     from {
         opacity: 0;
     }

package/components/field/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"select__component_1pgmu","field":"select__field_1pgmu","disabled":"select__disabled_1pgmu","arrow":"select__arrow_1pgmu","placeholder":"select__placeholder_1pgmu","show-placeholder":"select__show-placeholder_1pgmu","focused":"select__focused_1pgmu","contentWrapper":"select__contentWrapper_1pgmu","size-40":"select__size-40_1pgmu","value":"select__value_1pgmu","focusVisible":"select__focusVisible_1pgmu"};
+var styles = {"component":"select__component_15ovn","field":"select__field_15ovn","disabled":"select__disabled_15ovn","arrow":"select__arrow_15ovn","placeholder":"select__placeholder_15ovn","show-placeholder":"select__show-placeholder_15ovn","focused":"select__focused_15ovn","contentWrapper":"select__contentWrapper_15ovn","size-40":"select__size-40_15ovn","value":"select__value_15ovn","focusVisible":"select__focusVisible_15ovn"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/field/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../input/src/vars.css';\n@import '../../vars.css';\n\n.component {\n    width: 100%;\n    outline: none;\n}\n\n.field:not(.disabled) {\n    cursor: pointer;\n\n    &:hover {\n        & .arrow {\n            opacity: var(--select-arrow-hover-opacity);\n        }\n    }\n}\n\n.disabled {\n    cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n    color: var(--input-placeholder-color);\n    transition: color 0.2s ease;\n    animation: show-placeholder 0.2s ease;\n\n    &.focused {\n        color: var(--input-focus-placeholder-color);\n    }\n}\n\n.contentWrapper {\n    @mixin paragraph_component;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n\n    &.size-40 {\n        @mixin paragraph_component_secondary;\n    }\n}\n\n.value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: left;\n\n    &.size-40 {\n        @mixin paragraph_component_secondary;\n    }\n}\n\n.focusVisible {\n    @mixin focus-outline;\n}\n\n@keyframes show-placeholder {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,UAAU,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAAqB,CAAC,aAAa,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,SAAS,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../../../input/src/vars.css';\n@import '../../vars.css';\n\n.component {\n    width: 100%;\n    outline: none;\n}\n\n.field:not(.disabled) {\n    cursor: pointer;\n\n    &:hover {\n        & .arrow {\n            opacity: var(--select-arrow-hover-opacity);\n        }\n    }\n}\n\n.disabled {\n    cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n    color: var(--input-placeholder-color);\n    transition: color 0.2s ease;\n    animation: show-placeholder 0.2s ease;\n\n    &.focused {\n        color: var(--input-focus-placeholder-color);\n    }\n}\n\n.contentWrapper {\n    @mixin paragraph_component;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    width: 100%;\n\n    &.size-40 {\n        @mixin paragraph_component_secondary;\n    }\n}\n\n.value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: left;\n\n    &.size-40 {\n        @mixin paragraph_component_secondary;\n    }\n}\n\n.focusVisible {\n    @mixin focus-outline;\n}\n\n@keyframes show-placeholder {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,UAAU,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAAqB,CAAC,aAAa,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,SAAS,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC;;;;"}

package/components/footer/index.css

@@ -4,17 +4,17 @@
 } :root {
     --gap-m: 16px;
     --gap-16: var(--gap-m);
-} .select__footer_xf8ni {
+} .select__footer_1xb18 {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-16) var(--gap-16);
-    background-color: var(--color-light-modal-bg-primary)
-} .select__footer_xf8ni .select__button_xf8ni:first-of-type {
+    background-color: var(--color-light-modal-bg-primary);
+} .select__footer_1xb18 .select__button_1xb18:first-of-type {
         margin-right: var(--gap-16);
-    } .select__button_xf8ni {
+    } .select__button_1xb18 {
     width: 50%;
-} .select__highlighted_xf8ni {
+} .select__highlighted_1xb18 {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

package/components/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_xf8ni","button":"select__button_xf8ni","highlighted":"select__highlighted_xf8ni"};
+var styles = {"footer":"select__footer_1xb18","button":"select__button_1xb18","highlighted":"select__highlighted_1xb18"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.footer {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: var(--gap-16) var(--gap-16);\n    background-color: var(--color-light-modal-bg-primary);\n\n    & .button:first-of-type {\n        margin-right: var(--gap-16);\n    }\n}\n\n.button {\n    width: 50%;\n}\n\n.highlighted {\n    border-top: 1px solid var(--color-light-neutral-300);\n    background-color: var(--color-light-modal-bg-primary);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.footer {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    padding: var(--gap-16) var(--gap-16);\n    background-color: var(--color-light-modal-bg-primary);\n\n    & .button:first-of-type {\n        margin-right: var(--gap-16);\n    }\n}\n\n.button {\n    width: 50%;\n}\n\n.highlighted {\n    border-top: 1px solid var(--color-light-neutral-300);\n    background-color: var(--color-light-modal-bg-primary);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}

package/components/native-select/Component.d.ts

@@ -1,5 +1,5 @@
-import React, { SelectHTMLAttributes } from 'react';
-import { GroupShape, OptionShape } from '../../typings';
+import React, { type SelectHTMLAttributes } from 'react';
+import { type GroupShape, type OptionShape } from '../../typings';
 export declare type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /**
      * Список вариантов выбора

package/components/native-select/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/native-select/Component.tsx"],"sourcesContent":["import React, { forwardRef, SelectHTMLAttributes, useCallback } from 'react';\n\nimport { GroupShape, OptionShape } from '../../typings';\nimport { isGroup } from '../../utils';\n\nexport type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n    /**\n     * Список вариантов выбора\n     */\n    options: Array<OptionShape | GroupShape>;\n\n    /**\n     * Значение селекта\n     */\n    value: string | string[];\n};\n\nconst Option = ({ option }: { option: OptionShape }) => (\n    <option value={option.key} disabled={option.disabled}>\n        {typeof option.content === 'string' ? option.content : option.key}\n    </option>\n);\n\nconst Group = ({ label, options }: GroupShape) => (\n    <optgroup label={label}>\n        {options.map((option) => (\n            <Option option={option} key={option.key} />\n        ))}\n    </optgroup>\n);\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    ({ className, disabled, multiple, value, name, options, onChange, ...restProps }, ref) => {\n        const handleClick = useCallback((event: React.MouseEvent<HTMLSelectElement>) => {\n            event.stopPropagation();\n        }, []);\n\n        return (\n            <select\n                className={className}\n                disabled={disabled}\n                multiple={multiple}\n                name={name}\n                value={value}\n                onChange={onChange}\n                onClick={handleClick}\n                ref={ref}\n                {...restProps}\n            >\n                {options.map((option) =>\n                    isGroup(option) ? (\n                        <Group {...option} key={option.label} />\n                    ) : (\n                        <Option option={option} key={option.key} />\n                    ),\n                )}\n            </select>\n        );\n    },\n);\n"],"names":["React","forwardRef","__rest","useCallback","__assign","isGroup"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,MAAM,GAAG,UAAC,EAAmC,EAAA;AAAjC,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;AAAgC,IAAA,QACpDA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC/C,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,CAC5D;AAH2C,CAIvD;AAED,IAAM,KAAK,GAAG,UAAC,EAA8B,EAAA;QAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;AAAmB,IAAA,QAC9CA,sBAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAE,KAAK,EACjB,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA,EAAK,QACrBA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,EAC9C,EAAA,CAAC,CACK;AALmC,CAMjD;IAEY,YAAY,GAAGC,gBAAU,CAClC,UAAC,EAA+E,EAAE,GAAG,EAAA;IAAlF,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,GAA7EC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAA+E,CAAF;AAC1E,IAAA,IAAM,WAAW,GAAGC,iBAAW,CAAC,UAAC,KAA0C,EAAA;QACvE,KAAK,CAAC,eAAe,EAAE;KAC1B,EAAE,EAAE,CAAC;AAEN,IAAA,QACIH,sBACI,CAAA,aAAA,CAAA,QAAA,EAAAI,cAAA,CAAA,EAAA,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EAAA,EACJ,SAAS,CAEZ,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA;AAChB,QAAA,OAAAC,aAAO,CAAC,MAAM,CAAC,IACXL,sBAAC,CAAA,aAAA,CAAA,KAAK,qBAAK,MAAM,EAAA,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,EAAI,CAAA,CAAA,KAExCA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAC9C;KAAA,CACJ,CACI;AAEjB,CAAC;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/components/native-select/Component.tsx"],"sourcesContent":["import React, { forwardRef, type SelectHTMLAttributes, useCallback } from 'react';\n\nimport { type GroupShape, type OptionShape } from '../../typings';\nimport { isGroup } from '../../utils';\n\nexport type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n    /**\n     * Список вариантов выбора\n     */\n    options: Array<OptionShape | GroupShape>;\n\n    /**\n     * Значение селекта\n     */\n    value: string | string[];\n};\n\nconst Option = ({ option }: { option: OptionShape }) => (\n    <option value={option.key} disabled={option.disabled}>\n        {typeof option.content === 'string' ? option.content : option.key}\n    </option>\n);\n\nconst Group = ({ label, options }: GroupShape) => (\n    <optgroup label={label}>\n        {options.map((option) => (\n            <Option option={option} key={option.key} />\n        ))}\n    </optgroup>\n);\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    ({ className, disabled, multiple, value, name, options, onChange, ...restProps }, ref) => {\n        const handleClick = useCallback((event: React.MouseEvent<HTMLSelectElement>) => {\n            event.stopPropagation();\n        }, []);\n\n        return (\n            <select\n                className={className}\n                disabled={disabled}\n                multiple={multiple}\n                name={name}\n                value={value}\n                onChange={onChange}\n                onClick={handleClick}\n                ref={ref}\n                {...restProps}\n            >\n                {options.map((option) =>\n                    isGroup(option) ? (\n                        <Group {...option} key={option.label} />\n                    ) : (\n                        <Option option={option} key={option.key} />\n                    ),\n                )}\n            </select>\n        );\n    },\n);\n"],"names":["React","forwardRef","__rest","useCallback","__assign","isGroup"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,MAAM,GAAG,UAAC,EAAmC,EAAA;AAAjC,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;AAAgC,IAAA,QACpDA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC/C,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,CAC5D;AAH2C,CAIvD;AAED,IAAM,KAAK,GAAG,UAAC,EAA8B,EAAA;QAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;AAAmB,IAAA,QAC9CA,sBAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAE,KAAK,EACjB,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA,EAAK,QACrBA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,EAC9C,EAAA,CAAC,CACK;AALmC,CAMjD;IAEY,YAAY,GAAGC,gBAAU,CAClC,UAAC,EAA+E,EAAE,GAAG,EAAA;IAAlF,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,GAA7EC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAA+E,CAAF;AAC1E,IAAA,IAAM,WAAW,GAAGC,iBAAW,CAAC,UAAC,KAA0C,EAAA;QACvE,KAAK,CAAC,eAAe,EAAE;KAC1B,EAAE,EAAE,CAAC;AAEN,IAAA,QACIH,sBACI,CAAA,aAAA,CAAA,QAAA,EAAAI,cAAA,CAAA,EAAA,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EAAA,EACJ,SAAS,CAEZ,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA;AAChB,QAAA,OAAAC,aAAO,CAAC,MAAM,CAAC,IACXL,sBAAC,CAAA,aAAA,CAAA,KAAK,qBAAK,MAAM,EAAA,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,EAAI,CAAA,CAAA,KAExCA,sBAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAC9C;KAAA,CACJ,CACI;AAEjB,CAAC;;;;"}

package/components/optgroup/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { OptgroupProps } from '../../typings';
+import { type OptgroupProps } from '../../typings';
 export declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;

package/components/optgroup/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/optgroup/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { OptgroupProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Optgroup = ({ children, className, label, size = 48 }: OptgroupProps) => (\n    <React.Fragment>\n        <div className={cn(styles.optgroup, className, styles[SIZE_TO_CLASSNAME_MAP[size]])}>\n            <span className={styles.label}>{label}</span>\n        </div>\n        {children}\n    </React.Fragment>\n);\n"],"names":["React","cn","styles","SIZE_TO_CLASSNAME_MAP"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,QAAQ,GAAG,UAAC,EAAwD,EAAA;AAAtD,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,EAAS,GAAA,EAAA,CAAA,IAAA,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA;AAAsB,IAAA,QAClFA,sBAAA,CAAA,aAAA,CAACA,sBAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,QAAQ,EAAE,SAAS,EAAEA,YAAM,CAACC,4BAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA;YAC/EH,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEE,YAAM,CAAC,KAAK,EAAG,EAAA,KAAK,CAAQ,CAC3C;AACL,QAAA,QAAQ,CACI;AANiE;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/components/optgroup/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type OptgroupProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Optgroup = ({ children, className, label, size = 48 }: OptgroupProps) => (\n    <React.Fragment>\n        <div className={cn(styles.optgroup, className, styles[SIZE_TO_CLASSNAME_MAP[size]])}>\n            <span className={styles.label}>{label}</span>\n        </div>\n        {children}\n    </React.Fragment>\n);\n"],"names":["React","cn","styles","SIZE_TO_CLASSNAME_MAP"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,QAAQ,GAAG,UAAC,EAAwD,EAAA;AAAtD,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,EAAS,GAAA,EAAA,CAAA,IAAA,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA;AAAsB,IAAA,QAClFA,sBAAA,CAAA,aAAA,CAACA,sBAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,QAAQ,EAAE,SAAS,EAAEA,YAAM,CAACC,4BAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA;YAC/EH,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEE,YAAM,CAAC,KAAK,EAAG,EAAA,KAAK,CAAQ,CAC3C;AACL,QAAA,QAAQ,CACI;AANiE;;;;"}

package/components/optgroup/index.css

@@ -16,7 +16,7 @@
     --select-optgroup-right-padding: var(--gap-12);
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
-} .select__optgroup_11kr6 {
+} .select__optgroup_1oyld {
     position: relative;
     display: flex;
     align-items: center;
@@ -24,10 +24,10 @@
         var(--select-optgroup-left-padding);
     box-sizing: border-box;
     background: var(--select-optgroup-background);
-    min-height: 40px
-} .select__optgroup_11kr6 + *[role='option']:before {
+    min-height: 40px;
+} .select__optgroup_1oyld + *[role='option']:before {
         display: none;
-    } .select__label_11kr6 {
+    } .select__label_1oyld {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -36,7 +36,7 @@
 
     display: block;
     color: var(--select-optgroup-color);
-} .select__size-72_11kr6 {
+} .select__size-72_1oyld {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/components/optgroup/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"optgroup":"select__optgroup_11kr6","label":"select__label_11kr6","size-72":"select__size-72_11kr6"};
+var styles = {"optgroup":"select__optgroup_1oyld","label":"select__label_1oyld","size-72":"select__size-72_1oyld"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/optgroup/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/optgroup/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.optgroup {\n    position: relative;\n    display: flex;\n    align-items: center;\n    padding: var(--gap-12) var(--select-optgroup-right-padding) var(--gap-4)\n        var(--select-optgroup-left-padding);\n    box-sizing: border-box;\n    background: var(--select-optgroup-background);\n    min-height: 40px;\n\n    & + *[role='option']:before {\n        display: none;\n    }\n}\n\n.label {\n    @mixin paragraph_caps;\n\n    display: block;\n    color: var(--select-optgroup-color);\n}\n\n.size-72 {\n    padding-left: var(--select-optgroup-l-left-padding);\n    padding-right: var(--select-optgroup-l-right-padding);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,UAAU,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAAqB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/optgroup/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../vars.css';\n\n.optgroup {\n    position: relative;\n    display: flex;\n    align-items: center;\n    padding: var(--gap-12) var(--select-optgroup-right-padding) var(--gap-4)\n        var(--select-optgroup-left-padding);\n    box-sizing: border-box;\n    background: var(--select-optgroup-background);\n    min-height: 40px;\n\n    & + *[role='option']:before {\n        display: none;\n    }\n}\n\n.label {\n    @mixin paragraph_caps;\n\n    display: block;\n    color: var(--select-optgroup-color);\n}\n\n.size-72 {\n    padding-left: var(--select-optgroup-l-left-padding);\n    padding-right: var(--select-optgroup-l-right-padding);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,UAAU,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAAqB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}

package/components/option/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@alfalab/core-components-env" />
-import { FC } from 'react';
-import { OptionCommonProps } from '../../typings';
+import { type FC } from 'react';
+import { type OptionCommonProps } from '../../typings';
 import type stylesDesktop from './desktop/index.module.css';
 import type stylesMobile from './mobile/index.module.css';
 declare type OptionPrivateProps = {

package/components/option/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/option/Component.tsx"],"sourcesContent":["import React, { FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { OptionCommonProps } from '../../typings';\n\nimport type stylesDesktop from './desktop/index.module.css';\nimport type stylesMobile from './mobile/index.module.css';\n\ntype OptionPrivateProps = {\n    /**\n     * Мобильная версия option.\n     */\n    mobile: boolean;\n    /**\n     * Стили\n     */\n    styles: typeof stylesDesktop | typeof stylesMobile;\n};\n\nexport const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({\n    size = 48,\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    mobile,\n    Checkmark,\n    innerProps,\n    dataTestId,\n    styles,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n            })}\n            data-test-id={dataTestId}\n        >\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='before'\n                />\n            )}\n\n            <div\n                className={cn(styles.content, {\n                    [styles.textContent]: !isValidElement(content),\n                })}\n            >\n                {content}\n            </div>\n\n            {/** Workaround чтобы для клика показывать отметку справа и всегда в виде иконки */}\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='after'\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["React","cn","SIZE_TO_CLASSNAME_MAP","isValidElement"],"mappings":";;;;;;;;;;;;;;AAoBO,IAAM,UAAU,GAA+C,UAAC,EActE,EAAA;;AAbG,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA;IAEN,IAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;IAChD,IAAA,EAAA,GAAyB,MAAM,CAAX,aAAA,EAApB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA;IAE5B,QACIA,+DACQ,UAAU,EAAA,EACd,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAACC,4BAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACvE,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,IAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,EAAA,EAAA,cAAA,EACY,UAAU,EAAA,CAAA;QAEvB,SAAS,IAAI,aAAa,KACvBF,qCAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,QAAQ,EAAA,CACnB,CACL;AAED,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACxB,EAAC,CAAA,MAAM,CAAC,WAAW,CAAA,GAAG,CAACE,oBAAc,CAAC,OAAO,CAAC;AAChD,gBAAA,EAAA,EAAA,EAAA,EAED,OAAO,CACN;QAGL,SAAS,IAAI,aAAa,KACvBH,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,OAAO,EAClB,CAAA,CACL,CACC;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/components/option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type OptionCommonProps } from '../../typings';\n\nimport type stylesDesktop from './desktop/index.module.css';\nimport type stylesMobile from './mobile/index.module.css';\n\ntype OptionPrivateProps = {\n    /**\n     * Мобильная версия option.\n     */\n    mobile: boolean;\n    /**\n     * Стили\n     */\n    styles: typeof stylesDesktop | typeof stylesMobile;\n};\n\nexport const OptionBase: FC<OptionCommonProps & OptionPrivateProps> = ({\n    size = 48,\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    mobile,\n    Checkmark,\n    innerProps,\n    dataTestId,\n    styles,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n            })}\n            data-test-id={dataTestId}\n        >\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='before'\n                />\n            )}\n\n            <div\n                className={cn(styles.content, {\n                    [styles.textContent]: !isValidElement(content),\n                })}\n            >\n                {content}\n            </div>\n\n            {/** Workaround чтобы для клика показывать отметку справа и всегда в виде иконки */}\n            {Checkmark && showCheckMark && (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    position='after'\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["React","cn","SIZE_TO_CLASSNAME_MAP","isValidElement"],"mappings":";;;;;;;;;;;;;;AAoBO,IAAM,UAAU,GAA+C,UAAC,EActE,EAAA;;AAbG,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA;IAEN,IAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;IAChD,IAAA,EAAA,GAAyB,MAAM,CAAX,aAAA,EAApB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA;IAE5B,QACIA,+DACQ,UAAU,EAAA,EACd,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAACC,4BAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACvE,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,IAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,EAAA,EAAA,cAAA,EACY,UAAU,EAAA,CAAA;QAEvB,SAAS,IAAI,aAAa,KACvBF,qCAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,QAAQ,EAAA,CACnB,CACL;AAED,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACxB,EAAC,CAAA,MAAM,CAAC,WAAW,CAAA,GAAG,CAACE,oBAAc,CAAC,OAAO,CAAC;AAChD,gBAAA,EAAA,EAAA,EAAA,EAED,OAAO,CACN;QAGL,SAAS,IAAI,aAAa,KACvBH,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,OAAO,EAClB,CAAA,CACL,CACC;AAEd;;;;"}

package/components/option/Component.responsive.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OptionProps } from '../../typings';
+import { type OptionProps } from '../../typings';
 export declare const OptionResponsive: ({ mobile, ...props }: OptionProps) => React.JSX.Element;

package/components/option/Component.responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.responsive.js","sources":["../../src/components/option/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OptionProps } from '../../typings';\n\nimport { OptionDesktop } from './desktop/Component';\nimport { OptionMobile } from './mobile/Component';\n\nexport const OptionResponsive = ({ mobile, ...props }: OptionProps) =>\n    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />;\n"],"names":["__rest","React","OptionMobile","__assign","OptionDesktop"],"mappings":";;;;;;;;;;;;;AAOO,IAAM,gBAAgB,GAAG,UAAC,EAAiC,EAAA;AAA/B,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA,EAAK,KAAK,GAAAA,YAAA,CAAA,EAAA,EAAlB,UAAoB,CAAF;AAC/C,IAAA,OAAA,MAAM,GAAGC,sBAAA,CAAA,aAAA,CAACC,sBAAY,EAAKC,cAAA,CAAA,EAAA,EAAA,KAAK,CAAI,CAAA,GAAGF,sBAAA,CAAA,aAAA,CAACG,yBAAa,EAAKD,cAAA,CAAA,EAAA,EAAA,KAAK,EAAI;;;;;"}
+{"version":3,"file":"Component.responsive.js","sources":["../../src/components/option/Component.responsive.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type OptionProps } from '../../typings';\n\nimport { OptionDesktop } from './desktop/Component';\nimport { OptionMobile } from './mobile/Component';\n\nexport const OptionResponsive = ({ mobile, ...props }: OptionProps) =>\n    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />;\n"],"names":["__rest","React","OptionMobile","__assign","OptionDesktop"],"mappings":";;;;;;;;;;;;;AAOO,IAAM,gBAAgB,GAAG,UAAC,EAAiC,EAAA;AAA/B,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA,EAAK,KAAK,GAAAA,YAAA,CAAA,EAAA,EAAlB,UAAoB,CAAF;AAC/C,IAAA,OAAA,MAAM,GAAGC,sBAAA,CAAA,aAAA,CAACC,sBAAY,EAAKC,cAAA,CAAA,EAAA,EAAA,KAAK,CAAI,CAAA,GAAGF,sBAAA,CAAA,aAAA,CAACG,yBAAa,EAAKD,cAAA,CAAA,EAAA,EAAA,KAAK,EAAI;;;;;"}

package/components/option/desktop/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OptionCommonProps } from '../../../typings';
+import { type OptionCommonProps } from '../../../typings';
 export declare const OptionDesktop: ({ Checkmark, ...props }: OptionCommonProps) => React.JSX.Element;

package/components/option/desktop/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/option/desktop/Component.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OptionCommonProps } from '../../../typings';\nimport { Checkmark as DefaultCheckMark } from '../../checkmark';\nimport { OptionBase } from '../Component';\n\nimport styles from './index.module.css';\n\nexport const OptionDesktop = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (\n    <OptionBase {...props} mobile={false} Checkmark={Checkmark} styles={styles} />\n);\n"],"names":["DefaultCheckMark","__rest","React","OptionBase","styles"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,aAAa,GAAG,UAAC,EAA6D,EAAA;IAA3D,IAAA,EAAA,GAAA,EAAA,CAAA,SAA4B,EAA5B,SAAS,GAAG,EAAA,KAAA,MAAA,GAAAA,qBAAgB,KAAA,EAAK,KAAK,GAAxCC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,CAA0C,CAAF;AAA0B,IAAA,QAC5FC,sBAAC,CAAA,aAAA,CAAAC,oBAAU,qBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAEC,YAAM,EAAA,CAAA,CAAI;;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/option/desktop/Component.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type OptionCommonProps } from '../../../typings';\nimport { Checkmark as DefaultCheckMark } from '../../checkmark';\nimport { OptionBase } from '../Component';\n\nimport styles from './index.module.css';\n\nexport const OptionDesktop = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (\n    <OptionBase {...props} mobile={false} Checkmark={Checkmark} styles={styles} />\n);\n"],"names":["DefaultCheckMark","__rest","React","OptionBase","styles"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,aAAa,GAAG,UAAC,EAA6D,EAAA;IAA3D,IAAA,EAAA,GAAA,EAAA,CAAA,SAA4B,EAA5B,SAAS,GAAG,EAAA,KAAA,MAAA,GAAAA,qBAAgB,KAAA,EAAK,KAAK,GAAxCC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,CAA0C,CAAF;AAA0B,IAAA,QAC5FC,sBAAC,CAAA,aAAA,CAAAC,oBAAU,qBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAEC,YAAM,EAAA,CAAA,CAAI;;;;;"}

package/components/option/desktop/index.css

@@ -35,7 +35,7 @@
     --select-option-hover-color: var(--color-light-text-primary);
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
-} .select__option_n1rbq {
+} .select__option_1m72s {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -49,11 +49,11 @@
     color: var(--select-option-color);
     box-sizing: border-box;
     position: relative;
-    cursor: pointer
-} .select__option_n1rbq:not(.select__disabled_n1rbq):active {
+    cursor: pointer;
+} .select__option_1m72s:not(.select__disabled_1m72s):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_n1rbq:before {
+    } .select__option_1m72s:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -63,47 +63,46 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_n1rbq:first-child:before {
+    } .select__option_1m72s:first-child:before {
         display: none;
-    } .select__size-48_n1rbq {
+    } .select__size-48_1m72s {
     min-height: var(--size-s-height);
-} .select__size-56_n1rbq {
+} .select__size-56_1m72s {
     min-height: var(--size-m-height);
-} .select__size-64_n1rbq {
+} .select__size-64_1m72s {
     min-height: var(--size-l-height);
-} .select__size-72_n1rbq {
+} .select__size-72_1m72s {
     min-height: var(--size-xl-height);
-} .select__size-72_n1rbq {
     padding-left: var(--select-option-l-left-padding);
-    padding-right: var(--select-option-l-right-padding)
-} .select__size-72_n1rbq:before {
+    padding-right: var(--select-option-l-right-padding);
+} .select__size-72_1m72s:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_n1rbq {
+    } .select__selected_1m72s {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_n1rbq {
+} .select__highlighted_1m72s {
     background: var(--select-option-hover-background);
-    color: var(--select-option-hover-color)
-} .select__highlighted_n1rbq:before,
-    .select__highlighted_n1rbq + .select__option_n1rbq:before {
+    color: var(--select-option-hover-color);
+} .select__highlighted_1m72s:before,
+    .select__highlighted_1m72s + .select__option_1m72s:before {
         opacity: 0;
-    } .select__disabled_n1rbq {
+    } .select__disabled_1m72s {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_n1rbq {
+} .select__content_1m72s {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_n1rbq {
+} .select__textContent_1m72s {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
-} .select__highlighted_n1rbq {
+} .select__highlighted_1m72s {
     background: var(--select-option-hover-background);
-    color: var(--select-option-hover-color)
-} .select__highlighted_n1rbq:before,
-    .select__highlighted_n1rbq + .select__option_n1rbq:before {
+    color: var(--select-option-hover-color);
+} .select__highlighted_1m72s:before,
+    .select__highlighted_1m72s + .select__option_1m72s:before {
         opacity: 0;
     }

package/components/option/desktop/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_n1rbq","disabled":"select__disabled_n1rbq","size-48":"select__size-48_n1rbq","size-56":"select__size-56_n1rbq","size-64":"select__size-64_n1rbq","size-72":"select__size-72_n1rbq","selected":"select__selected_n1rbq","highlighted":"select__highlighted_n1rbq","content":"select__content_n1rbq","textContent":"select__textContent_n1rbq"};
+var styles = {"option":"select__option_1m72s","disabled":"select__disabled_1m72s","size-48":"select__size-48_1m72s","size-56":"select__size-56_1m72s","size-64":"select__size-64_1m72s","size-72":"select__size-72_1m72s","selected":"select__selected_1m72s","highlighted":"select__highlighted_1m72s","content":"select__content_1m72s","textContent":"select__textContent_1m72s"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/desktop/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/desktop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n\n.highlighted {\n    background: var(--select-option-hover-background);\n    color: var(--select-option-hover-color);\n\n    &:before,\n    & + .option:before {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/desktop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n\n.highlighted {\n    background: var(--select-option-hover-background);\n    color: var(--select-option-hover-color);\n\n    &:before,\n    & + .option:before {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}

package/components/option/mobile/Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OptionCommonProps } from '../../../typings';
+import { type OptionCommonProps } from '../../../typings';
 export declare const OptionMobile: ({ Checkmark, ...props }: OptionCommonProps) => React.JSX.Element;

package/components/option/mobile/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/option/mobile/Component.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OptionCommonProps } from '../../../typings';\nimport { Checkmark as DefaultCheckMark } from '../../checkmark-mobile';\nimport { OptionBase } from '../Component';\n\nimport styles from './index.module.css';\n\nexport const OptionMobile = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (\n    <OptionBase {...props} mobile={true} Checkmark={Checkmark} styles={styles} />\n);\n"],"names":["DefaultCheckMark","__rest","React","OptionBase","styles"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,YAAY,GAAG,UAAC,EAA6D,EAAA;IAA3D,IAAA,EAAA,GAAA,EAAA,CAAA,SAA4B,EAA5B,SAAS,GAAG,EAAA,KAAA,MAAA,GAAAA,qBAAgB,KAAA,EAAK,KAAK,GAAxCC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,CAA0C,CAAF;AAA0B,IAAA,QAC3FC,sBAAC,CAAA,aAAA,CAAAC,oBAAU,qBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAEC,YAAM,EAAA,CAAA,CAAI;;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/option/mobile/Component.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type OptionCommonProps } from '../../../typings';\nimport { Checkmark as DefaultCheckMark } from '../../checkmark-mobile';\nimport { OptionBase } from '../Component';\n\nimport styles from './index.module.css';\n\nexport const OptionMobile = ({ Checkmark = DefaultCheckMark, ...props }: OptionCommonProps) => (\n    <OptionBase {...props} mobile={true} Checkmark={Checkmark} styles={styles} />\n);\n"],"names":["DefaultCheckMark","__rest","React","OptionBase","styles"],"mappings":";;;;;;;;;;;;;;AAQO,IAAM,YAAY,GAAG,UAAC,EAA6D,EAAA;IAA3D,IAAA,EAAA,GAAA,EAAA,CAAA,SAA4B,EAA5B,SAAS,GAAG,EAAA,KAAA,MAAA,GAAAA,qBAAgB,KAAA,EAAK,KAAK,GAAxCC,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,CAA0C,CAAF;AAA0B,IAAA,QAC3FC,sBAAC,CAAA,aAAA,CAAAC,oBAAU,qBAAK,KAAK,EAAA,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAEC,YAAM,EAAA,CAAA,CAAI;;;;;"}