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

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

@@ -28,7 +28,7 @@ declare const _default: {
             alignItems: "center";
         };
         titleText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -46,7 +46,7 @@ declare const _default: {
             alignItems: "center";
         };
         descriptionText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -57,7 +57,7 @@ declare const _default: {
             textDecoration: string;
         };
         disabledText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };
@@ -65,6 +65,8 @@ export default _default;
 export declare const card: () => import("react").JSX.Element;
 export declare const cardDisabled: () => import("react").JSX.Element;
 export declare const cardWithMedia: () => import("react").JSX.Element;
+export declare const cardFichier: () => import("react").JSX.Element;
+export declare const cardFichierSansApercu: () => import("react").JSX.Element;
 export declare const cardWithMediaDisabled: () => import("react").JSX.Element;
 export declare const cardSection: () => import("react").JSX.Element;
 export declare const cardSectionDisabled: () => import("react").JSX.Element;

package/dist/ui/Card/Card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAiBvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAgBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Card/Card.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 import { Image } from '../../core/Image';
+import { Typography } from '../../core/Typography';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -25,6 +26,12 @@ export const cardDisabled = () => {
 export const cardWithMedia = () => {
     return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
 };
+export const cardFichier = () => {
+    return (_jsx(Box, { style: { width: 282 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx(Image, { source: "https://alveole.captive.fr/apercu-pdf.png", alt: "", width: "100%", height: 159 }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: "error", size: "sm", children: "PDF" }), _jsx(Typography, { numberOfLines: 1, children: "PC-16100_Proposition_commerciale.pdf" })] })] }) }));
+};
+export const cardFichierSansApercu = () => {
+    return (_jsx(Box, { style: { width: 282 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { style: { height: 159, alignItems: 'center', justifyContent: 'center' }, children: _jsx(LucideIcon, { name: "File", size: "md" }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: "1,5V", style: { alignItems: 'center' }, children: [_jsx(Badge, { variant: "error", size: "sm", children: "PDF" }), _jsx(Typography, { numberOfLines: 1, children: "PC-16100_Proposition_commerciale.pdf" })] })] }) }));
+};
 export const cardWithMediaDisabled = () => {
     return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
 };
@@ -38,7 +45,7 @@ export const cardSectionWithLink = () => {
     return (_jsx(Card.Section, { titre: "Titre de la carte", description: "Description de la carte", descriptionLink: "/", titreIcone: "Image", descriptionIcone: "Image" }));
 };
 export const cardHeader = () => {
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "100", children: [_jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(LucideIcon, { name: "Image", size: "md" }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "2W", children: [_jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(LucideIcon, { name: "Image", size: "md" }) })] }));
 };
 export const cardHeaderDisabled = () => {
     return (_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }));

package/dist/ui/Card/Card.stories.sources.d.ts

@@ -1,6 +1,8 @@
 export declare const card: () => string;
 export declare const cardDisabled: () => string;
 export declare const cardWithMedia: () => string;
+export declare const cardFichier: () => string;
+export declare const cardFichierSansApercu: () => string;
 export declare const cardWithMediaDisabled: () => string;
 export declare const cardSection: () => string;
 export declare const cardSectionDisabled: () => string;
