qaema-ui 0.0.1

package/dist/components/RequestCard.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { FeatureItem } from './RequestSummaryCard';
+export type RequestCardVariant = 'hidden' | 'accepted' | 'rejected' | 'inProgress';
+type ContentWrapperProps = {
+    image?: React.ReactNode;
+    inModal?: boolean;
+};
+export type RequestCardProps = {
+    variant?: RequestCardVariant;
+    image?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    trackingLabel?: React.ReactNode;
+    progress?: number;
+    statusText?: React.ReactNode;
+    primaryCta?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    secondaryCta?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+    features?: FeatureItem[];
+    featuresTitle?: string;
+    price?: {
+        amount?: string;
+        unit?: string;
+    };
+    inModal?: boolean;
+};
+export declare const ContentWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentWrapperProps>> & string;
+export declare const TrackingWrap: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TrackingHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressBar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+    $value: number;
+}>> & string;
+export declare const StatusText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const RequestCard: React.FC<RequestCardProps>;
+export default RequestCard;
+//# sourceMappingURL=RequestCard.d.ts.map

package/dist/components/RequestCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/RequestCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAU,KAAK,WAAW,EAA2B,MAAM,sBAAsB,CAAC;AAGzF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC;AAInF,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC9D,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,oOAK1B,CAAC;AA0DF,eAAO,MAAM,YAAY,yMAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,yMAQ1B,CAAC;AAiBF,eAAO,MAAM,WAAW;YAAwB,MAAM;YAAU,MAAM;YAgBrE,CAAC;AAEF,eAAO,MAAM,UAAU,2MAOtB,CAAC;AAqDF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgG3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/RequestCard.js

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

package/dist/components/RequestSummaryCard.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { ButtonVariant } from '../hooks/useButtonVariant';
+import { RequestCardVariant } from './RequestCard';
+type RequestState = 'accepted' | 'rejected';
+export type FeatureVariant = 'default' | 'tag';
+export type FeatureItem = {
+    label: React.ReactNode;
+    variant?: FeatureVariant;
+};
+export type RequestSummaryCardProps = {
+    state: RequestState;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    features?: FeatureItem[];
+    price?: {
+        amount: string;
+        suffix?: string;
+    };
+    progress?: number;
+    statusText?: React.ReactNode;
+    image?: React.ReactNode;
+    primaryCta?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    primaryCtaVariant?: ButtonVariant;
+    className?: string;
+    style?: React.CSSProperties;
+    showTracking?: boolean;
+    variant?: RequestCardVariant;
+    trackingLabel?: string;
+};
+export declare const FeatureList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const FeatureRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const Bullet: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $stroke?: boolean;
+}>> & string;
+declare const RequestSummaryCard: React.FC<RequestSummaryCardProps>;
+export default RequestSummaryCard;
+//# sourceMappingURL=RequestSummaryCard.d.ts.map

package/dist/components/RequestSummaryCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestSummaryCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/RequestSummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,OAAO,EAAe,KAAK,kBAAkB,EAA4C,MAAM,eAAe,CAAC;AAE/G,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC9D,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAoEF,eAAO,MAAM,WAAW,6MAOvB,CAAC;AAEF,eAAO,MAAM,UAAU,yMAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;cAA2B,OAAO;YA0BpD,CAAC;AAyCF,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/RequestSummaryCard.js

