qaema-ui 0.0.54 → 0.0.56

package/dist/_virtual/index.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 { getDefaultExportFromCjs as s } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/classnames/index.js";
+var a = r();
+const t = /* @__PURE__ */ s(a);
 export {
-  m as default
+  t as default
 };

package/dist/_virtual/index2.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/_virtual/index3.js

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

package/dist/_virtual/index7.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/_virtual/index8.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/components/Badge.d.ts

@@ -9,6 +9,7 @@ export type BadgeProps = {
     variant?: BadgeVariant;
     children?: ReactNode;
     onClose?: () => void;
+    image?: string;
 };
-declare const Badge: ({ bgColor, color, label, weight, variant, onClose, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ bgColor, color, label, weight, variant, onClose, children, image }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge.js

@@ -1,9 +1,9 @@
-import { j as t } from "../_virtual/jsx-runtime.js";
-import { IoClose as l } from "../node_modules/react-icons/io5/index.js";
+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 p from "../hooks/useBadgeVariant.js";
-import m from "./Typography.js";
-const g = i.div`
+import m from "../hooks/useBadgeVariant.js";
+import g from "./Typography.js";
+const u = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,7 +12,7 @@ const g = i.div`
   background-color: ${({ bgColor: r, $variantStyles: o }) => r ?? o.backgroundColor};
   gap: ${({ theme: r }) => r.spacing.xs};
   height: 1.5rem;
-`, u = i.div`
+`, f = i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,14 +23,21 @@ const g = i.div`
   &:hover {
     opacity: 0.8;
   }
-`, b = ({ bgColor: r, color: o, label: s, weight: n, variant: c, onClose: a, children: d }) => {
-  const e = p(c ?? "default");
-  return /* @__PURE__ */ t.jsxs(g, { bgColor: r, $variantStyles: e, children: [
-    s && /* @__PURE__ */ t.jsx(m, { variant: "span", color: o ?? e.color, weight: n, children: s }),
-    d,
-    a && /* @__PURE__ */ t.jsx(u, { onClick: a, $variantStyles: e, children: /* @__PURE__ */ t.jsx(l, { color: o ?? e.color, size: "0.75rem" }) })
+`, x = 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");
+  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 }),
+    l,
+    a && /* @__PURE__ */ e.jsx(f, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
   ] });
 };
 export {
-  b as default
+  v as default
 };

package/dist/components/NavItem.d.ts

@@ -17,6 +17,13 @@ export type NavItemType = {
     onClick?: (value: unknown) => void;
     linkComponent?: React.ElementType;
     active?: boolean;
+    badge?: {
+        label?: string;
+        variant?: string;
+        color?: string;
+        bgColor?: string;
+        image?: string;
+    };
 };
 export type NavItemProps = {
     item: NavItemType;

package/dist/components/NavItem.js

@@ -1,9 +1,10 @@
 import { j as r } from "../_virtual/jsx-runtime.js";
-import s, { useTheme as g, css as c } from "styled-components";
-import { useNavItemVariant as u } from "../hooks/useNavItemVariant.js";
-import h from "./Link.js";
-import v from "./Typography.js";
-const b = {
+import a, { useTheme as h, css as c } from "styled-components";
+import { useNavItemVariant as v } from "../hooks/useNavItemVariant.js";
+import x from "./Badge.js";
+import u from "./Link.js";
+import $ from "./Typography.js";
+const f = {
   bullet: c`
     border-radius: ${({ theme: o }) => o.borderRadius.circle};
     background-color: ${({ theme: o }) => o.colors.secondary.pink.n450};
@@ -13,18 +14,16 @@ const b = {
     border-radius: ${({ theme: o }) => o.borderRadius.sm};
     background-color: ${({ theme: o }) => o.colors.primary.purple.n450};
   `
-}, x = s.div`
+}, y = a.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing.xs};
-  border: none;
 
-  background-color: transparent;
-  cursor: pointer;
   svg {
     width: 1.5rem;
     height: 1.5rem;
+    flex-shrink: 0;
   }
 
   p {
@@ -32,7 +31,11 @@ const b = {
     margin: 0;
     white-space: nowrap;
   }
-`, $ = s.div`
+`, p = a.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing.xs};
+`, C = a.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -53,48 +56,73 @@ const b = {
       border-radius: ${o.theme.borderRadius.sm};
       background-color: ${o.$activeBgColor};
     `}
