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

package/components/option/desktop/index.css

@@ -14,8 +14,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 {
     --disabled-cursor: not-allowed;
@@ -43,11 +44,12 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_14hbm {
+.select__option_15fuw {
     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);
 
     display: flex;
     align-items: center;
@@ -60,11 +62,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_14hbm:not(.select__disabled_14hbm):active {
+.select__option_15fuw:not(.select__disabled_15fuw):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_14hbm:before {
+.select__option_15fuw:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,59 +77,59 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_14hbm:first-child:before {
+.select__option_15fuw:first-child:before {
         display: none;
     }
-.select__size-48_14hbm {
+.select__size-48_15fuw {
     min-height: var(--size-s-height);
 }
-.select__size-56_14hbm {
+.select__size-56_15fuw {
     min-height: var(--size-m-height);
 }
-.select__size-64_14hbm {
+.select__size-64_15fuw {
     min-height: var(--size-l-height);
 }
-.select__size-72_14hbm {
+.select__size-72_15fuw {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
 }
-.select__size-72_14hbm:before {
+.select__size-72_15fuw:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_14hbm {
+.select__selected_15fuw {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_14hbm {
+.select__highlighted_15fuw {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_14hbm:before,
-    .select__highlighted_14hbm + .select__option_14hbm:before {
+.select__highlighted_15fuw:before,
+    .select__highlighted_15fuw + .select__option_15fuw:before {
         opacity: 0;
     }
-.select__disabled_14hbm {
+.select__disabled_15fuw {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_14hbm {
+.select__content_15fuw {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_14hbm {
+.select__textContent_15fuw {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }
-.select__highlighted_14hbm {
+.select__highlighted_15fuw {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_14hbm:before,
-    .select__highlighted_14hbm + .select__option_14hbm:before {
+.select__highlighted_15fuw:before,
+    .select__highlighted_15fuw + .select__option_15fuw:before {
         opacity: 0;
     }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_14hbm","disabled":"select__disabled_14hbm","size-48":"select__size-48_14hbm","size-56":"select__size-56_14hbm","size-64":"select__size-64_14hbm","size-72":"select__size-72_14hbm","selected":"select__selected_14hbm","highlighted":"select__highlighted_14hbm","content":"select__content_14hbm","textContent":"select__textContent_14hbm"};
+var styles = {"option":"select__option_15fuw","disabled":"select__disabled_15fuw","size-48":"select__size-48_15fuw","size-56":"select__size-56_15fuw","size-64":"select__size-64_15fuw","size-72":"select__size-72_15fuw","selected":"select__selected_15fuw","highlighted":"select__highlighted_15fuw","content":"select__content_15fuw","textContent":"select__textContent_15fuw"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/mobile/index.css

@@ -14,8 +14,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 {
     --disabled-cursor: not-allowed;
@@ -43,11 +44,12 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_1fpto {
+.select__option_c6bk6 {
     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);
 
     display: flex;
     align-items: center;
@@ -60,11 +62,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_1fpto:not(.select__disabled_1fpto):active {
+.select__option_c6bk6:not(.select__disabled_c6bk6):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_1fpto:before {
+.select__option_c6bk6:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,51 +77,51 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_1fpto:first-child:before {
+.select__option_c6bk6:first-child:before {
         display: none;
     }
-.select__size-48_1fpto {
+.select__size-48_c6bk6 {
     min-height: var(--size-s-height);
 }
-.select__size-56_1fpto {
+.select__size-56_c6bk6 {
     min-height: var(--size-m-height);
 }
-.select__size-64_1fpto {
+.select__size-64_c6bk6 {
     min-height: var(--size-l-height);
 }
-.select__size-72_1fpto {
+.select__size-72_c6bk6 {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
 }
-.select__size-72_1fpto:before {
+.select__size-72_c6bk6:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_1fpto {
+.select__selected_c6bk6 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_1fpto {
+.select__highlighted_c6bk6 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_1fpto:before,
-    .select__highlighted_1fpto + .select__option_1fpto:before {
+.select__highlighted_c6bk6:before,
+    .select__highlighted_c6bk6 + .select__option_c6bk6:before {
         opacity: 0;
     }
-.select__disabled_1fpto {
+.select__disabled_c6bk6 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_1fpto {
+.select__content_c6bk6 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_1fpto {
+.select__textContent_c6bk6 {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_1fpto","disabled":"select__disabled_1fpto","size-48":"select__size-48_1fpto","size-56":"select__size-56_1fpto","size-64":"select__size-64_1fpto","size-72":"select__size-72_1fpto","selected":"select__selected_1fpto","highlighted":"select__highlighted_1fpto","content":"select__content_1fpto","textContent":"select__textContent_1fpto"};
+var styles = {"option":"select__option_c6bk6","disabled":"select__disabled_c6bk6","size-48":"select__size-48_c6bk6","size-56":"select__size-56_c6bk6","size-64":"select__size-64_c6bk6","size-72":"select__size-72_c6bk6","selected":"select__selected_c6bk6","highlighted":"select__highlighted_c6bk6","content":"select__content_c6bk6","textContent":"select__textContent_c6bk6"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/options-list/index.css

@@ -15,57 +15,57 @@
     --select-options-list-scrollbar-gap: var(--gap-12);
     --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
 }
-.select__optionsList_7qt0g {
+.select__optionsList_1lgxr {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
 }
-.select__optionsList_7qt0g .select__scrollable_7qt0g {
+.select__optionsList_1lgxr .select__scrollable_1lgxr {
         overflow: auto;
         width: 100%;
     }
-.select__optionsList_7qt0g .select__scrollable_7qt0g .select__verticalBar_7qt0g.select__verticalBar_7qt0g {
+.select__optionsList_1lgxr .select__scrollable_1lgxr .select__verticalBar_1lgxr.select__verticalBar_1lgxr {
             top: var(--select-options-list-scrollbar-gap);
             height: calc(100% - 2 * var(--select-options-list-scrollbar-gap));
         }
-.select__optionsList_7qt0g .select__scrollable_7qt0g .select__verticalBar_7qt0g.select__verticalBar_7qt0g.select__verticalBarWithHeader_7qt0g {
+.select__optionsList_1lgxr .select__scrollable_1lgxr .select__verticalBar_1lgxr.select__verticalBar_1lgxr.select__verticalBarWithHeader_1lgxr {
                 top: 0;
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_7qt0g .select__scrollable_7qt0g .select__verticalBar_7qt0g.select__verticalBar_7qt0g.select__verticalBarWithFooter_7qt0g {
+.select__optionsList_1lgxr .select__scrollable_1lgxr .select__verticalBar_1lgxr.select__verticalBar_1lgxr.select__verticalBarWithFooter_1lgxr {
                 top: var(--select-options-list-scrollbar-gap);
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_7qt0g .select__scrollable_7qt0g .select__verticalBar_7qt0g.select__verticalBar_7qt0g.select__verticalBarWithHeader_7qt0g.select__verticalBarWithFooter_7qt0g {
+.select__optionsList_1lgxr .select__scrollable_1lgxr .select__verticalBar_1lgxr.select__verticalBar_1lgxr.select__verticalBarWithHeader_1lgxr.select__verticalBarWithFooter_1lgxr {
                 top: 0;
                 height: 100%;
             }
-.select__optionsListHeader_7qt0g {
+.select__optionsListHeader_1lgxr {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListHeader_7qt0g.select__headerHighlighted_7qt0g {
+.select__optionsListHeader_1lgxr.select__headerHighlighted_1lgxr {
         border-bottom-color: var(--color-light-neutral-300);
     }
-.select__optionsListFooter_7qt0g {
+.select__optionsListFooter_1lgxr {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListFooter_7qt0g.select__withBorder_7qt0g {
+.select__optionsListFooter_1lgxr.select__withBorder_1lgxr {
         border-top-color: var(--color-light-neutral-300);
     }
-.select__mask_7qt0g {
+.select__mask_1lgxr {
     min-width: 4000px;
 }
-.select__emptyPlaceholder_7qt0g {
+.select__emptyPlaceholder_1lgxr {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__size-72_7qt0g .select__emptyPlaceholder_7qt0g {
+.select__size-72_1lgxr .select__emptyPlaceholder_1lgxr {
     padding: var(--gap-24) var(--gap-16);
 }

package/components/options-list/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"optionsList":"select__optionsList_7qt0g","scrollable":"select__scrollable_7qt0g","verticalBar":"select__verticalBar_7qt0g","verticalBarWithHeader":"select__verticalBarWithHeader_7qt0g","verticalBarWithFooter":"select__verticalBarWithFooter_7qt0g","optionsListHeader":"select__optionsListHeader_7qt0g","headerHighlighted":"select__headerHighlighted_7qt0g","optionsListFooter":"select__optionsListFooter_7qt0g","withBorder":"select__withBorder_7qt0g","mask":"select__mask_7qt0g","emptyPlaceholder":"select__emptyPlaceholder_7qt0g","size-72":"select__size-72_7qt0g"};
+var styles = {"optionsList":"select__optionsList_1lgxr","scrollable":"select__scrollable_1lgxr","verticalBar":"select__verticalBar_1lgxr","verticalBarWithHeader":"select__verticalBarWithHeader_1lgxr","verticalBarWithFooter":"select__verticalBarWithFooter_1lgxr","optionsListHeader":"select__optionsListHeader_1lgxr","headerHighlighted":"select__headerHighlighted_1lgxr","optionsListFooter":"select__optionsListFooter_1lgxr","withBorder":"select__withBorder_1lgxr","mask":"select__mask_1lgxr","emptyPlaceholder":"select__emptyPlaceholder_1lgxr","size-72":"select__size-72_1lgxr"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/search/index.css

@@ -1,3 +1,3 @@
-.select__component_u7js4.select__component_u7js4 {
+.select__component_133p9.select__component_133p9 {
     width: auto;
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"select__component_u7js4"};
+var styles = {"component":"select__component_133p9"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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

@@ -20,42 +20,42 @@
     --select-option-left-padding: var(--gap-12);
     --select-option-right-padding: var(--gap-12);
 }
-.select__virtualOptionsList_rhnew {
+.select__virtualOptionsList_12olv {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
     justify-content: space-between;
 }
-.select__virtualOptionsListHeader_rhnew {
+.select__virtualOptionsListHeader_12olv {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
 }
-.select__virtualOptionsListFooter_rhnew {
+.select__virtualOptionsListFooter_12olv {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
 }
-.select__virtualOptionsListFooter_rhnew.select__withBorder_rhnew {
+.select__virtualOptionsListFooter_12olv.select__withBorder_12olv {
         border-top: 1px solid var(--color-light-neutral-300);
     }
-.select__scrollable_rhnew {
+.select__scrollable_12olv {
     position: relative;
     overflow: auto;
     width: 100%;
 }
-.select__inner_rhnew {
+.select__inner_12olv {
     position: relative;
     width: 100%;
 }
-.select__virtualRow_rhnew {
+.select__virtualRow_12olv {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
     width: 100%;
 }
-.select__virtualRow_rhnew:before {
+.select__virtualRow_12olv:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -66,18 +66,18 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
     }
-.select__virtualRow_rhnew:first-child:before {
+.select__virtualRow_12olv:first-child:before {
         display: none;
     }
-.select__highlighted_rhnew:before,
-    .select__highlighted_rhnew + .select__virtualRow_rhnew:before {
+.select__highlighted_12olv:before,
+    .select__highlighted_12olv + .select__virtualRow_12olv:before {
         display: none;
     }
-.select__emptyPlaceholder_rhnew {
+.select__emptyPlaceholder_12olv {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
     flex: 1;
 }
-.select__size-72_rhnew .select__emptyPlaceholder_rhnew {
+.select__size-72_12olv .select__emptyPlaceholder_12olv {
     padding: var(--gap-24) var(--gap-16);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"virtualOptionsList":"select__virtualOptionsList_rhnew","virtualOptionsListHeader":"select__virtualOptionsListHeader_rhnew","virtualOptionsListFooter":"select__virtualOptionsListFooter_rhnew","withBorder":"select__withBorder_rhnew","scrollable":"select__scrollable_rhnew","inner":"select__inner_rhnew","virtualRow":"select__virtualRow_rhnew","highlighted":"select__highlighted_rhnew","emptyPlaceholder":"select__emptyPlaceholder_rhnew","size-72":"select__size-72_rhnew"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_12olv","virtualOptionsListHeader":"select__virtualOptionsListHeader_12olv","virtualOptionsListFooter":"select__virtualOptionsListFooter_12olv","withBorder":"select__withBorder_12olv","scrollable":"select__scrollable_12olv","inner":"select__inner_12olv","virtualRow":"select__virtualRow_12olv","highlighted":"select__highlighted_12olv","emptyPlaceholder":"select__emptyPlaceholder_12olv","size-72":"select__size-72_12olv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/cssm/components/base-checkmark/Component.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { type FC } from 'react';
 import { type CheckmarkProps } from '../../typings';
-export declare const BaseCheckmark: ({ selected, disabled, className, multiple, align, }: CheckmarkProps) => React.JSX.Element;
+export declare const BaseCheckmark: FC<CheckmarkProps>;

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

@@ -15,13 +15,20 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var BaseCheckmark = function (_a) {
-    var _b;
-    var selected = _a.selected, _c = _a.disabled, disabled = _c === void 0 ? false : _c, className = _a.className, multiple = _a.multiple, _d = _a.align, align = _d === void 0 ? 'center' : _d;
-    var checkmarkClassNames = cn__default.default(styles__default.default.checkmark, styles__default.default[align], className, (_b = {},
-        _b[styles__default.default.single] = !multiple,
-        _b[styles__default.default.selected] = selected,
-        _b));
-    return multiple ? (React__default.default.createElement(cssm.Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 24, hiddenInput: true })) : (React__default.default.createElement(CheckmarkMIcon.CheckmarkMIcon, { className: checkmarkClassNames }));
+    var _b, _c;
+    var selected = _a.selected, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, multiple = _a.multiple, _e = _a.align, align = _e === void 0 ? 'center' : _e, _f = _a.position, position = _f === void 0 ? 'before' : _f, content = _a.content;
+    var renderCheckmarkIcon = function () {
+        var _a;
+        return (React__default.default.createElement(CheckmarkMIcon.CheckmarkMIcon, { className: cn__default.default(styles__default.default.singleIcon, styles__default.default[position], (_a = {},
+                _a[styles__default.default.selected] = selected,
+                _a)) }));
+    };
+    return multiple ? (React__default.default.createElement(cssm.Checkbox, { block: true, checked: selected, disabled: disabled, contentClassName: cn__default.default((_b = {}, _b[styles__default.default.positionAfter] = position === 'after', _b)), className: cn__default.default(styles__default.default.checkmark, styles__default.default[align], className, (_c = {},
+            _c[styles__default.default.selected] = selected,
+            _c)), size: 24, position: position, label: content, hiddenInput: true })) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container, styles__default.default[align], className) },
+        position === 'before' && renderCheckmarkIcon(),
+        React__default.default.createElement("div", { className: styles__default.default.content }, content),
+        position === 'after' && renderCheckmarkIcon()));
 };
 
 exports.BaseCheckmark = BaseCheckmark;

package/cssm/components/base-checkmark/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } 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 BaseCheckmark = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n}: CheckmarkProps) => {\n    const checkmarkClassNames = cn(styles.checkmark, styles[align], className, {\n        [styles.single]: !multiple,\n        [styles.selected]: selected,\n    });\n\n    return multiple ? (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={checkmarkClassNames}\n            size={24}\n            hiddenInput={true}\n        />\n    ) : (\n        <CheckmarkMIcon className={checkmarkClassNames} />\n    );\n};\n"],"names":["cn","styles","React","Checkbox","CheckmarkMIcon"],"mappings":";;;;;;;;;;;;;;;;AAUO,IAAM,aAAa,GAAG,UAAC,EAMb,EAAA;;QALb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,KAAA,EAChB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,KAAgB,EAAhB,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA;AAEhB,IAAA,IAAM,mBAAmB,GAAGA,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACrE,QAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,CAAC,QAAQ;AAC1B,QAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;YAC7B;AAEF,IAAA,OAAO,QAAQ,IACXC,sBAAA,CAAA,aAAA,CAACC,aAAQ,EACL,EAAA,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,IAAI,EAAA,CACnB,KAEFD,sBAAA,CAAA,aAAA,CAACE,6BAAc,EAAC,EAAA,SAAS,EAAE,mBAAmB,EAAA,CAAI,CACrD;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-checkmark/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Checkbox } 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 BaseCheckmark: FC<CheckmarkProps> = ({\n    selected,\n    disabled = false,\n    className,\n    multiple,\n    align = 'center',\n    position = 'before',\n    content,\n}) => {\n    const renderCheckmarkIcon = () => (\n        <CheckmarkMIcon\n            className={cn(styles.singleIcon, styles[position], {\n                [styles.selected]: selected,\n            })}\n        />\n    );\n\n    return multiple ? (\n        <Checkbox\n            block={true}\n            checked={selected}\n            disabled={disabled}\n            contentClassName={cn({ [styles.positionAfter]: position === 'after' })}\n            className={cn(styles.checkmark, styles[align], className, {\n                [styles.selected]: selected,\n            })}\n            size={24}\n            position={position}\n            label={content}\n            hiddenInput={true}\n        />\n    ) : (\n        <div className={cn(styles.container, styles[align], className)}>\n            {position === 'before' && renderCheckmarkIcon()}\n\n            <div className={styles.content}>{content}</div>\n\n            {position === 'after' && renderCheckmarkIcon()}\n        </div>\n    );\n};\n"],"names":["React","CheckmarkMIcon","cn","styles","Checkbox"],"mappings":";;;;;;;;;;;;;;;;AAUO,IAAM,aAAa,GAAuB,UAAC,EAQjD,EAAA;;AAPG,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAgB,GAAA,EAAA,CAAA,QAAA,EAAhB,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EAChB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAgB,GAAA,EAAA,CAAA,KAAA,EAAhB,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,QAAQ,GAAA,EAAA,EAChB,EAAA,GAAA,EAAA,CAAA,QAAmB,EAAnB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,QAAQ,GAAA,EAAA,EACnB,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,mBAAmB,GAAG,YAAA;;AAAM,QAAA,QAC9BA,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EACX,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,UAAU,EAAEA,uBAAM,CAAC,QAAQ,CAAC,GAAA,EAAA,GAAA,EAAA;AAC7C,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,gBAAA,EAAA,EAAA,EAAA,CACJ;AAL4B,KAMjC;IAED,OAAO,QAAQ,IACXH,sBAAC,CAAA,aAAA,CAAAI,aAAQ,IACL,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAEF,mBAAE,WAAG,EAAC,CAAAC,uBAAM,CAAC,aAAa,CAAA,GAAG,QAAQ,KAAK,OAAO,EAAG,EAAA,EAAA,EACtE,SAAS,EAAED,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACpD,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC7B,YAAA,EAAA,EAAA,EACF,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,IAAI,GACnB,KAEFH,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEE,mBAAE,CAACC,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAA;AACzD,QAAA,QAAQ,KAAK,QAAQ,IAAI,mBAAmB,EAAE;AAE/C,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,uBAAM,CAAC,OAAO,EAAA,EAAG,OAAO,CAAO;AAE9C,QAAA,QAAQ,KAAK,OAAO,IAAI,mBAAmB,EAAE,CAC5C,CACT;AACL;;;;"}

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

@@ -1,3 +1,7 @@
+:root {
+    --gap-s: 12px;
+    --gap-12: var(--gap-s);
+}
 .checkmark {
     flex-shrink: 0;
     box-sizing: border-box;
@@ -8,12 +12,35 @@
 .checkmark.center {
         align-self: center;
     }
-.single {
+.positionAfter {
+    margin-left: 0;
+    margin-left: initial;
+}
+.container {
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+}
+.container.start {
+        align-items: flex-start;
+    }
+.container.center {
+        align-items: center;
+    }
+.singleIcon {
+    flex-shrink: 0;
     opacity: 0;
 }
-.single.selected {
+.singleIcon.before {
+        margin-right: var(--gap-12);
+    }
+.singleIcon.after {
+        margin-left: var(--gap-12);
+    }
+.singleIcon.selected {
         opacity: 1;
     }
+.content {
+    flex: 1;
+}

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

@@ -21,28 +21,16 @@ var BaseOption = function (_a) {
     var content = children || option.content || option.key;
     var _h = option.showCheckMark, showCheckMark = _h === void 0 ? true : _h;
     var isTextContent = !React.isValidElement(content);
-    var renderCheckmark = function () {
-        var _a;
-        if (Checkmark && showCheckMark) {
-            return (React__default.default.createElement(Checkmark, { className: cn__default.default((_a = {},
-                    _a[styles__default.default.checkmarkBeforeContent] = checkmarkPosition === 'before',
-                    _a[styles__default.default.checkmarkAfterContent] = checkmarkPosition === 'after',
-                    _a)), disabled: disabled, selected: selected, multiple: multiple, align: align }));
-        }
-        return null;
-    };
+    var showCheckmark = Checkmark && showCheckMark;
     return (React__default.default.createElement("div", tslib.__assign({}, innerProps, { className: cn__default.default(styles__default.default.option, size && styles__default.default["size-".concat(size)], className, (_b = {},
             _b[styles__default.default.highlighted] = !mobile && highlighted,
             _b[styles__default.default.selected] = selected,
             _b[styles__default.default.disabled] = disabled,
             _b[styles__default.default.textContent] = isTextContent,
             _b[styles__default.default.mobile] = mobile,
-            _b[styles__default.default.checkmarkAfter] = !isTextContent && checkmarkPosition === 'after',
-            _b[styles__default.default.checkmarkBefore] = !isTextContent && checkmarkPosition === 'before',
-            _b)), "data-test-id": dataTestId, "aria-label": (_c = option === null || option === void 0 ? void 0 : option.value) === null || _c === void 0 ? void 0 : _c.name }),
-        checkmarkPosition === 'before' && renderCheckmark(),
-        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content) }, content),
-        checkmarkPosition === 'after' && renderCheckmark()));
+            _b[styles__default.default.checkmarkAfter] = showCheckmark && !isTextContent && checkmarkPosition === 'after',
+            _b[styles__default.default.checkmarkBefore] = showCheckmark && !isTextContent && checkmarkPosition === 'before',
+            _b)), "data-test-id": dataTestId, "aria-label": (_c = option === null || option === void 0 ? void 0 : option.value) === null || _c === void 0 ? void 0 : _c.name }), showCheckmark ? (React__default.default.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: checkmarkPosition, content: content })) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.content) }, content))));
 };
 
 exports.BaseOption = BaseOption;

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n\n    const isTextContent = !isValidElement(content);\n\n    const renderCheckmark = () => {\n        if (Checkmark && showCheckMark) {\n            return (\n                <Checkmark\n                    className={cn({\n                        [styles.checkmarkBeforeContent]: checkmarkPosition === 'before',\n                        [styles.checkmarkAfterContent]: checkmarkPosition === 'after',\n                    })}\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    align={align}\n                />\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {checkmarkPosition === 'before' && renderCheckmark()}\n\n            <div className={cn(styles.content)}>{content}</div>\n\n            {checkmarkPosition === 'after' && renderCheckmark()}\n        </div>\n    );\n};\n"],"names":["BaseCheckmark","isValidElement","React","cn","styles"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/base-option/Component.tsx"],"sourcesContent":["import React, { type FC, isValidElement } from 'react';\nimport cn from 'classnames';\n\nimport { type OptionProps } from '../../typings';\nimport { BaseCheckmark } from '../base-checkmark';\n\nimport styles from './index.module.css';\n\nexport const BaseOption: FC<OptionProps> = ({\n    className,\n    option,\n    children,\n    selected,\n    highlighted,\n    disabled,\n    multiple,\n    Checkmark = BaseCheckmark,\n    checkmarkPosition = multiple ? 'before' : 'after',\n    align = 'center',\n    innerProps,\n    dataTestId,\n    mobile = false,\n    size,\n}) => {\n    const content = children || option.content || option.key;\n    const { showCheckMark = true } = option;\n    const isTextContent = !isValidElement(content);\n    const showCheckmark = Checkmark && showCheckMark;\n\n    return (\n        <div\n            {...innerProps}\n            className={cn(styles.option, size && styles[`size-${size}`], className, {\n                [styles.highlighted]: !mobile && highlighted,\n                [styles.selected]: selected,\n                [styles.disabled]: disabled,\n                [styles.textContent]: isTextContent,\n                [styles.mobile]: mobile,\n                [styles.checkmarkAfter]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'after',\n                [styles.checkmarkBefore]:\n                    showCheckmark && !isTextContent && checkmarkPosition === 'before',\n            })}\n            data-test-id={dataTestId}\n            aria-label={option?.value?.name}\n        >\n            {showCheckmark ? (\n                <Checkmark\n                    disabled={disabled}\n                    selected={selected}\n                    multiple={multiple}\n                    align={align}\n                    position={checkmarkPosition}\n                    content={content}\n                />\n            ) : (\n                <div className={cn(styles.content)}>{content}</div>\n            )}\n        </div>\n    );\n};\n"],"names":["BaseCheckmark","isValidElement","React","cn","styles"],"mappings":"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"}

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

@@ -15,8 +15,9 @@
     --gap-20: var(--gap-l);
 }
 :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 {
     --disabled-cursor: not-allowed;
@@ -38,7 +39,8 @@
     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);
 
     display: flex;
     align-items: center;
@@ -93,12 +95,6 @@
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.checkmarkBeforeContent {
-    margin-right: var(--gap-12);
-}
-.checkmarkAfterContent {
-    margin-left: var(--gap-12);
-}
 .content {
     flex: 1;
 }

package/cssm/components/checkmark/Component.d.ts

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