qaema-ui 0.0.61 → 0.0.63

package/dist/components/PriceCard.js

@@ -1,14 +1,14 @@
 import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import { FiCheck as B, FiX as T } from "../node_modules/react-icons/fi/index.js";
+import { FiCheck as S, FiX as T } from "../node_modules/react-icons/fi/index.js";
 import o, { css as p } from "styled-components";
 import m from "../assets/icons/RiyalIcon.js";
 import { CurrencyContainer as H } from "../styles/Currency.styles.js";
-import I from "../assets/svg/Riyal.svg.js";
-import P from "./Badge.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 W = {
+const E = {
   transparent: p`
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
@@ -21,15 +21,15 @@ const W = {
       0px 4px 6px -2px #10182808,
       0px 12px 16px -4px #10182814;
   `
-}, E = o.div`
+}, P = o.div`
   width: 100%;
   max-width: 28.458rem;
   border-radius: ${({ theme: e }) => e.borderRadius.xl};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => W[e]};
-`, L = o.div`
+  ${({ $variant: e }) => E[e]};
+`, W = o.div`
   padding: 2rem;
   display: flex;
   flex-direction: column;
@@ -41,7 +41,7 @@ const W = {
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spacing.m};
   flex-wrap: wrap;
-`, V = o(a)`
+`, L = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
@@ -50,30 +50,37 @@ const W = {
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, M = o.div`
+`, V = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-`, N = o.div`
+`, M = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: wrap;
-`, U = o.div`
+  span {
+    font-size: ${({ theme: e }) => {
+  var r;
+  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+}};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+  }
+`, N = o.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, X = o(m).attrs(({ theme: e }) => ({
+`, U = o(m).attrs(({ theme: e }) => ({
   color: e.colors.grey.n350,
   width: "18",
   height: "20"
-}))``, q = o.span`
+}))``, X = o.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: 2.706rem;
   line-height: 3.158rem;
   color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, G = o.span`
+`, q = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
@@ -82,7 +89,7 @@ const W = {
 }};
   line-height: 1.804rem;
   color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, J = o(a)`
