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

package/dist/core/Box/Box.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAEzB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAEjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,KAAK,UAAU,GAAG,OAAO,CAAC,UAAU,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;AACnD,KAAK,SAAS,GAAG,UAAU,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;AAEpD,KAAK,YAAY,GAAG,UAAU,GAAG,aAAa,CAAC;AAC/C,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;AAIzF,KAAK,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,CAAC,CAAC,EAAE,UAAU,CAAC;IACf,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAEhB,CAAC,CAAC,EAAE,SAAS,CAAC;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IAEf,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}

package/dist/core/Box/elementDuTag.d.ts

@@ -0,0 +1,2 @@
+export declare const elementDuTag: (tag: string | undefined) => string;
+//# sourceMappingURL=elementDuTag.d.ts.map

package/dist/core/Box/elementDuTag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementDuTag.d.ts","sourceRoot":"","sources":["../../../src/core/Box/elementDuTag.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,GAAG,SAAS,WAOnD,CAAC"}

package/dist/core/Box/elementDuTag.js

@@ -0,0 +1,12 @@
+// Un nom d'element invalide fait lever `createElement` au DOM et tomber tout le rendu.
+const NOM_D_ELEMENT = /^[a-z][a-z0-9-]*$/;
+export const elementDuTag = (tag) => {
+    if (tag === undefined)
+        return 'box';
+    if (NOM_D_ELEMENT.test(tag))
+        return tag;
+    if (__DEV__) {
+        console.warn('Warning:', `Box : le tag "${tag}" n'est pas un nom d'element en minuscules, rendu en <box>.`);
+    }
+    return 'box';
+};

package/dist/core/Code/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,gCAQ3C,CAAC"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,gCAkB3C,CAAC"}

package/dist/core/Code/Code.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
+import { Platform, View } from 'react-native';
 import { Typography } from '../Typography';
 import { useStyles } from './Code.styles';
 export const Code = ({ children }) => {
     const { text } = useTheme();
     const styles = useStyles();
+    // Un Text imbriqué ignore le padding et l'arrondi en natif. Une vue inline
+    // porte la surface et laisse le texte du code dans le flux du paragraphe.
+    if (Platform.OS !== 'web') {
+        return (_jsx(View, { style: styles.codeSurface, children: _jsx(Typography, { style: [text['Corps de texte'].SM.Regular, styles.codeText], children: children }) }));
+    }
     return (_jsx(Typography, { tag: "code", style: [text['Corps de texte'].SM.Regular, styles.code], children: children }));
 };

package/dist/core/Code/Code.stories.d.ts

@@ -6,15 +6,28 @@ declare const _default: {
     component: ({ children }: import("./Code").CodeProps) => import("react").JSX.Element;
     styleFn: () => {
         code: {
-            color: string;
-            backgroundColor: "rgba(135, 131, 120, 0.12)";
+            backgroundColor: string;
             paddingLeft: number;
             paddingRight: number;
             paddingTop: number;
             paddingBottom: number;
             borderRadius: import("@alveole/theme").Radius;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
         };
+        codeText: {
+            color: import("@alveole/theme").ThemeColor;
+            fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+        };
+        codeSurface: {
+            paddingTop: number;
+            paddingBottom: number;
+            transform: "translateY(2px)";
+            backgroundColor: string;
+            paddingLeft: number;
+            paddingRight: number;
+            borderRadius: import("@alveole/theme").Radius;
+        };
     };
 };
 export default _default;

package/dist/core/Code/Code.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAWlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Code.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAWlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Code/Code.stories.js

@@ -12,5 +12,5 @@ export default {
     styleFn: useStyles,
 };
 export const Basic = () => (_jsx(Box, { children: _jsxs(Typography, { children: ["La balise ", _jsx(Code, { children: '<Code>' }), " doit \u00EAtre comprise dans une balise ", _jsx(Code, { children: '<Typography>' })] }) }));
