@alveole/components 0.36.2 → 0.37.3

package/dist/ui/ResourceList/ResourceListDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceListDivider.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceListDivider.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,+CAI/B,CAAC"}
+{"version":3,"file":"ResourceListDivider.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceListDivider.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,mCAI/B,CAAC"}

package/dist/ui/Sidebar/Sidebar.d.ts

@@ -7,5 +7,5 @@ export type SidebarProps = React.PropsWithChildren & {
     logo: React.ReactNode;
     footer?: React.ReactNode;
 };
-export declare const Sidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: (props: SidebarProps) => React.JSX.Element;
 //# sourceMappingURL=Sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuCF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CAI1C,CAAC"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuCF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBAI1C,CAAC"}

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

@@ -1,10 +1,10 @@
 declare const _default: {
     title: string;
-    tags: "Composant"[];
+    tags: "ui"[];
     experimental: false;
     figmaURL: string;
     description: string;
-    component: (props: import("./Sidebar").SidebarProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import("./Sidebar").SidebarProps) => import("react").JSX.Element;
     styleFn: () => {
         sidebar: {
             backgroundColor: "#FFFFFF";
@@ -175,6 +175,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const ExampleUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleUsage: () => import("react").JSX.Element;
 export * as Sources from './Sidebar.stories.sources';
 //# sourceMappingURL=Sidebar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAgBlB,eAAO,MAAM,YAAY,+CAA+C,CAAC;AAEzE,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAgBlB,eAAO,MAAM,YAAY,mCAA+C,CAAC;AAEzE,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.js

@@ -4,7 +4,7 @@ import { Sidebar } from './Sidebar';
 import { useStyles } from './Sidebar.styles';
 export default {
     title: 'Sidebar',
-    tags: ['Composant'],
+    tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1328-725',
     description: 'SideNav est un composant de navigation primaire qui permet d’accéder aux principales sections d’une application. Navigation coté droit, se transformant en menu burger sur mobile. Uitliser <SidebarItem> et <SidebarGroup>.',

package/dist/ui/Sidebar/SidebarFooter.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export type SidebarFooterProps = React.PropsWithChildren;
-export declare const SidebarFooter: (props: SidebarFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarFooter: (props: SidebarFooterProps) => React.JSX.Element;
 //# sourceMappingURL=SidebarFooter.d.ts.map

package/dist/ui/Sidebar/SidebarFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarFooter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAYtD,CAAC"}
+{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarFooter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAYtD,CAAC"}

package/dist/ui/Sidebar/SidebarGroup.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export type SidebarGroupProps = React.PropsWithChildren & {
     title: string;
 };
-export declare const SidebarGroup: (props: SidebarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarGroup: (props: SidebarGroupProps) => React.JSX.Element;
 //# sourceMappingURL=SidebarGroup.d.ts.map

package/dist/ui/Sidebar/SidebarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAIpD,CAAC"}
+{"version":3,"file":"SidebarGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAIpD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.d.ts

@@ -4,5 +4,5 @@ export type SidebarHeaderProps = {
     controller?: SidebarController;
     logo: React.ReactNode;
 };
-export declare const SidebarHeader: (props: SidebarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarHeader: (props: SidebarHeaderProps) => React.JSX.Element;
 //# sourceMappingURL=SidebarHeader.d.ts.map

package/dist/ui/Sidebar/SidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAiCF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAKtD,CAAC"}
+{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAiCF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AProps } from '../../core';
 import { LucideIconProps } from '../LucideIcon';
 export type SidebarItemNavigable = {
@@ -6,7 +7,7 @@ export type SidebarItemNavigable = {
     icon?: LucideIconProps['name'];
     href: AProps['href'];
     direction?: AProps['direction'];
-    routeName: string;
+    routeName?: string;
 };
 export type SidebarItemPressable = {
     pressable: true;
@@ -15,5 +16,5 @@ export type SidebarItemPressable = {
     onPress: () => void;
 };
 export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;
-export declare const SidebarItem: (props: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarItem: (props: SidebarItemProps) => React.JSX.Element;
 //# sourceMappingURL=SidebarItem.d.ts.map

package/dist/ui/Sidebar/SidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAK,MAAM,EAAmB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AA4G3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAIlD,CAAC"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAK,MAAM,EAAmB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AA0G3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}

package/dist/ui/Sidebar/SidebarItem.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
-import { useRoute } from '@react-navigation/native';
+import { usePathname } from 'expo-router';
 import React from 'react';
 import { A, Box, Typography } from '../../core';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Sidebar.styles';
 const SidebarItemDesktop = (props) => {
     const { title, icon } = props;
-    const route = useRoute();
+    const pathname = usePathname();
     const styles = useStyles();
-    const currentRouteName = route.name;
-    const isCurrentPage = !props.pressable && currentRouteName === props.routeName;
+    const isCurrentPage = !props.pressable && pathname === props.href;
     const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedDesktop : {};
     const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedDesktop : {};
     const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
@@ -25,10 +24,9 @@ const SidebarItemDesktop = (props) => {
 };
 const SidebarItemMobile = (props) => {
     const { title, icon } = props;
-    const route = useRoute();
+    const pathname = usePathname();
     const styles = useStyles();
-    const currentRouteName = route.name;
-    const isCurrentPage = !props.pressable && currentRouteName === props.routeName;
+    const isCurrentPage = !props.pressable && pathname === props.href;
     const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedMobile : {};
     const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedMobile : {};
     const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;

package/dist/ui/Signature/Signature.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { BoxProps } from '../../core/Box';
+export type SignatureProps = Omit<BoxProps, 'children'> & {
+    height: number;
+    date?: string | Date;
+    dateLabel?: string;
+    clearButtonLabel?: string;
+    onChange: (value: string | null) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+};
+export declare const Signature: (props: SignatureProps) => React.JSX.Element;
+//# sourceMappingURL=Signature.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA8E9C,CAAC"}

package/dist/ui/Signature/Signature.js

@@ -0,0 +1,55 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import { useTheme } from '@alveole/theme';
+import * as React from 'react';
+import SignatureCanvas from 'react-native-signature-canvas';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { useStyles } from './Signature.styles';
+export const Signature = (props) => {
+    const { height, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, onBegin, onEnd } = props;
+    const { color, spacing } = useTheme();
+    const styles = useStyles();
+    const ref = React.useRef(null);
+    const readTimeoutRef = React.useRef(null);
+    const handleOk = (signature) => {
+        onChange(signature);
+    };
+    const handleEnd = () => {
+        if (readTimeoutRef.current)
+            clearTimeout(readTimeoutRef.current);
+        readTimeoutRef.current = setTimeout(() => {
+            ref.current?.readSignature();
+            readTimeoutRef.current = null;
+        }, 100);
+    };
+    const handleClear = () => {
+        if (readTimeoutRef.current) {
+            clearTimeout(readTimeoutRef.current);
+            readTimeoutRef.current = null;
+        }
+        onChange(null);
+    };
+    React.useEffect(() => {
+        return () => {
+            if (readTimeoutRef.current)
+                clearTimeout(readTimeoutRef.current);
+        };
+    }, []);
+    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
+    const webviewHeightWithBorders = height + spacing('200') + spacing('100') + 3;
+    const webviewStyle = `
+    .m-signature-pad {
+      box-shadow: none;
+      border-radius: ${spacing('075')}px;
+      border-color: ${color.border['default-grey']};
+      border-width: 2px;
+      height: ${height}px;
+    }
+    .m-signature-pad--body {border: none; overflow: hidden; border-radius: ${spacing('075')}px}
+    .m-signature-pad--footer {display: none; margin: 0px;}
+    .button, .description {display: none;}
+  `;
+    return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { size: "xs", title: clearButtonLabel, variant: "tertiary", onPress: () => ref.current?.clearSignature() })] }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: webviewStyle }) })] }));
+};

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    component: (props: import("./Signature").SignatureProps) => React.JSX.Element;
+    styleFn: () => {
+        container: {
+            width: "100%";
+            display: "flex";
+            flexDirection: "column";
+        };
+        pen: {
+            color: "#373A3F";
+            backgroundColor: "#FFFFFF";
+        };
+        signatureWeb: {
+            borderColor: "#DEE3EC";
+            borderWidth: number;
+            borderRadius: import("@alveole/theme").Spacing;
+        };
+        headerSignature: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        date: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.JSX.Element;
+export declare const CustomLabels: () => React.JSX.Element;
+export * as Sources from './Signature.stories.sources';
+//# sourceMappingURL=Signature.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAgBnB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAgBxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/Signature/Signature.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box, Image, Typography } from '../../';
+import { Signature } from './Signature';
+import { useStyles } from './Signature.styles';
+export default {
+    title: 'Signature',
+    tags: ['ui'],
+    experimental: true,
+    description: 'Composant de signature par le doigt ou la souris. Différent entre web et mobile. La hauteur doit être fixe.',
+    component: Signature,
+    styleFn: useStyles,
+};
+export const Example = () => {
+    const containerHeight = 100;
+    const [value, setValue] = React.useState(null);
+    return (_jsxs(Box, { width: '100%', children: [_jsx(Signature, { height: containerHeight, onChange: setValue }), value && (_jsxs(_Fragment, { children: [_jsx(Typography, { fontSize: 24, children: "Signature captur\u00E9e :" }), _jsx(Image, { contentFit: "contain", height: containerHeight, width: "100%", source: value })] }))] }));
+};
+export const CustomLabels = () => {
+    const containerHeight = 100;
+    const [value, setValue] = React.useState(null);
+    return (_jsxs(Box, { width: '100%', children: [_jsx(Signature, { height: containerHeight, onChange: setValue, dateLabel: "Date :", clearButtonLabel: "Clear" }), value && (_jsxs(_Fragment, { children: [_jsx(Typography, { fontSize: 24, children: "Captured signature:" }), _jsx(Image, { contentFit: "contain", height: containerHeight, width: "100%", source: value })] }))] }));
+};
+export * as Sources from './Signature.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6e,CAAC;AAElgB,eAAO,MAAM,YAAY,cAAiiB,CAAC;AAE3jB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Signature/Signature.stories.tsx
+export const Example = () => "export const Example = () => {\n  const containerHeight = 100;\n  const [value, setValue] = React.useState<string | null>(null);\n\n  return (\n    <Box width={'100%'}>\n      <Signature height={containerHeight} onChange={setValue} />\n\n      {value && (\n        <>\n          <Typography fontSize={24}>Signature capturée :</Typography>\n          <Image contentFit=\"contain\" height={containerHeight} width=\"100%\" source={value} />\n        </>\n      )}\n    </Box>\n  );\n};";
+export const CustomLabels = () => "export const CustomLabels = () => {\n  const containerHeight = 100;\n  const [value, setValue] = React.useState<string | null>(null);\n\n  return (\n    <Box width={'100%'}>\n      <Signature height={containerHeight} onChange={setValue} dateLabel=\"Date :\" clearButtonLabel=\"Clear\" />\n\n      {value && (\n        <>\n          <Typography fontSize={24}>Captured signature:</Typography>\n          <Image contentFit=\"contain\" height={containerHeight} width=\"100%\" source={value} />\n        </>\n      )}\n    </Box>\n  );\n};";
+export const storySources = {
+    Example,
+    CustomLabels,
+};

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

@@ -0,0 +1,29 @@
+export declare const useStyles: () => {
+    container: {
+        width: "100%";
+        display: "flex";
+        flexDirection: "column";
+    };
+    pen: {
+        color: "#373A3F";
+        backgroundColor: "#FFFFFF";
+    };
+    signatureWeb: {
+        borderColor: "#DEE3EC";
+        borderWidth: number;
+        borderRadius: import("@alveole/theme").Spacing;
+    };
+    headerSignature: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    date: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+};
+//# sourceMappingURL=Signature.styles.d.ts.map

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

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

package/dist/ui/Signature/Signature.styles.js

@@ -0,0 +1,26 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing, text }) => ({
+    container: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    pen: {
+        color: color.text['default-grey'],
+        backgroundColor: '#FFFFFF',
+    },
+    signatureWeb: {
+        borderColor: color.border['default-grey'],
+        borderWidth: 2,
+        borderRadius: spacing('075'),
+    },
+    headerSignature: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    date: {
+        ...text['Corps de texte'].XS.Regular,
+    },
+}));

package/dist/ui/Signature/Signature.web.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SignatureProps } from './Signature';
+export declare const Signature: (props: SignatureProps) => React.JSX.Element;
+//# sourceMappingURL=Signature.web.d.ts.map

