qaema-ui 0.0.56 → 0.0.58

package/dist/_virtual/index7.js

@@ -1,5 +1,4 @@
-import { __require as r } from "../node_modules/recharts/node_modules/react-is/index.js";
-var a = r();
+var e = { exports: {} };
 export {
-  a as r
+  e as __module
 };

package/dist/_virtual/index8.js

@@ -1,4 +1,5 @@
-var e = { exports: {} };
+import { __require as r } from "../node_modules/recharts/node_modules/react-is/index.js";
+var a = r();
 export {
-  e as __module
+  a as r
 };

package/dist/components/Badge.js

@@ -1,8 +1,8 @@
 import { j as e } from "../_virtual/jsx-runtime.js";
 import { IoClose as p } from "../node_modules/react-icons/io5/index.js";
 import i from "styled-components";
-import m from "../hooks/useBadgeVariant.js";
-import g from "./Typography.js";
+import g from "../hooks/useBadgeVariant.js";
+import m from "./Typography.js";
 const u = i.div`
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@ const u = i.div`
   background-color: ${({ bgColor: r, $variantStyles: o }) => r ?? o.backgroundColor};
   gap: ${({ theme: r }) => r.spacing.xs};
   height: 1.5rem;
-`, f = i.div`
+`, h = i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,19 +23,24 @@ const u = i.div`
   &:hover {
     opacity: 0.8;
   }
-`, x = i.img`
+  svg {
+    width: ${({ theme: r }) => r.spacing.s} !important;
+    height: ${({ theme: r }) => r.spacing.s} !important;
+    color: ${({ $variantStyles: r }) => r.color} !important;
+  }
+`, f = i.img`
   width: 1.25rem;
   height: 1.25rem;
   border-radius: ${({ theme: r }) => r.borderRadius.circle};
   object-fit: cover;
   flex-shrink: 0;
