qaema-ui 0.0.38 → 0.0.40

package/dist/components/PriceCard.d.ts

@@ -10,6 +10,10 @@ export type PriceCardFeature = {
     label: string;
     variant?: FeatureVariant;
 };
+export type SecondaryPrice = {
+    amount: string;
+    label: string;
+};
 export type PriceCardPrice = {
     amount: string;
     period?: string;
@@ -19,6 +23,7 @@ export type PriceCardPrice = {
 export type PriceCardProps = {
     title: string;
     price: PriceCardPrice;
+    secondaryPrice?: SecondaryPrice;
     description: string;
     features: PriceCardFeature[];
     variant?: PriceCardVariant;

package/dist/components/PriceCard.js

@@ -1,13 +1,14 @@
-import { j as o } from "../_virtual/jsx-runtime.js";
+import { j as r } from "../_virtual/jsx-runtime.js";
 import "react";
-import { FiCheck as j, FiX as w } from "../node_modules/react-icons/fi/index.js";
+import { FiCheck as j, FiX as v } from "../node_modules/react-icons/fi/index.js";
 import i, { css as a } from "styled-components";
-import { CurrencyContainer as v } from "../styles/Currency.styles.js";
-import z from "../assets/svg/Riyal.svg.js";
-import k from "./Badge.js";
-import g from "./Button.js";
-import t from "./Typography.js";
-const C = {
+import z from "../assets/icons/RiyalIcon.js";
+import { CurrencyContainer as k } from "../styles/Currency.styles.js";
+import C from "../assets/svg/Riyal.svg.js";
+import R from "./Badge.js";
+import d from "./Button.js";
+import n from "./Typography.js";
+const F = {
   transparent: a`
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
@@ -20,32 +21,32 @@ const C = {
       0px 4px 6px -2px #10182808,
       0px 12px 16px -4px #10182814;
   `
-}, F = i.div`
+}, S = i.div`
   width: 100%;
   max-width: 28.458rem;
   border-radius: ${({ theme: e }) => e.borderRadius.xl};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => C[e]};
+  ${({ $variant: e }) => F[e]};
 `, B = i.div`
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, R = i.div`
+`, T = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spacing.m};
   flex-wrap: wrap;
-`, T = i(t)`
+`, H = i(n)`
   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.s5;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s5;
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
@@ -58,70 +59,91 @@ const C = {
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: wrap;
-`, H = i.div`
+`, I = i.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, S = i.span`
+`, D = i(z).attrs(({ theme: e }) => ({
+  color: e.colors.grey.n350,
+  width: "18",
+  height: "20"
+}))``, L = i.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};
-`, D = i.span`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, V = i.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};
-`, I = i(t)`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, W = i(n)`
   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.s4;
+  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};
-`, V = i.div`
+`, M = i.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.m};
-`, W = i(t)`
+`, N = i(n)`
   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.s4;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s4;
 }};
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, L = i(t)`
+`, U = i(n)`
   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.s4;
+  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};
-`, M = i.ul`
+`, X = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, q = i.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};
+`, G = i.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};
+`, J = i.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, U = i.li`
+`, K = i.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, X = i.span`
+`, O = i.span`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
@@ -135,23 +157,23 @@ const C = {
     height: 0.7rem;
   }
 
