qaema-ui 0.0.30 → 0.0.32

package/dist/_virtual/index2.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/prop-types/index.js";
-var p = /* @__PURE__ */ o();
-const s = /* @__PURE__ */ r(p);
+import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
+var a = t();
+const m = /* @__PURE__ */ r(a);
 export {
-  s as default
+  m as default
 };

package/dist/_virtual/index3.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
-var a = t();
-const m = /* @__PURE__ */ r(a);
+import { __require as o } from "../node_modules/shallowequal/index.js";
+var a = o();
+const t = /* @__PURE__ */ r(a);
 export {
-  m as default
+  t as default
 };

package/dist/_virtual/index4.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/shallowequal/index.js";
-var a = o();
-const t = /* @__PURE__ */ r(a);
+import { __require as o } from "../node_modules/prop-types/index.js";
+var p = /* @__PURE__ */ o();
+const s = /* @__PURE__ */ r(p);
 export {
-  t as default
+  s as default
 };

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/dist/components/SummaryCard.js

@@ -3,7 +3,7 @@ import a, { useTheme as b } from "styled-components";
 import j from "./Badge.js";
 import m from "./Button.js";
 import { Card as v } from "./Card.js";
-import c from "./Typography.js";
+import l from "./Typography.js";
 const w = a.div`
   padding-bottom: ${(r) => r.theme.spacing.s};
   border-bottom: 1px solid ${(r) => r.theme.colors.grey.n100};
@@ -11,7 +11,7 @@ const w = a.div`
     display: inline-block;
     text-align: start;
   }
-`, k = a(c)`
+`, k = a(l)`
   font-family: ${({ theme: r }) => r.fonts.arabic};
   font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
   font-size: 15px;
@@ -26,7 +26,7 @@ const w = a.div`
   border-radius: ${({ theme: r }) => r.borderRadius.md};
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
 
   ${({ $variant: r, theme: e }) => {
   switch (r) {
@@ -54,20 +54,14 @@ const w = a.div`
   }
 }}
 `, T = a.button`
-  width: 3.9375rem;
-  height: 2rem;
   padding: 0.75rem;
   border-radius: 0.25rem;
   border: none;
   cursor: pointer;
-  margin-top: ${({ theme: r }) => r.spacing.m};
-  ${({ $variant: r, theme: e }) => {
-  const i = r === "information" ? e.colors.primary.purple.n450 : r === "error" ? e.colors.state.error.n450 : r === "success" ? e.colors.state.success.n450 : e.colors.secondary.orange.n450;
-  return `
-      background:${e.colors.secondary.orange.n150};
-      color: ${i};
-    `;
-}}
+  ${({ $variant: r, theme: e }) => `
+      background: transparent;
+      color: ${r === "information" ? e.colors.primary.purple.n450 : r === "error" ? e.colors.state.error.n450 : r === "success" ? e.colors.state.success.n450 : e.colors.secondary.orange.n450};
+    `}
 
   font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
   font-size: ${({ theme: r }) => r.typography.sizes.s2};
@@ -91,7 +85,7 @@ const w = a.div`
   display: flex;
   flex-direction: column;
   gap: ${(r) => r.theme.spacing.s};
-`, z = a(c)`
+`, z = a(l)`
   font-family: ${({ theme: r }) => r.fonts.arabic};
   font-weight: ${({ theme: r }) => r.typography.weights.regular};
   font-size: ${({ theme: r }) => r.typography.sizes.s2};
@@ -113,21 +107,23 @@ const w = a.div`
   value: i,
   color: g
 }) => {
-  const h = b();
-  let l = null;
+  const y = b();
+  let c = null;
   if (r === "badge") {
     const s = i;
-    l = /* @__PURE__ */ n.jsx(j, { ...s });
+    c = /* @__PURE__ */ n.jsx(j, { ...s });
   } else if (r === "trend") {
-    const s = typeof i == "object" && i !== null ? i : { value: i }, t = s.direction ?? "neutral", d = h.colors.state.success.n450, o = h.colors.state.error.n450, y = t === "up" ? d : t === "down" ? o : g;
-    l = /* @__PURE__ */ n.jsx(c, { variant: "smText", color: y, children: typeof s.value == "number" ? s.value.toString() : s.value });
-  } else {
+    const s = typeof i == "object" && i !== null ? i : { value: i }, t = s.direction ?? "neutral", d = y.colors.state.success.n450, o = y.colors.state.error.n450, h = t === "up" ? d : t === "down" ? o : g;
+    c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: h, children: typeof s.value == "number" ? s.value.toString() : s.value });
+  } else if (r === "component")
+    c = i;
+  else {
     const s = i;
-    l = /* @__PURE__ */ n.jsx(c, { variant: "smText", color: g, children: typeof s == "number" ? s.toString() : s });
+    c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: g, children: typeof s == "number" ? s.toString() : s });
   }
   return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsx(c, { variant: "smText", weight: "semiBold", children: e }),