-`, v = ({ bgColor: r, color: o, label: s, weight: n, variant: d, onClose: a, children: l, image: c }) => {
-  const t = m(d ?? "default");
+`, v = ({ bgColor: r, color: o, label: s, weight: c, variant: d, onClose: a, children: l, image: n }) => {
+  const t = g(d ?? "default");
   return /* @__PURE__ */ e.jsxs(u, { bgColor: r, $variantStyles: t, children: [
-    c && /* @__PURE__ */ e.jsx(x, { src: c, alt: "badge-image" }),
-    s && /* @__PURE__ */ e.jsx(g, { variant: "span", color: o ?? t.color, weight: n, children: s }),
+    n && /* @__PURE__ */ e.jsx(f, { src: n, alt: "badge-image" }),
+    s && /* @__PURE__ */ e.jsx(m, { variant: "span", color: o ?? t.color, weight: c, children: s }),
     l,
-    a && /* @__PURE__ */ e.jsx(f, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
+    a && /* @__PURE__ */ e.jsx(h, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
   ] });
 };
 export {

package/dist/components/DropDown.js

@@ -1,139 +1,147 @@
 import { j as r } from "../_virtual/jsx-runtime.js";
-import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
-import { FaTimes as W, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
+import { useRef as g, useState as b, useCallback as Y, useEffect as w } from "react";
+import { FaTimes as _, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
 import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
 import { useTheme as te } from "styled-components";
 import le from "../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as ae } from "../i18n/i18n.js";
-import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as z, SelectedTagsContainer as xe, SelectedTag as je } from "../styles/Dropdown.styles.js";
-import { HelperTextWrapper as pe } from "./PhoneInputField.js";
-import Se from "./SearchBar.js";
+import { useQaemaCoreTranslation as oe } from "../i18n/i18n.js";
+import { StyledDropDownContainer as ae, StyledlabelContainer as se, StyledDropDown as ce, StyledDropDownToggle as ie, StyledDropDownTitle as ue, IconsContainer as de, StyledDropDownMenu as fe, SearchContainer as pe, StyledOptionsContainer as he, StyledDropItem as L } from "../styles/Dropdown.styles.js";
+import ve from "./Badge.js";
+import { HelperTextWrapper as xe } from "./PhoneInputField.js";
+import je from "./SearchBar.js";
 import me from "./Spinner.js";
-import F from "./Typography.js";
-const Le = (i) => {
+import W from "./Typography.js";
+const Le = (f) => {
   const {
-    label: b,
-    options: m,
+    label: C,
+    options: y,
     // value,
-    placeholder: H = "Select Something",
-    optional: M = !1,
-    error: f = "",
-    disabled: h = !1,
-    selectIdentifier: D,
-    keyIdentifier: v = "id",
-    selectCallBack: j,
-    showLeadIcon: N,
-    icon: P,
-    allowSearch: R,
-    searchHandler: A,
-    searchPlaceholder: B,
-    onToggle: s,
-    multiSelect: o = !1,
-    isLoading: Q = !1,
-    currentSelectedOptions: y = [],
-    isInteractive: I = !1,
-    endIcon: T
-  } = i, c = g(null), p = g(null), u = te(), { t: k } = ae(), U = g(null), [a, x] = w(y), [d, O] = w(!1), [Z, q] = w(0), $ = P ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = le("dropdown"), S = _(() => {
+    placeholder: z = "Select Something",
+    optional: P = !1,
+    error: s = "",
+    disabled: p = !1,
+    selectIdentifier: B,
+    keyIdentifier: h = "id",
+    selectCallBack: x,
+    showLeadIcon: F,
+    icon: H,
+    allowSearch: M,
+    searchHandler: N,
+    searchPlaceholder: R,
+    onToggle: c,
+    multiSelect: i = !1,
+    isLoading: A = !1,
+    currentSelectedOptions: S = [],
+    isInteractive: D = !1,
+    endIcon: I
+  } = f, u = g(null), j = g(null), o = te(), { t: k } = oe(), Q = g(null), [l, v] = b(S), [d, O] = b(!1), [U, Z] = b(0), T = H ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), q = le("dropdown"), m = Y(() => {
     var e, n;
-    (e = c == null ? void 0 : c.current) != null && e.offsetWidth && p.current && q(((n = c.current) == null ? void 0 : n.offsetWidth) / 16);
+    (e = u == null ? void 0 : u.current) != null && e.offsetWidth && j.current && Z(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
   }, []);
-  C(() => (d && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [d, S]), C(() => {
-    x(y);
-  }, [y]);
-  const J = (e, n, t, l = "default") => t ? u.colors.grey.n400 : e ? u.colors.state.error.n450 : n ? u.colors.primary.dark.n600 : l === "light-primary" ? u.colors.primary.purple.n450 : u.colors.grey.n300, E = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[v] === e.value[v] : n.value === e.value), K = (e) => {
-    if (o) {
-      const n = E(e);
+  w(() => (d && (m(), window.addEventListener("resize", m)), () => window.removeEventListener("resize", m)), [d, m]), w(() => {
+    v(S);
+  }, [S]);
+  const G = (e, n, t, a = "default") => t ? o.colors.grey.n400 : e ? o.colors.state.error.n450 : n ? o.colors.primary.dark.n600 : a === "light-primary" ? o.colors.primary.purple.n450 : o.colors.grey.n300, $ = (e) => l.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[h] === e.value[h] : n.value === e.value), J = (e) => {
+    if (i) {
+      const n = $(e);
       let t;
-      n ? t = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[v] !== e.value[v] : l.value !== e.value) : t = [...a, e], x(t), j(t.map((l) => l.value));
+      n ? t = l.filter((a) => typeof a.value == "object" && typeof e.value == "object" ? a.value[h] !== e.value[h] : a.value !== e.value) : t = [...l, e], v(t), x(t.map((a) => a.value));
     } else
-      x([e]), j(e.value);
-  }, V = (e) => {
-    const n = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[v] !== e.value[v] : t.value !== e.value);
-    x(n), j(n.map((t) => t.value));
-  }, X = () => {
+      v([e]), x(e.value);
+  }, K = (e) => {
+    const n = l.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[h] !== e.value[h] : t.value !== e.value);
+    v(n), x(n.map((t) => t.value));
+  }, V = () => {
     var e;
-    return a.length === 0 ? H : o ? `${a.length} ${k("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
+    return l.length === 0 ? z : i ? `${l.length} ${k("SELECTED")}` : (e = l[0]) == null ? void 0 : e.label;
   };
-  C(() => {
+  w(() => {
     const e = (n) => {
-      p.current && c.current && !p.current.contains(n.target) && !c.current.contains(n.target) && (O(!1), s == null || s(!1));
+      j.current && u.current && !j.current.contains(n.target) && !u.current.contains(n.target) && (O(!1), c == null || c(!1));
     };
     return d && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [d, s]);
-  const Y = () => I ? null : /* @__PURE__ */ r.jsx(pe, { error: f || "", children: f && f });
-  return /* @__PURE__ */ r.jsxs(se, { children: [
-    b && /* @__PURE__ */ r.jsxs(oe, { children: [
-      /* @__PURE__ */ r.jsx("label", { children: b }),
-      M && /* @__PURE__ */ r.jsx("span", { children: k("OPTIONAL") })
+  }, [d, c]);
+  const X = () => D ? null : /* @__PURE__ */ r.jsx(xe, { error: s || "", children: s && s });
+  return /* @__PURE__ */ r.jsxs(ae, { children: [
+    C && /* @__PURE__ */ r.jsxs(se, { children: [
+      /* @__PURE__ */ r.jsx("label", { children: C }),
+      P && /* @__PURE__ */ r.jsx("span", { children: k("OPTIONAL") })
     ] }),
     /* @__PURE__ */ r.jsxs(
       ce,
       {
         show: d,
         onToggle: () => {
-          s == null || s(!d), O((e) => !e);
+          c == null || c(!d), O((e) => !e);
         },
         placement: "bottom-start",
-        autoClose: o ? "outside" : !0,
+        autoClose: i ? "outside" : !0,
         children: [
-          /* @__PURE__ */ r.jsx(ue, { disabled: h, ref: c, $valid: !f, $variant: i.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !f, $isInteractive: I, $hasDyncWidth: !h, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ r.jsx(ie, { disabled: p, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(ue, { $valid: !s, $isInteractive: D, $hasDyncWidth: !p, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
-              N && typeof $ == "function" && /* @__PURE__ */ r.jsx($, {}),
-              /* @__PURE__ */ r.jsx(
-                F,
+              F && typeof T == "function" && /* @__PURE__ */ r.jsx(T, {}),
+              i && l.length > 0 ? /* @__PURE__ */ r.jsx(
+                "div",
+                {
+                  style: { display: "flex", gap: o.spacing.sm, alignItems: "center", flexWrap: "wrap" },
+                  onClick: (e) => e.stopPropagation(),
+                  children: l.map((e) => /* @__PURE__ */ r.jsx(ve, { variant: "black", label: e.label, onClose: () => K(e) }, e.label))
+                }
+              ) : /* @__PURE__ */ r.jsx(
+                W,
                 {
                   component: "span",
                   variant: "mdText",
-                  color: J(f, a.length > 0, h, i.variant || "default"),
-                  children: X()
+                  color: G(s, l.length > 0, p, f.variant || "default"),
+                  children: V()
                 }
               )
             ] }),
-            (T || !h) && /* @__PURE__ */ r.jsxs(ie, { children: [
-              T,
-              !o && a.length > 0 && !h && /* @__PURE__ */ r.jsx(
-                W,
+            (I || !p) && /* @__PURE__ */ r.jsxs(de, { children: [
+              I,
+              !i && l.length > 0 && !p && /* @__PURE__ */ r.jsx(
+                _,
                 {
                   style: { cursor: "pointer", marginLeft: "0.5rem" },
                   onClick: (e) => {
-                    e.stopPropagation(), x([]), j(o ? [] : "");
+                    e.stopPropagation(), v([]), x(i ? [] : "");
                   }
                 }
               ),
-              !h && /* @__PURE__ */ r.jsx(ee, {})
+              !p && /* @__PURE__ */ r.jsx(ee, { color: s ? o.colors.state.error.n450 : o.colors.grey.n300 })
             ] })
           ] }) }) }),
-          d && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
-            R && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: B, onSearch: A }) }),
+          d && /* @__PURE__ */ r.jsxs(fe, { ref: j, $menuWidth: U, $zIndex: q, children: [
+            M && /* @__PURE__ */ r.jsx(pe, { children: /* @__PURE__ */ r.jsx(je, { placeholder: R, onSearch: N }) }),
             /* @__PURE__ */ r.jsxs(
-              ve,
+              he,
               {
-                ref: U,
+                ref: Q,
                 onScroll: (e) => {
                   var n;
-                  (n = i.onScroll) == null || n.call(i, e);
+                  (n = f.onScroll) == null || n.call(f, e);
                 },
                 children: [
-                  m == null ? void 0 : m.map((e) => {
-                    var t, l, L;
-                    const n = E(e);
+                  y == null ? void 0 : y.map((e) => {
+                    var t, a, E;
+                    const n = $(e);
                     return /* @__PURE__ */ r.jsxs(
-                      z,
+                      L,
                       {
-                        onClick: () => K(e),
+                        onClick: () => J(e),
                         $selected: n,
                         children: [
-                          o && (n ? /* @__PURE__ */ r.jsx(re, { color: u.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: u.colors.primary.purple.n450 })),
+                          i && (n ? /* @__PURE__ */ r.jsx(re, { color: o.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: o.colors.primary.purple.n450 })),
                           " ",
-                          /* @__PURE__ */ r.jsx(F, { variant: "smText", children: e == null ? void 0 : e.label })
+                          /* @__PURE__ */ r.jsx(W, { variant: "smText", children: e == null ? void 0 : e.label })
                         ]
                       },
-                      typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t[D]) == null ? void 0 : l.toString() : (L = e == null ? void 0 : e.value) == null ? void 0 : L.toString()
+                      typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (a = (t = e == null ? void 0 : e.value) == null ? void 0 : t[B]) == null ? void 0 : a.toString() : (E = e == null ? void 0 : e.value) == null ? void 0 : E.toString()
                     );
                   }),
-                  Q && /* @__PURE__ */ r.jsx(z, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
+                  A && /* @__PURE__ */ r.jsx(L, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
                 ]
               }
             )
@@ -141,20 +149,7 @@ const Le = (i) => {
         ]
       }
     ),
-    o && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
-      var n, t, l;
-      return /* @__PURE__ */ r.jsxs(
-        je,
-        {
-          children: [
-            e.label,
-            /* @__PURE__ */ r.jsx(W, { onClick: () => V(e) })
-          ]
-        },
-        typeof (e == null ? void 0 : e.value) == "object" ? (t = (n = e == null ? void 0 : e.value) == null ? void 0 : n[D]) == null ? void 0 : t.toString() : (l = e == null ? void 0 : e.value) == null ? void 0 : l.toString()
-      );
-    }) }),
-    Y()
+    X()
   ] });
 };
 export {

package/dist/components/RequestCard.d.ts

@@ -10,6 +10,7 @@ export type RequestCardProps = {
     variant?: RequestCardVariant;
     image?: React.ReactNode;
     title: React.ReactNode;
+    titleBadge?: BadgeProps;
     subtitle?: React.ReactNode;
     trackingLabel?: React.ReactNode;
     progress?: number;

package/dist/components/RequestCard.js

@@ -1,31 +1,31 @@
 import { j as n } from "../_virtual/jsx-runtime.js";
 import "react";
-import s, { useTheme as F } from "styled-components";
-import A from "./Badge.js";
+import e, { useTheme as H } from "styled-components";
+import $ from "./Badge.js";
 import p from "./Button.js";
-import { useQaemaCoreTranslation as H } from "../i18n/i18n.js";
-import P from "../assets/svg/Riyal.svg.js";
-import { FeatureList as q, FeatureRow as W, Bullet as E } from "./RequestSummaryCard.js";
+import { useQaemaCoreTranslation as P } from "../i18n/i18n.js";
+import q from "../assets/svg/Riyal.svg.js";
+import { FeatureList as W, FeatureRow as E, Bullet as M } from "./RequestSummaryCard.js";
 import h from "./Typography.js";
-const M = s.div`
+const V = e.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: ${({ image: e, inModal: i }) => e ? i ? "65%" : "unset" : "100%"};
-`, V = s.div`
+  height: ${({ image: i, inModal: s }) => i ? s ? "65%" : "unset" : "100%"};
+`, D = e.div`
   min-width: 9.0625rem;
   display: flex;
-  aspect-ratio: ${({ $inModal: e }) => e ? "23/9" : "11/9"};
-  background: ${({ $background: e, theme: i }) => e ?? `linear-gradient(
+  aspect-ratio: ${({ $inModal: i }) => i ? "23/9" : "11/9"};
+  background: ${({ $background: i, theme: s }) => i ?? `linear-gradient(
       180deg,
-      ${i.colors.primary.purple.n100} 0%,
-      ${i.colors.primary.purple.n300} 100%
+      ${s.colors.primary.purple.n100} 0%,
+      ${s.colors.primary.purple.n300} 100%
     )`};
-  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  border-radius: ${({ theme: i }) => i.borderRadius.md};
 
   place-items: center;
   overflow: hidden;
-  height: ${({ $inModal: e }) => e ? "35%" : "unset"};
+  height: ${({ $inModal: i }) => i ? "35%" : "unset"};
   img,
   svg {
     width: 100%;
@@ -33,99 +33,104 @@ const M = s.div`
     object-fit: cover;
     display: block;
   }
-`, D = s.div`
+`, I = e.div`
   display: grid;
   grid-template-columns: '1fr';
-  gap: ${({ theme: e }) => e.spacing.xs};
-  margin-top: ${({ theme: e }) => e.spacing.xxs};
+  gap: ${({ theme: i }) => i.spacing.xs};
+  margin-top: ${({ theme: i }) => i.spacing.xxs};
   justify-content: 'stretch';
   align-items: center;
-`, I = s(p)`
+`, N = e(p)`
   min-width: 9.3125rem;
   min-height: 2rem;
-  border-radius: ${({ theme: e }) => e.borderRadius.sm};
-  box-shadow: ${({ theme: e }) => e.boxShadow.s3};
-`, N = s.h3`
+  border-radius: ${({ theme: i }) => i.borderRadius.sm};
+  box-shadow: ${({ theme: i }) => i.boxShadow.s3};
+`, Q = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: i }) => i.spacing.xs};
+  margin-bottom: ${({ theme: i }) => i.spacing.xxs};
+`, X = e.h3`
   margin: 0;
-  font-family: ${({ theme: e }) => (e == null ? void 0 : e.dir) === "rtl" ? e.fonts.arabic : e.fonts.english};
-  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
-  font-size: ${({ theme: e }) => {
-  var i;
-  return (i = e.typography.sizes) == null ? void 0 : i.s4;
+  font-family: ${({ theme: i }) => (i == null ? void 0 : i.dir) === "rtl" ? i.fonts.arabic : i.fonts.english};
+  font-weight: ${({ theme: i }) => i.typography.weights.semiBold};
+  font-size: ${({ theme: i }) => {
+  var s;
+  return (s = i.typography.sizes) == null ? void 0 : s.s4;
 }};
-  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  line-height: ${({ theme: i }) => i.typography.lineHeights.m};
   letter-spacing: -0.25px;
-  color: ${({ theme: e }) => e.colors.grey.n800};
-`, Q = s.p`
+  color: ${({ theme: i }) => i.colors.grey.n800};
+`, G = e.p`
   margin: 0;
-  color: ${({ theme: e }) => e.colors.grey.n400};
-  font-size: ${({ theme: e }) => {
-  var i;
-  return (i = e.typography.sizes) == null ? void 0 : i.s3;
+  color: ${({ theme: i }) => i.colors.grey.n400};
+  font-size: ${({ theme: i }) => {
+  var s;
+  return (s = i.typography.sizes) == null ? void 0 : s.s3;
 }};
-  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
-`, X = s.div`
+  line-height: ${({ theme: i }) => i.typography.lineHeights.s};
+`, J = e.div`
   display: flex;
   flex-wrap: wrap;
-  gap: ${({ theme: e }) => e.spacing.s};
-  margin-top: ${({ theme: e }) => e.spacing.s};
-  margin-bottom: ${({ theme: e }) => e.spacing.s};
-`, G = s.div`
+  gap: ${({ theme: i }) => i.spacing.s};
+  margin-top: ${({ theme: i }) => i.spacing.s};
+  margin-bottom: ${({ theme: i }) => i.spacing.s};
+`, K = e.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme: e }) => e.spacing.xs};
-`, J = s.div`
-  font-family: ${({ theme: e }) => (e == null ? void 0 : e.dir) === "rtl" ? e.fonts.arabic : e.fonts.english};
-  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
-  font-size: ${({ theme: e }) => {
-  var i;
-  return (i = e.typography.sizes) == null ? void 0 : i.s2;
+  gap: ${({ theme: i }) => i.spacing.xs};
+`, L = e.div`
+  font-family: ${({ theme: i }) => (i == null ? void 0 : i.dir) === "rtl" ? i.fonts.arabic : i.fonts.english};
+  font-weight: ${({ theme: i }) => i.typography.weights.semiBold};
+  font-size: ${({ theme: i }) => {
+  var s;
+  return (s = i.typography.sizes) == null ? void 0 : s.s2;
 }};
-  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+  line-height: ${({ theme: i }) => i.typography.lineHeights.xs};
   letter-spacing: 0;
   vertical-align: middle;
-  color: ${({ theme: e }) => e.colors.grey.n650};
-`, K = s.div`
-  width: ${({ $fixed: e }) => e ? "335px" : "100%"};
+  color: ${({ theme: i }) => i.colors.grey.n650};
+`, O = e.div`
+  width: ${({ $fixed: i }) => i ? "335px" : "100%"};
   min-width: 11.1875rem;
   height: 100%;
-  border-radius: ${({ theme: e }) => e.borderRadius.md};
-  padding: ${({ theme: e }) => e.spacing.sm};
+  border-radius: ${({ theme: i }) => i.borderRadius.md};
+  padding: ${({ theme: i }) => i.spacing.sm};
 
-  background: ${({ theme: e }) => e.colors.grey.n50};
-  box-shadow: ${({ theme: e }) => e.boxShadow.s3};
+  background: ${({ theme: i }) => i.colors.grey.n50};
+  box-shadow: ${({ theme: i }) => i.boxShadow.s3};
   border: none;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme: e }) => e.spacing.s};
-`, L = s.div`
+  gap: ${({ theme: i }) => i.spacing.s};
+`, U = e.div`
   position: relative;
   width: 100%;
   height: 0.5rem;
-  background: ${({ theme: e }) => e.colors.grey.n100};
+  background: ${({ theme: i }) => i.colors.grey.n100};
   border-radius: 0;
   overflow: hidden;
   &::after {
     content: '';
     position: absolute;
     inset: 0;
-    width: ${({ $value: e }) => Math.min(Math.max(e, 0), 100)}%;
-    background: ${({ $color: e }) => e};
+    width: ${({ $value: i }) => Math.min(Math.max(i, 0), 100)}%;
+    background: ${({ $color: i }) => i};
     transition: width 250ms ease;
     border-radius: 0;
   }
-`, O = s.span`
-  font-family: ${({ theme: e }) => (e == null ? void 0 : e.dir) === "rtl" ? e.fonts.arabic : e.fonts.english};
-  font-weight: ${({ theme: e }) => e.typography.weights.regular};
-  font-size: ${({ theme: e }) => {
-  var i;
-  return (i = e.typography.sizes) == null ? void 0 : i.s2;
+`, Y = e.span`
+  font-family: ${({ theme: i }) => (i == null ? void 0 : i.dir) === "rtl" ? i.fonts.arabic : i.fonts.english};
+  font-weight: ${({ theme: i }) => i.typography.weights.regular};
+  font-size: ${({ theme: i }) => {
+  var s;
+  return (s = i.typography.sizes) == null ? void 0 : s.s2;
 }};
-  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+  line-height: ${({ theme: i }) => i.typography.lineHeights.xs};
   letter-spacing: 0;
-  color: ${({ theme: e }) => e.colors.grey.n400};
-`, U = (e) => {
-  switch (e) {
+  color: ${({ theme: i }) => i.colors.grey.n400};
+`, Z = (i) => {
+  switch (i) {
     case "accepted":
       return { bar: "#1DBA63" };
     case "rejected":
@@ -135,7 +140,7 @@ const M = s.div`
     default:
       return { bar: "#7259ff" };
   }
-}, Y = s.div`
+}, _ = e.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -146,63 +151,67 @@ const M = s.div`
   @media (max-width: 375px) {
     align-items: center;
   }
-`, Z = s.div`
+`, C = e.div`
   display: flex;
   align-items: baseline;
-  color: ${({ theme: e }) => e.colors.grey.n650};
+  color: ${({ theme: i }) => i.colors.grey.n650};
 
   span {
-    color: ${({ theme: e }) => e.colors.grey.n650};
+    color: ${({ theme: i }) => i.colors.grey.n650};
   }
 
   @media (max-width: 375px) {
     text-align: center;
   }
-`, _ = s.div`
+`, ii = e.div`
   display: flex;
   align-items: center;
-`, C = s.img`
-  width: ${({ $width: e = "1rem" }) => e};
+`, ni = e.img`
+  width: ${({ $width: i = "1rem" }) => i};
   height: 1rem;
   object-fit: contain;
   flex-shrink: 0;
   margin-right: 2px;
-`, ce = ({
-  variant: e = "hidden",
-  image: i,
-  title: f,
-  subtitle: x,
-  trackingLabel: $ = "Request Tracking",
-  progress: y = 0,
-  statusText: j,
+`, gi = ({
+  variant: i = "hidden",
+  image: s,
+  title: y,
+  titleBadge: x,
+  subtitle: m,
+  trackingLabel: j = "Request Tracking",
+  progress: b = 0,
+  statusText: w,
   primaryCta: t,
   secondaryCta: l,
-  className: b,
-  style: w,
+  className: v,
+  style: k,
   features: a,
-  featuresTitle: k,
+  featuresTitle: z,
   badgeList: c,
   price: o,
   inModal: u = !1,
-  background: v
+  background: R
 }) => {
-  const { t: r } = H(), z = U(e), B = e !== "hidden", R = r(e === "accepted" ? "accepted" : e === "rejected" ? "rejected" : "submitted"), m = e === "hidden" ? "primary" : e === "accepted" || e === "rejected" ? "light-primary" : "outline-primary", T = e === "rejected", S = F();
-  return /* @__PURE__ */ n.jsxs(K, { className: b, style: w, children: [
-    i ? /* @__PURE__ */ n.jsx(V, { $inModal: u, $background: v, children: i }) : null,
-    /* @__PURE__ */ n.jsxs(M, { image: i, inModal: u, children: [
-      /* @__PURE__ */ n.jsx(N, { children: f }),
-      x ? /* @__PURE__ */ n.jsx(Q, { children: x }) : null,
-      c && c.length > 0 && /* @__PURE__ */ n.jsx(X, { children: c.map((d, g) => /* @__PURE__ */ n.jsx(A, { ...d }, g)) }),
+  const { t: r } = P(), T = Z(i), B = i !== "hidden", S = r(i === "accepted" ? "accepted" : i === "rejected" ? "rejected" : "submitted"), f = i === "hidden" ? "primary" : i === "accepted" || i === "rejected" ? "light-primary" : "outline-primary", F = i === "rejected", A = H();
+  return /* @__PURE__ */ n.jsxs(O, { className: v, style: k, children: [
+    s ? /* @__PURE__ */ n.jsx(D, { $inModal: u, $background: R, children: s }) : null,
+    /* @__PURE__ */ n.jsxs(V, { image: s, inModal: u, children: [
+      /* @__PURE__ */ n.jsxs(Q, { children: [
+        /* @__PURE__ */ n.jsx(X, { children: y }),
+        x && /* @__PURE__ */ n.jsx($, { ...x })
+      ] }),
+      m ? /* @__PURE__ */ n.jsx(G, { children: m }) : null,
+      c && c.length > 0 && /* @__PURE__ */ n.jsx(J, { children: c.map((d, g) => /* @__PURE__ */ n.jsx($, { ...d }, g)) }),
       a && a.length > 0 ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-        /* @__PURE__ */ n.jsx(h, { variant: "h6", color: S.colors.grey.n400, children: k }),
-        /* @__PURE__ */ n.jsx(q, { children: a.map((d, g) => /* @__PURE__ */ n.jsxs(W, { children: [
-          /* @__PURE__ */ n.jsx(E, {}),
+        /* @__PURE__ */ n.jsx(h, { variant: "h6", color: A.colors.grey.n400, children: z }),
+        /* @__PURE__ */ n.jsx(W, { children: a.map((d, g) => /* @__PURE__ */ n.jsxs(E, { children: [
+          /* @__PURE__ */ n.jsx(M, {}),
           /* @__PURE__ */ n.jsx("span", { children: d.label })
         ] }, g)) })
       ] }) : null,
-      o && /* @__PURE__ */ n.jsx(Y, { children: /* @__PURE__ */ n.jsxs(Z, { children: [
-        /* @__PURE__ */ n.jsxs(_, { children: [
-          /* @__PURE__ */ n.jsx(C, { src: P, alt: o == null ? void 0 : o.amount }),
+      o && /* @__PURE__ */ n.jsx(_, { children: /* @__PURE__ */ n.jsxs(C, { children: [
+        /* @__PURE__ */ n.jsxs(ii, { children: [
+          /* @__PURE__ */ n.jsx(ni, { src: q, alt: o == null ? void 0 : o.amount }),
           /* @__PURE__ */ n.jsx(h, { variant: "h5", weight: "bold", children: o == null ? void 0 : o.amount })
         ] }),
         /* @__PURE__ */ n.jsxs(h, { variant: "caption", children: [
@@ -210,23 +219,23 @@ const M = s.div`
           (o == null ? void 0 : o.unit) ?? r("year")
         ] })
       ] }) }),
