@alveole/components 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -21,7 +21,7 @@ declare const _default: {
             alignSelf: "stretch";
         };
         partTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

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

@@ -14,7 +14,7 @@ export declare const useStyles: () => {
         alignSelf: "stretch";
     };
     partTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

package/dist/ui/FormControl/ChampHHMM.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormControlCaptionProps } from './FormControlCaption';
-import { TextInputProps } from './TextInput';
+import { TextInputElement, TextInputProps } from './TextInput';
 export type ChampHHMMProps = FormControlCaptionProps & {
     value?: string;
     onChange?: (value: string) => void;
@@ -17,6 +17,6 @@ export declare const ChampHHMM: React.ForwardRefExoticComponent<FormControlCapti
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-} & ChampHHMMConfig & React.RefAttributes<import("react-native").TextInput>>;
+} & ChampHHMMConfig & React.RefAttributes<TextInputElement>>;
 export {};
 //# sourceMappingURL=ChampHHMM.d.ts.map

package/dist/ui/FormControl/ChampHHMM.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChampHHMM.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/ChampHHMM.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,MAAM,cAAc,GAAG,uBAAuB,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,cAAc,CAAC,CAAC;CAC7D,CAAC;AAEF,2GAA2G;AAC3G,eAAO,MAAM,SAAS;YAZZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;4EA6BlB,CAAC"}
+{"version":3,"file":"ChampHHMM.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/ChampHHMM.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAa,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,MAAM,cAAc,GAAG,uBAAuB,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,cAAc,CAAC,CAAC;CAC7D,CAAC;AAEF,2GAA2G;AAC3G,eAAO,MAAM,SAAS;YAZZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;4DA6BlB,CAAC"}

package/dist/ui/FormControl/FormControl.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
 import { BoxProps } from '../../core/Box';
 import { FormControlCaptionProps } from './FormControlCaption';
 import { FormControlHintProps } from './FormControlHint';
 import { FormControlLabelProps } from './FormControlLabel';
+import { TextInputElement } from './TextInput.types';
 export type FormControlProps = React.PropsWithChildren & Pick<FormControlHintProps, 'hint'> & FormControlCaptionProps & Pick<FormControlLabelProps, 'labelRight'> & {
     label?: string;
     disabled?: boolean;
@@ -17,5 +17,5 @@ export declare const FormControl: React.ForwardRefExoticComponent<{
     disabled?: boolean;
     required?: boolean;
     style?: BoxProps["style"];
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=FormControl.d.ts.map

package/dist/ui/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GACpD,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAClC,uBAAuB,GACvB,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,WAAW;;;YANZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,QAAQ,CAAC,OAAO,CAAC;8CAsB3B,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GACpD,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAClC,uBAAuB,GACvB,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,WAAW;;;YANZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,QAAQ,CAAC,OAAO,CAAC;0CAsB3B,CAAC"}

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

@@ -10,7 +10,7 @@ declare const _default: {
         disabled?: boolean;
         required?: boolean;
         style?: import("../..").BoxProps["style"];
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("./TextInput.types").TextInputElement>>;
     styleFn: () => {
         caption: {
             display: "flex";
@@ -35,14 +35,14 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         errorText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         successText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         modalOverlay: {
             flex: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         modalSheet: {
             width: "100%";
@@ -80,12 +80,12 @@ declare const _default: {
         modalInputContainer: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             minHeight: number;
         };
         modalInput: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -100,14 +100,14 @@ declare const _default: {
         };
         inputFocused: import("@alveole/theme").FocusBorderStyle;
         inputError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputContainer: {
             width: "100%";
@@ -119,7 +119,7 @@ declare const _default: {
             padding: number;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             width: "100%";
@@ -129,7 +129,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 14;
             marginTop: string | number;
@@ -145,7 +145,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputWeb: {
             borderWidth: number;
@@ -169,7 +169,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -177,7 +177,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         hintContainer: {
             display: "flex";
@@ -185,7 +185,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -193,10 +193,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         hintDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         requiredMarker: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginLeft: string | number;
             fontSize: 14;
             lineHeight: 20;

package/dist/ui/FormControl/FormControl.stories.js

@@ -24,9 +24,9 @@ export default {
 export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }), _jsx(TextInput, { placeholder: "jean@exemple.fr" })] }));
 export const WithError = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { error: "Format invalide" })] }));
 export const WithSuccess = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { success: "Email valide" })] }));