-  ${({ theme: e, $variant: r }) => r === "included" ? a`
+  ${({ theme: e, $variant: o }) => o === "included" ? a`
           border: 1px solid ${e.colors.secondary.green.n450};
           color: ${e.colors.secondary.green.n450};
         ` : a`
           border: 1px solid ${e.colors.secondary.pink.n450};
           color: ${e.colors.secondary.pink.n450};
         `}
-`, q = i(t)`
+`, Q = i(n)`
   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.s3;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, G = i.div`
+`, Y = i.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -161,51 +183,57 @@ const C = {
   button {
     width: 100%;
   }
-`, ee = ({
+`, ne = ({
   title: e,
-  price: r,
+  price: o,
   description: f,
-  features: h,
-  variant: x = "transparent",
+  secondaryPrice: p,
+  features: x,
+  variant: y = "transparent",
   badges: c = [],
   showPrimaryAction: m = !1,
   primaryAction: s,
   showSecondaryAction: $ = !1,
-  secondaryAction: l,
-  showFeatures: y = !0,
-  featuresTitle: u = "FEATURES",
-  featuresDescription: b = "Everything in our free plan plus....."
-}) => /* @__PURE__ */ o.jsxs(F, { $variant: x, children: [
-  /* @__PURE__ */ o.jsxs(B, { children: [
-    /* @__PURE__ */ o.jsxs(R, { children: [
-      /* @__PURE__ */ o.jsx(T, { children: e }),
-      c.length > 0 && /* @__PURE__ */ o.jsx(E, { children: c.map((n, p) => /* @__PURE__ */ o.jsx(k, { label: n.label, bgColor: n.bgColor, color: n.color }, `${n.label}-${p}`)) })
+  secondaryAction: t,
+  showFeatures: u = !0,
+  featuresTitle: b = "FEATURES",
+  featuresDescription: w = "Everything in our free plan plus....."
+}) => /* @__PURE__ */ r.jsxs(S, { $variant: y, children: [
+  /* @__PURE__ */ r.jsxs(B, { children: [
+    /* @__PURE__ */ r.jsxs(T, { children: [
+      /* @__PURE__ */ r.jsx(H, { children: e }),
+      c.length > 0 && /* @__PURE__ */ r.jsx(E, { children: c.map((l, g) => /* @__PURE__ */ r.jsx(R, { label: l.label, bgColor: l.bgColor, color: l.color }, `${l.label}-${g}`)) })
+    ] }),
+    /* @__PURE__ */ r.jsxs(I, { children: [
+      /* @__PURE__ */ r.jsx(k, { src: C, alt: "Riyal" }),
+      /* @__PURE__ */ r.jsx(L, { $color: o.color, children: o.amount }),
+      /* @__PURE__ */ r.jsx(V, { $color: o.periodColor, children: o.period ?? "/ Month" })
     ] }),
-    /* @__PURE__ */ o.jsxs(H, { children: [
-      /* @__PURE__ */ o.jsx(v, { src: z, alt: "Riyal" }),
-      /* @__PURE__ */ o.jsx(S, { $color: r.color, children: r.amount }),
-      /* @__PURE__ */ o.jsx(D, { $color: r.periodColor, children: r.period ?? "/ Month" })
+    p && /* @__PURE__ */ r.jsxs(X, { children: [
+      /* @__PURE__ */ r.jsx(D, {}),
+      /* @__PURE__ */ r.jsx(q, { children: p.amount }),
+      /* @__PURE__ */ r.jsx(G, { children: p.label })
     ] }),
-    /* @__PURE__ */ o.jsx(I, { children: f }),
-    /* @__PURE__ */ o.jsxs(G, { children: [
-      m && /* @__PURE__ */ o.jsx(g, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
-      $ && /* @__PURE__ */ o.jsx(g, { variant: (l == null ? void 0 : l.variant) ?? "light-primary", onClick: l == null ? void 0 : l.onSecondaryActionClick, children: l == null ? void 0 : l.label })
+    /* @__PURE__ */ r.jsx(W, { children: f }),
+    /* @__PURE__ */ r.jsxs(Y, { children: [
+      m && /* @__PURE__ */ r.jsx(d, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
+      $ && /* @__PURE__ */ r.jsx(d, { variant: (t == null ? void 0 : t.variant) ?? "light-primary", onClick: t == null ? void 0 : t.onSecondaryActionClick, children: t == null ? void 0 : t.label })
     ] })
   ] }),
-  y && /* @__PURE__ */ o.jsxs(V, { children: [
-    /* @__PURE__ */ o.jsxs(P, { children: [
-      /* @__PURE__ */ o.jsx(W, { children: u }),
-      /* @__PURE__ */ o.jsx(L, { children: b })
+  u && /* @__PURE__ */ r.jsxs(M, { children: [
+    /* @__PURE__ */ r.jsxs(P, { children: [
+      /* @__PURE__ */ r.jsx(N, { children: b }),
+      /* @__PURE__ */ r.jsx(U, { children: w })
     ] }),
-    /* @__PURE__ */ o.jsx(M, { children: h.map((n, p) => {
-      const d = n.variant ?? "included";
-      return /* @__PURE__ */ o.jsxs(U, { children: [
-        /* @__PURE__ */ o.jsx(X, { $variant: d, children: d === "included" ? /* @__PURE__ */ o.jsx(j, {}) : /* @__PURE__ */ o.jsx(w, {}) }),
-        /* @__PURE__ */ o.jsx(q, { children: n.label })
-      ] }, `${n.label}-${p}`);
+    /* @__PURE__ */ r.jsx(J, { children: x.map((l, g) => {
+      const h = l.variant ?? "included";
+      return /* @__PURE__ */ r.jsxs(K, { children: [
+        /* @__PURE__ */ r.jsx(O, { $variant: h, children: h === "included" ? /* @__PURE__ */ r.jsx(j, {}) : /* @__PURE__ */ r.jsx(v, {}) }),
+        /* @__PURE__ */ r.jsx(Q, { children: l.label })
+      ] }, `${l.label}-${g}`);
     }) })
   ] })
 ] });
 export {
-  ee as default
+  ne as default
 };

package/dist/components/SummaryCard.js

@@ -1,173 +1,97 @@
-import { j as n } from "../_virtual/jsx-runtime.js";
-import a, { useTheme as b } from "styled-components";
-import j from "./Badge.js";
-import m from "./Button.js";
-import { Card as v } from "./Card.js";
-import l from "./Typography.js";
-const w = a.div`
+import { j as e } from "../_virtual/jsx-runtime.js";
+import d, { useTheme as f } from "styled-components";
+import v from "./Badge.js";
+import j from "./Button.js";
+import w from "./CallOutBox.js";
+import { Card as T } from "./Card.js";
+import a from "./Typography.js";
+const $ = d.div`
   padding-bottom: ${(r) => r.theme.spacing.s};
   border-bottom: 1px solid ${(r) => r.theme.colors.grey.n100};
   caption {
     display: inline-block;
     text-align: start;
   }
-`, k = a(l)`
-  font-family: ${({ theme: r }) => r.fonts.arabic};
-  font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
-  font-size: 15px;
-  line-height: ${({ theme: r }) => r.typography.lineHeights.s};
-  letter-spacing: 0%;
-  vertical-align: middle;
-  color: ${({ theme: r }) => r.colors.grey.n650};
-  display: inline-block;
-`, B = a.div`
-  margin-top: ${({ theme: r }) => r.spacing.m};
-  padding: ${({ theme: r }) => r.spacing.sm};
-  border-radius: ${({ theme: r }) => r.borderRadius.md};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${({ $variant: r, theme: e }) => {
-  switch (r) {
-    case "information":
-      return `
-          background: ${e.colors.primary.purple.n150};
-          border-bottom: 2px solid ${e.colors.primary.purple.n450};
-        `;
-    case "error":
-      return `
-          background: ${e.colors.state.error.n150};
-          border-bottom: 2px solid ${e.colors.state.error.n450};
-        `;
-    case "success":
-      return `
-          background: ${e.colors.state.success.n100};
-          border-bottom: 2px solid ${e.colors.state.success.n450};
-        `;
-    case "warning":
-    default:
-      return `
-          background: ${e.colors.secondary.orange.n150};
-          border-bottom: 2px solid ${e.colors.secondary.orange.n450};
-        `;
-  }
-}}
-`, T = a.button`
-  padding: 0.75rem;
-  border-radius: 0.25rem;
-  border: none;
-  cursor: pointer;
-  ${({ $variant: r, theme: e }) => `
-      background: transparent;
-      color: ${r === "information" ? e.colors.primary.purple.n450 : r === "error" ? e.colors.state.error.n450 : r === "success" ? e.colors.state.success.n450 : e.colors.secondary.orange.n450};
-    `}
-
-  font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
-  font-size: ${({ theme: r }) => r.typography.sizes.s2};
-  line-height: ${({ theme: r }) => r.typography.lineHeights.xs};
-  text-align: center;
-  vertical-align: middle;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    opacity: 0.9;
-  }
-`, S = a.div`
+`, S = d.div`
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-`, R = a.div`
+`, B = d.div`
   margin-top: ${(r) => r.theme.spacing.s};
   display: flex;
   flex-direction: column;
   gap: ${(r) => r.theme.spacing.s};
-`, z = a(l)`
-  font-family: ${({ theme: r }) => r.fonts.arabic};
-  font-weight: ${({ theme: r }) => r.typography.weights.regular};
-  font-size: ${({ theme: r }) => r.typography.sizes.s2};
-  line-height: ${({ theme: r }) => r.typography.lineHeights.xs};
-  letter-spacing: ${({ theme: r }) => r.typography.letterSpacings.normal};
-  vertical-align: middle;
-  color: ${({ theme: r }) => r.colors.grey.n600};
-`, C = a.div`
+`, R = d.div`
   display: flex;
   flex-direction: column;
   gap: ${(r) => r.theme.spacing.s};
-`, f = a.div`
+`, g = d.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-`, H = a(f)``, x = ({
+`, E = d(g)``, y = ({
   variant: r = "text",
-  label: e,
-  value: i,
-  color: g
+  label: o,
+  value: l,
+  color: m
 }) => {
-  const y = b();
+  const x = f();
   let c = null;
   if (r === "badge") {
-    const s = i;
-    c = /* @__PURE__ */ n.jsx(j, { ...s });
+    const n = l;
+    c = /* @__PURE__ */ e.jsx(v, { ...n });
   } else if (r === "trend") {
-    const s = typeof i == "object" && i !== null ? i : { value: i }, t = s.direction ?? "neutral", d = y.colors.state.success.n450, o = y.colors.state.error.n450, h = t === "up" ? d : t === "down" ? o : g;
-    c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: h, children: typeof s.value == "number" ? s.value.toString() : s.value });
+    const n = typeof l == "object" && l !== null ? l : { value: l }, i = n.direction ?? "neutral", t = x.colors.state.success.n450, s = x.colors.state.error.n450, h = i === "up" ? t : i === "down" ? s : m;
+    c = /* @__PURE__ */ e.jsx(a, { variant: "smText", color: h, children: typeof n.value == "number" ? n.value.toString() : n.value });
   } else if (r === "component")
-    c = i;
+    c = l;
   else {
-    const s = i;
-    c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: g, children: typeof s == "number" ? s.toString() : s });
+    const n = l;
+    c = /* @__PURE__ */ e.jsx(a, { variant: "smText", color: m, children: typeof n == "number" ? n.toString() : n });
   }
