qaema-ui 0.0.1 → 0.0.2

package/dist/components/RequestCard.d.ts

@@ -30,6 +30,7 @@ export type RequestCardProps = {
         unit?: string;
     };
     inModal?: boolean;
+    background?: string;
 };
 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;

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

@@ -1 +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"}
+{"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;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,oOAK1B,CAAC;AA6DF,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,CAqG3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/RequestCard.js

@@ -1,25 +1,25 @@
 import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import s, { useTheme as B } from "styled-components";
+import s, { useTheme as S } 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 { useQaemaCoreTranslation as F } from "../i18n/i18n.js";
+import H from "../assets/svg/Riyal.svg.js";
+import { FeatureList as A, FeatureRow as E, Bullet as P } from "./RequestSummaryCard.js";
 import c from "./Typography.js";
-const P = s.div`
+const q = s.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: ${({ image: e, inModal: n }) => e ? n ? "65%" : "unset" : "100%"};
-`, q = s.div`
+`, W = 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%
-  );
+  background: ${({ $background: e, theme: n }) => e ?? `linear-gradient(
+      180deg,
+      ${n.colors.primary.purple.n100} 0%,
+      ${n.colors.primary.purple.n300} 100%
+    )`};
   border-radius: ${({ theme: e }) => e.borderRadius.md};
 
   place-items: center;
@@ -29,22 +29,22 @@ const P = s.div`
   svg {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
     display: block;
   }
-`, W = s.div`
+`, M = 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)`
+`, V = 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`
+`, D = 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 +55,7 @@ const P = s.div`
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   letter-spacing: -0.25px;
   color: ${({ theme: e }) => e.colors.grey.n800};
-`, D = s.p`
+`, I = s.p`
   margin: 0;
   color: ${({ theme: e }) => e.colors.grey.n400};
   font-size: ${({ theme: e }) => {
@@ -63,11 +63,11 @@ const P = s.div`
   return (n = e.typography.sizes) == null ? void 0 : n.s3;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.s};
-`, I = s.div`
+`, L = s.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, L = s.div`
+`, N = 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 +78,7 @@ const P = s.div`
   letter-spacing: 0;
   vertical-align: middle;
   color: ${({ theme: e }) => e.colors.grey.n650};
-`, N = s.div`
+`, Q = s.div`
   width: ${({ $fixed: e }) => e ? "335px" : "100%"};
   min-width: 11.1875rem;
   height: 100%;
@@ -91,7 +91,7 @@ const P = s.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, Q = s.div`
+`, X = s.div`
   position: relative;
   width: 100%;
   height: 0.5rem;
@@ -107,7 +107,7 @@ const P = s.div`
     transition: width 250ms ease;
     border-radius: 0;
   }
-`, X = s.span`
+`, G = 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 +117,7 @@ const P = s.div`
   line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
   letter-spacing: 0;
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, G = (e) => {
+`, J = (e) => {
   switch (e) {
     case "accepted":
       return { bar: "#1DBA63" };
@@ -128,7 +128,7 @@ const P = s.div`
     default:
       return { bar: "#EEF0F2" };
   }
-}, J = s.div`
+}, K = s.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -139,7 +139,7 @@ const P = s.div`
   @media (max-width: 375px) {
     align-items: center;
   }
-`, K = s.div`
+`, O = s.div`
   display: flex;
   align-items: baseline;
   color: ${({ theme: e }) => e.colors.grey.n650};
@@ -151,48 +151,49 @@ const P = s.div`
   @media (max-width: 375px) {
     text-align: center;
   }
-`, O = s.div`
+`, U = s.div`
   display: flex;
   align-items: center;
-`, U = s.img`
+`, Y = s.img`
   width: ${({ $width: e = "1rem" }) => e};
   height: 1rem;
   object-fit: contain;
   flex-shrink: 0;
   margin-right: 2px;
-`, te = ({
+`, oe = ({
   variant: e = "hidden",
   image: n,
   title: x,
   subtitle: g,
   trackingLabel: u = "Request Tracking",
-  progress: m = 0,
-  statusText: f,
+  progress: f = 0,
+  statusText: m,
   primaryCta: o,
   secondaryCta: l,
-  className: y,
-  style: $,
+  className: $,
+  style: y,
   features: a,
   featuresTitle: b,
   price: t,
-  inModal: h = !1
+  inModal: h = !1,
+  background: j
 }) => {
-  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,
+  const { t: r } = F(), w = J(e), k = e !== "hidden", v = r(e === "accepted" ? "accepted" : e === "rejected" ? "rejected" : "submitted"), z = e === "hidden" ? "primary" : e === "accepted" ? "light-primary" : "outline-primary", p = e === "rejected", R = S();
+  return /* @__PURE__ */ i.jsxs(Q, { className: $, style: y, children: [
+    n ? /* @__PURE__ */ i.jsx(W, { $inModal: h, $background: j, children: n }) : null,
+    /* @__PURE__ */ i.jsxs(q, { image: n, inModal: h, children: [
+      /* @__PURE__ */ i.jsx(D, { children: x }),
+      g ? /* @__PURE__ */ i.jsx(I, { 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)) })
+        /* @__PURE__ */ i.jsx(c, { variant: "h6", color: R.colors.grey.n400, children: b }),
+        /* @__PURE__ */ i.jsx(A, { children: a.map((T, B) => /* @__PURE__ */ i.jsxs(E, { children: [
+          /* @__PURE__ */ i.jsx(P, {}),
+          /* @__PURE__ */ i.jsx("span", { children: T.label })
+        ] }, B)) })
       ] }) : 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 }),
+      t && /* @__PURE__ */ i.jsx(K, { children: /* @__PURE__ */ i.jsxs(O, { children: [
+        /* @__PURE__ */ i.jsxs(U, { children: [
+          /* @__PURE__ */ i.jsx(Y, { src: H, 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: [
@@ -200,23 +201,23 @@ const P = s.div`
           (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 })
+      k && /* @__PURE__ */ i.jsxs(L, { children: [
+        /* @__PURE__ */ i.jsx(N, { children: u }),
+        /* @__PURE__ */ i.jsx(X, { $value: f, $color: w.bar }),
+        /* @__PURE__ */ i.jsx(G, { children: m ?? v })
       ] }),
-      /* @__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 }),
+      /* @__PURE__ */ i.jsx(M, { $isRow: p, children: p ? /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsx(V, { 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: z, 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
+  q as ContentWrapper,
+  X as ProgressBar,
+  G as StatusText,
+  N as TrackingHeader,
+  L as TrackingWrap,
+  oe as default
 };

package/package.json

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