@orchidui/core 1.6.1-1 → 1.6.1-11

package/dist/{index-Cp_g4d58.js → index-BEH4OtRf.js}

@@ -1436,7 +1436,7 @@ const Kt = {
           }, 8, ["modelValue"])
         ]),
         (o = e.urls) != null && o.length ? (t(), i("div", aa, [
-          (t(!0), i(L, null, R(e.urls, (d, c) => (t(), y(r(gn), {
+          (t(!0), i(L, null, R(e.urls, (d, c) => (t(), y(r(pn), {
             key: c,
             title: d.title,
             url: d.url
@@ -1844,19 +1844,22 @@ const Kt = {
       ])
     ], 32));
   }
-}, _a = { class: "flex items-center gap-x-4 w-full p-5 pl-0 overflow-hidden" }, en = { class: "flex flex-col flex-1 gap-y-3 overflow-hidden" }, tn = { class: "flex items-center justify-between" }, ln = { class: "flex text-sm text-oc-text-400 items-center gap-x-3 overflow-hidden" }, an = {
+}, _a = {
+  key: 0,
+  class: "flex items-center p-3 border-r bg-gray-50 cursor-pointer"
+}, en = { class: "flex items-center gap-x-4 w-full p-5 pl-0 overflow-hidden" }, tn = { class: "flex flex-col flex-1 gap-y-3 overflow-hidden" }, ln = { class: "flex items-center justify-between" }, an = { class: "flex text-sm text-oc-text-400 items-center gap-x-3 overflow-hidden" }, nn = {
   key: 0,
   class: "text-base text-oc-text font-medium truncate"
-}, nn = {
+}, on = {
   key: 1,
   class: "flex gap-3 shrink-0"
-}, on = {
+}, sn = {
   key: 0,
   class: "flex flex-col gap-3"
-}, sn = { class: "text-oc-text-400 flex gap-x-2 items-center text-sm" }, rn = {
+}, rn = { class: "text-oc-text-400 flex gap-x-2 items-center text-sm" }, dn = {
   key: 0,
   class: "flex items-center gap-4 opacity-0 group-hover:opacity-100"
-}, dn = { class: "border border-oc-accent-1-100 rounded-sm p-1 flex gap-x-1" }, cn = { class: "py-5 px-7" }, un = /* @__PURE__ */ J({
+}, cn = { class: "border border-oc-accent-1-100 rounded-sm p-1 flex gap-x-1" }, un = { class: "py-5 px-7" }, mn = /* @__PURE__ */ J({
   __name: "OcAccordion",
   props: {
     title: String,
@@ -1891,13 +1894,10 @@ const Kt = {
         class: v(["flex gap-4 items-stretch", {
           "border-b": o.value,
           "pl-5": e.isNoToggleForced
-        }])
+        }]),
+        onClick: d
       }, [
-        e.isNoToggleForced ? m("", !0) : (t(), i("div", {
-          key: 0,
-          class: "flex items-center p-3 border-r bg-gray-50 cursor-pointer",
-          onClick: d
-        }, [
+        e.isNoToggleForced ? m("", !0) : (t(), i("div", _a, [
           x(r(V), {
             name: o.value ? "chevron-up" : "chevron-down",
             width: "20",
@@ -1905,13 +1905,13 @@ const Kt = {
             class: "text-oc-text-400"
           }, null, 8, ["name"])
         ])),
-        n("div", _a, [
+        n("div", en, [
           k(c.$slots, "logo"),
-          n("div", en, [
-            n("div", tn, [
-              n("div", ln, [
-                e.title ? (t(), i("span", an, $(e.title), 1)) : m("", !0),
-                e.chips.length ? (t(), i("div", nn, [
+          n("div", tn, [
+            n("div", ln, [
+              n("div", an, [
+                e.title ? (t(), i("span", nn, $(e.title), 1)) : m("", !0),
+                e.chips.length ? (t(), i("div", on, [
                   (t(!0), i(L, null, R(e.chips, (f, h) => (t(), y(r(ae), {
                     key: h,
                     label: f.label,
@@ -1924,8 +1924,8 @@ const Kt = {
               ])
             ]),
             k(c.$slots, "default", {}, () => [
-              e.description ? (t(), i("div", on, [
-                n("div", sn, $(e.description), 1)
+              e.description ? (t(), i("div", sn, [
+                n("div", rn, $(e.description), 1)
               ])) : m("", !0)
             ])
           ]),
@@ -1933,8 +1933,8 @@ const Kt = {
             isOpen: o.value,
             toggleAccordion: d
           }, () => [
-            e.hasActions ? (t(), i("div", rn, [
-              n("div", dn, [
+            e.hasActions ? (t(), i("div", dn, [
+              n("div", cn, [
                 x(r(V), {
                   name: "pencil",
                   class: "cursor-pointer text-oc-text-400 p-2",
@@ -1958,7 +1958,7 @@ const Kt = {
           ])
         ])
       ], 2),
-      Ve(n("div", cn, [
+      Ve(n("div", un, [
         k(c.$slots, "content")
       ], 512), [
         [Ee, o.value]
@@ -2019,7 +2019,7 @@ const Kt = {
         case "page":
           return Qa;
         case "accordion":
-          return un;
+          return mn;
         default:
           return mt;
       }
@@ -2039,7 +2039,7 @@ const Kt = {
       }))
     ]), 1040, ["class"]));
   }
-}, mn = { class: "flex gap-x-3 text-sm items-center group/url" }, fn = { class: "text-oc-text-400 font-medium shrink-0" }, vn = { class: "break-all" }, gn = /* @__PURE__ */ J({
+}, fn = { class: "flex gap-x-3 text-sm items-center group/url" }, vn = { class: "text-oc-text-400 font-medium shrink-0" }, gn = { class: "break-all" }, pn = /* @__PURE__ */ J({
   __name: "OcListUrl",
   props: {
     title: String,
@@ -2050,9 +2050,9 @@ const Kt = {
     }
   },
   setup(e) {
-    return (s, a) => (t(), i("div", mn, [
-      n("span", fn, $(e.title) + ":", 1),
-      n("span", vn, $(e.url), 1),
+    return (s, a) => (t(), i("div", fn, [
+      n("span", vn, $(e.title) + ":", 1),
+      n("span", gn, $(e.url), 1),
       e.isCopy ? (t(), y(r(Me), {
         key: 0,
         value: e.url
@@ -2128,7 +2128,7 @@ const Kt = {
       ], 2)
     ], 2));
   }
-}, pn = { class: "uppercase" }, yn = { class: "flex flex-col px-3 py-2 text-[12px] text-oc-text-400 font-medium text-sm" }, xn = { class: "mb-auto" }, hn = {
+}, yn = { class: "uppercase" }, xn = { class: "flex flex-col px-3 py-2 text-[12px] text-oc-text-400 font-medium text-sm" }, hn = { class: "mb-auto" }, bn = {
   key: 1,
   class: "absolute top-2 right-2 left-2 bottom-2 bg-white flex items-center justify-center"
 }, bm = {
@@ -2158,14 +2158,14 @@ const Kt = {
         key: 0,
         class: v(["flex items-start text-oc-text-400 font-medium text-[10px]", e.titleClass])
       }, [
-        n("div", pn, $(e.title), 1),
+        n("div", yn, $(e.title), 1),
         e.titleIconTooltip ? (t(), y(r(le), {
           key: 0,
           "popper-class": "w-max bg-oc-bg",
           position: "top-start"
         }, {
           popper: S(() => [
-            n("div", yn, $(e.titleIconTooltip), 1)
+            n("div", xn, $(e.titleIconTooltip), 1)
           ]),
           default: S(() => [
             x(r(V), {
@@ -2179,11 +2179,11 @@ const Kt = {
         })) : m("", !0)
       ], 2)) : m("", !0),
       k(l.$slots, "header"),
-      n("div", xn, [
+      n("div", hn, [
         k(l.$slots, "default")
       ]),
       k(l.$slots, "footer"),
-      e.isLoading ? (t(), i("div", hn, [
+      e.isLoading ? (t(), i("div", bn, [
         x(r(V), {
           name: "loading-2",
           width: "32",
@@ -2193,10 +2193,10 @@ const Kt = {
       ])) : m("", !0)
     ], 2));
   }
-}, bn = { key: 0 }, wn = { class: "flex border-oc-gray-200 gap-x-9 justify-between p-5 items-start border-b sticky bg-oc-bg-light top-0" }, $n = { class: "flex flex-col gap-y-1 max-w-[300px]" }, kn = { class: "text-lg font-medium truncate" }, Sn = { class: "flex gap-3 items-center" }, Cn = {
+}, wn = { key: 0 }, $n = { class: "flex border-oc-gray-200 gap-x-9 justify-between p-5 items-start border-b sticky bg-oc-bg-light top-0" }, kn = { class: "flex flex-col gap-y-1 max-w-[300px]" }, Sn = { class: "text-lg font-medium truncate" }, Cn = { class: "flex gap-3 items-center" }, Bn = {
   key: 0,
   class: "text-sm text-oc-text-300 truncate"
-}, Bn = { class: "flex items-center gap-3" }, On = { class: "p-[6px] rounded cursor-pointer text-oc-gray-500 hover:bg-gray-100 hover:text-oc-text" }, Vn = { class: "p-2 border-b border-gray-200" }, In = {
+}, On = { class: "flex items-center gap-3" }, Vn = { class: "p-[6px] rounded cursor-pointer text-oc-gray-500 hover:bg-gray-100 hover:text-oc-text" }, In = { class: "p-2 border-b border-gray-200" }, Tn = {
   key: 0,
   class: "p-2"
 }, wm = {
@@ -2236,18 +2236,18 @@ const Kt = {
         "left-[-999px] w-0": !e.modelValue && e.position === "left"
       }])
     }, [
-      e.modelValue ? (t(), i("div", bn, [
-        n("div", wn, [
+      e.modelValue ? (t(), i("div", wn, [
+        n("div", $n, [
           k(l.$slots, "header", {}, () => [
-            n("div", $n, [
-              n("span", kn, [
+            n("div", kn, [
+              n("span", Sn, [
                 k(l.$slots, "title", {}, () => [
                   Z($(e.title), 1)
                 ])
               ]),
               k(l.$slots, "description", {}, () => [
-                n("div", Sn, [
-                  e.description ? (t(), i("span", Cn, $(e.description), 1)) : m("", !0),
+                n("div", Cn, [
+                  e.description ? (t(), i("span", Bn, $(e.description), 1)) : m("", !0),
                   x(r(Me), {
                     value: e.description,
                     "tooltip-options": { strategy: "fixed" }
@@ -2265,7 +2265,7 @@ const Kt = {
                 ])
               ])
             ]),
-            n("div", Bn, [
+            n("div", On, [
               e.dropdownOptions ? (t(), y(r(oe), F({
                 key: 0,
                 modelValue: a.value,
@@ -2275,13 +2275,13 @@ const Kt = {
                 class: "text-sm"
               }, e.dropdownProps), {
                 menu: S(() => [
-                  n("div", Vn, [
+                  n("div", In, [
                     (t(!0), i(L, null, R(e.dropdownOptions.top, (d, c) => (t(), y(r(ye), F({
                       key: c,
                       ref_for: !0
                     }, d), null, 16))), 128))
                   ]),
-                  e.dropdownOptions.bottom ? (t(), i("div", In, [
+                  e.dropdownOptions.bottom ? (t(), i("div", Tn, [
                     (t(!0), i(L, null, R(e.dropdownOptions.bottom, (d, c) => (t(), y(r(ye), F({
                       key: c,
                       ref_for: !0
@@ -2289,7 +2289,7 @@ const Kt = {
                   ])) : m("", !0)
                 ]),
                 default: S(() => [
-                  n("div", On, [
+                  n("div", Vn, [
                     x(r(V), {
                       name: "dots-vertical",
                       width: "20",
@@ -2317,16 +2317,16 @@ const Kt = {
       ])) : m("", !0)
     ], 2));
   }
-}, Tn = { class: "bg-oc-bg-light py-5 px-7 gap-x-7 flex items-center" }, Dn = { class: "flex-1 flex gap-x-4 items-center" }, An = {
+}, Dn = { class: "bg-oc-bg-light py-5 px-7 gap-x-7 flex items-center" }, An = { class: "flex-1 flex gap-x-4 items-center" }, Mn = {
   key: 0,
   class: "w-[24px] h-[24px] min-w-[24px] flex items-center text-white justify-center rounded-full bg-oc-primary"
-}, Mn = {
+}, jn = {
   key: 1,
   class: "w-[24px] h-[24px] min-w-[24px] flex items-center justify-center border rounded-full text-oc-warning border-oc-warning"
-}, jn = {
+}, Pn = {
   key: 2,
   class: "w-[24px] h-[24px] min-w-[24px] text-oc-text-300 text-sm font-medium flex items-center justify-center border rounded-full border-oc-gray-200"
-}, Pn = { class: "flex flex-col gap-y-1" }, Ln = { class: "font-medium" }, En = { class: "text-oc-text-300 text-sm" }, $m = /* @__PURE__ */ J({
+}, Ln = { class: "flex flex-col gap-y-1" }, En = { class: "font-medium" }, zn = { class: "text-oc-text-300 text-sm" }, $m = /* @__PURE__ */ J({
   __name: "OcOnboardingListItem",
   props: {
     title: {
@@ -2355,25 +2355,25 @@ const Kt = {
     }
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Tn, [
-      n("div", Dn, [
-        e.status === "completed" ? (t(), i("div", An, [
+    return (s, a) => (t(), i("div", Dn, [
+      n("div", An, [
+        e.status === "completed" ? (t(), i("div", Mn, [
           x(r(V), {
             name: "check-2",
             width: "12",
             height: "12"
           })
-        ])) : e.status === "pending" ? (t(), i("div", Mn, [
+        ])) : e.status === "pending" ? (t(), i("div", jn, [
           x(r(V), {
             name: "time-filled",
             width: "18",
             height: "18"
           })
-        ])) : e.number ? (t(), i("div", jn, $(e.number), 1)) : m("", !0),
-        n("div", Pn, [
+        ])) : e.number ? (t(), i("div", Pn, $(e.number), 1)) : m("", !0),
+        n("div", Ln, [
           k(s.$slots, "default", {}, () => [
-            n("span", Ln, $(e.title), 1),
-            n("span", En, $(e.description), 1)
+            n("span", En, $(e.title), 1),
+            n("span", zn, $(e.description), 1)
           ])
         ])
       ]),
@@ -2467,7 +2467,7 @@ const Kt = {
       ])
     ], 2));
   }
-}, zn = /* @__PURE__ */ J({
+}, Nn = /* @__PURE__ */ J({
   __name: "OnboardingStatusIcon",
   props: {
     variant: {
@@ -2506,7 +2506,7 @@ const Kt = {
       }, null, 8, ["width", "height", "name"]))
     ], 2));
   }
-}), Nn = { class: "flex items-center flex-1 gap-x-4" }, Rn = { class: "flex flex-col gap-y-1" }, Fn = { class: "font-medium" }, Un = { class: "text-oc-text-400 text-sm" }, Sm = /* @__PURE__ */ J({
+}), Rn = { class: "flex items-center flex-1 gap-x-4" }, Fn = { class: "flex flex-col gap-y-1" }, Un = { class: "font-medium" }, qn = { class: "text-oc-text-400 text-sm" }, Sm = /* @__PURE__ */ J({
   __name: "OnboardingAccordion",
   props: {
     description: {
@@ -2542,11 +2542,11 @@ const Kt = {
         class: "px-7 items-center py-5 flex gap-x-7",
         onClick: o
       }, [
-        n("div", Nn, [
-          x(zn, { variant: e.variant }, null, 8, ["variant"]),
-          n("div", Rn, [
-            n("span", Fn, $(e.title), 1),
-            n("span", Un, $(e.description), 1)
+        n("div", Rn, [
+          x(Nn, { variant: e.variant }, null, 8, ["variant"]),
+          n("div", Fn, [
+            n("span", Un, $(e.title), 1),
+            n("span", qn, $(e.description), 1)
           ])
         ]),
         k(d.$slots, "button-group"),
@@ -2564,7 +2564,7 @@ const Kt = {
       ], 512)
     ], 2));
   }
-}), qn = ["onClick"], Hn = {
+}), Hn = ["onClick"], Yn = {
   key: 0,
   class: "bg-oc-error rounded-full h-6 w-6 flex items-center justify-center text-xs font-bold text-white px-4"
 }, ft = 100, vt = 35, Cm = {
@@ -2671,9 +2671,9 @@ const Kt = {
               n("div", {
                 class: v({ truncate: e.isArrows })
               }, $(w.label), 3),
-              w.count ? (t(), i("div", Hn, $(w.count > e.maxCount ? `${e.maxCount}+` : w.count), 1)) : m("", !0)
+              w.count ? (t(), i("div", Yn, $(w.count > e.maxCount ? `${e.maxCount}+` : w.count), 1)) : m("", !0)
             ])
-          ], 10, qn);
+          ], 10, Hn);
         }), 128))
       ], 2),
       o.value + l.value < e.tabs.length && e.isArrows ? (t(), i("div", {
@@ -2693,7 +2693,7 @@ const Kt = {
       ], 2)) : m("", !0)
     ], 2));
   }
-}, Yn = ["src"], Wn = { class: "shrink-0" }, Bm = {
+}, Wn = ["src"], Kn = { class: "shrink-0" }, Bm = {
   __name: "OcPaymentTab",
   props: {
     tab: {
@@ -2716,12 +2716,12 @@ const Kt = {
           key: 0,
           src: e.tab.logo,
           alt: "logo"
-        }, null, 8, Yn)) : m("", !0)
+        }, null, 8, Wn)) : m("", !0)
       ]),
-      n("div", Wn, $(e.tab.label), 1)
+      n("div", Kn, $(e.tab.label), 1)
     ], 2));
   }
-}, Kn = { key: 1 }, Gn = /* @__PURE__ */ J({
+}, Gn = { key: 1 }, Xn = /* @__PURE__ */ J({
   __name: "OcStep",
   props: {
     title: {
@@ -2756,14 +2756,14 @@ const Kt = {
           name: "check-2",
           width: "12",
           height: "12"
-        })) : (t(), i("span", Kn, $(e.value), 1))
+        })) : (t(), i("span", Gn, $(e.value), 1))
       ], 2),
       n("span", {
         class: v(e.isCurrent ? "font-medium" : "")
       }, $(e.title), 3)
     ], 2));
   }
-}), Xn = { class: "flex gap-x-7" }, Om = /* @__PURE__ */ J({
+}), Zn = { class: "flex gap-x-7" }, Om = /* @__PURE__ */ J({
   __name: "OcSteps",
   props: {
     steps: {
@@ -2777,9 +2777,9 @@ const Kt = {
   },
   emits: ["update:model-value"],
   setup(e) {
-    return (s, a) => (t(), i("div", Xn, [
+    return (s, a) => (t(), i("div", Zn, [
       k(s.$slots, "default", {}, () => [
-        (t(!0), i(L, null, R(e.steps, (l, o) => (t(), y(Gn, {
+        (t(!0), i(L, null, R(e.steps, (l, o) => (t(), y(Xn, {
           key: o,
           title: l.title,
           value: o + 1,
@@ -2791,7 +2791,7 @@ const Kt = {
       ])
     ]));
   }
-}), Zn = { class: "flex gap-3 items-start md:flex-row flex-col" }, Vm = /* @__PURE__ */ J({
+}), Jn = { class: "flex gap-3 items-start md:flex-row flex-col" }, Vm = /* @__PURE__ */ J({
   __name: "OcVariants",
   props: {
     variants: {
@@ -2805,8 +2805,8 @@ const Kt = {
   },
   emits: ["update:modelValue"],
   setup(e) {
-    return (s, a) => (t(), i("div", Zn, [
-      (t(!0), i(L, null, R(e.variants, (l) => (t(), y(r(Qn), F({
+    return (s, a) => (t(), i("div", Jn, [
+      (t(!0), i(L, null, R(e.variants, (l) => (t(), y(r(_n), F({
         key: l.value,
         "is-active": l.value === e.modelValue,
         ref_for: !0
@@ -2822,7 +2822,7 @@ const Kt = {
       ]), 1040, ["is-active", "onClick"]))), 128))
     ]));
   }
-}), Jn = { class: "flex items-center gap-x-3" }, Qn = /* @__PURE__ */ J({
+}), Qn = { class: "flex items-center gap-x-3" }, _n = /* @__PURE__ */ J({
   __name: "OcVariant",
   props: {
     icon: {
@@ -2857,7 +2857,7 @@ const Kt = {
         e.isDisabled ? "bg-oc-gray-50 border-oc-gray-200" : e.isActive ? "border-oc-primary bg-oc-bg-light cursor-pointer" : "border-oc-gray-200 bg-oc-bg-light cursor-pointer"
       ])
     }, [
-      n("div", Jn, [
+      n("div", Qn, [
         e.icon ? (t(), y(r(V), F({
           key: 0,
           width: "18",
@@ -2873,25 +2873,25 @@ const Kt = {
       k(s.$slots, `${e.value}-description`)
     ], 2));
   }
-}), _n = {}, eo = { class: "bg-oc-bg px-3 md:px-[40px] border-b border-oc-gray-200 h-[68px] w-full flex items-center" };
-function to(e, s) {
-  return t(), i("div", eo, [
+}), eo = {}, to = { class: "bg-oc-bg px-3 md:px-[40px] border-b border-oc-gray-200 h-[68px] w-full flex items-center" };
+function lo(e, s) {
+  return t(), i("div", to, [
     k(e.$slots, "default")
   ]);
 }
-const Im = /* @__PURE__ */ he(_n, [["render", to]]), lo = {}, ao = { class: "px-3 md:px-[40px] border-b border-oc-gray-200 h-[68px] w-full flex items-center relative bg-oc-accent-1-600" };
-function no(e, s) {
-  return t(), i("div", ao, [
+const Im = /* @__PURE__ */ he(eo, [["render", lo]]), ao = {}, no = { class: "px-3 md:px-[40px] border-b border-oc-gray-200 h-[68px] w-full flex items-center relative bg-oc-accent-1-600" };
+function oo(e, s) {
+  return t(), i("div", no, [
     k(e.$slots, "default")
   ]);
 }
-const Tm = /* @__PURE__ */ he(lo, [["render", no]]), oo = {}, io = { class: "flex items-center gap-x-3" };
-function so(e, s) {
-  return t(), i("div", io, [
+const Tm = /* @__PURE__ */ he(ao, [["render", oo]]), io = {}, so = { class: "flex items-center gap-x-3" };
+function ro(e, s) {
+  return t(), i("div", so, [
     k(e.$slots, "default")
   ]);
 }
-const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-center" }, co = {
+const Dm = /* @__PURE__ */ he(io, [["render", ro]]), co = { class: "flex items-center" }, uo = {
   key: 1,
   class: "text-oc-text-300 text-sm md:text-base"
 }, Am = {
@@ -2901,7 +2901,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   emits: ["back"],
   setup(e) {
-    return (s, a) => (t(), i("div", ro, [
+    return (s, a) => (t(), i("div", co, [
       k(s.$slots, "default", {}, () => [
         k(s.$slots, "before"),
         e.isSaved ? (t(), i("span", {
@@ -2914,12 +2914,12 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
             class: "rotate-90"
           }),
           a[1] || (a[1] = Z(" Back "))
-        ])) : (t(), i("span", co, " Unsaved changes ")),
+        ])) : (t(), i("span", uo, " Unsaved changes ")),
         k(s.$slots, "after")
       ])
     ]));
   }
-}, uo = { class: "flex items-center gap-x-7 ml-auto" }, mo = { class: "flex gap-x-3" }, Mm = {
+}, mo = { class: "flex items-center gap-x-7 ml-auto" }, fo = { class: "flex gap-x-3" }, Mm = {
   __name: "OcHeaderRight",
   props: {
     primaryProps: {
@@ -2935,10 +2935,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   emits: ["save", "cancel", "addition-click", "dropdown-action"],
   setup(e, { emit: s }) {
-    return (a, l) => (t(), i("div", uo, [
+    return (a, l) => (t(), i("div", mo, [
       k(a.$slots, "default", {}, () => [
         k(a.$slots, "before"),
-        n("div", mo, [
+        n("div", fo, [
           e.isSecondaryButtonVisible ? (t(), y(r(K), F({
             key: 0,
             class: "min-w-[100px]",
@@ -2960,7 +2960,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ])
     ]));
   }
-}, fo = { class: "gap-x-7 hidden md:flex relative" }, vo = ["onClick"], go = { class: "p-3 font-medium text-oc-accent-1-500 flex items-center gap-2" }, po = { class: "p-4 min-w-[220px] flex flex-col gap-y-3 border-b border-gray-200" }, jm = {
+}, vo = { class: "gap-x-7 hidden md:flex relative" }, go = ["onClick"], po = { class: "p-3 font-medium text-oc-accent-1-500 flex items-center gap-2" }, yo = { class: "p-4 min-w-[220px] flex flex-col gap-y-3 border-b border-gray-200" }, jm = {
   __name: "OcTabToSelect",
   props: {
     menus: Array,
@@ -2980,7 +2980,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       () => s.modelValue,
       () => c()
     ), Ce(() => c()), (u, f) => (t(), i(L, null, [
-      n("div", fo, [
+      n("div", vo, [
         (t(!0), i(L, null, R(e.menus, (h) => (t(), i("div", {
           key: h.value,
           ref_for: !0,
@@ -2990,7 +2990,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           onClick: (p) => {
             c(p), u.$emit("changePath", h.path), u.$emit("update:modelValue", h.value);
           }
-        }, $(h.label), 11, vo))), 128)),
+        }, $(h.label), 11, go))), 128)),
         n("div", {
           ref_key: "currentRef",
           ref: o,
@@ -3003,7 +3003,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         class: "flex md:hidden"
       }, {
         menu: S(() => [
-          n("div", po, [
+          n("div", yo, [
             (t(!0), i(L, null, R(e.menus, (h) => (t(), y(r(ye), {
               key: h.value,
               class: v(["px-5 py-3", [
@@ -3020,7 +3020,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           ])
         ]),
         default: S(() => [
-          n("div", go, [
+          n("div", po, [
             Z($(l.value.label) + " ", 1),
             x(r(V), {
               name: "chevron-down",
@@ -3033,10 +3033,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       }, 8, ["modelValue"])
     ], 64));
   }
-}, yo = { class: "flex text-oc-text justify-center flex-col gap-y-3 max-w-full" }, xo = { class: "md:text-xl font-medium flex items-center gap-x-3" }, ho = { class: "whitespace-nowrap text-ellipsis overflow-hidden md:text-base lg:text-xl" }, bo = {
+}, xo = { class: "flex text-oc-text justify-center flex-col gap-y-3 max-w-full" }, ho = { class: "md:text-xl font-medium flex items-center gap-x-3" }, bo = { class: "whitespace-nowrap text-ellipsis overflow-hidden md:text-base lg:text-xl" }, wo = {
   key: 0,
   class: "text-oc-text-400 text-sm group flex items-center gap-x-4"
-}, wo = { class: "overflow-hidden whitespace-nowrap text-ellipsis" }, Bt = {
+}, $o = { class: "overflow-hidden whitespace-nowrap text-ellipsis" }, Bt = {
   __name: "OcTitle",
   props: {
     title: { type: String, required: !0 },
@@ -3047,16 +3047,16 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     isCopy: Boolean
   },
   setup(e) {
-    return (s, a) => (t(), i("div", yo, [
-      n("div", xo, [
+    return (s, a) => (t(), i("div", xo, [
+      n("div", ho, [
         k(s.$slots, "title", {}, () => [
-          n("span", ho, $(e.title), 1)
+          n("span", bo, $(e.title), 1)
         ]),
         e.chipProps ? (t(), y(r(ae), fe(F({ key: 0 }, e.chipProps)), null, 16)) : m("", !0)
       ]),
-      e.description || s.$slots.description ? (t(), i("div", bo, [
+      e.description || s.$slots.description ? (t(), i("div", wo, [
         k(s.$slots, "description", {}, () => [
-          n("span", wo, $(e.description), 1)
+          n("span", $o, $(e.description), 1)
         ]),
         e.isCopy ? (t(), y(r(Me), {
           key: 0,
@@ -3076,10 +3076,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ])) : m("", !0)
     ]));
   }
-}, $o = { class: "flex flex-col gap-y-3" }, ko = { class: "flex items-center justify-between gap-x-3" }, So = { class: "text-xl leading-[24px] font-medium" }, Co = {
+}, ko = { class: "flex flex-col gap-y-3" }, So = { class: "flex items-center justify-between gap-x-3" }, Co = { class: "text-xl leading-[24px] font-medium" }, Bo = {
   key: 0,
   class: "flex gap-x-6 text-sm text-oc-text-400 py-4 whitespace-nowrap items-center"
-}, Bo = { class: "overflow-hidden text-ellipsis" }, Oo = /* @__PURE__ */ J({
+}, Oo = { class: "overflow-hidden text-ellipsis" }, Vo = /* @__PURE__ */ J({
   __name: "OcMobilePageTitle",
   props: {
     title: { type: String },
@@ -3090,9 +3090,9 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   setup(e) {
     const s = M(!1);
-    return (a, l) => (t(), i("div", $o, [
-      n("div", ko, [
-        n("span", So, $(e.title), 1),
+    return (a, l) => (t(), i("div", ko, [
+      n("div", So, [
+        n("span", Co, $(e.title), 1),
         e.primaryButtonProps || e.secondaryButtonProps ? (t(), y(r(K), F({
           key: 0,
           size: "small"
@@ -3132,8 +3132,8 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           _: 1
         }, 16)) : m("", !0)
       ]),
-      e.description ? (t(), i("div", Co, [
-        n("span", Bo, $(e.description), 1),
+      e.description ? (t(), i("div", Bo, [
+        n("span", Oo, $(e.description), 1),
         x(r(Me), {
           class: "shrink-0",
           value: e.description
@@ -3153,7 +3153,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       e.chipProps ? (t(), y(r(ae), F({ key: 1 }, e.chipProps, { class: "self-start" }), null, 16)) : m("", !0)
     ]));
   }
-}), Vo = { class: "md:pb-5 pb-4 flex flex-col" }, Io = { class: "flex flex-col gap-y-3 pt-4 md:pt-5 px-5 md:px-10" }, Pm = {
+}), Io = { class: "md:pb-5 pb-4 flex flex-col" }, To = { class: "flex flex-col gap-y-3 pt-4 md:pt-5 px-5 md:px-10" }, Pm = {
   __name: "OcPageTitle",
   props: {
     title: { type: String, required: !0 },
@@ -3173,8 +3173,8 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     back: []
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Vo, [
-      n("div", Io, [
+    return (s, a) => (t(), i("div", Io, [
+      n("div", To, [
         e.isBack ? (t(), y(r(K), {
           key: 0,
           size: "small",
@@ -3214,14 +3214,14 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
             } : void 0
           ]), 1032, ["title", "description", "chip-props", "copy-value", "tooltip-options", "is-copy"]),
           k(s.$slots, "right", {}, () => [
-            x(r(qo), {
+            x(r(Ho), {
               class: "shrink-0",
               "primary-button-props": e.primaryButtonProps,
               "secondary-button-props": e.secondaryButtonProps
             }, null, 8, ["primary-button-props", "secondary-button-props"])
           ])
         ], 2),
-        e.isMobileCombineButtons ? (t(), y(Oo, {
+        e.isMobileCombineButtons ? (t(), y(Vo, {
           key: 1,
           "secondary-button-props": e.secondaryButtonProps,
           "primary-button-props": e.primaryButtonProps,
@@ -3238,13 +3238,13 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ])
     ]));
   }
-}, To = ["href"], Do = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, Ao = {
+}, Do = ["href"], Ao = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, Mo = {
   key: 0,
   class: "border-l group-hover:border-oc-accent-1-100 border-transparent"
-}, Mo = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, jo = { class: "flex flex-col" }, Po = { class: "p-2 border-b border-gray-200" }, Lo = {
+}, jo = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, Po = { class: "flex flex-col" }, Lo = { class: "p-2 border-b border-gray-200" }, Eo = {
   key: 0,
   class: "p-2"
-}, Eo = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, zo = {
+}, zo = { class: "py-2 px-3 whitespace-nowrap text-sm font-medium text-oc-text-400" }, No = {
   __name: "OcPrimaryActions",
   props: {
     primaryActions: Object
@@ -3285,7 +3285,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           popper: S(() => {
             var C, A;
             return [
-              n("div", Do, $((A = (C = e.primaryActions) == null ? void 0 : C.mainLinkAction) == null ? void 0 : A.tooltipContent), 1)
+              n("div", Ao, $((A = (C = e.primaryActions) == null ? void 0 : C.mainLinkAction) == null ? void 0 : A.tooltipContent), 1)
             ];
           }),
           default: S(() => {
@@ -3299,7 +3299,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
                   class: "p-2 cursor-pointer rounded-sm hover:border-oc-accent-1-50-tr active:text-oc-text-400 hover:text-oc-text hover:bg-oc-accent-1-50-tr",
                   name: "external-link"
                 })
-              ], 8, To)
+              ], 8, Do)
             ];
           }),
           _: 1
@@ -3307,14 +3307,14 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         (t(!0), i(L, null, R(e.primaryActions.actions, (C, A) => {
           var w;
           return t(), i(L, { key: A }, [
-            (w = e.primaryActions) != null && w.mainLinkAction || A > 0 ? (t(), i("div", Ao)) : m("", !0),
+            (w = e.primaryActions) != null && w.mainLinkAction || A > 0 ? (t(), i("div", Mo)) : m("", !0),
             x(r(le), {
               position: "top",
               "arrow-hidden": "",
               distance: 7
             }, {
               popper: S(() => [
-                n("div", Mo, $(C != null && C.isCopyButton ? o.value ? h.value : f.value : C.tooltipContent), 1)
+                n("div", jo, $(C != null && C.isCopyButton ? o.value ? h.value : f.value : C.tooltipContent), 1)
               ]),
               default: S(() => [
                 C != null && C.isCopyButton ? (t(), y(r(V), {
@@ -3346,8 +3346,8 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           menu: S(() => {
             var C, A, w;
             return [
-              n("div", jo, [
-                n("div", Po, [
+              n("div", Po, [
+                n("div", Lo, [
                   (t(!0), i(L, null, R((C = e.primaryActions.dropdownOptions) == null ? void 0 : C.top, (O, g) => (t(), i(L, { key: g }, [
                     O != null && O.isCopyButton ? (t(), y(r(ye), {
                       key: 0,
@@ -3363,7 +3363,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
                     }), null, 16))
                   ], 64))), 128))
                 ]),
-                (A = e.primaryActions.dropdownOptions) != null && A.bottom ? (t(), i("div", Lo, [
+                (A = e.primaryActions.dropdownOptions) != null && A.bottom ? (t(), i("div", Eo, [
                   (t(!0), i(L, null, R((w = e.primaryActions.dropdownOptions) == null ? void 0 : w.bottom, (O, g) => (t(), i("div", { key: g }, [
                     O != null && O.tooltipText ? (t(), y(r(le), {
                       key: 0,
@@ -3372,7 +3372,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
                       class: "!w-full"
                     }, {
                       popper: S(() => [
-                        n("div", Eo, $(O == null ? void 0 : O.tooltipText), 1)
+                        n("div", zo, $(O == null ? void 0 : O.tooltipText), 1)
                       ]),
                       default: S(() => [
                         x(r(ye), F({ ref_for: !0 }, O, {
@@ -3414,10 +3414,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ], 2);
     };
   }
-}, No = { class: "flex gap-x-3 items-center" }, Ro = {
+}, Ro = { class: "flex gap-x-3 items-center" }, Fo = {
   key: 0,
   class: "p-2"
-}, Fo = { class: "px-3 py-[5px] whitespace-nowrap font-medium text-sm text-oc-text-400 flex gap-x-3 items-center" }, Uo = {
+}, Uo = { class: "px-3 py-[5px] whitespace-nowrap font-medium text-sm text-oc-text-400 flex gap-x-3 items-center" }, qo = {
   __name: "OcPageTitleRight",
   props: {
     primaryButtonProps: Object,
@@ -3426,7 +3426,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   setup(e) {
     var o;
     const a = M(((o = e.secondaryButtonProps) == null ? void 0 : o.isDropdownOpened) ?? !1), { isMobile: l } = Ut();
-    return (d, c) => (t(), i("div", No, [
+    return (d, c) => (t(), i("div", Ro, [
       e.secondaryButtonProps ? (t(), y(r(oe), {
         key: 0,
         modelValue: a.value,
@@ -3436,7 +3436,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         menu: S(() => {
           var u;
           return [
-            (u = e.secondaryButtonProps) != null && u.dropdownOptions ? (t(), i("div", Ro, [
+            (u = e.secondaryButtonProps) != null && u.dropdownOptions ? (t(), i("div", Fo, [
               (t(!0), i(L, null, R(e.secondaryButtonProps.dropdownOptions, (f, h) => (t(), y(r(ye), F({
                 key: h,
                 ref_for: !0
@@ -3458,7 +3458,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         "arrow-hidden": ""
       }, {
         popper: S(() => [
-          n("div", Fo, $(e.primaryButtonProps.tooltip), 1)
+          n("div", Uo, $(e.primaryButtonProps.tooltip), 1)
         ]),
         default: S(() => [
           x(r(K), F({
@@ -3472,7 +3472,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       }, e.primaryButtonProps), null, 16, ["size"])) : m("", !0)
     ]));
   }
-}, qo = /* @__PURE__ */ he(Uo, [["__scopeId", "data-v-a7abfe33"]]), Ho = { class: "flex flex-col flex-1 py-4 gap-4 px-6" }, Yo = {
+}, Ho = /* @__PURE__ */ he(qo, [["__scopeId", "data-v-a7abfe33"]]), Yo = { class: "flex flex-col flex-1 py-4 gap-4 px-6" }, Wo = {
   key: 0,
   class: "border-t border-oc-gray-200 last:hidden first:hidden"
 }, Lm = {
@@ -3521,17 +3521,17 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     }), (f, h) => (t(), i("div", {
       class: v(["cursor-pointer flex flex-col transition-all duration-300 ease-in-out relative bg-[var(--oc-sidebar-background)]", [u.value, { "overflow-auto": e.isExpanded }]])
     }, [
-      n("div", Ho, [
+      n("div", Yo, [
         k(f.$slots, "before", { isExpanded: e.isExpanded }),
         (t(!0), i(L, null, R(e.sidebarMenu, (p, b) => (t(), i(L, { key: b }, [
-          e.isExpanded ? m("", !0) : (t(), i("div", Yo)),
-          p.label || p.items.length > 0 ? (t(), y(r(mi), {
+          e.isExpanded ? m("", !0) : (t(), i("div", Wo)),
+          p.label || p.items.length > 0 ? (t(), y(r(fi), {
             key: 1,
             label: p.label,
             "is-sidebar-expanded": e.isExpanded
           }, {
             default: S(() => [
-              (t(!0), i(L, null, R(p.items, (T, j) => (t(), y(r(xi), {
+              (t(!0), i(L, null, R(p.items, (T, j) => (t(), y(r(hi), {
                 key: j,
                 icon: T.icon,
                 label: T.label,
@@ -3542,7 +3542,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
                 onCloseMenu: (C) => d(T.name)
               }, {
                 default: S(() => [
-                  (t(!0), i(L, null, R(T.children, (C, A) => (t(), y(r(wi), {
+                  (t(!0), i(L, null, R(T.children, (C, A) => (t(), y(r($i), {
                     key: A,
                     icon: C.icon,
                     label: C.label,
@@ -3559,7 +3559,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         ], 64))), 128)),
         k(f.$slots, "after", { isExpanded: e.isExpanded })
       ]),
-      x(r(Ci), {
+      x(r(Bi), {
         "is-expanded": e.isExpanded,
         "display-name": e.displayName,
         onUserClick: h[0] || (h[0] = (p) => f.$emit("user-click")),
@@ -3617,7 +3617,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ], 2))), 128))
     ], 2));
   }
-}, Wo = { class: "flex gap-3 items-center" }, Ko = { class: "px-3 py-2 text-oc-text-400 text-sm font-medium" }, ae = {
+}, Ko = { class: "flex gap-3 items-center" }, Go = { class: "px-3 py-2 text-oc-text-400 text-sm font-medium" }, ae = {
   __name: "OcChip",
   props: {
     variant: {
@@ -3705,14 +3705,14 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       class: v(["rounded-full flex items-center gap-x-3 py-1 px-3 text-sm leading-[20px]", a.value])
     }, [
       k(o.$slots, "default", {}, () => [
-        n("div", Wo, [
+        n("div", Ko, [
           e.iconTooltip && e.icon ? (t(), y(r(le), {
             key: 0,
             position: "top",
             distance: 10
           }, {
             popper: S(() => [
-              n("div", Ko, $(e.iconTooltip), 1)
+              n("div", Go, $(e.iconTooltip), 1)
             ]),
             default: S(() => [
               x(r(V), F({
@@ -3745,25 +3745,25 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       }, null, 8, ["class"])) : m("", !0)
     ], 2));
   }
-}, Go = {
+}, Xo = {
   key: 0,
   class: "p-3 bg-white rounded-[6px] w-full flex flex-col gap-y-5"
-}, Xo = { class: "p-2 flex gap-3" }, Zo = { class: "p-3 rounded-full border border-oc-warning-500" }, Jo = { class: "mx-[-8px] mb-[-8px] rounded-b-[6px] border-t border-gray-200 bg-oc-gray-50" }, Qo = { class: "py-4 px-5 text-oc-text-400 font-medium" }, _o = {
+}, Zo = { class: "p-2 flex gap-3" }, Jo = { class: "p-3 rounded-full border border-oc-warning-500" }, Qo = { class: "mx-[-8px] mb-[-8px] rounded-b-[6px] border-t border-gray-200 bg-oc-gray-50" }, _o = { class: "py-4 px-5 text-oc-text-400 font-medium" }, ei = {
   key: 0,
   class: "flex items-center"
-}, ei = {
+}, ti = {
   key: 1,
   class: "flex items-center mt-3"
-}, ti = { class: "flex flex-col gap-y-3" }, li = { class: "flex items-center text-[var(--oc-sidebar-menu-active-text)] justify-between" }, ai = { class: "font-bold" }, ni = { class: "h-[12px] w-full rounded-full bg-oc-gray-100 shadow" }, oi = {
+}, li = { class: "flex flex-col gap-y-3" }, ai = { class: "flex items-center text-[var(--oc-sidebar-menu-active-text)] justify-between" }, ni = { class: "font-bold" }, oi = { class: "h-[12px] w-full rounded-full bg-oc-gray-100 shadow" }, ii = {
   key: 1,
   class: "bg-white rounded-full p-1"
-}, ii = {
+}, si = {
   key: 0,
   class: "p-3 rounded-full"
-}, si = {
+}, ri = {
   key: 1,
   class: "pie-wrapper progress style-2"
-}, ri = { class: "label" }, di = {
+}, di = { class: "label" }, ci = {
   __name: "OcAccountSetup",
   props: {
     isExpanded: Boolean,
@@ -3782,10 +3782,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         e.isPending ? "bg-oc-warning-500" : "account-setup-bg"
       ]])
     }, [
-      e.isExpanded ? (t(), i("div", Go, [
+      e.isExpanded ? (t(), i("div", Xo, [
         e.isPending ? (t(), i(L, { key: 0 }, [
-          n("div", Xo, [
-            n("div", Zo, [
+          n("div", Zo, [
+            n("div", Jo, [
               x(V, {
                 name: "alert",
                 width: "20",
@@ -3795,25 +3795,25 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
             ]),
             a[0] || (a[0] = n("div", { class: "text-oc-text-500 text-sm" }, "We’re currently reviewing your account.", -1))
           ]),
-          n("div", Jo, [
-            n("div", Qo, [
-              e.paymentStatus ? (t(), i("div", _o, [
+          n("div", Qo, [
+            n("div", _o, [
+              e.paymentStatus ? (t(), i("div", ei, [
                 a[1] || (a[1] = n("span", { class: "flex-1" }, "Payment", -1)),
                 x(ae, fe(Ie(e.paymentStatus)), null, 16)
               ])) : m("", !0),
-              e.paymentStatus ? (t(), i("div", ei, [
+              e.paymentStatus ? (t(), i("div", ti, [
                 a[2] || (a[2] = n("span", { class: "flex-1" }, "Payout", -1)),
                 x(ae, fe(Ie(e.payoutStatus)), null, 16)
               ])) : m("", !0)
             ])
           ])
         ], 64)) : (t(), i(L, { key: 1 }, [
-          n("div", ti, [
-            n("div", li, [
+          n("div", li, [
+            n("div", ai, [
               a[3] || (a[3] = n("span", { class: "font-medium" }, "Account setup", -1)),
-              n("span", ai, $(e.progress) + "%", 1)
+              n("span", ni, $(e.progress) + "%", 1)
             ]),
-            n("div", ni, [
+            n("div", oi, [
               n("div", {
                 class: "h-[12px] rounded-full bg-[var(--oc-sidebar-menu-active-icon-active)]",
                 style: de({ width: `${e.progress}%` })
@@ -3822,16 +3822,16 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
           ]),
           a[4] || (a[4] = n("div", { class: "text-sm font-bold text-[var(--oc-sidebar-menu-active-text)] text-center" }, " COMPLETE NOW -> ", -1))
         ], 64))
-      ])) : (t(), i("div", oi, [
-        e.isPending ? (t(), i("div", ii, [
+      ])) : (t(), i("div", ii, [
+        e.isPending ? (t(), i("div", si, [
           x(V, {
             name: "alert",
             width: "20",
             height: "20",
             class: "text-oc-warning-500"
           })
-        ])) : (t(), i("div", si, [
-          n("span", ri, $(e.progress), 1),
+        ])) : (t(), i("div", ri, [
+          n("span", di, $(e.progress), 1),
           n("div", {
             class: "pie",
             style: de({
@@ -3850,10 +3850,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ]))
     ], 2));
   }
-}, zm = /* @__PURE__ */ he(di, [["__scopeId", "data-v-fb4f007e"]]), ci = { class: "pb-2" }, ui = {
+}, zm = /* @__PURE__ */ he(ci, [["__scopeId", "data-v-fb4f007e"]]), ui = { class: "pb-2" }, mi = {
   key: 0,
   class: "pl-3 uppercase text-oc-accent-1-200 relative text-medium text-sm"
-}, mi = {
+}, fi = {
   __name: "OcSidebarHead",
   props: {
     label: String,
@@ -3861,8 +3861,8 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   setup(e) {
     return (s, a) => (t(), i("div", null, [
-      n("div", ci, [
-        e.isSidebarExpanded && e.label ? (t(), i("div", ui, [
+      n("div", ui, [
+        e.isSidebarExpanded && e.label ? (t(), i("div", mi, [
           n("span", null, $(e.label), 1)
         ])) : m("", !0)
       ]),
@@ -3879,10 +3879,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ], 2)
     ]));
   }
-}, fi = { class: "relative" }, vi = {
+}, vi = { class: "relative" }, gi = {
   key: 0,
   class: "leading-[21px]"
-}, gi = { class: "py-2 whitespace-nowrap px-3 text-sm text-oc-text-400 font-medium" }, pi = { class: "ml-1" }, yi = { class: "flex flex-col gap-y-1 min-h-0" }, xi = {
+}, pi = { class: "py-2 whitespace-nowrap px-3 text-sm text-oc-text-400 font-medium" }, yi = { class: "ml-1" }, xi = { class: "flex flex-col gap-y-1 min-h-0" }, hi = {
   __name: "OcSidebarMenu",
   props: {
     icon: String,
@@ -3901,9 +3901,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         placement: "right-start",
         strategy: "fixed"
       });
-    }), (u, f) => Ve((t(), i("div", fi, [
+    }), (u, f) => Ve((t(), i("div", vi, [
       x(r(le), {
         position: "right",
+        "arrow-hidden": e.isExpanded,
         distance: 10,
         "popper-options": { strategy: "fixed" },
         class: "w-full"
@@ -3927,7 +3928,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
                 "mx-auto": !e.isExpanded
               })
             }, null, 8, ["name", "class"]),
-            e.isExpanded ? (t(), i("span", vi, $(e.label), 1)) : m("", !0)
+            e.isExpanded ? (t(), i("span", gi, $(e.label), 1)) : m("", !0)
           ], 2)
         ]),
         _: 2
@@ -3935,13 +3936,13 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         e.isExpanded ? void 0 : {
           name: "popper",
           fn: S(() => [
-            n("div", gi, [
-              n("span", pi, $(e.label), 1)
+            n("div", pi, [
+              n("span", yi, $(e.label), 1)
             ])
           ]),
           key: "0"
         }
-      ]), 1024),
+      ]), 1032, ["arrow-hidden"]),
       e.isExpanded ? (t(), i("div", {
         key: 0,
         class: v(["grid transition-all duration-300 ease-in-out overflow-hidden", {
@@ -3951,7 +3952,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         onClick: f[0] || (f[0] = ce(() => {
         }, ["stop"]))
       }, [
-        n("div", yi, [
+        n("div", xi, [
           k(u.$slots, "default")
         ])
       ], 2)) : m("", !0),
@@ -3969,10 +3970,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       [r(nt), c]
     ]);
   }
-}, hi = { class: "flex-1 whitespace-nowrap" }, bi = {
+}, bi = { class: "flex-1 whitespace-nowrap" }, wi = {
   key: 0,
   class: "bg-oc-warning text-white shrink-0 py-1 px-3 rounded-sm uppercase text-xs font-medium"
-}, wi = {
+}, $i = {
   __name: "OcSidebarSubMenuItem",
   props: {
     label: String,
@@ -3988,11 +3989,11 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         "rounded-sm p-3 h-[34px] text-sm": !e.isExpanded
       }])
     }, [
-      n("div", hi, $(e.label), 1),
-      e.isBeta ? (t(), i("div", bi, " BETA ")) : m("", !0)
+      n("div", bi, $(e.label), 1),
+      e.isBeta ? (t(), i("div", wi, " BETA ")) : m("", !0)
     ], 2));
   }
-}, $i = { class: "py-4 sticky z-[1005] bottom-0 left-0 px-6 bg-oc-gray-50 border-t border-oc-gray-200" }, ki = { class: "flex flex-col gap-y-3" }, Si = { key: 0 }, Ci = {
+}, ki = { class: "py-4 sticky z-[1005] bottom-0 left-0 px-6 bg-oc-gray-50 border-t border-oc-gray-200" }, Si = { class: "flex flex-col gap-y-3" }, Ci = { key: 0 }, Bi = {
   __name: "OcSidebarFooter",
   props: {
     displayName: String,
@@ -4000,8 +4001,8 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   emits: ["user-click", "support-click"],
   setup(e) {
-    return (s, a) => (t(), i("div", $i, [
-      n("div", ki, [
+    return (s, a) => (t(), i("div", ki, [
+      n("div", Si, [
         e.isExpanded ? k(s.$slots, "default", { key: 0 }) : m("", !0),
         n("div", {
           class: v(["flex items-center gap-x-3", {
@@ -4017,14 +4018,14 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
               width: "18",
               height: "18"
             }),
-            e.isExpanded ? (t(), i("span", Si, "Contact support")) : m("", !0)
+            e.isExpanded ? (t(), i("span", Ci, "Contact support")) : m("", !0)
           ]),
           k(s.$slots, "user")
         ], 2)
       ])
     ]));
   }
-}, Bi = { class: "relative" }, Oi = { class: "border relative z-10 bg-white border-oc-gray-200 shadow-normal rounded p-2 flex flex-col gap-y-2" }, Vi = { class: "py-2 px-3 gap-x-3 flex items-center" }, Ii = { class: "text-oc-accent-2 flex-1 font-medium" }, Ti = { class: "flex items-center gap-x-2" }, Di = { class: "px-3 pb-3 text-oc-text-400 text-sm" }, Nm = {
+}, Oi = { class: "relative" }, Vi = { class: "border relative z-10 bg-white border-oc-gray-200 shadow-normal rounded p-2 flex flex-col gap-y-2" }, Ii = { class: "py-2 px-3 gap-x-3 flex items-center" }, Ti = { class: "text-oc-accent-2 flex-1 font-medium" }, Di = { class: "flex items-center gap-x-2" }, Ai = { class: "px-3 pb-3 text-oc-text-400 text-sm" }, Nm = {
   __name: "OcSidebarFeatureBanners",
   props: {
     isStacked: {
@@ -4041,16 +4042,16 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     }
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Bi, [
+    return (s, a) => (t(), i("div", Oi, [
       a[2] || (a[2] = n("div", { class: "border absolute top-2 left-0 w-full h-[calc(100%-4px)] border-oc-gray-200 rounded pt-2" }, null, -1)),
-      n("div", Oi, [
-        n("div", Vi, [
+      n("div", Vi, [
+        n("div", Ii, [
           x(r(V), {
             name: "sparkle-2",
             class: "text-oc-accent-2"
           }),
-          n("div", Ii, $(e.title), 1),
-          n("div", Ti, [
+          n("div", Ti, $(e.title), 1),
+          n("div", Di, [
             x(r(V), {
               name: "x",
               class: "text-oc-text-300 hover:text-oc-text",
@@ -4067,11 +4068,11 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
             })
           ])
         ]),
-        n("div", Di, $(e.description), 1)
+        n("div", Ai, $(e.description), 1)
       ])
     ]));
   }
-}, Ai = { class: "py-7 flex flex-col gap-y-3 px-4" }, Mi = { class: "flex flex-col gap-y-2" }, ji = ["onClick"], Rm = /* @__PURE__ */ J({
+}, Mi = { class: "py-7 flex flex-col gap-y-3 px-4" }, ji = { class: "flex flex-col gap-y-2" }, Pi = ["onClick"], Rm = /* @__PURE__ */ J({
   __name: "OcSubSidebar",
   props: {
     title: {
@@ -4089,7 +4090,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
   },
   emits: ["titleClick", "update:modelValue"],
   setup(e) {
-    return (s, a) => (t(), i("div", Ai, [
+    return (s, a) => (t(), i("div", Mi, [
       e.title ? (t(), i("div", {
         key: 0,
         class: "py-4 gap-x-3 whitespace-nowrap cursor-pointer flex font-medium items-center",
@@ -4103,7 +4104,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         }),
         Z(" " + $(e.title), 1)
       ])) : m("", !0),
-      n("div", Mi, [
+      n("div", ji, [
         (t(!0), i(L, null, R(e.menu, (l, o) => (t(), i("div", {
           key: o,
           class: v([
@@ -4111,11 +4112,11 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
             e.modelValue === l.value ? "bg-oc-accent-2-50-tr text-oc-accent-1" : "text-oc-text-400"
           ]),
           onClick: (d) => s.$emit("update:modelValue", l.value)
-        }, $(l.label), 11, ji))), 128))
+        }, $(l.label), 11, Pi))), 128))
       ])
     ]));
   }
-}), Pi = { class: "relative" }, Fm = {
+}), Li = { class: "relative" }, Fm = {
   __name: "OcEmptyPage",
   props: {
     isButton: {
@@ -4213,7 +4214,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     return (a, l) => (t(), i("div", {
       class: v(["flex flex-col items-center", s.value[e.size].box])
     }, [
-      n("div", Pi, [
+      n("div", Li, [
         n("div", {
           class: v(["flex justify-center border rounded-full items-center aspect-square", [
             e.containerClass ? e.containerClass : e.isUpgrade ? "text-oc-warning-600 border-oc-warning-300 bg-oc-warning-50" : "text-oc-text-400 border-oc-gray-200 bg-oc-gray-50",
@@ -4254,16 +4255,16 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       }, null, 8, ["label", "left-icon"])) : m("", !0)
     ], 2));
   }
-}, Li = {
+}, Ei = {
   key: 0,
   class: "min-w-[138px] flex flex-col gap-y-3"
-}, Ei = {
+}, zi = {
   key: 1,
   class: "flex gap-x-4 items-center"
-}, zi = { class: "flex flex-col gap-y-2" }, Ni = { class: "flex items-center gap-x-2" }, Ri = { class: "text-oc-text-400 text-sm" }, Fi = {
+}, Ni = { class: "flex flex-col gap-y-2" }, Ri = { class: "flex items-center gap-x-2" }, Fi = { class: "text-oc-text-400 text-sm" }, Ui = {
   key: 0,
   class: "flex justify-center items-center w-[38px] h-[38px] shrink-0 rounded-full bg-oc-gray-100"
-}, Ui = {
+}, qi = {
   __name: "OcInfoCardButton",
   props: {
     isActive: Boolean,
@@ -4282,19 +4283,19 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         e.isLoading ? "p-3" : "px-5 py-4 min-h-[62px] max-h-[76px]"
       ]])
     }, [
-      e.isLoading ? (t(), i("div", Li, [
+      e.isLoading ? (t(), i("div", Ei, [
         x(r(Se), { class: "h-[14px] w-[80%] rounded-sm" }),
         x(r(Se), { class: "h-[20px] w-full rounded-sm" })
-      ])) : (t(), i("div", Ei, [
-        n("div", zi, [
-          n("div", Ni, [
-            n("span", Ri, $(e.title), 1),
+      ])) : (t(), i("div", zi, [
+        n("div", Ni, [
+          n("div", Ri, [
+            n("span", Fi, $(e.title), 1),
             e.chipOptions ? (t(), y(r(ae), fe(F({ key: 0 }, e.chipOptions)), null, 16)) : m("", !0)
           ]),
           n("span", {
             class: v(["flex gap-x-4 items-center text-xl group-hover:text-oc-text", e.isActive ? "text-oc-text" : "text-oc-text-400"])
           }, [
-            e.countryIso ? (t(), i("div", Fi, [
+            e.countryIso ? (t(), i("div", Ui, [
               x(r(V), {
                 class: "!rounded-[1px]",
                 name: `flags/${e.countryIso.toUpperCase()}`
@@ -4307,7 +4308,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ]))
     ], 2));
   }
-}, qi = { class: "flex items-center gap-x-4 overflow-hidden" }, Hi = { class: "flex gap-x-2 overflow-auto" }, Yi = ["alt", "src"], Wi = {
+}, Hi = { class: "flex items-center gap-x-4 overflow-hidden" }, Yi = { class: "flex gap-x-2 overflow-auto" }, Wi = ["alt", "src"], Ki = {
   __name: "OcPaymentMethods",
   props: {
     methods: {
@@ -4316,23 +4317,23 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     }
   },
   setup(e) {
-    return (s, a) => (t(), i("div", qi, [
+    return (s, a) => (t(), i("div", Hi, [
       a[0] || (a[0] = n("span", { class: "text-xs shrink-0 font-medium text-oc-text-300 uppercase" }, " Payment methods ", -1)),
-      n("div", Hi, [
+      n("div", Yi, [
         (t(!0), i(L, null, R(e.methods, (l) => (t(), i("img", {
           key: l,
           width: "35",
           alt: l,
           height: "24",
           src: l
-        }, null, 8, Yi))), 128))
+        }, null, 8, Wi))), 128))
       ])
     ]));
   }
-}, Ki = { class: "flex justify-between md:flex-row flex-col gap-y-3 gap-x-4 md:gap-y-0" }, Gi = { key: 2 }, Xi = {
+}, Gi = { class: "flex justify-between md:flex-row flex-col gap-y-3 gap-x-4 md:gap-y-0" }, Xi = { key: 2 }, Zi = {
   key: 4,
   class: "flex shrink-0 gap-x-3"
-}, Zi = {
+}, Ji = {
   __name: "OcTopActions",
   props: {
     moreButtonProps: Object,
@@ -4355,19 +4356,19 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     const s = M(!1);
     return (a, l) => {
       var o;
-      return t(), i("div", Ki, [
+      return t(), i("div", Gi, [
         e.isLoading ? (t(), y(r(Se), {
           key: 0,
           class: "h-[20px] w-[322px] rounded-sm"
         })) : m("", !0),
-        !e.isLoading && e.paymentMethods.length ? (t(), y(Wi, {
+        !e.isLoading && e.paymentMethods.length ? (t(), y(Ki, {
           key: 1,
           methods: e.paymentMethods
-        }, null, 8, ["methods"])) : (t(), i("div", Gi)),
+        }, null, 8, ["methods"])) : (t(), i("div", Xi)),
         e.isLoading ? (t(), y(r(Se), {
           key: 3,
           class: "h-[20px] w-[168px] rounded-sm"
-        })) : (t(), i("div", Xi, [
+        })) : (t(), i("div", Zi, [
           x(r(oe), F({
             modelValue: s.value,
             "onUpdate:modelValue": l[0] || (l[0] = (d) => s.value = d),
@@ -4413,7 +4414,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       ]);
     };
   }
-}, Ji = { class: "flex flex-col gap-y-5" }, Qi = { class: "flex gap-x-5 overflow-x-auto" }, _i = {
+}, Qi = { class: "flex flex-col gap-y-5" }, _i = { class: "flex gap-x-5 overflow-x-auto" }, es = {
   __name: "OcBalanceOverview",
   props: {
     overviewItems: {
@@ -4449,10 +4450,10 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
     changeTab: []
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Ji, [
-      n("div", Qi, [
+    return (s, a) => (t(), i("div", Qi, [
+      n("div", _i, [
         (t(!0), i(L, null, R(e.isLoading ? 2 : e.overviewTabs, (l) => k(s.$slots, l.value, { tab: l }, () => [
-          (t(), y(Ui, {
+          (t(), y(qi, {
             key: l.value,
             title: l.title,
             "is-loading": e.isLoading,
@@ -4467,7 +4468,7 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
         ])), 256))
       ]),
       a[0] || (a[0] = n("div", { class: "border-t border-oc-gray-200" }, null, -1)),
-      x(Zi, {
+      x(Ji, {
         "is-loading": e.isLoading,
         "more-button-props": e.moreButtonProps,
         "secondary-button-props": e.secondaryButtonProps,
@@ -4488,19 +4489,19 @@ const Dm = /* @__PURE__ */ he(oo, [["render", so]]), ro = { class: "flex items-c
       }, 8, ["is-loading", "items", "container-class"])
     ]));
   }
-}, es = {}, ts = { class: "flex gap-x-5 md:flex-nowrap flex-wrap p-3 md:items-center bg-oc-gray-50 border border-oc-gray-200 rounded overflow-hidden" };
-function ls(e, s) {
-  return t(), i("div", ts, [
+}, ts = {}, ls = { class: "flex gap-x-5 md:flex-nowrap flex-wrap p-3 md:items-center bg-oc-gray-50 border border-oc-gray-200 rounded overflow-hidden" };
+function as(e, s) {
+  return t(), i("div", ls, [
     k(e.$slots, "default")
   ]);
 }
-const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns = {
+const tt = /* @__PURE__ */ he(ts, [["render", as]]), ns = { class: "flex" }, os = {
   key: 0,
   class: "p-2"
-}, os = { class: "py-2 px-3" }, is = {
+}, is = { class: "py-2 px-3" }, ss = {
   key: 0,
   class: "max-w-[250px] fixed z-[1006] top-0 right-0 transition-all duration-500 flex flex-col gap-y-2 w-full bg-white h-screen overflow-y-auto"
-}, ss = { class: "p-5 flex items-center justify-between" }, rs = { class: "px-5 flex-1 flex flex-col gap-y-5" }, ds = /* @__PURE__ */ J({
+}, rs = { class: "p-5 flex items-center justify-between" }, ds = { class: "px-5 flex-1 flex flex-col gap-y-5" }, cs = /* @__PURE__ */ J({
   __name: "MobileDynamicType",
   props: {
     boxes: { type: Array, default: () => [] },
@@ -4516,7 +4517,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         default: S(() => {
           var o, d;
           return [
-            n("div", as, [
+            n("div", ns, [
               (t(!0), i(L, null, R((o = e.boxes[0]) == null ? void 0 : o.items.slice(0, 2), (c, u) => (t(), y(r(Ue), F({
                 key: u,
                 "is-transparent": "",
@@ -4536,12 +4537,12 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                   key: "0"
                 } : void 0
               ]), 1040, ["title", "content", "class", "is-loading"]))), 128)),
-              (d = e.boxes[0]) != null && d.showInfo ? (t(), i("div", ns, [
+              (d = e.boxes[0]) != null && d.showInfo ? (t(), i("div", os, [
                 x(r(le), null, {
                   popper: S(() => {
                     var c;
                     return [
-                      n("div", os, $((c = e.boxes[0]) == null ? void 0 : c.infoTooltip), 1)
+                      n("div", is, $((c = e.boxes[0]) == null ? void 0 : c.infoTooltip), 1)
                     ];
                   }),
                   default: S(() => [
@@ -4579,8 +4580,8 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       }),
       x(Ae, { name: "slide-from-right" }, {
         default: S(() => [
-          s.value ? (t(), i("div", is, [
-            n("div", ss, [
+          s.value ? (t(), i("div", ss, [
+            n("div", rs, [
               l[4] || (l[4] = n("span", { class: "font-medium" }, "Details", -1)),
               x(r(K), {
                 size: "small",
@@ -4592,7 +4593,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 onClick: l[2] || (l[2] = (o) => s.value = !1)
               })
             ]),
-            n("div", rs, [
+            n("div", ds, [
               (t(!0), i(L, null, R(e.boxes, (o, d) => (t(), y(tt, { key: d }, {
                 default: S(() => [
                   (t(!0), i(L, null, R(o.items, (c, u) => (t(), y(r(Ue), F({
@@ -4630,7 +4631,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       })
     ]));
   }
-}), cs = { class: "hidden md:flex md:gap-5 gap-3 md:flex-row flex-col" }, us = { class: "py-2 px-3" }, ms = {
+}), us = { class: "hidden md:flex md:gap-5 gap-3 md:flex-row flex-col" }, ms = { class: "py-2 px-3" }, fs = {
   __name: "OcDynamicType",
   props: {
     boxes: { type: Array, default: () => [] },
@@ -4643,7 +4644,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
   emits: ["addCustomer", "editCustomer"],
   setup(e) {
     return (s, a) => (t(), i(L, null, [
-      n("div", cs, [
+      n("div", us, [
         (t(!0), i(L, null, R(e.boxes, (l, o) => (t(), y(tt, {
           key: o,
           class: v(
@@ -4680,7 +4681,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
               x(r(le), { "popper-options": { strategy: "fixed" } }, {
                 popper: S(() => [
                   k(s.$slots, l.infoTooltipSlot, {}, () => [
-                    n("div", us, $(l.infoTooltip), 1)
+                    n("div", ms, $(l.infoTooltip), 1)
                   ])
                 ]),
                 default: S(() => [
@@ -4723,7 +4724,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           } : void 0
         ]), 1032, ["variant", "customer", "is-hover", "is-edit"])) : m("", !0)
       ]),
-      x(ds, {
+      x(cs, {
         class: "flex md:hidden",
         boxes: e.boxes,
         "is-customer": e.isCustomer,
@@ -4740,7 +4741,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       ]), 1032, ["boxes", "is-customer", "customer-card-variant", "customer"])
     ], 64));
   }
-}, fs = { class: "md:pt-5 pt-0 md:px-10 px-5" }, vs = { class: "flex items-center gap-x-3" }, gs = { class: "font-medium" }, ps = { class: "flex items-center gap-x-2 max-w-full" }, ys = ["href"], xs = { class: "truncate" }, hs = { class: "text-oc-text whitespace-nowrap" }, Um = {
+}, vs = { class: "md:pt-5 pt-0 md:px-10 px-5" }, gs = { class: "flex items-center gap-x-3" }, ps = { class: "font-medium" }, ys = { class: "flex items-center gap-x-2 max-w-full" }, xs = ["href"], hs = { class: "truncate" }, bs = { class: "text-oc-text whitespace-nowrap" }, Um = {
   __name: "OcAdditionalContent",
   props: {
     mainLink: { type: String, default: "" },
@@ -4789,7 +4790,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         console.error("Unable to copy text to clipboard. Error: ", l);
       }
     };
-    return (l, o) => (t(), i("div", fs, [
+    return (l, o) => (t(), i("div", vs, [
       e.variant === "default" ? (t(), y(Bt, {
         key: 0,
         description: e.mainLink,
@@ -4797,8 +4798,8 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         class: v(["border rounded md:py-4 py-3 md:px-5 px-4 border-oc-gray-200 bg-oc-gray-50 flex flex-col gap-y-2", e.additionalStyling])
       }, {
         title: S(() => [
-          n("div", vs, [
-            n("span", gs, $(e.additionalTitle), 1),
+          n("div", gs, [
+            n("span", ps, $(e.additionalTitle), 1),
             e.chipVariant ? (t(), y(r(ae), {
               key: 0,
               variant: e.chipVariant,
@@ -4807,23 +4808,23 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           ])
         ]),
         description: S(() => [
-          n("div", ps, [
+          n("div", ys, [
             n("a", {
               href: e.href || `${e.mainLink}${e.userId}`,
               target: "_blank",
               class: "text-oc-text-400 flex items-center overflow-hidden cursor-pointer"
             }, [
-              n("div", xs, $(e.mainLink), 1),
-              n("div", hs, $(e.userId), 1)
-            ], 8, ys),
-            x(r(zo), {
+              n("div", hs, $(e.mainLink), 1),
+              n("div", bs, $(e.userId), 1)
+            ], 8, xs),
+            x(r(No), {
               "primary-actions": e.primaryActions,
               onCopy: a
             }, null, 8, ["primary-actions"])
           ])
         ]),
         _: 1
-      }, 8, ["description", "title", "class"])) : e.variant === "dynamic" ? (t(), y(ms, {
+      }, 8, ["description", "title", "class"])) : e.variant === "dynamic" ? (t(), y(fs, {
         key: 1,
         boxes: e.boxes,
         "customer-card-variant": e.customerCardVariant,
@@ -4841,7 +4842,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             k(l.$slots, c, fe(Ie(u)))
           ])
         }))
-      ]), 1032, ["boxes", "customer-card-variant", "customer", "is-customer", "customer-is-hover", "customer-is-edit", "class"])) : e.variant === "balance" ? (t(), y(_i, {
+      ]), 1032, ["boxes", "customer-card-variant", "customer", "is-customer", "customer-is-hover", "customer-is-edit", "class"])) : e.variant === "balance" ? (t(), y(es, {
         key: 2,
         "overview-items": e.overviewItems,
         "overview-tabs": e.overviewTabs,
@@ -4865,13 +4866,13 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       ]), 1032, ["overview-items", "overview-tabs", "secondary-button-props", "more-button-props", "overview-active-tab", "container-class", "payment-methods", "dropdown-items", "dropdown-props", "class", "is-loading"])) : m("", !0)
     ]));
   }
-}, bs = { class: "send-money-initial-state relative border rounded" }, ws = { class: "z-10 p-7 flex flex-col relative" }, $s = { class: "text-xl font-medium mb-4" }, ks = {
+}, ws = { class: "send-money-initial-state relative border rounded" }, $s = { class: "z-10 p-7 flex flex-col relative" }, ks = { class: "text-xl font-medium mb-4" }, Ss = {
   key: 0,
   class: "text-oc-text-400 mb-10"
-}, Ss = {
+}, Cs = {
   key: 1,
   class: "flex gap-4 flex-wrap"
-}, Cs = { class: "text-sm font-medium" }, Bs = {
+}, Bs = { class: "text-sm font-medium" }, Os = {
   __name: "OcFeatureOverviewCard",
   props: {
     title: {
@@ -4891,11 +4892,11 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
   setup(e) {
     return (s, a) => {
       var l;
-      return t(), i("div", bs, [
-        n("div", ws, [
-          n("h2", $s, $(e.title), 1),
-          e.description ? (t(), i("p", ks, $(e.description), 1)) : m("", !0),
-          (l = e.features) != null && l.length ? (t(), i("div", Ss, [
+      return t(), i("div", ws, [
+        n("div", $s, [
+          n("h2", ks, $(e.title), 1),
+          e.description ? (t(), i("p", Ss, $(e.description), 1)) : m("", !0),
+          (l = e.features) != null && l.length ? (t(), i("div", Cs, [
             (t(!0), i(L, null, R(e.features, (o) => (t(), i("div", {
               key: o.title,
               class: "rounded bg-white flex flex-col gap-2 p-6 items-center justify-center relative"
@@ -4911,14 +4912,14 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 height: "56",
                 width: "56"
               }, null, 8, ["name"]),
-              n("span", Cs, $(o.title), 1)
+              n("span", Bs, $(o.title), 1)
             ]))), 128))
           ])) : m("", !0)
         ])
       ]);
     };
   }
-}, qm = /* @__PURE__ */ he(Bs, [["__scopeId", "data-v-d658d1d3"]]), Os = { class: "w-screen relative h-[40px] bg-oc-accent-3 flex items-center justify-center text-white" }, Vs = { class: "text-sm" }, Hm = /* @__PURE__ */ J({
+}, qm = /* @__PURE__ */ he(Os, [["__scopeId", "data-v-d658d1d3"]]), Vs = { class: "w-screen relative h-[40px] bg-oc-accent-3 flex items-center justify-center text-white" }, Is = { class: "text-sm" }, Hm = /* @__PURE__ */ J({
   __name: "OcSandboxBanner",
   props: {
     title: {
@@ -4931,15 +4932,15 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
     }
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Os, [
-      n("span", Vs, $(e.title), 1),
+    return (s, a) => (t(), i("div", Vs, [
+      n("span", Is, $(e.title), 1),
       e.chipProps ? (t(), y(r(ae), F({
         key: 0,
         class: "absolute left-[40px]"
       }, e.chipProps), null, 16)) : m("", !0)
     ]));
   }
-}), Is = { class: "flex flex-col text-center gap-y-3" }, Ts = { class: "text-lg font-medium" }, Ds = { class: "text-sm text-oc-text-400" }, Ym = /* @__PURE__ */ J({
+}), Ts = { class: "flex flex-col text-center gap-y-3" }, Ds = { class: "text-lg font-medium" }, As = { class: "text-sm text-oc-text-400" }, Ym = /* @__PURE__ */ J({
   __name: "OcBox",
   props: {
     icon: String,
@@ -4960,9 +4961,9 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         height: e.height,
         variant: e.variant
       }, null, 8, ["icon", "width", "height", "variant"]),
-      n("div", Is, [
-        n("span", Ts, $(e.title), 1),
-        n("span", Ds, $(e.description), 1)
+      n("div", Ts, [
+        n("span", Ds, $(e.title), 1),
+        n("span", As, $(e.description), 1)
       ])
     ], 2));
   }
@@ -4992,7 +4993,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       e.chipProps ? (t(), y(r(ae), F({ key: 1 }, e.chipProps, { class: "absolute top-0 -translate-y-1/2 sm:right-9" }), null, 16)) : m("", !0)
     ], 2));
   }
-}), As = { class: "flex items-center" }, Ms = { class: "flex flex-1 items-center gap-x-3" }, js = { class: "font-medium text-lg" }, Km = /* @__PURE__ */ J({
+}), Ms = { class: "flex items-center" }, js = { class: "flex flex-1 items-center gap-x-3" }, Ps = { class: "font-medium text-lg" }, Km = /* @__PURE__ */ J({
   __name: "OcVerificationOption",
   props: {
     title: {
@@ -5016,10 +5017,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
     return (s, a) => (t(), i("div", {
       class: v(["rounded hover:bg-oc-gray-50 p-5 flex flex-col gap-y-3", e.isActive ? "border-2 border-oc-primary" : "border border-oc-gray-200"])
     }, [
-      n("div", As, [
-        n("div", Ms, [
+      n("div", Ms, [
+        n("div", js, [
           k(s.$slots, "title", {}, () => [
-            n("span", js, $(e.title), 1)
+            n("span", Ps, $(e.title), 1)
           ]),
           e.chipOptions ? (t(), y(r(ae), fe(F({ key: 0 }, e.chipOptions)), null, 16)) : m("", !0)
         ]),
@@ -5034,13 +5035,13 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       k(s.$slots, "content")
     ], 2));
   }
-}), Ps = {
+}), Ls = {
   key: 0,
   class: "flex flex-col gap-y-4 w-full"
-}, Ls = { class: "flex flex-col gap-y-3" }, Es = { class: "font-medium text-oc-text" }, zs = { class: "text-oc-text-400" }, Ns = { class: "flex gap-x-3" }, Rs = {
+}, Es = { class: "flex flex-col gap-y-3" }, zs = { class: "font-medium text-oc-text" }, Ns = { class: "text-oc-text-400" }, Rs = { class: "flex gap-x-3" }, Fs = {
   key: 0,
   class: "text-oc-text"
-}, Fs = ["innerHTML"], Gm = {
+}, Us = ["innerHTML"], Gm = {
   __name: "OcSnackbar",
   props: {
     modelValue: {
@@ -5169,12 +5170,12 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             }, null, 8, ["name", "width", "height"]))
           ], 64)) : m("", !0),
           k(h.$slots, "default", {}, () => [
-            f.value ? (t(), i("div", Ps, [
-              n("div", Ls, [
-                n("span", Es, $(e.title), 1),
-                n("span", zs, $(e.description), 1)
+            f.value ? (t(), i("div", Ls, [
+              n("div", Es, [
+                n("span", zs, $(e.title), 1),
+                n("span", Ns, $(e.description), 1)
               ]),
-              n("div", Ns, [
+              n("div", Rs, [
                 e.secondaryButton ? (t(), y(r(K), F({
                   key: 0,
                   variant: "secondary",
@@ -5193,7 +5194,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 key: 1,
                 class: "text-oc-text",
                 innerHTML: e.content
-              }, null, 8, Fs)) : (t(), i("span", Rs, $(e.content), 1))
+              }, null, 8, Us)) : (t(), i("span", Fs, $(e.content), 1))
             ], 2))
           ]),
           e.dismissible ? (t(), i("div", {
@@ -5214,7 +5215,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 3
     }, 8, ["name"]));
   }
-}, Us = { class: "flex items-center gap-3" }, qs = { class: "text-oc-text-500" }, Hs = { class: "p-4 text-sm" }, Ys = {
+}, qs = { class: "flex items-center gap-3" }, Hs = { class: "text-oc-text-500" }, Ys = { class: "p-4 text-sm" }, Ws = {
   __name: "OcBanner",
   props: {
     modelValue: {
@@ -5273,7 +5274,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           n("div", {
             class: v(["flex flex-1 items-center justify-between gap-3 min-h-[34px] px-4 text-sm", r(s)[e.color]])
           }, [
-            n("div", Us, [
+            n("div", qs, [
               e.showIcon ? (t(), y(r(V), {
                 key: 0,
                 name: e.icon,
@@ -5282,7 +5283,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 height: "16"
               }, null, 8, ["name"])) : m("", !0),
               k(l.$slots, "title", {}, () => [
-                n("div", qs, $(e.title), 1)
+                n("div", Hs, $(e.title), 1)
               ], !0)
             ]),
             e.dismissible ? (t(), y(r(K), {
@@ -5293,7 +5294,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
               onClick: o[0] || (o[0] = (d) => l.$emit("update:modelValue", !1))
             })) : m("", !0)
           ], 2),
-          n("div", Hs, [
+          n("div", Ys, [
             k(l.$slots, "default", {}, () => [
               Z($(e.content), 1)
             ], !0)
@@ -5305,10 +5306,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 3
     }, 8, ["name"]));
   }
-}, Xm = /* @__PURE__ */ he(Ys, [["__scopeId", "data-v-d8517c87"]]), Ws = { class: "rounded-full share-icon w-fit cursor-pointer text-oc-text-400 p-3 border border-gray-200" }, Ks = { class: "px-3 py-2 text-oc-text-400 text-sm font-medium" }, Gs = {
+}, Xm = /* @__PURE__ */ he(Ws, [["__scopeId", "data-v-d8517c87"]]), Ks = { class: "rounded-full share-icon w-fit cursor-pointer text-oc-text-400 p-3 border border-gray-200" }, Gs = { class: "px-3 py-2 text-oc-text-400 text-sm font-medium" }, Xs = {
   key: 1,
   class: "px-3 share-icon border border-oc-gray-200 rounded-full w-fit py-[6px] flex items-center gap-x-2"
-}, Xs = { class: "text-sm" }, Zm = {
+}, Zs = { class: "text-sm" }, Zm = {
   __name: "OcShareIcon",
   props: {
     text: String,
@@ -5321,10 +5322,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
   setup(e) {
     return (s, a) => e.isOnlyIcon ? (t(), y(r(le), fe(F({ key: 0 }, e.tooltipOptions)), {
       popper: S(() => [
-        n("div", Ks, $(e.text), 1)
+        n("div", Gs, $(e.text), 1)
       ]),
       default: S(() => [
-        n("div", Ws, [
+        n("div", Ks, [
           x(r(V), {
             name: e.icon,
             width: "20",
@@ -5333,25 +5334,25 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         ])
       ]),
       _: 1
-    }, 16)) : (t(), i("div", Gs, [
+    }, 16)) : (t(), i("div", Xs, [
       x(r(V), {
         name: e.icon,
         width: "20",
         height: "20"
       }, null, 8, ["name"]),
-      n("span", Xs, $(e.text), 1)
+      n("span", Zs, $(e.text), 1)
     ]));
   }
-}, Zs = { class: "flex flex-col gap-y-2 w-full" }, Js = { class: "flex gap-x-1 items-center" }, Qs = {
+}, Js = { class: "flex flex-col gap-y-2 w-full" }, Qs = { class: "flex gap-x-1 items-center" }, _s = {
   key: 0,
   class: "text-oc-error"
-}, _s = {
+}, er = {
   key: 0,
   class: "px-3 py-2"
-}, er = {
+}, tr = {
   key: 1,
   class: "text-sm flex items-center text-oc-text-400"
-}, tr = {
+}, lr = {
   key: 2,
   class: "text-sm text-oc-error flex items-center"
 }, pe = {
@@ -5367,19 +5368,19 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
     labelClass: String
   },
   setup(e) {
-    return (s, a) => (t(), i("div", Zs, [
+    return (s, a) => (t(), i("div", Js, [
       e.label ? (t(), i("label", {
         key: 0,
         class: v(["text-sm flex items-center gap-x-3 font-medium text-oc-text-400", e.labelClass])
       }, [
-        n("span", Js, [
+        n("span", Qs, [
           Z($(e.label) + " ", 1),
-          e.isRequired ? (t(), i("span", Qs, "*")) : m("", !0)
+          e.isRequired ? (t(), i("span", _s, "*")) : m("", !0)
         ]),
         e.labelIcon ? (t(), y(r(le), fe(F({ key: 0 }, e.tooltipOptions)), {
           popper: S(() => [
             k(s.$slots, "tooltipText", {}, () => [
-              e.tooltipText ? (t(), i("div", _s, $(e.tooltipText), 1)) : m("", !0)
+              e.tooltipText ? (t(), i("div", er, $(e.tooltipText), 1)) : m("", !0)
             ])
           ]),
           default: S(() => [
@@ -5393,18 +5394,18 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         }, 16)) : m("", !0)
       ], 2)) : m("", !0),
       k(s.$slots, "default"),
-      (e.hint || s.$slots.hint) && !e.errorMessage ? (t(), i("div", er, [
+      (e.hint || s.$slots.hint) && !e.errorMessage ? (t(), i("div", tr, [
         k(s.$slots, "hint", {}, () => [
           Z($(e.hint), 1)
         ])
       ])) : m("", !0),
-      e.errorMessage ? (t(), i("div", tr, $(e.errorMessage), 1)) : m("", !0)
+      e.errorMessage ? (t(), i("div", lr, $(e.errorMessage), 1)) : m("", !0)
     ]));
   }
-}, lr = ["disabled"], ar = {
+}, ar = ["disabled"], nr = {
   key: 2,
   class: "overflow-hidden text-ellipsis"
-}, nr = {
+}, or = {
   __name: "OcButton",
   props: {
     label: String,
@@ -5485,7 +5486,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           height: b.value[e.size],
           name: e.leftIcon
         }, null, 8, ["width", "class", "height", "name"])) : m("", !0),
-        e.label ? (t(), i("span", ar, $(e.label), 1)) : k(T.$slots, "default", { key: 3 }, void 0, !0),
+        e.label ? (t(), i("span", nr, $(e.label), 1)) : k(T.$slots, "default", { key: 3 }, void 0, !0),
         e.rightIcon ? (t(), y(r(V), {
           key: 4,
           width: b.value[e.size],
@@ -5493,7 +5494,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           name: e.rightIcon,
           class: v(e.iconClass)
         }, null, 8, ["width", "height", "name", "class"])) : m("", !0)
-      ], 42, lr),
+      ], 42, ar),
       e.isAdditionalArea && !e.isTransparent ? (t(), i("div", {
         key: 0,
         class: v(["border-y border-r flex cursor-pointer items-center justify-center oc-btn-add-area px-[6px] py-3 rounded-r-[inherit]", [o.value[e.size], e.variant]]),
@@ -5508,7 +5509,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       ], 2)) : m("", !0)
     ], 2));
   }
-}, K = /* @__PURE__ */ he(nr, [["__scopeId", "data-v-af49bb32"]]), or = { class: "w-[30px] h-[20px] flex items-center justify-center" }, ir = {
+}, K = /* @__PURE__ */ he(or, [["__scopeId", "data-v-af49bb32"]]), ir = { class: "w-[30px] h-[20px] flex items-center justify-center" }, sr = {
   __name: "OcCardInput",
   props: {
     placeholder: String,
@@ -5555,7 +5556,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       "onUpdate:modelValue": a[0] || (a[0] = (l) => s.$emit("update:modelValue", l))
     }, {
       icon: S(() => [
-        n("div", or, [
+        n("div", ir, [
           x(r(V), {
             name: `payment-methods/${e.cardType}`,
             width: "20",
@@ -5566,7 +5567,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 1
     }, 8, ["placeholder", "label", "error-message", "is-inline-label", "disabled", "hint", "model-value", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
   }
-}, sr = ["value", "checked", "disabled"], Te = {
+}, rr = ["value", "checked", "disabled"], Te = {
   __name: "OcCheckbox",
   props: {
     modelValue: Boolean,
@@ -5625,14 +5626,14 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             class: "h-0 w-0 hidden",
             disabled: e.isDisabled,
             onChange: d
-          }, null, 40, sr),
+          }, null, 40, rr),
           k(c.$slots, "after")
         ], 2)
       ]),
       _: 3
     }, 8, ["label", "hint", "error-message"]));
   }
-}, rr = {
+}, dr = {
   __name: "OcCheckboxesGroup",
   props: {
     alignment: {
@@ -5711,14 +5712,14 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 1
     }, 8, ["label", "error-message", "hint"]));
   }
-}, dr = { class: "flex gap-x-2 relative items-center text-oc-text-500 cursor-pointer transition-all duration-300" }, Jm = {
+}, cr = { class: "flex gap-x-2 relative items-center text-oc-text-500 cursor-pointer transition-all duration-300" }, Jm = {
   __name: "OcCriteria",
   props: {
     modelValue: Boolean,
     label: String
   },
   setup(e) {
-    return (s, a) => (t(), i("div", dr, [
+    return (s, a) => (t(), i("div", cr, [
       n("div", {
         class: v([
           "w-5 h-5 flex items-center justify-center rounded-full border transition-all duration-300",
@@ -5737,16 +5738,16 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       }, $(e.label), 3)) : m("", !0)
     ]));
   }
-}, cr = {
+}, ur = {
   key: 0,
   class: "border-r border-gray-200 pr-3 py-3"
-}, ur = { class: "flex flex-1 items-baseline gap-x-2" }, mr = {
+}, mr = { class: "flex flex-1 items-baseline gap-x-2" }, fr = {
   key: 0,
   class: "text-oc-text-300"
-}, fr = { class: "flex items-center gap-x-1 w-full" }, vr = {
+}, vr = { class: "flex items-center gap-x-1 w-full" }, gr = {
   key: 0,
   class: "text-oc-text-300"
-}, gr = ["value", "readonly", "placeholder", "disabled", "autocomplete", "inputmode", "type"], xe = {
+}, pr = ["value", "readonly", "placeholder", "disabled", "autocomplete", "inputmode", "type"], xe = {
   __name: "OcInput",
   props: {
     disabled: {
@@ -5878,7 +5879,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             return (j = p.$refs.inputRef) == null ? void 0 : j.focus();
           })
         }, [
-          p.$slots.trailing ? (t(), i("div", cr, [
+          p.$slots.trailing ? (t(), i("div", ur, [
             k(p.$slots, "trailing")
           ])) : m("", !0),
           k(p.$slots, "icon", {}, () => [
@@ -5888,10 +5889,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
               name: e.icon
             }, e.iconProps), null, 16, ["name"])) : m("", !0)
           ]),
-          n("div", ur, [
-            e.isInlineLabel && e.label ? (t(), i("label", mr, $(e.label) + ": ", 1)) : m("", !0),
-            n("div", fr, [
-              e.preFill ? (t(), i("span", vr, $(e.preFill), 1)) : m("", !0),
+          n("div", mr, [
+            e.isInlineLabel && e.label ? (t(), i("label", fr, $(e.label) + ": ", 1)) : m("", !0),
+            n("div", vr, [
+              e.preFill ? (t(), i("span", gr, $(e.preFill), 1)) : m("", !0),
               n("input", F({
                 ref_key: "inputRef",
                 ref: o,
@@ -5912,7 +5913,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 }),
                 onInput: b[2] || (b[2] = (T) => p.$emit("update:modelValue", T.target.value)),
                 onPaste: b[3] || (b[3] = (T) => p.$emit("paste"))
-              }), null, 16, gr)
+              }), null, 16, pr)
             ])
           ]),
           p.$slots.leading || h.value ? (t(), i("div", {
@@ -5948,10 +5949,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       } : void 0
     ]), 1032, ["label", "label-class", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
   }
-}, pr = { class: "flex flex-1 items-baseline gap-x-2" }, yr = {
+}, yr = { class: "flex flex-1 items-baseline gap-x-2" }, xr = {
   key: 0,
   class: "text-oc-text-300"
-}, xr = { class: "w-full flex flex-wrap gap-2" }, hr = { key: 1 }, br = ["value", "readonly", "placeholder", "disabled"], Qm = {
+}, hr = { class: "w-full flex flex-wrap gap-2" }, br = { key: 1 }, wr = ["value", "readonly", "placeholder", "disabled"], Qm = {
   __name: "OcInputOption",
   props: {
     label: String,
@@ -6028,8 +6029,8 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       default: S(() => {
         var A, w;
         return [
-          n("div", pr, [
-            e.isInlineLabel && e.label ? (t(), i("label", yr, $(e.label) + ": ", 1)) : m("", !0),
+          n("div", yr, [
+            e.isInlineLabel && e.label ? (t(), i("label", xr, $(e.label) + ": ", 1)) : m("", !0),
             n("div", {
               class: "bg-oc-bg-light flex items-center gap-x-1 w-full",
               onClick: C[4] || (C[4] = (O) => c.value.focus())
@@ -6040,7 +6041,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                   "pointer-events-none bg-oc-bg-dark": e.isDisabled
                 }])
               }, [
-                n("div", xr, [
+                n("div", hr, [
                   k(j.$slots, "default", {
                     options: p.value,
                     areAllOptionsVisible: f.value
@@ -6062,7 +6063,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                           name: "minus",
                           width: "12",
                           height: "12"
-                        })) : (t(), i("span", hr, $(`+${d.value.length - e.maxVisibleOptions}`), 1))
+                        })) : (t(), i("span", br, $(`+${d.value.length - e.maxVisibleOptions}`), 1))
                       ]),
                       _: 1
                     })) : m("", !0)
@@ -6081,7 +6082,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                       console.log("$event: ", O), h.value = !1, j.$emit("blur", O);
                     }),
                     onKeyup: C[3] || (C[3] = Fe((O) => T(O.target.value), ["enter"]))
-                  }, null, 42, br)
+                  }, null, 42, wr)
                 ])
               ], 2)
             ])
@@ -6091,7 +6092,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 3
     }, 8, ["label", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
   }
-}, wr = { class: "flex gap-x-2 items-center" }, $r = { class: "text-oc-text-400 font-medium text-sm" }, kr = { class: "px-3 py-1 sticky top-0 bg-oc-bg-light z-[1000]" }, Sr = ["onClick"], Cr = { class: "text-oc-text-300" }, Br = { class: "text-oc-text-400" }, Or = {
+}, $r = { class: "flex gap-x-2 items-center" }, kr = { class: "text-oc-text-400 font-medium text-sm" }, Sr = { class: "px-3 py-1 sticky top-0 bg-oc-bg-light z-[1000]" }, Cr = ["onClick"], Br = { class: "text-oc-text-300" }, Or = { class: "text-oc-text-400" }, Vr = {
   __name: "OcPhoneInput",
   props: {
     countryCodes: { type: Array, default: () => [] },
@@ -6204,7 +6205,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                 ref: j,
                 class: "flex flex-col max-h-[300px] py-2 overflow-y-scroll hidden-scrollbar"
               }, [
-                n("div", kr, [
+                n("div", Sr, [
                   x(r(xe), {
                     modelValue: u.value,
                     "onUpdate:modelValue": g[0] || (g[0] = (B) => u.value = B),
@@ -6238,17 +6239,17 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                   n("div", {
                     class: v(["fi !w-[20px] !h-[15px] !rounded-[2px] shadow-md", `fi-${B.iso.toLowerCase()}`])
                   }, null, 2),
-                  n("span", Cr, "+" + $(B.code), 1),
-                  n("span", Br, $(B.country), 1)
-                ], 10, Sr))), 128))
+                  n("span", Br, "+" + $(B.code), 1),
+                  n("span", Or, $(B.country), 1)
+                ], 10, Cr))), 128))
               ], 512)
             ]),
             default: S(() => [
-              n("div", wr, [
+              n("div", $r, [
                 n("div", {
                   class: v(["fi !w-[20px] !h-[15px] !rounded-[2px] shadow-md", `fi-${d.value}`])
                 }, null, 2),
-                n("span", $r, " +" + $(p(d.value)), 1),
+                n("span", kr, " +" + $(p(d.value)), 1),
                 x(r(V), {
                   width: "16",
                   height: "16",
@@ -6264,10 +6265,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       }, 8, ["error-message", "model-value", "placeholder", "label", "is-inline-label", "disabled", "hint", "is-required", "label-icon", "tooltip-text", "tooltip-options", "onKeydown"]);
     };
   }
-}, Vr = ["id", "value", "checked", "name", "disabled"], Ir = ["for"], Tr = {
+}, Ir = ["id", "value", "checked", "name", "disabled"], Tr = ["for"], Dr = {
   key: 0,
   class: "px-3 py-2 whitespace-nowrap"
-}, Dr = {
+}, Ar = {
   __name: "OcRadio",
   props: {
     modelValue: [String, Boolean],
@@ -6305,7 +6306,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           class: "radio-button__input absolute opacity-0 w-0 h-0",
           type: "radio",
           onInput: a[0] || (a[0] = (l) => s.$emit("update:modelValue", l.target.value))
-        }, null, 40, Vr),
+        }, null, 40, Ir),
         n("label", {
           for: e.groupName + e.id,
           class: v(["radio-button__label flex gap-x-3 relative items-center cursor-pointer transition-all duration-300 text-oc-text-500", {
@@ -6337,7 +6338,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           e.labelIcon ? (t(), y(r(le), fe(F({ key: 2 }, e.tooltipOptions)), {
             popper: S(() => [
               k(s.$slots, "tooltipText", {}, () => [
-                e.tooltipText ? (t(), i("div", Tr, $(e.tooltipText), 1)) : m("", !0)
+                e.tooltipText ? (t(), i("div", Dr, $(e.tooltipText), 1)) : m("", !0)
               ])
             ]),
             default: S(() => [
@@ -6350,12 +6351,12 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             ]),
             _: 3
           }, 16)) : m("", !0)
-        ], 10, Ir)
+        ], 10, Tr)
       ]),
       _: 3
     }, 8, ["class", "error-message", "hint"]));
   }
-}, Ar = {
+}, Mr = {
   __name: "OcRadioGroup",
   props: {
     alignment: {
@@ -6392,7 +6393,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
         n("div", {
           class: v(["flex", [l.value[e.alignment], e.wrapperClass]])
         }, [
-          (t(!0), i(L, null, R(e.radio, (u, f) => (t(), y(r(Dr), {
+          (t(!0), i(L, null, R(e.radio, (u, f) => (t(), y(r(Ar), {
             id: u.value,
             key: f,
             class: v({ "!w-fit": !e.isBlock }),
@@ -6415,10 +6416,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       _: 1
     }, 8, ["label", "error-message", "hint"]));
   }
-}, Mr = { class: "flex flex-col gap-y-2 oc-range-input" }, jr = { class: "flex gap-x-3" }, Pr = {
+}, jr = { class: "flex flex-col gap-y-2 oc-range-input" }, Pr = { class: "flex gap-x-3" }, Lr = {
   key: 0,
   class: "flex pt-4"
-}, Lr = {
+}, Er = {
   __name: "OcRangeInput",
   props: {
     maxLimit: {
@@ -6462,14 +6463,14 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
     };
     return Ce(() => {
       a.onlyInput || c.value.updateSlider();
-    }), (b, T) => (t(), i("div", Mr, [
+    }), (b, T) => (t(), i("div", jr, [
       x(r(pe), {
         label: e.label,
         hint: e.hint,
         "error-message": e.errorMessage
       }, {
         default: S(() => [
-          n("div", jr, [
+          n("div", Pr, [
             x(r(xe), {
               "model-value": o.value,
               label: "From",
@@ -6485,7 +6486,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
               "onUpdate:modelValue": T[1] || (T[1] = (j) => u(j, 1))
             }, null, 8, ["model-value"])
           ]),
-          e.onlyInput ? m("", !0) : (t(), i("div", Pr, [
+          e.onlyInput ? m("", !0) : (t(), i("div", Lr, [
             x(r(wt), {
               ref_key: "slider",
               ref: c,
@@ -6502,24 +6503,21 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
       }, 8, ["label", "hint", "error-message"])
     ]));
   }
-}, Er = {
+}, zr = {
   key: 0,
   class: "flex flex-wrap gap-2 overflow-hidden"
-}, zr = {
+}, Nr = {
   key: 0,
   class: "text-oc-text-300 md:text-base text-lg"
-}, Nr = {
+}, Rr = {
   key: 2,
   class: "whitespace-nowrap flex gap-x-3 text-lg md:text-base items-center overflow-hidden"
-}, Rr = {
+}, Fr = {
   key: 1,
   class: "text-oc-text-300"
-}, Fr = {
+}, Ur = {
   key: 2,
   class: "truncate"
-}, Ur = {
-  key: 3,
-  class: "text-oc-text-300"
 }, qr = {
   key: 0,
   class: "sticky px-3 pt-3 top-0 z-10 bg-white"
@@ -6591,7 +6589,8 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
     isClearable: Boolean,
     searchKeywords: String,
     isLoading: Boolean,
-    menuClasses: String
+    menuClasses: String,
+    dropdownClasses: String
   },
   emits: {
     addNew: [],
@@ -6725,9 +6724,11 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
             D[7] || (D[7] = (U) => c.value = U),
             N
           ],
-          class: v(["w-full", {
-            "!bg-transparent": e.isTransparent
-          }]),
+          class: v(["w-full", [
+            {
+              "!bg-transparent": e.isTransparent
+            }
+          ]]),
           distance: 4,
           "popper-class": "w-full",
           placement: "bottom-end",
@@ -6824,15 +6825,18 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
           }),
           default: S(() => [
             n("div", {
-              class: v(["border min-h-[36px] w-full px-3 flex justify-between items-center bg-white cursor-pointer gap-x-3 rounded", {
-                "border-oc-error": e.errorMessage && !e.isDisabled,
-                "pointer-events-none !bg-oc-bg-dark": e.isDisabled,
-                "py-3": e.multiple,
-                "border-none !min-h-[30px] !px-0": e.isTransparent && !e.isSlim,
-                "border-none !min-h-[18px] !px-0": e.isSlim
-              }])
+              class: v(["border min-h-[36px] w-full px-3 flex justify-between items-center bg-white cursor-pointer gap-x-3 rounded", [
+                e.dropdownClasses,
+                {
+                  "border-oc-error": e.errorMessage && !e.isDisabled,
+                  "pointer-events-none !bg-oc-bg-dark": e.isDisabled,
+                  "py-3": e.multiple,
+                  "border-none !min-h-[30px] !px-0": e.isTransparent && !e.isSlim,
+                  "border-none !min-h-[18px] !px-0": e.isSlim
+                }
+              ]])
             }, [
-              e.multiple ? (t(), i("div", Er, [
+              e.multiple ? (t(), i("div", zr, [
                 k(P.$slots, "selection", {}, () => [
                   (t(!0), i(L, null, R(e.maxVisibleOptions ? C.value.slice(0, e.maxVisibleOptions) : C.value, (U) => (t(), y(r(ae), F({
                     key: U.value,
@@ -6849,7 +6853,7 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                     label: `+${C.value.length - e.maxVisibleOptions}`
                   }, null, 8, ["label"])) : m("", !0)
                 ]),
-                C.value.length === 0 ? (t(), i("span", zr, $(e.placeholder), 1)) : m("", !0)
+                C.value.length === 0 ? (t(), i("span", Nr, $(e.placeholder), 1)) : m("", !0)
               ])) : m("", !0),
               e.isInlineSearch && e.isFilterable && !C.value ? (t(), y(r(xe), {
                 key: 1,
@@ -6873,15 +6877,18 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
                   ]),
                   key: "0"
                 } : void 0
-              ]), 1032, ["modelValue", "placeholder", "is-readonly"])) : (t(), i("span", Nr, [
+              ]), 1032, ["modelValue", "placeholder", "is-readonly"])) : (t(), i("span", Rr, [
                 e.icon ? (t(), y(r(V), {
                   key: 0,
                   name: e.icon,
                   width: "16",
                   height: "16"
                 }, null, 8, ["name"])) : m("", !0),
-                e.isInlineLabel && e.label ? (t(), i("span", Rr, $(e.label) + ": ", 1)) : m("", !0),
-                C.value ? (t(), i("span", Fr, $(C.value.label), 1)) : (t(), i("span", Ur, $(e.placeholder), 1))
+                e.isInlineLabel && e.label ? (t(), i("span", Fr, $(e.label) + ": ", 1)) : m("", !0),
+                C.value ? (t(), i("span", Ur, $(C.value.label), 1)) : (t(), i("span", {
+                  key: 3,
+                  class: v(e.dropdownClasses ? "" : "text-oc-text-300")
+                }, $(e.placeholder), 3))
               ])),
               e.modelValue && e.isClearable ? (t(), y(r(V), {
                 key: 3,
@@ -6893,7 +6900,10 @@ const tt = /* @__PURE__ */ he(es, [["render", ls]]), as = { class: "flex" }, ns
               })) : m("", !0),
               e.hideChevron ? m("", !0) : (t(), y(r(V), {
                 key: 4,
-                class: v(["w-5 h-5 text-oc-text-400 transition-all shrink-0 duration-500", c.value && "-rotate-180"]),
+                class: v(["w-5 h-5 transition-all shrink-0 duration-500", {
+                  "-rotate-180": c.value,
+                  "text-oc-text-400": !e.dropdownClasses
+                }]),
                 name: "chevron-down"
               }, null, 8, ["class"]))
             ], 2)
@@ -10011,21 +10021,21 @@ const Kd = { class: "flex flex-col gap-y-2 w-full" }, Gd = { class: "flex w-full
     const a = e, l = s, o = (g, I) => {
       l("onUpdate", g, I);
     }, d = {
-      CardInput: ir,
-      CheckboxesGroup: rr,
+      CardInput: sr,
+      CheckboxesGroup: dr,
       Input: xe,
       NumberInput: iu,
       LinkInput: ed,
       Select: Yr,
       TextArea: ad,
       Toggle: $t,
-      RadioGroup: Ar,
+      RadioGroup: Mr,
       TimePicker: Wu,
       DatePicker: tc,
       Checkbox: Te,
       Slider: wt,
-      RangeInput: Lr,
-      PhoneInput: Or,
+      RangeInput: Er,
+      PhoneInput: Vr,
       SectionItem: sc,
       SelectOptions: mc
     }, c = (g) => d[g] ? d[g] : null, u = z(() => {
@@ -10121,23 +10131,23 @@ const Kd = { class: "flex flex-col gap-y-2 w-full" }, Gd = { class: "flex w-full
       }), 128))
     ], 6)) : m("", !0);
   }
-}, sf = se(() => import("./OcDataTable-CUfaDV_D.js")), rf = se(() => import("./OcFilterSearch-TPHX4NCL.js")), df = se(() => import("./OcFilterSearchFor-Dff-v6cU.js")), cf = se(() => import("./OcFilterForm-CL1RXUTm.js")), Hu = se(
-  () => import("./OcComplexCalendar-wUfD-rjH.js")
+}, sf = se(() => import("./OcDataTable-Cmh4tRy4.js")), rf = se(() => import("./OcFilterSearch-DUCiks5c.js")), df = se(() => import("./OcFilterSearchFor-Buz_tMZP.js")), cf = se(() => import("./OcFilterForm-B4-trZUg.js")), Hu = se(
+  () => import("./OcComplexCalendar-CVFr9X5w.js")
 ), uf = se(
-  () => import("./OcComplexDatePicker-CN5P5UAb.js")
-), it = se(() => import("./OcModalCropper-CXUxP0pM.js")), mf = se(() => import("./OcCropper-C2G9bMGn.js")), Yu = se(() => import("./OcDraggable-CA_BCbpl.js")), ff = se(() => import("./OcDraggableList-DO6FTc72.js")), vf = se(() => import("./OcEmojiPicker-C0M7uAji.js")), gf = se(
-  () => import("./ThumbnailTheme-CX6k7Fi4.js")
+  () => import("./OcComplexDatePicker-DMt5okt4.js")
+), it = se(() => import("./OcModalCropper-BTWCNIhX.js")), mf = se(() => import("./OcCropper-DA1hyR4g.js")), Yu = se(() => import("./OcDraggable-CA_BCbpl.js")), ff = se(() => import("./OcDraggableList-DB_FOX4q.js")), vf = se(() => import("./OcEmojiPicker-FacYV1QS.js")), gf = se(
+  () => import("./ThumbnailTheme-BNE0T_SW.js")
 ), pf = se(
-  () => import("./ThumbnailSection-BSbhWzDC.js")
-), yf = se(() => import("./SubPlanCard-DfZmDLFG.js")), xf = se(() => import("./OcTimePopup-CXGhaOev.js")), Wu = se(() => import("./OcTimePicker-BTaVEXku.js")), hf = se(
-  () => import("./OcAccountSetupProgress-gqRg58IF.js")
+  () => import("./ThumbnailSection-Bz40um4b.js")
+), yf = se(() => import("./SubPlanCard-GQbtAHzH.js")), xf = se(() => import("./OcTimePopup-CXGhaOev.js")), Wu = se(() => import("./OcTimePicker-DODArB9H.js")), hf = se(
+  () => import("./OcAccountSetupProgress-D4wA4hdf.js")
 );
 export {
   Vm as $,
   hm as A,
   K as B,
   Ct as C,
-  gn as D,
+  pn as D,
   $m as E,
   wl as F,
   St as G,
@@ -10157,14 +10167,14 @@ export {
   km as U,
   Sm as V,
   Om as W,
-  Gn as X,
+  Xn as X,
   Cm as Y,
   Bm as Z,
   pe as _,
-  ir as a,
-  Qn as a0,
+  sr as a,
+  _n as a0,
   Um as a1,
-  Ui as a2,
+  qi as a2,
   Wm as a3,
   Ym as a4,
   Fm as a5,
@@ -10198,16 +10208,16 @@ export {
   Mm as ab,
   jm as ac,
   Pm as ad,
-  qo as ae,
-  zo as af,
+  Ho as ae,
+  No as af,
   Hm as ag,
   Lm as ah,
   Em as ai,
   zm as aj,
-  mi as ak,
-  xi as al,
-  wi as am,
-  Ci as an,
+  fi as ak,
+  hi as al,
+  $i as am,
+  Bi as an,
   Nm as ao,
   Rm as ap,
   Km as aq,
@@ -10221,14 +10231,14 @@ export {
   ye as ay,
   hu as az,
   Te as b,
-  rr as c,
+  dr as c,
   Jm as d,
   xe as e,
   Qm as f,
-  Or as g,
-  Dr as h,
-  Ar as i,
-  Lr as j,
+  Vr as g,
+  Ar as h,
+  Mr as i,
+  Er as j,
   Yr as k,
   gt as l,
   _m as m,