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

package/modern/components/checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            {position === 'before' ? (\n                <Badge\n                    className={styles.after}\n                    view='icon'\n                    size='m'\n                    iconColor='positive'\n                    content={<CheckmarkCircleMIcon className={styles.colorIcon} />}\n                />\n            ) : (\n                <CheckmarkMIcon className={cn(styles.displayIcon)} />\n            )}\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAYa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,GACN,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA,EAC9B,QAAQ,KAAK,QAAQ,IAClB,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,KAAC,CAAA,aAAA,CAAA,oBAAoB,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,CAAI,GAChE,KAEF,oBAAC,cAAc,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAA,CAAI,CACxD,CACC,KAEN,oBAAC,QAAQ,EAAA,EACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/checkmark/Component.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox, type CheckboxProps } from '@alfalab/core-components-checkbox';\nimport CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';\n\nimport { type CheckmarkProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Checkmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    position = 'before',\n    content,\n}: CheckmarkProps) => {\n    const single = !multiple;\n\n    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {\n        [styles.multiple]: !single,\n        [styles.single]: single,\n        [styles.selected]: selected,\n    });\n\n    const handleCheckboxClick = useCallback<Required<CheckboxProps>['onClick']>(\n        (event) => event.stopPropagation(),\n        [],\n    );\n\n    return single ? (\n        <div className={checkmarkClassNames}>\n            <CheckmarkMIcon className={cn(styles.displayIcon)} />\n        </div>\n    ) : (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            label={content}\n            onClick={handleCheckboxClick}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;MAUa,SAAS,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACM,KAAI;AACjB,IAAA,MAAM,MAAM,GAAG,CAAC,QAAQ;AAExB,IAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1E,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM;AAC1B,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC;AAEF,IAAA,MAAM,mBAAmB,GAAG,WAAW,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAClC,EAAE,CACL;IAED,OAAO,MAAM,IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,mBAAmB,EAAA;QAC/B,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,GAAI,CACnD,KAEN,KAAC,CAAA,aAAA,CAAA,QAAQ,IACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,mBAAmB,EAC9B,CAAA,CACL;AACL;;;;"}

package/modern/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/modern/components/checkmark/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const 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"};
+const 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"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,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,eAAe,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/modern/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/modern/components/checkmark-mobile/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css.js';
 
-const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {
+const Checkmark = ({ selected, className, position = 'after' }) => (React.createElement("div", { className: cn(styles.checkmark, className, styles[position], {
         [styles.selected]: selected,
     }) },
     React.createElement(CheckmarkMIcon, { className: styles.displayIcon })));

package/modern/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":[],"mappings":";;;;;AASa,MAAA,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAkB,MAC7D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}
+{"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":[],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,OAAO,EAAkB,MACjF,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AACzD,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA;IAEF,KAAC,CAAA,aAAA,CAAA,cAAc,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI,CAC/C;;;;"}

package/modern/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/modern/components/checkmark-mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"checkmark":"select__checkmark_2nxmj","selected":"select__selected_2nxmj","displayIcon":"select__displayIcon_2nxmj"};
+const 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"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,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,eAAe,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/modern/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/modern/components/clear-button/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"clearIcon":"select__clearIcon_im64r","clearButton":"select__clearButton_im64r"};
+const styles = {"clearIcon":"select__clearIcon_1m06p","clearButton":"select__clearButton_1m06p"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/field/Component.js

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, Fragment } from 'react';
 import cn from 'classnames';
-import { getAddonsByPriority, LockIcon } from '@alfalab/core-components-input/modern/shared';
+import { LockIcon } from '@alfalab/core-components-input/modern/shared';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
 import { joinOptions } from '../../utils.js';