package/dist/ui/Signature/Signature.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAyE9C,CAAC"}

package/dist/ui/Signature/Signature.web.js

@@ -0,0 +1,50 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import ReactSignature from '@uiw/react-signature';
+import * as React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { useStyles } from './Signature.styles';
+export const Signature = (props) => {
+    const { height, style, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, ...boxProps } = props;
+    const styles = useStyles();
+    const signatureRef = React.useRef(null);
+    const serializeSvgToBase64 = (svg) => {
+        return new Promise(resolve => {
+            const svgString = new XMLSerializer().serializeToString(svg);
+            const blob = new Blob([svgString], { type: 'image/svg+xml' });
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64data = reader.result;
+                resolve(base64data);
+            };
+            reader.readAsDataURL(blob);
+        });
+    };
+    React.useEffect(() => {
+        const svgEl = signatureRef.current?.svg;
+        if (!svgEl)
+            return;
+        const handlePointerUp = async () => {
+            const svgEl = signatureRef.current?.svg;
+            if (!svgEl)
+                return;
+            const base64 = await serializeSvgToBase64(svgEl);
+            onChange(base64);
+        };
+        svgEl.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            svgEl.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [signatureRef.current?.svg, onChange]);
+    const handleClear = () => {
+        signatureRef.current?.clear();
+        onChange(null);
+    };
+    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
+    return (_jsxs(Box, { tag: "signature", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { title: clearButtonLabel, variant: "tertiary", size: "xs", onPress: handleClear })] }), _jsx(Box, { style: { ...styles.signatureWeb, height }, children: _jsx(ReactSignature, { ref: (inst) => {
+                        if (inst)
+                            signatureRef.current = inst;
+                    }, style: styles.signatureWeb, fill: styles.pen.color, options: { size: 12, smoothing: 0.15, thinning: 0.73, streamline: 0.5 } }) })] }));
+};

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

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

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

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

