@caseparts-org/caseblocks 0.0.148 → 0.0.150

package/dist/Table-BX4PtCNE.js

@@ -0,0 +1,178 @@
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import d from "react";
+import { c as u } from "./clsx-OuTLNxxd.js";
+import { Icon as Y } from "./atoms/Icon/Icon.js";
+import './assets/Table.css';const Z = "_table_14k11_2", $ = "_noPaddingRow_14k11_71", I = "_clickableRow_14k11_82", P = "_clickableCell_14k11_83", ee = "_expandedContentCell_14k11_85", ne = "_expandedContentRow_14k11_94", te = "_expandedRow_14k11_99", le = "_expanded_14k11_85", ae = "_columnContent_14k11_135", oe = "_clickableHeader_14k11_155", n = {
+  "table-container": "_table-container_14k11_2",
+  table: Z,
+  "table-alternating": "_table-alternating_14k11_17",
+  "sorted-column": "_sorted-column_14k11_22",
+  noPaddingRow: $,
+  clickableRow: I,
+  clickableCell: P,
+  expandedContentCell: ee,
+  expandedContentRow: ne,
+  expandedRow: te,
+  expanded: le,
+  columnContent: ae,
+  clickableHeader: oe,
+  "icon-ascending": "_icon-ascending_14k11_156"
+}, V = ({ children: i }) => null;
+V.displayName = "Table.Columns";
+const v = ({ children: i }) => null;
+v.displayName = "Table.Column";
+const j = ({ children: i }) => null;
+j.displayName = "Table.Body";
+const M = ({ children: i }) => null;
+M.displayName = "Table.Row";
+const O = ({ children: i }) => null;
+O.displayName = "Table.Cell";
+const f = ({ children: i, className: z, alternatingRows: D = !1, isSortable: w = !1, sortField: q, sortFieldKey: G, sortOrder: J = "descending", onSort: F, ...L }) => {
+  const B = [];
+  let R, g;
+  const m = (t, l) => {
+    var e;
+    return !!t && d.isValidElement(t) && ((e = t.type) == null ? void 0 : e.displayName) === l;
+  };
+  d.Children.forEach(i, (t) => {
+    m(t, "Table.Columns") ? R = t : m(t, "Table.Body") ? g = t : B.push(t);
+  });
+  const A = (t) => t.flatMap((l) => {
+    if (d.isValidElement(l) && l.type === d.Fragment) {
+      const e = l.props.children;
+      return d.Children.toArray(e);
+    }
+    return [l];
+  }), Q = () => {
+    if (!R) return null;
+    const t = d.Children.toArray(R.props.children);
+    return /* @__PURE__ */ s("thead", { className: n.thead, children: /* @__PURE__ */ s("tr", { children: t.map((l, e) => {
+      if (m(l, "Table.Column")) {
+        const c = l, {
+          children: a,
+          align: r,
+          colSpan: C,
+          width: b,
+          style: N,
+          sortField: y,
+          sortFieldKey: o,
+          ...k
+        } = c.props, E = {
+          textAlign: r ?? "left",
+          width: b,
+          ...N
+        }, T = r === "right" ? "flex-end" : r === "center" ? "center" : "flex-start", _ = !!y, x = w && _ && (_ && q === y) && (o !== void 0 ? G === o : !0), p = w && _ && typeof F == "function";
+        return /* @__PURE__ */ s(
+          "th",
+          {
+            className: u(n.th, x && n["sorted-column"], p && n.clickableHeader),
+            style: E,
+            colSpan: C,
+            onClick: p ? () => F(y, o) : void 0,
+            ...k,
+            children: /* @__PURE__ */ S("div", { className: n.columnContent, style: { justifyContent: T }, children: [
+              a,
+              x && /* @__PURE__ */ s("span", { className: u(J === "ascending" && n["icon-ascending"]), children: /* @__PURE__ */ s(Y, { iconKey: "fa-solid fa-chevron-down", size: "3xs" }) })
+            ] })
+          },
+          e
+        );
+      }
+      return /* @__PURE__ */ s("th", { className: n.th, children: l }, e);
+    }) }) });
+  }, h = (t, l, e) => {
+    const c = d.Children.toArray(t).map((o, k) => {
+      if (m(o, "Table.Cell")) {
+        const E = o, {
+          children: T,
+          align: _,
+          colSpan: H,
+          width: K,
+          style: x,
+          ...p
+        } = E.props, W = {
+          textAlign: _ ?? "left",
+          width: K,
+          ...x
+        }, X = !!(p && typeof p.onClick == "function");
+        return /* @__PURE__ */ s(
+          "td",
+          {
+            className: u(
+              n.cell,
+              (e == null ? void 0 : e.isExpanded) && n.expanded,
+              (e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell,
+              X && n.clickableCell
+            ),
+            style: W,
+            colSpan: H,
+            ...p,
+            children: T
+          },
+          k
+        );
+      }
+      return d.isValidElement(o) && typeof o.type == "string" && o.type === "td" ? o : /* @__PURE__ */ s(
+        "td",
+        {
+          className: u(
+            n.cell,
+            (e == null ? void 0 : e.isExpanded) && n.expanded,
+            (e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell
+          ),
+          children: o
+        },
+        k
+      );
+    }), { className: a, style: r, isExpanded: C, isExpandedContent: b, ...N } = e ?? {}, y = !!(e && typeof e.onClick == "function");
+    return /* @__PURE__ */ s(
+      "tr",
+      {
+        className: u(
+          n.row,
+          a,
+          C && n.expandedRow,
+          b && n.noPaddingRow,
+          b && n.expandedContentRow,
+          y && n.clickableRow
+        ),
+        style: r,
+        ...N,
+        children: c
+      },
+      l
+    );
+  }, U = () => {
+    if (g) {
+      const c = A(d.Children.toArray(g.props.children)).map((a, r) => {
+        if (m(a, "Table.Row")) {
+          const C = a;
+          return h(C.props.children, r, C.props);
+        }
+        return d.isValidElement(a) && typeof a.type == "string" && a.type === "tr" ? a : h(a, r);
+      });
+      return /* @__PURE__ */ s("tbody", { className: n.tbody, children: c });
+    }
+    const l = A(B).map((e, c) => {
+      if (m(e, "Table.Row")) {
+        const a = e;
+        return h(a.props.children, c, a.props);
+      }
+      return d.isValidElement(e) && typeof e.type == "string" && e.type === "tr" ? e : h(e, c);
+    });
+    return /* @__PURE__ */ s("tbody", { className: n.tbody, children: l });
+  };
+  return /* @__PURE__ */ S("table", { className: u(n.table, z, D && n["table-alternating"]), ...L, children: [
+    Q(),
+    U()
+  ] });
+};
+f.Columns = V;
+f.Column = v;
+f.Body = j;
+f.Row = M;
+f.Cell = O;
+export {
+  f as T,
+  n as s
+};

package/dist/main-client.js

@@ -39,7 +39,7 @@ import { AnimatedCheckMark as Mo } from "./molecules/StatefulButton/AnimatedChec
 import { AddToCart as vo } from "./molecules/AddToCart/AddToCart.js";
 import { Modal as ho } from "./molecules/Modal/Modal.js";
 import { ImageViewer as yo } from "./molecules/ImageViewer/ImageViewer.js";
-import { T as Ho } from "./Table-DwAM6AAI.js";
+import { T as Ho } from "./Table-BX4PtCNE.js";
 import { MainNav as Vo } from "./organisms/MainNav/MainNav.js";
 import { ChipSelector as Go } from "./organisms/ChipSelector/ChipSelector.js";
 import { Product as Qo } from "./organisms/Product/Product.js";

package/dist/molecules/Table/Table.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "../../clsx-OuTLNxxd.js";
-import { T as i, T as e } from "../../Table-DwAM6AAI.js";
+import { T as i, T as e } from "../../Table-BX4PtCNE.js";
 import "../../atoms/Icon/Icon.js";
 export {
   i as Table,

package/dist/molecules/Table/Table.stories.d.ts

@@ -21,4 +21,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const ExpandableRow: Story;
+export declare const ExpandableRowFragment: Story;
 export declare const Sortable: Story;

package/dist/molecules/Table/Table.stories.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useState as s, useEffect as P } from "react";
-import { T as t, s as S } from "../../Table-DwAM6AAI.js";
+import R, { useState as d, useEffect as P } from "react";
+import { T as t, s as x } from "../../Table-BX4PtCNE.js";
 const v = {
   title: "Case Parts/Molecules/Table",
   component: t,
@@ -12,50 +12,50 @@ const v = {
   parameters: {
     layout: "centered"
   }
-}, R = (h) => {
-  const [b, m] = s(3), [d, g] = s(!0);
+}, A = (u) => {
+  const [b, p] = d(3), [g, s] = d(!0);
   P(() => {
   }, []);
-  const u = [
+  const h = [
     { title: "Product", align: "left" },
     { title: "Qty", align: "center" },
-    { title: "Price", align: d ? "right" : "left" }
+    { title: "Price", align: g ? "right" : "left" }
   ];
-  return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
-    /* @__PURE__ */ l(t, { ...h, children: [
-      /* @__PURE__ */ e(t.Columns, { children: u.map((r, a) => /* @__PURE__ */ e(t.Column, { align: r.align, children: r.title }, a)) }),
-      /* @__PURE__ */ e(t.Body, { children: Array.from({ length: b }).map((r, a) => /* @__PURE__ */ l(t.Row, { children: [
-        /* @__PURE__ */ l(t.Cell, { onClick: () => alert(`Row ${a + 1}, Col 1`), children: [
+  return /* @__PURE__ */ l("div", { className: x["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
+    /* @__PURE__ */ l(t, { ...u, children: [
+      /* @__PURE__ */ e(t.Columns, { children: h.map((o, c) => /* @__PURE__ */ e(t.Column, { align: o.align, children: o.title }, c)) }),
+      /* @__PURE__ */ e(t.Body, { children: Array.from({ length: b }).map((o, c) => /* @__PURE__ */ l(t.Row, { children: [
+        /* @__PURE__ */ l(t.Cell, { onClick: () => alert(`Row ${c + 1}, Col 1`), children: [
           "Item ",
-          a + 1
+          c + 1
         ] }),
-        /* @__PURE__ */ e(t.Cell, { align: "center", children: a + 1 }),
-        /* @__PURE__ */ l(t.Cell, { align: d ? "right" : "left", children: [
+        /* @__PURE__ */ e(t.Cell, { align: "center", children: c + 1 }),
+        /* @__PURE__ */ l(t.Cell, { align: g ? "right" : "left", children: [
           "\\$",
-          (a + 1) * 10
+          (c + 1) * 10
         ] })
-      ] }, a)) })
+      ] }, c)) })
     ] }),
     /* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ e("button", { type: "button", onClick: () => m((r) => Math.max(0, r - 1)), children: "Remove Row" }),
-      /* @__PURE__ */ e("button", { type: "button", onClick: () => m((r) => r + 1), children: "Add Row" }),
-      /* @__PURE__ */ l("button", { type: "button", onClick: () => g((r) => !r), children: [
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => p((o) => Math.max(0, o - 1)), children: "Remove Row" }),
+      /* @__PURE__ */ e("button", { type: "button", onClick: () => p((o) => o + 1), children: "Add Row" }),
+      /* @__PURE__ */ l("button", { type: "button", onClick: () => s((o) => !o), children: [
         "Toggle Price Alignment (",
-        d ? "right" : "left",
+        g ? "right" : "left",
         ")"
       ] })
     ] })
   ] });
-}, I = {
+}, E = {
   args: { alternatingRows: !1 },
-  render: (h) => /* @__PURE__ */ e(R, { ...h })
+  render: (u) => /* @__PURE__ */ e(A, { ...u })
 }, $ = {
   args: { alternatingRows: !1 },
-  render: (h) => /* @__PURE__ */ e((m) => {
-    const [d, g] = s(4), [u, r] = s(!0), [a, y] = s(null), p = [
+  render: (u) => /* @__PURE__ */ e((p) => {
+    const [g, s] = d(4), [h, o] = d(!0), [c, f] = d(null), m = [
       { title: "Product", align: "left" },
       { title: "Qty", align: "center" },
-      { title: "Price", align: u ? "right" : "left" },
+      { title: "Price", align: h ? "right" : "left" },
       { title: "Manufacturer", align: "left" },
       { title: "Category", align: "left" },
       { title: "SKU", align: "left" },
@@ -65,11 +65,11 @@ const v = {
       { title: "Ship Time", align: "center" },
       { title: "Stock", align: "right" }
     ];
-    return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
-      /* @__PURE__ */ l(t, { ...m, children: [
-        /* @__PURE__ */ e(t.Columns, { children: p.map((c, n) => /* @__PURE__ */ e(t.Column, { align: c.align, children: c.title }, n)) }),
-        /* @__PURE__ */ e(t.Body, { children: Array.from({ length: d }).flatMap((c, n) => {
-          const i = a === n, o = [
+    return /* @__PURE__ */ l("div", { className: x["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
+      /* @__PURE__ */ l(t, { ...p, children: [
+        /* @__PURE__ */ e(t.Columns, { children: m.map((r, n) => /* @__PURE__ */ e(t.Column, { align: r.align, children: r.title }, n)) }),
+        /* @__PURE__ */ e(t.Body, { children: Array.from({ length: g }).flatMap((r, n) => {
+          const i = c === n, a = [
             `Item ${n + 1} – Super Durable Connector`,
             n + 1,
             `$${(n + 1) * 10}`,
@@ -81,36 +81,96 @@ const v = {
             "Extended warranty available for enterprise clients",
             n % 2 === 0 ? "3–5 business days" : "Ships in 24 hours",
             `${(n + 1) * 123}`
-          ], f = /* @__PURE__ */ e(
+          ], C = /* @__PURE__ */ e(
             t.Row,
             {
               isExpanded: i,
-              onClick: () => y(i ? null : n),
-              children: p.map((w, x) => /* @__PURE__ */ e(t.Cell, { align: w.align, children: o[x] }, x))
+              onClick: () => f(i ? null : n),
+              children: m.map((w, S) => /* @__PURE__ */ e(t.Cell, { align: w.align, children: a[S] }, S))
             },
             `row-${n}`
-          ), C = i ? /* @__PURE__ */ e(t.Row, { isExpandedContent: !0, children: /* @__PURE__ */ e(t.Cell, { colSpan: p.length, children: /* @__PURE__ */ l("div", { style: { padding: "0.5rem" }, children: [
+          ), y = i ? /* @__PURE__ */ e(t.Row, { isExpandedContent: !0, children: /* @__PURE__ */ e(t.Cell, { colSpan: m.length, children: /* @__PURE__ */ l("div", { style: { padding: "0.5rem" }, children: [
             "Expanded content for Item ",
             n + 1
           ] }) }) }, `expanded-${n}`) : null;
-          return C ? [f, C] : [f];
+          return y ? [C, y] : [C];
         }) })
       ] }),
       /* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-        /* @__PURE__ */ e("button", { type: "button", onClick: () => g((c) => Math.max(0, c - 1)), children: "Remove Row" }),
-        /* @__PURE__ */ e("button", { type: "button", onClick: () => g((c) => c + 1), children: "Add Row" }),
-        /* @__PURE__ */ l("button", { type: "button", onClick: () => r((c) => !c), children: [
+        /* @__PURE__ */ e("button", { type: "button", onClick: () => s((r) => Math.max(0, r - 1)), children: "Remove Row" }),
+        /* @__PURE__ */ e("button", { type: "button", onClick: () => s((r) => r + 1), children: "Add Row" }),
+        /* @__PURE__ */ l("button", { type: "button", onClick: () => o((r) => !r), children: [
           "Toggle Price Alignment (",
-          u ? "right" : "left",
+          h ? "right" : "left",
           ")"
         ] })
       ] })
     ] });
-  }, { ...h })
-}, E = {
+  }, { ...u })
+}, D = {
+  args: { alternatingRows: !1 },
+  render: (u) => /* @__PURE__ */ e((p) => {
+    const [g, s] = d(4), [h, o] = d(!0), [c, f] = d(null), m = [
+      { title: "Product", align: "left" },
+      { title: "Qty", align: "center" },
+      { title: "Price", align: h ? "right" : "left" },
+      { title: "Manufacturer", align: "left" },
+      { title: "Category", align: "left" },
+      { title: "SKU", align: "left" },
+      { title: "Status", align: "center" },
+      { title: "Location", align: "left" },
+      { title: "Notes", align: "left" },
+      { title: "Ship Time", align: "center" },
+      { title: "Stock", align: "right" }
+    ];
+    return /* @__PURE__ */ l("div", { className: x["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
+      /* @__PURE__ */ l(t, { ...p, children: [
+        /* @__PURE__ */ e(t.Columns, { children: m.map((r, n) => /* @__PURE__ */ e(t.Column, { align: r.align, children: r.title }, n)) }),
+        /* @__PURE__ */ e(t.Body, { children: Array.from({ length: g }).map((r, n) => {
+          const i = c === n, a = [
+            `Item ${n + 1} – Super Durable Connector`,
+            n + 1,
+            `$${(n + 1) * 10}`,
+            "Acme Components Incorporated",
+            "Electrical Connectors & Fittings",
+            `CP-${1e3 + n}-SKU-0987654321`,
+            n % 2 === 0 ? "Backordered" : "In Stock",
+            "Warehouse Delta – Aisle 12B",
+            "Extended warranty available for enterprise clients",
+            n % 2 === 0 ? "3–5 business days" : "Ships in 24 hours",
+            `${(n + 1) * 123}`
+          ];
+          return /* @__PURE__ */ l(R.Fragment, { children: [
+            /* @__PURE__ */ e(
+              t.Row,
+              {
+                isExpanded: i,
+                onClick: () => f(i ? null : n),
+                children: m.map((C, y) => /* @__PURE__ */ e(t.Cell, { align: C.align, children: a[y] }, y))
+              }
+            ),
+            i && /* @__PURE__ */ e(t.Row, { isExpandedContent: !0, children: /* @__PURE__ */ e(t.Cell, { colSpan: m.length, children: /* @__PURE__ */ l("div", { style: { padding: "0.5rem" }, children: [
+              "Expanded content for Item ",
+              n + 1
+            ] }) }) })
+          ] }, n);
+        }) })
+      ] }),
+      /* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ e("button", { type: "button", onClick: () => s((r) => Math.max(0, r - 1)), children: "Remove Row" }),
+        /* @__PURE__ */ e("button", { type: "button", onClick: () => s((r) => r + 1), children: "Add Row" }),
+        /* @__PURE__ */ l("button", { type: "button", onClick: () => o((r) => !r), children: [
+          "Toggle Price Alignment (",
+          h ? "right" : "left",
+          ")"
+        ] })
+      ] })
+    ] });
+  }, { ...u })
+}, K = {
   args: { alternatingRows: !1 },
-  render: (h) => /* @__PURE__ */ e((m) => {
-    const [d, g] = s("Product"), [u, r] = s(void 0), [a, y] = s("descending"), [p] = s(5), c = [
+  render: (u) => /* @__PURE__ */ e((p) => {
+    const [g, s] = d("Product"), [h, o] = d(void 0), [c, f] = d("descending"), [m] = d(5), r = [
       { title: "Product", align: "left", sortField: "Product" },
       { title: "Qty", align: "center", sortField: "Qty" },
       { title: "Price", align: "right", sortField: "Price" },
@@ -120,58 +180,59 @@ const v = {
       { title: "Status", align: "center", sortField: "Status" },
       { title: "Location", align: "left", sortField: "Location" },
       { title: "Notes", align: "left", sortField: "Notes" }
-    ], n = (i, o) => {
-      const f = i === d && o === u;
-      y((C) => f && C === "descending" ? "ascending" : "descending"), g(i), r(o);
+    ], n = (i, a) => {
+      const C = i === g && a === h;
+      f((y) => C && y === "descending" ? "ascending" : "descending"), s(i), o(a);
     };
-    return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
+    return /* @__PURE__ */ l("div", { className: x["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
       /* @__PURE__ */ l(
         t,
         {
-          ...m,
+          ...p,
           isSortable: !0,
-          sortField: d,
-          sortFieldKey: u,
-          sortOrder: a,
+          sortField: g,
+          sortFieldKey: h,
+          sortOrder: c,
           onSort: n,
           children: [
-            /* @__PURE__ */ e(t.Columns, { children: c.map((i, o) => /* @__PURE__ */ e(t.Column, { align: i.align, sortField: i.sortField, sortFieldKey: i.sortFieldKey, children: i.title }, o)) }),
-            /* @__PURE__ */ e(t.Body, { children: Array.from({ length: p }).map((i, o) => /* @__PURE__ */ l(t.Row, { children: [
-              /* @__PURE__ */ e(t.Cell, { children: `Item ${o + 1} – Responsive Test` }),
-              /* @__PURE__ */ e(t.Cell, { align: "center", children: o + 1 }),
+            /* @__PURE__ */ e(t.Columns, { children: r.map((i, a) => /* @__PURE__ */ e(t.Column, { align: i.align, sortField: i.sortField, sortFieldKey: i.sortFieldKey, children: i.title }, a)) }),
+            /* @__PURE__ */ e(t.Body, { children: Array.from({ length: m }).map((i, a) => /* @__PURE__ */ l(t.Row, { children: [
+              /* @__PURE__ */ e(t.Cell, { children: `Item ${a + 1} – Responsive Test` }),
+              /* @__PURE__ */ e(t.Cell, { align: "center", children: a + 1 }),
               /* @__PURE__ */ l(t.Cell, { align: "right", children: [
                 "$",
-                (o + 1) * 10
+                (a + 1) * 10
               ] }),
               /* @__PURE__ */ e(t.Cell, { children: "Acme Corp" }),
               /* @__PURE__ */ e(t.Cell, { children: "Connectors" }),
-              /* @__PURE__ */ e(t.Cell, { children: `CP-${1e3 + o}-SKU` }),
-              /* @__PURE__ */ e(t.Cell, { align: "center", children: o % 2 === 0 ? "Backordered" : "In Stock" }),
+              /* @__PURE__ */ e(t.Cell, { children: `CP-${1e3 + a}-SKU` }),
+              /* @__PURE__ */ e(t.Cell, { align: "center", children: a % 2 === 0 ? "Backordered" : "In Stock" }),
               /* @__PURE__ */ e(t.Cell, { children: "Warehouse Delta – Aisle 12B" }),
               /* @__PURE__ */ e(t.Cell, { children: "Long note to test overflow behavior and truncation" })
-            ] }, o)) })
+            ] }, a)) })
           ]
         }
       ),
       /* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
-        /* @__PURE__ */ l("button", { type: "button", onClick: () => y((i) => i === "descending" ? "ascending" : "descending"), children: [
+        /* @__PURE__ */ l("button", { type: "button", onClick: () => f((i) => i === "descending" ? "ascending" : "descending"), children: [
           "Toggle Order (",
-          a,
+          c,
           ")"
         ] }),
         /* @__PURE__ */ e("button", { type: "button", onClick: () => {
-          g("Price"), r(void 0);
+          s("Price"), o(void 0);
         }, children: "Sort by Price" }),
         /* @__PURE__ */ e("button", { type: "button", onClick: () => {
-          g("Attribute"), r(1001);
+          s("Attribute"), o(1001);
         }, children: "Sort by SKU (key 1001)" })
       ] })
     ] });
-  }, { ...h })
+  }, { ...u })
 };
 export {
-  I as Default,
+  E as Default,
   $ as ExpandableRow,
-  E as Sortable,
+  D as ExpandableRowFragment,
+  K as Sortable,
   v as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.148",
+  "version": "0.0.150",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/Table-DwAM6AAI.js

@@ -1,178 +0,0 @@
-import { jsxs as K, jsx as s } from "react/jsx-runtime";
-import c from "react";
-import { c as C } from "./clsx-OuTLNxxd.js";
-import { Icon as Y } from "./atoms/Icon/Icon.js";
-import './assets/Table.css';const Z = "_table_14k11_2", $ = "_noPaddingRow_14k11_71", I = "_clickableRow_14k11_82", P = "_clickableCell_14k11_83", ee = "_expandedContentCell_14k11_85", ne = "_expandedContentRow_14k11_94", te = "_expandedRow_14k11_99", le = "_expanded_14k11_85", ae = "_columnContent_14k11_135", oe = "_clickableHeader_14k11_155", n = {
-  "table-container": "_table-container_14k11_2",
-  table: Z,
-  "table-alternating": "_table-alternating_14k11_17",
-  "sorted-column": "_sorted-column_14k11_22",
-  noPaddingRow: $,
-  clickableRow: I,
-  clickableCell: P,
-  expandedContentCell: ee,
-  expandedContentRow: ne,
-  expandedRow: te,
-  expanded: le,
-  columnContent: ae,
-  clickableHeader: oe,
-  "icon-ascending": "_icon-ascending_14k11_156"
-}, S = ({ children: r }) => null;
-S.displayName = "Table.Columns";
-const V = ({ children: r }) => null;
-V.displayName = "Table.Column";
-const v = ({ children: r }) => null;
-v.displayName = "Table.Body";
-const j = ({ children: r }) => null;
-j.displayName = "Table.Row";
-const M = ({ children: r }) => null;
-M.displayName = "Table.Cell";
-const y = ({ children: r, className: O, alternatingRows: z = !1, isSortable: w = !1, sortField: D, sortFieldKey: q, sortOrder: G = "descending", onSort: F, ...J }) => {
-  const A = [];
-  let x, R;
-  const i = (t, l) => {
-    var e;
-    return !!t && c.isValidElement(t) && ((e = t.type) == null ? void 0 : e.displayName) === l;
-  };
-  c.Children.forEach(r, (t) => {
-    i(t, "Table.Columns") ? x = t : i(t, "Table.Body") ? R = t : A.push(t);
-  });
-  const L = (t) => t.flatMap((l) => {
-    if (c.isValidElement(l) && l.type === c.Fragment) {
-      const e = l.props.children;
-      return c.Children.toArray(e);
-    }
-    return [l];
-  }), Q = () => {
-    if (!x) return null;
-    const t = c.Children.toArray(x.props.children);
-    return /* @__PURE__ */ s("thead", { className: n.thead, children: /* @__PURE__ */ s("tr", { children: t.map((l, e) => {
-      if (i(l, "Table.Column")) {
-        const a = l, {
-          children: d,
-          align: m,
-          colSpan: g,
-          width: b,
-          style: N,
-          sortField: p,
-          sortFieldKey: o,
-          ...h
-        } = a.props, E = {
-          textAlign: m ?? "left",
-          width: b,
-          ...N
-        }, u = !!p, f = w && u && (u && D === p) && (o !== void 0 ? q === o : !0), k = w && u && typeof F == "function";
-        return /* @__PURE__ */ s(
-          "th",
-          {
-            className: C(n.th, f && n["sorted-column"], k && n.clickableHeader),
-            style: E,
-            colSpan: g,
-            onClick: k ? () => F(p, o) : void 0,
-            ...h,
-            children: /* @__PURE__ */ K("div", { className: n.columnContent, children: [
-              d,
-              f && /* @__PURE__ */ s("span", { className: C(G === "ascending" && n["icon-ascending"]), children: /* @__PURE__ */ s(Y, { iconKey: "fa-solid fa-chevron-down", size: "3xs" }) })
-            ] })
-          },
-          e
-        );
-      }
-      return /* @__PURE__ */ s("th", { className: n.th, children: l }, e);
-    }) }) });
-  }, _ = (t, l, e) => {
-    const a = c.Children.toArray(t).map((o, h) => {
-      if (i(o, "Table.Cell")) {
-        const E = o, {
-          children: u,
-          align: H,
-          colSpan: B,
-          width: f,
-          style: k,
-          ...T
-        } = E.props, W = {
-          textAlign: H ?? "left",
-          width: f,
-          ...k
-        }, X = !!(T && typeof T.onClick == "function");
-        return /* @__PURE__ */ s(
-          "td",
-          {
-            className: C(
-              n.cell,
-              (e == null ? void 0 : e.isExpanded) && n.expanded,
-              (e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell,
-              X && n.clickableCell
-            ),
-            style: W,
-            colSpan: B,
-            ...T,
-            children: u
-          },
-          h
-        );
-      }
-      return c.isValidElement(o) && typeof o.type == "string" && o.type === "td" ? o : /* @__PURE__ */ s(
-        "td",
-        {
-          className: C(
-            n.cell,
-            (e == null ? void 0 : e.isExpanded) && n.expanded,
-            (e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell
-          ),
-          children: o
-        },
-        h
-      );
-    }), { className: d, style: m, isExpanded: g, isExpandedContent: b, ...N } = e ?? {}, p = !!(e && typeof e.onClick == "function");
-    return /* @__PURE__ */ s(
-      "tr",
-      {
-        className: C(
-          n.row,
-          d,
-          g && n.expandedRow,
-          b && n.noPaddingRow,
-          b && n.expandedContentRow,
-          p && n.clickableRow
-        ),
-        style: m,
-        ...N,
-        children: a
-      },
-      l
-    );
-  }, U = () => {
-    if (R) {
-      const e = c.Children.toArray(R.props.children).map((a, d) => {
-        if (i(a, "Table.Row")) {
-          const m = a;
-          return _(m.props.children, d, m.props);
-        }
-        return c.isValidElement(a) && typeof a.type == "string" && a.type === "tr" ? a : _(a, d);
-      });
-      return /* @__PURE__ */ s("tbody", { className: n.tbody, children: e });
-    }
-    const l = L(A).map((e, a) => {
-      if (i(e, "Table.Row")) {
-        const d = e;
-        return _(d.props.children, a, d.props);
-      }
-      return c.isValidElement(e) && typeof e.type == "string" && e.type === "tr" ? e : _(e, a);
-    });
-    return /* @__PURE__ */ s("tbody", { className: n.tbody, children: l });
-  };
-  return /* @__PURE__ */ K("table", { className: C(n.table, O, z && n["table-alternating"]), ...J, children: [
-    Q(),
-    U()
-  ] });
-};
-y.Columns = S;
-y.Column = V;
-y.Body = v;
-y.Row = j;
-y.Cell = M;
-export {
-  y as T,
-  n as s
-};