@smwb/ui-solid 0.11.1 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TablePagination } from "./tablePagination/tablePagination";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -12,12 +12,19 @@ function Table(props) {
     "isLoading",
     "stickyHeader",
     "caption",
+    "stackBelow",
     "ref"
   ]);
+  const caption = children(() => local.caption);
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    class={cn("smwb-table__wrapper", local.class, { "smwb-table__wrapper_loading": local.isLoading })}
+    class={cn(
+      "smwb-table__wrapper",
+      local.class,
+      { "smwb-table__wrapper_loading": local.isLoading },
+      local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`
+    )}
   >
       <div class={cn("smwb-table__container", { "smwb-withPagination": !!local.paginationSettings })}>
         <table
@@ -27,8 +34,8 @@ function Table(props) {
       "smwb-table_sticky-header": local.stickyHeader
     })}
   >
-          <Show when={local.caption != null}>
-            <caption class="smwb-table__caption">{local.caption}</caption>
+          <Show when={caption() != null}>
+            <caption class="smwb-table__caption">{caption()}</caption>
           </Show>
           {local.children}
         </table>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__wrapper\", local.class, { \"smwb-table__wrapper_loading\": local.isLoading })}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={local.caption != null}>\n            <caption class=\"smwb-table__caption\">{local.caption}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AAc7B,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,MAAM,OAAO,EAAE,+BAA+B,MAAM,UAAU,CAAC;AAAA,GACjG;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC,QAAQ,MAAM,uBAAuB,MAAM,QAAQ,EAAnD,QAA6D;AAAA,UAChE,EAFC,KAEM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAXC,MAWO;AAAA,MACV,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AAqB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;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,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,EAAE,+BAA+B,MAAM,UAAU;AAAA,MACjD,MAAM,cAAc,6BAA6B,MAAM,UAAU;AAAA,IACnE;AAAA,GACD;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM;AAAA,YAC7B,CAAC,QAAQ,MAAM,uBAAuB,QAAQ,EAAE,EAA/C,QAAyD;AAAA,UAC5D,EAFC,KAEM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAXC,MAWO;AAAA,MACV,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}

package/dist/headless/source/components/dataDisplay/table/tableCell.jsx

@@ -3,8 +3,14 @@ import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function TableCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
-  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "ref"]);
-  return <td {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-table__cell", local.class)} align={local.cellAlign || "left"}>
+  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "label", "ref"]);
+  return <td
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-table__cell", local.class)}
+    align={local.cellAlign || "left"}
+    data-label={local.label}
+  >
       {local.children}
     </td>;
 }

package/dist/headless/source/components/dataDisplay/table/tableCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"ref\"]);\n  return (\n    <td {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__cell\", local.class)} align={local.cellAlign || \"left\"}>\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAO7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,KAAK,CAAC;AAClF,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,OAAO,MAAM,aAAa,QAAQ;AAAA,OACpH,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"ref\"]);\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={local.label}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAS7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,KAAK,CAAC;AAC3F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,IACzC,OAAO,MAAM,aAAa;AAAA,IAC1B,YAAY,MAAM;AAAA,GACnB;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EARC;AAUL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}

package/dist/headless/source/components/dataDisplay/table/tableHeadCell.jsx

@@ -2,6 +2,34 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const INTERACTIVE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((role) => `[role='${role}']`)
+].join(",");
 function TableHeadCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
   const [local, rest] = splitProps(merged, [
@@ -19,11 +47,17 @@ function TableHeadCell(props) {
   const ariaSort = () => local.sortable ? direction() === "asc" ? "ascending" : direction() === "desc" ? "descending" : "none" : void 0;
   const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "unfold_more";
   const onKeyDown = (event) => {
-    if (local.sortable && local.onSort && (event.key === "Enter" || event.key === " ")) {
+    if (!local.sortable || event.target !== event.currentTarget) return;
+    if (local.onSort && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       local.onSort();
     }
   };
+  const onClick = (event) => {
+    if (!local.sortable || event.defaultPrevented) return;
+    if (event.target?.closest(INTERACTIVE) !== event.currentTarget) return;
+    local.onSort?.();
+  };
   return <th
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -36,8 +70,8 @@ function TableHeadCell(props) {
   >
       <span
     class="smwb-head-cell__content"
-    onClick={local.sortable ? () => local.onSort?.() : void 0}
-    onKeyDown={local.sortable ? onKeyDown : void 0}
+    onClick={onClick}
+    onKeyDown={onKeyDown}
     role={local.sortable ? "button" : void 0}
     tabindex={local.sortable ? 0 : void 0}
   >

package/dist/headless/source/components/dataDisplay/table/tableHeadCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,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,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\n/**\n * Whatever takes a click of its own inside the sort control. The control\n * matches too (`role=\"button\"`), so it is the nearest match for a click on the\n * header's text or marker, and only then does the click sort.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Solid binds event handlers once, so both are always attached and check\n  // `sortable` themselves: a cell can turn sortable, or stop, after it renders.\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!local.sortable || event.target !== event.currentTarget) return;\n    if (local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a Portal rendered inside fails that too: Solid delivers it here,\n  // though it landed outside the control.\n  const onClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (!local.sortable || event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    local.onSort?.();\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAkCpC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;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,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,CAAC,SAAS,UAAU,IAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAEH,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,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,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAOnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,CAAC,MAAM,YAAY,MAAM,WAAW,MAAM,cAAe;AAC7D,QAAI,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAChE,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAKA,QAAM,UAAyD,CAAC,UAAU;AACxE,QAAI,CAAC,MAAM,YAAY,MAAM,iBAAkB;AAC/C,QAAK,MAAM,QAA2B,QAAQ,WAAW,MAAM,MAAM,cAAe;AACpF,UAAM,SAAS;AAAA,EACjB;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}

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

@@ -1,4 +1,4 @@
-import { Show, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, children, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { createFloating } from "../../../primitives/createFloating";
@@ -21,6 +21,9 @@ function ThumbCard(props) {
     "class",
     "ref"
   ]);
+  const topStart = children(() => local.topStart);
+  const topEnd = children(() => local.topEnd);
+  const caption = children(() => local.caption);
   const floating = createFloating({ placement: () => "right" });
   const [previewOpen, setPreviewOpen] = createSignal(false);
   let hoverTimer;
@@ -66,15 +69,15 @@ function ThumbCard(props) {
   >
       <div class="smwb-thumb-card__media">
         <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
-        <Show when={local.topStart}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{local.topStart}</div>
+        <Show when={topStart()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{topStart()}</div>
         </Show>
-        <Show when={local.topEnd}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{local.topEnd}</div>
+        <Show when={topEnd()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{topEnd()}</div>
         </Show>
       </div>
-      <Show when={local.caption}>
-        <div class="smwb-thumb-card__caption">{local.caption}</div>
+      <Show when={caption()}>
+        <div class="smwb-thumb-card__caption">{caption()}</div>
       </Show>
       <Show when={previewOpen() && !isServer}>
         <Portal>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, children, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  // Read each slot 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  // (The hover preview is read on hover only, after hydration.)\n  const topStart = children(() => local.topStart);\n  const topEnd = children(() => local.topEnd);\n  const caption = children(() => local.caption);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={topStart()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart()}</div>\n        </Show>\n        <Show when={topEnd()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd()}</div>\n        </Show>\n      </div>\n      <Show when={caption()}>\n        <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}

package/dist/headless/source/components/dataDisplay/timeline/index.js

@@ -0,0 +1,8 @@
+import { Timeline, TimelineGroup, TimelineItem, default as default2 } from "./timeline";
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/timeline/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/timeline/index.ts"],
+  "sourcesContent": ["export { Timeline, TimelineGroup, TimelineItem, default } from \"./timeline\";\nexport type { TimelineProps, TimelineGroupProps, TimelineItemProps, TimelineTone } from \"./timeline\";\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe,cAAc,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,64 @@
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Timeline(props) {
+  const [local, rest] = splitProps(props, ["class", "dense", "stickyLabels", "children", "ref"]);
+  return <ol
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn(
+      "smwb-timeline",
+      { "smwb-timeline_dense": local.dense, "smwb-timeline_sticky-labels": local.stickyLabels },
+      local.class
+    )}
+  >
+      {local.children}
+    </ol>;
+}
+function TimelineGroup(props) {
+  const [local, rest] = splitProps(props, ["class", "label", "children", "ref"]);
+  return <li {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-timeline__group", local.class)}>
+      <div class="smwb-timeline__label">{local.label}</div>
+      <ol class="smwb-timeline__items">{local.children}</ol>
+    </li>;
+}
+function TimelineItem(props) {
+  const merged = mergeProps({ tone: "neutral" }, props);
+  const [local, rest] = splitProps(merged, ["class", "title", "meta", "time", "icon", "tone", "children", "ref"]);
+  const meta = children(() => local.meta);
+  const time = children(() => local.time);
+  const icon = children(() => local.icon);
+  const content = children(() => local.children);
+  return <li
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-timeline__item", `smwb-timeline__item_tone-${local.tone}`, local.class)}
+  >
+      <span class="smwb-timeline__mark" aria-hidden="true">
+        <Show when={icon()} fallback={<span class="smwb-timeline__dot" />}>
+          {(resolved) => typeof resolved() === "string" ? <Icon name={resolved()} size={16} /> : resolved()}
+        </Show>
+      </span>
+      <div class="smwb-timeline__body">
+        <div class="smwb-timeline__title">{local.title}</div>
+        <Show when={meta()}>
+          <div class="smwb-timeline__meta">{meta()}</div>
+        </Show>
+        <Show when={content()}>
+          <div class="smwb-timeline__content">{content()}</div>
+        </Show>
+      </div>
+      <Show when={time()}>
+        <div class="smwb-timeline__time">{time()}</div>
+      </Show>
+    </li>;
+}
+var timeline_default = Timeline;
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  timeline_default as default
+};
+//# sourceMappingURL=timeline.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport interface TimelineGroupProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** What groups the events — a day, a week, a stage. */\n  label: JSX.Element;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TimelineItemProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The event itself: a line of text, usually a link. */\n  title: JSX.Element;\n  /** A second line: who, what kind, where. */\n  meta?: JSX.Element;\n  /** When: a time or a date, at the end of the row. */\n  time?: JSX.Element;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | JSX.Element;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n  ref?: Ref<HTMLLIElement>;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport function Timeline(props: ParentProps<TimelineProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"stickyLabels\", \"children\", \"ref\"]);\n  return (\n    <ol\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": local.dense, \"smwb-timeline_sticky-labels\": local.stickyLabels },\n        local.class\n      )}\n    >\n      {local.children}\n    </ol>\n  );\n}\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport function TimelineGroup(props: ParentProps<TimelineGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"label\", \"children\", \"ref\"]);\n  return (\n    <li {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-timeline__group\", local.class)}>\n      <div class=\"smwb-timeline__label\">{local.label}</div>\n      <ol class=\"smwb-timeline__items\">{local.children}</ol>\n    </li>\n  );\n}\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport function TimelineItem(props: ParentProps<TimelineItemProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as TimelineTone }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"meta\", \"time\", \"icon\", \"tone\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const meta = children(() => local.meta);\n  const time = children(() => local.time);\n  const icon = children(() => local.icon);\n  const content = children(() => local.children);\n\n  return (\n    <li\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${local.tone}`, local.class)}\n    >\n      <span class=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        <Show when={icon()} fallback={<span class=\"smwb-timeline__dot\" />}>\n          {(resolved) => (typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={16} /> : resolved())}\n        </Show>\n      </span>\n      <div class=\"smwb-timeline__body\">\n        <div class=\"smwb-timeline__title\">{local.title}</div>\n        <Show when={meta()}>\n          <div class=\"smwb-timeline__meta\">{meta()}</div>\n        </Show>\n        <Show when={content()}>\n          <div class=\"smwb-timeline__content\">{content()}</div>\n        </Show>\n      </div>\n      <Show when={time()}>\n        <div class=\"smwb-timeline__time\">{time()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Timeline;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoC7B,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,EAAE,uBAAuB,MAAM,OAAO,+BAA+B,MAAM,aAAa;AAAA,MACxF,MAAM;AAAA,IACR;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAVC;AAYL;AAGO,SAAS,cAAc,OAAqD;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,YAAY,KAAK,CAAC;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,wBAAwB,MAAM,KAAK,GAAG;AAAA,MACvF,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,MACrD,CAAC,GAAG,MAAM,wBAAwB,MAAM,SAAS,EAAhD,GAAqD;AAAA,IACxD,EAHC;AAKL;AAGO,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,MAAM,UAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,YAAY,KAAK,CAAC;AAI9G,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,4BAA4B,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACvF;AAAA,MACC,CAAC,KAAK,MAAM,sBAAsB,YAAY,OAAO;AAAA,QACnD,CAAC,KAAK,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,MAAM,qBAAqB,IAAI;AAAA,WAChE,CAAC,aAAc,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAG;AAAA,QAChH,EAFC,KAEM;AAAA,MACT,EAJC,KAIM;AAAA,MACP,CAAC,IAAI,MAAM,sBAAsB;AAAA,QAC/B,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,QACrD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,UAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,QACjD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,0BAA0B,QAAQ,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,MACT,EARC,IAQK;AAAA,MACN,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,mBAAQ;","names":[],"file":"timeline.jsx"}

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

@@ -9,8 +9,9 @@ const defaultTag = {
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
@@ -25,11 +26,21 @@ function Typography(props) {
     "align",
     "gutterBottom",
     "noWrap",
+    "lines",
+    "tabularNums",
     "component",
     "class",
+    "style",
     "children",
     "ref"
   ]);
+  const clamped = () => local.lines !== void 0 && local.lines > 0;
+  const style = () => {
+    if (!clamped()) return local.style;
+    const lines = String(local.lines);
+    if (typeof local.style === "string") return `${local.style};--smwb-typography-lines:${lines}`;
+    return { ...local.style, "--smwb-typography-lines": lines };
+  };
   return <Dynamic
     component={local.component ?? defaultTag[local.variant]}
     ref={mergeRefs(local.ref)}
@@ -40,10 +51,13 @@ function Typography(props) {
       local.align && `smwb-typography_align-${local.align}`,
       {
         "smwb-typography_gutter": local.gutterBottom,
-        "smwb-typography_nowrap": local.noWrap
+        "smwb-typography_nowrap": local.noWrap,
+        "smwb-typography_clamp": clamped(),
+        "smwb-typography_tabular-nums": local.tabularNums
       },
       local.class
     )}
+    style={style()}
     {...rest}
   >
       {local.children}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  subtitle1: \"h6\",\n  subtitle2: \"h6\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"component\",\n    \"class\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AA6BpC,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAeO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,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,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,MAClC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,QACI;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAjBC;AAmBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (!clamped()) return local.style;\n    const lines = String(local.lines);\n    if (typeof local.style === \"string\") return `${local.style};--smwb-typography-lines:${lines}`;\n    return { ...local.style, \"--smwb-typography-lines\": lines };\n  };\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AA6BpC,MAAM,aAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV;AAmBO,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAA8B,OAAO,UAA6B,GAAG,KAAK;AAC/G,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,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAe,MAAM,UAAU,UAAa,MAAM,QAAQ;AAE1E,QAAM,QAAQ,MAA8C;AAC1D,QAAI,CAAC,QAAQ,EAAG,QAAO,MAAM;AAC7B,UAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,4BAA4B,KAAK;AAC3F,WAAO,EAAE,GAAG,MAAM,OAAO,2BAA2B,MAAM;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,aAAa,WAAW,MAAM,OAAO;AAAA,IACtD,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,OAAO;AAAA,MAChC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,MAAM,SAAS,yBAAyB,MAAM,KAAK;AAAA,MACnD;AAAA,QACE,0BAA0B,MAAM;AAAA,QAChC,0BAA0B,MAAM;AAAA,QAChC,yBAAyB,QAAQ;AAAA,QACjC,gCAAgC,MAAM;AAAA,MACxC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,OAAO,MAAM;AAAA,QACT;AAAA,GACL;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EApBC;AAsBL;AAEA,IAAO,qBAAQ;","names":[],"file":"typography.jsx"}

package/dist/headless/source/components/feedBack/confirmDialog/confirmDialog.jsx

@@ -26,7 +26,7 @@ function ConfirmDialog(props) {
   return <Modal
     open={local.open}
     onClose={() => local.onCancel()}
-    size="small"
+    size="medium"
     role="alertdialog"
     backdrop="dark"
     closeOnEsc={!local.busy}

package/dist/headless/source/components/feedBack/confirmDialog/confirmDialog.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps, createUniqueId } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  class?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"subject\",\n    \"message\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"danger\",\n    \"busy\",\n    \"onConfirm\",\n    \"onCancel\",\n    \"class\",\n  ]);\n  const subjectId = createUniqueId();\n  const messageId = createUniqueId();\n  // Only include aria-describedby when there's something to describe (the lib's exactOptionalPropertyTypes\n  // forbids passing an explicit `undefined` to Modal's optional prop, so spread a precisely-typed object).\n  const ariaDescribed = (): { \"aria-describedby\"?: string } => {\n    const ids = [local.subject ? subjectId : \"\", local.message ? messageId : \"\"].filter(Boolean).join(\" \");\n    return ids ? { \"aria-describedby\": ids } : {};\n  };\n\n  return (\n    <Modal\n      open={local.open}\n      onClose={() => local.onCancel()}\n      size=\"small\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!local.busy}\n      closeOnOutsideClick={!local.busy}\n      aria-label={local.title}\n      {...ariaDescribed()}\n    >\n      <Modal.Header>{local.title}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-confirm-dialog__body\", local.class)}>\n          <Show when={local.subject}>\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {local.subject}\n            </Typography>\n          </Show>\n          <Show when={local.message}>\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {local.message}\n            </Typography>\n          </Show>\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          disabled={!!local.busy}\n          onClick={() => local.onCancel()}\n          label={local.cancelLabel ?? \"Cancel\"}\n        />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={local.danger ? \"error\" : \"primary\"}\n          disabled={!!local.busy}\n          onClick={() => local.onConfirm()}\n          label={local.confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"mappings":"AAAA,SAAmB,MAAM,YAAY,sBAAsB;AAC3D,OAAO,QAAQ;AACf,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AA2BpB,SAAS,cAAc,OAAwC;AACpE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,eAAe;AAGjC,QAAM,gBAAgB,MAAuC;AAC3D,UAAM,MAAM,CAAC,MAAM,UAAU,YAAY,IAAI,MAAM,UAAU,YAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrG,WAAO,MAAM,EAAE,oBAAoB,IAAI,IAAI,CAAC;AAAA,EAC9C;AAEA,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY,CAAC,MAAM;AAAA,IACnB,qBAAqB,CAAC,MAAM;AAAA,IAC5B,YAAY,MAAM;AAAA,QACd,cAAc;AAAA,GACnB;AAAA,MACC,CAAC,MAAM,QAAQ,MAAM,MAAM,EAA1B,MAAM,OAAmC;AAAA,MAC1C,CAAC,MAAM,QAAQ;AAAA,QACb,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,KAAK,GAAG;AAAA,UACxD,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,QAAQ,MAAM,cAAc,UAAU,OAAO;AAAA,eAC7E,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,UAAU,MAAM,gBAAgB,UAAU,OAAO;AAAA,eACjF,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAbC,MAAM,QAaS;AAAA,MAChB,CAAC,MAAM,OAAO;AAAA,QACZ,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,OAAO,MAAM,eAAe;AAAA,EAC9B,EAAE;AAAA,QACF,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO,MAAM,SAAS,UAAU;AAAA,IAChC,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,OAAO,MAAM;AAAA,EACf,EAAE;AAAA,MACJ,EAhBC,MAAM,OAgBQ;AAAA,IACjB,EA3CC;AA6CL;AAEA,IAAO,wBAAQ;","names":[],"file":"confirmDialog.jsx"}
+{"version":3,"sources":["../../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps, createUniqueId } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n  subject?: string;\n  /** A secondary explanatory line (e.g. \"can't be undone\"). */\n  message?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  /** Style the confirm button as destructive (red). */\n  danger?: boolean;\n  /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n  busy?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n  class?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"subject\",\n    \"message\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"danger\",\n    \"busy\",\n    \"onConfirm\",\n    \"onCancel\",\n    \"class\",\n  ]);\n  const subjectId = createUniqueId();\n  const messageId = createUniqueId();\n  // Only include aria-describedby when there's something to describe (the lib's exactOptionalPropertyTypes\n  // forbids passing an explicit `undefined` to Modal's optional prop, so spread a precisely-typed object).\n  const ariaDescribed = (): { \"aria-describedby\"?: string } => {\n    const ids = [local.subject ? subjectId : \"\", local.message ? messageId : \"\"].filter(Boolean).join(\" \");\n    return ids ? { \"aria-describedby\": ids } : {};\n  };\n\n  return (\n    <Modal\n      open={local.open}\n      onClose={() => local.onCancel()}\n      size=\"medium\"\n      role=\"alertdialog\"\n      backdrop=\"dark\"\n      closeOnEsc={!local.busy}\n      closeOnOutsideClick={!local.busy}\n      aria-label={local.title}\n      {...ariaDescribed()}\n    >\n      <Modal.Header>{local.title}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-confirm-dialog__body\", local.class)}>\n          <Show when={local.subject}>\n            <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n              {local.subject}\n            </Typography>\n          </Show>\n          <Show when={local.message}>\n            <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n              {local.message}\n            </Typography>\n          </Show>\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          disabled={!!local.busy}\n          onClick={() => local.onCancel()}\n          label={local.cancelLabel ?? \"Cancel\"}\n        />\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          color={local.danger ? \"error\" : \"primary\"}\n          disabled={!!local.busy}\n          onClick={() => local.onConfirm()}\n          label={local.confirmLabel}\n        />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default ConfirmDialog;\n"],"mappings":"AAAA,SAAmB,MAAM,YAAY,sBAAsB;AAC3D,OAAO,QAAQ;AACf,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AA2BpB,SAAS,cAAc,OAAwC;AACpE,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,eAAe;AAGjC,QAAM,gBAAgB,MAAuC;AAC3D,UAAM,MAAM,CAAC,MAAM,UAAU,YAAY,IAAI,MAAM,UAAU,YAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrG,WAAO,MAAM,EAAE,oBAAoB,IAAI,IAAI,CAAC;AAAA,EAC9C;AAEA,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY,CAAC,MAAM;AAAA,IACnB,qBAAqB,CAAC,MAAM;AAAA,IAC5B,YAAY,MAAM;AAAA,QACd,cAAc;AAAA,GACnB;AAAA,MACC,CAAC,MAAM,QAAQ,MAAM,MAAM,EAA1B,MAAM,OAAmC;AAAA,MAC1C,CAAC,MAAM,QAAQ;AAAA,QACb,CAAC,IAAI,OAAO,GAAG,6BAA6B,MAAM,KAAK,GAAG;AAAA,UACxD,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,QAAQ,MAAM,cAAc,UAAU,OAAO;AAAA,eAC7E,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,YACzB,CAAC,WAAW,IAAI,WAAW,QAAQ,UAAU,MAAM,gBAAgB,UAAU,OAAO;AAAA,eACjF,MAAM,QAAQ;AAAA,YACjB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAXC,IAWK;AAAA,MACR,EAbC,MAAM,QAaS;AAAA,MAChB,CAAC,MAAM,OAAO;AAAA,QACZ,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,SAAS;AAAA,IAC9B,OAAO,MAAM,eAAe;AAAA,EAC9B,EAAE;AAAA,QACF,CAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO,MAAM,SAAS,UAAU;AAAA,IAChC,UAAU,CAAC,CAAC,MAAM;AAAA,IAClB,SAAS,MAAM,MAAM,UAAU;AAAA,IAC/B,OAAO,MAAM;AAAA,EACf,EAAE;AAAA,MACJ,EAhBC,MAAM,OAgBQ;AAAA,IACjB,EA3CC;AA6CL;AAEA,IAAO,wBAAQ;","names":[],"file":"confirmDialog.jsx"}

package/dist/headless/source/components/feedBack/emptyState/emptyState.jsx

@@ -0,0 +1,47 @@
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } };
+const present = (value) => value !== void 0 && value !== null && value !== false && value !== "" && !(Array.isArray(value) && value.length === 0);
+function EmptyState(props) {
+  const merged = mergeProps({ variant: "block", size: "medium" }, props);
+  const [local, rest] = splitProps(merged, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]);
+  const icon = children(() => local.icon);
+  const title = children(() => local.title);
+  const message = children(() => local.children);
+  const actions = children(() => local.actions);
+  const iconName = () => {
+    const resolved = icon();
+    return typeof resolved === "string" ? resolved : void 0;
+  };
+  return <div
+    data-testid="empty-state"
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-empty-state", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}
+  >
+      <Show when={present(icon())}>
+        <span class="smwb-empty-state__icon" aria-hidden="true">
+          <Show when={iconName()} fallback={icon()}>
+            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}
+          </Show>
+        </span>
+      </Show>
+      <Show when={present(title())}>
+        <div class="smwb-empty-state__title">{title()}</div>
+      </Show>
+      <Show when={present(message())}>
+        <div class="smwb-empty-state__description">{message()}</div>
+      </Show>
+      <Show when={present(actions())}>
+        <div class="smwb-empty-state__actions">{actions()}</div>
+      </Show>
+    </div>;
+}
+var emptyState_default = EmptyState;
+export {
+  EmptyState,
+  emptyState_default as default
+};
+//# sourceMappingURL=emptyState.jsx.map