-export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
-export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
-export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
+export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
+export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
+export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
 export const Modal = () => {
     const [open, setOpen] = useState(false);
     return (_jsxs(Box, { children: [_jsx(Button, { variant: "secondary", title: "Ouvrir la modale", onPress: () => setOpen(true) }), _jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: () => setOpen(false), children: _jsx(TextInput, { placeholder: "Saisir un texte...", multiline: true, numberOfLines: 6 }) })] }));
@@ -35,6 +35,6 @@ export const DateInput = () => {
     const [date, setDate] = useState('');
     const [time, setTime] = useState('');
     const [month, setMonth] = useState('');
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Date" }) }), _jsx(DateInputControl, { type: "date", value: date, onChange: setDate })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Heure" }) }), _jsx(TimeInput, { value: time, onChange: setTime })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Mois" }) }), _jsx(DateInputControl, { type: "month", value: month, onChange: setMonth })] })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3V", children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Date" }) }), _jsx(DateInputControl, { type: "date", value: date, onChange: setDate })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Heure" }) }), _jsx(TimeInput, { value: time, onChange: setTime })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Mois" }) }), _jsx(DateInputControl, { type: "month", value: month, onChange: setMonth })] })] }));
 };
 export * as Sources from './FormControl.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAoS,CAAC;AAE/T,eAAO,MAAM,SAAS,cAAwR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAyR,CAAC;AAElT,eAAO,MAAM,KAAK,cAA4T,CAAC;AAE/U,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,SAAS,cAA43B,CAAC;AAEn5B,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAoS,CAAC;AAE/T,eAAO,MAAM,SAAS,cAAwR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAyR,CAAC;AAElT,eAAO,MAAM,KAAK,cAA8T,CAAC;AAEjV,eAAO,MAAM,OAAO,cAAgO,CAAC;AAErP,eAAO,MAAM,IAAI,cAAyO,CAAC;AAE3P,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,SAAS,cAA83B,CAAC;AAEr5B,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -3,11 +3,11 @@
 export const WithTextInput = () => "export const WithTextInput = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n      <FormControlHint hint=\"Votre email professionnel\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n  </FormControl>\n);";
 export const WithError = () => "export const WithError = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption error=\"Format invalide\" />\n  </FormControl>\n);";
 export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
-export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
-export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
-export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
+export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
+export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
+export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
 export const Modal = () => "export const Modal = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <Box>\n      <Button variant=\"secondary\" title=\"Ouvrir la modale\" onPress={() => setOpen(true)} />\n      <FormControlModal\n        open={open}\n        onClose={() => setOpen(false)}\n        submitLabel=\"Valider\"\n        onSubmit={() => setOpen(false)}\n      >\n        <TextInput placeholder=\"Saisir un texte...\" multiline numberOfLines={6} />\n      </FormControlModal>\n    </Box>\n  );\n};";
-export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <DateInputControl type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <TimeInput value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <DateInputControl type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <DateInputControl type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <TimeInput value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <DateInputControl type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     WithTextInput,
     WithError,

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

