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

package/dist/core/Page/PageContent.js

@@ -22,7 +22,7 @@ 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]);

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

@@ -8,24 +8,24 @@ export type PageContentScrollableProps = PageProps & {
     onEndReachedThreshold?: number;
     onScrollChange?: (scrollY: number) => void;
 };
-export declare const PageContentScrollable: React.ForwardRefExoticComponent<Omit<import("tamagui").ViewProps, "flex" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "display" | "flexDirection" | "flexWrap" | "overflow" | "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" | "opacity" | "display" | "flexDirection" | "flexWrap" | "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?: 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?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").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?: (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";
 } & {
     tag?: string;
 } & {

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

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/ThemeProvider/ThemeProvider.stories.tsx
-export const UsageDefaut = () => "export const UsageDefaut = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n    <ModeBadge>Mode actif : injection dynamique via balises &lt;style&gt;</ModeBadge>\n    <Highlight language=\"tsx\">\n      {`import { ThemeProvider } from '@alveole/theme';\n\nexport default function RootLayout() {\n  return (\n    <ThemeProvider>\n      {children}\n    </ThemeProvider>\n  );\n}`}\n    </Highlight>\n  </Box>\n);";
-export const UsageCSSStatique = () => "export const UsageCSSStatique = () => {\n  const { color, text } = useTheme();\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <ModeBadge>Mode actif : CSS pré-compilé - aucune balise &lt;style&gt; injectée</ModeBadge>\n      <Highlight language=\"tsx\">\n        {`import '@alveole/theme/dist/default.css';\nimport { ThemeProvider } from '@alveole/theme';\n\nexport default function RootLayout() {\n  return (\n    <ThemeProvider staticCSS>\n      {children}\n    </ThemeProvider>\n  );\n}`}\n      </Highlight>\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        gap={8}\n        style={{\n          paddingHorizontal: 12,\n          paddingVertical: 10,\n          borderRadius: 8,\n          backgroundColor: color.light.background['action-high-error'],\n        }}\n      >\n        <Typography style={{ ...text['Corps de texte'].SM.Medium, color: color.light.text['action-high-error'] }}>\n          Limitation : incompatible avec color custom\n        </Typography>\n        <Typography style={{ ...text['Corps de texte'].SM.Regular, color: color.light.text['action-high-error'] }}>\n          Si l&apos;app passe un prop `color` au ThemeProvider, les variables overridées ne seront pas injectées. Dans\n          ce cas, retirer `staticCSS`.\n        </Typography>\n      </Box>\n      <Highlight language=\"tsx\">\n        {`// ❌ Les overrides color sont ignorés avec staticCSS\n<ThemeProvider staticCSS color={{ light: { background: { 'default-grey': '#eee' } } }}>\n\n// ✅ Sans staticCSS, les overrides fonctionnent\n<ThemeProvider color={{ light: { background: { 'default-grey': '#eee' } } }}>`}\n      </Highlight>\n    </Box>\n  );\n};";
+export const UsageDefaut = () => "export const UsageDefaut = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n    <ModeBadge>Mode actif : injection dynamique via balises &lt;style&gt;</ModeBadge>\n    <Highlight language=\"tsx\">\n      {`import { ThemeProvider } from '@alveole/theme';\n\nexport default function RootLayout() {\n  return (\n    <ThemeProvider>\n      {children}\n    </ThemeProvider>\n  );\n}`}\n    </Highlight>\n  </Box>\n);";
+export const UsageCSSStatique = () => "export const UsageCSSStatique = () => {\n  const { color, text } = useTheme();\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n      <ModeBadge>Mode actif : CSS pré-compilé - aucune balise &lt;style&gt; injectée</ModeBadge>\n      <Highlight language=\"tsx\">\n        {`import '@alveole/theme/dist/default.css';\nimport { ThemeProvider } from '@alveole/theme';\n\nexport default function RootLayout() {\n  return (\n    <ThemeProvider staticCSS>\n      {children}\n    </ThemeProvider>\n  );\n}`}\n      </Highlight>\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        gap=\"1W\"\n        style={{\n          paddingHorizontal: Spacings['3V'],\n          paddingVertical: Spacings['3V'],\n          borderRadius: RadiusList.md,\n          backgroundColor: color.light.background['action-high-error'],\n        }}\n      >\n        <Typography style={{ ...text['Corps de texte'].SM.Medium, color: color.light.text['action-high-error'] }}>\n          Limitation : incompatible avec color custom\n        </Typography>\n        <Typography style={{ ...text['Corps de texte'].SM.Regular, color: color.light.text['action-high-error'] }}>\n          Si l&apos;app passe un prop `color` au ThemeProvider, les variables overridées ne seront pas injectées. Dans\n          ce cas, retirer `staticCSS`.\n        </Typography>\n      </Box>\n      <Highlight language=\"tsx\">\n        {`// ❌ Les overrides color sont ignorés avec staticCSS\n<ThemeProvider staticCSS color={{ light: { background: { 'default-grey': '#eee' } } }}>\n\n// ✅ Sans staticCSS, les overrides fonctionnent\n<ThemeProvider color={{ light: { background: { 'default-grey': '#eee' } } }}>`}\n      </Highlight>\n    </Box>\n  );\n};";
 export const storySources = {
     UsageDefaut,
     UsageCSSStatique,

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

@@ -30,5 +30,6 @@ export declare const TypographyStyleUnderline: () => import("react").JSX.Element
 export declare const TypographyStyleLineThrough: () => import("react").JSX.Element;
 export declare const TypographyTransformCapitalize: () => import("react").JSX.Element;
 export declare const TypographyTransformUppercase: () => import("react").JSX.Element;
+export declare const TypographyAligneeADroite: () => import("react").JSX.Element;
 export * as Sources from './Typography.stories.sources';
 //# sourceMappingURL=Typography.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Typography/Typography.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAOkB;AAElB,eAAO,MAAM,iBAAiB,mCAAoD,CAAC;AAEnF,eAAO,MAAM,yBAAyB,mCAIrC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAAsE,CAAC;AAEzG,eAAO,MAAM,wBAAwB,mCAAkF,CAAC;AAExH,eAAO,MAAM,0BAA0B,mCAA+E,CAAC;AAEvH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mCAAwE,CAAC;AAElH,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Typography/Typography.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAOkB;AAElB,eAAO,MAAM,iBAAiB,mCAAoD,CAAC;AAEnF,eAAO,MAAM,yBAAyB,mCAIrC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAAsE,CAAC;AAEzG,eAAO,MAAM,wBAAwB,mCAAkF,CAAC;AAExH,eAAO,MAAM,0BAA0B,mCAA+E,CAAC;AAEvH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mCAAwE,CAAC;AAGlH,eAAO,MAAM,wBAAwB,mCAIpC,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/core/Typography/Typography.stories.js

@@ -15,4 +15,6 @@ export const TypographyStyleUnderline = () => _jsx(Typography, { textDecorationL
 export const TypographyStyleLineThrough = () => _jsx(Typography, { textDecorationLine: "line-through", children: "Texte barr\u00E9" });
 export const TypographyTransformCapitalize = () => (_jsx(Typography, { textTransform: "capitalize", children: "avec une majuscule" }));
 export const TypographyTransformUppercase = () => _jsx(Typography, { textTransform: "uppercase", children: "En majuscule" });
+// Un `textAlign` pose par le style tient face aux props de Typography.
+export const TypographyAligneeADroite = () => (_jsx(Typography, { tag: "typography-alignee-a-droite", style: { textAlign: 'right' }, children: "Texte align\u00E9 \u00E0 droite" }));
 export * as Sources from './Typography.stories.sources';

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

@@ -5,6 +5,7 @@ export declare const TypographyStyleUnderline: () => string;
 export declare const TypographyStyleLineThrough: () => string;
 export declare const TypographyTransformCapitalize: () => string;
 export declare const TypographyTransformUppercase: () => string;
+export declare const TypographyAligneeADroite: () => string;
 export declare const storySources: {
     readonly TypographyDefault: () => string;
     readonly TypographyPaddedWithColor: () => string;
@@ -13,6 +14,7 @@ export declare const storySources: {
     readonly TypographyStyleLineThrough: () => string;
     readonly TypographyTransformCapitalize: () => string;
     readonly TypographyTransformUppercase: () => string;
+    readonly TypographyAligneeADroite: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Typography.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Typography/Typography.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAA8F,CAAC;AAE7H,eAAO,MAAM,yBAAyB,cAAwJ,CAAC;AAE/L,eAAO,MAAM,qBAAqB,cAAsH,CAAC;AAEzJ,eAAO,MAAM,wBAAwB,cAAqI,CAAC;AAE3K,eAAO,MAAM,0BAA0B,cAAoI,CAAC;AAE5K,eAAO,MAAM,6BAA6B,cAA+I,CAAC;AAE1L,eAAO,MAAM,4BAA4B,cAA+H,CAAC;AAEzK,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Typography.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Typography/Typography.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAA8F,CAAC;AAE7H,eAAO,MAAM,yBAAyB,cAAwJ,CAAC;AAE/L,eAAO,MAAM,qBAAqB,cAAsH,CAAC;AAEzJ,eAAO,MAAM,wBAAwB,cAAqI,CAAC;AAE3K,eAAO,MAAM,0BAA0B,cAAoI,CAAC;AAE5K,eAAO,MAAM,6BAA6B,cAA+I,CAAC;AAE1L,eAAO,MAAM,4BAA4B,cAA+H,CAAC;AAEzK,eAAO,MAAM,wBAAwB,cAA6L,CAAC;AAEnO,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -7,6 +7,7 @@ export const TypographyStyleUnderline = () => "export const TypographyStyleUnder
 export const TypographyStyleLineThrough = () => "export const TypographyStyleLineThrough = () => <Typography textDecorationLine=\"line-through\">Texte barré</Typography>;";
 export const TypographyTransformCapitalize = () => "export const TypographyTransformCapitalize = () => (\n  <Typography textTransform=\"capitalize\">avec une majuscule</Typography>\n);";
 export const TypographyTransformUppercase = () => "export const TypographyTransformUppercase = () => <Typography textTransform=\"uppercase\">En majuscule</Typography>;";
+export const TypographyAligneeADroite = () => "export const TypographyAligneeADroite = () => (\n  <Typography tag=\"typography-alignee-a-droite\" style={{ textAlign: 'right' }}>\n    Texte aligné à droite\n  </Typography>\n);";
 export const storySources = {
     TypographyDefault,
     TypographyPaddedWithColor,
@@ -15,4 +16,5 @@ export const storySources = {
     TypographyStyleLineThrough,
     TypographyTransformCapitalize,
     TypographyTransformUppercase,
+    TypographyAligneeADroite,
 };

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

@@ -1,7 +1,7 @@
 /** Couleur de texte par defaut du design system, surchargeable par la prop `color`. */
 export declare const useStyles: () => {
     text: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Typography.styles.d.ts.map

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

@@ -6,7 +6,7 @@ declare const _default: {
     component: (_props: import("./Version").VersionProps) => import("react").JSX.Element;
     styleFn: () => {
         container: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;

package/dist/core/index.d.ts

@@ -1,11 +1,13 @@
 export * from './A';
 export * from './Alert';
+export * from './AlveoleProvider';
 export * from './AnchorHeading';
 export * from './AppUpdateProvider';
 export * from './Box';
 export * from './Code';
 export * from './Form';
 export * from './Grid';
+export * from './Heading';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/core/index.js

@@ -1,11 +1,13 @@
 export * from './A';
 export * from './Alert';
+export * from './AlveoleProvider';
 export * from './AnchorHeading';
 export * from './AppUpdateProvider';
 export * from './Box';
 export * from './Code';
 export * from './Form';
 export * from './Grid';
+export * from './Heading';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

package/dist/core/styleTamagui/flexDuWeb.d.ts

@@ -9,7 +9,7 @@ export declare const flexDuWeb: (flex: number) => {
     flexShrink?: undefined;
     flexBasis?: undefined;
 };
-export declare const correctionFlexDuWeb: (style: unknown) => {
+export declare const correctionFlexDuWeb: (style: unknown, flexEnProp?: unknown) => {
     flexGrow: number;
     flexShrink: number;
     flexBasis: string;

package/dist/core/styleTamagui/flexDuWeb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flexDuWeb.d.ts","sourceRoot":"","sources":["../../../src/core/styleTamagui/flexDuWeb.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM;;;;;;;;;;CACiD,CAAC;AAUxF,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO;;;;;;;;;;aAIjD,CAAC"}
+{"version":3,"file":"flexDuWeb.d.ts","sourceRoot":"","sources":["../../../src/core/styleTamagui/flexDuWeb.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM;;;;;;;;;;CACiD,CAAC;AAWxF,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,EAAE,aAAa,OAAO;;;;;;;;;;aAIvE,CAAC"}

package/dist/core/styleTamagui/flexDuWeb.js

@@ -10,9 +10,10 @@ const flexDuStyle = (style) => {
         return style.flex;
     return undefined;
 };
-// Le style d'un appelant de Box peut porter `flex: n` : la correction passe apres lui.
-export const correctionFlexDuWeb = (style) => {
-    const flex = flexDuStyle(style);
+// Un appelant de Box peut porter `flex: n` en style comme en prop, la prop l'emportant : la
+// correction passe apres les deux.
+export const correctionFlexDuWeb = (style, flexEnProp) => {
+    const flex = flexEnProp ?? flexDuStyle(style);
     if (Platform.OS !== 'web' || typeof flex !== 'number' || flex <= 0)
         return undefined;
     return flexDuWeb(flex);

package/dist/core/styleTamagui/fondAuSurvol.d.ts

@@ -1,14 +1,15 @@
+import { ThemeColor } from '@alveole/theme';
 /**
  * Separe le fond d'un style d'item du reste de sa forme, et le rend avec celui du survol sur
  * une seule valeur : une clause ne vit que sur la prop qui porte le repos (ADR 0031).
  */
 export declare const fondAuSurvol: <Style extends {
-    backgroundColor?: string;
-}>(style: Style, survol: string) => {
+    backgroundColor?: ThemeColor;
+}>(style: Style, survol: ThemeColor) => {
     forme: Omit<Style, "backgroundColor">;
     fond: {
-        default: string | undefined;
-        hover: string;
+        default: ThemeColor | undefined;
+        hover: ThemeColor;
     };
 };
 //# sourceMappingURL=fondAuSurvol.d.ts.map

package/dist/core/styleTamagui/fondAuSurvol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fondAuSurvol.d.ts","sourceRoot":"","sources":["../../../src/core/styleTamagui/fondAuSurvol.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,SAAS;IAAE,eAAe,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,OAAO,KAAK,EAAE,QAAQ,MAAM;;;;;;CAGpG,CAAC"}
+{"version":3,"file":"fondAuSurvol.d.ts","sourceRoot":"","sources":["../../../src/core/styleTamagui/fondAuSurvol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,SAAS;IAAE,eAAe,CAAC,EAAE,UAAU,CAAA;CAAE,EAAE,OAAO,KAAK,EAAE,QAAQ,UAAU;;;;;;CAG5G,CAAC"}

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.15";
+export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.17";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.15";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.17";

package/dist/stories/index.d.ts

@@ -4,6 +4,7 @@ export * as AppUpdateProviderStories from '../core/AppUpdateProvider/AppUpdatePr
 export * as BoxStory from '../core/Box/Box.stories';
 export * as CodeStory from '../core/Code/Code.stories';
 export * as GridStory from '../core/Grid/Grid.stories';
+export * as HeadingStory from '../core/Heading/Heading.stories';
 export * as Highlight from '../core/Highlight/Highlight.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as LottieStory from '../core/Lottie/Lottie.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}

package/dist/stories/index.js

@@ -5,6 +5,7 @@ export * as AppUpdateProviderStories from '../core/AppUpdateProvider/AppUpdatePr
 export * as BoxStory from '../core/Box/Box.stories';
 export * as CodeStory from '../core/Code/Code.stories';
 export * as GridStory from '../core/Grid/Grid.stories';
+export * as HeadingStory from '../core/Heading/Heading.stories';
 export * as Highlight from '../core/Highlight/Highlight.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as LottieStory from '../core/Lottie/Lottie.stories';

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

@@ -22,14 +22,14 @@ declare const _default: {
         accordionAfterLabel: {
             width: "100%";
             borderBottomWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         accordionItemTrigger: {
             borderWidth: number;
             padding: number;
         };
         accordionItemHeader: {
-            backgroundColor: "#FFFFFF";
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "pointer";
             display: "flex";
             flexDirection: "row";
@@ -44,7 +44,7 @@ declare const _default: {
             borderWidth: number;
         };
         accordionItemHeaderAlt: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "pointer";
             display: "flex";
             flexDirection: "row";
@@ -59,9 +59,9 @@ declare const _default: {
             borderWidth: number;
         };
         accordionItemHeaderOutline: {
-            backgroundColor: "#FFFFFF";
+            backgroundColor: import("@alveole/theme").ThemeColor;
             outlineWidth: number;
-            outlineColor: string;
+            outlineColor: import("@alveole/theme").ThemeColor;
             outlineStyle: "solid";
             cursor: "pointer";
             display: "flex";
@@ -77,7 +77,7 @@ declare const _default: {
             borderWidth: number;
         };
         accordionItemHeaderOpen: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         accordion: {
             width: "100%";
@@ -87,12 +87,12 @@ declare const _default: {
             borderColor: "white";
         };
         accordionDefault: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         accordionRounded: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             overflow: "hidden";
         };
     };

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

@@ -13,14 +13,14 @@ export declare const useStyles: () => {
     accordionAfterLabel: {
         width: "100%";
         borderBottomWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     accordionItemTrigger: {
         borderWidth: number;
         padding: number;
     };
     accordionItemHeader: {
-        backgroundColor: "#FFFFFF";
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "pointer";
         display: "flex";
         flexDirection: "row";
@@ -35,7 +35,7 @@ export declare const useStyles: () => {
         borderWidth: number;
     };
     accordionItemHeaderAlt: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "pointer";
         display: "flex";
         flexDirection: "row";
@@ -50,9 +50,9 @@ export declare const useStyles: () => {
         borderWidth: number;
     };
     accordionItemHeaderOutline: {
-        backgroundColor: "#FFFFFF";
+        backgroundColor: import("@alveole/theme").ThemeColor;
         outlineWidth: number;
-        outlineColor: string;
+        outlineColor: import("@alveole/theme").ThemeColor;
         outlineStyle: "solid";
         cursor: "pointer";
         display: "flex";
@@ -68,7 +68,7 @@ export declare const useStyles: () => {
         borderWidth: number;
     };
     accordionItemHeaderOpen: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     accordion: {
         width: "100%";
@@ -78,12 +78,12 @@ export declare const useStyles: () => {
         borderColor: "white";
     };
     accordionDefault: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     accordionRounded: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     };
 };