@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.20

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';
@@ -15,11 +16,11 @@ export default {
 };
 export const Default = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(FormControl, { label: "Montant", children: _jsx(NumberInput, { value: value, onChange: setValue, placeholder: "0" }) }));
+    return (_jsx(FormControl, { label: "Montant", children: _jsx(NumberInput, { value: value, onChange: setValue, placeholder: "Quantit\u00E9" }) }));
 };
 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,cAA+P,CAAC;AAEpR,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=\"0\" />\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 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: 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, { onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { 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,cAAkoB,CAAC;AAEvpB,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 onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Avec erreur\" error=\"Code invalide\">\n      <OtpInput onChange={() => {}} error=\"Code invalide\" />\n    </FormControl>\n    <FormControl label=\"Avec succès\" success=\"Code vérifié\">\n      <OtpInput onChange={() => {}} success=\"Code vérifié\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <OtpInput 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,
 };

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

@@ -7,7 +7,7 @@ export declare const useStyles: () => {
     pinCodeContainerStyle: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         overflow: "hidden";
         height: import("@alveole/theme").Spacing;
@@ -16,13 +16,13 @@ export declare const useStyles: () => {
         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;
     };
     /**
      * La cellule active ne recoit pas d'anneau : c'est sa propre bordure qui change de
@@ -48,7 +48,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=OtpInput.styles.d.ts.map

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

@@ -11,8 +11,8 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         borderColor: color.border['default-grey'],
         backgroundColor: '#FFFFFF',
         overflow: 'hidden',
-        height: spacingValue('300'),
-        width: spacingValue('300'),
+        height: spacingValue('6W'),
+        width: spacingValue('6W'),
         justifyContent: 'center',
         alignItems: 'center',
     },

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

@@ -15,5 +15,5 @@ export declare const TextInput: React.ForwardRefExoticComponent<Omit<import("rea
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKrE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;0DAgBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKrE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;0CAgBpB,CAAC"}

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

@@ -13,7 +13,7 @@ declare const _default: {
         openModal?: boolean;
         modalSubmitLabel?: string;
         onModalSubmit?: () => void;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("./TextInput.types").TextInputElement>>;
     styleFn: () => {
         caption: {
             display: "flex";
@@ -38,14 +38,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%";
@@ -83,12 +83,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;
@@ -103,14 +103,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%";
@@ -122,7 +122,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%";
@@ -132,7 +132,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 14;
             marginTop: string | number;
@@ -148,7 +148,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputWeb: {
             borderWidth: number;
@@ -172,7 +172,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -180,7 +180,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         hintContainer: {
             display: "flex";
@@ -188,7 +188,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -196,10 +196,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/TextInput.types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput, TextInputProps as ReactNativeTextInputProps } from 'react-native';
-export type TextInputElement = ReactNativeTextInput;
+import { TextInputProps as ReactNativeTextInputProps, TextInputInstance } from 'react-native';
+export interface TextInputElement extends TextInputInstance {
+}
 export type TextInputProps = Omit<ReactNativeTextInputProps, 'style'> & {
     type?: 'text' | 'email' | 'tel' | 'password';
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,cAAc,IAAI,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAE9G,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IAEtE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,IAAI,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAI9F,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;CAAG;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IAEtE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 /**
  * La saisie ordinaire : on ecrit dans le champ la ou il est. Le focus est tenu ici et non
  * laisse a la plateforme, parce que le contour se dessine sur le cadre et non sur le champ.
@@ -14,5 +14,5 @@ export declare const TextInputInline: React.ForwardRefExoticComponent<Omit<impor
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputInline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputInline.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmC,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAoClG;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;8CA0D1B,CAAC"}
+{"version":3,"file":"TextInputInline.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAkB,MAAM,mBAAmB,CAAC;AAgCrE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;0CA0D1B,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 /**
  * Le champ tel qu'il apparait dans le formulaire quand la saisie vit en modale : il a
  * l'allure d'un champ mais n'en est pas un. Tout ce qui pourrait y installer un curseur
@@ -18,5 +18,5 @@ export declare const TextInputMirror: React.ForwardRefExoticComponent<Omit<impor
 } & {
     isOpen: boolean;
     onOpen: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputMirror.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputMirror.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputMirror.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAQ5E;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;YAP2B,OAAO;YAAU,MAAM,IAAI;8CAsDjF,CAAC"}
+{"version":3,"file":"TextInputMirror.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputMirror.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAkB,MAAM,mBAAmB,CAAC;AAKrE;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;YAP2B,OAAO;YAAU,MAAM,IAAI;0CAsDjF,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 /**
  * La saisie deportee en modale, hors web : le champ du formulaire n'est plus qu'un miroir
  * qu'on presse, et la vraie saisie vit dans la modale. Un champ multiligne tient mal dans
@@ -16,5 +16,5 @@ export declare const TextInputModal: React.ForwardRefExoticComponent<Omit<import
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAwB,MAAM,cAAc,CAAC;AASvF;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;8CAgDzB,CAAC"}
+{"version":3,"file":"TextInputModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,gBAAgB,EAAkB,MAAM,mBAAmB,CAAC;AAIrE;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;0CAgDzB,CAAC"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from './TextInput.types';
 /** Le mot de passe : une saisie ordinaire, masquee, qu'un oeil permet de reveler. */
 export declare const TextInputPassword: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
     type?: "text" | "email" | "tel" | "password";
@@ -10,5 +11,5 @@ export declare const TextInputPassword: React.ForwardRefExoticComponent<Omit<imp
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputPassword.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputPassword.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,qFAAqF;AACrF,eAAO,MAAM,iBAAiB;;;;;;;;;;0DAyB7B,CAAC"}
+{"version":3,"file":"TextInputPassword.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAkB,MAAM,mBAAmB,CAAC;AAYrE,qFAAqF;AACrF,eAAO,MAAM,iBAAiB;;;;;;;;;;0CAyB7B,CAAC"}

package/dist/ui/FormControl/TextInputPassword.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { Platform } from 'react-native';
 import { ButtonIcon } from '../Button';
 import { TextInputInline } from './TextInputInline';
-// Le bouton se colle au bord du champ : ni coins arrondis, ni retrait vertical.
-const boutonAccole = { height: '100%', borderRadius: 0, paddingTop: 0, paddingBottom: 0 };
+// En natif, une hauteur en pourcentage dans ce cadre de hauteur automatique
+// peut étirer toute la saisie. Le bouton y garde la hauteur de son cran.
+const boutonAccole = {
+    ...(Platform.OS === 'web' ? { height: '100%' } : {}),
+    borderRadius: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+};
 /** Le mot de passe : une saisie ordinaire, masquee, qu'un oeil permet de reveler. */
 export const TextInputPassword = React.forwardRef(function TextInputPassword(props, ref) {
     const [masque, setMasque] = React.useState(true);

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

@@ -20,5 +20,5 @@ export type FieldBorderState = {
  * est commune. Sans ce point unique, la famille FormControl et Select divergeraient des la
  * premiere retouche, et c'est exactement la variante locale que l'ADR supprime.
  */
-export declare const fieldBorderState: <T extends object>(styles: FieldBorderStyles<T>, state: FieldBorderState) => Partial<T>;
+export declare const fieldBorderState: <S extends FieldBorderStyles<object>>(styles: S, state: FieldBorderState) => Partial<S[keyof FieldBorderStyles<object>]>;
 //# sourceMappingURL=fieldBorderState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"fieldBorderState.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fieldBorderState.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,YAAY,EAAE,CAAC,CAAC;IAChB,UAAU,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,CAAC,CAAC;IAChB,aAAa,EAAE,CAAC,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAE7B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,EAC/C,QAAQ,iBAAiB,CAAC,CAAC,CAAC,EAC5B,OAAO,gBAAgB,KACtB,OAAO,CAAC,CAAC,CAMX,CAAC"}
+{"version":3,"file":"fieldBorderState.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/fieldBorderState.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,YAAY,EAAE,CAAC,CAAC;IAChB,UAAU,EAAE,CAAC,CAAC;IACd,YAAY,EAAE,CAAC,CAAC;IAChB,aAAa,EAAE,CAAC,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAE7B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,iBAAiB,CAAC,MAAM,CAAC,EAClE,QAAQ,CAAC,EACT,OAAO,gBAAgB,KACtB,OAAO,CAAC,CAAC,CAAC,MAAM,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAM5C,CAAC"}

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

@@ -27,7 +27,7 @@ export declare const otpTheme: (styles: OtpStyles, state: OtpThemeState) => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"otpTheme.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/otpTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,SAAS,EAAE,OAAO,aAAa;;;;;;;;;;;;;CAoB9D,CAAC"}
+{"version":3,"file":"otpTheme.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/otpTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,SAAS,EAAE,OAAO,aAAa;;;;;;;;;;;;;CAiB9D,CAAC"}

package/dist/ui/FormControl/otpTheme.js

@@ -14,9 +14,6 @@ export const otpTheme = (styles, state) => ({
     containerStyle: versStyleNatif(styles.containerStyle),
     pinCodeContainerStyle: versStyleNatif({
         ...styles.pinCodeContainerStyle,
-        // Le parametre est explicite : la cellule desactivee ne pose qu'un fond, la cellule en
-        // erreur qu'une bordure. Sans lui, l'inference cherche un type commun aux quatre etats
-        // et n'en trouve aucun.
         ...fieldBorderState({
             inputFocused: styles.focusedPinCodeContainerStyle,
             inputError: styles.pinCodeContainerStyleError,