-`, y = s.div`
+`, j = a.div`
   width: 1.5rem;
   height: 1.5rem;
   text-align: center;
   color: ${({ theme: o }) => o.colors.grey.n50};
   font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
-  ${({ $variant: o }) => b[o]}
-`, B = ({ item: o }) => {
-  const e = o == null ? void 0 : o.icon, n = g(), { color: t, bgColor: p, activeBgColor: a, activeColor: l } = u(o == null ? void 0 : o.variant), d = /* @__PURE__ */ r.jsxs(x, { children: [
-    /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: n.spacing.xs }, children: [
-      e && /* @__PURE__ */ r.jsx(e, { color: o.active ? l : t, size: 20 }),
-      /* @__PURE__ */ r.jsx(v, { component: "p", variant: "smText", color: o.active ? l : t, children: o == null ? void 0 : o.title })
-    ] }),
-    (o == null ? void 0 : o.count) && /* @__PURE__ */ r.jsx(y, { $variant: (o == null ? void 0 : o.notificationVariant) ?? "badge", children: /* @__PURE__ */ r.jsx("span", { children: o.count }) })
-  ] }), i = {
+  ${({ $variant: o }) => f[o]}
+`, R = ({ item: o }) => {
+  const e = o == null ? void 0 : o.icon, n = h(), { color: l, bgColor: b, activeBgColor: s, activeColor: t } = v(o == null ? void 0 : o.variant), d = /* @__PURE__ */ r.jsxs(y, { children: [
+    e && /* @__PURE__ */ r.jsx(e, { color: o.active ? t : l, size: 20 }),
+    /* @__PURE__ */ r.jsx($, { component: "p", variant: "smText", color: o.active ? t : l, children: o == null ? void 0 : o.title })
+  ] }), i = o != null && o.badge ? /* @__PURE__ */ r.jsx(
+    x,
+    {
+      label: o.badge.label,
+      variant: o.badge.variant,
+      color: o.badge.color,
+      bgColor: o.badge.bgColor,
+      image: o.badge.image
+    }
+  ) : o != null && o.count ? /* @__PURE__ */ r.jsx(j, { $variant: (o == null ? void 0 : o.notificationVariant) ?? "badge", children: /* @__PURE__ */ r.jsx("span", { children: o.count }) }) : null, g = {
     padding: `${n.spacing.xs} ${n.spacing.sm}`,
     width: "100%",
-    hoverBgColor: a,
-    activeBgColor: a
+    hoverBgColor: s,
+    activeBgColor: s
   };
   return /* @__PURE__ */ r.jsx(
-    $,
+    C,
     {
       $variant: (o == null ? void 0 : o.variant) ?? "normal",
-      $bgColor: p,
-      $activeBgColor: a ?? "",
+      $bgColor: b,
+      $activeBgColor: s ?? "",
       $active: !!(o != null && o.active),
-      children: (o == null ? void 0 : o.component) === "link" && o.path ? /* @__PURE__ */ r.jsx(h, { to: o.path, state: o.state, component: o.linkComponent, ...i, children: d }) : /* @__PURE__ */ r.jsx(
+      children: (o == null ? void 0 : o.component) === "link" && o.path ? /* @__PURE__ */ r.jsx(u, { to: o.path, state: o.state, component: o.linkComponent, ...g, children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+            gap: n.spacing.sm
+          },
+          children: [
+            d,
+            /* @__PURE__ */ r.jsx(p, { children: i })
+          ]
+        }
+      ) }) : /* @__PURE__ */ r.jsxs(
         "button",
         {
           onClick: o.onClick,
           style: {
-            ...i,
+            ...g,
             border: "none",
             background: "transparent",
             cursor: "pointer",
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            width: "100%"
+            width: "100%",
+            gap: n.spacing.sm
           },
-          children: d
+          children: [
+            d,
+            /* @__PURE__ */ r.jsx(p, { children: i })
+          ]
         }
       )
     },
@@ -102,5 +130,5 @@ const b = {
   );
 };
 export {
-  B as default
+  R as default
 };

