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

package/dist/ui/Button/Button.stories.js

@@ -33,16 +33,16 @@ export default {
  *
  * Pour ce qui navigue, prendre `A`. Pour l'action discrète sans cadre, c'est `tertiary`.
  */
-export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
+export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
 /** `md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant. */
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', style: { alignItems: 'center' }, gap: "3W", children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Lg" })] }));
 /**
  * - `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.
  * - `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.
  * - `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi
  *   l'état accessible correspondant, ce que `selected` ne fait pas.
  */
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Default" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Default" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
 /**
  * Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la
  * prop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).
@@ -71,7 +71,7 @@ export const Loading = () => {
         setIsLoading(true);
         setTimeout(() => setIsLoading(false), 3000);
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
 };
 /**
  * Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
@@ -90,16 +90,16 @@ export const OnPressAsynchrone = () => {
         setEnvois(n => n + 1);
         await new Promise(resolve => setTimeout(resolve, 3000));
     };
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
 };
 /** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
-export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
 /**
  * `leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.
  * Il est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien
  * que le bouton garde sa hauteur et son alignement.
  */
-export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }) }), _jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: "User" })] }));
+export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: _jsx(Avatar, { size: "xs", fallbackText: "Marie Curie" }) }), _jsx(Button, { variant: "tertiary", title: "Marie Curie", leading: "User" })] }));
 /**
  * `ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :
  * il ne bascule plus en mode icône seule quand on le lui retire.
@@ -116,7 +116,7 @@ export const TertiaireAvecAvatar = () => (_jsxs(Box, { display: "flex", flexDire
  * Il accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de
  * l'icône de celle du bouton.
  */