@@ -27,32 +27,15 @@ const Field = ({ size = 56, open, multiple, error, hint, disabled, label, labelV
      * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
      * [0] - Lock
      */
-    const rightAddonsMap = getAddonsByPriority([
-        {
-            priority: 4,
-            predicate: clear && filled && !disabled,
-            render: () => (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, dataTestId: getDataTestId(dataTestId, 'clear-icon'), size: size })),
-        },
-        {
-            priority: 2,
-            predicate: Boolean(rightAddons),
-            render: () => rightAddons,
-        },
-        {
-            priority: 1,
-            predicate: Boolean(Arrow) && !disabled,
-            render: () => Arrow && React.cloneElement(Arrow, { className: styles.arrow }),
-        },
-        {
-            priority: 0,
-            predicate: disabled,
-            render: () => React.createElement(LockIcon, { colors: colors, size: size }),
-        },
-    ]);
+    const renderRightAddons = () => (React.createElement(Fragment, null,
+        clear && filled && !disabled && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, dataTestId: getDataTestId(dataTestId, 'clear-icon'), size: size })),
+        rightAddons,
+        !disabled && Arrow && React.cloneElement(Arrow, { className: styles.arrow }),
+        disabled && React.createElement(LockIcon, { colors: colors, size: size })));
     return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur }, FormControlComponent ? (React.createElement(FormControlComponent, { dataTestId: getDataTestId(dataTestId, 'form-control'), fieldClassName: cn(styles.field, fieldClassName, {
             [styles.disabled]: disabled,
             [styles.focusVisible]: focusVisible,
-        }), 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 },
+        }), 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.createElement("div", { className: cn(styles.contentWrapper, styles[`size-${size}`]) },
             showPlaceholder && (React.createElement("span", { className: cn(styles.placeholder, {
                     [styles.focused]: focused || open,

package/modern/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":[],"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":[],"mappings":"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"}

package/modern/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/modern/components/field/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const 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"};
+const 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"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/components/footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_17e98","button":"select__button_17e98","highlighted":"select__highlighted_17e98"};
+const styles = {"footer":"select__footer_bmrs0","button":"select__button_bmrs0","highlighted":"select__highlighted_bmrs0"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/components/optgroup/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optgroup":"select__optgroup_qgnlg","label":"select__label_qgnlg","size-72":"select__size-72_qgnlg"};
+const styles = {"optgroup":"select__optgroup_11j5l","label":"select__label_11j5l","size-72":"select__size-72_11j5l"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/Component.js

@@ -1,19 +1,21 @@
 import React, { isValidElement } from 'react';
 import cn from 'classnames';
 
-const OptionBase = ({ size = 48, className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark, innerProps, dataTestId, styles, }) => {
+const OptionBase = ({ size = 48, className, option, children, selected, highlighted, disabled, multiple, mobile, Checkmark, checkmarkPosition = multiple ? 'before' : 'after', innerProps, dataTestId, styles, }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
+    const renderCheckmark = (position) => Checkmark &&
+        showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: position }));
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, styles[`size-${size}`], className, {
             [styles.highlighted]: !mobile && highlighted,
             [styles.selected]: selected,
             [styles.disabled]: disabled,
         }), "data-test-id": dataTestId },
-        Checkmark && showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'before' })),
+        checkmarkPosition === 'before' && renderCheckmark('before'),
         React.createElement("div", { className: cn(styles.content, {
                 [styles.textContent]: !isValidElement(content),
             }) }, content),
-        Checkmark && showCheckMark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, position: 'after' }))));
+        checkmarkPosition === 'after' && renderCheckmark('after')));
 };
 
 export { OptionBase };

package/modern/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":[],"mappings":";;;AAmBO,MAAM,UAAU,GAA+C,CAAC,EACnE,IAAI,GAAG,EAAE,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,GACT,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;IAEvC,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE;YAC5D,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,kBACY,UAAU,EAAA;QAEvB,SAAS,IAAI,aAAa,KACvB,oBAAC,SAAS,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,QAAQ,EAAA,CACnB,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC1B,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;aACjD,CAAC,EAAA,EAED,OAAO,CACN;QAGL,SAAS,IAAI,aAAa,KACvB,KAAA,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":[],"mappings":";;;MAmBa,UAAU,GAA+C,CAAC,EACnE,IAAI,GAAG,EAAE,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,UAAU,EACV,UAAU,EACV,MAAM,GACT,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AAEvC,IAAA,MAAM,eAAe,GAAG,CAAC,QAA4B,KACjD,SAAS;QACT,aAAa,KACT,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EACpB,CAAA,CACL;IAEL,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE;YAC5D,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,MAAM,IAAI,WAAW;AAC5C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,kBACY,UAAU,EAAA;AAEvB,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;AAE5D,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;gBAC1B,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;aACjD,CAAC,EAAA,EAED,OAAO,CACN;QAEL,iBAAiB,KAAK,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CACxD;AAEd;;;;"}