@kashifd/jwero-components 0.5.41 → 0.5.43

package/dist/index.es.js

@@ -284,18 +284,18 @@ function bh() {
         if (Wt && Z && typeof Wt.stack == "string") {
           for (var Ce = Wt.stack.split(`
 `), be = Z.stack.split(`
-`), Pe = Ce.length - 1, Ke = be.length - 1; Pe >= 1 && Ke >= 0 && Ce[Pe] !== be[Ke]; )
+`), Me = Ce.length - 1, Ke = be.length - 1; Me >= 1 && Ke >= 0 && Ce[Me] !== be[Ke]; )
             Ke--;
-          for (; Pe >= 1 && Ke >= 0; Pe--, Ke--)
-            if (Ce[Pe] !== be[Ke]) {
-              if (Pe !== 1 || Ke !== 1)
+          for (; Me >= 1 && Ke >= 0; Me--, Ke--)
+            if (Ce[Me] !== be[Ke]) {
+              if (Me !== 1 || Ke !== 1)
                 do
-                  if (Pe--, Ke--, Ke < 0 || Ce[Pe] !== be[Ke]) {
+                  if (Me--, Ke--, Ke < 0 || Ce[Me] !== be[Ke]) {
                     var Ot = `
-` + Ce[Pe].replace(" at new ", " at ");
+` + Ce[Me].replace(" at new ", " at ");
                     return W.displayName && Ot.includes("<anonymous>") && (Ot = Ot.replace("<anonymous>", W.displayName)), typeof W == "function" && re.set(W, Ot), Ot;
                   }
-                while (Pe >= 1 && Ke >= 0);
+                while (Me >= 1 && Ke >= 0);
               break;
             }
         }
@@ -361,8 +361,8 @@ function bh() {
                 throw be.name = "Invariant Violation", be;
               }
               Ce = W[de](me, de, Z, De, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (Pe) {
-              Ce = Pe;
+            } catch (Me) {
+              Ce = Me;
             }
             Ce && !(Ce instanceof Error) && (Se(ee), C("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", Z || "React class", De, de, typeof Ce), Se(null)), Ce instanceof Error && !(Ce.message in he) && (he[Ce.message] = !0, Se(ee), C("Failed %s type: %s", De, Ce.message), Se(null));
           }
@@ -479,9 +479,9 @@ function bh() {
         for (fe in me)
           ae.call(me, fe) && !Ie.hasOwnProperty(fe) && (de[fe] = me[fe]);
         if (W && W.defaultProps) {
-          var Pe = W.defaultProps;
-          for (fe in Pe)
-            de[fe] === void 0 && (de[fe] = Pe[fe]);
+          var Me = W.defaultProps;
+          for (fe in Me)
+            de[fe] === void 0 && (de[fe] = Me[fe]);
         }
         if (Ce || be) {
           var Ke = typeof W == "function" ? W.displayName || W.name || "Unknown" : W;
@@ -609,8 +609,8 @@ Check the top-level render call using <` + De + ">.");
           (W === void 0 || typeof W == "object" && W !== null && Object.keys(W).length === 0) && (Ce += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
           var be = Bn();
           be ? Ce += be : Ce += zt();
-          var Pe;
-          W === null ? Pe = "null" : ze(W) ? Pe = "array" : W !== void 0 && W.$$typeof === t ? (Pe = "<" + (B(W.type) || "Unknown") + " />", Ce = " Did you accidentally export a JSX literal instead of a component?") : Pe = typeof W, C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", Pe, Ce);
+          var Me;
+          W === null ? Me = "null" : ze(W) ? Me = "array" : W !== void 0 && W.$$typeof === t ? (Me = "<" + (B(W.type) || "Unknown") + " />", Ce = " Did you accidentally export a JSX literal instead of a component?") : Me = typeof W, C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", Me, Ce);
         }
         var Ke = Ee(W, me, De, ee, fe);
         if (Ke == null)
@@ -9705,8 +9705,8 @@ function ix(e) {
     }
     const be = se.current.querySelector(`[data-option-index="${ee}"]`);
     if (be && (be.classList.add(`${o}-focused`), fe === "keyboard" && be.classList.add(`${o}-focusVisible`), Ce.scrollHeight > Ce.clientHeight && fe !== "mouse" && fe !== "touch")) {
-      const Pe = be, Ke = Ce.clientHeight + Ce.scrollTop, Ot = Pe.offsetTop + Pe.offsetHeight;
-      Ot > Ke ? Ce.scrollTop = Ot - Ce.clientHeight : Pe.offsetTop - Pe.offsetHeight * (D ? 1.3 : 0) < Ce.scrollTop && (Ce.scrollTop = Pe.offsetTop - Pe.offsetHeight * (D ? 1.3 : 0));
+      const Me = be, Ke = Ce.clientHeight + Ce.scrollTop, Ot = Me.offsetTop + Me.offsetHeight;
+      Ot > Ke ? Ce.scrollTop = Ot - Ce.clientHeight : Me.offsetTop - Me.offsetHeight * (D ? 1.3 : 0) < Ce.scrollTop && (Ce.scrollTop = Me.offsetTop - Me.offsetHeight * (D ? 1.3 : 0));
     }
   }), pe = Te(({
     event: Z,
@@ -9717,15 +9717,15 @@ function ix(e) {
     if (!Ie)
       return;
     const be = ht((() => {
-      const Pe = we.length - 1;
+      const Me = we.length - 1;
       if (ee === "reset")
         return $;
       if (ee === "start")
         return 0;
       if (ee === "end")
-        return Pe;
+        return Me;
       const Ke = _.current + ee;
-      return Ke < 0 ? Ke === -1 && E ? -1 : g && _.current !== -1 || Math.abs(ee) > 1 ? 0 : Pe : Ke > Pe ? Ke === Pe + 1 && E ? -1 : g || Math.abs(ee) > 1 ? Pe : 0 : Ke;
+      return Ke < 0 ? Ke === -1 && E ? -1 : g && _.current !== -1 || Math.abs(ee) > 1 ? 0 : Me : Ke > Me ? Ke === Me + 1 && E ? -1 : g || Math.abs(ee) > 1 ? Me : 0 : Ke;
     })(), fe);
     if (ke({
       index: be,
@@ -9735,8 +9735,8 @@ function ix(e) {
       if (be === -1)
         X.current.value = le;
       else {
-        const Pe = z(we[be]);
-        X.current.value = Pe, Pe.toLowerCase().indexOf(le.toLowerCase()) === 0 && le.length > 0 && X.current.setSelectionRange(le.length, Pe.length);
+        const Me = z(we[be]);
+        X.current.value = Me, Me.toLowerCase().indexOf(le.toLowerCase()) === 0 && le.length > 0 && X.current.setSelectionRange(le.length, Me.length);
       }
   }), xe = () => {
     const Z = (ee, fe) => {
@@ -9828,8 +9828,8 @@ function ix(e) {
         Ke.length > 1 && console.error([`MUI: The \`isOptionEqualToValue\` method of ${u} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${Ke.length} matches.`].join(`
 `));
       }
