qaema-ui 0.0.68 → 0.0.71

package/dist/components/PriceCard.js

@@ -3,11 +3,11 @@ import "react";
 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 L from "../assets/svg/Riyal.svg.js";
+import M from "./Badge.js";
 import b from "./Button.js";
-import M from "./FeaturesList.js";
-import g from "./Typography.js";
+import P from "./FeaturesList.js";
+import h from "./Typography.js";
 const N = {
   transparent: u`
     background: rgba(255, 255, 255, 0.72);
@@ -44,7 +44,7 @@ const N = {
   gap: ${({ theme: e }) => e.spacing.s};
   flex-wrap: wrap;
   padding-right: ${({ $hasRibbon: e }) => e ? "8rem" : "0"};
-`, q = t(g)`
+`, q = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
@@ -111,7 +111,7 @@ const N = {
 }};
   line-height: 1.804rem;
   color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
-`, Z = t(g)`
+`, Z = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
@@ -125,7 +125,7 @@ const N = {
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, A = t(g)`
+`, A = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
@@ -135,7 +135,7 @@ const N = {
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, ee = t(g)`
+`, ee = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
@@ -151,12 +151,13 @@ const N = {
 `, 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};
+  font-size: ${({ $isDiscounted: e, theme: o }) => e ? "1.50rem" : o.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};
 `, oe = t(d)`
   text-decoration: line-through;
+  font-size: 1.5rem;
 `, te = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
@@ -176,6 +177,7 @@ const N = {
   font-size: 16px;
 `, ne = t(d)`
   color: #17954f;
+  font-size: 16px;
 `, se = t(x).attrs({
   color: "#17954f",
   width: "16",
@@ -195,8 +197,8 @@ const N = {
   price: o,
   description: z,
   hintComponent: v,
-  secondaryPrice: a,
-  discount: h,
+  secondaryPrice: l,
+  discount: g,
   discountLabel: m,
   features: C,
   variant: R = "transparent",
@@ -208,8 +210,8 @@ const N = {
   showFeatures: S = !0,
   featuresTitle: H = "FEATURES",
   featuresDescription: T = "Everything in our free plan plus.....",
-  showAddons: F = !1,
-  selectedAddon: D = "Without",
+  showAddons: D = !1,
+  selectedAddon: F = "Without",
   setSelectedAddon: c,
   addOnsData: y = [],
   // addonsTitle = 'Personal Accountant',
@@ -223,8 +225,8 @@ const N = {
     /* @__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,
+        $.length > 0 && /* @__PURE__ */ i.jsx(J, { children: $.map((r, a) => /* @__PURE__ */ i.jsx(
+          M,
           {
             label: r.label,
             bgColor: r.bgColor,
@@ -233,30 +235,33 @@ const N = {
             weight: r.weight,
             variant: r.variant
           },
-          `${r.label}-${l}`
+          `${r.label}-${a}`
         )) })
       ] }),
       /* @__PURE__ */ i.jsxs(Q, { children: [
-        /* @__PURE__ */ i.jsx(W, { src: P, alt: "Riyal" }),
+        /* @__PURE__ */ i.jsx(W, { src: L, 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: [
+      l && /* @__PURE__ */ i.jsxs(ie, { children: [
+        l.originalAmount && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
           /* @__PURE__ */ i.jsx(w, {}),
-          /* @__PURE__ */ i.jsx(oe, { children: a.originalAmount })
+          /* @__PURE__ */ i.jsxs(oe, { children: [
+            l.originalAmount,
+            " "
+          ] })
         ] }),
         /* @__PURE__ */ i.jsx(w, {}),
-        /* @__PURE__ */ i.jsx(d, { children: a.amount }),
-        /* @__PURE__ */ i.jsx(te, { children: a.label })
+        /* @__PURE__ */ i.jsx(d, { $isDiscounted: !!(g && l.originalAmount), children: l.amount }),
+        /* @__PURE__ */ i.jsx(te, { children: l.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 })
+      g ? /* @__PURE__ */ i.jsxs(re, { children: [
+        /* @__PURE__ */ i.jsx(j, { children: g.label }),
+        /* @__PURE__ */ i.jsx(se, { style: { width: "14px", height: "16px" } }),
+        /* @__PURE__ */ i.jsx(ne, { children: g.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(
+      D && y.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
         "div",
         {
           style: {
@@ -268,7 +273,7 @@ const N = {
             gap: "4px"
           },
           children: y.map((r) => {
-            const l = D === r.id;
+            const a = F === r.id;
             return /* @__PURE__ */ i.jsxs(
               "button",
               {
@@ -276,9 +281,9 @@ const N = {
                 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",
+                  border: a ? "1px solid #e4e7ec" : "1px solid transparent",
+                  backgroundColor: a ? "#ffffff" : "transparent",
+                  color: a ? "#16181c" : "#72788e",
                   borderRadius: "6px",
                   cursor: "pointer",
                   fontWeight: 600,
@@ -291,7 +296,7 @@ const N = {
                   justifyContent: "center",
                   gap: "2px",
                   minHeight: "42px",
-                  boxShadow: l ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                  boxShadow: a ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
                 },
                 children: [
                   /* @__PURE__ */ i.jsx("span", { children: r.titleEn }),
@@ -334,7 +339,7 @@ const N = {
         /* @__PURE__ */ i.jsx(ee, { children: T })
       ] }),
       v,
-      /* @__PURE__ */ i.jsx(M, { features: C })
+      /* @__PURE__ */ i.jsx(P, { features: C })
     ] })
   ] });
 };

package/package.json

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