-export const InText = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsxs(Typography, { children: ["Le fichier CSV doit avoir une ", _jsx(Code, { children: "," }), " comme s\u00E9parateur de colonnes."] }), _jsxs(Typography, { children: ["Exemple : ", _jsx(Code, { children: "Individuel" }), " ou ", _jsx(Code, { children: "Collectif" })] })] }) }));
+export const InText = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsxs(Typography, { children: ["Le fichier CSV doit avoir une ", _jsx(Code, { children: "," }), " comme s\u00E9parateur de colonnes."] }), _jsxs(Typography, { children: ["Exemple : ", _jsx(Code, { children: "Individuel" }), " ou ", _jsx(Code, { children: "Collectif" })] })] }) }));
 export * as Sources from './Code.stories.sources';

package/dist/core/Code/Code.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA6M,CAAC;AAEhO,eAAO,MAAM,MAAM,cAAoX,CAAC;AAExY,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Code.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA6M,CAAC;AAEhO,eAAO,MAAM,MAAM,cAAsX,CAAC;AAE1Y,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Code/Code.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Code/Code.stories.tsx
 export const Basic = () => "export const Basic = () => (\n  <Box>\n    <Typography>\n      La balise <Code>{'<Code>'}</Code> doit être comprise dans une balise <Code>{'<Typography>'}</Code>\n    </Typography>\n  </Box>\n);";
-export const InText = () => "export const InText = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <Typography>\n        Le fichier CSV doit avoir une <Code>,</Code> comme séparateur de colonnes.\n      </Typography>\n      <Typography>\n        Exemple : <Code>Individuel</Code> ou <Code>Collectif</Code>\n      </Typography>\n    </Box>\n  </Box>\n);";
+export const InText = () => "export const InText = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <Typography>\n        Le fichier CSV doit avoir une <Code>,</Code> comme séparateur de colonnes.\n      </Typography>\n      <Typography>\n        Exemple : <Code>Individuel</Code> ou <Code>Collectif</Code>\n      </Typography>\n    </Box>\n  </Box>\n);";
 export const storySources = {
     Basic,
     InText,

package/dist/core/Code/Code.styles.d.ts

@@ -1,13 +1,26 @@
 export declare const useStyles: () => {
     code: {
-        color: string;
-        backgroundColor: "rgba(135, 131, 120, 0.12)";
+        backgroundColor: string;
         paddingLeft: number;
         paddingRight: number;
         paddingTop: number;
         paddingBottom: number;
         borderRadius: import("@alveole/theme").Radius;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
     };
+    codeText: {
+        color: import("@alveole/theme").ThemeColor;
+        fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+    };
+    codeSurface: {
+        paddingTop: number;
+        paddingBottom: number;
+        transform: "translateY(2px)";
+        backgroundColor: string;
+        paddingLeft: number;
+        paddingRight: number;
+        borderRadius: import("@alveole/theme").Radius;
+    };
 };
 //# sourceMappingURL=Code.styles.d.ts.map

package/dist/core/Code/Code.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"Code.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAC"}

package/dist/core/Code/Code.styles.js

@@ -1,13 +1,27 @@
 import { makeStyles, MonospaceFont } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, radius }) => ({
-    code: {
+export const useStyles = makeStyles(({ color, radius }) => {
+    const texte = {
         ...MonospaceFont,
         color: color.light.text['default-error'],
+    };
+    const surface = {
         backgroundColor: 'rgba(135, 131, 120, 0.12)',
         paddingLeft: 4,
         paddingRight: 4,
         paddingTop: 2,
         paddingBottom: 2,
         borderRadius: radius('sm'),
-    },
-}));
+    };
+    return {
+        code: { ...texte, ...surface },
+        codeText: texte,
+        codeSurface: {
+            ...surface,
+            // La ligne SM fait déjà 20 px : ajouter du padding vertical fait dépasser
+            // la vue inline du paragraphe. Le décalage la recentre sur la ligne native.
+            paddingTop: 0,
+            paddingBottom: 0,
+            transform: 'translateY(2px)',
+        },
+    };
+});

package/dist/core/Form/Form.stories.js

