qaema-ui 0.0.30 → 0.0.31

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -1,17 +1,17 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useRef as g, useState as v, useCallback as re, useEffect as D } from "react";
-import { createPortal as oe } from "react-dom";
-import { FaTimes as k, FaAngleDown as le } from "../../node_modules/react-icons/fa/index.js";
-import { useTheme as ie } from "styled-components";
-import { HelperTextWrapper as se } from "../PhoneInputField.js";
-import ae from "../SearchBar.js";
-import ce from "../Spinner.js";
-import de from "../Typography.js";
-import ue from "../../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as fe } from "../../i18n/i18n.js";
-import { StyledDropDownContainer as me, StyledlabelContainer as he, StyledDropDown as pe, StyledDropDownToggle as xe, StyledDropDownTitle as Se, IconsContainer as je, StyledDropDownMenu as we, SearchContainer as ye, StyledOptionsContainer as ge, SpinnerRow as ve, SelectedTagsContainer as Ce, SelectedTag as be } from "../../styles/Dropdown.styles.js";
-import De from "./Table/Table.js";
-const Me = (d) => {
+import { useRef as g, useState as v, useCallback as oe, useEffect as D } from "react";
+import { createPortal as le } from "react-dom";
+import { FaTimes as k, FaAngleDown as ie } from "../../node_modules/react-icons/fa/index.js";
+import { useTheme as se } from "styled-components";
+import { HelperTextWrapper as ae } from "../PhoneInputField.js";
+import ce from "../SearchBar.js";
+import de from "../Spinner.js";
+import ue from "../Typography.js";
+import fe from "../../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as me } from "../../i18n/i18n.js";
+import { StyledDropDownContainer as he, StyledlabelContainer as pe, StyledDropDown as xe, StyledDropDownToggle as Se, StyledDropDownTitle as je, IconsContainer as we, StyledDropDownMenu as ye, SearchContainer as ge, StyledOptionsContainer as ve, SpinnerRow as Ce, SelectedTagsContainer as be, SelectedTag as De } from "../../styles/Dropdown.styles.js";
+import Te from "./Table/Table.js";
+const Ne = (d) => {
   const {
     label: T,
     options: R,
@@ -31,17 +31,18 @@ const Me = (d) => {
     multiSelect: f = !1,
     isLoading: B = !1,
     currentSelectedOptions: h = [],
-    isInteractive: E = !1,
+    isInteractive: I = !1,
     //Table related props
     columns: A,
     isTableHeadVisible: V = !1,
     getDisplayValue: y,
     isRowDisabled: Q,
-    rowClassName: X
-  } = d, p = ie(), { t: I } = fe(), C = g(null), a = g(null), Y = g(null), Z = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [q, G] = v(0), [L, J] = v({ top: 0, left: 0 }), [l, x] = v(h), O = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), K = ue("dropdown"), m = re(() => {
+    rowClassName: X,
+    endIcon: Y
+  } = d, p = se(), { t: E } = me(), C = g(null), a = g(null), Z = g(null), q = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [G, J] = v(0), [L, K] = v({ top: 0, left: 0 }), [l, x] = v(h), O = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), U = fe("dropdown"), m = oe(() => {
     if (a != null && a.current) {
       const e = a.current.getBoundingClientRect();
-      G(a.current.offsetWidth / 16), J({
+      J(a.current.offsetWidth / 16), K({
         top: e.bottom + window.scrollY,
         left: e.left + window.scrollX
       });
@@ -50,23 +51,23 @@ const Me = (d) => {
   D(() => (u && (m(), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0)), () => {
     window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
   }), [u, m]), D(() => {
-    if (!Z.current) return;
+    if (!q.current) return;
     (h.length !== l.length || h.some((n, o) => {
       var c;
       return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
     })) && x(h);
   }, [h]);
-  const U = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, $ = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), _ = (e) => {
+  const _ = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, $ = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), ee = (e) => {
     if (f) {
       const n = $(e);
       let o;
       n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], x(o), w(o);
     } else
       x([e]), w(e), b(!1), i == null || i(!1);
-  }, ee = (e) => {
+  }, te = (e) => {
     const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
     x(n), w(n);
-  }, te = (e) => {
+  }, ne = (e) => {
     if (e.length === 0) return P;
     if (!f) {
       const n = e[0];
@@ -77,7 +78,7 @@ const Me = (d) => {
       if (r)
         return String(n == null ? void 0 : n[r]);
     }
-    return `${e.length} ${I("SELECTED")}`;
+    return `${e.length} ${E("SELECTED")}`;
   };
   D(() => {
     const e = (n) => {
@@ -87,14 +88,14 @@ const Me = (d) => {
       document.removeEventListener("mousedown", e);
     };
   }, [u, i]);
-  const ne = () => E || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(se, { error: s, children: s });
-  return /* @__PURE__ */ t.jsxs(me, { children: [
-    T && /* @__PURE__ */ t.jsxs(he, { children: [
+  const re = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ae, { error: s, children: s });
+  return /* @__PURE__ */ t.jsxs(he, { children: [
+    T && /* @__PURE__ */ t.jsxs(pe, { children: [
       /* @__PURE__ */ t.jsx("label", { children: T }),
-      W && /* @__PURE__ */ t.jsx("span", { children: I("OPTIONAL") })
+      W && /* @__PURE__ */ t.jsx("span", { children: E("OPTIONAL") })
     ] }),
     /* @__PURE__ */ t.jsxs(
-      pe,
+      xe,
       {
         show: u,
         onToggle: () => {
@@ -103,20 +104,21 @@ const Me = (d) => {
         placement: "bottom-start",
         autoClose: f ? "outside" : !0,
         children: [
-          /* @__PURE__ */ t.jsx(xe, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(Se, { $valid: !s, $isInteractive: E, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ t.jsx(Se, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(je, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
               z && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
               /* @__PURE__ */ t.jsx(
-                de,
+                ue,
                 {
                   component: "span",
                   variant: "mdText",
-                  color: U(s, l.length > 0, S, d.variant || "default"),
-                  children: te(l)
+                  color: _(s, l.length > 0, S, d.variant || "default"),
+                  children: ne(l)
                 }
               )
             ] }),
-            /* @__PURE__ */ t.jsxs(je, { children: [
+            /* @__PURE__ */ t.jsxs(we, { children: [
+              Y,
               !f && l.length > 0 && !S && /* @__PURE__ */ t.jsx(
                 k,
                 {
@@ -126,46 +128,46 @@ const Me = (d) => {
                   }
                 }
               ),
-              !S && /* @__PURE__ */ t.jsx(le, {})
+              !S && /* @__PURE__ */ t.jsx(ie, {})
             ] })
           ] }) }) }),
-          u && oe(
+          u && le(
             /* @__PURE__ */ t.jsxs(
-              we,
+              ye,
               {
                 ref: C,
-                $menuWidth: q,
-                $zIndex: K,
+                $menuWidth: G,
+                $zIndex: U,
                 style: {
                   position: "fixed",
                   top: `${L.top}px`,
                   left: `${L.left}px`
                 },
                 children: [
-                  H && /* @__PURE__ */ t.jsx(ye, { children: /* @__PURE__ */ t.jsx(ae, { placeholder: N, onSearch: M }) }),
+                  H && /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(ce, { placeholder: N, onSearch: M }) }),
                   /* @__PURE__ */ t.jsxs(
-                    ge,
+                    ve,
                     {
-                      ref: Y,
+                      ref: Z,
                       onScroll: (e) => {
                         var n;
                         (n = d.onScroll) == null || n.call(d, e);
                       },
                       children: [
                         /* @__PURE__ */ t.jsx(
-                          De,
+                          Te,
                           {
                             keyField: r,
                             data: R,
                             columns: A,
-                            onRowClick: (e) => _(e),
+                            onRowClick: (e) => ee(e),
                             isRowSelected: (e) => $(e),
                             isTableHeadVisible: V,
                             isRowDisabled: Q,
                             rowClassName: X
                           }
                         ),
-                        B && /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(ce, {}) })
+                        B && /* @__PURE__ */ t.jsx(Ce, { children: /* @__PURE__ */ t.jsx(de, {}) })
                       ]
                     }
                   )
@@ -177,13 +179,13 @@ const Me = (d) => {
         ]
       }
     ),
-    f && l.length > 0 && /* @__PURE__ */ t.jsx(Ce, { children: l.map((e) => /* @__PURE__ */ t.jsxs(be, { children: [
+    f && l.length > 0 && /* @__PURE__ */ t.jsx(be, { children: l.map((e) => /* @__PURE__ */ t.jsxs(De, { children: [
       y ? y(e) : String(j ? e[j] : e[r]),
-      /* @__PURE__ */ t.jsx(k, { onClick: () => ee(e) })
+      /* @__PURE__ */ t.jsx(k, { onClick: () => te(e) })
     ] }, String(e[r]))) }),
-    ne()
+    re()
   ] });
 };
 export {
-  Me as default
+  Ne as default
 };

package/dist/components/DropDownWithTable/DropDownWithTable.types.d.ts

@@ -26,4 +26,5 @@ export interface DropDownWithTableProps<T extends Record<string, unknown>> {
     getDisplayValue?: (option: T) => string;
     isRowDisabled?: (row: T) => boolean;
     rowClassName?: (row: T, index: number) => string;
+    endIcon?: React.ReactNode;
 }

package/dist/components/StepperProcess.d.ts

@@ -1159,6 +1159,7 @@ export declare const AnimatedMainContent: import("styled-components/dist/types")
     viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
 }, {
     $variant: StepVariant;
+    $showStepper: boolean;
 }>> & string & Omit<import("@react-spring/web").AnimatedComponent<"div">, keyof React.Component<any, {}, any>>;
 export declare const ScrollableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/components/StepperProcess.js

@@ -1,7 +1,7 @@
 import { j as t } from "../_virtual/jsx-runtime.js";
-import r, { useState as I, useMemo as v, useEffect as D } from "react";
+import o, { useState as I, useMemo as v, useEffect as D } from "react";
 import { Container as tt, Row as et, Col as _ } from "react-grid-system";
-import o, { useTheme as nt } from "styled-components";
+import a, { useTheme as nt } from "styled-components";
 import it from "../assets/svg/failed.svg.js";
 import rt from "../assets/svg/success.svg.js";
 import ot from "./Stepper.js";
@@ -9,38 +9,38 @@ import { breakPoints as st, device as u } from "../constants/breakPoints.constan
 import at from "../hooks/useBreakpointCheck.js";
 import N from "../hooks/useZIndex.js";
 import { useQaemaCoreTranslation as dt } from "../i18n/i18n.js";
-import { a as c } from "../node_modules/@react-spring/web/dist/react-spring_web.modern.js";
+import { a as m } from "../node_modules/@react-spring/web/dist/react-spring_web.modern.js";
 import { Scrollbar as lt } from "../styles/Scrollbar.styles.js";
 import { EmptyContent as ct, FeedbackHeader as mt, TextContainer as pt, ImageContainer as ft, StickyContent as ht } from "../styles/StatusFeedback.styles.js";
 import gt from "./Image.js";
 import ut from "./PageHeader.js";
 import H from "./Typography.js";
 import { useTransition as Y, useSpring as T } from "../node_modules/@react-spring/core/dist/react-spring_core.modern.js";
-const xt = o.div`
+const xt = a.div`
   overflow: auto;
   padding-bottom: 1.938rem;
   height: 100vh;
   width: 100%;
-`, yt = o(c.div)`
+`, yt = a(m.div)`
   background-color: ${({ theme: e }) => e.colors.secondary.lightBlue.n50};
   padding: 0 9.438rem;
-  margin-top: ${({ $variant: e, theme: s }) => e === "step" ? "16.25rem" : s.spacing.m};
-  height: ${({ $variant: e }) => e === "step" ? "calc(100vh - 16.25rem)" : "auto"};
+  margin-top: ${({ $variant: e, theme: i, $showStepper: s }) => e === "step" ? s ? "16.25rem" : "11rem" : i.spacing.m};
+  height: ${({ $variant: e, $showStepper: i }) => e === "step" && i ? "calc(100vh - 16.25rem)" : "auto"};
   width: 100%;
   @media ${u.tablet} {
     padding: 0 1.438rem;
-    margin-top: ${({ $variant: e, theme: s }) => e === "step" ? "12.25rem" : s.spacing.m};
+    margin-top: ${({ $variant: e, theme: i, $showStepper: s }) => e === "step" ? s ? "12.25rem" : "11rem" : i.spacing.m};
     height: auto;
   }
-  @media ${u.tablet} {
-    margin-top: ${({ $variant: e, theme: s }) => e === "step" ? "8.25rem" : s.spacing.m};
+  @media ${u.mobile} {
+    margin-top: ${({ $variant: e, theme: i, $showStepper: s }) => e === "step" ? s ? "8.25rem" : "4rem" : i.spacing.m};
   }
-`, vt = o(lt)`
+`, vt = a(lt)`
   background: white;
   height: 100%;
   overflow-y: ${({ $variant: e }) => e === "step" ? "auto" : "unset"};
   overflow-x: ${({ $variant: e }) => e === "step" ? "hidden" : "unset"};
-`, jt = o(c.div)`
+`, jt = a(m.div)`
   position: fixed;
   top: 0;
   left: 0;
@@ -51,12 +51,12 @@ const xt = o.div`
   align-items: center;
   z-index: ${({ $zIndex: e }) => e};
   background-color: rgba(0, 0, 0, 0.5);
-`, Ct = o.div`
+`, Ct = a.div`
   margin-inline-start: -60px;
   @media ${u.mobile} {
     margin-inline-start: -23px;
   }
-`, bt = o(c.div)`
+`, $t = a(m.div)`
   background-color: white;
   width: 100%;
   height: 100%;
@@ -65,10 +65,10 @@ const xt = o.div`
   left: 0;
   overscroll-behavior: contain;
   direction: ${({ theme: e }) => e.dir};
-`, $t = o.div`
+`, bt = a.div`
   display: flex;
   flex-direction: column;
-`, wt = o(c.div)`
+`, wt = a(m.div)`
   padding-top: 7.25rem;
   padding-inline-start: 8.438rem;
   @media ${u.tablet} {
@@ -80,27 +80,27 @@ const xt = o.div`
     padding-inline-start: 0.5rem;
     width: 100% !important;
   }
-`, At = o.div`
+`, At = a.div`
   padding-top: 1rem;
   @media ${u.mobile} {
     padding-top: 0;
   }
-`, St = o(c.div)`
+`, St = a(m.div)`
   width: 100%;
   height: 100%;
-`, kt = o.div`
+`, kt = a.div`
   display: flex;
   align-items: center;
-`, Et = o(c.div)`
+`, Et = a(m.div)`
   ${({ theme: e }) => e.dir === "rtl" ? "left: 0" : "right: 0"};
-`, W = ({ children: e }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: e }), F = ({ children: e }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: e }), w = ({ children: e }) => {
-  const s = r.Children.toArray(e).find((m) => r.isValidElement(m) && m.type === W);
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: s });
+`, W = ({ children: e }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: e }), F = ({ children: e }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: e }), A = ({ children: e }) => {
+  const i = o.Children.toArray(e).find((s) => o.isValidElement(s) && s.type === W);
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: i });
 };
-w.LeftSide = W;
-w.RightSide = F;
-const It = ({ isOpen: e, children: s }) => {
-  const m = N("stepper"), p = T({
+A.LeftSide = W;
+A.RightSide = F;
+const It = ({ isOpen: e, children: i }) => {
+  const s = N("stepper"), p = T({
     opacity: e ? 1 : 0,
     pointerEvents: e ? "all" : "none",
     config: { tension: 170, friction: 26 }
@@ -108,41 +108,41 @@ const It = ({ isOpen: e, children: s }) => {
     transform: e ? "translateY(0)" : "translateY(100%)",
     config: { tension: 170, friction: 26 }
   });
-  return /* @__PURE__ */ t.jsx(jt, { style: p, $zIndex: m, children: /* @__PURE__ */ t.jsx(bt, { style: j, onClick: (A) => A.stopPropagation(), children: /* @__PURE__ */ t.jsx(xt, { children: /* @__PURE__ */ t.jsx($t, { children: s }) }) }) });
+  return /* @__PURE__ */ t.jsx(jt, { style: p, $zIndex: s, children: /* @__PURE__ */ t.jsx($t, { style: j, onClick: (C) => C.stopPropagation(), children: /* @__PURE__ */ t.jsx(xt, { children: /* @__PURE__ */ t.jsx(bt, { children: i }) }) }) });
 }, O = ({
   initialStep: e = 0,
-  headerTitle: s = "Welcoming Business Bundle",
-  onHeaderBack: m,
+  headerTitle: i = "Welcoming Business Bundle",
+  onHeaderBack: s,
   activeStep: p,
   children: j,
-  showStepper: A = !0
+  showStepper: C = !0
 }) => {
   var z;
-  const S = nt(), M = S.dir === "rtl", [a, Q] = I(e), [R, P] = I("forward"), [k, C] = I(!1), U = at(st.mobile), { steps: f, rightContents: x } = v(() => {
-    const i = r.Children.toArray(j), h = [], g = {};
-    return i.flatMap((d) => r.isValidElement(d) && d.type === r.Fragment ? r.Children.toArray(d.props.children) : d).forEach((d, X) => {
-      if (r.isValidElement(d) && d.type === w) {
-        const l = d, $ = X, E = r.Children.toArray(l.props.children).find((y) => r.isValidElement(y) && y.type === F);
+  const S = nt(), M = S.dir === "rtl", [d, Q] = I(e), [R, P] = I("forward"), [k, $] = I(!1), U = at(st.mobile), { steps: f, rightContents: x } = v(() => {
+    const r = o.Children.toArray(j), h = [], g = {};
+    return r.flatMap((l) => o.isValidElement(l) && l.type === o.Fragment ? o.Children.toArray(l.props.children) : l).forEach((l, X) => {
+      if (o.isValidElement(l) && l.type === A) {
+        const c = l, w = X, E = o.Children.toArray(c.props.children).find((y) => o.isValidElement(y) && y.type === F);
         h.push({
-          id: $,
-          title: l.props.title,
-          description: l.props.description,
-          variant: l.props.variant,
-          statusProps: l.props.statusProps,
-          element: r.cloneElement(l, {
-            key: `step-${$}`,
-            id: $,
-            children: r.Children.toArray(l.props.children).filter((y) => !r.isValidElement(y) || y.type !== F)
+          id: w,
+          title: c.props.title,
+          description: c.props.description,
+          variant: c.props.variant,
+          statusProps: c.props.statusProps,
+          element: o.cloneElement(c, {
+            key: `step-${w}`,
+            id: w,
+            children: o.Children.toArray(c.props.children).filter((y) => !o.isValidElement(y) || y.type !== F)
           })
-        }), E && r.isValidElement(E) && (g[$] = E.props.children);
+        }), E && o.isValidElement(E) && (g[w] = E.props.children);
       }
     }), { steps: h, rightContents: g };
-  }, [j]), n = v(() => f.find((i) => i.id === a), [f, a]), b = v(() => !!x[a], [x, a]), { t: L } = dt(), Z = N("stepper");
+  }, [j]), n = v(() => f.find((r) => r.id === d), [f, d]), b = v(() => !!x[d], [x, d]), { t: L } = dt(), Z = N("stepper");
   D(() => {
     window.scrollTo(0, 0), p <= f.length && !k && P("forward"), p - 1 >= 0 && !k && P("backward"), Q(p);
   }, [p, k, f.length]);
-  const q = v(() => x[a], [a, x]), G = Y(b ? q : null, {
-    keys: () => `right-content-${a}`,
+  const q = v(() => x[d], [d, x]), G = Y(b ? q : null, {
+    keys: () => `right-content-${d}`,
     from: {
       opacity: 0,
       y: 66.5
@@ -160,18 +160,18 @@ const It = ({ isOpen: e, children: s }) => {
       damping: 20,
       mass: 1
     },
-    onStart: () => C(!0),
+    onStart: () => $(!0),
     onRest: () => {
-      C(!1);
+      $(!1);
     }
   }), J = T({
     width: b ? "60%" : "90%",
     config: { tension: 170, friction: 26 }
   }), V = v(
-    () => (i) => M ? i === "forward" ? -750 : 793 : i === "forward" ? 750 : -793,
+    () => (r) => M ? r === "forward" ? -750 : 793 : r === "forward" ? 750 : -793,
     [M]
-  ), K = Y(a, {
-    keys: (i) => i,
+  ), K = Y(d, {
+    keys: (r) => r,
     from: {
       opacity: 0,
       x: V(R),
@@ -202,8 +202,8 @@ const It = ({ isOpen: e, children: s }) => {
         mass: 1
       }
     },
-    onStart: () => C(!0),
-    onRest: () => C(!1)
+    onStart: () => $(!0),
+    onRest: () => $(!1)
   });
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     (n == null ? void 0 : n.variant) === "success" || (n == null ? void 0 : n.variant) === "fail" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
@@ -223,48 +223,48 @@ const It = ({ isOpen: e, children: s }) => {
         ) })
       ] })
     ] }) : /* @__PURE__ */ t.jsx(ht, { $zIndex: Z, children: /* @__PURE__ */ t.jsxs(wt, { style: J, children: [
-      /* @__PURE__ */ t.jsx(Ct, { children: /* @__PURE__ */ t.jsx(ut, { onHeaderBack: m, headerTitle: s }) }),
-      A && /* @__PURE__ */ t.jsx(kt, { children: n && /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsx(Ct, { children: /* @__PURE__ */ t.jsx(ut, { onHeaderBack: s, headerTitle: i }) }),
+      C && /* @__PURE__ */ t.jsx(kt, { children: n && /* @__PURE__ */ t.jsx(
         ot,
         {
           currentStep: {
             description: n.description,
-            number: a + 1,
+            number: d + 1,
             title: n.title
           },
-          filledPercentage: a / f.length * 100
+          filledPercentage: d / f.length * 100
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ t.jsx(vt, { $variant: (n == null ? void 0 : n.variant) ?? "step", children: /* @__PURE__ */ t.jsx(yt, { $variant: (n == null ? void 0 : n.variant) ?? "step", children: /* @__PURE__ */ t.jsx(tt, { fluid: !0, style: { padding: 0 }, children: /* @__PURE__ */ t.jsxs(et, { children: [
-      /* @__PURE__ */ t.jsx(_, { md: b ? 8 : 12, children: /* @__PURE__ */ t.jsx(At, { children: K((i, h) => {
+    /* @__PURE__ */ t.jsx(vt, { $variant: (n == null ? void 0 : n.variant) ?? "step", children: /* @__PURE__ */ t.jsx(yt, { $variant: (n == null ? void 0 : n.variant) ?? "step", $showStepper: C, children: /* @__PURE__ */ t.jsx(tt, { fluid: !0, style: { padding: 0 }, children: /* @__PURE__ */ t.jsxs(et, { children: [
+      /* @__PURE__ */ t.jsx(_, { md: b ? 8 : 12, children: /* @__PURE__ */ t.jsx(At, { children: K((r, h) => {
         const g = f.find((B) => B.id === h);
-        return /* @__PURE__ */ t.jsx(St, { style: i, children: g == null ? void 0 : g.element });
+        return /* @__PURE__ */ t.jsx(St, { style: r, children: g == null ? void 0 : g.element });
       }) }) }),
-      b && /* @__PURE__ */ t.jsx(_, { md: 4, style: { padding: 0, paddingInlineStart: U ? "unset" : "1.5rem" }, children: /* @__PURE__ */ t.jsx(Et, { children: G((i) => /* @__PURE__ */ t.jsx(
-        c.div,
+      b && /* @__PURE__ */ t.jsx(_, { md: 4, style: { padding: 0, paddingInlineStart: U ? "unset" : "1.5rem" }, children: /* @__PURE__ */ t.jsx(Et, { children: G((r) => /* @__PURE__ */ t.jsx(
+        m.div,
         {
           style: {
-            ...i,
-            transform: i.y.to((h) => `translateY(${h}rem)`)
+            ...r,
+            transform: r.y.to((h) => `translateY(${h}rem)`)
           },
-          children: x[a]
+          children: x[d]
         }
       )) }) })
     ] }) }) }) })
   ] });
 };
-O.Step = w;
+O.Step = A;
 O.Layout = It;
 export {
   yt as AnimatedMainContent,
-  bt as AnimatedModal,
+  $t as AnimatedModal,
   jt as AnimatedOverlay,
   Et as AnimatedSideMenu,
   St as AnimatedStepContent,
   xt as Container,
   At as FormContentContainer,
-  $t as MainContent,
+  bt as MainContent,
   Ct as Margin,
   vt as ScrollableContent,
   wt as StepHeader,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.30",
+  "version": "0.0.31",
   "type": "module",
   "publishConfig": {
     "access": "public"