package/dist/components/RequestCard.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type BadgeProps } from '@components/Badge';
 import { type FeatureItem } from './RequestSummaryCard';
 export type RequestCardVariant = 'hidden' | 'accepted' | 'rejected' | 'inProgress';
 type ContentWrapperProps = {
@@ -25,6 +26,7 @@ export type RequestCardProps = {
     style?: React.CSSProperties;
     features?: FeatureItem[];
     featuresTitle?: string;
+    badgeList?: BadgeProps[];
     price?: {
         amount?: string;
         unit?: string;

package/dist/components/RequestCard.js

@@ -1,17 +1,18 @@
 import { j as n } from "../_virtual/jsx-runtime.js";
 import "react";
-import s, { useTheme as S } from "styled-components";
-import a from "./Button.js";
-import { useQaemaCoreTranslation as F } from "../i18n/i18n.js";
-import A from "../assets/svg/Riyal.svg.js";
-import { FeatureList as H, FeatureRow as P, Bullet as q } from "./RequestSummaryCard.js";
-import d from "./Typography.js";
-const W = s.div`
+import s, { useTheme as F } from "styled-components";
+import A 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 h from "./Typography.js";
+const M = s.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: ${({ image: e, inModal: i }) => e ? i ? "65%" : "unset" : "100%"};
-`, E = s.div`
+`, V = s.div`
   min-width: 9.0625rem;
   display: flex;
   aspect-ratio: ${({ $inModal: e }) => e ? "23/9" : "11/9"};
@@ -32,19 +33,19 @@ const W = s.div`
     object-fit: cover;
     display: block;
   }
-`, M = s.div`
+`, D = s.div`
   display: grid;
   grid-template-columns: '1fr';
   gap: ${({ theme: e }) => e.spacing.xs};
   margin-top: ${({ theme: e }) => e.spacing.xxs};
   justify-content: 'stretch';
   align-items: center;
-`, V = s(a)`
+`, I = s(p)`
   min-width: 9.3125rem;
   min-height: 2rem;
   border-radius: ${({ theme: e }) => e.borderRadius.sm};
   box-shadow: ${({ theme: e }) => e.boxShadow.s3};
-`, D = s.h3`
+`, N = s.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};
@@ -55,7 +56,7 @@ const W = s.div`
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   letter-spacing: -0.25px;
   color: ${({ theme: e }) => e.colors.grey.n800};
-`, I = s.p`
+`, Q = s.p`
   margin: 0;
   color: ${({ theme: e }) => e.colors.grey.n400};
   font-size: ${({ theme: e }) => {
@@ -63,11 +64,17 @@ const W = s.div`
   return (i = e.typography.sizes) == null ? void 0 : i.s3;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.s};
-`, L = s.div`
+`, X = s.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`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, N = s.div`
+`, 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 }) => {
@@ -78,7 +85,7 @@ const W = s.div`
   letter-spacing: 0;
   vertical-align: middle;
   color: ${({ theme: e }) => e.colors.grey.n650};
-`, Q = s.div`
+`, K = s.div`
   width: ${({ $fixed: e }) => e ? "335px" : "100%"};
   min-width: 11.1875rem;
   height: 100%;
@@ -91,7 +98,7 @@ const W = s.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, X = s.div`
+`, L = s.div`
   position: relative;
   width: 100%;
   height: 0.5rem;
@@ -107,7 +114,7 @@ const W = s.div`
     transition: width 250ms ease;
     border-radius: 0;
   }
-`, G = s.span`
+`, 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 }) => {
@@ -117,7 +124,7 @@ const W = s.div`
   line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
   letter-spacing: 0;
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, J = (e) => {
+`, U = (e) => {
   switch (e) {
     case "accepted":
       return { bar: "#1DBA63" };
@@ -128,7 +135,7 @@ const W = s.div`
     default:
       return { bar: "#7259ff" };
   }
-}, K = s.div`
+}, Y = s.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -139,7 +146,7 @@ const W = s.div`
   @media (max-width: 375px) {
     align-items: center;
   }
-`, O = s.div`
+`, Z = s.div`
   display: flex;
   align-items: baseline;
   color: ${({ theme: e }) => e.colors.grey.n650};
@@ -151,73 +158,75 @@ const W = s.div`
   @media (max-width: 375px) {
     text-align: center;
   }
-`, U = s.div`
+`, _ = s.div`
   display: flex;
   align-items: center;
-`, Y = s.img`
+`, C = s.img`
   width: ${({ $width: e = "1rem" }) => e};
   height: 1rem;
   object-fit: contain;
   flex-shrink: 0;
   margin-right: 2px;
-`, oe = ({
+`, ce = ({
   variant: e = "hidden",
   image: i,
-  title: x,
-  subtitle: g,
-  trackingLabel: u = "Request Tracking",
-  progress: f = 0,
-  statusText: m,
-  primaryCta: o,
+  title: f,
+  subtitle: x,
+  trackingLabel: $ = "Request Tracking",
+  progress: y = 0,
+  statusText: j,
+  primaryCta: t,
   secondaryCta: l,
-  className: y,
-  style: $,
-  features: c,
-  featuresTitle: j,
-  price: t,
-  inModal: h = !1,
-  background: b
+  className: b,
+  style: w,
+  features: a,
+  featuresTitle: k,
+  badgeList: c,
+  price: o,
+  inModal: u = !1,
+  background: v
 }) => {
-  const { t: r } = F(), w = J(e), k = e !== "hidden", v = r(e === "accepted" ? "accepted" : e === "rejected" ? "rejected" : "submitted"), p = e === "hidden" ? "primary" : e === "accepted" || e === "rejected" ? "light-primary" : "outline-primary", z = e === "rejected", R = S();
-  return /* @__PURE__ */ n.jsxs(Q, { className: y, style: $, children: [
-    i ? /* @__PURE__ */ n.jsx(E, { $inModal: h, $background: b, children: i }) : null,
-    /* @__PURE__ */ n.jsxs(W, { image: i, inModal: h, children: [
-      /* @__PURE__ */ n.jsx(D, { children: x }),
-      g ? /* @__PURE__ */ n.jsx(I, { children: g }) : null,
-      c && c.length > 0 ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-        /* @__PURE__ */ n.jsx(d, { variant: "h6", color: R.colors.grey.n400, children: j }),
-        /* @__PURE__ */ n.jsx(H, { children: c.map((T, B) => /* @__PURE__ */ n.jsxs(P, { children: [
-          /* @__PURE__ */ n.jsx(q, {}),
-          /* @__PURE__ */ n.jsx("span", { children: T.label })
-        ] }, B)) })
+  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)) }),
+      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("span", { children: d.label })
+        ] }, g)) })
       ] }) : null,
-      t && /* @__PURE__ */ n.jsx(K, { children: /* @__PURE__ */ n.jsxs(O, { children: [
-        /* @__PURE__ */ n.jsxs(U, { children: [
-          /* @__PURE__ */ n.jsx(Y, { src: A, alt: t == null ? void 0 : t.amount }),
-          /* @__PURE__ */ n.jsx(d, { variant: "h5", weight: "bold", children: t == null ? void 0 : t.amount })
+      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 }),
+          /* @__PURE__ */ n.jsx(h, { variant: "h5", weight: "bold", children: o == null ? void 0 : o.amount })
         ] }),
-        /* @__PURE__ */ n.jsxs(d, { variant: "caption", children: [
+        /* @__PURE__ */ n.jsxs(h, { variant: "caption", children: [
           "/",
-          (t == null ? void 0 : t.unit) ?? r("year")
+          (o == null ? void 0 : o.unit) ?? r("year")
         ] })
       ] }) }),
-      k && /* @__PURE__ */ n.jsxs(L, { children: [
-        /* @__PURE__ */ n.jsx(N, { children: u }),
-        /* @__PURE__ */ n.jsx(X, { $value: f, $color: w.bar }),
-        /* @__PURE__ */ n.jsx(G, { children: m ?? v })
+      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 })
       ] }),
-      /* @__PURE__ */ n.jsx(M, { children: z ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx(V, { variant: p, size: "xs", onClick: o == null ? void 0 : o.onClick, children: (o == null ? void 0 : o.label) ?? "Send New Request" }) }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-        o && /* @__PURE__ */ n.jsx(a, { variant: p, size: "md", onClick: o.onClick, children: o.label }),
-        l && /* @__PURE__ */ n.jsx(a, { variant: "light-secondary", size: "md", onClick: l.onClick, children: l.label })
+      /* @__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 }),
+        l && /* @__PURE__ */ n.jsx(p, { variant: "light-secondary", size: "md", onClick: l.onClick, children: l.label })
       ] }) })
     ] })
   ] });
 };
 export {
-  W as ContentWrapper,
-  X as ProgressBar,
-  G as StatusText,
-  N as TrackingHeader,
-  L as TrackingWrap,
-  oe as default
+  M as ContentWrapper,
+  L as ProgressBar,
+  O as StatusText,
+  J as TrackingHeader,
+  G as TrackingWrap,
+  ce as default
 };

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

@@ -1,4 +1,4 @@
-import k from "../../../_virtual/index3.js";
+import k from "../../../_virtual/index.js";
 import * as v from "react";
 import N from "../../uncontrollable/lib/esm/hook.js";
 import "../../../_virtual/browser.js";

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

@@ -1,5 +1,5 @@
 import * as m from "react";
-import i from "../../../_virtual/index3.js";
+import i from "../../../_virtual/index.js";
 import { useBootstrapPrefix as l } from "./ThemeProvider.js";
 import d from "./divWithClassName.js";
 import { j as p } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,5 +1,5 @@
 import * as s from "react";
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import i from "../../@restart/ui/esm/Anchor.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as f } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,4 +1,4 @@
-import l from "../../../_virtual/index3.js";
+import l from "../../../_virtual/index.js";
 import * as x from "react";
 import { useButtonProps as N } from "../../@restart/ui/esm/Button.js";
 import { useBootstrapPrefix as B } from "./ThemeProvider.js";

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

@@ -1,6 +1,6 @@
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.js";
 import * as p from "react";
-import n from "../../../_virtual/index3.js";
+import n from "../../../_virtual/index.js";
 import { j as i } from "../../../_virtual/jsx-runtime.js";
 const m = {
   /** An accessible label indicating the relevant information about the Close Button. */

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

@@ -1,4 +1,4 @@
-import $ from "../../../_virtual/index3.js";
+import $ from "../../../_virtual/index.js";
 import * as d from "react";
 import { useBootstrapPrefix as B, useBootstrapBreakpoints as h, useBootstrapMinBreakpoint as N } from "./ThemeProvider.js";
 import { j } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,4 +1,4 @@
-import j from "../../../_virtual/index3.js";
+import j from "../../../_virtual/index.js";
 import d from "../../dom-helpers/esm/css.js";
 import h, { useMemo as r } from "react";
 import { ENTERED as G, ENTERING as L, EXITING as B, EXITED as M } from "../../react-transition-group/esm/Transition.js";

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

@@ -1,4 +1,4 @@
-import j from "../../../_virtual/index3.js";
+import j from "../../../_virtual/index.js";
 import * as P from "react";
 import { useContext as R, useMemo as S } from "react";
 import $ from "../../@restart/ui/esm/Dropdown.js";

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

@@ -1,5 +1,5 @@
 import * as m from "react";
-import p from "../../../_virtual/index3.js";
+import p from "../../../_virtual/index.js";
 import { useBootstrapPrefix as d } from "./ThemeProvider.js";
 import { j as i } from "../../../_virtual/jsx-runtime.js";
 const f = /* @__PURE__ */ m.forwardRef(({

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

@@ -1,5 +1,5 @@
 import * as d from "react";
-import m from "../../../_virtual/index3.js";
+import m from "../../../_virtual/index.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as f } from "../../../_virtual/jsx-runtime.js";
 const i = /* @__PURE__ */ d.forwardRef(({

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

@@ -1,4 +1,4 @@
-import c from "../../../_virtual/index3.js";
+import c from "../../../_virtual/index.js";
 import * as w from "react";
 import { useDropdownItem as x } from "../../@restart/ui/esm/DropdownItem.js";
 import l from "../../@restart/ui/esm/Anchor.js";

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

@@ -1,5 +1,5 @@
 import * as m from "react";
-import s from "../../../_virtual/index3.js";
+import s from "../../../_virtual/index.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as d } from "../../../_virtual/jsx-runtime.js";
 const f = /* @__PURE__ */ m.forwardRef(({

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

@@ -1,4 +1,4 @@
-import W from "../../../_virtual/index3.js";
+import W from "../../../_virtual/index.js";
 import * as C from "react";
 import { useContext as x } from "react";
 import { useDropdownMenu as I } from "../../@restart/ui/esm/DropdownMenu.js";

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

@@ -1,7 +1,7 @@
 import a from "../../@restart/hooks/esm/useMergedRefs.js";
 import d from "../../@restart/ui/esm/DropdownContext.js";
 import { useDropdownToggle as g } from "../../@restart/ui/esm/DropdownToggle.js";
-import l from "../../../_virtual/index3.js";
+import l from "../../../_virtual/index.js";
 import * as u from "react";
 import { useContext as w } from "react";
 import x from "./Button.js";

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

@@ -1,4 +1,4 @@
-import l from "../../../_virtual/index3.js";
+import l from "../../../_virtual/index.js";
 import * as s from "react";
 import { useCallback as d } from "react";
 import { ENTERED as E, ENTERING as c } from "../../react-transition-group/esm/Transition.js";

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

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

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

@@ -1,4 +1,4 @@
-import i from "../../../_virtual/index3.js";
+import i from "../../../_virtual/index.js";
 import * as f from "react";
 import p from "./FormGroup.js";
 import { useBootstrapPrefix as n } from "./ThemeProvider.js";

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

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

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

@@ -1,4 +1,4 @@
-import O from "../../../_virtual/index3.js";
+import O from "../../../_virtual/index.js";
 import * as B from "react";
 import { useContext as E, useMemo as M } from "react";
 import T from "./Feedback.js";

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

@@ -1,4 +1,4 @@
-import f from "../../../_virtual/index3.js";
+import f from "../../../_virtual/index.js";
 import * as n from "react";
 import { useContext as l } from "react";
 import u from "./FormContext.js";

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

@@ -1,4 +1,4 @@
-import s from "../../../_virtual/index3.js";
+import s from "../../../_virtual/index.js";
 import * as l from "react";
 import { useContext as c } from "react";
 import f from "./FormContext.js";

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

@@ -1,4 +1,4 @@
-import C from "../../../_virtual/index3.js";
+import C from "../../../_virtual/index.js";
 import * as F from "react";
 import { useContext as N } from "react";
 import $ from "../../../_virtual/warning.js";

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

@@ -1,5 +1,5 @@
 import * as s from "react";
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import { useBootstrapPrefix as f } from "./ThemeProvider.js";
 import { j as i } from "../../../_virtual/jsx-runtime.js";
 const p = /* @__PURE__ */ s.forwardRef(({

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

@@ -1,4 +1,4 @@
-import c from "../../../_virtual/index3.js";
+import c from "../../../_virtual/index.js";
 import * as d from "react";
 import { useContext as u } from "react";
 import x from "../../../_virtual/warning.js";

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

@@ -1,4 +1,4 @@
-import s from "../../../_virtual/index3.js";
+import s from "../../../_virtual/index.js";
 import * as n from "react";
 import { useContext as p } from "react";
 import { useBootstrapPrefix as f } from "./ThemeProvider.js";

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

@@ -1,4 +1,4 @@
-import c from "../../../_virtual/index3.js";
+import c from "../../../_virtual/index.js";
 import * as p from "react";
 import { useContext as n } from "react";
 import { useBootstrapPrefix as d } from "./ThemeProvider.js";

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

@@ -1,4 +1,4 @@
-import s from "../../../_virtual/index3.js";
+import s from "../../../_virtual/index.js";
 import * as f from "react";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as x } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,6 +1,6 @@
-import f from "../../../_virtual/index3.js";
+import f from "../../../_virtual/index.js";
 import * as d from "react";
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.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-bootstrap/esm/Nav.js

@@ -1,4 +1,4 @@
-import P from "../../../_virtual/index3.js";
+import P from "../../../_virtual/index.js";
 import * as j from "react";
 import { useContext as m } from "react";
 import y from "../../uncontrollable/lib/esm/hook.js";

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

@@ -1,5 +1,5 @@
 import * as s from "react";
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as f } from "../../../_virtual/jsx-runtime.js";
 const i = /* @__PURE__ */ s.forwardRef(({

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

@@ -1,4 +1,4 @@
-import c from "../../../_virtual/index3.js";
+import c from "../../../_virtual/index.js";
 import * as p from "react";
 import v from "../../@restart/ui/esm/Anchor.js";
 import { useNavItem as l } from "../../@restart/ui/esm/NavItem.js";

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

@@ -1,4 +1,4 @@
-import P from "../../../_virtual/index3.js";
+import P from "../../../_virtual/index.js";
 import * as T from "react";
 import { useCallback as j, useMemo as h } from "react";
 import y from "../../@restart/ui/esm/SelectableContext.js";

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

@@ -1,4 +1,4 @@
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import * as n from "react";
 import { useBootstrapPrefix as f } from "./ThemeProvider.js";
 import { j as p } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,5 +1,5 @@
 import * as e from "react";
-import m from "../../../_virtual/index3.js";
+import m from "../../../_virtual/index.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as f } from "../../../_virtual/jsx-runtime.js";
 const x = /* @__PURE__ */ e.forwardRef(({

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

@@ -1,4 +1,4 @@
-import g from "../../../_virtual/index3.js";
+import g from "../../../_virtual/index.js";
 import * as u from "react";
 import { useContext as d } from "react";
 import x from "../../@restart/hooks/esm/useEventCallback.js";

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

@@ -1,4 +1,4 @@
-import v from "../../../_virtual/index3.js";
+import v from "../../../_virtual/index.js";
 import Q from "../../@restart/hooks/esm/useBreakpoint.js";
 import U from "../../@restart/hooks/esm/useEventCallback.js";
 import * as V from "react";

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

@@ -1,5 +1,5 @@
 import * as t from "react";
-import m from "../../../_virtual/index3.js";
+import m from "../../../_virtual/index.js";
 import { useBootstrapPrefix as e } from "./ThemeProvider.js";
 import { j as p } from "../../../_virtual/jsx-runtime.js";
 const c = /* @__PURE__ */ t.forwardRef(({

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

@@ -1,4 +1,4 @@
-import f from "../../../_virtual/index3.js";
+import f from "../../../_virtual/index.js";
 import * as m from "react";
 import { useBootstrapPrefix as c } from "./ThemeProvider.js";
 import l from "./AbstractModalHeader.js";

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

@@ -1,5 +1,5 @@
 import * as e from "react";
-import m from "../../../_virtual/index3.js";
+import m from "../../../_virtual/index.js";
 import f from "./divWithClassName.js";
 import { useBootstrapPrefix as i } from "./ThemeProvider.js";
 import { j as l } from "../../../_virtual/jsx-runtime.js";

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

@@ -1,4 +1,4 @@
-import c from "../../../_virtual/index3.js";
+import c from "../../../_virtual/index.js";
 import * as n from "react";
 import { ENTERING as t, EXITING as g, ENTERED as d } from "../../react-transition-group/esm/Transition.js";
 import { getChildRef as N } from "../../@restart/ui/esm/utils.js";

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

@@ -1,6 +1,6 @@
 import * as $ from "react";
 import { useRef as l, useEffect as x, useCallback as k, useMemo as A } from "react";
-import M from "../../../_virtual/index3.js";
+import M from "../../../_virtual/index.js";
 import b from "../../@restart/hooks/esm/useTimeout.js";
 import q from "./ToastFade.js";
 import w from "./ToastHeader.js";

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

@@ -1,5 +1,5 @@
 import * as m from "react";
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import { useBootstrapPrefix as p } from "./ThemeProvider.js";
 import { j as d } from "../../../_virtual/jsx-runtime.js";
 const f = /* @__PURE__ */ m.forwardRef(({

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

@@ -1,4 +1,4 @@
-import d from "../../../_virtual/index3.js";
+import d from "../../../_virtual/index.js";
 import * as f from "react";
 import { useContext as u } from "react";
 import C from "../../@restart/hooks/esm/useEventCallback.js";

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

@@ -1,5 +1,5 @@
 import * as r from "react";
-import e from "../../../_virtual/index3.js";
+import e from "../../../_virtual/index.js";
 import { j as o } from "../../../_virtual/jsx-runtime.js";
 const i = ((a) => (
   // eslint-disable-next-line react/display-name

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/index.js";
+import ee from "../../../_virtual/index3.js";
 import F from "../../../_virtual/browser.js";
-import te from "../../../_virtual/index2.js";
+import te from "../../../_virtual/index4.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-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../_virtual/index7.js";
+import { __module as e } from "../../_virtual/index8.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/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/index4.js";
+import a from "../../../_virtual/index2.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/index4.js";
+import o from "../../../_virtual/index2.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/index4.js";
+import e from "../../../../_virtual/index2.js";
 var n = process.env.NODE_ENV !== "production" ? e.oneOfType([e.number, e.shape({
   enter: e.number,
   exit: e.number,

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/index8.js";
+import { r as B } from "../../../../_virtual/index7.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/package.json

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