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

package/modern/mobile/Component.modal.mobile.js

@@ -1,7 +1,15 @@
 import React, { forwardRef } from 'react';
+import cn from 'classnames';
 import { SelectMobile } from './Component.mobile.js';
+import styles from './modal.mobile.module.css.js';
 
-const SelectModalMobile = forwardRef((props, ref) => (React.createElement(SelectMobile, { ...props, isBottomSheet: false, ref: ref })));
+const SelectModalMobile = forwardRef((props, ref) => {
+    const { modalHeaderProps, className: headerClassName } = props;
+    return (React.createElement(SelectMobile, { ...props, isBottomSheet: false, ref: ref, modalHeaderProps: {
+            ...modalHeaderProps,
+            className: cn(styles.header, headerClassName),
+        } }));
+});
 
 export { SelectModalMobile };
 //# sourceMappingURL=Component.modal.mobile.js.map

package/modern/mobile/Component.modal.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.modal.mobile.js","sources":["../../src/mobile/Component.modal.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { type SelectModalMobileProps } from '../typings';\n\nimport { SelectMobile } from './Component.mobile';\n\nexport const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => (\n    <SelectMobile {...props} isBottomSheet={false} ref={ref} />\n));\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,KAA6B,EAAE,GAAG,MAC3E,KAAC,CAAA,aAAA,CAAA,YAAY,EAAK,EAAA,GAAA,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA,CAC9D;;;;"}
+{"version":3,"file":"Component.modal.mobile.js","sources":["../../src/mobile/Component.modal.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { type SelectModalMobileProps } from '../typings';\n\nimport { SelectMobile } from './Component.mobile';\n\nimport styles from './modal.mobile.module.css';\n\nexport const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => {\n    const { modalHeaderProps, className: headerClassName } = props;\n\n    return (\n        <SelectMobile\n            {...props}\n            isBottomSheet={false}\n            ref={ref}\n            modalHeaderProps={{\n                ...modalHeaderProps,\n                className: cn(styles.header, headerClassName),\n            }}\n        />\n    );\n});\n"],"names":[],"mappings":";;;;;AASa,MAAA,iBAAiB,GAAG,UAAU,CAAC,CAAC,KAA6B,EAAE,GAAG,KAAI;IAC/E,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK;AAE9D,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GACL,KAAK,EACT,aAAa,EAAE,KAAK,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE;AACd,YAAA,GAAG,gBAAgB;YACnB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;AAChD,SAAA,EAAA,CACH;AAEV,CAAC;;;;"}

package/modern/mobile/modal.mobile.css

