@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/EmblaCarousel/ArrowButtons.js

@@ -0,0 +1,83 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
+const l = e(
+  "appearance-none bg-transparent border cursor-pointer p-2 flex items-center justify-center size-9 rounded-full transition-colors duration-300 ease-in-out group"
+), u = (t) => {
+  const { children: a, disabled: r, className: n, iconClassName: i, circleChevron: s, ...c } = t;
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      className: e(
+        l,
+        !r && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
+        r && "border-border-action-disabled",
+        n
+      ),
+      type: "button",
+      ...c,
+      children: [
+        /* @__PURE__ */ o(
+          "svg",
+          {
+            className: e(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !r && s && "text-text-primary-normal",
+              r && "text-icon-primary-disabled",
+              i
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ o(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+              }
+            )
+          }
+        ),
+        a
+      ]
+    }
+  );
+}, p = (t) => {
+  const { children: a, disabled: r, className: n, iconClassName: i, circleChevron: s, ...c } = t;
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      className: e(
+        l,
+        !r && "border-border-primary-normal hover:border-border-action-hover active:border-border-action-active",
+        r && "border-border-action-disabled",
+        n
+      ),
+      type: "button",
+      ...c,
+      children: [
+        /* @__PURE__ */ o(
+          "svg",
+          {
+            className: e(
+              "size-3 transition-colors duration-300 ease-in-out",
+              !r && s && "text-text-primary-normal",
+              r && "text-icon-primary-disabled",
+              i
+            ),
+            viewBox: "0 0 532 532",
+            children: /* @__PURE__ */ o(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+              }
+            )
+          }
+        ),
+        a
+      ]
+    }
+  );
+};
+export {
+  p as NextButton,
+  u as PrevButton
+};

package/dist/components/EmblaCarousel/SelectedSnapDisplay.js

@@ -0,0 +1,12 @@
+import { jsxs as n } from "react/jsx-runtime";
+const l = (e) => {
+  const { selectedSnap: s, snapCount: a } = e;
+  return /* @__PURE__ */ n("div", { className: "embla__selected-snap-display", children: [
+    s + 1,
+    " / ",
+    a
+  ] });
+};
+export {
+  l as SelectedSnapDisplay
+};

package/dist/components/EmblaCarousel/index.js

