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

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

@@ -2,7 +2,7 @@
 // Source: src/core/Highlight/Highlight.stories.tsx
 export const HighlightJSON = () => "export const HighlightJSON = () => (\n  <Highlight language=\"json\">{JSON.stringify({ id: 'user_id_1', name: 'Jean-Pierre', age: 20 }, null, 2)}</Highlight>\n);";
 export const HighlightTypescript = () => "export const HighlightTypescript = () => (\n  <Highlight language=\"typescript\">{\"const id: string = 'user_id_1';\"}</Highlight>\n);";
-export const HighlightTSX = () => "export const HighlightTSX = () => (\n  <Highlight language=\"tsx\">{`<Typography tag=\"span\" p={spacing('2W')}>Bonjour</Typography>`}</Highlight>\n);";
+export const HighlightTSX = () => "export const HighlightTSX = () => (\n  <Highlight language=\"tsx\">{`<Typography\\n\\ttag=\"span\"\\n\\tp={spacing('2W')}\\n>Bonjour</Typography>`}</Highlight>\n);";
 export const HighlightRuby = () => "export const HighlightRuby = () => <Highlight language=\"ruby\">{rubyCode}</Highlight>;";
 export const HighlightHTML = () => "export const HighlightHTML = () => <Highlight language=\"html\">{htmlCode}</Highlight>;";
 export const storySources = {

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

@@ -1,21 +1,35 @@
 export declare const useStyles: () => {
     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;
     };
 };
 //# sourceMappingURL=Highlight.styles.d.ts.map

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

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

package/dist/core/Highlight/Highlight.styles.js

