design-zystem 1.0.341 → 1.0.343

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