@purpur/library 9.5.0 → 9.7.0

package/dist/comparison-table-CjTE-fHN.mjs

@@ -0,0 +1,292 @@
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { isValidElement as W, useRef as A, useState as V, useEffect as M, useCallback as C, useId as G, createElement as J } from "react";
+import { c as D } from "./bind-CU-R61T-.mjs";
+import { a as Q } from "./checkmark.es-DdgIZN2R.mjs";
+import { e as U } from "./minus.es-BK9qA9iJ.mjs";
+import { l as F } from "./chevron-down.es-PCIIj6oG.mjs";
+import { P as q } from "./paragraph-DSxXmX_0.mjs";
+import { a as X } from "./badge-DalD-yqG.mjs";
+import { b as P } from "./button-4-yWOgtD.mjs";
+import { H as Y } from "./heading-xwBuT_-9.mjs";
+import { l as Z } from "./arrow-left.es-DU-PX-Il.mjs";
+import { i as rr } from "./arrow-right.es-C7SkjAB6.mjs";
+const er = {
+  "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"
+}, or = {
+  "purpur-comparison-table-cell": "_purpur-comparison-table-cell_glb5z_1",
+  "purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--check_glb5z_17",
+  "purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--minus_glb5z_20",
+  "purpur-comparison-table-cell__icon": "_purpur-comparison-table-cell__icon_glb5z_23"
+}, H = D.bind(or), L = "purpur-comparison-table-cell", tr = ({ value: t }) => {
+  const n = W(t) || ["string", "number"].includes(typeof t), a = H(L, [n ? "" : `${L}--${t ? "check" : "minus"}`]), y = t ? Q : U;
+  return /* @__PURE__ */ o("span", { className: H(a), children: n ? t : /* @__PURE__ */ o(y, { size: "xs", className: H(`${L}__icon`) }) });
+}, ar = {
+  "purpur-comparison-table-lead-cell": "_purpur-comparison-table-lead-cell_rqs9w_1",
+  "purpur-comparison-table-lead-cell__description": "_purpur-comparison-table-lead-cell__description_rqs9w_5",
+  "purpur-comparison-table-lead-cell__summary": "_purpur-comparison-table-lead-cell__summary_rqs9w_40",
+  "purpur-comparison-table-lead-cell__summary-title": "_purpur-comparison-table-lead-cell__summary-title_rqs9w_48",
+  "purpur-comparison-table-lead-cell__summary-icon": "_purpur-comparison-table-lead-cell__summary-icon_rqs9w_51"
+}, O = D.bind(ar), j = "purpur-comparison-table-lead-cell", sr = ({ title: t, description: n }) => {
+  const l = typeof n == "string", a = O(j);
+  return /* @__PURE__ */ u("details", { className: a, "data-is-expandable": l, children: [
+    /* @__PURE__ */ u("summary", { className: O(`${j}__summary`), tabIndex: l ? 0 : -1, children: [
+      /* @__PURE__ */ o(q, { className: O(`${j}__summary-title`), variant: "paragraph-100-bold", children: t }),
+      /* @__PURE__ */ o(F, { className: O(`${j}__summary-icon`), size: "sm" })
+    ] }),
+    n && /* @__PURE__ */ o(q, { variant: "paragraph-100", className: O(`${j}__description`), children: n })
+  ] });
+}, nr = {
+  "purpur-comparison-table-option-card": "_purpur-comparison-table-option-card_18fdt_1",
+  "purpur-comparison-table-option-card--highlighted": "_purpur-comparison-table-option-card--highlighted_18fdt_11",
+  "purpur-comparison-table-option-card__badge": "_purpur-comparison-table-option-card__badge_18fdt_14",
+  "purpur-comparison-table-option-card__main-content": "_purpur-comparison-table-option-card__main-content_18fdt_19",
+  "purpur-comparison-table-option-card__image": "_purpur-comparison-table-option-card__image_18fdt_25",
+  "purpur-comparison-table-option-card__body": "_purpur-comparison-table-option-card__body_18fdt_31",
+  "purpur-comparison-table-option-card__description": "_purpur-comparison-table-option-card__description_18fdt_36",
+  "purpur-comparison-table-option-card__description-text": "_purpur-comparison-table-option-card__description-text_18fdt_41",
+  "purpur-comparison-table-option-card__read-more": "_purpur-comparison-table-option-card__read-more_18fdt_50",
+  "purpur-comparison-table-option-card__read-more--hidden": "_purpur-comparison-table-option-card__read-more--hidden_18fdt_54",
+  "purpur-comparison-table-option-card__read-more-icon": "_purpur-comparison-table-option-card__read-more-icon_18fdt_57",
+  "purpur-comparison-table-option-card__footer": "_purpur-comparison-table-option-card__footer_18fdt_65",
+  "purpur-comparison-table-option-card__price": "_purpur-comparison-table-option-card__price_18fdt_70",
+  "purpur-comparison-table-option-card--show-full-descriptions": "_purpur-comparison-table-option-card--show-full-descriptions_18fdt_77",
+  "purpur-comparison-table-option-card--first-card": "_purpur-comparison-table-option-card--first-card_18fdt_110"
+}, m = D.bind(nr), c = "purpur-comparison-table-option-card", cr = ({
+  id: t,
+  cardIndex: n,
+  description: l,
+  variablePriceText: a,
+  price: y,
+  isHighlighted: f,
+  ariaLabels: g,
+  badge: h,
+  actions: N,
+  isFirstCard: z,
+  image: r,
+  title: i,
+  showFullDescriptions: _,
+  toggleShowFullDescriptions: d
+}) => {
+  const p = A(null), s = A(null), e = A(_), [b, w] = V(!1), k = m(c, {
+    [`${c}--highlighted`]: f,
+    [`${c}--first-card`]: z,
+    [`${c}--show-full-descriptions`]: _
+  });
+  M(() => {
+    e.current = _;
+  }, [_]);
+  const I = C(() => {
+    if (e.current)
+      return;
+    const S = p.current, E = s.current;
+    if (!S || !E) {
+      w(!1);
+      return;
+    }
+    const B = S.clientHeight, K = E.offsetHeight;
+    w(K > B + 1);
+  }, []);
+  M(() => {
+    const S = p.current;
+    if (I(), !S || typeof ResizeObserver > "u")
+      return;
+    const E = new ResizeObserver(I);
+    return E.observe(S), () => {
+      E.disconnect();
+    };
+  }, [I, l]);
+  const T = () => l ? /* @__PURE__ */ u("div", { className: m(`${c}__description`), children: [
+    /* @__PURE__ */ o(q, { ref: p, className: m(`${c}__description-text`), children: /* @__PURE__ */ o("span", { ref: s, children: l }) }),
+    /* @__PURE__ */ u(
+      P,
+      {
+        variant: "text",
+        size: "xs",
+        className: m(`${c}__read-more`, {
+          [`${c}__read-more--hidden`]: !b
+        }),
+        onClick: d,
+        "aria-hidden": !b,
+        tabIndex: b ? void 0 : -1,
+        children: [
+          /* @__PURE__ */ o("span", { className: m(`${c}__read-more-text`), children: _ ? g.readLess : g.readMore }),
+          /* @__PURE__ */ o(F, { className: m(`${c}__read-more-icon`), size: "xs" })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ u("article", { className: k, "data-card-id": t, "data-card-index": n, children: [
+    h && /* @__PURE__ */ o(X, { ...h, className: m(`${c}__badge`) }),
+    /* @__PURE__ */ u("section", { className: m(`${c}__main-content`), children: [
+      /* @__PURE__ */ o("img", { src: r.src, alt: r.alt, className: m(`${c}__image`) }),
+      /* @__PURE__ */ u("div", { className: m(`${c}__body`), children: [
+        /* @__PURE__ */ o(Y, { tag: "h3", variant: "title-200", className: m(`${c}__title`), children: i }),
+        T()
+      ] })
+    ] }),
+    /* @__PURE__ */ u("footer", { className: m(`${c}__footer`), children: [
+      /* @__PURE__ */ u("span", { className: m(`${c}__price`), id: t, children: [
+        /* @__PURE__ */ o(q, { variant: "paragraph-100", children: a }),
+        /* @__PURE__ */ o(q, { variant: "paragraph-100-bold", children: y })
+      ] }),
+      N
+    ] })
+  ] });
+}, ir = "_active_kvsnm_44", lr = {
+  "purpur-comparison-table-scroll-progress": "_purpur-comparison-table-scroll-progress_kvsnm_1",
+  "purpur-comparison-table-scroll-progress__indicators": "_purpur-comparison-table-scroll-progress__indicators_kvsnm_15",
+  "purpur-comparison-table-scroll-progress__indicator": "_purpur-comparison-table-scroll-progress__indicator_kvsnm_15",
+  active: ir,
+  "purpur-comparison-table-scroll-progress__buttons": "_purpur-comparison-table-scroll-progress__buttons_kvsnm_48",
+  "purpur-comparison-table-scroll-progress__button": "_purpur-comparison-table-scroll-progress__button_kvsnm_48",
+  "purpur-comparison-table-scroll-progress__button-icon": "_purpur-comparison-table-scroll-progress__button-icon_kvsnm_57"
+}, $ = D.bind(lr), v = "purpur-comparison-table-scroll-progress", pr = ({ items: t, container: n, ariaLabels: l }) => {
+  const [a, y] = V(/* @__PURE__ */ new Set()), f = C(
+    (r) => {
+      const i = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      n.current?.querySelector(
+        `[data-card-index="${r}"]`
+      )?.scrollIntoView({ behavior: i ? "instant" : "smooth", block: "nearest" });
+    },
+    [n]
+  ), g = C(() => {
+    if (a.size === 0) return;
+    const i = Math.min(...Array.from(a)) - 1;
+    i < 0 || f(i);
+  }, [a, f]), h = C(() => {
+    if (a.size === 0) return;
+    const i = Math.max(...Array.from(a)) + 1;
+    i >= t.length || f(i);
+  }, [a, t.length, f]), N = C(
+    (r) => {
+      (r.key === "ArrowRight" || r.key === "ArrowLeft") && (r.preventDefault(), r.key === "ArrowRight" ? h() : r.key === "ArrowLeft" && g());
+    },
+    [h, g]
+  );
+  M(() => {
+    const r = n.current;
+    if (!r) return;
+    const i = new IntersectionObserver(
+      (_) => {
+        y((d) => {
+          const p = new Set(d);
+          return _.forEach((s) => {
+            const e = Number(s.target.getAttribute("data-card-index"));
+            Number.isNaN(e) || (s.isIntersecting ? p.add(e) : p.delete(e));
+          }), p;
+        });
+      },
+      { root: r, threshold: 0.5 }
+    );
+    return t.forEach((_, d) => {
+      const p = r.querySelector(`[data-card-index="${d}"]`);
+      p && i.observe(p);
+    }), () => i.disconnect();
+  }, [n, t]), M(() => {
+    const r = n.current;
+    if (r)
+      return r.addEventListener("keydown", N), () => r.removeEventListener("keydown", N);
+  }, [n, N]);
+  const z = () => {
+    if (a.size === 0) return;
+    const r = [], i = a.size, _ = Math.min(...Array.from(a)), d = t.slice(0, _).length, p = t.slice(_ + i).length;
+    let s = 0;
+    for (let e = 0; e < t.length; e++) {
+      if (d + 1 !== e && d <= e && e < t.length - p) continue;
+      let b = "active";
+      (e < d || e > t.length - 1 - p) && (b = ""), r.push(
+        /* @__PURE__ */ o("li", { className: $(`${v}__indicator`, b) }, `indicator-${s++}`)
+      );
+    }
+    return r.length < 2 ? null : r;
+  };
+  return /* @__PURE__ */ u("li", { className: $(v), children: [
+    /* @__PURE__ */ o("ul", { className: $(`${v}__indicators`), children: z() }),
+    /* @__PURE__ */ u("div", { className: $(`${v}__buttons`), children: [
+      /* @__PURE__ */ o(
+        P,
+        {
+          "aria-label": l.previous,
+          variant: "secondary",
+          iconOnly: !0,
+          className: $(`${v}__button`),
+          disabled: a.has(0),
+          onClick: g,
+          children: /* @__PURE__ */ o(Z, { className: $(`${v}__button-icon`), size: "xs" })
+        }
+      ),
+      /* @__PURE__ */ o(
+        P,
+        {
+          "aria-label": l.next,
+          variant: "secondary",
+          iconOnly: !0,
+          className: $(`${v}__button`),
+          disabled: a.has(t.length - 1),
+          onClick: h,
+          children: /* @__PURE__ */ o(rr, { className: $(`${v}__button-icon`), size: "xs" })
+        }
+      )
+    ] })
+  ] });
+}, R = D.bind(er), x = "purpur-comparison-table", _r = ({
+  classname: t,
+  features: n,
+  items: l,
+  ariaLabels: a,
+  variant: y = "primary"
+}) => {
+  const f = G(), g = R(t, x, `${x}--${y}`), h = A(null), [N, z] = V(!1), r = C(() => {
+    z((s) => !s);
+  }, []), i = () => /* @__PURE__ */ u("li", { className: R(`${x}__cards`), children: [
+    /* @__PURE__ */ o("div", { className: R(`${x}__separator`) }),
+    l.map((s, e) => /* @__PURE__ */ J(
+      cr,
+      {
+        ...s,
+        showFullDescriptions: N,
+        toggleShowFullDescriptions: r,
+        key: e,
+        isFirstCard: e === 0,
+        ariaLabels: a,
+        cardIndex: e,
+        id: `${e}-${f}`
+      }
+    ))
+  ] }), _ = () => Object.entries(n).map(([s, e], b) => /* @__PURE__ */ u("li", { className: R(`${x}__feature-row`), children: [
+    /* @__PURE__ */ o(sr, { title: s, description: e }),
+    l.map((w, k) => /* @__PURE__ */ o(tr, { value: w.features[s] ?? !1 }, k))
+  ] }, b)), d = A(0), p = (s) => {
+    const e = s.currentTarget, b = e.querySelector("[data-card-id]")?.clientWidth ?? 0, w = Math.round(e.scrollLeft / b), k = w * b + w, I = s.timeStamp - d.current, T = Math.abs(e.scrollLeft - k);
+    d.current && I < 200 || T < 10 || (d.current = s.timeStamp, e.scrollTo({ left: k, behavior: "smooth" }));
+  };
+  return /* @__PURE__ */ o("div", { className: R(x + "__wrapper"), children: /* @__PURE__ */ u(
+    "ul",
+    {
+      id: x + `-${f}`,
+      ref: h,
+      className: g,
+      onScrollEnd: p,
+      style: {
+        // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended
+        "--initial-columns": l.length + 1
+      },
+      children: [
+        /* @__PURE__ */ o(pr, { items: l, container: h, ariaLabels: a }),
+        i(),
+        _()
+      ]
+    }
+  ) });
+};
+_r.displayName = "ComparisonTable";
+export {
+  _r as C
+};
+//# sourceMappingURL=comparison-table-CjTE-fHN.mjs.map

package/dist/comparison-table-CjTE-fHN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-table-CjTE-fHN.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, useCallback, useEffect, useRef, useState } 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  cardIndex: number;\n  isFirstCard: boolean;\n  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n  showFullDescriptions: boolean;\n  toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n  id,\n  cardIndex,\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 descriptionRef = useRef<HTMLParagraphElement>(null);\n  const descriptionContentRef = useRef<HTMLSpanElement>(null);\n  const showFullDescriptionsRef = useRef(showFullDescriptions);\n  const [descriptionOverflows, setDescriptionOverflows] = useState(false);\n\n  const classes = cx(rootClassName, {\n    [`${rootClassName}--highlighted`]: isHighlighted,\n    [`${rootClassName}--first-card`]: isFirstCard,\n    [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n  });\n\n  useEffect(() => {\n    showFullDescriptionsRef.current = showFullDescriptions;\n  }, [showFullDescriptions]);\n\n  const checkDescriptionOverflow = useCallback(() => {\n    if (showFullDescriptionsRef.current) {\n      return;\n    }\n\n    const description = descriptionRef.current;\n    const descriptionContent = descriptionContentRef.current;\n\n    if (!description || !descriptionContent) {\n      setDescriptionOverflows(false);\n      return;\n    }\n\n    const descriptionHeight = description.clientHeight;\n    const contentHeight = descriptionContent.offsetHeight;\n\n    setDescriptionOverflows(contentHeight > descriptionHeight + 1);\n  }, []);\n\n  useEffect(() => {\n    const descriptionElement = descriptionRef.current;\n\n    checkDescriptionOverflow();\n\n    if (!descriptionElement || typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const resizeObserver = new ResizeObserver(checkDescriptionOverflow);\n    resizeObserver.observe(descriptionElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [checkDescriptionOverflow, description]);\n\n  const renderDescription = () => {\n    if (!description) return null;\n\n    return (\n      <div className={cx(`${rootClassName}__description`)}>\n        <Paragraph ref={descriptionRef} className={cx(`${rootClassName}__description-text`)}>\n          <span ref={descriptionContentRef}>{description}</span>\n        </Paragraph>\n        <Button\n          variant=\"text\"\n          size=\"xs\"\n          className={cx(`${rootClassName}__read-more`, {\n            [`${rootClassName}__read-more--hidden`]: !descriptionOverflows,\n          })}\n          onClick={toggleShowFullDescriptions}\n          aria-hidden={!descriptionOverflows}\n          tabIndex={descriptionOverflows ? undefined : -1}\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      </div>\n    );\n  };\n\n  return (\n    <article className={classes} data-card-id={id} data-card-index={cardIndex}>\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  ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, 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 = container.current?.querySelector(\n        `[data-card-index=\"${index}\"]`\n      ) as HTMLElement | null;\n      card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n    },\n    [container]\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            const index = Number(entry.target.getAttribute(\"data-card-index\"));\n\n            if (Number.isNaN(index)) return;\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 = root.querySelector(`[data-card-index=\"${index}\"]`) as HTMLElement | null;\n\n      if (card) observer.observe(card);\n    });\n\n    return () => observer.disconnect();\n  }, [container, items]);\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            cardIndex={index}\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 items={items} container={containerRef} ariaLabels={ariaLabels} />\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","cardIndex","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","descriptionRef","useRef","descriptionContentRef","showFullDescriptionsRef","descriptionOverflows","setDescriptionOverflows","useState","useEffect","checkDescriptionOverflow","useCallback","descriptionContent","descriptionHeight","contentHeight","descriptionElement","resizeObserver","renderDescription","Button","Badge","Heading","ScrollProgress","items","container","inViewSet","setInViewSet","scrollToCard","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","e","root","observer","entries","prev","next","entry","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","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-C74IAVqz.js");exports.ComparisonTable=e.ComparisonTable;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./comparison-table-0UDB2BTU.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-DctKxmX9.mjs";
+import { C as r } from "./comparison-table-CjTE-fHN.mjs";
 export {
   r as ComparisonTable
 };

package/dist/components/avatar/src/avatar-constants.d.ts

@@ -0,0 +1,2 @@
+export declare const AVATAR_SIZE: readonly ["xxs", "xs", "sm", "md", "lg"];
+//# sourceMappingURL=avatar-constants.d.ts.map

package/dist/components/avatar/src/avatar-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-constants.d.ts","sourceRoot":"","sources":["../../../../../../components/avatar/src/avatar-constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,0CAA2C,CAAC"}

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

@@ -0,0 +1,26 @@
+import { default as React, ReactNode } from 'react';
+import { AVATAR_SIZE } from './avatar-constants';
+export type AvatarSize = (typeof AVATAR_SIZE)[number];
+type AvatarBaseProps = {
+    className?: string;
+    /** Text or element rendered inside the avatar, typically initials. */
+    label: ReactNode;
+    size?: AvatarSize;
+};
+type AvatarDecorativeProps = AvatarBaseProps & {
+    /** Hides the avatar from assistive technologies. */
+    decorative: true;
+    "aria-label"?: never;
+};
+type AvatarAccessibleProps = AvatarBaseProps & {
+    /** Accessible label for assistive technologies. Required when avatar is not decorative. */
+    "aria-label": string;
+    decorative?: false;
+};
+export type AvatarProps = AvatarDecorativeProps | AvatarAccessibleProps;
+export declare const Avatar: {
+    (props: AvatarProps): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../../components/avatar/src/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAKtD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,KAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,KAAK,qBAAqB,GAAG,eAAe,GAAG;IAC7C,oDAAoD;IACpD,UAAU,EAAE,IAAI,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAEF,KAAK,qBAAqB,GAAG,eAAe,GAAG;IAC7C,2FAA2F;IAC3F,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAExE,eAAO,MAAM,MAAM;YAAW,WAAW;;CAiBxC,CAAC"}

package/dist/components/button/src/button.visual.fixtures.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { sizes } from '../../../libraries/action/src/action';
+import { ButtonProps } from './button';
+export type ButtonVisualState = "default" | "hover" | "active" | "disabled" | "loading";
+export type ButtonVisualSize = (typeof sizes)[number];
+export type ButtonVisualAppearance = "regular" | "negative" | "ai" | "ai-negative";
+export type ButtonVisualAppearanceGroup = "default-surface" | "negative-surface";
+export type ButtonVisualLayout = LayoutMode;
+export type ButtonVisualLayoutGroup = "text" | "icon-only";
+type LayoutMode = "text" | "icon-only";
+type VisualCell = {
+    id: string;
+    label: string;
+    state: ButtonVisualState;
+    props: ButtonProps;
+    surface: "default" | "negative";
+};
+type VisualSection = {
+    key: string;
+    title: string;
+    surface: "default" | "negative";
+    cells: VisualCell[];
+};
+type VisualGroup = {
+    key: ButtonVisualLayoutGroup;
+    title: string;
+    description: string;
+    sections: VisualSection[];
+};
+export declare const buttonVisualStates: ButtonVisualState[];
+export declare const buttonVisualSizes: ("xs" | "sm" | "md" | "lg")[];
+export declare const buttonVisualAppearanceGroups: ButtonVisualAppearanceGroup[];
+export declare const buttonVisualAppearancesByGroup: Record<ButtonVisualAppearanceGroup, ButtonVisualAppearance[]>;
+export declare const buttonVisualLayouts: LayoutMode[];
+export declare const buttonVisualLayoutGroups: ButtonVisualLayoutGroup[];
+export declare const createVisualGroups: (state: ButtonVisualState, size: ButtonVisualSize, appearanceGroup: ButtonVisualAppearanceGroup) => VisualGroup[];
+export declare const ButtonVisualBoard: ({ state, size, appearanceGroup, }: {
+    state: ButtonVisualState;
+    size: ButtonVisualSize;
+    appearanceGroup: ButtonVisualAppearanceGroup;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=button.visual.fixtures.d.ts.map

package/dist/components/button/src/button.visual.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.visual.fixtures.d.ts","sourceRoot":"","sources":["../../../../../../components/button/src/button.visual.fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAU,KAAK,WAAW,EAAkB,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,GAAG,aAAa,CAAC;AACnF,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC;AAC5C,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,WAAW,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;AAGvC,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;CACjC,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,uBAAuB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B,CAAC;AAgRF,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,EAMjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,+BAAQ,CAAC;AAEvC,eAAO,MAAM,4BAA4B,+BAA6C,CAAC;AACvF,eAAO,MAAM,8BAA8B,EAEtC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,EAAE,CAAC,CAAC;AACnE,eAAO,MAAM,mBAAmB,cAA0C,CAAC;AAC3E,eAAO,MAAM,wBAAwB,2BAAyC,CAAC;AAE/E,eAAO,MAAM,kBAAkB,GAC7B,OAAO,iBAAiB,EACxB,MAAM,gBAAgB,EACtB,iBAAiB,2BAA2B,KAC3C,WAAW,EAeb,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,mCAI/B;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,eAAe,EAAE,2BAA2B,CAAC;CAC9C,sBAoIA,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../../../../components/carousel/src/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,KAAK,gBAAgB,EAAwB,MAAM,gBAAgB,CAAC;AAC7E,OAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY7E,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7E,KAAK,kBAAkB,GACnB,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,wBAAwB,GAAG;QAClC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC;KACjE,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IACzC,oDAAoD;IACpD,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,mBAAmB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAElD,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;CACH,CAAC;AAIF,eAAO,MAAM,QAAQ;sEAMlB,aAAa;;0BAgIqB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAFjE,CAAC"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../../../../components/carousel/src/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAE,KAAK,gBAAgB,EAAwB,MAAM,gBAAgB,CAAC;AAC7E,OAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAc7E,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7E,KAAK,kBAAkB,GACnB,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,wBAAwB,GAAG;QAClC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC;KACjE,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IACzC,oDAAoD;IACpD,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,mBAAmB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAElD,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;CACH,CAAC;AAIF,eAAO,MAAM,QAAQ;sEAMlB,aAAa;;0BAkIqB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAFjE,CAAC"}

package/dist/components/color-dot/src/color-dot.d.ts

@@ -1,11 +1,21 @@
-import { default as React } from 'react';
-import { BaseProps } from '../../../libraries/common-types/src/common-types';
-export declare const COLOR_DOT_SIZE: readonly ["xs", "sm", "md", "lg"];
-export type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];
-export type ColorDotProps = Omit<BaseProps, "children"> & {
+import { default as React, HTMLAttributes } from 'react';
+export declare const STATIC_COLOR_DOT_SIZE: readonly ["xs", "sm", "md", "lg"];
+export declare const BUTTON_COLOR_DOT_SIZE: ("sm" | "md" | "lg")[];
+export type StaticColorDotSize = (typeof STATIC_COLOR_DOT_SIZE)[number];
+export type ButtonColorDotSize = (typeof BUTTON_COLOR_DOT_SIZE)[number];
+export type StaticColorDotProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: "static";
+    isSelected?: never;
+    size: StaticColorDotSize;
+};
+export type ButtonColorDotProps = HTMLAttributes<HTMLButtonElement> & {
+    variant?: "button";
+    isSelected?: boolean;
+    size: ButtonColorDotSize;
+};
+export type ColorDotProps = {
     color: string;
-    size: ColorDotSize;
     withBorder?: boolean;
-};
-export declare const ColorDot: ({ color, size, withBorder, className, style, ...props }: ColorDotProps) => React.JSX.Element;
+} & (StaticColorDotProps | ButtonColorDotProps);
+export declare const ColorDot: ({ size, withBorder, variant, ...props }: ColorDotProps) => React.JSX.Element;
 //# sourceMappingURL=color-dot.d.ts.map

package/dist/components/color-dot/src/color-dot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-dot.d.ts","sourceRoot":"","sources":["../../../../../../components/color-dot/src/color-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQtD,eAAO,MAAM,cAAc,mCAAoC,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,yDAOtB,aAAa,sBAWf,CAAC"}
+{"version":3,"file":"color-dot.d.ts","sourceRoot":"","sources":["../../../../../../components/color-dot/src/color-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQnD,eAAO,MAAM,qBAAqB,mCAAoC,CAAC;AACvE,eAAO,MAAM,qBAAqB,wBAAwD,CAAC;AAE3F,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,QAAQ,GAAI,yCAAoD,aAAa,sBAiBzF,CAAC"}

package/dist/components/comparison-table/src/components/OptionCard/option-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-card.d.ts","sourceRoot":"","sources":["../../../../../../../../components/comparison-table/src/components/OptionCard/option-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAOvD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAOnE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IAEF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,SAAS,CAAC;IAEnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAE/C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,mLAexB,eAAe,GAAG,wBAAwB,sBA4D5C,CAAC"}
+{"version":3,"file":"option-card.d.ts","sourceRoot":"","sources":["../../../../../../../../components/comparison-table/src/components/OptionCard/option-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AACxF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAOvD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAOnE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IAEF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,SAAS,CAAC;IAEnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAE/C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,mLAexB,eAAe,GAAG,wBAAwB,sBAwG5C,CAAC"}

package/dist/components/date-picker/src/date-picker.d.ts

@@ -5,6 +5,14 @@ import { DateRangeFieldProps } from '../../date-range-field/src/date-range-field
 import { Drawer } from '../../drawer/src/drawer';
 type CommonDatePickerProps = {
     calendarProps?: CalendarProps;
+    /**
+     * Optional DOM element to portal the calendar / drawer content into. When
+     * omitted, the overlay renders inside the nearest `ThemeProvider` so it
+     * inherits the active color scheme. Pass `document.body` (or any other
+     * element) to override. Pass `null` to fall back to the default
+     * (`document.body`).
+     */
+    container?: HTMLElement | null;
     drawerContentProps: Omit<ComponentProps<typeof Drawer.Content>, "children" | "backButton" | "backButtonText" | "backButtonOnlyIcon" | "onBackButtonClick" | "zIndex">;
     overlayZIndex?: number;
 };

package/dist/components/date-picker/src/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../../components/date-picker/src/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAY,KAAK,aAAa,EAAkB,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAK7B,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB,EAAE,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,EACnC,UAAU,GACV,YAAY,GACZ,gBAAgB,GAChB,oBAAoB,GACpB,mBAAmB,GACnB,QAAQ,CACX,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAChD,cAAc,GAAG;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEJ,KAAK,oBAAoB,GAAG,qBAAqB,GAC/C,mBAAmB,GAAG;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC;AAE5D,eAAO,MAAM,UAAU,oIAQtB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../../components/date-picker/src/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAY,KAAK,aAAa,EAAkB,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAMxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAK7B,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,EACnC,UAAU,GACV,YAAY,GACZ,gBAAgB,GAChB,oBAAoB,GACpB,mBAAmB,GACnB,QAAQ,CACX,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAChD,cAAc,GAAG;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEJ,KAAK,oBAAoB,GAAG,qBAAqB,GAC/C,mBAAmB,GAAG;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC;AAE5D,eAAO,MAAM,UAAU,oIAQtB,CAAC"}

package/dist/components/drawer/src/drawer-content.d.ts

@@ -17,6 +17,13 @@ export type DrawerContentProps = Omit<BaseProps, "children"> & {
     bodyText?: string;
     children: ReactNode;
     closeButtonAriaLabel: string;
+    /**
+     * Optional DOM element to portal the drawer content into. When omitted,
+     * the drawer renders inside the nearest `ThemeProvider` so it inherits
+     * the active color scheme. Pass `document.body` (or any other element) to
+     * override. Pass `null` to fall back to Radix' default (`document.body`).
+     */
+    container?: HTMLElement | null;
     disableCloseOnClickOutside?: boolean;
     /**
      * If true, the drawer height will fit to its content on small screens.
@@ -36,6 +43,13 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<(Omit<Omit<R
     bodyText?: string;
     children: ReactNode;
     closeButtonAriaLabel: string;
+    /**
+     * Optional DOM element to portal the drawer content into. When omitted,
+     * the drawer renders inside the nearest `ThemeProvider` so it inherits
+     * the active color scheme. Pass `document.body` (or any other element) to
+     * override. Pass `null` to fall back to Radix' default (`document.body`).
+     */
+    container?: HTMLElement | null;
     disableCloseOnClickOutside?: boolean;
     /**
      * If true, the drawer height will fit to its content on small screens.
@@ -54,6 +68,13 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<(Omit<Omit<R
     bodyText?: string;
     children: ReactNode;
     closeButtonAriaLabel: string;
+    /**
+     * Optional DOM element to portal the drawer content into. When omitted,
+     * the drawer renders inside the nearest `ThemeProvider` so it inherits
+     * the active color scheme. Pass `document.body` (or any other element) to
+     * override. Pass `null` to fall back to Radix' default (`document.body`).
+     */
+    container?: HTMLElement | null;
     disableCloseOnClickOutside?: boolean;
     /**
      * If true, the drawer height will fit to its content on small screens.

package/dist/components/drawer/src/drawer-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../../../components/drawer/src/drawer-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAOtD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,GAAG,CAAC,iBAAiB,GAAG,cAAc,CAAC,CAAC;AAIzC,eAAO,MAAM,aAAa;;;eAnBb,MAAM;cACP,SAAS;0BACG,MAAM;iCACC,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;;;;eAdR,MAAM;cACP,SAAS;0BACG,MAAM;iCACC,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;qEAwKpB,CAAC"}
+{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../../../components/drawer/src/drawer-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQtD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,GAAG,CAAC,iBAAiB,GAAG,cAAc,CAAC,CAAC;AAIzC,eAAO,MAAM,aAAa;;;eA1Bb,MAAM;cACP,SAAS;0BACG,MAAM;IAC5B;;;;;OAKG;gBACS,WAAW,GAAG,IAAI;iCACD,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;;;;eArBR,MAAM;cACP,SAAS;0BACG,MAAM;IAC5B;;;;;OAKG;gBACS,WAAW,GAAG,IAAI;iCACD,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;qEA4KpB,CAAC"}

package/dist/components/hero-banner/src/hero-banner.visual.fixtures.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { HeroBannerProps } from './hero-banner';
+type HeroBannerVisualScenario = {
+    key: string;
+    title: string;
+    createProps: () => HeroBannerProps;
+};
+export declare const heroBannerVisualScenarios: HeroBannerVisualScenario[];
+export declare const getHeroBannerVisualTestId: (scenarioKey: string) => string;
+export declare const HeroBannerVisualScenarioRoot: ({ scenarioKey }: {
+    scenarioKey: string;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=hero-banner.visual.fixtures.d.ts.map

package/dist/components/hero-banner/src/hero-banner.visual.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-banner.visual.fixtures.d.ts","sourceRoot":"","sources":["../../../../../../components/hero-banner/src/hero-banner.visual.fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAc,KAAK,eAAe,EAAsB,MAAM,eAAe,CAAC;AAGrF,KAAK,wBAAwB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,eAAe,CAAC;CACpC,CAAC;AAuEF,eAAO,MAAM,yBAAyB,EAAE,wBAAwB,EAkE/D,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,aAAa,MAAM,WACxB,CAAC;AAEtC,eAAO,MAAM,4BAA4B,GAAI,iBAAiB;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,sBAUpF,CAAC"}