@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/components/dataDisplay/chat/chatShell.js

@@ -1,74 +1,77 @@
-import { createComponent as o, Portal as m, isServer as i, spread as u, mergeProps as f, insert as l, template as a } from "solid-js/web";
-import { mergeProps as p, splitProps as b, createEffect as v, onCleanup as y, Show as n } from "solid-js";
-import g from "clsx";
-var w = /* @__PURE__ */ a("<div class=smwb-chat-shell__header>"), _ = /* @__PURE__ */ a("<div class=smwb-chat-shell__footer>"), $ = /* @__PURE__ */ a("<div><div class=smwb-chat-shell__body>");
-function x(c) {
-  const h = p({
+import { createComponent as o, Portal as f, isServer as p, spread as b, mergeProps as v, insert as l, template as s } from "solid-js/web";
+import { mergeProps as y, splitProps as g, createEffect as w, onCleanup as _, Show as a, children as m } from "solid-js";
+import $ from "clsx";
+var C = /* @__PURE__ */ s("<div class=smwb-chat-shell__header>"), P = /* @__PURE__ */ s("<div class=smwb-chat-shell__footer>"), z = /* @__PURE__ */ s("<div><div class=smwb-chat-shell__body>");
+function A(i) {
+  const u = y({
     anchor: "bottom-right",
     themeMode: "inherit",
     embedded: !1,
     overlayContext: !1,
     fileDropzoneActive: !1
-  }, c), [e] = b(h, ["class", "layout", "anchor", "themeMode", "embedded", "overlayContext", "header", "footer", "children", "fileDropzoneRootProps", "fileDropzoneActive"]);
-  v(() => {
+  }, i), [e] = g(u, ["class", "layout", "anchor", "themeMode", "embedded", "overlayContext", "header", "footer", "children", "fileDropzoneRootProps", "fileDropzoneActive"]);
+  w(() => {
     if (e.layout !== "fullscreen") return;
-    const t = document.body.style.overflow;
-    document.body.style.overflow = "hidden", y(() => {
-      document.body.style.overflow = t;
+    const n = document.body.style.overflow;
+    document.body.style.overflow = "hidden", _(() => {
+      document.body.style.overflow = n;
     });
   });
-  const s = () => (() => {
-    var t = $(), d = t.firstChild;
-    return u(t, f(() => e.fileDropzoneRootProps ?? {}, {
-      get class() {
-        return g("smwb-chat-shell", `smwb-chat-shell_${e.layout}`, !e.embedded && `smwb-chat-shell_${e.anchor}`, {
-          "smwb-dark": e.themeMode === "dark",
-          "smwb-chat-shell_embedded": e.embedded,
-          "smwb-chat-shell_overlay-context": e.overlayContext,
-          "smwb-chat-dropzone_active": e.fileDropzoneActive
-        }, e.class);
-      },
-      "data-testid": "chat-shell",
-      get "data-layout"() {
-        return e.layout;
-      }
-    }), !1, !0), l(t, o(n, {
-      get when() {
-        return e.header;
-      },
-      get children() {
-        var r = w();
-        return l(r, () => e.header), r;
-      }
-    }), d), l(d, () => e.children), l(t, o(n, {
-      get when() {
-        return e.footer;
-      },
-      get children() {
-        var r = _();
-        return l(r, () => e.footer), r;
-      }
-    }), null), t;
-  })();
-  return o(n, {
+  const d = () => {
+    const n = m(() => e.header), c = m(() => e.footer);
+    return (() => {
+      var t = z(), h = t.firstChild;
+      return b(t, v(() => e.fileDropzoneRootProps ?? {}, {
+        get class() {
+          return $("smwb-chat-shell", `smwb-chat-shell_${e.layout}`, !e.embedded && `smwb-chat-shell_${e.anchor}`, {
+            "smwb-dark": e.themeMode === "dark",
+            "smwb-chat-shell_embedded": e.embedded,
+            "smwb-chat-shell_overlay-context": e.overlayContext,
+            "smwb-chat-dropzone_active": e.fileDropzoneActive
+          }, e.class);
+        },
+        "data-testid": "chat-shell",
+        get "data-layout"() {
+          return e.layout;
+        }
+      }), !1, !0), l(t, o(a, {
+        get when() {
+          return n();
+        },
+        get children() {
+          var r = C();
+          return l(r, n), r;
+        }
+      }), h), l(h, () => e.children), l(t, o(a, {
+        get when() {
+          return c();
+        },
+        get children() {
+          var r = P();
+          return l(r, c), r;
+        }
+      }), null), t;
+    })();
+  };
+  return o(a, {
     get when() {
       return e.layout !== "closed";
     },
     get children() {
-      return o(n, {
+      return o(a, {
         get when() {
           return e.layout === "fullscreen";
         },
         get fallback() {
-          return s();
+          return d();
         },
         get children() {
-          return o(m, {
+          return o(f, {
             get mount() {
-              return i ? void 0 : document.body;
+              return p ? void 0 : document.body;
             },
             get children() {
-              return s();
+              return d();
             }
           });
         }
@@ -77,6 +80,6 @@ function x(c) {
   });
 }
 export {
-  x as ChatShell
+  A as ChatShell
 };
 //# sourceMappingURL=chatShell.js.map

package/dist/components/dataDisplay/chat/chatShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatShell.js","sources":["../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  const panel = (): JSX.Element => (\n    <div\n      {...(local.fileDropzoneRootProps ?? {})}\n      class={cn(\n        \"smwb-chat-shell\",\n        `smwb-chat-shell_${local.layout}`,\n        !local.embedded && `smwb-chat-shell_${local.anchor}`,\n        {\n          \"smwb-dark\": local.themeMode === \"dark\",\n          \"smwb-chat-shell_embedded\": local.embedded,\n          \"smwb-chat-shell_overlay-context\": local.overlayContext,\n          \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n        },\n        local.class\n      )}\n      data-testid=\"chat-shell\"\n      data-layout={local.layout}\n    >\n      <Show when={local.header}>\n        <div class=\"smwb-chat-shell__header\">{local.header}</div>\n      </Show>\n      <div class=\"smwb-chat-shell__body\">{local.children}</div>\n      <Show when={local.footer}>\n        <div class=\"smwb-chat-shell__footer\">{local.footer}</div>\n      </Show>\n    </div>\n  );\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"names":["ChatShell","props","merged","mergeProps","anchor","themeMode","embedded","overlayContext","fileDropzoneActive","local","splitProps","createEffect","layout","prev","document","body","style","overflow","onCleanup","panel","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","fileDropzoneRootProps","cn","class","_$insert","_$createComponent","Show","when","header","children","_el$2","_tmpl$","footer","_el$4","_tmpl$2","fallback","Portal","mount","isServer","undefined"],"mappings":";;;;AAkBO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EACb;AAAA,IAAEC,QAAQ;AAAA,IAAyBC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAOC,gBAAgB;AAAA,IAAOC,oBAAoB;AAAA,EAAA,GAC9HP,CACF,GACM,CAACQ,CAAK,IAAIC,EAAWR,GAAQ,CACjC,SACA,UACA,UACA,aACA,YACA,kBACA,UACA,UACA,YACA,yBACA,oBAAoB,CACrB;AAGDS,EAAAA,EAAa,MAAM;AACjB,QAAIF,EAAMG,WAAW,aAAc;AACnC,UAAMC,IAAOC,SAASC,KAAKC,MAAMC;AACjCH,aAASC,KAAKC,MAAMC,WAAW,UAC/BC,EAAU,MAAM;AACdJ,eAASC,KAAKC,MAAMC,WAAWJ;AAAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAMM,IAAQA,OAAe,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,WAAAA,EAAAJ,GAAAK,EAAA,MAEpBhB,EAAMiB,yBAAyB,CAAA,GAAE;AAAA,MAAA,IAAA,QAAA;AAAA,eAC/BC,EACL,mBACA,mBAAmBlB,EAAMG,MAAM,IAC/B,CAACH,EAAMH,YAAY,mBAAmBG,EAAML,MAAM,IAClD;AAAA,UACE,aAAaK,EAAMJ,cAAc;AAAA,UACjC,4BAA4BI,EAAMH;AAAAA,UAClC,mCAAmCG,EAAMF;AAAAA,UACzC,6BAA6BE,EAAMD;AAAAA,QAAAA,GAErCC,EAAMmB,KACR;AAAA,MAAC;AAAA,MAAA,eACW;AAAA,MAAY,IAAA,gBAAA;AAAA,eACXnB,EAAMG;AAAAA,MAAM;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAiB,EAAAT,GAAAU,EAExBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAMwB;AAAAA,MAAM;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACgB1B,EAAMwB,MAAM,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAb,CAAA,GAAAO,EAAAP,GAAA,MAEhBb,EAAMyB,QAAQ,GAAAL,EAAAT,GAAAU,EACjDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAM4B;AAAAA,MAAM;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAAI,IAAAC,EAAAA;AAAAV,eAAAA,EAAAS,GAAA,MACgB7B,EAAM4B,MAAM,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAlB;AAAAA,EAAA,GAAA;AAKxD,SAAAU,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEvB,EAAMG,WAAW;AAAA,IAAQ;AAAA,IAAA,IAAAsB,WAAA;AAAA,aAAAJ,EAClCC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEvB,EAAMG,WAAW;AAAA,QAAY;AAAA,QAAA,IAAE4B,WAAQ;AAAA,iBAAErB,EAAAA;AAAAA,QAAO;AAAA,QAAA,IAAAe,WAAA;AAAA,iBAAAJ,EACzDW,GAAM;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAGC,IAAWC,SAAY9B,SAASC;AAAAA,YAAa;AAAA,YAAA,IAAAmB,WAAA;AAAA,qBAAGf,EAAAA;AAAAA,YAAO;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI/E;"}
+{"version":3,"file":"chatShell.js","sources":["../../../../src/components/dataDisplay/chat/chatShell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport type { ChatAnchor, ChatLayoutMode, ChatThemeMode } from \"./types\";\n\nexport interface ChatShellProps extends ParentProps {\n  class?: string | undefined;\n  layout: ChatLayoutMode;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  header?: JSX.Element;\n  footer?: JSX.Element;\n  fileDropzoneRootProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined;\n  fileDropzoneActive?: boolean | undefined;\n}\n\nexport function ChatShell(props: ChatShellProps): JSX.Element {\n  const merged = mergeProps(\n    { anchor: \"bottom-right\" as const, themeMode: \"inherit\" as const, embedded: false, overlayContext: false, fileDropzoneActive: false },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"layout\",\n    \"anchor\",\n    \"themeMode\",\n    \"embedded\",\n    \"overlayContext\",\n    \"header\",\n    \"footer\",\n    \"children\",\n    \"fileDropzoneRootProps\",\n    \"fileDropzoneActive\",\n  ]);\n\n  // Lock body scroll while a fullscreen chat is mounted.\n  createEffect(() => {\n    if (local.layout !== \"fullscreen\") return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = prev;\n    });\n  });\n\n  const panel = (): JSX.Element => {\n    // Read the header and the footer once, where the panel is drawn: markup\n    // passed as a prop is created anew on every read, and during hydration a\n    // copy the server never rendered has no DOM node.\n    const header = children(() => local.header);\n    const footer = children(() => local.footer);\n    return (\n      <div\n        {...(local.fileDropzoneRootProps ?? {})}\n        class={cn(\n          \"smwb-chat-shell\",\n          `smwb-chat-shell_${local.layout}`,\n          !local.embedded && `smwb-chat-shell_${local.anchor}`,\n          {\n            \"smwb-dark\": local.themeMode === \"dark\",\n            \"smwb-chat-shell_embedded\": local.embedded,\n            \"smwb-chat-shell_overlay-context\": local.overlayContext,\n            \"smwb-chat-dropzone_active\": local.fileDropzoneActive,\n          },\n          local.class\n        )}\n        data-testid=\"chat-shell\"\n        data-layout={local.layout}\n      >\n        <Show when={header()}>\n          <div class=\"smwb-chat-shell__header\">{header()}</div>\n        </Show>\n        <div class=\"smwb-chat-shell__body\">{local.children}</div>\n        <Show when={footer()}>\n          <div class=\"smwb-chat-shell__footer\">{footer()}</div>\n        </Show>\n      </div>\n    );\n  };\n\n  return (\n    <Show when={local.layout !== \"closed\"}>\n      <Show when={local.layout === \"fullscreen\"} fallback={panel()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>{panel()}</Portal>\n      </Show>\n    </Show>\n  );\n}\n\nexport default ChatShell;\n"],"names":["ChatShell","props","merged","mergeProps","anchor","themeMode","embedded","overlayContext","fileDropzoneActive","local","splitProps","createEffect","layout","prev","document","body","style","overflow","onCleanup","panel","header","children","footer","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","fileDropzoneRootProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$4","_tmpl$2","fallback","Portal","mount","isServer","undefined"],"mappings":";;;;AAkBO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EACb;AAAA,IAAEC,QAAQ;AAAA,IAAyBC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAOC,gBAAgB;AAAA,IAAOC,oBAAoB;AAAA,EAAA,GAC9HP,CACF,GACM,CAACQ,CAAK,IAAIC,EAAWR,GAAQ,CACjC,SACA,UACA,UACA,aACA,YACA,kBACA,UACA,UACA,YACA,yBACA,oBAAoB,CACrB;AAGDS,EAAAA,EAAa,MAAM;AACjB,QAAIF,EAAMG,WAAW,aAAc;AACnC,UAAMC,IAAOC,SAASC,KAAKC,MAAMC;AACjCH,aAASC,KAAKC,MAAMC,WAAW,UAC/BC,EAAU,MAAM;AACdJ,eAASC,KAAKC,MAAMC,WAAWJ;AAAAA,IACjC,CAAC;AAAA,EACH,CAAC;AAED,QAAMM,IAAQA,MAAmB;AAI/B,UAAMC,IAASC,EAAS,MAAMZ,EAAMW,MAAM,GACpCE,IAASD,EAAS,MAAMZ,EAAMa,MAAM;AAC1C,YAAA,MAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAC,aAAAA,EAAAJ,GAAAK,EAAA,MAESnB,EAAMoB,yBAAyB,CAAA,GAAE;AAAA,QAAA,IAAA,QAAA;AAAA,iBAC/BC,EACL,mBACA,mBAAmBrB,EAAMG,MAAM,IAC/B,CAACH,EAAMH,YAAY,mBAAmBG,EAAML,MAAM,IAClD;AAAA,YACE,aAAaK,EAAMJ,cAAc;AAAA,YACjC,4BAA4BI,EAAMH;AAAAA,YAClC,mCAAmCG,EAAMF;AAAAA,YACzC,6BAA6BE,EAAMD;AAAAA,UAAAA,GAErCC,EAAMsB,KACR;AAAA,QAAC;AAAA,QAAA,eACW;AAAA,QAAY,IAAA,gBAAA;AAAA,iBACXtB,EAAMG;AAAAA,QAAM;AAAA,MAAA,CAAA,GAAA,IAAA,EAAA,GAAAoB,EAAAT,GAAAU,EAExBC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEf,EAAAA;AAAAA,QAAQ;AAAA,QAAA,IAAAC,WAAA;AAAA,cAAAe,IAAAC,EAAAA;AAAAL,iBAAAA,EAAAI,GACoBhB,CAAM,GAAAgB;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAX,CAAA,GAAAO,EAAAP,GAAA,MAEVhB,EAAMY,QAAQ,GAAAW,EAAAT,GAAAU,EACjDC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEb,EAAAA;AAAAA,QAAQ;AAAA,QAAA,IAAAD,WAAA;AAAA,cAAAiB,IAAAC,EAAAA;AAAAP,iBAAAA,EAAAM,GACoBhB,CAAM,GAAAgB;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAA,IAAA,GAAAf;AAAAA,IAAA,GAAA;AAAA,EAIpD;AAEA,SAAAU,EACGC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAE1B,EAAMG,WAAW;AAAA,IAAQ;AAAA,IAAA,IAAAS,WAAA;AAAA,aAAAY,EAClCC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE1B,EAAMG,WAAW;AAAA,QAAY;AAAA,QAAA,IAAE4B,WAAQ;AAAA,iBAAErB,EAAAA;AAAAA,QAAO;AAAA,QAAA,IAAAE,WAAA;AAAA,iBAAAY,EACzDQ,GAAM;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAGC,IAAWC,SAAY9B,SAASC;AAAAA,YAAa;AAAA,YAAA,IAAAM,WAAA;AAAA,qBAAGF,EAAAA;AAAAA,YAAO;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI/E;"}

package/dist/components/dataDisplay/chip/chip.js

@@ -1,125 +1,134 @@
-import { createComponent as o, use as b, spread as g, mergeProps as w, insert as l, memo as $, template as i, addEventListener as D, effect as P, setAttribute as C, delegateEvents as y } from "solid-js/web";
-import '../../../assets/styles/less/components/chip/chip.entry.css';/* empty css                                                   */
-import { mergeProps as L, splitProps as z, Show as s } from "solid-js";
-import A from "clsx";
-import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
-import { callHandler as R } from "../../../primitives/callHandler.js";
-import { Icon as I } from "../../base/icon/icon.js";
-import { Ripple as E } from "../../base/ripple/ripple.js";
-var M = /* @__PURE__ */ i("<span class=smwb-chip__icon>"), x = /* @__PURE__ */ i("<span class=smwb-chip__label>"), H = /* @__PURE__ */ i("<button type=button class=smwb-chip__delete-icon>"), K = /* @__PURE__ */ i("<a>"), S = /* @__PURE__ */ i("<span>");
-function Q(v) {
-  const _ = L({
+import { createComponent as n, use as w, spread as v, mergeProps as _, insert as l, memo as P, template as i, addEventListener as C, effect as y, setAttribute as L, delegateEvents as z } from "solid-js/web";
+import '../../../assets/styles/less/components/chip/chip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import { mergeProps as A, splitProps as R, children as $, Show as c } from "solid-js";
+import I from "clsx";
+import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
+import { callHandler as E } from "../../../primitives/callHandler.js";
+import { Ripple as M } from "../../base/ripple/ripple.js";
+import { Icon as x } from "../../base/icon/icon.js";
+var H = /* @__PURE__ */ i("<span class=smwb-chip__icon>"), K = /* @__PURE__ */ i("<span class=smwb-chip__label>"), S = /* @__PURE__ */ i("<button type=button class=smwb-chip__delete-icon>"), j = /* @__PURE__ */ i("<a>"), q = /* @__PURE__ */ i("<span>");
+function B(d) {
+  const a = $(() => d.icon);
+  return n(c, {
+    get when() {
+      return a();
+    },
+    get fallback() {
+      return n(x, {
+        name: "cancel",
+        size: 18,
+        fill: 1
+      });
+    },
+    get children() {
+      return a();
+    }
+  });
+}
+function W(d) {
+  const a = A({
     target: "_blank",
     variant: "filled",
     size: "medium",
     color: "default",
     disabled: !1,
     deleteAriaLabel: "Remove"
-  }, v), [e, c] = z(_, ["label", "class", "deleteIcon", "icon", "onDelete", "onDeleteMouseDown", "asLink", "href", "target", "selected", "variant", "size", "color", "disabled", "onClick", "deleteAriaLabel", "ref"]);
-  let d;
-  const m = (t) => {
-    e.disabled || d?.onRipple(t);
-  }, k = (t) => {
-    R(e.onDeleteMouseDown, t), t.stopPropagation();
-  }, u = () => A("smwb-chip", `smwb-${e.variant}`, `smwb-chip_size-${e.size}`, e.color !== "default" && `smwb-chip_color-${e.color}`, e.class, {
-    "smwb-disabled": e.disabled,
-    "smwb-selected": e.selected
-  }), a = () => !!e.onClick && !e.disabled, p = () => [o(s, {
+  }, d), [t, u] = R(a, ["label", "class", "deleteIcon", "icon", "onDelete", "onDeleteMouseDown", "asLink", "href", "target", "selected", "variant", "size", "color", "disabled", "onClick", "deleteAriaLabel", "ref"]), m = $(() => t.icon);
+  let p;
+  const f = (e) => {
+    t.disabled || p?.onRipple(e);
+  }, D = (e) => {
+    E(t.onDeleteMouseDown, e), e.stopPropagation();
+  }, b = () => I("smwb-chip", `smwb-${t.variant}`, `smwb-chip_size-${t.size}`, t.color !== "default" && `smwb-chip_color-${t.color}`, t.class, {
+    "smwb-disabled": t.disabled,
+    "smwb-selected": t.selected
+  }), s = () => !!t.onClick && !t.disabled, g = () => [n(c, {
     get when() {
-      return e.icon;
+      return m();
     },
     get children() {
-      var t = M();
-      return l(t, () => e.icon), t;
+      var e = H();
+      return l(e, m), e;
     }
   }), (() => {
-    var t = x();
-    return l(t, () => e.label), t;
-  })(), o(s, {
+    var e = K();
+    return l(e, () => t.label), e;
+  })(), n(c, {
     get when() {
-      return e.onDelete;
+      return t.onDelete;
     },
     get children() {
-      var t = H();
-      return t.$$mousedown = k, D(t, "click", e.onDelete, !0), l(t, o(s, {
-        get when() {
-          return e.deleteIcon;
-        },
-        get fallback() {
-          return o(I, {
-            name: "cancel",
-            size: 18,
-            fill: 1
-          });
-        },
-        get children() {
-          return e.deleteIcon;
+      var e = S();
+      return e.$$mousedown = D, C(e, "click", t.onDelete, !0), l(e, n(B, {
+        get icon() {
+          return t.deleteIcon;
         }
-      })), P((r) => {
-        var n = e.deleteAriaLabel, f = e.disabled;
-        return n !== r.e && C(t, "aria-label", r.e = n), f !== r.t && (t.disabled = r.t = f), r;
+      })), y((r) => {
+        var o = t.deleteAriaLabel, h = t.disabled;
+        return o !== r.e && L(e, "aria-label", r.e = o), h !== r.t && (e.disabled = r.t = h), r;
       }, {
         e: void 0,
         t: void 0
-      }), t;
+      }), e;
     }
-  }), o(E, {
-    actionRef: (t) => d = t
+  }), n(M, {
+    actionRef: (e) => p = e
   })];
-  return o(s, {
+  return n(c, {
     get when() {
-      return $(() => !!e.asLink)() && e.href;
+      return P(() => !!t.asLink)() && t.href;
     },
     get fallback() {
       return (() => {
-        var t = S(), r = h(e.ref);
-        return typeof r == "function" && b(r, t), g(t, w(c, {
+        var e = q(), r = k(t.ref);
+        return typeof r == "function" && w(r, e), v(e, _(u, {
           "data-testid": "chip",
           get class() {
-            return u();
+            return b();
           },
           get role() {
-            return a() ? "button" : void 0;
+            return s() ? "button" : void 0;
           },
           get tabindex() {
-            return a() ? 0 : void 0;
+            return s() ? 0 : void 0;
           },
           get "aria-disabled"() {
-            return e.disabled || void 0;
+            return t.disabled || void 0;
           },
           get onClick() {
-            return a() ? () => e.onClick?.() : void 0;
+            return s() ? () => t.onClick?.() : void 0;
           },
           get onKeyDown() {
-            return a() ? (n) => {
-              (n.key === "Enter" || n.key === " ") && (n.preventDefault(), e.onClick?.());
+            return s() ? (o) => {
+              (o.key === "Enter" || o.key === " ") && (o.preventDefault(), t.onClick?.());
             } : void 0;
           },
-          onPointerDown: m
-        }), !1, !0), l(t, p), t;
+          onPointerDown: f
+        }), !1, !0), l(e, g), e;
       })();
     },
     get children() {
-      var t = K(), r = h(e.ref);
-      return typeof r == "function" && b(r, t), g(t, w(c, {
+      var e = j(), r = k(t.ref);
+      return typeof r == "function" && w(r, e), v(e, _(u, {
         "data-testid": "chip-link",
         get class() {
-          return u();
+          return b();
         },
         get href() {
-          return e.href;
+          return t.href;
         },
-        onPointerDown: m,
+        onPointerDown: f,
         get target() {
-          return e.target;
+          return t.target;
         },
         rel: "noreferrer"
-      }), !1, !0), l(t, p), t;
+      }), !1, !0), l(e, g), e;
     }
   });
 }
-y(["click", "mousedown"]);
+z(["click", "mousedown"]);
 export {
-  Q as Chip
+  W as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/components/dataDisplay/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={local.icon}>\n        <span class=\"smwb-chip__icon\">{local.icon}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <Show when={local.deleteIcon} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n            {local.deleteIcon}\n          </Show>\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"names":["Chip","props","merged","mergeProps","target","variant","size","color","disabled","deleteAriaLabel","local","rest","splitProps","rippleActions","onPointerDown","event","onRipple","onDeleteMouseDown","callHandler","stopPropagation","classes","cn","class","selected","clickable","onClick","inner","_$createComponent","Show","when","icon","children","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","label","onDelete","_el$3","_tmpl$3","$$mousedown","_$addEventListener","deleteIcon","fallback","Icon","name","fill","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","Ripple","actionRef","actions","_$memo","asLink","href","_el$5","_tmpl$5","_ref$2","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","tabindex","onKeyDown","key","preventDefault","_el$4","_tmpl$4","_ref$","_$delegateEvents"],"mappings":";;;;;;;;;AA+BO,SAASA,EAAKC,GAA+B;AAClD,QAAMC,IAASC,EACb;AAAA,IACEC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,MAAM;AAAA,IACNC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,iBAAiB;AAAA,EAAA,GAEnBR,CACF,GACM,CAACS,GAAOC,CAAI,IAAIC,EAAWV,GAAQ,CACvC,SACA,SACA,cACA,QACA,YACA,qBACA,UACA,QACA,UACA,YACA,WACA,QACA,SACA,YACA,WACA,mBACA,KAAK,CACN;AAED,MAAIW;AAEJ,QAAMC,IAAgBA,CAACC,MAA8B;AACnD,IAAKL,EAAMF,YACTK,GAAeG,SAASD,CAAK;AAAA,EAEjC,GAEME,IAAsEF,CAAAA,MAAU;AACpFG,IAAAA,EAAYR,EAAMO,mBAAmBF,CAAK,GAC1CA,EAAMI,gBAAAA;AAAAA,EACR,GAEMC,IAAUA,MACdC,EACE,aACA,QAAQX,EAAML,OAAO,IACrB,kBAAkBK,EAAMJ,IAAI,IAC5BI,EAAMH,UAAU,aAAa,mBAAmBG,EAAMH,KAAK,IAC3DG,EAAMY,OACN;AAAA,IAAE,iBAAiBZ,EAAMF;AAAAA,IAAU,iBAAiBE,EAAMa;AAAAA,EAAAA,CAC5D,GAEIC,IAAYA,MAAe,CAAC,CAACd,EAAMe,WAAW,CAACf,EAAMF,UAErDkB,IAAQA,MAAe,CAAAC,EAExBC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEnB,EAAMoB;AAAAA,IAAI;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAA,MACWtB,EAAMoB,IAAI,GAAAE;AAAAA,IAAA;AAAA,EAAA,CAAA,IAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA;AAAAF,WAAAA,EAAAC,GAAA,MAEXzB,EAAM2B,KAAK,GAAAF;AAAAA,EAAA,GAAA,GAAAR,EAC1CC,GAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEnB,EAAM4B;AAAAA,IAAQ;AAAA,IAAA,IAAAP,WAAA;AAAA,UAAAQ,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,cAOTxB,GAAiByB,EAAAH,GAAA,SADrB7B,EAAM4B,UAAQ,EAAA,GAAAJ,EAAAK,GAAAZ,EAGtBC,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEnB,EAAMiC;AAAAA,QAAU;AAAA,QAAA,IAAEC,WAAQ;AAAA,iBAAAjB,EAAGkB,GAAI;AAAA,YAACC,MAAI;AAAA,YAAUxC,MAAM;AAAA,YAAIyC,MAAM;AAAA,UAAA,CAAC;AAAA,QAAA;AAAA,QAAA,IAAAhB,WAAA;AAAA,iBAC1ErB,EAAMiC;AAAAA,QAAU;AAAA,MAAA,CAAA,CAAA,GAAAK,EAAAC,CAAAA,MAAA;AAAA,YAAAC,IANPxC,EAAMD,iBAAe0C,IACvBzC,EAAMF;AAAQ0C,eAAAA,MAAAD,EAAAG,KAAAC,EAAAd,GAAA,cAAAU,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,MAAAf,EAAA/B,WAAAyC,EAAAK,IAAAH,IAAAF;AAAAA,MAAA,GAAA;AAAA,QAAAG,GAAAG;AAAAA,QAAAD,GAAAC;AAAAA,MAAAA,CAAA,GAAAhB;AAAAA,IAAA;AAAA,EAAA,CAAA,GAAAZ,EAS3B6B,GAAM;AAAA,IAACC,WAAYC,OAAa7C,IAAgB6C;AAAAA,EAAAA,CAAQ,CAAA;AAI7D,SAAA/B,EACGC,GAAI;AAAA,IAAA,IACHC,OAAI;AAAA,aAAE8B,UAAAjD,EAAMkD,MAAM,EAAA,KAAIlD,EAAMmD;AAAAA,IAAI;AAAA,IAAA,IAChCjB,WAAQ;AAAA,cAAA,MAAA;AAAA,YAAAkB,IAAAC,EAAAA,GAAAC,IAGCC,EAAUvD,EAAMwD,GAAG;AAAC,sBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrB1D,GAAI;AAAA,UAAA,eAEI;AAAA,UAAM,IAAA,QAAA;AAAA,mBACXS,EAAAA;AAAAA,UAAS;AAAA,UAAA,IAChBkD,OAAI;AAAA,mBAAE9C,EAAAA,IAAc,WAAW+B;AAAAA,UAAS;AAAA,UAAA,IACxCgB,WAAQ;AAAA,mBAAE/C,EAAAA,IAAc,IAAI+B;AAAAA,UAAS;AAAA,UAAA,IAAA,kBAAA;AAAA,mBACtB7C,EAAMF,YAAY+C;AAAAA,UAAS;AAAA,UAAA,IAC1C9B,UAAO;AAAA,mBAAED,EAAAA,IAAc,MAAMd,EAAMe,cAAc8B;AAAAA,UAAS;AAAA,UAAA,IAC1DiB,YAAS;AAAA,mBACPhD,EAAAA,IACKT,CAAAA,MAAU;AACT,eAAIA,EAAM0D,QAAQ,WAAW1D,EAAM0D,QAAQ,SACzC1D,EAAM2D,eAAAA,GACNhE,EAAMe,UAAAA;AAAAA,YAEV,IACA8B;AAAAA,UAAS;AAAA,UAAA,eAEAzC;AAAAA,QAAAA,CAAa,GAAA,IAAA,EAAA,GAAAoB,EAAA4B,GAE3BpC,CAAK,GAAAoC;AAAAA,MAAA,GAAA;AAAA,IAAA;AAAA,IAAA,IAAA/B,WAAA;AAAA,UAAA4C,IAAAC,EAAAA,GAAAC,IAMHZ,EAAUvD,EAAMwD,GAAG;AAAC,oBAAAW,KAAA,cAAAV,EAAAU,GAAAF,CAAA,GAAAP,EAAAO,GAAAN,EADrB1D,GAAI;AAAA,QAAA,eAEI;AAAA,QAAW,IAAA,QAAA;AAAA,iBAChBS,EAAAA;AAAAA,QAAS;AAAA,QAAA,IAChByC,OAAI;AAAA,iBAAEnD,EAAMmD;AAAAA,QAAI;AAAA,QAAA,eACD/C;AAAAA,QAAa,IAC5BV,SAAM;AAAA,iBAAEM,EAAMN;AAAAA,QAAM;AAAA,QAAA,KAChB;AAAA,MAAA,CAAY,GAAA,IAAA,EAAA,GAAA8B,EAAAyC,GAEfjD,CAAK,GAAAiD;AAAAA,IAAA;AAAA,EAAA,CAAA;AAId;AAEoBG,EAAA,CAAA,SAAA,WAAA,CAAA;"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\n/**\n * The delete control's icon: a custom one or the default. It is read here, only\n * when the control renders — markup created and not rendered has no server node\n * to hydrate against either.\n */\nfunction DeleteIcon(props: { icon: JSX.Element }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show when={icon()} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\n  ]);\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for the <Show> test has no server DOM\n  // node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <DeleteIcon icon={local.deleteIcon} />\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"names":["DeleteIcon","props","icon","children","_$createComponent","Show","when","fallback","Icon","name","size","fill","Chip","merged","mergeProps","target","variant","color","disabled","deleteAriaLabel","local","rest","splitProps","rippleActions","onPointerDown","event","onRipple","onDeleteMouseDown","callHandler","stopPropagation","classes","cn","class","selected","clickable","onClick","inner","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","label","onDelete","_el$3","_tmpl$3","$$mousedown","_$addEventListener","deleteIcon","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","Ripple","actionRef","actions","_$memo","asLink","href","_el$5","_tmpl$5","_ref$2","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","tabindex","onKeyDown","key","preventDefault","_el$4","_tmpl$4","_ref$","_$delegateEvents"],"mappings":"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"}

package/dist/components/dataDisplay/chipGroup/chipGroup.js

@@ -1,32 +1,33 @@
-import { spread as p, mergeProps as n, insert as g, createComponent as o, template as f } from "solid-js/web";
-import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';/* empty css                                                             */
+import { spread as d, mergeProps as o, insert as g, createComponent as n, template as f } from "solid-js/web";
+import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
 import { mergeProps as v, splitProps as h, For as b } from "solid-js";
 import C from "clsx";
 import { Chip as z } from "../chip/chip.js";
 var P = /* @__PURE__ */ f("<div>");
-function k(i) {
+function w(i) {
   const a = v({
     size: "medium",
     color: "primary"
   }, i), [e, c] = h(a, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), l = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], s = (t) => l().includes(t), u = (t) => {
     if (e.multiple) {
-      const r = l(), m = r.includes(t) ? r.filter((d) => d !== t) : [...r, t];
+      const r = l(), m = r.includes(t) ? r.filter((p) => p !== t) : [...r, t];
       e.onChange?.(m);
     } else
       e.onChange?.(t);
   };
   return (() => {
     var t = P();
-    return p(t, n(c, {
+    return d(t, o(c, {
       role: "group",
       get class() {
         return C("smwb-chip-group", e.class);
       }
-    }), !1, !0), g(t, o(b, {
+    }), !1, !0), g(t, n(b, {
       get each() {
         return e.options;
       },
-      children: (r) => o(z, n({
+      children: (r) => n(z, o({
         get label() {
           return r.label;
         },
@@ -53,6 +54,6 @@ function k(i) {
   })();
 }
 export {
-  k as ChipGroup
+  w as ChipGroup
 };
 //# sourceMappingURL=chipGroup.js.map

package/dist/components/dataDisplay/chipGroup/chipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;;AA8BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}
+{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;;;AA+BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}

package/dist/components/dataDisplay/descriptionList/descriptionList.d.ts

@@ -0,0 +1,32 @@
+import { type JSX, type ParentProps } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export interface DescriptionListEntry {
+    term: JSX.Element;
+    description: JSX.Element;
+}
+/**
+ * `auto`: the term beside its description while the list's container is at
+ * least 420px wide, above it when narrower (a container query). `row` and
+ * `stacked` fix one layout.
+ */
+export type DescriptionListLayout = "auto" | "row" | "stacked";
+export interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {
+    /** The pairs as data; `DescriptionItem` children work too, and come after them. */
+    items?: DescriptionListEntry[];
+    layout?: DescriptionListLayout;
+    /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */
+    termWidth?: number | string;
+    /** Tighter spacing, for side panels. */
+    dense?: boolean;
+    ref?: Ref<HTMLDListElement>;
+}
+export interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** The field's name. */
+    term: JSX.Element;
+    ref?: Ref<HTMLDivElement>;
+}
+/** One pair: the term and, as children, its description. */
+export declare function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element;
+/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */
+export declare function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element;
+export default DescriptionList;

package/dist/components/dataDisplay/descriptionList/descriptionList.js

@@ -0,0 +1,60 @@
+import { use as p, spread as a, mergeProps as u, insert as n, createComponent as d, template as f } from "solid-js/web";
+import '../../../assets/styles/less/components/descriptionList/descriptionList.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                         */
+import { splitProps as _, mergeProps as g, createMemo as $, For as b } from "solid-js";
+import h from "clsx";
+import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
+var w = /* @__PURE__ */ f("<div><dt class=smwb-description-list__term></dt><dd class=smwb-description-list__details>"), v = /* @__PURE__ */ f("<dl>");
+function W(l) {
+  const [r, e] = _(l, ["class", "term", "children", "ref"]);
+  return (() => {
+    var s = w(), i = s.firstChild, o = i.nextSibling, t = y(r.ref);
+    return typeof t == "function" && p(t, s), a(s, u(e, {
+      get class() {
+        return h("smwb-description-list__item", r.class);
+      }
+    }), !1, !0), n(i, () => r.term), n(o, () => r.children), s;
+  })();
+}
+function L(l) {
+  const r = g({
+    layout: "auto"
+  }, l), [e, s] = _(r, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]), i = $(() => e.items ?? []), o = () => {
+    if (e.termWidth === void 0) return e.style;
+    const t = typeof e.termWidth == "number" ? `${e.termWidth}px` : e.termWidth;
+    return typeof e.style == "string" ? `${e.style};--smwb-description-term:${t}` : {
+      ...e.style,
+      "--smwb-description-term": t
+    };
+  };
+  return (() => {
+    var t = v(), m = y(e.ref);
+    return typeof m == "function" && p(m, t), a(t, u(s, {
+      get class() {
+        return h("smwb-description-list", `smwb-description-list_${e.layout}`, {
+          "smwb-description-list_dense": e.dense
+        }, e.class);
+      },
+      get style() {
+        return o();
+      }
+    }), !1, !0), n(t, d(b, {
+      get each() {
+        return i();
+      },
+      children: (c) => d(W, {
+        get term() {
+          return c.term;
+        },
+        get children() {
+          return c.description;
+        }
+      })
+    }), null), n(t, () => e.children, null), t;
+  })();
+}
+export {
+  W as DescriptionItem,
+  L as DescriptionList
+};
+//# sourceMappingURL=descriptionList.js.map

package/dist/components/dataDisplay/descriptionList/descriptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.termWidth === undefined) return local.style;\n    const width = typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-description-term:${width}`;\n    return { ...local.style, \"--smwb-description-term\": width };\n  };\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","props","local","rest","splitProps","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","term","children","DescriptionList","merged","mergeProps","layout","items","createMemo","style","termWidth","undefined","width","_el$4","_tmpl$2","_ref$2","dense","_$createComponent","For","each","item","description"],"mappings":";;;;;;;AAoCO,SAASA,EAAgBC,GAAuD;AACrF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACsBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAN,CAAA,GAAAU,EAAAV,GAAAW,EAA/Bb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,+BAA+Bf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MACpDL,EAAMkB,IAAI,GAAAD,EAAAV,GAAA,MACPP,EAAMmB,QAAQ,GAAAhB;AAAAA,EAAA,GAAA;AAGhE;AAGO,SAASiB,EAAgBrB,GAAuD;AACrF,QAAMsB,IAASC,EAAW;AAAA,IAAEC,QAAQ;AAAA,EAAA,GAAmCxB,CAAK,GACtE,CAACC,GAAOC,CAAI,IAAIC,EAAWmB,GAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC,GAKjHG,IAAQC,EAAW,MAAMzB,EAAMwB,SAAS,CAAA,CAAE,GAE1CE,IAAQA,MAA8C;AAC1D,QAAI1B,EAAM2B,cAAcC,OAAW,QAAO5B,EAAM0B;AAChD,UAAMG,IAAQ,OAAO7B,EAAM2B,aAAc,WAAW,GAAG3B,EAAM2B,SAAS,OAAO3B,EAAM2B;AACnF,WAAI,OAAO3B,EAAM0B,SAAU,WAAiB,GAAG1B,EAAM0B,KAAK,4BAA4BG,CAAK,KACpF;AAAA,MAAE,GAAG7B,EAAM0B;AAAAA,MAAO,2BAA2BG;AAAAA,IAAAA;AAAAA,EACtD;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGStB,EAAUV,EAAMW,GAAG;AAAC,kBAAAqB,KAAA,cAAApB,EAAAoB,GAAAF,CAAA,GAAAjB,EAAAiB,GAAAhB,EADrBb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDc,EACL,yBACA,yBAAyBf,EAAMuB,MAAM,IACrC;AAAA,UAAE,+BAA+BvB,EAAMiC;AAAAA,QAAAA,GACvCjC,EAAMgB,KACR;AAAA,MAAC;AAAA,MAAA,IACDU,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAa,GAAAI,EAEbC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEZ,EAAAA;AAAAA,MAAO;AAAA,MAAAL,UAAIkB,CAAAA,MAAIH,EAAMpC,GAAe;AAAA,QAAA,IAACoB,OAAI;AAAA,iBAAEmB,EAAKnB;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAGkB,EAAKC;AAAAA,QAAW;AAAA,MAAA,CAAA;AAAA,IAAA,CAAmB,GAAA,IAAA,GAAArB,EAAAa,GAAA,MACpG9B,EAAMmB,UAAQ,IAAA,GAAAW;AAAAA,EAAA,GAAA;AAGrB;"}