@@ -0,0 +1,153 @@
+import { jsxs as a, jsx as o, Fragment as G } from "react/jsx-runtime";
+import J, { useRef as x, useEffect as g, useCallback as b } from "react";
+import K from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
+import Q from "../../node_modules/embla-carousel-autoplay/esm/embla-carousel-autoplay.esm.js";
+import { SelectedSnapDisplay as U } from "./SelectedSnapDisplay.js";
+import { useSelectedSnapDisplay as Y } from "./useSelectedSnapDisplay.js";
+import { PrevButton as F, NextButton as A } from "./ArrowButtons.js";
+import { usePrevNextButtons as Z } from "./usePrevNextButtons.js";
+import { useMatchesMobile as ee } from "../../hooks/useMatchesMedia.js";
+import { clsx as k } from "../../node_modules/clsx/dist/clsx.js";
+const te = 0.2, fe = ({
+  options: D,
+  children: H,
+  testid: M,
+  leftRightChevrons: n = !1,
+  autoplay: c = !1,
+  chevronThemeColor: l = !1
+}) => {
+  const j = Q({ delay: 4e3 }), [L, e] = K(
+    D,
+    c ? [j] : []
+  ), v = x(null), [h, T] = J.useState(
+    void 0
+  );
+  g(() => {
+    if (!e || !n) return;
+    const t = () => {
+      const s = e.selectedScrollSnap(), i = e.slideNodes()[s];
+      i && v.current && T(i.offsetHeight);
+    };
+    return t(), e.on("select", t).on("reInit", t), () => {
+      e.off("select", t), e.off("reInit", t);
+    };
+  }, [e, n]), g(() => {
+    !e || !c || e.plugins()?.autoplay?.play();
+  }, [e, c]);
+  const {
+    prevBtnDisabled: N,
+    nextBtnDisabled: y,
+    onPrevButtonClick: R,
+    onNextButtonClick: V
+  } = Z(e), { selectedSnap: q, snapCount: O } = Y(e), w = x(0), S = x([]), _ = ee(), d = b((t) => {
+    S.current = t.slideNodes().map((s) => s.querySelector(".embla__parallax__layer"));
+  }, []), u = b((t) => {
+    w.current = te * t.scrollSnapList().length;
+  }, []), r = b(
+    (t) => {
+      const s = t.internalEngine(), i = t.scrollProgress(), W = t.slidesInView();
+      t.scrollSnapList().forEach((p, X) => {
+        let f = p - i;
+        s.slideRegistry[X].forEach((m) => {
+          if (!W.includes(m)) return;
+          s.options.loop && s.slideLooper.loopPoints.forEach((B) => {
+            const C = B.target();
+            if (m === B.index && C !== 0) {
+              const I = Math.sign(C);
+              I === -1 && (f = p - (1 + i)), I === 1 && (f = p + (1 - i));
+            }
+          });
+          const $ = f * (-1 * w.current) * 100, P = S.current[m];
+          P && (P.style.transform = `translateX(${$}%)`);
+        });
+      });
+    },
+    []
+  );
+  g(() => {
+    !e || !_ || (d(e), u(e), r(e), e.on("reInit", d).on("reInit", u).on("reInit", r).on("scroll", r).on("slideFocus", r));
+  }, [e, _, d, u, r]);
+  const E = () => {
+    R(), e?.plugins()?.autoplay?.reset();
+  }, z = () => {
+    V(), e?.plugins()?.autoplay?.reset();
+  };
+  return /* @__PURE__ */ a(
+    "section",
+    {
+      className: "w-full m-auto grid gap-4 relative",
+      "data-testid": M,
+      ref: n ? v : void 0,
+      style: n && h ? { height: h, transition: "height 0.3s ease" } : void 0,
+      children: [
+        /* @__PURE__ */ o("div", { className: "embla__viewport overflow-hidden", ref: L, children: /* @__PURE__ */ o(
+          "div",
+          {
+            className: k(
+              "embla__container flex touch-pan-y touch-pinch-zoom",
+              !n && "desktop:pb-3 gap-2"
+            ),
+            children: H
+          }
+        ) }),
+        n ? /* @__PURE__ */ a(G, { children: [
+          /* @__PURE__ */ o(
+            F,
+            {
+              className: "absolute top-1/2 -translate-y-1/2 left-0 border-transparent! size-10! desktop:size-12!",
+              iconClassName: k(
+                "size-6! desktop:size-8!",
+                l && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
+                !l && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
+              ),
+              onClick: E,
+              disabled: N
+            }
+          ),
+          /* @__PURE__ */ o(
+            A,
+            {
+              className: "absolute top-1/2 -translate-y-1/2 right-0 border-transparent! size-10! desktop:size-12!",
+              iconClassName: k(
+                "size-6! desktop:size-8!",
+                l && "text-text-link-normal group-hover:text-text-link-hover group-active:text-text-link-active",
+                !l && "text-white group-hover:text-text-link-normal group-active:text-text-link-active"
+              ),
+              onClick: z,
+              disabled: y
+            }
+          )
+        ] }) : /* @__PURE__ */ a("div", { className: "justify-between hidden desktop:flex", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o(
+              F,
+              {
+                circleChevron: !0,
+                onClick: E,
+                disabled: N
+              }
+            ),
+            /* @__PURE__ */ o(
+              A,
+              {
+                circleChevron: !0,
+                onClick: z,
+                disabled: y
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o(
+            U,
+            {
+              selectedSnap: q,
+              snapCount: O
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  fe as EmblaCarousel
+};

package/dist/components/EmblaCarousel/usePrevNextButtons.js

@@ -0,0 +1,21 @@
+import { useState as o, useCallback as n, useEffect as f } from "react";
+const N = (t) => {
+  const [s, c] = o(!0), [u, l] = o(!0), x = n(() => {
+    t && t.scrollPrev();
+  }, [t]), B = n(() => {
+    t && t.scrollNext();
+  }, [t]), e = n((r) => {
+    c(!r.canScrollPrev()), l(!r.canScrollNext());
+  }, []);
+  return f(() => {
+    t && (e(t), t.on("reInit", e).on("select", e));
+  }, [t, e]), {
+    prevBtnDisabled: s,
+    nextBtnDisabled: u,
+    onPrevButtonClick: x,
+    onNextButtonClick: B
+  };
+};
+export {
+  N as usePrevNextButtons
+};

package/dist/components/EmblaCarousel/useSelectedSnapDisplay.js

@@ -0,0 +1,15 @@
+import { useState as s, useCallback as l, useEffect as a } from "react";
+const p = (t) => {
+  const [c, o] = s(0), [S, r] = s(0), e = l((n) => {
+    r(n.scrollSnapList().length), o(n.selectedScrollSnap());
+  }, []);
+  return a(() => {
+    t && (e(t), t.on("select", e), t.on("reInit", e));
+  }, [t, e]), {
+    selectedSnap: c,
+    snapCount: S
+  };
+};
+export {
+  p as useSelectedSnapDisplay
+};

package/dist/components/EmptyCartIcon.js

@@ -0,0 +1,25 @@
+import { jsx as C } from "react/jsx-runtime";
+function l() {
+  return /* @__PURE__ */ C(
+    "svg",
+    {
+      width: "211",
+      height: "196",
+      viewBox: "0 0 211 196",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ C(
+        "path",
+        {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M54.5305 76.3333H137.059L154.793 141.333L22.0305 141.333L54.5305 76.3333ZM3.60295 152.73C7.57878 159.165 14.4688 163 22.0305 163L160.697 163L167.381 187.516C168.67 192.228 172.95 195.5 177.835 195.5H199.502C205.493 195.5 210.335 190.647 210.335 184.667C210.335 178.687 205.493 173.833 199.502 173.833H186.112L155.79 62.6508C154.5 57.9383 150.221 54.6667 145.335 54.6667L47.8354 54.6667C43.7296 54.6667 39.9813 56.985 38.1396 60.6575L2.64963 131.648C-0.741211 138.419 -0.372879 146.295 3.60295 152.73ZM150.75 33C159.72 33 167 25.7308 167 16.75C167 7.76917 159.72 0.5 150.75 0.5C141.78 0.5 134.5 7.76917 134.5 16.75C134.5 25.7308 141.78 33 150.75 33ZM58.6666 16.75C58.6666 25.7308 51.3866 33 42.4166 33C33.4466 33 26.1666 25.7308 26.1666 16.75C26.1666 7.76917 33.4466 0.5 42.4166 0.5C51.3866 0.5 58.6666 7.76917 58.6666 16.75Z",
+          fill: "#6B6D6D"
+        }
+      )
+    }
+  );
+}
+export {
+  l as EmptyCartIcon
+};

package/dist/components/FilterGroup.d.ts

@@ -3,8 +3,9 @@ type FilterGroupProps = {
     id?: string;
     testid?: string;
     label: string;
-    open?: boolean;
+    defaultOpen?: boolean;
     showMore?: boolean;
+    bordered?: boolean;
     type?: "link" | "checkbox" | "summary";
     onShowMore?: () => void;
     onClearAll?: () => void;
@@ -17,13 +18,14 @@ type FilterGroupProps = {
     searchValue?: string;
     onSearchChange?: React.ChangeEventHandler<HTMLInputElement>;
 });
-export declare function FilterGroup({ id, testid, label, type, open, showMore, onShowMore, onClearAll, children, showSearchField, searchValue, onSearchChange, ...props }: ComponentProps<"div"> & FilterGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterGroup({ id, testid, label, type, defaultOpen, showMore, bordered, onShowMore, onClearAll, children, showSearchField, searchValue, onSearchChange, ...props }: ComponentProps<"div"> & FilterGroupProps): import("react/jsx-runtime").JSX.Element;
 type FilterGroupItemProps = {
     id?: string;
     testid?: string;
     count?: number;
+    active?: boolean;
     type?: FilterGroupProps["type"];
 };
-export declare function FilterGroupItem({ id, testid, type, children, onClick, ...props }: ComponentProps<React.ElementType> & FilterGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterGroupItem({ id, testid, type, count, active, children, onClick, ...props }: ComponentProps<React.ElementType> & FilterGroupItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterGroup.d.ts.map

package/dist/components/FilterGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.d.ts","sourceRoot":"","sources":["../../src/components/FilterGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAkB3E,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,GAAG,CACA;IACE,eAAe,EAAE,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,GACD;IACE,eAAe,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC7D,CACJ,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,MAAM,EACN,KAAK,EACL,IAAa,EACb,IAAY,EACZ,QAAgB,EAChB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,eAAuB,EACvB,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,gBAAgB,2CA2H1C;AAED,KAAK,oBAAoB,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,MAAM,EACN,IAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,oBAAoB,2CAkC1D"}
+{"version":3,"file":"FilterGroup.d.ts","sourceRoot":"","sources":["../../src/components/FilterGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAkB3E,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,GAAG,CACA;IACE,eAAe,EAAE,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC5D,GACD;IACE,eAAe,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC7D,CACJ,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,MAAM,EACN,KAAK,EACL,IAAa,EACb,WAAmB,EACnB,QAAgB,EAChB,QAAe,EACf,UAAU,EACV,UAAU,EACV,QAAQ,EACR,eAAuB,EACvB,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,gBAAgB,2CA2H1C;AAED,KAAK,oBAAoB,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,MAAM,EACN,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,oBAAoB,2CAkC1D"}

package/dist/components/FilterGroup.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { useState as b, Children as M, isValidElement as O } from "react";
+import { Label as T } from "./Label.js";
+import { Checkbox as _ } from "./Checkbox.js";
+import { OptionPill as V } from "./OptionPill.js";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { Link as v } from "./Link.js";
+import { Search as Y } from "./Search.js";
+import { baseTransition as x, componentPaddingY as y, layoutGroupGap as q, componentGap as C, layoutPaddingBottom as z, componentPaddingBottom as D } from "../classNames.js";
+import { Icon as H } from "./Icon.js";
+function no({
+  id: e,
+  testid: o,
+  label: n,
+  type: i = "link",
+  defaultOpen: d = !1,
+  showMore: p = !1,
+  bordered: f = !0,
+  onShowMore: m,
+  onClearAll: h,
+  children: u,
+  showSearchField: N = !1,
+  searchValue: $,
+  onSearchChange: P,
+  ...S
+}) {
+  const a = i === "summary", [g, A] = b(d), [w, G] = b(!1), c = g, k = M.toArray(u).filter(O), I = a || w, j = k.slice(
+    0,
+    I ? k.length : 5
+  ), E = p && !a && k.length > 5 && !w && c;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      id: e,
+      "data-testid": o,
+      ...S,
+      className: t(
+        f && "border-b border-border-primary-normal",
+        a ? z : D
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: t(
+              "flex items-center justify-between cursor-pointer",
+              q
+            ),
+            onClick: F,
+            children: [
+              /* @__PURE__ */ r(T, { children: n }),
+              i !== "summary" ? /* @__PURE__ */ r(
+                H,
+                {
+                  name: "keyboard_arrow_down",
+                  className: t(
+                    x.replace(
+                      "transition-colors",
+                      "transition-transform"
+                    ),
+                    c && "rotate-180",
+                    "text-icon-action-primary-normal"
+                  )
+                }
+              ) : /* @__PURE__ */ r(
+                v,
+                {
+                  id: e ? `${e}-clear-all` : void 0,
+                  testid: o ? `${o}-clear-all` : void 0,
+                  className: t("block", y),
+                  onClick: L,
+                  children: "Clear All"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: t(
+              "grid",
+              x.replace(
+                "transition-colors",
+                "transition-[grid-template-rows]"
+              ),
+              c || a ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                className: t(
+                  "overflow-hidden",
+                  C,
+                  (c || a || g) && "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap"
+                ),
+                children: [
+                  !a && N && /* @__PURE__ */ r(
+                    Y,
+                    {
+                      id: e ? `${e}-search` : void 0,
+                      testid: o ? `${o}-search` : void 0,
+                      style: { marginBottom: "2px" },
+                      onChange: P,
+                      value: $
+                    }
+                  ),
+                  /* @__PURE__ */ r("div", { className: t(a && `flex flex-col ${C}`), children: j }),
+                  E && /* @__PURE__ */ r(
+                    v,
+                    {
+                      id: e ? `${e}-show-more` : void 0,
+                      testid: o ? `${o}-show-more` : void 0,
+                      className: t("block", "!items-start", y),
+                      onClick: B,
+                      children: "Show More"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  function B(l) {
+    l.stopPropagation(), G(!0), m?.();
+  }
+  function F(l) {
+    i !== "summary" && (l.stopPropagation(), A(!g));
+  }
+  function L(l) {
+    l.stopPropagation(), h?.();
+  }
+}
+function to({
+  id: e,
+  testid: o,
+  type: n = "link",
+  count: i,
+  active: d,
+  children: p,
+  onClick: f,
+  ...m
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: e,
+      "data-testid": o,
+      onClick: h,
+      ...m,
+      className: t(
+        "flex items-center justify-between *:first:flex-1 cursor-pointer",
+        n !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
+      ),
+      children: /* @__PURE__ */ r(
+        J,
+        {
+          ...m,
+          id: e ? `${e}-child` : void 0,
+          "data-testid": o ? `${o}-child` : void 0,
+          type: n,
+          active: d,
+          children: /* @__PURE__ */ s("span", { className: "flex items-center justify-between w-full", children: [
+            p,
+            n !== "summary" && i && /* @__PURE__ */ s("span", { children: [
+              "(",
+              i,
+              ")"
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+  function h(u) {
+    u.stopPropagation(), f?.();
+  }
+}
+const J = ({
+  type: e = "link",
+  children: o,
+  ...n
+}) => e === "checkbox" ? /* @__PURE__ */ r(
+  _,
+  {
+    paragraphClassName: "w-full",
+    label: o,
+    ...n
+  }
+) : e === "summary" ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(V, { removable: !0, ...n, children: o }) }) : /* @__PURE__ */ r(v, { variant: "secondary", ...n, children: o });
+export {
+  no as FilterGroup,
+  to as FilterGroupItem
+};

package/dist/components/FullViewportBox.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+function a({
+  children: e,
+  id: n,
+  testid: t
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      id: n,
+      "data-testid": t,
+      className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal",
+      children: e
+    }
+  );
+}
+export {
+  a as FullViewportLayout
+};

package/dist/components/Grid.js

@@ -0,0 +1,54 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as u } from "../node_modules/clsx/dist/clsx.js";
+const n = {
+  none: "gap-0",
+  "layout-group": "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+  layout: "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+  container: "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+  component: "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+}, e = {
+  none: "p-0",
+  container: "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+  layout: "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+  "layout-group": "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+  component: "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+}, k = (a, o) => {
+  const t = [`grid-cols-${a}`];
+  return o && Object.entries(o).forEach(([c, p]) => {
+    p && p > 0 && t.push(`${c}:grid-cols-${p}`);
+  }), t.join(" ");
+};
+function f({
+  children: a,
+  sizing: o = "container",
+  padding: t,
+  columns: c,
+  responsive: p,
+  id: d,
+  testid: g,
+  style: i,
+  className: s,
+  ...m
+}) {
+  const l = k(c, p);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: d,
+      "data-testid": g,
+      style: i,
+      ...m,
+      className: u(
+        "w-full grid",
+        n[o] ?? n.container,
+        t && (e[o] ?? e.container),
+        l,
+        s
+      ),
+      children: a
+    }
+  );
+}
+export {
+  f as Grid
+};

package/dist/components/Heading.js

@@ -0,0 +1,50 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as g } from "../node_modules/clsx/dist/clsx.js";
+import { typography as l } from "../classNames.js";
+function i({
+  className: e,
+  children: t,
+  as: h,
+  color: o,
+  align: r,
+  variant: a = "heading1",
+  id: c,
+  testid: f,
+  ...d
+}) {
+  return /* @__PURE__ */ n(
+    h ?? (a === "heading1" ? "h1" : a === "heading2" ? "h2" : "h3"),
+    {
+      id: c,
+      "data-testid": f,
+      className: g(
+        l[a],
+        e,
+        r === "left" && "text-left",
+        r === "center" && "text-center",
+        r === "right" && "text-right"
+      ),
+      style: {
+        ...d.style,
+        color: o ? `var(--color-${o})` : void 0
+      },
+      ...d,
+      children: t
+    }
+  );
+}
+function p({ variant: e, ...t }) {
+  return /* @__PURE__ */ n(i, { ...t, variant: "heading1" });
+}
+function y({ variant: e, ...t }) {
+  return /* @__PURE__ */ n(i, { ...t, variant: "heading2" });
+}
+function E({ variant: e, ...t }) {
+  return /* @__PURE__ */ n(i, { ...t, variant: "heading3" });
+}
+export {
+  i as Heading,
+  p as Heading1,
+  y as Heading2,
+  E as Heading3
+};