+`, G = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
@@ -91,12 +98,12 @@ const W = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, K = o.div`
+`, J = o.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.m};
-`, Q = o(a)`
+`, K = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
@@ -106,7 +113,7 @@ const W = {
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, Y = o(a)`
+`, Q = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
@@ -115,35 +122,35 @@ const W = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, Z = o.div`
+`, Y = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, _ = o.span`
+`, Z = o.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 = o.span`
+`, _ = o.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};
-`, A = o.ul`
+`, O = o.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, ee = o.li`
+`, A = o.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, ie = o.span`
+`, ee = o.span`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
@@ -164,7 +171,7 @@ const W = {
           border: 1px solid ${e.colors.secondary.pink.n450};
           color: ${e.colors.secondary.pink.n450};
         `}
-`, re = o(a)`
+`, ie = o(a)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 400;
   font-size: ${({ theme: e }) => {
@@ -173,7 +180,7 @@ const W = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, oe = o.div`
+`, re = o.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -183,136 +190,143 @@ const W = {
   button {
     width: 100%;
   }
-`, xe = ({
+`, fe = ({
   title: e,
   price: r,
   description: y,
-  secondaryPrice: c,
-  features: $,
-  variant: u = "transparent",
+  hintComponent: $,
+  secondaryPrice: g,
+  features: u,
+  variant: b = "transparent",
   badges: h = [],
-  showPrimaryAction: b = !1,
+  showPrimaryAction: j = !1,
   primaryAction: s,
-  showSecondaryAction: j = !1,
-  secondaryAction: l,
-  showFeatures: w = !0,
-  featuresTitle: v = "FEATURES",
-  featuresDescription: z = "Everything in our free plan plus.....",
-  showAddons: C = !1,
-  selectedAddon: k = "Without",
-  setSelectedAddon: g,
+  showSecondaryAction: w = !1,
+  secondaryAction: n,
+  showFeatures: v = !0,
+  featuresTitle: z = "FEATURES",
+  featuresDescription: C = "Everything in our free plan plus.....",
+  showAddons: k = !1,
+  selectedAddon: R = "Without",
+  setSelectedAddon: c,
   addOnsData: f = [],
-  addonsTitle: F = "Personal Accountant",
-  addonsOptionalLabel: R = "optional",
-  addonsMonthlyLabel: S = "monthly"
-}) => /* @__PURE__ */ i.jsxs(E, { $variant: u, children: [
-  /* @__PURE__ */ i.jsxs(L, { children: [
+  // 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(V, { children: e }),
-      h.length > 0 && /* @__PURE__ */ i.jsx(N, { children: h.map((t, n) => /* @__PURE__ */ i.jsx(P, { label: t.label, bgColor: t.bgColor, color: t.color }, `${t.label}-${n}`)) })
-    ] }),
-    /* @__PURE__ */ i.jsxs(U, { children: [
-      /* @__PURE__ */ i.jsx(H, { src: I, alt: "Riyal" }),
-      /* @__PURE__ */ i.jsx(q, { $color: r.color, children: r.amount }),
-      /* @__PURE__ */ i.jsx(G, { $color: r.periodColor, children: r.period ?? "/ Month" })
+      /* @__PURE__ */ i.jsx(L, { children: e }),
+      h.length > 0 && /* @__PURE__ */ i.jsx(M, { children: h.map((t, l) => /* @__PURE__ */ i.jsx(
+        I,
+        {
+          label: t.label,
+          bgColor: t.bgColor,
+          color: t.color,
+          image: t.image ?? "",
+          weight: t.weight,
+          variant: t.variant
+        },
+        `${t.label}-${l}`
+      )) })
     ] }),
-    c && /* @__PURE__ */ i.jsxs(Z, { children: [
-      /* @__PURE__ */ i.jsx(X, {}),
-      /* @__PURE__ */ i.jsx(_, { children: c.amount }),
-      /* @__PURE__ */ i.jsx(O, { children: c.label })
+    /* @__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" })
     ] }),
-    /* @__PURE__ */ i.jsx(J, { children: y }),
-    /* @__PURE__ */ i.jsxs(oe, { children: [
-      b && /* @__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: (l == null ? void 0 : l.variant) ?? "light-primary", onClick: l == null ? void 0 : l.onSecondaryActionClick, children: l == null ? void 0 : l.label })
+    g && /* @__PURE__ */ i.jsxs(Y, { children: [
+      /* @__PURE__ */ i.jsx(U, {}),
+      /* @__PURE__ */ i.jsx(Z, { children: g.amount }),
+      /* @__PURE__ */ i.jsx(_, { children: g.label })
     ] }),
-    C && f.length > 0 && /* @__PURE__ */ i.jsxs("div", { children: [
-      /* @__PURE__ */ i.jsx("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px" }, children: /* @__PURE__ */ i.jsxs("div", { children: [
-        /* @__PURE__ */ i.jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "#111827" }, children: F }),
-        /* @__PURE__ */ i.jsx("span", { style: { fontSize: "11px", color: "#9ca3af", marginLeft: "6px" }, children: R })
-      ] }) }),
-      /* @__PURE__ */ i.jsx(
-        "div",
-        {
-          style: {
-            backgroundColor: "#f2f4f7",
-            borderRadius: "9px",
-            padding: "4px",
-            display: "grid",
-            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-            gap: "4px"
-          },
-          children: f.map((t) => {
-            const n = k === t.id;
-            return /* @__PURE__ */ i.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => g == null ? void 0 : g(t.id),
-                style: {
-                  padding: "8px 6px 7px",
-                  border: n ? "1px solid #d0d5dd" : "1px solid transparent",
-                  backgroundColor: n ? "#ffffff" : "transparent",
-                  color: n ? "#1d2939" : "#98a2b3",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontWeight: n ? 700 : 600,
-                  fontSize: "12px",
-                  lineHeight: 1.1,
-                  transition: "all 0.18s ease",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: t.baseFare > 0 ? "2px" : "0",
-                  minHeight: "42px",
-                  boxShadow: n ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
-                },
-                children: [
-                  /* @__PURE__ */ i.jsx("span", { children: t.titleEn }),
-                  t.baseFare > 0 && /* @__PURE__ */ i.jsxs(
-                    "span",
-                    {
-                      style: {
-                        fontSize: "10px",
-                        marginTop: "2px",
-                        color: n ? "#101828" : "#667085",
-                        fontWeight: 700,
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: "2px"
-                      },
-                      children: [
-                        /* @__PURE__ */ i.jsx(m, { width: "9", height: "9", color: n ? "#101828" : "#667085" }),
-                        t.baseFare,
-                        " ",
-                        S
-                      ]
-                    }
-                  )
-                ]
+    /* @__PURE__ */ i.jsx(G, { children: y }),
+    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"
               },
-              t.id
-            );
-          })
-        }
-      )
+              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(m, { width: "9", height: "9", color: "#16181c" }),
+                      t.baseFare,
+                      " ",
+                      F
+                    ]
+                  }
+                )
+              ]
+            },
+            t.id
+          );
+        })
+      }
+    ) }),
+    /* @__PURE__ */ i.jsxs(re, { children: [
+      j && /* @__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 }),
+      w && /* @__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 })
     ] })
   ] }),
-  w && /* @__PURE__ */ i.jsxs(K, { children: [
-    /* @__PURE__ */ i.jsxs(M, { children: [
-      /* @__PURE__ */ i.jsx(Q, { children: v }),
-      /* @__PURE__ */ i.jsx(Y, { children: z })
+  v && /* @__PURE__ */ i.jsxs(J, { children: [
+    /* @__PURE__ */ i.jsxs(V, { children: [
+      /* @__PURE__ */ i.jsx(K, { children: z }),
+      /* @__PURE__ */ i.jsx(Q, { children: C })
     ] }),
-    /* @__PURE__ */ i.jsx(A, { children: $.map((t, n) => {
+    $,
+    /* @__PURE__ */ i.jsx(O, { children: u.map((t, l) => {
       const x = t.variant ?? "included";
-      return /* @__PURE__ */ i.jsxs(ee, { children: [
-        /* @__PURE__ */ i.jsx(ie, { $variant: x, children: x === "included" ? /* @__PURE__ */ i.jsx(B, {}) : /* @__PURE__ */ i.jsx(T, {}) }),
-        /* @__PURE__ */ i.jsx(re, { children: t.label })
-      ] }, `${t.label}-${n}`);
+      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}`);
     }) })
   ] })
 ] });
 export {
-  xe as default
+  fe as default
 };

package/dist/components/SearchBar.js

@@ -1,12 +1,12 @@
 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 { FaSearch as u } 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";
+import $ from "../node_modules/react-bootstrap/esm/Button.js";
+import w from "../node_modules/react-bootstrap/esm/Form.js";
 const j = a(h.div)`
   display: flex;
   flex-direction: row;
@@ -17,14 +17,14 @@ const j = a(h.div)`
   background-color: ${({ theme: e }) => e.colors.grey.n50};
   overflow: hidden;
   height: 2rem;
-`, v = a(w)`
+`, v = a($)`
   border: none;
   padding: 0 0.5rem;
   background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
-`, E = a($.Control)`
+`, E = a(w.Control)`
   border: none;
   background-color: transparent;
   height: 2rem;
@@ -38,7 +38,8 @@ const j = a(h.div)`
   }
 
   &::placeholder {
-    color: ${({ theme: e }) => e.colors.grey.n300};
+    color: ${({ theme: e }) => e.colors.grey.n350};
+    font-size: ${({ theme: e }) => e.typography.sizes.s3};
   }
 `, I = ({ placeholder: e, onSearch: r }) => {
   const i = y(), { t: p } = x(), [m, l] = c(!1), [o, d] = c(""), t = m || !!o, g = b({
@@ -46,7 +47,7 @@ const j = a(h.div)`
     paddingLeft: t ? i.spacing.s : "0rem",
     paddingRight: t ? i.spacing.s : "0rem",
     config: { tension: 250, friction: 20 }
-  }), u = (s) => {
+  }), f = (s) => {
     s.key === "Enter" && r && r(o);
   };
   return /* @__PURE__ */ n.jsxs(j, { style: g, onMouseEnter: () => l(!0), onMouseLeave: () => l(!1), children: [
@@ -56,7 +57,7 @@ const j = a(h.div)`
         onClick: () => {
           (o == null ? void 0 : o.length) > 0 && r && r(o);
         },
-        children: /* @__PURE__ */ n.jsx(f, { color: i.colors.grey.n400, size: "1rem" })
+        children: /* @__PURE__ */ n.jsx(u, { color: i.colors.grey.n400, size: "1rem" })
       }
     ),
     t && /* @__PURE__ */ n.jsx(
@@ -67,7 +68,7 @@ const j = a(h.div)`
         onChange: (s) => {
           s.target.value == "" && o ? (r == null || r(""), d("")) : d(s.target.value);
         },
-        onKeyDown: u,
+        onKeyDown: f,
         autoFocus: !0
       }
     )