-      B && /* @__PURE__ */ n.jsxs(G, { children: [
-        /* @__PURE__ */ n.jsx(J, { children: $ }),
-        /* @__PURE__ */ n.jsx(L, { $value: y, $color: z.bar }),
-        /* @__PURE__ */ n.jsx(O, { children: j ?? R })
+      B && /* @__PURE__ */ n.jsxs(K, { children: [
+        /* @__PURE__ */ n.jsx(L, { children: j }),
+        /* @__PURE__ */ n.jsx(U, { $value: b, $color: T.bar }),
+        /* @__PURE__ */ n.jsx(Y, { children: w ?? S })
       ] }),
-      /* @__PURE__ */ n.jsx(D, { children: T ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx(I, { variant: m, size: "xs", onClick: t == null ? void 0 : t.onClick, children: (t == null ? void 0 : t.label) ?? "Send New Request" }) }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-        t && /* @__PURE__ */ n.jsx(p, { variant: m, size: "md", onClick: t.onClick, children: t.label }),
+      /* @__PURE__ */ n.jsx(I, { children: F ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx(N, { variant: f, size: "xs", onClick: t == null ? void 0 : t.onClick, children: (t == null ? void 0 : t.label) ?? "Send New Request" }) }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+        t && /* @__PURE__ */ n.jsx(p, { variant: f, size: "md", onClick: t.onClick, children: t.label }),
         l && /* @__PURE__ */ n.jsx(p, { variant: "light-secondary", size: "md", onClick: l.onClick, children: l.label })
       ] }) })
     ] })
   ] });
 };
 export {
-  M as ContentWrapper,
-  L as ProgressBar,
-  O as StatusText,
-  J as TrackingHeader,
-  G as TrackingWrap,
-  ce as default
+  V as ContentWrapper,
+  U as ProgressBar,
+  Y as StatusText,
+  L as TrackingHeader,
+  K as TrackingWrap,
+  gi as default
 };