@@ -22,14 +22,14 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     errorText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     successText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     modalOverlay: {
         flex: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     modalSheet: {
         width: "100%";
@@ -67,12 +67,12 @@ export declare const useStyles: () => {
     modalInputContainer: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         minHeight: number;
     };
     modalInput: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: string | number;
         paddingRight: string | number;
         paddingTop: string | number;
@@ -87,14 +87,14 @@ export declare const useStyles: () => {
     };
     inputFocused: import("@alveole/theme").FocusBorderStyle;
     inputError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputDisabled: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputContainer: {
         width: "100%";
@@ -106,7 +106,7 @@ export declare const useStyles: () => {
         padding: number;
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         overflow: "hidden";
         width: "100%";
@@ -116,7 +116,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         outline: string;
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: string;
         fontSize: 14;
         marginTop: string | number;
@@ -132,7 +132,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     inputWeb: {
         borderWidth: number;
@@ -156,7 +156,7 @@ export declare const useStyles: () => {
         justifyContent: "space-between";
     };
     label: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -164,7 +164,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     labelDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     hintContainer: {
         display: "flex";
@@ -172,7 +172,7 @@ export declare const useStyles: () => {
         justifyContent: "space-between";
     };
     hint: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -180,10 +180,10 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     hintDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     requiredMarker: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         marginLeft: string | number;
         fontSize: 14;
         lineHeight: 20;

package/dist/ui/FormControl/NumberInput.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from './TextInput';
 export type NumberInputElement = HTMLInputElement;
 export type NumberInputProps = {
     value?: number | null;
@@ -17,5 +18,5 @@ export type NumberInputProps = {
     controlButton?: boolean;
 };
 /** Le natif n'a pas de champ nombre : c'est un champ texte au pave numerique, qui rend un nombre. */
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<import("react-native").TextInput>>;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=NumberInput.d.ts.map

package/dist/ui/FormControl/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,WAAW,2GActB,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,WAAW,2FActB,CAAC"}

package/dist/ui/FormControl/NumberInput.stories.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<import("./NumberInput").NumberInputProps & import("react").RefAttributes<import("react-native").TextInput>>;
+    component: import("react").ForwardRefExoticComponent<import("./NumberInput").NumberInputProps & import("react").RefAttributes<import("./TextInput.types").TextInputElement>>;
     styleFn: () => {
         caption: {
             display: "flex";
@@ -28,14 +28,14 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         errorText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         successText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         modalOverlay: {
             flex: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         modalSheet: {
             width: "100%";
@@ -73,12 +73,12 @@ declare const _default: {
         modalInputContainer: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             minHeight: number;
         };
         modalInput: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -93,14 +93,14 @@ declare const _default: {
         };
         inputFocused: import("@alveole/theme").FocusBorderStyle;
         inputError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputContainer: {
             width: "100%";
@@ -112,7 +112,7 @@ declare const _default: {
             padding: number;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             width: "100%";
@@ -122,7 +122,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 14;
             marginTop: string | number;
@@ -138,7 +138,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputWeb: {
             borderWidth: number;
@@ -162,7 +162,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -170,7 +170,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         hintContainer: {
             display: "flex";
@@ -178,7 +178,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -186,10 +186,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         hintDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         requiredMarker: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginLeft: string | number;
             fontSize: 14;
             lineHeight: 20;

package/dist/ui/FormControl/NumberInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"NumberInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/FormControl/NumberInput.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Spacings } from '@alveole/theme';
 import { useState } from 'react';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
@@ -19,7 +20,7 @@ export const Default = () => {
 };
 export const AvecUnites = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(FormControl, { label: "Avec unit\u00E9s", children: _jsx(NumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: 8, paddingRight: 4 }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(Typography, { children: "TTC" }) }) }) }));
+    return (_jsx(FormControl, { label: "Avec unit\u00E9s", children: _jsx(NumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: Spacings['1W'], paddingRight: Spacings['1V'] }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: Spacings['1V'], paddingRight: Spacings['1W'] }, children: _jsx(Typography, { children: "TTC" }) }) }) }));
 };
 export const Desactive = () => (_jsx(FormControl, { label: "D\u00E9sactiv\u00E9", children: _jsx(NumberInput, { value: 42, onChange: () => { }, disabled: true }) }));
 export * as Sources from './NumberInput.stories.sources';

package/dist/ui/FormControl/NumberInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsQ,CAAC;AAE3R,eAAO,MAAM,UAAU,cAAqkB,CAAC;AAE7lB,eAAO,MAAM,SAAS,cAAmK,CAAC;AAE1L,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsQ,CAAC;AAE3R,eAAO,MAAM,UAAU,cAAynB,CAAC;AAEjpB,eAAO,MAAM,SAAS,cAAmK,CAAC;AAE1L,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/NumberInput.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/FormControl/NumberInput.stories.tsx
 export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <FormControl label=\"Montant\">\n      <NumberInput value={value} onChange={setValue} placeholder=\"Quantité\" />\n    </FormControl>\n  );\n};";
-export const AvecUnites = () => "export const AvecUnites = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <FormControl label=\"Avec unités\">\n      <NumberInput\n        value={value}\n        onChange={setValue}\n        startAdornment={\n          <Box style={{ paddingLeft: 8, paddingRight: 4 }}>\n            <Typography>€</Typography>\n          </Box>\n        }\n        endAdornment={\n          <Box style={{ paddingLeft: 4, paddingRight: 8 }}>\n            <Typography>TTC</Typography>\n          </Box>\n        }\n      />\n    </FormControl>\n  );\n};";
+export const AvecUnites = () => "export const AvecUnites = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <FormControl label=\"Avec unités\">\n      <NumberInput\n        value={value}\n        onChange={setValue}\n        startAdornment={\n          <Box style={{ paddingLeft: Spacings['1W'], paddingRight: Spacings['1V'] }}>\n            <Typography>€</Typography>\n          </Box>\n        }\n        endAdornment={\n          <Box style={{ paddingLeft: Spacings['1V'], paddingRight: Spacings['1W'] }}>\n            <Typography>TTC</Typography>\n          </Box>\n        }\n      />\n    </FormControl>\n  );\n};";
 export const Desactive = () => "export const Desactive = () => (\n  <FormControl label=\"Désactivé\">\n    <NumberInput value={42} onChange={() => {}} disabled />\n  </FormControl>\n);";
 export const storySources = {
     Default,

package/dist/ui/FormControl/OtpInput.stories.d.ts

@@ -18,7 +18,7 @@ declare const _default: {
         pinCodeContainerStyle: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             height: import("@alveole/theme").Spacing;
@@ -27,13 +27,13 @@ declare const _default: {
             alignItems: "center";
         };
         pinCodeContainerStyleDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         pinCodeContainerStyleError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         pinCodeContainerStyleSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         focusedPinCodeContainerStyle: import("@alveole/theme").FocusBorderStyle;
         hiddenInputStyle: {
@@ -48,7 +48,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/FormControl/OtpInput.stories.js

@@ -11,5 +11,5 @@ export default {
     component: OtpInput,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Code de v\u00E9rification", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, disabled: true }) })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Code de v\u00E9rification", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, disabled: true }) })] }));
 export * as Sources from './OtpInput.stories.sources';

package/dist/ui/FormControl/OtpInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OtpInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/OtpInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8sB,CAAC;AAEnuB,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"OtpInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/OtpInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgtB,CAAC;AAEruB,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/FormControl/OtpInput.stories.sources.js

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/FormControl/OtpInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Code de vérification\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Avec erreur\" error=\"Code invalide\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} error=\"Code invalide\" />\n    </FormControl>\n    <FormControl label=\"Avec succès\" success=\"Code vérifié\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} success=\"Code vérifié\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <OtpInput numberOfDigits={4} onChange={() => {}} disabled />\n    </FormControl>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Code de vérification\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Avec erreur\" error=\"Code invalide\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} error=\"Code invalide\" />\n    </FormControl>\n    <FormControl label=\"Avec succès\" success=\"Code vérifié\">\n      <OtpInput numberOfDigits={4} onChange={() => {}} success=\"Code vérifié\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <OtpInput numberOfDigits={4} onChange={() => {}} disabled />\n    </FormControl>\n  </Box>\n);";
 export const storySources = {
     Default,
 };