qaema-ui 0.0.62 → 0.0.64

package/dist/components/PackageCard.d.ts

@@ -1,10 +1,32 @@
 export type PackageCardProps = {
     planTitle: string;
     planDescription: string;
+    variant?: PackageCardVariant;
     offerBadgLabel?: string;
     isPopular?: boolean;
+    isPersonalTier?: boolean;
     popularBadgLabel?: string;
+    recommendeBadgLabel?: string;
     bulletsList: string[];
+    features?: PackageCardFeature[];
+    showFeatures?: boolean;
+    featuresTitle?: string;
+    featuresDescription?: string;
+    hintComponent?: React.ReactNode;
+    showTabs?: boolean;
+    selectedTabId?: string;
+    tabs?: {
+        id: string;
+        label: string;
+        amount?: string;
+        period?: string;
+    }[];
+    onTabChange?: (tabId: string) => void;
+    showAddons?: boolean;
+    selectedAddon?: string;
+    setSelectedAddon?: (addonId: string) => void;
+    addOnsData?: PackageCardAddon[];
+    addonsMonthlyLabel?: string;
     primaryAction?: {
         label: string;
         onClick: () => void;
@@ -17,5 +39,17 @@ export type PackageCardProps = {
     period?: string;
     backgroundColor?: string;
 };
+export type PackageCardAddon = {
+    id: string;
+    titleEn: string;
+    baseFare: number;
+    color?: string;
+};
+export type PackageCardFeatureVariant = 'included' | 'excluded';
+export type PackageCardFeature = {
+    label: string;
+    variant?: PackageCardFeatureVariant;
+};
+export type PackageCardVariant = 'transparent' | 'purple';
 declare const PackageCard: (props: PackageCardProps) => import("react/jsx-runtime").JSX.Element;
 export default PackageCard;

package/dist/components/PackageCard.js

@@ -1,13 +1,35 @@
-import { j as e } from "../_virtual/jsx-runtime.js";
-import { LuLayoutDashboard as b } from "../node_modules/react-icons/lu/index.js";
-import o, { useTheme as C } from "styled-components";
-import m from "./Badge.js";
-import w from "./BulletItem.js";
-import p from "./Button.js";
-import { Card as k } from "./Card.js";
-import v from "./PriceAmount.js";
-import x from "./Typography.js";
-const $ = o.div`
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { FiCheck as G, FiX as J } from "../node_modules/react-icons/fi/index.js";
+import { LuLayoutDashboard as K } from "../node_modules/react-icons/lu/index.js";
+import n, { useTheme as N, css as w } from "styled-components";
+import Q from "../assets/icons/RiyalIcon.js";
+import k from "./Badge.js";
+import C from "./Button.js";
+import { Card as U } from "./Card.js";
+import Y from "./PriceAmount.js";
+import s from "./Typography.js";
+const Z = {
+  transparent: w`
+    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: w`
+    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;
+  `
+}, _ = n(U)`
+  ${({ $variant: e }) => Z[e]};
+
+  ${(e) => e.$isPersonalTier && `
+      position: relative;
+
+      
+    `}
+`, ee = n.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -16,85 +38,287 @@ const $ = o.div`
   @media (max-width: 480px) {
     gap: 0.5rem;
   }
-`, B = o.div`
-  border: 1px solid ${(r) => r.theme.colors.grey.n300};
-  padding: ${(r) => r.theme.spacing.xs};
-  border-radius: ${(r) => r.theme.borderRadius.md};
+`, re = n.div`
+  border: 1px solid ${(e) => e.theme.colors.grey.n300};
+  padding: ${(e) => e.theme.spacing.xs};
+  border-radius: ${(e) => e.theme.borderRadius.md};
   width: 2rem;
   height: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: ${(r) => r.theme.spacing.s};
+  margin-bottom: ${(e) => e.theme.spacing.s};
   svg {
     width: 1.3rem;
     height: 1.3rem;
-    color: ${(r) => r.theme.colors.primary.purple.n450};
+    color: ${(e) => e.theme.colors.primary.purple.n450};
   }
-`, P = o.div`
+`, ie = n.div`
+  padding: 0.75rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.s};
+`, ne = n.div`
   display: flex;
   flex-direction: column;
-  margin-bottom: ${(r) => r.theme.spacing.sm};
   gap: 0.5rem;
-`, T = o.div`
+  align-items: center;
+  text-align: center;
+`, te = n(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: 500;
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+}};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  text-align: center;
+`, oe = n.div`
+  display: flex;
+  justify-content: center;
+`, se = n.ul`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: ${({ theme: e }) => e.spacing.s};
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: 560px) {
+    grid-template-columns: 1fr;
+  }
+`, ae = n.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  min-width: 0;
+`, le = n.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: o }) => o === "included" ? `
+          border: 1px solid ${e.colors.secondary.green.n450};
+          color: ${e.colors.secondary.green.n450};
+        ` : `
+          border: 1px solid ${e.colors.secondary.pink.n450};
+          color: ${e.colors.secondary.pink.n450};
+        `}
+`, ce = n(s)`
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, de = n.div`
+  margin: 0 0 ${(e) => e.theme.spacing.s} 0;
+  padding: 0.25rem;
+  background-color: ${(e) => e.theme.colors.grey.n100};
+  border-radius: ${(e) => e.theme.borderRadius.md};
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.25rem;
+`, pe = n.button`
+  border: 1px solid ${(e) => e.$isActive ? e.theme.colors.grey.n200 : "transparent"};
+  background-color: ${(e) => e.$isActive ? e.theme.colors.grey.n50 : "transparent"};
+  border-radius: ${(e) => e.theme.borderRadius.sm};
+  padding: 0.45rem 0.35rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  box-shadow: ${(e) => e.$isActive ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"};
+`, me = n(s)`
+  color: ${(e) => e.$isActive ? e.theme.colors.grey.n800 : e.theme.colors.grey.n400};
+  font-size: 12px;
+  font-weight: ${(e) => e.$isActive ? 600 : 400};
+  line-height: 1;
+`, he = n(s)`
+  color: ${(e) => e.$isActive ? e.theme.colors.grey.n800 : e.theme.colors.grey.n500};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+`, xe = n.div`
   display: flex;
   width: 100%;
   gap: 0.5rem;
-`, h = o.div`
+`, T = n.div`
   display: flex;
   width: 50%;
 
   button {
     width: 100%;
   }
-`, A = o.div`
+`, ge = n.div`
   display: flex;
   justify-content: flex-end;
-  margin-bottom: ${(r) => r.theme.spacing.xs};
-`, L = o(x)`
-  color: ${(r) => r.theme.colors.grey.n400};
-  margin: ${(r) => r.theme.spacing.xs} 0rem ${(r) => r.theme.spacing.s} 0;
+  margin-bottom: ${(e) => e.theme.spacing.xs};
+`, ue = n(s)`
+  color: ${(e) => e.theme.colors.grey.n400};
+  margin: ${(e) => e.theme.spacing.xs} 0rem ${(e) => e.theme.spacing.s} 0;
   display: inline-block;
   text-align: start;
 
   @media (max-width: 480px) {
     width: 100%;
   }
-`, G = (r) => {
+`, Ae = (e) => {
   const {
-    planTitle: g,
-    planDescription: s,
-    offerBadgLabel: l,
-    popularBadgLabel: c,
-    isPopular: u,
-    bulletsList: n,
-    primaryAction: t,
-    secondaryAction: a,
-    period: y,
-    amount: f,
-    backgroundColor: j = ""
-  } = r, i = C();
-  return /* @__PURE__ */ e.jsxs(k, { width: "100%", backgroundColor: u ? i.colors.primary.purple.n100 : j, children: [
-    /* @__PURE__ */ e.jsx(B, { children: /* @__PURE__ */ e.jsx(b, {}) }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsxs($, { children: [
-        /* @__PURE__ */ e.jsxs(x, { variant: "h6", weight: "bold", children: [
+    planTitle: o,
+    planDescription: u,
+    variant: A,
+    offerBadgLabel: f,
+    popularBadgLabel: y,
+    recommendeBadgLabel: b,
+    isPopular: F,
+    isPersonalTier: B,
+    bulletsList: L,
+    features: d,
+    showFeatures: S = !0,
+    featuresDescription: P = "Everything in this plan plus...",
+    hintComponent: $,
+    showTabs: R = !1,
+    selectedTabId: z,
+    tabs: p = [],
+    onTabChange: m,
+    showAddons: I = !1,
+    selectedAddon: D = "Without",
+    setSelectedAddon: h,
+    addOnsData: j = [],
+    addonsMonthlyLabel: H = "monthly",
+    primaryAction: x,
+    secondaryAction: g,
+    period: W,
+    amount: E,
+    backgroundColor: V = ""
+  } = e, c = N(), a = B ?? o.trim().toLowerCase() === "personal account", M = A ?? (a || F ? "purple" : "transparent"), O = a && S, X = a && R && p.length > 0, q = a && I && j.length > 0, v = d && d.length > 0 ? d : (L ?? []).map((i) => ({
+    label: i,
+    variant: "included"
+  }));
+  return /* @__PURE__ */ r.jsxs(_, { width: "100%", backgroundColor: V, $isPersonalTier: a, $variant: M, children: [
+    /* @__PURE__ */ r.jsx(re, { children: /* @__PURE__ */ r.jsx(K, {}) }),
+    /* @__PURE__ */ r.jsxs("div", { children: [
+      /* @__PURE__ */ r.jsxs(ee, { children: [
+        /* @__PURE__ */ r.jsxs(s, { variant: "h6", weight: "bold", children: [
           " ",
-          g
+          o
         ] }),
-        c && /* @__PURE__ */ e.jsx(m, { bgColor: i.colors.secondary.green.n100, color: i.colors.secondary.green.n550, label: c ?? "" }),
-        l && /* @__PURE__ */ e.jsx(m, { bgColor: i.colors.secondary.pink.n100, color: i.colors.secondary.pink.n450, label: l ?? "" })
+        b && /* @__PURE__ */ r.jsx("span", { children: b }),
+        y && /* @__PURE__ */ r.jsx(k, { bgColor: c.colors.secondary.green.n100, color: c.colors.secondary.green.n550, label: y ?? "" }),
+        f && /* @__PURE__ */ r.jsx(k, { bgColor: c.colors.secondary.pink.n100, color: c.colors.secondary.pink.n450, label: f ?? "" })
       ] }),
-      s && /* @__PURE__ */ e.jsx(L, { variant: "caption", children: s }),
-      n && /* @__PURE__ */ e.jsx(P, { children: n == null ? void 0 : n.map((d) => /* @__PURE__ */ e.jsx(w, { title: d }, d)) })
+      u && /* @__PURE__ */ r.jsx(ue, { variant: "caption", children: u }),
+      X && /* @__PURE__ */ r.jsx(de, { children: p.map((i) => {
+        var l;
+        const t = (z ?? ((l = p[0]) == null ? void 0 : l.id)) === i.id;
+        return /* @__PURE__ */ r.jsxs(pe, { type: "button", $isActive: t, onClick: () => m == null ? void 0 : m(i.id), children: [
+          /* @__PURE__ */ r.jsx(me, { variant: "caption", $isActive: t, children: i.label }),
+          (i.amount || i.period) && /* @__PURE__ */ r.jsxs(he, { variant: "caption", $isActive: t, children: [
+            i.amount ? `${i.amount} ` : "",
+            i.period ?? ""
+          ] })
+        ] }, i.id);
+      }) }),
+      q && /* @__PURE__ */ r.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          style: {
+            backgroundColor: "#f5f7fb",
+            borderRadius: "9px",
+            padding: "4px",
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            gap: "4px"
+          },
+          children: j.map((i) => {
+            const t = D === i.id;
+            return /* @__PURE__ */ r.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => h == null ? void 0 : h(i.id),
+                style: {
+                  padding: "8px 6px 7px",
+                  border: t ? "1px solid #e4e7ec" : "1px solid transparent",
+                  backgroundColor: t ? "#ffffff" : "transparent",
+                  color: t ? "#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: t ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ r.jsx("span", { children: i.titleEn }),
+                  /* @__PURE__ */ r.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        marginTop: "2px",
+                        color: "#16181c",
+                        fontWeight: 600,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "2px"
+                      },
+                      children: [
+                        /* @__PURE__ */ r.jsx(Q, { width: "9", height: "9", color: "#16181c" }),
+                        i.baseFare,
+                        " ",
+                        H
+                      ]
+                    }
+                  )
+                ]
+              },
+              i.id
+            );
+          })
+        }
+      ) }),
+      O && v.length > 0 && /* @__PURE__ */ r.jsxs(ie, { children: [
+        /* @__PURE__ */ r.jsx(ne, { children: /* @__PURE__ */ r.jsx(te, { children: P }) }),
+        $ && /* @__PURE__ */ r.jsx(oe, { children: $ }),
+        /* @__PURE__ */ r.jsx(se, { children: v.map((i, t) => {
+          const l = i.variant ?? "included";
+          return /* @__PURE__ */ r.jsxs(ae, { children: [
+            /* @__PURE__ */ r.jsx(le, { $variant: l, children: l === "included" ? /* @__PURE__ */ r.jsx(G, {}) : /* @__PURE__ */ r.jsx(J, {}) }),
+            /* @__PURE__ */ r.jsx(ce, { variant: "caption", children: i.label })
+          ] }, `${i.label}-${t}`);
+        }) })
+      ] })
     ] }),
-    /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(v, { amount: f, period: y }) }),
-    /* @__PURE__ */ e.jsxs(T, { children: [
-      /* @__PURE__ */ e.jsx(h, { children: t && /* @__PURE__ */ e.jsx(p, { variant: "outline-primary", onClick: t.onClick, children: t.label }) }),
-      /* @__PURE__ */ e.jsx(h, { children: a && /* @__PURE__ */ e.jsx(p, { onClick: a.onClick, children: a.label }) })
+    /* @__PURE__ */ r.jsx(ge, { children: /* @__PURE__ */ r.jsx(Y, { amount: E, period: W }) }),
+    /* @__PURE__ */ r.jsxs(xe, { children: [
+      /* @__PURE__ */ r.jsx(T, { children: x && /* @__PURE__ */ r.jsx(C, { variant: "outline-primary", onClick: x.onClick, children: x.label }) }),
+      /* @__PURE__ */ r.jsx(T, { children: g && /* @__PURE__ */ r.jsx(C, { onClick: g.onClick, children: g.label }) })
     ] })
   ] });
 };
 export {
-  G as default
+  Ae as default
 };

package/dist/components/PriceCard.d.ts

@@ -1,10 +1,18 @@
 import React from 'react';
+import type { ReactNode } from 'react';
+import type { BadgeVariant } from '@hooks/useBadgeVariant';
+import type { FontWeight } from '@theme/theme';
 export type PriceCardVariant = 'transparent' | 'purple';
 export type FeatureVariant = 'included' | 'excluded';
 export type PriceCardBadge = {
     label: string;
     bgColor: string;
     color: string;
+    weight?: FontWeight;
+    variant?: BadgeVariant;
+    children?: ReactNode;
+    onClose?: () => void;
+    image?: string;
 };
 export type PriceCardFeature = {
     label: string;
@@ -31,6 +39,7 @@ export type PriceCardProps = {
     price: PriceCardPrice;
     secondaryPrice?: SecondaryPrice;
     description: string;
+    hintComponent?: React.ReactNode;
     features: PriceCardFeature[];
     variant?: PriceCardVariant;
     badges?: PriceCardBadge[];

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/Sidemenu.js

@@ -97,6 +97,7 @@ const v = n.div`
   background-color: ${({ theme: r }) => r.colors.grey.n150};
   color: ${({ theme: r }) => r.colors.grey.n350};
   font-size: ${({ theme: r }) => r.typography.sizes.s4};
+  width: 100%;
 
   &:focus-visible {
     outline: none;
@@ -136,11 +137,11 @@ const v = n.div`
 }}
   margin-bottom: ${({ theme: r }) => r.spacing.sm};
 `, jr = (r) => {
-  const { logoSrc: C, searchPlaceHolder: k, categories: p, linkComponent: f, open: z, setOpen: T, currentPath: u, extraSideMenuItems: l, onLogoClick: E } = r, a = X(), { t: D } = M(), L = K("sidemenu"), [c, B] = m(""), [t, F] = m(p), g = (i) => {
+  const { logoSrc: C, searchPlaceHolder: k, categories: p, linkComponent: f, open: z, setOpen: T, currentPath: h, extraSideMenuItems: l, onLogoClick: E } = r, a = X(), { t: D } = M(), L = K("sidemenu"), [c, B] = m(""), [t, F] = m(p), g = (i) => {
     const e = [];
     p == null || p.forEach((d) => {
-      var h;
-      const s = (h = d == null ? void 0 : d.navItems) == null ? void 0 : h.filter((x) => {
+      var u;
+      const s = (u = d == null ? void 0 : d.navItems) == null ? void 0 : u.filter((x) => {
         var $, y;
         return (y = ($ = x == null ? void 0 : x.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : y.includes(i == null ? void 0 : i.toLowerCase());
       });
@@ -187,13 +188,13 @@ const v = n.div`
           var e, d;
           return ((e = i == null ? void 0 : i.navItems) == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ o.jsxs(rr, { className: i == null ? void 0 : i.code, children: [
             /* @__PURE__ */ o.jsx(ir, { variant: "xsText", color: a.colors.grey.n300, children: i == null ? void 0 : i.title }),
-            (d = i == null ? void 0 : i.navItems) == null ? void 0 : d.map((s) => /* @__PURE__ */ o.jsx(j, { to: (s == null ? void 0 : s.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: W(s.path, u), ...s } }) }, s == null ? void 0 : s.path))
+            (d = i == null ? void 0 : i.navItems) == null ? void 0 : d.map((s) => /* @__PURE__ */ o.jsx(j, { to: (s == null ? void 0 : s.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: W(s.path, h), ...s } }) }, s == null ? void 0 : s.path))
           ] }, i == null ? void 0 : i.title);
         }))
       ] }),
       /* @__PURE__ */ o.jsxs(nr, { children: [
         (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ o.jsx(sr, { color: a.colors.grey.n150 }),
-        l == null ? void 0 : l.map((i) => /* @__PURE__ */ o.jsx(j, { to: (i == null ? void 0 : i.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: u === i.path, ...i } }) }, i == null ? void 0 : i.path))
+        l == null ? void 0 : l.map((i) => /* @__PURE__ */ o.jsx(j, { to: (i == null ? void 0 : i.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(b, { item: { variant: "normal", active: h === i.path, ...i } }) }, i == null ? void 0 : i.path))
       ] })
     ] })
   ] });

package/package.json

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