package/dist/headless/source/components/feedBack/emptyState/emptyState.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"icon\", \"actions\", \"variant\", \"size\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoBpC,MAAM,YAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,GAAG,GAAG,QAAQ,EAAE,QAAQ,IAAI,OAAO,GAAG,EAAE;AAExF,MAAM,UAAU,CAAC,UACf,UAAU,UACV,UAAU,QACV,UAAU,SACV,UAAU,MACV,EAAE,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAMtC,SAAS,WAAW,OAAkD;AAC3E,QAAM,SAAS,WAAW,EAAE,SAAS,SAAkB,MAAM,SAAkB,GAAG,KAAK;AACvF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,WAAW,WAAW,QAAQ,YAAY,KAAK,CAAC;AAIpH,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAC7C,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAC5C,QAAM,WAAW,MAA0B;AACzC,UAAM,WAAW,KAAK;AACtB,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AAEA,SACE,CAAC;AAAA,IACC,YAAY;AAAA,QACR;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,oBAAoB,MAAM,OAAO,IAAI,oBAAoB,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACjH;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,GAAG;AAAA,QAC3B,CAAC,KAAK,MAAM,yBAAyB,YAAY,OAAO;AAAA,UACtD,CAAC,KAAK,MAAM,SAAS,GAAG,UAAU,KAAK,GAAG;AAAA,aACvC,CAAC,SAAS,CAAC,KAAK,MAAM,KAAK,GAAG,MAAM,UAAU,MAAM,OAAO,EAAE,MAAM,IAAI,GAAG,GAAG;AAAA,UAChF,EAFC,KAEM;AAAA,QACT,EAJC,KAIM;AAAA,MACT,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,MAAM,CAAC,GAAG;AAAA,QAC5B,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C,IAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,iCAAiC,QAAQ,EAAE,EAArD,IAA2D;AAAA,MAC9D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,QAAQ,QAAQ,CAAC,GAAG;AAAA,QAC9B,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,qBAAQ;","names":[],"file":"emptyState.jsx"}

package/dist/headless/source/components/feedBack/emptyState/index.js

@@ -0,0 +1,6 @@
+import { EmptyState, default as default2 } from "./emptyState";
+export {
+  EmptyState,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/feedBack/emptyState/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/feedBack/emptyState/index.ts"],
+  "sourcesContent": ["export { EmptyState, default } from \"./emptyState\";\nexport type { EmptyStateProps } from \"./emptyState\";\n"],
+  "mappings": "AAAA,SAAS,YAAY,WAAAA,gBAAe;",
+  "names": ["default"]
+}