design-zystem 1.0.342 → 1.0.344

package/dist/index.d.mts

@@ -151,6 +151,7 @@ interface BulkSection {
     icon: string;
     action: () => void;
     disabled?: boolean;
+    disabledTooltip?: string;
 }
 interface BulkProps {
     onClose?: () => void;

package/dist/index.d.ts

@@ -151,6 +151,7 @@ interface BulkSection {
     icon: string;
     action: () => void;
     disabled?: boolean;
+    disabledTooltip?: string;
 }
 interface BulkProps {
     onClose?: () => void;

package/dist/index.js

@@ -817,8 +817,142 @@ var Divider = (_a) => {
   );
 };
 
-// src/ui-legacy/Components/Bulk/Bulk.tsx
+// src/ui-legacy/Components/Tooltip/Tooltip.tsx
+var import_react3 = require("react");
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var StyledTooltipWrapper = import_styled_components8.default.div`
+  position: relative;
+  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
+  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
+  cursor: pointer;
+`;
+var StyledTooltipContent = import_styled_components8.default.div`
+  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
+  background-color: ${(props) => props.$backgroundColor || colors.black};
+  color: ${colors.white};
+  text-align: center;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  width: ${(props) => props.$width || "200px"};
+  height: ${(props) => props.$height || "auto"};
+  opacity: ${(props) => props.$isVisible ? 1 : 0};
+  transition: opacity 0.3s;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+
+  ${(props) => {
+  switch (props.$direction) {
+    case "top":
+      return `
+          bottom: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
+          }
+        `;
+    case "bottom":
+      return `
+          top: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
+          }
+        `;
+    case "left":
+      return `
+          top: 50%;
+          right: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
+          }
+        `;
+    case "right":
+    default:
+      return `
+          top: 50%;
+          left: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
+          }
+        `;
+  }
+}}
+`;
+var Tooltip = ({
+  backgroundColor,
+  data = [],
+  width,
+  height,
+  direction = "top",
+  fullWidth = false,
+  children
+}) => {
+  const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
+  const handleMouseEnter = () => setIsVisible(true);
+  const handleMouseLeave = () => setIsVisible(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    StyledTooltipWrapper,
+    {
+      $fullWidth: fullWidth,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          StyledTooltipContent,
+          {
+            $isVisible: isVisible,
+            $backgroundColor: backgroundColor,
+            $width: width,
+            $height: height,
+            $direction: direction,
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/ui-legacy/Components/Bulk/Bulk.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Bulk = ({
   onClose,
   leftTitle,
@@ -830,7 +964,7 @@ var Bulk = ({
   const mainColor = colors[variant] || colors.blue_700;
   const textColorStyle = colors[textColor] || colors.white;
   const hoverColorStyle = colors[hoverColor] || colors.blue_900;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Box,
     {
       background: mainColor,
@@ -842,11 +976,11 @@ var Bulk = ({
         zIndex: 500,
         borderRadius: "12px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Row, { alignItems: "center", children: [
-        leftTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Row, { gap: 24, alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "xmark", color: "white", size: "l", onClick: onClose }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color: textColorStyle, weight: "bold", size: "s", wrap: "nowrap", children: leftTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Row, { alignItems: "center", children: [
+        leftTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Row, { gap: 24, alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "xmark", color: "white", size: "l", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: textColorStyle, weight: "bold", size: "s", wrap: "nowrap", children: leftTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Divider,
             {
               orientation: "vertical",
@@ -856,9 +990,9 @@ var Bulk = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Row, { alignItems: "center", children: sections.map((section, idx) => {
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Row, { alignItems: "center", children: sections.map((section, idx) => {
           const isLast = idx === sections.length - 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          const sectionButton = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             Row,
             {
               gap: 6,
@@ -883,7 +1017,7 @@ var Bulk = ({
                   e.currentTarget.style.background = mainColor;
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Icon,
                   {
                     name: section.icon,
@@ -892,7 +1026,7 @@ var Bulk = ({
                     family: "regular"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text,
                   {
                     color: textColorStyle,
@@ -906,6 +1040,7 @@ var Bulk = ({
             },
             section.title
           );
+          return section.disabled && section.disabledTooltip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tooltip, { data: [section.disabledTooltip], children: sectionButton }, section.title) : sectionButton;
         }) })
       ] })
     }
@@ -913,22 +1048,22 @@ var Bulk = ({
 };
 
 // src/ui-legacy/Components/Collapse/Collapse.tsx
-var import_react3 = require("react");
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Wrapper = import_styled_components8.default.div`
+var import_react4 = require("react");
+var import_styled_components9 = __toESM(require("styled-components"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Wrapper = import_styled_components9.default.div`
   overflow: hidden;
   transition: height 0.25s ease;
   height: ${(p) => p.$height}px;
 `;
-var Inner = import_styled_components8.default.div`
+var Inner = import_styled_components9.default.div`
   max-height: ${(p) => p.$maxHeight ? `${p.$maxHeight}px` : "none"};
   overflow-y: ${(p) => p.$maxHeight ? "auto" : "visible"};
 `;
 var Collapse = ({ open, children, maxHeight }) => {
-  const innerRef = (0, import_react3.useRef)(null);
-  const [height, setHeight] = (0, import_react3.useState)(0);
-  const recalc = (0, import_react3.useCallback)(() => {
+  const innerRef = (0, import_react4.useRef)(null);
+  const [height, setHeight] = (0, import_react4.useState)(0);
+  const recalc = (0, import_react4.useCallback)(() => {
     if (open && innerRef.current) {
       const full = innerRef.current.scrollHeight;
       setHeight(maxHeight ? Math.min(full, maxHeight) : full);
@@ -936,20 +1071,20 @@ var Collapse = ({ open, children, maxHeight }) => {
       setHeight(0);
     }
   }, [open, maxHeight]);
-  (0, import_react3.useEffect)(recalc, [recalc]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(recalc, [recalc]);
+  (0, import_react4.useEffect)(() => {
     if (!open || !innerRef.current) return;
     const observer = new ResizeObserver(recalc);
     observer.observe(innerRef.current);
     return () => observer.disconnect();
   }, [open, recalc]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper, { $height: height, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Inner, { ref: innerRef, $maxHeight: maxHeight, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Wrapper, { $height: height, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Inner, { ref: innerRef, $maxHeight: maxHeight, children }) });
 };
 
 // src/ui-legacy/Components/Button/Button.tsx
-var import_react4 = require("react");
-var import_styled_components9 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_styled_components10 = __toESM(require("styled-components"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultSizes = {
   xs: { height: 32, paddingX: 16, textSize: "xs" },
   s: { height: 36, paddingX: 16, textSize: "s" },
@@ -978,7 +1113,7 @@ var shouldForwardProp4 = (p) => ![
   "iconOnlySize",
   "noHover"
 ].includes(p);
-var StyledButton = import_styled_components9.default.button.withConfig({
+var StyledButton = import_styled_components10.default.button.withConfig({
   shouldForwardProp: shouldForwardProp4
 })`
   position: relative;
@@ -1070,7 +1205,7 @@ var StyledButton = import_styled_components9.default.button.withConfig({
       border-radius: 6px;
     `}
 `;
-var Loader = import_styled_components9.default.span`
+var Loader = import_styled_components10.default.span`
   border: 3px solid transparent;
   border-top: 3px solid currentColor;
   border-radius: 50%;
@@ -1121,9 +1256,9 @@ var Button = (_a) => {
     "noHover",
     "iconOnlySize"
   ]);
-  const ref = (0, import_react4.useRef)(null);
+  const ref = (0, import_react5.useRef)(null);
   const sizeConfig = defaultSizes[size];
-  const renderIconSlot = (icon) => typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const renderIconSlot = (icon) => typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Icon,
     {
       name: icon,
@@ -1132,7 +1267,7 @@ var Button = (_a) => {
       color: iconColor != null ? iconColor : outline ? variant : colors.white
     }
   ) : icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     StyledButton,
     __spreadProps(__spreadValues({
       ref,
@@ -1150,10 +1285,10 @@ var Button = (_a) => {
       iconOnlySize
     }, rest), {
       children: [
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, {}),
-        !isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Row, { gap: "8", fullwidth: true, justifyContent: "center", alignItems: "center", children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Loader, {}),
+        !isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Row, { gap: "8", fullwidth: true, justifyContent: "center", alignItems: "center", children: [
           iconLeft && renderIconSlot(iconLeft),
-          label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Text,
             {
               size: sizeConfig.textSize,
@@ -1171,11 +1306,11 @@ var Button = (_a) => {
 };
 
 // src/ui-legacy/Components/Modal/Modal.tsx
-var import_react5 = require("react");
-var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var shouldForwardProp5 = (prop) => !["width", "height", "minHeight", "padding", "backgroundColor"].includes(prop);
-var ModalBackdrop = import_styled_components10.default.div`
+var ModalBackdrop = import_styled_components11.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -1185,7 +1320,7 @@ var ModalBackdrop = import_styled_components10.default.div`
   backdrop-filter: blur(5px);
   z-index: 4;
 `;
-var ModalContainer = import_styled_components10.default.div.withConfig({ shouldForwardProp: shouldForwardProp5 })`
+var ModalContainer = import_styled_components11.default.div.withConfig({ shouldForwardProp: shouldForwardProp5 })`
   position: fixed;
   top: 50%;
   left: 50%;
@@ -1208,7 +1343,7 @@ var ModalContainer = import_styled_components10.default.div.withConfig({ shouldF
   max-height: 90%;
   overflow: auto;
 `;
-var ModalHeader = import_styled_components10.default.div`
+var ModalHeader = import_styled_components11.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1216,14 +1351,14 @@ var ModalHeader = import_styled_components10.default.div`
   border-bottom: 1px solid #ddd;
   width: 100%;
 `;
-var ModalCore = import_styled_components10.default.div`
+var ModalCore = import_styled_components11.default.div`
   padding: 20px;
   background-color: white;
   border-radius: 0 0 10px 10px;
   overflow: auto;
   height: 100%;
 `;
-var ModalClose = import_styled_components10.default.span`
+var ModalClose = import_styled_components11.default.span`
   font-size: 32px;
   color: #fff;
   cursor: pointer;
@@ -1247,7 +1382,7 @@ var Modal = (props) => {
   const hideModal = () => {
     closeModal == null ? void 0 : closeModal();
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (showModal) {
       document.body.classList.add("modal-open");
     } else {
@@ -1257,9 +1392,9 @@ var Modal = (props) => {
       document.body.classList.remove("modal-open");
     };
   }, [showModal]);
-  return showModal && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalBackdrop, { onClick: hideModal }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return showModal && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalBackdrop, { onClick: hideModal }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       ModalContainer,
       {
         width,
@@ -1268,11 +1403,11 @@ var Modal = (props) => {
         backgroundColor,
         minHeight,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ModalHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: "white", weight: "700", children: title ? title : "DELIVERY CAR" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalClose, { onClick: hideModal, children: "\xD7" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { color: "white", weight: "700", children: title ? title : "DELIVERY CAR" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalClose, { onClick: hideModal, children: "\xD7" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalCore, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalCore, { children })
         ]
       }
     )
@@ -1280,15 +1415,15 @@ var Modal = (props) => {
 };
 
 // src/ui-legacy/Components/ModalConfirmation/ModalConfirmation.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ModalConfirmation = (props) => {
   const { isOpen, onConfirm, onCancel, isLoading, width } = props;
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Modal, { showModal: isOpen, closeModal: onCancel, width, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Col, { gap: "16", justifyContent: "center", alignItems: "center", fullWidth: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { align: "center", margin: "1em 0", size: "xl", children: "\xCAtes-vous s\xFBr de vouloir faire cette action ?" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Row, { gap: "8", justifyContent: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: onCancel, variant: "danger", children: "Annuler" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "success", onClick: onConfirm, isLoading, children: "Confirmer" })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { showModal: isOpen, closeModal: onCancel, width, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Col, { gap: "16", justifyContent: "center", alignItems: "center", fullWidth: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { align: "center", margin: "1em 0", size: "xl", children: "\xCAtes-vous s\xFBr de vouloir faire cette action ?" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Row, { gap: "8", justifyContent: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { onClick: onCancel, variant: "danger", children: "Annuler" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "success", onClick: onConfirm, isLoading, children: "Confirmer" })
     ] })
   ] }) });
 };
@@ -1297,8 +1432,8 @@ var ModalConfirmation = (props) => {
 var import_react7 = require("react");
 
 // src/ui-legacy/Components/Bubble/Bubble.tsx
-var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var textSizes3 = {
   xxs: ".4em",
   xs: ".6em",
@@ -1318,7 +1453,7 @@ var paddingSizes = {
   xxl: "10px 20px"
 };
 var resolveColor2 = (value, fallback = "transparent") => colors[value] || value || fallback;
-var pulseAnimation = import_styled_components11.keyframes`
+var pulseAnimation = import_styled_components12.keyframes`
   0% {
     transform: scale(1);
     box-shadow: 0 0 0 0 var(--bubble-pulse-color);
@@ -1345,7 +1480,7 @@ var shouldForwardProp6 = (prop) => ![
   "pulse",
   "pointer"
 ].includes(prop);
-var StyledBubble = import_styled_components11.default.span.withConfig({
+var StyledBubble = import_styled_components12.default.span.withConfig({
   shouldForwardProp: shouldForwardProp6
 })`
   color: ${(props) => resolveColor2(props.color, "inherit")};
@@ -1362,7 +1497,7 @@ var StyledBubble = import_styled_components11.default.span.withConfig({
   text-overflow: ellipsis;
   max-width: ${(props) => props.maxChars ? `${props.maxChars}ch` : "none"};
   white-space: nowrap;
-  ${(props) => props.pulse && import_styled_components11.css`
+  ${(props) => props.pulse && import_styled_components12.css`
       --bubble-pulse-color: ${resolveColor2(
   props.backgroundColor,
   colors.grey_600
@@ -1378,141 +1513,7 @@ var StyledBubble = import_styled_components11.default.span.withConfig({
 `;
 var Bubble = (_a) => {
   var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledBubble, __spreadProps(__spreadValues({}, otherProps), { children }));
-};
-
-// src/ui-legacy/Components/Tooltip/Tooltip.tsx
-var import_react6 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var StyledTooltipWrapper = import_styled_components12.default.div`
-  position: relative;
-  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
-  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
-  cursor: pointer;
-`;
-var StyledTooltipContent = import_styled_components12.default.div`
-  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
-  background-color: ${(props) => props.$backgroundColor || colors.black};
-  color: ${colors.white};
-  text-align: center;
-  padding: 8px;
-  border-radius: 4px;
-  position: absolute;
-  width: ${(props) => props.$width || "200px"};
-  height: ${(props) => props.$height || "auto"};
-  opacity: ${(props) => props.$isVisible ? 1 : 0};
-  transition: opacity 0.3s;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-
-  ${(props) => {
-  switch (props.$direction) {
-    case "top":
-      return `
-          bottom: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
-          }
-        `;
-    case "bottom":
-      return `
-          top: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
-          }
-        `;
-    case "left":
-      return `
-          top: 50%;
-          right: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
-          }
-        `;
-    case "right":
-    default:
-      return `
-          top: 50%;
-          left: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            right: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
-          }
-        `;
-  }
-}}
-`;
-var Tooltip = ({
-  backgroundColor,
-  data = [],
-  width,
-  height,
-  direction = "top",
-  fullWidth = false,
-  children
-}) => {
-  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
-  const handleMouseEnter = () => setIsVisible(true);
-  const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    StyledTooltipWrapper,
-    {
-      $fullWidth: fullWidth,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          StyledTooltipContent,
-          {
-            $isVisible: isVisible,
-            $backgroundColor: backgroundColor,
-            $width: width,
-            $height: height,
-            $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledBubble, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 
 // src/ui-legacy/Components/NewModal/NewModal.tsx

package/dist/index.mjs

@@ -674,8 +674,142 @@ var Divider = (_a) => {
   );
 };
 
-// src/ui-legacy/Components/Bulk/Bulk.tsx
+// src/ui-legacy/Components/Tooltip/Tooltip.tsx
+import { useState } from "react";
+import styled8 from "styled-components";
 import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var StyledTooltipWrapper = styled8.div`
+  position: relative;
+  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
+  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
+  cursor: pointer;
+`;
+var StyledTooltipContent = styled8.div`
+  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
+  background-color: ${(props) => props.$backgroundColor || colors.black};
+  color: ${colors.white};
+  text-align: center;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  width: ${(props) => props.$width || "200px"};
+  height: ${(props) => props.$height || "auto"};
+  opacity: ${(props) => props.$isVisible ? 1 : 0};
+  transition: opacity 0.3s;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+
+  ${(props) => {
+  switch (props.$direction) {
+    case "top":
+      return `
+          bottom: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
+          }
+        `;
+    case "bottom":
+      return `
+          top: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
+          }
+        `;
+    case "left":
+      return `
+          top: 50%;
+          right: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
+          }
+        `;
+    case "right":
+    default:
+      return `
+          top: 50%;
+          left: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
+          }
+        `;
+  }
+}}
+`;
+var Tooltip = ({
+  backgroundColor,
+  data = [],
+  width,
+  height,
+  direction = "top",
+  fullWidth = false,
+  children
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const handleMouseEnter = () => setIsVisible(true);
+  const handleMouseLeave = () => setIsVisible(false);
+  return /* @__PURE__ */ jsxs(
+    StyledTooltipWrapper,
+    {
+      $fullWidth: fullWidth,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        /* @__PURE__ */ jsx9(
+          StyledTooltipContent,
+          {
+            $isVisible: isVisible,
+            $backgroundColor: backgroundColor,
+            $width: width,
+            $height: height,
+            $direction: direction,
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx9(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx9(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/ui-legacy/Components/Bulk/Bulk.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var Bulk = ({
   onClose,
   leftTitle,
@@ -687,7 +821,7 @@ var Bulk = ({
   const mainColor = colors[variant] || colors.blue_700;
   const textColorStyle = colors[textColor] || colors.white;
   const hoverColorStyle = colors[hoverColor] || colors.blue_900;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Box,
     {
       background: mainColor,
@@ -699,11 +833,11 @@ var Bulk = ({
         zIndex: 500,
         borderRadius: "12px"
       },
-      children: /* @__PURE__ */ jsxs(Row, { alignItems: "center", children: [
-        leftTitle && /* @__PURE__ */ jsxs(Row, { gap: 24, alignItems: "center", children: [
-          /* @__PURE__ */ jsx9(Icon, { name: "xmark", color: "white", size: "l", onClick: onClose }),
-          /* @__PURE__ */ jsx9(Text, { color: textColorStyle, weight: "bold", size: "s", wrap: "nowrap", children: leftTitle }),
-          /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsxs2(Row, { alignItems: "center", children: [
+        leftTitle && /* @__PURE__ */ jsxs2(Row, { gap: 24, alignItems: "center", children: [
+          /* @__PURE__ */ jsx10(Icon, { name: "xmark", color: "white", size: "l", onClick: onClose }),
+          /* @__PURE__ */ jsx10(Text, { color: textColorStyle, weight: "bold", size: "s", wrap: "nowrap", children: leftTitle }),
+          /* @__PURE__ */ jsx10(
             Divider,
             {
               orientation: "vertical",
@@ -713,9 +847,9 @@ var Bulk = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(Row, { alignItems: "center", children: sections.map((section, idx) => {
+        /* @__PURE__ */ jsx10(Row, { alignItems: "center", children: sections.map((section, idx) => {
           const isLast = idx === sections.length - 1;
-          return /* @__PURE__ */ jsxs(
+          const sectionButton = /* @__PURE__ */ jsxs2(
             Row,
             {
               gap: 6,
@@ -740,7 +874,7 @@ var Bulk = ({
                   e.currentTarget.style.background = mainColor;
               },
               children: [
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   Icon,
                   {
                     name: section.icon,
@@ -749,7 +883,7 @@ var Bulk = ({
                     family: "regular"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   Text,
                   {
                     color: textColorStyle,
@@ -763,6 +897,7 @@ var Bulk = ({
             },
             section.title
           );
+          return section.disabled && section.disabledTooltip ? /* @__PURE__ */ jsx10(Tooltip, { data: [section.disabledTooltip], children: sectionButton }, section.title) : sectionButton;
         }) })
       ] })
     }
@@ -770,21 +905,21 @@ var Bulk = ({
 };
 
 // src/ui-legacy/Components/Collapse/Collapse.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
-import styled8 from "styled-components";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Wrapper = styled8.div`
+import { useState as useState2, useRef, useEffect, useCallback } from "react";
+import styled9 from "styled-components";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Wrapper = styled9.div`
   overflow: hidden;
   transition: height 0.25s ease;
   height: ${(p) => p.$height}px;
 `;
-var Inner = styled8.div`
+var Inner = styled9.div`
   max-height: ${(p) => p.$maxHeight ? `${p.$maxHeight}px` : "none"};
   overflow-y: ${(p) => p.$maxHeight ? "auto" : "visible"};
 `;
 var Collapse = ({ open, children, maxHeight }) => {
   const innerRef = useRef(null);
-  const [height, setHeight] = useState(0);
+  const [height, setHeight] = useState2(0);
   const recalc = useCallback(() => {
     if (open && innerRef.current) {
       const full = innerRef.current.scrollHeight;
@@ -800,13 +935,13 @@ var Collapse = ({ open, children, maxHeight }) => {
     observer.observe(innerRef.current);
     return () => observer.disconnect();
   }, [open, recalc]);
-  return /* @__PURE__ */ jsx10(Wrapper, { $height: height, children: /* @__PURE__ */ jsx10(Inner, { ref: innerRef, $maxHeight: maxHeight, children }) });
+  return /* @__PURE__ */ jsx11(Wrapper, { $height: height, children: /* @__PURE__ */ jsx11(Inner, { ref: innerRef, $maxHeight: maxHeight, children }) });
 };
 
 // src/ui-legacy/Components/Button/Button.tsx
 import { useRef as useRef2 } from "react";
-import styled9 from "styled-components";
-import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+import styled10 from "styled-components";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultSizes = {
   xs: { height: 32, paddingX: 16, textSize: "xs" },
   s: { height: 36, paddingX: 16, textSize: "s" },
@@ -835,7 +970,7 @@ var shouldForwardProp4 = (p) => ![
   "iconOnlySize",
   "noHover"
 ].includes(p);
-var StyledButton = styled9.button.withConfig({
+var StyledButton = styled10.button.withConfig({
   shouldForwardProp: shouldForwardProp4
 })`
   position: relative;
@@ -927,7 +1062,7 @@ var StyledButton = styled9.button.withConfig({
       border-radius: 6px;
     `}
 `;
-var Loader = styled9.span`
+var Loader = styled10.span`
   border: 3px solid transparent;
   border-top: 3px solid currentColor;
   border-radius: 50%;
@@ -980,7 +1115,7 @@ var Button = (_a) => {
   ]);
   const ref = useRef2(null);
   const sizeConfig = defaultSizes[size];
-  const renderIconSlot = (icon) => typeof icon === "string" ? /* @__PURE__ */ jsx11(
+  const renderIconSlot = (icon) => typeof icon === "string" ? /* @__PURE__ */ jsx12(
     Icon,
     {
       name: icon,
@@ -989,7 +1124,7 @@ var Button = (_a) => {
       color: iconColor != null ? iconColor : outline ? variant : colors.white
     }
   ) : icon;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     StyledButton,
     __spreadProps(__spreadValues({
       ref,
@@ -1007,10 +1142,10 @@ var Button = (_a) => {
       iconOnlySize
     }, rest), {
       children: [
-        isLoading && /* @__PURE__ */ jsx11(Loader, {}),
-        !isLoading && /* @__PURE__ */ jsxs2(Row, { gap: "8", fullwidth: true, justifyContent: "center", alignItems: "center", children: [
+        isLoading && /* @__PURE__ */ jsx12(Loader, {}),
+        !isLoading && /* @__PURE__ */ jsxs3(Row, { gap: "8", fullwidth: true, justifyContent: "center", alignItems: "center", children: [
           iconLeft && renderIconSlot(iconLeft),
-          label && /* @__PURE__ */ jsx11(
+          label && /* @__PURE__ */ jsx12(
             Text,
             {
               size: sizeConfig.textSize,
@@ -1029,10 +1164,10 @@ var Button = (_a) => {
 
 // src/ui-legacy/Components/Modal/Modal.tsx
 import { useEffect as useEffect2 } from "react";
-import styled10 from "styled-components";
-import { Fragment, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import styled11 from "styled-components";
+import { Fragment, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var shouldForwardProp5 = (prop) => !["width", "height", "minHeight", "padding", "backgroundColor"].includes(prop);
-var ModalBackdrop = styled10.div`
+var ModalBackdrop = styled11.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -1042,7 +1177,7 @@ var ModalBackdrop = styled10.div`
   backdrop-filter: blur(5px);
   z-index: 4;
 `;
-var ModalContainer = styled10.div.withConfig({ shouldForwardProp: shouldForwardProp5 })`
+var ModalContainer = styled11.div.withConfig({ shouldForwardProp: shouldForwardProp5 })`
   position: fixed;
   top: 50%;
   left: 50%;
@@ -1065,7 +1200,7 @@ var ModalContainer = styled10.div.withConfig({ shouldForwardProp: shouldForwardP
   max-height: 90%;
   overflow: auto;
 `;
-var ModalHeader = styled10.div`
+var ModalHeader = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1073,14 +1208,14 @@ var ModalHeader = styled10.div`
   border-bottom: 1px solid #ddd;
   width: 100%;
 `;
-var ModalCore = styled10.div`
+var ModalCore = styled11.div`
   padding: 20px;
   background-color: white;
   border-radius: 0 0 10px 10px;
   overflow: auto;
   height: 100%;
 `;
-var ModalClose = styled10.span`
+var ModalClose = styled11.span`
   font-size: 32px;
   color: #fff;
   cursor: pointer;
@@ -1114,9 +1249,9 @@ var Modal = (props) => {
       document.body.classList.remove("modal-open");
     };
   }, [showModal]);
-  return showModal && /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx12(ModalBackdrop, { onClick: hideModal }),
-    /* @__PURE__ */ jsxs3(
+  return showModal && /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx13(ModalBackdrop, { onClick: hideModal }),
+    /* @__PURE__ */ jsxs4(
       ModalContainer,
       {
         width,
@@ -1125,11 +1260,11 @@ var Modal = (props) => {
         backgroundColor,
         minHeight,
         children: [
-          /* @__PURE__ */ jsxs3(ModalHeader, { children: [
-            /* @__PURE__ */ jsx12(Text_default, { color: "white", weight: "700", children: title ? title : "DELIVERY CAR" }),
-            /* @__PURE__ */ jsx12(ModalClose, { onClick: hideModal, children: "\xD7" })
+          /* @__PURE__ */ jsxs4(ModalHeader, { children: [
+            /* @__PURE__ */ jsx13(Text_default, { color: "white", weight: "700", children: title ? title : "DELIVERY CAR" }),
+            /* @__PURE__ */ jsx13(ModalClose, { onClick: hideModal, children: "\xD7" })
           ] }),
-          /* @__PURE__ */ jsx12(ModalCore, { children })
+          /* @__PURE__ */ jsx13(ModalCore, { children })
         ]
       }
     )
@@ -1137,15 +1272,15 @@ var Modal = (props) => {
 };
 
 // src/ui-legacy/Components/ModalConfirmation/ModalConfirmation.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var ModalConfirmation = (props) => {
   const { isOpen, onConfirm, onCancel, isLoading, width } = props;
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx13(Modal, { showModal: isOpen, closeModal: onCancel, width, children: /* @__PURE__ */ jsxs4(Col, { gap: "16", justifyContent: "center", alignItems: "center", fullWidth: true, children: [
-    /* @__PURE__ */ jsx13(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx13(Text, { align: "center", margin: "1em 0", size: "xl", children: "\xCAtes-vous s\xFBr de vouloir faire cette action ?" }) }),
-    /* @__PURE__ */ jsxs4(Row, { gap: "8", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx13(Button, { onClick: onCancel, variant: "danger", children: "Annuler" }),
-      /* @__PURE__ */ jsx13(Button, { variant: "success", onClick: onConfirm, isLoading, children: "Confirmer" })
+  return /* @__PURE__ */ jsx14(Modal, { showModal: isOpen, closeModal: onCancel, width, children: /* @__PURE__ */ jsxs5(Col, { gap: "16", justifyContent: "center", alignItems: "center", fullWidth: true, children: [
+    /* @__PURE__ */ jsx14(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx14(Text, { align: "center", margin: "1em 0", size: "xl", children: "\xCAtes-vous s\xFBr de vouloir faire cette action ?" }) }),
+    /* @__PURE__ */ jsxs5(Row, { gap: "8", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx14(Button, { onClick: onCancel, variant: "danger", children: "Annuler" }),
+      /* @__PURE__ */ jsx14(Button, { variant: "success", onClick: onConfirm, isLoading, children: "Confirmer" })
     ] })
   ] }) });
 };
@@ -1154,8 +1289,8 @@ var ModalConfirmation = (props) => {
 import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/ui-legacy/Components/Bubble/Bubble.tsx
-import styled11, { css, keyframes } from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import styled12, { css, keyframes } from "styled-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var textSizes3 = {
   xxs: ".4em",
   xs: ".6em",
@@ -1202,7 +1337,7 @@ var shouldForwardProp6 = (prop) => ![
   "pulse",
   "pointer"
 ].includes(prop);
-var StyledBubble = styled11.span.withConfig({
+var StyledBubble = styled12.span.withConfig({
   shouldForwardProp: shouldForwardProp6
 })`
   color: ${(props) => resolveColor2(props.color, "inherit")};
@@ -1235,141 +1370,7 @@ var StyledBubble = styled11.span.withConfig({
 `;
 var Bubble = (_a) => {
   var _b = _a, { children } = _b, otherProps = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx14(StyledBubble, __spreadProps(__spreadValues({}, otherProps), { children }));
-};
-
-// src/ui-legacy/Components/Tooltip/Tooltip.tsx
-import { useState as useState2 } from "react";
-import styled12 from "styled-components";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
-var StyledTooltipWrapper = styled12.div`
-  position: relative;
-  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
-  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
-  cursor: pointer;
-`;
-var StyledTooltipContent = styled12.div`
-  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
-  background-color: ${(props) => props.$backgroundColor || colors.black};
-  color: ${colors.white};
-  text-align: center;
-  padding: 8px;
-  border-radius: 4px;
-  position: absolute;
-  width: ${(props) => props.$width || "200px"};
-  height: ${(props) => props.$height || "auto"};
-  opacity: ${(props) => props.$isVisible ? 1 : 0};
-  transition: opacity 0.3s;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-
-  ${(props) => {
-  switch (props.$direction) {
-    case "top":
-      return `
-          bottom: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
-          }
-        `;
-    case "bottom":
-      return `
-          top: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
-          }
-        `;
-    case "left":
-      return `
-          top: 50%;
-          right: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
-          }
-        `;
-    case "right":
-    default:
-      return `
-          top: 50%;
-          left: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            right: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
-          }
-        `;
-  }
-}}
-`;
-var Tooltip = ({
-  backgroundColor,
-  data = [],
-  width,
-  height,
-  direction = "top",
-  fullWidth = false,
-  children
-}) => {
-  const [isVisible, setIsVisible] = useState2(false);
-  const handleMouseEnter = () => setIsVisible(true);
-  const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs5(
-    StyledTooltipWrapper,
-    {
-      $fullWidth: fullWidth,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        /* @__PURE__ */ jsx15(
-          StyledTooltipContent,
-          {
-            $isVisible: isVisible,
-            $backgroundColor: backgroundColor,
-            $width: width,
-            $height: height,
-            $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx15(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx15(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx15(StyledBubble, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 
 // src/ui-legacy/Components/NewModal/NewModal.tsx

package/dist/ui/index.d.mts

@@ -662,7 +662,7 @@ interface RadioProps extends VariantProps<typeof radioVariants> {
 declare const Radio: ({ items, value, onChange, disabled, color, width, className, }: RadioProps) => react.JSX.Element;
 
 declare const trackVariants: (props?: ({
-    height?: "sm" | "md" | "lg" | null | undefined;
+    height?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressBarProps extends VariantProps<typeof trackVariants> {
     /** Sur la plage `min`–`max`, clampée. */

package/dist/ui/index.d.ts

@@ -662,7 +662,7 @@ interface RadioProps extends VariantProps<typeof radioVariants> {
 declare const Radio: ({ items, value, onChange, disabled, color, width, className, }: RadioProps) => react.JSX.Element;
 
 declare const trackVariants: (props?: ({
-    height?: "sm" | "md" | "lg" | null | undefined;
+    height?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressBarProps extends VariantProps<typeof trackVariants> {
     /** Sur la plage `min`–`max`, clampée. */

package/dist/ui/index.js

@@ -3314,7 +3314,8 @@ var trackVariants2 = (0, import_class_variance_authority12.cva)(
       height: {
         sm: "h-1.5",
         md: "h-2",
-        lg: "h-3"
+        lg: "h-3",
+        xl: "h-4"
       }
     },
     defaultVariants: { height: "md" }

package/dist/ui/index.mjs

@@ -3144,7 +3144,8 @@ var trackVariants2 = cva12(
       height: {
         sm: "h-1.5",
         md: "h-2",
-        lg: "h-3"
+        lg: "h-3",
+        xl: "h-4"
       }
     },
     defaultVariants: { height: "md" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.342",
+  "version": "1.0.344",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",