@fluidattacks/design 3.16.3 → 3.16.4

package/dist/{components-3G2ZcBCV.mjs → components-DRqO8HHB.mjs}

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as h, Fragment as He } from "react/jsx-runtime";
 import kt, { forwardRef as _, useState as F, useCallback as k, StrictMode as ni, useEffect as U, useRef as O, useMemo as te, Fragment as Oe, Children as ai, isValidElement as ri, cloneElement as oi } from "react";
-import { o as li, d as b, n as D, u as si, a as ci, b as di, c as pi, e as gi, l as P, f as Ct, g as ui, h as fi, s as hi, i as fe, _ as R, $ as yi, j as bi, k as $i, m as xi, p as mi, q as wi, r as vi, t as ki, v as St, C as Be, w as Ci, x as Si, y as zi, z as et, A as ke, B as Ii, D as Ti, E as zt, F as It, G as Ce, H as Ni, I as Fi, J as Di, K as ji, L as Li, M as se, N as Ei, O as Tt, P as Ri, Q as Nt, R as Ai, S as Pi, T as Wi, U as Vi, V as Hi, W as Oi, X as Ft, Y as Bi, Z as tt, a0 as it, a1 as nt, a2 as Mi, a3 as Gi, a4 as Ui, a5 as _i, a6 as Yi, a7 as Ki, a8 as qi, a9 as Xi, aa as Dt, ab as Ji, ac as Zi, ad as Qi, ae as en, af as tn, ai as jt, aj as nn, ak as an, al as rn, am as on, an as ln, ao as sn, ap as cn, aq as dn, ar as pn, as as at, at as gn, au as rt, av as un } from "./vendor-BQBri7G-.mjs";
+import { o as li, d as b, n as D, u as si, a as ci, b as di, c as pi, e as gi, l as P, f as Ct, g as ui, h as fi, s as hi, i as fe, _ as R, $ as yi, j as bi, k as $i, m as xi, p as mi, q as wi, r as vi, t as ki, v as St, C as Be, w as Ci, x as Si, y as zi, z as et, A as ke, B as Ii, D as Ti, E as zt, F as It, G as Ce, H as Ni, I as Fi, J as Di, K as ji, L as Li, M as se, N as Ei, O as Tt, P as Ri, Q as Nt, R as Ai, S as Pi, T as Wi, U as Vi, V as Hi, W as Oi, X as Ft, Y as Bi, Z as tt, a0 as it, a1 as nt, a2 as Mi, a3 as Gi, a4 as Ui, a5 as _i, a6 as Yi, a7 as Ki, a8 as qi, a9 as Xi, aa as Dt, ab as Ji, ac as Zi, ad as Qi, ae as en, af as tn, ai as jt, aj as nn, ak as an, al as rn, am as on, an as ln, ao as sn, ap as cn, aq as dn, ar as pn, as as at, at as gn, au as rt, av as un } from "./vendor-4R9pmxhU.mjs";
 import { createPortal as de } from "react-dom";
 import { Link as fn, useLocation as hn, NavLink as yn } from "react-router-dom";
 const re = (e) => ({
@@ -4825,200 +4825,7 @@ const N = _(function({
       ]
     }
   );
-}, _a = b.label`
-  ${({ theme: e }) => `
-    align-items: center;
-    color: ${e.palette.gray[600]};
-    display: flex;
-    cursor: pointer;
-    font-family: ${e.typography.type.primary};
-    font-size: ${e.typography.text.sm};
-    font-weight: ${e.typography.weight.regular};
-    line-height: ${e.spacing[1]};
-    letter-spacing: 0;
-    position: relative;
-    text-align: left;
-
-    &[aria-disabled="true"] {
-      color: ${e.palette.gray[300]};
-      cursor: not-allowed;
-    }
-
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    svg {
-      background-color: ${e.palette.white};
-      border-radius: ${e.spacing[0.25]};
-      border: 1px solid ${e.palette.gray[600]};
-      top: 0;
-      left: 0;
-      height: ${e.spacing[0.5]};
-      margin-right: ${e.spacing[0.5]};
-      width: ${e.spacing[0.5]};
-      padding: ${e.spacing[0.25]};
-    }
-
-    svg > path {
-      fill: ${e.palette.white};
-    }
-
-    input:checked ~ span > svg {
-      background-color: ${e.palette.primary[500]};
-      border: 1px solid ${e.palette.primary[500]};
-    }
-
-    input:disabled ~ span > svg {
-      border: 1px solid ${e.palette.gray[300]};
-      cursor: not-allowed;
-    }
-
-    input:not(:disabled):hover ~ span > svg {
-      box-shadow: 0 0 0 4px ${e.palette.gray[100]};
-    }
-
-    input:checked:disabled ~ span > svg {
-      background-color: ${e.palette.gray[300]};
-      border: 1px solid ${e.palette.gray[300]};
-    }
-
-    input:not(:disabled):hover:checked ~ span > svg {
-      box-shadow: 0 0 0 4px ${e.palette.primary[50]};
-    }
-
-    input:checked ~ span > svg > path {
-      fill: ${e.palette.white};
-    }
-
-    input:checked:disabled ~ span > svg > path {
-      fill: ${e.palette.white};
-    }
-  `}
-`, qe = _(function({
-  checked: t,
-  disabled: i = !1,
-  label: a,
-  name: r,
-  onChange: o,
-  onClick: l,
-  onFocus: s,
-  onKeyDown: c,
-  tooltip: d,
-  value: p,
-  ...g
-}, u) {
-  return /* @__PURE__ */ h("div", { className: "gap-1 inline-flex items-start", children: [
-    /* @__PURE__ */ h(_a, { "aria-disabled": i, children: [
-      /* @__PURE__ */ n(
-        "input",
-        {
-          "aria-checked": t,
-          "aria-disabled": i,
-          "aria-hidden": !1,
-          "aria-label": r,
-          checked: t,
-          disabled: i,
-          id: r,
-          name: r,
-          onChange: o,
-          onClick: l,
-          onFocus: s,
-          onKeyDown: c,
-          ref: u,
-          type: "checkbox",
-          value: p,
-          ...g
-        }
-      ),
-      /* @__PURE__ */ n(N, { disabled: i, icon: "check", iconSize: "sm" }),
-      a ?? p
-    ] }),
-    d === void 0 ? void 0 : /* @__PURE__ */ n(
-      ie,
-      {
-        icon: "circle-info",
-        id: d,
-        place: "right",
-        tip: d
-      }
-    )
-  ] });
-}), Ya = ({
-  options: e,
-  title: t,
-  checkboxesName: i,
-  defaultCollapsed: a,
-  onChange: r
-}) => {
-  const o = D(), [l, s] = F(a ?? !1), c = k(() => {
-    s((d) => !d);
-  }, []);
-  return /* @__PURE__ */ h(
-    x,
-    {
-      "aria-label": t,
-      bgColor: l ? o.palette.gray[50] : o.palette.white,
-      border: "1px solid" + o.palette.gray[300],
-      borderRadius: "8px",
-      display: "inline-flex",
-      flexDirection: "column",
-      gap: 0.625,
-      px: 0.75,
-      py: 0.625,
-      role: "region",
-      width: "100%",
-      children: [
-        /* @__PURE__ */ h(
-          x,
-          {
-            alignItems: "center",
-            cursor: "pointer",
-            display: "flex",
-            onClick: c,
-            children: [
-              /* @__PURE__ */ n(I, { color: o.palette.gray[800], fontWeight: "bold", size: "sm", children: t }),
-              /* @__PURE__ */ n(
-                N,
-                {
-                  icon: l ? "chevron-up" : "chevron-down",
-                  iconColor: o.palette.gray[400],
-                  iconSize: "xs"
-                }
-              )
-            ]
-          }
-        ),
-        l ? /* @__PURE__ */ n(x, { display: "flex", gap: 0.75, wrap: "wrap", children: e.map(
-          (d) => /* @__PURE__ */ n(
-            x,
-            {
-              border: "1px solid",
-              borderColor: o.palette.gray[300],
-              borderRadius: "4px",
-              px: 0.5,
-              py: 0.5,
-              children: /* @__PURE__ */ n(
-                qe,
-                {
-                  checked: d.visible,
-                  disabled: d.locked,
-                  label: d.name,
-                  name: `${i}-${d.name}`,
-                  onChange: r,
-                  value: d.name
-                }
-              )
-            },
-            d.name
-          )
-        ) }) : void 0
-      ]
-    }
-  );
-}, Ka = (e, t) => {
+}, _a = (e, t) => {
   const [a, r] = F(0), [o, l] = F(0);
   return U(() => {
     o === 100 && (() => {
@@ -5036,7 +4843,7 @@ const N = _(function({
       clearInterval(s);
     };
   }, [e]), { cycle: a, progress: o, setCycle: r, setProgress: l };
-}, qa = ({
+}, Ya = ({
   publicId: e,
   format: t = "webp"
 }) => {
@@ -5046,7 +4853,7 @@ const N = _(function({
     }
   }), []);
   return te(() => i.image(e).format(t), [i, e, t]);
-}, Xe = (e) => {
+}, qe = (e) => {
   const [t, i] = F(!1), a = k(() => {
     i(!0);
   }, []), r = k(() => {
@@ -5099,25 +4906,25 @@ const N = _(function({
     setColumns: s,
     resetToDefault: c,
     columns: o,
-    ...Xe(e),
+    ...qe(e),
     hasChanged: d
   };
-}, Xa = (e, t) => te(
+}, Ka = (e, t) => te(
   () => R.debounce(e, t),
   [e, t]
 ), Tl = (e) => {
-  const [t, i] = F(), a = Xa((r) => {
+  const [t, i] = F(), a = Ka((r) => {
     i(r);
   }, (e == null ? void 0 : e.debounceWait) ?? 300);
   return [t, a];
-}, Ja = ({
+}, qa = ({
   alt: e = "img",
   height: t = "",
   width: i = "",
   plugins: a = [_i(), Yi()],
   publicId: r
 }) => {
-  const o = qa({ publicId: r });
+  const o = Ya({ publicId: r });
   return /* @__PURE__ */ n(
     Ui,
     {
@@ -5128,7 +4935,7 @@ const N = _(function({
       width: i
     }
   );
-}, pe = kt.memo(Ja), Za = b.label`
+}, pe = kt.memo(qa), Xa = b.label`
   ${({ theme: e }) => `
     align-items: center;
     display: flex;
@@ -5207,7 +5014,7 @@ const N = _(function({
     }
 
   `}
-`, Qa = b.span.attrs({ className: "checkmark" })``, Mt = _(function({
+`, Ja = b.span.attrs({ className: "checkmark" })``, Mt = _(function({
   defaultChecked: t = !1,
   disabled: i = !1,
   label: a,
@@ -5218,7 +5025,7 @@ const N = _(function({
   ...c
 }, d) {
   return /* @__PURE__ */ h(
-    Za,
+    Xa,
     {
       "aria-disabled": i,
       "aria-label": a ?? r,
@@ -5241,7 +5048,7 @@ const N = _(function({
             ...c
           }
         ),
-        /* @__PURE__ */ n(Qa, {}),
+        /* @__PURE__ */ n(Ja, {}),
         a ?? null
       ]
     }
@@ -5318,7 +5125,7 @@ const N = _(function({
     transition: 0.2s;
     width: 36px;
   `}
-`, er = b.div`
+`, Za = b.div`
   ${({ theme: e }) => `
     background-color: ${e.palette.white};
     border-radius: 50%;
@@ -5329,7 +5136,7 @@ const N = _(function({
     width: ${e.spacing[1]};
     z-index: 1;
   `}
-`, tr = b.label`
+`, Qa = b.label`
   display: inline-block;
 
   input {
@@ -5356,7 +5163,7 @@ const N = _(function({
     background-color: ${({ theme: e }) => e.palette.gray[200]};
     border: 1px solid ${({ theme: e }) => e.palette.gray[200]};
   }
-`, ir = _(function({
+`, er = _(function({
   defaultChecked: t,
   disabled: i = !1,
   justify: a,
@@ -5382,7 +5189,7 @@ const N = _(function({
       justify: a,
       children: [
         /* @__PURE__ */ n(x, { minWidth: l, children: g }),
-        /* @__PURE__ */ h(tr, { onClick: u, role: "switch", children: [
+        /* @__PURE__ */ h(Qa, { onClick: u, role: "switch", children: [
           /* @__PURE__ */ n(
             "input",
             {
@@ -5396,7 +5203,7 @@ const N = _(function({
               type: "checkbox"
             }
           ),
-          /* @__PURE__ */ n(ge, { "aria-label": "Toggle Switch", id: `${r}Toggle`, children: /* @__PURE__ */ n(er, {}) })
+          /* @__PURE__ */ n(ge, { "aria-label": "Toggle Switch", id: `${r}Toggle`, children: /* @__PURE__ */ n(Za, {}) })
         ] }),
         s
       ]
@@ -5436,29 +5243,29 @@ const N = _(function({
             minHeight: "40px",
             width: "100%",
             children: i.map(
-              (l) => /* @__PURE__ */ n(ir, { ...l }, `$card-toggle-${l.name}`)
+              (l) => /* @__PURE__ */ n(er, { ...l }, `$card-toggle-${l.name}`)
             )
           }
         )
       ]
     }
   );
-}, nr = b.div`
+}, tr = b.div`
   position: relative;
   margin: auto;
   overflow: hidden;
-`, ar = b.div`
+`, ir = b.div`
   display: flex;
   transition: transform 0.5s ease-in-out;
   transform: translateX(
     ${({ $currentIndex: e }) => -e * 100}%
   );
-`, rr = b.div`
+`, nr = b.div`
   align-items: center;
   display: flex;
   justify-content: center;
   min-width: 100%;
-`, or = b.button`
+`, ar = b.button`
   ${({ theme: e, $isActive: t }) => `
     background-color: ${t ? e.palette.primary[400] : e.palette.white};
     border: none;
@@ -5467,7 +5274,7 @@ const N = _(function({
     height: ${e.spacing[0.75]};
     width: ${e.spacing[0.75]};
   `}
-`, lr = b.div`
+`, rr = b.div`
   align-items: center;
   display: flex;
   gap: ${({ theme: e }) => e.spacing[0.5]};
@@ -5477,7 +5284,7 @@ const N = _(function({
   slides: e,
   interval: t = 300
 }) => {
-  const { cycle: i, setCycle: a, setProgress: r } = Ka(t, e.length), o = k(
+  const { cycle: i, setCycle: a, setProgress: r } = _a(t, e.length), o = k(
     (l) => (
       // eslint-disable-next-line functional/functional-parameters
       () => {
@@ -5486,11 +5293,11 @@ const N = _(function({
     ),
     [a, r]
   );
-  return /* @__PURE__ */ h(nr, { "aria-roledescription": "carousel", children: [
-    /* @__PURE__ */ n(ar, { $currentIndex: i, children: e.map((l, s) => {
+  return /* @__PURE__ */ h(tr, { "aria-roledescription": "carousel", children: [
+    /* @__PURE__ */ n(ir, { $currentIndex: i, children: e.map((l, s) => {
       const c = `slide-${s}`;
       return /* @__PURE__ */ n(
-        rr,
+        nr,
         {
           "aria-label": c,
           "aria-roledescription": "slide",
@@ -5499,10 +5306,10 @@ const N = _(function({
         c
       );
     }) }),
-    /* @__PURE__ */ n(lr, { children: e.map((l, s) => {
+    /* @__PURE__ */ n(rr, { children: e.map((l, s) => {
       const c = `nav-button-${s}`;
       return /* @__PURE__ */ n(
-        or,
+        ar,
         {
           $isActive: s === i,
           "aria-label": `Go to slide ${s + 1}`,
@@ -5513,49 +5320,170 @@ const N = _(function({
       );
     }) })
   ] });
-}, Gt = b.div`
+}, or = b.label`
   ${({ theme: e }) => `
-    background-color: ${e.palette.gray[100]};
-    border-radius: ${e.spacing[0.25]};
-    display: inline-flex;
-    padding: ${e.spacing[1]};
+    align-items: center;
+    color: ${e.palette.gray[600]};
+    display: flex;
+    cursor: pointer;
+    font-family: ${e.typography.type.primary};
+    font-size: ${e.typography.text.sm};
+    font-weight: ${e.typography.weight.regular};
+    line-height: ${e.spacing[1]};
+    letter-spacing: 0;
     position: relative;
-    width: fit-content;
-
-    .line-highlight.language-none {
-      background: ${e.palette.gray[100]};
-    }
+    text-align: left;
 
-    .line-highlight {
-      background: hsl(354deg 88% 93% / 50%);
-      font-family: ${e.typography.type.mono};
-      font-size: ${e.typography.text.xs};
-      line-height: ${e.spacing[1]};
+    &[aria-disabled="true"] {
+      color: ${e.palette.gray[300]};
+      cursor: not-allowed;
     }
 
-    .line-highlight::before,
-    .line-highlight[data-end]::after {
-      background: ${e.palette.primary[300]};
-      background-color: hsl(355deg 89% 36%);
-      color: ${e.palette.white};
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
     }
 
-    pre code {
-      color: #161616;
-      font-family: ${e.typography.type.mono};
-      font-size: ${e.typography.text.xs};
-      line-height: ${e.spacing[1]};
+    svg {
+      background-color: ${e.palette.white};
+      border-radius: ${e.spacing[0.25]};
+      border: 1px solid ${e.palette.gray[600]};
+      top: 0;
+      left: 0;
+      height: ${e.spacing[0.5]};
+      margin-right: ${e.spacing[0.5]};
+      width: ${e.spacing[0.5]};
+      padding: ${e.spacing[0.25]};
     }
 
-    pre:not(.line-highlight) {
-      margin-top: unset;
-      margin-bottom: unset;
-      padding: unset;
-      width: 100%;
+    svg > path {
+      fill: ${e.palette.white};
     }
 
-    span:hover {
-      background-color: ${e.palette.gray[200]};
+    input:checked ~ span > svg {
+      background-color: ${e.palette.primary[500]};
+      border: 1px solid ${e.palette.primary[500]};
+    }
+
+    input:disabled ~ span > svg {
+      border: 1px solid ${e.palette.gray[300]};
+      cursor: not-allowed;
+    }
+
+    input:not(:disabled):hover ~ span > svg {
+      box-shadow: 0 0 0 4px ${e.palette.gray[100]};
+    }
+
+    input:checked:disabled ~ span > svg {
+      background-color: ${e.palette.gray[300]};
+      border: 1px solid ${e.palette.gray[300]};
+    }
+
+    input:not(:disabled):hover:checked ~ span > svg {
+      box-shadow: 0 0 0 4px ${e.palette.primary[50]};
+    }
+
+    input:checked ~ span > svg > path {
+      fill: ${e.palette.white};
+    }
+
+    input:checked:disabled ~ span > svg > path {
+      fill: ${e.palette.white};
+    }
+  `}
+`, Xe = _(function({
+  checked: t,
+  disabled: i = !1,
+  label: a,
+  name: r,
+  onChange: o,
+  onClick: l,
+  onFocus: s,
+  onKeyDown: c,
+  tooltip: d,
+  value: p,
+  ...g
+}, u) {
+  return /* @__PURE__ */ h("div", { className: "gap-1 inline-flex items-start", children: [
+    /* @__PURE__ */ h(or, { "aria-disabled": i, children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          "aria-checked": t,
+          "aria-disabled": i,
+          "aria-hidden": !1,
+          "aria-label": r,
+          checked: t,
+          disabled: i,
+          id: r,
+          name: r,
+          onChange: o,
+          onClick: l,
+          onFocus: s,
+          onKeyDown: c,
+          ref: u,
+          type: "checkbox",
+          value: p,
+          ...g
+        }
+      ),
+      /* @__PURE__ */ n(N, { disabled: i, icon: "check", iconSize: "sm" }),
+      a ?? p
+    ] }),
+    d === void 0 ? void 0 : /* @__PURE__ */ n(
+      ie,
+      {
+        icon: "circle-info",
+        id: d,
+        place: "right",
+        tip: d
+      }
+    )
+  ] });
+}), Gt = b.div`
+  ${({ theme: e }) => `
+    background-color: ${e.palette.gray[100]};
+    border-radius: ${e.spacing[0.25]};
+    display: inline-flex;
+    padding: ${e.spacing[1]};
+    position: relative;
+    width: fit-content;
+
+    .line-highlight.language-none {
+      background: ${e.palette.gray[100]};
+    }
+
+    .line-highlight {
+      background: hsl(354deg 88% 93% / 50%);
+      font-family: ${e.typography.type.mono};
+      font-size: ${e.typography.text.xs};
+      line-height: ${e.spacing[1]};
+    }
+
+    .line-highlight::before,
+    .line-highlight[data-end]::after {
+      background: ${e.palette.primary[300]};
+      background-color: hsl(355deg 89% 36%);
+      color: ${e.palette.white};
+    }
+
+    pre code {
+      color: #161616;
+      font-family: ${e.typography.type.mono};
+      font-size: ${e.typography.text.xs};
+      line-height: ${e.spacing[1]};
+    }
+
+    pre:not(.line-highlight) {
+      margin-top: unset;
+      margin-bottom: unset;
+      padding: unset;
+      width: 100%;
+    }
+
+    span:hover {
+      background-color: ${e.palette.gray[200]};
     }
 
     .no-data,
@@ -5565,7 +5493,7 @@ const N = _(function({
       padding-bottom: unset;
     }
   `}
-`, sr = b.div`
+`, lr = b.div`
   ${({ theme: e }) => `
     align-items: end;
     background-color: ${e.palette.gray[100]};
@@ -5583,7 +5511,7 @@ const N = _(function({
       background-color: ${e.palette.gray[200]};
     }
   `}
-`, cr = ({
+`, sr = ({
   noCodeMessage: e = "Code snippet not available",
   snippet: t,
   specific: i
@@ -5617,7 +5545,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     await navigator.clipboard.writeText(g);
   }, [g]);
   return a === "location" ? /* @__PURE__ */ n(
-    cr,
+    sr,
     {
       noCodeMessage: e,
       snippet: t,
@@ -5633,7 +5561,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       position: "relative",
       children: [
         /* @__PURE__ */ n(Gt, { "data-private": !0, children: /* @__PURE__ */ n("pre", { children: /* @__PURE__ */ n("code", { className: "language-none", children: g }) }) }),
-        /* @__PURE__ */ h(sr, { children: [
+        /* @__PURE__ */ h(lr, { children: [
           /* @__PURE__ */ n(
             Y,
             {
@@ -5665,7 +5593,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ]
     }
   );
-}, { getVariant: dr } = re(
+}, { getVariant: cr } = re(
   (e) => ({
     fixed: `
       height: auto;
@@ -5718,9 +5646,9 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     margin: auto;
     white-space: pre-line;
 
-    ${dr(e, t)}
+    ${cr(e, t)}
   `}
-`, pr = b.div`
+`, dr = b.div`
   ${({ theme: e }) => `
     background-color: ${e.palette.white};
     border-bottom: 1px solid ${e.palette.gray[200]};
@@ -5738,7 +5666,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       padding: 0;
     }
   `}
-`, gr = b.div`
+`, pr = b.div`
   border-radius: ${({ theme: e }) => `${e.spacing[0.25]} ${e.spacing[0.25]} 0 0`};
   display: block;
   overflow: unset;
@@ -5748,9 +5676,9 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
   padding: ${({ theme: e }) => `${e.spacing[1.25]}`};
   padding-bottom: ${({ theme: e }) => `${e.spacing[1.5]}`};
   position: sticky;
-`, ur = b.div.attrs({
+`, gr = b.div.attrs({
   className: "flex items-center justify-between"
-})``, fr = b.div`
+})``, ur = b.div`
   ${({ theme: e }) => `
     border-radius: 0 0 ${e.spacing[0.25]} ${e.spacing[0.25]};
     display: flex;
@@ -5781,7 +5709,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       margin-right: 0;
     }
   `}
-`, hr = b.div`
+`, fr = b.div`
   img {
     margin: 0 calc(-${({ theme: e }) => e.spacing[1.25]} - 1px)
       ${({ theme: e }) => e.spacing[1.25]};
@@ -5797,7 +5725,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
             margin-right: 0;
           ` : ""}
   }
-`, yr = ({
+`, hr = ({
   alert: e,
   modalRef: t,
   confirmButton: i = void 0,
@@ -5821,7 +5749,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       py: 1.25,
       children: [
         e,
-        /* @__PURE__ */ n(fr, { children: /* @__PURE__ */ h("div", { children: [
+        /* @__PURE__ */ n(ur, { children: /* @__PURE__ */ h("div", { children: [
           a && /* @__PURE__ */ n(
             B,
             {
@@ -5846,7 +5774,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ]
     }
   ) : null;
-}, br = ({
+}, yr = ({
   title: e,
   description: t,
   modalRef: i,
@@ -5863,8 +5791,8 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     return window.addEventListener("keydown", s), () => {
       window.removeEventListener("keydown", s);
     };
-  }, [l]), /* @__PURE__ */ h(gr, { children: [
-    /* @__PURE__ */ h(ur, { children: [
+  }, [l]), /* @__PURE__ */ h(pr, { children: [
+    /* @__PURE__ */ h(gr, { children: [
       typeof e == "string" ? /* @__PURE__ */ n(
         Q,
         {
@@ -5942,7 +5870,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ]
     }
   );
-}, $r = b.button`
+}, br = b.button`
   ${({ theme: e }) => `
     align-items: center;
     color: ${e.palette.gray[500]};
@@ -5962,7 +5890,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       color: ${e.palette.gray[800]};
     }
   `}
-`, xr = b.div`
+`, $r = b.div`
   ${({ theme: e }) => `
     align-items: center;
     border-bottom: 2px solid ${e.palette.gray[200]};
@@ -5971,11 +5899,11 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     height: ${e.spacing[3]};
     width: max-content;
   `}
-`, mr = (e, t, i) => i ? t === "secondary" ? `3px solid ${e.palette.primary[100]}` : `3px solid ${e.palette.primary[500]}` : "unset", wr = b.div`
+`, xr = (e, t, i) => i ? t === "secondary" ? `3px solid ${e.palette.primary[100]}` : `3px solid ${e.palette.primary[500]}` : "unset", mr = b.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme: e }) => e.spacing[0.25]};
-  border-bottom: ${({ theme: e, $borderButton: t, $variant: i }) => mr(e, i, t)};
+  border-bottom: ${({ theme: e, $borderButton: t, $variant: i }) => xr(e, i, t)};
   align-items: center;
   padding: ${({ theme: e }) => e.spacing[0.625]}
     ${({ theme: e }) => e.spacing[0.5]};
@@ -6014,7 +5942,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       }
     }
   }
-`, vr = b(
+`, wr = b(
   Le
 )`
   ${({ theme: e, $variant: t }) => `
@@ -6029,31 +5957,31 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     width: ${e.spacing[0.5]};
     height: ${e.spacing[0.5]};
   `}
-`, kr = b.div`
+`, vr = b.div`
   align-items: center;
   color: ${({ theme: e }) => e.palette.white};
   display: flex;
   font-size: 6px;
   font-weight: ${({ theme: e }) => e.typography.weight.bold};
   justify-content: center;
-`, Cr = _(function({
+`, kr = _(function({
   numberIndicator: t,
   show: i,
   variant: a = "error",
   ...r
 }, o) {
   return /* @__PURE__ */ n(
-    vr,
+    wr,
     {
       $variant: a,
       className: i ? "flex" : "hidden",
       "data-testid": "notification-sign",
       ref: o,
       ...r,
-      children: t && /* @__PURE__ */ n(kr, { children: t <= 9 ? t : 9 })
+      children: t && /* @__PURE__ */ n(vr, { children: t <= 9 ? t : 9 })
     }
   );
-}), Sr = ({
+}), Cr = ({
   end: e = !1,
   label: t,
   id: i,
@@ -6066,11 +5994,11 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
   tag: d
 }) => {
   const { pathname: p } = hn(), g = a || (c === "primary" ? p.includes(r) : p.endsWith(r));
-  return /* @__PURE__ */ n(ie, { display: "flex", id: `${i}-tooltip`, tip: s, children: /* @__PURE__ */ h(wr, { $borderButton: g, $variant: c, children: [
+  return /* @__PURE__ */ n(ie, { display: "flex", id: `${i}-tooltip`, tip: s, children: /* @__PURE__ */ h(mr, { $borderButton: g, $variant: c, children: [
     /* @__PURE__ */ h(yn, { end: e, id: i, onClick: l, to: r, children: [
       t,
       /* @__PURE__ */ n(
-        Cr,
+        kr,
         {
           left: o == null ? void 0 : o.left,
           numberIndicator: o == null ? void 0 : o.numberIndicator,
@@ -6118,7 +6046,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
           tag: u,
           tooltip: f
         }) => /* @__PURE__ */ n(
-          Sr,
+          Cr,
           {
             end: o,
             id: l,
@@ -6155,7 +6083,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ...o
     }
   );
-}), zr = b.li`
+}), Sr = b.li`
   ${({ theme: e }) => `
     align-items: center;
     background-color: ${e.palette.white};
@@ -6202,7 +6130,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       background-color: ${e.palette.gray[100]};
     }
   `}
-`, Ir = b.ul`
+`, zr = b.ul`
   ${({ theme: e }) => `
     background-color: ${e.palette.white};
     border: 1px solid ${e.palette.gray[200]};
@@ -6232,7 +6160,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
     ...$.props
   }) : $) : e;
   return /* @__PURE__ */ h(
-    zr,
+    Sr,
     {
       "aria-disabled": t,
       "aria-label": p,
@@ -6271,7 +6199,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ]
     }
   );
-}, Tr = b(Ae)`
+}, Ir = b(Ae)`
   margin-top: 10px;
   border: 1px solid ${({ theme: e }) => e.palette.gray[300]};
   border-radius: 4px;
@@ -6289,7 +6217,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
   &[aria-selected="true"]:not([aria-disabled="true"]) {
     background-color: unset;
   }
-`, Nr = ({
+`, Tr = ({
   items: e,
   onReorder: t,
   title: i,
@@ -6339,7 +6267,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
               item: l.name,
               value: l,
               children: /* @__PURE__ */ n(
-                Tr,
+                Ir,
                 {
                   disabled: l.locked,
                   icon: "grid-2",
@@ -6358,7 +6286,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       ]
     }
   );
-}, Fr = b(Ae)`
+}, Nr = b(Ae)`
   padding: 7px 8px;
 
   &[aria-selected="true"] {
@@ -6374,7 +6302,79 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
       display: none;
     }
   }
-`, Yt = (e) => e.reduce(
+`, Fr = ({
+  options: e,
+  title: t,
+  checkboxesName: i,
+  defaultCollapsed: a,
+  onChange: r
+}) => {
+  const o = D(), [l, s] = F(a ?? !1), c = k(() => {
+    s((d) => !d);
+  }, []);
+  return /* @__PURE__ */ h(
+    x,
+    {
+      "aria-label": t,
+      bgColor: l ? o.palette.gray[50] : o.palette.white,
+      border: "1px solid" + o.palette.gray[300],
+      borderRadius: "8px",
+      display: "inline-flex",
+      flexDirection: "column",
+      gap: 0.625,
+      px: 0.75,
+      py: 0.625,
+      role: "region",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ h(
+          x,
+          {
+            alignItems: "center",
+            cursor: "pointer",
+            display: "flex",
+            onClick: c,
+            children: [
+              /* @__PURE__ */ n(I, { color: o.palette.gray[800], fontWeight: "bold", size: "sm", children: t }),
+              /* @__PURE__ */ n(
+                N,
+                {
+                  icon: l ? "chevron-up" : "chevron-down",
+                  iconColor: o.palette.gray[400],
+                  iconSize: "xs"
+                }
+              )
+            ]
+          }
+        ),
+        l ? /* @__PURE__ */ n(x, { display: "flex", gap: 0.75, wrap: "wrap", children: e.map(
+          (d) => /* @__PURE__ */ n(
+            x,
+            {
+              border: "1px solid",
+              borderColor: o.palette.gray[300],
+              borderRadius: "4px",
+              px: 0.5,
+              py: 0.5,
+              children: /* @__PURE__ */ n(
+                Xe,
+                {
+                  checked: d.visible,
+                  disabled: d.locked,
+                  label: d.name,
+                  name: `${i}-${d.name}`,
+                  onChange: r,
+                  value: d.name
+                }
+              )
+            },
+            d.name
+          )
+        ) }) : void 0
+      ]
+    }
+  );
+}, Yt = (e) => e.reduce(
   (i, a) => a.group ? i[a.group] ? {
     ...i,
     [a.group]: [...i[a.group], a]
@@ -6572,7 +6572,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
               ([g, u], f) => {
                 const y = `li-checkbox${g}`;
                 return /* @__PURE__ */ n(
-                  Ya,
+                  Fr,
                   {
                     checkboxesName: g,
                     defaultCollapsed: f === 0,
@@ -6610,13 +6610,13 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
         children: o.map((g) => {
           const u = `li-checkbox-${g.name}`;
           return /* @__PURE__ */ n(
-            Fr,
+            Nr,
             {
               selected: g.visible,
               value: u,
               width: "content",
               children: /* @__PURE__ */ n(
-                qe,
+                Xe,
                 {
                   checked: g.visible,
                   disabled: g.locked,
@@ -6720,7 +6720,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
               }
             ),
             /* @__PURE__ */ n(
-              Nr,
+              Tr,
               {
                 description: "Click and drag to reorder the columns",
                 items: i.columns,
@@ -6772,6 +6772,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
   ) : /* @__PURE__ */ n("div", {});
 }, Rr = b(Ae)`
   padding: 8px;
+  min-height: 36px;
   min-width: unset;
 `, Ar = b.div.attrs({
   className: "comp-modal absolute top-[55px] overflow-auto"
@@ -6808,7 +6809,7 @@ ${f[8]}...` : (f.length < 8 && c(!1), t);
                 value: p.value,
                 width: "content",
                 children: /* @__PURE__ */ n(
-                  qe,
+                  Xe,
                   {
                     ...i("checkbox"),
                     label: p.label,
@@ -7453,7 +7454,7 @@ const be = ({
   onFiltersChange: r,
   variant: o = "ungrouped"
 }) => {
-  const l = Xe("filters-modal"), [s, c] = F([]), [d, p] = F(
+  const l = qe("filters-modal"), [s, c] = F([]), [d, p] = F(
     xt(s)
   ), g = i.map(($) => ({
     ...$,
@@ -7542,7 +7543,7 @@ const be = ({
           id: f,
           children: [
             !R.isEmpty(g) && !R.isNil(g) && /* @__PURE__ */ n(
-              br,
+              yr,
               {
                 description: l,
                 modalRef: s,
@@ -7561,13 +7562,13 @@ const be = ({
                 children: /* @__PURE__ */ n(_t, { items: p })
               }
             ),
-            (R.isObject(o) || a) && /* @__PURE__ */ h(pr, { children: [
+            (R.isObject(o) || a) && /* @__PURE__ */ h(dr, { children: [
               a,
-              R.isObject(o) && R.isString(o.imageSrc) && /* @__PURE__ */ n(hr, { $framed: o.imageFramed, children: /* @__PURE__ */ n(pe, { alt: "modal-img", publicId: o.imageSrc }) }),
+              R.isObject(o) && R.isString(o.imageSrc) && /* @__PURE__ */ n(fr, { $framed: o.imageFramed, children: /* @__PURE__ */ n(pe, { alt: "modal-img", publicId: o.imageSrc }) }),
               R.isObject(o) && R.isString(o.imageText) && /* @__PURE__ */ n(I, { size: "sm", children: o.imageText })
             ] }),
             /* @__PURE__ */ n(
-              yr,
+              hr,
               {
                 alert: t,
                 cancelButton: i,
@@ -7585,7 +7586,7 @@ const be = ({
     document.getElementById("portals") ?? document.body
   ) : s.isOpen ? $ : null;
 }, Pl = () => {
-  const [e, t] = F(!1), [i, a] = F(), r = O(null), o = Xe("confirm-dialog-modal"), l = k(
+  const [e, t] = F(!1), [i, a] = F(), r = O(null), o = qe("confirm-dialog-modal"), l = k(
     async (p) => (a(p), t(!0), new Promise((g) => {
       r.current = g;
     })),
@@ -8310,7 +8311,7 @@ const be = ({
   const l = D(), { userName: s, email: c, phone: d, userRole: p } = r;
   return Re(a, () => {
     o(!1);
-  }), /* @__PURE__ */ h(Ir, { children: [
+  }), /* @__PURE__ */ h(zr, { children: [
     /* @__PURE__ */ n("li", { className: "user-info", children: /* @__PURE__ */ h(x, { display: "inline-flex", gap: 0.25, width: "100%", children: [
       /* @__PURE__ */ h(
         x,
@@ -8759,366 +8760,26 @@ const be = ({
       ]
     }
   );
-}, ko = /* @__PURE__ */ n(
-  x,
-  {
-    alignItems: "center",
-    bgColor: T.palette.primary[25],
-    borderRadius: "8px",
-    gap: 0.5,
-    justify: "center",
-    padding: [0.125, 0.25, 0.125, 0.25],
-    width: "max-content",
-    children: /* @__PURE__ */ n(
-      I,
-      {
-        bgGradient: T.palette.gradients["01"],
-        fontWeight: "semibold",
-        size: "xs",
-        textFill: "transparent",
-        children: "Recommended"
-      }
-    )
-  }
-), Co = b.div`
-  ${({ className: e, theme: t }) => `
-    align-items: flex-start;
-    border-radius: ${t.spacing[1]};
-    background: ${t.palette.white};
-    display: flex;
-    flex-direction: column;
-    gap: ${t.spacing[1]};
-    padding: ${t.spacing[1.5]};
+}, ko = b.div`
+  ${({ theme: e }) => `
+    height: ${e.spacing[1]};
+    width: ${e.spacing[1]};
     position: relative;
-    width: 320px;
+    flex-shrink: 0;
 
-    button {
-      text-align: center;
-      width: 100%;
+    & .ellipse-1,
+    & .ellipse-2,
+    & .icon {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
     }
 
-    ${e === "essential" ? `border: 2px solid ${t.palette.gray[300]};` : `
-          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
-            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
-
-          &::before {
-            background: ${t.palette.gradients["01"]} border-box;
-            border-radius: ${t.spacing[1]};
-            content: "";
-            position: absolute;
-            inset: 0;
-            border: 2px solid transparent;
-            mask:
-              linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-            mask-composite: exclude;
-          }
-        `}
-  `}
-`;
-b.div`
-  ${({ className: e, theme: t }) => `
-    align-items: flex-start;
-    border-radius: ${t.spacing[1]};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: ${t.spacing[1.5]};
-    padding: ${t.spacing[1.5]};
-    width: 466px;
-
-    button {
-      text-align: center;
-      width: 100%;
-    }
-
-    ${e === "essential" ? `
-          background: linear-gradient(
-            180deg,
-            ${t.palette.primary[400]} 0%,
-            ${t.palette.black} 100%
-          );` : `
-          background: ${t.palette.white};
-          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
-            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
-        `}
-
-    @media screen and (max-width: ${t.breakpoints.mobile}) {
-      width: 320px;
-    }
-  `}
-`;
-const So = {
-  advanced: {
-    title: "Advanced plan",
-    benefits: "Leverage vulnerability scanning + AI + expert intelligence",
-    buttonText: "Contact sales",
-    description: "For teams that want to discover risk exposure with speed and accuracy.",
-    priceGroup: "$1,579"
-  },
-  essential: {
-    title: "Essential plan",
-    benefits: "Leverage vulnerability scanning",
-    buttonText: "Start a 21-day free trial",
-    description: `For teams that want to discover risk exposure quickly
-        through our scanning tool.`,
-    priceAuthor: "$499",
-    priceGroup: "$1,579"
-  }
-}, es = ({
-  description: e,
-  onClick: t,
-  plan: i
-}) => {
-  const {
-    title: a,
-    description: r,
-    benefits: o,
-    buttonText: l
-  } = So[i], s = e ?? r;
-  return /* @__PURE__ */ h(Co, { className: i, children: [
-    /* @__PURE__ */ h(
-      x,
-      {
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.25,
-        pt: i === "essential" ? 1.75 : 0,
-        children: [
-          i === "advanced" && ko,
-          /* @__PURE__ */ n(
-            Q,
-            {
-              color: T.palette.gray[900],
-              fontWeight: "semibold",
-              size: "sm",
-              sizeSm: "xs",
-              children: a
-            }
-          ),
-          /* @__PURE__ */ n(
-            I,
-            {
-              color: T.palette.gray[400],
-              fontWeight: "semibold",
-              pb: i === "essential" ? 1.25 : 0,
-              size: "sm",
-              sizeSm: "xs",
-              children: o
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ n(
-      I,
-      {
-        lineSpacing: 1.5,
-        lineSpacingSm: 1.25,
-        pb: i === "advanced" ? 1.5 : 0,
-        size: "md",
-        sizeSm: "sm",
-        children: s
-      }
-    ),
-    /* @__PURE__ */ n(B, { onClick: t, variant: "primary", children: l })
-  ] });
-}, zo = ({
-  description: e = "",
-  highlightDescription: t = ""
-}) => {
-  const i = D(), a = typeof t == "string", r = a ? "" : new RegExp(`(${t.join("|")})`, "u");
-  return t.length > 0 ? /* @__PURE__ */ n(
-    I,
-    {
-      display: "inline",
-      lineSpacing: 1.5,
-      size: "lg",
-      textAlign: "center",
-      children: a ? /* @__PURE__ */ h(Oe, { children: [
-        /* @__PURE__ */ n(
-          xe,
-          {
-            color: i.palette.gray[600],
-            display: "inline",
-            fontWeight: "bold",
-            lineSpacing: 1.5,
-            size: "lg",
-            children: t
-          }
-        ),
-        e
-      ] }) : e.split(r).map(
-        (o, l) => t.includes(o) ? /* @__PURE__ */ n(
-          xe,
-          {
-            color: i.palette.gray[600],
-            display: "inline",
-            fontWeight: "bold",
-            lineSpacing: 1.5,
-            size: "lg",
-            children: o
-          },
-          `${l + 1}-bold`
-        ) : o
-      )
-    }
-  ) : /* @__PURE__ */ n(I, { lineSpacing: 1.5, size: "lg", textAlign: "center", children: e });
-}, ts = ({
-  _portal: e = !1,
-  cancelButton: t,
-  darkBackground: i = !1,
-  children: a,
-  confirmButton: r,
-  container: o,
-  description: l,
-  highlightDescription: s = "",
-  image: c,
-  maxWidth: d,
-  title: p,
-  titleColor: g
-}) => {
-  const u = D(), { alt: f, src: y, width: $ = "77px", height: m = "77px" } = c, w = k(() => {
-    t == null || t.onClick();
-  }, [t]), v = k(() => {
-    r == null || r.onClick();
-  }, [r]), C = /* @__PURE__ */ n(
-    x,
-    {
-      alignItems: "center",
-      "aria-label": p,
-      "aria-modal": "true",
-      bgColor: i ? "rgba(52, 64, 84, 70%)" : "",
-      display: "flex",
-      height: "100vh",
-      justify: "center",
-      left: "0",
-      position: e ? "fixed" : "absolute",
-      top: "0px",
-      width: "100%",
-      zIndex: 99999,
-      children: /* @__PURE__ */ h(
-        x,
-        {
-          bgColor: u.palette.white,
-          border: `1px solid ${u.palette.gray[200]}`,
-          borderRadius: "8px",
-          display: "inline-flex",
-          flexDirection: "column",
-          maxWidth: d,
-          pb: 2.5,
-          pl: 2.5,
-          pr: 2.5,
-          pt: 2.5,
-          shadow: "lg",
-          width: "100%",
-          zIndex: 11,
-          children: [
-            /* @__PURE__ */ h(
-              x,
-              {
-                alignItems: "center",
-                display: "flex",
-                flexDirection: "column",
-                width: "100%",
-                children: [
-                  /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(
-                    pe,
-                    {
-                      alt: f,
-                      height: m,
-                      publicId: y,
-                      width: $
-                    }
-                  ) }),
-                  /* @__PURE__ */ h(
-                    x,
-                    {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: 0.5,
-                      mb: 1.5,
-                      mt: 1.5,
-                      children: [
-                        /* @__PURE__ */ n(
-                          Q,
-                          {
-                            color: g,
-                            fontWeight: "bold",
-                            lineSpacing: 2.5,
-                            size: "lg",
-                            textAlign: "center",
-                            children: p
-                          }
-                        ),
-                        /* @__PURE__ */ n(
-                          zo,
-                          {
-                            description: l,
-                            highlightDescription: s
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            a && /* @__PURE__ */ n(x, { mb: 1, scroll: "y", children: /* @__PURE__ */ n(x, { height: "100%", children: a }) }),
-            /* @__PURE__ */ h(
-              x,
-              {
-                alignItems: "flex-start",
-                display: "flex",
-                gap: 1,
-                justify: "center",
-                children: [
-                  P.isObject(r) ? /* @__PURE__ */ n(
-                    B,
-                    {
-                      onClick: v,
-                      variant: (r == null ? void 0 : r.variant) ?? "primary",
-                      children: r == null ? void 0 : r.text
-                    },
-                    r == null ? void 0 : r.key
-                  ) : void 0,
-                  P.isObject(t) ? /* @__PURE__ */ n(
-                    B,
-                    {
-                      onClick: w,
-                      variant: (t == null ? void 0 : t.variant) ?? "tertiary",
-                      children: t == null ? void 0 : t.text
-                    },
-                    t == null ? void 0 : t.key
-                  ) : void 0
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-  return e ? de(C, o ?? document.body) : C;
-}, Io = b.div`
-  ${({ theme: e }) => `
-    height: ${e.spacing[1]};
-    width: ${e.spacing[1]};
-    position: relative;
-    flex-shrink: 0;
-
-    & .ellipse-1,
-    & .ellipse-2,
-    & .icon {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      position: absolute;
-    }
-
-    & .ellipse-1 {
-      color: ${e.palette.warning[200]};
-      position: absolute;
-    }
+    & .ellipse-1 {
+      color: ${e.palette.warning[200]};
+      position: absolute;
+    }
 
     & .ellipse-2 {
       transform: scale(0.75) translate(-67%, -66%);
@@ -9130,12 +8791,12 @@ const So = {
       font-size: ${e.spacing[0.5]};
     }
   `}
-`, To = ({
+`, Co = ({
   margin: e,
   onClick: t,
   text: i
 }) => {
-  const a = D(), r = /* @__PURE__ */ h(Io, { children: [
+  const a = D(), r = /* @__PURE__ */ h(ko, { children: [
     /* @__PURE__ */ n(N, { icon: "circle", iconClass: "ellipse-1", iconSize: "xs" }),
     /* @__PURE__ */ n(N, { icon: "circle", iconClass: "ellipse-2", iconSize: "xs" }),
     /* @__PURE__ */ n(N, { icon: "crown", iconClass: "icon", iconSize: "xs" })
@@ -9173,7 +8834,7 @@ const So = {
       )
     }
   ) : /* @__PURE__ */ n(x, { display: "inline-block", mr: e, onClick: t, children: r });
-}, is = ({
+}, es = ({
   score: e
 }) => {
   const t = D(), i = e <= 33 ? "priority-bars-low" : "priority-bars-medium", a = e > 66 || e === 0 ? "priority-bars-high" : i;
@@ -9191,7 +8852,7 @@ const So = {
     ),
     /* @__PURE__ */ n(I, { color: t.palette.gray[800], size: "sm", textAlign: "right", children: e + "%" })
   ] });
-}, { getVariant: No } = re(
+}, { getVariant: So } = re(
   (e) => ({
     compliance: `
       display: inline-flex;
@@ -9257,17 +8918,17 @@ const So = {
       }
     `
   })
-), Fo = (e, t) => t < 50 ? e.palette.error[500] : t < 80 ? e.palette.warning[500] : e.palette.success[500], Do = b.div`
+), zo = (e, t) => t < 50 ? e.palette.error[500] : t < 80 ? e.palette.warning[500] : e.palette.success[500], Io = b.div`
   ${({ theme: e, $minWidth: t, $orientation: i, $rounded: a, $variant: r }) => `
     background-color: ${e.palette.gray[100]};
     border-radius: ${a ? "100px" : "unset"};
     ${i === "horizontal" ? "min-width" : "min-height"}: ${t}px;
     ${i === "horizontal" ? "" : "height: 100%;"}
 
-    ${No(e, r)}
+    ${So(e, r)}
 
   `}
-`, jo = b.div`
+`, To = b.div`
   ${({ theme: e, $percentage: t, $rounded: i, $variant: a }) => `
     display: inline-flex;
     width: ${t}%;
@@ -9277,9 +8938,9 @@ const So = {
     border-radius: ${i ? "100px" : "unset"};
     border-end-end-radius: ${i && t < 100 ? "0" : "inherit"};
     border-start-end-radius: ${i && t < 100 ? "0" : "inherit"};
-    background-color: ${a === "compliance" ? Fo(e, t) : "inherit"};
+    background-color: ${a === "compliance" ? zo(e, t) : "inherit"};
   `}
-`, ns = ({
+`, ts = ({
   minWidth: e = 100,
   percentage: t,
   percentageLocation: i = "right",
@@ -9298,7 +8959,7 @@ const So = {
       children: /* @__PURE__ */ n(I, { ml: 0.5, mr: s ? 0.5 : 0, size: "sm", children: `${t}%` })
     }
   ) : null, d = /* @__PURE__ */ n(
-    Do,
+    Io,
     {
       $minWidth: e,
       $orientation: r,
@@ -9306,7 +8967,7 @@ const So = {
       $variant: l,
       className: r,
       children: /* @__PURE__ */ n(
-        jo,
+        To,
         {
           $percentage: t,
           $rounded: o,
@@ -9316,30 +8977,207 @@ const So = {
       )
     }
   );
-  return /* @__PURE__ */ h(
-    x,
-    {
-      alignItems: "center",
-      display: "inline-flex",
-      flexDirection: s ? "row-reverse" : "row",
-      height: r === "horizontal" ? "auto" : "100%",
-      maxWidth: s ? `${e + 43}px` : void 0,
-      minWidth: s ? `${e + 43}px` : void 0,
-      textAlign: "end",
-      children: [
-        d,
-        c
-      ]
-    }
-  );
-}, Lo = b.div.attrs({
+  return /* @__PURE__ */ h(
+    x,
+    {
+      alignItems: "center",
+      display: "inline-flex",
+      flexDirection: s ? "row-reverse" : "row",
+      height: r === "horizontal" ? "auto" : "100%",
+      maxWidth: s ? `${e + 43}px` : void 0,
+      minWidth: s ? `${e + 43}px` : void 0,
+      textAlign: "end",
+      children: [
+        d,
+        c
+      ]
+    }
+  );
+}, No = ({
+  description: e = "",
+  highlightDescription: t = ""
+}) => {
+  const i = D(), a = typeof t == "string", r = a ? "" : new RegExp(`(${t.join("|")})`, "u");
+  return t.length > 0 ? /* @__PURE__ */ n(
+    I,
+    {
+      display: "inline",
+      lineSpacing: 1.5,
+      size: "lg",
+      textAlign: "center",
+      children: a ? /* @__PURE__ */ h(Oe, { children: [
+        /* @__PURE__ */ n(
+          xe,
+          {
+            color: i.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: "lg",
+            children: t
+          }
+        ),
+        e
+      ] }) : e.split(r).map(
+        (o, l) => t.includes(o) ? /* @__PURE__ */ n(
+          xe,
+          {
+            color: i.palette.gray[600],
+            display: "inline",
+            fontWeight: "bold",
+            lineSpacing: 1.5,
+            size: "lg",
+            children: o
+          },
+          `${l + 1}-bold`
+        ) : o
+      )
+    }
+  ) : /* @__PURE__ */ n(I, { lineSpacing: 1.5, size: "lg", textAlign: "center", children: e });
+}, is = ({
+  _portal: e = !1,
+  cancelButton: t,
+  darkBackground: i = !1,
+  children: a,
+  confirmButton: r,
+  container: o,
+  description: l,
+  highlightDescription: s = "",
+  image: c,
+  maxWidth: d,
+  title: p,
+  titleColor: g
+}) => {
+  const u = D(), { alt: f, src: y, width: $ = "77px", height: m = "77px" } = c, w = k(() => {
+    t == null || t.onClick();
+  }, [t]), v = k(() => {
+    r == null || r.onClick();
+  }, [r]), C = /* @__PURE__ */ n(
+    x,
+    {
+      alignItems: "center",
+      "aria-label": p,
+      "aria-modal": "true",
+      bgColor: i ? "rgba(52, 64, 84, 70%)" : "",
+      display: "flex",
+      height: "100vh",
+      justify: "center",
+      left: "0",
+      position: e ? "fixed" : "absolute",
+      top: "0px",
+      width: "100%",
+      zIndex: 99999,
+      children: /* @__PURE__ */ h(
+        x,
+        {
+          bgColor: u.palette.white,
+          border: `1px solid ${u.palette.gray[200]}`,
+          borderRadius: "8px",
+          display: "inline-flex",
+          flexDirection: "column",
+          maxWidth: d,
+          pb: 2.5,
+          pl: 2.5,
+          pr: 2.5,
+          pt: 2.5,
+          shadow: "lg",
+          width: "100%",
+          zIndex: 11,
+          children: [
+            /* @__PURE__ */ h(
+              x,
+              {
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(
+                    pe,
+                    {
+                      alt: f,
+                      height: m,
+                      publicId: y,
+                      width: $
+                    }
+                  ) }),
+                  /* @__PURE__ */ h(
+                    x,
+                    {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 0.5,
+                      mb: 1.5,
+                      mt: 1.5,
+                      children: [
+                        /* @__PURE__ */ n(
+                          Q,
+                          {
+                            color: g,
+                            fontWeight: "bold",
+                            lineSpacing: 2.5,
+                            size: "lg",
+                            textAlign: "center",
+                            children: p
+                          }
+                        ),
+                        /* @__PURE__ */ n(
+                          No,
+                          {
+                            description: l,
+                            highlightDescription: s
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            a && /* @__PURE__ */ n(x, { mb: 1, scroll: "y", children: /* @__PURE__ */ n(x, { height: "100%", children: a }) }),
+            /* @__PURE__ */ h(
+              x,
+              {
+                alignItems: "flex-start",
+                display: "flex",
+                gap: 1,
+                justify: "center",
+                children: [
+                  P.isObject(r) ? /* @__PURE__ */ n(
+                    B,
+                    {
+                      onClick: v,
+                      variant: (r == null ? void 0 : r.variant) ?? "primary",
+                      children: r == null ? void 0 : r.text
+                    },
+                    r == null ? void 0 : r.key
+                  ) : void 0,
+                  P.isObject(t) ? /* @__PURE__ */ n(
+                    B,
+                    {
+                      onClick: w,
+                      variant: (t == null ? void 0 : t.variant) ?? "tertiary",
+                      children: t == null ? void 0 : t.text
+                    },
+                    t == null ? void 0 : t.key
+                  ) : void 0
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return e ? de(C, o ?? document.body) : C;
+}, Fo = b.div.attrs({
   className: "comp-scroll-up"
 })`
   bottom: 15px;
   position: fixed;
   right: 140px;
   z-index: 100;
-`, as = ({
+`, ns = ({
   scrollerId: e = "dashboard",
   visibleAt: t = 500
 }) => {
@@ -9355,7 +9193,7 @@ const So = {
       top: 0
     });
   }, [r]);
-  return i ? /* @__PURE__ */ n(Lo, { children: /* @__PURE__ */ n(
+  return i ? /* @__PURE__ */ n(Fo, { children: /* @__PURE__ */ n(
     Y,
     {
       height: "40px",
@@ -9366,7 +9204,7 @@ const So = {
       width: "40px"
     }
   ) }) : null;
-}, Eo = {
+}, Do = {
   critical: {
     bgColor: T.palette.primary[700],
     colorL: T.palette.gray[800],
@@ -9392,12 +9230,12 @@ const So = {
     colorL: T.palette.gray[800],
     colorR: T.palette.gray[800]
   }
-}, rs = ({
+}, as = ({
   textL: e,
   textR: t,
   variant: i
 }) => {
-  const a = D(), { bgColor: r, colorL: o, colorR: l } = Eo[i];
+  const a = D(), { bgColor: r, colorL: o, colorR: l } = Do[i];
   return /* @__PURE__ */ h(x, { alignItems: "flex-start", display: "inline-flex", children: [
     e ? /* @__PURE__ */ n(
       x,
@@ -9429,7 +9267,7 @@ const So = {
       }
     )
   ] });
-}, Ro = (e, t) => {
+}, jo = (e, t) => {
   const i = {
     critical: T.palette.primary[700],
     high: T.palette.error[500],
@@ -9456,7 +9294,7 @@ const So = {
   variant: e,
   value: t
 }) => {
-  const { iconColor: i, iconText: a, iconTextColor: r, textColor: o } = Ro(
+  const { iconColor: i, iconText: a, iconTextColor: r, textColor: o } = jo(
     e,
     t
   ), l = P.capitalize(e.charAt(0)) + e.slice(1);
@@ -9486,7 +9324,7 @@ const So = {
       ]
     }
   );
-}, os = ({
+}, rs = ({
   critical: e,
   high: t,
   medium: i,
@@ -9496,7 +9334,7 @@ const So = {
   /* @__PURE__ */ n($e, { value: t, variant: "high" }),
   /* @__PURE__ */ n($e, { value: i, variant: "medium" }),
   /* @__PURE__ */ n($e, { value: a, variant: "low" })
-] }), Ao = b.div`
+] }), Lo = b.div`
   ${({ theme: e }) => `
     border-radius: ${e.spacing[0.25]};
     cursor: pointer;
@@ -9514,13 +9352,13 @@ const So = {
       display: block;
     }
   `}
-`, ls = ({
+`, os = ({
   visibleElement: e,
   hiddenElement: t
-}) => /* @__PURE__ */ h(Ao, { children: [
+}) => /* @__PURE__ */ h(Lo, { children: [
   e,
   /* @__PURE__ */ n(x, { display: "none", position: "absolute", top: "100%", zIndex: 10, children: t })
-] }), Po = ({
+] }), Eo = ({
   customBadge: e = void 0,
   description: t,
   icon: i,
@@ -9567,7 +9405,7 @@ const So = {
         /* @__PURE__ */ h(x, { children: [
           /* @__PURE__ */ h(x, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [
             /* @__PURE__ */ n(I, { color: l.palette.gray[800], size: "sm", children: o }),
-            r ? /* @__PURE__ */ n(To, { text: "Upgrade" }) : void 0,
+            r ? /* @__PURE__ */ n(Co, { text: "Upgrade" }) : void 0,
             e
           ] }),
           /* @__PURE__ */ n(I, { color: l.palette.gray[400], size: "xs", children: t })
@@ -9575,7 +9413,7 @@ const So = {
       ]
     }
   );
-}, Wo = b(an.div)`
+}, Ro = b(an.div)`
   ${({ theme: e }) => `
     background-color: ${e.palette.white};
     box-shadow: ${e.shadows.lg};
@@ -9598,7 +9436,7 @@ const So = {
       height: auto;
     }
   `}
-`, ss = ({
+`, ls = ({
   children: e,
   closeIconId: t = "close-menu",
   isOpen: i,
@@ -9630,7 +9468,7 @@ const So = {
       });
     };
   }, [i, r]), /* @__PURE__ */ n(rn, { features: on, children: /* @__PURE__ */ n(
-    Wo,
+    Ro,
     {
       animate: i ? {
         display: "block",
@@ -9713,7 +9551,7 @@ const So = {
                     requiresUpgrade: w,
                     title: v
                   }) => /* @__PURE__ */ n(
-                    Po,
+                    Eo,
                     {
                       customBadge: f,
                       description: y,
@@ -9764,7 +9602,7 @@ const So = {
       ] })
     }
   ) });
-}, Vo = (e, t) => t >= 50 ? `
+}, Ao = (e, t) => t >= 50 ? `
       ${e.palette.gray[200]} 50%,
       ${e.palette.primary[500]} 50.05%,
       ${e.palette.primary[500]} ${t}%,
@@ -9775,7 +9613,7 @@ const So = {
       ${e.palette.primary[500]} 50%,
       ${e.palette.gray[200]} 50.05%,
       ${e.palette.gray[200]} 100%
-    `, Ho = b.div`
+    `, Po = b.div`
   ${({ theme: e, $min: t, $value: i }) => `
     align-items: center;
     align-self: stretch;
@@ -9791,7 +9629,7 @@ const So = {
         ${t >= 0 ? `
               ${e.palette.primary[500]} ${i}%,
               ${e.palette.gray[200]} ${i}%
-            ` : Vo(e, i)}
+            ` : Ao(e, i)}
       );
       border-radius: ${e.spacing[0.125]};
       height: ${e.spacing[0.25]};
@@ -9815,7 +9653,7 @@ const So = {
       border: 1px solid ${e.palette.primary[500]};
     }
   `}
-`, Oo = b.div`
+`, Wo = b.div`
   ${({ theme: e }) => `
     align-items: center;
     display: flex;
@@ -9829,7 +9667,7 @@ const So = {
       font-size: ${e.spacing[0.5]};
     }
   `}
-`, Bo = b.output`
+`, Vo = b.output`
   ${({ theme: e }) => `
     align-items: flex-end;
     border-radius: ${e.spacing[0.5]};
@@ -9840,7 +9678,7 @@ const So = {
     padding: ${e.spacing[0.625]} ${e.spacing[0.75]};
     width: 59px;
   `}
-`, Mo = ({
+`, Ho = ({
   state: e,
   trackRef: t,
   index: i,
@@ -9851,7 +9689,7 @@ const So = {
     e
   );
   return /* @__PURE__ */ n("div", { ...o, className: `thumb ${s ? "dragging" : ""}`, children: /* @__PURE__ */ n(sn, { children: /* @__PURE__ */ n("input", { ...l, "aria-label": a, ref: r }) }) });
-}, Go = (e, t, i) => Math.round((i - e) / (t - e) * 100), cs = (e) => {
+}, Oo = (e, t, i) => Math.round((i - e) / (t - e) * 100), ss = (e) => {
   const t = D(), i = O(null), { label: a, minValue: r = 0, maxValue: o = 100, name: l, setValue: s, watch: c } = e, d = cn(), p = dn({
     ...e,
     numberFormatter: d,
@@ -9859,7 +9697,7 @@ const So = {
       s == null || s(l, y);
     },
     value: c == null ? void 0 : c(l)
-  }), g = Go(r, o, p.getThumbValue(0)), { groupProps: u, trackProps: f } = pn(
+  }), g = Oo(r, o, p.getThumbValue(0)), { groupProps: u, trackProps: f } = pn(
     { ...e, "aria-label": l, id: l },
     p,
     i
@@ -9874,7 +9712,7 @@ const So = {
       width: "100%",
       children: [
         /* @__PURE__ */ h(
-          Ho,
+          Po,
           {
             ...u,
             $min: r ?? 0,
@@ -9887,10 +9725,10 @@ const So = {
                   ...f,
                   className: `track ${p.isDisabled ? "disabled" : ""}`,
                   ref: i,
-                  children: /* @__PURE__ */ n(Mo, { index: 0, name: l, state: p, trackRef: i })
+                  children: /* @__PURE__ */ n(Ho, { index: 0, name: l, state: p, trackRef: i })
                 }
               ),
-              /* @__PURE__ */ h(Oo, { children: [
+              /* @__PURE__ */ h(Wo, { children: [
                 /* @__PURE__ */ n("p", { children: `${d.format(r)} (Low)` }),
                 r < 0 && /* @__PURE__ */ n("p", { children: "0" }),
                 /* @__PURE__ */ n("p", { children: `${d.format(o)} (High)` })
@@ -9898,11 +9736,11 @@ const So = {
             ]
           }
         ),
-        /* @__PURE__ */ n(Bo, { children: /* @__PURE__ */ n(I, { color: t.palette.gray[800], size: "sm", textAlign: "right", children: p.getThumbValueLabel(0) }) })
+        /* @__PURE__ */ n(Vo, { children: /* @__PURE__ */ n(I, { color: t.palette.gray[800], size: "sm", textAlign: "right", children: p.getThumbValueLabel(0) }) })
       ]
     }
   ) });
-}, { getVariant: Uo } = re(
+}, { getVariant: Bo } = re(
   (e) => ({
     completed: `
       background-color: ${e.palette.primary[500]};
@@ -9931,7 +9769,7 @@ const So = {
       }
     `
   })
-), _o = b.div`
+), Mo = b.div`
   ${({ theme: e }) => `
     align-items: stretch;
     background-color: ${e.palette.white};
@@ -9941,7 +9779,7 @@ const So = {
     padding: ${`${e.spacing[1]} ${e.spacing[1]}`};
     scroll-behavior: unset;
   `}
-`, Yo = b.div`
+`, Go = b.div`
   display: flex;
   flex-direction: row;
   margin-bottom: ${({ theme: e }) => e.spacing[2]};
@@ -9949,7 +9787,7 @@ const So = {
   &:last-child > div:first-child > span::after {
     display: none;
   }
-`, Ko = b.div`
+`, Uo = b.div`
   ${({ theme: e }) => `
     display: inline-flex;
     font-family: ${e.typography.type.primary};
@@ -9961,7 +9799,7 @@ const So = {
       margin-right: ${e.spacing[0.5]};
     }
   `}
-`, qo = b.span`
+`, _o = b.span`
   ${({ theme: e, $variant: t }) => `
     border-radius: 6px;
     display: inline-block;
@@ -9984,9 +9822,9 @@ const So = {
       height: calc(100% - ${e.spacing[1]});
     }
 
-    ${Uo(e, t)}
+    ${Bo(e, t)}
   `}
-`, ds = ({
+`, cs = ({
   button: { disabled: e = !1, text: t, type: i = "button", onClick: a },
   steps: r
 }) => {
@@ -9999,10 +9837,10 @@ const So = {
     ),
     []
   );
-  return /* @__PURE__ */ n(_o, { children: r.map((c, d) => {
+  return /* @__PURE__ */ n(Mo, { children: r.map((c, d) => {
     const { content: p, title: g, nextAction: u, previousAction: f } = c, y = d + 1, $ = y === o ? "current" : "disabled", m = y < o ? "completed" : $;
-    return /* @__PURE__ */ h(Yo, { children: [
-      /* @__PURE__ */ n(x, { maxWidth: "40px", position: "relative", children: /* @__PURE__ */ n(qo, { $variant: m, children: m === "completed" ? /* @__PURE__ */ n(N, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : y }) }),
+    return /* @__PURE__ */ h(Go, { children: [
+      /* @__PURE__ */ n(x, { maxWidth: "40px", position: "relative", children: /* @__PURE__ */ n(_o, { $variant: m, children: m === "completed" ? /* @__PURE__ */ n(N, { icon: "check", iconSize: "xs", iconType: "fa-solid" }) : y }) }),
       /* @__PURE__ */ h(x, { ml: 1.5, width: "100%", children: [
         /* @__PURE__ */ n(
           Q,
@@ -10016,7 +9854,7 @@ const So = {
         ),
         m === "current" && /* @__PURE__ */ h(x, { children: [
           p,
-          /* @__PURE__ */ h(Ko, { children: [
+          /* @__PURE__ */ h(Uo, { children: [
             o > 1 && /* @__PURE__ */ n(
               B,
               {
@@ -10049,7 +9887,7 @@ const So = {
       ] })
     ] }, c.title);
   }) });
-}, Xo = b.button`
+}, Yo = b.button`
   ${({ theme: e }) => `
     align-items: center;
     background-color: ${e.palette.white};
@@ -10091,14 +9929,14 @@ const So = {
       background-color: ${e.palette.gray[100]};
     }
   `}
-`, Jo = {
+`, Ko = {
   add: { icon: "plus" },
   approve: { icon: "check" },
   disabled: { icon: "ban" },
   reject: { icon: "xmark" },
   submit: { icon: "arrow-right" },
   success: { icon: "check" }
-}, ps = ({
+}, ds = ({
   disabled: e = !1,
   icon: t,
   id: i,
@@ -10109,7 +9947,7 @@ const So = {
   variant: s
 }) => {
   const c = D(), d = /* @__PURE__ */ h(
-    Xo,
+    Yo,
     {
       "aria-label": r ?? void 0,
       className: s,
@@ -10122,7 +9960,7 @@ const So = {
           N,
           {
             clickable: !1,
-            icon: t ?? Jo[s].icon,
+            icon: t ?? Ko[s].icon,
             iconSize: r === void 0 ? "xxs" : "xs",
             iconType: "fa-light"
           }
@@ -10135,27 +9973,7 @@ const So = {
     d,
     a && /* @__PURE__ */ n(I, { color: c.palette.gray[800], ml: 0.5, size: "sm", children: a })
   ] });
-}, gs = ({ items: e }) => /* @__PURE__ */ n(xr, { children: e.map(
-  ({ isActive: t, label: i, onClick: a }, r) => /* @__PURE__ */ n(
-    $r,
-    {
-      className: t ? "active" : "",
-      onClick: a,
-      type: "button",
-      children: /* @__PURE__ */ n(
-        Q,
-        {
-          color: "inherit",
-          fontWeight: "semibold",
-          size: "sm",
-          sizeSm: "xs",
-          children: i
-        }
-      )
-    },
-    `${i}-${r}`
-  )
-) }), Zo = b.div`
+}, qo = b.div`
   ${({ theme: e, $size: t }) => `
     align-items: center;
     background-color: ${e.palette.white};
@@ -10178,7 +9996,7 @@ const So = {
       border: 1px solid ${e.palette.gray[600]};
     }
   `}
-`, Qo = b.div`
+`, Xo = b.div`
   ${({ theme: e, $size: t }) => `
     display: ${t === "long" ? "flex" : "block"};
     flex-direction: column;
@@ -10228,14 +10046,14 @@ const So = {
       transform: translateX(-50%);
     }
   `}
-`, el = ({
+`, Jo = ({
   date: e,
   description: t,
   title: i,
   size: a = "long"
 }) => {
   const r = D();
-  return /* @__PURE__ */ h(Zo, { $size: a, className: "timeline-card", children: [
+  return /* @__PURE__ */ h(qo, { $size: a, className: "timeline-card", children: [
     /* @__PURE__ */ n(
       I,
       {
@@ -10272,12 +10090,12 @@ const So = {
       );
     }) })
   ] });
-}, us = ({ items: e }) => {
+}, ps = ({ items: e }) => {
   const t = O(null), [i, a] = F("long");
   return U(() => {
     t.current && a(t.current.offsetWidth <= 1100 ? "small" : "long");
-  }, []), /* @__PURE__ */ n(x, { ref: t, width: "100%", children: /* @__PURE__ */ n(Qo, { $size: i, children: e.map((r, o) => /* @__PURE__ */ n(
-    el,
+  }, []), /* @__PURE__ */ n(x, { ref: t, width: "100%", children: /* @__PURE__ */ n(Xo, { $size: i, children: e.map((r, o) => /* @__PURE__ */ n(
+    Jo,
     {
       date: r.date,
       description: r.description,
@@ -10286,7 +10104,7 @@ const So = {
     },
     `${r.title}-${o}`
   )) }) });
-}, tl = b.div`
+}, Zo = b.div`
   ${({ theme: e }) => `
     align-items: center;
     display: flex;
@@ -10316,7 +10134,7 @@ const So = {
       width: 320px;
     }
   `}
-`, il = b.button`
+`, Qo = b.button`
   ${({ theme: e }) => `
     align-items: center;
     background: linear-gradient(
@@ -10345,7 +10163,7 @@ const So = {
       color: ${e.palette.white};
     }
   `}
-`, fs = ({
+`, gs = ({
   defaultSelection: e,
   options: t,
   handleClick: i
@@ -10361,9 +10179,9 @@ const So = {
     ),
     [i]
   );
-  return /* @__PURE__ */ n(tl, { children: t.map(
+  return /* @__PURE__ */ n(Zo, { children: t.map(
     (l, s) => /* @__PURE__ */ n(
-      il,
+      Qo,
       {
         className: `${l.includes(a) && "selected"}`,
         onClick: o(l),
@@ -10382,7 +10200,7 @@ const So = {
       `${l}-${s}`
     )
   ) });
-}, hs = {
+}, us = {
   content: "",
   disableBeacon: !0,
   hideCloseButton: !1,
@@ -10414,7 +10232,7 @@ const So = {
     }
   },
   target: ""
-}, ys = ({ run: e, steps: t, onFinish: i }) => {
+}, fs = ({ run: e, steps: t, onFinish: i }) => {
   const [a, r] = F(e), [o, l] = F(0), s = k(
     (c) => {
       const { action: d, index: p, status: g, type: u } = c;
@@ -10443,6 +10261,189 @@ const So = {
       }
     }
   );
+}, hs = ({ items: e }) => /* @__PURE__ */ n($r, { children: e.map(
+  ({ isActive: t, label: i, onClick: a }, r) => /* @__PURE__ */ n(
+    br,
+    {
+      className: t ? "active" : "",
+      onClick: a,
+      type: "button",
+      children: /* @__PURE__ */ n(
+        Q,
+        {
+          color: "inherit",
+          fontWeight: "semibold",
+          size: "sm",
+          sizeSm: "xs",
+          children: i
+        }
+      )
+    },
+    `${i}-${r}`
+  )
+) }), el = /* @__PURE__ */ n(
+  x,
+  {
+    alignItems: "center",
+    bgColor: T.palette.primary[25],
+    borderRadius: "8px",
+    gap: 0.5,
+    justify: "center",
+    padding: [0.125, 0.25, 0.125, 0.25],
+    width: "max-content",
+    children: /* @__PURE__ */ n(
+      I,
+      {
+        bgGradient: T.palette.gradients["01"],
+        fontWeight: "semibold",
+        size: "xs",
+        textFill: "transparent",
+        children: "Recommended"
+      }
+    )
+  }
+), tl = b.div`
+  ${({ className: e, theme: t }) => `
+    align-items: flex-start;
+    border-radius: ${t.spacing[1]};
+    background: ${t.palette.white};
+    display: flex;
+    flex-direction: column;
+    gap: ${t.spacing[1]};
+    padding: ${t.spacing[1.5]};
+    position: relative;
+    width: 320px;
+
+    button {
+      text-align: center;
+      width: 100%;
+    }
+
+    ${e === "essential" ? `border: 2px solid ${t.palette.gray[300]};` : `
+          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
+            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
+
+          &::before {
+            background: ${t.palette.gradients["01"]} border-box;
+            border-radius: ${t.spacing[1]};
+            content: "";
+            position: absolute;
+            inset: 0;
+            border: 2px solid transparent;
+            mask:
+              linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+            mask-composite: exclude;
+          }
+        `}
+  `}
+`;
+b.div`
+  ${({ className: e, theme: t }) => `
+    align-items: flex-start;
+    border-radius: ${t.spacing[1]};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: ${t.spacing[1.5]};
+    padding: ${t.spacing[1.5]};
+    width: 466px;
+
+    button {
+      text-align: center;
+      width: 100%;
+    }
+
+    ${e === "essential" ? `
+          background: linear-gradient(
+            180deg,
+            ${t.palette.primary[400]} 0%,
+            ${t.palette.black} 100%
+          );` : `
+          background: ${t.palette.white};
+          box-shadow: 0px 9px 18px 0px rgba(243, 38, 55, 0.06),
+            0px 18px 27px 0px rgba(243, 38, 55, 0.10);
+        `}
+
+    @media screen and (max-width: ${t.breakpoints.mobile}) {
+      width: 320px;
+    }
+  `}
+`;
+const il = {
+  advanced: {
+    title: "Advanced plan",
+    benefits: "Leverage vulnerability scanning + AI + expert intelligence",
+    buttonText: "Contact sales",
+    description: "For teams that want to discover risk exposure with speed and accuracy.",
+    priceGroup: "$1,579"
+  },
+  essential: {
+    title: "Essential plan",
+    benefits: "Leverage vulnerability scanning",
+    buttonText: "Start a 21-day free trial",
+    description: `For teams that want to discover risk exposure quickly
+        through our scanning tool.`,
+    priceAuthor: "$499",
+    priceGroup: "$1,579"
+  }
+}, ys = ({
+  description: e,
+  onClick: t,
+  plan: i
+}) => {
+  const {
+    title: a,
+    description: r,
+    benefits: o,
+    buttonText: l
+  } = il[i], s = e ?? r;
+  return /* @__PURE__ */ h(tl, { className: i, children: [
+    /* @__PURE__ */ h(
+      x,
+      {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.25,
+        pt: i === "essential" ? 1.75 : 0,
+        children: [
+          i === "advanced" && el,
+          /* @__PURE__ */ n(
+            Q,
+            {
+              color: T.palette.gray[900],
+              fontWeight: "semibold",
+              size: "sm",
+              sizeSm: "xs",
+              children: a
+            }
+          ),
+          /* @__PURE__ */ n(
+            I,
+            {
+              color: T.palette.gray[400],
+              fontWeight: "semibold",
+              pb: i === "essential" ? 1.25 : 0,
+              size: "sm",
+              sizeSm: "xs",
+              children: o
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      I,
+      {
+        lineSpacing: 1.5,
+        lineSpacingSm: 1.25,
+        pb: i === "advanced" ? 1.5 : 0,
+        size: "md",
+        sizeSm: "sm",
+        children: s
+      }
+    ),
+    /* @__PURE__ */ n(B, { onClick: t, variant: "primary", children: l })
+  ] });
 };
 export {
   Va as $,
@@ -10474,7 +10475,7 @@ export {
   hl as Z,
   vl as _,
   Lt as a,
-  Xe as a$,
+  qe as a$,
   kl as a0,
   Ha as a1,
   Sl as a2,
@@ -10486,35 +10487,35 @@ export {
   ml as a8,
   Ea as a9,
   Mt as aA,
-  as as aB,
+  ns as aB,
   ve as aC,
-  rs as aD,
-  os as aE,
-  ls as aF,
-  ss as aG,
-  cs as aH,
-  ds as aI,
-  ps as aJ,
+  as as aD,
+  rs as aE,
+  os as aF,
+  ls as aG,
+  ss as aH,
+  cs as aI,
+  ds as aJ,
   _t as aK,
   oe as aL,
-  el as aM,
-  us as aN,
-  ir as aO,
-  fs as aP,
+  Jo as aM,
+  ps as aN,
+  er as aO,
+  gs as aP,
   ie as aQ,
-  hs as aR,
-  ys as aS,
+  us as aR,
+  fs as aS,
   Q as aT,
   I as aU,
   xe as aV,
-  Ka as aW,
-  qa as aX,
+  _a as aW,
+  Ya as aX,
   Re as aY,
   Il as aZ,
-  Xa as a_,
+  Ka as a_,
   ce as aa,
   Ae as ab,
-  Ir as ac,
+  zr as ac,
   Ul as ad,
   _l as ae,
   Yl as af,
@@ -10523,21 +10524,21 @@ export {
   Xl as ai,
   Jr as aj,
   Ll as ak,
-  yr as al,
+  hr as al,
   El as am,
   Mr as an,
   Rl as ao,
   Al as ap,
   Ur as aq,
   Jl as ar,
-  Cr as as,
+  kr as as,
   Zl as at,
   Ql as au,
   vt as av,
-  To as aw,
-  is as ax,
-  ns as ay,
-  ts as az,
+  Co as aw,
+  es as ax,
+  ts as ay,
+  is as az,
   Et as b,
   Tl as b0,
   Rn as b1,
@@ -10549,13 +10550,13 @@ export {
   Ue as b7,
   We as b8,
   _e as b9,
-  ko as bA,
-  es as bB,
-  zo as bC,
-  $e as bD,
-  Po as bE,
-  Mo as bF,
-  gs as bG,
+  No as bA,
+  $e as bB,
+  Eo as bC,
+  Ho as bD,
+  hs as bE,
+  el as bF,
+  ys as bG,
   xa as ba,
   ma as bb,
   wa as bc,
@@ -10567,11 +10568,11 @@ export {
   ht as bi,
   yt as bj,
   Ve as bk,
-  Ya as bl,
-  cr as bm,
-  br as bn,
-  Sr as bo,
-  Nr as bp,
+  sr as bl,
+  yr as bm,
+  Cr as bn,
+  Tr as bo,
+  Fr as bp,
   Er as bq,
   Pr as br,
   Wr as bs,
@@ -10600,7 +10601,7 @@ export {
   Fl as r,
   Se as s,
   Dl as t,
-  qe as u,
+  Xe as u,
   re as v,
   jl as w,
   dl as x,