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

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

@@ -1,12 +1,12 @@
 import React from 'react';
 export type PageBackgroundProps = {
     children: React.ReactNode;
+    gradient?: boolean;
 };
 /**
- * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
- * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
- * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
- * où ils tombent dans la page.
+ * Le fond d'une page est par défaut une surface de la palette, unie. Un dégradé fait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne peut alors s'accorder à une valeur du
+ * thème. Il reste disponible en opt-in via `gradient`.
  */
-export declare const PageBackground: ({ children }: PageBackgroundProps) => React.JSX.Element;
+export declare const PageBackground: ({ children, gradient }: PageBackgroundProps) => React.JSX.Element;
 //# sourceMappingURL=PageBackground.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,mBAAmB,sBAO/D,CAAC"}
+{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,wBAAgC,mBAAmB,sBAoBjF,CAAC"}

package/dist/core/Page/PageBackground.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
+import { LinearGradient } from 'expo-linear-gradient';
 import { Box } from '../Box';
 import { useStyles } from './Page.styles';
 /**
- * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
- * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
- * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
- * où ils tombent dans la page.
+ * Le fond d'une page est par défaut une surface de la palette, unie. Un dégradé fait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne peut alors s'accorder à une valeur du
+ * thème. Il reste disponible en opt-in via `gradient`.
  */
-export const PageBackground = ({ children }) => {
+export const PageBackground = ({ children, gradient = false }) => {
     const styles = useStyles();
     const { color } = useTheme();
+    if (gradient) {
+        return (_jsx(LinearGradient, { colors: [color.light.background['default-grey'], color.light.background['alt-grey']], start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 }, style: styles.pageBackground, children: children }));
+    }
     return (_jsx(Box, { style: { ...styles.pageBackground, backgroundColor: color.light.background['default-grey'] }, children: children }));
 };

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    tags: "core"[];
+    experimental: false;
+    description: string;
+    shortDescription: string;
+    component: ({ children, gradient }: import("./PageBackground").PageBackgroundProps) => import("react").JSX.Element;
+    styleFn: () => {
+        pageBackground: {
+            flex: number;
+            width: "100%";
+        };
+        sidebarContainer: {
+            display: "flex";
+            flexDirection: "row";
+            flex: number;
+            backgroundColor: "transparent";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Gradient: () => import("react").JSX.Element;
+export * as Sources from './PageBackground.stories.sources';
+//# sourceMappingURL=PageBackground.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBackground.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,wBAmBkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAMpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { useStyles } from './Page.styles';
+import { PageBackground } from './PageBackground';
+export default {
+    title: 'PageBackground',
+    tags: ['core'],
+    experimental: false,
+    description: `Fond de page uni, appliqué automatiquement par \`Page\` lorsqu'aucune sidebar ni scroll n'est utilisé.
+
+## Fonctionnement
+
+- Occupe tout l'espace disponible (\`flex: 1\`, \`width: 100%\`).
+- Applique la couleur de palette \`background.default-grey\` du thème.
+- Avec \`gradient\`, applique un dégradé vertical \`default-grey\` → \`alt-grey\` (désactivé par défaut).
+- Avec \`gradient\`, applique un dégradé vertical \`default-grey\` → \`alt-grey\` (désactivé par défaut).
+
+## Pourquoi un fond uni par défaut ?
+
+Un dégradé ferait varier la couleur selon la hauteur : aucun contenu posé dessus ne pourrait s'accorder à une valeur du thème, et deux éléments identiques n'auraient pas le même fond selon leur position dans la page.`,
+    shortDescription: 'Fond de page uni utilisant la couleur de palette default-grey du thème.',
+    component: PageBackground,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { style: { height: 300, width: '100%' }, children: _jsx(PageBackground, { children: _jsx(Typography, { children: "Contenu pos\u00E9 sur le fond de page" }) }) }));
+export const Gradient = () => (_jsx(Box, { style: { height: 300, width: '100%' }, children: _jsx(PageBackground, { gradient: true, children: _jsx(Typography, { children: "Contenu pos\u00E9 sur le fond en d\u00E9grad\u00E9" }) }) }));
+export * as Sources from './PageBackground.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBackground.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqN,CAAC;AAE1O,eAAO,MAAM,QAAQ,cAAkO,CAAC;AAExP,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/Page/PageBackground.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box style={{ height: 300, width: '100%' }}>\n    <PageBackground>\n      <Typography>Contenu posé sur le fond de page</Typography>\n    </PageBackground>\n  </Box>\n);";
+export const Gradient = () => "export const Gradient = () => (\n  <Box style={{ height: 300, width: '100%' }}>\n    <PageBackground gradient>\n      <Typography>Contenu posé sur le fond en dégradé</Typography>\n    </PageBackground>\n  </Box>\n);";
+export const storySources = {
+    Default,
+    Gradient,
+};

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"}

package/dist/core/Page/PageContent.js

@@ -10,7 +10,7 @@ import { PageContentDefault } from './PageContentDefault';
 import { PageContentScrollable } from './PageContentScrollable';
 import { usePageStatusBar } from './usePageStatusBar';
 export const PageContent = (props) => {
-    const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
+    const { gradient, scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
     const { isVariant } = useTheme();
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
@@ -22,10 +22,10 @@ export const PageContent = (props) => {
         setIsScrolled(scrolled);
         onScrollChange?.(scrollY);
     }, [onScrollChange]);
-    const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", style: statusBar?.backgroundColor ? { backgroundColor: statusBar.backgroundColor } : undefined, children: _jsx(Box, { pt: Platform.OS === 'android' ? top : 0, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
+    const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", style: statusBar?.backgroundColor ? { backgroundColor: statusBar.backgroundColor } : undefined, children: _jsx(Box, { style: { paddingTop: Platform.OS === 'android' ? top : undefined }, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
     const isScrollable = React.useMemo(() => scrollable === true ||
         (scrollable === 'desktop-only' && isVariant('desktop')) ||
         (scrollable === 'mobile-only' && mobileOrTablet), [isVariant, mobileOrTablet, scrollable]);
     const renderContent = () => isScrollable ? (_jsx(PageContentScrollable, { ...props, style: { backgroundColor: 'transparent' }, onScrollChange: handleInternalScrollChange })) : (_jsx(PageContentDefault, { ...props, style: { backgroundColor: 'transparent' } }));
-    return (_jsx(PageBackground, { children: sidebar || renderToolbar ? renderPageWithSidebar(renderContent()) : renderContent() }));
+    return (_jsx(PageBackground, { gradient: gradient, children: sidebar || renderToolbar ? renderPageWithSidebar(renderContent()) : renderContent() }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PageContentDefault.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentDefault.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;AAEhD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAuBhE,CAAC"}
+{"version":3,"file":"PageContentDefault.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentDefault.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;AAEhD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAwBhE,CAAC"}

package/dist/core/Page/PageContentDefault.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 export const PageContentDefault = (props) => {
-    const { beforeContent, footerContent, children, title, description, og, scrollable: _scrollable, sidebar: _sidebar, sideBarController: _sideBarController, onScrollToBottom: _onScrollToBottom, onEndReachedThreshold: _onEndReachedThreshold, ...pageProps } = props;
+    const { beforeContent, footerContent, children, title, description, og, scrollable: _scrollable, gradient: _gradient, sidebar: _sidebar, sideBarController: _sideBarController, onScrollToBottom: _onScrollToBottom, onEndReachedThreshold: _onEndReachedThreshold, ...pageProps } = props;
     return (_jsxs(Box, { tag: "page", ...pageProps, height: "100%", children: [beforeContent, children, footerContent] }));
 };

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

@@ -8,30 +8,31 @@ export type PageContentScrollableProps = PageProps & {
     onEndReachedThreshold?: number;
     onScrollChange?: (scrollY: number) => void;
 };
-export declare const PageContentScrollable: React.ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & import("@tamagui/core").RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
+export declare const PageContentScrollable: React.ForwardRefExoticComponent<Omit<import("tamagui").ViewProps, "flex" | "display" | "overflow" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "flexDirection" | "flexWrap" | "gap" | "style" | "justify" | keyof import("../..").SizeStyle | "p" | "pl" | "pr" | "pt" | "pb" | "m" | "ml" | "mr" | "mt" | "mb" | "tag"> & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "tag"> & Pick<import("tamagui").ViewProps, "flex" | "display" | "overflow" | "opacity" | "flexDirection" | "flexWrap"> & {
     justify?: import("tamagui").ViewProps["justifyContent"];
 } & import("../..").SizeStyle & {
-    p?: number | import("@alveole/theme").SpacingKey;
-    pl?: number | import("@alveole/theme").SpacingKey;
-    pr?: number | import("@alveole/theme").SpacingKey;
-    pt?: number | import("@alveole/theme").SpacingKey;
-    pb?: number | import("@alveole/theme").SpacingKey;
-    m?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    ml?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mr?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mt?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mb?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    backgroundColor?: string;
-    borderWidth?: number;
-    borderRadius?: number | string;
-    borderColor?: string;
-    gap?: number | import("@alveole/theme").SpacingKey;
+    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?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+    borderWidth?: import("tamagui").ViewProps["borderWidth"];
+    borderRadius?: import("@alveole/theme").RadiusKey;
+    borderColor?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+    gap?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
 } & {
-    hoverStyle?: React.CSSProperties;
+    tag?: string;
 } & {
     title: string;
     description?: string;
     defaultBackgroundColor?: string;
+    gradient?: boolean;
     og?: {
         title?: string;
         description?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,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;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;aALV,CAAA;mBACZ,CAAC;;;;;;;;;4BASF,CAAC;;;;;;;uBAVS,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAyD3C,CAAC"}
+{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,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;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;aAJtB,CAAC;mBACX,CAAD;;;;;;;;;4BAUK,CAAD;;;;;;;uBAZgB,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDA0D3C,CAAC"}

package/dist/core/Page/PageContentScrollable.js

@@ -4,7 +4,7 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 import { Box } from '../../core/Box';
 export const PageContentScrollable = React.forwardRef(function PageContentScrollable(props, ref) {
     const { beforeContent, footerContent, children, title, description, og, defaultBackgroundColor, onScrollToBottom, onEndReachedThreshold = 100, onScrollChange, ...pageProps } = props;
-    const { scrollable: _scrollable, sidebar: _sidebar, sideBarController: _sideBarController, ...boxProps } = pageProps;
+    const { scrollable: _scrollable, gradient: _gradient, sidebar: _sidebar, sideBarController: _sideBarController, ...boxProps } = pageProps;
     const scrollRef = useRef(null);
     useImperativeHandle(ref, () => ({
         scrollToTop: () => scrollRef.current?.scrollTo({ y: 0, animated: true }),

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

@@ -1,5 +1,6 @@
 export * from './Page';
 export * from './Page.types';
+export * from './PageBackground';
 export * from './PageContentScrollable';
 export * from './PageMetaContext';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Page/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Page/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}

package/dist/core/Page/index.js

@@ -1,4 +1,5 @@
 export * from './Page';
 export * from './Page.types';
+export * from './PageBackground';
 export * from './PageContentScrollable';
 export * from './PageMetaContext';

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

@@ -1 +1 @@
-{"version":3,"file":"usePageStatusBar.d.ts","sourceRoot":"","sources":["../../../src/core/Page/usePageStatusBar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAOlD,eAAO,MAAM,cAAc,GAAI,WAAW,QAAQ,CAAC,kBAAkB,CAAC,SAIrE,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,kBAAkB,SA0B9D,CAAC"}
+{"version":3,"file":"usePageStatusBar.d.ts","sourceRoot":"","sources":["../../../src/core/Page/usePageStatusBar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AASlD,eAAO,MAAM,cAAc,GAAI,WAAW,QAAQ,CAAC,kBAAkB,CAAC,SAGrE,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,kBAAkB,SA0B9D,CAAC"}

package/dist/core/Page/usePageStatusBar.js

@@ -1,15 +1,15 @@
 import { useFocusEffect } from 'expo-router';
 import * as SystemUI from 'expo-system-ui';
 import React from 'react';
-import { AppState, Platform, StatusBar } from 'react-native';
+import { AppState, StatusBar } from 'react-native';
 const DEFAULT_STATUS_BAR = {
     barStyle: 'dark-content',
     backgroundColor: 'white',
 };
+// Pas de `StatusBar.setBackgroundColor` : sans effet en edge-to-edge, mode par défaut des apps
+// Expo, et retiré de React Native 0.88. Le fond sous la barre est celui que pose expo-system-ui.
 export const applyStatusBar = (statusBar) => {
     StatusBar.setBarStyle(statusBar.barStyle);
-    if (Platform.OS === 'android')
-        StatusBar.setBackgroundColor(statusBar.backgroundColor);
     void SystemUI.setBackgroundColorAsync(statusBar.backgroundColor);
 };
 // La barre de statut est un état global de l'OS : la poser au focus de la page et la restaurer à

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

@@ -1 +1 @@
-{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAKlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAQkB;AAMlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/core/Section/Section.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomPalette, enCouleursDuTheme } from '@alveole/theme';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
 import { Section } from './Section';
@@ -11,17 +12,18 @@ export default {
     component: Section,
     styleFn: useStyles,
 };
-const paddingColor = '#b9c47f';
-const innerBoxColor = '#88b2bd';
+const { background } = enCouleursDuTheme(CustomPalette).light;
+const paddingColor = background['contrast-success'];
+const innerBoxColor = background['contrast-info'];
 export const Default = () => (_jsx(Section, { children: _jsx(Box, { children: _jsx(Typography, { children: "Section" }) }) }));
-export const WithPaddingY = () => (_jsx(Section, { backgroundColor: paddingColor, withPaddingY: true, children: _jsx(Box, { backgroundColor: innerBoxColor, p: '050', children: _jsx(Typography, { children: "Section avec background et padding Y" }) }) }));
+export const WithPaddingY = () => (_jsx(Section, { backgroundColor: paddingColor, withPaddingY: true, children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et padding Y" }) }) }));
 export const WidthMdSize = () => {
     const styles = useStyles();
-    return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: '050', children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px)"] }) }) }));
+    return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px)"] }) }) }));
 };
-export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: '050', children: _jsx(Typography, { children: "Section avec background et size full (taille par d\u00E9faut)" }) }) }));
+export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et size full (taille par d\u00E9faut)" }) }) }));
 export const WidthSmSize = () => {
     const styles = useStyles();
-    return (_jsx(Section, { backgroundColor: paddingColor, size: "sm", children: _jsx(Box, { backgroundColor: innerBoxColor, p: '050', children: _jsxs(Typography, { children: ["Section avec background et size sm (", styles.sectionContainerSM.maxWidth, "px)"] }) }) }));
+    return (_jsx(Section, { backgroundColor: paddingColor, size: "sm", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size sm (", styles.sectionContainerSM.maxWidth, "px)"] }) }) }));
 };
 export * as Sources from './Section.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA+P,CAAC;AAEzR,eAAO,MAAM,WAAW,cAAiW,CAAC;AAE1X,eAAO,MAAM,aAAa,cAAqR,CAAC;AAEhT,eAAO,MAAM,WAAW,cAAiW,CAAC;AAE1X,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA8P,CAAC;AAExR,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,aAAa,cAAoR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,10 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Section/Section.stories.tsx
 export const Default = () => "export const Default = () => (\n  <Section>\n    <Box>\n      <Typography>Section</Typography>\n    </Box>\n  </Section>\n);";
-export const WithPaddingY = () => "export const WithPaddingY = () => (\n  <Section backgroundColor={paddingColor} withPaddingY>\n    <Box backgroundColor={innerBoxColor} p={'050'}>\n      <Typography>Section avec background et padding Y</Typography>\n    </Box>\n  </Section>\n);";
-export const WidthMdSize = () => "export const WidthMdSize = () => {\n  const styles = useStyles();\n\n  return (\n    <Section backgroundColor={paddingColor} size=\"md\">\n      <Box backgroundColor={innerBoxColor} p={'050'}>\n        <Typography>Section avec background et size md ({styles.sectionContainerMD.maxWidth}px)</Typography>\n      </Box>\n    </Section>\n  );\n};";
-export const WidthFullSize = () => "export const WidthFullSize = () => (\n  <Section backgroundColor={paddingColor} size=\"full\">\n    <Box backgroundColor={innerBoxColor} p={'050'}>\n      <Typography>Section avec background et size full (taille par défaut)</Typography>\n    </Box>\n  </Section>\n);";
-export const WidthSmSize = () => "export const WidthSmSize = () => {\n  const styles = useStyles();\n\n  return (\n    <Section backgroundColor={paddingColor} size=\"sm\">\n      <Box backgroundColor={innerBoxColor} p={'050'}>\n        <Typography>Section avec background et size sm ({styles.sectionContainerSM.maxWidth}px)</Typography>\n      </Box>\n    </Section>\n  );\n};";
+export const WithPaddingY = () => "export const WithPaddingY = () => (\n  <Section backgroundColor={paddingColor} withPaddingY>\n    <Box backgroundColor={innerBoxColor} p=\"1W\">\n      <Typography>Section avec background et padding Y</Typography>\n    </Box>\n  </Section>\n);";
+export const WidthMdSize = () => "export const WidthMdSize = () => {\n  const styles = useStyles();\n\n  return (\n    <Section backgroundColor={paddingColor} size=\"md\">\n      <Box backgroundColor={innerBoxColor} p=\"1W\">\n        <Typography>Section avec background et size md ({styles.sectionContainerMD.maxWidth}px)</Typography>\n      </Box>\n    </Section>\n  );\n};";
+export const WidthFullSize = () => "export const WidthFullSize = () => (\n  <Section backgroundColor={paddingColor} size=\"full\">\n    <Box backgroundColor={innerBoxColor} p=\"1W\">\n      <Typography>Section avec background et size full (taille par défaut)</Typography>\n    </Box>\n  </Section>\n);";
+export const WidthSmSize = () => "export const WidthSmSize = () => {\n  const styles = useStyles();\n\n  return (\n    <Section backgroundColor={paddingColor} size=\"sm\">\n      <Box backgroundColor={innerBoxColor} p=\"1W\">\n        <Typography>Section avec background et size sm ({styles.sectionContainerSM.maxWidth}px)</Typography>\n      </Box>\n    </Section>\n  );\n};";
 export const storySources = {
     Default,
     WithPaddingY,

package/dist/core/StorySummary/StorySummary.d.ts

@@ -0,0 +1,7 @@
+export type StorySummaryProps = {
+    /** Les titres des sections de la page, dans l'ordre où elle les présente. */
+    entrees: string[];
+};
+/** Sur natif, pas d'ancre à viser : le sommaire liste les sections sans lien. */
+export declare const StorySummary: ({ entrees }: StorySummaryProps) => import("react").JSX.Element;
+//# sourceMappingURL=StorySummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorySummary.d.ts","sourceRoot":"","sources":["../../../src/core/StorySummary/StorySummary.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6EAA6E;IAC7E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCAmB1D,CAAC"}

package/dist/core/StorySummary/StorySummary.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+/** Sur natif, pas d'ancre à viser : le sommaire liste les sections sans lien. */
+export const StorySummary = ({ entrees }) => {
+    const { color, text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: "1W", children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }, entree)))] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorySummary.stories.d.ts","sourceRoot":"","sources":["../../../src/core/StorySummary/StorySummary.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAGA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAAyF,CAAC;AAE9G,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}

package/dist/core/StorySummary/StorySummary.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StorySummary } from './StorySummary';
+export default {
+    title: 'StorySummary',
+    tags: ['core'],
+    experimental: true,
+    webOnly: true,
+    description: 'Sommaire « Sur cette page » : un lien par section vers l’ancre posée par AnchorHeading.',
+    component: StorySummary,
+    styleFn: () => ({}),
+};
+export const Default = () => _jsx(StorySummary, { entrees: ['Variantes', 'Tailles disponibles', 'Accessibilité'] });
+export * as Sources from './StorySummary.stories.sources';

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

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

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/StorySummary/StorySummary.stories.tsx
+export const Default = () => "export const Default = () => <StorySummary entrees={['Variantes', 'Tailles disponibles', 'Accessibilité']} />;";
+export const storySources = {
+    Default,
+};

package/dist/core/StorySummary/StorySummary.web.d.ts

@@ -0,0 +1,4 @@
+import type { StorySummaryProps } from './StorySummary';
+/** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
+export declare const StorySummary: ({ entrees }: StorySummaryProps) => import("react").JSX.Element;
+//# sourceMappingURL=StorySummary.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StorySummary.web.d.ts","sourceRoot":"","sources":["../../../src/core/StorySummary/StorySummary.web.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,wFAAwF;AACxF,eAAO,MAAM,YAAY,GAAI,aAAa,iBAAiB,gCAqB1D,CAAC"}

package/dist/core/StorySummary/StorySummary.web.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { toSlug } from '../AnchorHeading';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { styleDuLienBrut } from './styleDuLienBrut';
+/** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
+export const StorySummary = ({ entrees }) => {
+    const { color, text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: "1W", children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "Sur cette page" }), entrees.map(entree => (_jsx("a", { href: `#${toSlug(entree)}`, style: styleDuLienBrut, [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['default-grey'] }, children: entree }) }, entree)))] }));
+};

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

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

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

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

package/dist/core/StorySummary/index.js

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

package/dist/core/StorySummary/styleDuLienBrut.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export declare const styleDuLienBrut: CSSProperties;
+//# sourceMappingURL=styleDuLienBrut.d.ts.map

package/dist/core/StorySummary/styleDuLienBrut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleDuLienBrut.d.ts","sourceRoot":"","sources":["../../../src/core/StorySummary/styleDuLienBrut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,aAAoF,CAAC"}

package/dist/core/StorySummary/styleDuLienBrut.js

@@ -0,0 +1,7 @@
+/**
+ * Le style d'un `<a>` brut du catalogue qui enveloppe un libellé. En flex, le libellé devient
+ * un bloc à sa propre hauteur de ligne : sinon le lien garde celle de la police que Tamagui v2
+ * remet sur chaque vue, plus haute, et décale son libellé. En colonne, le libellé s'étire à la
+ * largeur du lien et passe à la ligne, là où une rangée le laissait déborder.
+ */
+export const styleDuLienBrut = { display: 'flex', flexDirection: 'column', textDecoration: 'none' };

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ThemeProvider/ThemeProvider.stories.tsx"],"names":[],"mappings":";;;;;;;;AAOA,wBAQkB;AA6BlB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,gBAAgB,mCA8C5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"ThemeProvider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ThemeProvider/ThemeProvider.stories.tsx"],"names":[],"mappings":";;;;;;;;AAOA,wBAQkB;AAkClB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,gBAAgB,mCA8C5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/core/ThemeProvider/ThemeProvider.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@alveole/theme';
+import { RadiusList, Spacings, useTheme } from '@alveole/theme';
 import { Box } from '../Box';
 import { Highlight } from '../Highlight';
 import { Typography } from '../Typography';
@@ -16,13 +16,18 @@ export default {
 // démonstration.
 const ModeBadge = ({ children }) => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: {
             alignItems: 'center',
-            paddingHorizontal: 12,
-            paddingVertical: 8,
-            borderRadius: 8,
+            paddingHorizontal: Spacings['3V'],
+            paddingVertical: Spacings['1W'],
+            borderRadius: RadiusList.md,
             backgroundColor: color.light.background['default-grey'],
-        }, children: [_jsx(Box, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: color.light.background['active-primary'] } }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: children })] }));
+        }, children: [_jsx(Box, { style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: RadiusList.full,
+                    backgroundColor: color.light.background['active-primary'],
+                } }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: children })] }));
 };
 /**
  * Mode par défaut : les variables CSS sont injectées au runtime via des balises `<style>`,
@@ -40,7 +45,7 @@ const ModeBadge = ({ children }) => {
  * }
  * ```
  */