-    l
+    r !== "component" && /* @__PURE__ */ n.jsx(l, { variant: "smText", weight: "semiBold", children: e }),
+    c
   ] });
 };
 function G({
@@ -135,8 +131,8 @@ function G({
   total: e,
   title: i,
   subtitle: g,
-  btnLabel: h,
-  btnConfig: l,
+  btnLabel: y,
+  btnConfig: c,
   trailingActionsConfig: s,
   callout: t
 }) {
@@ -144,19 +140,19 @@ function G({
   return /* @__PURE__ */ n.jsxs(v, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${d.colors.grey.n100}`, children: [
     /* @__PURE__ */ n.jsxs(w, { children: [
       /* @__PURE__ */ n.jsxs(S, { children: [
-        /* @__PURE__ */ n.jsx(c, { variant: "h6", weight: "semiBold", children: i }),
-        l && /* @__PURE__ */ n.jsxs(m, { ...l, children: [
-          h ?? "",
+        /* @__PURE__ */ n.jsx(l, { variant: "h6", weight: "semiBold", children: i }),
+        c && /* @__PURE__ */ n.jsxs(m, { ...c, children: [
+          y ?? "",
           " "
         ] })
       ] }),
-      /* @__PURE__ */ n.jsx(c, { variant: "caption", color: d.colors.grey.n400, children: g })
+      /* @__PURE__ */ n.jsx(l, { variant: "caption", color: d.colors.grey.n400, children: g })
     ] }),
     /* @__PURE__ */ n.jsxs(R, { children: [
       r.map((o, u) => {
-        var y;
-        return ((y = o == null ? void 0 : o.items) == null ? void 0 : y.length) === 0 ? null : /* @__PURE__ */ n.jsxs(C, { children: [
-          /* @__PURE__ */ n.jsx(c, { variant: "span", weight: "regular", color: d.colors.grey.n400, children: o.title }),
+        var h;
+        return ((h = o == null ? void 0 : o.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ n.jsxs(C, { children: [
+          /* @__PURE__ */ n.jsx(l, { variant: "span", weight: "regular", color: d.colors.grey.n400, children: o.title }),
           o.items.map((p, $) => /* @__PURE__ */ n.jsx(f, { children: /* @__PURE__ */ n.jsx(x, { variant: p == null ? void 0 : p.variant, label: p.label, value: p.value, color: d.colors.grey.n400 }) }, `${u}-${$}`))
         ] }, o.title);
       }),

package/dist/components/TotalsSummary.d.ts

@@ -10,4 +10,4 @@ export type TotalsSummaryProps = {
     showCurrencyIcon?: boolean;
     currencyIconWidth?: string;
 };
-export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth, }: TotalsSummaryProps): import("react/jsx-runtime").JSX.Element;
+export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth }: TotalsSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TotalsSummary.js

@@ -1,9 +1,10 @@
-import { j as t } from "../_virtual/jsx-runtime.js";
+import { j as i } from "../_virtual/jsx-runtime.js";
 import o from "styled-components";
-import { device as n } from "../constants/breakPoints.constant.js";
 import p from "../assets/icons/RiyalIcon.js";
+import { device as n } from "../constants/breakPoints.constant.js";
 const g = o.div`
   width: 100%;
+  direction: inherit;
 `, c = o.div`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
@@ -21,7 +22,7 @@ const g = o.div`
   @media ${n.tablet} {
     gap: ${({ theme: e }) => e.spacing.l};
   }
-`, y = o.div`
+`, d = o.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.xs};
@@ -30,55 +31,57 @@ const g = o.div`
   @media ${n.tablet} {
     min-width: 9.5rem;
   }
-`, m = o.div`
+`, y = o.div`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.s};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   color: ${({ theme: e }) => e.colors.grey.n650};
-`, d = o.div`
+`, m = o.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-  direction: ltr;
-`, $ = o.span`
+  direction: inherit;
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+`, f = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.bold};
   font-size: ${({ theme: e }) => e.typography.sizes.s10};
   line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   text-align: center;
-  color: ${({ theme: e, $color: s }) => s || e.colors.grey.n400};
-`, f = o.span`
+  color: ${({ theme: e, $color: r }) => r || e.colors.grey.n400};
+  direction: ltr;
+  unicode-bidi: plaintext;
+`, $ = o.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => e.typography.sizes.s2};
   line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.normal};
-  color: ${({ theme: e, $color: s }) => s || e.colors.grey.n400};
+  color: ${({ theme: e, $color: r }) => r || e.colors.grey.n400};
+  direction: ltr;
+  unicode-bidi: plaintext;
 `;
-function b({
-  title: e,
-  items: s,
-  showCurrencyIcon: r = !0,
-  currencyIconWidth: l = "18px"
-}) {
-  return /* @__PURE__ */ t.jsxs(g, { children: [
-    /* @__PURE__ */ t.jsx(c, { children: e }),
-    /* @__PURE__ */ t.jsx(h, { children: s.map((i, a) => /* @__PURE__ */ t.jsxs(y, { children: [
-      /* @__PURE__ */ t.jsx(m, { children: i.title }),
-      /* @__PURE__ */ t.jsxs(d, { children: [
-        r && /* @__PURE__ */ t.jsx(p, { width: l, height: "20", color: i.color }),
-        /* @__PURE__ */ t.jsx($, { $color: i.color, children: i.amount }),
-        i.decimal ? /* @__PURE__ */ t.jsxs(f, { $color: i.color, children: [
+function j({ title: e, items: r, showCurrencyIcon: s = !0, currencyIconWidth: l = "18px" }) {
+  return /* @__PURE__ */ i.jsxs(g, { children: [
+    /* @__PURE__ */ i.jsx(c, { children: e }),
+    /* @__PURE__ */ i.jsx(h, { children: r.map((t, a) => /* @__PURE__ */ i.jsxs(d, { children: [
+      /* @__PURE__ */ i.jsx(y, { children: t.title }),
+      /* @__PURE__ */ i.jsxs(m, { children: [
+        s && /* @__PURE__ */ i.jsx(p, { width: l, height: "20", color: t.color }),
+        /* @__PURE__ */ i.jsx(f, { $color: t.color, children: t.amount }),
+        t.decimal ? /* @__PURE__ */ i.jsxs($, { $color: t.color, children: [
           ".",
-          i.decimal
+          t.decimal
         ] }) : null
       ] })
-    ] }, `${i.title}-${a}`)) })
+    ] }, `${t.title}-${a}`)) })
   ] });
 }
 export {
-  b as default
+  j as default
 };

package/dist/node_modules/react-bootstrap/esm/CloseButton.js

@@ -1,4 +1,4 @@
-import o from "../../../_virtual/index2.js";
+import o from "../../../_virtual/index4.js";
 import * as p from "react";
 import n from "../../../_virtual/index.js";
 import { j as i } from "../../../_virtual/jsx-runtime.js";

package/dist/node_modules/react-bootstrap/esm/Feedback.js

@@ -1,6 +1,6 @@
 import i from "../../../_virtual/index.js";
 import * as f from "react";
-import e from "../../../_virtual/index2.js";
+import e from "../../../_virtual/index4.js";
 import { j as l } from "../../../_virtual/jsx-runtime.js";
 const c = {
   /**

package/dist/node_modules/react-bootstrap/esm/Form.js

@@ -1,5 +1,5 @@
 import i from "../../../_virtual/index.js";
-import o from "../../../_virtual/index2.js";
+import o from "../../../_virtual/index4.js";
 import * as s from "react";
 import f from "./FormCheck.js";
 import l from "./FormControl.js";

package/dist/node_modules/react-bootstrap/esm/Image.js

@@ -1,6 +1,6 @@
 import f from "../../../_virtual/index.js";
 import * as d from "react";
-import o from "../../../_virtual/index2.js";
+import o from "../../../_virtual/index4.js";
 import { useBootstrapPrefix as u } from "./ThemeProvider.js";
 import { j as p } from "../../../_virtual/jsx-runtime.js";
 o.string, o.bool, o.bool, o.bool, o.bool;

package/dist/node_modules/react-helmet-async/lib/index.esm.js

@@ -2,9 +2,9 @@ var Q = Object.defineProperty;
 var X = (e, t, r) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var h = (e, t, r) => X(e, typeof t != "symbol" ? t + "" : t, r);
 import y, { Component as R } from "react";
-import ee from "../../../_virtual/index3.js";
+import ee from "../../../_virtual/index2.js";
 import F from "../../../_virtual/browser.js";
-import te from "../../../_virtual/index4.js";
+import te from "../../../_virtual/index3.js";
 var Y = /* @__PURE__ */ ((e) => (e.BASE = "base", e.BODY = "body", e.HEAD = "head", e.HTML = "html", e.LINK = "link", e.META = "meta", e.NOSCRIPT = "noscript", e.SCRIPT = "script", e.STYLE = "style", e.TITLE = "title", e.FRAGMENT = "Symbol(react.fragment)", e))(Y || {}), $ = {
   link: { rel: ["amphtml", "canonical", "alternate"] },
   script: { type: ["application/ld+json"] },

package/dist/node_modules/react-smooth/es6/Animate.js

@@ -1,5 +1,5 @@
 import x, { Children as w, cloneElement as z, PureComponent as F } from "react";
-import a from "../../../_virtual/index2.js";
+import a from "../../../_virtual/index4.js";
 import { deepEqual as H } from "../../fast-equals/dist/esm/index.js";
 import L from "./AnimateManager.js";
 import { configEasing as V } from "./easing.js";

package/dist/node_modules/react-transition-group/esm/Transition.js

@@ -1,6 +1,6 @@
 import C from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
 import D from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import o from "../../../_virtual/index2.js";
+import o from "../../../_virtual/index4.js";
 import v from "react";
 import b from "react-dom";
 import T from "./config.js";

package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js

@@ -1,4 +1,4 @@
-import e from "../../../../_virtual/index2.js";
+import e from "../../../../_virtual/index4.js";
 var n = process.env.NODE_ENV !== "production" ? e.oneOfType([e.number, e.shape({
   enter: e.number,
   exit: e.number,

package/package.json

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