@@ -12,6 +14,8 @@ export declare const storySources: {
     readonly card: () => string;
     readonly cardDisabled: () => string;
     readonly cardWithMedia: () => string;
+    readonly cardFichier: () => string;
+    readonly cardFichierSansApercu: () => string;
     readonly cardWithMediaDisabled: () => string;
     readonly cardSection: () => string;
     readonly cardSectionDisabled: () => string;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAw9B,CAAC;AAEl/B,eAAO,MAAM,aAAa,cAAu+B,CAAC;AAElgC,eAAO,MAAM,qBAAqB,cAAgmC,CAAC;AAEnoC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAw9B,CAAC;AAEl/B,eAAO,MAAM,aAAa,cAAu+B,CAAC;AAElgC,eAAO,MAAM,WAAW,cAAssB,CAAC;AAE/tB,eAAO,MAAM,qBAAqB,cAAsmB,CAAC;AAEzoB,eAAO,MAAM,qBAAqB,cAAgmC,CAAC;AAEnoC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA0hB,CAAC;AAEljB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;;;CAaf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -3,17 +3,21 @@
 export const card = () => "export const card = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardDisabled = () => "export const cardDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" src=\"https://picsum.photos/100/100\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardWithMedia = () => "export const cardWithMedia = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media>\n          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\n        </Card.Media>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
+export const cardFichier = () => "export const cardFichier = () => {\n  return (\n    <Box style={{ width: 282 }}>\n      <Card>\n        <Card.Media>\n          {/* URL absolue de la doc : un require d'asset ne se résout pas dans les apps qui affichent ces stories */}\n          <Image source=\"https://alveole.captive.fr/apercu-pdf.png\" alt=\"\" width=\"100%\" height={159} />\n        </Card.Media>\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"1,5V\" style={{ alignItems: 'center' }}>\n          <Badge variant=\"error\" size=\"sm\">\n            PDF\n          </Badge>\n          <Typography numberOfLines={1}>PC-16100_Proposition_commerciale.pdf</Typography>\n        </Box>\n      </Card>\n    </Box>\n  );\n};";
+export const cardFichierSansApercu = () => "export const cardFichierSansApercu = () => {\n  return (\n    <Box style={{ width: 282 }}>\n      <Card>\n        <Card.Media style={{ height: 159, alignItems: 'center', justifyContent: 'center' }}>\n          <LucideIcon name=\"File\" size=\"md\" />\n        </Card.Media>\n        <Box display=\"flex\" flexDirection=\"row\" gap=\"1,5V\" style={{ alignItems: 'center' }}>\n          <Badge variant=\"error\" size=\"sm\">\n            PDF\n          </Badge>\n          <Typography numberOfLines={1}>PC-16100_Proposition_commerciale.pdf</Typography>\n        </Box>\n      </Card>\n    </Box>\n  );\n};";
 export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media variant=\"disabled\">\n          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\n        </Card.Media>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardSection = () => "export const cardSection = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardSectionDisabled = () => "export const cardSectionDisabled = () => {\n  return (\n    <Card.Section\n      variant=\"disabled\"\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardSectionWithLink = () => "export const cardSectionWithLink = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      descriptionLink=\"/\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
-export const cardHeader = () => "export const cardHeader = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"100\">\n      <Card.Header\n        titre=\"Titre lorem\"\n        sousTitre=\"Sous-titre\"\n        image={<Avatar size=\"md\" fallbackText=\"M\" />}\n        badge={\n          <Badge variant=\"success\" size=\"sm\">\n            PRÉSENT\n          </Badge>\n        }\n      />\n\n      <Card.Header titre=\"Titre lorem\" sousTitre=\"Sous-titre\" image={<LucideIcon name=\"Image\" size=\"md\" />} />\n    </Box>\n  );\n};";
+export const cardHeader = () => "export const cardHeader = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n      <Card.Header\n        titre=\"Titre lorem\"\n        sousTitre=\"Sous-titre\"\n        image={<Avatar size=\"md\" fallbackText=\"M\" />}\n        badge={\n          <Badge variant=\"success\" size=\"sm\">\n            PRÉSENT\n          </Badge>\n        }\n      />\n\n      <Card.Header titre=\"Titre lorem\" sousTitre=\"Sous-titre\" image={<LucideIcon name=\"Image\" size=\"md\" />} />\n    </Box>\n  );\n};";
 export const cardHeaderDisabled = () => "export const cardHeaderDisabled = () => {\n  return (\n    <Card.Header\n      variant=\"disabled\"\n      titre=\"Titre lorem\"\n      sousTitre=\"Sous-titre\"\n      image={<Avatar size=\"md\" fallbackText=\"M\" />}\n      badge={\n        <Badge variant=\"default\" size=\"sm\">\n          PRÉSENT\n        </Badge>\n      }\n    />\n  );\n};";
 export const cardActions = () => "export const cardActions = () => {\n  return (\n    <Card.Actions>\n      <Button variant=\"secondary\" title=\"Action\" size=\"sm\" />\n      <Button variant=\"primary\" title=\"Action\" size=\"sm\" />\n    </Card.Actions>\n  );\n};";
 export const storySources = {
     card,
     cardDisabled,
     cardWithMedia,
+    cardFichier,
+    cardFichierSansApercu,
     cardWithMediaDisabled,
     cardSection,
     cardSectionDisabled,

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

@@ -3,9 +3,9 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "column";
         width: "100%";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderStyle: "solid";
         boxSizing: "border-box";
         borderRadius: import("@alveole/theme").Radius;

package/dist/ui/Card/CardHeader.styles.d.ts

@@ -11,7 +11,7 @@ export declare const useStyles: () => {
         flex: number;
     };
     titre: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -19,7 +19,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sousTitre: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -27,7 +27,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     disabledText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     trailing: {
         display: "flex";

package/dist/ui/Card/CardSection.styles.d.ts

@@ -16,7 +16,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     titleText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -34,7 +34,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     descriptionText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -45,7 +45,7 @@ export declare const useStyles: () => {
         textDecoration: string;
     };
     disabledText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=CardSection.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAsBnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAqBnB,CAAC"}

package/dist/ui/Checkbox/Checkbox.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@alveole/theme';
 import React, { useId } from 'react';
 import { Box } from '../../core/Box';
 import { FormControlCaption } from '../FormControl';
@@ -10,8 +9,7 @@ import { CheckboxLabel } from './CheckboxLabel';
 export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { size, variant, label, error, success, disabled } = props;
     const baseProps = { size, variant, label, error, success, disabled };
-    const { spacingValue } = useTheme();
     const styles = useStyles();
     const id = useId();
-    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? '1W' : '0V', style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

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

@@ -20,7 +20,7 @@ declare const _default: {
     styleFn: () => {
         label: {
             cursor: "pointer";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -37,20 +37,20 @@ declare const _default: {
         };
         labelDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         labelError: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         labelSuccess: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         checkbox: {
             flexShrink: number;
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
             backgroundColor: "transparent";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         checkboxSm: {
@@ -60,23 +60,23 @@ declare const _default: {
         };
         checkboxDisabled: {
             opacity: 1;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "transparent";
         };
         checkboxError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         checkboxSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         indicator: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         indicatorDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         checkboxContainer: {
             display: "flex";

package/dist/ui/Checkbox/Checkbox.stories.js

@@ -11,6 +11,6 @@ export default {
     component: Checkbox,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }, children: [_jsx(Checkbox, { label: "Non coch\u00E9" }), _jsx(Checkbox, { label: "Coch\u00E9", checked: true }), _jsx(Checkbox, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Checkbox, { label: "Coch\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true }), _jsx(Checkbox, { label: "Avec erreur", error: "Vous devez accepter les conditions" }), _jsx(Checkbox, { label: "Avec succ\u00E8s", success: "Valid\u00E9" })] }));
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 16, style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }, children: [_jsx(Checkbox, { label: "Size MD", size: "md" }), _jsx(Checkbox, { label: "Size SM", size: "sm" })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }, children: [_jsx(Checkbox, { label: "Non coch\u00E9" }), _jsx(Checkbox, { label: "Coch\u00E9", checked: true }), _jsx(Checkbox, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Checkbox, { label: "Coch\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true }), _jsx(Checkbox, { label: "Avec erreur", error: "Vous devez accepter les conditions" }), _jsx(Checkbox, { label: "Avec succ\u00E8s", success: "Valid\u00E9" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "2W", style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }, children: [_jsx(Checkbox, { label: "Size MD", size: "md" }), _jsx(Checkbox, { label: "Size SM", size: "sm" })] }));
 export * as Sources from './Checkbox.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA4hB,CAAC;AAEjjB,eAAO,MAAM,KAAK,cAA6T,CAAC;AAEhV,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Checkbox.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8hB,CAAC;AAEnjB,eAAO,MAAM,KAAK,cAA+T,CAAC;AAElV,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Checkbox/Checkbox.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"column\"\n    gap={24}\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }}\n  >\n    <Checkbox label=\"Non coché\" />\n    <Checkbox label=\"Coché\" checked />\n    <Checkbox label=\"Désactivé\" disabled />\n    <Checkbox label=\"Coché désactivé\" checked disabled />\n    <Checkbox label=\"Avec erreur\" error=\"Vous devez accepter les conditions\" />\n    <Checkbox label=\"Avec succès\" success=\"Validé\" />\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"row\"\n    gap={16}\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }}\n  >\n    <Checkbox label=\"Size MD\" size=\"md\" />\n    <Checkbox label=\"Size SM\" size=\"sm\" />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"column\"\n    gap=\"3W\"\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }}\n  >\n    <Checkbox label=\"Non coché\" />\n    <Checkbox label=\"Coché\" checked />\n    <Checkbox label=\"Désactivé\" disabled />\n    <Checkbox label=\"Coché désactivé\" checked disabled />\n    <Checkbox label=\"Avec erreur\" error=\"Vous devez accepter les conditions\" />\n    <Checkbox label=\"Avec succès\" success=\"Validé\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"row\"\n    gap=\"2W\"\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }}\n  >\n    <Checkbox label=\"Size MD\" size=\"md\" />\n    <Checkbox label=\"Size SM\" size=\"sm\" />\n  </Box>\n);";
 export const storySources = {
     Default,
     Sizes,

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

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     label: {
         cursor: "pointer";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -18,20 +18,20 @@ export declare const useStyles: () => {
     };
     labelDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     labelError: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     labelSuccess: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     checkbox: {
         flexShrink: number;
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
         backgroundColor: "transparent";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     checkboxSm: {
@@ -41,23 +41,23 @@ export declare const useStyles: () => {
     };
     checkboxDisabled: {
         opacity: 1;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "transparent";
     };
     checkboxError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     checkboxSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     indicator: {
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     indicatorDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     checkboxContainer: {
         display: "flex";

package/dist/ui/Checkbox/Checkbox.styles.js

@@ -15,15 +15,15 @@ const coque = ({ spacing }) => ({
 const caseACocher = ({ color, spacingValue, radius }) => ({
     checkbox: {
         flexShrink: 0,
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
         backgroundColor: 'transparent',
         borderColor: color.light.border['action-high-primary'],
         borderRadius: radius('md'),
     },
     checkboxSm: {
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
         borderRadius: radius('sm'),
     },
     checkboxDisabled: {
@@ -38,8 +38,8 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
         borderColor: color.border['plain-success'],
     },
     indicator: {
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
         backgroundColor: color.light.background['action-high-primary'],
         borderRadius: radius('md'),
     },

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

@@ -15,12 +15,12 @@ declare const _default: {
             height: number;
             paddingRight: number;
             paddingLeft: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         counterPrimary: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/Counter/Counter.stories.js

@@ -11,5 +11,5 @@ export default {
     component: Counter,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'center' }, children: [_jsx(Counter, { variant: "default", count: 20 }), _jsx(Counter, { variant: "primary", count: 20 })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Counter, { variant: "default", count: 20 }), _jsx(Counter, { variant: "primary", count: 20 })] }));
 export * as Sources from './Counter.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgP,CAAC;AAErQ,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Counter.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmP,CAAC;AAExQ,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Counter/Counter.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={8} style={{ alignItems: 'center' }}>\n    <Counter variant=\"default\" count={20} />\n    <Counter variant=\"primary\" count={20} />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n    <Counter variant=\"default\" count={20} />\n    <Counter variant=\"primary\" count={20} />\n  </Box>\n);";
 export const storySources = {
     Default,
 };

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

@@ -8,12 +8,12 @@ export declare const useStyles: () => {
         height: number;
         paddingRight: number;
         paddingLeft: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     counterPrimary: {
-        backgroundColor: string;
-        color: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Counter.styles.d.ts.map

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

@@ -76,7 +76,7 @@ declare const _default: {
             flexDirection: "row";
             alignItems: "stretch";
             borderBottomWidth: number;
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         rowSm: {
             minHeight: number;
@@ -91,21 +91,21 @@ declare const _default: {
             cursor: "pointer";
         };
         rowBackground: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         rowHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         rowSelected: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         headerRow: {
             display: "flex";
             flexDirection: "row";
             alignItems: "stretch";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         headerRowSm: {
             minHeight: number;
@@ -140,7 +140,7 @@ declare const _default: {
             paddingRight: string | number;
         };
         headerLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -148,16 +148,16 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         headerLabelActive: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         table: {
             display: "flex";
             flexDirection: "column";
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             overflow: "hidden";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         scrollContent: {
             display: "flex";
@@ -172,7 +172,7 @@ declare const _default: {
             padding: string | number;
         };
         emptyStateLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

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

@@ -67,7 +67,7 @@ export declare const useStyles: () => {
         flexDirection: "row";
         alignItems: "stretch";
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     rowSm: {
         minHeight: number;
@@ -82,21 +82,21 @@ export declare const useStyles: () => {
         cursor: "pointer";
     };
     rowBackground: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     rowHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     rowSelected: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     headerRow: {
         display: "flex";
         flexDirection: "row";
         alignItems: "stretch";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     headerRowSm: {
         minHeight: number;
@@ -131,7 +131,7 @@ export declare const useStyles: () => {
         paddingRight: string | number;
     };
     headerLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -139,16 +139,16 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     headerLabelActive: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     table: {
         display: "flex";
         flexDirection: "column";
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         overflow: "hidden";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     scrollContent: {
         display: "flex";
@@ -163,7 +163,7 @@ export declare const useStyles: () => {
         padding: string | number;
     };
     emptyStateLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;