@@ -0,0 +1,184 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import "react";
+import i from "styled-components";
+import w from "./Button.js";
+import { device as k } from "../constants/breakPoints.constant.js";
+import v from "../assets/svg/Riyal.svg.js";
+import { TrackingWrap as a, TrackingHeader as z, ProgressBar as R, StatusText as B } from "./RequestCard.js";
+const S = i.article`
+  width: ${({ $fixed: e }) => e ? "1053px" : "100%"};
+  min-width: 11.1875rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  padding: ${({ theme: e }) => e.spacing.sm};
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  box-shadow: ${({ theme: e }) => e.boxShadow.s3};
+  min-height: 20rem;
+  height: auto;
+
+  display: grid;
+  grid-template-columns: 24.75rem 1fr;
+  align-items: start;
+  gap: ${({ theme: e }) => e.spacing.m};
+  @media ${k.laptop} {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+`, H = i.div`
+  width: 100%;
+  height: 100%;
+  align-self: start;
+  background: linear-gradient(
+    180deg,
+    ${({ theme: e }) => e.colors.primary.purple.n100} 0%,
+    ${({ theme: e }) => e.colors.primary.purple.n300} 100%
+  );
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+
+  img,
+  svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+`, T = i.div`
+  display: grid;
+  grid-template-rows: auto auto auto auto auto auto;
+  gap: ${({ theme: e }) => e.spacing.s};
+  height: 100%;
+`, E = i.h3`
+  margin: 0;
+  font-family: ${({ theme: e }) => e.dir === "rtl" ? e.fonts.arabic : e.fonts.english};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s5};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
+  color: ${({ theme: e }) => e.colors.grey.n800};
+`, F = i.p`
+  margin: 0;
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  font-size: ${({ theme: e }) => e.typography.sizes.s3};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+`, q = i.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, A = i.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  color: ${({ theme: e }) => e.colors.grey.n800};
+  font-size: ${({ theme: e }) => e.typography.sizes.s3};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+`, C = i.span`
+  position: relative;
+  display: inline-block;
+  width: 0.5625rem;
+  height: 0.5rem;
+  background: ${({ theme: e }) => e.colors.primary.purple.n450};
+  border-radius: 0;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0.25rem;
+    height: 0.5rem;
+    background: ${({ theme: e }) => e.colors.grey.n50};
+    clip-path: polygon(0 0, 100% 0, 0 100%);
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-shadow: inset 0 0 0 0.063rem ${({ theme: e }) => `${e.colors.primary.purple.n450}26`};
+    display: ${({ $stroke: e }) => e ? "block" : "none"};
+  }
+`, N = i.div`
+  display: flex;
+  align-items: baseline;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  color: ${({ theme: e }) => e.colors.grey.n800};
+
+  .amount {
+    font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+    font-size: ${({ theme: e }) => e.typography.sizes.s8};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.l};
+    letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.narrow};
+  }
+  .suffix {
+    color: ${({ theme: e }) => e.colors.grey.n800};
+    font-size: ${({ theme: e }) => e.typography.sizes.s3};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+  }
+`, P = i.img`
+  width: 0.875rem;
+  height: 0.9375rem;
+  opacity: 1;
+  display: inline-block;
+`, D = (e) => {
+  switch (e) {
+    case "accepted":
+      return { bar: "#1DBA63" };
+    case "rejected":
+      return { bar: "#E03428" };
+    case "inProgress":
+      return { bar: "#7259ff" };
+    default:
+      return { bar: "#EEF0F2" };
+  }
+}, K = ({
+  state: e,
+  title: l,
+  description: n,
+  features: r,
+  price: s,
+  progress: g = 0,
+  statusText: d,
+  image: c,
+  primaryCta: o,
+  primaryCtaVariant: p = "primary",
+  className: h,
+  style: m,
+  showTracking: u = !1,
+  variant: y = "hidden",
+  trackingLabel: f = ""
+}) => {
+  const $ = e === "rejected" ? "Your request is Rejected" : "Your request is Accepted", x = D(y);
+  return /* @__PURE__ */ t.jsxs(S, { className: h, style: m, "aria-live": "polite", children: [
+    /* @__PURE__ */ t.jsx(H, { children: c }),
+    /* @__PURE__ */ t.jsxs(T, { children: [
+      /* @__PURE__ */ t.jsx(E, { children: l }),
+      n ? /* @__PURE__ */ t.jsx(F, { children: n }) : null,
+      r && r.length > 0 ? /* @__PURE__ */ t.jsx(q, { children: r.map((b, j) => /* @__PURE__ */ t.jsxs(A, { children: [
+        /* @__PURE__ */ t.jsx(C, {}),
+        /* @__PURE__ */ t.jsx("span", { children: b.label })
+      ] }, j)) }) : null,
+      s && /* @__PURE__ */ t.jsxs(N, { children: [
+        /* @__PURE__ */ t.jsx(P, { src: v, alt: "SAR" }),
+        s != null && s.amount ? /* @__PURE__ */ t.jsx("span", { className: "amount", children: s.amount }) : null,
+        s != null && s.suffix ? /* @__PURE__ */ t.jsx("span", { className: "suffix", children: s.suffix }) : null
+      ] }),
+      u ? /* @__PURE__ */ t.jsxs(a, { children: [
+        /* @__PURE__ */ t.jsx(z, { children: f }),
+        /* @__PURE__ */ t.jsx(R, { $value: g, $color: x.bar }),
+        /* @__PURE__ */ t.jsx(B, { children: d ?? $ })
+      ] }) : /* @__PURE__ */ t.jsx(a, {}),
+      o ? /* @__PURE__ */ t.jsx(w, { style: { marginTop: "auto" }, variant: p, size: "md", width: "100%", onClick: o.onClick, children: o.label }) : null
+    ] })
+  ] });
+};
+export {
+  C as Bullet,
+  q as FeatureList,
+  A as FeatureRow,
+  K as default
+};

package/dist/components/SearchBar.d.ts

@@ -0,0 +1,7 @@
+export type SearchBarProps = {
+    placeholder?: string;
+    onSearch?: (value: string) => void;
+};
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;
+//# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/lib/components/SearchBar.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAyCF,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiDvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/SearchBar.js

@@ -0,0 +1,78 @@
+import { j as n } from "../_virtual/jsx-runtime.js";
+import { useState as c } from "react";
+import { FaSearch as f } from "../node_modules/react-icons/fa/index.js";
+import a, { useTheme as y } from "styled-components";
+import { useQaemaCoreTranslation as x } from "../i18n/i18n.js";
+import { a as h } from "../node_modules/@react-spring/web/dist/react-spring_web.modern.js";
+import { useSpring as b } from "../node_modules/@react-spring/core/dist/react-spring_core.modern.js";
+import w from "../node_modules/react-bootstrap/esm/Button.js";
+import $ from "../node_modules/react-bootstrap/esm/Form.js";
+const j = a(h.div)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: ${({ theme: e }) => `1px solid ${e.colors.grey.n100}`};
+  border-radius: ${({ theme: e }) => e.borderRadius.xxl};
+  box-shadow: 0px 0.86px 2.57px 0px rgba(0, 0, 0, 0.1);
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+  overflow: hidden;
+  height: 2rem;
+`, v = a(w)`
+  border: none;
+  padding: 0 0.5rem;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, E = a($.Control)`
+  border: none;
+  background-color: transparent;
+  height: 2rem;
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
+  font-weight: ${({ theme: e }) => e.typography.weights.regular};
+  color: ${({ theme: e }) => e.colors.grey.n300};
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &::placeholder {
+    color: ${({ theme: e }) => e.colors.grey.n300};
+  }
+`, I = ({ placeholder: e, onSearch: r }) => {
+  const i = y(), { t: p } = x(), [m, l] = c(!1), [o, d] = c(""), t = m || !!o, g = b({
+    width: t ? "16rem" : "2rem",
+    paddingLeft: t ? i.spacing.s : "0rem",
+    paddingRight: t ? i.spacing.s : "0rem",
+    config: { tension: 250, friction: 20 }
+  }), u = (s) => {
+    s.key === "Enter" && r && r(o);
+  };
+  return /* @__PURE__ */ n.jsxs(j, { style: g, onMouseEnter: () => l(!0), onMouseLeave: () => l(!1), children: [
+    /* @__PURE__ */ n.jsx(
+      v,
+      {
+        onClick: () => {
+          (o == null ? void 0 : o.length) > 0 && r && r(o);
+        },
+        children: /* @__PURE__ */ n.jsx(f, { color: i.colors.grey.n400, size: "1rem" })
+      }
+    ),
+    t && /* @__PURE__ */ n.jsx(
+      E,
+      {
+        placeholder: e ?? p("PRESS_TO_SEARCH"),
+        value: o,
+        onChange: (s) => {
+          s.target.value == "" && o ? (r == null || r(""), d("")) : d(s.target.value);
+        },
+        onKeyDown: u,
+        autoFocus: !0
+      }
+    )
+  ] });
+};
+export {
+  I as default
+};

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type SectionHeaderProps = {
+    title?: string;
+    subtitle?: string;
+    children?: React.ReactNode;
+};
+declare const SectionHeader: React.FC<SectionHeaderProps>;
+export default SectionHeader;
+//# sourceMappingURL=SectionHeader.d.ts.map

package/dist/components/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/lib/components/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAyBF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/SectionHeader.js

@@ -0,0 +1,33 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import t from "styled-components";
+import { device as s } from "../constants/breakPoints.constant.js";
+import r from "./Typography.js";
+const a = t.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme: e }) => e.spacing.sm} ${({ theme: e }) => e.spacing.m};
+  gap: ${({ theme: e }) => e.spacing.xs};
+  width: 100%;
+  min-height: 7rem;
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+  h6 {
+    color: ${({ theme: e }) => e.colors.grey.n400};
+  }
+  @media ${s.tablet} {
+    h3 {
+      font-size: ${({ theme: e }) => e.typography.sizes.s4};
+      line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+    }
+    h6 {
+      font-size: ${({ theme: e }) => e.typography.sizes.s2};
+      line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+    }
+  }
+`, m = ({ title: e, subtitle: i, children: n }) => /* @__PURE__ */ o.jsxs(a, { children: [
+  e && /* @__PURE__ */ o.jsx(r, { variant: "h3-lg", component: "h3", children: e }),
+  i && /* @__PURE__ */ o.jsx(r, { variant: "h6-lg", component: "h6", children: i }),
+  n
+] });
+export {
+  m as default
+};