package/dist/ui/Signature/index.js

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

package/dist/ui/Tabs/Tabs.d.ts

@@ -13,5 +13,5 @@ export type TabsProps = Omit<BoxProps, 'children'> & {
     defaultValue?: string;
     onChange?: (index: number) => void;
 };
-export declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: (props: TabsProps) => React.JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,eAAe,EAAc,MAAM,qBAAqB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACnD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CA6IpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,eAAe,EAAc,MAAM,qBAAqB,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACnD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBA6IpC,CAAC"}

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

@@ -1,10 +1,11 @@
+import React from 'react';
 declare const _default: {
     title: string;
-    tags: "Composant"[];
+    tags: "ui"[];
     experimental: false;
     figmaURL: string;
     description: string;
-    component: (props: import("@alveole/components").TabsProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import("@alveole/components").TabsProps) => React.JSX.Element;
     styleFn: () => {
         container: {
             flex: number;
@@ -105,6 +106,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Example: () => import("react/jsx-runtime").JSX.Element;
+export declare const Example: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAsBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAsBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -5,7 +5,7 @@ import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
     title: 'Tabs',
-    tags: ['Composant'],
+    tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1863-621',
     description: 'Composant d’onglets (tabs) basé sur tamagui.',

package/dist/ui/Tag/Tag.d.ts

@@ -6,5 +6,5 @@ export type TagProps = {
     size: 'sm' | 'md';
     style?: CSSProperties;
 };
-export declare const Tag: (props: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: (props: TagProps) => React.JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CAsBlC,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAsBlC,CAAC"}

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

@@ -1,10 +1,10 @@
 declare const _default: {
     title: string;
-    tags: "Kit"[];
+    tags: "ui"[];
     experimental: false;
     figmaURL: string;
     description: string;
-    component: (props: import("./Tag").TagProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import("./Tag").TagProps) => import("react").JSX.Element;
     styleFn: () => {
         tagContainer: {
             display: "block";
@@ -43,7 +43,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Colors: () => import("react").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
 export * as Sources from './Tag.stories.sources';
 //# sourceMappingURL=Tag.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,MAAM,+CAWlB,CAAC;AAEF,eAAO,MAAM,KAAK,+CASjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,MAAM,mCASlB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

package/dist/ui/Tag/Tag.stories.js

@@ -4,13 +4,13 @@ import { Tag } from './Tag';
 import { useStyles } from './Tag.styles';
 export default {
     title: 'Tag',
-    tags: ['Kit'],
+    tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1002-8509',
     description: 'Différents tags. Composant de type Typography.',
     component: Tag,
     styleFn: useStyles,
 };
-export const Colors = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }) }));
+export const Colors = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }));
 export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", color: "default", children: "Tag sm" }), _jsx(Tag, { size: "md", color: "default", children: "Tag md" })] }));
 export * as Sources from './Tag.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,cAAkS,CAAC;AAEtT,eAAO,MAAM,KAAK,cAAqQ,CAAC;AAExR,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,cAA8Q,CAAC;AAElS,eAAO,MAAM,KAAK,cAAqQ,CAAC;AAExR,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tag/Tag.stories.tsx
-export const Colors = () => "export const Colors = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n      <Tag size=\"md\" color=\"default\">\n        Tag default\n      </Tag>\n      <Tag size=\"md\" color=\"action\">\n        Tag action\n      </Tag>\n    </Box>\n  </Box>\n);";
+export const Colors = () => "export const Colors = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"md\" color=\"default\">\n      Tag default\n    </Tag>\n    <Tag size=\"md\" color=\"action\">\n      Tag action\n    </Tag>\n  </Box>\n);";
 export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"sm\" color=\"default\">\n      Tag sm\n    </Tag>\n    <Tag size=\"md\" color=\"default\">\n      Tag md\n    </Tag>\n  </Box>\n);";
 export const storySources = {
     Colors,

package/dist/ui/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BoxProps } from '../../core';
+export type ToastProps = Omit<BoxProps, 'children'>;
+export declare function Toast(): React.JSX.Element | null;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAIvD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEpD,wBAAgB,KAAK,6BA4EpB"}