-export const UsageDefaut = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(ModeBadge, { children: "Mode actif : injection dynamique via balises <style>" }), _jsx(Highlight, { language: "tsx", children: `import { ThemeProvider } from '@alveole/theme';
+export const UsageDefaut = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3V", children: [_jsx(ModeBadge, { children: "Mode actif : injection dynamique via balises <style>" }), _jsx(Highlight, { language: "tsx", children: `import { ThemeProvider } from '@alveole/theme';
 
 export default function RootLayout() {
   return (
@@ -86,7 +91,7 @@ export default function RootLayout() {
  */
 export const UsageCSSStatique = () => {
     const { color, text } = useTheme();
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(ModeBadge, { children: "Mode actif : CSS pr\u00E9-compil\u00E9 - aucune balise <style> inject\u00E9e" }), _jsx(Highlight, { language: "tsx", children: `import '@alveole/theme/dist/default.css';
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3V", children: [_jsx(ModeBadge, { children: "Mode actif : CSS pr\u00E9-compil\u00E9 - aucune balise <style> inject\u00E9e" }), _jsx(Highlight, { language: "tsx", children: `import '@alveole/theme/dist/default.css';
 import { ThemeProvider } from '@alveole/theme';
 
 export default function RootLayout() {
@@ -95,10 +100,10 @@ export default function RootLayout() {
       {children}
     </ThemeProvider>
   );
-}` }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, style: {
-                    paddingHorizontal: 12,
-                    paddingVertical: 10,
-                    borderRadius: 8,
+}` }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1W", style: {
+                    paddingHorizontal: Spacings['3V'],
+                    paddingVertical: Spacings['3V'],
+                    borderRadius: RadiusList.md,
                     backgroundColor: color.light.background['action-high-error'],
                 }, children: [_jsx(Typography, { style: { ...text['Corps de texte'].SM.Medium, color: color.light.text['action-high-error'] }, children: "Limitation : incompatible avec color custom" }), _jsx(Typography, { style: { ...text['Corps de texte'].SM.Regular, color: color.light.text['action-high-error'] }, children: "Si l'app passe un prop `color` au ThemeProvider, les variables overrid\u00E9es ne seront pas inject\u00E9es. Dans ce cas, retirer `staticCSS`." })] }), _jsx(Highlight, { language: "tsx", children: `// ❌ Les overrides color sont ignorés avec staticCSS
 <ThemeProvider staticCSS color={{ light: { background: { 'default-grey': '#eee' } } }}>

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/ThemeProvider/ThemeProvider.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,cAAyb,CAAC;AAEld,eAAO,MAAM,gBAAgB,cAA2rD,CAAC;AAEztD,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"ThemeProvider.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/ThemeProvider/ThemeProvider.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,cAA2b,CAAC;AAEpd,eAAO,MAAM,gBAAgB,cAAouD,CAAC;AAElwD,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}