@alfalab/core-components-select 19.0.6 → 19.1.0-alfasans

package/components/checkmark/index.css

@@ -1,64 +1,56 @@
 :root {
-    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-status-positive: #0cc44d;
 }
 :root {
-    --border-radius-circle: 50%;
-}
-:root {
-    --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-0: 0px;
-    --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
 }
 :root {
-
-    --select-checkmark-margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-0);
-    --select-checkmark-margin-after: var(--select-checkmark-margin);
-    --select-checkmark-size: 4px;
-    --select-checkmark-before-display: 'flex';
+    --select-checkmark-size: 24px;
+    --select-checkmark-before-display: flex;
     --select-checkmark-after-display: none;
     --select-checkmark-before-display-multiple: block;
-    --select-checkmark-after-display-single: none;
+    --select-checkmark-after-display-single: flex;
     --select-checkmark-unselected-opacity: 0;
-    --select-checkmark-background: var(--color-light-neutral-translucent-1300);
-    --select-checkmark-border-radius: var(--border-radius-circle);
 }
-.select__checkmark_9wypm {
+.select__checkmark_1195e {
     flex-shrink: 0;
-    margin: var(--select-checkmark-margin);
 }
-.select__checkmark_9wypm.select__after_9wypm {
-        margin: var(--select-checkmark-margin-after);
+.select__checkmark_1195e.select__before_1195e {
+        display: var(--select-checkmark-before-display);
+    }
+.select__checkmark_1195e.select__after_1195e {
+        display: var(--select-checkmark-after-display);
     }
-.select__single_9wypm {
+.select__single_1195e {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: var(--select-checkmark-unselected-opacity);
-    background: var(--select-checkmark-background);
-    background-size: cover;
-    border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size);
 }
-.select__single_9wypm.select__selected_9wypm {
+.select__single_1195e.select__selected_1195e {
         opacity: 1;
     }
-.select__before_9wypm {
-    display: var(--select-checkmark-before-display);
-}
-.select__before_9wypm.select__multiple_9wypm {
+.select__multiple_1195e.select__before_1195e {
         margin-right: var(--gap-12);
         display: var(--select-checkmark-before-display-multiple);
     }
-.select__after_9wypm.select__after_9wypm {
+.select__multiple_1195e.select__after_1195e {
+        margin-left: var(--gap-12);
+    }
+.select__after_1195e.select__after_1195e {
     display: var(--select-checkmark-after-display);
 }
-.select__after_9wypm.select__after_9wypm.select__single_9wypm {
+.select__after_1195e.select__after_1195e.select__single_1195e {
         display: var(--select-checkmark-after-display-single);
     }
-.select__colorIcon_9wypm {
+.select__colorIcon_1195e {
     color: var(--color-light-status-positive);
 }
+.select__displayIcon_1195e {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"checkmark":"select__checkmark_9wypm","after":"select__after_9wypm","single":"select__single_9wypm","selected":"select__selected_9wypm","before":"select__before_9wypm","multiple":"select__multiple_9wypm","colorIcon":"select__colorIcon_9wypm"};
+var styles = {"checkmark":"select__checkmark_1195e","before":"select__before_1195e","after":"select__after_1195e","single":"select__single_1195e","selected":"select__selected_1195e","multiple":"select__multiple_1195e","colorIcon":"select__colorIcon_1195e","displayIcon":"select__displayIcon_1195e"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/checkmark/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    margin: var(--select-checkmark-margin);\n\n    &.after {\n        margin: var(--select-checkmark-margin-after);\n    }\n}\n\n.single {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: var(--select-checkmark-unselected-opacity);\n    background: var(--select-checkmark-background);\n    background-size: cover;\n    border-radius: var(--select-checkmark-border-radius);\n    width: var(--select-checkmark-size);\n    height: var(--select-checkmark-size);\n\n    &.selected {\n        opacity: 1;\n    }\n}\n\n.before {\n    display: var(--select-checkmark-before-display);\n\n    &.multiple {\n        margin-right: var(--gap-12);\n        display: var(--select-checkmark-before-display-multiple);\n    }\n}\n\n.after.after {\n    display: var(--select-checkmark-after-display);\n\n    &.single {\n        display: var(--select-checkmark-after-display-single);\n    }\n}\n\n.colorIcon {\n    color: var(--color-light-status-positive);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,WAAW,CAAC,yBAAyB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/checkmark/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\n    &.before {\n        display: var(--select-checkmark-before-display);\n    }\n\n    &.after {\n        display: var(--select-checkmark-after-display);\n    }\n}\n\n.single {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: var(--select-checkmark-unselected-opacity);\n    width: var(--select-checkmark-size);\n    height: var(--select-checkmark-size);\n\n    &.selected {\n        opacity: 1;\n    }\n}\n\n.multiple {\n    &.before {\n        margin-right: var(--gap-12);\n        display: var(--select-checkmark-before-display-multiple);\n    }\n\n    &.after {\n        margin-left: var(--gap-12);\n    }\n}\n\n.after.after {\n    display: var(--select-checkmark-after-display);\n\n    &.single {\n        display: var(--select-checkmark-after-display-single);\n    }\n}\n\n.colorIcon {\n    color: var(--color-light-status-positive);\n}\n\n.displayIcon {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,UAAU,CAAC,wBAAwB,CAAC,WAAW,CAAC,yBAAyB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}

package/components/checkmark-mobile/Component.d.ts

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

package/components/checkmark-mobile/Component.js

@@ -14,8 +14,8 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var Checkmark = function (_a) {
     var _b;
-    var selected = _a.selected, className = _a.className;
-    return (React__default.default.createElement("div", { className: cn__default.default(index_module.checkmark, className, (_b = {},
+    var selected = _a.selected, className = _a.className, _c = _a.position, position = _c === void 0 ? 'after' : _c;
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.checkmark, className, index_module[position], (_b = {},
             _b[index_module.selected] = selected,
             _b)) },
         React__default.default.createElement(CheckmarkMIcon.CheckmarkMIcon, { className: index_module.displayIcon })));

package/components/checkmark-mobile/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":["React","cn","styles","CheckmarkMIcon"],"mappings":";;;;;;;;;;;;;;AASO,IAAM,SAAS,GAAG,UAAC,EAAuC,EAAA;;QAArC,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;IAAuB,QAClEA,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACrC,YAAA,EAAA,CAACA,YAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,EAAA,EAAA;QAEFF,sBAAC,CAAA,aAAA,CAAAG,6BAAc,IAAC,SAAS,EAAED,YAAM,CAAC,WAAW,EAAI,CAAA,CAC/C;AAP4D;;;;"}
+{"version":3,"file":"Component.js","sources":["../../src/components/checkmark-mobile/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({ selected, className, position = 'after' }: CheckmarkProps) => (\n    <div\n        className={cn(styles.checkmark, className, styles[position], {\n            [styles.selected]: selected,\n        })}\n    >\n        <CheckmarkMIcon className={styles.displayIcon} />\n    </div>\n);\n"],"names":["React","cn","styles","CheckmarkMIcon"],"mappings":";;;;;;;;;;;;;;AASO,IAAM,SAAS,GAAG,UAAC,EAA2D,EAAA;;QAAzD,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,gBAAkB,EAAlB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,OAAO,GAAA,EAAA;AAAuB,IAAA,QACtFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAE,SAAS,EAAEA,YAAM,CAAC,QAAQ,CAAC,GAAA,EAAA,GAAA,EAAA;AACvD,YAAA,EAAA,CAACA,YAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,EAAA,EAAA;QAEFF,sBAAC,CAAA,aAAA,CAAAG,6BAAc,IAAC,SAAS,EAAED,YAAM,CAAC,WAAW,EAAI,CAAA,CAC/C;AAPgF;;;;"}

package/components/checkmark-mobile/index.css

@@ -1,8 +1,12 @@
+:root {
+    --gap-xs: 8px;
+    --gap-8: var(--gap-xs);
+}
 :root {
     --select-mobile-checkmark-display-icon: block;
     --select-mobile-checkmark-display-badge: none;
 }
-.select__checkmark_2nxmj {
+.select__checkmark_zsmr7 {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -11,15 +15,18 @@
     height: 24px;
     opacity: 0;
 }
-.select__checkmark_2nxmj:first-child {
-        display: none;
-    }
-.select__checkmark_2nxmj.select__selected_2nxmj {
+.select__checkmark_zsmr7.select__selected_zsmr7 {
         opacity: 1;
     }
-.select__displayIcon_2nxmj {
+.select__checkmark_zsmr7.select__before_zsmr7 {
+        margin-right: var(--gap-8);
+    }
+.select__checkmark_zsmr7.select__after_zsmr7 {
+        margin-left: var(--gap-8);
+    }
+.select__displayIcon_zsmr7 {
     display: var(--select-mobile-checkmark-display-icon);
 }
-.select__displayBadge_2nxmj {
+.select__displayBadge_zsmr7 {
     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_2nxmj","selected":"select__selected_2nxmj","displayIcon":"select__displayIcon_2nxmj"};
+var styles = {"checkmark":"select__checkmark_zsmr7","selected":"select__selected_zsmr7","before":"select__before_zsmr7","after":"select__after_zsmr7","displayIcon":"select__displayIcon_zsmr7","displayBadge":"select__displayBadge_zsmr7"};
 
 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/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;;;;"}
+{"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    &.selected {\n        opacity: 1;\n    }\n\n    &.before {\n        margin-right: var(--gap-8);\n    }\n\n    &.after {\n        margin-left: var(--gap-8);\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,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,aAAa,CAAC,2BAA2B,CAAC,cAAc,CAAC,4BAA4B,CAAC;;;;"}

package/components/clear-button/index.css

@@ -6,16 +6,16 @@
 :root {
     --input-error-icon-display: none;
 }
-.select__clearIcon_im64r {
+.select__clearIcon_1m06p {
     display: block;
     color: var(--color-light-neutral-translucent-500);
 }
-.select__clearIcon_im64r:hover {
+.select__clearIcon_1m06p:hover {
         color: var(--color-light-neutral-translucent-500-hover);
     }
-.select__clearIcon_im64r:active {
+.select__clearIcon_1m06p:active {
         color: var(--color-light-neutral-translucent-500-press);
     }
-.select__clearButton_im64r + [data-addon='error-icon'] {
+.select__clearButton_1m06p + [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_im64r","clearButton":"select__clearButton_im64r"};
+var styles = {"clearIcon":"select__clearIcon_1m06p","clearButton":"select__clearButton_1m06p"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/field/Component.js

@@ -39,32 +39,15 @@ var Field = function (_a) {
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    var rightAddonsMap = shared.getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled,
-            render: function () { return (React__default.default.createElement(Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })); },
-        },
-        {
-            priority: 2,
-            predicate: Boolean(rightAddons),
-            render: function () { return rightAddons; },
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !disabled,
-            render: function () { return Arrow && React__default.default.cloneElement(Arrow, { className: index_module.arrow }); },
-        },
-        {
-            priority: 0,
-            predicate: disabled,
-            render: function () { return React__default.default.createElement(shared.LockIcon, { colors: colors, size: size }); },
-        },
-    ]);
+    var renderRightAddons = function () { return (React__default.default.createElement(React.Fragment, null,
+        clear && filled && !disabled && (React__default.default.createElement(Component.ClearButton, { onClick: onClear, disabled: disabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'), size: size })),
+        rightAddons,
+        !disabled && Arrow && React__default.default.cloneElement(Arrow, { className: index_module.arrow }),
+        disabled && React__default.default.createElement(shared.LockIcon, { colors: colors, size: size }))); };
     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: rightAddonsMap, "data-test-id": dataTestId }, restProps, innerProps),
+            _b)), block: true, size: size, focused: focused || open, disabled: disabled, filled: filled || (!!placeholder && open), label: showLabel && label, labelView: labelView, error: error, hint: hint, rightAddons: renderRightAddons(), "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, { type ElementType, useCallback, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { type FormControlProps } from '@alfalab/core-components-form-control';\nimport { getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/shared';\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\n// eslint-disable-next-line complexity\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 { colors = 'default' } = restProps;\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    /**\n     * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n     * [4] - Clear\n     * [3] - Status (error, success)\n     * [2] - Common (info, e.g.)\n     * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n     * [0] - Lock\n     */\n    const rightAddonsMap = getAddonsByPriority([\n        {\n            priority: 4,\n            predicate: clear && filled && !disabled,\n            render: () => (\n                <ClearButton\n                    onClick={onClear}\n                    disabled={disabled}\n                    dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                    size={size}\n                />\n            ),\n        },\n        {\n            priority: 2,\n            predicate: Boolean(rightAddons),\n            render: () => rightAddons,\n        },\n        {\n            priority: 1,\n            predicate: Boolean(Arrow) && !disabled,\n            render: () => Arrow && React.cloneElement(Arrow, { className: styles.arrow }),\n        },\n        {\n            priority: 0,\n            predicate: disabled,\n            render: () => <LockIcon colors={colors} size={size} />,\n        },\n    ]);\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={rightAddonsMap}\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","getAddonsByPriority","React","ClearButton","getDataTestId","styles","LockIcon","__assign","cn"],"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 { LockIcon } from '@alfalab/core-components-input/shared';\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\n// eslint-disable-next-line complexity\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 { colors = 'default' } = restProps;\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    /**\n     * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n     * [4] - Clear\n     * [3] - Status (error, success)\n     * [2] - Common (info, e.g.)\n     * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n     * [0] - Lock\n     */\n    const renderRightAddons = () => (\n        <Fragment>\n            {clear && filled && !disabled && (\n                <ClearButton\n                    onClick={onClear}\n                    disabled={disabled}\n                    dataTestId={getDataTestId(dataTestId, 'clear-icon')}\n                    size={size}\n                />\n            )}\n            {rightAddons}\n            {!disabled && Arrow && React.cloneElement(Arrow, { className: styles.arrow })}\n            {disabled && <LockIcon colors={colors} size={size} />}\n        </Fragment>\n    );\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={renderRightAddons()}\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","Fragment","ClearButton","getDataTestId","styles","LockIcon","__assign","cn"],"mappings":"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"}

package/components/field/index.css

@@ -4,8 +4,9 @@
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -18,60 +19,63 @@
 :root {
     --select-arrow-hover-opacity: 0.7;
 }
-.select__component_1nqtr {
+.select__component_199ao {
     width: 100%;
     outline: none;
 }
-.select__field_1nqtr:not(.select__disabled_1nqtr) {
+.select__field_199ao:not(.select__disabled_199ao) {
     cursor: pointer;
 }
-.select__field_1nqtr:not(.select__disabled_1nqtr):hover .select__arrow_1nqtr {
+.select__field_199ao:not(.select__disabled_199ao):hover .select__arrow_199ao {
             opacity: var(--select-arrow-hover-opacity);
         }
-.select__disabled_1nqtr {
+.select__disabled_199ao {
     cursor: var(--disabled-cursor);
 }
-.select__placeholder_1nqtr {
+.select__placeholder_199ao {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_1nqtr 0.2s ease;
+    animation: select__show-placeholder_199ao 0.2s ease;
 }
-.select__placeholder_1nqtr.select__focused_1nqtr {
+.select__placeholder_199ao.select__focused_199ao {
         color: var(--input-focus-placeholder-color);
     }
-.select__contentWrapper_1nqtr {
+.select__contentWrapper_199ao {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
 }
-.select__contentWrapper_1nqtr.select__size-40_1nqtr {
+.select__contentWrapper_199ao.select__size-40_199ao {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
-.select__value_1nqtr {
+.select__value_199ao {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
-.select__value_1nqtr.select__size-40_1nqtr {
+.select__value_199ao.select__size-40_199ao {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
-.select__focusVisible_1nqtr {
+.select__focusVisible_199ao {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-@keyframes select__show-placeholder_1nqtr {
+@keyframes select__show-placeholder_199ao {
     from {
         opacity: 0;
     }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"select__component_1nqtr","field":"select__field_1nqtr","disabled":"select__disabled_1nqtr","arrow":"select__arrow_1nqtr","placeholder":"select__placeholder_1nqtr","show-placeholder":"select__show-placeholder_1nqtr","focused":"select__focused_1nqtr","contentWrapper":"select__contentWrapper_1nqtr","size-40":"select__size-40_1nqtr","value":"select__value_1nqtr","focusVisible":"select__focusVisible_1nqtr"};
+var styles = {"component":"select__component_199ao","field":"select__field_199ao","disabled":"select__disabled_199ao","arrow":"select__arrow_199ao","placeholder":"select__placeholder_199ao","show-placeholder":"select__show-placeholder_199ao","focused":"select__focused_199ao","contentWrapper":"select__contentWrapper_199ao","size-40":"select__size-40_199ao","value":"select__value_199ao","focusVisible":"select__focusVisible_199ao"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/index.css

@@ -6,20 +6,20 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.select__footer_17e98 {
+.select__footer_bmrs0 {
     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_17e98 .select__button_17e98:first-of-type {
+.select__footer_bmrs0 .select__button_bmrs0:first-of-type {
         margin-right: var(--gap-16);
     }
-.select__button_17e98 {
+.select__button_bmrs0 {
     width: 50%;
 }
-.select__highlighted_17e98 {
+.select__highlighted_bmrs0 {
     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_17e98","button":"select__button_17e98","highlighted":"select__highlighted_17e98"};
+var styles = {"footer":"select__footer_bmrs0","button":"select__button_bmrs0","highlighted":"select__highlighted_bmrs0"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/optgroup/index.css

@@ -11,8 +11,9 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
 
@@ -23,7 +24,7 @@
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
 }
-.select__optgroup_qgnlg {
+.select__optgroup_11j5l {
     position: relative;
     display: flex;
     align-items: center;
@@ -33,21 +34,21 @@
     background: var(--select-optgroup-background);
     min-height: 40px;
 }
-.select__optgroup_qgnlg + *[role='option']:before {
+.select__optgroup_11j5l + *[role='option']:before {
         display: none;
     }
-.select__label_qgnlg {
+.select__label_11j5l {
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
     letter-spacing: 1.25px;
     text-transform: uppercase;
-    font-family: var(--font-family-system);
+    font-family: var(--font-family-alfasans);
 
     display: block;
     color: var(--select-optgroup-color);
 }
-.select__size-72_qgnlg {
+.select__size-72_11j5l {
     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_qgnlg","label":"select__label_qgnlg","size-72":"select__size-72_qgnlg"};
+var styles = {"optgroup":"select__optgroup_11j5l","label":"select__label_11j5l","size-72":"select__size-72_11j5l"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/Component.js

@@ -13,19 +13,23 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var OptionBase = function (_a) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, option = _a.option, children = _a.children, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, multiple = _a.multiple, mobile = _a.mobile, Checkmark = _a.Checkmark, innerProps = _a.innerProps, dataTestId = _a.dataTestId, styles = _a.styles;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, option = _a.option, children = _a.children, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, multiple = _a.multiple, mobile = _a.mobile, Checkmark = _a.Checkmark, _e = _a.checkmarkPosition, checkmarkPosition = _e === void 0 ? multiple ? 'before' : 'after' : _e, innerProps = _a.innerProps, dataTestId = _a.dataTestId, styles = _a.styles;
     var content = children || option.content || option.key;
-    var _e = option.showCheckMark, showCheckMark = _e === void 0 ? true : _e;
+    var _f = option.showCheckMark, showCheckMark = _f === void 0 ? true : _f;
+    var renderCheckmark = function (position) {
+        return Checkmark &&
+            showCheckMark && (React__default.default.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: position }));
+    };
     return (React__default.default.createElement("div", tslib.__assign({}, innerProps, { className: cn__default.default(styles.option, styles["size-".concat(size)], className, (_b = {},
             _b[styles.highlighted] = !mobile && highlighted,
             _b[styles.selected] = selected,
             _b[styles.disabled] = disabled,
             _b)), "data-test-id": dataTestId }),
-        Checkmark && showCheckMark && (React__default.default.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'before' })),
+        checkmarkPosition === 'before' && renderCheckmark('before'),
         React__default.default.createElement("div", { className: cn__default.default(styles.content, (_c = {},
                 _c[styles.textContent] = !React.isValidElement(content),
                 _c)) }, content),
-        Checkmark && showCheckMark && (React__default.default.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'after' }))));
+        checkmarkPosition === 'after' && renderCheckmark('after')));
 };
 
 exports.OptionBase = OptionBase;

package/components/option/Component.js.map

@@ -1 +1 @@
-{"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 { 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-${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","__assign","cn","isValidElement"],"mappings":";;;;;;;;;;;;;AAmBO,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;AAE5B,IAAA,QACIA,sBACQ,CAAA,aAAA,CAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,EAAA,UAAU,IACd,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAA,CAAA,MAAA,CAAQ,IAAI,CAAE,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1D,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,EAAEE,mBAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACxB,EAAC,CAAA,MAAM,CAAC,WAAW,CAAA,GAAG,CAACC,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 { 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    checkmarkPosition = multiple ? 'before' : 'after',\n    innerProps,\n    dataTestId,\n    styles,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    const renderCheckmark = (position: 'before' | 'after') =>\n        Checkmark &&\n        showCheckMark && (\n            <Checkmark\n                disabled={disabled}\n                selected={selected}\n                multiple={multiple}\n                position={position}\n            />\n        );\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n            })}\n            data-test-id={dataTestId}\n        >\n            {checkmarkPosition === 'before' && renderCheckmark('before')}\n\n            <div\n                className={cn(styles.content, {\n                    [styles.textContent]: !isValidElement(content),\n                })}\n            >\n                {content}\n            </div>\n\n            {checkmarkPosition === 'after' && renderCheckmark('after')}\n        </div>\n    );\n};\n"],"names":["React","__assign","cn","isValidElement"],"mappings":";;;;;;;;;;;;;AAmBO,IAAM,UAAU,GAA+C,UAAC,EAetE,EAAA;;QAdG,EAAS,GAAA,EAAA,CAAA,IAAA,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,GAAA,EAAA,CAAA,QAAA,EACR,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAA,GAAA,EAAA,CAAA,iBAAiD,EAAjD,iBAAiB,GAAG,EAAA,KAAA,MAAA,GAAA,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAA,EAAA,EACjD,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,IAAM,eAAe,GAAG,UAAC,QAA4B,EAAA;AACjD,QAAA,OAAA,SAAS;YACT,aAAa,KACTA,sBAAC,CAAA,aAAA,CAAA,SAAS,IACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,CACpB,CACL;AARD,KAQC;AAEL,IAAA,QACIA,sBACQ,CAAA,aAAA,CAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,EAAA,UAAU,IACd,SAAS,EAAEC,mBAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAA,CAAA,MAAA,CAAQ,IAAI,CAAE,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1D,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;AAEvB,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;AAE5D,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEE,mBAAE,CAAC,MAAM,CAAC,OAAO,GAAA,EAAA,GAAA,EAAA;gBACxB,EAAC,CAAA,MAAM,CAAC,WAAW,CAAA,GAAG,CAACC,oBAAc,CAAC,OAAO,CAAC;AAChD,gBAAA,EAAA,EAAA,EAAA,EAED,OAAO,CACN;QAEL,iBAAiB,KAAK,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CACxD;AAEd;;;;"}