@alveole/components 1.0.1 → 1.1.1

package/dist/ui/DurationInput/DurationInput.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DurationInput/DurationInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"06:15\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"01:30\" hint=\"Temps passé sur le terrain\" />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Erreur\" value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Succès\" value=\"06:15\" success=\"Enregistré\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Désactivé\" value=\"06:15\" disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

package/dist/ui/DurationInput/index.d.ts

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

package/dist/ui/DurationInput/index.d.ts.map

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

package/dist/ui/DurationInput/index.js

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

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

@@ -11,18 +11,18 @@ declare const _default: {
             flexDirection: "column";
             alignItems: "center";
             justifyContent: "center";
-            gap: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            gap: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             textAlign: "center";
             height: "100%" | undefined;
             width: "100%";
         };
         contenu: {
             display: "flex";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             alignItems: "center";
             textAlign: "center";
             flex: number | undefined;
@@ -36,12 +36,12 @@ declare const _default: {
             color: string;
             backgroundColor: string;
             borderRadius: import("@alveole/theme").Radius;
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
         };
         messageEtDescription: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             width: "100%";
             justifyContent: "center";
         };
@@ -67,7 +67,7 @@ declare const _default: {
             width: "100%" | undefined;
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
     };
 };

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

@@ -4,18 +4,18 @@ export declare const useStyles: () => {
         flexDirection: "column";
         alignItems: "center";
         justifyContent: "center";
-        gap: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         textAlign: "center";
         height: "100%" | undefined;
         width: "100%";
     };
     contenu: {
         display: "flex";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "center";
         textAlign: "center";
         flex: number | undefined;
@@ -29,12 +29,12 @@ export declare const useStyles: () => {
         color: string;
         backgroundColor: string;
         borderRadius: import("@alveole/theme").Radius;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     messageEtDescription: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
         justifyContent: "center";
     };
@@ -60,7 +60,7 @@ export declare const useStyles: () => {
         width: "100%" | undefined;
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
 };
 //# sourceMappingURL=EmptyState.styles.d.ts.map

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

@@ -12,7 +12,7 @@ declare const _default: {
         formControl: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             width: "100%";
         };
         labelContainer: {
@@ -53,7 +53,7 @@ declare const _default: {
         inputInner: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             padding: number;
             borderRadius: number;
             borderWidth: number;
@@ -70,10 +70,10 @@ declare const _default: {
             color: string;
             fontFamily: string;
             fontSize: 14;
-            marginTop: import("@alveole/theme").Spacing;
-            marginBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            marginTop: string | number;
+            marginBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             minHeight: number | undefined;
             flex: number;
         };
@@ -132,16 +132,16 @@ declare const _default: {
             backgroundColor: "#FFFFFF";
             borderTopLeftRadius: number;
             borderTopRightRadius: number;
-            padding: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         modalHeader: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
             alignItems: "center";
-            marginBottom: import("@alveole/theme").Spacing;
+            marginBottom: string | number;
         };
         modalHeaderLeft: {
             display: "flex";
@@ -154,7 +154,7 @@ declare const _default: {
             alignItems: "center";
         };
         modalFooter: {
-            marginTop: import("@alveole/theme").Spacing;
+            marginTop: string | number;
         };
         modalInputContainer: {
             borderRadius: number;
@@ -165,10 +165,10 @@ declare const _default: {
         };
         modalInput: {
             color: string;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
             minHeight: number;
             flex: number;
             fontSize: 14;
@@ -180,9 +180,9 @@ declare const _default: {
         caption: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             alignItems: "flex-start";
-            marginTop: import("@alveole/theme").Spacing;
+            marginTop: string | number;
             width: "100%";
         };
         captionIcon: {

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     formControl: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
     };
     labelContainer: {
@@ -43,7 +43,7 @@ export declare const useStyles: () => {
     inputInner: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         padding: number;
         borderRadius: number;
         borderWidth: number;
@@ -60,10 +60,10 @@ export declare const useStyles: () => {
         color: string;
         fontFamily: string;
         fontSize: 14;
-        marginTop: import("@alveole/theme").Spacing;
-        marginBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        marginTop: string | number;
+        marginBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         minHeight: number | undefined;
         flex: number;
     };
@@ -122,16 +122,16 @@ export declare const useStyles: () => {
         backgroundColor: "#FFFFFF";
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        padding: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        padding: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     modalHeader: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        marginBottom: import("@alveole/theme").Spacing;
+        marginBottom: string | number;
     };
     modalHeaderLeft: {
         display: "flex";
@@ -144,7 +144,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     modalFooter: {
-        marginTop: import("@alveole/theme").Spacing;
+        marginTop: string | number;
     };
     modalInputContainer: {
         borderRadius: number;
@@ -155,10 +155,10 @@ export declare const useStyles: () => {
     };
     modalInput: {
         color: string;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         minHeight: number;
         flex: number;
         fontSize: 14;
@@ -170,9 +170,9 @@ export declare const useStyles: () => {
     caption: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "flex-start";
-        marginTop: import("@alveole/theme").Spacing;
+        marginTop: string | number;
         width: "100%";
     };
     captionIcon: {

package/dist/ui/FormControl/FormControlFileInput.styles.d.ts

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     fileInputContainer: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "center";
     };
     fileInputButton: {
@@ -13,10 +13,10 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     fileInputButtonHovered: {
         backgroundColor: string;

package/dist/ui/FormControl/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,IAAI,oBAAoB,EACjC,cAAc,IAAI,yBAAyB,EAC5C,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS;eART,OAAO;qBACD,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;gBAClB,OAAO;uBACA,MAAM;oBACT,MAAM,IAAI;8CAsN1B,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,IAAI,oBAAoB,EACjC,cAAc,IAAI,yBAAyB,EAG5C,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS;eART,OAAO;qBACD,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;gBAClB,OAAO;uBACA,MAAM;oBACT,MAAM,IAAI;8CA0N1B,CAAC"}

package/dist/ui/Grid/Grid.d.ts

@@ -0,0 +1,17 @@
+import { BoxAdvancedStyle, BoxProps } from '@alveole/components';
+import React from 'react';
+export declare const GridGapContext: React.Context<number>;
+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'> & {
+    size: GridColumnSize | {
+        mobile: GridColumnSize;
+        desktop: GridColumnSize;
+        tablet?: GridColumnSize;
+    };
+} & BoxAdvancedStyle;
+export declare const Grid: ((props: GridProps) => React.JSX.Element) & {
+    Column: (props: GridColumnProps) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,gBAAgB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,cAAc,uBAAiC,CAAC;AAE7D,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;AAgErB,eAAO,MAAM,IAAI,WA9Da,SAAS;oBA4BZ,eAAe;CAoCxC,CAAC"}

package/dist/ui/Grid/Grid.js

@@ -0,0 +1,40 @@
+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 { useStyles } from './Grid.styles';
+export const GridGapContext = React.createContext(0);
+const GridContainer = (props) => {
+    const { children, gap = 0, ...advancedStyles } = props;
+    const styles = useStyles();
+    const spacing = isSpacingKey(gap) ? Spacings[gap] : gap;
+    return (_jsx(GridGapContext.Provider, { value: spacing, children: _jsx(Box, { tag: "grid", style: styles.grid, ...advancedStyles, children: _jsx(Box, { tag: "grid-container", style: [
+                    styles.container,
+                    {
+                        marginLeft: -spacing / 2,
+                        marginRight: -spacing / 2,
+                        marginBottom: -spacing,
+                    },
+                ], children: children }) }) }));
+};
+const GridColumn = (props) => {
+    const { children, style, size, ...advancedStyles } = props;
+    const { isVariant } = useTheme();
+    const gap = React.useContext(GridGapContext);
+    const desktopSize = typeof size === 'number' ? size : size.desktop;
+    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 }));
+};
+export const Grid = Object.assign(GridContainer, {
+    Column: GridColumn,
+});

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

@@ -0,0 +1,30 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    shortDescription: string;
+    component: ((props: Pick<import("../..").BoxProps, "children" | "gap"> & import("../..").BoxAdvancedStyle) => 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 * as Sources from './Grid.stories.sources';
+//# sourceMappingURL=Grid.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAKA,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,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Grid/Grid.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { Grid } from './Grid';
+import { useStyles } from './Grid.styles';
+export default {
+    title: 'Grid',
+    tags: ['ui'],
+    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.',
+    component: Grid,
+    styleFn: useStyles,
+};
+const colColor = '#88b2bd';
+const colColorAlt = '#b9c47f';
+const Col = ({ color = colColor, label }) => (_jsx(Box, { backgroundColor: color, p: '050', style: { borderRadius: 4 }, children: _jsx(Typography, { children: label }) }));
+export const TwoEqualColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) })] }));
+export const AsymmetricColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 8, children: _jsx(Col, { color: colColorAlt, label: "8 colonnes" }) })] }));
+export const ThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) })] }));
+export const FourColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) })] }));
+export const FullWidthColumn = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 12, children: _jsx(Col, { label: "12 colonnes (pleine largeur)" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { color: colColorAlt, label: "6 colonnes" }) })] }));
+export const ResponsiveColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
+export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
+export const WithLargeGap = () => (_jsxs(Grid, { gap: 24, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
+export * as Sources from './Grid.stories.sources';

package/dist/ui/Grid/Grid.stories.sources.d.ts

@@ -0,0 +1,20 @@
+export declare const TwoEqualColumns: () => string;
+export declare const AsymmetricColumns: () => string;
+export declare const ThreeColumns: () => string;
+export declare const FourColumns: () => string;
+export declare const FullWidthColumn: () => string;
+export declare const ResponsiveColumns: () => string;
+export declare const ResponsiveThreeColumns: () => string;
+export declare const WithLargeGap: () => string;
+export declare const storySources: {
+    readonly TwoEqualColumns: () => string;
+    readonly AsymmetricColumns: () => string;
+    readonly ThreeColumns: () => string;
+    readonly FourColumns: () => string;
+    readonly FullWidthColumn: () => string;
+    readonly ResponsiveColumns: () => string;
+    readonly ResponsiveThreeColumns: () => string;
+    readonly WithLargeGap: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Grid.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/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,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Grid/Grid.stories.sources.js

@@ -0,0 +1,20 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Grid/Grid.stories.tsx
+export const TwoEqualColumns = () => "export const TwoEqualColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const AsymmetricColumns = () => "export const AsymmetricColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={8}>\n      <Col color={colColorAlt} label=\"8 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ThreeColumns = () => "export const ThreeColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"4 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"4 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const FourColumns = () => "export const FourColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col label=\"3\" />\n    </Grid.Column>\n    <Grid.Column size={3}>\n      <Col color={colColorAlt} label=\"3\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const FullWidthColumn = () => "export const FullWidthColumn = () => (\n  <Grid gap={8}>\n    <Grid.Column size={12}>\n      <Col label=\"12 colonnes (pleine largeur)\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col label=\"6 colonnes\" />\n    </Grid.Column>\n    <Grid.Column size={6}>\n      <Col color={colColorAlt} label=\"6 colonnes\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ResponsiveColumns = () => "export const ResponsiveColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, desktop: 6 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const ResponsiveThreeColumns = () => "export const ResponsiveThreeColumns = () => (\n  <Grid gap={8}>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 6, desktop: 4 }}>\n      <Col color={colColorAlt} label=\"12 mobile / 6 tablet / 4 desktop\" />\n    </Grid.Column>\n    <Grid.Column size={{ mobile: 12, tablet: 12, desktop: 4 }}>\n      <Col label=\"12 mobile / 12 tablet / 4 desktop\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const WithLargeGap = () => "export const WithLargeGap = () => (\n  <Grid gap={24}>\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col color={colColorAlt} label=\"gap 24\" />\n    </Grid.Column>\n    <Grid.Column size={4}>\n      <Col label=\"gap 24\" />\n    </Grid.Column>\n  </Grid>\n);";
+export const storySources = {
+    TwoEqualColumns,
+    AsymmetricColumns,
+    ThreeColumns,
+    FourColumns,
+    FullWidthColumn,
+    ResponsiveColumns,
+    ResponsiveThreeColumns,
+    WithLargeGap,
+};

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

@@ -0,0 +1,10 @@
+export declare const useStyles: () => {
+    grid: {
+        flexDirection: "column";
+    };
+    container: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+    };
+};
+//# sourceMappingURL=Grid.styles.d.ts.map

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

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

package/dist/ui/Grid/Grid.styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    grid: {
+        flexDirection: 'column',
+    },
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+}));

package/dist/ui/Grid/index.d.ts

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

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

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

package/dist/ui/Grid/index.js

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

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

@@ -48,17 +48,17 @@ declare const _default: {
             flexDirection: "row";
             alignItems: "center";
             justifyContent: "space-between";
-            gap: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            gap: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         identity: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         titleText: {
             color: string;

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

@@ -40,17 +40,17 @@ export declare const useStyles: () => {
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";
-        gap: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     identity: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     titleText: {
         color: string;

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

@@ -7,7 +7,7 @@ declare const _default: {
     styleFn: () => {
         inputHeading: {
             display: "flex";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             flexDirection: "column";
         };
     };

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

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     inputHeading: {
         display: "flex";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         flexDirection: "column";
     };
 };