@internxt/ui 0.1.11 → 0.1.13

package/dist/index.es.js

@@ -1,8 +1,8 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.loader-container{width:100%;height:90%}.loader06{position:absolute;left:49%;top:50%}.loader06:before{content:"";border:4px solid rgba(0,82,236,.5);border-radius:50%;width:67.2px;height:67.2px;position:absolute;top:-9.6px;left:-9.6px;animation:loader-scale 1s ease-out infinite;animation-delay:1s;opacity:0}.loader06:after{content:"";border:4px solid #0052ec;border-radius:50%;width:56px;height:56px;position:absolute;top:-4px;left:-4px;animation:loader-scale 1s ease-out infinite;animation-delay:.5s}.loader-text{position:absolute;top:calc(50% + 3rem);left:50%;transform:translate(-50%)}@keyframes loader-scale{0%{transform:scale(0);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:0}}.custom-range-slider{width:100%;height:6px;background-color:#fff;border-radius:50%;outline:none;position:relative}input[type=range]{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:"100%";background:#d5d5d5;border-radius:16px;outline:none}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:6px}input[type=range]::-moz-track{appearance:none;height:6px}input[type=range]::-ms-track{appearance:none;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}input[type=range]::-moz-range-thumb{appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}input[type=range]::-ms-thumb{appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 import { jsx as f, jsxs as R, Fragment as mn } from "react/jsx-runtime";
-import { X as $a, CaretRight as S0, DotsThree as Da, CaretUp as I0, Warning as Oa, Copy as A0, Eye as T0, EyeSlash as E0, MagnifyingGlass as L0, WarningOctagon as R0, CheckCircle as $0, ArrowUp as D0, ArrowDown as O0, LockIcon as k0, DotsNineIcon as M0, SidebarSimpleIcon as Aa } from "@phosphor-icons/react";
 import * as Ir from "react";
-import Ta, { useState as ue, useRef as en, useEffect as Ce, forwardRef as P0, isValidElement as ka, cloneElement as B0 } from "react";
+import Aa, { useEffect as Ce, useState as ue, isValidElement as $a, useRef as en, forwardRef as S0, cloneElement as I0 } from "react";
+import { DotsThree as Da, ArrowUp as A0, ArrowDown as T0, CaretUp as E0, Warning as Oa, Copy as L0, Eye as R0, EyeSlash as $0, MagnifyingGlass as D0, X as ka, WarningOctagon as O0, CheckCircle as k0, CaretRight as M0, LockIcon as P0, DotsNineIcon as B0, SidebarSimpleIcon as Ta } from "@phosphor-icons/react";
 function W0({
   fullName: s,
   diameter: g,
@@ -64,915 +64,21 @@ const H0 = {
 }) => {
   const w = l ? H0[l] : g;
   return s ? /* @__PURE__ */ f(U0, { src: s, diameter: w, className: p, style: N }) : /* @__PURE__ */ f(W0, { diameter: w, className: p, fullName: x });
-}, vp = ({
-  isOpen: s,
-  title: g,
-  subTitle: l,
-  dialogRounded: p,
-  children: x,
-  onClose: N,
-  classes: w,
-  panelClasses: C,
-  titleClasses: A,
-  closeClass: D,
-  weightIcon: O,
-  bgColor: T,
-  dataTest: M,
-  hideCloseButton: z
-}) => /* @__PURE__ */ f(
+}, vp = ({ className: s = "", children: g }) => /* @__PURE__ */ f(
   "div",
   {
-    "data-test": M,
-    className: `${s ? "flex" : "hidden"} ${w || ""} absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`,
-    children: /* @__PURE__ */ R(
-      "div",
-      {
-        className: `${C || ""} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
-        -translate-y-1/2 flex-col overflow-hidden  ${p ? "rounded-2xl" : "rounded-lg pt-8"} text-gray-100 ${T || "bg-surface"}`,
-        children: [
-          /* @__PURE__ */ R("div", { className: `${l ? "justify-between bg-gray-1 p-5" : ""} flex flex-row items-start`, children: [
-            g ? /* @__PURE__ */ R("div", { className: "relative flex max-w-full flex-1 flex-col truncate", children: [
-              /* @__PURE__ */ f("span", { className: `${A || ""} truncate text-xl`, title: g, children: g }),
-              /* @__PURE__ */ f("span", { className: "max-w-fit flex-1 truncate text-base font-normal text-gray-50", children: l })
-            ] }) : null,
-            z ? null : /* @__PURE__ */ f(
-              "div",
-              {
-                className: `relative ml-auto cursor-pointer bg-surface
-           transition duration-200 ease-in-out ${D || "text-primary hover:text-primary-dark"} `,
-                children: /* @__PURE__ */ f($a, { role: "button", onClick: N, size: 28, weight: O })
-              }
-            )
-          ] }),
-          x
-        ]
-      }
-    )
+    className: `rounded-xl border border-gray-10 bg-surface p-5 shadow-[0_12px_20px_0_rgba(0,0,0,0.02)] dark:bg-gray-1 ${s}`,
+    children: g
   }
-), z0 = (s) => {
-  const g = s.match(/px-(\d+(\.\d+)?)/), l = s.match(/py-(\d+(\.\d+)?)/), p = g ? g[1] : void 0, x = l ? l[1] : void 0;
-  return { px: p, py: x };
-}, G0 = ({
-  children: s,
-  options: g,
-  classButton: l,
-  menuItems: p,
-  classMenuItems: x,
-  openDirection: N,
-  dropdownActionsContext: w,
-  item: C = {}
-}) => {
-  const [A, D] = ue(!1), O = N === "left" ? "origin-top-left" : "origin-top-right", T = en(null);
-  Ce(() => {
-    const ie = (se) => {
-      T.current && !T.current.contains(se.target) && D(!1);
-    };
-    return document.addEventListener("mousedown", ie), document.addEventListener("contextmenu", ie), () => {
-      document.removeEventListener("mousedown", ie), document.removeEventListener("contextmenu", ie);
-    };
-  }, []);
-  const M = g ? g.map((ie) => ({
-    name: ie.text,
-    action: () => ie.onClick()
-  })) : [], z = p ? p.map((ie) => ({
-    node: ie
-  })) : [], W = w || [], ne = [...M, ...z, ...W], S = () => D((ie) => !ie), E = () => D(!1), { px: j, py: V } = z0(x);
-  return /* @__PURE__ */ R("div", { className: "relative outline-none min-w-breadcrumb", ref: T, children: [
-    /* @__PURE__ */ f(
-      "button",
-      {
-        className: `cursor-pointer outline-none ${l}`,
-        onClick: S,
-        "aria-expanded": A,
-        "aria-haspopup": "menu",
-        children: typeof s == "function" ? s({ open: A }) : s
-      }
-    ),
-    /* @__PURE__ */ f(
-      "div",
-      {
-        className: `absolute ${N === "left" ? "left-0" : "right-0"} 
-          transform shadow-subtle-hard transition-all duration-100 ease-in-out ${A ? `scale-100 opacity-100 ${O}` : "pointer-events-none scale-95 opacity-0"}`,
-        "data-testid": "menu-dropdown",
-        children: /* @__PURE__ */ f("div", { className: `absolute ${x}`, children: /* @__PURE__ */ f(Ba, { item: C, isOpen: A, handleMenuClose: E, menu: ne, paddingX: j, paddingY: V }) })
-      }
-    )
-  ] });
-}, Ea = (s) => {
-  const [{ isOver: g, canDrop: l }, p] = s.useDrop(
-    () => ({
-      accept: s.acceptedTypes,
-      collect: (w) => ({
-        isOver: w.isOver(),
-        canDrop: w.canDrop()
-      }),
-      canDrop: s.canItemDrop(s.item),
-      drop: s.onItemDropped(
-        s.item,
-        s.namePath,
-        s.isSomeItemSelected,
-        s.selectedItems,
-        s.dispatch
-      )
-    }),
-    [s.selectedItems]
-  ), x = (w) => {
-    w.active && w.onClick && w.onClick();
-  }, N = g && l ? "drag-over-effect" : "";
-  return /* @__PURE__ */ f(mn, { children: !s.item.active && !s.item.dialog && s.menu ? /* @__PURE__ */ f(s.menu, { item: s.item, items: s.items, onItemClicked: x }) : /* @__PURE__ */ R(
-    "div",
-    {
-      ref: p,
-      className: `flex ${s.isHiddenInList ? "w-full" : "max-w-fit"} ${s.item.isFirstPath ? "shrink-0 pr-1" : "min-w-breadcrumb flex-1 px-1.5 py-1.5"} cursor-pointer flex-row items-center truncate font-medium ${N}
-        ${!s.item.active || s.item.isFirstPath && s.totalBreadcrumbsLength === 1 ? "text-gray-80" : "text-gray-50 hover:text-gray-80"}`,
-      onClick: () => x(s.item),
-      onKeyDown: () => {
-      },
-      "data-cy": s?.breadcrumbButtonDataCy,
-      children: [
-        s.itemComponent && /* @__PURE__ */ f(s.itemComponent, { className: "h-5 w-5" }),
-        s.item.icon ? s.item.icon : null,
-        s.item.label ? /* @__PURE__ */ f(
-          "span",
-          {
-            className: `max-w-sm flex-1 cursor-pointer truncate ${s.isHiddenInList && "pl-3 text-base"}`,
-            title: s.item.label,
-            children: s.item.label
-          }
-        ) : null
-      ]
-    },
-    s.item.uuid
-  ) });
-}, xp = (s) => {
-  const g = P0((p, x) => /* @__PURE__ */ f(
-    "div",
-    {
-      ref: x,
-      className: "flex cursor-pointer items-center hover:bg-gray-5 hover:text-gray-80 dark:hover:bg-gray-10",
-      children: p.children
-    }
-  ));
-  return /* @__PURE__ */ f("div", { className: "flex w-full items-center", children: (() => {
-    const p = s.items, x = [], N = [], w = (C) => /* @__PURE__ */ f("div", { className: "text-dgray-50 flex items-center", children: /* @__PURE__ */ f(S0, { weight: "bold", className: "h-4 w-4", "data-testid": "caret-right" }) }, C);
-    for (let C = 0; C < p.length; C++) {
-      const A = "breadcrumbSeparator-" + p[C].uuid + C.toString(), D = "breadcrumbItem-" + p[C].uuid + C.toString();
-      p.length > 3 && C !== 0 && C < p.length - 2 ? (C === 1 && x.push(w(A)), N.push(
-        /* @__PURE__ */ f(g, { children: /* @__PURE__ */ f(
-          Ea,
-          {
-            item: p[C],
-            isHiddenInList: !0,
-            totalBreadcrumbsLength: p.length,
-            items: p,
-            namePath: s.namePath,
-            isSomeItemSelected: s.isSomeItemSelected,
-            selectedItems: s.selectedItems,
-            onItemDropped: s.onItemDropped,
-            canItemDrop: s.canItemDrop,
-            itemComponent: s.itemComponent,
-            acceptedTypes: s.acceptedTypes,
-            dispatch: s.dispatch,
-            useDrop: s.useDrop
-          },
-          D
-        ) })
-      )) : (x.push(
-        /* @__PURE__ */ f(
-          Ea,
-          {
-            breadcrumbButtonDataCy: C === 0 ? s?.rootBreadcrumbItemDataCy : void 0,
-            item: p[C],
-            totalBreadcrumbsLength: p.length,
-            items: p,
-            menu: s.menu,
-            namePath: s.namePath,
-            isSomeItemSelected: s.isSomeItemSelected,
-            selectedItems: s.selectedItems,
-            onItemDropped: s.onItemDropped,
-            canItemDrop: s.canItemDrop,
-            acceptedTypes: s.acceptedTypes,
-            dispatch: s.dispatch,
-            useDrop: s.useDrop
-          },
-          D
-        )
-      ), C < p.length - 1 && x.push(w(A)));
-    }
-    if (N.length > 0) {
-      const C = /* @__PURE__ */ f(
-        G0,
-        {
-          openDirection: "left",
-          classMenuItems: `left-0 top-1 w-max max-h-80 overflow-y-auto
-          rounded-md border border-gray-10 bg-surface dark:bg-gray-5 shadow-subtle-hard z-10`,
-          menuItems: N,
-          children: ({ open: A }) => /* @__PURE__ */ f(
-            "div",
-            {
-              className: `flex h-8 w-8 items-center justify-center
-                rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${A ? "bg-gray-5" : ""}`,
-              children: /* @__PURE__ */ f(Da, { weight: "bold", className: "h-5 w-5" })
-            }
-          )
-        },
-        "breadcrumbDropdownItems"
-      );
-      x.splice(2, 0, C);
-    }
-    return x;
-  })() });
-}, K0 = ({
-  classNameContainer: s,
-  classNameLoader: g,
-  classNameText: l,
-  type: p = "spinner",
-  text: x,
-  size: N = 32
-}) => /* @__PURE__ */ f("div", { className: s, children: p === "spinner" ? /* @__PURE__ */ R(mn, { children: [
-  /* @__PURE__ */ R(
-    "svg",
-    {
-      className: `animate-spin ${g}`,
-      width: N,
-      height: N,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      role: "img",
-      children: [
-        /* @__PURE__ */ f("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ f(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: `M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
-                3 7.938l3-2.647z`
-          }
-        )
-      ]
-    }
-  ),
-  x && /* @__PURE__ */ f("p", { className: l, children: x })
-] }) : /* @__PURE__ */ R("div", { className: `loader-container ${g}`, children: [
-  /* @__PURE__ */ f("div", { className: "loader06" }),
-  x && /* @__PURE__ */ f("p", { className: `loader-text ${l}`, children: x })
-] }) }), Xi = ({
-  variant: s = "primary",
-  type: g = "button",
-  id: l,
-  children: p,
-  className: x = "",
-  disabled: N = !1,
-  onClick: w = () => {
-  },
-  onKeyDown: C = () => {
-  },
-  size: A = "default",
-  loading: D,
-  dataTest: O,
-  autofocus: T,
-  buttonDataCy: M,
-  buttonChildrenDataCy: z
-}) => {
-  let W = "";
-  return s === "primary" && !N ? W = `${D ? "bg-primary-dark" : "bg-primary"} active:bg-primary-dark text-white shadow-sm` : s === "primary" && N ? W = "bg-gray-30 text-white shadow-sm" : s === "destructive" && !N ? W = `${D ? "bg-red-dark" : "bg-red"} active:bg-red-dark text-white shadow-sm` : s === "destructive" && N ? W = "bg-gray-30 text-white shadow-sm" : s === "secondary" && !N ? W = "bg-surface dark:bg-gray-5 border border-gray-10 hover:border-gray-20 active:bg-gray-1 dark:active:bg-gray-10 text-gray-80 shadow-sm" : s === "secondary" && N ? W = "bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm" : s === "ghost" && !N ? W = "hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10" : s === "ghost" && N ? W = "text-gray-30" : s === "tertiary" && !N ? W = `${D ? "bg-white/45" : "bg-white/15"} active:bg-white/25 text-white shadow-sm border border-white/20 active:border-white hover:border-white/40 active:border-white 
-    transition-all duration-200` : s === "tertiary" && N && (W = "bg-white/45 text-white shadow-sm border border-white/20"), /* @__PURE__ */ R(
-    "button",
-    {
-      "data-cy": M,
-      id: l,
-      onClick: w,
-      onKeyDown: C,
-      disabled: N || D,
-      type: g,
-      "data-test": O,
-      autoFocus: T,
-      className: `${A === "default" ? "h-10 px-5" : "h-8 px-3.5"} relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
-      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
-      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
-      focus-visible:ring-primary/50 ${W} ${x}`,
-      children: [
-        D && /* @__PURE__ */ f(K0, { size: 18 }),
-        /* @__PURE__ */ f("div", { className: "flex items-center justify-center space-x-2", "data-cy": z, children: p })
-      ]
-    }
-  );
-}, wp = ({
-  children: s,
-  variant: g = "default",
-  active: l = !1,
-  onClick: p,
-  onClickToggleButton: x,
-  className: N = "",
-  dropdown: w,
-  indicator: C,
-  isOpen: A = !1,
-  handleOpen: D = () => {
-  },
-  handleClose: O = () => {
-  }
-}) => {
-  Ce(() => {
-    const S = (E) => {
-      if (A) {
-        const j = E.target, V = document.querySelector(`[data-circle-button="${g}"]`);
-        V && !V.contains(j) && O();
-      }
-    };
-    return document.addEventListener("click", S), () => {
-      document.removeEventListener("click", S);
-    };
-  }, [A, g]);
-  const T = (S) => {
-    S.stopPropagation(), w && (x?.(), A ? O() : D());
-  }, M = () => {
-    p?.();
-  }, z = () => {
-    switch (g) {
-      case "cancel":
-        return "bg-red hover:bg-red/85";
-      case "warning":
-        return l ? "bg-white/85" : "bg-white/25 hover:bg-white/35";
-      default:
-        return l ? "bg-white/85" : "bg-white/25 hover:bg-white/35";
-    }
-  }, W = () => C ? g === "warning" ? /* @__PURE__ */ f("div", { className: "absolute -top-1 -right-1 h-5 w-5 bg-orange border border-black/35 rounded-full flex items-center justify-center", children: /* @__PURE__ */ f(Oa, { size: 12, color: "black", weight: "bold" }) }) : /* @__PURE__ */ f(
-    "div",
-    {
-      className: `absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full ${C.className || ""}`,
-      children: C.icon
-    }
-  ) : null, ne = () => !w || g === "cancel" || g === "warning" ? null : /* @__PURE__ */ f(
-    "button",
-    {
-      onClick: T,
-      className: "absolute -top-1 -right-1 h-5 w-5 border bg-white border-black/35 rounded-full flex items-center justify-center hover:bg-gray-50",
-      children: /* @__PURE__ */ f(I0, { size: 10, color: "black", weight: "fill" })
-    }
-  );
-  return /* @__PURE__ */ R("div", { className: "relative w-11 h-11", "data-circle-button": g, children: [
-    /* @__PURE__ */ f(
-      "button",
-      {
-        onClick: M,
-        className: `
-          h-11 w-11
-          flex items-center justify-center
-          rounded-full
-          transition-all duration-200
-          ${z()}
-          ${N}
-        `,
-        children: s
-      }
-    ),
-    ne(),
-    W(),
-    A && w && g !== "cancel" && /* @__PURE__ */ f("div", { className: "absolute bottom-full mb-2 left-0", children: w })
-  ] });
-}, _p = ({ className: s = "", children: g }) => /* @__PURE__ */ f(
-  "div",
-  {
-    className: `rounded-xl border border-gray-10 bg-surface p-5 shadow-[0_12px_20px_0_rgba(0,0,0,0.02)] dark:bg-gray-1 ${s}`,
-    children: g
-  }
-), q0 = (s) => /* @__PURE__ */ Ir.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ Ir.createElement("path", { d: "m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z", fill: "currentColor" })), Y0 = (s) => /* @__PURE__ */ Ir.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ Ir.createElement("rect", { fill: "currentColor", height: 2, rx: 1, width: 12, x: 4, y: 9 })), Pa = ({
-  id: s,
-  checked: g = !0,
-  indeterminate: l = !1,
-  onClick: p,
-  required: x,
-  className: N,
-  checkboxDataCy: w,
-  disabled: C = !1
-}) => /* @__PURE__ */ R(
-  "label",
-  {
-    className: `relative h-5 w-5 rounded focus-within:outline-primary ${N}`,
-    onClick: C ? void 0 : p,
-    onKeyDown: () => {
-    },
-    children: [
-      /* @__PURE__ */ f(
-        "div",
-        {
-          onClick: (A) => A.preventDefault(),
-          "data-cy": w,
-          onKeyDown: () => {
-          },
-          className: `relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white ${C ? l || g ? "bg-gray-20 cursor-auto" : "border-gray-10 cursor-auto" : l || g ? "border-primary bg-primary" : "border-gray-30 hover:border-gray-40"}`,
-          children: l ? /* @__PURE__ */ f(Y0, { className: "absolute -inset-px" }) : g && /* @__PURE__ */ f(q0, { className: "absolute -inset-px" })
-        }
-      ),
-      /* @__PURE__ */ f(
-        "input",
-        {
-          id: s,
-          checked: g,
-          type: "checkbox",
-          required: x ?? !1,
-          readOnly: !0,
-          className: "base-checkbox h-0 w-0 appearance-none opacity-0",
-          disabled: C
-        }
-      )
-    ]
-  }
-), Ji = (s, g = []) => {
-  const l = (p) => {
-    if (["input", "textarea"].includes(document.activeElement?.tagName.toLowerCase() ?? "") && p.key.toLowerCase() !== "escape")
-      return;
-    const N = `${p.ctrlKey ? "ctrl+" : ""}${p.metaKey ? "meta+" : ""}${p.key.toLowerCase()}`;
-    s[N] && (p.preventDefault(), s[N]());
-  };
-  Ce(() => (window.addEventListener("keydown", l), () => {
-    window.removeEventListener("keydown", l);
-  }), g);
-}, Ba = ({
-  item: s,
-  menu: g,
-  isOpen: l,
-  genericEnterKey: p,
-  handleMenuClose: x,
-  paddingX: N = "px-4",
-  paddingY: w = "py-1.5"
-}) => {
-  const [C, A] = ue(null), [D, O] = ue(!1), T = (S) => {
-    A(S);
-  }, M = (S) => S?.separator || s && S?.disabled?.(s) || s && S?.isTitle?.(s), z = () => {
-    g && l && A((S) => {
-      const E = (se) => {
-        let fe = se, ge = g[fe];
-        for (; M(ge) && (fe = (fe + 1) % g.length, ge = g[fe], se !== fe); )
-          ;
-        return fe;
-      }, j = S === null ? 0 : (S + 1) % g.length, V = E(j), ie = g[V];
-      return M(ie) ? null : V;
-    });
-  }, W = () => {
-    g && l && A((S) => {
-      const E = (se) => {
-        let fe = se, ge = g[fe];
-        for (; M(ge) && (fe = (fe - 1 + g.length) % g.length, ge = g[fe], se !== fe); )
-          ;
-        return fe;
-      }, j = S === null ? g.length - 1 : (S - 1 + g.length) % g.length, V = E(j), ie = g[V];
-      return M(ie) ? null : V;
-    });
-  }, ne = () => {
-    g && l && A((S) => {
-      if (S !== null) {
-        const E = g ? g[S] : void 0;
-        if (s && E && "action" in E && E.action && E.action(s), s && E && "node" in E && E.node && ka(E.node)) {
-          const j = E.node.props.onClick;
-          j && j();
-        }
-      } else p && p();
-      return O(!0), null;
-    });
-  };
-  return Ce(() => {
-    D && (x(), O(!1));
-  }, [D]), Ji(
-    {
-      arrowdown: z,
-      arrowup: W,
-      enter: ne
-    },
-    [l]
-  ), /* @__PURE__ */ f("div", { className: `z-20 mt-0 flex flex-col rounded-lg bg-surface ${w} outline-none dark:bg-gray-5`, children: g?.map((S, E) => /* @__PURE__ */ f("div", { children: S && S.separator ? /* @__PURE__ */ f("div", { className: "my-0.5 flex w-full flex-row px-4", children: /* @__PURE__ */ f("div", { className: "h-px w-full bg-gray-10" }) }) : S && /* @__PURE__ */ f(
-    "div",
-    {
-      className: `${M(S) ? "pointer-events-none" : ""}`,
-      onClick: (j) => {
-        M(S) || (j.stopPropagation(), s && S.action?.(s), S.onClick && S.onClick(), x());
-      },
-      onMouseEnter: () => T(E),
-      children: /* @__PURE__ */ R(
-        "div",
-        {
-          className: `flex cursor-pointer flex-row whitespace-nowrap ${N} ${w} text-base
-                    ${s && S.disabled?.(s) && "font-medium text-gray-50"}
-                    ${s && S.isTitle?.(s) && !S.disabled?.(s) && "font-medium text-gray-100"}
-                    ${C === E && s && !S.disabled?.(s) && "bg-gray-5 text-gray-100 dark:bg-gray-10"}
-                    ${s && !S.disabled?.(s) && !S.isTitle?.(s) && C !== E && "text-gray-80"}
-                  `,
-          children: [
-            S.node ? S.node : /* @__PURE__ */ R("div", { className: "flex flex-row items-center space-x-2", children: [
-              S.icon && /* @__PURE__ */ f(S.icon, { size: 20 }),
-              /* @__PURE__ */ f("span", { children: S.name })
-            ] }),
-            S.keyboardShortcutOptions && /* @__PURE__ */ R("span", { className: "ml-5 flex grow items-center justify-end text-sm text-gray-40", children: [
-              S.keyboardShortcutOptions?.keyboardShortcutIcon && /* @__PURE__ */ f(S.keyboardShortcutOptions.keyboardShortcutIcon, { size: 14 }),
-              S.keyboardShortcutOptions?.keyboardShortcutText ?? ""
-            ] })
-          ]
-        }
-      )
-    }
-  ) }, E)) });
-}, Z0 = 40, X0 = ({
-  item: s,
-  menuItemsRef: g,
-  menu: l,
-  openedFromRightClick: p,
-  posX: x,
-  posY: N,
-  isContextMenuCutOff: w,
-  isOpen: C,
-  genericEnterKey: A,
-  handleMenuClose: D
-}) => /* @__PURE__ */ f(
-  "div",
-  {
-    className: "z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5",
-    style: p ? { position: "absolute", left: x, top: N, zIndex: 99 } : {
-      position: "absolute",
-      right: 20,
-      [w ? "bottom" : "top"]: Z0,
-      zIndex: 9999
-    },
-    ref: g,
-    children: /* @__PURE__ */ f(
-      Ba,
-      {
-        item: s,
-        isOpen: C,
-        genericEnterKey: A,
-        handleMenuClose: D,
-        menu: l
-      }
-    )
-  }
-), J0 = ({
-  children: s,
-  title: g,
-  subtitle: l,
-  popsFrom: p,
-  className: x,
-  delayInMs: N,
-  arrow: w = !0
-}) => {
-  const [C, A] = ue(!1), D = en(null);
-  function O() {
-    A(!0);
-  }
-  function T() {
-    A(!1);
-  }
-  function M() {
-    D.current !== null && clearTimeout(D.current), O();
-  }
-  function z() {
-    N ? D.current = setTimeout(() => {
-      D.current = null, T();
-    }, N) : T();
-  }
-  let W = "", ne = "", S = "";
-  switch (p) {
-    case "right":
-      W = "left-full top-1/2 -translate-y-1/2 ml-1.5", ne = "flex-row-reverse", S = "polygon(100% 0%, 100% 100%, 0% 50%)";
-      break;
-    case "left":
-      W = "right-full top-1/2 -translate-y-1/2 mr-1.5", ne = "flex-row", S = "polygon(0% 0%, 0% 100%, 100% 50%)";
-      break;
-    case "top":
-      W = "bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom", ne = "flex-col", S = "polygon(0% 0%, 100% 0%, 50% 100%)";
-      break;
-    case "bottom":
-      W = "top-full left-1/2 -translate-x-1/2 mt-1.5", ne = "flex-col-reverse", S = "polygon(50% 0%, 0% 100%, 100% 100%)";
-      break;
-  }
-  return /* @__PURE__ */ R(
-    "div",
-    {
-      className: `relative w-max ${x}`,
-      onMouseEnter: M,
-      onMouseLeave: z,
-      style: { lineHeight: 0 },
-      children: [
-        /* @__PURE__ */ R(
-          "div",
-          {
-            className: `pointer-events-none absolute ${W} flex items-center ${ne} drop-shadow-tooltip transition-all duration-150 ${C ? "scale-100 opacity-100" : "scale-50 opacity-0"}`,
-            children: [
-              /* @__PURE__ */ R("div", { className: "w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5", children: [
-                /* @__PURE__ */ f("p", { className: "text-base text-white", children: g }),
-                l && /* @__PURE__ */ f("p", { className: "-mt-1 text-sm text-gray-40", children: l })
-              ] }),
-              w && /* @__PURE__ */ f(
-                "div",
-                {
-                  className: `bg-gray-90 dark:bg-gray-5 ${p === "bottom" || p === "top" ? "h-1.5 w-4" : "h-4 w-1.5"}`,
-                  style: { clipPath: S, marginTop: p === "top" ? "-1px" : void 0 },
-                  "data-testid": "tooltip-arrow"
-                }
-              )
-            ]
-          }
-        ),
-        s
-      ]
-    }
-  );
-}, yp = ({
-  className: s = "",
-  classText: g = "select-text text-gray-80",
-  text: l,
-  copiedText: p = "Copied!",
-  copyToClipboardText: x = "Copy to clipboard"
-}) => {
-  const [N, w] = ue(!1);
-  async function C() {
-    await navigator.clipboard.writeText(l), w(!0), setTimeout(() => w(!1), 1e3);
-  }
-  return /* @__PURE__ */ R(
-    "div",
-    {
-      className: `${s} flex h-11 items-center justify-between rounded-md border border-gray-10 bg-gray-5 px-4`,
-      children: [
-        /* @__PURE__ */ f("p", { className: `${g}`, children: l }),
-        /* @__PURE__ */ f(
-          J0,
-          {
-            className: "ml-6",
-            popsFrom: "bottom",
-            title: N ? p : x,
-            delayInMs: N ? 500 : void 0,
-            children: /* @__PURE__ */ f("button", { disabled: N, onClick: C, children: /* @__PURE__ */ f(A0, { className: "shrink-0 text-gray-50 hover:text-gray-60", size: 24 }) })
-          }
-        )
-      ]
-    }
-  );
-}, bp = ({
-  isOpen: s,
-  onClose: g,
-  onPrimaryAction: l,
-  onSecondaryAction: p,
-  title: x,
-  subtitle: N,
-  primaryAction: w,
-  secondaryAction: C,
-  primaryActionColor: A,
-  isLoading: D,
-  maxWidth: O = "sm"
-}) => {
-  const [T, M] = ue(s), [z, W] = ue("opacity-0"), [ne, S] = ue("scale-95");
-  return Ce(() => {
-    if (s) {
-      const E = setTimeout(() => {
-        W("opacity-100"), S("scale-100");
-      }, 10);
-      return M(!0), () => clearTimeout(E);
-    } else {
-      W("opacity-0"), S("scale-95");
-      const E = setTimeout(() => {
-        M(!1);
-      }, 150);
-      return () => clearTimeout(E);
-    }
-  }, [s]), Ce(() => {
-    const E = (j) => {
-      j.key === "Escape" && g();
-    };
-    return s && window.addEventListener("keydown", E), () => {
-      window.removeEventListener("keydown", E);
-    };
-  }, [s, g]), /* @__PURE__ */ f(mn, { children: T && /* @__PURE__ */ R("div", { className: `fixed inset-0 z-50 ${s ? "" : "pointer-events-none"}`, children: [
-    /* @__PURE__ */ f(
-      "div",
-      {
-        className: `absolute inset-0 bg-gray-100/50 transition-opacity duration-150 dark:bg-black/75 ${z}`,
-        onClick: g,
-        "data-testid": "dialog-overlay"
-      }
-    ),
-    /* @__PURE__ */ R(
-      "div",
-      {
-        className: `absolute left-1/2 top-1/2 w-full max-w-${O} -translate-x-1/2 -translate-y-1/2 transform rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${ne} ${z}`,
-        children: [
-          /* @__PURE__ */ R("div", { className: "flex flex-col space-y-2", children: [
-            /* @__PURE__ */ f("p", { className: "text-2xl font-medium text-gray-100", children: x }),
-            /* @__PURE__ */ f("p", { className: "text-gray-60", children: N })
-          ] }),
-          /* @__PURE__ */ R("div", { className: "mt-5 flex justify-end space-x-2", children: [
-            /* @__PURE__ */ f(Xi, { variant: "secondary", onClick: p, disabled: D, children: C }),
-            /* @__PURE__ */ f(
-              Xi,
-              {
-                onClick: l,
-                loading: D,
-                variant: A === "primary" ? "primary" : "destructive",
-                children: w
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) });
-}, Np = ({ icon: s, title: g, subtitle: l, action: p, contextMenuClick: x }) => {
-  let N = null;
-  return p && (N = /* @__PURE__ */ R(Xi, { variant: "secondary", onClick: p.onClick, children: [
-    /* @__PURE__ */ f("span", { children: p.text }),
-    /* @__PURE__ */ f(p.icon, { size: 20 })
-  ] })), /* @__PURE__ */ f("div", { className: "h-full w-full p-8", onContextMenu: x, children: /* @__PURE__ */ R("div", { className: "flex h-full flex-col items-center justify-center space-y-6 pb-20", children: [
-    /* @__PURE__ */ f("div", { className: "pointer-events-none mx-auto w-max", children: s }),
-    /* @__PURE__ */ R("div", { className: "pointer-events-none space-y-1 text-center", children: [
-      /* @__PURE__ */ f("p", { className: "text-2xl font-medium text-gray-100", children: g }),
-      /* @__PURE__ */ f("p", { className: "text-lg text-gray-60", children: l })
-    ] }),
-    N
-  ] }) });
-}, Cp = ({ leftContent: s, rightContent: g, className: l = "" }) => /* @__PURE__ */ R(
-  "header",
-  {
-    className: `
-        flex
-        items-center
-        justify-between
-        ${l}
-      `,
-    children: [
-      /* @__PURE__ */ f("div", { className: "flex items-center space-x-4", children: s }),
-      /* @__PURE__ */ f("div", { className: "flex items-center space-x-4", children: g })
-    ]
-  }
-), Wa = ({
-  children: s,
-  handleNextPage: g,
-  hasMoreItems: l,
-  loader: p,
-  scrollableTarget: x,
-  classNameLoader: N
-}) => {
-  const w = en(null), C = en(null), [A, D] = ue(!1);
-  Ce(() => {
-    x && (C.current = document.getElementById(x));
-    const T = new IntersectionObserver(
-      ([z]) => {
-        z.isIntersecting && (l ? (g(), D(!0)) : D(!1));
-      },
-      {
-        root: C.current || null,
-        rootMargin: "100px",
-        threshold: 0
-      }
-    ), M = w.current;
-    return M && T.observe(M), () => {
-      M && T.unobserve(M);
-    };
-  }, [l, g, x]);
-  const O = Ta.Children.map(s, (T, M) => M === Ta.Children.count(s) - 1 && l ? /* @__PURE__ */ R(mn, { children: [
-    T,
-    /* @__PURE__ */ f("div", { ref: w, className: N, children: A && p })
-  ] }) : T);
-  return /* @__PURE__ */ f("div", { children: O });
-}, Sp = ({
-  className: s = "",
-  label: g,
-  variant: l = "default",
-  accent: p,
-  disabled: x,
-  placeholder: N,
-  value: w,
-  maxLength: C,
-  onChange: A,
-  onClear: D,
-  message: O,
-  onFocus: T,
-  onBlur: M,
-  autofocus: z = !1,
-  autoComplete: W = "on",
-  dataTest: ne,
-  name: S,
-  required: E = !1,
-  labelDataCy: j,
-  inputDataCy: V,
-  onKeyDown: ie,
-  inputClassName: se = "",
-  borderRadius: fe = "rounded-md",
-  fontClasses: ge = "text-lg font-normal"
-}) => {
-  const we = en(null), nn = () => {
-    we && we.current && (l !== "email" && (we.current.selectionStart = we.current.value.length, we.current.selectionEnd = we.current.value.length), we.current.focus());
-  };
-  Ce(() => {
-    (O || z) && nn();
-  }, [O, z, x]);
-  let Ae;
-  switch (p) {
-    case "error":
-      Ae = "border-red focus:border-red ring-red";
-      break;
-    case "warning":
-      Ae = "focus:border-orange ring-orange";
-      break;
-    case "success":
-      Ae = "focus:border-green ring-green";
-      break;
-    default:
-      Ae = "focus:border-primary ring-primary";
-      break;
-  }
-  const tn = l === "search" ? "border-transparent" : "border-gray-20 disabled:border-gray-10 hover:border-gray-30", vn = l === "search" ? "placeholder-gray-40" : "placeholder-gray-30", Fn = l === "search" ? "pr-4 pl-10" : "px-4", [rn, Un] = ue(!1), [Ke, Oe] = ue(!1), _e = /* @__PURE__ */ R("div", { className: "relative", children: [
-    /* @__PURE__ */ f(
-      "input",
-      {
-        ref: we,
-        disabled: x,
-        className: `inxt-input h-10 w-full border bg-transparent ${ge} text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 
-          ${tn} ${Ae} ${vn} ${Fn} ${fe} ${se}`,
-        type: l === "password" && !rn ? "password" : l === "email" ? "email" : "text",
-        placeholder: N,
-        onChange: (le) => A && A(le.target.value),
-        onFocus: () => {
-          T && T(), Oe(!0);
-        },
-        onBlur: () => {
-          M && M(), Oe(!1);
-        },
-        autoComplete: W,
-        value: w,
-        maxLength: C,
-        "data-test": ne,
-        "data-cy": V,
-        name: S,
-        required: E,
-        onKeyDown: ie ?? void 0
-      }
-    ),
-    l === "password" && Ke && /* @__PURE__ */ f(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: (le) => {
-          le.preventDefault(), Un(!rn);
-        },
-        className: "absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer bg-transparent py-2 pl-2 text-gray-80",
-        children: rn ? /* @__PURE__ */ f(T0, { size: 24 }) : /* @__PURE__ */ f(E0, { size: 24 })
-      }
-    ),
-    l === "search" && /* @__PURE__ */ f(
-      L0,
-      {
-        className: `absolute left-4 top-1/2 -translate-y-1/2 ${x ? "text-gray-20" : "text-gray-40"}`,
-        size: 20
-      }
-    ),
-    l === "search" && w && !x && /* @__PURE__ */ f(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        onMouseDown: (le) => {
-          le.preventDefault(), D && D();
-        },
-        className: `absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer py-2 pl-2 text-gray-40 
-            ${Ke ? "bg-white" : "bg-gray-5"}`,
-        children: /* @__PURE__ */ f($a, { size: 20 })
-      }
-    )
-  ] });
-  let fn, Z;
-  switch (p) {
-    case "success":
-      fn = "text-green", Z = $0;
-      break;
-    case "warning":
-      fn = "text-orange", Z = Oa;
-      break;
-    case "error":
-      fn = "text-red", Z = R0;
-      break;
-    default:
-      fn = "text-gray-80";
-  }
-  return /* @__PURE__ */ R("div", { className: `${s}`, children: [
-    g ? /* @__PURE__ */ R("label", { children: [
-      /* @__PURE__ */ f("span", { "data-cy": j, className: `text-sm ${x ? "text-gray-40" : "text-gray-80"}`, children: g }),
-      _e
-    ] }) : _e,
-    C && /* @__PURE__ */ f("p", { className: "font-regular mt-1 text-right text-sm text-gray-50", children: `${w?.length ?? 0}/${C}` }),
-    O && /* @__PURE__ */ R("div", { className: `mt-0.5 flex items-center ${fn}`, children: [
-      Z && /* @__PURE__ */ f(Z, { size: 16, weight: "fill" }),
-      /* @__PURE__ */ f("p", { className: "ml-1 text-sm", children: O })
-    ] })
-  ] });
-};
+);
 var Sr = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Q0(s) {
+function z0(s) {
   return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
 }
 var kt = { exports: {} };
-var V0 = kt.exports, La;
-function j0() {
-  return La || (La = 1, function(s, g) {
+var G0 = kt.exports, Ea;
+function K0() {
+  return Ea || (Ea = 1, function(s, g) {
     (function() {
       var l, p = "4.17.23", x = 200, N = "Unsupported core-js use. Try https://npms.io/search?q=ponyfill.", w = "Expected a function", C = "Invalid `variable` option passed into `_.template`", A = "__lodash_hash_undefined__", D = 500, O = "__lodash_placeholder__", T = 1, M = 2, z = 4, W = 1, ne = 2, S = 1, E = 2, j = 4, V = 8, ie = 16, se = 32, fe = 64, ge = 128, we = 256, nn = 512, Ae = 30, tn = "...", vn = 800, Fn = 16, rn = 1, Un = 2, Ke = 3, Oe = 1 / 0, _e = 9007199254740991, fn = 17976931348623157e292, Z = NaN, le = 4294967295, Tn = le - 1, cn = le >>> 1, Hn = [
         ["ary", ge],
@@ -4632,979 +3738,1873 @@ function print() { __p += __j.call(arguments, '') }
               var a = this.value();
               return n.apply(H(a) ? a : [], i);
             }
-            return this[t](function(o) {
-              return n.apply(H(o) ? o : [], i);
-            });
-          };
-        }), dn(J.prototype, function(e, n) {
-          var t = u[n];
-          if (t) {
-            var r = t.name + "";
-            te.call(st, r) || (st[r] = []), st[r].push({ name: n, func: t });
+            return this[t](function(o) {
+              return n.apply(H(o) ? o : [], i);
+            });
+          };
+        }), dn(J.prototype, function(e, n) {
+          var t = u[n];
+          if (t) {
+            var r = t.name + "";
+            te.call(st, r) || (st[r] = []), st[r].push({ name: n, func: t });
+          }
+        }), st[fr(l, E).name] = [{
+          name: "wrapper",
+          func: l
+        }], J.prototype.clone = Ps, J.prototype.reverse = Bs, J.prototype.value = Ws, u.prototype.at = ph, u.prototype.chain = mh, u.prototype.commit = vh, u.prototype.next = xh, u.prototype.plant = _h, u.prototype.reverse = yh, u.prototype.toJSON = u.prototype.valueOf = u.prototype.value = bh, u.prototype.first = u.prototype.head, yt && (u.prototype[yt] = wh), u;
+      }, ut = ms();
+      Kn ? ((Kn.exports = ut)._ = ut, Gr._ = ut) : Se._ = ut;
+    }).call(G0);
+  }(kt, kt.exports)), kt.exports;
+}
+var q0 = K0();
+const Y0 = /* @__PURE__ */ z0(q0), Ji = (s, g = []) => {
+  const l = (p) => {
+    if (["input", "textarea"].includes(document.activeElement?.tagName.toLowerCase() ?? "") && p.key.toLowerCase() !== "escape")
+      return;
+    const N = `${p.ctrlKey ? "ctrl+" : ""}${p.metaKey ? "meta+" : ""}${p.key.toLowerCase()}`;
+    s[N] && (p.preventDefault(), s[N]());
+  };
+  Ce(() => (window.addEventListener("keydown", l), () => {
+    window.removeEventListener("keydown", l);
+  }), g);
+}, Pa = ({
+  item: s,
+  menu: g,
+  isOpen: l,
+  genericEnterKey: p,
+  handleMenuClose: x,
+  paddingX: N = "px-4",
+  paddingY: w = "py-1.5"
+}) => {
+  const [C, A] = ue(null), [D, O] = ue(!1), T = (S) => {
+    A(S);
+  }, M = (S) => S?.separator || s && S?.disabled?.(s) || s && S?.isTitle?.(s), z = () => {
+    g && l && A((S) => {
+      const E = (se) => {
+        let fe = se, ge = g[fe];
+        for (; M(ge) && (fe = (fe + 1) % g.length, ge = g[fe], se !== fe); )
+          ;
+        return fe;
+      }, j = S === null ? 0 : (S + 1) % g.length, V = E(j), ie = g[V];
+      return M(ie) ? null : V;
+    });
+  }, W = () => {
+    g && l && A((S) => {
+      const E = (se) => {
+        let fe = se, ge = g[fe];
+        for (; M(ge) && (fe = (fe - 1 + g.length) % g.length, ge = g[fe], se !== fe); )
+          ;
+        return fe;
+      }, j = S === null ? g.length - 1 : (S - 1 + g.length) % g.length, V = E(j), ie = g[V];
+      return M(ie) ? null : V;
+    });
+  }, ne = () => {
+    g && l && A((S) => {
+      if (S !== null) {
+        const E = g ? g[S] : void 0;
+        if (s && E && "action" in E && E.action && E.action(s), s && E && "node" in E && E.node && $a(E.node)) {
+          const j = E.node.props.onClick;
+          j && j();
+        }
+      } else p && p();
+      return O(!0), null;
+    });
+  };
+  return Ce(() => {
+    D && (x(), O(!1));
+  }, [D]), Ji(
+    {
+      arrowdown: z,
+      arrowup: W,
+      enter: ne
+    },
+    [l]
+  ), /* @__PURE__ */ f("div", { className: `z-20 mt-0 flex flex-col rounded-lg bg-surface ${w} outline-none dark:bg-gray-5`, children: g?.map((S, E) => /* @__PURE__ */ f("div", { children: S && S.separator ? /* @__PURE__ */ f("div", { className: "my-0.5 flex w-full flex-row px-4", children: /* @__PURE__ */ f("div", { className: "h-px w-full bg-gray-10" }) }) : S && /* @__PURE__ */ f(
+    "div",
+    {
+      className: `${M(S) ? "pointer-events-none" : ""}`,
+      onClick: (j) => {
+        M(S) || (j.stopPropagation(), s && S.action?.(s), S.onClick && S.onClick(), x());
+      },
+      onMouseEnter: () => T(E),
+      children: /* @__PURE__ */ R(
+        "div",
+        {
+          className: `flex cursor-pointer flex-row whitespace-nowrap ${N} ${w} text-base
+                    ${s && S.disabled?.(s) && "font-medium text-gray-50"}
+                    ${s && S.isTitle?.(s) && !S.disabled?.(s) && "font-medium text-gray-100"}
+                    ${C === E && s && !S.disabled?.(s) && "bg-gray-5 text-gray-100 dark:bg-gray-10"}
+                    ${s && !S.disabled?.(s) && !S.isTitle?.(s) && C !== E && "text-gray-80"}
+                  `,
+          children: [
+            S.node ? S.node : /* @__PURE__ */ R("div", { className: "flex flex-row items-center space-x-2", children: [
+              S.icon && /* @__PURE__ */ f(S.icon, { size: 20 }),
+              /* @__PURE__ */ f("span", { children: S.name })
+            ] }),
+            S.keyboardShortcutOptions && /* @__PURE__ */ R("span", { className: "ml-5 flex grow items-center justify-end text-sm text-gray-40", children: [
+              S.keyboardShortcutOptions?.keyboardShortcutIcon && /* @__PURE__ */ f(S.keyboardShortcutOptions.keyboardShortcutIcon, { size: 14 }),
+              S.keyboardShortcutOptions?.keyboardShortcutText ?? ""
+            ] })
+          ]
+        }
+      )
+    }
+  ) }, E)) });
+}, Z0 = 40, X0 = ({
+  item: s,
+  menuItemsRef: g,
+  menu: l,
+  openedFromRightClick: p,
+  posX: x,
+  posY: N,
+  isContextMenuCutOff: w,
+  isOpen: C,
+  genericEnterKey: A,
+  handleMenuClose: D
+}) => /* @__PURE__ */ f(
+  "div",
+  {
+    className: "z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5",
+    style: p ? { position: "absolute", left: x, top: N, zIndex: 99 } : {
+      position: "absolute",
+      right: 20,
+      [w ? "bottom" : "top"]: Z0,
+      zIndex: 9999
+    },
+    ref: g,
+    children: /* @__PURE__ */ f(
+      Pa,
+      {
+        item: s,
+        isOpen: C,
+        genericEnterKey: A,
+        handleMenuClose: D,
+        menu: l
+      }
+    )
+  }
+), J0 = (s) => /* @__PURE__ */ Ir.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ Ir.createElement("path", { d: "m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z", fill: "currentColor" })), Q0 = (s) => /* @__PURE__ */ Ir.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...s }, /* @__PURE__ */ Ir.createElement("rect", { fill: "currentColor", height: 2, rx: 1, width: 12, x: 4, y: 9 })), Ba = ({
+  id: s,
+  checked: g = !0,
+  indeterminate: l = !1,
+  onClick: p,
+  required: x,
+  className: N,
+  checkboxDataCy: w,
+  disabled: C = !1
+}) => /* @__PURE__ */ R(
+  "label",
+  {
+    className: `relative h-5 w-5 rounded focus-within:outline-primary ${N}`,
+    onClick: C ? void 0 : p,
+    onKeyDown: () => {
+    },
+    children: [
+      /* @__PURE__ */ f(
+        "div",
+        {
+          onClick: (A) => A.preventDefault(),
+          "data-cy": w,
+          onKeyDown: () => {
+          },
+          className: `relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white ${C ? l || g ? "bg-gray-20 cursor-auto" : "border-gray-10 cursor-auto" : l || g ? "border-primary bg-primary" : "border-gray-30 hover:border-gray-40"}`,
+          children: l ? /* @__PURE__ */ f(Q0, { className: "absolute -inset-px" }) : g && /* @__PURE__ */ f(J0, { className: "absolute -inset-px" })
+        }
+      ),
+      /* @__PURE__ */ f(
+        "input",
+        {
+          id: s,
+          checked: g,
+          type: "checkbox",
+          required: x ?? !1,
+          readOnly: !0,
+          className: "base-checkbox h-0 w-0 appearance-none opacity-0",
+          disabled: C
+        }
+      )
+    ]
+  }
+), V0 = 500, j0 = ({
+  item: s,
+  listIndex: g,
+  itemComposition: l,
+  selected: p,
+  isOpen: x,
+  columnsWidth: N,
+  onClose: w,
+  onSelectedChanged: C,
+  onDoubleClick: A,
+  onClick: D,
+  onClickContextMenu: O,
+  onThreeDotsButtonPressed: T,
+  disableItemCompositionStyles: M,
+  menu: z,
+  onMouseEnter: W,
+  onMouseLeave: ne,
+  genericEnterKey: S
+}) => {
+  const E = en(), j = en(null), V = en(null), [ie, se] = ue(!1), [fe, ge] = ue(0), [we, nn] = ue(0), [Ae, tn] = ue({ width: 0, height: 0 }), [vn, Fn] = ue(!1);
+  Ce(() => {
+    V.current && (V.current.offsetHeight !== Ae.height || V.current?.offsetWidth !== Ae.width) && tn({
+      width: V.current.offsetWidth,
+      height: V.current.offsetHeight
+    });
+  }, [Ae.height, Ae.width]), Ce(() => {
+    ie || rn(), x || (se(!1), ge(0), nn(0));
+  }, [x]);
+  function rn() {
+    const Z = E.current, le = V?.current?.offsetHeight || 300;
+    if (!Z) return;
+    const { bottom: Tn } = Z.getBoundingClientRect(), cn = window.innerHeight, Hn = Tn + le > cn;
+    Fn(Hn);
+  }
+  const Un = (Z) => {
+    Z.preventDefault(), O?.(Z);
+    const le = V?.current?.offsetWidth || 240, Tn = V?.current?.offsetHeight || 300, cn = j?.current?.getBoundingClientRect(), { innerWidth: Hn, innerHeight: hn } = window;
+    let Le = Z.clientX - (cn?.left || 0), zn = Z.clientY - (cn?.top || 0);
+    Z.clientX + le > Hn && (Le = Le - le), Z.clientY + Tn > hn && Z.clientY > V0 && (zn = zn - Tn), ge(Le), nn(zn), se(!0);
+  }, Ke = (Z) => {
+    Z.preventDefault(), T?.(Z), se(!1);
+  }, Oe = (Z) => {
+    D?.(Z), ie && _e();
+  }, _e = () => {
+    w();
+  };
+  return Ji(
+    {
+      r: _e,
+      backspace: _e,
+      enter: () => {
+        x || S();
+      }
+    },
+    []
+  ), /* @__PURE__ */ R(
+    "div",
+    {
+      onDoubleClick: A,
+      onClick: Oe,
+      onContextMenu: Un,
+      ref: j,
+      className: `group relative flex h-14 flex-row items-center pl-14 pr-5 ${p ? "bg-primary/10 text-gray-100 dark:bg-primary/20" : "focus-within:bg-gray-1 hover:bg-gray-1"} ${x ? "z-40" : ""}`,
+      onMouseEnter: W,
+      onMouseLeave: ne,
+      children: [
+        x && p && /* @__PURE__ */ f(
+          X0,
+          {
+            item: s,
+            menu: z,
+            menuItemsRef: V,
+            openedFromRightClick: ie,
+            isOpen: x,
+            posX: fe,
+            posY: we,
+            isContextMenuCutOff: vn,
+            genericEnterKey: S,
+            handleMenuClose: _e
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: `absolute left-5 top-0 flex h-full w-0 flex-row items-center justify-start p-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100 ${p && "opacity-100"}`,
+            children: /* @__PURE__ */ f(
+              Ba,
+              {
+                onClick: (Z) => {
+                  Z.stopPropagation(), C(!p);
+                },
+                checked: p,
+                checkboxDataCy: `driveListItemCheckbox${g}`
+              }
+            )
+          }
+        ),
+        M ? /* @__PURE__ */ f(
+          "div",
+          {
+            className: `grow-1 relative flex h-full w-full flex-row items-center border-b ${p ? "border-primary/5" : "border-gray-5"}`,
+            children: l[0](s)
+          },
+          0
+        ) : new Array(l.length).fill(0).map((Z, le) => /* @__PURE__ */ f(
+          "div",
+          {
+            className: `relative flex h-full shrink-0 flex-row items-center border-b ${p ? "border-primary/5" : "border-gray-5"} ${N[le]}`,
+            children: l[le](s)
+          },
+          le
+        )),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: `flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b ${p ? "border-primary/5" : "border-gray-5"}`,
+            children: /* @__PURE__ */ f(
+              "button",
+              {
+                ref: E,
+                className: `flex h-10 w-10 flex-col items-center justify-center rounded-md opacity-0 outline-none focus-visible:opacity-100 group-hover:opacity-100 ${p ? "text-gray-80 hover:bg-primary/10 focus-visible:bg-primary/10" : "text-gray-60 hover:bg-gray-10 focus-visible:bg-gray-10"}`,
+                onClick: (Z) => {
+                  Ke(Z);
+                },
+                children: /* @__PURE__ */ f(Da, { size: 24, weight: "bold" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, ep = ({
+  selectedItems: s,
+  onTopSelectionCheckboxClick: g,
+  items: l,
+  header: p,
+  orderBy: x,
+  onOrderableColumnClicked: N,
+  menu: w,
+  displayMenuDiv: C,
+  isVerticalScrollbarVisible: A,
+  checkboxDataCy: D,
+  onClose: O
+}) => /* @__PURE__ */ f("div", { onClick: O, onContextMenu: O, className: "flex min-w-max h-12 shrink-0 flex-row px-5", children: /* @__PURE__ */ R("div", { className: "flex h-full min-w-full flex-row items-center border-b border-gray-10", children: [
+  /* @__PURE__ */ f("div", { className: "flex h-full flex-row items-center justify-between pr-4", children: /* @__PURE__ */ f(
+    Ba,
+    {
+      checked: s.length > 0,
+      indeterminate: l.length > s.length && s.length > 0,
+      onClick: g,
+      checkboxDataCy: D
+    }
+  ) }),
+  p.map((T) => /* @__PURE__ */ R(
+    "button",
+    {
+      onClick: T.orderable ? () => {
+        N(T);
+      } : void 0,
+      "data-cy": "buttonDataCy" in T && T?.buttonDataCy,
+      className: `flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  ${T.width} ${T.orderable ? "cursor-pointer hover:text-gray-80" : ""}`,
+      children: [
+        /* @__PURE__ */ f("span", { "data-cy": "textDataCy" in T && T?.textDataCy, children: T.label }),
+        T.name === x?.field && T.orderable && (x?.direction === "ASC" ? /* @__PURE__ */ f(A0, { size: 14, weight: "bold" }) : /* @__PURE__ */ f(T0, { size: 14, weight: "bold" }))
+      ]
+    },
+    T.name.toString()
+  )),
+  A && /* @__PURE__ */ f("div", { className: "mr-15px" }),
+  (w || C) && /* @__PURE__ */ f("div", { className: "flex h-full w-12 shrink-0" })
+] }) }), np = ({ skeletonItem: s, columns: g }) => /* @__PURE__ */ R(
+  "div",
+  {
+    "data-testid": "skeleton-loader-item",
+    className: "group relative flex h-14 animate-pulse flex-row items-center px-5",
+    children: [
+      /* @__PURE__ */ f("div", { className: "w-9 shrink-0" }),
+      new Array(g.length).fill(0).map((l, p) => /* @__PURE__ */ f(
+        "div",
+        {
+          className: `relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 ${g[p]}`,
+          children: s?.[p]
+        },
+        `${l}-${p}`
+      )),
+      /* @__PURE__ */ f("div", { className: "flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5" })
+    ]
+  }
+), tp = ({ skeleton: s }) => /* @__PURE__ */ f(mn, { children: new Array(s.length).fill(0).map((g, l) => /* @__PURE__ */ f(
+  np,
+  {
+    skeletonItem: s[l].skeletonItem,
+    columns: s[l].columns
+  },
+  `skinSkeletonRow${l}`
+)) }), Wa = ({
+  children: s,
+  handleNextPage: g,
+  hasMoreItems: l,
+  loader: p,
+  scrollableTarget: x,
+  classNameLoader: N
+}) => {
+  const w = en(null), C = en(null), [A, D] = ue(!1);
+  Ce(() => {
+    x && (C.current = document.getElementById(x));
+    const T = new IntersectionObserver(
+      ([z]) => {
+        z.isIntersecting && (l ? (g(), D(!0)) : D(!1));
+      },
+      {
+        root: C.current || null,
+        rootMargin: "100px",
+        threshold: 0
+      }
+    ), M = w.current;
+    return M && T.observe(M), () => {
+      M && T.unobserve(M);
+    };
+  }, [l, g, x]);
+  const O = Aa.Children.map(s, (T, M) => M === Aa.Children.count(s) - 1 && l ? /* @__PURE__ */ R(mn, { children: [
+    T,
+    /* @__PURE__ */ f("div", { ref: w, className: N, children: A && p })
+  ] }) : T);
+  return /* @__PURE__ */ f("div", { children: O });
+}, xp = ({
+  header: s,
+  checkboxDataCy: g,
+  items: l,
+  itemComposition: p,
+  selectedItems: x,
+  onClick: N,
+  onDoubleClick: w,
+  onEnterPressed: C,
+  onSelectedItemsChanged: A,
+  isLoading: D,
+  forceLoading: O,
+  skinSkeleton: T,
+  emptyState: M,
+  orderBy: z,
+  onOrderByChanged: W,
+  onNextPage: ne,
+  hasMoreItems: S,
+  menu: E,
+  displayMenuDiv: j,
+  className: V,
+  disableItemCompositionStyles: ie,
+  onMouseEnter: se,
+  onMouseLeave: fe,
+  headerBackgroundColor: ge = "bg-surface",
+  keyBoardShortcutActions: we,
+  disableKeyboardShortcuts: nn
+}) => {
+  const Ae = en(null), tn = (F) => x.some((X) => F.id === X.id), vn = document.getElementById("scrollableList"), Fn = vn && vn.scrollHeight > vn.clientHeight, rn = !S && l.length === 0 && !D, [Un, Ke] = ue(null), Oe = new Array(25).fill(0).map(() => ({
+    skeletonItem: T,
+    columns: s.map((F) => F.width)
+  })), _e = /* @__PURE__ */ f(tp, { skeleton: Oe });
+  Ce(() => {
+    const F = (X) => {
+      Ae.current && !Ae.current.contains(X.target) && Ke(null);
+    };
+    return document.addEventListener("mousedown", F), document.addEventListener("contextmenu", F), () => {
+      document.removeEventListener("mousedown", F), document.removeEventListener("contextmenu", F);
+    };
+  }, []);
+  const fn = () => {
+    ne?.();
+  }, Z = () => {
+    const F = x.map((X) => ({ props: X, value: !1 }));
+    A(F);
+  }, le = (F) => {
+    const X = [...x.map((me) => ({ props: me, value: !1 })), { props: F, value: !0 }];
+    A(X);
+  }, Tn = () => {
+    if (x.length === 1) {
+      const X = x[0];
+      C?.(X);
+    }
+  }, cn = () => {
+    const X = Y0.difference(l, x).map((me) => ({ props: me, value: !0 }));
+    A(X);
+  }, Hn = () => {
+    x.length === l.length ? Z() : cn();
+  }, hn = (F) => {
+    if (Ln(), !F.orderable || !W) return;
+    const X = z?.field === F.name;
+    W(X ? { field: F.name, direction: z.direction === "ASC" ? "DESC" : "ASC" } : { field: F.name, direction: F.defaultDirection ?? "ASC" });
+  }, Le = (F) => {
+    nn || F();
+  }, zn = () => {
+    we?.onRKeyPressed?.();
+  }, En = () => {
+    we?.onBackspaceKeyPressed?.();
+  };
+  Ji(
+    {
+      "ctrl+a": () => Le(cn),
+      "meta+a": () => Le(cn),
+      esc: () => Le(Z),
+      r: () => Le(zn),
+      backspace: () => Le(En),
+      delete: () => Le(En)
+    },
+    [l, x, nn]
+  );
+  const Gn = (F, X) => {
+    X.metaKey || X.ctrlKey ? A([{ props: F, value: !tn(F) }]) : tn(F) || N?.(F), Ke(null);
+  }, Ar = (F, X) => {
+    X.preventDefault(), tn(F) || le(F), Ke(F.id);
+  }, Ln = () => {
+    Ke(null);
+  }, et = (F, X) => {
+    F.stopPropagation(), Ke((me) => me ? null : X.id), tn(X) || le(X);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      id: "generic-list-component",
+      className: `relative isolate flex h-full flex-col overflow-x-auto overflow-y-hidden ${V}`,
+      ref: Ae,
+      children: /* @__PURE__ */ R("div", { id: "scrollableList", className: "flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto", children: [
+        /* @__PURE__ */ f("div", { className: `sticky top-0 z-50 ${ge}`, children: rn ? null : /* @__PURE__ */ f(
+          ep,
+          {
+            selectedItems: x,
+            onTopSelectionCheckboxClick: Hn,
+            items: l,
+            header: s,
+            orderBy: z,
+            onOrderableColumnClicked: hn,
+            menu: E,
+            displayMenuDiv: j,
+            isVerticalScrollbarVisible: Fn,
+            checkboxDataCy: g,
+            onClose: Ln
+          }
+        ) }),
+        rn ? M : l.length > 0 && !O ? /* @__PURE__ */ f(
+          Wa,
+          {
+            handleNextPage: fn,
+            hasMoreItems: !!S,
+            loader: _e,
+            scrollableTarget: "scrollableList",
+            children: l.map((F, X) => /* @__PURE__ */ f(
+              j0,
+              {
+                item: F,
+                listIndex: X,
+                isOpen: Un === F.id,
+                onClose: Ln,
+                itemComposition: p,
+                selected: tn(F),
+                onDoubleClick: w && (() => w(F)),
+                onClick: (me) => Gn(F, me),
+                onClickContextMenu: (me) => Ar(F, me),
+                onThreeDotsButtonPressed: (me) => et(me, F),
+                columnsWidth: s.map((me) => me.width),
+                menu: E,
+                onSelectedChanged: (me) => A([{ props: F, value: me }]),
+                disableItemCompositionStyles: ie,
+                onMouseEnter: se,
+                onMouseLeave: fe,
+                genericEnterKey: Tn
+              },
+              F.id
+            ))
+          }
+        ) : /* @__PURE__ */ f("div", { children: _e }),
+        l.length > 0 && /* @__PURE__ */ f(
+          "div",
+          {
+            "data-testid": "outside-click-element",
+            className: "h-full w-full py-6",
+            onClick: Z,
+            onContextMenu: (F) => {
+              F.preventDefault(), Z();
+            }
+          }
+        )
+      ] })
+    }
+  );
+}, wp = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("div", { className: g, children: /* @__PURE__ */ f("table", { className: "w-full", ...l, children: s }) }), _p = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("thead", { className: g, ...l, children: s }), yp = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("tbody", { className: g, ...l, children: s }), bp = ({ children: s, className: g, onClick: l, ...p }) => /* @__PURE__ */ f("tr", { onClick: l, className: g, ...p, children: s }), Np = ({ children: s, className: g, isHeader: l = !1, onClick: p, ...x }) => /* @__PURE__ */ f(l ? "th" : "td", { onClick: p, className: g, ...x, children: s }), rp = ({
+  classNameContainer: s,
+  classNameLoader: g,
+  classNameText: l,
+  type: p = "spinner",
+  text: x,
+  size: N = 32
+}) => /* @__PURE__ */ f("div", { className: s, children: p === "spinner" ? /* @__PURE__ */ R(mn, { children: [
+  /* @__PURE__ */ R(
+    "svg",
+    {
+      className: `animate-spin ${g}`,
+      width: N,
+      height: N,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      role: "img",
+      children: [
+        /* @__PURE__ */ f("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ f(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: `M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
+                3 7.938l3-2.647z`
+          }
+        )
+      ]
+    }
+  ),
+  x && /* @__PURE__ */ f("p", { className: l, children: x })
+] }) : /* @__PURE__ */ R("div", { className: `loader-container ${g}`, children: [
+  /* @__PURE__ */ f("div", { className: "loader06" }),
+  x && /* @__PURE__ */ f("p", { className: `loader-text ${l}`, children: x })
+] }) }), Xi = ({
+  variant: s = "primary",
+  type: g = "button",
+  id: l,
+  children: p,
+  className: x = "",
+  disabled: N = !1,
+  onClick: w = () => {
+  },
+  onKeyDown: C = () => {
+  },
+  size: A = "default",
+  loading: D,
+  dataTest: O,
+  autofocus: T,
+  buttonDataCy: M,
+  buttonChildrenDataCy: z
+}) => {
+  let W = "";
+  return s === "primary" && !N ? W = `${D ? "bg-primary-dark" : "bg-primary"} active:bg-primary-dark text-white shadow-sm` : s === "primary" && N ? W = "bg-gray-30 text-white shadow-sm" : s === "destructive" && !N ? W = `${D ? "bg-red-dark" : "bg-red"} active:bg-red-dark text-white shadow-sm` : s === "destructive" && N ? W = "bg-gray-30 text-white shadow-sm" : s === "secondary" && !N ? W = "bg-surface dark:bg-gray-5 border border-gray-10 hover:border-gray-20 active:bg-gray-1 dark:active:bg-gray-10 text-gray-80 shadow-sm" : s === "secondary" && N ? W = "bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm" : s === "ghost" && !N ? W = "hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10" : s === "ghost" && N ? W = "text-gray-30" : s === "tertiary" && !N ? W = `${D ? "bg-white/45" : "bg-white/15"} active:bg-white/25 text-white shadow-sm border border-white/20 active:border-white hover:border-white/40 active:border-white 
+    transition-all duration-200` : s === "tertiary" && N && (W = "bg-white/45 text-white shadow-sm border border-white/20"), /* @__PURE__ */ R(
+    "button",
+    {
+      "data-cy": M,
+      id: l,
+      onClick: w,
+      onKeyDown: C,
+      disabled: N || D,
+      type: g,
+      "data-test": O,
+      autoFocus: T,
+      className: `${A === "default" ? "h-10 px-5" : "h-8 px-3.5"} relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 ${W} ${x}`,
+      children: [
+        D && /* @__PURE__ */ f(rp, { size: 18 }),
+        /* @__PURE__ */ f("div", { className: "flex items-center justify-center space-x-2", "data-cy": z, children: p })
+      ]
+    }
+  );
+}, Cp = ({ icon: s, title: g, subtitle: l, action: p, contextMenuClick: x }) => {
+  let N = null;
+  return p && (N = /* @__PURE__ */ R(Xi, { variant: "secondary", onClick: p.onClick, children: [
+    /* @__PURE__ */ f("span", { children: p.text }),
+    /* @__PURE__ */ f(p.icon, { size: 20 })
+  ] })), /* @__PURE__ */ f("div", { className: "h-full w-full p-8", onContextMenu: x, children: /* @__PURE__ */ R("div", { className: "flex h-full flex-col items-center justify-center space-y-6 pb-20", children: [
+    /* @__PURE__ */ f("div", { className: "pointer-events-none mx-auto w-max", children: s }),
+    /* @__PURE__ */ R("div", { className: "pointer-events-none space-y-1 text-center", children: [
+      /* @__PURE__ */ f("p", { className: "text-2xl font-medium text-gray-100", children: g }),
+      /* @__PURE__ */ f("p", { className: "text-lg text-gray-60", children: l })
+    ] }),
+    N
+  ] }) });
+}, Sp = ({
+  children: s,
+  variant: g = "default",
+  active: l = !1,
+  onClick: p,
+  onClickToggleButton: x,
+  className: N = "",
+  dropdown: w,
+  indicator: C,
+  isOpen: A = !1,
+  handleOpen: D = () => {
+  },
+  handleClose: O = () => {
+  }
+}) => {
+  Ce(() => {
+    const S = (E) => {
+      if (A) {
+        const j = E.target, V = document.querySelector(`[data-circle-button="${g}"]`);
+        V && !V.contains(j) && O();
+      }
+    };
+    return document.addEventListener("click", S), () => {
+      document.removeEventListener("click", S);
+    };
+  }, [A, g]);
+  const T = (S) => {
+    S.stopPropagation(), w && (x?.(), A ? O() : D());
+  }, M = () => {
+    p?.();
+  }, z = () => {
+    switch (g) {
+      case "cancel":
+        return "bg-red hover:bg-red/85";
+      case "warning":
+        return l ? "bg-white/85" : "bg-white/25 hover:bg-white/35";
+      default:
+        return l ? "bg-white/85" : "bg-white/25 hover:bg-white/35";
+    }
+  }, W = () => C ? g === "warning" ? /* @__PURE__ */ f("div", { className: "absolute -top-1 -right-1 h-5 w-5 bg-orange border border-black/35 rounded-full flex items-center justify-center", children: /* @__PURE__ */ f(Oa, { size: 12, color: "black", weight: "bold" }) }) : /* @__PURE__ */ f(
+    "div",
+    {
+      className: `absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full ${C.className || ""}`,
+      children: C.icon
+    }
+  ) : null, ne = () => !w || g === "cancel" || g === "warning" ? null : /* @__PURE__ */ f(
+    "button",
+    {
+      onClick: T,
+      className: "absolute -top-1 -right-1 h-5 w-5 border bg-white border-black/35 rounded-full flex items-center justify-center hover:bg-gray-50",
+      children: /* @__PURE__ */ f(E0, { size: 10, color: "black", weight: "fill" })
+    }
+  );
+  return /* @__PURE__ */ R("div", { className: "relative w-11 h-11", "data-circle-button": g, children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        onClick: M,
+        className: `
+          h-11 w-11
+          flex items-center justify-center
+          rounded-full
+          transition-all duration-200
+          ${z()}
+          ${N}
+        `,
+        children: s
+      }
+    ),
+    ne(),
+    W(),
+    A && w && g !== "cancel" && /* @__PURE__ */ f("div", { className: "absolute bottom-full mb-2 left-0", children: w })
+  ] });
+}, ip = ({
+  children: s,
+  title: g,
+  subtitle: l,
+  popsFrom: p,
+  className: x,
+  delayInMs: N,
+  arrow: w = !0
+}) => {
+  const [C, A] = ue(!1), D = en(null);
+  function O() {
+    A(!0);
+  }
+  function T() {
+    A(!1);
+  }
+  function M() {
+    D.current !== null && clearTimeout(D.current), O();
+  }
+  function z() {
+    N ? D.current = setTimeout(() => {
+      D.current = null, T();
+    }, N) : T();
+  }
+  let W = "", ne = "", S = "";
+  switch (p) {
+    case "right":
+      W = "left-full top-1/2 -translate-y-1/2 ml-1.5", ne = "flex-row-reverse", S = "polygon(100% 0%, 100% 100%, 0% 50%)";
+      break;
+    case "left":
+      W = "right-full top-1/2 -translate-y-1/2 mr-1.5", ne = "flex-row", S = "polygon(0% 0%, 0% 100%, 100% 50%)";
+      break;
+    case "top":
+      W = "bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom", ne = "flex-col", S = "polygon(0% 0%, 100% 0%, 50% 100%)";
+      break;
+    case "bottom":
+      W = "top-full left-1/2 -translate-x-1/2 mt-1.5", ne = "flex-col-reverse", S = "polygon(50% 0%, 0% 100%, 100% 100%)";
+      break;
+  }
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      className: `relative w-max ${x}`,
+      onMouseEnter: M,
+      onMouseLeave: z,
+      style: { lineHeight: 0 },
+      children: [
+        /* @__PURE__ */ R(
+          "div",
+          {
+            className: `pointer-events-none absolute ${W} flex items-center ${ne} drop-shadow-tooltip transition-all duration-150 ${C ? "scale-100 opacity-100" : "scale-50 opacity-0"}`,
+            children: [
+              /* @__PURE__ */ R("div", { className: "w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5", children: [
+                /* @__PURE__ */ f("p", { className: "text-base text-white", children: g }),
+                l && /* @__PURE__ */ f("p", { className: "-mt-1 text-sm text-gray-40", children: l })
+              ] }),
+              w && /* @__PURE__ */ f(
+                "div",
+                {
+                  className: `bg-gray-90 dark:bg-gray-5 ${p === "bottom" || p === "top" ? "h-1.5 w-4" : "h-4 w-1.5"}`,
+                  style: { clipPath: S, marginTop: p === "top" ? "-1px" : void 0 },
+                  "data-testid": "tooltip-arrow"
+                }
+              )
+            ]
           }
-        }), st[fr(l, E).name] = [{
-          name: "wrapper",
-          func: l
-        }], J.prototype.clone = Ps, J.prototype.reverse = Bs, J.prototype.value = Ws, u.prototype.at = ph, u.prototype.chain = mh, u.prototype.commit = vh, u.prototype.next = xh, u.prototype.plant = _h, u.prototype.reverse = yh, u.prototype.toJSON = u.prototype.valueOf = u.prototype.value = bh, u.prototype.first = u.prototype.head, yt && (u.prototype[yt] = wh), u;
-      }, ut = ms();
-      Kn ? ((Kn.exports = ut)._ = ut, Gr._ = ut) : Se._ = ut;
-    }).call(V0);
-  }(kt, kt.exports)), kt.exports;
-}
-var ep = j0();
-const np = /* @__PURE__ */ Q0(ep), tp = 500, rp = ({
-  item: s,
-  listIndex: g,
-  itemComposition: l,
-  selected: p,
-  isOpen: x,
-  columnsWidth: N,
-  onClose: w,
-  onSelectedChanged: C,
-  onDoubleClick: A,
-  onClick: D,
-  onClickContextMenu: O,
-  onThreeDotsButtonPressed: T,
-  disableItemCompositionStyles: M,
-  menu: z,
-  onMouseEnter: W,
-  onMouseLeave: ne,
-  genericEnterKey: S
+        ),
+        s
+      ]
+    }
+  );
+}, Ip = ({
+  className: s = "",
+  classText: g = "select-text text-gray-80",
+  text: l,
+  copiedText: p = "Copied!",
+  copyToClipboardText: x = "Copy to clipboard"
 }) => {
-  const E = en(), j = en(null), V = en(null), [ie, se] = ue(!1), [fe, ge] = ue(0), [we, nn] = ue(0), [Ae, tn] = ue({ width: 0, height: 0 }), [vn, Fn] = ue(!1);
-  Ce(() => {
-    V.current && (V.current.offsetHeight !== Ae.height || V.current?.offsetWidth !== Ae.width) && tn({
-      width: V.current.offsetWidth,
-      height: V.current.offsetHeight
-    });
-  }, [Ae.height, Ae.width]), Ce(() => {
-    ie || rn(), x || (se(!1), ge(0), nn(0));
-  }, [x]);
-  function rn() {
-    const Z = E.current, le = V?.current?.offsetHeight || 300;
-    if (!Z) return;
-    const { bottom: Tn } = Z.getBoundingClientRect(), cn = window.innerHeight, Hn = Tn + le > cn;
-    Fn(Hn);
+  const [N, w] = ue(!1);
+  async function C() {
+    await navigator.clipboard.writeText(l), w(!0), setTimeout(() => w(!1), 1e3);
   }
-  const Un = (Z) => {
-    Z.preventDefault(), O?.(Z);
-    const le = V?.current?.offsetWidth || 240, Tn = V?.current?.offsetHeight || 300, cn = j?.current?.getBoundingClientRect(), { innerWidth: Hn, innerHeight: hn } = window;
-    let Le = Z.clientX - (cn?.left || 0), zn = Z.clientY - (cn?.top || 0);
-    Z.clientX + le > Hn && (Le = Le - le), Z.clientY + Tn > hn && Z.clientY > tp && (zn = zn - Tn), ge(Le), nn(zn), se(!0);
-  }, Ke = (Z) => {
-    Z.preventDefault(), T?.(Z), se(!1);
-  }, Oe = (Z) => {
-    D?.(Z), ie && _e();
-  }, _e = () => {
-    w();
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      className: `${s} flex h-11 items-center justify-between rounded-md border border-gray-10 bg-gray-5 px-4`,
+      children: [
+        /* @__PURE__ */ f("p", { className: `${g}`, children: l }),
+        /* @__PURE__ */ f(
+          ip,
+          {
+            className: "ml-6",
+            popsFrom: "bottom",
+            title: N ? p : x,
+            delayInMs: N ? 500 : void 0,
+            children: /* @__PURE__ */ f("button", { disabled: N, onClick: C, children: /* @__PURE__ */ f(L0, { className: "shrink-0 text-gray-50 hover:text-gray-60", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
+}, Ap = ({
+  className: s = "",
+  label: g,
+  variant: l = "default",
+  accent: p,
+  disabled: x,
+  placeholder: N,
+  value: w,
+  maxLength: C,
+  onChange: A,
+  onClear: D,
+  message: O,
+  onFocus: T,
+  onBlur: M,
+  autofocus: z = !1,
+  autoComplete: W = "on",
+  dataTest: ne,
+  name: S,
+  required: E = !1,
+  labelDataCy: j,
+  inputDataCy: V,
+  onKeyDown: ie,
+  inputClassName: se = "",
+  borderRadius: fe = "rounded-md",
+  fontClasses: ge = "text-lg font-normal"
+}) => {
+  const we = en(null), nn = () => {
+    we && we.current && (l !== "email" && (we.current.selectionStart = we.current.value.length, we.current.selectionEnd = we.current.value.length), we.current.focus());
   };
-  return Ji(
+  Ce(() => {
+    (O || z) && nn();
+  }, [O, z, x]);
+  let Ae;
+  switch (p) {
+    case "error":
+      Ae = "border-red focus:border-red ring-red";
+      break;
+    case "warning":
+      Ae = "focus:border-orange ring-orange";
+      break;
+    case "success":
+      Ae = "focus:border-green ring-green";
+      break;
+    default:
+      Ae = "focus:border-primary ring-primary";
+      break;
+  }
+  const tn = l === "search" ? "border-transparent" : "border-gray-20 disabled:border-gray-10 hover:border-gray-30", vn = l === "search" ? "placeholder-gray-40" : "placeholder-gray-30", Fn = l === "search" ? "pr-4 pl-10" : "px-4", [rn, Un] = ue(!1), [Ke, Oe] = ue(!1), _e = /* @__PURE__ */ R("div", { className: "relative", children: [
+    /* @__PURE__ */ f(
+      "input",
+      {
+        ref: we,
+        disabled: x,
+        className: `inxt-input h-10 w-full border bg-transparent ${ge} text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 
+          ${tn} ${Ae} ${vn} ${Fn} ${fe} ${se}`,
+        type: l === "password" && !rn ? "password" : l === "email" ? "email" : "text",
+        placeholder: N,
+        onChange: (le) => A && A(le.target.value),
+        onFocus: () => {
+          T && T(), Oe(!0);
+        },
+        onBlur: () => {
+          M && M(), Oe(!1);
+        },
+        autoComplete: W,
+        value: w,
+        maxLength: C,
+        "data-test": ne,
+        "data-cy": V,
+        name: S,
+        required: E,
+        onKeyDown: ie ?? void 0
+      }
+    ),
+    l === "password" && Ke && /* @__PURE__ */ f(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onMouseDown: (le) => {
+          le.preventDefault(), Un(!rn);
+        },
+        className: "absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer bg-transparent py-2 pl-2 text-gray-80",
+        children: rn ? /* @__PURE__ */ f(R0, { size: 24 }) : /* @__PURE__ */ f($0, { size: 24 })
+      }
+    ),
+    l === "search" && /* @__PURE__ */ f(
+      D0,
+      {
+        className: `absolute left-4 top-1/2 -translate-y-1/2 ${x ? "text-gray-20" : "text-gray-40"}`,
+        size: 20
+      }
+    ),
+    l === "search" && w && !x && /* @__PURE__ */ f(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onMouseDown: (le) => {
+          le.preventDefault(), D && D();
+        },
+        className: `absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer py-2 pl-2 text-gray-40 
+            ${Ke ? "bg-white" : "bg-gray-5"}`,
+        children: /* @__PURE__ */ f(ka, { size: 20 })
+      }
+    )
+  ] });
+  let fn, Z;
+  switch (p) {
+    case "success":
+      fn = "text-green", Z = k0;
+      break;
+    case "warning":
+      fn = "text-orange", Z = Oa;
+      break;
+    case "error":
+      fn = "text-red", Z = O0;
+      break;
+    default:
+      fn = "text-gray-80";
+  }
+  return /* @__PURE__ */ R("div", { className: `${s}`, children: [
+    g ? /* @__PURE__ */ R("label", { children: [
+      /* @__PURE__ */ f("span", { "data-cy": j, className: `text-sm ${x ? "text-gray-40" : "text-gray-80"}`, children: g }),
+      _e
+    ] }) : _e,
+    C && /* @__PURE__ */ f("p", { className: "font-regular mt-1 text-right text-sm text-gray-50", children: `${w?.length ?? 0}/${C}` }),
+    O && /* @__PURE__ */ R("div", { className: `mt-0.5 flex items-center ${fn}`, children: [
+      Z && /* @__PURE__ */ f(Z, { size: 16, weight: "fill" }),
+      /* @__PURE__ */ f("p", { className: "ml-1 text-sm", children: O })
+    ] })
+  ] });
+}, Tp = ({ checked: s, id: g, disabled: l = !1, onClick: p }) => /* @__PURE__ */ R("div", { id: g, className: "flex cursor-pointer", children: [
+  /* @__PURE__ */ f(
+    "button",
+    {
+      disabled: l,
+      onClick: p,
+      className: `flex h-5 w-5 items-center justify-center rounded-full border ${l && s ? "border-0 bg-gray-20" : s && "border-0 bg-primary active:bg-primary-dark"} ${l ? "border-gray-10" : "border-gray-40"}`,
+      children: /* @__PURE__ */ f("div", { className: `h-2.5 w-2.5 rounded-full ${s || l ? "bg-white" : "hover:bg-gray-10"}` })
+    }
+  ),
+  /* @__PURE__ */ f("input", { type: "radio", className: "h-0 w-0 appearance-none opacity-0", checked: !0, readOnly: !0 })
+] }), Ep = ({
+  value: s,
+  min: g = 0,
+  max: l,
+  step: p,
+  className: x,
+  disabled: N = !1,
+  ariaLabel: w = "Range slider",
+  onChange: C
+}) => {
+  const A = (s - g) / (l - g) * 100, D = `linear-gradient(to right, #3264fe ${A}%, #d5d5d5 ${A}%)`;
+  return /* @__PURE__ */ f("div", { className: x, children: /* @__PURE__ */ f(
+    "input",
     {
-      r: _e,
-      backspace: _e,
-      enter: () => {
-        x || S();
-      }
-    },
-    []
-  ), /* @__PURE__ */ R(
-    "div",
+      id: "my-slider",
+      type: "range",
+      min: g,
+      max: l,
+      value: s,
+      step: p,
+      onInput: (O) => C(Number(O.target.value)),
+      disabled: N,
+      "aria-label": w,
+      style: { background: D }
+    }
+  ) });
+}, Lp = ({
+  disabled: s = !1,
+  id: g,
+  dataTestId: l = "switch",
+  size: p = "md",
+  onClick: x,
+  onCheckedChange: N
+}) => {
+  const [w, C] = ue(!1), A = (z) => {
+    const W = z.target.checked;
+    C(W), N && N(W);
+  }, D = s ? "bg-gray-5" : w ? "bg-green" : "bg-gray-10", O = {
+    md: "w-8 h-5",
+    lg: "w-12 h-7",
+    xl: "w-14 h-8"
+  }, T = {
+    md: "w-4 h-4",
+    lg: "w-6 h-6",
+    xl: "w-7 h-7"
+  }, M = {
+    md: "translate-x-[13px]",
+    lg: "translate-x-[21px]",
+    xl: "translate-x-[25px]"
+  };
+  return /* @__PURE__ */ R(
+    "label",
     {
-      onDoubleClick: A,
-      onClick: Oe,
-      onContextMenu: Un,
-      ref: j,
-      className: `group relative flex h-14 flex-row items-center pl-14 pr-5 ${p ? "bg-primary/10 text-gray-100 dark:bg-primary/20" : "focus-within:bg-gray-1 hover:bg-gray-1"} ${x ? "z-40" : ""}`,
-      onMouseEnter: W,
-      onMouseLeave: ne,
+      htmlFor: g,
+      className: `relative inline-flex items-center cursor-pointer ${O[p]}`,
+      "data-testid": l,
       children: [
-        x && p && /* @__PURE__ */ f(
-          X0,
+        /* @__PURE__ */ f(
+          "input",
           {
-            item: s,
-            menu: z,
-            menuItemsRef: V,
-            openedFromRightClick: ie,
-            isOpen: x,
-            posX: fe,
-            posY: we,
-            isContextMenuCutOff: vn,
-            genericEnterKey: S,
-            handleMenuClose: _e
+            type: "checkbox",
+            id: g,
+            disabled: s,
+            checked: w,
+            onChange: A,
+            onClick: x,
+            className: "sr-only"
           }
         ),
         /* @__PURE__ */ f(
           "div",
           {
-            className: `absolute left-5 top-0 flex h-full w-0 flex-row items-center justify-start p-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100 ${p && "opacity-100"}`,
-            children: /* @__PURE__ */ f(
-              Pa,
-              {
-                onClick: (Z) => {
-                  Z.stopPropagation(), C(!p);
-                },
-                checked: p,
-                checkboxDataCy: `driveListItemCheckbox${g}`
-              }
-            )
+            className: `absolute inset-0 rounded-full transition-colors duration-200 ${D} ${s ? "data-[state=checked]:bg-green/50" : ""}`
           }
         ),
-        M ? /* @__PURE__ */ f(
-          "div",
+        /* @__PURE__ */ f(
+          "span",
           {
-            className: `grow-1 relative flex h-full w-full flex-row items-center border-b ${p ? "border-primary/5" : "border-gray-5"}`,
-            children: l[0](s)
-          },
-          0
-        ) : new Array(l.length).fill(0).map((Z, le) => /* @__PURE__ */ f(
-          "div",
+            className: `block bg-white rounded-full transition-transform duration-200 transform ${w ? M[p] : "translate-x-[3px]"} ${T[p]} ${s ? "pointer-events-none" : ""}`
+          }
+        )
+      ]
+    }
+  );
+}, Rp = ({
+  disabled: s = !1,
+  accentColor: g,
+  placeholder: l = "",
+  value: p = "",
+  onChange: x,
+  name: N
+}) => /* @__PURE__ */ f(
+  "textarea",
+  {
+    disabled: s,
+    placeholder: l,
+    className: `
+        w-full h-full py-4 px-3.5 bg-transparent border rounded-md outline-none text-lg font-regular resize-none
+        placeholder:text-gray-30
+        ${s ? "border-gray-5 text-gray-40" : "border-gray-20 text-gray-100"}
+        ${!g && "border-gray-20 focus:border-primary focus:ring focus:ring-primary/10"}
+        ${g === "red" && "border-red focus:ring focus:ring-red/10"}
+        `,
+    value: p,
+    onChange: x,
+    name: N
+  }
+), $p = ({ leftContent: s, rightContent: g, className: l = "" }) => /* @__PURE__ */ R(
+  "header",
+  {
+    className: `
+        flex
+        items-center
+        justify-between
+        ${l}
+      `,
+    children: [
+      /* @__PURE__ */ f("div", { className: "flex items-center space-x-4", children: s }),
+      /* @__PURE__ */ f("div", { className: "flex items-center space-x-4", children: g })
+    ]
+  }
+), lp = (s) => {
+  const g = s.match(/px-(\d+(\.\d+)?)/), l = s.match(/py-(\d+(\.\d+)?)/), p = g ? g[1] : void 0, x = l ? l[1] : void 0;
+  return { px: p, py: x };
+}, up = ({
+  children: s,
+  options: g,
+  classButton: l,
+  menuItems: p,
+  classMenuItems: x,
+  openDirection: N,
+  dropdownActionsContext: w,
+  item: C = {}
+}) => {
+  const [A, D] = ue(!1), O = N === "left" ? "origin-top-left" : "origin-top-right", T = en(null);
+  Ce(() => {
+    const ie = (se) => {
+      T.current && !T.current.contains(se.target) && D(!1);
+    };
+    return document.addEventListener("mousedown", ie), document.addEventListener("contextmenu", ie), () => {
+      document.removeEventListener("mousedown", ie), document.removeEventListener("contextmenu", ie);
+    };
+  }, []);
+  const M = g ? g.map((ie) => ({
+    name: ie.text,
+    action: () => ie.onClick()
+  })) : [], z = p ? p.map((ie) => ({
+    node: ie
+  })) : [], W = w || [], ne = [...M, ...z, ...W], S = () => D((ie) => !ie), E = () => D(!1), { px: j, py: V } = lp(x);
+  return /* @__PURE__ */ R("div", { className: "relative outline-none min-w-breadcrumb", ref: T, children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        className: `cursor-pointer outline-none ${l}`,
+        onClick: S,
+        "aria-expanded": A,
+        "aria-haspopup": "menu",
+        children: typeof s == "function" ? s({ open: A }) : s
+      }
+    ),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: `absolute ${N === "left" ? "left-0" : "right-0"} 
+          transform shadow-subtle-hard transition-all duration-100 ease-in-out ${A ? `scale-100 opacity-100 ${O}` : "pointer-events-none scale-95 opacity-0"}`,
+        "data-testid": "menu-dropdown",
+        children: /* @__PURE__ */ f("div", { className: `absolute ${x}`, children: /* @__PURE__ */ f(Pa, { item: C, isOpen: A, handleMenuClose: E, menu: ne, paddingX: j, paddingY: V }) })
+      }
+    )
+  ] });
+}, La = (s) => {
+  const [{ isOver: g, canDrop: l }, p] = s.useDrop(
+    () => ({
+      accept: s.acceptedTypes,
+      collect: (w) => ({
+        isOver: w.isOver(),
+        canDrop: w.canDrop()
+      }),
+      canDrop: s.canItemDrop(s.item),
+      drop: s.onItemDropped(
+        s.item,
+        s.namePath,
+        s.isSomeItemSelected,
+        s.selectedItems,
+        s.dispatch
+      )
+    }),
+    [s.selectedItems]
+  ), x = (w) => {
+    w.active && w.onClick && w.onClick();
+  }, N = g && l ? "drag-over-effect" : "";
+  return /* @__PURE__ */ f(mn, { children: !s.item.active && !s.item.dialog && s.menu ? /* @__PURE__ */ f(s.menu, { item: s.item, items: s.items, onItemClicked: x }) : /* @__PURE__ */ R(
+    "div",
+    {
+      ref: p,
+      className: `flex ${s.isHiddenInList ? "w-full" : "max-w-fit"} ${s.item.isFirstPath ? "shrink-0 pr-1" : "min-w-breadcrumb flex-1 px-1.5 py-1.5"} cursor-pointer flex-row items-center truncate font-medium ${N}
+        ${!s.item.active || s.item.isFirstPath && s.totalBreadcrumbsLength === 1 ? "text-gray-80" : "text-gray-50 hover:text-gray-80"}`,
+      onClick: () => x(s.item),
+      onKeyDown: () => {
+      },
+      "data-cy": s?.breadcrumbButtonDataCy,
+      children: [
+        s.itemComponent && /* @__PURE__ */ f(s.itemComponent, { className: "h-5 w-5" }),
+        s.item.icon ? s.item.icon : null,
+        s.item.label ? /* @__PURE__ */ f(
+          "span",
           {
-            className: `relative flex h-full shrink-0 flex-row items-center border-b ${p ? "border-primary/5" : "border-gray-5"} ${N[le]}`,
-            children: l[le](s)
+            className: `max-w-sm flex-1 cursor-pointer truncate ${s.isHiddenInList && "pl-3 text-base"}`,
+            title: s.item.label,
+            children: s.item.label
+          }
+        ) : null
+      ]
+    },
+    s.item.uuid
+  ) });
+}, Dp = (s) => {
+  const g = S0((p, x) => /* @__PURE__ */ f(
+    "div",
+    {
+      ref: x,
+      className: "flex cursor-pointer items-center hover:bg-gray-5 hover:text-gray-80 dark:hover:bg-gray-10",
+      children: p.children
+    }
+  ));
+  return /* @__PURE__ */ f("div", { className: "flex w-full items-center", children: (() => {
+    const p = s.items, x = [], N = [], w = (C) => /* @__PURE__ */ f("div", { className: "text-dgray-50 flex items-center", children: /* @__PURE__ */ f(M0, { weight: "bold", className: "h-4 w-4", "data-testid": "caret-right" }) }, C);
+    for (let C = 0; C < p.length; C++) {
+      const A = "breadcrumbSeparator-" + p[C].uuid + C.toString(), D = "breadcrumbItem-" + p[C].uuid + C.toString();
+      p.length > 3 && C !== 0 && C < p.length - 2 ? (C === 1 && x.push(w(A)), N.push(
+        /* @__PURE__ */ f(g, { children: /* @__PURE__ */ f(
+          La,
+          {
+            item: p[C],
+            isHiddenInList: !0,
+            totalBreadcrumbsLength: p.length,
+            items: p,
+            namePath: s.namePath,
+            isSomeItemSelected: s.isSomeItemSelected,
+            selectedItems: s.selectedItems,
+            onItemDropped: s.onItemDropped,
+            canItemDrop: s.canItemDrop,
+            itemComponent: s.itemComponent,
+            acceptedTypes: s.acceptedTypes,
+            dispatch: s.dispatch,
+            useDrop: s.useDrop
           },
-          le
-        )),
+          D
+        ) })
+      )) : (x.push(
         /* @__PURE__ */ f(
-          "div",
+          La,
           {
-            className: `flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b ${p ? "border-primary/5" : "border-gray-5"}`,
-            children: /* @__PURE__ */ f(
-              "button",
-              {
-                ref: E,
-                className: `flex h-10 w-10 flex-col items-center justify-center rounded-md opacity-0 outline-none focus-visible:opacity-100 group-hover:opacity-100 ${p ? "text-gray-80 hover:bg-primary/10 focus-visible:bg-primary/10" : "text-gray-60 hover:bg-gray-10 focus-visible:bg-gray-10"}`,
-                onClick: (Z) => {
-                  Ke(Z);
-                },
-                children: /* @__PURE__ */ f(Da, { size: 24, weight: "bold" })
-              }
-            )
-          }
+            breadcrumbButtonDataCy: C === 0 ? s?.rootBreadcrumbItemDataCy : void 0,
+            item: p[C],
+            totalBreadcrumbsLength: p.length,
+            items: p,
+            menu: s.menu,
+            namePath: s.namePath,
+            isSomeItemSelected: s.isSomeItemSelected,
+            selectedItems: s.selectedItems,
+            onItemDropped: s.onItemDropped,
+            canItemDrop: s.canItemDrop,
+            acceptedTypes: s.acceptedTypes,
+            dispatch: s.dispatch,
+            useDrop: s.useDrop
+          },
+          D
         )
-      ]
+      ), C < p.length - 1 && x.push(w(A)));
     }
-  );
-}, ip = ({
-  selectedItems: s,
-  onTopSelectionCheckboxClick: g,
-  items: l,
-  header: p,
-  orderBy: x,
-  onOrderableColumnClicked: N,
-  menu: w,
-  displayMenuDiv: C,
-  isVerticalScrollbarVisible: A,
-  checkboxDataCy: D,
-  onClose: O
-}) => /* @__PURE__ */ f("div", { onClick: O, onContextMenu: O, className: "flex min-w-max h-12 shrink-0 flex-row px-5", children: /* @__PURE__ */ R("div", { className: "flex h-full min-w-full flex-row items-center border-b border-gray-10", children: [
-  /* @__PURE__ */ f("div", { className: "flex h-full flex-row items-center justify-between pr-4", children: /* @__PURE__ */ f(
-    Pa,
-    {
-      checked: s.length > 0,
-      indeterminate: l.length > s.length && s.length > 0,
-      onClick: g,
-      checkboxDataCy: D
+    if (N.length > 0) {
+      const C = /* @__PURE__ */ f(
+        up,
+        {
+          openDirection: "left",
+          classMenuItems: `left-0 top-1 w-max max-h-80 overflow-y-auto
+          rounded-md border border-gray-10 bg-surface dark:bg-gray-5 shadow-subtle-hard z-10`,
+          menuItems: N,
+          children: ({ open: A }) => /* @__PURE__ */ f(
+            "div",
+            {
+              className: `flex h-8 w-8 items-center justify-center
+                rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${A ? "bg-gray-5" : ""}`,
+              children: /* @__PURE__ */ f(Da, { weight: "bold", className: "h-5 w-5" })
+            }
+          )
+        },
+        "breadcrumbDropdownItems"
+      );
+      x.splice(2, 0, C);
     }
-  ) }),
-  p.map((T) => /* @__PURE__ */ R(
-    "button",
-    {
-      onClick: T.orderable ? () => {
-        N(T);
-      } : void 0,
-      "data-cy": "buttonDataCy" in T && T?.buttonDataCy,
-      className: `flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  ${T.width} ${T.orderable ? "cursor-pointer hover:text-gray-80" : ""}`,
-      children: [
-        /* @__PURE__ */ f("span", { "data-cy": "textDataCy" in T && T?.textDataCy, children: T.label }),
-        T.name === x?.field && T.orderable && (x?.direction === "ASC" ? /* @__PURE__ */ f(D0, { size: 14, weight: "bold" }) : /* @__PURE__ */ f(O0, { size: 14, weight: "bold" }))
-      ]
-    },
-    T.name.toString()
-  )),
-  A && /* @__PURE__ */ f("div", { className: "mr-15px" }),
-  (w || C) && /* @__PURE__ */ f("div", { className: "flex h-full w-12 shrink-0" })
-] }) }), lp = ({ skeletonItem: s, columns: g }) => /* @__PURE__ */ R(
-  "div",
+    return x;
+  })() });
+}, ap = ({
+  label: s,
+  Icon: g,
+  onClick: l,
+  notifications: p,
+  iconDataCy: x,
+  isActive: N = !1,
+  isCollapsed: w = !1,
+  subsection: C = !1
+}) => /* @__PURE__ */ f(
+  "button",
   {
-    "data-testid": "skeleton-loader-item",
-    className: "group relative flex h-14 animate-pulse flex-row items-center px-5",
-    children: [
-      /* @__PURE__ */ f("div", { className: "w-9 shrink-0" }),
-      new Array(g.length).fill(0).map((l, p) => /* @__PURE__ */ f(
+    onClick: l,
+    "data-cy": x,
+    className: `flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${N ? "bg-primary/20" : "hover:bg-gray-5"} ${C ? "pl-5" : ""}`,
+    title: w ? s : void 0,
+    children: /* @__PURE__ */ R("div", { className: "flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]", children: [
+      /* @__PURE__ */ R("div", { className: `flex flex-row gap-3 items-center ${N ? "text-primary" : "text-gray-80"}`, children: [
+        /* @__PURE__ */ f(g, { size: 20, weight: N ? "fill" : "regular", className: "flex-shrink-0" }),
+        /* @__PURE__ */ f(
+          "p",
+          {
+            className: `font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${w ? "opacity-0 delay-200" : "opacity-100 delay-0"}`,
+            children: s
+          }
+        )
+      ] }),
+      /* @__PURE__ */ f(
         "div",
         {
-          className: `relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 ${g[p]}`,
-          children: s?.[p]
-        },
-        `${l}-${p}`
-      )),
-      /* @__PURE__ */ f("div", { className: "flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5" })
-    ]
+          className: `flex rounded-full px-2 py-1 transition-all duration-300 ${N ? "text-white bg-primary" : "bg-gray-10 text-gray-60"} ${w || !p ? "opacity-0 invisible delay-300" : "opacity-100 delay-0"}`,
+          children: p && /* @__PURE__ */ f("p", { className: "text-xs font-medium", children: p })
+        }
+      )
+    ] })
   }
-), up = ({ skeleton: s }) => /* @__PURE__ */ f(mn, { children: new Array(s.length).fill(0).map((g, l) => /* @__PURE__ */ f(
-  lp,
+), op = ({ options: s, isCollapsed: g, showSubsections: l }) => /* @__PURE__ */ f("div", { className: "flex flex-col w-full", children: s.filter((p) => p.isVisible).map((p, x) => p.subsection && !l || g && p.subsection ? null : /* @__PURE__ */ f(
+  ap,
   {
-    skeletonItem: s[l].skeletonItem,
-    columns: s[l].columns
+    label: p.label,
+    Icon: p.icon,
+    iconDataCy: p.iconDataCy,
+    isActive: p.isActive,
+    notifications: p.notifications,
+    onClick: p.onClick,
+    isCollapsed: g,
+    subsection: p.subsection
   },
-  `skinSkeletonRow${l}`
-)) }), Ip = ({
-  header: s,
-  checkboxDataCy: g,
-  items: l,
-  itemComposition: p,
-  selectedItems: x,
-  onClick: N,
-  onDoubleClick: w,
-  onEnterPressed: C,
-  onSelectedItemsChanged: A,
-  isLoading: D,
-  forceLoading: O,
-  skinSkeleton: T,
-  emptyState: M,
-  orderBy: z,
-  onOrderByChanged: W,
-  onNextPage: ne,
-  hasMoreItems: S,
-  menu: E,
-  displayMenuDiv: j,
-  className: V,
-  disableItemCompositionStyles: ie,
-  onMouseEnter: se,
-  onMouseLeave: fe,
-  headerBackgroundColor: ge = "bg-surface",
-  keyBoardShortcutActions: we,
-  disableKeyboardShortcuts: nn
-}) => {
-  const Ae = en(null), tn = (F) => x.some((X) => F.id === X.id), vn = document.getElementById("scrollableList"), Fn = vn && vn.scrollHeight > vn.clientHeight, rn = !S && l.length === 0 && !D, [Un, Ke] = ue(null), Oe = new Array(25).fill(0).map(() => ({
-    skeletonItem: T,
-    columns: s.map((F) => F.width)
-  })), _e = /* @__PURE__ */ f(up, { skeleton: Oe });
-  Ce(() => {
-    const F = (X) => {
-      Ae.current && !Ae.current.contains(X.target) && Ke(null);
-    };
-    return document.addEventListener("mousedown", F), document.addEventListener("contextmenu", F), () => {
-      document.removeEventListener("mousedown", F), document.removeEventListener("contextmenu", F);
-    };
-  }, []);
-  const fn = () => {
-    ne?.();
-  }, Z = () => {
-    const F = x.map((X) => ({ props: X, value: !1 }));
-    A(F);
-  }, le = (F) => {
-    const X = [...x.map((me) => ({ props: me, value: !1 })), { props: F, value: !0 }];
-    A(X);
-  }, Tn = () => {
-    if (x.length === 1) {
-      const X = x[0];
-      C?.(X);
-    }
-  }, cn = () => {
-    const X = np.difference(l, x).map((me) => ({ props: me, value: !0 }));
-    A(X);
-  }, Hn = () => {
-    x.length === l.length ? Z() : cn();
-  }, hn = (F) => {
-    if (Ln(), !F.orderable || !W) return;
-    const X = z?.field === F.name;
-    W(X ? { field: F.name, direction: z.direction === "ASC" ? "DESC" : "ASC" } : { field: F.name, direction: F.defaultDirection ?? "ASC" });
-  }, Le = (F) => {
-    nn || F();
-  }, zn = () => {
-    we?.onRKeyPressed?.();
-  }, En = () => {
-    we?.onBackspaceKeyPressed?.();
+  `${p.iconDataCy}-${x}`
+)) }), sp = ({ childrenButton: s, panel: g, className: l, classButton: p, align: x = "right" }) => {
+  const [N, w] = ue(!1), C = en(null), [A, D] = ue(N), [O, T] = ue("opacity-0"), [M, z] = ue("scale-95"), W = () => w((E) => !E), ne = (E) => {
+    C.current && !C.current.contains(E.target) && S();
+  }, S = () => {
+    w(!1);
   };
-  Ji(
+  return Ce(() => {
+    if (N) {
+      const E = setTimeout(() => {
+        T("opacity-100"), z("scale-100");
+      }, 10);
+      return D(!0), () => clearTimeout(E);
+    } else {
+      T("opacity-0"), z("scale-95");
+      const E = setTimeout(() => {
+        D(!1);
+      }, 100);
+      return () => clearTimeout(E);
+    }
+  }, [N]), Ce(() => (document.addEventListener("mousedown", ne), () => {
+    document.removeEventListener("mousedown", ne);
+  }), []), /* @__PURE__ */ R("div", { style: { lineHeight: 0 }, className: `relative ${l}`, children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        onClick: W,
+        className: `cursor-pointer outline-none ${p}`,
+        "aria-expanded": N,
+        "data-testid": "popover-button",
+        children: s
+      }
+    ),
+    A && /* @__PURE__ */ f(
+      "div",
+      {
+        ref: C,
+        className: `absolute z-50 mt-1 transform rounded-md border border-gray-10 ${x === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"} bg-surface py-1.5 shadow-subtle duration-100 ease-out dark:bg-gray-5 ${O} ${M}`,
+        children: g(S)
+      }
+    )
+  ] });
+};
+function fp({
+  className: s = "",
+  suiteArray: g,
+  soonText: l,
+  align: p = "right"
+}) {
+  const x = /* @__PURE__ */ f("div", { className: "flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ f(B0, { size: 26, className: "h-7 w-7", weight: "bold" }) }), N = /* @__PURE__ */ f("div", { className: "w-64 flex flex-wrap p-2", "data-testid": "suite-launcher-panel", children: g.map((w, C) => /* @__PURE__ */ f(
+    "div",
     {
-      "ctrl+a": () => Le(cn),
-      "meta+a": () => Le(cn),
-      esc: () => Le(Z),
-      r: () => Le(zn),
-      backspace: () => Le(En),
-      delete: () => Le(En)
+      className: `w-1/3 flex items-center justify-center rounded-md ${w.isMain ? "bg-primary/10 dark:bg-primary/20" : ""}`,
+      children: /* @__PURE__ */ f(
+        "div",
+        {
+          role: "none",
+          className: `flex items-center px-3 py-2 text-gray-80 w-full rounded-md ${w.availableSoon ? "" : "cursor-pointer hover:bg-gray-1 dark:hover:bg-gray-10"}`,
+          style: { lineHeight: 1.25 },
+          onClick: w.availableSoon ? void 0 : w.onClick,
+          children: /* @__PURE__ */ R("div", { className: "flex flex-col items-center w-full rounded-md", children: [
+            w.isLocked ? /* @__PURE__ */ f(
+              P0,
+              {
+                size: 26,
+                weight: "regular",
+                className: "opacity-50 filter grayscale",
+                "data-testid": "suite-launcher-lock-icon"
+              }
+            ) : $a(w.icon) ? I0(w.icon, {
+              size: 26,
+              className: `${w.icon.props?.className ?? ""} ${w.isMain ? "text-primary" : ""} ${w.availableSoon || w.isLocked ? "opacity-50 filter grayscale" : ""}`,
+              weight: w.isMain ? "fill" : "regular"
+            }) : w.icon,
+            /* @__PURE__ */ R("div", { className: "mt-1 flex items-center", children: [
+              /* @__PURE__ */ f(
+                "span",
+                {
+                  className: `text-xs ${w.isMain ? "text-primary font-medium" : "text-gray-60"}`,
+                  style: { lineHeight: 1, opacity: w.availableSoon || w.isLocked ? 0.5 : 1 },
+                  children: w.title
+                }
+              ),
+              w.availableSoon && /* @__PURE__ */ f("div", { className: "flex rounded-sm px-1 ml-1 py-0.5 bg-purple-1 dark:bg-purple-10 items-center", children: /* @__PURE__ */ f(
+                "span",
+                {
+                  className: "font-medium dark:font-normal text-purple-10 dark:text-purple-1",
+                  style: { lineHeight: 1, fontSize: "xx-small" },
+                  children: l ?? "Soon"
+                }
+              ) })
+            ] })
+          ] })
+        }
+      )
     },
-    [l, x, nn]
-  );
-  const Gn = (F, X) => {
-    X.metaKey || X.ctrlKey ? A([{ props: F, value: !tn(F) }]) : tn(F) || N?.(F), Ke(null);
-  }, Ar = (F, X) => {
-    X.preventDefault(), tn(F) || le(F), Ke(F.id);
-  }, Ln = () => {
-    Ke(null);
-  }, et = (F, X) => {
-    F.stopPropagation(), Ke((me) => me ? null : X.id), tn(X) || le(X);
-  };
+    C
+  )) });
   return /* @__PURE__ */ f(
+    sp,
+    {
+      className: s,
+      childrenButton: x,
+      panel: () => N,
+      align: p,
+      "data-testid": "app-suite-dropdown"
+    }
+  );
+}
+const cp = ({
+  logo: s,
+  title: g,
+  onClick: l,
+  isCollapsed: p,
+  className: x,
+  onToggleCollapse: N,
+  suiteLauncher: w
+}) => /* @__PURE__ */ R("div", { className: `flex flex-row justify-between w-full py-5 px-2 ${x}`, children: [
+  /* @__PURE__ */ R("div", { className: "relative flex flex-row gap-2 items-center", children: [
+    /* @__PURE__ */ R("button", { className: "flex flex-row gap-2 items-center", onClick: l, children: [
+      /* @__PURE__ */ f(
+        "img",
+        {
+          src: s,
+          width: 28,
+          height: 28,
+          alt: g,
+          className: `flex-shrink-0 min-w-[28px] min-h-[28px] ${p ? "group-hover:hidden" : ""}`
+        }
+      ),
+      !p && /* @__PURE__ */ f("p", { className: "text-xl font-medium text-gray-100 whitespace-nowrap", children: g })
+    ] }),
+    p && N && /* @__PURE__ */ f(
+      "button",
+      {
+        onClick: N,
+        className: "hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0",
+        children: /* @__PURE__ */ f(Ta, { size: 28 })
+      }
+    )
+  ] }),
+  /* @__PURE__ */ R(
     "div",
     {
-      id: "generic-list-component",
-      className: `relative isolate flex h-full flex-col overflow-x-auto overflow-y-hidden ${V}`,
-      ref: Ae,
-      children: /* @__PURE__ */ R("div", { id: "scrollableList", className: "flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto", children: [
-        /* @__PURE__ */ f("div", { className: `sticky top-0 z-50 ${ge}`, children: rn ? null : /* @__PURE__ */ f(
-          ip,
+      className: `flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${p ? "opacity-0 invisible" : "opacity-100"}`,
+      children: [
+        w && /* @__PURE__ */ f(
+          fp,
           {
-            selectedItems: x,
-            onTopSelectionCheckboxClick: Hn,
-            items: l,
-            header: s,
-            orderBy: z,
-            onOrderableColumnClicked: hn,
-            menu: E,
-            displayMenuDiv: j,
-            isVerticalScrollbarVisible: Fn,
-            checkboxDataCy: g,
-            onClose: Ln
+            suiteArray: w?.suiteArray,
+            soonText: w?.soonText,
+            className: `text-gray-80 ${w?.className}`,
+            align: "left"
           }
-        ) }),
-        rn ? M : l.length > 0 && !O ? /* @__PURE__ */ f(
-          Wa,
+        ),
+        N && /* @__PURE__ */ f(
+          "button",
           {
-            handleNextPage: fn,
-            hasMoreItems: !!S,
-            loader: _e,
-            scrollableTarget: "scrollableList",
-            children: l.map((F, X) => /* @__PURE__ */ f(
-              rp,
-              {
-                item: F,
-                listIndex: X,
-                isOpen: Un === F.id,
-                onClose: Ln,
-                itemComposition: p,
-                selected: tn(F),
-                onDoubleClick: w && (() => w(F)),
-                onClick: (me) => Gn(F, me),
-                onClickContextMenu: (me) => Ar(F, me),
-                onThreeDotsButtonPressed: (me) => et(me, F),
-                columnsWidth: s.map((me) => me.width),
-                menu: E,
-                onSelectedChanged: (me) => A([{ props: F, value: me }]),
-                disableItemCompositionStyles: ie,
-                onMouseEnter: se,
-                onMouseLeave: fe,
-                genericEnterKey: Tn
-              },
-              F.id
-            ))
+            onClick: N,
+            className: "flex items-center justify-center text-gray-80 hover:text-gray-90",
+            children: /* @__PURE__ */ f(Ta, { size: 28 })
           }
-        ) : /* @__PURE__ */ f("div", { children: _e }),
-        l.length > 0 && /* @__PURE__ */ f(
-          "div",
+        )
+      ]
+    }
+  )
+] }), hp = ({
+  usage: s,
+  limit: g,
+  percentage: l,
+  onUpgradeClick: p,
+  upgradeLabel: x,
+  isLoading: N = !0
+}) => /* @__PURE__ */ R("div", { className: "flex flex-col w-full gap-2.5 px-2 pb-5", children: [
+  /* @__PURE__ */ R("div", { className: "flex flex-row w-full justify-between", children: [
+    /* @__PURE__ */ f("div", { className: "flex flex-row items-center gap-2", children: N ? /* @__PURE__ */ R("div", { className: "flex flex-row items-center gap-2", children: [
+      /* @__PURE__ */ f("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" }),
+      /* @__PURE__ */ f("div", { className: "h-3 w-2 rounded-lg bg-gray-5 animate-pulse" }),
+      /* @__PURE__ */ f("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" })
+    ] }) : /* @__PURE__ */ R(mn, { children: [
+      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm font-semibold", children: s }),
+      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm", children: "/" }),
+      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm", children: g })
+    ] }) }),
+    x && /* @__PURE__ */ f("button", { className: "text-primary text-sm hover:text-primary-dark font-semibold", onClick: p, children: x })
+  ] }),
+  /* @__PURE__ */ f("div", { className: "flex w-full h-1.5 bg-gray-10 rounded-full", children: /* @__PURE__ */ f(
+    "div",
+    {
+      className: "bg-gray-60 rounded-full",
+      style: {
+        width: `${l}%`
+      }
+    }
+  ) })
+] }), Op = ({
+  header: s,
+  primaryAction: g,
+  suiteLauncher: l,
+  collapsedPrimaryAction: p,
+  options: x,
+  showSubsections: N,
+  isCollapsed: w = !1,
+  storage: C,
+  onToggleCollapse: A
+}) => /* @__PURE__ */ R(
+  "div",
+  {
+    className: `relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group ${w ? "w-[60px]" : "w-64"}`,
+    children: [
+      /* @__PURE__ */ R("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ f(
+          cp,
           {
-            "data-testid": "outside-click-element",
-            className: "h-full w-full py-6",
-            onClick: Z,
-            onContextMenu: (F) => {
-              F.preventDefault(), Z();
+            logo: s.logo,
+            title: s.title,
+            onClick: s.onClick,
+            isCollapsed: w,
+            onToggleCollapse: A,
+            suiteLauncher: l,
+            className: s.className
+          }
+        ),
+        /* @__PURE__ */ R("div", { className: "flex flex-col gap-4 overflow-hidden", children: [
+          /* @__PURE__ */ R("div", { className: "relative", children: [
+            !w && /* @__PURE__ */ f("div", { className: "transition-opacity duration-300 opacity-100", children: g }),
+            w && /* @__PURE__ */ f("div", { className: "transition-opacity duration-300 opacity-100", children: p })
+          ] }),
+          /* @__PURE__ */ f(op, { options: x, isCollapsed: w, showSubsections: N })
+        ] })
+      ] }),
+      C && /* @__PURE__ */ f(
+        "div",
+        {
+          className: `transition-all overflow-hidden duration-300 ${w ? "opacity-0 invisible delay-200" : "opacity-100 delay-0"}`,
+          children: /* @__PURE__ */ f(
+            hp,
+            {
+              usage: C.usage,
+              limit: C.limit,
+              percentage: C.percentage,
+              onUpgradeClick: C.onUpgradeClick,
+              upgradeLabel: C.upgradeLabel,
+              isLoading: C.isLoading
             }
-          }
-        )
-      ] })
-    }
-  );
-}, Ap = ({
+          )
+        }
+      )
+    ]
+  }
+), kp = ({
+  isOpen: s,
+  title: g,
+  subTitle: l,
+  dialogRounded: p,
+  children: x,
+  onClose: N,
+  classes: w,
+  panelClasses: C,
+  titleClasses: A,
+  closeClass: D,
+  weightIcon: O,
+  bgColor: T,
+  dataTest: M,
+  hideCloseButton: z
+}) => /* @__PURE__ */ f(
+  "div",
+  {
+    "data-test": M,
+    className: `${s ? "flex" : "hidden"} ${w || ""} absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`,
+    children: /* @__PURE__ */ R(
+      "div",
+      {
+        className: `${C || ""} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
+        -translate-y-1/2 flex-col overflow-hidden  ${p ? "rounded-2xl" : "rounded-lg pt-8"} text-gray-100 ${T || "bg-surface"}`,
+        children: [
+          /* @__PURE__ */ R("div", { className: `${l ? "justify-between bg-gray-1 p-5" : ""} flex flex-row items-start`, children: [
+            g ? /* @__PURE__ */ R("div", { className: "relative flex max-w-full flex-1 flex-col truncate", children: [
+              /* @__PURE__ */ f("span", { className: `${A || ""} truncate text-xl`, title: g, children: g }),
+              /* @__PURE__ */ f("span", { className: "max-w-fit flex-1 truncate text-base font-normal text-gray-50", children: l })
+            ] }) : null,
+            z ? null : /* @__PURE__ */ f(
+              "div",
+              {
+                className: `relative ml-auto cursor-pointer bg-surface
+           transition duration-200 ease-in-out ${D || "text-primary hover:text-primary-dark"} `,
+                children: /* @__PURE__ */ f(ka, { role: "button", onClick: N, size: 28, weight: O })
+              }
+            )
+          ] }),
+          x
+        ]
+      }
+    )
+  }
+), Mp = ({
   isOpen: s,
   onClose: g,
-  children: l,
-  maxWidth: p,
-  className: x,
-  width: N,
-  preventClosing: w = !1,
-  stopMouseDownPropagation: C = !1
+  onPrimaryAction: l,
+  onSecondaryAction: p,
+  title: x,
+  subtitle: N,
+  primaryAction: w,
+  secondaryAction: C,
+  primaryActionColor: A,
+  isLoading: D,
+  maxWidth: O = "sm"
 }) => {
-  const A = en(null), [D, O] = ue(s), [T, M] = ue("opacity-0"), [z, W] = ue("scale-95"), ne = () => {
-    const E = document.querySelectorAll("[data-modal]"), j = E[E.length - 1];
-    A.current === j && g();
-  }, S = (E) => {
-    C && E.stopPropagation();
-  };
+  const [T, M] = ue(s), [z, W] = ue("opacity-0"), [ne, S] = ue("scale-95");
   return Ce(() => {
     if (s) {
       const E = setTimeout(() => {
-        M("opacity-100"), W("scale-100");
+        W("opacity-100"), S("scale-100");
       }, 10);
-      return O(!0), () => clearTimeout(E);
+      return M(!0), () => clearTimeout(E);
     } else {
-      M("opacity-0"), W("scale-95");
+      W("opacity-0"), S("scale-95");
       const E = setTimeout(() => {
-        O(!1);
+        M(!1);
       }, 150);
       return () => clearTimeout(E);
     }
   }, [s]), Ce(() => {
     const E = (j) => {
-      A.current && !A.current.contains(j.target) && !w && (j.preventDefault(), ne());
-    };
-    return s && document.addEventListener("mousedown", E), () => {
-      document.removeEventListener("mousedown", E);
-    };
-  }, [s, g, w]), Ce(() => {
-    const E = (j) => {
-      j.key === "Escape" && !w && (j.preventDefault(), ne());
+      j.key === "Escape" && g();
     };
     return s && window.addEventListener("keydown", E), () => {
       window.removeEventListener("keydown", E);
     };
-  }, [s, g, w]), /* @__PURE__ */ f(mn, { children: D && /* @__PURE__ */ R("div", { className: "m-0", onMouseDown: S, role: "dialog", "aria-modal": "true", children: [
+  }, [s, g]), /* @__PURE__ */ f(mn, { children: T && /* @__PURE__ */ R("div", { className: `fixed inset-0 z-50 ${s ? "" : "pointer-events-none"}`, children: [
     /* @__PURE__ */ f(
       "div",
       {
-        className: `
-              fixed
-              min-h-full
-              inset-0
-              z-[9999]
-              bg-highlight/40
-              transition-opacity
-              duration-150
-              ease-out
-              ${T}
-              pointer-events-none           
-            `
+        className: `absolute inset-0 bg-gray-100/50 transition-opacity duration-150 dark:bg-black/75 ${z}`,
+        onClick: g,
+        "data-testid": "dialog-overlay"
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ R(
       "div",
       {
-        className: `
-              fixed
-              inset-0
-              z-[9999]
-              flex
-              min-h-full
-              items-center
-              justify-center
-              transition-opacity
-              duration-150
-              ease-out
-              overflow-y-auto
-              ${T}
-              ${z}
-            `,
-        children: /* @__PURE__ */ f(
-          "section",
-          {
-            "data-testid": "ModalContent",
-            ref: A,
-            "data-modal": !0,
-            className: `
-                ${N ?? "w-full"}
-                ${p ?? "max-w-lg"}
-                ${x ?? "p-5"}
-                text-gray-100
-                rounded-2xl
-                bg-surface
-                shadow-subtle-hard
-                transform
-                transition-all
-                duration-150
-                ease-out
-                ${T}
-                ${z}
-              `,
-            children: l
-          }
-        )
+        className: `absolute left-1/2 top-1/2 w-full max-w-${O} -translate-x-1/2 -translate-y-1/2 transform rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${ne} ${z}`,
+        children: [
+          /* @__PURE__ */ R("div", { className: "flex flex-col space-y-2", children: [
+            /* @__PURE__ */ f("p", { className: "text-2xl font-medium text-gray-100", children: x }),
+            /* @__PURE__ */ f("p", { className: "text-gray-60", children: N })
+          ] }),
+          /* @__PURE__ */ R("div", { className: "mt-5 flex justify-end space-x-2", children: [
+            /* @__PURE__ */ f(Xi, { variant: "secondary", onClick: p, disabled: D, children: C }),
+            /* @__PURE__ */ f(
+              Xi,
+              {
+                onClick: l,
+                loading: D,
+                variant: A === "primary" ? "primary" : "destructive",
+                children: w
+              }
+            )
+          ] })
+        ]
       }
     )
   ] }) });
-}, Tp = ({ isOpen: s, onClose: g, children: l, className: p, disableBackdrop: x = !1 }) => {
-  const N = en(null), [w, C] = ue(s), [A, D] = ue("opacity-0"), [O, T] = ue("scale-95");
-  return Ce(() => {
-    if (s) {
-      C(!0);
-      const M = setTimeout(() => {
-        D("opacity-100"), T("scale-100");
-      }, 10);
-      return () => clearTimeout(M);
-    } else {
-      D("opacity-0"), T("scale-95");
-      const M = setTimeout(() => {
-        C(!1);
-      }, 150);
-      return () => clearTimeout(M);
-    }
-  }, [s]), Ce(() => {
-    const M = (z) => {
-      N.current && !N.current.contains(z.target) && g();
-    };
-    return s && !x && document.addEventListener("mousedown", M), () => {
-      document.removeEventListener("mousedown", M);
-    };
-  }, [s, g, x]), w ? /* @__PURE__ */ R(
-    "div",
-    {
-      className: `
-      fixed 
-      inset-0 
-      z-50 
-      flex 
-      items-center 
-      justify-center
-      ${x ? "pointer-events-none" : ""}
-    `,
-      children: [
-        !x && /* @__PURE__ */ f(
-          "div",
-          {
-            className: `
-            fixed 
-            inset-0 
-            bg-black/50 
-            backdrop-blur-sm 
-            transition-opacity 
-            duration-200
-            ${A}
-          `
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            ref: N,
-            className: `
-          relative
-          flex
-          bg-black/15
-          border
-          border-white/15
-          rounded-[20px]
-          backdrop-blur
-          shadow-lg
-          transition-all
-          duration-200
-          pointer-events-auto
-          ${A}
-          ${O}
-          ${p}
-        `,
-            children: l
-          }
-        )
-      ]
-    }
-  ) : null;
-}, ap = ({ childrenButton: s, panel: g, className: l, classButton: p, align: x = "right" }) => {
-  const [N, w] = ue(!1), C = en(null), [A, D] = ue(N), [O, T] = ue("opacity-0"), [M, z] = ue("scale-95"), W = () => w((E) => !E), ne = (E) => {
-    C.current && !C.current.contains(E.target) && S();
-  }, S = () => {
-    w(!1);
+}, Pp = ({
+  isOpen: s,
+  onClose: g,
+  children: l,
+  maxWidth: p,
+  className: x,
+  width: N,
+  preventClosing: w = !1,
+  stopMouseDownPropagation: C = !1
+}) => {
+  const A = en(null), [D, O] = ue(s), [T, M] = ue("opacity-0"), [z, W] = ue("scale-95"), ne = () => {
+    const E = document.querySelectorAll("[data-modal]"), j = E[E.length - 1];
+    A.current === j && g();
+  }, S = (E) => {
+    C && E.stopPropagation();
   };
   return Ce(() => {
-    if (N) {
+    if (s) {
       const E = setTimeout(() => {
-        T("opacity-100"), z("scale-100");
+        M("opacity-100"), W("scale-100");
       }, 10);
-      return D(!0), () => clearTimeout(E);
+      return O(!0), () => clearTimeout(E);
     } else {
-      T("opacity-0"), z("scale-95");
+      M("opacity-0"), W("scale-95");
       const E = setTimeout(() => {
-        D(!1);
-      }, 100);
+        O(!1);
+      }, 150);
       return () => clearTimeout(E);
     }
-  }, [N]), Ce(() => (document.addEventListener("mousedown", ne), () => {
-    document.removeEventListener("mousedown", ne);
-  }), []), /* @__PURE__ */ R("div", { style: { lineHeight: 0 }, className: `relative ${l}`, children: [
+  }, [s]), Ce(() => {
+    const E = (j) => {
+      A.current && !A.current.contains(j.target) && !w && (j.preventDefault(), ne());
+    };
+    return s && document.addEventListener("mousedown", E), () => {
+      document.removeEventListener("mousedown", E);
+    };
+  }, [s, g, w]), Ce(() => {
+    const E = (j) => {
+      j.key === "Escape" && !w && (j.preventDefault(), ne());
+    };
+    return s && window.addEventListener("keydown", E), () => {
+      window.removeEventListener("keydown", E);
+    };
+  }, [s, g, w]), /* @__PURE__ */ f(mn, { children: D && /* @__PURE__ */ R("div", { className: "m-0", onMouseDown: S, role: "dialog", "aria-modal": "true", children: [
     /* @__PURE__ */ f(
-      "button",
-      {
-        onClick: W,
-        className: `cursor-pointer outline-none ${p}`,
-        "aria-expanded": N,
-        "data-testid": "popover-button",
-        children: s
-      }
-    ),
-    A && /* @__PURE__ */ f(
       "div",
       {
-        ref: C,
-        className: `absolute z-50 mt-1 transform rounded-md border border-gray-10 ${x === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"} bg-surface py-1.5 shadow-subtle duration-100 ease-out dark:bg-gray-5 ${O} ${M}`,
-        children: g(S)
-      }
-    )
-  ] });
-}, Ep = ({ checked: s, id: g, disabled: l = !1, onClick: p }) => /* @__PURE__ */ R("div", { id: g, className: "flex cursor-pointer", children: [
-  /* @__PURE__ */ f(
-    "button",
-    {
-      disabled: l,
-      onClick: p,
-      className: `flex h-5 w-5 items-center justify-center rounded-full border ${l && s ? "border-0 bg-gray-20" : s && "border-0 bg-primary active:bg-primary-dark"} ${l ? "border-gray-10" : "border-gray-40"}`,
-      children: /* @__PURE__ */ f("div", { className: `h-2.5 w-2.5 rounded-full ${s || l ? "bg-white" : "hover:bg-gray-10"}` })
-    }
-  ),
-  /* @__PURE__ */ f("input", { type: "radio", className: "h-0 w-0 appearance-none opacity-0", checked: !0, readOnly: !0 })
-] }), Lp = ({
-  value: s,
-  min: g = 0,
-  max: l,
-  step: p,
-  className: x,
-  disabled: N = !1,
-  ariaLabel: w = "Range slider",
-  onChange: C
-}) => {
-  const A = (s - g) / (l - g) * 100, D = `linear-gradient(to right, #3264fe ${A}%, #d5d5d5 ${A}%)`;
-  return /* @__PURE__ */ f("div", { className: x, children: /* @__PURE__ */ f(
-    "input",
-    {
-      id: "my-slider",
-      type: "range",
-      min: g,
-      max: l,
-      value: s,
-      step: p,
-      onInput: (O) => C(Number(O.target.value)),
-      disabled: N,
-      "aria-label": w,
-      style: { background: D }
-    }
-  ) });
-};
-function op({
-  className: s = "",
-  suiteArray: g,
-  soonText: l,
-  align: p = "right"
-}) {
-  const x = /* @__PURE__ */ f("div", { className: "flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ f(M0, { size: 26, className: "h-7 w-7", weight: "bold" }) }), N = /* @__PURE__ */ f("div", { className: "w-64 flex flex-wrap p-2", "data-testid": "suite-launcher-panel", children: g.map((w, C) => /* @__PURE__ */ f(
-    "div",
-    {
-      className: `w-1/3 flex items-center justify-center rounded-md ${w.isMain ? "bg-primary/10 dark:bg-primary/20" : ""}`,
-      children: /* @__PURE__ */ f(
-        "div",
-        {
-          role: "none",
-          className: `flex items-center px-3 py-2 text-gray-80 w-full rounded-md ${w.availableSoon ? "" : "cursor-pointer hover:bg-gray-1 dark:hover:bg-gray-10"}`,
-          style: { lineHeight: 1.25 },
-          onClick: w.availableSoon ? void 0 : w.onClick,
-          children: /* @__PURE__ */ R("div", { className: "flex flex-col items-center w-full rounded-md", children: [
-            w.isLocked ? /* @__PURE__ */ f(
-              k0,
-              {
-                size: 26,
-                weight: "regular",
-                className: "opacity-50 filter grayscale",
-                "data-testid": "suite-launcher-lock-icon"
-              }
-            ) : ka(w.icon) ? B0(w.icon, {
-              size: 26,
-              className: `${w.icon.props?.className ?? ""} ${w.isMain ? "text-primary" : ""} ${w.availableSoon || w.isLocked ? "opacity-50 filter grayscale" : ""}`,
-              weight: w.isMain ? "fill" : "regular"
-            }) : w.icon,
-            /* @__PURE__ */ R("div", { className: "mt-1 flex items-center", children: [
-              /* @__PURE__ */ f(
-                "span",
-                {
-                  className: `text-xs ${w.isMain ? "text-primary font-medium" : "text-gray-60"}`,
-                  style: { lineHeight: 1, opacity: w.availableSoon || w.isLocked ? 0.5 : 1 },
-                  children: w.title
-                }
-              ),
-              w.availableSoon && /* @__PURE__ */ f("div", { className: "flex rounded-sm px-1 ml-1 py-0.5 bg-purple-1 dark:bg-purple-10 items-center", children: /* @__PURE__ */ f(
-                "span",
-                {
-                  className: "font-medium dark:font-normal text-purple-10 dark:text-purple-1",
-                  style: { lineHeight: 1, fontSize: "xx-small" },
-                  children: l ?? "Soon"
-                }
-              ) })
-            ] })
-          ] })
-        }
-      )
-    },
-    C
-  )) });
-  return /* @__PURE__ */ f(
-    ap,
-    {
-      className: s,
-      childrenButton: x,
-      panel: () => N,
-      align: p,
-      "data-testid": "app-suite-dropdown"
-    }
-  );
-}
-const Rp = ({
-  disabled: s = !1,
-  id: g,
-  dataTestId: l = "switch",
-  size: p = "md",
-  onClick: x,
-  onCheckedChange: N
-}) => {
-  const [w, C] = ue(!1), A = (z) => {
-    const W = z.target.checked;
-    C(W), N && N(W);
-  }, D = s ? "bg-gray-5" : w ? "bg-green" : "bg-gray-10", O = {
-    md: "w-8 h-5",
-    lg: "w-12 h-7",
-    xl: "w-14 h-8"
-  }, T = {
-    md: "w-4 h-4",
-    lg: "w-6 h-6",
-    xl: "w-7 h-7"
-  }, M = {
-    md: "translate-x-[13px]",
-    lg: "translate-x-[21px]",
-    xl: "translate-x-[25px]"
-  };
-  return /* @__PURE__ */ R(
-    "label",
-    {
-      htmlFor: g,
-      className: `relative inline-flex items-center cursor-pointer ${O[p]}`,
-      "data-testid": l,
-      children: [
-        /* @__PURE__ */ f(
-          "input",
-          {
-            type: "checkbox",
-            id: g,
-            disabled: s,
-            checked: w,
-            onChange: A,
-            onClick: x,
-            className: "sr-only"
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: `absolute inset-0 rounded-full transition-colors duration-200 ${D} ${s ? "data-[state=checked]:bg-green/50" : ""}`
-          }
-        ),
-        /* @__PURE__ */ f(
-          "span",
-          {
-            className: `block bg-white rounded-full transition-transform duration-200 transform ${w ? M[p] : "translate-x-[3px]"} ${T[p]} ${s ? "pointer-events-none" : ""}`
-          }
-        )
-      ]
-    }
-  );
-}, $p = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("div", { className: g, children: /* @__PURE__ */ f("table", { className: "w-full", ...l, children: s }) }), Dp = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("thead", { className: g, ...l, children: s }), Op = ({ children: s, className: g, ...l }) => /* @__PURE__ */ f("tbody", { className: g, ...l, children: s }), kp = ({ children: s, className: g, onClick: l, ...p }) => /* @__PURE__ */ f("tr", { onClick: l, className: g, ...p, children: s }), Mp = ({ children: s, className: g, isHeader: l = !1, onClick: p, ...x }) => /* @__PURE__ */ f(l ? "th" : "td", { onClick: p, className: g, ...x, children: s }), Pp = ({
-  disabled: s = !1,
-  accentColor: g,
-  placeholder: l = "",
-  value: p = "",
-  onChange: x,
-  name: N
-}) => /* @__PURE__ */ f(
-  "textarea",
-  {
-    disabled: s,
-    placeholder: l,
-    className: `
-        w-full h-full py-4 px-3.5 bg-transparent border rounded-md outline-none text-lg font-regular resize-none
-        placeholder:text-gray-30
-        ${s ? "border-gray-5 text-gray-40" : "border-gray-20 text-gray-100"}
-        ${!g && "border-gray-20 focus:border-primary focus:ring focus:ring-primary/10"}
-        ${g === "red" && "border-red focus:ring focus:ring-red/10"}
-        `,
-    value: p,
-    onChange: x,
-    name: N
-  }
-), sp = ({
-  label: s,
-  Icon: g,
-  onClick: l,
-  notifications: p,
-  iconDataCy: x,
-  isActive: N = !1,
-  isCollapsed: w = !1,
-  subsection: C = !1
-}) => /* @__PURE__ */ f(
-  "button",
-  {
-    onClick: l,
-    "data-cy": x,
-    className: `flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${N ? "bg-primary/20" : "hover:bg-gray-5"} ${C ? "pl-5" : ""}`,
-    title: w ? s : void 0,
-    children: /* @__PURE__ */ R("div", { className: "flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]", children: [
-      /* @__PURE__ */ R("div", { className: `flex flex-row gap-3 items-center ${N ? "text-primary" : "text-gray-80"}`, children: [
-        /* @__PURE__ */ f(g, { size: 20, weight: N ? "fill" : "regular", className: "flex-shrink-0" }),
-        /* @__PURE__ */ f(
-          "p",
+        className: `
+              fixed
+              min-h-full
+              inset-0
+              z-[9999]
+              bg-highlight/40
+              transition-opacity
+              duration-150
+              ease-out
+              ${T}
+              pointer-events-none           
+            `
+      }
+    ),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: `
+              fixed
+              inset-0
+              z-[9999]
+              flex
+              min-h-full
+              items-center
+              justify-center
+              transition-opacity
+              duration-150
+              ease-out
+              overflow-y-auto
+              ${T}
+              ${z}
+            `,
+        children: /* @__PURE__ */ f(
+          "section",
           {
-            className: `font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${w ? "opacity-0 delay-200" : "opacity-100 delay-0"}`,
-            children: s
+            "data-testid": "ModalContent",
+            ref: A,
+            "data-modal": !0,
+            className: `
+                ${N ?? "w-full"}
+                ${p ?? "max-w-lg"}
+                ${x ?? "p-5"}
+                text-gray-100
+                rounded-2xl
+                bg-surface
+                shadow-subtle-hard
+                transform
+                transition-all
+                duration-150
+                ease-out
+                ${T}
+                ${z}
+              `,
+            children: l
           }
         )
-      ] }),
-      /* @__PURE__ */ f(
-        "div",
-        {
-          className: `flex rounded-full px-2 py-1 transition-all duration-300 ${N ? "text-white bg-primary" : "bg-gray-10 text-gray-60"} ${w || !p ? "opacity-0 invisible delay-300" : "opacity-100 delay-0"}`,
-          children: p && /* @__PURE__ */ f("p", { className: "text-xs font-medium", children: p })
-        }
-      )
-    ] })
-  }
-), fp = ({ options: s, isCollapsed: g, showSubsections: l }) => /* @__PURE__ */ f("div", { className: "flex flex-col w-full", children: s.filter((p) => p.isVisible).map((p, x) => p.subsection && !l || g && p.subsection ? null : /* @__PURE__ */ f(
-  sp,
-  {
-    label: p.label,
-    Icon: p.icon,
-    iconDataCy: p.iconDataCy,
-    isActive: p.isActive,
-    notifications: p.notifications,
-    onClick: p.onClick,
-    isCollapsed: g,
-    subsection: p.subsection
-  },
-  `${p.iconDataCy}-${x}`
-)) }), cp = ({
-  logo: s,
-  title: g,
-  onClick: l,
-  isCollapsed: p,
-  className: x,
-  onToggleCollapse: N,
-  suiteLauncher: w
-}) => /* @__PURE__ */ R("div", { className: `flex flex-row justify-between w-full py-5 px-2 ${x}`, children: [
-  /* @__PURE__ */ R("div", { className: "relative flex flex-row gap-2 items-center", children: [
-    /* @__PURE__ */ R("button", { className: "flex flex-row gap-2 items-center", onClick: l, children: [
-      /* @__PURE__ */ f(
-        "img",
-        {
-          src: s,
-          width: 28,
-          height: 28,
-          alt: g,
-          className: `flex-shrink-0 min-w-[28px] min-h-[28px] ${p ? "group-hover:hidden" : ""}`
-        }
-      ),
-      !p && /* @__PURE__ */ f("p", { className: "text-xl font-medium text-gray-100 whitespace-nowrap", children: g })
-    ] }),
-    p && N && /* @__PURE__ */ f(
-      "button",
-      {
-        onClick: N,
-        className: "hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0",
-        children: /* @__PURE__ */ f(Aa, { size: 28 })
       }
     )
-  ] }),
-  /* @__PURE__ */ R(
+  ] }) });
+}, Bp = ({ isOpen: s, onClose: g, children: l, className: p, disableBackdrop: x = !1 }) => {
+  const N = en(null), [w, C] = ue(s), [A, D] = ue("opacity-0"), [O, T] = ue("scale-95");
+  return Ce(() => {
+    if (s) {
+      C(!0);
+      const M = setTimeout(() => {
+        D("opacity-100"), T("scale-100");
+      }, 10);
+      return () => clearTimeout(M);
+    } else {
+      D("opacity-0"), T("scale-95");
+      const M = setTimeout(() => {
+        C(!1);
+      }, 150);
+      return () => clearTimeout(M);
+    }
+  }, [s]), Ce(() => {
+    const M = (z) => {
+      N.current && !N.current.contains(z.target) && g();
+    };
+    return s && !x && document.addEventListener("mousedown", M), () => {
+      document.removeEventListener("mousedown", M);
+    };
+  }, [s, g, x]), w ? /* @__PURE__ */ R(
     "div",
     {
-      className: `flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${p ? "opacity-0 invisible" : "opacity-100"}`,
+      className: `
+      fixed 
+      inset-0 
+      z-50 
+      flex 
+      items-center 
+      justify-center
+      ${x ? "pointer-events-none" : ""}
+    `,
       children: [
-        w && /* @__PURE__ */ f(
-          op,
+        !x && /* @__PURE__ */ f(
+          "div",
           {
-            suiteArray: w?.suiteArray,
-            soonText: w?.soonText,
-            className: `text-gray-80 ${w?.className}`,
-            align: "left"
+            className: `
+            fixed 
+            inset-0 
+            bg-black/50 
+            backdrop-blur-sm 
+            transition-opacity 
+            duration-200
+            ${A}
+          `
           }
         ),
-        N && /* @__PURE__ */ f(
-          "button",
+        /* @__PURE__ */ f(
+          "div",
           {
-            onClick: N,
-            className: "flex items-center justify-center text-gray-80 hover:text-gray-90",
-            children: /* @__PURE__ */ f(Aa, { size: 28 })
+            ref: N,
+            className: `
+          relative
+          flex
+          bg-black/15
+          border
+          border-white/15
+          rounded-[20px]
+          backdrop-blur
+          shadow-lg
+          transition-all
+          duration-200
+          pointer-events-auto
+          ${A}
+          ${O}
+          ${p}
+        `,
+            children: l
           }
         )
       ]
     }
-  )
-] }), hp = ({
-  usage: s,
-  limit: g,
-  percentage: l,
-  onUpgradeClick: p,
-  upgradeLabel: x,
-  isLoading: N = !0
-}) => /* @__PURE__ */ R("div", { className: "flex flex-col w-full gap-2.5 px-2 pb-5", children: [
-  /* @__PURE__ */ R("div", { className: "flex flex-row w-full justify-between", children: [
-    /* @__PURE__ */ f("div", { className: "flex flex-row items-center gap-2", children: N ? /* @__PURE__ */ R("div", { className: "flex flex-row items-center gap-2", children: [
-      /* @__PURE__ */ f("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" }),
-      /* @__PURE__ */ f("div", { className: "h-3 w-2 rounded-lg bg-gray-5 animate-pulse" }),
-      /* @__PURE__ */ f("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" })
-    ] }) : /* @__PURE__ */ R(mn, { children: [
-      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm font-semibold", children: s }),
-      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm", children: "/" }),
-      /* @__PURE__ */ f("p", { className: "text-gray-60 text-sm", children: g })
-    ] }) }),
-    x && /* @__PURE__ */ f("button", { className: "text-primary text-sm hover:text-primary-dark font-semibold", onClick: p, children: x })
-  ] }),
-  /* @__PURE__ */ f("div", { className: "flex w-full h-1.5 bg-gray-10 rounded-full", children: /* @__PURE__ */ f(
-    "div",
-    {
-      className: "bg-gray-60 rounded-full",
-      style: {
-        width: `${l}%`
-      }
-    }
-  ) })
-] }), Bp = ({
-  header: s,
-  primaryAction: g,
-  suiteLauncher: l,
-  collapsedPrimaryAction: p,
-  options: x,
-  showSubsections: N,
-  isCollapsed: w = !1,
-  storage: C,
-  onToggleCollapse: A
-}) => /* @__PURE__ */ R(
-  "div",
-  {
-    className: `relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group ${w ? "w-[60px]" : "w-64"}`,
-    children: [
-      /* @__PURE__ */ R("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ f(
-          cp,
-          {
-            logo: s.logo,
-            title: s.title,
-            onClick: s.onClick,
-            isCollapsed: w,
-            onToggleCollapse: A,
-            suiteLauncher: l,
-            className: s.className
-          }
-        ),
-        /* @__PURE__ */ R("div", { className: "flex flex-col gap-4 overflow-hidden", children: [
-          /* @__PURE__ */ R("div", { className: "relative", children: [
-            !w && /* @__PURE__ */ f("div", { className: "transition-opacity duration-300 opacity-100", children: g }),
-            w && /* @__PURE__ */ f("div", { className: "transition-opacity duration-300 opacity-100", children: p })
-          ] }),
-          /* @__PURE__ */ f(fp, { options: x, isCollapsed: w, showSubsections: N })
-        ] })
-      ] }),
-      C && /* @__PURE__ */ f(
-        "div",
-        {
-          className: `transition-all overflow-hidden duration-300 ${w ? "opacity-0 invisible delay-200" : "opacity-100 delay-0"}`,
-          children: /* @__PURE__ */ f(
-            hp,
-            {
-              usage: C.usage,
-              limit: C.limit,
-              percentage: C.percentage,
-              onUpgradeClick: C.onUpgradeClick,
-              upgradeLabel: C.upgradeLabel,
-              isLoading: C.isLoading
-            }
-          )
-        }
-      )
-    ]
-  }
-), Ra = () => /* @__PURE__ */ f("div", { className: "flex flex-col text-left gap-2 w-full py-3 px-5 border-b border-gray-5", children: /* @__PURE__ */ R("div", { className: "flex flex-row w-full gap-2", children: [
+  ) : null;
+}, Ra = () => /* @__PURE__ */ f("div", { className: "flex flex-col text-left gap-2 w-full py-3 px-5 border-b border-gray-5", children: /* @__PURE__ */ R("div", { className: "flex flex-row w-full gap-2", children: [
   /* @__PURE__ */ f("div", { className: "flex flex-col h-7 w-8 rounded-full animate-pulse bg-gray-10" }),
   /* @__PURE__ */ R("div", { className: "flex flex-col gap-1 w-full", children: [
     /* @__PURE__ */ R("div", { className: "flex flex-row w-full justify-between", children: [
@@ -5619,7 +5619,7 @@ const Rp = ({
   return /* @__PURE__ */ f(
     "button",
     {
-      onClick: () => p(s.id),
+      onClick: () => p(s.id, s.read),
       className: `flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${x ? "bg-primary/10" : ""}`,
       children: /* @__PURE__ */ R("div", { className: "flex flex-row w-full gap-2", children: [
         /* @__PURE__ */ f(Ma, { fullName: s.from.name, src: s.from.avatar, size: "xxs" }),
@@ -5678,45 +5678,45 @@ const Rp = ({
 ] }) });
 export {
   Ma as Avatar,
-  vp as BaseDialog,
-  xp as Breadcrumbs,
+  kp as BaseDialog,
+  Dp as Breadcrumbs,
   Xi as Button,
-  _p as Card,
-  Pa as Checkbox,
-  wp as CircleButton,
+  vp as Card,
+  Ba as Checkbox,
+  Sp as CircleButton,
   X0 as ContextMenu,
-  yp as Copyable,
-  bp as Dialog,
-  G0 as Dropdown,
-  Np as Empty,
-  Cp as Header,
+  Ip as Copyable,
+  Mp as Dialog,
+  up as Dropdown,
+  Cp as Empty,
+  $p as Header,
   Wa as InfiniteScroll,
-  Sp as Input,
-  Ip as List,
-  K0 as Loader,
-  Ba as Menu,
+  Ap as Input,
+  xp as List,
+  rp as Loader,
+  Pa as Menu,
   dp as MessageCheap,
   Ra as MessageCheapSkeleton,
-  Ap as Modal,
-  ap as Popover,
-  Ep as RadioButton,
-  Lp as RangeSlider,
-  Bp as Sidenav,
+  Pp as Modal,
+  sp as Popover,
+  Tp as RadioButton,
+  Ep as RangeSlider,
+  Op as Sidenav,
   cp as SidenavHeader,
-  sp as SidenavItem,
-  fp as SidenavOptions,
+  ap as SidenavItem,
+  op as SidenavOptions,
   hp as SidenavStorage,
-  up as SkeletonLoader,
-  op as SuiteLauncher,
-  Rp as SwitchComponent,
-  $p as Table,
-  Op as TableBody,
-  Mp as TableCell,
-  Dp as TableHeader,
-  kp as TableRow,
-  Pp as TextArea,
-  J0 as Tooltip,
-  Tp as TransparentModal,
+  tp as SkeletonLoader,
+  fp as SuiteLauncher,
+  Lp as SwitchComponent,
+  wp as Table,
+  yp as TableBody,
+  Np as TableCell,
+  _p as TableHeader,
+  bp as TableRow,
+  Rp as TextArea,
+  ip as Tooltip,
+  Bp as TransparentModal,
   Wp as Tray,
   Fp as UserCheap
 };