@@ -1,14 +1,27 @@
 import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
 export const useStyles = makeStyles(({ color, radius, spacingValue }) => {
     const base = {
         overflow: 'scroll',
-        padding: spacingValue('2W'),
-        width: '100%',
+        padding: spacingValue(Platform.OS === 'web' ? '2W' : '1W'),
+        minWidth: '100%',
+        flexGrow: 1,
+        flexShrink: 0,
         backgroundColor: color.light.background['alt-grey'],
     };
     return {
         highlightContainer: {
             width: '100%',
+            flexGrow: 0,
+            flexShrink: 0,
+            backgroundColor: color.light.background['alt-grey'],
+        },
+        highlightContainerStandalone: {
+            borderRadius: radius('md'),
+        },
+        code: {
+            flexShrink: 0,
+            ...(Platform.OS === 'web' && { whiteSpace: 'pre' }),
         },
         highlight: {
             ...base,

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/Map/useGoogleMap.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { TamaguiElement } from 'tamagui';
 import { GoogleNamespace } from './googleMaps.types';
 import { LatLng, MapProps } from './Map.props';
 declare global {
@@ -8,6 +9,6 @@ declare global {
 }
 export declare const shouldFitToMarkers: (fitToMarkers: boolean | undefined, center: LatLng | undefined, markersCount: number) => boolean;
 export declare function useGoogleMap(props: MapProps): {
-    containerRef: React.RefObject<HTMLDivElement | null>;
+    containerRef: React.RefObject<TamaguiElement | null>;
 };
 //# sourceMappingURL=useGoogleMap.d.ts.map

package/dist/core/Map/useGoogleMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGoogleMap.d.ts","sourceRoot":"","sources":["../../../src/core/Map/useGoogleMap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAU,MAAM,aAAa,CAAC;AAEvD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,CAAC,EAAE,eAAe,CAAC;KAC1B;CACF;AAqCD,eAAO,MAAM,kBAAkB,GAC7B,cAAc,OAAO,GAAG,SAAS,EACjC,QAAQ,MAAM,GAAG,SAAS,EAC1B,cAAc,MAAM,KACnB,OAAwD,CAAC;AAqH5D,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ;;EAuC3C"}
+{"version":3,"file":"useGoogleMap.d.ts","sourceRoot":"","sources":["../../../src/core/Map/useGoogleMap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAA2B,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAU,MAAM,aAAa,CAAC;AAEvD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,CAAC,EAAE,eAAe,CAAC;KAC1B;CACF;AAqCD,eAAO,MAAM,kBAAkB,GAC7B,cAAc,OAAO,GAAG,SAAS,EACjC,QAAQ,MAAM,GAAG,SAAS,EAC1B,cAAc,MAAM,KACnB,OAAwD,CAAC;AAsH5D,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ;;EAuC3C"}

package/dist/core/Map/useGoogleMap.js

@@ -89,13 +89,14 @@ function useMapInit({ containerRef, mapRef, center, markers, zoom, mapOptions, r
             await loadGoogleMaps();
             if (cancelled)
                 return;
-            if (!containerRef.current)
+            const container = containerRef.current;
+            if (!(container instanceof HTMLElement))
                 return;
             const google = window.google;
             if (!google?.maps)
                 throw new Error('Google Maps not available on window');
             const initialCenter = center ?? markers[0]?.position ?? { lat: 48.8566, lng: 2.3522 };
-            mapRef.current = new google.maps.Map(containerRef.current, {
+            mapRef.current = new google.maps.Map(container, {
                 center: initialCenter,
                 zoom,
                 clickableIcons: false,

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownDescription.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,wCAA+C,wBAAwB,sBAsD1G,CAAC"}
+{"version":3,"file":"MarkdownDescription.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,wCAA+C,wBAAwB,sBAkD1G,CAAC"}

package/dist/core/MarkdownDescription/MarkdownDescription.js

@@ -2,16 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import { Platform } from 'react-native';
 import { Box } from '../Box';
-import { Typography } from '../Typography';
 import { createMarkdownComponents } from './markdownComponents';
+import { createNativeMarkdownComponents, preparerMarkdownNatif } from './markdownNatif';
 import { replierLesCoupuresDeLigne } from './replierLesCoupuresDeLigne';
 export const MarkdownDescription = ({ children, taille = 'MD', color: textColor }) => {
     const { text, color } = useTheme();
     const bodyStyle = text['Corps de texte'][taille].Regular;
     const boldStyle = text['Corps de texte'][taille].Bold;
-    if (Platform.OS !== 'web') {
-        return (_jsx(Typography, { style: bodyStyle, color: textColor, children: children }));
-    }
     const ReactMarkdown = require('react-markdown').default;
     const remarkGfm = require('remark-gfm').default;
     const borderColor = color.light.border['default-grey'];
@@ -24,9 +21,7 @@ export const MarkdownDescription = ({ children, taille = 'MD', color: textColor
     // de la couleur) exige qu'un lien au milieu d'un bloc de texte se distingue de son
     // entourage par autre chose que sa seule couleur.
     const linkColor = color.light.text['default-info'];
-    const linkStyle = { textDecoration: 'underline' };
-    const linkHoverStyle = { textDecoration: 'none' };
-    const components = createMarkdownComponents({
+    const styles = {
         bodyStyle,
         boldStyle,
         textColor,
@@ -35,8 +30,7 @@ export const MarkdownDescription = ({ children, taille = 'MD', color: textColor
         borderColor,
         headerBg,
         linkColor,
-        linkStyle,
-        linkHoverStyle,
-    });
-    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: 8, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, replierLesCoupuresDeLigne], components: components, children: children }) }));
+    };
+    const components = Platform.OS === 'web' ? createMarkdownComponents(styles) : createNativeMarkdownComponents(styles);
+    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';
@@ -8,7 +8,7 @@ type AvecEnfants = {
     children?: React.ReactNode;
 };
 type TextStyle = Pick<RNTextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'fontFamily' | 'letterSpacing'>;
-type MarkdownComponentsStyles = {
+export type MarkdownComponentsStyles = {
     bodyStyle: TextStyle;
     boldStyle: TextStyle;
     /** Couleur du texte courant, hors titres et liens. Vide garde le gris par defaut. */
@@ -16,15 +16,9 @@ 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;
-    linkStyle: {
-        textDecoration: 'underline';
-    };
-    linkHoverStyle: {
-        textDecoration: 'none';
-    };
 };
 type TextComponentStyles = Pick<MarkdownComponentsStyles, 'bodyStyle' | 'boldStyle' | 'textColor'>;
 export declare const createTextComponents: ({ bodyStyle, boldStyle, textColor }: TextComponentStyles) => {

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;AAazD,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,KAAK,wBAAwB,GAAG;IAC9B,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;IAClB,SAAS,EAAE;QAAE,cAAc,EAAE,WAAW,CAAA;KAAE,CAAC;IAC3C,cAAc,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,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;AAgIH,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,8 +1,10 @@
 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';
+import { soulignementDuLien } from '../styleTamagui/soulignement';
 import { Typography } from '../Typography';
 const HIGHLIGHT_LANGUAGES = [
     'json',
@@ -22,25 +24,26 @@ 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, linkStyle, linkHoverStyle }) => ({
-    a: ({ href, children: c }) => (_jsx(Typography, { tag: "a", href: href, color: linkColor, style: linkStyle, hoverStyle: linkHoverStyle, [FOCUS_ATTRIBUTE]: 'ring', children: c })),
+const createLinkComponents = ({ linkColor }) => ({
+    a: ({ href, children: c }) => (_jsx(Typography, { tag: "a", color: linkColor, textDecorationLine: soulignementDuLien, href, [FOCUS_ATTRIBUTE]: 'ring', children: c })),
 });
 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
@@ -56,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 })),
@@ -65,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

@@ -0,0 +1,13 @@
+import type { Components } from 'react-markdown';
+import { MarkdownComponentsStyles } from './markdownComponents';
+type Noeud = {
+    type: string;
+    tagName?: string;
+    value?: string;
+    properties?: Record<string, string | number | boolean>;
+    children?: Noeud[];
+};
+export declare const preparerMarkdownNatif: () => (noeud: Noeud) => void;
+export declare const createNativeMarkdownComponents: (styles: MarkdownComponentsStyles) => Components;
+export {};
+//# sourceMappingURL=markdownNatif.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,74 @@
+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';
+import { createMarkdownComponents } from './markdownComponents';
+const CONTENEURS = new Set(['ul', 'ol', 'li', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'section']);
+const BLOCS = new Set(['p', 'ul', 'ol', 'blockquote', 'pre']);
+// Les listes compactes de Markdown ont du texte directement sous `li`. En natif,
+// chaque suite de texte doit être dans un paragraphe, même avant une sous-liste.
+const paragraphesDeListe = (children) => {
+    const resultat = [];
+    let inline = [];
+    const terminer = () => {
+        if (inline.length)
+            resultat.push({ type: 'element', tagName: 'p', properties: {}, children: inline });
+        inline = [];
+    };
+    for (const enfant of children) {
+        if (BLOCS.has(enfant.tagName ?? '')) {
+            terminer();
+            resultat.push(enfant);
+        }
+        else
+            inline.push(enfant);
+    }
+    terminer();
+    return resultat;
+};
+const preparer = (noeud) => {
+    if (!noeud.children)
+        return;
+    // Les retours entre blocs HTML sont décoratifs. Une View native ne peut pas
+    // recevoir ces chaînes de texte, contrairement à un élément DOM.
+    if (noeud.type === 'root' || CONTENEURS.has(noeud.tagName ?? '')) {
+        noeud.children = noeud.children.filter(enfant => enfant.type !== 'text' || !!enfant.value?.trim());
+    }
+    if (noeud.tagName === 'li')
+        noeud.children = paragraphesDeListe(noeud.children);
+    if (noeud.tagName === 'ol') {
+        const debut = Number(noeud.properties?.start ?? 1);
+        noeud.children.forEach((enfant, index) => {
+            enfant.properties = { ...enfant.properties, 'data-marker': `${debut + index}.` };
+        });
+    }
+    noeud.children.forEach(preparer);
+};
+export const preparerMarkdownNatif = () => preparer;
+const tableauxNatifs = ({ bodyStyle, boldStyle, borderColor, headerBg }) => ({
+    table: ({ children }) => (_jsx(Box, { borderWidth: 1, borderColor: borderColor, children: children })),
+    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: "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: 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: 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 } }),
+    del: ({ children }) => _jsx(Typography, { style: { textDecorationLine: 'line-through' }, children: children }),
+    input: ({ checked }) => _jsx(Typography, { children: checked ? '☑ ' : '☐ ' }),
+    img: ({ alt }) => _jsx(Typography, { style: styles.bodyStyle, children: alt }),
+});

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

@@ -1 +1 @@
-{"version":3,"file":"Metabase.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAEnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Metabase.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/core/Metabase/Metabase.stories.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../Box';
 import { Metabase } from './Metabase';
 import { useStyles } from './Metabase.styles';
 export default {
     title: 'Metabase',
     tags: ['core'],
     experimental: false,
-    description: "Intègre une page Metabase en passant l'url",
+    description: 'Intègre une page Metabase depuis son URL. Cet exemple charge le tableau de bord public de démonstration de Metabase et nécessite une connexion Internet.',
     component: Metabase,
     styleFn: useStyles,
 };
-export const Default = () => (_jsx(Metabase, { source: "https://spined-burst.metabaseapp.com/public/dashboard/a5f977a6-b6f4-4609-8e16-e422826c40ab" }));
+export const Default = () => (_jsx(Box, { width: "100%", height: 600, children: _jsx(Metabase, { source: "https://embedded-analytics-sdk-demo.metabase.com/admin/analytics/i5s-lcGYLc1GyFdIy4TxH", title: "D\u00E9monstration Metabase : suivi des stocks et des commandes" }) }));
 export * as Sources from './Metabase.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Metabase.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Metabase.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Metabase/Metabase.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwS,CAAC;AAE7T,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Metabase/Metabase.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Metabase source=\"https://spined-burst.metabaseapp.com/public/dashboard/a5f977a6-b6f4-4609-8e16-e422826c40ab\" />\n);";
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" height={600}>\n    <Metabase\n      source=\"https://embedded-analytics-sdk-demo.metabase.com/admin/analytics/i5s-lcGYLc1GyFdIy4TxH\"\n      title=\"Démonstration Metabase : suivi des stocks et des commandes\"\n    />\n  </Box>\n);";
 export const storySources = {
     Default,
 };

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

@@ -40,6 +40,11 @@ export declare const WithPageMetaProvider: () => null;
  * démontre que le scroll se fait bien au sein de la page.
  */
 export declare const WithScrollable: () => import("react").JSX.Element;
+/**
+ * Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.
+ * Désactivé par défaut : le fond est uni.
+ */
+export declare const WithGradient: () => import("react").JSX.Element;
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,YAAa,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,YAAa,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,mCAIxB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Page/Page.stories.js

@@ -46,6 +46,11 @@ export const WithPageMetaProvider = () => null;
  * démontre que le scroll se fait bien au sein de la page.
  */
 export const WithScrollable = () => (_jsx(Page, { title: "Page scrollable", scrollable: true, children: _jsx(Typography, { children: "Page avec du scroll." }) }));
+/**
+ * Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.
+ * Désactivé par défaut : le fond est uni.
+ */
+export const WithGradient = () => (_jsx(Page, { title: "Page avec d\u00E9grad\u00E9", gradient: true, children: _jsx(Typography, { children: "Page avec un fond en d\u00E9grad\u00E9." }) }));
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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

@@ -4,6 +4,7 @@ export declare const WithMetaRobots: () => string;
 export declare const WithMultipleMeta: () => string;
 export declare const WithPageMetaProvider: () => string;
 export declare const WithScrollable: () => string;
+export declare const WithGradient: () => string;
 export declare const WithSidebar: () => string;
 export declare const storySources: {
     readonly Default: () => string;
@@ -12,6 +13,7 @@ export declare const storySources: {
     readonly WithMultipleMeta: () => string;
     readonly WithPageMetaProvider: () => string;
     readonly WithScrollable: () => string;
+    readonly WithGradient: () => string;
     readonly WithSidebar: () => string;
 };
 export type StorySourceName = keyof typeof storySources;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,cAAc,cAAiK,CAAC;AAE7L,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAItE,CAAC"}
+{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,cAAc,cAAiK,CAAC;AAE7L,eAAO,MAAM,YAAY,cAAwK,CAAC;AAElM,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAKtE,CAAC"}

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

@@ -6,6 +6,7 @@ export const WithMetaRobots = () => "export const WithMetaRobots = () => (\n  <P
 export const WithMultipleMeta = () => "export const WithMultipleMeta = () => (\n  <Page\n    title=\"Page complète\"\n    description=\"Avec plusieurs balises meta\"\n    meta={[\n      { name: 'robots', content: 'noindex, nofollow' },\n      { name: 'author', content: 'Alvéole' },\n      { httpEquiv: 'X-UA-Compatible', content: 'IE=edge' },\n    ]}\n  >\n    <Typography>Page avec plusieurs balises meta personnalisées.</Typography>\n  </Page>\n);";
 export const WithPageMetaProvider = () => "export const WithPageMetaProvider = () => null;";
 export const WithScrollable = () => "export const WithScrollable = () => (\n  <Page title=\"Page scrollable\" scrollable>\n    <Typography>Page avec du scroll.</Typography>\n  </Page>\n);";
+export const WithGradient = () => "export const WithGradient = () => (\n  <Page title=\"Page avec dégradé\" gradient>\n    <Typography>Page avec un fond en dégradé.</Typography>\n  </Page>\n);";
 export const WithSidebar = () => "export const WithSidebar = () => null;";
 export const storySources = {
     Default,
@@ -14,10 +15,12 @@ export const storySources = {
     WithMultipleMeta,
     WithPageMetaProvider,
     WithScrollable,
+    WithGradient,
     WithSidebar,
 };
 export const storyDescriptions = {
     WithPageMetaProvider: "Configure des meta globales pour toutes les pages via `PageMetaProvider` dans `app/_layout.tsx`.\nLes meta du provider sont injectées en premier ; la prop `meta` de chaque `<Page>` les complète ou les écrase.\n\n```tsx\nimport { PageMetaProvider } from '@alveole/components';\n\nexport default function RootLayout() {\n  return (\n    <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>\n      <Stack />\n    </PageMetaProvider>\n  );\n}\n\n// Une page peut surcharger ou ajouter des meta sans répéter le noindex :\n<Page title=\"Ma page\" meta={[{ name: 'author', content: 'Alvéole' }]} />\n```",
     WithScrollable: "Rend la page scrollable via l'attribut `scrollable`. Accepte aussi `mobile-only` ou `desktop-only`\npour limiter le scroll à une plateforme.\n\nCi-dessous, 4 Box de 300px de haut chacune : le contenu dépasse la hauteur de l'écran, ce qui\ndémontre que le scroll se fait bien au sein de la page.",
+    WithGradient: "Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.\nDésactivé par défaut : le fond est uni.",
     WithSidebar: "Intégration avec un contrôleur de sidebar via `useSidebar()`.\n\n```tsx\nconst sidebarController = useSidebar();\nreturn (\n  <Page\n    sideBarController={sidebarController}\n    sidebar={<AdminNavigation sidebarController={sidebarController} />}\n    title=\"Mon titre\"\n  >\n    ...\n  </Page>\n);\n```",
 };

package/dist/core/Page/Page.types.d.ts

@@ -11,6 +11,7 @@ export type PageProps = BoxProps & {
     title: string;
     description?: string;
     defaultBackgroundColor?: string;
+    gradient?: boolean;
     og?: {
         title?: string;
         description?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC"}
+{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC"}