qaema-ui 0.0.65 → 0.0.68

package/dist/components/PriceCard.js

@@ -1,27 +1,28 @@
 import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import { FiCheck as S, FiX as T } from "../node_modules/react-icons/fi/index.js";
-import o, { css as p } from "styled-components";
-import y from "../assets/icons/RiyalIcon.js";
-import { CurrencyContainer as H } from "../styles/Currency.styles.js";
-import B from "../assets/svg/Riyal.svg.js";
-import I from "./Badge.js";
-import d from "./Button.js";
-import a from "./Typography.js";
-const E = {
-  transparent: p`
+import t, { css as u } from "styled-components";
+import x from "../assets/icons/RiyalIcon.js";
+import { CurrencyContainer as W } from "../styles/Currency.styles.js";
+import P from "../assets/svg/Riyal.svg.js";
+import L from "./Badge.js";
+import b from "./Button.js";
+import M from "./FeaturesList.js";
+import g from "./Typography.js";
+const N = {
+  transparent: u`
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
     box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
   `,
-  purple: p`
+  purple: u`
     background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
     border: 1px solid #e3deff;
     box-shadow:
       0px 4px 6px -2px #10182808,
       0px 12px 16px -4px #10182814;
   `
-}, P = o.div`
+}, O = t.div`
+  position: relative;
   width: 100%;
   max-width: 28.458rem;
 
@@ -29,160 +30,157 @@ const E = {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => E[e]};
-`, W = o.div`
+  ${({ $variant: e }) => N[e]};
+`, U = t.div`
   padding: 25px;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, D = o.div`
+`, V = t.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ $hasMultipleBadges: e }) => e ? "flex-start" : "space-between"};
   gap: ${({ theme: e }) => e.spacing.s};
   flex-wrap: wrap;
-`, L = o(a)`
+  padding-right: ${({ $hasRibbon: e }) => e ? "8rem" : "0"};
+`, q = t(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s3;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
   white-space: nowrap;
-`, V = o.div`
+`, G = t.div`
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-`, M = o.div`
+`, J = t.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: nowrap;
   span {
     font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
     line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
   }
-`, N = o.div`
+`, K = t.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 9.5rem;
+  height: 4rem;
+  padding: 0 ${({ theme: e }) => e.spacing.m};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-left-radius: ${({ theme: e }) => e.borderRadius.xl};
+  background-color: ${({ $bgColor: e }) => e};
+  color: ${({ $color: e }) => e};
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  white-space: nowrap;
+`, Q = t.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, U = o(y).attrs(({ theme: e }) => ({
+`, w = t(x).attrs(({ theme: e }) => ({
   color: e.colors.grey.n350,
   width: "18",
   height: "20"
-}))``, X = o.span`
+}))``, X = t.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: 2.25rem;
   line-height: 2.5rem;
