@purpur/library 9.2.3 → 9.4.0

package/dist/{comparison-table-D1zJpdLL.mjs → comparison-table-8bOJmz-L.mjs}

@@ -1,147 +1,147 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { isValidElement as j, useState as L, useCallback as E, useEffect as R, useId as B, useRef as F, createElement as H } from "react";
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+import { isValidElement as q, useState as L, useCallback as E, useEffect as R, useId as B, useRef as F, createElement as H } from "react";
 import { c as z } from "./bind-CU-R61T-.mjs";
 import { a as K } from "./checkmark.es-DdgIZN2R.mjs";
 import { e as W } from "./minus.es-BK9qA9iJ.mjs";
 import { l as O } from "./chevron-down.es-PCIIj6oG.mjs";
-import { P as q } from "./paragraph-Ci50OF1u.mjs";
+import { P as j } from "./paragraph-DSxXmX_0.mjs";
 import { a as G } from "./badge-DalD-yqG.mjs";
 import { b as M } from "./button-4-yWOgtD.mjs";
 import { H as J } from "./heading-xwBuT_-9.mjs";
 import { l as Q } from "./arrow-left.es-DU-PX-Il.mjs";
 import { i as U } from "./arrow-right.es-C7SkjAB6.mjs";
 const X = {
-  "purpur-comparison-table__wrapper": "_purpur-comparison-table__wrapper_7fqf9_1",
-  "purpur-comparison-table": "_purpur-comparison-table_7fqf9_1",
-  "purpur-comparison-table--primary": "_purpur-comparison-table--primary_7fqf9_11",
-  "purpur-comparison-table--secondary": "_purpur-comparison-table--secondary_7fqf9_15",
-  "purpur-comparison-table__feature-row": "_purpur-comparison-table__feature-row_7fqf9_32",
-  "purpur-comparison-table__cards": "_purpur-comparison-table__cards_7fqf9_32",
-  "purpur-comparison-table__separator": "_purpur-comparison-table__separator_7fqf9_48"
+  "purpur-comparison-table__wrapper": "_purpur-comparison-table__wrapper_1udkj_1",
+  "purpur-comparison-table": "_purpur-comparison-table_1udkj_1",
+  "purpur-comparison-table--primary": "_purpur-comparison-table--primary_1udkj_11",
+  "purpur-comparison-table--secondary": "_purpur-comparison-table--secondary_1udkj_15",
+  "purpur-comparison-table__feature-row": "_purpur-comparison-table__feature-row_1udkj_32",
+  "purpur-comparison-table__cards": "_purpur-comparison-table__cards_1udkj_32",
+  "purpur-comparison-table__separator": "_purpur-comparison-table__separator_1udkj_49"
 }, Y = {
-  "purpur-comparison-table-cell": "_purpur-comparison-table-cell_urc3p_1",
-  "purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--check_urc3p_15",
-  "purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--minus_urc3p_18",
-  "purpur-comparison-table-cell__icon": "_purpur-comparison-table-cell__icon_urc3p_21"
-}, A = z.bind(Y), D = "purpur-comparison-table-cell", Z = ({ value: a }) => {
-  const s = j(a) || ["string", "number"].includes(typeof a), m = A(D, [s ? "" : `${D}--${a ? "check" : "minus"}`]), c = a ? K : W;
-  return /* @__PURE__ */ o("span", { className: A(m), children: s ? a : /* @__PURE__ */ o(c, { size: "xs", className: A(`${D}__icon`) }) });
+  "purpur-comparison-table-cell": "_purpur-comparison-table-cell_117pb_1",
+  "purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--check_117pb_16",
+  "purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--minus_117pb_19",
+  "purpur-comparison-table-cell__icon": "_purpur-comparison-table-cell__icon_117pb_22"
+}, A = z.bind(Y), D = "purpur-comparison-table-cell", Z = ({ value: e }) => {
+  const s = q(e) || ["string", "number"].includes(typeof e), m = A(D, [s ? "" : `${D}--${e ? "check" : "minus"}`]), c = e ? K : W;
+  return /* @__PURE__ */ o("span", { className: A(m), children: s ? e : /* @__PURE__ */ o(c, { size: "xs", className: A(`${D}__icon`) }) });
 }, rr = {
   "purpur-comparison-table-lead-cell": "_purpur-comparison-table-lead-cell_1vild_1",
   "purpur-comparison-table-lead-cell__description": "_purpur-comparison-table-lead-cell__description_1vild_5",
   "purpur-comparison-table-lead-cell__summary": "_purpur-comparison-table-lead-cell__summary_1vild_40",
   "purpur-comparison-table-lead-cell__summary-title": "_purpur-comparison-table-lead-cell__summary-title_1vild_48",
   "purpur-comparison-table-lead-cell__summary-icon": "_purpur-comparison-table-lead-cell__summary-icon_1vild_51"
-}, S = z.bind(rr), k = "purpur-comparison-table-lead-cell", or = ({ title: a, description: s }) => {
-  const p = typeof s == "string", m = S(k);
-  return /* @__PURE__ */ u("details", { className: m, "data-is-expandable": p, children: [
-    /* @__PURE__ */ u("summary", { className: S(`${k}__summary`), tabIndex: p ? 0 : -1, children: [
-      /* @__PURE__ */ o(q, { className: S(`${k}__summary-title`), variant: "paragraph-100-bold", children: a }),
-      /* @__PURE__ */ o(O, { className: S(`${k}__summary-icon`), size: "sm" })
+}, k = z.bind(rr), S = "purpur-comparison-table-lead-cell", or = ({ title: e, description: s }) => {
+  const l = typeof s == "string", m = k(S);
+  return /* @__PURE__ */ _("details", { className: m, "data-is-expandable": l, children: [
+    /* @__PURE__ */ _("summary", { className: k(`${S}__summary`), tabIndex: l ? 0 : -1, children: [
+      /* @__PURE__ */ o(j, { className: k(`${S}__summary-title`), variant: "paragraph-100-bold", children: e }),
+      /* @__PURE__ */ o(O, { className: k(`${S}__summary-icon`), size: "sm" })
     ] }),
-    s && /* @__PURE__ */ o(q, { variant: "paragraph-100", className: S(`${k}__description`), children: s })
+    s && /* @__PURE__ */ o(j, { variant: "paragraph-100", className: k(`${S}__description`), children: s })
   ] });
-}, ar = {
-  "purpur-comparison-table-option-card": "_purpur-comparison-table-option-card_1papu_1",
-  "purpur-comparison-table-option-card--highlighted": "_purpur-comparison-table-option-card--highlighted_1papu_11",
-  "purpur-comparison-table-option-card__badge": "_purpur-comparison-table-option-card__badge_1papu_14",
-  "purpur-comparison-table-option-card__main-content": "_purpur-comparison-table-option-card__main-content_1papu_19",
-  "purpur-comparison-table-option-card__image": "_purpur-comparison-table-option-card__image_1papu_25",
-  "purpur-comparison-table-option-card__body": "_purpur-comparison-table-option-card__body_1papu_31",
-  "purpur-comparison-table-option-card__description": "_purpur-comparison-table-option-card__description_1papu_36",
-  "purpur-comparison-table-option-card__description-text": "_purpur-comparison-table-option-card__description-text_1papu_41",
-  "purpur-comparison-table-option-card__read-more": "_purpur-comparison-table-option-card__read-more_1papu_50",
-  "purpur-comparison-table-option-card__read-more-icon": "_purpur-comparison-table-option-card__read-more-icon_1papu_54",
-  "purpur-comparison-table-option-card__footer": "_purpur-comparison-table-option-card__footer_1papu_62",
-  "purpur-comparison-table-option-card__price": "_purpur-comparison-table-option-card__price_1papu_67",
-  "purpur-comparison-table-option-card--show-full-descriptions": "_purpur-comparison-table-option-card--show-full-descriptions_1papu_74",
-  "purpur-comparison-table-option-card--first-card": "_purpur-comparison-table-option-card--first-card_1papu_107"
-}, _ = z.bind(ar), l = "purpur-comparison-table-option-card", er = ({
-  id: a,
+}, er = {
+  "purpur-comparison-table-option-card": "_purpur-comparison-table-option-card_15113_1",
+  "purpur-comparison-table-option-card--highlighted": "_purpur-comparison-table-option-card--highlighted_15113_11",
+  "purpur-comparison-table-option-card__badge": "_purpur-comparison-table-option-card__badge_15113_14",
+  "purpur-comparison-table-option-card__main-content": "_purpur-comparison-table-option-card__main-content_15113_19",
+  "purpur-comparison-table-option-card__image": "_purpur-comparison-table-option-card__image_15113_25",
+  "purpur-comparison-table-option-card__body": "_purpur-comparison-table-option-card__body_15113_31",
+  "purpur-comparison-table-option-card__description": "_purpur-comparison-table-option-card__description_15113_36",
+  "purpur-comparison-table-option-card__description-text": "_purpur-comparison-table-option-card__description-text_15113_41",
+  "purpur-comparison-table-option-card__read-more": "_purpur-comparison-table-option-card__read-more_15113_50",
+  "purpur-comparison-table-option-card__read-more-icon": "_purpur-comparison-table-option-card__read-more-icon_15113_54",
+  "purpur-comparison-table-option-card__footer": "_purpur-comparison-table-option-card__footer_15113_62",
+  "purpur-comparison-table-option-card__price": "_purpur-comparison-table-option-card__price_15113_67",
+  "purpur-comparison-table-option-card--show-full-descriptions": "_purpur-comparison-table-option-card--show-full-descriptions_15113_74",
+  "purpur-comparison-table-option-card--first-card": "_purpur-comparison-table-option-card--first-card_15113_107"
+}, u = z.bind(er), p = "purpur-comparison-table-option-card", ar = ({
+  id: e,
   description: s,
-  variablePriceText: p,
+  variablePriceText: l,
   price: m,
   isHighlighted: c,
   ariaLabels: f,
   badge: h,
   actions: g,
-  isFirstCard: x,
+  isFirstCard: v,
   image: $,
   title: C,
   showFullDescriptions: r,
   toggleShowFullDescriptions: i
 }) => {
-  const d = _(l, {
-    [`${l}--highlighted`]: c,
-    [`${l}--first-card`]: x,
-    [`${l}--show-full-descriptions`]: r
+  const d = u(p, {
+    [`${p}--highlighted`]: c,
+    [`${p}--first-card`]: v,
+    [`${p}--show-full-descriptions`]: r
   }), b = () => {
     if (!s) return null;
     const n = s.length > 50;
-    return /* @__PURE__ */ u("div", { className: _(`${l}__description`), children: [
-      /* @__PURE__ */ o(q, { variant: "paragraph-100", className: _(`${l}__description-text`), children: s }),
-      n && /* @__PURE__ */ u(
+    return /* @__PURE__ */ _("div", { className: u(`${p}__description`), children: [
+      /* @__PURE__ */ o(j, { variant: "paragraph-100", className: u(`${p}__description-text`), children: s }),
+      n && /* @__PURE__ */ _(
         M,
         {
           variant: "text",
           size: "xs",
-          className: _(`${l}__read-more`),
+          className: u(`${p}__read-more`),
           onClick: i,
           children: [
-            /* @__PURE__ */ o("span", { className: _(`${l}__read-more-text`), children: r ? f.readLess : f.readMore }),
-            /* @__PURE__ */ o(O, { className: _(`${l}__read-more-icon`), size: "xs" })
+            /* @__PURE__ */ o("span", { className: u(`${p}__read-more-text`), children: r ? f.readLess : f.readMore }),
+            /* @__PURE__ */ o(O, { className: u(`${p}__read-more-icon`), size: "xs" })
           ]
         }
       )
     ] });
   };
-  return /* @__PURE__ */ u("article", { className: d, "data-card-id": a, children: [
-    h && /* @__PURE__ */ o(G, { ...h, className: _(`${l}__badge`) }),
-    /* @__PURE__ */ u("section", { className: _(`${l}__main-content`), children: [
-      /* @__PURE__ */ o("img", { src: $.src, alt: $.alt, className: _(`${l}__image`) }),
-      /* @__PURE__ */ u("div", { className: _(`${l}__body`), children: [
-        /* @__PURE__ */ o(J, { tag: "h3", variant: "title-200", className: _(`${l}__title`), children: C }),
+  return /* @__PURE__ */ _("article", { className: d, "data-card-id": e, children: [
+    h && /* @__PURE__ */ o(G, { ...h, className: u(`${p}__badge`) }),
+    /* @__PURE__ */ _("section", { className: u(`${p}__main-content`), children: [
+      /* @__PURE__ */ o("img", { src: $.src, alt: $.alt, className: u(`${p}__image`) }),
+      /* @__PURE__ */ _("div", { className: u(`${p}__body`), children: [
+        /* @__PURE__ */ o(J, { tag: "h3", variant: "title-200", className: u(`${p}__title`), children: C }),
         b()
       ] })
     ] }),
-    /* @__PURE__ */ u("footer", { className: _(`${l}__footer`), children: [
-      /* @__PURE__ */ u("span", { className: _(`${l}__price`), id: a, children: [
-        /* @__PURE__ */ o(q, { variant: "paragraph-100", children: p }),
-        /* @__PURE__ */ o(q, { variant: "paragraph-100-bold", children: m })
+    /* @__PURE__ */ _("footer", { className: u(`${p}__footer`), children: [
+      /* @__PURE__ */ _("span", { className: u(`${p}__price`), id: e, children: [
+        /* @__PURE__ */ o(j, { variant: "paragraph-100", children: l }),
+        /* @__PURE__ */ o(j, { variant: "paragraph-100-bold", children: m })
       ] }),
       g
     ] })
   ] });
-}, tr = "_active_ggi6x_44", sr = {
-  "purpur-comparison-table-scroll-progress": "_purpur-comparison-table-scroll-progress_ggi6x_1",
-  "purpur-comparison-table-scroll-progress__indicators": "_purpur-comparison-table-scroll-progress__indicators_ggi6x_15",
-  "purpur-comparison-table-scroll-progress__indicator": "_purpur-comparison-table-scroll-progress__indicator_ggi6x_15",
+}, tr = "_active_ybbe8_44", sr = {
+  "purpur-comparison-table-scroll-progress": "_purpur-comparison-table-scroll-progress_ybbe8_1",
+  "purpur-comparison-table-scroll-progress__indicators": "_purpur-comparison-table-scroll-progress__indicators_ybbe8_15",
+  "purpur-comparison-table-scroll-progress__indicator": "_purpur-comparison-table-scroll-progress__indicator_ybbe8_15",
   active: tr,
-  "purpur-comparison-table-scroll-progress__buttons": "_purpur-comparison-table-scroll-progress__buttons_ggi6x_48",
-  "purpur-comparison-table-scroll-progress__button": "_purpur-comparison-table-scroll-progress__button_ggi6x_48",
-  "purpur-comparison-table-scroll-progress__button-icon": "_purpur-comparison-table-scroll-progress__button-icon_ggi6x_57"
-}, y = z.bind(sr), N = "purpur-comparison-table-scroll-progress", cr = ({ items: a, container: s, parentId: p, ariaLabels: m }) => {
+  "purpur-comparison-table-scroll-progress__buttons": "_purpur-comparison-table-scroll-progress__buttons_ybbe8_48",
+  "purpur-comparison-table-scroll-progress__button": "_purpur-comparison-table-scroll-progress__button_ybbe8_48",
+  "purpur-comparison-table-scroll-progress__button-icon": "_purpur-comparison-table-scroll-progress__button-icon_ybbe8_57"
+}, y = z.bind(sr), N = "purpur-comparison-table-scroll-progress", cr = ({ items: e, container: s, parentId: l, ariaLabels: m }) => {
   const [c, f] = L(/* @__PURE__ */ new Set()), h = E(
     (r) => {
       const i = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
       document.querySelector(
-        `[data-card-id="${r}-${p}"]`
+        `[data-card-id="${r}-${l}"]`
       )?.scrollIntoView({ behavior: i ? "instant" : "smooth", block: "nearest" });
     },
-    [p]
+    [l]
   ), g = E(() => {
     if (c.size === 0) return;
     const i = Math.min(...Array.from(c)) - 1;
     i < 0 || h(i);
-  }, [c, h]), x = E(() => {
+  }, [c, h]), v = E(() => {
     if (c.size === 0) return;
     const i = Math.max(...Array.from(c)) + 1;
-    i >= a.length || h(i);
-  }, [c, a.length, h]), $ = E(
+    i >= e.length || h(i);
+  }, [c, e.length, h]), $ = E(
     (r) => {
-      (r.key === "ArrowRight" || r.key === "ArrowLeft") && (r.preventDefault(), r.key === "ArrowRight" ? x() : r.key === "ArrowLeft" && g());
+      (r.key === "ArrowRight" || r.key === "ArrowLeft") && (r.preventDefault(), r.key === "ArrowRight" ? v() : r.key === "ArrowLeft" && g());
     },
-    [x, g]
+    [v, g]
   );
   R(() => {
     const r = s.current;
@@ -149,42 +149,42 @@ const X = {
     const i = new IntersectionObserver(
       (d) => {
         f((b) => {
-          const e = new Set(b);
+          const a = new Set(b);
           return d.forEach((n) => {
-            let t = n.target.getAttribute("data-card-id")?.match(new RegExp(`(\\d+)-${p}`))?.[1];
-            t && (t = parseInt(t, 10), n.isIntersecting ? e.add(t) : e.delete(t));
-          }), e;
+            let t = n.target.getAttribute("data-card-id")?.match(new RegExp(`(\\d+)-${l}`))?.[1];
+            t && (t = parseInt(t, 10), n.isIntersecting ? a.add(t) : a.delete(t));
+          }), a;
         });
       },
       { root: r, threshold: 0.5 }
     );
-    return a.forEach((d, b) => {
-      const e = document.querySelector(
-        `[data-card-id="${b}-${p}"]`
+    return e.forEach((d, b) => {
+      const a = document.querySelector(
+        `[data-card-id="${b}-${l}"]`
       );
-      e && i.observe(e);
+      a && i.observe(a);
     }), () => i.disconnect();
-  }, [s, a, p]), R(() => {
+  }, [s, e, l]), R(() => {
     const r = s.current;
     if (r)
       return r.addEventListener("keydown", $), () => r.removeEventListener("keydown", $);
   }, [s, $]);
   const C = () => {
     if (c.size === 0) return;
-    const r = [], i = c.size, d = Math.min(...Array.from(c)), b = a.slice(0, d).length, e = a.slice(d + i).length;
+    const r = [], i = c.size, d = Math.min(...Array.from(c)), b = e.slice(0, d).length, a = e.slice(d + i).length;
     let n = 0;
-    for (let t = 0; t < a.length; t++) {
-      if (b + 1 !== t && b <= t && t < a.length - e) continue;
-      let v = "active";
-      (t < b || t > a.length - 1 - e) && (v = ""), r.push(
-        /* @__PURE__ */ o("li", { className: y(`${N}__indicator`, v) }, `indicator-${n++}`)
+    for (let t = 0; t < e.length; t++) {
+      if (b + 1 !== t && b <= t && t < e.length - a) continue;
+      let x = "active";
+      (t < b || t > e.length - 1 - a) && (x = ""), r.push(
+        /* @__PURE__ */ o("li", { className: y(`${N}__indicator`, x) }, `indicator-${n++}`)
       );
     }
     return r.length < 2 ? null : r;
   };
-  return /* @__PURE__ */ u("li", { className: y(N), children: [
+  return /* @__PURE__ */ _("li", { className: y(N), children: [
     /* @__PURE__ */ o("ul", { className: y(`${N}__indicators`), children: C() }),
-    /* @__PURE__ */ u("div", { className: y(`${N}__buttons`), children: [
+    /* @__PURE__ */ _("div", { className: y(`${N}__buttons`), children: [
       /* @__PURE__ */ o(
         M,
         {
@@ -204,29 +204,29 @@ const X = {
           variant: "secondary",
           iconOnly: !0,
           className: y(`${N}__button`),
-          disabled: c.has(a.length - 1),
-          onClick: x,
+          disabled: c.has(e.length - 1),
+          onClick: v,
           children: /* @__PURE__ */ o(U, { className: y(`${N}__button-icon`), size: "xs" })
         }
       )
     ] })
   ] });
 }, I = z.bind(X), w = "purpur-comparison-table", nr = ({
-  classname: a,
+  classname: e,
   features: s,
-  items: p,
+  items: l,
   ariaLabels: m,
   variant: c = "primary"
 }) => {
-  const f = B(), h = I(a, w, `${w}--${c}`), g = F(null), [x, $] = L(!1), C = E(() => {
-    $((e) => !e);
-  }, []), r = () => /* @__PURE__ */ u("li", { className: I(`${w}__cards`), children: [
+  const f = B(), h = I(e, w, `${w}--${c}`), g = F(null), [v, $] = L(!1), C = E(() => {
+    $((a) => !a);
+  }, []), r = () => /* @__PURE__ */ _("li", { className: I(`${w}__cards`), children: [
     /* @__PURE__ */ o("div", { className: I(`${w}__separator`) }),
-    p.map((e, n) => /* @__PURE__ */ H(
-      er,
+    l.map((a, n) => /* @__PURE__ */ H(
+      ar,
       {
-        ...e,
-        showFullDescriptions: x,
+        ...a,
+        showFullDescriptions: v,
         toggleShowFullDescriptions: C,
         key: n,
         isFirstCard: n === 0,
@@ -234,14 +234,14 @@ const X = {
         id: `${n}-${f}`
       }
     ))
-  ] }), i = () => Object.entries(s).map(([e, n], t) => /* @__PURE__ */ u("li", { className: I(`${w}__feature-row`), children: [
-    /* @__PURE__ */ o(or, { title: e, description: n }),
-    p.map((v, T) => /* @__PURE__ */ o(Z, { value: v.features[e] ?? !1 }, T))
-  ] }, t)), d = F(0), b = (e) => {
-    const n = e.currentTarget, t = n.querySelector("[data-card-id]")?.clientWidth ?? 0, v = Math.round(n.scrollLeft / t), T = v * t + v, P = e.timeStamp - d.current, V = Math.abs(n.scrollLeft - T);
-    d.current && P < 200 || V < 10 || (d.current = e.timeStamp, n.scrollTo({ left: T, behavior: "smooth" }));
+  ] }), i = () => Object.entries(s).map(([a, n], t) => /* @__PURE__ */ _("li", { className: I(`${w}__feature-row`), children: [
+    /* @__PURE__ */ o(or, { title: a, description: n }),
+    l.map((x, T) => /* @__PURE__ */ o(Z, { value: x.features[a] ?? !1 }, T))
+  ] }, t)), d = F(0), b = (a) => {
+    const n = a.currentTarget, t = n.querySelector("[data-card-id]")?.clientWidth ?? 0, x = Math.round(n.scrollLeft / t), T = x * t + x, P = a.timeStamp - d.current, V = Math.abs(n.scrollLeft - T);
+    d.current && P < 200 || V < 10 || (d.current = a.timeStamp, n.scrollTo({ left: T, behavior: "smooth" }));
   };
-  return /* @__PURE__ */ o("div", { className: I(w + "__wrapper"), children: /* @__PURE__ */ u(
+  return /* @__PURE__ */ o("div", { className: I(w + "__wrapper"), children: /* @__PURE__ */ _(
     "ul",
     {
       id: w + `-${f}`,
@@ -250,13 +250,13 @@ const X = {
       onScrollEnd: b,
       style: {
         // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended
-        "--initial-columns": p.length + 1
+        "--initial-columns": l.length + 1
       },
       children: [
         /* @__PURE__ */ o(
           cr,
           {
-            items: p,
+            items: l,
             container: g,
             ariaLabels: m,
             parentId: CSS.escape(f)
@@ -272,4 +272,4 @@ nr.displayName = "ComparisonTable";
 export {
   nr as C
 };
-//# sourceMappingURL=comparison-table-D1zJpdLL.mjs.map
+//# sourceMappingURL=comparison-table-8bOJmz-L.mjs.map

package/dist/comparison-table-8bOJmz-L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-table-8bOJmz-L.mjs","sources":["../../../components/comparison-table/src/components/Cell/cell.tsx","../../../components/comparison-table/src/components/LeadCell/lead-cell.tsx","../../../components/comparison-table/src/components/OptionCard/option-card.tsx","../../../components/comparison-table/src/components/ScrollProgress/scroll-progress.tsx","../../../components/comparison-table/src/comparison-table.tsx"],"sourcesContent":["import React, { isValidElement, type ReactNode } from \"react\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport { IconMinus } from \"@purpur/icon/minus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./cell.module.scss\";\n\ntype CellProps = {\n  value: boolean | ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-cell\";\n\nexport const Cell = ({ value }: CellProps) => {\n  const isReactNode = isValidElement(value) || [\"string\", \"number\"].includes(typeof value);\n\n  const getClassName = () => {\n    if (isReactNode) return \"\";\n    return `${rootClassName}--${value ? \"check\" : \"minus\"}`;\n  };\n\n  const classes = cx(rootClassName, [getClassName()]);\n\n  const Icon = value ? IconCheckmark : IconMinus;\n\n  return (\n    <span className={cx(classes)}>\n      {isReactNode ? value : <Icon size=\"xs\" className={cx(`${rootClassName}__icon`)} />}\n    </span>\n  );\n};\n","import React, { type ReactNode } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./lead-cell.module.scss\";\n\ntype LeadCellProps = {\n  title: string;\n  description?: ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-lead-cell\";\n\nexport const LeadCell = ({ title, description }: LeadCellProps) => {\n  const isExpandable = typeof description === \"string\";\n  const classes = cx(rootClassName);\n\n  return (\n    <details className={classes} data-is-expandable={isExpandable}>\n      <summary className={cx(`${rootClassName}__summary`)} tabIndex={isExpandable ? 0 : -1}>\n        <Paragraph className={cx(`${rootClassName}__summary-title`)} variant=\"paragraph-100-bold\">\n          {title}\n        </Paragraph>\n        <IconChevronDown className={cx(`${rootClassName}__summary-icon`)} size=\"sm\" />\n      </summary>\n      {description && (\n        <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description`)}>\n          {description}\n        </Paragraph>\n      )}\n    </details>\n  );\n};\n","import React, { type ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"@purpur/badge\";\nimport { Button } from \"@purpur/button\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps } from \"../../comparison-table\";\nimport styles from \"./option-card.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-option-card\";\n\nexport type OptionCardProps = {\n  image: {\n    src: string;\n    alt: string;\n  };\n\n  title: string;\n  description: string;\n  variablePriceText: string;\n  price: string;\n\n  actions: ReactNode;\n\n  badge?: BadgeProps;\n  isHighlighted?: boolean;\n};\n\ntype OptionCardPropsAdditions = {\n  id: string;\n  isFirstCard: boolean;\n  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n  showFullDescriptions: boolean;\n  toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n  id,\n  description,\n  variablePriceText,\n  price,\n  isHighlighted,\n  ariaLabels,\n  badge,\n  actions,\n  isFirstCard,\n  image,\n  title,\n  showFullDescriptions,\n  toggleShowFullDescriptions,\n}: OptionCardProps & OptionCardPropsAdditions) => {\n  const classes = cx(rootClassName, {\n    [`${rootClassName}--highlighted`]: isHighlighted,\n    [`${rootClassName}--first-card`]: isFirstCard,\n    [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n  });\n\n  const renderDescription = () => {\n    if (!description) return null;\n\n    const longThreshold = 50;\n    const longDescription = description.length > longThreshold;\n\n    return (\n      <div className={cx(`${rootClassName}__description`)}>\n        <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description-text`)}>\n          {description}\n        </Paragraph>\n        {longDescription && (\n          <Button\n            variant=\"text\"\n            size=\"xs\"\n            className={cx(`${rootClassName}__read-more`)}\n            onClick={toggleShowFullDescriptions}\n          >\n            <span className={cx(`${rootClassName}__read-more-text`)}>\n              {showFullDescriptions ? ariaLabels.readLess : ariaLabels.readMore}\n            </span>\n            <IconChevronDown className={cx(`${rootClassName}__read-more-icon`)} size=\"xs\" />\n          </Button>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <article className={classes} data-card-id={id}>\n      {badge && <Badge {...badge} className={cx(`${rootClassName}__badge`)} />}\n\n      <section className={cx(`${rootClassName}__main-content`)}>\n        <img src={image.src} alt={image.alt} className={cx(`${rootClassName}__image`)} />\n\n        <div className={cx(`${rootClassName}__body`)}>\n          <Heading tag=\"h3\" variant=\"title-200\" className={cx(`${rootClassName}__title`)}>\n            {title}\n          </Heading>\n          {renderDescription()}\n        </div>\n      </section>\n\n      <footer className={cx(`${rootClassName}__footer`)}>\n        <span className={cx(`${rootClassName}__price`)} id={id}>\n          <Paragraph variant=\"paragraph-100\">{variablePriceText}</Paragraph>\n          <Paragraph variant=\"paragraph-100-bold\">{price}</Paragraph>\n        </span>\n\n        {actions}\n      </footer>\n    </article>\n  );\n};\n","import React, { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconArrowLeft } from \"@purpur/icon/arrow-left\";\nimport { IconArrowRight } from \"@purpur/icon/arrow-right\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps, type Features, type Item } from \"../../comparison-table\";\nimport styles from \"./scroll-progress.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-comparison-table-scroll-progress\";\n\ntype ScrollProgressProps = {\n  items: Array<Item<Features>>;\n  container: RefObject<HTMLUListElement | null>;\n  parentId: string;\n  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, parentId, ariaLabels }: ScrollProgressProps) => {\n  const [inViewSet, setInViewSet] = useState<Set<number>>(new Set());\n\n  const scrollToCard = useCallback(\n    (index: number) => {\n      const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n      const card = document.querySelector(\n        `[data-card-id=\"${index}-${parentId}\"]`\n      ) as HTMLElement | null;\n      card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n    },\n    [parentId]\n  );\n\n  const previousCard = useCallback(() => {\n    if (inViewSet.size === 0) return;\n\n    const leftmostactiveIndex = Math.min(...Array.from(inViewSet));\n    const targetIndex = leftmostactiveIndex - 1;\n\n    if (targetIndex < 0) return;\n\n    scrollToCard(targetIndex);\n  }, [inViewSet, scrollToCard]);\n\n  const nextCard = useCallback(() => {\n    if (inViewSet.size === 0) return;\n\n    const rightmostactiveIndex = Math.max(...Array.from(inViewSet));\n    const targetIndex = rightmostactiveIndex + 1;\n\n    if (targetIndex >= items.length) return;\n\n    scrollToCard(targetIndex);\n  }, [inViewSet, items.length, scrollToCard]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n        e.preventDefault();\n\n        if (e.key === \"ArrowRight\") nextCard();\n        else if (e.key === \"ArrowLeft\") previousCard();\n      }\n    },\n    [nextCard, previousCard]\n  );\n\n  useEffect(() => {\n    const root = container.current;\n\n    if (!root) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        setInViewSet((prev) => {\n          const next = new Set(prev);\n\n          entries.forEach((entry) => {\n            let index: number | string | undefined = entry.target\n              .getAttribute(\"data-card-id\")\n              ?.match(new RegExp(`(\\\\d+)-${parentId}`))?.[1];\n\n            if (!index) return;\n\n            index = parseInt(index, 10);\n\n            if (entry.isIntersecting) {\n              next.add(index);\n            } else {\n              next.delete(index);\n            }\n          });\n          return next;\n        });\n      },\n      { root, threshold: 0.5 }\n    );\n\n    items.forEach((_, index) => {\n      const card = document.querySelector(\n        `[data-card-id=\"${index}-${parentId}\"]`\n      ) as HTMLElement | null;\n\n      if (card) observer.observe(card);\n    });\n\n    return () => observer.disconnect();\n  }, [container, items, parentId]);\n\n  useEffect(() => {\n    const root = container.current;\n\n    if (!root) return;\n\n    root.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => root.removeEventListener(\"keydown\", handleKeyDown);\n  }, [container, handleKeyDown]);\n\n  const renderIndicators = () => {\n    if (inViewSet.size === 0) return;\n\n    const indicators = [];\n    const viewCapacity = inViewSet.size;\n    const leftmostActiveIndex = Math.min(...Array.from(inViewSet));\n    const head = items.slice(0, leftmostActiveIndex).length;\n    const trail = items.slice(leftmostActiveIndex + viewCapacity).length;\n\n    let key = 0;\n\n    for (let i = 0; i < items.length; i++) {\n      if (head + 1 !== i && head <= i && i < items.length - trail) continue;\n\n      let status = \"active\";\n\n      if (i < head || i > items.length - 1 - trail) status = \"\";\n\n      indicators.push(\n        <li key={`indicator-${key++}`} className={cx(`${rootClassName}__indicator`, status)} />\n      );\n    }\n\n    if (indicators.length < 2) return null;\n\n    return indicators;\n  };\n\n  return (\n    <li className={cx(rootClassName)}>\n      <ul className={cx(`${rootClassName}__indicators`)}>{renderIndicators()}</ul>\n\n      <div className={cx(`${rootClassName}__buttons`)}>\n        <Button\n          aria-label={ariaLabels.previous}\n          variant=\"secondary\"\n          iconOnly\n          className={cx(`${rootClassName}__button`)}\n          disabled={inViewSet.has(0)}\n          onClick={previousCard}\n        >\n          <IconArrowLeft className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n        </Button>\n        <Button\n          aria-label={ariaLabels.next}\n          variant=\"secondary\"\n          iconOnly\n          className={cx(`${rootClassName}__button`)}\n          disabled={inViewSet.has(items.length - 1)}\n          onClick={nextCard}\n        >\n          <IconArrowRight className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n        </Button>\n      </div>\n    </li>\n  );\n};\n","import React, { type ReactNode, type UIEvent, useCallback, useId, useRef, useState } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./comparison-table.module.scss\";\nimport { Cell } from \"./components/Cell/cell\";\nimport { LeadCell } from \"./components/LeadCell/lead-cell\";\nimport { OptionCard, type OptionCardProps } from \"./components/OptionCard/option-card\";\nimport { ScrollProgress } from \"./components/ScrollProgress/scroll-progress\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table\";\n\nexport type Features = Record<string, ReactNode | null>;\n\nexport type Item<TFeatures extends Features = Features> = OptionCardProps & {\n  features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;\n};\n\nexport type ComparisonTableProps<TFeatures extends Features = Features> = {\n  /** List of features that can be supported by the comparison table\n   *\n   * string = description of the feature that can be viewed by expanding cell.\n   *\n   * null = no description\n   *\n    {\n      [featureName]: ReactNode | null\n    }\n  */\n  features: TFeatures;\n\n  /** List of items to be displayed in the comparison table\n   *\n   *\n    Item = {\n      image: {\n        src: string;\n        alt: string;\n      };\n\n      title: string;\n      description: string;\n      variablePriceText: string;\n      price: string;\n      actions: ReactNode;\n      badge?: BadgeProps;\n      isHighlighted?: boolean;\n\n      features: {\n        [featureName in keyof Features]?: string | boolean;\n      };\n    }\n  */\n  items: Array<Item<TFeatures>>;\n\n  /** Aria labels for the comparison table and various components\n   *\n    {\n      previous: string;\n      next: string;\n      readMore: string;\n      readLess: string;\n    }\n  */\n  ariaLabels: {\n    previous: string;\n    next: string;\n    readMore: string;\n    readLess: string;\n  };\n  variant?: \"primary\" | \"secondary\";\n  classname?: string;\n};\n\nexport const ComparisonTable = <TFeatures extends Features>({\n  classname,\n  features,\n  items,\n  ariaLabels,\n  variant = \"primary\",\n}: ComparisonTableProps<TFeatures>) => {\n  const id = useId();\n  const classes = cx(classname, rootClassName, `${rootClassName}--${variant}`);\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showFullDescriptions, setShowFullDescriptions] = useState(false);\n\n  const handleToggleShowFullDescriptions = useCallback(() => {\n    setShowFullDescriptions((prev) => !prev);\n  }, []);\n\n  const renderCards = () => {\n    return (\n      <li className={cx(`${rootClassName}__cards`)}>\n        <div className={cx(`${rootClassName}__separator`)} />\n        {items.map((item, index) => (\n          <OptionCard\n            {...item}\n            showFullDescriptions={showFullDescriptions}\n            toggleShowFullDescriptions={handleToggleShowFullDescriptions}\n            key={index}\n            isFirstCard={index === 0}\n            ariaLabels={ariaLabels}\n            id={`${index}-${id}`}\n          />\n        ))}\n      </li>\n    );\n  };\n\n  const renderFeatures = () => {\n    return Object.entries(features).map(([title, description], i) => (\n      <li key={i} className={cx(`${rootClassName}__feature-row`)}>\n        <LeadCell title={title} description={description} />\n        {items.map((item, index) => (\n          <Cell key={index} value={item.features[title as keyof TFeatures] ?? false} />\n        ))}\n      </li>\n    ));\n  };\n\n  const deltaTime = useRef(0);\n\n  const handleScrollEnd = (e: UIEvent<HTMLUListElement>) => {\n    /**\n     * This function makes sure that the scroll position is never stuck between two cards, since scroll snap is not fully reliable.\n     */\n\n    const target = e.currentTarget;\n    const cardwidth = target.querySelector(\"[data-card-id]\")?.clientWidth ?? 0;\n    const cardPos = Math.round(target.scrollLeft / cardwidth);\n    const scrollTarget = cardPos * cardwidth + cardPos;\n    const timeDiff = e.timeStamp - deltaTime.current;\n    const scrollDiff = Math.abs(target.scrollLeft - scrollTarget);\n\n    if (deltaTime.current && timeDiff < 200) return;\n    if (scrollDiff < 10) return;\n\n    deltaTime.current = e.timeStamp;\n\n    target.scrollTo({ left: scrollTarget, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className={cx(rootClassName + \"__wrapper\")}>\n      <ul\n        id={rootClassName + `-${id}`}\n        ref={containerRef}\n        className={classes}\n        // eslint-disable-next-line react/no-unknown-property\n        onScrollEnd={handleScrollEnd}\n        style={{\n          // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended\n          [\"--initial-columns\"]: items.length + 1,\n        }}\n      >\n        <ScrollProgress\n          items={items}\n          container={containerRef}\n          ariaLabels={ariaLabels}\n          parentId={CSS.escape(id)}\n        />\n        {renderCards()}\n        {renderFeatures()}\n      </ul>\n    </div>\n  );\n};\n\nComparisonTable.displayName = \"ComparisonTable\";\n"],"names":["cx","c","styles","rootClassName","Cell","value","isReactNode","isValidElement","classes","Icon","IconCheckmark","IconMinus","jsx","LeadCell","title","description","isExpandable","jsxs","Paragraph","IconChevronDown","OptionCard","id","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","renderDescription","longDescription","Button","Badge","Heading","ScrollProgress","items","container","parentId","inViewSet","setInViewSet","useState","scrollToCard","useCallback","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","e","useEffect","root","observer","entries","prev","next","entry","_","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","useRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","target","cardwidth","cardPos","scrollTarget","timeDiff","scrollDiff"],"mappings":"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"}

package/dist/comparison-table-mKL2IHXW.js

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),u=require("react"),I=require("./bind-DeUYJ6m9.js"),L=require("./checkmark.es-lYntWFA3.js"),F=require("./minus.es-DtXArdKK.js"),R=require("./chevron-down.es-BMjgiS3F.js"),q=require("./paragraph-By4jMjnH.js"),O=require("./badge-CQ0SS_t8.js"),D=require("./button-DmybVApa.js"),B=require("./heading-drD5ugCC.js"),V=require("./arrow-left.es-CCWJyrcQ.js"),H=require("./arrow-right.es-eH-IgGi9.js"),K={"purpur-comparison-table__wrapper":"_purpur-comparison-table__wrapper_1udkj_1","purpur-comparison-table":"_purpur-comparison-table_1udkj_1","purpur-comparison-table--primary":"_purpur-comparison-table--primary_1udkj_11","purpur-comparison-table--secondary":"_purpur-comparison-table--secondary_1udkj_15","purpur-comparison-table__feature-row":"_purpur-comparison-table__feature-row_1udkj_32","purpur-comparison-table__cards":"_purpur-comparison-table__cards_1udkj_32","purpur-comparison-table__separator":"_purpur-comparison-table__separator_1udkj_49"},W={"purpur-comparison-table-cell":"_purpur-comparison-table-cell_117pb_1","purpur-comparison-table-cell--check":"_purpur-comparison-table-cell--check_117pb_16","purpur-comparison-table-cell--minus":"_purpur-comparison-table-cell--minus_117pb_19","purpur-comparison-table-cell__icon":"_purpur-comparison-table-cell__icon_117pb_22"},T=I.c.bind(W),z="purpur-comparison-table-cell",G=({value:a})=>{const t=u.isValidElement(a)||["string","number"].includes(typeof a),m=T(z,[t?"":`${z}--${a?"check":"minus"}`]),c=a?L.a:F.e;return r.jsx("span",{className:T(m),children:t?a:r.jsx(c,{size:"xs",className:T(`${z}__icon`)})})},J={"purpur-comparison-table-lead-cell":"_purpur-comparison-table-lead-cell_1vild_1","purpur-comparison-table-lead-cell__description":"_purpur-comparison-table-lead-cell__description_1vild_5","purpur-comparison-table-lead-cell__summary":"_purpur-comparison-table-lead-cell__summary_1vild_40","purpur-comparison-table-lead-cell__summary-title":"_purpur-comparison-table-lead-cell__summary-title_1vild_48","purpur-comparison-table-lead-cell__summary-icon":"_purpur-comparison-table-lead-cell__summary-icon_1vild_51"},k=I.c.bind(J),C="purpur-comparison-table-lead-cell",Q=({title:a,description:t})=>{const l=typeof t=="string",m=k(C);return r.jsxs("details",{className:m,"data-is-expandable":l,children:[r.jsxs("summary",{className:k(`${C}__summary`),tabIndex:l?0:-1,children:[r.jsx(q.Paragraph,{className:k(`${C}__summary-title`),variant:"paragraph-100-bold",children:a}),r.jsx(R.l,{className:k(`${C}__summary-icon`),size:"sm"})]}),t&&r.jsx(q.Paragraph,{variant:"paragraph-100",className:k(`${C}__description`),children:t})]})},U={"purpur-comparison-table-option-card":"_purpur-comparison-table-option-card_15113_1","purpur-comparison-table-option-card--highlighted":"_purpur-comparison-table-option-card--highlighted_15113_11","purpur-comparison-table-option-card__badge":"_purpur-comparison-table-option-card__badge_15113_14","purpur-comparison-table-option-card__main-content":"_purpur-comparison-table-option-card__main-content_15113_19","purpur-comparison-table-option-card__image":"_purpur-comparison-table-option-card__image_15113_25","purpur-comparison-table-option-card__body":"_purpur-comparison-table-option-card__body_15113_31","purpur-comparison-table-option-card__description":"_purpur-comparison-table-option-card__description_15113_36","purpur-comparison-table-option-card__description-text":"_purpur-comparison-table-option-card__description-text_15113_41","purpur-comparison-table-option-card__read-more":"_purpur-comparison-table-option-card__read-more_15113_50","purpur-comparison-table-option-card__read-more-icon":"_purpur-comparison-table-option-card__read-more-icon_15113_54","purpur-comparison-table-option-card__footer":"_purpur-comparison-table-option-card__footer_15113_62","purpur-comparison-table-option-card__price":"_purpur-comparison-table-option-card__price_15113_67","purpur-comparison-table-option-card--show-full-descriptions":"_purpur-comparison-table-option-card--show-full-descriptions_15113_74","purpur-comparison-table-option-card--first-card":"_purpur-comparison-table-option-card--first-card_15113_107"},_=I.c.bind(U),p="purpur-comparison-table-option-card",X=({id:a,description:t,variablePriceText:l,price:m,isHighlighted:c,ariaLabels:g,badge:h,actions:x,isFirstCard:j,image:f,title:w,showFullDescriptions:e,toggleShowFullDescriptions:i})=>{const d=_(p,{[`${p}--highlighted`]:c,[`${p}--first-card`]:j,[`${p}--show-full-descriptions`]:e}),b=()=>{if(!t)return null;const n=t.length>50;return r.jsxs("div",{className:_(`${p}__description`),children:[r.jsx(q.Paragraph,{variant:"paragraph-100",className:_(`${p}__description-text`),children:t}),n&&r.jsxs(D.Button,{variant:"text",size:"xs",className:_(`${p}__read-more`),onClick:i,children:[r.jsx("span",{className:_(`${p}__read-more-text`),children:e?g.readLess:g.readMore}),r.jsx(R.l,{className:_(`${p}__read-more-icon`),size:"xs"})]})]})};return r.jsxs("article",{className:d,"data-card-id":a,children:[h&&r.jsx(O.Badge,{...h,className:_(`${p}__badge`)}),r.jsxs("section",{className:_(`${p}__main-content`),children:[r.jsx("img",{src:f.src,alt:f.alt,className:_(`${p}__image`)}),r.jsxs("div",{className:_(`${p}__body`),children:[r.jsx(B.Heading,{tag:"h3",variant:"title-200",className:_(`${p}__title`),children:w}),b()]})]}),r.jsxs("footer",{className:_(`${p}__footer`),children:[r.jsxs("span",{className:_(`${p}__price`),id:a,children:[r.jsx(q.Paragraph,{variant:"paragraph-100",children:l}),r.jsx(q.Paragraph,{variant:"paragraph-100-bold",children:m})]}),x]})]})},Y="_active_ybbe8_44",Z={"purpur-comparison-table-scroll-progress":"_purpur-comparison-table-scroll-progress_ybbe8_1","purpur-comparison-table-scroll-progress__indicators":"_purpur-comparison-table-scroll-progress__indicators_ybbe8_15","purpur-comparison-table-scroll-progress__indicator":"_purpur-comparison-table-scroll-progress__indicator_ybbe8_15",active:Y,"purpur-comparison-table-scroll-progress__buttons":"_purpur-comparison-table-scroll-progress__buttons_ybbe8_48","purpur-comparison-table-scroll-progress__button":"_purpur-comparison-table-scroll-progress__button_ybbe8_48","purpur-comparison-table-scroll-progress__button-icon":"_purpur-comparison-table-scroll-progress__button-icon_ybbe8_57"},$=I.c.bind(Z),y="purpur-comparison-table-scroll-progress",rr=({items:a,container:t,parentId:l,ariaLabels:m})=>{const[c,g]=u.useState(new Set),h=u.useCallback(e=>{const i=window.matchMedia("(prefers-reduced-motion: reduce)").matches;document.querySelector(`[data-card-id="${e}-${l}"]`)?.scrollIntoView({behavior:i?"instant":"smooth",block:"nearest"})},[l]),x=u.useCallback(()=>{if(c.size===0)return;const i=Math.min(...Array.from(c))-1;i<0||h(i)},[c,h]),j=u.useCallback(()=>{if(c.size===0)return;const i=Math.max(...Array.from(c))+1;i>=a.length||h(i)},[c,a.length,h]),f=u.useCallback(e=>{(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(e.preventDefault(),e.key==="ArrowRight"?j():e.key==="ArrowLeft"&&x())},[j,x]);u.useEffect(()=>{const e=t.current;if(!e)return;const i=new IntersectionObserver(d=>{g(b=>{const o=new Set(b);return d.forEach(n=>{let s=n.target.getAttribute("data-card-id")?.match(new RegExp(`(\\d+)-${l}`))?.[1];s&&(s=parseInt(s,10),n.isIntersecting?o.add(s):o.delete(s))}),o})},{root:e,threshold:.5});return a.forEach((d,b)=>{const o=document.querySelector(`[data-card-id="${b}-${l}"]`);o&&i.observe(o)}),()=>i.disconnect()},[t,a,l]),u.useEffect(()=>{const e=t.current;if(e)return e.addEventListener("keydown",f),()=>e.removeEventListener("keydown",f)},[t,f]);const w=()=>{if(c.size===0)return;const e=[],i=c.size,d=Math.min(...Array.from(c)),b=a.slice(0,d).length,o=a.slice(d+i).length;let n=0;for(let s=0;s<a.length;s++){if(b+1!==s&&b<=s&&s<a.length-o)continue;let N="active";(s<b||s>a.length-1-o)&&(N=""),e.push(r.jsx("li",{className:$(`${y}__indicator`,N)},`indicator-${n++}`))}return e.length<2?null:e};return r.jsxs("li",{className:$(y),children:[r.jsx("ul",{className:$(`${y}__indicators`),children:w()}),r.jsxs("div",{className:$(`${y}__buttons`),children:[r.jsx(D.Button,{"aria-label":m.previous,variant:"secondary",iconOnly:!0,className:$(`${y}__button`),disabled:c.has(0),onClick:x,children:r.jsx(V.l,{className:$(`${y}__button-icon`),size:"xs"})}),r.jsx(D.Button,{"aria-label":m.next,variant:"secondary",iconOnly:!0,className:$(`${y}__button`),disabled:c.has(a.length-1),onClick:j,children:r.jsx(H.i,{className:$(`${y}__button-icon`),size:"xs"})})]})]})},S=I.c.bind(K),v="purpur-comparison-table",A=({classname:a,features:t,items:l,ariaLabels:m,variant:c="primary"})=>{const g=u.useId(),h=S(a,v,`${v}--${c}`),x=u.useRef(null),[j,f]=u.useState(!1),w=u.useCallback(()=>{f(o=>!o)},[]),e=()=>r.jsxs("li",{className:S(`${v}__cards`),children:[r.jsx("div",{className:S(`${v}__separator`)}),l.map((o,n)=>u.createElement(X,{...o,showFullDescriptions:j,toggleShowFullDescriptions:w,key:n,isFirstCard:n===0,ariaLabels:m,id:`${n}-${g}`}))]}),i=()=>Object.entries(t).map(([o,n],s)=>r.jsxs("li",{className:S(`${v}__feature-row`),children:[r.jsx(Q,{title:o,description:n}),l.map((N,E)=>r.jsx(G,{value:N.features[o]??!1},E))]},s)),d=u.useRef(0),b=o=>{const n=o.currentTarget,s=n.querySelector("[data-card-id]")?.clientWidth??0,N=Math.round(n.scrollLeft/s),E=N*s+N,M=o.timeStamp-d.current,P=Math.abs(n.scrollLeft-E);d.current&&M<200||P<10||(d.current=o.timeStamp,n.scrollTo({left:E,behavior:"smooth"}))};return r.jsx("div",{className:S(v+"__wrapper"),children:r.jsxs("ul",{id:v+`-${g}`,ref:x,className:h,onScrollEnd:b,style:{"--initial-columns":l.length+1},children:[r.jsx(rr,{items:l,container:x,ariaLabels:m,parentId:CSS.escape(g)}),e(),i()]})})};A.displayName="ComparisonTable";exports.ComparisonTable=A;
+//# sourceMappingURL=comparison-table-mKL2IHXW.js.map

package/dist/comparison-table-mKL2IHXW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-table-mKL2IHXW.js","sources":["../../../components/comparison-table/src/components/Cell/cell.tsx","../../../components/comparison-table/src/components/LeadCell/lead-cell.tsx","../../../components/comparison-table/src/components/OptionCard/option-card.tsx","../../../components/comparison-table/src/components/ScrollProgress/scroll-progress.tsx","../../../components/comparison-table/src/comparison-table.tsx"],"sourcesContent":["import React, { isValidElement, type ReactNode } from \"react\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport { IconMinus } from \"@purpur/icon/minus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./cell.module.scss\";\n\ntype CellProps = {\n  value: boolean | ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-cell\";\n\nexport const Cell = ({ value }: CellProps) => {\n  const isReactNode = isValidElement(value) || [\"string\", \"number\"].includes(typeof value);\n\n  const getClassName = () => {\n    if (isReactNode) return \"\";\n    return `${rootClassName}--${value ? \"check\" : \"minus\"}`;\n  };\n\n  const classes = cx(rootClassName, [getClassName()]);\n\n  const Icon = value ? IconCheckmark : IconMinus;\n\n  return (\n    <span className={cx(classes)}>\n      {isReactNode ? value : <Icon size=\"xs\" className={cx(`${rootClassName}__icon`)} />}\n    </span>\n  );\n};\n","import React, { type ReactNode } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./lead-cell.module.scss\";\n\ntype LeadCellProps = {\n  title: string;\n  description?: ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-lead-cell\";\n\nexport const LeadCell = ({ title, description }: LeadCellProps) => {\n  const isExpandable = typeof description === \"string\";\n  const classes = cx(rootClassName);\n\n  return (\n    <details className={classes} data-is-expandable={isExpandable}>\n      <summary className={cx(`${rootClassName}__summary`)} tabIndex={isExpandable ? 0 : -1}>\n        <Paragraph className={cx(`${rootClassName}__summary-title`)} variant=\"paragraph-100-bold\">\n          {title}\n        </Paragraph>\n        <IconChevronDown className={cx(`${rootClassName}__summary-icon`)} size=\"sm\" />\n      </summary>\n      {description && (\n        <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description`)}>\n          {description}\n        </Paragraph>\n      )}\n    </details>\n  );\n};\n","import React, { type ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"@purpur/badge\";\nimport { Button } from \"@purpur/button\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps } from \"../../comparison-table\";\nimport styles from \"./option-card.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-option-card\";\n\nexport type OptionCardProps = {\n  image: {\n    src: string;\n    alt: string;\n  };\n\n  title: string;\n  description: string;\n  variablePriceText: string;\n  price: string;\n\n  actions: ReactNode;\n\n  badge?: BadgeProps;\n  isHighlighted?: boolean;\n};\n\ntype OptionCardPropsAdditions = {\n  id: string;\n  isFirstCard: boolean;\n  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n  showFullDescriptions: boolean;\n  toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n  id,\n  description,\n  variablePriceText,\n  price,\n  isHighlighted,\n  ariaLabels,\n  badge,\n  actions,\n  isFirstCard,\n  image,\n  title,\n  showFullDescriptions,\n  toggleShowFullDescriptions,\n}: OptionCardProps & OptionCardPropsAdditions) => {\n  const classes = cx(rootClassName, {\n    [`${rootClassName}--highlighted`]: isHighlighted,\n    [`${rootClassName}--first-card`]: isFirstCard,\n    [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n  });\n\n  const renderDescription = () => {\n    if (!description) return null;\n\n    const longThreshold = 50;\n    const longDescription = description.length > longThreshold;\n\n    return (\n      <div className={cx(`${rootClassName}__description`)}>\n        <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description-text`)}>\n          {description}\n        </Paragraph>\n        {longDescription && (\n          <Button\n            variant=\"text\"\n            size=\"xs\"\n            className={cx(`${rootClassName}__read-more`)}\n            onClick={toggleShowFullDescriptions}\n          >\n            <span className={cx(`${rootClassName}__read-more-text`)}>\n              {showFullDescriptions ? ariaLabels.readLess : ariaLabels.readMore}\n            </span>\n            <IconChevronDown className={cx(`${rootClassName}__read-more-icon`)} size=\"xs\" />\n          </Button>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <article className={classes} data-card-id={id}>\n      {badge && <Badge {...badge} className={cx(`${rootClassName}__badge`)} />}\n\n      <section className={cx(`${rootClassName}__main-content`)}>\n        <img src={image.src} alt={image.alt} className={cx(`${rootClassName}__image`)} />\n\n        <div className={cx(`${rootClassName}__body`)}>\n          <Heading tag=\"h3\" variant=\"title-200\" className={cx(`${rootClassName}__title`)}>\n            {title}\n          </Heading>\n          {renderDescription()}\n        </div>\n      </section>\n\n      <footer className={cx(`${rootClassName}__footer`)}>\n        <span className={cx(`${rootClassName}__price`)} id={id}>\n          <Paragraph variant=\"paragraph-100\">{variablePriceText}</Paragraph>\n          <Paragraph variant=\"paragraph-100-bold\">{price}</Paragraph>\n        </span>\n\n        {actions}\n      </footer>\n    </article>\n  );\n};\n","import React, { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconArrowLeft } from \"@purpur/icon/arrow-left\";\nimport { IconArrowRight } from \"@purpur/icon/arrow-right\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps, type Features, type Item } from \"../../comparison-table\";\nimport styles from \"./scroll-progress.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-comparison-table-scroll-progress\";\n\ntype ScrollProgressProps = {\n  items: Array<Item<Features>>;\n  container: RefObject<HTMLUListElement | null>;\n  parentId: string;\n  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, parentId, ariaLabels }: ScrollProgressProps) => {\n  const [inViewSet, setInViewSet] = useState<Set<number>>(new Set());\n\n  const scrollToCard = useCallback(\n    (index: number) => {\n      const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n      const card = document.querySelector(\n        `[data-card-id=\"${index}-${parentId}\"]`\n      ) as HTMLElement | null;\n      card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n    },\n    [parentId]\n  );\n\n  const previousCard = useCallback(() => {\n    if (inViewSet.size === 0) return;\n\n    const leftmostactiveIndex = Math.min(...Array.from(inViewSet));\n    const targetIndex = leftmostactiveIndex - 1;\n\n    if (targetIndex < 0) return;\n\n    scrollToCard(targetIndex);\n  }, [inViewSet, scrollToCard]);\n\n  const nextCard = useCallback(() => {\n    if (inViewSet.size === 0) return;\n\n    const rightmostactiveIndex = Math.max(...Array.from(inViewSet));\n    const targetIndex = rightmostactiveIndex + 1;\n\n    if (targetIndex >= items.length) return;\n\n    scrollToCard(targetIndex);\n  }, [inViewSet, items.length, scrollToCard]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n        e.preventDefault();\n\n        if (e.key === \"ArrowRight\") nextCard();\n        else if (e.key === \"ArrowLeft\") previousCard();\n      }\n    },\n    [nextCard, previousCard]\n  );\n\n  useEffect(() => {\n    const root = container.current;\n\n    if (!root) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        setInViewSet((prev) => {\n          const next = new Set(prev);\n\n          entries.forEach((entry) => {\n            let index: number | string | undefined = entry.target\n              .getAttribute(\"data-card-id\")\n              ?.match(new RegExp(`(\\\\d+)-${parentId}`))?.[1];\n\n            if (!index) return;\n\n            index = parseInt(index, 10);\n\n            if (entry.isIntersecting) {\n              next.add(index);\n            } else {\n              next.delete(index);\n            }\n          });\n          return next;\n        });\n      },\n      { root, threshold: 0.5 }\n    );\n\n    items.forEach((_, index) => {\n      const card = document.querySelector(\n        `[data-card-id=\"${index}-${parentId}\"]`\n      ) as HTMLElement | null;\n\n      if (card) observer.observe(card);\n    });\n\n    return () => observer.disconnect();\n  }, [container, items, parentId]);\n\n  useEffect(() => {\n    const root = container.current;\n\n    if (!root) return;\n\n    root.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => root.removeEventListener(\"keydown\", handleKeyDown);\n  }, [container, handleKeyDown]);\n\n  const renderIndicators = () => {\n    if (inViewSet.size === 0) return;\n\n    const indicators = [];\n    const viewCapacity = inViewSet.size;\n    const leftmostActiveIndex = Math.min(...Array.from(inViewSet));\n    const head = items.slice(0, leftmostActiveIndex).length;\n    const trail = items.slice(leftmostActiveIndex + viewCapacity).length;\n\n    let key = 0;\n\n    for (let i = 0; i < items.length; i++) {\n      if (head + 1 !== i && head <= i && i < items.length - trail) continue;\n\n      let status = \"active\";\n\n      if (i < head || i > items.length - 1 - trail) status = \"\";\n\n      indicators.push(\n        <li key={`indicator-${key++}`} className={cx(`${rootClassName}__indicator`, status)} />\n      );\n    }\n\n    if (indicators.length < 2) return null;\n\n    return indicators;\n  };\n\n  return (\n    <li className={cx(rootClassName)}>\n      <ul className={cx(`${rootClassName}__indicators`)}>{renderIndicators()}</ul>\n\n      <div className={cx(`${rootClassName}__buttons`)}>\n        <Button\n          aria-label={ariaLabels.previous}\n          variant=\"secondary\"\n          iconOnly\n          className={cx(`${rootClassName}__button`)}\n          disabled={inViewSet.has(0)}\n          onClick={previousCard}\n        >\n          <IconArrowLeft className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n        </Button>\n        <Button\n          aria-label={ariaLabels.next}\n          variant=\"secondary\"\n          iconOnly\n          className={cx(`${rootClassName}__button`)}\n          disabled={inViewSet.has(items.length - 1)}\n          onClick={nextCard}\n        >\n          <IconArrowRight className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n        </Button>\n      </div>\n    </li>\n  );\n};\n","import React, { type ReactNode, type UIEvent, useCallback, useId, useRef, useState } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./comparison-table.module.scss\";\nimport { Cell } from \"./components/Cell/cell\";\nimport { LeadCell } from \"./components/LeadCell/lead-cell\";\nimport { OptionCard, type OptionCardProps } from \"./components/OptionCard/option-card\";\nimport { ScrollProgress } from \"./components/ScrollProgress/scroll-progress\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table\";\n\nexport type Features = Record<string, ReactNode | null>;\n\nexport type Item<TFeatures extends Features = Features> = OptionCardProps & {\n  features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;\n};\n\nexport type ComparisonTableProps<TFeatures extends Features = Features> = {\n  /** List of features that can be supported by the comparison table\n   *\n   * string = description of the feature that can be viewed by expanding cell.\n   *\n   * null = no description\n   *\n    {\n      [featureName]: ReactNode | null\n    }\n  */\n  features: TFeatures;\n\n  /** List of items to be displayed in the comparison table\n   *\n   *\n    Item = {\n      image: {\n        src: string;\n        alt: string;\n      };\n\n      title: string;\n      description: string;\n      variablePriceText: string;\n      price: string;\n      actions: ReactNode;\n      badge?: BadgeProps;\n      isHighlighted?: boolean;\n\n      features: {\n        [featureName in keyof Features]?: string | boolean;\n      };\n    }\n  */\n  items: Array<Item<TFeatures>>;\n\n  /** Aria labels for the comparison table and various components\n   *\n    {\n      previous: string;\n      next: string;\n      readMore: string;\n      readLess: string;\n    }\n  */\n  ariaLabels: {\n    previous: string;\n    next: string;\n    readMore: string;\n    readLess: string;\n  };\n  variant?: \"primary\" | \"secondary\";\n  classname?: string;\n};\n\nexport const ComparisonTable = <TFeatures extends Features>({\n  classname,\n  features,\n  items,\n  ariaLabels,\n  variant = \"primary\",\n}: ComparisonTableProps<TFeatures>) => {\n  const id = useId();\n  const classes = cx(classname, rootClassName, `${rootClassName}--${variant}`);\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showFullDescriptions, setShowFullDescriptions] = useState(false);\n\n  const handleToggleShowFullDescriptions = useCallback(() => {\n    setShowFullDescriptions((prev) => !prev);\n  }, []);\n\n  const renderCards = () => {\n    return (\n      <li className={cx(`${rootClassName}__cards`)}>\n        <div className={cx(`${rootClassName}__separator`)} />\n        {items.map((item, index) => (\n          <OptionCard\n            {...item}\n            showFullDescriptions={showFullDescriptions}\n            toggleShowFullDescriptions={handleToggleShowFullDescriptions}\n            key={index}\n            isFirstCard={index === 0}\n            ariaLabels={ariaLabels}\n            id={`${index}-${id}`}\n          />\n        ))}\n      </li>\n    );\n  };\n\n  const renderFeatures = () => {\n    return Object.entries(features).map(([title, description], i) => (\n      <li key={i} className={cx(`${rootClassName}__feature-row`)}>\n        <LeadCell title={title} description={description} />\n        {items.map((item, index) => (\n          <Cell key={index} value={item.features[title as keyof TFeatures] ?? false} />\n        ))}\n      </li>\n    ));\n  };\n\n  const deltaTime = useRef(0);\n\n  const handleScrollEnd = (e: UIEvent<HTMLUListElement>) => {\n    /**\n     * This function makes sure that the scroll position is never stuck between two cards, since scroll snap is not fully reliable.\n     */\n\n    const target = e.currentTarget;\n    const cardwidth = target.querySelector(\"[data-card-id]\")?.clientWidth ?? 0;\n    const cardPos = Math.round(target.scrollLeft / cardwidth);\n    const scrollTarget = cardPos * cardwidth + cardPos;\n    const timeDiff = e.timeStamp - deltaTime.current;\n    const scrollDiff = Math.abs(target.scrollLeft - scrollTarget);\n\n    if (deltaTime.current && timeDiff < 200) return;\n    if (scrollDiff < 10) return;\n\n    deltaTime.current = e.timeStamp;\n\n    target.scrollTo({ left: scrollTarget, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className={cx(rootClassName + \"__wrapper\")}>\n      <ul\n        id={rootClassName + `-${id}`}\n        ref={containerRef}\n        className={classes}\n        // eslint-disable-next-line react/no-unknown-property\n        onScrollEnd={handleScrollEnd}\n        style={{\n          // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended\n          [\"--initial-columns\"]: items.length + 1,\n        }}\n      >\n        <ScrollProgress\n          items={items}\n          container={containerRef}\n          ariaLabels={ariaLabels}\n          parentId={CSS.escape(id)}\n        />\n        {renderCards()}\n        {renderFeatures()}\n      </ul>\n    </div>\n  );\n};\n\nComparisonTable.displayName = \"ComparisonTable\";\n"],"names":["cx","c","styles","rootClassName","Cell","value","isReactNode","isValidElement","classes","Icon","IconCheckmark","IconMinus","jsx","LeadCell","title","description","isExpandable","jsxs","Paragraph","IconChevronDown","OptionCard","id","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","renderDescription","longDescription","Button","Badge","Heading","ScrollProgress","items","container","parentId","inViewSet","setInViewSet","useState","scrollToCard","useCallback","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","useEffect","root","observer","entries","prev","next","entry","_","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","useRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","e","target","cardwidth","cardPos","scrollTarget","timeDiff","scrollDiff"],"mappings":"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"}

package/dist/comparison-table.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./comparison-table-B8w65g43.js");exports.ComparisonTable=e.ComparisonTable;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./comparison-table-mKL2IHXW.js");exports.ComparisonTable=e.ComparisonTable;
 //# sourceMappingURL=comparison-table.cjs.js.map

package/dist/comparison-table.es.js

@@ -1,4 +1,4 @@
-import { C as r } from "./comparison-table-D1zJpdLL.mjs";
+import { C as r } from "./comparison-table-8bOJmz-L.mjs";
 export {
   r as ComparisonTable
 };

package/dist/components/accordion/src/accordion.d.ts

@@ -14,7 +14,7 @@ export type AccordionProps = Omit<BaseProps, "title" | "children"> & {
      */
     schema?: string;
 };
-export declare const NegativeContext: React.Context<boolean>;
+export declare const AccordionNegativeContext: React.Context<boolean>;
 export declare const Accordion: {
     ({ children, className, negative, title, titleTag, titleVariant, schema, ...props }: AccordionProps): React.JSX.Element;
     Item: ({ children, className, fullWidth, title, titleTag, initialOpen, onClick, onOpen, onClose, ...props }: import('./accordion-item').AccordionItemProps) => React.JSX.Element;

package/dist/components/accordion/src/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../../components/accordion/src/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAW,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASpF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnE,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,wBAAuB,CAAC;AAEpD,eAAO,MAAM,SAAS;yFASnB,cAAc;;;CA2BhB,CAAC;AAKF,YAAY,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../../components/accordion/src/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAW,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASpF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnE,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,wBAAwB,wBAAuB,CAAC;AAE7D,eAAO,MAAM,SAAS;yFASnB,cAAc;;;CA6BhB,CAAC;AAKF,YAAY,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/checkbox/src/checkbox.d.ts

@@ -45,6 +45,10 @@ export type CheckboxProps = Omit<BaseProps<"button">, "onChange" | "children"> &
      * The helper text displayed below the checkbox.
      */
     helperText?: string;
+    /**
+     * When `true`, renders the checkbox for use on dark or colored backgrounds.
+     */
+    negative?: boolean;
     /**
      * Event handler called when the checked state of the checkbox changes.
      * */

package/dist/components/checkbox/src/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../../components/checkbox/src/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AActD,eAAO,MAAM,YAAY,yCAA0C,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC/E;;SAEK;IACL,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC;IAC7B;;SAEK;IACL,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;SAEK;IACL,EAAE,EAAE,MAAM,CAAC;IACX;;SAEK;IACL,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;SAEK;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC;;SAEK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,QAAQ,sGAsFpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../../components/checkbox/src/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AActD,eAAO,MAAM,YAAY,yCAA0C,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC/E;;SAEK;IACL,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC;IAC7B;;SAEK;IACL,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;SAEK;IACL,EAAE,EAAE,MAAM,CAAC;IACX;;SAEK;IACL,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;SAEK;IACL,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC;;SAEK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,QAAQ,sGA0FpB,CAAC"}

package/dist/components/comparison-table/src/comparison-table.d.ts

@@ -2,7 +2,7 @@ import { default as React, ReactNode } from 'react';
 import { OptionCardProps } from './components/OptionCard/option-card';
 export type Features = Record<string, ReactNode | null>;
 export type Item<TFeatures extends Features = Features> = OptionCardProps & {
-    features: Partial<Record<keyof TFeatures, string | boolean>>;
+    features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;
 };
 export type ComparisonTableProps<TFeatures extends Features = Features> = {
     /** List of features that can be supported by the comparison table