@alveole/components 1.0.1 → 1.1.0

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

@@ -9,11 +9,11 @@ declare const _default: {
         list: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         entete: {
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         enteteTitle: {
             color: string;
@@ -44,7 +44,7 @@ declare const _default: {
             flex: number;
             justifyContent: "center";
             alignItems: "center";
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
         };
     };
 };

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

@@ -2,11 +2,11 @@ export declare const useStyles: () => {
     list: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     entete: {
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     enteteTitle: {
         color: string;
@@ -37,7 +37,7 @@ export declare const useStyles: () => {
         flex: number;
         justifyContent: "center";
         alignItems: "center";
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
 };
 //# sourceMappingURL=ResourceList.styles.d.ts.map

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

@@ -28,10 +28,10 @@ declare const _default: {
             flex: number;
             outline: string;
             padding: number;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             color: string;
         };
         inputContainer: {
@@ -41,7 +41,7 @@ declare const _default: {
         inputInner: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             padding: number;
             borderRadius: number;
             borderWidth: number;
@@ -67,8 +67,8 @@ declare const _default: {
         };
         indicator: {
             position: "absolute";
-            right: import("@alveole/theme").Spacing;
-            top: import("@alveole/theme").Spacing;
+            right: string | number;
+            top: string | number;
         };
         indicatorFocus: {};
     };

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

@@ -13,10 +13,10 @@ export declare const useStyles: () => {
         flex: number;
         outline: string;
         padding: number;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         color: string;
     };
     inputContainer: {
@@ -26,7 +26,7 @@ export declare const useStyles: () => {
     inputInner: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         padding: number;
         borderRadius: number;
         borderWidth: number;
@@ -52,8 +52,8 @@ export declare const useStyles: () => {
     };
     indicator: {
         position: "absolute";
-        right: import("@alveole/theme").Spacing;
-        top: import("@alveole/theme").Spacing;
+        right: string | number;
+        top: string | number;
     };
     indicatorFocus: {};
 };

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

@@ -24,7 +24,7 @@ declare const _default: {
             borderColor: string;
         };
         control: {
-            minHeight: import("@alveole/theme").Spacing;
+            minHeight: string | number;
             flexWrap: "inherit";
             borderColor: string;
         };
@@ -33,21 +33,21 @@ declare const _default: {
         };
         valueContainer: {
             minHeight: number;
-            paddingLeft: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
         };
         multiValue: {
-            borderRadius: import("@alveole/theme").Spacing;
+            borderRadius: string | number;
             backgroundColor: string;
-            paddingLeft: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
         };
         multiValueDisabled: {
             backgroundColor: "#FFFFFF";
             borderColor: string;
             borderWidth: number;
-            borderRadius: import("@alveole/theme").Spacing;
+            borderRadius: string | number;
             borderStyle: "solid";
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
         };
         multiValueRemoveHover: {
             backgroundColor: string;
@@ -57,7 +57,7 @@ declare const _default: {
             display: "none";
         };
         dropdownIndicator: {
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
         };
         dropdownIndicatorDisabled: {
             display: "none";
@@ -66,7 +66,7 @@ declare const _default: {
             display: "none";
         };
         clearIndicator: {
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
         };
     };
 };

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

@@ -18,7 +18,7 @@ export declare const useStyles: () => {
         borderColor: string;
     };
     control: {
-        minHeight: import("@alveole/theme").Spacing;
+        minHeight: string | number;
         flexWrap: "inherit";
         borderColor: string;
     };
@@ -27,21 +27,21 @@ export declare const useStyles: () => {
     };
     valueContainer: {
         minHeight: number;
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
     };
     multiValue: {
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
         backgroundColor: string;
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
     };
     multiValueDisabled: {
         backgroundColor: "#FFFFFF";
         borderColor: string;
         borderWidth: number;
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
         borderStyle: "solid";
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
     };
     multiValueRemoveHover: {
         backgroundColor: string;
@@ -51,7 +51,7 @@ export declare const useStyles: () => {
         display: "none";
     };
     dropdownIndicator: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     dropdownIndicatorDisabled: {
         display: "none";
@@ -60,7 +60,7 @@ export declare const useStyles: () => {
         display: "none";
     };
     clearIndicator: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
 };
 //# sourceMappingURL=SelectMultiple.styles.d.ts.map

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

@@ -4,6 +4,7 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
+    shortDescription: string;
     component: (props: import("./Sidebar").SidebarProps) => import("react").JSX.Element;
     styleFn: () => {
         sidebar: {
@@ -22,7 +23,7 @@ declare const _default: {
             padding: import("@alveole/theme").Spacing;
         };
         logo: {
-            marginLeft: import("@alveole/theme").Spacing;
+            marginLeft: string | number;
         };
         sidebarContent: {
             flex: number;
@@ -31,14 +32,14 @@ declare const _default: {
         };
         scrollView: {
             flex: number;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
             zIndex: number;
             backgroundColor: "#FFFFFF";
         };
         groupTitleDesktop: {
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingTop: string | number;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -47,10 +48,10 @@ declare const _default: {
         };
         groupTitleMobile: {
             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;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -58,12 +59,12 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemDesktop: {
-            borderRadius: import("@alveole/theme").Spacing;
+            borderRadius: string | number;
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-            padding: import("@alveole/theme").Spacing;
+            gap: string | number;
+            padding: string | number;
             width: "100%";
             color: string;
             stroke: string;
@@ -72,11 +73,11 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            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;
             width: "100%";
             color: string;
             stroke: string;
@@ -95,26 +96,26 @@ declare const _default: {
             backgroundColor: "#EFF1F6";
         };
         sidebarItemContainerDesktop: {
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             display: "flex";
             flexDirection: "row";
             cursor: "pointer";
-            marginLeft: import("@alveole/theme").Spacing;
-            marginRight: import("@alveole/theme").Spacing;
+            marginLeft: string | number;
+            marginRight: string | number;
         };
         sidebarItemContainerMobile: {
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-            gap: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            gap: string | number;
             display: "flex";
             flexDirection: "row";
             cursor: "pointer";
             borderRadius: import("@alveole/theme").Radius;
-            marginLeft: import("@alveole/theme").Spacing;
-            marginRight: import("@alveole/theme").Spacing;
+            marginLeft: string | number;
+            marginRight: string | number;
         };
         sidebarItemTitleSelectedDesktop: {
             color: string;
@@ -175,14 +176,33 @@ declare const _default: {
         };
         sidebarItemSelectedIndicatorContent: {
             width: "100%";
-            minHeight: import("@alveole/theme").Spacing;
+            minHeight: string | number;
             backgroundColor: string;
             margin: string;
-            borderRadius: import("@alveole/theme").Spacing;
+            borderRadius: string | number;
         };
     };
 };
 export default _default;
-export declare const ExampleUsage: () => import("react").JSX.Element;
+/**
+ * Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.
+ *
+ * ```tsx
+ * <Sidebar
+ *   controller={sidebarController}
+ *   logo={<Image source={require('../../assets/logo.png')} />}
+ *   footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
+ * >
+ *   <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
+ *   <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
+ *
+ *   <SidebarGroup title="Groupe">
+ *     <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
+ *     <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
+ *   </SidebarGroup>
+ * </Sidebar>
+ * ```
+ */
+export declare const ExampleUsage: () => null;
 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,mCAA+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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAWkB;AAElB;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,YAAa,CAAC;AAEvC,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

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

@@ -1,5 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '../../core';
 import { Sidebar } from './Sidebar';
 import { useStyles } from './Sidebar.styles';
 export default {
@@ -7,22 +5,29 @@ export default {
     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>.',
+    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>`.",
+    shortDescription: 'Navigation primaire latérale. Se transforme en menu burger sur mobile. À utiliser avec SidebarItem et SidebarGroup.',
     component: Sidebar,
     styleFn: useStyles,
 };
-const codeExample = `<Sidebar
-  controller={sidebarController}
-  logo={<Image source={require('../../assets/logo.png')} />}
-  footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
->
-  <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
-  <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
- 
-  <SidebarGroup title="Groupe">
-    <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
-    <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
-  </SidebarGroup>
-</Sidebar>`;
-export const ExampleUsage = () => _jsx(Typography, { children: codeExample });
+/**
+ * Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.
+ *
+ * ```tsx
+ * <Sidebar
+ *   controller={sidebarController}
+ *   logo={<Image source={require('../../assets/logo.png')} />}
+ *   footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
+ * >
+ *   <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
+ *   <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
+ *
+ *   <SidebarGroup title="Groupe">
+ *     <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
+ *     <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
+ *   </SidebarGroup>
+ * </Sidebar>
+ * ```
+ */
+export const ExampleUsage = () => null;
 export * as Sources from './Sidebar.stories.sources';

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

@@ -3,4 +3,5 @@ export declare const storySources: {
     readonly ExampleUsage: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Sidebar.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAoF,CAAC;AAE9G,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAkD,CAAC;AAE5E,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -1,6 +1,9 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Sidebar/Sidebar.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => <Typography>{codeExample}</Typography>;";
+export const ExampleUsage = () => "export const ExampleUsage = () => null;";
 export const storySources = {
     ExampleUsage,
 };
+export const storyDescriptions = {
+    ExampleUsage: "Exemple d'intégration complète du composant avec un contrôleur, un logo et un footer.\n\n```tsx\n<Sidebar\n  controller={sidebarController}\n  logo={<Image source={require('../../assets/logo.png')} />}\n  footer={<Button borderNone variant=\"tertiary\" title=\"Se déconnecter\" onPress={onLogout} />}\n>\n  <SidebarItem title=\"Item 1\" href=\"/admin/item-1\" routeName=\"item-1\" />\n  <SidebarItem title=\"Item 2\" href=\"/admin/item-2\" routeName=\"item-2\" />\n\n  <SidebarGroup title=\"Groupe\">\n    <SidebarItem title=\"Item group 1\" href=\"/admin/gp-item-2\" routeName=\"gp-item-1\" />\n    <SidebarItem title=\"Item group 2\" href=\"/admin/gp-item-2\" routeName=\"gp-item-2\" />\n  </SidebarGroup>\n</Sidebar>\n```",
+};

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

@@ -15,7 +15,7 @@ export declare const useStyles: () => {
         padding: import("@alveole/theme").Spacing;
     };
     logo: {
-        marginLeft: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
     };
     sidebarContent: {
         flex: number;
@@ -24,14 +24,14 @@ export declare const useStyles: () => {
     };
     scrollView: {
         flex: number;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         zIndex: number;
         backgroundColor: "#FFFFFF";
     };
     groupTitleDesktop: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingTop: string | number;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -40,10 +40,10 @@ export declare const useStyles: () => {
     };
     groupTitleMobile: {
         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;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -51,12 +51,12 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemDesktop: {
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-        padding: import("@alveole/theme").Spacing;
+        gap: string | number;
+        padding: string | number;
         width: "100%";
         color: string;
         stroke: string;
@@ -65,11 +65,11 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        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;
         width: "100%";
         color: string;
         stroke: string;
@@ -88,26 +88,26 @@ export declare const useStyles: () => {
         backgroundColor: "#EFF1F6";
     };
     sidebarItemContainerDesktop: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         display: "flex";
         flexDirection: "row";
         cursor: "pointer";
-        marginLeft: import("@alveole/theme").Spacing;
-        marginRight: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
+        marginRight: string | number;
     };
     sidebarItemContainerMobile: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        gap: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        gap: string | number;
         display: "flex";
         flexDirection: "row";
         cursor: "pointer";
         borderRadius: import("@alveole/theme").Radius;
-        marginLeft: import("@alveole/theme").Spacing;
-        marginRight: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
+        marginRight: string | number;
     };
     sidebarItemTitleSelectedDesktop: {
         color: string;
@@ -168,10 +168,10 @@ export declare const useStyles: () => {
     };
     sidebarItemSelectedIndicatorContent: {
         width: "100%";
-        minHeight: import("@alveole/theme").Spacing;
+        minHeight: string | number;
         backgroundColor: string;
         margin: string;
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
     };
 };
 //# sourceMappingURL=Sidebar.styles.d.ts.map

package/dist/ui/Sidebar/Sidebar.styles.js

@@ -1,5 +1,5 @@
 import { Colors, makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVariant, radius }) => ({
     sidebar: {
         backgroundColor: '#FFFFFF',
         borderRightWidth: 1,
@@ -13,7 +13,7 @@ export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }
     headerContent: {
         display: 'flex',
         flexDirection: 'row',
-        padding: spacing('050'),
+        padding: spacingValue('050'),
     },
     logo: {
         marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('150') : 0,
@@ -131,7 +131,7 @@ export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }
     },
     sidebarItemSelectedIndicator: {
         height: '100%',
-        width: spacing('025'),
+        width: spacingValue('025'),
         position: 'absolute',
         left: 0,
     },

package/dist/ui/Signature/Signature.js

@@ -9,7 +9,7 @@ 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 { color, spacing, spacingValue } = useTheme();
     const styles = useStyles();
     const ref = React.useRef(null);
     const readTimeoutRef = React.useRef(null);
@@ -38,7 +38,7 @@ export const Signature = (props) => {
         };
     }, []);
     const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
-    const webviewHeightWithBorders = height + spacing('200') + spacing('100') + 3;
+    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
     const webviewStyle = `
     .m-signature-pad {
       box-shadow: none;