@alveole/components 2.0.0-alpha.15 → 2.0.0-alpha.17

package/dist/ui/RadioGroup/RadioGroup.stories.d.ts

@@ -32,17 +32,17 @@ declare const _default: {
             transitionTimingFunction: "ease-in-out";
         };
         itemCardHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         itemCardIcon: {
             display: "flex";
             justifyContent: "center";
             alignItems: "center";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         itemCardSeparator: {
             borderTopWidth: number;
-            borderTopColor: string;
+            borderTopColor: import("@alveole/theme").ThemeColor;
         };
         radioGroupCardContent: {
             display: "flex";
@@ -74,7 +74,7 @@ declare const _default: {
         };
         itemContainer: {
             backgroundColor: "#FFFFFF";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         itemContainerSm: {
             height: import("@alveole/theme").Spacing;
@@ -85,10 +85,10 @@ declare const _default: {
             width: import("@alveole/theme").Spacing;
         };
         itemContainerActive: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         itemIndicator: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             height: number;
             width: number;
         };
@@ -106,7 +106,7 @@ declare const _default: {
             flexDirection: "column";
         };
         groupCard: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             overflow: "hidden";
@@ -120,7 +120,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/RadioGroup/RadioGroup.stories.js

@@ -19,9 +19,9 @@ export const Cards = () => {
     const [value, setValue] = useState('oui');
     return (_jsxs(RadioGroup, { value: value, onChange: setValue, label: "Confirmez-vous ?", children: [_jsx(RadioGroup.Card, { value: "oui", label: "Oui", leading: "Check" }), _jsx(RadioGroup.Card, { value: "non", label: "Non", leading: "X" })] }));
 };
-export const WithError = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsxs(RadioGroup, { value: "a", label: "Avec erreur", error: "Veuillez faire un choix", children: [_jsx(RadioGroup.Item, { value: "a", children: "Option A" }), _jsx(RadioGroup.Item, { value: "b", children: "Option B" })] }) }));
+export const WithError = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsxs(RadioGroup, { value: "a", label: "Avec erreur", error: "Veuillez faire un choix", children: [_jsx(RadioGroup.Item, { value: "a", children: "Option A" }), _jsx(RadioGroup.Item, { value: "b", children: "Option B" })] }) }));
 export const RadioInput = () => {
     const [value, setValue] = useState('tutu');
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(RadioGroup.Input, { id: "exemple-input", label: "Petit", size: "sm", value: "tutu", checked: value === 'tutu', onChange: setValue }), _jsx(RadioGroup.Input, { id: "exemple-input-md", label: "Moyen", size: "md", value: "toto", checked: value === 'toto', onChange: setValue })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(RadioGroup.Input, { id: "exemple-input", label: "Petit", size: "sm", value: "tutu", checked: value === 'tutu', onChange: setValue }), _jsx(RadioGroup.Input, { id: "exemple-input-md", label: "Moyen", size: "md", value: "toto", checked: value === 'toto', onChange: setValue })] }));
 };
 export * as Sources from './RadioGroup.stories.sources';

package/dist/ui/RadioGroup/RadioGroup.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+X,CAAC;AAEpZ,eAAO,MAAM,KAAK,cAA2V,CAAC;AAE9W,eAAO,MAAM,SAAS,cAA4V,CAAC;AAEnX,eAAO,MAAM,UAAU,cAAglB,CAAC;AAExmB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"RadioGroup.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+X,CAAC;AAEpZ,eAAO,MAAM,KAAK,cAA2V,CAAC;AAE9W,eAAO,MAAM,SAAS,cAA8V,CAAC;AAErX,eAAO,MAAM,UAAU,cAAklB,CAAC;AAE1mB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/RadioGroup/RadioGroup.stories.sources.js