-      const Pe = bs(be, (Ke) => P(ee, Ke));
-      Pe === -1 ? be.push(ee) : de !== "freeSolo" && (be.splice(Pe, 1), Ce = "removeOption");
+      const Me = bs(be, (Ke) => P(ee, Ke));
+      Me === -1 ? be.push(ee) : de !== "freeSolo" && (be.splice(Me, 1), Ce = "removeOption");
     }
     ze(Z, be), $e(Z, be, Ce, {
       option: ee
@@ -11952,11 +11952,11 @@ const jx = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "Chip
       disabled: k
     }, He(Ce));
     ae ? Dt = ae(we, de, xt) : Dt = we.map((Ce, be) => {
-      const Pe = de({
+      const Me = de({
         index: be
       }), {
         key: Ke
-      } = Pe, Ot = ne(Pe, Bx);
+      } = Me, Ot = ne(Me, Bx);
       return /* @__PURE__ */ p.jsx(Sl, m({
         label: $t(Ce),
         size: le
@@ -11984,8 +11984,8 @@ const jx = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "Chip
   }, de.key)), yn = _ || ((de, Ce) => {
     const {
       key: be
-    } = de, Pe = ne(de, Fx);
-    return /* @__PURE__ */ p.jsx("li", m({}, Pe, {
+    } = de, Me = ne(de, Fx);
+    return /* @__PURE__ */ p.jsx("li", m({}, Me, {
       children: $t(Ce)
     }), be);
   }), Sn = (de, Ce) => {
@@ -12030,7 +12030,7 @@ const jx = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "Chip
     children: Ne.map((de, Ce) => L ? bn({
       key: de.key,
       group: de.group,
-      children: de.options.map((be, Pe) => Sn(be, de.index + Pe))
+      children: de.options.map((be, Me) => Sn(be, de.index + Me))
     }) : Sn(de, Ce))
   }))) : J && Ne.length === 0 ? fe = ee(/* @__PURE__ */ p.jsx(Yx, {
     className: it.loading,
@@ -16478,7 +16478,7 @@ process.env.NODE_ENV !== "production" && (Pl.propTypes = {
    */
   variant: n.oneOf(["filled", "outlined", "standard"])
 });
-const Me = Cv({
+const Pe = Cv({
   createStyledComponent: q("div", {
     name: "MuiStack",
     slot: "Root",
@@ -16489,7 +16489,7 @@ const Me = Cv({
     name: "MuiStack"
   })
 });
-process.env.NODE_ENV !== "production" && (Me.propTypes = {
+process.env.NODE_ENV !== "production" && (Pe.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -22372,8 +22372,8 @@ const Tn = /* @__PURE__ */ A.forwardRef(function(t, o) {
     le || Se(be.currentTarget), Qe(be), Ee.current === !0 && (Tt(!0), xe(be));
   }, Bn = (be) => {
     ze.current = !0;
-    const Pe = _.props;
-    Pe.onTouchStart && Pe.onTouchStart(be);
+    const Me = _.props;
+    Me.onTouchStart && Me.onTouchStart(be);
   }, Fn = (be) => {
     Bn(be), He.clear(), Fe.clear(), ht(), st.current = document.body.style.WebkitUserSelect, document.body.style.WebkitUserSelect = "none", Xe.start(j, () => {
       document.body.style.WebkitUserSelect = st.current, xe(be);
@@ -22386,8 +22386,8 @@ const Tn = /* @__PURE__ */ A.forwardRef(function(t, o) {
   A.useEffect(() => {
     if (!Ue)
       return;
-    function be(Pe) {
-      (Pe.key === "Escape" || Pe.key === "Esc") && pe(Pe);
+    function be(Me) {
+      (Me.key === "Escape" || Me.key === "Esc") && pe(Me);
     }
     return document.addEventListener("keydown", be), () => {
       document.removeEventListener("keydown", be);
@@ -22396,8 +22396,8 @@ const Tn = /* @__PURE__ */ A.forwardRef(function(t, o) {
   const to = Ye(_.ref, $e, Se, o);
   !ce && ce !== 0 && (Ue = !1);
   const $t = A.useRef(), xt = (be) => {
-    const Pe = _.props;
-    Pe.onMouseMove && Pe.onMouseMove(be), yr = {
+    const Me = _.props;
+    Me.onMouseMove && Me.onMouseMove(be), yr = {
       x: be.clientX,
       y: be.clientY
     }, $t.current && $t.current.update();
@@ -22419,7 +22419,7 @@ const Tn = /* @__PURE__ */ A.forwardRef(function(t, o) {
 `));
   const no = A.useMemo(() => {
     var be;
-    let Pe = [{
+    let Me = [{
       name: "arrow",
       enabled: !!Oe,
       options: {
@@ -22427,8 +22427,8 @@ const Tn = /* @__PURE__ */ A.forwardRef(function(t, o) {
         padding: 4
       }
     }];
-    return (be = X.popperOptions) != null && be.modifiers && (Pe = Pe.concat(X.popperOptions.modifiers)), m({}, X.popperOptions, {
-      modifiers: Pe
+    return (be = X.popperOptions) != null && be.modifiers && (Me = Me.concat(X.popperOptions.modifiers)), m({}, X.popperOptions, {
+      modifiers: Me
     });
   }, [Oe, X]), yn = m({}, D, {
     isRtl: he,
@@ -24717,7 +24717,7 @@ const Hf = (e) => /* @__PURE__ */ p.jsxs(
   loaderProps: l,
   variant: c = "solid"
 }) => /* @__PURE__ */ p.jsxs(
-  Me,
+  Pe,
   {
     onClick: t,
     direction: "row",
@@ -37329,8 +37329,8 @@ const Qm = () => /* @__PURE__ */ p.jsx(
 }) => {
   const y = d ?? "#fff", b = r;
   return /* @__PURE__ */ p.jsxs(Et, { sx: l, children: [
-    (e || i) && /* @__PURE__ */ p.jsxs(Me, { direction: "row", justifyContent: "space-between", children: [
-      (e || f) && /* @__PURE__ */ p.jsxs(Me, { direction: "row", alignItems: "center", sx: { gap: 1 }, children: [
+    (e || i) && /* @__PURE__ */ p.jsxs(Pe, { direction: "row", justifyContent: "space-between", children: [
+      (e || f) && /* @__PURE__ */ p.jsxs(Pe, { direction: "row", alignItems: "center", sx: { gap: 1 }, children: [
         e && /* @__PURE__ */ p.jsx(Je, { variant: "xlRegular", ...h, children: e }),
         f && /* @__PURE__ */ p.jsx(Tn, { title: f, children: /* @__PURE__ */ p.jsx(Hf, { height: 18, width: 18 }) })
       ] }),
@@ -37572,10 +37572,10 @@ const Qm = () => /* @__PURE__ */ p.jsx(
       open: e,
       onClose: t,
       PaperProps: { sx: { borderRadius: "1rem" } },
-      children: /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "1.5rem", padding: "1rem" }, children: [
-        /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.75rem" }, children: [
+      children: /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "1.5rem", padding: "1rem" }, children: [
+        /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.75rem" }, children: [
           /* @__PURE__ */ p.jsxs(
-            Me,
+            Pe,
             {
               direction: "row",
               alignItems: "center",
@@ -37605,7 +37605,7 @@ const Qm = () => /* @__PURE__ */ p.jsx(
               ]
             }
           ),
-          /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.25rem" }, children: [
+          /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.25rem" }, children: [
             /* @__PURE__ */ p.jsx(Je, { variant: "xxlSemibold", children: o }),
             r && /* @__PURE__ */ p.jsx(
               Je,
@@ -37622,7 +37622,7 @@ const Qm = () => /* @__PURE__ */ p.jsx(
             ((h = l.addComponent) == null ? void 0 : h.position) === "after" && l.addComponent.component
           ] }),
           (c == null ? void 0 : c.infoTitle) && /* @__PURE__ */ p.jsxs(
-            Me,
+            Pe,
             {
               alignItems: "center",
               direction: "row",
@@ -37640,7 +37640,7 @@ const Qm = () => /* @__PURE__ */ p.jsx(
           )
         ] }),
         /* @__PURE__ */ p.jsxs(
-          Me,
+          Pe,
           {
             direction: "row",
             alignItems: "center",
@@ -37721,7 +37721,7 @@ const Qm = () => /* @__PURE__ */ p.jsx(
       placement: o,
       sx: { zIndex: 9999 },
       children: ({ TransitionProps: c }) => /* @__PURE__ */ p.jsx(Lr, { onClickAway: r, children: /* @__PURE__ */ p.jsx(xo, { ...c, timeout: 350, children: /* @__PURE__ */ p.jsx(
-        Me,
+        Pe,
         {
           sx: {
             margin: "0.5rem",
@@ -37892,14 +37892,14 @@ const rM = ({
   value: t,
   onChange: o
 }) => /* @__PURE__ */ p.jsx(
-  Me,
+  Pe,
   {
     sx: {
       gap: "1rem",
       padding: "1rem 4rem 1rem 1.5rem"
     },
     children: vo.isArrayWithValues(e) && e.map((r) => /* @__PURE__ */ p.jsxs(
-      Me,
+      Pe,
       {
         onClick: () => o(r.value),
         direction: "row",
@@ -37955,7 +37955,7 @@ const rM = ({
   )) == null ? void 0 : h.label;
   return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
     /* @__PURE__ */ p.jsxs(
-      Me,
+      Pe,
       {
         onClick: c,
         ref: a,
@@ -37977,7 +37977,7 @@ const rM = ({
           }
         },
         children: [
-          /* @__PURE__ */ p.jsxs(Me, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+          /* @__PURE__ */ p.jsxs(Pe, { direction: "row", alignItems: "center", spacing: 0.75, children: [
             /* @__PURE__ */ p.jsx(_l, {}),
             /* @__PURE__ */ p.jsx(Je, { children: f })
           ] }),
@@ -38176,14 +38176,14 @@ const rM = ({
             maxWidth: "30vw"
           },
           children: /* @__PURE__ */ p.jsxs(
-            Me,
+            Pe,
             {
               direction: "row",
               alignItems: "center",
               justifyContent: "space-between",
               sx: { padding: "0.75rem 1rem 0.75rem 0rem", gap: "2.5rem" },
               children: [
-                /* @__PURE__ */ p.jsxs(Me, { direction: "row", sx: { gap: "1rem" }, children: [
+                /* @__PURE__ */ p.jsxs(Pe, { direction: "row", sx: { gap: "1rem" }, children: [
                   /* @__PURE__ */ p.jsx(
                     Et,
                     {
@@ -38194,7 +38194,7 @@ const rM = ({
                       }
                     }
                   ),
-                  /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.25rem", padding: "0.25rem 0" }, children: [
+                  /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.25rem", padding: "0.25rem 0" }, children: [
                     /* @__PURE__ */ p.jsx(
                       Je,
                       {
@@ -38214,7 +38214,7 @@ const rM = ({
                   ] })
                 ] }),
                 (s == null ? void 0 : s.text) && /* @__PURE__ */ p.jsx(
-                  Me,
+                  Pe,
                   {
                     onClick: s.onClick ? s.onClick : u,
                     sx: { cursor: "pointer" },
@@ -38510,7 +38510,7 @@ const rM = ({
   var a, i, l, c;
   const s = e === "custom" ? t : fM[e];
   return /* @__PURE__ */ p.jsxs(
-    Me,
+    Pe,
     {
       direction: "row",
       alignItems: "center",
@@ -38750,7 +38750,7 @@ const GM = ({
                     Gs,
                     {
                       label: /* @__PURE__ */ p.jsxs(
-                        Me,
+                        Pe,
                         {
                           direction: "row",
                           sx: {
@@ -38764,7 +38764,7 @@ const GM = ({
                             !x.onlyIcon && /* @__PURE__ */ p.jsx(Je, { children: x.label }),
                             x.icon && !x.iconAtStart && x.icon,
                             x.count && /* @__PURE__ */ p.jsx(
-                              Me,
+                              Pe,
                               {
                                 sx: {
                                   paddingLeft: x.icon && !x.iconAtStart ? "0.75rem" : "1rem"
@@ -38867,7 +38867,7 @@ const GM = ({
           }
         }
       },
-      children: /* @__PURE__ */ p.jsx(Me, { children: e })
+      children: /* @__PURE__ */ p.jsx(Pe, { children: e })
     }
   );
 }, JM = ({
@@ -38881,7 +38881,7 @@ const GM = ({
       "The 'options' prop must be an array with at least one element."
     );
   return /* @__PURE__ */ p.jsx(
-    Me,
+    Pe,
     {
       direction: "row",
       alignItems: "center",
@@ -38895,7 +38895,7 @@ const GM = ({
       children: e == null ? void 0 : e.map((s, a) => {
         var i, l, c, u, d;
         return /* @__PURE__ */ p.jsx(Tn, { title: (i = s.labelProps) == null ? void 0 : i.text, children: /* @__PURE__ */ p.jsxs(
-          Me,
+          Pe,
           {
             onClick: () => o == null ? void 0 : o(s.value),
             direction: "row",
@@ -38944,20 +38944,22 @@ const GM = ({
   title: e,
   subTitle: t,
   onClose: o,
-  endIconProps: r = {
+  titleComponent: r,
+  titleIconProps: s,
+  endIconProps: a = {
     flag: !0,
     onClickFunction: o,
     icon: /* @__PURE__ */ p.jsx($a, {})
   },
-  stepProps: s = {
+  stepProps: i = {
     flag: !0,
     custom_name: "Steps",
     total_steps: 1,
     current_step: 1
   },
-  sx: a
-}) => /* @__PURE__ */ p.jsxs(
-  Me,
+  sx: l
+}) => /* @__PURE__ */ p.jsx(
+  Pe,
   {
     direction: "row",
     alignItems: "center",
@@ -38966,68 +38968,103 @@ const GM = ({
       padding: "1rem",
       background: "var(--Gradient-4, linear-gradient(135deg, #FFF0EC 24.4%, #F5FFF9 97.75%))",
       borderBottom: "1px solid rgba(85, 87, 112, 0.08)",
-      ...a
+      ...l
     },
-    children: [
-      /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.65rem" }, children: [
-        /* @__PURE__ */ p.jsxs(Me, { direction: "row", alignItems: "center", sx: { gap: "0.5rem" }, children: [
-          (r == null ? void 0 : r.flag) && /* @__PURE__ */ p.jsx(
-            On,
-            {
-              disableRipple: !0,
-              sx: {
-                margin: 0,
-                padding: "0.05rem",
-                backgroundColor: "white",
-                "&:hover": {
-                  boxShadow: "0px 0px 1px 0px rgba(0, 0, 0, 0.40)"
-                }
-              },
-              onClick: o,
-              children: (r == null ? void 0 : r.flag) && (r == null ? void 0 : r.icon) && (r == null ? void 0 : r.icon)
-            }
-          ),
-          (s == null ? void 0 : s.flag) && /* @__PURE__ */ p.jsx(
-            Me,
-            {
-              sx: {
-                padding: "0.35rem 0.5rem",
-                borderRadius: "0.5rem",
-                backgroundColor: "white",
+    children: /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.65rem", width: "100%" }, children: [
+      /* @__PURE__ */ p.jsxs(Pe, { direction: "row", alignItems: "center", sx: { gap: "0.5rem" }, children: [
+        (a == null ? void 0 : a.flag) && /* @__PURE__ */ p.jsx(
+          On,
+          {
+            disableRipple: !0,
+            sx: {
+              margin: 0,
+              padding: "0.05rem",
+              backgroundColor: "white",
+              "&:hover": {
                 boxShadow: "0px 0px 1px 0px rgba(0, 0, 0, 0.40)"
-              },
-              children: /* @__PURE__ */ p.jsxs(
-                Mt,
-                {
-                  sx: {
-                    fontSize: "0.75rem",
-                    lineHeight: "normal",
-                    letterSpacing: "-0.015rem",
-                    fontWeight: 500
-                  },
-                  children: [
-                    /* @__PURE__ */ p.jsxs("span", { style: { color: "#012687" }, children: [
-                      s != null && s.custom_name ? (s == null ? void 0 : s.custom_name) + " " : "Steps ",
-                      (s == null ? void 0 : s.current_step) ?? "1 "
-                    ] }),
-                    /* @__PURE__ */ p.jsxs("span", { style: { color: "rgba(85, 87, 112, 0.5) " }, children: [
-                      " ",
-                      "/ ",
-                      (s == null ? void 0 : s.total_steps) ?? 1
-                    ] })
-                  ]
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ p.jsxs(Me, { children: [
-          /* @__PURE__ */ p.jsx(Je, { variant: "xxxlSemibold", children: e }),
-          t && /* @__PURE__ */ p.jsx(Je, { children: t })
-        ] })
+              }
+            },
+            onClick: o,
+            children: (a == null ? void 0 : a.flag) && (a == null ? void 0 : a.icon) && (a == null ? void 0 : a.icon)
+          }
+        ),
+        (i == null ? void 0 : i.flag) && /* @__PURE__ */ p.jsx(
+          Pe,
+          {
+            sx: {
+              padding: "0.35rem 0.5rem",
+              borderRadius: "0.5rem",
+              backgroundColor: "white",
+              boxShadow: "0px 0px 1px 0px rgba(0, 0, 0, 0.40)"
+            },
+            children: /* @__PURE__ */ p.jsxs(
+              Mt,
+              {
+                sx: {
+                  fontSize: "0.75rem",
+                  lineHeight: "normal",
+                  letterSpacing: "-0.015rem",
+                  fontWeight: 500
+                },
+                children: [
+                  /* @__PURE__ */ p.jsxs("span", { style: { color: "#012687" }, children: [
+                    i != null && i.custom_name ? (i == null ? void 0 : i.custom_name) + " " : "Steps ",
+                    (i == null ? void 0 : i.current_step) ?? "1 "
+                  ] }),
+                  /* @__PURE__ */ p.jsxs("span", { style: { color: "rgba(85, 87, 112, 0.5) " }, children: [
+                    " ",
+                    "/ ",
+                    (i == null ? void 0 : i.total_steps) ?? 1
+                  ] })
+                ]
+              }
+            )
+          }
+        )
       ] }),
-      /* @__PURE__ */ p.jsx(Me, {})
-    ]
+      /* @__PURE__ */ p.jsxs(Pe, { sx: { width: "100%" }, children: [
+        /* @__PURE__ */ p.jsxs(
+          Pe,
+          {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            sx: { gap: "1rem", width: "100%" },
+            children: [
+              /* @__PURE__ */ p.jsxs(Pe, { direction: "row", alignItems: "center", sx: { gap: "0.5rem" }, children: [
+                (s == null ? void 0 : s.icon) && (s == null ? void 0 : s.position) === "start" && /* @__PURE__ */ p.jsx(
+                  Pe,
+                  {
+                    sx: {
+                      borderRadius: "0.5rem",
+                      backgroundColor: "white",
+                      padding: "0.5rem",
+                      ...s == null ? void 0 : s.sx
+                    },
+                    children: s == null ? void 0 : s.icon
+                  }
+                ),
+                /* @__PURE__ */ p.jsx(Je, { variant: "xxxlSemibold", children: e }),
+                (s == null ? void 0 : s.icon) && (s == null ? void 0 : s.position) === "end" && /* @__PURE__ */ p.jsx(
+                  Pe,
+                  {
+                    sx: {
+                      borderRadius: "0.5rem",
+                      backgroundColor: "white",
+                      padding: "0.5rem",
+                      ...s == null ? void 0 : s.sx
+                    },
+                    children: s == null ? void 0 : s.icon
+                  }
+                )
+              ] }),
+              r && r
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ p.jsx(Je, { children: t })
+      ] })
+    ] })
   }
 ), ZM = ({
   primaryButtonProps: e,
@@ -39036,7 +39073,7 @@ const GM = ({
 }) => {
   const r = wt();
   return /* @__PURE__ */ p.jsxs(
-    Me,
+    Pe,
     {
       direction: "row",
       alignItems: "center",
@@ -39047,8 +39084,8 @@ const GM = ({
         borderTop: "1px solid rgba(85, 87, 112, 0.08)"
       },
       children: [
-        /* @__PURE__ */ p.jsx(Me, { direction: "row", alignItems: "center", children: t && /* @__PURE__ */ p.jsx(Qr, { ...t }) }),
-        /* @__PURE__ */ p.jsxs(Me, { direction: "row", alignItems: "center", sx: { gap: "1.5rem" }, children: [
+        /* @__PURE__ */ p.jsx(Pe, { direction: "row", alignItems: "center", children: t && /* @__PURE__ */ p.jsx(Qr, { ...t }) }),
+        /* @__PURE__ */ p.jsxs(Pe, { direction: "row", alignItems: "center", sx: { gap: "1.5rem" }, children: [
           (o == null ? void 0 : o.label) && /* @__PURE__ */ p.jsx(
             Je,
             {
@@ -39077,7 +39114,8 @@ const GM = ({
   primaryNavigationData: t,
   secondaryNavigationData: o,
   onClick: r = () => {
-  }
+  },
+  boxSx: s
 }) => /* @__PURE__ */ p.jsxs(
   Et,
   {
@@ -39089,20 +39127,21 @@ const GM = ({
       justifyContent: "space-between",
       backgroundColor: "#012687",
       padding: "2rem 0",
-      height: "100%"
+      height: "100%",
+      ...s
     },
     children: [
       /* @__PURE__ */ p.jsx(
-        Me,
+        Pe,
         {
           alignItems: "center",
           sx: { gap: "2rem", height: "100%", padding: "0 0.5rem" },
-          children: /* @__PURE__ */ p.jsx(Me, { alignItems: "center", sx: { gap: "1rem" }, children: t.map((s) => {
-            var a;
-            return /* @__PURE__ */ p.jsx(Tn, { title: s.label, placement: "right", children: /* @__PURE__ */ p.jsxs(
+          children: /* @__PURE__ */ p.jsx(Pe, { alignItems: "center", sx: { gap: "1rem" }, children: t.map((a) => {
+            var i;
+            return /* @__PURE__ */ p.jsx(Tn, { title: a.label, placement: "right", children: /* @__PURE__ */ p.jsxs(
               Et,
               {
-                onClick: () => r(s),
+                onClick: () => r(a),
                 sx: {
                   // padding: "0.85rem 0.85rem",
                   height: "2.5rem",
@@ -39114,32 +39153,32 @@ const GM = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  backgroundColor: s.value === e ? "#616ADA" : "transparent",
+                  backgroundColor: a.value === e ? "#616ADA" : "transparent",
                   color: "#ffffff",
                   "&:hover": {
                     backgroundColor: "#acb1ec"
                   }
                 },
                 children: [
-                  s.icon,
-                  ((a = s.badge_props) == null ? void 0 : a.badge_count) && s.badge_props.badge_count > 0 && /* @__PURE__ */ p.jsx(Et, { sx: { position: "absolute", top: 0, right: "4px" }, children: /* @__PURE__ */ p.jsx(
+                  a.icon,
+                  ((i = a.badge_props) == null ? void 0 : i.badge_count) && a.badge_props.badge_count > 0 && /* @__PURE__ */ p.jsx(Et, { sx: { position: "absolute", top: 0, right: "4px" }, children: /* @__PURE__ */ p.jsx(
                     Rp,
                     {
                       type: "multi",
                       stroke: !0,
-                      count: s.badge_props.badge_count
+                      count: a.badge_props.badge_count
                     }
                   ) })
                 ]
               }
-            ) }, s.value);
+            ) }, a.value);
           }) })
         }
       ),
-      /* @__PURE__ */ p.jsx(Me, { alignItems: "center", sx: { gap: "1rem" }, children: o.map((s) => /* @__PURE__ */ p.jsx(Tn, { title: s.label, placement: "right", children: /* @__PURE__ */ p.jsx(
+      /* @__PURE__ */ p.jsx(Pe, { alignItems: "center", sx: { gap: "1rem" }, children: o.map((a) => /* @__PURE__ */ p.jsx(Tn, { title: a.label, placement: "right", children: /* @__PURE__ */ p.jsx(
         Et,
         {
-          onClick: () => r(s),
+          onClick: () => r(a),
           sx: {
             padding: "0.85rem 0.85rem",
             cursor: "pointer",
@@ -39148,15 +39187,15 @@ const GM = ({
             alignItems: "center",
             justifyContent: "center",
             transition: "0.3s ease",
-            backgroundColor: s.value === e ? "#616ADA" : "transparent",
+            backgroundColor: a.value === e ? "#616ADA" : "transparent",
             color: "#ffffff",
             "&:hover": {
               backgroundColor: "#acb1ec"
             }
           },
-          children: s.icon
+          children: a.icon
         }
-      ) }, s.value)) })
+      ) }, a.value)) })
     ]
   }
 ), t2 = ({
@@ -39283,7 +39322,7 @@ const GM = ({
     title: (d) => /* @__PURE__ */ p.jsx(Je, { children: "TITLE" }),
     event: (d) => /* @__PURE__ */ p.jsx(Je, { children: "EVENT" })
   };
-  return /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "1rem", ...l }, children: [
+  return /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "1rem", ...l }, children: [
     s,
     /* @__PURE__ */ p.jsx(
       xM,
@@ -39295,7 +39334,7 @@ const GM = ({
         onClick: a
       }
     ),
-    i.flag && /* @__PURE__ */ p.jsx(Me, { direction: "row", justifyContent: "center", children: /* @__PURE__ */ p.jsx(
+    i.flag && /* @__PURE__ */ p.jsx(Pe, { direction: "row", justifyContent: "center", children: /* @__PURE__ */ p.jsx(
       CM,
       {
         currentPage: i.currentPage,
@@ -39574,7 +39613,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
     r && /* @__PURE__ */ p.jsx(SM, { size: d }),
     s && /* @__PURE__ */ p.jsx(DM, { size: d }),
     /* @__PURE__ */ p.jsx(
-      Me,
+      Pe,
       {
         direction: "row",
         justifyContent: "center",
@@ -39604,7 +39643,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
       }
     ),
     /* @__PURE__ */ p.jsx(
-      Me,
+      Pe,
       {
         direction: "row",
         justifyContent: "center",
@@ -39627,7 +39666,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
   const o = wt();
   if (vo.isArrayWithValues(e))
     return /* @__PURE__ */ p.jsx(
-      Me,
+      Pe,
       {
         sx: {
           padding: "0.5rem 0",
@@ -39638,7 +39677,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
         children: e.map((r, s) => {
           var a, i, l, c, u, d, f, h;
           return /* @__PURE__ */ p.jsxs(
-            Me,
+            Pe,
             {
               sx: {
                 width: "100%",
@@ -39647,7 +39686,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
               },
               children: [
                 (r.title || ((a = r == null ? void 0 : r.iconProps) == null ? void 0 : a.icon)) && /* @__PURE__ */ p.jsxs(
-                  Me,
+                  Pe,
                   {
                     direction: "row",
                     alignItems: "center",
@@ -39662,7 +39701,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
                 (h = r.options) == null ? void 0 : h.map((y) => {
                   var b, g, v, x, C, S;
                   return /* @__PURE__ */ p.jsx(Tn, { title: y != null && y.tooltip ? y == null ? void 0 : y.tooltip : "", children: /* @__PURE__ */ p.jsxs(
-                    Me,
+                    Pe,
                     {
                       onClick: y.onClick,
                       direction: "row",
@@ -39682,7 +39721,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
                       },
                       children: [
                         /* @__PURE__ */ p.jsxs(
-                          Me,
+                          Pe,
                           {
                             direction: "row",
                             alignItems: "center",
@@ -39729,7 +39768,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
   };
   return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
     /* @__PURE__ */ p.jsxs(
-      Me,
+      Pe,
       {
         onClick: y,
         ref: d,
@@ -39751,7 +39790,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
         },
         children: [
           /* @__PURE__ */ p.jsxs(
-            Me,
+            Pe,
             {
               direction: "row",
               alignItems: "center",
@@ -39840,10 +39879,10 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
       backgroundSize: "cover",
       ...i
     },
-    children: /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.5rem" }, children: [
+    children: /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.5rem" }, children: [
       /* @__PURE__ */ p.jsx(Je, { variant: "xlMedium", ...s, children: e == null ? void 0 : e.label }),
       /* @__PURE__ */ p.jsxs(
-        Me,
+        Pe,
         {
           sx: {
             gap: "0.5rem",
@@ -39851,9 +39890,9 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
           },
           children: [
             /* @__PURE__ */ p.jsx(Je, { variant: "xxlSemibold", ...a, children: e == null ? void 0 : e.total_number }),
-            (t || r && (e == null ? void 0 : e.subData)) && /* @__PURE__ */ p.jsxs(Me, { sx: { gap: "0.75rem" }, children: [
+            (t || r && (e == null ? void 0 : e.subData)) && /* @__PURE__ */ p.jsxs(Pe, { sx: { gap: "0.75rem" }, children: [
               t && /* @__PURE__ */ p.jsx(
-                Me,
+                Pe,
                 {
                   sx: {
                     gap: "0.5rem",
@@ -39878,7 +39917,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
                 }
               ),
               r && (e == null ? void 0 : e.subData) && /* @__PURE__ */ p.jsx(
-                Me,
+                Pe,
                 {
                   direction: "row",
                   spacing: 2,
@@ -39895,7 +39934,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
       )
     ] })
   }
-), MM = pl(Me)(({}) => ({
+), MM = pl(Pe)(({}) => ({
   boxShadow: "0px 0px 0.8px 0px rgba(0, 0, 0, 0.40)",
   padding: "0.25rem 0.5rem",
   alignItems: "center",
@@ -39952,7 +39991,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
   labelBoxSx: c,
   onClick: u
 }) => /* @__PURE__ */ p.jsxs(
-  Me,
+  Pe,
   {
     sx: {
       backgroundColor: dt.colors.surface_white,
@@ -39962,7 +40001,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
     },
     children: [
       e && /* @__PURE__ */ p.jsx(
-        Me,
+        Pe,
         {
           sx: {
             paddingBottom: "1rem",
@@ -39973,7 +40012,7 @@ const TM = /* @__PURE__ */ Xn(wM), OM = (e) => /* @__PURE__ */ p.jsxs(
           children: /* @__PURE__ */ p.jsx(Je, { variant: "xxxlSemibold", ...o, children: e })
         }
       ),
-      /* @__PURE__ */ p.jsx(Me, { sx: { gap: "1rem", ...a }, children: vo.isArrayWithValues(s) && s.map((d) => /* @__PURE__ */ p.jsx(
+      /* @__PURE__ */ p.jsx(Pe, { sx: { gap: "1rem", ...a }, children: vo.isArrayWithValues(s) && s.map((d) => /* @__PURE__ */ p.jsx(
         Tn,
         {
           title: d.access ? "" : `You don't have permission to edit ${d.label.toLowerCase() || ""}`,
@@ -40042,7 +40081,7 @@ const l2 = ({
   };
   return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
     /* @__PURE__ */ p.jsxs(
-      Me,
+      Pe,
       {
         direction: "row",
         alignItems: "center",
@@ -40056,7 +40095,7 @@ const l2 = ({
         },
         children: [
           /* @__PURE__ */ p.jsx(Tn, { title: e == null ? void 0 : e.tooltip, children: /* @__PURE__ */ p.jsx(
-            Me,
+            Pe,
             {
               onClick: e == null ? void 0 : e.onClick,
               alignItems: "center",
@@ -40074,7 +40113,7 @@ const l2 = ({
             }
           ) }),
           /* @__PURE__ */ p.jsx(Tn, { title: t == null ? void 0 : t.tooltip, children: /* @__PURE__ */ p.jsx(
-            Me,
+            Pe,
             {
               onClick: c,
               alignItems: "center",
@@ -40120,7 +40159,7 @@ const l2 = ({
   const d = wt();
   let f = t, h = o, y = r;
   return e === "search" && (f = t || zM, h = o || "No results found", y = r || `We could not find any results for ${c ? `"${c}"` : "your searched text"}`), e === "data" && (f = t || VM, h = o || "No data found", y = r || "There is no data present, please add data."), /* @__PURE__ */ p.jsxs(
-    Me,
+    Pe,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -40145,7 +40184,7 @@ const l2 = ({
           }
         ),
         /* @__PURE__ */ p.jsxs(
-          Me,
+          Pe,
           {
             alignItems: "center",
             justifyContent: "center",