@@ -14,5 +14,5 @@ export default {
 };
 const inputStyle = { borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: 8 };
 /** Taper dans le champ — cliquer en dehors ferme le clavier. */
-export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
+export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "3V", children: [_jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
 export * as Sources from './Form.stories.sources';

package/dist/core/Form/Form.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAsT,CAAC;AAErV,eAAO,MAAM,YAAY;;CAEf,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":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAwT,CAAC;AAEvV,eAAO,MAAM,YAAY;;CAEf,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/core/Form/Form.stories.sources.js

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Form/Form.stories.tsx
-export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
+export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
 export const storySources = {
     WithKeyboardAware,
 };

package/dist/core/Form/Form.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.web.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAcpC,CAAC"}
+{"version":3,"file":"Form.web.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAgBpC,CAAC"}

package/dist/core/Form/Form.web.js

@@ -9,7 +9,10 @@ export const Form = (props) => {
     const webFormProps = {
         onSubmit: (e) => {
             e.preventDefault();
-            const button = formRef.current?.querySelector('button[role="button"][aria-selected="true"]');
+            const form = formRef.current;
+            if (!(form instanceof HTMLElement))
+                return;
+            const button = form.querySelector('button[role="button"][aria-selected="true"]');
             if (button instanceof HTMLElement)
                 button.click();
         },

package/dist/core/Grid/Grid.stories.d.ts

@@ -1,25 +1,26 @@
+import { ThemeColor } from '@alveole/theme';
 declare const _default: {
     title: string;
     tags: "core"[];
     experimental: false;
     description: string;
     shortDescription: string;
-    component: ((props: Pick<import("..").BoxProps, "children" | "gap"> & import("../..").SizeStyle & {
-        p?: number | import("@alveole/theme").SpacingKey;
-        pl?: number | import("@alveole/theme").SpacingKey;
-        pr?: number | import("@alveole/theme").SpacingKey;
-        pt?: number | import("@alveole/theme").SpacingKey;
-        pb?: number | import("@alveole/theme").SpacingKey;
-        m?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        ml?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mr?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mt?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mb?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        backgroundColor?: string;
-        borderWidth?: number;
-        borderRadius?: number | string;
-        borderColor?: string;
-        gap?: number | import("@alveole/theme").SpacingKey;
+    component: ((props: Pick<import("..").BoxProps, "gap" | "children"> & import("../..").SizeStyle & {
+        p?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pl?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pr?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pt?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pb?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        m?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        ml?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mr?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mt?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mb?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        backgroundColor?: (ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", ThemeColor | "transparent">>;
+        borderWidth?: import("tamagui").ViewProps["borderWidth"];
+        borderRadius?: import("@alveole/theme").RadiusKey;
+        borderColor?: (ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", ThemeColor | "transparent">>;
+        gap?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
     }) => import("react").JSX.Element) & {
         Column: (props: import("./Grid").GridColumnProps) => import("react").JSX.Element;
     };

package/dist/core/Grid/Grid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBASkB;AAWlB,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAY3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mCAYlC,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6B5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,UAAU,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU1F,wBASkB;AAYlB,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAY3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mCAYlC,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6B5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Grid/Grid.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomPalette, enCouleursDuTheme, RadiusList } from '@alveole/theme';
 import { Button } from '../../ui/Button';
 import { Card } from '../../ui/Card';
 import { A } from '../A';
@@ -15,16 +16,17 @@ export default {
     component: Grid,
     styleFn: useStyles,
 };
-const colColor = '#88b2bd';
-const colColorAlt = '#b9c47f';
-const Col = ({ color = colColor, label }) => (_jsx(Box, { backgroundColor: color, p: '050', style: { borderRadius: 4 }, children: _jsx(Typography, { children: label }) }));
-export const TwoEqualColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) })] }));
-export const AsymmetricColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 8, children: _jsx(Col, { color: colColorAlt, label: "8 colonnes" }) })] }));
-export const ThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) })] }));
-export const FourColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) })] }));
-export const FullWidthColumn = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 12, children: _jsx(Col, { label: "12 colonnes (pleine largeur)" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { color: colColorAlt, label: "6 colonnes" }) })] }));
-export const ResponsiveColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
-export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
-export const WithLargeGap = () => (_jsxs(Grid, { gap: 24, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
-export const EqualHeightCards = () => (_jsxs(Grid, { gap: 16, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre court", sousTitre: "Une ligne" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Un titre bien plus long qui passe sur deux lignes", sousTitre: "Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(A, { href: "/components/Card", children: _jsx(Card, { children: _jsx(Card.Header, { titre: "Carte cliquable" }) }) }) })] }));
+const { background } = enCouleursDuTheme(CustomPalette).light;
+const colColor = background['contrast-info'];
+const colColorAlt = background['contrast-success'];
+const Col = ({ color = colColor, label }) => (_jsx(Box, { backgroundColor: color, p: "1W", style: { borderRadius: RadiusList.sm }, children: _jsx(Typography, { children: label }) }));
+export const TwoEqualColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) })] }));
+export const AsymmetricColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 8, children: _jsx(Col, { color: colColorAlt, label: "8 colonnes" }) })] }));
+export const ThreeColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) })] }));
+export const FourColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) })] }));
+export const FullWidthColumn = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 12, children: _jsx(Col, { label: "12 colonnes (pleine largeur)" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { color: colColorAlt, label: "6 colonnes" }) })] }));
+export const ResponsiveColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
+export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
+export const WithLargeGap = () => (_jsxs(Grid, { gap: "3W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
+export const EqualHeightCards = () => (_jsxs(Grid, { gap: "2W", children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre court", sousTitre: "Une ligne" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Un titre bien plus long qui passe sur deux lignes", sousTitre: "Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(A, { href: "/components/Card", children: _jsx(Card, { children: _jsx(Card.Header, { titre: "Carte cliquable" }) }) }) })] }));
 export * as Sources from './Grid.stories.sources';

package/dist/core/Grid/Grid.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA0P,CAAC;AAEvR,eAAO,MAAM,iBAAiB,cAAgR,CAAC;AAE/S,eAAO,MAAM,YAAY,cAA+V,CAAC;AAEzX,eAAO,MAAM,WAAW,cAAka,CAAC;AAE3b,eAAO,MAAM,eAAe,cAAqX,CAAC;AAElZ,eAAO,MAAM,iBAAiB,cAAwV,CAAC;AAEvX,eAAO,MAAM,sBAAsB,cAAyhB,CAAC;AAE7jB,eAAO,MAAM,YAAY,cAAoV,CAAC;AAE9W,eAAO,MAAM,gBAAgB,cAAyhC,CAAC;AAEvjC,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA6P,CAAC;AAE1R,eAAO,MAAM,iBAAiB,cAAmR,CAAC;AAElT,eAAO,MAAM,YAAY,cAAkW,CAAC;AAE5X,eAAO,MAAM,WAAW,cAAqa,CAAC;AAE9b,eAAO,MAAM,eAAe,cAAwX,CAAC;AAErZ,eAAO,MAAM,iBAAiB,cAA2V,CAAC;AAE1X,eAAO,MAAM,sBAAsB,cAA4hB,CAAC;AAEhkB,eAAO,MAAM,YAAY,cAAsV,CAAC;AAEhX,eAAO,MAAM,gBAAgB,cAA2hC,CAAC;AAEzjC,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Grid/Grid.stories.sources.js

@@ -1,14 +1,14 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Grid/Grid.stories.tsx
-export const TwoEqualColumns = () => "export const TwoEqualColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const AsymmetricColumns = () => "export const AsymmetricColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={8}>\n      <Col color={colColorAlt} label=\"8 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const ThreeColumns = () => "export const ThreeColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const FourColumns = () => "export const FourColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const FullWidthColumn = () => "export const FullWidthColumn = () => (\n  <Grid gap={8}>\n    <Grid.Column size={12}>\n      <Col label=\"12 colonnes (pleine largeur)\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col color={colColorAlt} label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const ResponsiveColumns = () => "export const ResponsiveColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const ResponsiveThreeColumns = () => "export const ResponsiveThreeColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 12, desktop: 4 }}>\n      <Col label=\"12 mobile / 12 tablet / 4 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const WithLargeGap = () => "export const WithLargeGap = () => (\n  <Grid gap={24}>\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n  </Grid>\n);";
-export const EqualHeightCards = () => "export const EqualHeightCards = () => (\n  <Grid gap={16}>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Card>\n        <Card.Header titre=\"Titre court\" sousTitre=\"Une ligne\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Voir\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Card>\n        <Card.Header\n          titre=\"Un titre bien plus long qui passe sur deux lignes\"\n          sousTitre=\"Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte\"\n        />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Voir\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <A href=\"/components/Card\">\n        <Card>\n          <Card.Header titre=\"Carte cliquable\" />\n        </Card>\n      </A>\n    </Grid.Column>\n  </Grid>\n);";
+export const TwoEqualColumns = () => "export const TwoEqualColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const AsymmetricColumns = () => "export const AsymmetricColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={8}>\n      <Col color={colColorAlt} label=\"8 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ThreeColumns = () => "export const ThreeColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const FourColumns = () => "export const FourColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const FullWidthColumn = () => "export const FullWidthColumn = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={12}>\n      <Col label=\"12 colonnes (pleine largeur)\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col color={colColorAlt} label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ResponsiveColumns = () => "export const ResponsiveColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ResponsiveThreeColumns = () => "export const ResponsiveThreeColumns = () => (\n  <Grid gap=\"1W\">\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 12, desktop: 4 }}>\n      <Col label=\"12 mobile / 12 tablet / 4 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const WithLargeGap = () => "export const WithLargeGap = () => (\n  <Grid gap=\"3W\">\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const EqualHeightCards = () => "export const EqualHeightCards = () => (\n  <Grid gap=\"2W\">\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Card>\n        <Card.Header titre=\"Titre court\" sousTitre=\"Une ligne\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Voir\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Card>\n        <Card.Header\n          titre=\"Un titre bien plus long qui passe sur deux lignes\"\n          sousTitre=\"Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte\"\n        />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Voir\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <A href=\"/components/Card\">\n        <Card>\n          <Card.Header titre=\"Carte cliquable\" />\n        </Card>\n      </A>\n    </Grid.Column>\n  </Grid>\n);";
 export const storySources = {
     TwoEqualColumns,
     AsymmetricColumns,

package/dist/core/Heading/Heading.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from '../Typography';
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingProps = Omit<TypographyProps, 'tag'> & {
+    /** Balise rendue, qui fixe aussi la taille par defaut. */
+    as?: HeadingLevel;
+};
+export declare const Heading: ({ as, style, color, ...props }: HeadingProps) => import("react").JSX.Element;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/core/Heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,GAAG;IACxD,0DAA0D;IAC1D,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB,CAAC;AAWF,eAAO,MAAM,OAAO,GAAI,gCAAuC,YAAY,gCAU1E,CAAC"}

package/dist/core/Heading/Heading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Typography } from '../Typography';
+const STYLE_PAR_NIVEAU = {
+    h1: 'H1 - XL',
+    h2: 'H2 - LG',
+    h3: 'H3 - MD',
+    h4: 'H4 - SM',
+    h5: 'H5 - XS',
+    h6: 'H6 - XXS',
+};
+export const Heading = ({ as = 'h2', style, color, ...props }) => {
+    const theme = useTheme();
+    return (_jsx(Typography, { tag: as, style: [theme.text.Titres[STYLE_PAR_NIVEAU[as]], style], color: color ?? theme.color.light.text['title-grey'], ...props }));
+};

package/dist/core/Heading/Heading.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    tags: "core"[];
+    experimental: true;
+    description: string;
+    component: ({ as, style, color, ...props }: import("./Heading").HeadingProps) => import("react").JSX.Element;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Niveaux: () => import("react").JSX.Element;
+export * as Sources from './Heading.stories.sources';
+//# sourceMappingURL=Heading.stories.d.ts.map

package/dist/core/Heading/Heading.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.stories.tsx"],"names":[],"mappings":";;;;;;;;AAGA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAA6C,CAAC;AAElE,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/core/Heading/Heading.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from './Heading';
+export default {
+    title: 'Heading',
+    tags: ['core'],
+    experimental: true,
+    description: 'Titre de section : `as` fixe la balise (h1 a h6) et sa taille par defaut.',
+    component: Heading,
+    styleFn: () => ({}),
+};
+export const Default = () => _jsx(Heading, { children: "Titre de niveau 2" });
+export const Niveaux = () => (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", children: "Titre h1" }), _jsx(Heading, { as: "h2", children: "Titre h2" }), _jsx(Heading, { as: "h3", children: "Titre h3" }), _jsx(Heading, { as: "h4", children: "Titre h4" }), _jsx(Heading, { as: "h5", children: "Titre h5" }), _jsx(Heading, { as: "h6", children: "Titre h6" })] }));
+export * as Sources from './Heading.stories.sources';

package/dist/core/Heading/Heading.stories.sources.d.ts

@@ -0,0 +1,8 @@
+export declare const Default: () => string;
+export declare const Niveaux: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Niveaux: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Heading.stories.sources.d.ts.map

package/dist/core/Heading/Heading.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6E,CAAC;AAElG,eAAO,MAAM,OAAO,cAA4T,CAAC;AAEjV,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Heading/Heading.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/Heading/Heading.stories.tsx
+export const Default = () => "export const Default = () => <Heading>Titre de niveau 2</Heading>;";
+export const Niveaux = () => "export const Niveaux = () => (\n  <>\n    <Heading as=\"h1\">Titre h1</Heading>\n    <Heading as=\"h2\">Titre h2</Heading>\n    <Heading as=\"h3\">Titre h3</Heading>\n    <Heading as=\"h4\">Titre h4</Heading>\n    <Heading as=\"h5\">Titre h5</Heading>\n    <Heading as=\"h6\">Titre h6</Heading>\n  </>\n);";
+export const storySources = {
+    Default,
+    Niveaux,
+};

package/dist/core/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Heading';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/Heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/core/Heading/index.js

@@ -0,0 +1 @@
+export * from './Heading';

package/dist/core/Highlight/Highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAKxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAMvE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GAAG;IACtE,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACrC,CAAC;AAMF,eAAO,MAAM,SAAS,GAAI,wCAAuD,cAAc,sBAwE9F,CAAC"}
+{"version":3,"file":"Highlight.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAKxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAMvE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GAAG;IACtE,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACjF,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACrC,CAAC;AAMF,eAAO,MAAM,SAAS,GAAI,wCAAuD,cAAc,sBAmE9F,CAAC"}

package/dist/core/Highlight/Highlight.js

@@ -32,12 +32,15 @@ export const Highlight = ({ children, language, style, variant = 'standalone' })
         }
         return acc;
     }, []);
-    const renderer = ({ rows }) => (_jsx(ScrollView, { horizontal: true, focusable: true, ...focusRingProps(), 
+    const renderer = ({ rows }) => (_jsx(ScrollView, { horizontal: true, focusable: true, 
+        // En natif, ScrollView grandit par défaut. Dans la page défilante du catalogue,
+        // le code doit garder sa hauteur de contenu au lieu de remplir la hauteur disponible.
+        style: [styles.highlightContainer, variant === 'standalone' && styles.highlightContainerStandalone], ...focusRingProps(), 
         // `styles.highlight` pose `overflow: scroll`, ce qui ferait défiler le conteneur de
         // contenu en doublon du `ScrollView` qui l'entoure. C'est ce doublon intérieur qu'axe
         // signalait : il défile sans pouvoir recevoir le focus, que porte l'extérieur.
         // Le thème de coloration ne fournit que les couleurs de jetons : la surface vient du
         // design system, donc `styles.highlight` est posé après la base du thème.
-        contentContainerStyle: styleDeLaSurface(styles, stylesheet, { variant, styleFourni: customStyle }), children: _jsx(View, { onStartShouldSetResponder: () => true, children: renderNode(rows) }) }));
-    return (_jsx(Prism, { CodeTag: View, PreTag: View, customStyle: {}, language: language, renderer: renderer, style: {}, wrapLongLines: true, children: children }));
+        contentContainerStyle: styleDeLaSurface(styles, stylesheet, { variant, styleFourni: customStyle }), children: _jsx(View, { style: styles.code, children: renderNode(rows) }) }));
+    return (_jsx(Prism, { CodeTag: View, PreTag: View, customStyle: {}, language: language, renderer: renderer, style: {}, children: children }));
 };

package/dist/core/Highlight/Highlight.stories.d.ts

@@ -8,21 +8,35 @@ declare const _default: {
     styleFn: () => {
         highlightContainer: {
             width: "100%";
+            flexGrow: number;
+            flexShrink: number;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+        };
+        highlightContainerStandalone: {
+            borderRadius: import("@alveole/theme").Radius;
+        };
+        code: {
+            whiteSpace?: "pre" | undefined;
+            flexShrink: number;
         };
         highlight: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             overflow: "scroll";
             padding: import("@alveole/theme").Spacing;
-            width: "100%";
-            backgroundColor: string;
+            minWidth: "100%";
+            flexGrow: number;
+            flexShrink: number;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         highlightEmbedded: {
             overflow: "scroll";
             padding: import("@alveole/theme").Spacing;
-            width: "100%";
-            backgroundColor: string;
+            minWidth: "100%";
+            flexGrow: number;
+            flexShrink: number;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/core/Highlight/Highlight.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,aAAa,mCAEzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAE/B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAeF,eAAO,MAAM,aAAa,mCAA0D,CAAC;AAerF,eAAO,MAAM,aAAa,mCAA0D,CAAC;AAErF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"Highlight.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,aAAa,mCAEzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAE/B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAeF,eAAO,MAAM,aAAa,mCAA0D,CAAC;AAerF,eAAO,MAAM,aAAa,mCAA0D,CAAC;AAErF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/core/Highlight/Highlight.stories.js

@@ -12,7 +12,7 @@ export default {
 };
 export const HighlightJSON = () => (_jsx(Highlight, { language: "json", children: JSON.stringify({ id: 'user_id_1', name: 'Jean-Pierre', age: 20 }, null, 2) }));
 export const HighlightTypescript = () => (_jsx(Highlight, { language: "typescript", children: "const id: string = 'user_id_1';" }));
-export const HighlightTSX = () => (_jsx(Highlight, { language: "tsx", children: `<Typography tag="span" p={spacing('2W')}>Bonjour</Typography>` }));
+export const HighlightTSX = () => (_jsx(Highlight, { language: "tsx", children: `<Typography\n\ttag="span"\n\tp={spacing('2W')}\n>Bonjour</Typography>` }));
 const rubyCode = `# The Greeter class
 class Greeter
   def initialize(name)

package/dist/core/Highlight/Highlight.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAA4K,CAAC;AAEvM,eAAO,MAAM,mBAAmB,cAAiJ,CAAC;AAElL,eAAO,MAAM,YAAY,cAAiK,CAAC;AAE3L,eAAO,MAAM,aAAa,cAAkG,CAAC;AAE7H,eAAO,MAAM,aAAa,cAAkG,CAAC;AAE7H,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Highlight.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAA4K,CAAC;AAEvM,eAAO,MAAM,mBAAmB,cAAiJ,CAAC;AAElL,eAAO,MAAM,YAAY,cAA8K,CAAC;AAExM,eAAO,MAAM,aAAa,cAAkG,CAAC;AAE7H,eAAO,MAAM,aAAa,cAAkG,CAAC;AAE7H,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}