@@ -2,8 +2,8 @@
 // Source: src/ui/RadioGroup/RadioGroup.stories.tsx
 export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState('a');\n  return (\n    <RadioGroup value={value} onChange={setValue} label=\"Choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n      <RadioGroup.Item value=\"c\">Option C</RadioGroup.Item>\n    </RadioGroup>\n  );\n};";
 export const Cards = () => "export const Cards = () => {\n  const [value, setValue] = useState('oui');\n  return (\n    <RadioGroup value={value} onChange={setValue} label=\"Confirmez-vous ?\">\n      <RadioGroup.Card value=\"oui\" label=\"Oui\" leading=\"Check\" />\n      <RadioGroup.Card value=\"non\" label=\"Non\" leading=\"X\" />\n    </RadioGroup>\n  );\n};";
-export const WithError = () => "export const WithError = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <RadioGroup value=\"a\" label=\"Avec erreur\" error=\"Veuillez faire un choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n    </RadioGroup>\n  </Box>\n);";
-export const RadioInput = () => "export const RadioInput = () => {\n  const [value, setValue] = useState('tutu');\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <RadioGroup.Input\n        id=\"exemple-input\"\n        label=\"Petit\"\n        size=\"sm\"\n        value=\"tutu\"\n        checked={value === 'tutu'}\n        onChange={setValue}\n      />\n      <RadioGroup.Input\n        id=\"exemple-input-md\"\n        label=\"Moyen\"\n        size=\"md\"\n        value=\"toto\"\n        checked={value === 'toto'}\n        onChange={setValue}\n      />\n    </Box>\n  );\n};";
+export const WithError = () => "export const WithError = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <RadioGroup value=\"a\" label=\"Avec erreur\" error=\"Veuillez faire un choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n    </RadioGroup>\n  </Box>\n);";
+export const RadioInput = () => "export const RadioInput = () => {\n  const [value, setValue] = useState('tutu');\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <RadioGroup.Input\n        id=\"exemple-input\"\n        label=\"Petit\"\n        size=\"sm\"\n        value=\"tutu\"\n        checked={value === 'tutu'}\n        onChange={setValue}\n      />\n      <RadioGroup.Input\n        id=\"exemple-input-md\"\n        label=\"Moyen\"\n        size=\"md\"\n        value=\"toto\"\n        checked={value === 'toto'}\n        onChange={setValue}\n      />\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     Cards,

package/dist/ui/RadioGroup/RadioGroup.styles.d.ts

@@ -17,17 +17,17 @@ export declare const useStyles: () => {
         transitionTimingFunction: "ease-in-out";
     };
     itemCardHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     itemCardIcon: {
         display: "flex";
         justifyContent: "center";
         alignItems: "center";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     itemCardSeparator: {
         borderTopWidth: number;
-        borderTopColor: string;
+        borderTopColor: import("@alveole/theme").ThemeColor;
     };
     radioGroupCardContent: {
         display: "flex";
@@ -59,7 +59,7 @@ export declare const useStyles: () => {
     };
     itemContainer: {
         backgroundColor: "#FFFFFF";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     itemContainerSm: {
         height: import("@alveole/theme").Spacing;
@@ -70,10 +70,10 @@ export declare const useStyles: () => {
         width: import("@alveole/theme").Spacing;
     };
     itemContainerActive: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     itemIndicator: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         height: number;
         width: number;
     };
@@ -91,7 +91,7 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     groupCard: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         overflow: "hidden";
@@ -105,7 +105,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=RadioGroup.styles.d.ts.map

package/dist/ui/RadioGroup/RadioGroup.styles.js

@@ -34,12 +34,12 @@ const ligne = ({ color, spacingValue }) => ({
         borderColor: color.light.border['action-high-primary'],
     },
     itemContainerSm: {
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
     },
     itemContainerMd: {
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
     },
     itemContainerActive: {
         borderColor: color.light.border['action-high-primary'],

package/dist/ui/RadioGroup/RadioGroupCard.js

@@ -13,5 +13,5 @@ export const RadioGroupCard = (props) => {
     const id = React.useMemo(() => `radiogroup-${value}-${rid}`, [value, rid]);
     const styles = useStyles();
     useRadioGroup();
-    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, backgroundColor: { hover: styles.itemCardHover.backgroundColor }, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), leading != null && (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', style: styles.itemCardIcon, children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
+    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, backgroundColor: { hover: styles.itemCardHover.backgroundColor }, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), leading != null && (_jsx(Box, { display: "flex", flexDirection: "row", gap: "1W", style: styles.itemCardIcon, children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
 };

package/dist/ui/RadioGroup/RadioGroupItem.styles.d.ts

@@ -18,7 +18,7 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
         cursor: "pointer";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=RadioGroupItem.styles.d.ts.map

package/dist/ui/ResourceList/ResourceList.stories.d.ts

@@ -17,7 +17,7 @@ declare const _default: {
             paddingBottom: string | number;
         };
         enteteTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -32,7 +32,7 @@ declare const _default: {
         };
         withBorder: {
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderLeftWidth: number;
             borderRightWidth: number;
         };

package/dist/ui/ResourceList/ResourceList.styles.d.ts

@@ -10,7 +10,7 @@ export declare const useStyles: () => {
         paddingBottom: string | number;
     };
     enteteTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -25,7 +25,7 @@ export declare const useStyles: () => {
     };
     withBorder: {
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderLeftWidth: number;
         borderRightWidth: number;
     };

package/dist/ui/ResourceList/ResourceListDivider.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 import { Divider } from '../Divider';
-export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));
+export const ResourceListDivider = () => (_jsx(Box, { pl: "2W", pr: "2W", children: _jsx(Divider, {}) }));

package/dist/ui/Select/Select.stories.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<import("./Select.types").SelectProps & import("react").RefAttributes<import("./Select.types").SelectRef>>;
     styleFn: () => {
         value: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             flex: number;
             fontSize: 14;
             lineHeight: 20;
@@ -17,10 +17,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         valuePlaceholder: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         valueDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputInnerMultiple: {
             paddingTop: string | number;
@@ -49,18 +49,18 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             width: "100%";
         };
         inputError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputCursor: {
             cursor: "pointer";

package/dist/ui/Select/Select.stories.js

@@ -21,7 +21,7 @@ export default {
         'Le composant reste **strictement contrôlé**, y compris pour la création d’option : `onCreateOption` reçoit',
         'la saisie, à l’appelant d’ajouter l’option à `options` puis de mettre `value` à jour.',
         '',
-        '### Migration depuis `Autocomplete`',
+        '## Migration depuis `Autocomplete`',
         '',
         // Cellules en texte brut : le rendu Markdown du catalogue échoue sur du code
         // inline dans un tableau.
@@ -81,29 +81,29 @@ const LONG_OPTIONS = Array.from({ length: 60 }, (_, index) => ({
 }));
 export const Default = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "S\u00E9lection", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }) }));
 };
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Avec valeur", children: _jsx(Select, { options: OPTIONS, value: "b" }) }), _jsx(FormControl, { label: "Erreur", error: "Ce champ est requis", children: _jsx(Select, { options: OPTIONS, value: null, error: "Ce champ est requis" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Valide", children: _jsx(Select, { options: OPTIONS, value: "a", success: "Valide" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(Select, { options: OPTIONS, value: "a", disabled: true }) })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Avec valeur", children: _jsx(Select, { options: OPTIONS, value: "b" }) }), _jsx(FormControl, { label: "Erreur", error: "Ce champ est requis", children: _jsx(Select, { options: OPTIONS, value: null, error: "Ce champ est requis" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Valide", children: _jsx(Select, { options: OPTIONS, value: "a", success: "Valide" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(Select, { options: OPTIONS, value: "a", disabled: true }) })] }));
 export const WithIcons = () => {
     const [value, setValue] = useState('contact');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de ressource", children: _jsx(Select, { options: ICON_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Type de ressource", children: _jsx(Select, { options: ICON_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const Grouped = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de document", children: _jsx(Select, { placeholder: "Tous les types", options: GROUPED_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Type de document", children: _jsx(Select, { placeholder: "Tous les types", options: GROUPED_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const LongList = () => {
     const [value, setValue] = useState('option-42');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Liste d\u00E9filante", children: _jsx(Select, { options: LONG_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Liste d\u00E9filante", children: _jsx(Select, { options: LONG_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const Clearable = () => {
     const [value, setValue] = useState('b');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Effa\u00E7able", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue, clearable: true }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Effa\u00E7able", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue, clearable: true }) }) }));
 };
 /** `searchable` ajoute un champ de recherche au panneau et filtre les options sur leur libellé. */
 export const Searchable = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Ville", children: _jsx(Select, { placeholder: "Choisir...", searchable: true, options: CITY_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Ville", children: _jsx(Select, { placeholder: "Choisir...", searchable: true, options: CITY_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 /**
  * Recherche distante : `localFilter={false}` laisse le filtrage au serveur, et
@@ -125,12 +125,12 @@ export const RemoteSearch = () => {
         ]);
         setLoading(false);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Recherche distante", children: _jsx(Select, { placeholder: "Saisir au moins 3 caract\u00E8res...", searchable: true, localFilter: false, loading: loading, emptyMessage: "Saisir au moins 3 caract\u00E8res", options: options, value: value, onChange: setValue, onSearchChange: search }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Recherche distante", children: _jsx(Select, { placeholder: "Saisir au moins 3 caract\u00E8res...", searchable: true, localFilter: false, loading: loading, emptyMessage: "Saisir au moins 3 caract\u00E8res", options: options, value: value, onChange: setValue, onSearchChange: search }) }) }));
 };
 /** `multiple` fait de la valeur un tableau. Les valeurs retenues s’affichent en puces retirables. */
 export const Multiple = () => {
     const [values, setValues] = useState(['a']);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection multiple", children: _jsx(Select, { placeholder: "Choisir...", multiple: true, clearable: true, options: OPTIONS, value: values, onChange: setValues }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "S\u00E9lection multiple", children: _jsx(Select, { placeholder: "Choisir...", multiple: true, clearable: true, options: OPTIONS, value: values, onChange: setValues }) }) }));
 };
 /**
  * `creatable` propose d’ajouter la saisie à la liste. Le composant restant contrôlé,
@@ -143,7 +143,7 @@ export const Creatable = () => {
         setOptions(current => [...current, { label: query, value: query }]);
         setValues(current => [...current, query]);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "\u00C9tiquettes", children: _jsx(Select, { placeholder: "Rechercher ou cr\u00E9er...", multiple: true, searchable: true, creatable: true, options: options, value: values, onChange: setValues, onCreateOption: createOption }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "\u00C9tiquettes", children: _jsx(Select, { placeholder: "Rechercher ou cr\u00E9er...", multiple: true, searchable: true, creatable: true, options: options, value: values, onChange: setValues, onCreateOption: createOption }) }) }));
 };
 /**
  * Champ adresse : recherche distante et saisie libre autorisée. Ce préréglage remplace
@@ -159,6 +159,6 @@ export const Address = () => {
         setOptions(current => [...current, { label: query, value: query }]);
         setValue(query);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Adresse", children: _jsx(Select, { placeholder: "ex : 3 rue Robespierre", searchable: true, localFilter: false, creatable: true, clearable: true, emptyMessage: "Saisir au moins 3 caract\u00E8res", createLabel: query => `Utiliser « ${query} »`, options: options, value: value, onChange: setValue, onSearchChange: search, onCreateOption: createAddress }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Adresse", children: _jsx(Select, { placeholder: "ex : 3 rue Robespierre", searchable: true, localFilter: false, creatable: true, clearable: true, emptyMessage: "Saisir au moins 3 caract\u00E8res", createLabel: query => `Utiliser « ${query} »`, options: options, value: value, onChange: setValue, onSearchChange: search, onCreateOption: createAddress }) }) }));
 };
 export * as Sources from './Select.stories.sources';

package/dist/ui/Select/Select.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuW,CAAC;AAE5X,eAAO,MAAM,MAAM,cAA+oB,CAAC;AAEnqB,eAAO,MAAM,SAAS,cAAgW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA0X,CAAC;AAE/Y,eAAO,MAAM,QAAQ,cAA+V,CAAC;AAErX,eAAO,MAAM,SAAS,cAAkX,CAAC;AAEzY,eAAO,MAAM,UAAU,cAAsX,CAAC;AAE9Y,eAAO,MAAM,YAAY,cAAmiC,CAAC;AAE7jC,eAAO,MAAM,QAAQ,cAAoY,CAAC;AAE1Z,eAAO,MAAM,SAAS,cAAqwB,CAAC;AAE5xB,eAAO,MAAM,OAAO,cAA0gC,CAAC;AAE/hC,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAMtE,CAAC"}
+{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAyW,CAAC;AAE9X,eAAO,MAAM,MAAM,cAAipB,CAAC;AAErqB,eAAO,MAAM,SAAS,cAAkW,CAAC;AAEzX,eAAO,MAAM,OAAO,cAA4X,CAAC;AAEjZ,eAAO,MAAM,QAAQ,cAAiW,CAAC;AAEvX,eAAO,MAAM,SAAS,cAAoX,CAAC;AAE3Y,eAAO,MAAM,UAAU,cAAwX,CAAC;AAEhZ,eAAO,MAAM,YAAY,cAAqiC,CAAC;AAE/jC,eAAO,MAAM,QAAQ,cAAsY,CAAC;AAE5Z,eAAO,MAAM,SAAS,cAAuwB,CAAC;AAE9xB,eAAO,MAAM,OAAO,cAA4gC,CAAC;AAEjiC,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAMtE,CAAC"}

package/dist/ui/Select/Select.stories.sources.js

@@ -1,16 +1,16 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Select/Select.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Avec valeur\">\n      <Select options={OPTIONS} value=\"b\" />\n    </FormControl>\n    <FormControl label=\"Erreur\" error=\"Ce champ est requis\">\n      <Select options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Valide\">\n      <Select options={OPTIONS} value=\"a\" success=\"Valide\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <Select options={OPTIONS} value=\"a\" disabled />\n    </FormControl>\n  </Box>\n);";
-export const WithIcons = () => "export const WithIcons = () => {\n  const [value, setValue] = useState<string | null>('contact');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de ressource\">\n        <Select options={ICON_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Grouped = () => "export const Grouped = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de document\">\n        <Select placeholder=\"Tous les types\" options={GROUPED_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const LongList = () => "export const LongList = () => {\n  const [value, setValue] = useState<string | null>('option-42');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Liste défilante\">\n        <Select options={LONG_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Clearable = () => "export const Clearable = () => {\n  const [value, setValue] = useState<string | null>('b');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Effaçable\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} clearable />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Searchable = () => "export const Searchable = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Ville\">\n        <Select placeholder=\"Choisir...\" searchable options={CITY_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const RemoteSearch = () => "export const RemoteSearch = () => {\n  const [value, setValue] = useState<string | null>(null);\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const search = (query: string) => {\n    if (query.length < 3) {\n      setOptions([]);\n      return;\n    }\n    setLoading(true);\n    setOptions([\n      { label: `${query} — résultat 1`, value: `${query}-1` },\n      { label: `${query} — résultat 2`, value: `${query}-2` },\n    ]);\n    setLoading(false);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Recherche distante\">\n        <Select\n          placeholder=\"Saisir au moins 3 caractères...\"\n          searchable\n          localFilter={false}\n          loading={loading}\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Multiple = () => "export const Multiple = () => {\n  const [values, setValues] = useState<string[]>(['a']);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection multiple\">\n        <Select placeholder=\"Choisir...\" multiple clearable options={OPTIONS} value={values} onChange={setValues} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Creatable = () => "export const Creatable = () => {\n  const [options, setOptions] = useState<SelectOption[]>(OPTIONS);\n  const [values, setValues] = useState<string[]>([]);\n\n  const createOption = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValues(current => [...current, query]);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Étiquettes\">\n        <Select\n          placeholder=\"Rechercher ou créer...\"\n          multiple\n          searchable\n          creatable\n          options={options}\n          value={values}\n          onChange={setValues}\n          onCreateOption={createOption}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Address = () => "export const Address = () => {\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [value, setValue] = useState<string | null>(null);\n\n  const search = (query: string) => {\n    setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);\n  };\n\n  const createAddress = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValue(query);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Adresse\">\n        <Select\n          placeholder=\"ex : 3 rue Robespierre\"\n          searchable\n          localFilter={false}\n          creatable\n          clearable\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          createLabel={query => `Utiliser « ${query} »`}\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n          onCreateOption={createAddress}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Sélection\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Avec valeur\">\n      <Select options={OPTIONS} value=\"b\" />\n    </FormControl>\n    <FormControl label=\"Erreur\" error=\"Ce champ est requis\">\n      <Select options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Valide\">\n      <Select options={OPTIONS} value=\"a\" success=\"Valide\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <Select options={OPTIONS} value=\"a\" disabled />\n    </FormControl>\n  </Box>\n);";
+export const WithIcons = () => "export const WithIcons = () => {\n  const [value, setValue] = useState<string | null>('contact');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Type de ressource\">\n        <Select options={ICON_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Grouped = () => "export const Grouped = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Type de document\">\n        <Select placeholder=\"Tous les types\" options={GROUPED_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const LongList = () => "export const LongList = () => {\n  const [value, setValue] = useState<string | null>('option-42');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Liste défilante\">\n        <Select options={LONG_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Clearable = () => "export const Clearable = () => {\n  const [value, setValue] = useState<string | null>('b');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Effaçable\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} clearable />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Searchable = () => "export const Searchable = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Ville\">\n        <Select placeholder=\"Choisir...\" searchable options={CITY_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const RemoteSearch = () => "export const RemoteSearch = () => {\n  const [value, setValue] = useState<string | null>(null);\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const search = (query: string) => {\n    if (query.length < 3) {\n      setOptions([]);\n      return;\n    }\n    setLoading(true);\n    setOptions([\n      { label: `${query} — résultat 1`, value: `${query}-1` },\n      { label: `${query} — résultat 2`, value: `${query}-2` },\n    ]);\n    setLoading(false);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Recherche distante\">\n        <Select\n          placeholder=\"Saisir au moins 3 caractères...\"\n          searchable\n          localFilter={false}\n          loading={loading}\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Multiple = () => "export const Multiple = () => {\n  const [values, setValues] = useState<string[]>(['a']);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Sélection multiple\">\n        <Select placeholder=\"Choisir...\" multiple clearable options={OPTIONS} value={values} onChange={setValues} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Creatable = () => "export const Creatable = () => {\n  const [options, setOptions] = useState<SelectOption[]>(OPTIONS);\n  const [values, setValues] = useState<string[]>([]);\n\n  const createOption = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValues(current => [...current, query]);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Étiquettes\">\n        <Select\n          placeholder=\"Rechercher ou créer...\"\n          multiple\n          searchable\n          creatable\n          options={options}\n          value={values}\n          onChange={setValues}\n          onCreateOption={createOption}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Address = () => "export const Address = () => {\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [value, setValue] = useState<string | null>(null);\n\n  const search = (query: string) => {\n    setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);\n  };\n\n  const createAddress = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValue(query);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Adresse\">\n        <Select\n          placeholder=\"ex : 3 rue Robespierre\"\n          searchable\n          localFilter={false}\n          creatable\n          clearable\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          createLabel={query => `Utiliser « ${query} »`}\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n          onCreateOption={createAddress}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     States,

package/dist/ui/Select/Select.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     value: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -9,10 +9,10 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     valuePlaceholder: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     valueDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     /** Les puces repassent à la ligne ; le chevron et la valeur restent centrés dans le champ. */
     inputInnerMultiple: {
@@ -42,18 +42,18 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         width: "100%";
     };
     inputError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputDisabled: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     /** Web uniquement : `cursor` n'appartient pas aux styles React Native. */
     inputCursor: {

package/dist/ui/Select/SelectBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG/E,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA4C9D,CAAC"}
+{"version":3,"file":"SelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG/E,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6C9D,CAAC"}

package/dist/ui/Select/SelectBottomSheet.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { InteractionManager } from 'react-native';
 import { Box } from '../../core/Box';
 import { BottomSheet } from '../BottomSheet';
 import { Button } from '../Button';
@@ -13,11 +12,12 @@ export const SelectBottomSheet = (props) => {
     const searchRef = React.useRef(null);
     // Le focus n'est pris qu'une fois l'animation d'ouverture terminée : pendant
     // celle-ci le champ n'est pas encore mesuré et le clavier se referme aussitôt.
+    // `requestIdleCallback` remplace `InteractionManager`, retiré de React Native 0.88.
     React.useEffect(() => {
         if (!open || !searchable)
             return;
-        const task = InteractionManager.runAfterInteractions(() => searchRef.current?.focus());
-        return () => task.cancel();
+        const handle = requestIdleCallback(() => searchRef.current?.focus());
+        return () => cancelIdleCallback(handle);
     }, [open, searchable]);
     return (_jsxs(BottomSheet, { open: open, setOpen: setOpen, title: title, ...(sheetSnapPoints != null ? { points: sheetSnapPoints } : { fitContent: true }), moveOnKeyboardChange: searchable, action: multiple ? (_jsx(Button, { testID: "select-validate", title: "Valider", size: "sm", variant: "primary", onPress: () => setOpen(false) })) : undefined, children: [searchable && (_jsx(Box, { pl: "2W", pr: "2W", pb: "1W", children: _jsx(TextInput, { ref: searchRef, testID: "select-search", accessibilityLabel: "Rechercher", value: query, onChangeText: onQueryChange, placeholder: searchPlaceholder }) })), _jsx(SelectOptionsList, { ...props })] }));
 };

package/dist/ui/Select/SelectList.styles.d.ts

@@ -13,22 +13,22 @@ export declare const useStyles: () => {
         width: import("@alveole/theme").Spacing;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         backgroundColor: "transparent";
     };
     checkboxChecked: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     checkboxDisabled: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     checkboxCheckedDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     itemLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -37,7 +37,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     itemLabelDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     placeCoche: {
         width: import("@alveole/theme").Spacing;
@@ -68,7 +68,7 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     bandHighlighted: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     barre: {
         position: "absolute";
@@ -77,13 +77,13 @@ export declare const useStyles: () => {
         bottom: string | number;
         width: import("@alveole/theme").Spacing;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     panel: {
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         shadowColor: string;
@@ -97,18 +97,18 @@ export declare const useStyles: () => {
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         boxShadow: string;
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     };
     emptyMessage: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingTop: string | number;
         paddingBottom: string | number;
         paddingLeft: string | number;
@@ -120,7 +120,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     groupHeader: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingTop: string | number;
         paddingBottom: string | number;
         paddingLeft: string | number;

package/dist/ui/Select/SelectList.styles.js

@@ -86,7 +86,7 @@ const contenuDeLaLigne = ({ text, color, spacingValue }) => ({
     },
     // Place de la coche, vide sur les options non retenues : les libelles restent alignes.
     placeCoche: {
-        width: spacingValue('100'),
+        width: spacingValue('2W'),
         flexShrink: 0,
     },
 });
@@ -99,8 +99,8 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0,
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: color.light.border['contrast-grey'],