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

package/dist/ui/Sidebar/SidebarItem.js

@@ -7,6 +7,7 @@ import { A } from '../../core/A';
 import { Box } from '../../core/Box';
 import { fondAuSurvol } from '../../core/styleTamagui/fondAuSurvol';
 import { Typography } from '../../core/Typography';
+import { Counter } from '../Counter';
 import { LeadingSlot } from '../Leading';
 import { useStyles } from './Sidebar.styles';
 // Un item mène quelque part ou déclenche quelque chose : dans un cas c'est un lien, dans
@@ -21,6 +22,8 @@ const IndicateurPageCourante = () => {
     const styles = useStyles();
     return (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) }));
 };
+// Un compteur à zéro ne compte rien : on ne l'affiche pas.
+const CompteurDItem = ({ counter, counterVariant = 'default' }) => counter != null && counter > 0 ? (_jsx(Box, { mt: "auto", mb: "auto", children: _jsx(Counter, { variant: counterVariant, count: counter }) })) : null;
 const SidebarItemDesktop = (props) => {
     const { title, leading } = props;
     const styles = useStyles();
@@ -31,7 +34,7 @@ const SidebarItemDesktop = (props) => {
                     // La ligne courante se survole comme ses voisines : elle est un lien au même titre, et
                     // lui réserver une teinte propre n'ajoutait qu'un cas particulier. Son fond de repos
                     // étant plus sombre, le survol commun l'éclaircit - la direction que prend Primer.
-                    backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, children: title })] })] }) }));
+                    backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected, flex: 1, textAlign: 'left' }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 const SidebarItemMobile = (props) => {
     const { title, leading } = props;
@@ -49,7 +52,7 @@ const SidebarItemMobile = (props) => {
                                 color: isCurrentPage
                                     ? styles.sidebarItemTitleSelectedMobile.color
                                     : styles.sidebarItemTitleSelectedMobile.stroke,
-                            } }), _jsx(Typography, { style: titre, color: { default: couleurDuTitre, hover: couleurAuSurvol }, children: title })] })] }) }));
+                            } }), _jsx(Typography, { style: { ...titre, flex: 1, textAlign: 'left' }, color: { default: couleurDuTitre, hover: couleurAuSurvol }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 export const SidebarItem = (props) => {
     const { isVariant } = useTheme();

package/dist/ui/Signature/Signature.js

@@ -53,7 +53,7 @@ export const Signature = (props) => {
     const styles = useStyles();
     const ref = React.useRef(null);
     const { handleOk, handleEnd, handleClear } = useLectureDifferee(ref, onChange);
-    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
+    const webviewHeightWithBorders = height + spacingValue('4W') + spacingValue('2W') + 3;
     return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsx(SignatureHeader, { date: date, dateLabel: dateLabel, clearButtonLabel: clearButtonLabel, onClear: () => ref.current?.clearSignature() }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: feuilleDeStyleCanvas({
                         height,
                         rayon: spacing('3V'),

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

@@ -12,11 +12,11 @@ declare const _default: {
             flexDirection: "column";
         };
         pen: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
         };
         signatureWeb: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderRadius: import("@alveole/theme").Radius;
         };

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

@@ -5,11 +5,11 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     pen: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
     };
     signatureWeb: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderRadius: import("@alveole/theme").Radius;
     };

package/dist/ui/Skeleton/Skeleton.js

@@ -5,7 +5,7 @@ import { Box } from '../../core/Box';
 import { useStyles } from './Skeleton.styles';
 const PULSE_DURATION = 700;
 export const Skeleton = (props) => {
-    const { width = '100%', height = 16, borderRadius = 4, style, ...rest } = props;
+    const { width = '100%', height = 16, borderRadius = 'sm', style, ...rest } = props;
     const styles = useStyles();
     const [opacity] = React.useState(() => new Animated.Value(0.5));
     React.useEffect(() => {

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

@@ -16,7 +16,7 @@ declare const _default: {
             right: number;
             bottom: number;
             left: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAA8D,CAAC;AAEhF,eAAO,MAAM,SAAS,mCAAmD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAAgE,CAAC;AAElF,eAAO,MAAM,SAAS,mCAAoD,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Skeleton/Skeleton.stories.js

@@ -18,8 +18,8 @@ La forme se règle avec \`width\` (\`100%\` par défaut), \`height\` (16 px par
 };
 export const Ligne = () => _jsx(Skeleton, { width: "60%" });
 export const Carre = () => _jsx(Skeleton, { width: 64, height: 64 });
-export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: 24 });
-export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: 8 });
+export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: "full" });
+export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: "md" });
 /**
  * Des lignes de largeurs décroissantes imitent un paragraphe de texte.
  */
@@ -27,5 +27,5 @@ export const Paragraphe = () => (_jsxs(Box, { display: "flex", flexDirection: "c
 /**
  * Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.
  */
-export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: 20 }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
+export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: "full" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
 export * as Sources from './Skeleton.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA2F,CAAC;AAE7G,eAAO,MAAM,SAAS,cAAqF,CAAC;AAE5G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAqiB,CAAC;AAEjkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA+F,CAAC;AAEjH,eAAO,MAAM,SAAS,cAAwF,CAAC;AAE/G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAyiB,CAAC;AAErkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

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

@@ -2,10 +2,10 @@
 // Source: src/ui/Skeleton/Skeleton.stories.tsx
 export const Ligne = () => "export const Ligne = () => <Skeleton width=\"60%\" />;";
 export const Carre = () => "export const Carre = () => <Skeleton width={64} height={64} />;";
-export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius={24} />;";
-export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius={8} />;";
+export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius=\"full\" />;";
+export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius=\"md\" />;";
 export const Paragraphe = () => "export const Paragraphe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" width=\"100%\">\n    <Skeleton width=\"40%\" height={20} />\n    <Skeleton />\n    <Skeleton width=\"90%\" />\n    <Skeleton width=\"65%\" />\n  </Box>\n);";
-export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius={20} />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
+export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius=\"full\" />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
 export const storySources = {
     Ligne,
     Carre,

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

@@ -9,7 +9,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Skeleton.styles.d.ts.map

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

@@ -7,10 +7,10 @@ declare const _default: {
     component: ({ style, ...props }: import("./Spinner.shared").SpinnerProps) => import("react").JSX.Element | null;
     styleFn: () => {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/Spinner/Spinner.stories.js

@@ -20,7 +20,7 @@ La prop \`delay\` permet de retarder l'apparition du spinner pour éviter un fla
     component: Spinner,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
 /**
  * `delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :
  * rien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`
@@ -28,5 +28,5 @@ export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row",
  * millisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour
  * régler le retard de son propre spinner pendant `isLoading`.
  */
-export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
+export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
 export * as Sources from './Spinner.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsO,CAAC;AAEzP,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,YAAY;;;CAGf,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":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAwO,CAAC;AAE3P,eAAO,MAAM,SAAS,cAAyQ,CAAC;AAEhS,eAAO,MAAM,YAAY;;;CAGf,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/Spinner/Spinner.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Spinner/Spinner.stories.tsx
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
-export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
+export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
 export const storySources = {
     Sizes,
     WithDelay,

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     track: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     arc: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Spinner.styles.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts

@@ -1,8 +1,10 @@
 import { Animated } from 'react-native';
+export interface Rotation extends Animated.AnimatedInterpolation<string> {
+}
 /**
  * L'angle d'un spinner qui tourne sans fin, un tour toutes les 800 ms.
  *
  * Seul le pilote differe : le natif tourne hors du fil JavaScript, le navigateur n'en a pas.
  */
-export declare const useRotation: (useNativeDriver: boolean) => Animated.AnimatedInterpolation<string | number>;
+export declare const useRotation: (useNativeDriver: boolean) => Rotation;
 //# sourceMappingURL=useRotation.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,oDAYnD,CAAC"}
+{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAIhD,MAAM,WAAW,QAAS,SAAQ,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC;CAAG;AAE3E;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,KAAG,QAYtD,CAAC"}

package/dist/ui/Spinner/useSpinner.d.ts

@@ -6,13 +6,13 @@ import { SpinnerProps } from './Spinner.shared';
 export declare const useSpinner: ({ size, delay }: SpinnerProps, useNativeDriver: boolean) => {
     styles: {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
-    spin: import("react-native").Animated.AnimatedInterpolation<string | number>;
+    spin: import("./useRotation").Rotation;
     visible: boolean;
     px: number;
     strokeWidth: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASrG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA4BF,eAAO,MAAM,MAAM;SAlCZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCA8FnB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASrG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA4BF,eAAO,MAAM,MAAM;SAlCZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCA6FnB,CAAC"}

package/dist/ui/Switch/Switch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { focusRingProps, useTheme } from '@alveole/theme';
+import { focusRingProps } from '@alveole/theme';
 import React, { useId } from 'react';
 import { Platform, Pressable } from 'react-native';
 import { Switch as TamaguiSwitch } from 'tamagui';
@@ -23,7 +23,6 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
     const isControlled = checked !== undefined;
     const [model, setModel] = React.useState(Boolean(checked));
     const value = isControlled ? checked : model;
-    const { spacingValue } = useTheme();
     const styles = useStyles();
     const uniqId = useId();
     id = id || `switch--${uniqId}`;
@@ -35,5 +34,5 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
     const { bouton, pouce, libelle } = apparenceDuSwitch(styles, { value, disabled, noPadding, style });
     const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, ...DIMENSIONS_DE_LA_PISTE, checked: value, onCheckedChange: onChange, style: bouton, disabled: disabled, accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: Boolean(value), disabled: Boolean(disabled) }, ...focusRingProps(), ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { ...animer('quicker'), width: POUCE, height: POUCE, style: pouce }) }));
     const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(SwitchLabel, { id: id, checked: value, disabled: disabled, onChange: onChange, children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: libelle, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
-    return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
+    return (_jsx(Box, { tag: "switch", gap: error || success ? '1W' : '0V', style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

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

@@ -20,8 +20,8 @@ declare const _default: {
             paddingRight: string | number;
         };
         switchButton: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "pointer";
             padding: number;
             minHeight: string | number;
@@ -29,29 +29,29 @@ declare const _default: {
             marginBottom: string;
         };
         switchButtonChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchButtonDisabled: {
             opacity: 1;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
         };
         switchThumb: {
             borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             boxShadow: "none";
         };
         switchThumbChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchThumbDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
             borderColor: "#FFFFFF";
         };
         switchLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

package/dist/ui/Switch/Switch.stories.js

@@ -11,7 +11,7 @@ export default {
     component: Switch,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
 export const Controlled = () => {
     const [value, setValue] = useState(false);
     return _jsx(Switch, { label: value ? 'Activé' : 'Désactivé', checked: value, onCheckedChange: v => setValue(!!v) });

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0S,CAAC;AAE/T,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA4S,CAAC;AAEjU,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Switch/Switch.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
 export const Controlled = () => "export const Controlled = () => {\n  const [value, setValue] = useState(false);\n  return <Switch label={value ? 'Activé' : 'Désactivé'} checked={value} onCheckedChange={v => setValue(!!v)} />;\n};";
 export const storySources = {
     Default,

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

@@ -7,8 +7,8 @@ export declare const useStyles: () => {
         paddingRight: string | number;
     };
     switchButton: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "pointer";
         padding: number;
         minHeight: string | number;
@@ -16,29 +16,29 @@ export declare const useStyles: () => {
         marginBottom: string;
     };
     switchButtonChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchButtonDisabled: {
         opacity: 1;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
     };
     switchThumb: {
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         boxShadow: "none";
     };
     switchThumbChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchThumbDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
         borderColor: "#FFFFFF";
     };
     switchLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

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

@@ -8,10 +8,10 @@ declare const _default: {
     component: (props: import("./Tabs").TabsProps) => React.JSX.Element;
     styleFn: () => {
         tabIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabsLabel: {
             fontSize: 14;
@@ -47,7 +47,7 @@ declare const _default: {
             cursor: "pointer";
         };
         tabsTabActive: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
         };
         wrapper: {
@@ -68,7 +68,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         container: {
             flex: number;
@@ -97,7 +97,7 @@ declare const _default: {
             borderBottomRightRadius: string | number;
             gap: string | number;
             boxSizing: "border-box";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
             backgroundColor: "transparent";
             overflowX: "scroll";
@@ -122,5 +122,6 @@ declare const _default: {
 export default _default;
 export declare const Example: () => React.JSX.Element;
 export declare const Controle: () => React.JSX.Element;
+export declare const OngletUnique: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAGF,eAAO,MAAM,YAAY,yBAKxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -37,6 +37,8 @@ export const Controle = () => {
         { label: 'Onglet 3', value: 'onglet-3', content: _jsx(Typography, { children: "Contenu de onglet 3" }) },
     ];
     const [ongletActif, setOngletActif] = React.useState('onglet-1');
-    return (_jsxs(Box, { width: '100%', gap: 16, children: [_jsxs(Box, { flexDirection: "row", gap: 8, children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
+    return (_jsxs(Box, { width: '100%', gap: "2W", children: [_jsxs(Box, { flexDirection: "row", gap: "1W", children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
 };
+// Un onglet seul est desactive : il garde pourtant sa pleine opacite.
+export const OngletUnique = () => (_jsx(Tabs, { defaultValue: "seul", tabs: [{ label: 'Onglet seul', value: 'seul', content: _jsx(Typography, { children: "Contenu de l onglet seul" }) }] }));
 export * as Sources from './Tabs.stories.sources';

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

@@ -1,8 +1,10 @@
 export declare const Example: () => string;
 export declare const Controle: () => string;
+export declare const OngletUnique: () => string;
 export declare const storySources: {
     readonly Example: () => string;
     readonly Controle: () => string;
+    readonly OngletUnique: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tabs.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAA44B,CAAC;AAEl6B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAAi5B,CAAC;AAEv6B,eAAO,MAAM,YAAY,cAA8M,CAAC;AAExO,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,8 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tabs/Tabs.stories.tsx
 export const Example = () => "export const Example = () => {\n  const [_activeTab, setActiveTab] = React.useState(0);\n\n  return (\n    <Box width={'100%'}>\n      <Tabs\n        defaultValue={'onglet-1'}\n        onChange={setActiveTab}\n        urlAnchorPrefix=\"tabs-story\"\n        tabs={[\n          { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n          { label: 'Onglet 2', counter: 12, value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n          { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n          {\n            label: 'Onglet 4',\n            leading: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
-export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap={16}>\n      <Box flexDirection=\"row\" gap={8}>\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
+export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap=\"2W\">\n      <Box flexDirection=\"row\" gap=\"1W\">\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
+export const OngletUnique = () => "export const OngletUnique = () => (\n  <Tabs\n    defaultValue=\"seul\"\n    tabs={[{ label: 'Onglet seul', value: 'seul', content: <Typography>Contenu de l onglet seul</Typography> }]}\n  />\n);";
 export const storySources = {
     Example,
     Controle,
+    OngletUnique,
 };

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     tabIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabsLabel: {
         fontSize: 14;
@@ -39,7 +39,7 @@ export declare const useStyles: () => {
         cursor: "pointer";
     };
     tabsTabActive: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
     };
     wrapper: {
@@ -60,7 +60,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     container: {
         flex: number;
@@ -89,7 +89,7 @@ export declare const useStyles: () => {
         borderBottomRightRadius: string | number;
         gap: string | number;
         boxSizing: "border-box";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
         backgroundColor: "transparent";
         overflowX: "scroll";

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

@@ -22,20 +22,20 @@ declare const _default: {
             alignItems: "center";
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             whiteSpace: "nowrap";
             overflow: "hidden";
             textOverflow: "ellipsis";
             maxWidth: string;
         };
         tagSurvole: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSelected: {
-            borderColor: string;
-            color: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSm: {
             fontSize: 12;
@@ -64,7 +64,7 @@ declare const _default: {
             marginRight: number;
         };
         croixSurvolee: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         croixSm: {
             marginLeft: number;

package/dist/ui/Tag/Tag.stories.js

@@ -11,9 +11,9 @@ export default {
     component: Tag,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
-export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 16, children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
-export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
-export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
-export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 24, style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
+export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
+export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
+export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
+export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: "3W", style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
 export * as Sources from './Tag.stories.sources';