-  color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, q = o.span`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, Y = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s5;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s5;
 }};
   line-height: 1.804rem;
-  color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, G = o(a)`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, Z = t(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, J = o.div`
+`, _ = t.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, K = o(a)`
+`, A = t(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s3;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
 }};
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, Q = o(a)`
+`, ee = t(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, Y = o.div`
+`, ie = t.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, Z = o.span`
+`, d = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.bold};
   font-size: ${({ theme: e }) => e.typography.sizes.s9};
   line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, _ = o.span`
+`, oe = t(d)`
+  text-decoration: line-through;
+`, te = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, O = o.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: e }) => e.spacing.s};
-`, A = o.li`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: e }) => e.spacing.xs};
-`, ee = o.span`
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  svg {
-    width: 0.7rem;
-    height: 0.7rem;
-  }
-
-  ${({ theme: e, $variant: r }) => r === "included" ? p`
-          border: 1px solid ${e.colors.secondary.green.n450};
-          color: ${e.colors.secondary.green.n450};
-        ` : p`
-          border: 1px solid ${e.colors.secondary.pink.n450};
-          color: ${e.colors.secondary.pink.n450};
-        `}
-`, ie = o(a)`
+`, j = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
-  font-weight: 400;
-  font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
-}};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
-  color: ${({ theme: e }) => e.colors.grey.n400};
-`, re = o.div`
+  color: #17954f;
+`, re = t.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 16px;
+`, ne = t(d)`
+  color: #17954f;
+`, se = t(x).attrs({
+  color: "#17954f",
+  width: "16",
+  height: "18"
+})``, le = t.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -192,143 +190,154 @@ const E = {
   button {
     width: 100%;
   }
-`, fe = ({
+`, $e = ({
   title: e,
-  price: r,
-  description: m,
-  hintComponent: $,
-  secondaryPrice: g,
-  features: u,
-  variant: b = "transparent",
-  badges: h = [],
-  showPrimaryAction: w = !1,
-  primaryAction: s,
-  showSecondaryAction: j = !1,
-  secondaryAction: n,
-  showFeatures: v = !0,
-  featuresTitle: z = "FEATURES",
-  featuresDescription: C = "Everything in our free plan plus.....",
-  showAddons: k = !1,
-  selectedAddon: R = "Without",
+  price: o,
+  description: z,
+  hintComponent: v,
+  secondaryPrice: a,
+  discount: h,
+  discountLabel: m,
+  features: C,
+  variant: R = "transparent",
+  badges: f = [],
+  showPrimaryAction: B = !1,
+  primaryAction: n,
+  showSecondaryAction: k = !1,
+  secondaryAction: s,
+  showFeatures: S = !0,
+  featuresTitle: H = "FEATURES",
+  featuresDescription: T = "Everything in our free plan plus.....",
+  showAddons: F = !1,
+  selectedAddon: D = "Without",
   setSelectedAddon: c,
-  addOnsData: f = [],
+  addOnsData: y = [],
   // addonsTitle = 'Personal Accountant',
   // addonsOptionalLabel = 'optional',
-  addonsMonthlyLabel: F = "monthly"
-}) => /* @__PURE__ */ i.jsxs(P, { $variant: b, children: [
-  /* @__PURE__ */ i.jsxs(W, { children: [
-    /* @__PURE__ */ i.jsxs(D, { children: [
-      /* @__PURE__ */ i.jsx(L, { children: e }),
-      h.length > 0 && /* @__PURE__ */ i.jsx(M, { children: h.map((t, l) => /* @__PURE__ */ i.jsx(
-        I,
+  addonsMonthlyLabel: E = "monthly",
+  mobileHintComponent: I
+}) => {
+  const p = f.find((r) => r.ribbon), $ = f.filter((r) => !r.ribbon);
+  return /* @__PURE__ */ i.jsxs(O, { $variant: R, children: [
+    p && /* @__PURE__ */ i.jsx(K, { $bgColor: p.bgColor, $color: p.color, children: p.label }),
+    /* @__PURE__ */ i.jsxs(U, { children: [
+      /* @__PURE__ */ i.jsxs(V, { $hasRibbon: !!p, $hasMultipleBadges: f.length > 1, children: [
+        /* @__PURE__ */ i.jsx(q, { children: e }),
+        $.length > 0 && /* @__PURE__ */ i.jsx(J, { children: $.map((r, l) => /* @__PURE__ */ i.jsx(
+          L,
+          {
+            label: r.label,
+            bgColor: r.bgColor,
+            color: r.color,
+            image: r.image ?? "",
+            weight: r.weight,
+            variant: r.variant
+          },
+          `${r.label}-${l}`
+        )) })
+      ] }),
+      /* @__PURE__ */ i.jsxs(Q, { children: [
+        /* @__PURE__ */ i.jsx(W, { src: P, alt: "Riyal" }),
+        /* @__PURE__ */ i.jsx(X, { $color: o.color, children: o.amount }),
+        /* @__PURE__ */ i.jsx(Y, { $color: o.periodColor, children: o.period ?? "/ Month" })
+      ] }),
+      a && /* @__PURE__ */ i.jsxs(ie, { children: [
+        a.originalAmount && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+          /* @__PURE__ */ i.jsx(w, {}),
+          /* @__PURE__ */ i.jsx(oe, { children: a.originalAmount })
+        ] }),
+        /* @__PURE__ */ i.jsx(w, {}),
+        /* @__PURE__ */ i.jsx(d, { children: a.amount }),
+        /* @__PURE__ */ i.jsx(te, { children: a.label })
+      ] }),
+      h ? /* @__PURE__ */ i.jsxs(re, { children: [
+        /* @__PURE__ */ i.jsx(j, { children: h.label }),
+        /* @__PURE__ */ i.jsx(se, {}),
+        /* @__PURE__ */ i.jsx(ne, { children: h.amount })
+      ] }) : m && /* @__PURE__ */ i.jsx(j, { children: m }),
+      /* @__PURE__ */ i.jsx(Z, { children: z }),
+      F && y.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
+        "div",
         {
-          label: t.label,
-          bgColor: t.bgColor,
-          color: t.color,
-          image: t.image ?? "",
-          weight: t.weight,
-          variant: t.variant
-        },
-        `${t.label}-${l}`
-      )) })
-    ] }),
-    /* @__PURE__ */ i.jsxs(N, { children: [
-      /* @__PURE__ */ i.jsx(H, { src: B, alt: "Riyal" }),
-      /* @__PURE__ */ i.jsx(X, { $color: r.color, children: r.amount }),
-      /* @__PURE__ */ i.jsx(q, { $color: r.periodColor, children: r.period ?? "/ Month" })
-    ] }),
-    g && /* @__PURE__ */ i.jsxs(Y, { children: [
-      /* @__PURE__ */ i.jsx(U, {}),
-      /* @__PURE__ */ i.jsx(Z, { children: g.amount }),
-      /* @__PURE__ */ i.jsx(_, { children: g.label })
-    ] }),
-    /* @__PURE__ */ i.jsx(G, { children: m }),
-    k && f.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
-      "div",
-      {
-        style: {
-          backgroundColor: "#f5f7fb",
-          borderRadius: "9px",
-          padding: "4px",
-          display: "grid",
-          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-          gap: "4px"
-        },
-        children: f.map((t) => {
-          const l = R === t.id;
-          return /* @__PURE__ */ i.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => c == null ? void 0 : c(t.id),
-              style: {
-                padding: "8px 6px 7px",
-                border: l ? "1px solid #e4e7ec" : "1px solid transparent",
-                backgroundColor: l ? "#ffffff" : "transparent",
-                color: l ? "#16181c" : "#72788e",
-                borderRadius: "6px",
-                cursor: "pointer",
-                fontWeight: 600,
-                fontSize: "12.78px",
-                lineHeight: 1.1,
-                transition: "all 0.18s ease",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "2px",
-                minHeight: "42px",
-                boxShadow: l ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+          style: {
+            backgroundColor: "#f5f7fb",
+            borderRadius: "9px",
+            padding: "4px",
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            gap: "4px"
+          },
+          children: y.map((r) => {
+            const l = D === r.id;
+            return /* @__PURE__ */ i.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => c == null ? void 0 : c(r.id),
+                style: {
+                  padding: "8px 6px 7px",
+                  border: l ? "1px solid #e4e7ec" : "1px solid transparent",
+                  backgroundColor: l ? "#ffffff" : "transparent",
+                  color: l ? "#16181c" : "#72788e",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  fontWeight: 600,
+                  fontSize: "12.78px",
+                  lineHeight: 1.1,
+                  transition: "all 0.18s ease",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "2px",
+                  minHeight: "42px",
+                  boxShadow: l ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ i.jsx("span", { children: r.titleEn }),
+                  /* @__PURE__ */ i.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        marginTop: "2px",
+                        color: "#16181c",
+                        fontWeight: 600,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "2px"
+                      },
+                      children: [
+                        /* @__PURE__ */ i.jsx(x, { width: "9", height: "9", color: "#16181c" }),
+                        r.baseFare,
+                        " ",
+                        E
+                      ]
+                    }
+                  )
+                ]
               },
-              children: [
-                /* @__PURE__ */ i.jsx("span", { children: t.titleEn }),
-                /* @__PURE__ */ i.jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "11px",
-                      marginTop: "2px",
-                      color: "#16181c",
-                      fontWeight: 600,
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "2px"
-                    },
-                    children: [
-                      /* @__PURE__ */ i.jsx(y, { width: "9", height: "9", color: "#16181c" }),
-                      t.baseFare,
-                      " ",
-                      F
-                    ]
-                  }
-                )
-              ]
-            },
-            t.id
-          );
-        })
-      }
-    ) }),
-    /* @__PURE__ */ i.jsxs(re, { children: [
-      w && /* @__PURE__ */ i.jsx(d, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
-      j && /* @__PURE__ */ i.jsx(d, { variant: (n == null ? void 0 : n.variant) ?? "light-primary", onClick: n == null ? void 0 : n.onSecondaryActionClick, children: n == null ? void 0 : n.label })
-    ] })
-  ] }),
-  v && /* @__PURE__ */ i.jsxs(J, { children: [
-    /* @__PURE__ */ i.jsxs(V, { children: [
-      /* @__PURE__ */ i.jsx(K, { children: z }),
-      /* @__PURE__ */ i.jsx(Q, { children: C })
+              r.id
+            );
+          })
+        }
+      ) }),
+      I,
+      /* @__PURE__ */ i.jsxs(le, { children: [
+        B && /* @__PURE__ */ i.jsx(b, { variant: (n == null ? void 0 : n.variant) ?? "primary", onClick: n == null ? void 0 : n.onPrimaryActionClick, children: n == null ? void 0 : n.label }),
+        k && /* @__PURE__ */ i.jsx(b, { variant: (s == null ? void 0 : s.variant) ?? "light-primary", onClick: s == null ? void 0 : s.onSecondaryActionClick, children: s == null ? void 0 : s.label })
+      ] })
     ] }),
-    $,
-    /* @__PURE__ */ i.jsx(O, { children: u.map((t, l) => {
-      const x = t.variant ?? "included";
-      return /* @__PURE__ */ i.jsxs(A, { children: [
-        /* @__PURE__ */ i.jsx(ee, { $variant: x, children: x === "included" ? /* @__PURE__ */ i.jsx(S, {}) : /* @__PURE__ */ i.jsx(T, {}) }),
-        /* @__PURE__ */ i.jsx(ie, { children: t.label })
-      ] }, `${t.label}-${l}`);
-    }) })
-  ] })
-] });
+    S && /* @__PURE__ */ i.jsxs(_, { children: [
+      /* @__PURE__ */ i.jsxs(G, { children: [
+        /* @__PURE__ */ i.jsx(A, { children: H }),
+        /* @__PURE__ */ i.jsx(ee, { children: T })
+      ] }),
+      v,
+      /* @__PURE__ */ i.jsx(M, { features: C })
+    ] })
+  ] });
+};
 export {
-  fe as default
+  $e as default
 };

package/dist/components/index.d.ts

@@ -157,3 +157,5 @@ export { default as PriceCard } from './PriceCard';
 export type { PriceCardProps, PriceCardFeature, PriceCardBadge } from './PriceCard';
 export { default as CallOutBox } from './CallOutBox';
 export type { CalloutConfig, CalloutVariant } from './CallOutBox';
+export { default as FeaturesList } from './FeaturesList';
+export type { FeaturesListProps } from './FeaturesList';