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

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

@@ -6,11 +6,11 @@ export declare const useStyles: () => {
         paddingTop: number;
         paddingBottom: number;
         borderRadius: import("@alveole/theme").Radius;
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
     };
     codeText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
     };
     codeSurface: {

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/Grid/Grid.stories.d.ts

@@ -1,3 +1,4 @@
+import { ThemeColor } from '@alveole/theme';
 declare const _default: {
     title: string;
     tags: "core"[];
@@ -5,21 +6,21 @@ declare const _default: {
     description: string;
     shortDescription: string;
     component: ((props: Pick<import("..").BoxProps, "gap" | "children"> & 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?: import("tamagui").ViewProps["backgroundColor"];
+        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?: number | string;
-        borderColor?: import("tamagui").ViewProps["borderColor"];
-        gap?: number | import("@alveole/theme").SpacingKey;
+        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.stories.d.ts

@@ -10,7 +10,7 @@ declare const _default: {
             width: "100%";
             flexGrow: number;
             flexShrink: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         highlightContainerStandalone: {
             borderRadius: import("@alveole/theme").Radius;
@@ -22,13 +22,13 @@ declare const _default: {
         highlight: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             overflow: "scroll";
             padding: import("@alveole/theme").Spacing;
             minWidth: "100%";
             flexGrow: number;
             flexShrink: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         highlightEmbedded: {
             overflow: "scroll";
@@ -36,7 +36,7 @@ declare const _default: {
             minWidth: "100%";
             flexGrow: number;
             flexShrink: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -3,7 +3,7 @@ export declare const useStyles: () => {
         width: "100%";
         flexGrow: number;
         flexShrink: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     highlightContainerStandalone: {
         borderRadius: import("@alveole/theme").Radius;
@@ -15,13 +15,13 @@ export declare const useStyles: () => {
     highlight: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         overflow: "scroll";
         padding: import("@alveole/theme").Spacing;
         minWidth: "100%";
         flexGrow: number;
         flexShrink: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     highlightEmbedded: {
         overflow: "scroll";
@@ -29,7 +29,7 @@ export declare const useStyles: () => {
         minWidth: "100%";
         flexGrow: number;
         flexShrink: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Highlight.styles.d.ts.map

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

@@ -7,9 +7,7 @@ export declare const BASE_STYLE_KEY = "base";
 export declare const styleNatif: (style?: CSSProperties) => TextStyle;
 export declare const feuilleDeColoration: (syntaxStyle: Record<string, CSSProperties>, fond: string) => NativeSyntaxStyle;
 /** Le texte de base : la couleur du theme, puis la chasse fixe. */
-export declare const styleDuTexteDeBase: (feuille: NativeSyntaxStyle) => TextStyle | {
-    readonly fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
-};
+export declare const styleDuTexteDeBase: (feuille: NativeSyntaxStyle) => TextStyle;
 /**
  * La surface du bloc. Le theme de coloration ne fournit que les couleurs de jetons : la surface
  * vient du design system, posee apres la base du theme, et le style de l'appelant en dernier.

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

@@ -1 +1 @@
-{"version":3,"file":"Highlight.theme.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE1D,eAAO,MAAM,cAAc,SAAS,CAAC;AAkCrC,eAAO,MAAM,UAAU,GAAI,QAAO,aAAkB,KAAG,SAUtD,CAAC;AAkCF,eAAO,MAAM,mBAAmB,GAAI,aAAa,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,MAAM,KAAG,iBAgB9F,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,kBAAkB,GAAI,SAAS,iBAAiB;;CAC4C,CAAC;AAE1G;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,MAAM,EACd,SAAS,iBAAiB,EAC1B,0BAA0B;IAAE,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IAAC,WAAW,EAAE,SAAS,CAAA;CAAE,cAOtF,CAAC"}
+{"version":3,"file":"Highlight.theme.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE1D,eAAO,MAAM,cAAc,SAAS,CAAC;AAkCrC,eAAO,MAAM,UAAU,GAAI,QAAO,aAAkB,KAAG,SAMrD,CAAC;AAkCH,eAAO,MAAM,mBAAmB,GAAI,aAAa,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,MAAM,KAAG,iBAgB9F,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,kBAAkB,GAAI,SAAS,iBAAiB,KAAG,SAC+C,CAAC;AAEhH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,MAAM,EACd,SAAS,iBAAiB,EAC1B,0BAA0B;IAAE,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IAAC,WAAW,EAAE,SAAS,CAAA;CAAE,KACvF,SAMO,CAAC"}

package/dist/core/Highlight/Highlight.theme.js

@@ -27,20 +27,13 @@ const estGraisseNative = accepteSeulement([
     '800',
     '900',
 ]);
-export const styleNatif = (style = {}) => {
-    const nativeStyle = {};
-    if (typeof style.color === 'string')
-        nativeStyle.color = style.color;
-    if (typeof style.background === 'string')
-        nativeStyle.backgroundColor = style.background;
-    if (typeof style.backgroundColor === 'string')
-        nativeStyle.backgroundColor = style.backgroundColor;
-    if (estGraisseNative(style.fontWeight))
-        nativeStyle.fontWeight = style.fontWeight;
-    if (estStyleDePoliceNatif(style.fontStyle))
-        nativeStyle.fontStyle = style.fontStyle;
-    return nativeStyle;
-};
+export const styleNatif = (style = {}) => ({
+    ...(typeof style.color === 'string' && { color: style.color }),
+    ...(typeof style.background === 'string' && { backgroundColor: style.background }),
+    ...(typeof style.backgroundColor === 'string' && { backgroundColor: style.backgroundColor }),
+    ...(estGraisseNative(style.fontWeight) && { fontWeight: style.fontWeight }),
+    ...(estStyleDePoliceNatif(style.fontStyle) && { fontStyle: style.fontStyle }),
+});
 const getSyntaxStyleKeys = (selector) => {
     if (selector.includes('pre[') || selector.includes('code[')) {
         return [BASE_STYLE_KEY];
@@ -81,7 +74,7 @@ export const feuilleDeColoration = (syntaxStyle, fond) => {
     }, {});
 };
 /** Le texte de base : la couleur du theme, puis la chasse fixe. */
-export const styleDuTexteDeBase = (feuille) => StyleSheet.flatten([{ color: feuille[BASE_STYLE_KEY]?.color }, feuille[BASE_STYLE_KEY], MonospaceFont]);
+export const styleDuTexteDeBase = (feuille) => StyleSheet.flatten([{ color: feuille[BASE_STYLE_KEY]?.color }, feuille[BASE_STYLE_KEY], MonospaceFont]) ?? {};
 /**
  * La surface du bloc. Le theme de coloration ne fournit que les couleurs de jetons : la surface
  * vient du design system, posee apres la base du theme, et le style de l'appelant en dernier.
@@ -93,4 +86,4 @@ export const styleDeLaSurface = (styles, feuille, { variant, styleFourni }) => S
     variant === 'embedded' ? styles.highlightEmbedded : styles.highlight,
     { overflow: 'visible' },
     styleFourni,
-]);
+]) ?? {};

package/dist/core/Map/Map.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../Box';
 import { Typography } from '../Typography';
 export const Map = (_) => {
-    return (_jsx(Box, { p: '075', children: _jsx(Typography, { textAlign: 'center', children: "La carte n\u2019est pas disponible sur le mobile" }) }));
+    return (_jsx(Box, { p: "3V", children: _jsx(Typography, { textAlign: 'center', children: "La carte n\u2019est pas disponible sur le mobile" }) }));
 };

package/dist/core/MarkdownDescription/MarkdownDescription.js

@@ -32,5 +32,5 @@ export const MarkdownDescription = ({ children, taille = 'MD', color: textColor
         linkColor,
     };
     const components = Platform.OS === 'web' ? createMarkdownComponents(styles) : createNativeMarkdownComponents(styles);
-    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: 8, style: { alignSelf: 'stretch' }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, replierLesCoupuresDeLigne], rehypePlugins: Platform.OS === 'web' ? [] : [preparerMarkdownNatif], skipHtml: Platform.OS !== 'web', components: components, children: children }) }));
+    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: "1W", style: { alignSelf: 'stretch' }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, replierLesCoupuresDeLigne], rehypePlugins: Platform.OS === 'web' ? [] : [preparerMarkdownNatif], skipHtml: Platform.OS !== 'web', components: components, children: children }) }));
 };

package/dist/core/MarkdownDescription/markdownComponents.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@alveole/theme';
+import { Theme, ThemeColor } from '@alveole/theme';
 import React from 'react';
 import type { Components } from 'react-markdown';
 import { TextStyle as RNTextStyle } from 'react-native';
@@ -16,8 +16,8 @@ export type MarkdownComponentsStyles = {
     titres: Theme['text']['Titres'];
     /** Couleur des titres : `textColor` s'il est fourni, sinon `title-grey`. */
     titleColor: string;
-    borderColor: string;
-    headerBg: string;
+    borderColor: ThemeColor;
+    headerBg: ThemeColor;
     linkColor: string;
 };
 type TextComponentStyles = Pick<MarkdownComponentsStyles, 'bodyStyle' | 'boldStyle' | 'textColor'>;

package/dist/core/MarkdownDescription/markdownComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdownComponents.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,cAAc,CAAC,UAAU,CAG7E,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAClD,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAE9G,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAEnG,eAAO,MAAM,oBAAoB,GAAI,qCAAqC,mBAAmB;yBACtE,WAAW;8BAKN,WAAW;0BAKf,WAAW;CAKjC,CAAC;AAEH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,MAAM;0BACnE,WAAW;0BAKX,WAAW;0BAKX,WAAW;0BAKX,WAAW;CAKjC,CAAC;AA+HH,eAAO,MAAM,wBAAwB,GAAI,QAAQ,wBAAwB,KAAG,UAQ1E,CAAC"}
+{"version":3,"file":"markdownComponents.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,cAAc,CAAC,UAAU,CAG7E,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAClD,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAE9G,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,UAAU,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAEnG,eAAO,MAAM,oBAAoB,GAAI,qCAAqC,mBAAmB;yBACtE,WAAW;8BAKN,WAAW;0BAKf,WAAW;CAKjC,CAAC;AAGH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,MAAM;0BACnE,WAAW;0BAKX,WAAW;0BAKX,WAAW;0BAKX,WAAW;CAKjC,CAAC;AA+HH,eAAO,MAAM,wBAAwB,GAAI,QAAQ,wBAAwB,KAAG,UAQ1E,CAAC"}

package/dist/core/MarkdownDescription/markdownComponents.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FOCUS_ATTRIBUTE } from '@alveole/theme';
+import { FOCUS_ATTRIBUTE, Spacings } from '@alveole/theme';
+import { AnchorHeading } from '../AnchorHeading';
 import { Box } from '../Box';
 import { Code } from '../Code';
 import { Highlight } from '../Highlight';
@@ -23,16 +24,17 @@ export const createTextComponents = ({ bodyStyle, boldStyle, textColor }) => ({
     strong: ({ children: c }) => (_jsx(Typography, { style: boldStyle, color: textColor, children: c })),
     em: ({ children: c }) => (_jsx(Typography, { style: [bodyStyle, { fontStyle: 'italic' }], color: textColor, children: c })),
 });
+// La balise suit le niveau markdown ; la taille est decalee de deux crans, ces titres vivant sous ceux de la page.
 export const createHeadingComponents = (titres, titleColor) => ({
-    h1: ({ children: c }) => (_jsx(Typography, { style: titres['H3 - MD'], color: titleColor, children: c })),
-    h2: ({ children: c }) => (_jsx(Typography, { style: titres['H4 - SM'], color: titleColor, children: c })),
-    h3: ({ children: c }) => (_jsx(Typography, { style: titres['H5 - XS'], color: titleColor, children: c })),
-    h4: ({ children: c }) => (_jsx(Typography, { style: titres['H6 - XXS'], color: titleColor, children: c })),
+    h1: ({ children: c }) => (_jsx(AnchorHeading, { as: "h1", style: titres['H3 - MD'], color: titleColor, children: c })),
+    h2: ({ children: c }) => (_jsx(AnchorHeading, { as: "h2", style: titres['H4 - SM'], color: titleColor, children: c })),
+    h3: ({ children: c }) => (_jsx(AnchorHeading, { as: "h3", style: titres['H5 - XS'], color: titleColor, children: c })),
+    h4: ({ children: c }) => (_jsx(AnchorHeading, { as: "h4", style: titres['H6 - XXS'], color: titleColor, children: c })),
 });
 const createListComponents = (bodyStyle) => ({
-    ul: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
-    ol: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
-    li: ({ children: c }) => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'flex-start' }, children: [_jsx(Typography, { style: bodyStyle, children: '•' }), _jsx(Typography, { style: [bodyStyle, { flex: 1 }], children: c })] })),
+    ul: ({ children: c }) => (_jsx(Box, { display: "flex", gap: "1V", children: c })),
+    ol: ({ children: c }) => (_jsx(Box, { display: "flex", gap: "1V", children: c })),
+    li: ({ children: c }) => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'flex-start' }, children: [_jsx(Typography, { style: bodyStyle, children: '•' }), _jsx(Typography, { style: [bodyStyle, { flex: 1 }], children: c })] })),
 });
 const createLinkComponents = ({ linkColor }) => ({
     a: ({ href, children: c }) => (_jsx(Typography, { tag: "a", color: linkColor, textDecorationLine: soulignementDuLien, href, [FOCUS_ATTRIBUTE]: 'ring', children: c })),
@@ -41,7 +43,7 @@ const createBlockComponents = (borderColor) => ({
     pre: ({ children: c }) => _jsx(Box, { display: "flex", children: c }),
     // `tag="blockquote"` pose un vrai `<blockquote>` DOM, qui garde la marge par
     // défaut du user-agent (`margin: 1em 40px`) tant qu'on ne la remet pas à zéro.
-    blockquote: ({ children: c }) => (_jsx(Box, { tag: "blockquote", display: "flex", pl: 12, style: { margin: 0, borderLeftWidth: 2, borderLeftColor: borderColor }, children: c })),
+    blockquote: ({ children: c }) => (_jsx(Box, { tag: "blockquote", display: "flex", pl: "3V", style: { margin: Spacings['0V'], borderLeftWidth: 2, borderLeftColor: borderColor }, children: c })),
 });
 const createCodeComponents = () => ({
     // react-markdown ne passe plus de prop `inline` depuis la v9, et un bloc sans
@@ -57,7 +59,7 @@ const createCodeComponents = () => ({
     },
 });
 const createTableComponents = ({ bodyStyle, boldStyle, borderColor, headerBg }) => ({
-    table: ({ children: c }) => (_jsx(Box, { tag: "div", borderWidth: 1, borderColor: borderColor, borderRadius: 8, overflow: "hidden", children: _jsx(Box, { tag: "table", style: { display: 'table', borderCollapse: 'collapse', width: '100%' }, children: c }) })),
+    table: ({ children: c }) => (_jsx(Box, { tag: "div", borderWidth: 1, borderColor: borderColor, borderRadius: "md", overflow: "hidden", children: _jsx(Box, { tag: "table", style: { display: 'table', borderCollapse: 'collapse', width: '100%' }, children: c }) })),
     thead: ({ children: c }) => (_jsx(Box, { tag: "thead", style: { display: 'table-header-group' }, children: c })),
     tbody: ({ children: c }) => (_jsx(Box, { tag: "tbody", style: { display: 'table-row-group' }, children: c })),
     tr: ({ children: c }) => (_jsx(Box, { tag: "tr", style: { display: 'table-row' }, children: c })),
@@ -66,8 +68,8 @@ const createTableComponents = ({ bodyStyle, boldStyle, borderColor, headerBg })
     // sérialise les props de la vue, dont le contexte du thème, circulaire, ce qui
     // remplace l'avertissement par un « Converting circular structure to JSON » qui
     // fait planter le rendu.
-    th: ({ children: c }) => (_jsx(Box, { tag: "th", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell', textAlign: 'left', backgroundColor: headerBg }, children: _jsx(Typography, { style: boldStyle, children: c }) })),
-    td: ({ children: c }) => (_jsx(Box, { tag: "td", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell' }, children: _jsx(Typography, { style: bodyStyle, children: c }) })),
+    th: ({ children: c }) => (_jsx(Box, { tag: "th", borderWidth: 1, borderColor: borderColor, pt: "1W", pb: "1W", pl: "3V", pr: "3V", style: { display: 'table-cell', textAlign: 'left', backgroundColor: headerBg }, children: _jsx(Typography, { style: boldStyle, children: c }) })),
+    td: ({ children: c }) => (_jsx(Box, { tag: "td", borderWidth: 1, borderColor: borderColor, pt: "1W", pb: "1W", pl: "3V", pr: "3V", style: { display: 'table-cell' }, children: _jsx(Typography, { style: bodyStyle, children: c }) })),
 });
 export const createMarkdownComponents = (styles) => ({
     ...createTextComponents(styles),

package/dist/core/MarkdownDescription/markdownNatif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdownNatif.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownNatif.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,EAA4B,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAE1F,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;CACpB,CAAC;AAwCF,eAAO,MAAM,qBAAqB,gBAjBT,KAAK,KAAG,IAiBkB,CAAC;AAuBpD,eAAO,MAAM,8BAA8B,GAAI,QAAQ,wBAAwB,KAAG,UAwChF,CAAC"}
+{"version":3,"file":"markdownNatif.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownNatif.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,EAA4B,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAE1F,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;CACpB,CAAC;AAwCF,eAAO,MAAM,qBAAqB,gBAjBT,KAAK,KAAG,IAiBkB,CAAC;AAuBpD,eAAO,MAAM,8BAA8B,GAAI,QAAQ,wBAAwB,KAAG,UAwChF,CAAC"}

package/dist/core/MarkdownDescription/markdownNatif.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spacings } from '@alveole/theme';
 import { Linking } from 'react-native';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
@@ -50,20 +51,20 @@ const tableauxNatifs = ({ bodyStyle, boldStyle, borderColor, headerBg }) => ({
     thead: ({ children }) => _jsx(Box, { style: { backgroundColor: headerBg }, children: children }),
     tbody: ({ children }) => _jsx(Box, { children: children }),
     tr: ({ children }) => _jsx(Box, { style: { flexDirection: 'row' }, children: children }),
-    th: ({ children }) => (_jsx(Box, { p: 8, borderWidth: 1, borderColor: borderColor, style: { flex: 1, minWidth: 0 }, children: _jsx(Typography, { style: boldStyle, children: children }) })),
-    td: ({ children }) => (_jsx(Box, { p: 8, borderWidth: 1, borderColor: borderColor, style: { flex: 1, minWidth: 0 }, children: _jsx(Typography, { style: bodyStyle, children: children }) })),
+    th: ({ children }) => (_jsx(Box, { p: "1W", borderWidth: 1, borderColor: borderColor, style: { flex: 1, minWidth: 0 }, children: _jsx(Typography, { style: boldStyle, children: children }) })),
+    td: ({ children }) => (_jsx(Box, { p: "1W", borderWidth: 1, borderColor: borderColor, style: { flex: 1, minWidth: 0 }, children: _jsx(Typography, { style: bodyStyle, children: children }) })),
 });
 export const createNativeMarkdownComponents = (styles) => ({
     ...createMarkdownComponents(styles),
     ...tableauxNatifs(styles),
-    section: ({ children }) => _jsx(Box, { style: { gap: 8 }, children: children }),
+    section: ({ children }) => _jsx(Box, { style: { gap: Spacings['1W'] }, children: children }),
     sup: ({ children }) => _jsx(Typography, { style: styles.bodyStyle, children: children }),
     h5: ({ children }) => (_jsx(Typography, { style: styles.titres['H6 - XXS'], color: styles.titleColor, children: children })),
     h6: ({ children }) => (_jsx(Typography, { style: styles.titres['H6 - XXS'], color: styles.titleColor, children: children })),
     a: ({ href, children }) => (_jsx(Typography, { style: styles.bodyStyle, color: styles.linkColor, textDecorationLine: "underline", accessibilityRole: "link", onPress: href ? () => void Linking.openURL(href) : undefined, children: children })),
     li: ({ children, node }) => {
         const marque = node?.properties?.['data-marker'];
-        return (_jsxs(Box, { style: { flexDirection: 'row', gap: 8, alignItems: 'flex-start' }, children: [_jsx(Typography, { style: styles.bodyStyle, children: typeof marque === 'string' ? marque : '•' }), _jsx(Box, { style: { flex: 1, gap: 4 }, children: children })] }));
+        return (_jsxs(Box, { style: { flexDirection: 'row', gap: Spacings['1W'], alignItems: 'flex-start' }, children: [_jsx(Typography, { style: styles.bodyStyle, children: typeof marque === 'string' ? marque : '•' }), _jsx(Box, { style: { flex: 1, gap: Spacings['1V'] }, children: children })] }));
     },
     br: () => _jsx(Typography, { children: '\n' }),
     hr: () => _jsx(Box, { style: { borderTopWidth: 1, borderColor: styles.borderColor } }),

package/dist/core/Page/PageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAiElD,CAAC"}
+{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAmElD,CAAC"}