-  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    r !== "component" && /* @__PURE__ */ n.jsx(l, { variant: "smText", weight: "semiBold", children: e }),
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    r !== "component" && /* @__PURE__ */ e.jsx(a, { variant: "smText", weight: "semiBold", children: o }),
     c
   ] });
 };
-function G({
+function q({
   sections: r,
-  total: e,
-  title: i,
-  subtitle: g,
-  btnLabel: y,
+  total: o,
+  title: l,
+  subtitle: m,
+  btnLabel: x,
   btnConfig: c,
-  trailingActionsConfig: s,
-  callout: t
+  trailingActionsConfig: n,
+  callout: i
 }) {
-  const d = b();
-  return /* @__PURE__ */ n.jsxs(v, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${d.colors.grey.n100}`, children: [
-    /* @__PURE__ */ n.jsxs(w, { children: [
-      /* @__PURE__ */ n.jsxs(S, { children: [
-        /* @__PURE__ */ n.jsx(l, { variant: "h6", weight: "semiBold", children: i }),
-        c && /* @__PURE__ */ n.jsxs(m, { ...c, children: [
-          y ?? "",
+  const t = f();
+  return /* @__PURE__ */ e.jsxs(T, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${t.colors.grey.n100}`, children: [
+    /* @__PURE__ */ e.jsxs($, { children: [
+      /* @__PURE__ */ e.jsxs(S, { children: [
+        /* @__PURE__ */ e.jsx(a, { variant: "h6", weight: "semiBold", children: l }),
+        c && /* @__PURE__ */ e.jsxs(j, { ...c, children: [
+          x ?? "",
           " "
         ] })
       ] }),
-      /* @__PURE__ */ n.jsx(l, { variant: "caption", color: d.colors.grey.n400, children: g })
+      /* @__PURE__ */ e.jsx(a, { variant: "caption", color: t.colors.grey.n400, children: m })
     ] }),
-    /* @__PURE__ */ n.jsxs(R, { children: [
-      r.map((o, u) => {
+    /* @__PURE__ */ e.jsxs(B, { children: [
+      r.map((s, u) => {
         var h;
-        return ((h = o == null ? void 0 : o.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ n.jsxs(C, { children: [
-          /* @__PURE__ */ n.jsx(l, { variant: "span", weight: "regular", color: d.colors.grey.n400, children: o.title }),
-          o.items.map((p, $) => /* @__PURE__ */ n.jsx(f, { children: /* @__PURE__ */ n.jsx(x, { variant: p == null ? void 0 : p.variant, label: p.label, value: p.value, color: d.colors.grey.n400 }) }, `${u}-${$}`))
-        ] }, o.title);
+        return ((h = s == null ? void 0 : s.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ e.jsxs(R, { children: [
+          /* @__PURE__ */ e.jsx(a, { variant: "span", weight: "regular", color: t.colors.grey.n400, children: s.title }),
+          s.items.map((p, b) => /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(y, { variant: p == null ? void 0 : p.variant, label: p.label, value: p.value, color: t.colors.grey.n400 }) }, `${u}-${b}`))
+        ] }, s.title);
       }),
-      e && /* @__PURE__ */ n.jsx(H, { children: /* @__PURE__ */ n.jsx(x, { variant: e == null ? void 0 : e.variant, label: (e == null ? void 0 : e.label) ?? "", value: (e == null ? void 0 : e.value) ?? "", color: d.colors.grey.n400 }) }),
-      s && (s == null ? void 0 : s.length) > 0 && s.map((o) => /* @__PURE__ */ n.jsx(m, { ...o == null ? void 0 : o.btnConfig, children: (o == null ? void 0 : o.label) ?? "" })),
-      t && /* @__PURE__ */ n.jsxs(B, { $variant: t.variant ?? "warning", children: [
-        /* @__PURE__ */ n.jsxs("div", { children: [
-          /* @__PURE__ */ n.jsx(k, { variant: "span", weight: "semiBold", children: t.title }),
-          t.description && /* @__PURE__ */ n.jsx(z, { variant: "caption", children: t.description })
-        ] }),
-        t.action && /* @__PURE__ */ n.jsx(T, { $variant: t.variant ?? "warning", onClick: t.action.onClick, children: t.action.label })
-      ] })
+      o && /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(y, { variant: o == null ? void 0 : o.variant, label: (o == null ? void 0 : o.label) ?? "", value: (o == null ? void 0 : o.value) ?? "", color: t.colors.grey.n400 }) }),
+      n && (n == null ? void 0 : n.length) > 0 && n.map((s) => /* @__PURE__ */ e.jsx(j, { ...s == null ? void 0 : s.btnConfig, children: (s == null ? void 0 : s.label) ?? "" })),
+      i && /* @__PURE__ */ e.jsx(w, { callout: i })
     ] })
   ] });
 }
 export {
-  G as default
+  q as default
 };

package/dist/components/index.d.ts

@@ -155,3 +155,5 @@ export { default as NextActionBox } from './NextActionBox';
 export type { NextActionBoxProps, NextActionItem } from './NextActionBox';
 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';