@alfalab/core-components-select 19.1.4 → 19.1.5-alfasans

package/components/footer/index.css

@@ -6,20 +6,20 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.select__footer_1094j {
+.select__footer_1komf {
     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_1094j .select__button_1094j:first-of-type {
+.select__footer_1komf .select__button_1komf:first-of-type {
         margin-right: var(--gap-16);
     }
-.select__button_1094j {
+.select__button_1komf {
     width: 50%;
 }
-.select__highlighted_1094j {
+.select__highlighted_1komf {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_1094j","button":"select__button_1094j","highlighted":"select__highlighted_1094j"};
+var styles = {"footer":"select__footer_1komf","button":"select__button_1komf","highlighted":"select__highlighted_1komf"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/optgroup/index.css

@@ -11,8 +11,9 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
 
@@ -23,7 +24,7 @@
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
 }
-.select__optgroup_m2dev {
+.select__optgroup_1tp9y {
     position: relative;
     display: flex;
     align-items: center;
@@ -33,21 +34,21 @@
     background: var(--select-optgroup-background);
     min-height: 40px;
 }
-.select__optgroup_m2dev + *[role='option']:before {
+.select__optgroup_1tp9y + *[role='option']:before {
         display: none;
     }
-.select__label_m2dev {
+.select__label_1tp9y {
     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_m2dev {
+.select__size-72_1tp9y {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"optgroup":"select__optgroup_m2dev","label":"select__label_m2dev","size-72":"select__size-72_m2dev"};
+var styles = {"optgroup":"select__optgroup_1tp9y","label":"select__label_1tp9y","size-72":"select__size-72_1tp9y"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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_1o32m {
+.select__option_1xlza {
     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_1o32m:not(.select__disabled_1o32m):active {
+.select__option_1xlza:not(.select__disabled_1xlza):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_1o32m:before {
+.select__option_1xlza: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_1o32m:first-child:before {
+.select__option_1xlza:first-child:before {
         display: none;
     }
-.select__size-48_1o32m {
+.select__size-48_1xlza {
     min-height: var(--size-s-height);
 }
-.select__size-56_1o32m {
+.select__size-56_1xlza {
     min-height: var(--size-m-height);
 }
-.select__size-64_1o32m {
+.select__size-64_1xlza {
     min-height: var(--size-l-height);
 }
-.select__size-72_1o32m {
+.select__size-72_1xlza {
     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_1o32m:before {
+.select__size-72_1xlza:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_1o32m {
+.select__selected_1xlza {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_1o32m {
+.select__highlighted_1xlza {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_1o32m:before,
-    .select__highlighted_1o32m + .select__option_1o32m:before {
+.select__highlighted_1xlza:before,
+    .select__highlighted_1xlza + .select__option_1xlza:before {
         opacity: 0;
     }
-.select__disabled_1o32m {
+.select__disabled_1xlza {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_1o32m {
+.select__content_1xlza {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_1o32m {
+.select__textContent_1xlza {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }
-.select__highlighted_1o32m {
+.select__highlighted_1xlza {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_1o32m:before,
-    .select__highlighted_1o32m + .select__option_1o32m:before {
+.select__highlighted_1xlza:before,
+    .select__highlighted_1xlza + .select__option_1xlza:before {
         opacity: 0;
     }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_1o32m","disabled":"select__disabled_1o32m","size-48":"select__size-48_1o32m","size-56":"select__size-56_1o32m","size-64":"select__size-64_1o32m","size-72":"select__size-72_1o32m","selected":"select__selected_1o32m","highlighted":"select__highlighted_1o32m","content":"select__content_1o32m","textContent":"select__textContent_1o32m"};
+var styles = {"option":"select__option_1xlza","disabled":"select__disabled_1xlza","size-48":"select__size-48_1xlza","size-56":"select__size-56_1xlza","size-64":"select__size-64_1xlza","size-72":"select__size-72_1xlza","selected":"select__selected_1xlza","highlighted":"select__highlighted_1xlza","content":"select__content_1xlza","textContent":"select__textContent_1xlza"};
 
 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_1wx79 {
+.select__option_1mtux {
     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_1wx79:not(.select__disabled_1wx79):active {
+.select__option_1mtux:not(.select__disabled_1mtux):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_1wx79:before {
+.select__option_1mtux: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_1wx79:first-child:before {
+.select__option_1mtux:first-child:before {
         display: none;
     }
-.select__size-48_1wx79 {
+.select__size-48_1mtux {
     min-height: var(--size-s-height);
 }
-.select__size-56_1wx79 {
+.select__size-56_1mtux {
     min-height: var(--size-m-height);
 }
-.select__size-64_1wx79 {
+.select__size-64_1mtux {
     min-height: var(--size-l-height);
 }
-.select__size-72_1wx79 {
+.select__size-72_1mtux {
     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_1wx79:before {
+.select__size-72_1mtux:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_1wx79 {
+.select__selected_1mtux {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_1wx79 {
+.select__highlighted_1mtux {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_1wx79:before,
-    .select__highlighted_1wx79 + .select__option_1wx79:before {
+.select__highlighted_1mtux:before,
+    .select__highlighted_1mtux + .select__option_1mtux:before {
         opacity: 0;
     }
-.select__disabled_1wx79 {
+.select__disabled_1mtux {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_1wx79 {
+.select__content_1mtux {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_1wx79 {
+.select__textContent_1mtux {
     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_1wx79","disabled":"select__disabled_1wx79","size-48":"select__size-48_1wx79","size-56":"select__size-56_1wx79","size-64":"select__size-64_1wx79","size-72":"select__size-72_1wx79","selected":"select__selected_1wx79","highlighted":"select__highlighted_1wx79","content":"select__content_1wx79","textContent":"select__textContent_1wx79"};
+var styles = {"option":"select__option_1mtux","disabled":"select__disabled_1mtux","size-48":"select__size-48_1mtux","size-56":"select__size-56_1mtux","size-64":"select__size-64_1mtux","size-72":"select__size-72_1mtux","selected":"select__selected_1mtux","highlighted":"select__highlighted_1mtux","content":"select__content_1mtux","textContent":"select__textContent_1mtux"};
 
 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_c5371 {
+.select__optionsList_d09d6 {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
 }
-.select__optionsList_c5371 .select__scrollable_c5371 {
+.select__optionsList_d09d6 .select__scrollable_d09d6 {
         overflow: auto;
         width: 100%;
     }
-.select__optionsList_c5371 .select__scrollable_c5371 .select__verticalBar_c5371.select__verticalBar_c5371 {
+.select__optionsList_d09d6 .select__scrollable_d09d6 .select__verticalBar_d09d6.select__verticalBar_d09d6 {
             top: var(--select-options-list-scrollbar-gap);
             height: calc(100% - 2 * var(--select-options-list-scrollbar-gap));
         }
-.select__optionsList_c5371 .select__scrollable_c5371 .select__verticalBar_c5371.select__verticalBar_c5371.select__verticalBarWithHeader_c5371 {
+.select__optionsList_d09d6 .select__scrollable_d09d6 .select__verticalBar_d09d6.select__verticalBar_d09d6.select__verticalBarWithHeader_d09d6 {
                 top: 0;
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_c5371 .select__scrollable_c5371 .select__verticalBar_c5371.select__verticalBar_c5371.select__verticalBarWithFooter_c5371 {
+.select__optionsList_d09d6 .select__scrollable_d09d6 .select__verticalBar_d09d6.select__verticalBar_d09d6.select__verticalBarWithFooter_d09d6 {
                 top: var(--select-options-list-scrollbar-gap);
                 height: calc(100% - var(--select-options-list-scrollbar-gap));
             }
-.select__optionsList_c5371 .select__scrollable_c5371 .select__verticalBar_c5371.select__verticalBar_c5371.select__verticalBarWithHeader_c5371.select__verticalBarWithFooter_c5371 {
+.select__optionsList_d09d6 .select__scrollable_d09d6 .select__verticalBar_d09d6.select__verticalBar_d09d6.select__verticalBarWithHeader_d09d6.select__verticalBarWithFooter_d09d6 {
                 top: 0;
                 height: 100%;
             }
-.select__optionsListHeader_c5371 {
+.select__optionsListHeader_d09d6 {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListHeader_c5371.select__headerHighlighted_c5371 {
+.select__optionsListHeader_d09d6.select__headerHighlighted_d09d6 {
         border-bottom-color: var(--color-light-neutral-300);
     }
-.select__optionsListFooter_c5371 {
+.select__optionsListFooter_d09d6 {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease;
 }
-.select__optionsListFooter_c5371.select__withBorder_c5371 {
+.select__optionsListFooter_d09d6.select__withBorder_d09d6 {
         border-top-color: var(--color-light-neutral-300);
     }
-.select__mask_c5371 {
+.select__mask_d09d6 {
     min-width: 4000px;
 }
-.select__emptyPlaceholder_c5371 {
+.select__emptyPlaceholder_d09d6 {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__size-72_c5371 .select__emptyPlaceholder_c5371 {
+.select__size-72_d09d6 .select__emptyPlaceholder_d09d6 {
     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_c5371","scrollable":"select__scrollable_c5371","verticalBar":"select__verticalBar_c5371","verticalBarWithHeader":"select__verticalBarWithHeader_c5371","verticalBarWithFooter":"select__verticalBarWithFooter_c5371","optionsListHeader":"select__optionsListHeader_c5371","headerHighlighted":"select__headerHighlighted_c5371","optionsListFooter":"select__optionsListFooter_c5371","withBorder":"select__withBorder_c5371","mask":"select__mask_c5371","emptyPlaceholder":"select__emptyPlaceholder_c5371","size-72":"select__size-72_c5371"};
+var styles = {"optionsList":"select__optionsList_d09d6","scrollable":"select__scrollable_d09d6","verticalBar":"select__verticalBar_d09d6","verticalBarWithHeader":"select__verticalBarWithHeader_d09d6","verticalBarWithFooter":"select__verticalBarWithFooter_d09d6","optionsListHeader":"select__optionsListHeader_d09d6","headerHighlighted":"select__headerHighlighted_d09d6","optionsListFooter":"select__optionsListFooter_d09d6","withBorder":"select__withBorder_d09d6","mask":"select__mask_d09d6","emptyPlaceholder":"select__emptyPlaceholder_d09d6","size-72":"select__size-72_d09d6"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/search/index.css

@@ -1,3 +1,3 @@
-.select__component_1v2sm.select__component_1v2sm {
+.select__component_lewqn.select__component_lewqn {
     width: auto;
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"select__component_1v2sm"};
+var styles = {"component":"select__component_lewqn"};
 
 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_1fl9q {
+.select__virtualOptionsList_aihid {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: sticky;
     justify-content: space-between;
 }
-.select__virtualOptionsListHeader_1fl9q {
+.select__virtualOptionsListHeader_aihid {
     box-sizing: border-box;
     border-bottom: 1px solid var(--color-light-neutral-300);
 }
-.select__virtualOptionsListFooter_1fl9q {
+.select__virtualOptionsListFooter_aihid {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
 }
-.select__virtualOptionsListFooter_1fl9q.select__withBorder_1fl9q {
+.select__virtualOptionsListFooter_aihid.select__withBorder_aihid {
         border-top: 1px solid var(--color-light-neutral-300);
     }
-.select__scrollable_1fl9q {
+.select__scrollable_aihid {
     position: relative;
     overflow: auto;
     width: 100%;
 }
-.select__inner_1fl9q {
+.select__inner_aihid {
     position: relative;
     width: 100%;
 }
-.select__virtualRow_1fl9q {
+.select__virtualRow_aihid {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
     width: 100%;
 }
-.select__virtualRow_1fl9q:before {
+.select__virtualRow_aihid: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_1fl9q:first-child:before {
+.select__virtualRow_aihid:first-child:before {
         display: none;
     }
-.select__highlighted_1fl9q:before,
-    .select__highlighted_1fl9q + .select__virtualRow_1fl9q:before {
+.select__highlighted_aihid:before,
+    .select__highlighted_aihid + .select__virtualRow_aihid:before {
         display: none;
     }
-.select__emptyPlaceholder_1fl9q {
+.select__emptyPlaceholder_aihid {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
     flex: 1;
 }
-.select__size-72_1fl9q .select__emptyPlaceholder_1fl9q {
+.select__size-72_aihid .select__emptyPlaceholder_aihid {
     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_1fl9q","virtualOptionsListHeader":"select__virtualOptionsListHeader_1fl9q","virtualOptionsListFooter":"select__virtualOptionsListFooter_1fl9q","withBorder":"select__withBorder_1fl9q","scrollable":"select__scrollable_1fl9q","inner":"select__inner_1fl9q","virtualRow":"select__virtualRow_1fl9q","highlighted":"select__highlighted_1fl9q","emptyPlaceholder":"select__emptyPlaceholder_1fl9q","size-72":"select__size-72_1fl9q"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_aihid","virtualOptionsListHeader":"select__virtualOptionsListHeader_aihid","virtualOptionsListFooter":"select__virtualOptionsListFooter_aihid","withBorder":"select__withBorder_aihid","scrollable":"select__scrollable_aihid","inner":"select__inner_aihid","virtualRow":"select__virtualRow_aihid","highlighted":"select__highlighted_aihid","emptyPlaceholder":"select__emptyPlaceholder_aihid","size-72":"select__size-72_aihid"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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;
@@ -77,7 +79,7 @@
             padding-right: var(--gap-16);
         }
 .option.textContent.mobile {
-            padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
+            padding: var(--gap-16) var(--gap-20);
         }
 .selected {
     background: var(--select-option-selected-background);

package/cssm/components/base-select/mobile.module.css

@@ -38,7 +38,7 @@
     padding: var(--gap-8);
 }
 .option.option {
-    padding: var(--gap-4) var(--gap-20) var(--gap-4) var(--gap-16);
+    padding: var(--gap-4) var(--gap-20) var(--gap-4);
 }
 .option.option:before {
         display: none;

package/cssm/components/field/index.module.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);
@@ -43,7 +44,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;
@@ -54,7 +56,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 {
     overflow: hidden;
@@ -65,7 +68,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 {
     outline: 2px solid var(--focus-color);

package/cssm/components/optgroup/index.module.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 {
 
@@ -42,7 +43,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/cssm/components/option/desktop/index.module.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;
@@ -47,7 +48,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;