-export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: 24, style: { alignItems: 'center' }, children: [_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "secondary", size: "md", icon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(ButtonIcon, { variant: "primary", size: "md", icon: "Plus", accessibilityLabel: "Ajouter" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "CircleUser", iconSize: "xs", accessibilityLabel: "Voir le profil" })] }));
+export const IconOnly = () => (_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: 'wrap', gap: "3W", style: { alignItems: 'center' }, children: [_jsx(ButtonIcon, { variant: "tertiary", size: "sm", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", icon: "MoreHorizontal", accessibilityLabel: "Plus d'actions" }), _jsx(ButtonIcon, { variant: "secondary", size: "md", icon: "Trash", accessibilityLabel: "Supprimer" }), _jsx(ButtonIcon, { variant: "primary", size: "md", icon: "Plus", accessibilityLabel: "Ajouter" }), _jsx(ButtonIcon, { variant: "tertiary", size: "md", icon: "CircleUser", iconSize: "xs", accessibilityLabel: "Voir le profil" })] }));
 /** Le bouton remplit la largeur de son parent, au lieu de s'ajuster à son contenu. */
 export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
 export * as Sources from './Button.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA+V,CAAC;AAErX,eAAO,MAAM,KAAK,cAA8V,CAAC;AAEjX,eAAO,MAAM,MAAM,cAA+X,CAAC;AAEnZ,eAAO,MAAM,OAAO,cAA2qB,CAAC;AAEhsB,eAAO,MAAM,iBAAiB,cAA6gB,CAAC;AAE5iB,eAAO,MAAM,KAAK,cAA0X,CAAC;AAE7Y,eAAO,MAAM,mBAAmB,cAAoX,CAAC;AAErZ,eAAO,MAAM,QAAQ,cAAm0B,CAAC;AAEz1B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAAiW,CAAC;AAEvX,eAAO,MAAM,KAAK,cAAgW,CAAC;AAEnX,eAAO,MAAM,MAAM,cAAiY,CAAC;AAErZ,eAAO,MAAM,OAAO,cAA6qB,CAAC;AAElsB,eAAO,MAAM,iBAAiB,cAA+gB,CAAC;AAE9iB,eAAO,MAAM,KAAK,cAA4X,CAAC;AAE/Y,eAAO,MAAM,mBAAmB,cAAsX,CAAC;AAEvZ,eAAO,MAAM,QAAQ,cAAq0B,CAAC;AAE31B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}

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

@@ -1,13 +1,13 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Button/Button.stories.tsx
-export const Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n    <Button variant=\"primary\" title=\"Primary\" />\n    <Button variant=\"secondary\" title=\"Secondary\" />\n    <Button variant=\"tertiary\" title=\"Tertiary\" />\n    <Button variant=\"danger\" title=\"Danger\" />\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} style={{ alignItems: 'center' }} gap={24}>\n    <Button variant=\"secondary\" size=\"sm\" title=\"Sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Lg\" />\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n    <Button variant=\"secondary\" title=\"Default\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n    <Button variant=\"secondary\" title=\"Expanded\" expanded />\n  </Box>\n);";
-export const Loading = () => "export const Loading = () => {\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  const handlePress = () => {\n    setIsLoading(true);\n    setTimeout(() => setIsLoading(false), 3000);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n      <Button variant=\"primary\" title=\"Enregistrer\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"secondary\" title=\"Exporter\" leading=\"Download\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"primary\" title=\"Délai court\" loadingDelay=\"short\" isLoading={isLoading} onPress={handlePress} />\n    </Box>\n  );\n};";
-export const OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n  const [envois, setEnvois] = React.useState(0);\n\n  const envoyer = async () => {\n    setEnvois(n => n + 1);\n    await new Promise(resolve => setTimeout(resolve, 3000));\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24} style={{ alignItems: 'center' }}>\n      <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n      <Typography>Envois : {envois}</Typography>\n    </Box>\n  );\n};";
-export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24}>\n    <Button variant=\"secondary\" title=\"Leading\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Trailing\" trailing=\"Download\" />\n    <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n  </Box>\n);";
-export const TertiaireAvecAvatar = () => "export const TertiaireAvecAvatar = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24} style={{ alignItems: 'center' }}>\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} />\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading=\"User\" />\n  </Box>\n);";
-export const IconOnly = () => "export const IconOnly = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap={24} style={{ alignItems: 'center' }}>\n    <ButtonIcon variant=\"tertiary\" size=\"sm\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"lg\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"secondary\" size=\"md\" icon=\"Trash\" accessibilityLabel=\"Supprimer\" />\n    <ButtonIcon variant=\"primary\" size=\"md\" icon=\"Plus\" accessibilityLabel=\"Ajouter\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"CircleUser\" iconSize=\"xs\" accessibilityLabel=\"Voir le profil\" />\n  </Box>\n);";
+export const Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n    <Button variant=\"primary\" title=\"Primary\" />\n    <Button variant=\"secondary\" title=\"Secondary\" />\n    <Button variant=\"tertiary\" title=\"Tertiary\" />\n    <Button variant=\"danger\" title=\"Danger\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} style={{ alignItems: 'center' }} gap=\"3W\">\n    <Button variant=\"secondary\" size=\"sm\" title=\"Sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Lg\" />\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n    <Button variant=\"secondary\" title=\"Default\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n    <Button variant=\"secondary\" title=\"Expanded\" expanded />\n  </Box>\n);";
+export const Loading = () => "export const Loading = () => {\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  const handlePress = () => {\n    setIsLoading(true);\n    setTimeout(() => setIsLoading(false), 3000);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n      <Button variant=\"primary\" title=\"Enregistrer\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"secondary\" title=\"Exporter\" leading=\"Download\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"primary\" title=\"Délai court\" loadingDelay=\"short\" isLoading={isLoading} onPress={handlePress} />\n    </Box>\n  );\n};";
+export const OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n  const [envois, setEnvois] = React.useState(0);\n\n  const envoyer = async () => {\n    setEnvois(n => n + 1);\n    await new Promise(resolve => setTimeout(resolve, 3000));\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\" style={{ alignItems: 'center' }}>\n      <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n      <Typography>Envois : {envois}</Typography>\n    </Box>\n  );\n};";
+export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\">\n    <Button variant=\"secondary\" title=\"Leading\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Trailing\" trailing=\"Download\" />\n    <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n  </Box>\n);";
+export const TertiaireAvecAvatar = () => "export const TertiaireAvecAvatar = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\" style={{ alignItems: 'center' }}>\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} />\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading=\"User\" />\n  </Box>\n);";
+export const IconOnly = () => "export const IconOnly = () => (\n  <Box display=\"flex\" flexDirection=\"row\" flexWrap={'wrap'} gap=\"3W\" style={{ alignItems: 'center' }}>\n    <ButtonIcon variant=\"tertiary\" size=\"sm\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"lg\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"secondary\" size=\"md\" icon=\"Trash\" accessibilityLabel=\"Supprimer\" />\n    <ButtonIcon variant=\"primary\" size=\"md\" icon=\"Plus\" accessibilityLabel=\"Ajouter\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"CircleUser\" iconSize=\"xs\" accessibilityLabel=\"Voir le profil\" />\n  </Box>\n);";
 export const FullWidth = () => "export const FullWidth = () => <Button variant=\"primary\" title=\"Full Width\" fullWidth />;";
 export const storySources = {
     Variants,

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

@@ -1,150 +1,150 @@
 export declare const useStyles: () => {
     dangerTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainerHover: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     dangerTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     dangerIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     dangerIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainer: {};
     tertiaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     tertiaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryContainerDisabled: {
         cursor: "not-allowed";
     };
     tertiaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tertiaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainer: {
         borderStyle: "solid";
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerHover: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerPressed: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     secondaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryContainerDisabled: {
         cursor: "not-allowed";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     secondaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     secondaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainer: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryTitleHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainerHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryContainerPressed: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryTitleDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryContainerDisabled: {
         cursor: "not-allowed";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     primaryIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     primaryIconDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     selectedContainer: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
     };
     selectedContainerHover: {};
     selectedTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     selectedIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     smContainer: {
         height: "100%";

package/dist/ui/Button/buttonIconStyling.d.ts

@@ -1,30 +1,14 @@
 import { CSSProperties } from 'react';
+import { ViewStyle } from 'react-native';
 import { IconProps } from '../LucideIcon';
 import type { ButtonIconProps } from './ButtonIcon';
 import { ButtonTaille, Styles } from './buttonVariants';
 export type EtatDuBoutonIcone = Pick<ButtonIconProps, 'variant' | 'disabled' | 'iconSize' | 'style'> & {
     taille: ButtonTaille;
 };
-export declare const styleDuCadreDIcone: (styles: Styles, etat: EtatDuBoutonIcone, hovered: boolean) => {
-    backgroundColor: import("react-native").ColorValue | undefined;
-    borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-    borderBottomLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderBottomRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderTopLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderTopRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    width: import("react-native").DimensionValue;
-    height: import("react-native").DimensionValue;
-    overflow: "hidden";
-    borderWidth: number;
-    borderStyle: "solid";
-    borderColor: string;
-    boxSizing: "border-box";
-    justifyContent: "center";
-    alignItems: "center";
-    transitionProperty: "all";
-    transitionDuration: "150ms";
-    transitionTimingFunction: "ease";
-};
+type CadreDIcone = ViewStyle & Pick<CSSProperties, 'transitionProperty' | 'transitionDuration' | 'transitionTimingFunction'>;
+export declare const styleDuCadreDIcone: (styles: Styles, etat: EtatDuBoutonIcone, hovered: boolean) => CadreDIcone;
 export declare const apparenceDeLIcone: (styles: Styles, { variant, taille, disabled, iconSize }: EtatDuBoutonIcone, hovered: boolean) => Omit<IconProps, "name">;
 export declare const styleDuNombre: (styles: Styles, { variant, disabled }: EtatDuBoutonIcone, hovered: boolean) => CSSProperties;
+export {};
 //# sourceMappingURL=buttonIconStyling.d.ts.map

package/dist/ui/Button/buttonIconStyling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonIconStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EACL,YAAY,EAOZ,MAAM,EAGP,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrG,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AASF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,MAAM,iBAAiB,EAAE,SAAS,OAAO;;;;;;;;;;;;;;;;;;;CAsB3F,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,yCAAyC,iBAAiB,EAC1D,SAAS,OAAO,KACf,IAAI,CAAC,SAAS,EAAE,MAAM,CAGvB,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,uBAAuB,iBAAiB,EACxC,SAAS,OAAO,KACf,aASF,CAAC"}
+{"version":3,"file":"buttonIconStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonIconStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EACL,YAAY,EAOZ,MAAM,EAGP,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrG,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC;AAUF,KAAK,WAAW,GAAG,SAAS,GAC1B,IAAI,CAAC,aAAa,EAAE,oBAAoB,GAAG,oBAAoB,GAAG,0BAA0B,CAAC,CAAC;AAEhG,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,MAAM,iBAAiB,EAAE,SAAS,OAAO,KAAG,WAsB9F,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,yCAAyC,iBAAiB,EAC1D,SAAS,OAAO,KACf,IAAI,CAAC,SAAS,EAAE,MAAM,CAGvB,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,uBAAuB,iBAAiB,EACxC,SAAS,OAAO,KACf,aASF,CAAC"}

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,mCAgBvB,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: require('@/assets/images/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,cAA6kB,CAAC;AAEtmB,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          <Image source={require('@/assets/images/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 })] }));
 });