@alfalab/core-components-select 19.1.7 → 19.1.8-alfasans

package/modern/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_gki7q {
+.select__option_13pp8 {
     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_gki7q:not(.select__disabled_gki7q):active {
+.select__option_13pp8:not(.select__disabled_13pp8):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_gki7q:before {
+.select__option_13pp8: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_gki7q:first-child:before {
+.select__option_13pp8:first-child:before {
         display: none;
     }
-.select__size-48_gki7q {
+.select__size-48_13pp8 {
     min-height: var(--size-s-height);
 }
-.select__size-56_gki7q {
+.select__size-56_13pp8 {
     min-height: var(--size-m-height);
 }
-.select__size-64_gki7q {
+.select__size-64_13pp8 {
     min-height: var(--size-l-height);
 }
-.select__size-72_gki7q {
+.select__size-72_13pp8 {
     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_gki7q:before {
+.select__size-72_13pp8:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_gki7q {
+.select__selected_13pp8 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_gki7q {
+.select__highlighted_13pp8 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_gki7q:before,
-    .select__highlighted_gki7q + .select__option_gki7q:before {
+.select__highlighted_13pp8:before,
+    .select__highlighted_13pp8 + .select__option_13pp8:before {
         opacity: 0;
     }
-.select__disabled_gki7q {
+.select__disabled_13pp8 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_gki7q {
+.select__content_13pp8 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_gki7q {
+.select__textContent_13pp8 {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_gki7q","disabled":"select__disabled_gki7q","size-48":"select__size-48_gki7q","size-56":"select__size-56_gki7q","size-64":"select__size-64_gki7q","size-72":"select__size-72_gki7q","selected":"select__selected_gki7q","highlighted":"select__highlighted_gki7q","content":"select__content_gki7q","textContent":"select__textContent_gki7q"};
+const styles = {"option":"select__option_13pp8","disabled":"select__disabled_13pp8","size-48":"select__size-48_13pp8","size-56":"select__size-56_13pp8","size-64":"select__size-64_13pp8","size-72":"select__size-72_13pp8","selected":"select__selected_13pp8","highlighted":"select__highlighted_13pp8","content":"select__content_13pp8","textContent":"select__textContent_13pp8"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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_16w4h {
+.select__optionsList_dz7dv {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
 }
-.select__optionsList_16w4h .select__scrollable_16w4h {
+.select__optionsList_dz7dv .select__scrollable_dz7dv {
         overflow: auto;
         width: 100%;
     }
-.select__optionsList_16w4h .select__scrollable_16w4h .select__verticalBar_16w4h.select__verticalBar_16w4h {
+.select__optionsList_dz7dv .select__scrollable_dz7dv .select__verticalBar_dz7dv.select__verticalBar_dz7dv {
             top: var(--select-options-list-scrollbar-gap);
             height: calc(100% - 2 * var(--select-options-list-scrollbar-gap));
         }
-.select__optionsList_16w4h .select__scrollable_16w4h .select__verticalBar_16w4h.select__verticalBar_16w4h.select__verticalBarWithHeader_16w4h {
+.select__optionsList_dz7dv .select__scrollable_dz7dv .select__verticalBar_dz7dv.select__verticalBar_dz7dv.select__verticalBarWithHeader_dz7dv {
                 top: 0;
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_16w4h .select__scrollable_16w4h .select__verticalBar_16w4h.select__verticalBar_16w4h.select__verticalBarWithFooter_16w4h {
+.select__optionsList_dz7dv .select__scrollable_dz7dv .select__verticalBar_dz7dv.select__verticalBar_dz7dv.select__verticalBarWithFooter_dz7dv {
                 top: var(--select-options-list-scrollbar-gap);
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_16w4h .select__scrollable_16w4h .select__verticalBar_16w4h.select__verticalBar_16w4h.select__verticalBarWithHeader_16w4h.select__verticalBarWithFooter_16w4h {
+.select__optionsList_dz7dv .select__scrollable_dz7dv .select__verticalBar_dz7dv.select__verticalBar_dz7dv.select__verticalBarWithHeader_dz7dv.select__verticalBarWithFooter_dz7dv {
                 top: 0;
                 height: 100%;
             }
-.select__optionsListHeader_16w4h {
+.select__optionsListHeader_dz7dv {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListHeader_16w4h.select__headerHighlighted_16w4h {
+.select__optionsListHeader_dz7dv.select__headerHighlighted_dz7dv {
         border-bottom-color: var(--color-light-neutral-300);
     }
-.select__optionsListFooter_16w4h {
+.select__optionsListFooter_dz7dv {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListFooter_16w4h.select__withBorder_16w4h {
+.select__optionsListFooter_dz7dv.select__withBorder_dz7dv {
         border-top-color: var(--color-light-neutral-300);
     }
-.select__mask_16w4h {
+.select__mask_dz7dv {
     min-width: 4000px;
 }
-.select__emptyPlaceholder_16w4h {
+.select__emptyPlaceholder_dz7dv {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__size-72_16w4h .select__emptyPlaceholder_16w4h {
+.select__size-72_dz7dv .select__emptyPlaceholder_dz7dv {
     padding: var(--gap-24) var(--gap-16);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optionsList":"select__optionsList_16w4h","scrollable":"select__scrollable_16w4h","verticalBar":"select__verticalBar_16w4h","verticalBarWithHeader":"select__verticalBarWithHeader_16w4h","verticalBarWithFooter":"select__verticalBarWithFooter_16w4h","optionsListHeader":"select__optionsListHeader_16w4h","headerHighlighted":"select__headerHighlighted_16w4h","optionsListFooter":"select__optionsListFooter_16w4h","withBorder":"select__withBorder_16w4h","mask":"select__mask_16w4h","emptyPlaceholder":"select__emptyPlaceholder_16w4h","size-72":"select__size-72_16w4h"};
+const styles = {"optionsList":"select__optionsList_dz7dv","scrollable":"select__scrollable_dz7dv","verticalBar":"select__verticalBar_dz7dv","verticalBarWithHeader":"select__verticalBarWithHeader_dz7dv","verticalBarWithFooter":"select__verticalBarWithFooter_dz7dv","optionsListHeader":"select__optionsListHeader_dz7dv","headerHighlighted":"select__headerHighlighted_dz7dv","optionsListFooter":"select__optionsListFooter_dz7dv","withBorder":"select__withBorder_dz7dv","mask":"select__mask_dz7dv","emptyPlaceholder":"select__emptyPlaceholder_dz7dv","size-72":"select__size-72_dz7dv"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/search/index.css

@@ -1,3 +1,3 @@
-.select__component_1dzaz.select__component_1dzaz {
+.select__component_1un2y.select__component_1un2y {
     width: auto;
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_1dzaz"};
+const styles = {"component":"select__component_1un2y"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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_7pw7q {
+.select__virtualOptionsList_b587l {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
     justify-content: space-between;
 }
-.select__virtualOptionsListHeader_7pw7q {
+.select__virtualOptionsListHeader_b587l {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
 }
-.select__virtualOptionsListFooter_7pw7q {
+.select__virtualOptionsListFooter_b587l {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
 }
-.select__virtualOptionsListFooter_7pw7q.select__withBorder_7pw7q {
+.select__virtualOptionsListFooter_b587l.select__withBorder_b587l {
         border-top: 1px solid var(--color-light-neutral-300);
     }
-.select__scrollable_7pw7q {
+.select__scrollable_b587l {
     position: relative;
     overflow: auto;
     width: 100%;
 }
-.select__inner_7pw7q {
+.select__inner_b587l {
     position: relative;
     width: 100%;
 }
-.select__virtualRow_7pw7q {
+.select__virtualRow_b587l {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
     width: 100%;
 }
-.select__virtualRow_7pw7q:before {
+.select__virtualRow_b587l: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_7pw7q:first-child:before {
+.select__virtualRow_b587l:first-child:before {
         display: none;
     }
-.select__highlighted_7pw7q:before,
-    .select__highlighted_7pw7q + .select__virtualRow_7pw7q:before {
+.select__highlighted_b587l:before,
+    .select__highlighted_b587l + .select__virtualRow_b587l:before {
         display: none;
     }
-.select__emptyPlaceholder_7pw7q {
+.select__emptyPlaceholder_b587l {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
     flex: 1;
 }
-.select__size-72_7pw7q .select__emptyPlaceholder_7pw7q {
+.select__size-72_b587l .select__emptyPlaceholder_b587l {
     padding: var(--gap-24) var(--gap-16);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"virtualOptionsList":"select__virtualOptionsList_7pw7q","virtualOptionsListHeader":"select__virtualOptionsListHeader_7pw7q","virtualOptionsListFooter":"select__virtualOptionsListFooter_7pw7q","withBorder":"select__withBorder_7pw7q","scrollable":"select__scrollable_7pw7q","inner":"select__inner_7pw7q","virtualRow":"select__virtualRow_7pw7q","highlighted":"select__highlighted_7pw7q","emptyPlaceholder":"select__emptyPlaceholder_7pw7q","size-72":"select__size-72_7pw7q"};
+const styles = {"virtualOptionsList":"select__virtualOptionsList_b587l","virtualOptionsListHeader":"select__virtualOptionsListHeader_b587l","virtualOptionsListFooter":"select__virtualOptionsListFooter_b587l","withBorder":"select__withBorder_b587l","scrollable":"select__scrollable_b587l","inner":"select__inner_b587l","virtualRow":"select__virtualRow_b587l","highlighted":"select__highlighted_b587l","emptyPlaceholder":"select__emptyPlaceholder_b587l","size-72":"select__size-72_b587l"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/mobile/modal.mobile.css

@@ -2,7 +2,7 @@
     --gap-xs: 8px;
     --gap-8: var(--gap-xs);
 }
-.select__header_a3kcp {
+.select__header_hv322 {
     padding-right: var(--gap-8);
     padding-left: var(--gap-8);
 }

package/modern/mobile/modal.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './modal.mobile.css';
 
-const styles = {"header":"select__header_a3kcp"};
+const styles = {"header":"select__header_hv322"};
 
 export { styles as default };
 //# sourceMappingURL=modal.mobile.module.css.js.map

package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -12,14 +12,14 @@
 :root {
     --select-option-list-footer-button-gap: var(--gap-8);
 }
-.select__footer_1sfv8 {
+.select__footer_1btsd {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_1sfv8.select__size-72_1sfv8 {
+.select__footer_1btsd.select__size-72_1btsd {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_1sfv8 > .select__button_1sfv8 + .select__button_1sfv8 {
+.select__footer_1btsd > .select__button_1btsd + .select__button_1btsd {
         margin-left: var(--select-option-list-footer-button-gap);
     }

package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_1sfv8","size-72":"select__size-72_1sfv8","button":"select__button_1sfv8"};
+const styles = {"footer":"select__footer_1btsd","size-72":"select__size-72_1btsd","button":"select__button_1btsd"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -6,16 +6,16 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.select__desktop_xi3y4 {
+.select__desktop_11llj {
     padding: var(--gap-12);
 }
-.select__desktop_xi3y4.select__size-72_xi3y4 {
+.select__desktop_11llj.select__size-72_11llj {
         padding-left: var(--gap-16);
     }
-.select__mobile_xi3y4 {
+.select__mobile_11llj {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_xi3y4 {
+.select__positionAfter_11llj {
     margin-left: 0;
     margin-left: initial;
 }

package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"desktop":"select__desktop_xi3y4","size-72":"select__size-72_xi3y4","mobile":"select__mobile_xi3y4","positionAfter":"select__positionAfter_xi3y4"};
+const styles = {"desktop":"select__desktop_11llj","size-72":"select__size-72_11llj","mobile":"select__mobile_11llj","positionAfter":"select__positionAfter_11llj"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_sbv5r {
+.select__skeleton_1igtv {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/modern/presets/useSelectWithLoading/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"skeleton":"select__skeleton_sbv5r"};
+const styles = {"skeleton":"select__skeleton_1igtv"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -4,17 +4,11 @@ import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 import styles from './index.module.css';
 
-const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', position = 'before', content, }) => {
-    const renderCheckmarkIcon = () => (React.createElement(CheckmarkMIcon, { className: cn(styles.singleIcon, styles[position], {
-            [styles.selected]: selected,
-        }) }));
-    return multiple ? (React.createElement(Checkbox, { block: true, checked: selected, disabled: disabled, contentClassName: cn({ [styles.positionAfter]: position === 'after' }), className: cn(styles.checkmark, styles[align], className, {
-            [styles.selected]: selected,
-        }), size: 24, position: position, label: content, hiddenInput: true })) : (React.createElement("div", { className: cn(styles.container, styles[align], className) },
-        position === 'before' && renderCheckmarkIcon(),
-        React.createElement("div", { className: styles.content }, content),
-        position === 'after' && renderCheckmarkIcon()));
-};
+const BaseCheckmark = ({ selected, disabled = false, className, multiple, align = 'center', position = 'before', }) => multiple ? (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: cn(styles.checkmark, styles[position], styles[align], className, {
+        [styles.selected]: selected,
+    }), size: 24, hiddenInput: true })) : (React.createElement(CheckmarkMIcon, { className: cn(styles.singleIcon, styles[position], styles[align], className, {
+        [styles.selected]: selected,
+    }) }));
 
 export { BaseCheckmark };
 //# sourceMappingURL=Component.js.map

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

@@ -1 +1 @@
-{"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":[],"mappings":";;;;;;AAUa,MAAA,aAAa,GAAuB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,QAAQ,EACnB,OAAO,GACV,KAAI;IACD,MAAM,mBAAmB,GAAG,OACxB,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC/C,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;SAC9B,CAAC,EAAA,CACJ,CACL;IAED,OAAO,QAAQ,IACX,KAAC,CAAA,aAAA,CAAA,QAAQ,EACL,EAAA,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,QAAQ,KAAK,OAAO,EAAE,CAAC,EACtE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACtD,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,SAAA,CAAC,EACF,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,IAAI,EACnB,CAAA,KAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAA;AACzD,QAAA,QAAQ,KAAK,QAAQ,IAAI,mBAAmB,EAAE;AAE/C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,OAAO,CAAO;AAE9C,QAAA,QAAQ,KAAK,OAAO,IAAI,mBAAmB,EAAE,CAC5C,CACT;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}) =>\n    multiple ? (\n        <Checkbox\n            checked={selected}\n            disabled={disabled}\n            className={cn(styles.checkmark, styles[position], styles[align], className, {\n                [styles.selected]: selected,\n            })}\n            size={24}\n            hiddenInput={true}\n        />\n    ) : (\n        <CheckmarkMIcon\n            className={cn(styles.singleIcon, styles[position], styles[align], className, {\n                [styles.selected]: selected,\n            })}\n        />\n    );\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,aAAa,GAAuB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,QAAQ,GACtB,KACG,QAAQ,IACJ,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACxE,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,KAAA,CAAC,EACF,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,IAAI,EACnB,CAAA,KAEF,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;AACzE,QAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;KAC9B,CAAC,EAAA,CACJ;;;;"}

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

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

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

@@ -8,6 +8,7 @@ const BaseOption = ({ className, option, children, selected, highlighted, disabl
     const { showCheckMark = true } = option;
     const isTextContent = !isValidElement(content);
     const showCheckmark = Checkmark && showCheckMark;
+    const renderCheckmark = (position) => showCheckmark && (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: position }));
     return (React.createElement("div", { ...innerProps, className: cn(styles.option, size && styles[`size-${size}`], className, {
             [styles.highlighted]: !mobile && highlighted,
             [styles.selected]: selected,
@@ -16,7 +17,10 @@ const BaseOption = ({ className, option, children, selected, highlighted, disabl
             [styles.mobile]: mobile,
             [styles.checkmarkAfter]: showCheckmark && !isTextContent && checkmarkPosition === 'after',
             [styles.checkmarkBefore]: showCheckmark && !isTextContent && checkmarkPosition === 'before',
-        }), "data-test-id": dataTestId, "aria-label": option?.value?.name }, showCheckmark ? (React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple, align: align, position: checkmarkPosition, content: content })) : (React.createElement("div", { className: cn(styles.content) }, content))));
+        }), "data-test-id": dataTestId, "aria-label": option?.value?.name },
+        checkmarkPosition === 'before' && renderCheckmark('before'),
+        React.createElement("div", { className: cn(styles.content) }, content),
+        checkmarkPosition === 'after' && renderCheckmark('after')));
 };
 
 export { BaseOption };

package/moderncssm/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    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":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AACvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,aAAa;IAEhD,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,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;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,cAAc,GAClB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;AACpE,YAAA,CAAC,MAAM,CAAC,eAAe,GACnB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AACxE,SAAA,CAAC,EACY,cAAA,EAAA,UAAU,EACZ,YAAA,EAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAE9B,EAAA,aAAa,IACV,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,OAAO,EAClB,CAAA,KAEF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAA,EAAG,OAAO,CAAO,CACtD,CACC;AAEd;;;;"}
+{"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    const renderCheckmark = (position: 'before' | 'after') =>\n        showCheckmark && (\n            <Checkmark\n                disabled={disabled}\n                selected={selected}\n                multiple={multiple}\n                align={align}\n                position={position}\n            />\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]:\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            {checkmarkPosition === 'before' && renderCheckmark('before')}\n\n            <div className={cn(styles.content)}>{content}</div>\n\n            {checkmarkPosition === 'after' && renderCheckmark('after')}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;MAQa,UAAU,GAAoB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,aAAa,EACzB,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,EACjD,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,UAAU,EACV,MAAM,GAAG,KAAK,EACd,IAAI,GACP,KAAI;IACD,MAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,GAAG;AACxD,IAAA,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,MAAM;AACvC,IAAA,MAAM,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,aAAa;AAEhD,IAAA,MAAM,eAAe,GAAG,CAAC,QAA4B,KACjD,aAAa,KACT,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAAA,CACpB,CACL;IAEL,QACI,gCACQ,UAAU,EACd,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,EAAE;YACpE,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;AAC3B,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa;AACnC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,cAAc,GAClB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,OAAO;AACpE,YAAA,CAAC,MAAM,CAAC,eAAe,GACnB,aAAa,IAAI,CAAC,aAAa,IAAI,iBAAiB,KAAK,QAAQ;AACxE,SAAA,CAAC,kBACY,UAAU,EAAA,YAAA,EACZ,MAAM,EAAE,KAAK,EAAE,IAAI,EAAA;AAE9B,QAAA,iBAAiB,KAAK,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;QAE5D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,EAAA,OAAO,CAAO;QAElD,iBAAiB,KAAK,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CACxD;AAEd;;;;"}

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

@@ -15,7 +15,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;

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

@@ -40,7 +40,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);
 
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -52,7 +53,8 @@
         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);
     }
 
 .value {
@@ -65,7 +67,8 @@
         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);
     }
 
 .focusVisible {

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

@@ -29,7 +29,7 @@
     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);

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

@@ -21,7 +21,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;

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

@@ -21,7 +21,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;