@@ -0,0 +1,8 @@
+:root {
+    --gap-xs: 8px;
+    --gap-8: var(--gap-xs);
+}
+.select__header_3stqa {
+    padding-right: var(--gap-8);
+    padding-left: var(--gap-8);
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.mobile.module.css.js","sources":["../src/mobile/modal.mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n    padding-right: var(--gap-8);\n    padding-left: var(--gap-8);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;"}

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_11a4p {
+.select__footer_1r5ee {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_11a4p.select__size-72_11a4p {
+.select__footer_1r5ee.select__size-72_1r5ee {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_11a4p > .select__button_11a4p + .select__button_11a4p {
+.select__footer_1r5ee > .select__button_1r5ee + .select__button_1r5ee {
         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_11a4p","size-72":"select__size-72_11a4p","button":"select__button_11a4p"};
+const styles = {"footer":"select__footer_1r5ee","size-72":"select__size-72_1r5ee","button":"select__button_1r5ee"};
 
 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_yw1ah {
+.select__desktop_ihfuj {
     padding: var(--gap-12);
 }
-.select__desktop_yw1ah.select__size-72_yw1ah {
+.select__desktop_ihfuj.select__size-72_ihfuj {
         padding-left: var(--gap-16);
     }
-.select__mobile_yw1ah {
+.select__mobile_ihfuj {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_yw1ah {
+.select__positionAfter_ihfuj {
     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_yw1ah","size-72":"select__size-72_yw1ah","mobile":"select__mobile_yw1ah","positionAfter":"select__positionAfter_yw1ah"};
+const styles = {"desktop":"select__desktop_ihfuj","size-72":"select__size-72_ihfuj","mobile":"select__mobile_ihfuj","positionAfter":"select__positionAfter_ihfuj"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_1l2j0 {
+.select__skeleton_1k0y5 {
     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_1l2j0"};
+const styles = {"skeleton":"select__skeleton_1k0y5"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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;
@@ -63,7 +64,7 @@
         }
 
 .option.textContent.mobile {
-            padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
+            padding: var(--gap-16) var(--gap-20);
         }
 
 .selected {

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

@@ -35,7 +35,7 @@
 }
 
 .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 {

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;

package/moderncssm/mobile/Component.modal.mobile.js

@@ -1,7 +1,15 @@
 import React, { forwardRef } from 'react';
+import cn from 'classnames';
 import { SelectMobile } from './Component.mobile.js';
+import styles from './modal.mobile.module.css';
 
-const SelectModalMobile = forwardRef((props, ref) => (React.createElement(SelectMobile, { ...props, isBottomSheet: false, ref: ref })));
+const SelectModalMobile = forwardRef((props, ref) => {
+    const { modalHeaderProps, className: headerClassName } = props;
+    return (React.createElement(SelectMobile, { ...props, isBottomSheet: false, ref: ref, modalHeaderProps: {
+            ...modalHeaderProps,
+            className: cn(styles.header, headerClassName),
+        } }));
+});
 
 export { SelectModalMobile };
 //# sourceMappingURL=Component.modal.mobile.js.map

package/moderncssm/mobile/Component.modal.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.modal.mobile.js","sources":["../../src/mobile/Component.modal.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { type SelectModalMobileProps } from '../typings';\n\nimport { SelectMobile } from './Component.mobile';\n\nexport const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => (\n    <SelectMobile {...props} isBottomSheet={false} ref={ref} />\n));\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,KAA6B,EAAE,GAAG,MAC3E,KAAC,CAAA,aAAA,CAAA,YAAY,EAAK,EAAA,GAAA,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA,CAC9D;;;;"}
+{"version":3,"file":"Component.modal.mobile.js","sources":["../../src/mobile/Component.modal.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { type SelectModalMobileProps } from '../typings';\n\nimport { SelectMobile } from './Component.mobile';\n\nimport styles from './modal.mobile.module.css';\n\nexport const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => {\n    const { modalHeaderProps, className: headerClassName } = props;\n\n    return (\n        <SelectMobile\n            {...props}\n            isBottomSheet={false}\n            ref={ref}\n            modalHeaderProps={{\n                ...modalHeaderProps,\n                className: cn(styles.header, headerClassName),\n            }}\n        />\n    );\n});\n"],"names":[],"mappings":";;;;;AASa,MAAA,iBAAiB,GAAG,UAAU,CAAC,CAAC,KAA6B,EAAE,GAAG,KAAI;IAC/E,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK;AAE9D,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GACL,KAAK,EACT,aAAa,EAAE,KAAK,EACpB,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE;AACd,YAAA,GAAG,gBAAgB;YACnB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;AAChD,SAAA,EAAA,CACH;AAEV,CAAC;;;;"}

package/moderncssm/mobile/modal.mobile.module.css

@@ -0,0 +1,6 @@
+
+
+.header {
+    padding-right: var(--gap-8);
+    padding-left: var(--gap-8);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "19.1.4",
+    "version": "19.1.5-alfasans",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -10,18 +10,18 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.3",
-        "@alfalab/core-components-bottom-sheet": "^8.1.4",
-        "@alfalab/core-components-button": "^13.1.1",
-        "@alfalab/core-components-checkbox": "^6.2.0",
-        "@alfalab/core-components-form-control": "^14.0.4",
-        "@alfalab/core-components-input": "^17.1.3",
-        "@alfalab/core-components-modal": "^11.0.7",
-        "@alfalab/core-components-mq": "^6.0.3",
-        "@alfalab/core-components-popover": "^8.0.3",
-        "@alfalab/core-components-scrollbar": "^5.0.2",
-        "@alfalab/core-components-shared": "^2.1.1",
-        "@alfalab/core-components-skeleton": "^7.0.3",
+        "@alfalab/core-components-base-modal": "7.1.4-alfasans",
+        "@alfalab/core-components-bottom-sheet": "8.1.5-alfasans",
+        "@alfalab/core-components-button": "13.1.1-alfasans",
+        "@alfalab/core-components-checkbox": "6.2.0-alfasans",
+        "@alfalab/core-components-form-control": "14.0.5-alfasans",
+        "@alfalab/core-components-input": "17.1.4-alfasans",
+        "@alfalab/core-components-modal": "11.0.8-alfasans",
+        "@alfalab/core-components-mq": "6.0.3-alfasans",
+        "@alfalab/core-components-popover": "8.0.3-alfasans",
+        "@alfalab/core-components-scrollbar": "5.0.2-alfasans",
+        "@alfalab/core-components-shared": "2.1.1-alfasans",
+        "@alfalab/core-components-skeleton": "7.0.3-alfasans",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.260.0",
         "@juggle/resize-observer": "^3.3.1",
@@ -42,6 +42,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.3",
-    "varsVersion": "11.0.2"
+    "themesVersion": "15.0.4-alfasans",
+    "varsVersion": "11.0.2-alfasans"
 }

package/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_11a4p {
+.select__footer_1r5ee {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_11a4p.select__size-72_11a4p {
+.select__footer_1r5ee.select__size-72_1r5ee {
         padding: var(--gap-12) var(--gap-16);
     }
-.select__footer_11a4p > .select__button_11a4p + .select__button_11a4p {
+.select__footer_1r5ee > .select__button_1r5ee + .select__button_1r5ee {
         margin-left: var(--select-option-list-footer-button-gap);
     }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_11a4p","size-72":"select__size-72_11a4p","button":"select__button_11a4p"};
+var styles = {"footer":"select__footer_1r5ee","size-72":"select__size-72_1r5ee","button":"select__button_1r5ee"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/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_yw1ah {
+.select__desktop_ihfuj {
     padding: var(--gap-12);
 }
-.select__desktop_yw1ah.select__size-72_yw1ah {
+.select__desktop_ihfuj.select__size-72_ihfuj {
         padding-left: var(--gap-16);
     }
-.select__mobile_yw1ah {
+.select__mobile_ihfuj {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_yw1ah {
+.select__positionAfter_ihfuj {
     margin-left: 0;
     margin-left: initial;
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"desktop":"select__desktop_yw1ah","size-72":"select__size-72_yw1ah","mobile":"select__mobile_yw1ah","positionAfter":"select__positionAfter_yw1ah"};
+var styles = {"desktop":"select__desktop_ihfuj","size-72":"select__size-72_ihfuj","mobile":"select__mobile_ihfuj","positionAfter":"select__positionAfter_ihfuj"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithLoading/index.css

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

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

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

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

@@ -48,7 +48,7 @@
         }
 
         &.mobile {
-            padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
+            padding: var(--gap-16) var(--gap-20);
         }
     }
 }

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

@@ -38,7 +38,7 @@
 }
 
 .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);
 
     &:before {
         display: none;

package/src/mobile/Component.modal.mobile.tsx

@@ -1,9 +1,24 @@
 import React, { forwardRef } from 'react';
+import cn from 'classnames';
 
 import { type SelectModalMobileProps } from '../typings';
 
 import { SelectMobile } from './Component.mobile';
 
-export const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => (
-    <SelectMobile {...props} isBottomSheet={false} ref={ref} />
-));
+import styles from './modal.mobile.module.css';
+
+export const SelectModalMobile = forwardRef((props: SelectModalMobileProps, ref) => {
+    const { modalHeaderProps, className: headerClassName } = props;
+
+    return (
+        <SelectMobile
+            {...props}
+            isBottomSheet={false}
+            ref={ref}
+            modalHeaderProps={{
+                ...modalHeaderProps,
+                className: cn(styles.header, headerClassName),
+            }}
+        />
+    );
+});

package/src/mobile/modal.mobile.module.css

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.header {
+    padding-right: var(--gap-8);
+    padding-left: var(--gap-8);
+}