package/dist/components/SideMenuLinks.d.ts

@@ -0,0 +1,11 @@
+import { NavItemType } from './NavItem';
+export interface SideMenuLinksProps {
+    navItems: Array<NavItemType & {
+        icon: React.ReactNode | React.FunctionComponent;
+    }>;
+    activePath?: string;
+    linkComponent?: React.ElementType;
+}
+declare const SideMenuLinks: React.FC<SideMenuLinksProps>;
+export default SideMenuLinks;
+//# sourceMappingURL=SideMenuLinks.d.ts.map

package/dist/components/SideMenuLinks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideMenuLinks.d.ts","sourceRoot":"","sources":["../../src/lib/components/SideMenuLinks.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAqB7C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CACb,WAAW,GAAG;QACZ,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,iBAAiB,CAAC;KACjD,CACF,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACnC;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAc/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/SideMenuLinks.js

@@ -0,0 +1,20 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import i from "styled-components";
+import s from "./Link.js";
+import a from "./NavItem.js";
+const d = i.div`
+  width: 15rem;
+  height: 100%;
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+  border-right: 0.063rem solid ${({ theme: r }) => r.colors.grey.n100};
+  padding: ${({ theme: r }) => r.spacing.sm};
+`, m = i.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`, c = i.li`
+  margin-bottom: ${({ theme: r }) => r.spacing.xxs};
+`, x = ({ navItems: r, activePath: n = "", linkComponent: e = "div" }) => /* @__PURE__ */ t.jsx(d, { children: /* @__PURE__ */ t.jsx(m, { children: r.map((o) => /* @__PURE__ */ t.jsx(c, { children: /* @__PURE__ */ t.jsx(s, { to: o.path ?? "/", component: e, wrapper: !0, style: { textDecoration: "none" }, children: /* @__PURE__ */ t.jsx(a, { item: { variant: "normal", active: n === o.path, ...o } }) }) }, o.path)) }) });
+export {
+  x as default
+};