@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -27,7 +27,6 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
         width: "100%";
     };
     band: {
-        backgroundColor?: string | undefined;
         flex: number;
         display: "flex";
         flexDirection: "row";
@@ -37,11 +36,12 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
         paddingRight: string | number;
         borderRadius: import("@alveole/theme").Radius;
     };
-    bandHover: {
-        backgroundColor: string;
-    } | undefined;
+    fondDeBande: {
+        default: import("@alveole/theme").ThemeColor | undefined;
+        hover: import("@alveole/theme").ThemeColor | undefined;
+    };
     label: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -51,8 +51,8 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
     };
     icone: string;
     caseACocher: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor | "transparent";
+        borderColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         alignItems: "center";
         justifyContent: "center";

package/dist/ui/Select/selectItemStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectItemStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectItemStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,gBAAgB,EACxB,UAAU;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAClE,qCAAqC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUpD,CAAC"}
+{"version":3,"file":"selectItemStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectItemStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,gBAAgB,EACxB,UAAU;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAClE,qCAAqC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcpD,CAAC"}

package/dist/ui/Select/selectItemStyle.js

@@ -5,9 +5,13 @@
  */
 export const selectItemStyle = (styles, couleurs, { selected, highlighted, disabled }) => ({
     item: { ...styles.item, ...(disabled ? styles.itemDisabled : {}) },
-    band: { ...styles.band, ...(highlighted ? styles.bandHighlighted : {}) },
-    // Le survol ne doit pas repondre sur une option qu'on ne peut pas choisir.
-    bandHover: disabled ? undefined : styles.bandHighlighted,
+    band: styles.band,
+    // Repos et survol sur la seule prop `backgroundColor` (ADR 0031). Le survol ne repond pas sur
+    // une option qu'on ne peut pas choisir.
+    fondDeBande: {
+        default: highlighted ? styles.bandHighlighted.backgroundColor : undefined,
+        hover: disabled ? undefined : styles.bandHighlighted.backgroundColor,
+    },
     label: { ...styles.itemLabel, ...(disabled ? styles.itemLabelDisabled : {}) },
     icone: disabled ? couleurs.texteDesactive : couleurs.texte,
     caseACocher: caseACocherStyle(styles, { selected, disabled }),

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

@@ -12,12 +12,64 @@ export type SelectTriggerState = Omit<FieldBorderState, 'focus'> & {
  * L'etat de bordure vient en dernier : rien ne doit le recouvrir.
  */
 export declare const selectTriggerStyle: (styles: SelectStyles, { open, multiple, ...state }: SelectTriggerState) => {
+    borderWidth: number;
     borderColor: string;
-    alignItems: "flex-start" | "center";
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
     paddingTop?: string | number | undefined;
     paddingBottom?: string | number | undefined;
     display: "flex";
     flexDirection: "row";
+    alignItems: "center";
     gap: string | number;
     paddingLeft: number;
     paddingRight: number;
@@ -25,7 +77,7 @@ export declare const selectTriggerStyle: (styles: SelectStyles, { open, multiple
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 };
 export {};

package/dist/ui/Select/selectTriggerStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectTriggerStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectTriggerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,8BAA8B,kBAAkB;;;;;;;;;;;;;;;;CAIvG,CAAC"}
+{"version":3,"file":"selectTriggerStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectTriggerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,8BAA8B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvG,CAAC"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { LayoutChangeEvent, ScrollView } from 'react-native';
+import { LayoutChangeEvent } from 'react-native';
+import type { ScrollViewRef } from 'tamagui';
 /**
  * Amene l'option deja selectionnee sous les yeux a l'ouverture du panneau, deux lignes plus bas
  * que le haut de la liste pour qu'on voie ce qui la precede.
@@ -14,7 +15,7 @@ import { LayoutChangeEvent, ScrollView } from 'react-native';
  */
 export declare const positionDeDefilement: (y: number) => number;
 export declare const useDefilementVersSelection: (open: boolean) => {
-    scrollRef: React.RefObject<ScrollView | null>;
+    scrollRef: React.RefObject<ScrollViewRef | null>;
     onSelectedLayout: (event: LayoutChangeEvent) => void;
 };
 //# sourceMappingURL=useDefilementVersSelection.d.ts.map

package/dist/ui/Select/useDefilementVersSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDefilementVersSelection.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useDefilementVersSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG7D;;;;;;;GAOG;AACH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,MAAM,WAA2C,CAAC;AAE1F,eAAO,MAAM,0BAA0B,GAAI,MAAM,OAAO;;8BAWrB,iBAAiB;CASnD,CAAC"}
+{"version":3,"file":"useDefilementVersSelection.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/useDefilementVersSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;;;GAOG;AACH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,MAAM,WAA2C,CAAC;AAE1F,eAAO,MAAM,0BAA0B,GAAI,MAAM,OAAO;;8BAWrB,iBAAiB;CASnD,CAAC"}

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

@@ -17,13 +17,13 @@ declare const _default: {
         sidebarItemSelectedIndicatorContent: {
             width: "100%";
             minHeight: string | number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             margin: string;
             borderRadius: string | number;
         };
         sidebarItemTitleSelectedDesktop: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -31,8 +31,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleSelectedMobile: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -40,8 +40,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleDesktop: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -49,23 +49,16 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleMobile: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        sidebarItemTitleCurrentHoverDesktop: {
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-        };
         sidebarItemTitleCurrentHoverMobile: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -73,11 +66,11 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemSelectedDesktop: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         sidebarItemSelectedMobile: {
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         sidebarItemContainerDesktop: {
             paddingLeft: string | number;
@@ -112,8 +105,8 @@ declare const _default: {
             paddingLeft: string | number;
             paddingRight: string | number;
             width: "100%";
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
         };
         sidebarItemMobile: {
             display: "flex";
@@ -125,17 +118,17 @@ declare const _default: {
             paddingTop: string | number;
             paddingBottom: string | number;
             width: "100%";
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
         };
         sidebarItemHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         groupDesktop: {
             marginTop: string | number;
         };
         groupTitleDesktop: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: number;
             paddingTop: string | number;
             paddingBottom: string | number;
@@ -146,7 +139,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         groupTitleMobile: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -160,7 +153,7 @@ declare const _default: {
         sidebar: {
             backgroundColor: "#FFFFFF";
             borderRightWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             display: "flex";
             flexDirection: "column";
             alignItems: "flex-start";

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAYkB;AAElB,eAAO,MAAM,YAAY,mCAsBxB,CAAC;AAaF,eAAO,MAAM,kBAAkB,mCA6D9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAYkB;AAElB,eAAO,MAAM,YAAY,mCAuBxB,CAAC;AAaF,eAAO,MAAM,kBAAkB,mCA6D9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

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

@@ -23,7 +23,7 @@ export default {
 };
 export const ExampleUsage = () => {
     const controller = useSidebar();
-    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
+    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", counter: 3, onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 3", counter: 5, counterVariant: "primary", onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
 };
 // Faute de logo publie pour Alveole, une forme generee tient lieu de logo.
 const organisations = [

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,cAAqxB,CAAC;AAE/yB,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,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,cAAg5B,CAAC;AAE16B,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Sidebar/Sidebar.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
+export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" counter={3} onPress={console.log} />\n      <SidebarItem pressable title=\"Item 3\" counter={5} counterVariant=\"primary\" onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
 export const AvecHeaderEtFooter = () => "export const AvecHeaderEtFooter = () => {\n  const [orga, setOrga] = useState('Alveole');\n\n  const logo = (\n    <ActionMenu\n      placement=\"bottom-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"md\"\n          contentAlign=\"start\"\n          title={orga}\n          leading={<LogoDOrganisation nom={orga} />}\n          trailing=\"ChevronDown\"\n        />\n      )}\n    >\n      {organisations.map(({ nom }) => (\n        <ActionMenu.Item\n          key={nom}\n          title={nom}\n          leading={<LogoDOrganisation nom={nom} />}\n          selected={nom === orga}\n          onPress={() => setOrga(nom)}\n        />\n      ))}\n    </ActionMenu>\n  );\n\n  const footer = (\n    <ActionMenu\n      placement=\"top-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"lg\"\n          contentAlign=\"start\"\n          title=\"Clément Prod'homme\"\n          leading={<Avatar size=\"sm\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />}\n        />\n      )}\n    >\n      <ActionMenu.Item title=\"Mon profil\" leading=\"User\" />\n      <ActionMenu.Item title=\"Paramètres\" leading=\"Settings\" />\n      <ActionMenu.Item title=\"Aide\" leading=\"HelpCircle\" />\n      <ActionMenu.Item title=\"Se déconnecter\" leading=\"LogOut\" />\n    </ActionMenu>\n  );\n\n  return (\n    <Sidebar logo={logo} footer={footer}>\n      <SidebarItem pressable leading=\"LayoutDashboard\" title=\"Tableau de bord\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Users\" title=\"Utilisateurs\" onPress={console.log} />\n      <SidebarItem pressable leading=\"FileText\" title=\"Rapports\" onPress={console.log} />\n\n      <SidebarDivider />\n\n      <SidebarItem pressable leading=\"Settings\" title=\"Configuration\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Bell\" title=\"Notifications\" onPress={console.log} />\n    </Sidebar>\n  );\n};";
 export const storySources = {
     ExampleUsage,

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

@@ -8,13 +8,13 @@ export declare const useStyles: () => {
     sidebarItemSelectedIndicatorContent: {
         width: "100%";
         minHeight: string | number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         margin: string;
         borderRadius: string | number;
     };
     sidebarItemTitleSelectedDesktop: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -22,8 +22,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleSelectedMobile: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -31,8 +31,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleDesktop: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -40,23 +40,16 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleMobile: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    sidebarItemTitleCurrentHoverDesktop: {
-        fontSize: 14;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
-    };
     sidebarItemTitleCurrentHoverMobile: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -64,11 +57,11 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemSelectedDesktop: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     sidebarItemSelectedMobile: {
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     sidebarItemContainerDesktop: {
         paddingLeft: string | number;
@@ -103,8 +96,8 @@ export declare const useStyles: () => {
         paddingLeft: string | number;
         paddingRight: string | number;
         width: "100%";
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
     };
     sidebarItemMobile: {
         display: "flex";
@@ -116,17 +109,17 @@ export declare const useStyles: () => {
         paddingTop: string | number;
         paddingBottom: string | number;
         width: "100%";
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
     };
     sidebarItemHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     groupDesktop: {
         marginTop: string | number;
     };
     groupTitleDesktop: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: number;
         paddingTop: string | number;
         paddingBottom: string | number;
@@ -137,7 +130,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     groupTitleMobile: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: string | number;
         paddingRight: string | number;
         paddingTop: string | number;
@@ -151,7 +144,7 @@ export declare const useStyles: () => {
     sidebar: {
         backgroundColor: "#FFFFFF";
         borderRightWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         flexDirection: "column";
         alignItems: "flex-start";

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AA+MA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AA2MA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC"}

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@alveole/theme';
 // aligne au pixel. L'item y arrive par trois retraits emboîtés : la marge de son conteneur,
 // le padding de ce conteneur, puis celui de la pastille qui porte le texte. Le titre n'en a
 // qu'un seul, d'où cette somme explicite : sans elle les deux dérivent au premier réglage.
-const retraitDuContenu = (spacingValue) => spacingValue('075') + spacingValue('050') + spacingValue('050');
+const retraitDuContenu = (spacingValue) => spacingValue('3V') + spacingValue('1W') + spacingValue('1W');
 const coque = ({ color, spacing, spacingValue, isVariant }) => ({
     sidebar: {
         backgroundColor: '#FFFFFF',
@@ -18,7 +18,7 @@ const coque = ({ color, spacing, spacingValue, isVariant }) => ({
     headerContent: {
         display: 'flex',
         flexDirection: 'row',
-        padding: spacingValue('050'),
+        padding: spacingValue('1W'),
     },
     logo: {
         marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('3W') : 0,
@@ -108,7 +108,7 @@ const item = ({ color, spacing }) => ({
 });
 const etatDeLItem = ({ color, spacing, radius }) => ({
     sidebarItemSelectedDesktop: {
-        backgroundColor: color.light.background['contrast-grey'],
+        backgroundColor: color.light.background['default-grey-active'],
     },
     sidebarItemSelectedMobile: {
         borderRadius: radius('lg'),
@@ -158,9 +158,6 @@ const titreDeLItem = ({ text, color }) => ({
         color: color.light.text['default-grey'],
         stroke: color.light.text['default-grey'],
     },
-    sidebarItemTitleCurrentHoverDesktop: {
-        ...text['Corps de texte'].SM.Bold,
-    },
     sidebarItemTitleCurrentHoverMobile: {
         ...text['Corps de texte'].MD.Medium,
         color: color.light.background['action-high-primary'],
@@ -169,7 +166,7 @@ const titreDeLItem = ({ text, color }) => ({
 const indicateur = ({ color, spacing, spacingValue }) => ({
     sidebarItemSelectedIndicator: {
         height: '100%',
-        width: spacingValue('025'),
+        width: spacingValue('1V'),
         position: 'absolute',
         left: 0,
     },

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,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AA0CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,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,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AA+CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.js

@@ -20,7 +20,10 @@ const SidebarHeaderMobile = (props) => {
     const { controller } = props;
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
-    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: styles.headerContent, pt: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding, children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", accessibilityLabel: "Fermer le menu", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
+    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: [
+                    styles.headerContent,
+                    { paddingTop: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding },
+                ], children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", accessibilityLabel: "Fermer le menu", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
 };
 export const SidebarHeader = (props) => {
     const { isVariant } = useTheme();

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { AProps } from '../../core/A';
+import { CounterProps } from '../Counter';
 import { Leading } from '../Leading';
-export type SidebarItemNavigable = {
+type SidebarItemCompteur = {
+    counter?: number;
+    counterVariant?: CounterProps['variant'];
+};
+export type SidebarItemNavigable = SidebarItemCompteur & {
     pressable?: undefined;
     title: string;
     leading?: Leading;
@@ -9,7 +14,7 @@ export type SidebarItemNavigable = {
     direction?: AProps['direction'];
     routeName?: string;
 };
-export type SidebarItemPressable = {
+export type SidebarItemPressable = SidebarItemCompteur & {
     pressable: true;
     title: string;
     leading?: Leading;
@@ -17,4 +22,5 @@ export type SidebarItemPressable = {
 };
 export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;
 export declare const SidebarItem: (props: SidebarItemProps) => React.JSX.Element;
+export {};
 //# 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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAoH3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,KAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,mBAAmB,GAAG;IACvD,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAoI3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}

package/dist/ui/Sidebar/SidebarItem.js

@@ -5,7 +5,9 @@ import React from 'react';
 import { Pressable } from 'react-native';
 import { A } from '../../core/A';
 import { Box } from '../../core/Box';
+import { fondAuSurvol } from '../../core/styleTamagui/fondAuSurvol';
 import { Typography } from '../../core/Typography';
+import { Counter } from '../Counter';
 import { LeadingSlot } from '../Leading';
 import { useStyles } from './Sidebar.styles';
 // Un item mène quelque part ou déclenche quelque chose : dans un cas c'est un lien, dans
@@ -20,32 +22,37 @@ const IndicateurPageCourante = () => {
     const styles = useStyles();
     return (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) }));
 };
+// Un compteur à zéro ne compte rien : on ne l'affiche pas.
+const CompteurDItem = ({ counter, counterVariant = 'default' }) => counter != null && counter > 0 ? (_jsx(Box, { mt: "auto", mb: "auto", children: _jsx(Counter, { variant: counterVariant, count: counter }) })) : null;
 const SidebarItemDesktop = (props) => {
     const { title, leading } = props;
     const styles = useStyles();
     const isCurrentPage = useEstPageCourante(props);
-    const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedDesktop : {};
+    const { forme, fond } = fondAuSurvol(isCurrentPage ? styles.sidebarItemSelectedDesktop : {}, styles.sidebarItemHover.backgroundColor);
     const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedDesktop : {};
-    const sidebarItemTitleDesktop = isCurrentPage ? styles.sidebarItemTitleCurrentHoverDesktop : {};
-    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { style: styles.sidebarItemContainerDesktop, children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, 
+    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { style: styles.sidebarItemContainerDesktop, children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...forme }, 
                     // La ligne courante se survole comme ses voisines : elle est un lien au même titre, et
                     // lui réserver une teinte propre n'ajoutait qu'un cas particulier. Son fond de repos
                     // étant plus sombre, le survol commun l'éclaircit - la direction que prend Primer.
-                    hoverStyle: { ...styles.sidebarItemHover }, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }) }));
+                    backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected, flex: 1, textAlign: 'left' }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 const SidebarItemMobile = (props) => {
     const { title, leading } = props;
     const styles = useStyles();
     const isCurrentPage = useEstPageCourante(props);
-    const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedMobile : {};
-    const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedMobile : {};
-    const sidebarItemTitleMobile = isCurrentPage ? styles.sidebarItemTitleCurrentHoverMobile : {};
-    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemMobile, ...itemStyleSelected }, hoverStyle: { ...styles.sidebarItemHover }, children: [_jsx(LeadingSlot, { contenu: leading, apparence: {
+    const { forme, fond } = fondAuSurvol(isCurrentPage ? styles.sidebarItemSelectedMobile : {}, styles.sidebarItemHover.backgroundColor);
+    // Comme le fond, la couleur du titre courant porte repos et survol sur sa seule prop.
+    const { color: couleurDuTitre, ...titre } = {
+        ...styles.sidebarItemTitleMobile,
+        ...(isCurrentPage ? styles.sidebarItemTitleSelectedMobile : {}),
+    };
+    const couleurAuSurvol = isCurrentPage ? styles.sidebarItemTitleCurrentHoverMobile.color : undefined;
+    return (_jsx(SidebarItemEnveloppe, { item: props, isCurrentPage: isCurrentPage, children: _jsxs(Box, { children: [isCurrentPage && _jsx(IndicateurPageCourante, {}), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemMobile, ...forme }, backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: {
                                 size: 'md',
                                 color: isCurrentPage
                                     ? styles.sidebarItemTitleSelectedMobile.color
                                     : styles.sidebarItemTitleSelectedMobile.stroke,
-                            } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleMobile, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleMobile }, children: title })] })] }) }));
+                            } }), _jsx(Typography, { style: { ...titre, flex: 1, textAlign: 'left' }, color: { default: couleurDuTitre, hover: couleurAuSurvol }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 export const SidebarItem = (props) => {
     const { isVariant } = useTheme();