package/dist/hooks/useBadgeVariant.js

@@ -1,6 +1,6 @@
 import { useMemo as a } from "react";
 import { useTheme as p } from "styled-components";
-const y = (n) => {
+const u = (n) => {
   const r = p(), e = a(() => {
     const o = (l, s, c) => ({
       backgroundColor: l,
@@ -15,11 +15,11 @@ const y = (n) => {
       pink: o(r.colors.secondary.pink.n100, r.colors.secondary.pink.n450),
       yellow: o(r.colors.secondary.orange.n100, r.colors.secondary.orange.n500),
       green: o(r.colors.primary.green.n100, r.colors.primary.green.n500),
-      black: o(r.colors.grey.n100, r.colors.grey.n650)
+      black: o(r.colors.grey.n100, r.colors.grey.n650, r.colors.grey.n200)
     };
   }, [r]);
   return e[n] ?? e.default;
 };
 export {
-  y as default
+  u as default
 };

package/dist/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../_virtual/index8.js";
+import { __module as e } from "../../_virtual/index7.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/node_modules/recharts/es6/util/ReactUtils.js

@@ -4,7 +4,7 @@ import P from "../../../../_virtual/isString.js";
 import D from "../../../../_virtual/isFunction.js";
 import j from "../../../../_virtual/isObject.js";
 import { Children as p, isValidElement as w } from "react";
-import { r as B } from "../../../../_virtual/index7.js";
+import { r as B } from "../../../../_virtual/index8.js";
 import { isNumber as b } from "./DataUtils.js";
 import { shallowEqual as d } from "./ShallowEqual.js";
 import { SVGElementPropKeys as G, EventKeys as F, FilteredElementKeyMap as s } from "./types.js";

package/dist/styles/Dropdown.styles.js

@@ -106,7 +106,7 @@ const x = r.div`
       align-items: center;
       gap: ${({ theme: o }) => `${o.spacing.s}`};
       width: ${({ $hasDyncWidth: o }) => o ? "calc(100% - 2.688rem)" : "100%"};
-      span {
+      > span {
         display: block;
         width: 100%;
         margin: 0px;
@@ -115,7 +115,7 @@ const x = r.div`
         text-overflow: ellipsis;
         text-align: start;
       }
-      svg {
+      > svg {
         width: 1.5rem;
         height: 1.5rem;
         color: ${({ theme: o, $valid: e }) => `${e ? o.colors.grey.n300 : o.colors.state.error.n450}`} !important;

package/package.json

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