npm - @internxt/ui - Versions diffs - 0.1.21 → 0.1.22 - Mend

@internxt/ui 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/index.es.js CHANGED Viewed

@@ -1,14 +1,14 @@
 (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 t, jsxs as d, Fragment as K } from "react/jsx-runtime";
+import { jsx as t, jsxs as c, Fragment as K } from "react/jsx-runtime";
 import * as Z from "react";
-import ae, { useEffect as D, useState as N, isValidElement as oe, useRef as j, forwardRef as pe, cloneElement as ve } from "react";
-import { DotsThree as ce, ArrowUp as Ne, ArrowDown as ke, CaretUp as $e, Warning as de, Copy as Ce, Eye as Se, EyeSlash as Ie, MagnifyingGlass as De, X as ue, WarningOctagon as Te, CheckCircle as Ee, CaretRight as Le, LockIcon as Me, DotsNineIcon as ze, SidebarSimpleIcon as le, WarningIcon as je } from "@phosphor-icons/react";
-function Pe({
+import le, { useEffect as D, useState as N, isValidElement as ce, useRef as j, forwardRef as Ne, cloneElement as ke } from "react";
+import { DotsThree as de, ArrowUp as $e, ArrowDown as Ce, CloudWarningIcon as Se, XIcon as Ie, CaretUp as De, Warning as ue, Copy as Te, Eye as Ee, EyeSlash as Le, MagnifyingGlass as Me, X as me, WarningOctagon as ze, CheckCircle as je, CaretRight as Pe, LockIcon as Re, DotsNineIcon as He, SidebarSimpleIcon as se, WarningIcon as Be } from "@phosphor-icons/react";
+function Ke({
   fullName: e,
   diameter: r,
   className: a = ""
 }) {
-  const n = Re(e);
+  const n = Ae(e);
   return /* @__PURE__ */ t(
     "div",
     {
@@ -18,7 +18,7 @@ function Pe({
     }
   );
 }
-function Re(e) {
+function Ae(e) {
   if (!e)
     return "";
   const r = e?.trim();
@@ -31,7 +31,7 @@ function Re(e) {
     return n + l;
   }
 }
-function He({
+function Oe({
   src: e,
   diameter: r,
   className: a = "",
@@ -47,14 +47,14 @@ function He({
     }
   );
 }
-const Be = {
+const We = {
   xxs: 28,
   xs: 36,
   sm: 40,
   base: 48,
   lg: 80,
   xl: 128
-}, me = ({
+}, fe = ({
   src: e,
   diameter: r = 80,
   size: a,
@@ -62,15 +62,15 @@ const Be = {
   fullName: l,
   style: i = {}
 }) => {
-  const s = a ? Be[a] : r;
-  return e ? /* @__PURE__ */ t(He, { src: e, diameter: s, className: n, style: i }) : /* @__PURE__ */ t(Pe, { diameter: s, className: n, fullName: l });
-}, ot = ({ className: e = "", children: r }) => /* @__PURE__ */ t(
+  const s = a ? We[a] : r;
+  return e ? /* @__PURE__ */ t(Oe, { src: e, diameter: s, className: n, style: i }) : /* @__PURE__ */ t(Ke, { diameter: s, className: n, fullName: l });
+}, mt = ({ className: e = "", children: r }) => /* @__PURE__ */ t(
   "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 ${e}`,
     children: r
   }
-), re = (e, r = []) => {
+), ne = (e, r = []) => {
   const a = (n) => {
     if (["input", "textarea"].includes(document.activeElement?.tagName.toLowerCase() ?? "") && n.key.toLowerCase() !== "escape")
       return;
@@ -80,7 +80,7 @@ const Be = {
   D(() => (window.addEventListener("keydown", a), () => {
     window.removeEventListener("keydown", a);
   }), r);
-}, fe = ({
+}, he = ({
   item: e,
   menu: r,
   isOpen: a,
@@ -89,10 +89,10 @@ const Be = {
   paddingX: i = "px-4",
   paddingY: s = "py-1.5"
 }) => {
-  const [o, c] = N(null), [h, x] = N(!1), m = (u) => {
-    c(u);
+  const [o, d] = N(null), [h, x] = N(!1), m = (u) => {
+    d(u);
   }, g = (u) => u?.separator || e && u?.disabled?.(e) || e && u?.isTitle?.(e), w = () => {
-    r && a && c((u) => {
+    r && a && d((u) => {
       const f = (L) => {
         let I = L, P = r[I];
         for (; g(P) && (I = (I + 1) % r.length, P = r[I], L !== I); )
@@ -102,7 +102,7 @@ const Be = {
       return g(S) ? null : $;
     });
   }, b = () => {
-    r && a && c((u) => {
+    r && a && d((u) => {
       const f = (L) => {
         let I = L, P = r[I];
         for (; g(P) && (I = (I - 1 + r.length) % r.length, P = r[I], L !== I); )
@@ -112,10 +112,10 @@ const Be = {
       return g(S) ? null : $;
     });
   }, k = () => {
-    r && a && c((u) => {
+    r && a && d((u) => {
       if (u !== null) {
         const f = r ? r[u] : void 0;
-        if (e && f && "action" in f && f.action && f.action(e), e && f && "node" in f && f.node && oe(f.node)) {
+        if (e && f && "action" in f && f.action && f.action(e), e && f && "node" in f && f.node && ce(f.node)) {
           const v = f.node.props.onClick;
           v && v();
         }
@@ -125,7 +125,7 @@ const Be = {
   };
   return D(() => {
     h && (l(), x(!1));
-  }, [h]), re(
+  }, [h]), ne(
     {
       arrowdown: w,
       arrowup: b,
@@ -140,7 +140,7 @@ const Be = {
         g(u) || (v.stopPropagation(), e && u.action?.(e), u.onClick && u.onClick(), l());
       },
       onMouseEnter: () => m(f),
-      children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ c(
         "div",
         {
           className: `flex cursor-pointer flex-row whitespace-nowrap ${i} ${s} text-base
@@ -150,11 +150,11 @@ const Be = {
                     ${e && !u.disabled?.(e) && !u.isTitle?.(e) && o !== f && "text-gray-80"}
                   `,
           children: [
-            u.node ? u.node : /* @__PURE__ */ d("div", { className: "flex flex-row items-center space-x-2", children: [
+            u.node ? u.node : /* @__PURE__ */ c("div", { className: "flex flex-row items-center space-x-2", children: [
               u.icon && /* @__PURE__ */ t(u.icon, { size: 20 }),
               /* @__PURE__ */ t("span", { children: u.name })
             ] }),
-            u.keyboardShortcutOptions && /* @__PURE__ */ d("span", { className: "ml-5 flex grow items-center justify-end text-sm text-gray-40", children: [
+            u.keyboardShortcutOptions && /* @__PURE__ */ c("span", { className: "ml-5 flex grow items-center justify-end text-sm text-gray-40", children: [
               u.keyboardShortcutOptions?.keyboardShortcutIcon && /* @__PURE__ */ t(u.keyboardShortcutOptions.keyboardShortcutIcon, { size: 14 }),
               u.keyboardShortcutOptions?.keyboardShortcutText ?? ""
             ] })
@@ -163,7 +163,7 @@ const Be = {
       )
     }
   ) }, f)) });
-}, Ke = 40, Ae = ({
+}, _e = 40, Ue = ({
   item: e,
   menuItemsRef: r,
   menu: a,
@@ -172,7 +172,7 @@ const Be = {
   posY: i,
   isContextMenuCutOff: s,
   isOpen: o,
-  genericEnterKey: c,
+  genericEnterKey: d,
   handleMenuClose: h
 }) => /* @__PURE__ */ t(
   "div",
@@ -181,22 +181,22 @@ const Be = {
     style: n ? { position: "absolute", left: l, top: i, zIndex: 99 } : {
       position: "absolute",
       right: 20,
-      [s ? "bottom" : "top"]: Ke,
+      [s ? "bottom" : "top"]: _e,
       zIndex: 9999
     },
     ref: r,
     children: /* @__PURE__ */ t(
-      fe,
+      he,
       {
         item: e,
         isOpen: o,
-        genericEnterKey: c,
+        genericEnterKey: d,
         handleMenuClose: h,
         menu: a
       }
     )
   }
-), Oe = (e) => /* @__PURE__ */ Z.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Z.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" })), _e = (e) => /* @__PURE__ */ Z.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Z.createElement("rect", { fill: "currentColor", height: 2, rx: 1, width: 12, x: 4, y: 9 })), he = ({
+), Ve = (e) => /* @__PURE__ */ Z.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Z.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" })), Fe = (e) => /* @__PURE__ */ Z.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Z.createElement("rect", { fill: "currentColor", height: 2, rx: 1, width: 12, x: 4, y: 9 })), ge = ({
   id: e,
   checked: r = !0,
   indeterminate: a = !1,
@@ -205,7 +205,7 @@ const Be = {
   className: i,
   checkboxDataCy: s,
   disabled: o = !1
-}) => /* @__PURE__ */ d(
+}) => /* @__PURE__ */ c(
   "label",
   {
     className: `relative h-5 w-5 rounded focus-within:outline-primary ${i}`,
@@ -216,12 +216,12 @@ const Be = {
       /* @__PURE__ */ t(
         "div",
         {
-          onClick: (c) => c.preventDefault(),
+          onClick: (d) => d.preventDefault(),
           "data-cy": s,
           onKeyDown: () => {
           },
           className: `relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white ${o ? a || r ? "bg-gray-20 cursor-auto" : "border-gray-10 cursor-auto" : a || r ? "border-primary bg-primary" : "border-gray-30 hover:border-gray-40"}`,
-          children: a ? /* @__PURE__ */ t(_e, { className: "absolute -inset-px" }) : r && /* @__PURE__ */ t(Oe, { className: "absolute -inset-px" })
+          children: a ? /* @__PURE__ */ t(Fe, { className: "absolute -inset-px" }) : r && /* @__PURE__ */ t(Ve, { className: "absolute -inset-px" })
         }
       ),
       /* @__PURE__ */ t(
@@ -238,7 +238,7 @@ const Be = {
       )
     ]
   }
-), We = 500, Ve = ({
+), Xe = 500, Ye = ({
   item: e,
   listIndex: r,
   itemComposition: a,
@@ -247,7 +247,7 @@ const Be = {
   columnsWidth: i,
   onClose: s,
   onSelectedChanged: o,
-  onDoubleClick: c,
+  onDoubleClick: d,
   onClick: h,
   onClickContextMenu: x,
   onThreeDotsButtonPressed: m,
@@ -257,26 +257,26 @@ const Be = {
   onMouseLeave: k,
   genericEnterKey: u
 }) => {
-  const f = j(), v = j(null), $ = j(null), [S, L] = N(!1), [I, P] = N(0), [z, V] = N(0), [M, A] = N({ width: 0, height: 0 }), [U, Y] = N(!1);
+  const f = j(), v = j(null), $ = j(null), [S, L] = N(!1), [I, P] = N(0), [z, U] = N(0), [M, A] = N({ width: 0, height: 0 }), [V, Y] = N(!1);
   D(() => {
     $.current && ($.current.offsetHeight !== M.height || $.current?.offsetWidth !== M.width) && A({
       width: $.current.offsetWidth,
       height: $.current.offsetHeight
     });
   }, [M.height, M.width]), D(() => {
-    S || O(), l || (L(!1), P(0), V(0));
+    S || O(), l || (L(!1), P(0), U(0));
   }, [l]);
   function O() {
     const p = f.current, T = $?.current?.offsetHeight || 300;
     if (!p) return;
-    const { bottom: X } = p.getBoundingClientRect(), W = window.innerHeight, q = X + T > W;
+    const { bottom: X } = p.getBoundingClientRect(), _ = window.innerHeight, q = X + T > _;
     Y(q);
   }
   const G = (p) => {
     p.preventDefault(), x?.(p);
-    const T = $?.current?.offsetWidth || 240, X = $?.current?.offsetHeight || 300, W = v?.current?.getBoundingClientRect(), { innerWidth: q, innerHeight: Q } = window;
-    let B = p.clientX - (W?.left || 0), J = p.clientY - (W?.top || 0);
-    p.clientX + T > q && (B = B - T), p.clientY + X > Q && p.clientY > We && (J = J - X), P(B), V(J), L(!0);
+    const T = $?.current?.offsetWidth || 240, X = $?.current?.offsetHeight || 300, _ = v?.current?.getBoundingClientRect(), { innerWidth: q, innerHeight: ee } = window;
+    let B = p.clientX - (_?.left || 0), J = p.clientY - (_?.top || 0);
+    p.clientX + T > q && (B = B - T), p.clientY + X > ee && p.clientY > Xe && (J = J - X), P(B), U(J), L(!0);
   }, R = (p) => {
     p.preventDefault(), m?.(p), L(!1);
   }, F = (p) => {
@@ -284,7 +284,7 @@ const Be = {
   }, H = () => {
     s();
   };
-  return re(
+  return ne(
     {
       r: H,
       backspace: H,
@@ -293,10 +293,10 @@ const Be = {
       }
     },
     []
-  ), /* @__PURE__ */ d(
+  ), /* @__PURE__ */ c(
     "div",
     {
-      onDoubleClick: c,
+      onDoubleClick: d,
       onClick: F,
       onContextMenu: G,
       ref: v,
@@ -305,7 +305,7 @@ const Be = {
       onMouseLeave: k,
       children: [
         l && n && /* @__PURE__ */ t(
-          Ae,
+          Ue,
           {
             item: e,
             menu: w,
@@ -314,7 +314,7 @@ const Be = {
             isOpen: l,
             posX: I,
             posY: z,
-            isContextMenuCutOff: U,
+            isContextMenuCutOff: V,
             genericEnterKey: u,
             handleMenuClose: H
           }
@@ -324,7 +324,7 @@ const Be = {
           {
             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 ${n && "opacity-100"}`,
             children: /* @__PURE__ */ t(
-              he,
+              ge,
               {
                 onClick: (p) => {
                   p.stopPropagation(), o(!n);
@@ -362,7 +362,7 @@ const Be = {
                 onClick: (p) => {
                   R(p);
                 },
-                children: /* @__PURE__ */ t(ce, { size: 24, weight: "bold" })
+                children: /* @__PURE__ */ t(de, { size: 24, weight: "bold" })
               }
             )
           }
@@ -370,7 +370,7 @@ const Be = {
       ]
     }
   );
-}, Ue = ({
+}, Ge = ({
   selectedItems: e,
   onTopSelectionCheckboxClick: r,
   items: a,
@@ -379,12 +379,12 @@ const Be = {
   onOrderableColumnClicked: i,
   menu: s,
   displayMenuDiv: o,
-  isVerticalScrollbarVisible: c,
+  isVerticalScrollbarVisible: d,
   checkboxDataCy: h,
   onClose: x
-}) => /* @__PURE__ */ t("div", { onClick: x, onContextMenu: x, className: "flex min-w-max h-12 shrink-0 flex-row px-5", children: /* @__PURE__ */ d("div", { className: "flex h-full min-w-full flex-row items-center border-b border-gray-10", children: [
+}) => /* @__PURE__ */ t("div", { onClick: x, onContextMenu: x, className: "flex min-w-max h-12 shrink-0 flex-row px-5", children: /* @__PURE__ */ c("div", { className: "flex h-full min-w-full flex-row items-center border-b border-gray-10", children: [
   /* @__PURE__ */ t("div", { className: "flex h-full flex-row items-center justify-between pr-4", children: /* @__PURE__ */ t(
-    he,
+    ge,
     {
       checked: e.length > 0,
       indeterminate: a.length > e.length && e.length > 0,
@@ -392,7 +392,7 @@ const Be = {
       checkboxDataCy: h
     }
   ) }),
-  n.map((m) => /* @__PURE__ */ d(
+  n.map((m) => /* @__PURE__ */ c(
     "button",
     {
       onClick: m.orderable ? () => {
@@ -402,14 +402,14 @@ const Be = {
       className: `flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  ${m.width} ${m.orderable ? "cursor-pointer hover:text-gray-80" : ""}`,
       children: [
         /* @__PURE__ */ t("span", { "data-cy": "textDataCy" in m && m?.textDataCy, children: m.label }),
-        m.name === l?.field && m.orderable && (l?.direction === "ASC" ? /* @__PURE__ */ t(Ne, { size: 14, weight: "bold" }) : /* @__PURE__ */ t(ke, { size: 14, weight: "bold" }))
+        m.name === l?.field && m.orderable && (l?.direction === "ASC" ? /* @__PURE__ */ t($e, { size: 14, weight: "bold" }) : /* @__PURE__ */ t(Ce, { size: 14, weight: "bold" }))
       ]
     },
     m.name.toString()
   )),
-  c && /* @__PURE__ */ t("div", { className: "mr-15px" }),
+  d && /* @__PURE__ */ t("div", { className: "mr-15px" }),
   (s || o) && /* @__PURE__ */ t("div", { className: "flex h-full w-12 shrink-0" })
-] }) }), Fe = ({ skeletonItem: e, columns: r }) => /* @__PURE__ */ d(
+] }) }), qe = ({ skeletonItem: e, columns: r }) => /* @__PURE__ */ c(
   "div",
   {
     "data-testid": "skeleton-loader-item",
@@ -427,14 +427,14 @@ const Be = {
       /* @__PURE__ */ t("div", { className: "flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5" })
     ]
   }
-), Xe = ({ skeleton: e }) => /* @__PURE__ */ t(K, { children: new Array(e.length).fill(0).map((r, a) => /* @__PURE__ */ t(
-  Fe,
+), Je = ({ skeleton: e }) => /* @__PURE__ */ t(K, { children: new Array(e.length).fill(0).map((r, a) => /* @__PURE__ */ t(
+  qe,
   {
     skeletonItem: e[a].skeletonItem,
     columns: e[a].columns
   },
   `skinSkeletonRow${a}`
-)) }), ge = ({
+)) }), xe = ({
   children: e,
   handleNextPage: r,
   hasMoreItems: a,
@@ -442,7 +442,7 @@ const Be = {
   scrollableTarget: l,
   classNameLoader: i
 }) => {
-  const s = j(null), o = j(null), [c, h] = N(!1);
+  const s = j(null), o = j(null), [d, h] = N(!1);
   D(() => {
     l && (o.current = document.getElementById(l));
     const m = new IntersectionObserver(
@@ -459,12 +459,12 @@ const Be = {
       g && m.unobserve(g);
     };
   }, [a, r, l]);
-  const x = ae.Children.map(e, (m, g) => g === ae.Children.count(e) - 1 && a ? /* @__PURE__ */ d(K, { children: [
+  const x = le.Children.map(e, (m, g) => g === le.Children.count(e) - 1 && a ? /* @__PURE__ */ c(K, { children: [
     m,
-    /* @__PURE__ */ t("div", { ref: s, className: i, children: c && n })
+    /* @__PURE__ */ t("div", { ref: s, className: i, children: d && n })
   ] }) : m);
   return /* @__PURE__ */ t("div", { children: x });
-}, ct = ({
+}, ft = ({
   header: e,
   checkboxDataCy: r,
   items: a,
@@ -473,7 +473,7 @@ const Be = {
   onClick: i,
   onDoubleClick: s,
   onEnterPressed: o,
-  onSelectedItemsChanged: c,
+  onSelectedItemsChanged: d,
   isLoading: h,
   forceLoading: x,
   skinSkeleton: m,
@@ -490,12 +490,12 @@ const Be = {
   onMouseLeave: I,
   headerBackgroundColor: P = "bg-surface",
   keyBoardShortcutActions: z,
-  disableKeyboardShortcuts: V
+  disableKeyboardShortcuts: U
 }) => {
-  const M = j(null), A = (y) => l.some((C) => y.id === C.id), U = document.getElementById("scrollableList"), Y = U && U.scrollHeight > U.clientHeight, O = !u && a.length === 0 && !h, [G, R] = N(null), F = new Array(25).fill(0).map(() => ({
+  const M = j(null), A = (y) => l.some((C) => y.id === C.id), V = document.getElementById("scrollableList"), Y = V && V.scrollHeight > V.clientHeight, O = !u && a.length === 0 && !h, [G, R] = N(null), F = new Array(25).fill(0).map(() => ({
     skeletonItem: m,
     columns: e.map((y) => y.width)
-  })), H = /* @__PURE__ */ t(Xe, { skeleton: F });
+  })), H = /* @__PURE__ */ t(Je, { skeleton: F });
   D(() => {
     const y = (C) => {
       M.current && !M.current.contains(C.target) && R(null);
@@ -504,53 +504,53 @@ const Be = {
       document.removeEventListener("mousedown", y), document.removeEventListener("contextmenu", y);
     };
   }, []);
-  const _ = () => {
+  const W = () => {
     k?.();
   }, p = () => {
     const y = l.map((C) => ({ props: C, value: !1 }));
-    c(y);
+    d(y);
   }, T = (y) => {
     const C = [...l.map((E) => ({ props: E, value: !1 })), { props: y, value: !0 }];
-    c(C);
+    d(C);
   }, X = () => {
     if (l.length === 1) {
       const C = l[0];
       o?.(C);
     }
-  }, W = () => {
-    const C = a.filter((E) => !l.some((we) => we.id === E.id)).map((E) => ({ props: E, value: !0 }));
-    c(C);
+  }, _ = () => {
+    const C = a.filter((E) => !l.some((ve) => ve.id === E.id)).map((E) => ({ props: E, value: !0 }));
+    d(C);
   }, q = () => {
-    l.length === a.length ? p() : W();
-  }, Q = (y) => {
-    if (ee(), !y.orderable || !b) return;
+    l.length === a.length ? p() : _();
+  }, ee = (y) => {
+    if (te(), !y.orderable || !b) return;
     const C = w?.field === y.name;
     b(C ? { field: y.name, direction: w.direction === "ASC" ? "DESC" : "ASC" } : { field: y.name, direction: y.defaultDirection ?? "ASC" });
   }, B = (y) => {
-    V || y();
+    U || y();
   }, J = () => {
     z?.onRKeyPressed?.();
-  }, ne = () => {
+  }, ae = () => {
     z?.onBackspaceKeyPressed?.();
   };
-  re(
+  ne(
     {
-      "ctrl+a": () => B(W),
-      "meta+a": () => B(W),
+      "ctrl+a": () => B(_),
+      "meta+a": () => B(_),
       esc: () => B(p),
       r: () => B(J),
-      backspace: () => B(ne),
-      delete: () => B(ne)
+      backspace: () => B(ae),
+      delete: () => B(ae)
     },
-    [a, l, V]
+    [a, l, U]
   );
-  const xe = (y, C) => {
-    C.metaKey || C.ctrlKey ? c([{ props: y, value: !A(y) }]) : A(y) || i?.(y), R(null);
-  }, ye = (y, C) => {
+  const be = (y, C) => {
+    C.metaKey || C.ctrlKey ? d([{ props: y, value: !A(y) }]) : A(y) || i?.(y), R(null);
+  }, we = (y, C) => {
     C.preventDefault(), A(y) || T(y), R(y.id);
-  }, ee = () => {
+  }, te = () => {
     R(null);
-  }, be = (y, C) => {
+  }, pe = (y, C) => {
     y.stopPropagation(), R((E) => E ? null : C.id), A(C) || T(C);
   };
   return /* @__PURE__ */ t(
@@ -559,46 +559,46 @@ const Be = {
       id: "generic-list-component",
       className: `relative isolate flex h-full flex-col overflow-x-auto overflow-y-hidden ${$}`,
       ref: M,
-      children: /* @__PURE__ */ d("div", { id: "scrollableList", className: "flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto", children: [
+      children: /* @__PURE__ */ c("div", { id: "scrollableList", className: "flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto", children: [
         /* @__PURE__ */ t("div", { className: `sticky top-0 z-50 ${P}`, children: O ? null : /* @__PURE__ */ t(
-          Ue,
+          Ge,
           {
             selectedItems: l,
             onTopSelectionCheckboxClick: q,
             items: a,
             header: e,
             orderBy: w,
-            onOrderableColumnClicked: Q,
+            onOrderableColumnClicked: ee,
             menu: f,
             displayMenuDiv: v,
             isVerticalScrollbarVisible: Y,
             checkboxDataCy: r,
-            onClose: ee
+            onClose: te
           }
         ) }),
         O ? g : a.length > 0 && !x ? /* @__PURE__ */ t(
-          ge,
+          xe,
           {
-            handleNextPage: _,
+            handleNextPage: W,
             hasMoreItems: !!u,
             loader: H,
             scrollableTarget: "scrollableList",
             children: a.map((y, C) => /* @__PURE__ */ t(
-              Ve,
+              Ye,
               {
                 item: y,
                 listIndex: C,
                 isOpen: G === y.id,
-                onClose: ee,
+                onClose: te,
                 itemComposition: n,
                 selected: A(y),
                 onDoubleClick: s && (() => s(y)),
-                onClick: (E) => xe(y, E),
-                onClickContextMenu: (E) => ye(y, E),
-                onThreeDotsButtonPressed: (E) => be(E, y),
+                onClick: (E) => be(y, E),
+                onClickContextMenu: (E) => we(y, E),
+                onThreeDotsButtonPressed: (E) => pe(E, y),
                 columnsWidth: e.map((E) => E.width),
                 menu: f,
-                onSelectedChanged: (E) => c([{ props: y, value: E }]),
+                onSelectedChanged: (E) => d([{ props: y, value: E }]),
                 disableItemCompositionStyles: S,
                 onMouseEnter: L,
                 onMouseLeave: I,
@@ -622,15 +622,15 @@ const Be = {
       ] })
     }
   );
-}, dt = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("div", { className: r, children: /* @__PURE__ */ t("table", { className: "w-full", ...a, children: e }) }), ut = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("thead", { className: r, ...a, children: e }), mt = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("tbody", { className: r, ...a, children: e }), ft = ({ children: e, className: r, onClick: a, ...n }) => /* @__PURE__ */ t("tr", { onClick: a, className: r, ...n, children: e }), ht = ({ children: e, className: r, isHeader: a = !1, onClick: n, ...l }) => /* @__PURE__ */ t(a ? "th" : "td", { onClick: n, className: r, ...l, children: e }), Ye = ({
+}, ht = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("div", { className: r, children: /* @__PURE__ */ t("table", { className: "w-full", ...a, children: e }) }), gt = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("thead", { className: r, ...a, children: e }), xt = ({ children: e, className: r, ...a }) => /* @__PURE__ */ t("tbody", { className: r, ...a, children: e }), yt = ({ children: e, className: r, onClick: a, ...n }) => /* @__PURE__ */ t("tr", { onClick: a, className: r, ...n, children: e }), bt = ({ children: e, className: r, isHeader: a = !1, onClick: n, ...l }) => /* @__PURE__ */ t(a ? "th" : "td", { onClick: n, className: r, ...l, children: e }), Ze = ({
   classNameContainer: e,
   classNameLoader: r,
   classNameText: a,
   type: n = "spinner",
   text: l,
   size: i = 32
-}) => /* @__PURE__ */ t("div", { className: e, children: n === "spinner" ? /* @__PURE__ */ d(K, { children: [
-  /* @__PURE__ */ d(
+}) => /* @__PURE__ */ t("div", { className: e, children: n === "spinner" ? /* @__PURE__ */ c(K, { children: [
+  /* @__PURE__ */ c(
     "svg",
     {
       className: `animate-spin ${r}`,
@@ -655,10 +655,10 @@ const Be = {
     }
   ),
   l && /* @__PURE__ */ t("p", { className: a, children: l })
-] }) : /* @__PURE__ */ d("div", { className: `loader-container ${r}`, children: [
+] }) : /* @__PURE__ */ c("div", { className: `loader-container ${r}`, children: [
   /* @__PURE__ */ t("div", { className: "loader06" }),
   l && /* @__PURE__ */ t("p", { className: `loader-text ${a}`, children: l })
-] }) }), te = ({
+] }) }), Q = ({
   variant: e = "primary",
   type: r = "button",
   id: a,
@@ -669,7 +669,7 @@ const Be = {
   },
   onKeyDown: o = () => {
   },
-  size: c = "default",
+  size: d = "default",
   loading: h,
   dataTest: x,
   autofocus: m,
@@ -678,7 +678,7 @@ const Be = {
 }) => {
   let b = "";
   return e === "primary" && !i ? b = `${h ? "bg-primary-dark" : "bg-primary"} active:bg-primary-dark text-white shadow-sm` : e === "primary" && i ? b = "bg-gray-30 text-white shadow-sm" : e === "destructive" && !i ? b = `${h ? "bg-red-dark" : "bg-red"} active:bg-red-dark text-white shadow-sm` : e === "destructive" && i ? b = "bg-gray-30 text-white shadow-sm" : e === "secondary" && !i ? b = "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" : e === "secondary" && i ? b = "bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm" : e === "ghost" && !i ? b = "hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10" : e === "ghost" && i ? b = "text-gray-30" : e === "tertiary" && !i ? b = `${h ? "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` : e === "tertiary" && i && (b = "bg-white/45 text-white shadow-sm border border-white/20"), /* @__PURE__ */ d(
+    transition-all duration-200` : e === "tertiary" && i && (b = "bg-white/45 text-white shadow-sm border border-white/20"), /* @__PURE__ */ c(
     "button",
     {
       "data-cy": g,
@@ -689,30 +689,77 @@ const Be = {
       type: r,
       "data-test": x,
       autoFocus: m,
-      className: `${c === "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
+      className: `${d === "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 ${b} ${l}`,
       children: [
-        h && /* @__PURE__ */ t(Ye, { size: 18 }),
+        h && /* @__PURE__ */ t(Ze, { size: 18 }),
         /* @__PURE__ */ t("div", { className: "flex items-center justify-center space-x-2", "data-cy": w, children: n })
       ]
     }
   );
-}, gt = ({ icon: e, title: r, subtitle: a, action: n, contextMenuClick: l }) => {
+}, wt = ({ icon: e, title: r, subtitle: a, action: n, contextMenuClick: l }) => {
   let i = null;
-  return n && (i = /* @__PURE__ */ d(te, { variant: "secondary", onClick: n.onClick, children: [
+  return n && (i = /* @__PURE__ */ c(Q, { variant: "secondary", onClick: n.onClick, children: [
     /* @__PURE__ */ t("span", { children: n.text }),
     /* @__PURE__ */ t(n.icon, { size: 20 })
-  ] })), /* @__PURE__ */ t("div", { className: "h-full w-full p-8", onContextMenu: l, children: /* @__PURE__ */ d("div", { className: "flex h-full flex-col items-center justify-center space-y-6 pb-20", children: [
+  ] })), /* @__PURE__ */ t("div", { className: "h-full w-full p-8", onContextMenu: l, children: /* @__PURE__ */ c("div", { className: "flex h-full flex-col items-center justify-center space-y-6 pb-20", children: [
     /* @__PURE__ */ t("div", { className: "pointer-events-none mx-auto w-max", children: e }),
-    /* @__PURE__ */ d("div", { className: "pointer-events-none space-y-1 text-center", children: [
+    /* @__PURE__ */ c("div", { className: "pointer-events-none space-y-1 text-center", children: [
       /* @__PURE__ */ t("p", { className: "text-2xl font-medium text-gray-100", children: r }),
       /* @__PURE__ */ t("p", { className: "text-lg text-gray-60", children: a })
     ] }),
     i
   ] }) });
-}, xt = ({
+}, re = ({ className: e }) => /* @__PURE__ */ t("div", { className: `rounded-lg bg-gray-5 animate-pulse${e ? ` ${e}` : ""}` }), ye = () => /* @__PURE__ */ c("div", { className: "flex flex-row items-center gap-2", children: [
+  /* @__PURE__ */ t(re, { className: "h-3 w-8" }),
+  /* @__PURE__ */ t(re, { className: "h-3 w-2" }),
+  /* @__PURE__ */ t(re, { className: "h-3 w-8" })
+] }), pt = ({
+  title: e,
+  description: r,
+  usage: a,
+  limit: n,
+  percentage: l,
+  upgradeLabel: i,
+  closeButtonLabel: s,
+  onUpgradeClick: o,
+  onCloseButtonClick: d,
+  barClassName: h = "bg-yellow-60",
+  isLoading: x = !1
+}) => /* @__PURE__ */ c("div", { className: "flex flex-col w-full px-4 py-3 rounded-xl bg-alert border-alert-dark border h-min", children: [
+  /* @__PURE__ */ c("div", { className: "flex flex-col w-full gap-1", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-row justify-between items-center", children: [
+      /* @__PURE__ */ c("span", { className: "flex flex-row items-center gap-2", children: [
+        /* @__PURE__ */ t(Se, { weight: "fill", className: "size-5 text-yellow-60" }),
+        /* @__PURE__ */ t("p", { className: "text-sm font-semibold text-gray-80", children: e })
+      ] }),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          "aria-label": s,
+          onClick: d,
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ t(Ie, { className: "size-5 text-gray-53 cursor-pointer" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "text-xs font-medium text-gray-52", children: r })
+  ] }),
+  /* @__PURE__ */ c("div", { className: "flex flex-row items-center gap-6 h-10", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ t("div", { className: "flex w-full h-1.5 bg-gray-10 rounded-full", children: /* @__PURE__ */ t("div", { className: `${h} h-full rounded-full`, style: { width: `${l}%` } }) }),
+      x ? /* @__PURE__ */ t(ye, {}) : /* @__PURE__ */ c("span", { className: "flex flex-row gap-1", children: [
+        /* @__PURE__ */ t("p", { className: "text-gray-60 text-xs", children: a }),
+        /* @__PURE__ */ t("p", { className: "text-gray-60 text-xs", children: "/" }),
+        /* @__PURE__ */ t("p", { className: "text-gray-60 text-xs", children: n })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(Q, { variant: "secondary", size: "medium", onClick: o, children: i })
+  ] })
+] }), vt = ({
   children: e,
   variant: r = "default",
   active: a = !1,
@@ -721,7 +768,7 @@ const Be = {
   className: i = "",
   dropdown: s,
   indicator: o,
-  isOpen: c = !1,
+  isOpen: d = !1,
   handleOpen: h = () => {
   },
   handleClose: x = () => {
@@ -729,7 +776,7 @@ const Be = {
 }) => {
   D(() => {
     const u = (f) => {
-      if (c) {
+      if (d) {
         const v = f.target, $ = document.querySelector(`[data-circle-button="${r}"]`);
         $ && !$.contains(v) && x();
       }
@@ -737,9 +784,9 @@ const Be = {
     return document.addEventListener("click", u), () => {
       document.removeEventListener("click", u);
     };
-  }, [c, r]);
+  }, [d, r]);
   const m = (u) => {
-    u.stopPropagation(), s && (l?.(), c ? x() : h());
+    u.stopPropagation(), s && (l?.(), d ? x() : h());
   }, g = () => {
     n?.();
   }, w = () => {
@@ -751,7 +798,7 @@ const Be = {
       default:
         return a ? "bg-white/85" : "bg-white/25 hover:bg-white/35";
     }
-  }, b = () => o ? r === "warning" ? /* @__PURE__ */ t("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__ */ t(de, { size: 12, color: "black", weight: "bold" }) }) : /* @__PURE__ */ t(
+  }, b = () => o ? r === "warning" ? /* @__PURE__ */ t("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__ */ t(ue, { size: 12, color: "black", weight: "bold" }) }) : /* @__PURE__ */ t(
     "div",
     {
       className: `absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full ${o.className || ""}`,
@@ -762,10 +809,10 @@ const Be = {
     {
       onClick: m,
       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__ */ t($e, { size: 10, color: "black", weight: "fill" })
+      children: /* @__PURE__ */ t(De, { size: 10, color: "black", weight: "fill" })
     }
   );
-  return /* @__PURE__ */ d("div", { className: "relative w-11 h-11", "data-circle-button": r, children: [
+  return /* @__PURE__ */ c("div", { className: "relative w-11 h-11", "data-circle-button": r, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -783,9 +830,9 @@ const Be = {
     ),
     k(),
     b(),
-    c && s && r !== "cancel" && /* @__PURE__ */ t("div", { className: "absolute bottom-full mb-2 left-0", children: s })
+    d && s && r !== "cancel" && /* @__PURE__ */ t("div", { className: "absolute bottom-full mb-2 left-0", children: s })
   ] });
-}, Ge = ({
+}, Qe = ({
   children: e,
   title: r,
   subtitle: a,
@@ -794,12 +841,12 @@ const Be = {
   delayInMs: i,
   arrow: s = !0
 }) => {
-  const [o, c] = N(!1), h = j(null);
+  const [o, d] = N(!1), h = j(null);
   function x() {
-    c(!0);
+    d(!0);
   }
   function m() {
-    c(!1);
+    d(!1);
   }
   function g() {
     h.current !== null && clearTimeout(h.current), x();
@@ -824,7 +871,7 @@ const Be = {
       b = "top-full left-1/2 -translate-x-1/2 mt-1.5", k = "flex-col-reverse", u = "polygon(50% 0%, 0% 100%, 100% 100%)";
       break;
   }
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: `relative w-max ${l}`,
@@ -832,12 +879,12 @@ const Be = {
       onMouseLeave: w,
       style: { lineHeight: 0 },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             className: `pointer-events-none absolute ${b} flex items-center ${k} drop-shadow-tooltip transition-all duration-150 ${o ? "scale-100 opacity-100" : "scale-50 opacity-0"}`,
             children: [
-              /* @__PURE__ */ d("div", { className: "w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5", children: [
+              /* @__PURE__ */ c("div", { className: "w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5", children: [
                 /* @__PURE__ */ t("p", { className: "text-base text-white", children: r }),
                 a && /* @__PURE__ */ t("p", { className: "-mt-1 text-sm text-gray-40", children: a })
               ] }),
@@ -856,7 +903,7 @@ const Be = {
       ]
     }
   );
-}, yt = ({
+}, Nt = ({
   className: e = "",
   classText: r = "select-text text-gray-80",
   text: a,
@@ -867,26 +914,26 @@ const Be = {
   async function o() {
     await navigator.clipboard.writeText(a), s(!0), setTimeout(() => s(!1), 1e3);
   }
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: `${e} flex h-11 items-center justify-between rounded-md border border-gray-10 bg-gray-5 px-4`,
       children: [
         /* @__PURE__ */ t("p", { className: `${r}`, children: a }),
         /* @__PURE__ */ t(
-          Ge,
+          Qe,
           {
             className: "ml-6",
             popsFrom: "top",
             title: i ? n : l,
             delayInMs: i ? 500 : void 0,
-            children: /* @__PURE__ */ t("button", { disabled: i, onClick: o, children: /* @__PURE__ */ t(Ce, { className: "shrink-0 text-gray-50 hover:text-gray-60", size: 24 }) })
+            children: /* @__PURE__ */ t("button", { disabled: i, onClick: o, children: /* @__PURE__ */ t(Te, { className: "shrink-0 text-gray-50 hover:text-gray-60", size: 24 }) })
           }
         )
       ]
     }
   );
-}, bt = ({
+}, kt = ({
   className: e = "",
   label: r,
   variant: a = "default",
@@ -895,7 +942,7 @@ const Be = {
   placeholder: i,
   value: s,
   maxLength: o,
-  onChange: c,
+  onChange: d,
   onClear: h,
   message: x,
   onFocus: m,
@@ -912,11 +959,11 @@ const Be = {
   borderRadius: I = "rounded-md",
   fontClasses: P = "text-lg font-normal"
 }) => {
-  const z = j(null), V = () => {
+  const z = j(null), U = () => {
     z && z.current && (a !== "email" && (z.current.selectionStart = z.current.value.length, z.current.selectionEnd = z.current.value.length), z.current.focus());
   };
   D(() => {
-    (x || w) && V();
+    (x || w) && U();
   }, [x, w, l]);
   let M;
   switch (n) {
@@ -933,17 +980,17 @@ const Be = {
       M = "focus:border-primary ring-primary";
       break;
   }
-  const A = a === "search" ? "border-transparent" : "border-gray-20 disabled:border-gray-10 hover:border-gray-30", U = a === "search" ? "placeholder-gray-40" : "placeholder-gray-30", Y = a === "search" ? "pr-4 pl-10" : "px-4", [O, G] = N(!1), [R, F] = N(!1), H = /* @__PURE__ */ d("div", { className: "relative", children: [
+  const A = a === "search" ? "border-transparent" : "border-gray-20 disabled:border-gray-10 hover:border-gray-30", V = a === "search" ? "placeholder-gray-40" : "placeholder-gray-30", Y = a === "search" ? "pr-4 pl-10" : "px-4", [O, G] = N(!1), [R, F] = N(!1), H = /* @__PURE__ */ c("div", { className: "relative", children: [
     /* @__PURE__ */ t(
       "input",
       {
         ref: z,
         disabled: l,
         className: `inxt-input h-10 w-full border bg-transparent ${P} text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20
-          ${A} ${M} ${U} ${Y} ${I} ${L}`,
+          ${A} ${M} ${V} ${Y} ${I} ${L}`,
         type: a === "password" && !O ? "password" : a === "email" ? "email" : "text",
         placeholder: i,
-        onChange: (T) => c && c(T.target.value),
+        onChange: (T) => d && d(T.target.value),
         onFocus: () => {
           m && m(), F(!0);
         },
@@ -969,11 +1016,11 @@ const Be = {
           T.preventDefault(), G(!O);
         },
         className: "absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer bg-transparent py-2 pl-2 text-gray-80",
-        children: O ? /* @__PURE__ */ t(Se, { size: 24 }) : /* @__PURE__ */ t(Ie, { size: 24 })
+        children: O ? /* @__PURE__ */ t(Ee, { size: 24 }) : /* @__PURE__ */ t(Le, { size: 24 })
       }
     ),
     a === "search" && /* @__PURE__ */ t(
-      De,
+      Me,
       {
         className: `absolute left-4 top-1/2 -translate-y-1/2 ${l ? "text-gray-20" : "text-gray-40"}`,
         size: 20
@@ -989,36 +1036,36 @@ const Be = {
         },
         className: `absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer py-2 pl-2 text-gray-40
             ${R ? "bg-white" : "bg-gray-5"}`,
-        children: /* @__PURE__ */ t(ue, { size: 20 })
+        children: /* @__PURE__ */ t(me, { size: 20 })
       }
     )
   ] });
-  let _, p;
+  let W, p;
   switch (n) {
     case "success":
-      _ = "text-green", p = Ee;
+      W = "text-green", p = je;
       break;
     case "warning":
-      _ = "text-orange", p = de;
+      W = "text-orange", p = ue;
       break;
     case "error":
-      _ = "text-red", p = Te;
+      W = "text-red", p = ze;
       break;
     default:
-      _ = "text-gray-80";
+      W = "text-gray-80";
   }
-  return /* @__PURE__ */ d("div", { className: `${e}`, children: [
-    r ? /* @__PURE__ */ d("label", { children: [
+  return /* @__PURE__ */ c("div", { className: `${e}`, children: [
+    r ? /* @__PURE__ */ c("label", { children: [
       /* @__PURE__ */ t("span", { "data-cy": v, className: `text-sm ${l ? "text-gray-40" : "text-gray-80"}`, children: r }),
       H
     ] }) : H,
     o && /* @__PURE__ */ t("p", { className: "font-regular mt-1 text-right text-sm text-gray-50", children: `${s?.length ?? 0}/${o}` }),
-    x && /* @__PURE__ */ d("div", { className: `mt-0.5 flex items-center ${_}`, children: [
+    x && /* @__PURE__ */ c("div", { className: `mt-0.5 flex items-center ${W}`, children: [
       p && /* @__PURE__ */ t(p, { size: 16, weight: "fill" }),
       /* @__PURE__ */ t("p", { className: "ml-1 text-sm", children: x })
     ] })
   ] });
-}, wt = ({ checked: e, id: r, disabled: a = !1, onClick: n }) => /* @__PURE__ */ d("div", { id: r, className: "flex cursor-pointer", children: [
+}, $t = ({ checked: e, id: r, disabled: a = !1, onClick: n }) => /* @__PURE__ */ c("div", { id: r, className: "flex cursor-pointer", children: [
   /* @__PURE__ */ t(
     "button",
     {
@@ -1029,7 +1076,7 @@ const Be = {
     }
   ),
   /* @__PURE__ */ t("input", { type: "radio", className: "h-0 w-0 appearance-none opacity-0", checked: !0, readOnly: !0 })
-] }), pt = ({
+] }), Ct = ({
   value: e,
   min: r = 0,
   max: a,
@@ -1039,7 +1086,7 @@ const Be = {
   ariaLabel: s = "Range slider",
   onChange: o
 }) => {
-  const c = (e - r) / (a - r) * 100, h = `linear-gradient(to right, #3264fe ${c}%, #d5d5d5 ${c}%)`;
+  const d = (e - r) / (a - r) * 100, h = `linear-gradient(to right, #3264fe ${d}%, #d5d5d5 ${d}%)`;
   return /* @__PURE__ */ t("div", { className: l, children: /* @__PURE__ */ t(
     "input",
     {
@@ -1055,7 +1102,7 @@ const Be = {
       style: { background: h }
     }
   ) });
-}, vt = ({
+}, St = ({
   disabled: e = !1,
   id: r,
   dataTestId: a = "switch",
@@ -1063,7 +1110,7 @@ const Be = {
   onClick: l,
   onCheckedChange: i
 }) => {
-  const [s, o] = N(!1), c = (w) => {
+  const [s, o] = N(!1), d = (w) => {
     const b = w.target.checked;
     o(b), i && i(b);
   }, h = e ? "bg-gray-5" : s ? "bg-green" : "bg-gray-10", x = {
@@ -1079,7 +1126,7 @@ const Be = {
     lg: "translate-x-[21px]",
     xl: "translate-x-[25px]"
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "label",
     {
       htmlFor: r,
@@ -1093,7 +1140,7 @@ const Be = {
             id: r,
             disabled: e,
             checked: s,
-            onChange: c,
+            onChange: d,
             onClick: l,
             className: "sr-only"
           }
@@ -1113,7 +1160,7 @@ const Be = {
       ]
     }
   );
-}, Nt = ({
+}, It = ({
   disabled: e = !1,
   accentColor: r,
   placeholder: a = "",
@@ -1136,7 +1183,7 @@ const Be = {
     onChange: l,
     name: i
   }
-), kt = ({ leftContent: e, rightContent: r, className: a = "" }) => /* @__PURE__ */ d(
+), Dt = ({ leftContent: e, rightContent: r, className: a = "" }) => /* @__PURE__ */ c(
   "header",
   {
     className: `
@@ -1150,7 +1197,7 @@ const Be = {
       /* @__PURE__ */ t("div", { className: "flex items-center space-x-4", children: r })
     ]
   }
-), $t = ({ children: e, className: r = "", id: a, dataCy: n }) => /* @__PURE__ */ t(
+), Tt = ({ children: e, className: r = "", id: a, dataCy: n }) => /* @__PURE__ */ t(
   "div",
   {
     id: a,
@@ -1158,10 +1205,10 @@ const Be = {
     className: `grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 ${r}`,
     children: e
   }
-), qe = (e) => {
+), et = (e) => {
   const r = e.match(/px-(\d+(\.\d+)?)/), a = e.match(/py-(\d+(\.\d+)?)/), n = r ? r[1] : void 0, l = a ? a[1] : void 0;
   return { px: n, py: l };
-}, Je = ({
+}, tt = ({
   children: e,
   options: r,
   classButton: a,
@@ -1171,7 +1218,7 @@ const Be = {
   dropdownActionsContext: s,
   item: o = {}
 }) => {
-  const [c, h] = N(!1), x = i === "left" ? "origin-top-left" : "origin-top-right", m = j(null);
+  const [d, h] = N(!1), x = i === "left" ? "origin-top-left" : "origin-top-right", m = j(null);
   D(() => {
     const S = (L) => {
       m.current && !m.current.contains(L.target) && h(!1);
@@ -1185,29 +1232,29 @@ const Be = {
     action: () => S.onClick()
   })) : [], w = n ? n.map((S) => ({
     node: S
-  })) : [], b = s || [], k = [...g, ...w, ...b], u = () => h((S) => !S), f = () => h(!1), { px: v, py: $ } = qe(l);
-  return /* @__PURE__ */ d("div", { className: "relative outline-none min-w-breadcrumb", ref: m, children: [
+  })) : [], b = s || [], k = [...g, ...w, ...b], u = () => h((S) => !S), f = () => h(!1), { px: v, py: $ } = et(l);
+  return /* @__PURE__ */ c("div", { className: "relative outline-none min-w-breadcrumb", ref: m, children: [
     /* @__PURE__ */ t(
       "button",
       {
         className: `cursor-pointer outline-none ${a}`,
         onClick: u,
-        "aria-expanded": c,
+        "aria-expanded": d,
         "aria-haspopup": "menu",
-        children: typeof e == "function" ? e({ open: c }) : e
+        children: typeof e == "function" ? e({ open: d }) : e
       }
     ),
     /* @__PURE__ */ t(
       "div",
       {
         className: `absolute ${i === "left" ? "left-0" : "right-0"}
-          transform shadow-subtle-hard transition-all duration-100 ease-in-out ${c ? `scale-100 opacity-100 ${x}` : "pointer-events-none scale-95 opacity-0"}`,
+          transform shadow-subtle-hard transition-all duration-100 ease-in-out ${d ? `scale-100 opacity-100 ${x}` : "pointer-events-none scale-95 opacity-0"}`,
         "data-testid": "menu-dropdown",
-        children: /* @__PURE__ */ t("div", { className: `absolute ${l}`, children: /* @__PURE__ */ t(fe, { item: o, isOpen: c, handleMenuClose: f, menu: k, paddingX: v, paddingY: $ }) })
+        children: /* @__PURE__ */ t("div", { className: `absolute ${l}`, children: /* @__PURE__ */ t(he, { item: o, isOpen: d, handleMenuClose: f, menu: k, paddingX: v, paddingY: $ }) })
       }
     )
   ] });
-}, se = (e) => {
+}, ie = (e) => {
   const [{ isOver: r, canDrop: a }, n] = e.useDrop(
     () => ({
       accept: e.acceptedTypes,
@@ -1228,7 +1275,7 @@ const Be = {
   ), l = (s) => {
     s.active && s.onClick && s.onClick();
   }, i = r && a ? "drag-over-effect" : "";
-  return /* @__PURE__ */ t(K, { children: !e.item.active && !e.item.dialog && e.menu ? /* @__PURE__ */ t(e.menu, { item: e.item, items: e.items, onItemClicked: l }) : /* @__PURE__ */ d(
+  return /* @__PURE__ */ t(K, { children: !e.item.active && !e.item.dialog && e.menu ? /* @__PURE__ */ t(e.menu, { item: e.item, items: e.items, onItemClicked: l }) : /* @__PURE__ */ c(
     "div",
     {
       ref: n,
@@ -1253,8 +1300,8 @@ const Be = {
     },
     e.item.uuid
   ) });
-}, Ct = (e) => {
-  const r = pe((n, l) => /* @__PURE__ */ t(
+}, Et = (e) => {
+  const r = Ne((n, l) => /* @__PURE__ */ t(
     "div",
     {
       ref: l,
@@ -1263,12 +1310,12 @@ const Be = {
     }
   ));
   return /* @__PURE__ */ t("div", { className: "flex w-full items-center", children: (() => {
-    const n = e.items, l = [], i = [], s = (o) => /* @__PURE__ */ t("div", { className: "text-dgray-50 flex items-center", children: /* @__PURE__ */ t(Le, { weight: "bold", className: "h-4 w-4", "data-testid": "caret-right" }) }, o);
+    const n = e.items, l = [], i = [], s = (o) => /* @__PURE__ */ t("div", { className: "text-dgray-50 flex items-center", children: /* @__PURE__ */ t(Pe, { weight: "bold", className: "h-4 w-4", "data-testid": "caret-right" }) }, o);
     for (let o = 0; o < n.length; o++) {
-      const c = "breadcrumbSeparator-" + n[o].uuid + o.toString(), h = "breadcrumbItem-" + n[o].uuid + o.toString();
-      n.length > 3 && o !== 0 && o < n.length - 2 ? (o === 1 && l.push(s(c)), i.push(
+      const d = "breadcrumbSeparator-" + n[o].uuid + o.toString(), h = "breadcrumbItem-" + n[o].uuid + o.toString();
+      n.length > 3 && o !== 0 && o < n.length - 2 ? (o === 1 && l.push(s(d)), i.push(
         /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(
-          se,
+          ie,
           {
             item: n[o],
             isHiddenInList: !0,
@@ -1288,7 +1335,7 @@ const Be = {
         ) })
       )) : (l.push(
         /* @__PURE__ */ t(
-          se,
+          ie,
           {
             breadcrumbButtonDataCy: o === 0 ? e?.rootBreadcrumbItemDataCy : void 0,
             item: n[o],
@@ -1306,22 +1353,22 @@ const Be = {
           },
           h
         )
-      ), o < n.length - 1 && l.push(s(c)));
+      ), o < n.length - 1 && l.push(s(d)));
     }
     if (i.length > 0) {
       const o = /* @__PURE__ */ t(
-        Je,
+        tt,
         {
           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: i,
-          children: ({ open: c }) => /* @__PURE__ */ t(
+          children: ({ open: d }) => /* @__PURE__ */ t(
             "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 ${c ? "bg-gray-5" : ""}`,
-              children: /* @__PURE__ */ t(ce, { weight: "bold", className: "h-5 w-5" })
+                rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${d ? "bg-gray-5" : ""}`,
+              children: /* @__PURE__ */ t(de, { weight: "bold", className: "h-5 w-5" })
             }
           )
         },
@@ -1331,7 +1378,7 @@ const Be = {
     }
     return l;
   })() });
-}, Ze = ({
+}, rt = ({
   label: e,
   Icon: r,
   onClick: a,
@@ -1347,8 +1394,8 @@ const Be = {
     "data-cy": l,
     className: `flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${i ? "bg-primary/20" : "hover:bg-gray-5"} ${o ? "pl-5" : ""}`,
     title: s ? e : void 0,
-    children: /* @__PURE__ */ d("div", { className: "flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]", children: [
-      /* @__PURE__ */ d("div", { className: `flex flex-row gap-3 items-center ${i ? "text-primary" : "text-gray-80"}`, children: [
+    children: /* @__PURE__ */ c("div", { className: "flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]", children: [
+      /* @__PURE__ */ c("div", { className: `flex flex-row gap-3 items-center ${i ? "text-primary" : "text-gray-80"}`, children: [
         /* @__PURE__ */ t(r, { size: 20, weight: i ? "fill" : "regular", className: "flex-shrink-0" }),
         /* @__PURE__ */ t(
           "p",
@@ -1367,8 +1414,8 @@ const Be = {
       )
     ] })
   }
-), Qe = ({ options: e, isCollapsed: r, showSubsections: a }) => /* @__PURE__ */ t("div", { className: "flex flex-col w-full", children: e.filter((n) => n.isVisible).map((n, l) => n.subsection && !a || r && n.subsection ? null : /* @__PURE__ */ t(
-  Ze,
+), nt = ({ options: e, isCollapsed: r, showSubsections: a }) => /* @__PURE__ */ t("div", { className: "flex flex-col w-full", children: e.filter((n) => n.isVisible).map((n, l) => n.subsection && !a || r && n.subsection ? null : /* @__PURE__ */ t(
+  rt,
   {
     label: n.label,
     Icon: n.icon,
@@ -1380,8 +1427,8 @@ const Be = {
     subsection: n.subsection
   },
   `${n.iconDataCy}-${l}`
-)) }), et = ({ childrenButton: e, panel: r, className: a, classButton: n, align: l = "right" }) => {
-  const [i, s] = N(!1), o = j(null), [c, h] = N(i), [x, m] = N("opacity-0"), [g, w] = N("scale-95"), b = () => s((f) => !f), k = (f) => {
+)) }), at = ({ childrenButton: e, panel: r, className: a, classButton: n, align: l = "right" }) => {
+  const [i, s] = N(!1), o = j(null), [d, h] = N(i), [x, m] = N("opacity-0"), [g, w] = N("scale-95"), b = () => s((f) => !f), k = (f) => {
     o.current && !o.current.contains(f.target) && u();
   }, u = () => {
     s(!1);
@@ -1401,7 +1448,7 @@ const Be = {
     }
   }, [i]), D(() => (document.addEventListener("mousedown", k), () => {
     document.removeEventListener("mousedown", k);
-  }), []), /* @__PURE__ */ d("div", { style: { lineHeight: 0 }, className: `relative ${a}`, children: [
+  }), []), /* @__PURE__ */ c("div", { style: { lineHeight: 0 }, className: `relative ${a}`, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -1412,7 +1459,7 @@ const Be = {
         children: e
       }
     ),
-    c && /* @__PURE__ */ t(
+    d && /* @__PURE__ */ t(
       "div",
       {
         ref: o,
@@ -1422,13 +1469,13 @@ const Be = {
     )
   ] });
 };
-function tt({
+function lt({
   className: e = "",
   suiteArray: r,
   soonText: a,
   align: n = "right"
 }) {
-  const l = /* @__PURE__ */ t("div", { className: "flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ t(ze, { size: 26, className: "h-7 w-7", weight: "bold" }) }), i = /* @__PURE__ */ t("div", { className: "w-64 flex flex-wrap p-4", "data-testid": "suite-launcher-panel", children: r.map((s, o) => /* @__PURE__ */ t(
+  const l = /* @__PURE__ */ t("div", { className: "flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ t(He, { size: 26, className: "h-7 w-7", weight: "bold" }) }), i = /* @__PURE__ */ t("div", { className: "w-64 flex flex-wrap p-4", "data-testid": "suite-launcher-panel", children: r.map((s, o) => /* @__PURE__ */ t(
     "div",
     {
       className: `w-1/3 flex items-center justify-center rounded-md ${s.isMain ? "bg-primary/10 dark:bg-primary/20" : ""}`,
@@ -1439,21 +1486,21 @@ function tt({
           className: `flex items-center p-4 text-gray-80 w-full rounded-md ${s.availableSoon ? "" : "cursor-pointer hover:bg-gray-1 dark:hover:bg-gray-10"}`,
           style: { lineHeight: 1.25 },
           onClick: s.availableSoon ? void 0 : s.onClick,
-          children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center w-full rounded-md", children: [
+          children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center w-full rounded-md", children: [
             s.isLocked ? /* @__PURE__ */ t(
-              Me,
+              Re,
               {
                 size: 26,
                 weight: "regular",
                 className: "opacity-50 filter grayscale",
                 "data-testid": "suite-launcher-lock-icon"
               }
-            ) : oe(s.icon) ? ve(s.icon, {
+            ) : ce(s.icon) ? ke(s.icon, {
               size: 26,
               className: `${s.icon.props?.className ?? ""} ${s.isMain ? "text-primary" : "text-gray-80"} ${s.availableSoon || s.isLocked ? "opacity-50 filter grayscale" : ""}`,
               weight: s.isMain ? "fill" : "regular"
             }) : s.icon,
-            /* @__PURE__ */ d("div", { className: "mt-1 flex items-center", children: [
+            /* @__PURE__ */ c("div", { className: "mt-1 flex items-center", children: [
               /* @__PURE__ */ t(
                 "span",
                 {
@@ -1478,7 +1525,7 @@ function tt({
     o
   )) });
   return /* @__PURE__ */ t(
-    et,
+    at,
     {
       className: e,
       childrenButton: l,
@@ -1488,7 +1535,7 @@ function tt({
     }
   );
 }
-const rt = ({
+const st = ({
   logo: e,
   title: r,
   onClick: a,
@@ -1496,9 +1543,9 @@ const rt = ({
   className: l,
   onToggleCollapse: i,
   suiteLauncher: s
-}) => /* @__PURE__ */ d("div", { className: `flex flex-row justify-between w-full py-5 px-2 ${l}`, children: [
-  /* @__PURE__ */ d("div", { className: "relative flex flex-row gap-2 items-center", children: [
-    /* @__PURE__ */ d("button", { className: "flex flex-row gap-2 items-center", onClick: a, children: [
+}) => /* @__PURE__ */ c("div", { className: `flex flex-row justify-between w-full py-5 px-2 ${l}`, children: [
+  /* @__PURE__ */ c("div", { className: "relative flex flex-row gap-2 items-center", children: [
+    /* @__PURE__ */ c("button", { className: "flex flex-row gap-2 items-center", onClick: a, children: [
       /* @__PURE__ */ t(
         "img",
         {
@@ -1516,17 +1563,17 @@ const rt = ({
       {
         onClick: i,
         className: "hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0",
-        children: /* @__PURE__ */ t(le, { size: 28 })
+        children: /* @__PURE__ */ t(se, { size: 28 })
       }
     )
   ] }),
-  /* @__PURE__ */ d(
+  /* @__PURE__ */ c(
     "div",
     {
       className: `flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${n ? "opacity-0 invisible" : "opacity-100"}`,
       children: [
         s && /* @__PURE__ */ t(
-          tt,
+          lt,
           {
             suiteArray: s?.suiteArray,
             soonText: s?.soonText,
@@ -1539,26 +1586,26 @@ const rt = ({
           {
             onClick: i,
             className: "flex items-center justify-center text-gray-80 hover:text-gray-90",
-            children: /* @__PURE__ */ t(le, { size: 28 })
+            children: /* @__PURE__ */ t(se, { size: 28 })
           }
         )
       ]
     }
   )
-] }), nt = ({
+] }), it = ({
   usage: e,
   limit: r,
   percentage: a,
   onUpgradeClick: n,
   upgradeLabel: l,
-  isLoading: i = !0
-}) => /* @__PURE__ */ d("div", { className: "flex flex-col w-full gap-2.5 px-2 pb-5", children: [
-  /* @__PURE__ */ d("div", { className: "flex flex-row w-full justify-between", children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-row items-center gap-2", children: i ? /* @__PURE__ */ d("div", { className: "flex flex-row items-center gap-2", children: [
-      /* @__PURE__ */ t("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" }),
-      /* @__PURE__ */ t("div", { className: "h-3 w-2 rounded-lg bg-gray-5 animate-pulse" }),
-      /* @__PURE__ */ t("div", { className: "h-3 w-8 rounded-lg bg-gray-5 animate-pulse" })
-    ] }) : /* @__PURE__ */ d(K, { children: [
+  isLoading: i = !1,
+  barClassName: s = "bg-gray-60",
+  containerClassName: o,
+  advertisement: d
+}) => /* @__PURE__ */ c("div", { className: `flex flex-col w-full gap-2.5 p-3${o ? ` ${o}` : ""}`, children: [
+  d,
+  /* @__PURE__ */ c("div", { className: "flex flex-row w-full justify-between", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-row items-center gap-2", children: i ? /* @__PURE__ */ t(ye, {}) : /* @__PURE__ */ c(K, { children: [
       /* @__PURE__ */ t("p", { className: "text-gray-60 text-sm font-semibold", children: e }),
       /* @__PURE__ */ t("p", { className: "text-gray-60 text-sm", children: "/" }),
       /* @__PURE__ */ t("p", { className: "text-gray-60 text-sm", children: r })
@@ -1568,13 +1615,13 @@ const rt = ({
   /* @__PURE__ */ t("div", { className: "flex w-full h-1.5 bg-gray-10 rounded-full", children: /* @__PURE__ */ t(
     "div",
     {
-      className: "bg-gray-60 rounded-full",
+      className: `${s} rounded-full`,
       style: {
         width: `${a}%`
       }
     }
   ) })
-] }), St = ({
+] }), Lt = ({
   header: e,
   primaryAction: r,
   suiteLauncher: a,
@@ -1583,20 +1630,20 @@ const rt = ({
   showSubsections: i,
   isCollapsed: s = !1,
   storage: o,
-  notification: c,
+  notification: d,
   onToggleCollapse: h
 }) => {
   const [x, m] = N(!s), g = j(null);
   return D(() => (g.current && clearTimeout(g.current), s ? m(!1) : g.current = setTimeout(() => m(!0), 300), () => {
     g.current && clearTimeout(g.current);
-  }), [s]), /* @__PURE__ */ d(
+  }), [s]), /* @__PURE__ */ c(
     "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 ${s ? "w-[60px]" : "w-64"}`,
       children: [
-        /* @__PURE__ */ d("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ t(
-            rt,
+            st,
             {
               logo: e.logo,
               title: e.title,
@@ -1607,46 +1654,49 @@ const rt = ({
               className: e.className
             }
           ),
-          /* @__PURE__ */ d("div", { className: "flex flex-col gap-4 overflow-hidden", children: [
-            /* @__PURE__ */ d("div", { className: "relative", children: [
+          /* @__PURE__ */ c("div", { className: "flex flex-col gap-4 overflow-hidden", children: [
+            /* @__PURE__ */ c("div", { className: "relative", children: [
               !s && /* @__PURE__ */ t("div", { className: "transition-opacity duration-300 opacity-100", children: r }),
               s && /* @__PURE__ */ t("div", { className: "transition-opacity duration-300 opacity-100", children: n })
             ] }),
-            /* @__PURE__ */ t(Qe, { options: l, isCollapsed: s, showSubsections: i })
+            /* @__PURE__ */ t(nt, { options: l, isCollapsed: s, showSubsections: i })
           ] })
         ] }),
-        (c || o) && x && /* @__PURE__ */ d("div", { className: "flex flex-col", children: [
-          c && /* @__PURE__ */ t("div", { className: "px-2 pb-2", children: /* @__PURE__ */ d("div", { className: "flex gap-1.5 items-start p-3 rounded-lg bg-yellow/10 border border-yellow/20", children: [
-            /* @__PURE__ */ t(je, { className: "size-5 shrink-0 text-yellow-dark", weight: "fill" }),
-            /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
-              /* @__PURE__ */ t("p", { className: "text-xs leading-tight text-gray-100", children: c.message }),
+        (d || o) && x && /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          d && /* @__PURE__ */ t("div", { className: "px-2 pb-2", children: /* @__PURE__ */ c("div", { className: "flex gap-1.5 items-start p-3 rounded-lg bg-yellow/10 border border-yellow/20", children: [
+            /* @__PURE__ */ t(Be, { className: "size-5 shrink-0 text-yellow-dark", weight: "fill" }),
+            /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+              /* @__PURE__ */ t("p", { className: "text-xs leading-tight text-gray-100", children: d.message }),
               /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: c.onAction,
+                  onClick: d.onAction,
                   className: "self-start text-xs font-medium text-primary hover:underline",
-                  children: c.actionLabel
+                  children: d.actionLabel
                 }
               )
             ] })
           ] }) }),
           o && /* @__PURE__ */ t(
-            nt,
+            it,
             {
               usage: o.usage,
               limit: o.limit,
               percentage: o.percentage,
               onUpgradeClick: o.onUpgradeClick,
               upgradeLabel: o.upgradeLabel,
-              isLoading: o.isLoading
+              isLoading: o.isLoading,
+              barClassName: o.barClassName,
+              containerClassName: o.containerClassName,
+              advertisement: o.advertisement
             }
           )
         ] })
       ]
     }
   );
-}, It = ({
+}, Mt = ({
   isOpen: e,
   title: r,
   subTitle: a,
@@ -1655,7 +1705,7 @@ const rt = ({
   onClose: i,
   classes: s,
   panelClasses: o,
-  titleClasses: c,
+  titleClasses: d,
   closeClass: h,
   weightIcon: x,
   bgColor: m,
@@ -1666,15 +1716,15 @@ const rt = ({
   {
     "data-test": g,
     className: `${e ? "flex" : "hidden"} ${s || ""} absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`,
-    children: /* @__PURE__ */ d(
+    children: /* @__PURE__ */ c(
       "div",
       {
         className: `${o || ""} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
         -translate-y-1/2 flex-col overflow-hidden  ${n ? "rounded-2xl" : "rounded-lg pt-8"} text-gray-100 ${m || "bg-surface"}`,
         children: [
-          /* @__PURE__ */ d("div", { className: `${a ? "justify-between bg-gray-1" : ""} p-5 flex flex-row items-start`, children: [
-            r ? /* @__PURE__ */ d("div", { className: "relative flex max-w-full flex-1 flex-col truncate", children: [
-              /* @__PURE__ */ t("span", { className: `${c || ""} truncate text-xl`, title: r, children: r }),
+          /* @__PURE__ */ c("div", { className: `${a ? "justify-between bg-gray-1" : ""} p-5 flex flex-row items-start`, children: [
+            r ? /* @__PURE__ */ c("div", { className: "relative flex max-w-full flex-1 flex-col truncate", children: [
+              /* @__PURE__ */ t("span", { className: `${d || ""} truncate text-xl`, title: r, children: r }),
               /* @__PURE__ */ t("span", { className: "max-w-fit flex-1 truncate text-base font-normal text-gray-50", children: a })
             ] }) : null,
             w ? null : /* @__PURE__ */ t(
@@ -1682,7 +1732,7 @@ const rt = ({
               {
                 className: `relative ml-auto cursor-pointer bg-surface
            transition duration-200 ease-in-out ${h || "text-primary hover:text-primary-dark"} `,
-                children: /* @__PURE__ */ t(ue, { role: "button", onClick: i, size: 28, weight: x })
+                children: /* @__PURE__ */ t(me, { role: "button", onClick: i, size: 28, weight: x })
               }
             )
           ] }),
@@ -1691,7 +1741,7 @@ const rt = ({
       }
     )
   }
-), Dt = ({
+), zt = ({
   isOpen: e,
   onClose: r,
   onPrimaryAction: a,
@@ -1700,7 +1750,7 @@ const rt = ({
   subtitle: i,
   primaryAction: s,
   secondaryAction: o,
-  primaryActionColor: c,
+  primaryActionColor: d,
   isLoading: h,
   maxWidth: x = "sm"
 }) => {
@@ -1725,7 +1775,7 @@ const rt = ({
     return e && window.addEventListener("keydown", f), () => {
       window.removeEventListener("keydown", f);
     };
-  }, [e, r]), /* @__PURE__ */ t(K, { children: m && /* @__PURE__ */ d("div", { className: `fixed inset-0 z-50 ${e ? "" : "pointer-events-none"}`, children: [
+  }, [e, r]), /* @__PURE__ */ t(K, { children: m && /* @__PURE__ */ c("div", { className: `fixed inset-0 z-50 ${e ? "" : "pointer-events-none"}`, children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1734,23 +1784,23 @@ const rt = ({
         "data-testid": "dialog-overlay"
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         className: `absolute left-1/2 top-1/2 w-full max-w-${x} -translate-x-1/2 -translate-y-1/2 transform rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${k} ${w}`,
         children: [
-          /* @__PURE__ */ d("div", { className: "flex flex-col space-y-2", children: [
+          /* @__PURE__ */ c("div", { className: "flex flex-col space-y-2", children: [
             /* @__PURE__ */ t("p", { className: "text-2xl font-medium text-gray-100", children: l }),
             /* @__PURE__ */ t("p", { className: "text-gray-60", children: i })
           ] }),
-          /* @__PURE__ */ d("div", { className: "mt-5 flex justify-end space-x-2", children: [
-            /* @__PURE__ */ t(te, { variant: "secondary", onClick: n, disabled: h, children: o }),
+          /* @__PURE__ */ c("div", { className: "mt-5 flex justify-end space-x-2", children: [
+            /* @__PURE__ */ t(Q, { variant: "secondary", onClick: n, disabled: h, children: o }),
             /* @__PURE__ */ t(
-              te,
+              Q,
               {
                 onClick: a,
                 loading: h,
-                variant: c === "primary" ? "primary" : "destructive",
+                variant: d === "primary" ? "primary" : "destructive",
                 children: s
               }
             )
@@ -1759,7 +1809,7 @@ const rt = ({
       }
     )
   ] }) });
-}, Tt = ({
+}, jt = ({
   isOpen: e,
   onClose: r,
   children: a,
@@ -1769,9 +1819,9 @@ const rt = ({
   preventClosing: s = !1,
   stopMouseDownPropagation: o = !1
 }) => {
-  const c = j(null), [h, x] = N(e), [m, g] = N("opacity-0"), [w, b] = N("scale-95"), k = () => {
+  const d = j(null), [h, x] = N(e), [m, g] = N("opacity-0"), [w, b] = N("scale-95"), k = () => {
     const f = document.querySelectorAll("[data-modal]"), v = f[f.length - 1];
-    c.current === v && r();
+    d.current === v && r();
   }, u = (f) => {
     o && f.stopPropagation();
   };
@@ -1790,7 +1840,7 @@ const rt = ({
     }
   }, [e]), D(() => {
     const f = (v) => {
-      c.current && !c.current.contains(v.target) && !s && (v.preventDefault(), k());
+      d.current && !d.current.contains(v.target) && !s && (v.preventDefault(), k());
     };
     return e && document.addEventListener("mousedown", f), () => {
       document.removeEventListener("mousedown", f);
@@ -1802,7 +1852,7 @@ const rt = ({
     return e && window.addEventListener("keydown", f), () => {
       window.removeEventListener("keydown", f);
     };
-  }, [e, r, s]), /* @__PURE__ */ t(K, { children: h && /* @__PURE__ */ d("div", { className: "m-0", onMouseDown: u, role: "dialog", "aria-modal": "true", children: [
+  }, [e, r, s]), /* @__PURE__ */ t(K, { children: h && /* @__PURE__ */ c("div", { className: "m-0", onMouseDown: u, role: "dialog", "aria-modal": "true", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1842,7 +1892,7 @@ const rt = ({
           "section",
           {
             "data-testid": "ModalContent",
-            ref: c,
+            ref: d,
             "data-modal": !0,
             className: `
                 ${i ?? "w-full"}
@@ -1865,8 +1915,8 @@ const rt = ({
       }
     )
   ] }) });
-}, Et = ({ isOpen: e, onClose: r, children: a, className: n, disableBackdrop: l = !1 }) => {
-  const i = j(null), [s, o] = N(e), [c, h] = N("opacity-0"), [x, m] = N("scale-95");
+}, Pt = ({ isOpen: e, onClose: r, children: a, className: n, disableBackdrop: l = !1 }) => {
+  const i = j(null), [s, o] = N(e), [d, h] = N("opacity-0"), [x, m] = N("scale-95");
   return D(() => {
     if (e) {
       o(!0);
@@ -1888,7 +1938,7 @@ const rt = ({
     return e && !l && document.addEventListener("mousedown", g), () => {
       document.removeEventListener("mousedown", g);
     };
-  }, [e, r, l]), s ? /* @__PURE__ */ d(
+  }, [e, r, l]), s ? /* @__PURE__ */ c(
     "div",
     {
       className: `
@@ -1911,7 +1961,7 @@ const rt = ({
             backdrop-blur-sm
             transition-opacity
             duration-200
-            ${c}
+            ${d}
           `
           }
         ),
@@ -1931,7 +1981,7 @@ const rt = ({
           transition-all
           duration-200
           pointer-events-auto
-          ${c}
+          ${d}
           ${x}
           ${n}
         `,
@@ -1941,28 +1991,28 @@ const rt = ({
       ]
     }
   ) : null;
-}, ie = () => /* @__PURE__ */ t("div", { className: "flex flex-col text-left gap-2 w-full py-3 px-5 border-b border-gray-5", children: /* @__PURE__ */ d("div", { className: "flex flex-row w-full gap-2", children: [
+}, oe = () => /* @__PURE__ */ t("div", { className: "flex flex-col text-left gap-2 w-full py-3 px-5 border-b border-gray-5", children: /* @__PURE__ */ c("div", { className: "flex flex-row w-full gap-2", children: [
   /* @__PURE__ */ t("div", { className: "flex flex-col h-7 w-8 rounded-full animate-pulse bg-gray-10" }),
-  /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 w-full", children: [
-    /* @__PURE__ */ d("div", { className: "flex flex-row w-full justify-between", children: [
+  /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 w-full", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-row w-full justify-between", children: [
       /* @__PURE__ */ t("div", { className: "flex rounded-md w-1/3 h-3 bg-gray-10 animate-pulse" }),
       /* @__PURE__ */ t("div", { className: "flex rounded-md w-1/4 h-3 bg-gray-10 animate-pulse" })
     ] }),
     /* @__PURE__ */ t("div", { className: "flex rounded-md w-1/2 h-3 bg-gray-10 animate-pulse" }),
     /* @__PURE__ */ t("div", { className: "flex rounded-md w-full h-3 bg-gray-10 animate-pulse" })
   ] })
-] }) }), at = ({ email: e, active: r, selected: a, onClick: n }) => {
+] }) }), ot = ({ email: e, active: r, selected: a, onClick: n }) => {
   const l = r || a;
   return /* @__PURE__ */ t(
     "button",
     {
       onClick: () => n(e.id, e.read),
       className: `flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${l ? "bg-primary/10" : ""}`,
-      children: /* @__PURE__ */ d("div", { className: "flex flex-row w-full gap-2", children: [
-        /* @__PURE__ */ t(me, { fullName: e.from.name, src: e.from.avatar, size: "xxs" }),
-        /* @__PURE__ */ d("div", { className: "flex flex-col w-full", children: [
-          /* @__PURE__ */ d("div", { className: `flex flex-row w-full justify-between ${l ? "text-primary" : ""}`, children: [
-            /* @__PURE__ */ d("div", { className: "flex flex-row gap-1 w-full max-w-[150px] items-center", children: [
+      children: /* @__PURE__ */ c("div", { className: "flex flex-row w-full gap-2", children: [
+        /* @__PURE__ */ t(fe, { fullName: e.from.name, src: e.from.avatar, size: "xxs" }),
+        /* @__PURE__ */ c("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ c("div", { className: `flex flex-row w-full justify-between ${l ? "text-primary" : ""}`, children: [
+            /* @__PURE__ */ c("div", { className: "flex flex-row gap-1 w-full max-w-[150px] items-center", children: [
               !e.read && /* @__PURE__ */ t("div", { className: "h-2 w-2 rounded-full bg-primary" }),
               /* @__PURE__ */ t("p", { className: "font-semibold truncate", children: e.from.name })
             ] }),
@@ -1974,7 +2024,7 @@ const rt = ({
       ] })
     }
   );
-}, Lt = ({
+}, Rt = ({
   mails: e,
   selectedEmails: r = [],
   loading: a,
@@ -1984,19 +2034,19 @@ const rt = ({
   emptyState: s,
   onMailSelected: o = () => {
   },
-  onLoadMore: c = () => {
+  onLoadMore: d = () => {
   }
 }) => {
-  const h = /* @__PURE__ */ t("div", { className: "flex flex-col", children: new Array(3).fill(0).map((x, m) => /* @__PURE__ */ t(ie, {}, m)) });
-  return /* @__PURE__ */ t("div", { className: "flex flex-col w-[400px] min-w-[200px] max-w-[400px] h-full", children: /* @__PURE__ */ t("div", { id: "tray-scroll-container", className: "overflow-y-auto w-full h-full min-h-0", children: a ? /* @__PURE__ */ t(K, { children: new Array(8).fill(0).map((x, m) => /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ t(ie, {}) }, m)) }) : /* @__PURE__ */ t(K, { children: e.length === 0 ? /* @__PURE__ */ t(K, { children: s }) : /* @__PURE__ */ t(
-    ge,
+  const h = /* @__PURE__ */ t("div", { className: "flex flex-col", children: new Array(3).fill(0).map((x, m) => /* @__PURE__ */ t(oe, {}, m)) });
+  return /* @__PURE__ */ t("div", { className: "flex flex-col w-[400px] min-w-[200px] max-w-[400px] h-full", children: /* @__PURE__ */ t("div", { id: "tray-scroll-container", className: "overflow-y-auto w-full h-full min-h-0", children: a ? /* @__PURE__ */ t(K, { children: new Array(8).fill(0).map((x, m) => /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ t(oe, {}) }, m)) }) : /* @__PURE__ */ t(K, { children: e.length === 0 ? /* @__PURE__ */ t(K, { children: s }) : /* @__PURE__ */ t(
+    xe,
     {
-      handleNextPage: c,
+      handleNextPage: d,
       hasMoreItems: i,
       loader: h,
       scrollableTarget: "tray-scroll-container",
       children: e.map((x) => /* @__PURE__ */ t("div", { className: "flex items-center w-full flex-col", children: /* @__PURE__ */ t(
-        at,
+        ot,
         {
           email: x,
           active: l === x.id,
@@ -2006,56 +2056,59 @@ const rt = ({
       ) }, x.id))
     }
   ) }) }) });
-}, Mt = ({ fullName: e, email: r, avatar: a }) => /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 border max-w-64 bg-surface w-full border-gray-10 shadow-subtle rounded-lg", children: /* @__PURE__ */ d("div", { className: "flex flex-row w-full gap-2 p-4", children: [
-  /* @__PURE__ */ t(me, { src: a, fullName: e, diameter: 40 }),
-  /* @__PURE__ */ d("div", { className: "flex flex-col min-w-0", children: [
+}, Ht = ({ fullName: e, email: r, avatar: a }) => /* @__PURE__ */ t("div", { className: "flex flex-row gap-2 border max-w-64 bg-surface w-full border-gray-10 shadow-subtle rounded-lg", children: /* @__PURE__ */ c("div", { className: "flex flex-row w-full gap-2 p-4", children: [
+  /* @__PURE__ */ t(fe, { src: a, fullName: e, diameter: 40 }),
+  /* @__PURE__ */ c("div", { className: "flex flex-col min-w-0", children: [
     /* @__PURE__ */ t("p", { className: "font-medium text-gray-100 truncate", children: e }),
     /* @__PURE__ */ t("p", { className: "text-sm text-gray-50 truncate", children: r })
   ] })
 ] }) });
 export {
-  me as Avatar,
-  It as BaseDialog,
-  Ct as Breadcrumbs,
-  te as Button,
-  ot as Card,
-  he as Checkbox,
-  xt as CircleButton,
-  Ae as ContextMenu,
-  yt as Copyable,
-  Dt as Dialog,
-  Je as Dropdown,
-  gt as Empty,
-  $t as Grid,
-  kt as Header,
-  ge as InfiniteScroll,
-  bt as Input,
-  ct as List,
-  Ye as Loader,
-  fe as Menu,
-  at as MessageCheap,
-  ie as MessageCheapSkeleton,
-  Tt as Modal,
-  et as Popover,
-  wt as RadioButton,
-  pt as RangeSlider,
-  St as Sidenav,
-  rt as SidenavHeader,
-  Ze as SidenavItem,
-  Qe as SidenavOptions,
-  nt as SidenavStorage,
-  Xe as SkeletonLoader,
-  tt as SuiteLauncher,
-  vt as SwitchComponent,
-  dt as Table,
-  mt as TableBody,
-  ht as TableCell,
-  ut as TableHeader,
-  ft as TableRow,
-  Nt as TextArea,
-  Ge as Tooltip,
-  Et as TransparentModal,
-  Lt as Tray,
-  Mt as UserCheap
+  fe as Avatar,
+  Mt as BaseDialog,
+  Et as Breadcrumbs,
+  Q as Button,
+  mt as Card,
+  ge as Checkbox,
+  vt as CircleButton,
+  Ue as ContextMenu,
+  Nt as Copyable,
+  zt as Dialog,
+  tt as Dropdown,
+  wt as Empty,
+  Tt as Grid,
+  Dt as Header,
+  xe as InfiniteScroll,
+  kt as Input,
+  ft as List,
+  Ze as Loader,
+  he as Menu,
+  ot as MessageCheap,
+  oe as MessageCheapSkeleton,
+  jt as Modal,
+  at as Popover,
+  $t as RadioButton,
+  Ct as RangeSlider,
+  Lt as Sidenav,
+  st as SidenavHeader,
+  rt as SidenavItem,
+  nt as SidenavOptions,
+  it as SidenavStorage,
+  ye as Skeleton,
+  re as SkeletonItem,
+  Je as SkeletonLoader,
+  lt as SuiteLauncher,
+  St as SwitchComponent,
+  ht as Table,
+  xt as TableBody,
+  bt as TableCell,
+  gt as TableHeader,
+  yt as TableRow,
+  It as TextArea,
+  Qe as Tooltip,
+  Pt as TransparentModal,
+  Rt as Tray,
+  pt as UsageWarningBanner,
+  Ht as UserCheap
 };
 //# sourceMappingURL=index.es.js.map