@crispy-seed/data-table 0.1.0

package/dist/DataTable-12s-8LMBtS2u.cjs

@@ -0,0 +1,1532 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+var domUtils = require('@seed-design/dom-utils');
+var reactPrimitive = require('@seed-design/react-primitive');
+var checkbox = require('@seed-design/css/recipes/checkbox');
+var checkmark = require('@seed-design/css/recipes/checkmark');
+var reactCheckbox = require('@seed-design/react-checkbox');
+var reactScaleFeedback = require('@seed-design/react-scale-feedback');
+var checkboxGroup = require('@seed-design/css/recipes/checkbox-group');
+var bodyCells12s = require('./body-cells-12s-BoOTcg-l.cjs');
+var columnCalc12s = require('./column-calc-12s-CKuSpe-l.cjs');
+var columnLayout12s = require('./column-layout-12s-CTu5yT_D.cjs');
+var columnMenu12s = require('./column-menu-12s-BPE9N1gs.cjs');
+var states12s = require('./states-12s-CLO_uVue.cjs');
+var toolbar12s = require('./toolbar-12s-CaLgJrDo.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/IconChevronDownLine.tsx
+var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M21.2612 7.27589C20.8613 6.89499 20.2283 6.9104 19.8474 7.31032L11.9996 15.55L4.15284 7.31037C3.77196 6.91043 3.13899 6.89497 2.73904 7.27584C2.3391 7.65671 2.32364 8.28969 2.70451 8.68963L11.2754 17.6896C11.4641 17.8878 11.7258 18 11.9995 18C12.2732 18 12.5349 17.8879 12.7236 17.6897L21.2956 8.68968C21.6765 8.28976 21.6611 7.65679 21.2612 7.27589Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$a);
+var IconChevronDownLine_default = IconChevronDownLine;
+
+// src/IconChevronUpLine.tsx
+var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M21.2612 16.7241C20.8613 17.105 20.2283 17.0896 19.8474 16.6897L11.9996 8.45L4.15284 16.6896C3.77196 17.0896 3.13899 17.105 2.73904 16.7242C2.3391 16.3433 2.32364 15.7103 2.70451 15.3104L11.2754 6.31037C11.4641 6.11218 11.7258 6.00001 11.9995 6C12.2732 5.99999 12.5349 6.11215 12.7236 6.31032L21.2956 15.3103C21.6765 15.7102 21.6611 16.3432 21.2612 16.7241Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$9);
+var IconChevronUpLine_default = IconChevronUpLine;
+
+// src/IconDot3HorizontalLine.tsx
+var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M4.625 10.375C3.72754 10.375 3 11.1025 3 12C3 12.8975 3.72754 13.625 4.625 13.625C5.52246 13.625 6.25 12.8975 6.25 12C6.25 11.1025 5.52246 10.375 4.625 10.375Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M12.075 10.375C11.1775 10.375 10.45 11.1025 10.45 12C10.45 12.8975 11.1775 13.625 12.075 13.625C12.9724 13.625 13.7 12.8975 13.7 12C13.7 11.1025 12.9724 10.375 12.075 10.375Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M19.375 10.375C18.4775 10.375 17.75 11.1025 17.75 12C17.75 12.8975 18.4775 13.625 19.375 13.625C20.2725 13.625 21 12.8975 21 12C21 11.1025 20.2725 10.375 19.375 10.375Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$8);
+var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
+
+// src/IconMagnifyingglassLine.tsx
+var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M11.3111 1.2002C6.00313 1.2002 1.69995 5.49902 1.69995 10.8048V10.8178C1.69995 16.1236 6.00313 20.4224 11.3111 20.4224C13.5994 20.4224 15.711 19.6233 17.3631 18.2785L21.493 22.4083C21.8835 22.7988 22.5167 22.7988 22.9072 22.4083C23.2977 22.0177 23.2977 21.3846 22.9072 20.9941L18.777 16.864C20.1196 15.2095 20.9222 13.0996 20.9222 10.8048C20.9222 5.49902 16.619 1.2002 11.3111 1.2002ZM3.69995 10.8048C3.69995 6.60502 7.10627 3.2002 11.3111 3.2002C15.5159 3.2002 18.9222 6.60502 18.9222 10.8048C18.9222 13.0794 17.9298 15.1209 16.3465 16.5182L16.3446 16.52C15.0067 17.707 13.2419 18.4224 11.3111 18.4224C7.10627 18.4224 3.69995 15.0176 3.69995 10.8178V10.8048Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconMagnifyingglassLine = /*#__PURE__*/ React.forwardRef(Icon$7);
+var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
+
+// src/IconSlider2HorizontalLine.tsx
+var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M9.99331 7.24609H3C2.44772 7.24609 2 6.79838 2 6.24609C2 5.69381 2.44772 5.24609 3 5.24609H9.99331C10.443 3.38141 12.1222 1.99609 14.125 1.99609C16.1278 1.99609 17.807 3.38141 18.2567 5.24609H21C21.5523 5.24609 22 5.69381 22 6.24609C22 6.79838 21.5523 7.24609 21 7.24609H18.2567C17.807 9.11078 16.1278 10.4961 14.125 10.4961C12.1222 10.4961 10.443 9.11078 9.99331 7.24609ZM11.875 6.24609C11.875 5.00345 12.8824 3.99609 14.125 3.99609C15.3676 3.99609 16.375 5.00345 16.375 6.24609C16.375 7.48873 15.3676 8.49609 14.125 8.49609C12.8824 8.49609 11.875 7.48873 11.875 6.24609Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M6.25 13.4956C3.90279 13.4956 2 15.3984 2 17.7456C2 20.0928 3.90279 21.9956 6.25 21.9956C8.25016 21.9956 9.92761 20.6139 10.3799 18.7529L20.9996 18.7456C21.5518 18.7452 21.9993 18.2972 21.9989 17.7449C21.9985 17.1926 21.5505 16.7452 20.9982 16.7456L10.3834 16.7529C9.93635 14.8845 8.25537 13.4956 6.25 13.4956ZM4 17.7456C4 16.503 5.00736 15.4956 6.25 15.4956C7.49264 15.4956 8.5 16.503 8.5 17.7456C8.5 18.9882 7.49264 19.9956 6.25 19.9956C5.00736 19.9956 4 18.9882 4 17.7456Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconSlider2HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$6);
+var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
+
+// src/IconPersonCircleLine.tsx
+var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M12 5.5C9.79172 5.5 8 7.29172 8 9.5C8 11.7083 9.79172 13.5 12 13.5C14.2083 13.5 16 11.7083 16 9.5C16 7.29172 14.2083 5.5 12 5.5ZM10 9.5C10 8.39628 10.8963 7.5 12 7.5C13.1037 7.5 14 8.39628 14 9.5C14 10.6037 13.1037 11.5 12 11.5C10.8963 11.5 10 10.6037 10 9.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M1 12C1 5.92772 5.92772 1 12 1C18.0723 1 23 5.92772 23 12C23 18.0723 18.0723 23 12 23C5.92772 23 1 18.0723 1 12ZM12 3C7.03229 3 3 7.03229 3 12C3 14.3609 3.91073 16.5105 5.39977 18.1164C5.87422 17.4277 6.5536 16.8564 7.3236 16.4211C8.60413 15.6971 10.2434 15.2793 12.0002 15.2793C13.757 15.2793 15.3962 15.6971 16.6768 16.4211C17.4467 16.8564 18.126 17.4276 18.6004 18.1162C20.0894 16.5103 21 14.3608 21 12C21 7.03229 16.9677 3 12 3ZM12 21C10.1211 21 8.3761 20.4232 6.93241 19.4372C7.17777 18.9952 7.62665 18.5473 8.30791 18.1621C9.25286 17.6279 10.5454 17.2793 12.0002 17.2793C13.455 17.2793 14.7475 17.6279 15.6925 18.1621C16.3736 18.5472 16.8225 18.9951 17.0679 19.437C15.6241 20.4231 13.879 21 12 21Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconPersonCircleLine = /*#__PURE__*/ React.forwardRef(Icon$5);
+var IconPersonCircleLine_default = IconPersonCircleLine;
+
+// src/IconPlusLine.tsx
+var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                d: "M4 13H11V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20V13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H13V4C13 3.45 12.55 3 12 3C11.45 3 11 3.45 11 4V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconPlusLine = /*#__PURE__*/ React.forwardRef(Icon$4);
+var IconPlusLine_default = IconPlusLine;
+
+// src/IconMinusLine.tsx
+var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                d: "M4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconMinusLine = /*#__PURE__*/ React.forwardRef(Icon$3);
+var IconMinusLine_default = IconMinusLine;
+
+// src/IconCheckmarkLine.tsx
+var Icon$2 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M22.1186 3.71436C22.5526 4.05602 22.6273 4.68476 22.2857 5.11868L10.4749 20.1187C10.2958 20.3461 10.0269 20.4848 9.73779 20.4989C9.44865 20.5129 9.1676 20.401 8.96728 20.192L1.77809 12.692C1.39592 12.2933 1.40931 11.6603 1.80801 11.2781C2.20671 10.896 2.83973 10.9094 3.22191 11.3081L9.61511 17.9777L20.7143 3.88141C21.056 3.44749 21.6847 3.3727 22.1186 3.71436Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconCheckmarkLine = /*#__PURE__*/ React.forwardRef(Icon$2);
+var IconCheckmarkLine_default = IconCheckmarkLine;
+
+// src/IconChevronDownSmallLine.tsx
+var Icon$1 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M6.29436 9.29143C6.68569 8.90171 7.31886 8.90303 7.70857 9.29436L11.9848 13.5884L16.297 9.3256C16.6897 8.93733 17.3229 8.94097 17.7112 9.33374C18.0994 9.7265 18.0958 10.3597 17.703 10.7479L12.6823 15.7112C12.2906 16.0984 11.6594 16.096 11.2707 15.7056L6.29143 10.7056C5.90171 10.3143 5.90303 9.68114 6.29436 9.29143Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconChevronDownSmallLine = /*#__PURE__*/ React.forwardRef(Icon$1);
+var IconChevronDownSmallLine_default = IconChevronDownSmallLine;
+
+// src/IconCheckmarkFatFill.tsx
+var Icon = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-seed-icon": "true",
+        width: size,
+        height: size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", {
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                d: "M22.5517 3.16422C21.8141 2.5834 20.7452 2.71054 20.1644 3.4482L9.56331 16.9118L3.72729 10.8235C3.07759 10.1457 2.00145 10.1229 1.32367 10.7726C0.645881 11.4223 0.623111 12.4985 1.27281 13.1763L8.462 20.6763C8.80254 21.0315 9.28032 21.2218 9.77186 21.1979C10.2634 21.174 10.7205 20.9382 11.0249 20.5516L22.8357 5.55155C23.4165 4.81389 23.2894 3.74505 22.5517 3.16422Z",
+                fill: "currentColor"
+            })
+        })
+    });
+var IconCheckmarkFatFill = /*#__PURE__*/ React.forwardRef(Icon);
+var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
+
+function r(e) {
+    var t, f, n = "";
+    if ("string" == typeof e || "number" == typeof e) n += e;
+    else if ("object" == typeof e) if (Array.isArray(e)) {
+        var o = e.length;
+        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else for(f in e)e[f] && (n && (n += " "), n += f);
+    return n;
+}
+function clsx() {
+    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+    return n;
+}
+
+function splitMultipleVariantsProps(props, recipesMap) {
+    const multipleVariantsProps = {};
+    const extractedKeys = new Set();
+    for(const recipeKey in recipesMap){
+        const recipe = recipesMap[recipeKey];
+        const [variantProps] = recipe.splitVariantProps(props);
+        multipleVariantsProps[recipeKey] = variantProps;
+        for(const variantPropKey in variantProps){
+            extractedKeys.add(variantPropKey);
+        }
+    }
+    const remainingProps = {};
+    for(const propKey in props){
+        if (extractedKeys.has(propKey)) continue;
+        remainingProps[propKey] = props[propKey];
+    }
+    return [
+        multipleVariantsProps,
+        remainingProps
+    ];
+}
+
+/** Restores defaults overwritten by explicitly passed undefined values. */ function restoreDefaultProps(props, defaultProps) {
+    if (!defaultProps) return;
+    for (const key of Object.keys(defaultProps)){
+        if (props[key] === undefined) {
+            props[key] = defaultProps[key];
+        }
+    }
+}
+
+function createSlotRecipeContext(recipe) {
+    const ClassNamesContext = /*#__PURE__*/ React.createContext(null);
+    const PropsContext = /*#__PURE__*/ React.createContext(null);
+    const ClassNamesProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    const PropsProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsxRuntime.jsx(PropsContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useClassNames() {
+        const context = React.useContext(ClassNamesContext);
+        if (context === null) {
+            throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
+        }
+        return context;
+    }
+    function useProps() {
+        return React.useContext(PropsContext);
+    }
+    const withRootProvider = (Component, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = (innerProps)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    ...otherProps
+                })
+            });
+        };
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withProvider = (Component, slot, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = /*#__PURE__*/ React.forwardRef((innerProps, ref)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const classNames = recipe(variantProps); // TODO: should we memoize this?
+            const className = classNames[slot];
+            return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
+                value: classNames,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    ref: ref,
+                    ...otherProps,
+                    className: clsx(className, props.className)
+                })
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withContext = (Component, slot)=>{
+        const StyledComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+            const classNames = useClassNames();
+            const className = classNames?.[slot];
+            return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                ref: ref,
+                ...props,
+                className: clsx(className, props.className)
+            });
+        });
+        // @ts-ignore
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    return {
+        ClassNamesProvider,
+        PropsProvider,
+        useClassNames,
+        useProps,
+        withRootProvider,
+        withProvider,
+        withContext
+    };
+}
+
+function createWithStateProps(useContexts) {
+    return function withStateProps(Component) {
+        const Node = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+            const stateProps = {};
+            for (const contextConfig of useContexts){
+                if (typeof contextConfig === "function") {
+                    Object.assign(stateProps, contextConfig({
+                        strict: true
+                    })?.stateProps);
+                } else {
+                    const { useContext, strict = false } = contextConfig;
+                    Object.assign(stateProps, useContext({
+                        strict
+                    })?.stateProps);
+                }
+            }
+            // @ts-ignore
+            return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                ref: ref,
+                ...stateProps,
+                ...props
+            });
+        });
+        Node.displayName = Component.displayName || Component.name;
+        return Node;
+    };
+}
+
+var __defProp$1 = Object.defineProperty;
+var __name$1 = (target, value)=>__defProp$1(target, "name", {
+        value,
+        configurable: true
+    });
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        return ref(value);
+    } else if (ref !== null && ref !== void 0) {
+        ref.current = value;
+    }
+}
+__name$1(setRef, "setRef");
+function composeRefs(...refs) {
+    return (node)=>{
+        let hasCleanup = false;
+        const cleanups = refs.map((ref)=>{
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup == "function") {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+        if (hasCleanup) {
+            return ()=>{
+                for(let i = 0; i < cleanups.length; i++){
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup == "function") {
+                        cleanup();
+                    } else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+    };
+}
+__name$1(composeRefs, "composeRefs");
+function useComposedRefs(...refs) {
+    return React__namespace.useCallback(composeRefs(...refs), refs);
+}
+__name$1(useComposedRefs, "useComposedRefs");
+
+function withScaleFeedback(Component) {
+    const Pressable = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
+        const { scaleFeedbackRef, scaleFeedbackClassName } = reactScaleFeedback.useScaleFeedback();
+        const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+        return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+            ...props,
+            ref: composedRef,
+            className: clsx(scaleFeedbackClassName, props.className)
+        });
+    });
+    Pressable.displayName = Component.displayName;
+    return Pressable;
+}
+
+var __defProp = Object.defineProperty;
+var __name = (target, value)=>__defProp(target, "name", {
+        value,
+        configurable: true
+    });
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+    const Slot2 = /*#__PURE__*/ React__namespace.forwardRef((props, forwardedRef)=>{
+        let { children, ...slotProps } = props;
+        let slottableElement = null;
+        let hasSlottable = false;
+        const newChildren = [];
+        if (isLazyComponent(children) && typeof use === "function") {
+            children = use(children._payload);
+        }
+        React__namespace.Children.forEach(children, (maybeSlottable)=>{
+            if (isSlottable(maybeSlottable)) {
+                hasSlottable = true;
+                const slottable = maybeSlottable;
+                let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+                if (isLazyComponent(child) && typeof use === "function") {
+                    child = use(child._payload);
+                }
+                slottableElement = getSlottableElementFromSlottable(slottable, child);
+                newChildren.push(slottableElement?.props?.children);
+            } else {
+                newChildren.push(maybeSlottable);
+            }
+        });
+        if (slottableElement) {
+            slottableElement = /*#__PURE__*/ React__namespace.cloneElement(slottableElement, void 0, newChildren);
+        } else if (// A `Slottable` was found but it didn't resolve to a single element (e.g.
+        // it wrapped multiple elements, text, or a render-prop `child` that
+        // wasn't an element). Don't fall back to treating the `Slottable` wrapper
+        // itself as the slot target — throw a descriptive error below instead.
+        !hasSlottable && React__namespace.Children.count(children) === 1 && /*#__PURE__*/ React__namespace.isValidElement(children)) {
+            slottableElement = children;
+        }
+        const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+        const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+        if (!slottableElement) {
+            if (children || children === 0) {
+                throw new Error(hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName));
+            }
+            return children;
+        }
+        const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+        if (slottableElement.type !== React__namespace.Fragment) {
+            mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+        }
+        return /*#__PURE__*/ React__namespace.cloneElement(slottableElement, mergedProps);
+    });
+    Slot2.displayName = `${ownerName}.Slot`;
+    return Slot2;
+}
+__name(createSlot, "createSlot");
+var Slot = /* @__PURE__ */ createSlot("Slot");
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+    const Slottable2 = /* @__PURE__ */ __name((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
+    Slottable2.displayName = `${ownerName}.Slottable`;
+    Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+    return Slottable2;
+}
+__name(createSlottable, "createSlottable");
+var getSlottableElementFromSlottable = /* @__PURE__ */ __name((slottable, child)=>{
+    if ("child" in slottable.props) {
+        const child2 = slottable.props.child;
+        if (!/*#__PURE__*/ React__namespace.isValidElement(child2)) return null;
+        return /*#__PURE__*/ React__namespace.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+    }
+    return /*#__PURE__*/ React__namespace.isValidElement(child) ? child : null;
+}, "getSlottableElementFromSlottable");
+function mergeProps(slotProps, childProps) {
+    const overrideProps = {
+        ...childProps
+    };
+    for(const propName in childProps){
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            if (slotPropValue && childPropValue) {
+                overrideProps[propName] = (...args)=>{
+                    const result = childPropValue(...args);
+                    slotPropValue(...args);
+                    return result;
+                };
+            } else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        } else if (propName === "style") {
+            overrideProps[propName] = {
+                ...slotPropValue,
+                ...childPropValue
+            };
+        } else if (propName === "className") {
+            overrideProps[propName] = [
+                slotPropValue,
+                childPropValue
+            ].filter(Boolean).join(" ");
+        }
+    }
+    return {
+        ...slotProps,
+        ...overrideProps
+    };
+}
+__name(mergeProps, "mergeProps");
+function getElementRef(element) {
+    let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+    let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return element.ref;
+    }
+    getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+    mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return element.props.ref;
+    }
+    return element.props.ref || element.ref;
+}
+__name(getElementRef, "getElementRef");
+function isSlottable(child) {
+    return /*#__PURE__*/ React__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+__name(isSlottable, "isSlottable");
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+    return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+__name(isLazyComponent, "isLazyComponent");
+function isPromiseLike(value) {
+    return typeof value === "object" && value !== null && "then" in value;
+}
+__name(isPromiseLike, "isPromiseLike");
+var createSlotError = /* @__PURE__ */ __name((ownerName)=>{
+    return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+}, "createSlotError");
+var createSlottableError = /* @__PURE__ */ __name((ownerName)=>{
+    return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+}, "createSlottableError");
+var use = React__namespace[" use ".trim().toString()];
+
+const InternalIcon = /*#__PURE__*/ React.forwardRef(({ svg, ...otherProps }, ref)=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(Slot, {
+        ref: ref,
+        "aria-hidden": true,
+        ...otherProps,
+        children: svg
+    });
+});
+
+function createRecipeContext(recipe) {
+    const PropsContext = /*#__PURE__*/ React.createContext(null);
+    const PropsProvider = ({ children, value })=>{
+        return /*#__PURE__*/ jsxRuntime.jsx(PropsContext.Provider, {
+            value: value,
+            children: children
+        });
+    };
+    function useProps() {
+        return React.useContext(PropsContext);
+    }
+    const withContext = (Component, options)=>{
+        const { defaultProps } = options ?? {};
+        const StyledComponent = /*#__PURE__*/ React.forwardRef((innerProps, ref)=>{
+            const props = {
+                ...defaultProps ?? {},
+                ...useProps(),
+                ...innerProps
+            };
+            restoreDefaultProps(props, defaultProps);
+            const [variantProps, otherProps] = recipe.splitVariantProps(props);
+            const className = recipe(variantProps); // TODO: should we memoize this?
+            return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                ref: ref,
+                ...otherProps,
+                className: clsx(className, props.className)
+            });
+        });
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    function withPropsProvider() {
+        return PropsProvider;
+    }
+    return {
+        PropsProvider,
+        useProps,
+        withContext,
+        withPropsProvider
+    };
+}
+
+const { withContext: withGroupContext } = createRecipeContext(checkboxGroup.checkboxGroup);
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$1 } = createSlotRecipeContext(checkbox.checkbox);
+const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark.checkmark);
+const withStateProps = createWithStateProps([
+    reactCheckbox.useCheckboxContext
+]);
+withGroupContext(reactPrimitive.Primitive.div);
+const CheckboxRoot = Object.assign(/*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
+    const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
+        checkbox: checkbox.checkbox,
+        checkmark: checkmark.checkmark
+    });
+    const classNames = checkbox.checkbox(checkboxVariantProps);
+    return /*#__PURE__*/ jsxRuntime.jsx(CheckmarkPropsProvider, {
+        value: checkmarkVariantProps,
+        children: /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider$1, {
+            value: classNames,
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactCheckbox.Checkbox.Root, {
+                ref: ref,
+                className: clsx(classNames.root, className),
+                ...otherProps
+            })
+        })
+    });
+}), {
+    Primitive: reactCheckbox.Checkbox.Root
+});
+const CheckboxControl = withScaleFeedback(withCheckmarkProvider(reactCheckbox.Checkbox.Control, "root"));
+const CheckboxIndicator = /*#__PURE__*/ React.forwardRef(({ unchecked: uncheckedSvg, checked: checkedSvg, indeterminate: indeterminateSvg, ...otherProps }, ref)=>{
+    const { stateProps, checked, indeterminate } = reactCheckbox.useCheckboxContext();
+    const classNames = useCheckmarkClassNames();
+    const mergedProps = domUtils.mergeProps(stateProps, {
+        className: classNames.icon
+    }, otherProps);
+    if (indeterminate && !indeterminateSvg) {
+        console.warn("CheckboxIndicator: the `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
+    }
+    if (indeterminate) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
+        ref: ref,
+        svg: indeterminateSvg,
+        ...mergedProps
+    });
+    if (checked) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
+        ref: ref,
+        svg: checkedSvg,
+        ...mergedProps
+    });
+    if (uncheckedSvg) return /*#__PURE__*/ jsxRuntime.jsx(InternalIcon, {
+        ref: ref,
+        svg: uncheckedSvg,
+        ...mergedProps
+    });
+    return null;
+});
+CheckboxIndicator.displayName = "CheckboxIndicator";
+const CheckboxLabel = withContext$1(withStateProps(reactPrimitive.Primitive.span), "label");
+const CheckboxHiddenInput = reactCheckbox.Checkbox.HiddenInput;
+
+// Row-narrowing for the toolbar's search box and each column's filter picker -- split
+// out of DataTable.tsx the way cells.tsx splits out cell-type rendering: both are a
+// self-contained, independently testable concern DataTable.tsx just calls, rather than
+// inline `.filter()`/`.sort()` calls piling up in the same component that also owns
+// markup.
+/**
+ * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
+ * the single accessor sort/search/filter/export all read through
+ * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
+ * read a value ONCE rather than once per feature.
+ */ function getColumnValue(column, row) {
+    return column.value ? column.value(row) : row[column.key];
+}
+/**
+ * Case-insensitive substring match against a row's stringified value -- crisp's own
+ * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
+ * toolbar's single free-text query rather than a per-column condition. `null`/
+ * `undefined` never match a non-empty query -- there is no text to search.
+ */ function matchesSearch(value, query) {
+    if (!query) return true;
+    if (value == null) return false;
+    return String(value).toLowerCase().includes(query.toLowerCase());
+}
+/**
+ * A column's own filter predicate -- "is"/"is not" against a SET of checked values.
+ * One checked value reads as "is X", several as crisp's "is any of X, Y": the exact
+ * same predicate, just more values in the set (crisp's own `applyFilters`,
+ * `tabletoolbar.tsx`: `isanyof` is membership-in-`values`, `is`/`isnot` is equality --
+ * both compare the stringified value, case-insensitively, never a substring). An empty
+ * `values` (the picker is open, nothing checked yet) matches every row -- crisp's own
+ * `applyFilters` drops an operator with nothing to compare against from its "active"
+ * set the same way, rather than treating "nothing checked" as "match nothing".
+ */ function matchesFilter(value, filter) {
+    if (filter.values.length === 0) return true;
+    const text = value == null ? "" : String(value).toLowerCase();
+    const isIncluded = filter.values.some((candidate)=>candidate.toLowerCase() === text);
+    return filter.mode === "isnot" ? !isIncluded : isIncluded;
+}
+/**
+ * The toolbar's search query (an OR across `searchable` columns, matching GRC's own
+ * `useFilteredRows`) THEN every column's own filter (an AND across active filters,
+ * matching crisp's `applyFilters`) -- in that order, since a filter chip narrows what
+ * the search box already found, not the other way round. A column with no active
+ * filter (absent from `filters`, or present with an empty `values`) is skipped
+ * entirely rather than treated as "filter out everything".
+ */ function getVisibleRows(data, columns, query, filters) {
+    const searchableColumns = columns.filter((column)=>column.searchable);
+    const activeFilters = Object.entries(filters).filter(([, filter])=>filter.values.length > 0);
+    if (!query && activeFilters.length === 0) return data;
+    return data.filter((row)=>{
+        if (query) {
+            const matchesQuery = searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query));
+            if (!matchesQuery) return false;
+        }
+        return activeFilters.every(([columnKey, filter])=>{
+            const column = columns.find((candidate)=>candidate.key === columnKey);
+            if (!column) return true;
+            return matchesFilter(getColumnValue(column, row), filter);
+        });
+    });
+}
+
+__insertCSS(".seed-data-table__root{box-sizing:border-box;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{flex:1 1 0%;max-width:280px}.seed-data-table__count{flex-shrink:0;margin-inline-start:auto;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+
+const createClassName = (className, variants, compoundVariants = [])=>{
+    const variantKeys = Object.keys(variants);
+    const variantValues = variantKeys.map((key)=>variants[key]);
+    const variantClassName = variantKeys.map((key, index)=>`${className}--${key}_${variantValues[index]}`).join(" ");
+    const compountVariantClassName = compoundVariants.filter((compoundVariant)=>Object.keys(compoundVariant).every((key)=>compoundVariant[key] === variants[key])).map((compoundVariant)=>`${className}--${Object.keys(compoundVariant).map((key)=>{
+            return `${key}_${compoundVariant[key]}`;
+        }).join("-")}`).join(" ");
+    return [
+        className,
+        variantClassName,
+        compountVariantClassName
+    ].filter(Boolean).join(" ");
+};
+function mergeVariants(a, b) {
+    const result = {
+        ...a
+    };
+    for(const k in b){
+        if (b[k] != null) {
+            result[k] = b[k];
+        }
+    }
+    return result;
+}
+function splitVariantProps(props, variantMap) {
+    const variantProps = {};
+    const otherProps = {};
+    for(const key in props){
+        if (variantMap[key] != null) {
+            variantProps[key] = props[key];
+        } else {
+            otherProps[key] = props[key];
+        }
+    }
+    return [
+        variantProps,
+        otherProps
+    ];
+}
+
+const dataTableSlotNames = [
+    [
+        "root",
+        "seed-data-table__root"
+    ],
+    [
+        "table",
+        "seed-data-table__table"
+    ],
+    [
+        "header",
+        "seed-data-table__header"
+    ],
+    [
+        "headerCell",
+        "seed-data-table__headerCell"
+    ],
+    [
+        "headerCellInner",
+        "seed-data-table__headerCellInner"
+    ],
+    [
+        "headerCellLabel",
+        "seed-data-table__headerCellLabel"
+    ],
+    [
+        "headerCellIcon",
+        "seed-data-table__headerCellIcon"
+    ],
+    [
+        "row",
+        "seed-data-table__row"
+    ],
+    [
+        "cell",
+        "seed-data-table__cell"
+    ],
+    [
+        "entity",
+        "seed-data-table__entity"
+    ],
+    [
+        "entityName",
+        "seed-data-table__entityName"
+    ],
+    [
+        "tagList",
+        "seed-data-table__tagList"
+    ],
+    [
+        "link",
+        "seed-data-table__link"
+    ],
+    [
+        "toolbar",
+        "seed-data-table__toolbar"
+    ],
+    [
+        "search",
+        "seed-data-table__search"
+    ],
+    [
+        "count",
+        "seed-data-table__count"
+    ],
+    [
+        "scrollArea",
+        "seed-data-table__scrollArea"
+    ],
+    [
+        "footer",
+        "seed-data-table__footer"
+    ],
+    [
+        "footerCell",
+        "seed-data-table__footerCell"
+    ],
+    [
+        "emptyState",
+        "seed-data-table__emptyState"
+    ],
+    [
+        "loadingState",
+        "seed-data-table__loadingState"
+    ],
+    [
+        "addRow",
+        "seed-data-table__addRow"
+    ],
+    [
+        "addRowCell",
+        "seed-data-table__addRowCell"
+    ],
+    [
+        "selectionCell",
+        "seed-data-table__selectionCell"
+    ]
+];
+const defaultVariant = {
+    "surface": "card",
+    "interactive": false
+};
+const compoundVariants = [];
+const dataTableVariantMap = {
+    "surface": [
+        "card",
+        "bleed"
+    ],
+    "interactive": [
+        true,
+        false
+    ]
+};
+function dataTable(props) {
+    return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
+        return [
+            slot,
+            createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
+        ];
+    }));
+}
+Object.assign(dataTable, {
+    splitVariantProps: (props)=>splitVariantProps(props, dataTableVariantMap)
+}); // @recipe(seed): data-table
+
+// The one `createSlotRecipeContext(dataTable)` call every sibling file in this
+// directory shares -- `ClassNamesProvider` and `withContext` must be the SAME
+// binding everywhere (a slot component built from a second, independent call would
+// read a DIFFERENT React context and never see the classNames `DataTableInner`
+// provides), so this is the one place that calls `createSlotRecipeContext`, and every
+// other file (`DataTable.tsx`, `column-menu.tsx`, `resize.tsx`, `column-calc.tsx`,
+// `toolbar.tsx`, `body-cells.tsx`, `editors.tsx`) imports its exports from here rather
+// than re-deriving its own.
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(dataTable);
+
+function DataTableInner(props, ref) {
+    const { columns, data, surface, className, locale = "en-US", sort, defaultSort, onSortChange, sortIcon, selectable, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel = "Select all rows", getRowSelectionLabel = ()=>"Select row", selectionCheckedIcon, selectionIndeterminateIcon, query, defaultQuery, onQueryChange, searchPlaceholder = "Search…", searchLabel = "Search table", filters, defaultFilters, onFiltersChange, showCount = true, countLabel, columnMenu = false, reorderable = true, resizable = true, columnOrder, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys, defaultHiddenColumnKeys, onHiddenColumnKeysChange, columnWidths, defaultColumnWidths, onColumnWidthsChange, columnLabels, defaultColumnLabels, onColumnLabelsChange, onColumnsChange, columnCalcOps, defaultColumnCalcOps, onColumnCalcOpsChange, stickyFirst = false, stickyLast = false, onEdit, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", loading = false, loadingLabel = "Loading...", error, empty = "No results.", onLoadMore, hasMore, loadingMore, scrollProps, ...restProps } = props;
+    const classNames = dataTable({
+        surface,
+        interactive
+    });
+    // The batteries-included DataTable owns the sort state (controllable) so it
+    // can actually reorder `data` -- the headless primitive only tracks which
+    // column/direction is active. A consumer that pre-sorts server-side can pass
+    // a controlled `sort`; this still sorts the rows it's given, which for
+    // already-sorted data is a no-op.
+    const [internalSort, setInternalSort] = React__namespace.useState(defaultSort);
+    const resolvedSort = sort !== undefined ? sort : internalSort;
+    const handleSortChange = React__namespace.useCallback((next)=>{
+        if (sort === undefined) setInternalSort(next);
+        onSortChange?.(next);
+    }, [
+        sort,
+        onSortChange
+    ]);
+    // Same shape as sort just above -- the headless primitive only tracks the ACTIVE
+    // query/filter state (it never sees `TRow`), this component owns the controllable
+    // state that actually narrows `data` (`getVisibleRows`, ./filtering.ts).
+    const [internalQuery, setInternalQuery] = React__namespace.useState(defaultQuery ?? "");
+    const resolvedQuery = query !== undefined ? query : internalQuery;
+    const handleQueryChange = React__namespace.useCallback((next)=>{
+        if (query === undefined) setInternalQuery(next);
+        onQueryChange?.(next);
+    }, [
+        query,
+        onQueryChange
+    ]);
+    const [internalFilters, setInternalFilters] = React__namespace.useState(defaultFilters ?? {});
+    const resolvedFilters = filters !== undefined ? filters : internalFilters;
+    const handleFiltersChange = React__namespace.useCallback((next)=>{
+        if (filters === undefined) setInternalFilters(next);
+        onFiltersChange?.(next);
+    }, [
+        filters,
+        onFiltersChange
+    ]);
+    const visibleRows = React__namespace.useMemo(()=>getVisibleRows(data, columns, resolvedQuery, resolvedFilters), [
+        data,
+        columns,
+        resolvedQuery,
+        resolvedFilters
+    ]);
+    const sortedData = React__namespace.useMemo(()=>{
+        if (!resolvedSort) return visibleRows;
+        const column = columns.find((candidate)=>candidate.key === resolvedSort.key);
+        const factor = resolvedSort.dir === "asc" ? 1 : -1;
+        return [
+            ...visibleRows
+        ].sort((a, b)=>{
+            const av = column ? getColumnValue(column, a) : a[resolvedSort.key];
+            const bv = column ? getColumnValue(column, b) : b[resolvedSort.key];
+            if (av == null && bv == null) return 0;
+            if (av == null) return -factor;
+            if (bv == null) return factor;
+            if (typeof av === "number" && typeof bv === "number") return (av - bv) * factor;
+            return String(av).localeCompare(String(bv)) * factor;
+        });
+    }, [
+        visibleRows,
+        resolvedSort,
+        columns
+    ]);
+    const rowIds = React__namespace.useMemo(()=>sortedData.map((row)=>row.id), [
+        sortedData
+    ]);
+    const columnKeys = React__namespace.useMemo(()=>columns.map((column)=>column.key), [
+        columns
+    ]);
+    const searchable = React__namespace.useMemo(()=>columns.some((column)=>column.searchable), [
+        columns
+    ]);
+    const showToolbar = searchable || showCount;
+    const showFooter = columns.some((column)=>column.summary);
+    // crisp's own `totalCols` (`datatable.tsx`) -- every full-width spanning row (the
+    // loading/error/empty body, infinite scroll's sentinel, the add-row footer) reads
+    // this ONE value rather than each re-deriving it, so they can never drift apart.
+    const totalCols = columns.length + (selectable ? 1 : 0);
+    return /*#__PURE__*/ jsxRuntime.jsx(ClassNamesProvider, {
+        value: classNames,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(DataTable12sZml1x9Kr12s.DataTableRoot, {
+            ref: ref,
+            className: clsx(classNames.root, className),
+            rowIds: rowIds,
+            selectable: selectable,
+            selectedIds: selectedIds,
+            defaultSelectedIds: defaultSelectedIds,
+            onSelectionChange: onSelectionChange,
+            sort: resolvedSort,
+            onSortChange: handleSortChange,
+            query: resolvedQuery,
+            onQueryChange: handleQueryChange,
+            filters: resolvedFilters,
+            onFiltersChange: handleFiltersChange,
+            columnKeys: columnKeys,
+            columnOrder: columnOrder,
+            defaultColumnOrder: defaultColumnOrder,
+            onColumnOrderChange: onColumnOrderChange,
+            hiddenColumnKeys: hiddenColumnKeys,
+            defaultHiddenColumnKeys: defaultHiddenColumnKeys,
+            onHiddenColumnKeysChange: onHiddenColumnKeysChange,
+            columnWidths: columnWidths,
+            defaultColumnWidths: defaultColumnWidths,
+            onColumnWidthsChange: onColumnWidthsChange,
+            columnLabels: columnLabels,
+            defaultColumnLabels: defaultColumnLabels,
+            onColumnLabelsChange: onColumnLabelsChange,
+            columnCalcOps: columnCalcOps,
+            defaultColumnCalcOps: defaultColumnCalcOps,
+            onColumnCalcOpsChange: onColumnCalcOpsChange,
+            onEdit: onEdit,
+            onLoadMore: onLoadMore,
+            hasMore: hasMore,
+            loadingMore: loadingMore,
+            ...restProps,
+            children: [
+                onColumnsChange && /*#__PURE__*/ jsxRuntime.jsx(ColumnsChangeEffect, {
+                    columns: columns,
+                    onColumnsChange: onColumnsChange
+                }),
+                showToolbar && /*#__PURE__*/ jsxRuntime.jsxs(toolbar12s.DataTableToolbar, {
+                    children: [
+                        searchable && /*#__PURE__*/ jsxRuntime.jsx(toolbar12s.SearchBox, {
+                            placeholder: searchPlaceholder,
+                            label: searchLabel
+                        }),
+                        showCount && /*#__PURE__*/ jsxRuntime.jsx(toolbar12s.RowCount, {
+                            shown: sortedData.length,
+                            total: data.length,
+                            countLabel: countLabel
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBody, {
+                    scrollProps: scrollProps,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(DataTableTable, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(DataTableColGroup, {
+                                columns: columns,
+                                selectable: !!selectable
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(DataTableHeader, {
+                                children: [
+                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionHeaderCell, {
+                                        ...columnLayout12s.stickyProps({
+                                            selectable,
+                                            stickyFirst,
+                                            stickyLast,
+                                            isSelectionCell: true,
+                                            isFirst: false,
+                                            isLast: false
+                                        }),
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(SelectAllCheckbox, {
+                                            label: selectAllLabel,
+                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
+                                            indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(columnMenu12s.ColumnHeaderCells, {
+                                        columns: columns,
+                                        columnMenu: columnMenu,
+                                        reorderable: reorderable,
+                                        resizable: resizable,
+                                        sortIcon: sortIcon,
+                                        selectable: !!selectable,
+                                        stickyFirst: stickyFirst,
+                                        stickyLast: stickyLast
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(DataTableBody, {
+                                children: loading ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(states12s.LoadingStateContent, {
+                                            label: loadingLabel,
+                                            classNames: classNames
+                                        })
+                                    })
+                                }) : error ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(states12s.EmptyStateContent, {
+                                            classNames: classNames,
+                                            children: error
+                                        })
+                                    })
+                                }) : sortedData.length === 0 ? /*#__PURE__*/ jsxRuntime.jsx("tr", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(DataTableCell, {
+                                        colSpan: totalCols,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(states12s.EmptyStateContent, {
+                                            classNames: classNames,
+                                            children: empty
+                                        })
+                                    })
+                                }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                    children: [
+                                        sortedData.map((row)=>/*#__PURE__*/ jsxRuntime.jsxs(DataTableRow, {
+                                                rowId: row.id,
+                                                "data-clickable": onRowClick ? "" : undefined,
+                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                children: [
+                                                    selectable && /*#__PURE__*/ jsxRuntime.jsx(DataTableSelectionCell, {
+                                                        ...columnLayout12s.stickyProps({
+                                                            selectable,
+                                                            stickyFirst,
+                                                            stickyLast,
+                                                            isSelectionCell: true,
+                                                            isFirst: false,
+                                                            isLast: false
+                                                        }),
+                                                        children: /*#__PURE__*/ jsxRuntime.jsx(RowCheckbox, {
+                                                            label: getRowSelectionLabel(row),
+                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(bodyCells12s.ColumnBodyCells, {
+                                                        columns: columns,
+                                                        row: row,
+                                                        classNames: classNames,
+                                                        locale: locale,
+                                                        selectable: !!selectable,
+                                                        stickyFirst: stickyFirst,
+                                                        stickyLast: stickyLast
+                                                    })
+                                                ]
+                                            }, row.id)),
+                                        onLoadMore && /*#__PURE__*/ jsxRuntime.jsx(states12s.InfiniteScrollRow, {
+                                            colSpan: totalCols,
+                                            classNames: classNames,
+                                            loadingLabel: loadingLabel
+                                        })
+                                    ]
+                                })
+                            }),
+                            showFooter && /*#__PURE__*/ jsxRuntime.jsxs(DataTableFooter, {
+                                children: [
+                                    selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
+                                    // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
+                                    // is what makes every row's selection column line up now, not a matching
+                                    // per-slot width formula, so there is no more reason for this cell to
+                                    // borrow a different slot than its footer siblings.
+                                    /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterCell, {
+                                        ...columnLayout12s.stickyProps({
+                                            selectable,
+                                            stickyFirst,
+                                            stickyLast,
+                                            isSelectionCell: true,
+                                            isFirst: false,
+                                            isLast: false
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(columnCalc12s.ColumnCalcCells, {
+                                        columns: columns,
+                                        rows: sortedData,
+                                        selectable: !!selectable,
+                                        stickyFirst: stickyFirst,
+                                        stickyLast: stickyLast
+                                    })
+                                ]
+                            }),
+                            onAddRow && /*#__PURE__*/ jsxRuntime.jsx(states12s.AddRowFooter, {
+                                onAddRow: onAddRow,
+                                addRowLabel: addRowLabel,
+                                colSpan: totalCols,
+                                classNames: classNames
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+DataTableInner.displayName = "DataTable";
+/**
+ * @see https://seed-design.io/react/components/data-table
+ */ const DataTable = /*#__PURE__*/ React.forwardRef(DataTableInner);
+////////////////////////////////////////////////////////////////////////////////////
+/** Fires `onColumnsChange` with the effective (ordered, visible, relabelled) column
+ *  list whenever it actually changes -- a thin convenience over the four controllable
+ *  pairs (order/hidden/width/label), for a consumer that would rather persist "the
+ *  current column configuration" as one blob. A standalone component (not inlined in
+ *  `DataTableInner`) purely so it can call `useDataTableContext()` -- that context is
+ *  provided by the `DataTablePrimitiveRoot` this renders as a SIBLING of, one level
+ *  up from where `DataTableInner` itself sits. */ function ColumnsChangeEffect({ columns, onColumnsChange }) {
+    const effective = columnLayout12s.useEffectiveColumns(columns);
+    // A NEW array every time `effective` itself is a new array (its own `useMemo`
+    // recomputes only when order/hidden/label/width actually change) -- `header`
+    // resolves to the menu's rename override (falling back to the column's own static
+    // `header`) and `width` resolves to the live resize/consumer-set width (falling
+    // back to the column's own initial one), so this is genuinely "what's showing now",
+    // not the original static `columns` prop echoed back unchanged.
+    const resolvedColumns = React__namespace.useMemo(()=>effective.map(({ column, label, width })=>({
+                ...column,
+                header: label,
+                width
+            })), [
+        effective
+    ]);
+    React__namespace.useEffect(()=>{
+        onColumnsChange(resolvedColumns);
+    }, [
+        resolvedColumns,
+        onColumnsChange
+    ]);
+    return null;
+}
+////////////////////////////////////////////////////////////////////////////////////
+// The real `<table>` -- see react-headless's own `DataTableTable` comment for why this
+// is a SIBLING of the toolbar (both inside `DataTablePrimitiveRoot`'s card `<div>`)
+// rather than `DataTablePrimitiveRoot` itself: a `<table>` cannot host the toolbar as a
+// child without the HTML parser foster-parenting it back out.
+const DataTableTable = withContext(DataTable12sZml1x9Kr12s.DataTableTable, "table");
+/** One `<col>` per rendered column (plus the 40px selection column, if any) -- the
+ *  SINGLE place a column's width is ever set now. Every row's header/body/footer cell
+ *  reads its own width off this shared `<colgroup>` by construction (native table
+ *  column-sizing), which is what makes them align -- no per-cell width style to drift
+ *  out of sync between the three. A column with no explicit width gets a bare `<col>`
+ *  (no `style`): `table-layout: fixed`'s own algorithm gives every such column an equal
+ *  share of whatever space is left, matching the old flex grid's `flex: 1 1 0%`
+ *  default with no extra code needed here. */ function DataTableColGroup({ columns, selectable }) {
+    const effective = columnLayout12s.useEffectiveColumns(columns);
+    return /*#__PURE__*/ jsxRuntime.jsxs("colgroup", {
+        children: [
+            selectable && /*#__PURE__*/ jsxRuntime.jsx("col", {
+                style: {
+                    width: 40
+                }
+            }),
+            effective.map(({ column, width })=>/*#__PURE__*/ jsxRuntime.jsx("col", {
+                    style: width === undefined ? undefined : {
+                        width
+                    }
+                }, column.key))
+        ]
+    });
+}
+const DataTableHeader = withContext(DataTable12sZml1x9Kr12s.DataTableHeader, "header");
+const DataTableHeaderCell = withContext(DataTable12sZml1x9Kr12s.DataTableHeaderCell, "headerCell");
+// `.crisp-datatable-th-inner` -- the flex row INSIDE a `<th>` (label + filter trigger +
+// sort chevron + column menu). See qvism-preset's own `headerCellInner` slot comment
+// for why this lives one level below the cell itself rather than on it.
+const DataTableHeaderCellInner = withContext(reactPrimitive.Primitive.div, "headerCellInner");
+/** The label text specifically -- the one thing in `DataTableHeaderCellInner` that
+ *  truncates; the trailing filter/sort/menu icons stay fully visible regardless of how
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext(reactPrimitive.Primitive.span, "headerCellLabel");
+/**
+ * A selection `<th>`/`<td>`/footer `<td>` composes ITS base slot (`headerCell`/`cell`/
+ * `footerCell`) together with the `selectionCell` MODIFIER, rather than replacing it --
+ * so the checkbox column still inherits every shared table-wide rule (sticky header,
+ * sticky footer, height, borders) for free instead of a second, independent copy of
+ * them under a slot of its own. `useClassNames()` reads the SAME classNames object
+ * `ClassNamesProvider` (below, in `DataTableInner`) already put in context; this isn't
+ * a second recipe call.
+ */ function withSelectionCell(Component, baseSlot) {
+    const StyledComponent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+        const classNames = useClassNames();
+        return /*#__PURE__*/ jsxRuntime.jsx(Component, {
+            ref: ref,
+            ...props,
+            className: clsx(classNames[baseSlot], classNames.selectionCell, props["className"])
+        });
+    });
+    StyledComponent.displayName = `SelectionCell(${baseSlot})`;
+    return StyledComponent;
+}
+const DataTableSelectionHeaderCell = withSelectionCell(DataTable12sZml1x9Kr12s.DataTableHeaderCell, "headerCell");
+const DataTableHeaderCellIcon = withContext(reactPrimitive.Primitive.span, "headerCellIcon");
+// body has no CSS slot of its own in the rootage spec -- it is a plain structural
+// `<tbody>`, so it is not wrapped in `withContext`.
+const DataTableBody = DataTable12sZml1x9Kr12s.DataTableBody;
+const DataTableRow = withContext(DataTable12sZml1x9Kr12s.DataTableRow, "row");
+const DataTableCell = withContext(DataTable12sZml1x9Kr12s.DataTableCell, "cell");
+const DataTableSelectionCell = withSelectionCell(DataTable12sZml1x9Kr12s.DataTableCell, "cell");
+// Tranche 4 -- column menu + reorder + resize + sticky columns. A scroll boundary
+// wrapping the whole `<table>`: `overflowX: auto` is what makes a wide table (more
+// column width than the card is wide) scroll horizontally at all, which sticky columns
+// and their scroll shadow (this slot's own `data-scrolled-start`/`-end`, set from
+// `useDataTableScroll`) need something concrete to measure and listen to. `overflowY`
+// stays out of this slot's own base css (nothing here has a bounded height of its own
+// to clip), so it never introduces a second vertical scrollbar next to whatever
+// ambient container the whole DataTable already sits in.
+const DataTableScrollBodyBase = withContext(reactPrimitive.Primitive.div, "scrollArea");
+function DataTableScrollBody({ children, scrollProps }) {
+    const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTableScrollBodyBase, {
+        ...otherScrollProps,
+        ref: scrollAreaRef,
+        onScroll: onScroll,
+        className: scrollClassName,
+        style: scrollStyle,
+        "data-scrolled-start": domUtils.dataAttr(scrolledStart),
+        "data-scrolled-end": domUtils.dataAttr(scrolledEnd),
+        children: children
+    });
+}
+const DataTableFooterBase = withContext(reactPrimitive.Primitive.tfoot, "footer");
+function DataTableFooter({ children, ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterBase, {
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsx("tr", {
+            children: children
+        })
+    });
+}
+const DataTableFooterCell = withContext(reactPrimitive.Primitive.td, "footerCell");
+////////////////////////////////////////////////////////////////////////////////////
+// Fix (bug report): karrot icons default to a 24px intrinsic SVG attribute size
+// -- see column-menu.tsx's own `SORT_ICON_SIZE` comment for the full mechanism.
+// The selection checkbox's own indicator is the smallest glyph in the grid
+// (crisp's own measured checkmark), so it gets the smallest explicit size.
+const SELECTION_ICON_SIZE = 12;
+const DEFAULT_CHECKED_ICON = /*#__PURE__*/ jsxRuntime.jsx(IconCheckmarkLine_default, {
+    size: SELECTION_ICON_SIZE
+});
+const DEFAULT_INDETERMINATE_ICON = /*#__PURE__*/ jsxRuntime.jsx(IconMinusLine_default, {
+    size: SELECTION_ICON_SIZE
+});
+function SelectAllCheckbox({ label, checkedIcon, indeterminateIcon }) {
+    const { selectionState, toggleAll } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
+        checked: selectionState === "all",
+        indeterminate: selectionState === "some",
+        onCheckedChange: toggleAll,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
+                    checked: checkedIcon ?? null,
+                    indeterminate: indeterminateIcon
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
+                "aria-label": label
+            })
+        ]
+    });
+}
+/**
+ * Reads its OWN row's selected state off `useDataTableRowContext` (set by the
+ * `DataTableRow` it renders inside) rather than being handed `rowId` again as a prop
+ * and looking it up in the table-wide context -- the same shape Select's
+ * `SelectItemLabel` reads `label` off `useSelectItemContext` instead of a prop
+ * re-threaded down from `SelectItem`.
+ */ function RowCheckbox({ label, checkedIcon }) {
+    const { isSelected, toggleRow } = DataTable12sZml1x9Kr12s.useDataTableRowContext();
+    return /*#__PURE__*/ jsxRuntime.jsxs(CheckboxRoot, {
+        checked: isSelected,
+        onCheckedChange: toggleRow,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(CheckboxIndicator, {
+                    checked: checkedIcon ?? null
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(CheckboxHiddenInput, {
+                "aria-label": label
+            })
+        ]
+    });
+}
+
+exports.CheckboxControl = CheckboxControl;
+exports.CheckboxHiddenInput = CheckboxHiddenInput;
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.CheckboxLabel = CheckboxLabel;
+exports.CheckboxRoot = CheckboxRoot;
+exports.DataTable = DataTable;
+exports.DataTableCell = DataTableCell;
+exports.DataTableFooterCell = DataTableFooterCell;
+exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DataTableHeaderCellIcon = DataTableHeaderCellIcon;
+exports.DataTableHeaderCellInner = DataTableHeaderCellInner;
+exports.DataTableHeaderCellLabel = DataTableHeaderCellLabel;
+exports.IconCheckmarkFatFill_default = IconCheckmarkFatFill_default;
+exports.IconCheckmarkLine_default = IconCheckmarkLine_default;
+exports.IconChevronDownLine_default = IconChevronDownLine_default;
+exports.IconChevronDownSmallLine_default = IconChevronDownSmallLine_default;
+exports.IconChevronUpLine_default = IconChevronUpLine_default;
+exports.IconDot3HorizontalLine_default = IconDot3HorizontalLine_default;
+exports.IconMagnifyingglassLine_default = IconMagnifyingglassLine_default;
+exports.IconPersonCircleLine_default = IconPersonCircleLine_default;
+exports.IconPlusLine_default = IconPlusLine_default;
+exports.IconSlider2HorizontalLine_default = IconSlider2HorizontalLine_default;
+exports.InternalIcon = InternalIcon;
+exports.clsx = clsx;
+exports.composeRefs = composeRefs;
+exports.createSlotRecipeContext = createSlotRecipeContext;
+exports.createWithStateProps = createWithStateProps;
+exports.dataTable = dataTable;
+exports.getColumnValue = getColumnValue;
+exports.splitMultipleVariantsProps = splitMultipleVariantsProps;
+exports.withContext = withContext;
+exports.withScaleFeedback = withScaleFeedback;