@smwb/ui-solid 0.11.2 → 0.12.1

package/dist/headless/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/headless/primitives/createCssTransition.js

@@ -1,40 +1,43 @@
-import { createSignal as v, createEffect as x, onCleanup as D } from "solid-js";
-const F = (...t) => t.filter(Boolean).join(" ");
-function C(t) {
-  const [l, m] = v(t.in()), [A, i] = v("");
-  let o = !0, r, n, s;
-  const f = () => {
-    r !== void 0 && clearTimeout(r), n !== void 0 && cancelAnimationFrame(n), s !== void 0 && cancelAnimationFrame(s), r = void 0, n = void 0, s = void 0;
-  }, u = (c, e, a, d, p) => {
-    i(c ?? ""), n = requestAnimationFrame(() => {
-      s = requestAnimationFrame(() => i(F(c, e)));
-    }), r = setTimeout(() => {
-      p ? p() : i(a ?? "");
-    }, d);
+import { createSignal as A, createEffect as F, onCleanup as T } from "solid-js";
+const C = (...t) => t.filter(Boolean).join(" ");
+function j(t) {
+  const [f, u] = A(t.in()), [x, r] = A("");
+  let l = !0, o, n, a, s = 0;
+  const m = () => {
+    s++, o !== void 0 && clearTimeout(o), n !== void 0 && cancelAnimationFrame(n), a !== void 0 && cancelAnimationFrame(a), o = void 0, n = void 0, a = void 0;
+  }, v = (c, e, i, D, d) => {
+    const p = s;
+    r(c ?? ""), n = requestAnimationFrame(() => {
+      n = void 0, p === s && (a = requestAnimationFrame(() => {
+        a = void 0, p === s && r(C(c, e));
+      }));
+    }), o = setTimeout(() => {
+      m(), d ? d() : r(i ?? "");
+    }, D);
   };
-  return x(() => {
+  return F(() => {
     const c = t.in();
-    f();
+    m();
     const e = t.classNames;
     if (c)
-      if (m(!0), o && !t.appear)
-        i(e.enterDone ?? "");
+      if (u(!0), l && !t.appear)
+        r(e.enterDone ?? "");
       else {
-        const a = o && !!t.appear;
-        u(
-          a ? e.appear : e.enter,
-          a ? e.appearActive : e.enterActive,
-          a ? e.appearDone ?? e.enterDone : e.enterDone,
-          a ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
+        const i = l && !!t.appear;
+        v(
+          i ? e.appear : e.enter,
+          i ? e.appearActive : e.enterActive,
+          i ? e.appearDone ?? e.enterDone : e.enterDone,
+          i ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
         );
       }
-    else l() && u(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
-      m(!1), i("");
+    else f() && v(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
+      u(!1), r("");
     });
-    o = !1;
-  }), D(f), { mounted: l, classes: A };
+    l = !1;
+  }), T(m), { mounted: f, classes: x };
 }
 export {
-  C as createCssTransition
+  j as createCssTransition
 };
 //# sourceMappingURL=createCssTransition.js.map

package/dist/headless/primitives/createCssTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCssTransition.js","sources":["../../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","clearTimers","run","start","active","done","duration","onEnd","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC;AAEJ,QAAMC,IAAc,MAAY;AAC9B,IAAIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEME,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,IAAAX,EAAWO,KAAS,EAAE,GACtBJ,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAMJ,EAAWR,EAAKe,GAAOC,CAAM,CAAC,CAAC;AAAA,IACpE,CAAC,GACDN,IAAQ,WAAW,MAAM;AACvB,MAAIS,IAAOA,EAAA,IACNX,EAAWS,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAE,EAAa,MAAM;AACjB,UAAMC,IAAOlB,EAAQ,GAAA;AACrB,IAAAU,EAAA;AACA,UAAMS,IAAMnB,EAAQ;AAEpB,QAAIkB;AAEF,UADAhB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWc,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYd,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAW;AAAA,UACES,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAapB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTU,EAAIQ,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUnB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDe,EAAUX,CAAW,GAEd,EAAE,SAAAT,GAAS,SAAAG,EAAA;AACpB;"}
+{"version":3,"file":"createCssTransition.js","sources":["../../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","generation","clearTimers","run","start","active","done","duration","onEnd","own","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC,GAGAC,IAAa;AAEjB,QAAMC,IAAc,MAAY;AAC9B,IAAAD,KACIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEMG,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,UAAMC,IAAMR;AACZ,IAAAL,EAAWQ,KAAS,EAAE,GACtBL,IAAO,sBAAsB,MAAM;AAEjC,MADAA,IAAO,QACHU,MAAQR,MACZD,IAAO,sBAAsB,MAAM;AACjC,QAAAA,IAAO,QACHS,MAAQR,KAAYL,EAAWR,EAAKgB,GAAOC,CAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC,GACDP,IAAQ,WAAW,MAAM;AACvB,MAAAI,EAAA,GACIM,IAAOA,EAAA,IACNZ,EAAWU,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAG,EAAa,MAAM;AACjB,UAAMC,IAAOpB,EAAQ,GAAA;AACrB,IAAAW,EAAA;AACA,UAAMU,IAAMrB,EAAQ;AAEpB,QAAIoB;AAEF,UADAlB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWgB,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYhB,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAY;AAAA,UACEU,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAatB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTW,EAAIS,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUrB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDiB,EAAUZ,CAAW,GAEd,EAAE,SAAAV,GAAS,SAAAG,EAAA;AACpB;"}

package/dist/headless/source/components/dataDisplay/accordion/accordion.jsx

@@ -1,15 +1,37 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import {
+  Show,
+  children,
+  createComputed,
+  createSignal,
+  mergeProps,
+  splitProps
+} from "solid-js";
 import cn from "clsx";
 import { AnimateHeight } from "../../base/animateHeight/animateHeight";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+function ExpandIcon(props) {
+  const icon = children(() => props.icon);
+  return <Show
+    when={icon()}
+    fallback={<Icon
+      class={cn("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": props.open })}
+      name="expand_more"
+      size={24}
+    />}
+  >
+      {icon()}
+    </Show>;
+}
 function Accordion(props) {
-  const merged = mergeProps({ isOpenByDefault: false }, props);
+  const merged = mergeProps({ isOpenByDefault: false, variant: "filled" }, props);
   const [local] = splitProps(merged, [
     "class",
     "title",
+    "subtitle",
+    "variant",
     "isOpenByDefault",
     "open",
     "disabled",
@@ -17,7 +39,10 @@ function Accordion(props) {
     "id",
     "children",
     "startAdornment",
+    "endAdornment",
     "noIcon",
+    "lazy",
+    "unmountOnExit",
     "onToggleClick",
     "onChange",
     "ref"
@@ -30,6 +55,18 @@ function Accordion(props) {
   const baseId = createId(local.id);
   const contentId = `${baseId}-content`;
   const headerId = `${baseId}-header`;
+  const title = children(() => local.title);
+  const subtitle = children(() => local.subtitle);
+  const deferred = Boolean(local.lazy || local.unmountOnExit);
+  const content = deferred ? void 0 : children(() => local.children);
+  const hasContent = () => content ? Boolean(content()) : "children" in local;
+  const [present, setPresent] = createSignal(isOpen());
+  createComputed(() => {
+    if (isOpen()) setPresent(true);
+  });
+  const onCollapsed = (height) => {
+    if (height === 0 && local.unmountOnExit && !isOpen()) setPresent(false);
+  };
   const toggle = (event) => {
     if (local.disabled) return;
     setIsOpen(!isOpen());
@@ -37,7 +74,7 @@ function Accordion(props) {
   };
   return <div
     ref={mergeRefs(local.ref)}
-    class={cn("smwb-accordion", { "smwb-disabled": local.disabled }, local.class)}
+    class={cn("smwb-accordion", `smwb-accordion_${local.variant}`, { "smwb-disabled": local.disabled }, local.class)}
     data-testid="accordion"
   >
       <button
@@ -47,28 +84,33 @@ function Accordion(props) {
     type="button"
     disabled={local.disabled}
     aria-expanded={isOpen()}
-    aria-controls={local.children ? contentId : void 0}
+    aria-controls={hasContent() ? contentId : void 0}
   >
         {local.startAdornment?.(isOpen())}
-        <span class="smwb-accordion__title">{local.title}</span>
-        <Show when={!local.noIcon}>
-          <Show
-    when={local.icon}
-    fallback={<Icon
-      class={cn("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": isOpen() })}
-      name="expand_more"
-      size={24}
-    />}
-  >
-            {local.icon}
+        <span class="smwb-accordion__heading">
+          <span class="smwb-accordion__title">{title()}</span>
+          <Show when={subtitle()}>
+            <span class="smwb-accordion__subtitle">{subtitle()}</span>
           </Show>
+        </span>
+        <Show when={local.endAdornment}>
+          <span class="smwb-accordion__end">{local.endAdornment?.(isOpen())}</span>
+        </Show>
+        <Show when={!local.noIcon}>
+          <ExpandIcon icon={local.icon} open={isOpen()} />
         </Show>
       </button>
 
-      <Show when={local.children}>
+      <Show when={hasContent()}>
         <div id={contentId} role="region" aria-labelledby={headerId}>
-          <AnimateHeight height={isOpen() ? "auto" : 0} animateOpacity duration={300} class="smwb-accordion__content">
-            {local.children}
+          <AnimateHeight
+    height={isOpen() ? "auto" : 0}
+    animateOpacity
+    duration={300}
+    class="smwb-accordion__content"
+    onHeightAnimationEnd={onCollapsed}
+  >
+            {content ? content() : <Show when={present()}>{local.children}</Show>}
           </AnimateHeight>
         </div>
       </Show>

package/dist/headless/source/components/dataDisplay/accordion/accordion.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { AnimateHeight } from \"../../base/animateHeight/animateHeight\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AccordionProps {\n  class?: string;\n  title?: string;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: JSX.Element;\n  id?: string;\n  startAdornment?: (isOpen: boolean) => JSX.Element;\n  noIcon?: boolean;\n  onToggleClick?: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Accordion(props: ParentProps<AccordionProps>): JSX.Element {\n  const merged = mergeProps({ isOpenByDefault: false }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"isOpenByDefault\",\n    \"open\",\n    \"disabled\",\n    \"icon\",\n    \"id\",\n    \"children\",\n    \"startAdornment\",\n    \"noIcon\",\n    \"onToggleClick\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [isOpen, setIsOpen] = createControllableState<boolean>({\n    value: () => local.open,\n    defaultValue: local.isOpenByDefault,\n    onChange: (next) => local.onChange?.(next),\n  });\n\n  const baseId = createId(local.id);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  const toggle: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    setIsOpen(!isOpen());\n    local.onToggleClick?.(event);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-accordion\", { \"smwb-disabled\": local.disabled }, local.class)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        class=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={local.disabled}\n        aria-expanded={isOpen()}\n        aria-controls={local.children ? contentId : undefined}\n      >\n        {local.startAdornment?.(isOpen())}\n        <span class=\"smwb-accordion__title\">{local.title}</span>\n        <Show when={!local.noIcon}>\n          <Show\n            when={local.icon}\n            fallback={\n              <Icon\n                class={cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen() })}\n                name=\"expand_more\"\n                size={24}\n              />\n            }\n          >\n            {local.icon}\n          </Show>\n        </Show>\n      </button>\n\n      <Show when={local.children}>\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight height={isOpen() ? \"auto\" : 0} animateOpacity duration={300} class=\"smwb-accordion__content\">\n            {local.children}\n          </AnimateHeight>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAqB7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,iBAAiB,MAAM,GAAG,KAAK;AAC3D,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,QAAQ,SAAS,IAAI,wBAAiC;AAAA,IAC3D,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,WAAW,IAAI;AAAA,EAC3C,CAAC;AAED,QAAM,SAAS,SAAS,MAAM,EAAE;AAChC,QAAM,YAAY,GAAG,MAAM;AAC3B,QAAM,WAAW,GAAG,MAAM;AAE1B,QAAM,SAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,SAAU;AACpB,cAAU,CAAC,OAAO,CAAC;AACnB,UAAM,gBAAgB,KAAK;AAAA,EAC7B;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,IAC5E,YAAY;AAAA,GACb;AAAA,MACC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,KAAK;AAAA,IACL,UAAU,MAAM;AAAA,IAChB,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,WAAW,YAAY;AAAA,GAC7C;AAAA,SACE,MAAM,iBAAiB,OAAO,CAAC,EAAE;AAAA,QAClC,CAAC,KAAK,MAAM,yBAAyB,MAAM,MAAM,EAAhD,KAAuD;AAAA,QACxD,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ;AAAA,UACzB,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,OAAO,GAAG,8BAA8B,EAAE,qCAAqC,OAAO,EAAE,CAAC;AAAA,MACzF,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,GAEH;AAAA,aACE,MAAM,KAAK;AAAA,UACd,EAXC,KAWM;AAAA,QACT,EAbC,KAaM;AAAA,MACT,EAzBC,OAyBQ;AAAA;AAAA,MAET,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,QAC1B,CAAC,IAAI,IAAI,WAAW,KAAK,SAAS,iBAAiB,UAAU;AAAA,UAC3D,CAAC,cAAc,QAAQ,OAAO,IAAI,SAAS,GAAG,eAAe,UAAU,KAAK,MAAM,0BAA0B;AAAA,aACzG,MAAM,SAAS;AAAA,UAClB,EAFC,cAEe;AAAA,QAClB,EAJC,IAIK;AAAA,MACR,EANC,KAMM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,oBAAQ;","names":[],"file":"accordion.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children,\n  createComputed,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { AnimateHeight, type Height } from \"../../base/animateHeight/animateHeight\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/**\n * `filled` — the header is an app-bar strip on a raised panel (the original look).\n * `outlined` — a bordered card with a flat header: for feeds of records.\n * `plain` — no frame, a divider under each panel: for FAQ-style lists.\n * The flat variants stretch to the container and wrap long titles.\n */\nexport type AccordionVariant = \"filled\" | \"outlined\" | \"plain\";\n\nexport interface AccordionProps {\n  class?: string;\n  /** Header text or markup (a date, an author, a badge…). */\n  title?: JSX.Element;\n  /** Secondary line under the title. */\n  subtitle?: JSX.Element;\n  variant?: AccordionVariant;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: JSX.Element;\n  id?: string;\n  startAdornment?: (isOpen: boolean) => JSX.Element;\n  /** Rendered after the title, before the expand icon. */\n  endAdornment?: (isOpen: boolean) => JSX.Element;\n  noIcon?: boolean;\n  /** Create the content on first open instead of up front. */\n  lazy?: boolean;\n  /** Remove the content once the panel has collapsed (created again on open). */\n  unmountOnExit?: boolean;\n  onToggleClick?: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The custom expand icon, read once where it renders, or the rotating chevron. */\nfunction ExpandIcon(props: { icon: JSX.Element; open: boolean }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show\n      when={icon()}\n      fallback={\n        <Icon\n          class={cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": props.open })}\n          name=\"expand_more\"\n          size={24}\n        />\n      }\n    >\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Accordion(props: ParentProps<AccordionProps>): JSX.Element {\n  const merged = mergeProps({ isOpenByDefault: false, variant: \"filled\" as AccordionVariant }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"subtitle\",\n    \"variant\",\n    \"isOpenByDefault\",\n    \"open\",\n    \"disabled\",\n    \"icon\",\n    \"id\",\n    \"children\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"noIcon\",\n    \"lazy\",\n    \"unmountOnExit\",\n    \"onToggleClick\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [isOpen, setIsOpen] = createControllableState<boolean>({\n    value: () => local.open,\n    defaultValue: local.isOpenByDefault,\n    onChange: (next) => local.onChange?.(next),\n  });\n\n  const baseId = createId(local.id);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  // Read each JSX prop once. A prop written as markup is created anew on every\n  // read, and during hydration a copy the server did not render where this one\n  // lands (or rendered only to test it, as a <Show> condition does) has no DOM\n  // node to adopt: hydrate() throws \"Unable to find DOM nodes for hydration key\".\n  // The icon is read by ExpandIcon, which renders only without noIcon.\n  const title = children(() => local.title);\n  const subtitle = children(() => local.subtitle);\n\n  // Deferred content (lazy / unmountOnExit) is created only while it is shown, so\n  // it can't be read up front to see whether there is any: the region is kept\n  // whenever children are passed. Otherwise the content is resolved right away.\n  const deferred = Boolean(local.lazy || local.unmountOnExit);\n  const content = deferred ? undefined : children(() => local.children);\n  const hasContent = (): boolean => (content ? Boolean(content()) : \"children\" in local);\n\n  const [present, setPresent] = createSignal(isOpen());\n  // Mount deferred content in the same update that opens the panel, so the\n  // height animation measures it.\n  createComputed(() => {\n    if (isOpen()) setPresent(true);\n  });\n  const onCollapsed = (height: Height): void => {\n    if (height === 0 && local.unmountOnExit && !isOpen()) setPresent(false);\n  };\n\n  const toggle: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    setIsOpen(!isOpen());\n    local.onToggleClick?.(event);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-accordion\", `smwb-accordion_${local.variant}`, { \"smwb-disabled\": local.disabled }, local.class)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        class=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={local.disabled}\n        aria-expanded={isOpen()}\n        aria-controls={hasContent() ? contentId : undefined}\n      >\n        {local.startAdornment?.(isOpen())}\n        <span class=\"smwb-accordion__heading\">\n          <span class=\"smwb-accordion__title\">{title()}</span>\n          <Show when={subtitle()}>\n            <span class=\"smwb-accordion__subtitle\">{subtitle()}</span>\n          </Show>\n        </span>\n        <Show when={local.endAdornment}>\n          <span class=\"smwb-accordion__end\">{local.endAdornment?.(isOpen())}</span>\n        </Show>\n        <Show when={!local.noIcon}>\n          <ExpandIcon icon={local.icon} open={isOpen()} />\n        </Show>\n      </button>\n\n      <Show when={hasContent()}>\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen() ? \"auto\" : 0}\n            animateOpacity\n            duration={300}\n            class=\"smwb-accordion__content\"\n            onHeightAnimationEnd={onCollapsed}\n          >\n            {content ? content() : <Show when={present()}>{local.children}</Show>}\n          </AnimateHeight>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"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","names":[],"file":"accordion.jsx"}

package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx

@@ -65,25 +65,50 @@ function Avatar(props) {
     </div>;
 }
 function AvatarGroup(props) {
-  const merged = mergeProps({ max: 5 }, props);
-  const [local, rest] = splitProps(merged, ["class", "max", "total", "onSurplusClick", "children", "ref"]);
+  const merged = mergeProps(
+    { max: 5, surplusAriaLabel: (count) => `${count} more` },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "max",
+    "total",
+    "onSurplusClick",
+    "surplusAriaLabel",
+    "size",
+    "children",
+    "ref"
+  ]);
   const resolved = resolveChildren(() => local.children);
   const items = () => resolved.toArray();
   const totalCount = () => local.total ?? items().length;
   const clampedMax = () => Math.max(local.max, 1);
   const visible = () => items().slice(0, clampedMax());
+  const hidden = () => items().slice(clampedMax());
   const surplus = () => totalCount() - visible().length;
   return <div {...rest} ref={mergeRefs(local.ref)} data-testid="avatar-group" class={cn("smwb-avatar-group", local.class)}>
+      {visible()}
       <Show when={surplus() > 0}>
         <Avatar
     class="smwb-avatar-group__surplus"
+    size={local.size ?? "medium"}
+    alt={local.surplusAriaLabel(surplus())}
     onClick={local.onSurplusClick}
     style={local.onSurplusClick ? { cursor: "pointer" } : void 0}
   >
           {`+${surplus()}`}
         </Avatar>
       </Show>
-      {visible()}
+      {
+    /* Avatars past max are created with the rest (the children resolve at
+       once), so they are rendered, hidden: a server that left them out would
+       leave the browser without nodes to hydrate them from. */
+  }
+      <Show when={hidden().length > 0}>
+        <span class="smwb-avatar-group__hidden" hidden>
+          {hidden()}
+        </span>
+      </Show>
     </div>;
 }
 var avatar_default = Avatar;

package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties => {\n    const size = local.size;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"avatar\"\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps({ max: 5 }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"max\", \"total\", \"onSurplusClick\", \"children\", \"ref\"]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {visible() as JSX.Element}\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"mappings":"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","names":[],"file":"avatar.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties => {\n    const size = local.size;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"avatar\"\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"mappings":"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","names":[],"file":"avatar.jsx"}

package/dist/headless/source/components/dataDisplay/badge/badge.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Badge(props) {
@@ -25,9 +25,13 @@ function Badge(props) {
     "children",
     "ref"
   ]);
-  const isZero = () => local.badgeContent === 0 || local.badgeContent === "0";
-  const hidden = () => local.badgeContent === void 0 || local.badgeContent === null || isZero() && !local.showZero;
-  const display = () => typeof local.badgeContent === "number" && local.max !== void 0 && local.badgeContent > local.max ? `${local.max}+` : local.badgeContent;
+  const content = children(() => local.badgeContent);
+  const isZero = () => content() === 0 || content() === "0";
+  const hidden = () => content() === void 0 || content() === null || isZero() && !local.showZero;
+  const display = () => {
+    const value = content();
+    return typeof value === "number" && local.max !== void 0 && value > local.max ? `${local.max}+` : value;
+  };
   return <span class="smwb-badge__wrapper" data-testid="badge">
       {local.children}
       <span

package/dist/headless/source/components/dataDisplay/badge/badge.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const isZero = (): boolean => local.badgeContent === 0 || local.badgeContent === \"0\";\n  const hidden = (): boolean =>\n    local.badgeContent === undefined || local.badgeContent === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element | number | string | undefined =>\n    typeof local.badgeContent === \"number\" && local.max !== undefined && local.badgeContent > local.max\n      ? `${local.max}+`\n      : local.badgeContent;\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAiB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,SAAS,MAAe,MAAM,iBAAiB,KAAK,MAAM,iBAAiB;AACjF,QAAM,SAAS,MACb,MAAM,iBAAiB,UAAa,MAAM,iBAAiB,QAAS,OAAO,KAAK,CAAC,MAAM;AAEzF,QAAM,UAAU,MACd,OAAO,MAAM,iBAAiB,YAAY,MAAM,QAAQ,UAAa,MAAM,eAAe,MAAM,MAC5F,GAAG,MAAM,GAAG,MACZ,MAAM;AAEZ,SACE,CAAC,KAAK,MAAM,sBAAsB,YAAY,QAAQ;AAAA,OACnD,MAAM,SAAS;AAAA,MAChB,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,KAAK;AAAA,MACzB,cAAc,MAAM,OAAO;AAAA,MAC3B,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ;AAAA,MAC7C,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ,IAAI,MAAM,UAAU;AAAA,MACjE,MAAM;AAAA,MACN,EAAE,yBAAyB,OAAO,EAAE;AAAA,IACtC;AAAA,IACA,YAAY,MAAM;AAAA,GACnB;AAAA,QACC,CAAC,KAAK,MAAM,CAAC,OAAO,IAAI,QAAQ,EAAE,EAAjC,KAAwC;AAAA,MAC3C,EAfC,KAeM;AAAA,IACT,EAlBC;AAoBL;AAEA,IAAO,gBAAQ;","names":[],"file":"badge.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the content once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.badgeContent);\n  const isZero = (): boolean => content() === 0 || content() === \"0\";\n  const hidden = (): boolean => content() === undefined || content() === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element => {\n    const value = content();\n    return typeof value === \"number\" && local.max !== undefined && value > local.max ? `${local.max}+` : value;\n  };\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAiB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,YAAY;AACjD,QAAM,SAAS,MAAe,QAAQ,MAAM,KAAK,QAAQ,MAAM;AAC/D,QAAM,SAAS,MAAe,QAAQ,MAAM,UAAa,QAAQ,MAAM,QAAS,OAAO,KAAK,CAAC,MAAM;AAEnG,QAAM,UAAU,MAAmB;AACjC,UAAM,QAAQ,QAAQ;AACtB,WAAO,OAAO,UAAU,YAAY,MAAM,QAAQ,UAAa,QAAQ,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM;AAAA,EACvG;AAEA,SACE,CAAC,KAAK,MAAM,sBAAsB,YAAY,QAAQ;AAAA,OACnD,MAAM,SAAS;AAAA,MAChB,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,KAAK;AAAA,MACzB,cAAc,MAAM,OAAO;AAAA,MAC3B,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ;AAAA,MAC7C,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ,IAAI,MAAM,UAAU;AAAA,MACjE,MAAM;AAAA,MACN,EAAE,yBAAyB,OAAO,EAAE;AAAA,IACtC;AAAA,IACA,YAAY,MAAM;AAAA,GACnB;AAAA,QACC,CAAC,KAAK,MAAM,CAAC,OAAO,IAAI,QAAQ,EAAE,EAAjC,KAAwC;AAAA,MAC3C,EAfC,KAeM;AAAA,IACT,EAlBC;AAoBL;AAEA,IAAO,gBAAQ;","names":[],"file":"badge.jsx"}

package/dist/headless/source/components/dataDisplay/card/card.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
@@ -15,6 +15,7 @@ function Card(props) {
     "onKeyDown",
     "ref"
   ]);
+  const footer = children(() => local.footer);
   const interactive = () => !!local.onClick && !local.disabled;
   const handleKeyDown = (event) => {
     callHandler(local.onKeyDown, event);
@@ -41,8 +42,8 @@ function Card(props) {
         <div class="smwb-card__title">{local.title}</div>
       </Show>
       {local.children}
-      <Show when={local.footer}>
-        <div class="smwb-card__footer">{local.footer}</div>
+      <Show when={footer()}>
+        <div class="smwb-card__footer">{footer()}</div>
       </Show>
     </div>;
 }

package/dist/headless/source/components/dataDisplay/card/card.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={local.footer}>\n        <div class=\"smwb-card__footer\">{local.footer}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAWrB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IACD,MAAM,YAAY,IAAI,WAAW;AAAA,IACjC,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,YAAY,IAAI,MAAM,UAAU;AAAA,IACzC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,qBAAqB,MAAM,OAAO,EAA5C,IAAkD;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EArBC;AAuBL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAWrB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IACD,MAAM,YAAY,IAAI,WAAW;AAAA,IACjC,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,YAAY,IAAI,MAAM,UAAU;AAAA,IACzC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,QACpB,CAAC,IAAI,MAAM,qBAAqB,OAAO,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EArBC;AAuBL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}