@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/core/Box/Box.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isSpacingKey, Spacings } from '@alveole/theme';
 import { styled, View as TamaguiView, } from '@tamagui/core';
 import React from 'react';
+import { versStyleTamagui } from '../styleTamagui/versStyleTamagui';
+import { resolveSpacing } from './resolveSpacing';
 const StyledView = styled(TamaguiView, { name: 'Box' });
 export const Box = React.forwardRef(function Box(props, ref) {
     const { tag, style, borderRadius, hoverStyle, mt, mb, mr, ml, m, pt, pb, pl, pr, p, gap, ...viewProps } = props;
@@ -12,21 +13,21 @@ export const Box = React.forwardRef(function Box(props, ref) {
         borderTopLeftRadius: borderRadius,
     };
     const margins = {
-        mt: isSpacingKey(mt) ? Spacings[mt] : mt,
-        mb: isSpacingKey(mb) ? Spacings[mb] : mb,
-        ml: isSpacingKey(ml) ? Spacings[ml] : ml,
-        mr: isSpacingKey(mr) ? Spacings[mr] : mr,
-        m: isSpacingKey(m) ? Spacings[m] : m,
+        mt: resolveSpacing(mt),
+        mb: resolveSpacing(mb),
+        ml: resolveSpacing(ml),
+        mr: resolveSpacing(mr),
+        m: resolveSpacing(m),
     };
     const paddings = {
-        pt: isSpacingKey(pt) ? Spacings[pt] : pt,
-        pb: isSpacingKey(pb) ? Spacings[pb] : pb,
-        pl: isSpacingKey(pl) ? Spacings[pl] : pl,
-        pr: isSpacingKey(pr) ? Spacings[pr] : pr,
-        p: isSpacingKey(p) ? Spacings[p] : p,
+        pt: resolveSpacing(pt),
+        pb: resolveSpacing(pb),
+        pl: resolveSpacing(pl),
+        pr: resolveSpacing(pr),
+        p: resolveSpacing(p),
     };
     const spacings = {
-        gap: isSpacingKey(gap) ? Spacings[gap] : gap,
+        gap: resolveSpacing(gap),
     };
-    return (_jsx(StyledView, { ref: ref, tag: tag ?? 'box', style: style, ...radius, hoverStyle: hoverStyle, ...viewProps, ...margins, ...paddings, ...spacings }));
+    return (_jsx(StyledView, { ref: ref, tag: tag ?? 'box', style: style, ...radius, hoverStyle: versStyleTamagui(hoverStyle), ...viewProps, ...margins, ...paddings, ...spacings }));
 });

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

@@ -6,7 +6,23 @@ declare const _default: {
     shortDescription: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & import("@tamagui/core").RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
         justify?: import("tamagui").ViewProps["justifyContent"];
-    } & import("./Box.types").BoxAdvancedStyle & {
+    } & 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;
+    } & {
         hoverStyle?: import("react").CSSProperties;
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => string;

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

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAInC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAInC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

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

@@ -1,9 +1,10 @@
 import { SpacingKey } from '@alveole/theme';
 import { ViewProps } from '@tamagui/core';
+import { SizeStyle } from '../../type/SizeStyle';
 export type BoxBaseStyle = Pick<ViewProps, 'display' | 'flex' | 'flexWrap' | 'flexDirection' | 'opacity' | 'overflow'> & {
     justify?: ViewProps['justifyContent'];
 };
-export type BoxAdvancedStyle = {
+export type BoxAdvancedStyle = SizeStyle & {
     p?: number | SpacingKey;
     pl?: number | SpacingKey;
     pr?: number | SpacingKey;
@@ -16,15 +17,9 @@ export type BoxAdvancedStyle = {
     mb?: number | `${string}%` | SpacingKey | 'auto';
     backgroundColor?: string;
     borderWidth?: number;
-    borderRadius?: number;
-    borderColor?: any;
+    borderRadius?: number | string;
+    borderColor?: string;
     gap?: number | SpacingKey;
-    width?: number | `${string}%`;
-    height?: number | `${string}%`;
-    minW?: number | `${string}%`;
-    maxW?: number | `${string}%`;
-    minH?: number | `${string}%`;
-    maxH?: number | `${string}%`;
 };
 export type BoxStyle = BoxBaseStyle & BoxAdvancedStyle;
 //# sourceMappingURL=Box.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAEzB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAEjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAEzB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAEjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}

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

@@ -0,0 +1,6 @@
+import { SpacingKey } from '@alveole/theme';
+type SpacingInput = number | SpacingKey | `${string}%` | 'auto' | undefined;
+type SpacingOutput = number | `${string}%` | 'auto' | undefined;
+export declare const resolveSpacing: (value: SpacingInput) => SpacingOutput;
+export {};
+//# sourceMappingURL=resolveSpacing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/Box/resolveSpacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAY,MAAM,gBAAgB,CAAC;AAEpE,KAAK,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5E,KAAK,aAAa,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY,KAAG,aAAgE,CAAC"}

package/dist/core/Box/resolveSpacing.js

@@ -0,0 +1,2 @@
+import { isSpacingKey, Spacings } from '@alveole/theme';
+export const resolveSpacing = (value) => (isSpacingKey(value) ? Spacings[value] : value);

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

@@ -6,7 +6,6 @@ declare const _default: {
     component: ({ children }: import("./Code").CodeProps) => import("react").JSX.Element;
     styleFn: () => {
         code: {
-            fontFamily: "monospace";
             color: string;
             backgroundColor: "rgba(135, 131, 120, 0.12)";
             paddingLeft: number;
@@ -14,6 +13,7 @@ declare const _default: {
             paddingTop: number;
             paddingBottom: number;
             borderRadius: import("@alveole/theme").Radius;
+            fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
         };
     };
 };

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { makeStyles } from '@alveole/theme';
+import { makeStyles, MonospaceFont } from '@alveole/theme';
 export const useStyles = makeStyles(({ color, radius }) => ({
     code: {
-        fontFamily: 'monospace',
+        ...MonospaceFont,
         color: color.light.text['default-error'],
         backgroundColor: 'rgba(135, 131, 120, 0.12)',
         paddingLeft: 4,

package/dist/core/Form/Form.js

@@ -5,5 +5,5 @@ import { useStyles } from './Form.styles';
 export const Form = (props) => {
     const { style, ...formProps } = props;
     const styles = useStyles();
-    return (_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsx(Box, { tag: "form", style: [styles.form, style], ...formProps }) }));
+    return (_jsx(TouchableWithoutFeedback, { accessible: false, onPress: Keyboard.dismiss, children: _jsx(Box, { tag: "form", style: [styles.form, style], ...formProps }) }));
 };

package/dist/{ui → core}/Grid/Grid.d.ts

@@ -1,6 +1,12 @@
-import { BoxAdvancedStyle, BoxProps } from '@alveole/components';
 import React from 'react';
+import { BoxAdvancedStyle, BoxProps } from '../Box';
 export declare const GridGapContext: React.Context<number>;
+/**
+ * Vrai dans une `Grid.Column`. La ligne étire ses colonnes à la hauteur de la plus haute :
+ * les composants qui habillent une cellule (`A`, `Card`) la remplissent, pour que les cartes
+ * d'une même ligne aient toutes la même hauteur.
+ */
+export declare const GridColumnContext: React.Context<boolean>;
 type GridProps = Pick<BoxProps, 'children' | 'gap'> & BoxAdvancedStyle;
 type GridColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export type GridColumnProps = Pick<BoxProps, 'children' | 'style'> & {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,gBAAgB,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGzD,eAAO,MAAM,cAAc,uBAAiC,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,wBAAsC,CAAC;AAErE,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,gBAAgB,CAAC;AACvE,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACnE,IAAI,EAAE,cAAc,GAAG;QAAE,MAAM,EAAE,cAAc,CAAC;QAAC,OAAO,EAAE,cAAc,CAAC;QAAC,MAAM,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;CACrG,GAAG,gBAAgB,CAAC;AAkErB,eAAO,MAAM,IAAI,WAhEa,SAAS;oBA4BZ,eAAe;CAsCxC,CAAC"}

package/dist/{ui → core}/Grid/Grid.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@alveole/components';
 import { isSpacingKey, Spacings, useTheme } from '@alveole/theme';
 import React from 'react';
+import { Box } from '../Box';
 import { useStyles } from './Grid.styles';
 export const GridGapContext = React.createContext(0);
+/**
+ * Vrai dans une `Grid.Column`. La ligne étire ses colonnes à la hauteur de la plus haute :
+ * les composants qui habillent une cellule (`A`, `Card`) la remplissent, pour que les cartes
+ * d'une même ligne aient toutes la même hauteur.
+ */
+export const GridColumnContext = React.createContext(false);
 const GridContainer = (props) => {
     const { children, gap = 0, ...advancedStyles } = props;
     const styles = useStyles();
@@ -25,15 +31,15 @@ const GridColumn = (props) => {
     const mobileSize = typeof size === 'number' ? size : size.mobile;
     const tabletSize = typeof size === 'number' ? size : (size.tablet ?? size.desktop);
     const widthPercent = `${(isVariant('mobile') ? mobileSize / 12 : isVariant('tablet') ? tabletSize / 12 : desktopSize / 12) * 100}%`;
-    return (_jsx(Box, { tag: "grid-column", style: [
-            {
-                width: widthPercent,
-                paddingLeft: gap / 2,
-                paddingRight: gap / 2,
-                paddingBottom: gap,
-            },
-            style,
-        ], ...advancedStyles, children: children }));
+    return (_jsx(GridColumnContext.Provider, { value: true, children: _jsx(Box, { tag: "grid-column", style: [
+                {
+                    width: widthPercent,
+                    paddingLeft: gap / 2,
+                    paddingRight: gap / 2,
+                    paddingBottom: gap,
+                },
+                style,
+            ], ...advancedStyles, children: children }) }));
 };
 export const Grid = Object.assign(GridContainer, {
     Column: GridColumn,

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

@@ -0,0 +1,47 @@
+declare const _default: {
+    title: string;
+    tags: "core"[];
+    experimental: false;
+    description: string;
+    shortDescription: string;
+    component: ((props: Pick<import("..").BoxProps, "children" | "gap"> & import("../..").SizeStyle & {
+        p?: number | import("@alveole/theme").SpacingKey;
+        pl?: number | import("@alveole/theme").SpacingKey;
+        pr?: number | import("@alveole/theme").SpacingKey;
+        pt?: number | import("@alveole/theme").SpacingKey;
+        pb?: number | import("@alveole/theme").SpacingKey;
+        m?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
+        ml?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
+        mr?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
+        mt?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
+        mb?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
+        backgroundColor?: string;
+        borderWidth?: number;
+        borderRadius?: number | string;
+        borderColor?: string;
+        gap?: number | import("@alveole/theme").SpacingKey;
+    }) => import("react").JSX.Element) & {
+        Column: (props: import("./Grid").GridColumnProps) => import("react").JSX.Element;
+    };
+    styleFn: () => {
+        grid: {
+            flexDirection: "column";
+        };
+        container: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+        };
+    };
+};
+export default _default;
+export declare const TwoEqualColumns: () => import("react").JSX.Element;
+export declare const AsymmetricColumns: () => import("react").JSX.Element;
+export declare const ThreeColumns: () => import("react").JSX.Element;
+export declare const FourColumns: () => import("react").JSX.Element;
+export declare const FullWidthColumn: () => import("react").JSX.Element;
+export declare const ResponsiveColumns: () => import("react").JSX.Element;
+export declare const ResponsiveThreeColumns: () => import("react").JSX.Element;
+export declare const WithLargeGap: () => import("react").JSX.Element;
+export declare const EqualHeightCards: () => import("react").JSX.Element;
+export * as Sources from './Grid.stories.sources';
+//# sourceMappingURL=Grid.stories.d.ts.map

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

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

package/dist/{ui → core}/Grid/Grid.stories.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Button } from '../../ui/Button';
+import { Card } from '../../ui/Card';
+import { A } from '../A';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
 import { Grid } from './Grid';
 import { useStyles } from './Grid.styles';
 export default {
     title: 'Grid',
-    tags: ['ui'],
+    tags: ['core'],
     experimental: false,
     description: 'Grille basique sur 12 colonnes (mobile et sur web). Composant de type Box à utiliser avec `<Grid.Column>`.',
     shortDescription: 'Grille basique sur 12 colonnes (mobile et web). À utiliser avec Grid.Column.',
@@ -22,4 +26,5 @@ export const FullWidthColumn = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid
 export const ResponsiveColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
 export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
 export const WithLargeGap = () => (_jsxs(Grid, { gap: 24, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
+export const EqualHeightCards = () => (_jsxs(Grid, { gap: 16, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre court", sousTitre: "Une ligne" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Un titre bien plus long qui passe sur deux lignes", sousTitre: "Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(A, { href: "/components/Card", children: _jsx(Card, { children: _jsx(Card.Header, { titre: "Carte cliquable" }) }) }) })] }));
 export * as Sources from './Grid.stories.sources';

package/dist/{ui → core}/Grid/Grid.stories.sources.d.ts

@@ -6,6 +6,7 @@ export declare const FullWidthColumn: () => string;
 export declare const ResponsiveColumns: () => string;
 export declare const ResponsiveThreeColumns: () => string;
 export declare const WithLargeGap: () => string;
+export declare const EqualHeightCards: () => string;
 export declare const storySources: {
     readonly TwoEqualColumns: () => string;
     readonly AsymmetricColumns: () => string;
@@ -15,6 +16,7 @@ export declare const storySources: {
     readonly ResponsiveColumns: () => string;
     readonly ResponsiveThreeColumns: () => string;
     readonly WithLargeGap: () => string;
+    readonly EqualHeightCards: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Grid.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA0P,CAAC;AAEvR,eAAO,MAAM,iBAAiB,cAAgR,CAAC;AAE/S,eAAO,MAAM,YAAY,cAA+V,CAAC;AAEzX,eAAO,MAAM,WAAW,cAAka,CAAC;AAE3b,eAAO,MAAM,eAAe,cAAqX,CAAC;AAElZ,eAAO,MAAM,iBAAiB,cAAwV,CAAC;AAEvX,eAAO,MAAM,sBAAsB,cAAyhB,CAAC;AAE7jB,eAAO,MAAM,YAAY,cAAoV,CAAC;AAE9W,eAAO,MAAM,gBAAgB,cAAyhC,CAAC;AAEvjC,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/{ui → core}/Grid/Grid.stories.sources.js

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

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

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

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

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

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

@@ -1,8 +1,14 @@
 import React, { CSSProperties } from 'react';
-import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import type { SyntaxHighlighterProps } from 'react-syntax-highlighter';
 export type HighlightProps = Pick<SyntaxHighlighterProps, 'children'> & {
     language: 'json' | 'typescript' | 'tsx' | 'ruby' | 'bash' | 'plaintext' | 'html';
     style?: CSSProperties;
+    /**
+     * `standalone` : le bloc se délimite lui-même, quelle que soit la surface derrière lui.
+     * `embedded` : il est composé dans un cadre qui le délimite déjà, et renonce au sien pour
+     * ne pas emboîter deux bordures. Voir docs/adr/0011.
+     */
+    variant?: 'standalone' | 'embedded';
 };
-export declare const Highlight: (props: HighlightProps) => React.JSX.Element;
+export declare const Highlight: ({ children, language, style, variant }: HighlightProps) => React.JSX.Element;
 //# sourceMappingURL=Highlight.d.ts.map

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

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

package/dist/core/Highlight/Highlight.js

@@ -1,53 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import CodeHighlighter from 'react-native-code-highlighter';
-import { Prism } from 'react-syntax-highlighter';
-import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+// Le type est importé en `import type` : il est effacé à l'exécution, donc l'index du
+// paquet, qui charge aussi toute la moitié highlight.js, n'est jamais évalué.
+import { CustomPalette, focusRingProps } from '@alveole/theme';
+import { ghcolors } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useStyles } from './Highlight.styles';
-const BASE_STYLE_KEY = 'base';
-const getNativeStyle = (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 (style.fontWeight != null)
-        nativeStyle.fontWeight = style.fontWeight;
-    if (style.fontStyle != null)
-        nativeStyle.fontStyle = style.fontStyle;
-    return nativeStyle;
-};
-const getSyntaxStyleKeys = (selector) => {
-    if (selector.includes('pre[') || selector.includes('code[')) {
-        return [BASE_STYLE_KEY];
-    }
-    return selector
-        .split(/[\s>,]+/)
-        .flatMap(part => part
-        .replace(/^\.token\./, '')
-        .replace(/^\./, '')
-        .split('.'))
-        .map(part => part.replace(/^token-/, ''))
-        .filter(Boolean);
-};
-const getNativeSyntaxStyle = (syntaxStyle) => {
-    return Object.entries(syntaxStyle).reduce((acc, [selector, tokenStyle]) => {
-        for (const key of getSyntaxStyleKeys(selector)) {
-            acc[key] = { ...acc[key], ...getNativeStyle(tokenStyle) };
-        }
-        return acc;
-    }, {});
-};
+import Prism from './Highlight.syntax';
+import { feuilleDeColoration, styleDeLaSurface, styleDuTexteDeBase, styleNatif } from './Highlight.theme';
 const trimEdgeNewlines = (value) => value.replace(/^\n+|\n+$/g, '');
-const PrismCodeHighlighter = ({ children, language, style }) => {
+export const Highlight = ({ children, language, style, variant = 'standalone' }) => {
     const styles = useStyles();
-    const stylesheet = React.useMemo(() => getNativeSyntaxStyle(vscDarkPlus), []);
-    const customStyle = React.useMemo(() => getNativeStyle(style), [style]);
-    const baseTextStyle = StyleSheet.flatten([{ color: stylesheet[BASE_STYLE_KEY]?.color }, stylesheet[BASE_STYLE_KEY]]);
+    // La valeur, pas la variable CSS que le thème rend sur le web : le calcul de contraste a
+    // besoin d'une couleur lisible, et `useTheme` renvoie ici `var(--background-alt-grey)`.
+    const fondDuBloc = CustomPalette.light.background['alt-grey'];
+    const stylesheet = React.useMemo(() => feuilleDeColoration(ghcolors, fondDuBloc), [fondDuBloc]);
+    const customStyle = React.useMemo(() => styleNatif(style), [style]);
+    const baseTextStyle = styleDuTexteDeBase(stylesheet);
     const getStylesForNode = (node) => {
         const classes = node.properties?.className ?? [];
         return classes.map(className => stylesheet[String(className)]).filter(Boolean);
@@ -63,14 +32,12 @@ const PrismCodeHighlighter = ({ children, language, style }) => {
         }
         return acc;
     }, []);
-    const renderer = ({ rows }) => (_jsx(ScrollView, { horizontal: true, contentContainerStyle: [styles.highlight, stylesheet[BASE_STYLE_KEY], customStyle], children: _jsx(View, { onStartShouldSetResponder: () => true, children: renderNode(rows) }) }));
+    const renderer = ({ rows }) => (_jsx(ScrollView, { horizontal: true, focusable: true, ...focusRingProps(), 
+        // `styles.highlight` pose `overflow: scroll`, ce qui ferait défiler le conteneur de
+        // contenu en doublon du `ScrollView` qui l'entoure. C'est ce doublon intérieur qu'axe
+        // signalait : il défile sans pouvoir recevoir le focus, que porte l'extérieur.
+        // Le thème de coloration ne fournit que les couleurs de jetons : la surface vient du
+        // design system, donc `styles.highlight` est posé après la base du thème.
+        contentContainerStyle: styleDeLaSurface(styles, stylesheet, { variant, styleFourni: customStyle }), children: _jsx(View, { onStartShouldSetResponder: () => true, children: renderNode(rows) }) }));
     return (_jsx(Prism, { CodeTag: View, PreTag: View, customStyle: {}, language: language, renderer: renderer, style: {}, wrapLongLines: true, children: children }));
 };
-export const Highlight = (props) => {
-    const { children, language, style } = props;
-    const styles = useStyles();
-    if (language === 'tsx') {
-        return _jsx(PrismCodeHighlighter, { ...props });
-    }
-    return (_jsx(CodeHighlighter, { hljsStyle: { ...monokai }, customStyle: { ...styles.highlight, ...style, width: '100%', padding: 0 }, containerStyle: { ...styles.highlight }, language: language, wrapLongLines: true, children: children }));
-};

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

@@ -4,16 +4,25 @@ declare const _default: {
     experimental: true;
     shortDescription: string;
     description: string;
-    component: (props: import("./Highlight").HighlightProps) => import("react").JSX.Element;
+    component: ({ children, language, style, variant }: import("./Highlight").HighlightProps) => import("react").JSX.Element;
     styleFn: () => {
         highlightContainer: {
             width: "100%";
         };
         highlight: {
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
             overflow: "scroll";
-            borderRadius: number;
-            padding: number;
+            padding: import("@alveole/theme").Spacing;
             width: "100%";
+            backgroundColor: string;
+        };
+        highlightEmbedded: {
+            overflow: "scroll";
+            padding: import("@alveole/theme").Spacing;
+            width: "100%";
+            backgroundColor: string;
         };
     };
 };

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

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

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

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

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

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

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('100')}>Bonjour</Typography>`}</Highlight>\n);";
+export const HighlightTSX = () => "export const HighlightTSX = () => (\n  <Highlight language=\"tsx\">{`<Typography tag=\"span\" p={spacing('2W')}>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

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