@crispy-seed/data-table 0.7.0 → 0.9.0

package/dist/index.cjs

@@ -33,6 +33,7 @@ var textInput = require('@seed-design/css/recipes/text-input');
 var reactMenu = require('@seed-design/react-menu');
 var menu = require('@seed-design/css/recipes/menu');
 var menuItem = require('@seed-design/css/recipes/menu-item');
+var tabs = require('@seed-design/css/recipes/tabs');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -224,36 +225,8 @@ var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
 var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$b);
 var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
 
-// src/IconEyeLine.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.jsxs("g", {
-                children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("path", {
-                        d: "M1.68785 14.0027C2.21223 14.1751 2.77712 13.8901 2.94996 13.3659C3.07236 13.0089 3.23163 12.663 3.39915 12.3254C3.7229 11.6731 4.22663 10.8054 4.94433 9.94191C6.3729 8.22305 8.6137 6.55273 12.0003 6.55273C15.3868 6.55273 17.6276 8.22305 19.0562 9.94191C19.7739 10.8054 20.2776 11.6731 20.6014 12.3254C20.7627 12.6505 20.8778 12.9189 20.9513 13.1024C21.0036 13.233 21.0295 13.302 21.0509 13.3669C21.2241 13.8904 21.7886 14.175 22.3127 14.0027C22.8373 13.8301 23.1225 13.264 22.9499 12.7394C22.9158 12.6366 22.8793 12.5369 22.8078 12.3586C22.717 12.1319 22.5805 11.8144 22.3929 11.4363C22.0187 10.6824 21.435 9.67502 20.5943 8.66356C18.9062 6.63242 16.147 4.55273 12.0003 4.55273C7.8535 4.55273 5.09431 6.63242 3.40621 8.66356C2.56557 9.67502 1.9818 10.6824 1.60765 11.4363C1.42001 11.8144 1.28353 12.1319 1.1927 12.3586C1.12106 12.5374 1.08448 12.6372 1.05033 12.7403C0.877781 13.2649 1.16321 13.8301 1.68785 14.0027Z",
-                        fill: "currentColor"
-                    }),
-                    /* @__PURE__ */ jsxRuntime.jsx("path", {
-                        d: "M12.576 9.10187C12.7569 9.46282 12.7029 9.89712 12.4393 10.2029C12.0675 10.634 11.8429 11.1792 11.8429 11.7727C11.8429 13.0923 12.9123 14.1613 14.2263 14.1613C14.8331 14.1613 15.3926 13.9188 15.8177 13.522C16.1163 13.2434 16.5544 13.1743 16.9243 13.3476C17.2941 13.5209 17.5214 13.9017 17.4984 14.3095C17.3348 17.2106 15.0545 19.5498 12.0068 19.5498C8.94739 19.5498 6.5 16.9571 6.5 14.0363C6.5 11.1187 8.76722 8.75104 11.6123 8.55225C12.015 8.52411 12.3952 8.74091 12.576 9.10187Z",
-                        fill: "currentColor"
-                    })
-                ]
-            })
-        })
-    });
-var IconEyeLine = /*#__PURE__*/ React.forwardRef(Icon$a);
-var IconEyeLine_default = IconEyeLine;
-
 // src/IconMagnifyingglassLine.tsx
-var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -271,11 +244,11 @@ var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconMagnifyingglassLine = /*#__PURE__*/ React.forwardRef(Icon$9);
+var IconMagnifyingglassLine = /*#__PURE__*/ React.forwardRef(Icon$a);
 var IconMagnifyingglassLine_default = IconMagnifyingglassLine;
 
 // src/IconSlider2HorizontalLine.tsx
-var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -303,11 +276,11 @@ var Icon$8 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconSlider2HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$8);
+var IconSlider2HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$9);
 var IconSlider2HorizontalLine_default = IconSlider2HorizontalLine;
 
 // src/IconPersonCircleLine.tsx
-var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -335,11 +308,11 @@ var Icon$7 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconPersonCircleLine = /*#__PURE__*/ React.forwardRef(Icon$7);
+var IconPersonCircleLine = /*#__PURE__*/ React.forwardRef(Icon$8);
 var IconPersonCircleLine_default = IconPersonCircleLine;
 
 // src/IconPlusLine.tsx
-var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -355,11 +328,11 @@ var Icon$6 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconPlusLine = /*#__PURE__*/ React.forwardRef(Icon$6);
+var IconPlusLine = /*#__PURE__*/ React.forwardRef(Icon$7);
 var IconPlusLine_default = IconPlusLine;
 
 // src/IconMinusLine.tsx
-var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -375,11 +348,11 @@ var Icon$5 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconMinusLine = /*#__PURE__*/ React.forwardRef(Icon$5);
+var IconMinusLine = /*#__PURE__*/ React.forwardRef(Icon$6);
 var IconMinusLine_default = IconMinusLine;
 
 // src/IconXmarkLine.tsx
-var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -395,11 +368,11 @@ var Icon$4 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconXmarkLine = /*#__PURE__*/ React.forwardRef(Icon$4);
+var IconXmarkLine = /*#__PURE__*/ React.forwardRef(Icon$5);
 var IconXmarkLine_default = IconXmarkLine;
 
 // src/IconCheckmarkLine.tsx
-var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
+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",
@@ -417,9 +390,45 @@ var Icon$3 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
             })
         })
     });
-var IconCheckmarkLine = /*#__PURE__*/ React.forwardRef(Icon$3);
+var IconCheckmarkLine = /*#__PURE__*/ React.forwardRef(Icon$4);
 var IconCheckmarkLine_default = IconCheckmarkLine;
 
+// src/IconCorner4OutwardLine.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.jsxs("g", {
+                children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M4.99961 4.00001L8.5 4C9.05228 4 9.5 3.55228 9.5 3C9.5 2.44772 9.05228 2 8.5 2L4.99959 2.00001C3.3426 2.00003 2 3.34333 2 4.99993V8.5C2 9.05228 2.44772 9.5 3 9.5C3.55228 9.5 4 9.05228 4 8.5V4.99993C4 4.44751 4.44757 4.00002 4.99961 4.00001Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M15.5 2C14.9477 2 14.5 2.44772 14.5 3C14.5 3.55228 14.9477 4 15.5 4H19C19.5525 4 20 4.44762 20 4.99974V8.5C20 9.05228 20.4477 9.5 21 9.5C21.5523 9.5 22 9.05228 22 8.5V4.99974C22 3.34271 20.6567 2 19 2H15.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M3.00001 14.5C3.5523 14.5 4.00001 14.9477 4.00001 15.5L4 19.0002C3.99999 19.5523 4.44759 20 5.00007 20H8.49995C9.05223 20 9.49995 20.4477 9.49995 21C9.49995 21.5523 9.05223 22 8.49995 22H5.00007C3.34331 22 1.99998 20.6572 2 19.0001L2.00001 15.5C2.00001 14.9477 2.44773 14.5 3.00001 14.5Z",
+                        fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                        d: "M22 15.5C22 14.9477 21.5523 14.5 21 14.5C20.4477 14.5 20 14.9477 20 15.5V19.0003C20 19.5524 19.5525 20 19 20H15.5C14.9477 20 14.5 20.4477 14.5 21C14.5 21.5523 14.9477 22 15.5 22H19C20.6567 22 22 20.6573 22 19.0003V15.5Z",
+                        fill: "currentColor"
+                    })
+                ]
+            })
+        })
+    });
+var IconCorner4OutwardLine = /*#__PURE__*/ React.forwardRef(Icon$3);
+var IconCorner4OutwardLine_default = IconCorner4OutwardLine;
+
 // src/IconChevronDownSmallLine.tsx
 var Icon$2 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
         viewBox: "0 0 24 24",
@@ -462,8 +471,8 @@ var Icon$1 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
 var IconCheckmarkFatFill = /*#__PURE__*/ React.forwardRef(Icon$1);
 var IconCheckmarkFatFill_default = IconCheckmarkFatFill;
 
-var __defProp$3 = Object.defineProperty;
-var __name$3 = (target, value)=>__defProp$3(target, "name", {
+var __defProp$5 = Object.defineProperty;
+var __name$5 = (target, value)=>__defProp$5(target, "name", {
         value,
         configurable: true
     });
@@ -474,7 +483,7 @@ function setRef(ref, value) {
         ref.current = value;
     }
 }
-__name$3(setRef, "setRef");
+__name$5(setRef, "setRef");
 function composeRefs(...refs) {
     return (node)=>{
         let hasCleanup = false;
@@ -499,14 +508,14 @@ function composeRefs(...refs) {
         }
     };
 }
-__name$3(composeRefs, "composeRefs");
+__name$5(composeRefs, "composeRefs");
 function useComposedRefs(...refs) {
     return React__namespace.useCallback(composeRefs(...refs), refs);
 }
-__name$3(useComposedRefs, "useComposedRefs");
+__name$5(useComposedRefs, "useComposedRefs");
 
-var __defProp$2 = Object.defineProperty;
-var __name$2 = (target, value)=>__defProp$2(target, "name", {
+var __defProp$4 = Object.defineProperty;
+var __name$4 = (target, value)=>__defProp$4(target, "name", {
         value,
         configurable: true
     });
@@ -560,18 +569,18 @@ function createSlot(ownerName) {
     Slot2.displayName = `${ownerName}.Slot`;
     return Slot2;
 }
-__name$2(createSlot, "createSlot");
+__name$4(createSlot, "createSlot");
 var Slot = /* @__PURE__ */ createSlot("Slot");
 var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
-    const Slottable2 = /* @__PURE__ */ __name$2((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
+    const Slottable2 = /* @__PURE__ */ __name$4((props)=>"child" in props ? props.children(props.child) : props.children, "Slottable");
     Slottable2.displayName = `${ownerName}.Slottable`;
     Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
     return Slottable2;
 }
-__name$2(createSlottable, "createSlottable");
-var getSlottableElementFromSlottable = /* @__PURE__ */ __name$2((slottable, child)=>{
+__name$4(createSlottable, "createSlottable");
+var getSlottableElementFromSlottable = /* @__PURE__ */ __name$4((slottable, child)=>{
     if ("child" in slottable.props) {
         const child2 = slottable.props.child;
         if (!/*#__PURE__*/ React__namespace.isValidElement(child2)) return null;
@@ -614,7 +623,7 @@ function mergeProps(slotProps, childProps) {
         ...overrideProps
     };
 }
-__name$2(mergeProps, "mergeProps");
+__name$4(mergeProps, "mergeProps");
 function getElementRef(element) {
     let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
     let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
@@ -628,24 +637,24 @@ function getElementRef(element) {
     }
     return element.props.ref || element.ref;
 }
-__name$2(getElementRef, "getElementRef");
+__name$4(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$2(isSlottable, "isSlottable");
+__name$4(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$2(isLazyComponent, "isLazyComponent");
+__name$4(isLazyComponent, "isLazyComponent");
 function isPromiseLike(value) {
     return typeof value === "object" && value !== null && "then" in value;
 }
-__name$2(isPromiseLike, "isPromiseLike");
-var createSlotError = /* @__PURE__ */ __name$2((ownerName)=>{
+__name$4(isPromiseLike, "isPromiseLike");
+var createSlotError = /* @__PURE__ */ __name$4((ownerName)=>{
     return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
 }, "createSlotError");
-var createSlottableError = /* @__PURE__ */ __name$2((ownerName)=>{
+var createSlottableError = /* @__PURE__ */ __name$4((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()];
@@ -769,21 +778,31 @@ function isFunction$1(value) {
 
 const DATA_TABLE_UNIVERSAL_CALC_OPS = [
     "count",
-    "countFilled"
+    "empty",
+    "notEmpty"
 ];
 const DATA_TABLE_NUMERIC_CALC_OPS = [
     "sum",
     "average",
+    "median",
     "min",
-    "max"
+    "max",
+    "range"
+];
+/** Offered instead of `DATA_TABLE_NUMERIC_CALC_OPS` on a non-numeric column. */ const DATA_TABLE_NON_NUMERIC_CALC_OPS = [
+    "countUnique"
 ];
 const DATA_TABLE_CALC_LABEL = {
     count: "Count",
-    countFilled: "Count filled",
+    empty: "Empty",
+    notEmpty: "Not empty",
     sum: "Sum",
     average: "Average",
+    median: "Median",
     min: "Min",
-    max: "Max"
+    max: "Max",
+    range: "Range",
+    countUnique: "Count unique"
 };
 /** A value counts as empty when it is null/undefined, an empty string, or an empty
  *  array -- crisp's own `isEmptyValue` (columncalc.tsx), reused verbatim. */ function isEmptyValueForCalc(value) {
@@ -792,29 +811,50 @@ const DATA_TABLE_CALC_LABEL = {
     if (Array.isArray(value)) return value.length === 0;
     return false;
 }
+/** The middle value of a SORTED, non-empty numeric array -- the mean of the two
+ *  middle entries on an even-length array, same convention as every stats library. */ function median(sortedNumbers) {
+    const mid = Math.floor(sortedNumbers.length / 2);
+    return sortedNumbers.length % 2 === 0 ? (sortedNumbers[mid - 1] + sortedNumbers[mid]) / 2 : sortedNumbers[mid];
+}
 /**
  * Pure so the arithmetic is independently (and mutation-) testable without rendering a
- * table at all. `sum`/`average`/`min`/`max` skip empty values and non-numeric ones
- * (coerced via `Number`, dropping `NaN`); they return `null` -- render nothing, not a
- * misleading 0 -- when there is nothing numeric left to reduce over.
+ * table at all. The numeric ops (`sum`/`average`/`median`/`min`/`max`/`range`) skip
+ * empty values and non-numeric ones (coerced via `Number`, dropping `NaN`); they
+ * return `null` -- render nothing, not a misleading 0 -- when there is nothing
+ * numeric left to reduce over. `countUnique` counts distinct NON-EMPTY values
+ * (`JSON.stringify`-normalized, so two arrays/objects with the same shape count
+ * once) -- empties are already their own op (`empty`), so folding them into "one
+ * more unique value" here would double-count the same information two different
+ * ways in the same menu.
  */ function computeColumnCalc(values, op) {
     switch(op){
         case "count":
             return values.length;
-        case "countFilled":
+        case "empty":
+            return values.filter(isEmptyValueForCalc).length;
+        case "notEmpty":
             return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+        case "countUnique":
+            {
+                const seen = new Set(values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>JSON.stringify(value)));
+                return seen.size;
+            }
     }
-    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value));
+    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value)).sort((a, b)=>a - b);
     if (numbers.length === 0) return null;
     switch(op){
         case "sum":
             return numbers.reduce((total, value)=>total + value, 0);
         case "average":
             return numbers.reduce((total, value)=>total + value, 0) / numbers.length;
+        case "median":
+            return median(numbers);
         case "min":
-            return Math.min(...numbers);
+            return numbers[0];
         case "max":
-            return Math.max(...numbers);
+            return numbers[numbers.length - 1];
+        case "range":
+            return numbers[numbers.length - 1] - numbers[0];
         default:
             return null;
     }
@@ -1219,31 +1259,48 @@ const EMPTY_RECORD = {};
     ]);
     const endColumnDrag = React.useCallback(()=>setDraggingColumnKey(null), []);
     // -- drag-to-resize ------------------------------------------------------------------
-    // `resizeStartRef` holds the ONE thing that must survive across pointermove events
-    // without triggering a re-render on every pixel (the drag's origin) -- state
-    // (`resizingColumnKey`) is only for what the render actually needs: which column's
-    // handle should show its active/dragging look.
+    // `resizeStartRef` holds everything that must survive across pointermove events
+    // WITHOUT triggering a re-render on every pixel: the drag's origin, AND (as of the
+    // live-review fix below) the latest computed width, so `endColumnResize` has
+    // something to commit. State (`resizingColumnKey`) is only for what the render
+    // actually needs: which column's handle should show its active/dragging look.
+    //
+    // `updateColumnResize` used to call `setColumnWidth` on every single pointermove --
+    // a `setColumnWidths` state update (and therefore a full DataTable re-render) per
+    // PIXEL of drag, confirmed live as the stutter a column-border drag produced. It now
+    // only computes+returns the clamped width; the styled layer (`resize.tsx`) writes
+    // that directly to the dragged column's own `<col>` element (`col.style.width`,
+    // outside React), which is all a resize needs frame-to-frame -- table layout already
+    // recalculates from a `<col>`'s own inline style with no re-render involved. React
+    // state (and this hook's `onColumnWidthsChange` contract) is only touched ONCE, in
+    // `endColumnResize`, committing the final width exactly as a controlled consumer
+    // already expects.
     const resizeStartRef = React.useRef(null);
     const [resizingColumnKey, setResizingColumnKey] = React.useState(null);
     const beginColumnResize = React.useCallback((key, clientX, currentWidth)=>{
         resizeStartRef.current = {
             key,
             startX: clientX,
-            startWidth: currentWidth
+            startWidth: currentWidth,
+            currentWidth
         };
         setResizingColumnKey(key);
     }, []);
     const updateColumnResize = React.useCallback((clientX)=>{
         const start = resizeStartRef.current;
-        if (!start) return;
-        setColumnWidth(start.key, start.startWidth + (clientX - start.startX));
-    }, [
-        setColumnWidth
-    ]);
+        if (!start) return undefined;
+        const width = clampColumnWidth(start.startWidth + (clientX - start.startX));
+        start.currentWidth = width;
+        return width;
+    }, []);
     const endColumnResize = React.useCallback(()=>{
+        const start = resizeStartRef.current;
+        if (start) setColumnWidth(start.key, start.currentWidth);
         resizeStartRef.current = null;
         setResizingColumnKey(null);
-    }, []);
+    }, [
+        setColumnWidth
+    ]);
     return {
         columnOrder,
         visibleColumnOrder,
@@ -1593,11 +1650,16 @@ function useDataTableSort(props) {
     const [sort, setSort] = useControllableState$1({
         prop: sortProp,
         defaultProp: defaultSort,
-        onChange: (nextSort)=>{
-            // `toggleSort` never sets `sort` back to `undefined`, but the underlying state is
-            // typed as possibly-undefined so an uncontrolled table can start with no sort at all.
-            if (nextSort) onSortChange?.(nextSort);
-        }
+        // Live-review fix: this used to only fire for a DEFINED next sort ("`toggleSort`
+        // never clears it, so why would this ever see `undefined`") -- true until
+        // `clearSort` (below) existed. Guarding the callback on truthiness meant a
+        // consumer controlling `sort` had no way to ever learn the column sort was
+        // cleared: `setSort(undefined)` would run, but the controlled VALUE never moves
+        // without the consumer's own state updating from this callback, and the guard
+        // swallowed exactly the call that would have told it to. Every other value this
+        // hook contract carries (`onColumnWidthsChange`, `onColumnCalcOpsChange`, ...)
+        // already passes its "cleared" shape through unconditionally; this now matches.
+        onChange: onSortChange
     });
     const toggleSort = React.useCallback((key)=>{
         setSort((current)=>{
@@ -1613,6 +1675,12 @@ function useDataTableSort(props) {
     }, [
         setSort
     ]);
+    /** Attio/GRC's "Remove sort" -- the header click cycle (above) only ever toggles
+   *  asc/desc once a column has been clicked once; this is the only way back to no
+   *  sort at all. Exposed for a column's own header menu (`column-menu.tsx`'s
+   *  `ColumnMenu`) to offer as a "Clear sort" item when that column is the sorted one. */ const clearSort = React.useCallback(()=>setSort(undefined), [
+        setSort
+    ]);
     const getHeaderCellProps = React.useCallback((columnKey, sortable)=>{
         const isSorted = Boolean(columnKey) && sort?.key === columnKey;
         const canSort = Boolean(sortable && columnKey);
@@ -1642,6 +1710,7 @@ function useDataTableSort(props) {
     return {
         sort,
         toggleSort,
+        clearSort,
         getHeaderCellProps
     };
 }
@@ -2391,7 +2460,7 @@ function createRecipeContext(recipe) {
 }
 
 const { withContext: withGroupContext } = createRecipeContext(checkboxGroup.checkboxGroup);
-const { ClassNamesProvider: ClassNamesProvider$3, withContext: withContext$5 } = createSlotRecipeContext(checkbox.checkbox);
+const { ClassNamesProvider: ClassNamesProvider$3, withContext: withContext$6 } = createSlotRecipeContext(checkbox.checkbox);
 const { withProvider: withCheckmarkProvider, useClassNames: useCheckmarkClassNames, PropsProvider: CheckmarkPropsProvider } = createSlotRecipeContext(checkmark.checkmark);
 const withStateProps$4 = createWithStateProps([
     reactCheckbox.useCheckboxContext
@@ -2445,14 +2514,14 @@ const CheckboxIndicator = /*#__PURE__*/ React.forwardRef(({ unchecked: unchecked
     return null;
 });
 CheckboxIndicator.displayName = "CheckboxIndicator";
-const CheckboxLabel = withContext$5(withStateProps$4(Primitive.span), "label");
+const CheckboxLabel = withContext$6(withStateProps$4(Primitive.span), "label");
 const CheckboxHiddenInput = reactCheckbox.Checkbox.HiddenInput;
 
-const { withProvider: withProvider$1, withContext: withContext$4 } = createSlotRecipeContext(avatar.avatar);
-const AvatarRoot = withProvider$1(reactImage.Image.Root, "root");
-const AvatarImage = withContext$4(reactImage.Image.Content, "image");
-const AvatarFallback = withContext$4(reactImage.Image.Fallback, "fallback");
-withContext$4(Primitive.div, "badge");
+const { withProvider: withProvider$2, withContext: withContext$5 } = createSlotRecipeContext(avatar.avatar);
+const AvatarRoot = withProvider$2(reactImage.Image.Root, "root");
+const AvatarImage = withContext$5(reactImage.Image.Content, "image");
+const AvatarFallback = withContext$5(reactImage.Image.Fallback, "fallback");
+withContext$5(Primitive.div, "badge");
 
 const Badge = /*#__PURE__*/ React.forwardRef(({ className, children, ...props }, ref)=>{
     const [variantProps, restProps] = badge.badge.splitVariantProps(props);
@@ -2587,7 +2656,7 @@ function EntityCell({ value, className, nameClassName, actionsClassName, actionC
                         event.stopPropagation();
                         column.onOpenPreview?.(row);
                     },
-                    children: /*#__PURE__*/ jsxRuntime.jsx(IconEyeLine_default, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(IconCorner4OutwardLine_default, {
                         size: 16
                     })
                 })
@@ -3022,7 +3091,7 @@ const SelectHiddenSelect = /*#__PURE__*/ React__namespace.forwardRef((props, ref
 });
 SelectHiddenSelect.displayName = "SelectHiddenSelect";
 
-const { withContext: withContext$3, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(_switch.switchStyle);
+const { withContext: withContext$4, ClassNamesProvider: ClassNamesProvider$2 } = createSlotRecipeContext(_switch.switchStyle);
 const { withContext: withControlContext, PropsProvider: ControlPropsProvider, withProvider: withControlProvider } = createSlotRecipeContext(switchmark.switchmark);
 const withStateProps$2 = createWithStateProps([
     reactSwitch.useSwitchContext
@@ -3048,13 +3117,13 @@ const SwitchRoot = /*#__PURE__*/ React__namespace.default.forwardRef(({ classNam
 SwitchRoot.displayName = "SwitchRoot";
 const SwitchControl = withScaleFeedback(withControlProvider(reactSwitch.Switch.Control, "root"));
 const SwitchThumb = withControlContext(reactSwitch.Switch.Thumb, "thumb");
-withContext$3(withStateProps$2(Primitive.span), "label");
+withContext$4(withStateProps$2(Primitive.span), "label");
 const SwitchHiddenInput = reactSwitch.Switch.HiddenInput;
 
 // src/use-layout-effect.tsx
 var useLayoutEffect2 = globalThis?.document ? React__namespace.useLayoutEffect : ()=>{};
 
-const { withProvider, withContext: withContext$2, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput.textInput);
+const { withProvider: withProvider$1, withContext: withContext$3, useClassNames: useClassNames$2 } = createSlotRecipeContext(textInput.textInput);
 const withFieldStateProps = createWithStateProps([
     {
         useContext: reactField.useFieldContext,
@@ -3068,11 +3137,11 @@ const withStateProps$1 = createWithStateProps([
         strict: false
     }
 ]);
-const TextFieldRoot = withProvider(withFieldStateProps(reactTextField.TextField.Root), "root");
-withContext$2(withStateProps$1(InternalIcon), "prefixIcon");
-withContext$2(withStateProps$1(Primitive.span), "prefixText");
-withContext$2(withStateProps$1(InternalIcon), "suffixIcon");
-withContext$2(withStateProps$1(Primitive.span), "suffixText");
+const TextFieldRoot = withProvider$1(withFieldStateProps(reactTextField.TextField.Root), "root");
+withContext$3(withStateProps$1(InternalIcon), "prefixIcon");
+withContext$3(withStateProps$1(Primitive.span), "prefixText");
+withContext$3(withStateProps$1(InternalIcon), "suffixIcon");
+withContext$3(withStateProps$1(Primitive.span), "suffixText");
 const TextFieldInput = /*#__PURE__*/ React.forwardRef(({ className, ...otherProps }, ref)=>{
     const classNames = useClassNames$2();
     const textFieldContext = reactTextField.useTextFieldContext();
@@ -3149,7 +3218,7 @@ const TextFieldTextarea = /*#__PURE__*/ React.forwardRef(({ className, autoresiz
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__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__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0}.seed-data-table__entityActions:focus-within,tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:0;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.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{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.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))}");
+__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__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.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{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.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);
@@ -3336,7 +3405,7 @@ Object.assign(dataTable, {
 // 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: ClassNamesProvider$1, withContext: withContext$1, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
+const { ClassNamesProvider: ClassNamesProvider$1, withContext: withContext$2, useClassNames: useClassNames$1 } = createSlotRecipeContext(dataTable);
 
 /**
  * The pure filter itself, split out of `useSelectSearch` below so it can be
@@ -4055,7 +4124,7 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
     }
 }
 
-const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu.menu);
+const { ClassNamesProvider, withContext: withContext$1, useClassNames } = createSlotRecipeContext(menu.menu);
 const { PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, ClassNamesProvider: ItemClassNamesProvider } = createSlotRecipeContext(menuItem.menuItem);
 const withStateProps = createWithStateProps([
     reactMenu.useMenuContext
@@ -4089,10 +4158,10 @@ const MenuPositioner = /*#__PURE__*/ React__namespace.forwardRef(({ className, .
     });
 });
 MenuPositioner.displayName = "MenuPositioner";
-const MenuContent = withContext(reactMenu.Menu.Content, "content");
-const MenuScrollArea = withContext(withStateProps(Primitive.div), "scrollArea");
-withContext(reactMenu.Menu.Group, "group");
-withContext(reactMenu.Menu.GroupLabel, "groupLabel");
+const MenuContent = withContext$1(reactMenu.Menu.Content, "content");
+const MenuScrollArea = withContext$1(withStateProps(Primitive.div), "scrollArea");
+withContext$1(reactMenu.Menu.Group, "group");
+withContext$1(reactMenu.Menu.GroupLabel, "groupLabel");
 const MenuItem = /*#__PURE__*/ React__namespace.forwardRef(({ className: propClassName, ...props }, ref)=>{
     const [variantProps, otherProps] = menuItem.menuItem.splitVariantProps(props);
     const parentProps = useItemProps();
@@ -4163,7 +4232,7 @@ function formatCalcValue(value) {
     ]);
     const ops = [
         ...DATA_TABLE_UNIVERSAL_CALC_OPS,
-        ...numeric ? DATA_TABLE_NUMERIC_CALC_OPS : []
+        ...numeric ? DATA_TABLE_NUMERIC_CALC_OPS : DATA_TABLE_NON_NUMERIC_CALC_OPS
     ];
     return /*#__PURE__*/ jsxRuntime.jsxs(MenuRoot, {
         children: [
@@ -4229,8 +4298,32 @@ function formatCalcValue(value) {
  * once captured, this SAME element keeps receiving `pointermove`/`pointerup` even
  * after the cursor leaves it, so the drag math can live entirely in this one
  * handler set with no effect/cleanup to get wrong.
+ *
+ * Live-review fix (stutter): `updateColumnResize` used to also commit the new width
+ * to React state on every `pointermove` -- a full DataTable re-render per pixel of
+ * drag, confirmed as the stutter. During the drag this component now writes the
+ * computed width straight to the dragged column's own `<col>` element (found once,
+ * at pointerdown, via its `data-column-key`, per `column-layout`'s `<colgroup>`
+ * comment: a `<col>`'s own inline `width` is the SINGLE place table layout reads a
+ * column's width from, so writing it directly reflows the table with no React
+ * render at all), coalesced to at most one write per animation frame so a fast
+ * mouse doesn't queue more layout work than the screen can show. React state (and
+ * a controlled consumer's `onColumnWidthsChange`) is only touched ONCE more, in
+ * `endColumnResize`, which is unchanged: it commits whatever `updateColumnResize`
+ * last computed.
  */ function ColumnResizeHandle({ columnKey, width }) {
     const { beginColumnResize, updateColumnResize, endColumnResize, isColumnResizing } = useDataTableContext();
+    // Survive across pointermove events without a re-render: the `<col>` this drag
+    // writes to (resolved once, at pointerdown) and the rAF coalescing the writes.
+    const colElementRef = React.useRef(null);
+    const pendingWidthRef = React.useRef(null);
+    const rafIdRef = React.useRef(null);
+    const flushPendingWidth = ()=>{
+        rafIdRef.current = null;
+        const col = colElementRef.current;
+        const pendingWidth = pendingWidthRef.current;
+        if (col && pendingWidth != null) col.style.width = `${pendingWidth}px`;
+    };
     return /*#__PURE__*/ jsxRuntime.jsx("span", {
         // Mouse/pointer-drag only for now (no keyboard equivalent yet) -- `aria-hidden`
         // rather than `role="separator"` + `aria-label`, which would otherwise fold
@@ -4246,16 +4339,32 @@ function formatCalcValue(value) {
             event.stopPropagation();
             event.preventDefault();
             event.currentTarget.setPointerCapture(event.pointerId);
-            const startWidth = width ?? event.currentTarget.closest('[role="columnheader"]')?.getBoundingClientRect().width ?? 150;
+            const headerCell = event.currentTarget.closest('[role="columnheader"]');
+            const startWidth = width ?? headerCell?.getBoundingClientRect().width ?? 150;
+            colElementRef.current = event.currentTarget.closest("table")?.querySelector(`col[data-column-key="${CSS.escape(columnKey)}"]`) ?? null;
             beginColumnResize(columnKey, event.clientX, startWidth);
         },
         onPointerMove: (event)=>{
-            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-                updateColumnResize(event.clientX);
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+            const nextWidth = updateColumnResize(event.clientX);
+            if (nextWidth == null) return;
+            pendingWidthRef.current = nextWidth;
+            if (rafIdRef.current == null) {
+                rafIdRef.current = requestAnimationFrame(flushPendingWidth);
             }
         },
         onPointerUp: (event)=>{
             event.currentTarget.releasePointerCapture(event.pointerId);
+            if (rafIdRef.current != null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            // Apply any not-yet-flushed width immediately so the `<col>` matches the
+            // exact value `endColumnResize` is about to commit to React state -- with
+            // no more pointermoves coming, nothing else would flush it.
+            flushPendingWidth();
+            pendingWidthRef.current = null;
+            colElementRef.current = null;
             endColumnResize();
         },
         children: /*#__PURE__*/ jsxRuntime.jsx("span", {
@@ -4446,68 +4555,100 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
  *  permanently, so this one carries its own marker attribute distinct from that
  *  slot's OTHER occupants (the sort chevron, the filter trigger), which stay visible
  *  under their own separate rules regardless of hover. */ function ColumnMenu({ column, onRename }) {
-    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn } = useDataTableContext();
+    const { moveColumn, hideColumn, isColumnPinned, togglePinColumn, sort, clearSort } = useDataTableContext();
     const columnLabel = typeof column.header === "string" ? column.header : column.key;
     const pinned = isColumnPinned(column.key);
+    // Attio/GRC's "Remove sort" (live-review fix D) -- the header's own click-to-sort
+    // (`SortIndicator`/`toggleSort`, above) only cycles asc/desc once a column has been
+    // clicked; this is the only affordance back to no sort at all, so it only makes
+    // sense to show on the column that IS currently sorted.
+    const isSorted = sort?.key === column.key;
     const stopPropagation = (event)=>event.stopPropagation();
-    return /*#__PURE__*/ jsxRuntime.jsxs(MenuRoot, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(DataTableHeaderCellIcon, {
-                asChild: true,
-                "data-column-menu": "",
-                onClick: stopPropagation,
-                onKeyDown: stopPropagation,
-                draggable: false,
-                children: /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
-                    "aria-label": `${columnLabel} column menu`,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(IconDot3HorizontalLine_default, {
-                        size: 16
+    return(// Live-review fix (D): a `MenuItem` inside `MenuPositioner` renders through a
+    // `FloatingPortal` -- a REAL React portal (`ReactDOM.createPortal`), which
+    // bubbles a click/keydown up through the REACT TREE (this component, then the
+    // columnheader that renders it), NOT the DOM tree the portal actually appends
+    // to. Confirmed live: clicking ANY item here (not just "Clear sort" -- "Move
+    // left" on a column with no sort at all reproduced it too) also fired the
+    // COLUMNHEADER's own `toggleSort`, because nothing stopped that bubble before
+    // it reached the header's `onClick`/`onKeyDown` (`getHeaderCellProps`). The
+    // trigger's own `stopPropagation` (on `DataTableHeaderCellIcon` below) only
+    // covers clicks that start on the trigger itself -- a SIBLING of
+    // `MenuPositioner` in this tree, not an ancestor of it, so it never sees a
+    // menu-item event at all. This wrapper is a genuine DOM node sitting between
+    // BOTH of them and the header, so it catches the bubble from either one;
+    // `display: contents` keeps it invisible to `DataTableHeaderCellInner`'s own
+    // flex layout.
+    // biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this span never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the trigger button, the portaled menu items). No role fits it because it isn't a control.
+    /*#__PURE__*/ jsxRuntime.jsx("span", {
+        onClick: stopPropagation,
+        onKeyDown: stopPropagation,
+        style: {
+            display: "contents"
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsxs(MenuRoot, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(DataTableHeaderCellIcon, {
+                    asChild: true,
+                    "data-column-menu": "",
+                    draggable: false,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
+                        "aria-label": `${columnLabel} column menu`,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(IconDot3HorizontalLine_default, {
+                            size: 16
+                        })
                     })
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(MenuPositioner, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(MenuContent, {
-                    style: {
-                        minWidth: 160
-                    },
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(MenuScrollArea, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: onRename,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: "Rename"
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "left"),
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: "Move left"
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: ()=>moveColumn(column.key, "right"),
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: "Move right"
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: ()=>togglePinColumn(column.key),
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: pinned ? "Unpin column" : "Pin column"
-                                })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
-                                onClick: ()=>hideColumn(column.key),
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
-                                    children: "Hide column"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(MenuPositioner, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuContent, {
+                        style: {
+                            minWidth: 160
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(MenuScrollArea, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: onRename,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: "Rename"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: ()=>moveColumn(column.key, "left"),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: "Move left"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: ()=>moveColumn(column.key, "right"),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: "Move right"
+                                    })
+                                }),
+                                isSorted && /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: clearSort,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: "Clear sort"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: ()=>togglePinColumn(column.key),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: pinned ? "Unpin column" : "Pin column"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                                    onClick: ()=>hideColumn(column.key),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(MenuItemLabel, {
+                                        children: "Hide column"
+                                    })
                                 })
-                            })
-                        ]
+                            ]
+                        })
                     })
                 })
-            })
-        ]
-    });
+            ]
+        })
+    }));
 }
 
 /**
@@ -5785,8 +5926,8 @@ Object.assign(datePicker, {
     splitVariantProps: (props)=>splitVariantProps(props, datePickerVariantMap)
 }); // @recipe(seed): date-picker
 
-var __defProp$1 = Object.defineProperty;
-var __name$1 = (target, value)=>__defProp$1(target, "name", {
+var __defProp$3 = Object.defineProperty;
+var __name$3 = (target, value)=>__defProp$3(target, "name", {
         value,
         configurable: true
     });
@@ -5810,15 +5951,15 @@ function useEffectEvent(callback) {
     }
     return React__namespace.useMemo(()=>(...args)=>ref.current?.(...args), []);
 }
-__name$1(useEffectEvent, "useEffectEvent");
+__name$3(useEffectEvent, "useEffectEvent");
 
-var __defProp = Object.defineProperty;
-var __name = (target, value)=>__defProp(target, "name", {
+var __defProp$2 = Object.defineProperty;
+var __name$2 = (target, value)=>__defProp$2(target, "name", {
         value,
         configurable: true
     });
 var useInsertionEffect = React__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
-function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __name(()=>{}, "onChange"), caller }) {
+function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __name$2(()=>{}, "onChange"), caller }) {
     const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
         defaultProp,
         onChange
@@ -5845,7 +5986,7 @@ function useControllableState({ prop, defaultProp, onChange = /* @__PURE__ */ __
         setValue
     ];
 }
-__name(useControllableState, "useControllableState");
+__name$2(useControllableState, "useControllableState");
 function useUncontrolledState({ defaultProp, onChange }) {
     const [value, setValue] = React__namespace.useState(defaultProp);
     const prevValueRef = React__namespace.useRef(value);
@@ -5870,11 +6011,11 @@ function useUncontrolledState({ defaultProp, onChange }) {
         onChangeRef
     ];
 }
-__name(useUncontrolledState, "useUncontrolledState");
+__name$2(useUncontrolledState, "useUncontrolledState");
 function isFunction(value) {
     return typeof value === "function";
 }
-__name(isFunction, "isFunction");
+__name$2(isFunction, "isFunction");
 var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 function useControllableStateReducer(reducer, userArgs, initialArg, init) {
     const { prop: controlledState, defaultProp, onChange: onChangeProp, caller } = userArgs;
@@ -5946,7 +6087,7 @@ function useControllableStateReducer(reducer, userArgs, initialArg, init) {
         dispatch
     ];
 }
-__name(useControllableStateReducer, "useControllableStateReducer");
+__name$2(useControllableStateReducer, "useControllableStateReducer");
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -10152,8 +10293,8 @@ const formatFilterDate = (iso)=>{
     });
 }
 
-const DataTableToolbar = withContext$1(Primitive.div, "toolbar");
-const DataTableCount = withContext$1(Primitive.span, "count");
+const DataTableToolbar = withContext$2(Primitive.div, "toolbar");
+const DataTableCount = withContext$2(Primitive.span, "count");
 /**
  * The toolbar's own right-hand group -- `count`'s `marginInlineStart: auto` moved
  * here (off the `<span>` itself) so a consumer's `toolbarActions` and the row count
@@ -10164,7 +10305,7 @@ const DataTableCount = withContext$1(Primitive.span, "count");
  * it. `DataTable.tsx` always renders this wrapper once either `toolbarActions` or
  * `showCount` is on, so it degrades to exactly the old single-count layout when no
  * `toolbarActions` is passed.
- */ const DataTableToolbarEnd = withContext$1(Primitive.div, "toolbarEnd");
+ */ const DataTableToolbarEnd = withContext$2(Primitive.div, "toolbarEnd");
 /**
  * A compact, borderless search box -- crisp's own measured `.crisp-datatable-search`
  * (32px, `bgSurface` background, a leading icon, a soft rest-state shadow, a 1px brand
@@ -10224,6 +10365,25 @@ function DataTableInner(props, ref) {
     // 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.
+    //
+    // Live-review fix (D, "Clear sort"): the JSX below passes the RAW `sort` prop
+    // (not `resolvedSort`) on to `DataTablePrimitiveRoot`, plus `defaultSort` --
+    // passing `resolvedSort` used to feed the headless `useDataTableSort`'s own
+    // `useControllableState` a value that starts `undefined` (uncontrolled) and
+    // BECOMES defined the instant a header is first clicked (once `internalSort`
+    // picks it up), flipping that inner hook from uncontrolled to controlled
+    // mid-lifecycle -- `@radix-ui/react-use-controllable-state` warns about
+    // exactly this and, worse, silently misbehaves on it: its own internal
+    // uncontrolled state stops updating the moment it's controlled, so when
+    // `clearSort` later drove `resolvedSort` back to `undefined` (flipping BACK
+    // to uncontrolled), the hook fell through to that stale, never-updated
+    // internal state instead -- still the pre-clear value, confirmed live
+    // (`aria-sort` stayed "ascending" after "Clear sort"). The RAW `sort` prop
+    // never has this problem: for the common uncontrolled case it's simply
+    // always `undefined`, so the headless hook is uncontrolled for its entire
+    // lifetime and owns its state correctly; a consumer that genuinely controls
+    // `sort` behaves exactly as before (`resolvedSort === sort` whenever `sort`
+    // is defined, so nothing changes for that path).
     const [internalSort, setInternalSort] = React__namespace.useState(defaultSort);
     const resolvedSort = sort !== undefined ? sort : internalSort;
     const handleSortChange = React__namespace.useCallback((next)=>{
@@ -10329,7 +10489,8 @@ function DataTableInner(props, ref) {
             selectedIds: selectedIds,
             defaultSelectedIds: defaultSelectedIds,
             onSelectionChange: onSelectionChange,
-            sort: resolvedSort,
+            sort: sort,
+            defaultSort: defaultSort,
             onSortChange: handleSortChange,
             query: resolvedQuery,
             onQueryChange: handleQueryChange,
@@ -10566,7 +10727,7 @@ DataTableInner.displayName = "DataTable";
 // 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$1(DataTableTable$1, "table");
+const DataTableTable = withContext$2(DataTableTable$1, "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
@@ -10592,6 +10753,10 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
                 }
             }),
             effective.map(({ column, width })=>/*#__PURE__*/ jsxRuntime.jsx("col", {
+                    // Read by `resize.tsx`'s own pointermove handler (`data-column-key`,
+                    // not a ref) to write the dragged width straight to this element
+                    // during a drag -- see that file's own comment for why.
+                    "data-column-key": column.key,
                     style: width === undefined ? undefined : {
                         width
                     }
@@ -10599,15 +10764,15 @@ const DataTableTable = withContext$1(DataTableTable$1, "table");
         ]
     });
 }
-const DataTableHeader = withContext$1(DataTableHeader$1, "header");
-const DataTableHeaderCell = withContext$1(DataTableHeaderCell$1, "headerCell");
+const DataTableHeader = withContext$2(DataTableHeader$1, "header");
+const DataTableHeaderCell = withContext$2(DataTableHeaderCell$1, "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$1(Primitive.div, "headerCellInner");
+const DataTableHeaderCellInner = withContext$2(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$1(Primitive.span, "headerCellLabel");
+ *  long a column's own header text is. */ const DataTableHeaderCellLabel = withContext$2(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 --
@@ -10629,12 +10794,12 @@ const DataTableHeaderCellInner = withContext$1(Primitive.div, "headerCellInner")
     return StyledComponent;
 }
 const DataTableSelectionHeaderCell = withSelectionCell(DataTableHeaderCell$1, "headerCell");
-const DataTableHeaderCellIcon = withContext$1(Primitive.span, "headerCellIcon");
+const DataTableHeaderCellIcon = withContext$2(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 = DataTableBody$1;
-const DataTableRow = withContext$1(DataTableRow$1, "row");
-const DataTableCell = withContext$1(DataTableCell$1, "cell");
+const DataTableRow = withContext$2(DataTableRow$1, "row");
+const DataTableCell = withContext$2(DataTableCell$1, "cell");
 const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "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
@@ -10644,7 +10809,7 @@ const DataTableSelectionCell = withSelectionCell(DataTableCell$1, "cell");
 // 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$1(Primitive.div, "scrollArea");
+const DataTableScrollBodyBase = withContext$2(Primitive.div, "scrollArea");
 function DataTableScrollBody({ children, scrollProps }) {
     const { scrollAreaRef, scrolledStart, scrolledEnd, onScroll } = useDataTableContext();
     const { className: scrollClassName, style: scrollStyle, ...otherScrollProps } = scrollProps ?? {};
@@ -10659,7 +10824,7 @@ function DataTableScrollBody({ children, scrollProps }) {
         children: children
     });
 }
-const DataTableFooterBase = withContext$1(Primitive.tfoot, "footer");
+const DataTableFooterBase = withContext$2(Primitive.tfoot, "footer");
 function DataTableFooter({ children, ...props }) {
     return /*#__PURE__*/ jsxRuntime.jsx(DataTableFooterBase, {
         ...props,
@@ -10668,7 +10833,7 @@ function DataTableFooter({ children, ...props }) {
         })
     });
 }
-const DataTableFooterCell = withContext$1(Primitive.td, "footerCell");
+const DataTableFooterCell = withContext$2(Primitive.td, "footerCell");
 // The selection column's OWN sticky wrappers -- one each for header/body/footer,
 // reading the live pinned set via `useSelectionStickyFirst` (column-layout.ts) instead
 // of the `stickyFirst` PROP alone, so the checkbox column sticks the moment ANY column
@@ -11020,7 +11185,7 @@ DataTableViewsControl.displayName = "DataTableViewsControl";
     });
 }
 
-__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:fixed;top:8px;bottom:8px;border-inline-end:none;border-inline-start:none;border-radius:10px;box-shadow:inset 0 0 0 1px transparent,0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;transition:transform .14s,padding .14s}.seed-resizable-panel__panel[data-floating=true][data-side=left]{padding:8px 0 8px 8px}[data-floating=true]>.seed-resizable-panel__inner{transition:opacity .14s}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
+__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__root[data-floating=true]{position:absolute;inset:0;display:block;height:auto;pointer-events:none}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:absolute;top:0;bottom:0;z-index:20;pointer-events:auto;border-inline-end:none;border-inline-start:none;transform:none;opacity:1}.seed-resizable-panel__panel[data-floating=true][data-side=left]{left:0;border-top-right-radius:12px;border-bottom-right-radius:12px;box-shadow:1px 0 0 rgba(28,40,64,.04),8px 0 16px -6px rgba(28,40,64,.12),8px 0 24px -4px rgba(24,41,75,.16)}.seed-resizable-panel__panel[data-floating=true][data-side=right]{right:0;border-top-left-radius:12px;border-bottom-left-radius:12px;box-shadow:-1px 0 0 rgba(28,40,64,.04),-8px 0 16px -6px rgba(28,40,64,.12),-8px 0 24px -4px rgba(24,41,75,.16)}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:-100%;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:-100%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=left][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{animation:seed-enter;animation-timing-function:cubic-bezier(0.16,1,0.3,1);animation-duration:.18s;--seed-enter-translate-x:100%;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=open]{--seed-enter-translate-x:0}}.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{animation:seed-exit;animation-timing-function:cubic-bezier(0.4,0,1,1);animation-duration:.14s;animation-fill-mode:forwards;--seed-exit-translate-x:100%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1}@media (prefers-reduced-motion:reduce){.seed-resizable-panel__panel[data-floating=true][data-side=right][data-state=closed]{--seed-exit-translate-x:0}}.seed-resizable-panel__inner{height:100%}.seed-resizable-panel__backdrop{position:absolute;inset:0;z-index:19;pointer-events:auto;background:rgba(15,19,32,.32);opacity:0;transition:opacity .16s cubic-bezier(.4, 0, 1, 1)}.seed-resizable-panel__backdrop[data-state=open]{opacity:1;transition-timing-function:cubic-bezier(0.16,1,0.3,1)}.seed-resizable-panel__backdrop[data-state=closed]{opacity:0}.seed-resizable-panel__handle{position:absolute;top:0;width:10px;height:100%;z-index:2;cursor:col-resize;background:0 0;touch-action:none}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
 
 const resizablePanelSlotNames = [
     [
@@ -11046,6 +11211,10 @@ const resizablePanelSlotNames = [
     [
         "handleInner",
         "seed-resizable-panel__handleInner"
+    ],
+    [
+        "backdrop",
+        "seed-resizable-panel__backdrop"
     ]
 ];
 const defaultVariant$1 = {};
@@ -11225,15 +11394,19 @@ Object.assign(resizablePanel, {
 // second source of truth for the string.
 const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
 /**
- * An adjustable-panel primitive: a spacer that reserves layout width plus a
- * panel that overlays it, so the panel can move between docked (in-flow) and
- * floating (`position: fixed`, an overlay) without a reflow glitch. Drag the
- * edge handle to resize; constraints are CSS `min-width`/`max-width`, never
- * re-clamped in JS. Ported from your-moon/crisp's `ResizablePanel`
- * (`components/resizablepanel/`); state/drag behavior lives in
- * `useResizablePanel` (`@seed-design/react-resizable-panel`), this component
- * owns the DOM + recipe classes on top of it.
- */ const ResizablePanel = /*#__PURE__*/ React.forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, className, children, ...rest }, forwardedRef)=>{
+ * An adjustable-panel primitive with two layout models (`floating`'s own doc
+ * comment above has the full contrast). Docked: a `spacer` reserves layout
+ * width and the panel overlays exactly that reservation, so a resize drag
+ * never causes a reflow glitch on the rest of the layout. Floating: no
+ * spacer at all -- this component's own outer element becomes a
+ * `position: absolute; inset: 0` overlay reserving zero width, with the
+ * panel itself pinned to one edge and spanning the full height of that box.
+ * Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS. Ported from your-moon/crisp's
+ * `ResizablePanel` (`components/resizablepanel/`); state/drag behavior
+ * lives in `useResizablePanel` (`@seed-design/react-resizable-panel`), this
+ * component owns the DOM + recipe classes on top of it.
+ */ const ResizablePanel = /*#__PURE__*/ React.forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, backdrop = false, onBackdropClick, handleVariant = "panel", resizable = true, storageKey, animationState, panelElementRef, className, children, ...rest }, forwardedRef)=>{
     const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
         side,
         size: sizeProp,
@@ -11241,7 +11414,12 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
         onSizeChange: onWidthChange,
         storageKey
     });
+    const composedPanelRef = useComposedRefs(panelRef, panelElementRef);
     const classNames = resizablePanel();
+    // Floating spans its full container edge to edge -- no gutter, no
+    // shrink -- so the panel's own size style is the SAME reservation a
+    // docked spacer would use; only whether `spacer` itself renders differs
+    // below.
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
     const panelSizeStyle = {
         width,
@@ -11255,23 +11433,28 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
             else if (forwardedRef) forwardedRef.current = node;
         },
         className: clsx(classNames.root, className),
+        "data-floating": floating ? "true" : "false",
         ...rest,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+            !floating && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
                 className: classNames.spacer,
-                style: floating ? {
-                    width: 0
-                } : {
+                style: {
                     width,
                     minWidth: min,
                     maxWidth: maxStyle
                 }
             }),
+            floating && backdrop && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                className: classNames.backdrop,
+                "data-state": animationState,
+                onClick: onBackdropClick
+            }),
             /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                ref: panelRef,
+                ref: composedPanelRef,
                 className: classNames.panel,
                 "data-side": side,
                 "data-floating": floating ? "true" : "false",
+                "data-state": animationState,
                 style: panelSizeStyle,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
@@ -11296,7 +11479,7 @@ const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
 });
 ResizablePanel.displayName = "ResizablePanel";
 
-__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
+__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__tabsRoot{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.seed-record-preview__tabPanel{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__tabBadge{margin-inline-start:6px}");
 
 const recordPreviewSlotNames = [
     [
@@ -11406,6 +11589,18 @@ const recordPreviewSlotNames = [
     [
         "footer",
         "seed-record-preview__footer"
+    ],
+    [
+        "tabsRoot",
+        "seed-record-preview__tabsRoot"
+    ],
+    [
+        "tabPanel",
+        "seed-record-preview__tabPanel"
+    ],
+    [
+        "tabBadge",
+        "seed-record-preview__tabBadge"
     ]
 ];
 const defaultVariant = {};
@@ -11423,96 +11618,3054 @@ Object.assign(recordPreview, {
     splitVariantProps: (props)=>splitVariantProps(props, recordPreviewVariantMap)
 }); // @recipe(seed): record-preview
 
-const RESIZE_MIN_WIDTH = 360;
-const RESIZE_MAX_WIDTH = 720;
-/**
- * Right-side record peek panel -- Attio's own peek shows a Highlights card
- * area and an Activity feed (measured live). Ported from your-moon/crisp's
- * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
- * (`side="right" floating`) rather than crisp's own duplicate absolute-
- * positioning/slide-in/resize-handle implementation -- the outer shell (the
- * `@starting-style` slide-in, the floating elevation, the drag handle
- * itself) all come from that primitive; this component only renders the
- * CONTENT inside it.
- */ function RecordPreview({ open, record, onClose, className, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
-    const titleId = React.useId();
-    const classNames = recordPreview();
-    // Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
-    // independent (Attio's own Emails/Notes/Tasks open without closing one
-    // another): a plain `Set`, reset whenever the record itself changes so a
-    // stale open section doesn't carry over between two different records.
-    const [openSections, setOpenSections] = React.useState(()=>new Set());
-    // biome-ignore lint/correctness/useExhaustiveDependencies: `record` is read as a change TRIGGER, not a value the effect body needs -- reset whenever it changes identity, regardless of what it now points to.
-    React.useEffect(()=>{
-        setOpenSections(new Set());
+// This code includes portions derived from radix-ui/primitives (https://github.com/radix-ui/primitives)
+// Used under the MIT License: https://opensource.org/licenses/MIT
+function usePresence(present) {
+    const [node, setNode] = React__namespace.useState();
+    const stylesRef = React__namespace.useRef(null);
+    const prevPresentRef = React__namespace.useRef(present);
+    const prevAnimationNameRef = React__namespace.useRef("none");
+    const initialState = present ? "mounted" : "unmounted";
+    const [state, send] = useStateMachine(initialState, {
+        mounted: {
+            UNMOUNT: "unmounted",
+            ANIMATION_OUT: "unmountSuspended"
+        },
+        unmountSuspended: {
+            MOUNT: "mounted",
+            ANIMATION_END: "unmounted"
+        },
+        unmounted: {
+            MOUNT: "mounted"
+        }
+    });
+    React__namespace.useEffect(()=>{
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
     }, [
-        record
+        state
     ]);
-    const toggleSection = (key)=>setOpenSections((prev)=>{
-            const next = new Set(prev);
-            if (next.has(key)) next.delete(key);
-            else next.add(key);
-            return next;
-        });
-    // Close on Escape while open. Simpler than crisp's own version (crisp
-    // additionally checks `hasOpenFloatingLayer()` so an Escape meant for a
-    // nested Menu/Select/Popover doesn't also close this panel) -- crispy-seed
-    // has no equivalent floating-stack registry to read, so a consumer nesting
-    // its own floating layers inside `footer`/`sections` content should stop
-    // propagation on its own Escape handler.
-    React.useEffect(()=>{
-        if (!open) return;
-        const onKey = (event)=>{
-            if (event.key === "Escape") onClose();
-        };
-        document.addEventListener("keydown", onKey);
-        return ()=>document.removeEventListener("keydown", onKey);
+    useLayoutEffect2(()=>{
+        const styles = stylesRef.current;
+        const wasPresent = prevPresentRef.current;
+        const hasPresentChanged = wasPresent !== present;
+        if (hasPresentChanged) {
+            const prevAnimationName = prevAnimationNameRef.current;
+            const currentAnimationName = getAnimationName(styles);
+            if (present) {
+                send("MOUNT");
+            } else if (currentAnimationName === "none" || styles?.display === "none") {
+                // If there is no exit animation or the element is hidden, animations won't run
+                // so we unmount instantly
+                send("UNMOUNT");
+            } else {
+                /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */ const isAnimating = prevAnimationName !== currentAnimationName;
+                if (wasPresent && isAnimating) {
+                    send("ANIMATION_OUT");
+                } else {
+                    send("UNMOUNT");
+                }
+            }
+            prevPresentRef.current = present;
+        }
     }, [
-        open,
-        onClose
+        present,
+        send
     ]);
-    if (!open || !record) return null;
-    const heading = title ?? record.name ?? "Record";
-    return /*#__PURE__*/ jsxRuntime.jsx(ResizablePanel, {
-        side: "right",
-        floating: true,
-        resizable: resizable,
-        width: width,
-        defaultSize: defaultWidth,
-        onWidthChange: onWidthChange,
-        min: minWidth,
-        max: maxWidth,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-            className: clsx(classNames.root, className),
-            ...rest,
-            role: "dialog",
-            "aria-labelledby": titleId,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                    className: classNames.toolbar,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
-                            type: "button",
-                            className: classNames.iconbtn,
-                            "aria-label": closeLabel,
-                            onClick: onClose,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
-                                size: 16
-                            })
-                        }),
-                        (onPrevious || onNext) && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
-                            className: classNames.pager,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
-                                    type: "button",
-                                    className: classNames.navbtn,
-                                    "aria-label": previousRecordLabel,
-                                    disabled: !onPrevious,
-                                    onClick: onPrevious,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronUpLine_default, {
-                                        size: 16
-                                    })
-                                }),
+    useLayoutEffect2(()=>{
+        if (node) {
+            let timeoutId;
+            const ownerWindow = node.ownerDocument.defaultView ?? window;
+            /**
+       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+       * make sure we only trigger ANIMATION_END for the currently active animation.
+       */ const handleAnimationEnd = (event)=>{
+                const currentAnimationName = getAnimationName(stylesRef.current);
+                const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+                if (event.target === node && isCurrentAnimation) {
+                    // With React 18 concurrency this update is applied a frame after the
+                    // animation ends, creating a flash of visible content. By setting the
+                    // animation fill mode to "forwards", we force the node to keep the
+                    // styles of the last keyframe, removing the flash.
+                    //
+                    // Previously we flushed the update via ReactDom.flushSync, but with
+                    // exit animations this resulted in the node being removed from the
+                    // DOM before the synthetic animationEnd event was dispatched, meaning
+                    // user-provided event handlers would not be called.
+                    // https://github.com/radix-ui/primitives/pull/1849
+                    send("ANIMATION_END");
+                    if (!prevPresentRef.current) {
+                        const currentFillMode = node.style.animationFillMode;
+                        node.style.animationFillMode = "forwards";
+                        // Reset the style after the node had time to unmount (for cases
+                        // where the component chooses not to unmount). Doing this any
+                        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)
+                        // still causes a flash.
+                        timeoutId = ownerWindow.setTimeout(()=>{
+                            if (node.style.animationFillMode === "forwards") {
+                                node.style.animationFillMode = currentFillMode;
+                            }
+                        });
+                    }
+                }
+            };
+            const handleAnimationStart = (event)=>{
+                if (event.target === node) {
+                    // if animation occurred, store its name as the previous animation.
+                    prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+                }
+            };
+            node.addEventListener("animationstart", handleAnimationStart);
+            node.addEventListener("animationcancel", handleAnimationEnd);
+            node.addEventListener("animationend", handleAnimationEnd);
+            return ()=>{
+                ownerWindow.clearTimeout(timeoutId);
+                node.removeEventListener("animationstart", handleAnimationStart);
+                node.removeEventListener("animationcancel", handleAnimationEnd);
+                node.removeEventListener("animationend", handleAnimationEnd);
+            };
+        } else {
+            // Transition to the unmounted state if the node is removed prematurely.
+            // We avoid doing so during cleanup as the node may change but still exist.
+            send("ANIMATION_END");
+        }
+    }, [
+        node,
+        send
+    ]);
+    return {
+        isPresent: [
+            "mounted",
+            "unmountSuspended"
+        ].includes(state),
+        ref: React__namespace.useCallback((node)=>{
+            if (node) stylesRef.current = getComputedStyle(node);
+            setNode(node ?? undefined);
+        }, [])
+    };
+}
+/* -----------------------------------------------------------------------------------------------*/ function getAnimationName(styles) {
+    return styles?.animationName || "none";
+}
+function useStateMachine(initialState, machine) {
+    return React__namespace.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState ?? state;
+    }, initialState);
+}
+const PresenceContext = /*#__PURE__*/ React.createContext(null);
+PresenceContext.Provider;
+
+var __defProp$1 = Object.defineProperty;
+var __name$1 = (target, value)=>__defProp$1(target, "name", {
+        value,
+        configurable: true
+    });
+function useSize(element) {
+    const [size, setSize] = React__namespace.useState(void 0);
+    useLayoutEffect2(()=>{
+        if (element) {
+            setSize({
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            });
+            const resizeObserver = new ResizeObserver((entries)=>{
+                if (!Array.isArray(entries)) {
+                    return;
+                }
+                if (!entries.length) {
+                    return;
+                }
+                const entry = entries[0];
+                let width;
+                let height;
+                if ("borderBoxSize" in entry) {
+                    const borderSizeEntry = entry["borderBoxSize"];
+                    const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                    width = borderSize["inlineSize"];
+                    height = borderSize["blockSize"];
+                } else {
+                    width = element.offsetWidth;
+                    height = element.offsetHeight;
+                }
+                setSize({
+                    width,
+                    height
+                });
+            });
+            resizeObserver.observe(element, {
+                box: "border-box"
+            });
+            return ()=>resizeObserver.unobserve(element);
+        } else {
+            setSize(void 0);
+        }
+    }, [
+        element
+    ]);
+    return size;
+}
+__name$1(useSize, "useSize");
+
+function useSupports(selector) {
+    const [isSupported, setIsSupported] = React.useState(null);
+    React.useEffect(()=>{
+        setIsSupported(CSS.supports(selector));
+    }, [
+        selector
+    ]);
+    return isSupported;
+}
+
+var __defProp = Object.defineProperty;
+var __name = (target, value)=>__defProp(target, "name", {
+        value,
+        configurable: true
+    });
+function useCallbackRef(callback) {
+    const callbackRef = React__namespace.useRef(callback);
+    React__namespace.useEffect(()=>{
+        callbackRef.current = callback;
+    });
+    return React__namespace.useMemo(()=>(...args)=>callbackRef.current?.(...args), []);
+}
+__name(useCallbackRef, "useCallbackRef");
+
+function AutoHeight(userOptions = {}) {
+    let emblaApi;
+    let slideHeights = [];
+    const heightEvents = [
+        'select',
+        'slideFocus'
+    ];
+    function init(emblaApiInstance) {
+        emblaApi = emblaApiInstance;
+        const { options: { axis }, slideRects } = emblaApi.internalEngine();
+        if (axis === 'y') return;
+        slideHeights = slideRects.map((slideRect)=>slideRect.height);
+        heightEvents.forEach((evt)=>emblaApi.on(evt, setContainerHeight));
+        setContainerHeight();
+    }
+    function destroy() {
+        heightEvents.forEach((evt)=>emblaApi.off(evt, setContainerHeight));
+        const container = emblaApi.containerNode();
+        container.style.height = '';
+        if (!container.getAttribute('style')) container.removeAttribute('style');
+    }
+    function highestInView() {
+        const { slideRegistry } = emblaApi.internalEngine();
+        const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+        if (!selectedIndexes) return null;
+        return selectedIndexes.map((index)=>slideHeights[index]).reduce((a, b)=>Math.max(a, b), 0);
+    }
+    function setContainerHeight() {
+        const height = highestInView();
+        if (height === null) return;
+        emblaApi.containerNode().style.height = `${highestInView()}px`;
+    }
+    const self = {
+        name: 'autoHeight',
+        options: userOptions,
+        init,
+        destroy
+    };
+    return self;
+}
+AutoHeight.globalOptions = undefined;
+
+function isObject$1(subject) {
+    return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function isRecord(subject) {
+    return isObject$1(subject) || Array.isArray(subject);
+}
+function canUseDOM() {
+    return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function areOptionsEqual(optionsA, optionsB) {
+    const optionsAKeys = Object.keys(optionsA);
+    const optionsBKeys = Object.keys(optionsB);
+    if (optionsAKeys.length !== optionsBKeys.length) return false;
+    const breakpointsA = JSON.stringify(Object.keys(optionsA.breakpoints || {}));
+    const breakpointsB = JSON.stringify(Object.keys(optionsB.breakpoints || {}));
+    if (breakpointsA !== breakpointsB) return false;
+    return optionsAKeys.every((key)=>{
+        const valueA = optionsA[key];
+        const valueB = optionsB[key];
+        if (typeof valueA === 'function') return `${valueA}` === `${valueB}`;
+        if (!isRecord(valueA) || !isRecord(valueB)) return valueA === valueB;
+        return areOptionsEqual(valueA, valueB);
+    });
+}
+function sortAndMapPluginToOptions(plugins) {
+    return plugins.concat().sort((a, b)=>a.name > b.name ? 1 : -1).map((plugin)=>plugin.options);
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+    if (pluginsA.length !== pluginsB.length) return false;
+    const optionsA = sortAndMapPluginToOptions(pluginsA);
+    const optionsB = sortAndMapPluginToOptions(pluginsB);
+    return optionsA.every((optionA, index)=>{
+        const optionB = optionsB[index];
+        return areOptionsEqual(optionA, optionB);
+    });
+}
+
+function isNumber(subject) {
+    return typeof subject === 'number';
+}
+function isString(subject) {
+    return typeof subject === 'string';
+}
+function isBoolean(subject) {
+    return typeof subject === 'boolean';
+}
+function isObject(subject) {
+    return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function mathAbs(n) {
+    return Math.abs(n);
+}
+function mathSign(n) {
+    return Math.sign(n);
+}
+function deltaAbs(valueB, valueA) {
+    return mathAbs(valueB - valueA);
+}
+function factorAbs(valueB, valueA) {
+    if (valueB === 0 || valueA === 0) return 0;
+    if (mathAbs(valueB) <= mathAbs(valueA)) return 0;
+    const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
+    return mathAbs(diff / valueB);
+}
+function roundToTwoDecimals(num) {
+    return Math.round(num * 100) / 100;
+}
+function arrayKeys(array) {
+    return objectKeys(array).map(Number);
+}
+function arrayLast(array) {
+    return array[arrayLastIndex(array)];
+}
+function arrayLastIndex(array) {
+    return Math.max(0, array.length - 1);
+}
+function arrayIsLastIndex(array, index) {
+    return index === arrayLastIndex(array);
+}
+function arrayFromNumber(n, startAt = 0) {
+    return Array.from(Array(n), (_, i)=>startAt + i);
+}
+function objectKeys(object) {
+    return Object.keys(object);
+}
+function objectsMergeDeep(objectA, objectB) {
+    return [
+        objectA,
+        objectB
+    ].reduce((mergedObjects, currentObject)=>{
+        objectKeys(currentObject).forEach((key)=>{
+            const valueA = mergedObjects[key];
+            const valueB = currentObject[key];
+            const areObjects = isObject(valueA) && isObject(valueB);
+            mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
+        });
+        return mergedObjects;
+    }, {});
+}
+function isMouseEvent(evt, ownerWindow) {
+    return typeof ownerWindow.MouseEvent !== 'undefined' && evt instanceof ownerWindow.MouseEvent;
+}
+function Alignment(align, viewSize) {
+    const predefined = {
+        start,
+        center,
+        end
+    };
+    function start() {
+        return 0;
+    }
+    function center(n) {
+        return end(n) / 2;
+    }
+    function end(n) {
+        return viewSize - n;
+    }
+    function measure(n, index) {
+        if (isString(align)) return predefined[align](n);
+        return align(viewSize, n, index);
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function EventStore() {
+    let listeners = [];
+    function add(node, type, handler, options = {
+        passive: true
+    }) {
+        let removeListener;
+        if ('addEventListener' in node) {
+            node.addEventListener(type, handler, options);
+            removeListener = ()=>node.removeEventListener(type, handler, options);
+        } else {
+            const legacyMediaQueryList = node;
+            legacyMediaQueryList.addListener(handler);
+            removeListener = ()=>legacyMediaQueryList.removeListener(handler);
+        }
+        listeners.push(removeListener);
+        return self;
+    }
+    function clear() {
+        listeners = listeners.filter((remove)=>remove());
+    }
+    const self = {
+        add,
+        clear
+    };
+    return self;
+}
+function Animations(ownerDocument, ownerWindow, update, render) {
+    const documentVisibleHandler = EventStore();
+    const fixedTimeStep = 1000 / 60;
+    let lastTimeStamp = null;
+    let accumulatedTime = 0;
+    let animationId = 0;
+    function init() {
+        documentVisibleHandler.add(ownerDocument, 'visibilitychange', ()=>{
+            if (ownerDocument.hidden) reset();
+        });
+    }
+    function destroy() {
+        stop();
+        documentVisibleHandler.clear();
+    }
+    function animate(timeStamp) {
+        if (!animationId) return;
+        if (!lastTimeStamp) {
+            lastTimeStamp = timeStamp;
+            update();
+            update();
+        }
+        const timeElapsed = timeStamp - lastTimeStamp;
+        lastTimeStamp = timeStamp;
+        accumulatedTime += timeElapsed;
+        while(accumulatedTime >= fixedTimeStep){
+            update();
+            accumulatedTime -= fixedTimeStep;
+        }
+        const alpha = accumulatedTime / fixedTimeStep;
+        render(alpha);
+        if (animationId) {
+            animationId = ownerWindow.requestAnimationFrame(animate);
+        }
+    }
+    function start() {
+        if (animationId) return;
+        animationId = ownerWindow.requestAnimationFrame(animate);
+    }
+    function stop() {
+        ownerWindow.cancelAnimationFrame(animationId);
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+        animationId = 0;
+    }
+    function reset() {
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+    }
+    const self = {
+        init,
+        destroy,
+        start,
+        stop,
+        update,
+        render
+    };
+    return self;
+}
+function Axis(axis, contentDirection) {
+    const isRightToLeft = contentDirection === 'rtl';
+    const isVertical = axis === 'y';
+    const scroll = isVertical ? 'y' : 'x';
+    const cross = isVertical ? 'x' : 'y';
+    const sign = !isVertical && isRightToLeft ? -1 : 1;
+    const startEdge = getStartEdge();
+    const endEdge = getEndEdge();
+    function measureSize(nodeRect) {
+        const { height, width } = nodeRect;
+        return isVertical ? height : width;
+    }
+    function getStartEdge() {
+        if (isVertical) return 'top';
+        return isRightToLeft ? 'right' : 'left';
+    }
+    function getEndEdge() {
+        if (isVertical) return 'bottom';
+        return isRightToLeft ? 'left' : 'right';
+    }
+    function direction(n) {
+        return n * sign;
+    }
+    const self = {
+        scroll,
+        cross,
+        startEdge,
+        endEdge,
+        measureSize,
+        direction
+    };
+    return self;
+}
+function Limit(min = 0, max = 0) {
+    const length = mathAbs(min - max);
+    function reachedMin(n) {
+        return n < min;
+    }
+    function reachedMax(n) {
+        return n > max;
+    }
+    function reachedAny(n) {
+        return reachedMin(n) || reachedMax(n);
+    }
+    function constrain(n) {
+        if (!reachedAny(n)) return n;
+        return reachedMin(n) ? min : max;
+    }
+    function removeOffset(n) {
+        if (!length) return n;
+        return n - length * Math.ceil((n - max) / length);
+    }
+    const self = {
+        length,
+        max,
+        min,
+        constrain,
+        reachedAny,
+        reachedMax,
+        reachedMin,
+        removeOffset
+    };
+    return self;
+}
+function Counter(max, start, loop) {
+    const { constrain } = Limit(0, max);
+    const loopEnd = max + 1;
+    let counter = withinLimit(start);
+    function withinLimit(n) {
+        return !loop ? constrain(n) : mathAbs((loopEnd + n) % loopEnd);
+    }
+    function get() {
+        return counter;
+    }
+    function set(n) {
+        counter = withinLimit(n);
+        return self;
+    }
+    function add(n) {
+        return clone().set(get() + n);
+    }
+    function clone() {
+        return Counter(max, get(), loop);
+    }
+    const self = {
+        get,
+        set,
+        add,
+        clone
+    };
+    return self;
+}
+function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
+    const { cross: crossAxis, direction } = axis;
+    const focusNodes = [
+        'INPUT',
+        'SELECT',
+        'TEXTAREA'
+    ];
+    const nonPassiveEvent = {
+        passive: false
+    };
+    const initEvents = EventStore();
+    const dragEvents = EventStore();
+    const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
+    const snapForceBoost = {
+        mouse: 300,
+        touch: 400
+    };
+    const freeForceBoost = {
+        mouse: 500,
+        touch: 600
+    };
+    const baseSpeed = dragFree ? 43 : 25;
+    let isMoving = false;
+    let startScroll = 0;
+    let startCross = 0;
+    let pointerIsDown = false;
+    let preventScroll = false;
+    let preventClick = false;
+    let isMouse = false;
+    function init(emblaApi) {
+        if (!watchDrag) return;
+        function downIfAllowed(evt) {
+            if (isBoolean(watchDrag) || watchDrag(emblaApi, evt)) down(evt);
+        }
+        const node = rootNode;
+        initEvents.add(node, 'dragstart', (evt)=>evt.preventDefault(), nonPassiveEvent).add(node, 'touchmove', ()=>undefined, nonPassiveEvent).add(node, 'touchend', ()=>undefined).add(node, 'touchstart', downIfAllowed).add(node, 'mousedown', downIfAllowed).add(node, 'touchcancel', up).add(node, 'contextmenu', up).add(node, 'click', click, true);
+    }
+    function destroy() {
+        initEvents.clear();
+        dragEvents.clear();
+    }
+    function addDragEvents() {
+        const node = isMouse ? ownerDocument : rootNode;
+        dragEvents.add(node, 'touchmove', move, nonPassiveEvent).add(node, 'touchend', up).add(node, 'mousemove', move, nonPassiveEvent).add(node, 'mouseup', up);
+    }
+    function isFocusNode(node) {
+        const nodeName = node.nodeName || '';
+        return focusNodes.includes(nodeName);
+    }
+    function forceBoost() {
+        const boost = dragFree ? freeForceBoost : snapForceBoost;
+        const type = isMouse ? 'mouse' : 'touch';
+        return boost[type];
+    }
+    function allowedForce(force, targetChanged) {
+        const next = index.add(mathSign(force) * -1);
+        const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
+        if (dragFree || mathAbs(force) < goToNextThreshold) return baseForce;
+        if (skipSnaps && targetChanged) return baseForce * 0.5;
+        return scrollTarget.byIndex(next.get(), 0).distance;
+    }
+    function down(evt) {
+        const isMouseEvt = isMouseEvent(evt, ownerWindow);
+        isMouse = isMouseEvt;
+        preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
+        isMoving = deltaAbs(target.get(), location.get()) >= 2;
+        if (isMouseEvt && evt.button !== 0) return;
+        if (isFocusNode(evt.target)) return;
+        pointerIsDown = true;
+        dragTracker.pointerDown(evt);
+        scrollBody.useFriction(0).useDuration(0);
+        target.set(location);
+        addDragEvents();
+        startScroll = dragTracker.readPoint(evt);
+        startCross = dragTracker.readPoint(evt, crossAxis);
+        eventHandler.emit('pointerDown');
+    }
+    function move(evt) {
+        const isTouchEvt = !isMouseEvent(evt, ownerWindow);
+        if (isTouchEvt && evt.touches.length >= 2) return up(evt);
+        const lastScroll = dragTracker.readPoint(evt);
+        const lastCross = dragTracker.readPoint(evt, crossAxis);
+        const diffScroll = deltaAbs(lastScroll, startScroll);
+        const diffCross = deltaAbs(lastCross, startCross);
+        if (!preventScroll && !isMouse) {
+            if (!evt.cancelable) return up(evt);
+            preventScroll = diffScroll > diffCross;
+            if (!preventScroll) return up(evt);
+        }
+        const diff = dragTracker.pointerMove(evt);
+        if (diffScroll > dragThreshold) preventClick = true;
+        scrollBody.useFriction(0.3).useDuration(0.75);
+        animation.start();
+        target.add(direction(diff));
+        evt.preventDefault();
+    }
+    function up(evt) {
+        const currentLocation = scrollTarget.byDistance(0, false);
+        const targetChanged = currentLocation.index !== index.get();
+        const rawForce = dragTracker.pointerUp(evt) * forceBoost();
+        const force = allowedForce(direction(rawForce), targetChanged);
+        const forceFactor = factorAbs(rawForce, force);
+        const speed = baseSpeed - 10 * forceFactor;
+        const friction = baseFriction + forceFactor / 50;
+        preventScroll = false;
+        pointerIsDown = false;
+        dragEvents.clear();
+        scrollBody.useDuration(speed).useFriction(friction);
+        scrollTo.distance(force, !dragFree);
+        isMouse = false;
+        eventHandler.emit('pointerUp');
+    }
+    function click(evt) {
+        if (preventClick) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            preventClick = false;
+        }
+    }
+    function pointerDown() {
+        return pointerIsDown;
+    }
+    const self = {
+        init,
+        destroy,
+        pointerDown
+    };
+    return self;
+}
+function DragTracker(axis, ownerWindow) {
+    const logInterval = 170;
+    let startEvent;
+    let lastEvent;
+    function readTime(evt) {
+        return evt.timeStamp;
+    }
+    function readPoint(evt, evtAxis) {
+        const property = evtAxis || axis.scroll;
+        const coord = `client${property === 'x' ? 'X' : 'Y'}`;
+        return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
+    }
+    function pointerDown(evt) {
+        startEvent = evt;
+        lastEvent = evt;
+        return readPoint(evt);
+    }
+    function pointerMove(evt) {
+        const diff = readPoint(evt) - readPoint(lastEvent);
+        const expired = readTime(evt) - readTime(startEvent) > logInterval;
+        lastEvent = evt;
+        if (expired) startEvent = evt;
+        return diff;
+    }
+    function pointerUp(evt) {
+        if (!startEvent || !lastEvent) return 0;
+        const diffDrag = readPoint(lastEvent) - readPoint(startEvent);
+        const diffTime = readTime(evt) - readTime(startEvent);
+        const expired = readTime(evt) - readTime(lastEvent) > logInterval;
+        const force = diffDrag / diffTime;
+        const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
+        return isFlick ? force : 0;
+    }
+    const self = {
+        pointerDown,
+        pointerMove,
+        pointerUp,
+        readPoint
+    };
+    return self;
+}
+function NodeRects() {
+    function measure(node) {
+        const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node;
+        const offset = {
+            top: offsetTop,
+            right: offsetLeft + offsetWidth,
+            bottom: offsetTop + offsetHeight,
+            left: offsetLeft,
+            width: offsetWidth,
+            height: offsetHeight
+        };
+        return offset;
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function PercentOfView(viewSize) {
+    function measure(n) {
+        return viewSize * (n / 100);
+    }
+    const self = {
+        measure
+    };
+    return self;
+}
+function ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects) {
+    const observeNodes = [
+        container
+    ].concat(slides);
+    let resizeObserver;
+    let containerSize;
+    let slideSizes = [];
+    let destroyed = false;
+    function readSize(node) {
+        return axis.measureSize(nodeRects.measure(node));
+    }
+    function init(emblaApi) {
+        if (!watchResize) return;
+        containerSize = readSize(container);
+        slideSizes = slides.map(readSize);
+        function defaultCallback(entries) {
+            for (const entry of entries){
+                if (destroyed) return;
+                const isContainer = entry.target === container;
+                const slideIndex = slides.indexOf(entry.target);
+                const lastSize = isContainer ? containerSize : slideSizes[slideIndex];
+                const newSize = readSize(isContainer ? container : slides[slideIndex]);
+                const diffSize = mathAbs(newSize - lastSize);
+                if (diffSize >= 0.5) {
+                    emblaApi.reInit();
+                    eventHandler.emit('resize');
+                    break;
+                }
+            }
+        }
+        resizeObserver = new ResizeObserver((entries)=>{
+            if (isBoolean(watchResize) || watchResize(emblaApi, entries)) {
+                defaultCallback(entries);
+            }
+        });
+        ownerWindow.requestAnimationFrame(()=>{
+            observeNodes.forEach((node)=>resizeObserver.observe(node));
+        });
+    }
+    function destroy() {
+        destroyed = true;
+        if (resizeObserver) resizeObserver.disconnect();
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
+    let scrollVelocity = 0;
+    let scrollDirection = 0;
+    let scrollDuration = baseDuration;
+    let scrollFriction = baseFriction;
+    let rawLocation = location.get();
+    let rawLocationPrevious = 0;
+    function seek() {
+        const displacement = target.get() - location.get();
+        const isInstant = !scrollDuration;
+        let scrollDistance = 0;
+        if (isInstant) {
+            scrollVelocity = 0;
+            previousLocation.set(target);
+            location.set(target);
+            scrollDistance = displacement;
+        } else {
+            previousLocation.set(location);
+            scrollVelocity += displacement / scrollDuration;
+            scrollVelocity *= scrollFriction;
+            rawLocation += scrollVelocity;
+            location.add(scrollVelocity);
+            scrollDistance = rawLocation - rawLocationPrevious;
+        }
+        scrollDirection = mathSign(scrollDistance);
+        rawLocationPrevious = rawLocation;
+        return self;
+    }
+    function settled() {
+        const diff = target.get() - offsetLocation.get();
+        return mathAbs(diff) < 0.001;
+    }
+    function duration() {
+        return scrollDuration;
+    }
+    function direction() {
+        return scrollDirection;
+    }
+    function velocity() {
+        return scrollVelocity;
+    }
+    function useBaseDuration() {
+        return useDuration(baseDuration);
+    }
+    function useBaseFriction() {
+        return useFriction(baseFriction);
+    }
+    function useDuration(n) {
+        scrollDuration = n;
+        return self;
+    }
+    function useFriction(n) {
+        scrollFriction = n;
+        return self;
+    }
+    const self = {
+        direction,
+        duration,
+        velocity,
+        seek,
+        settled,
+        useBaseFriction,
+        useBaseDuration,
+        useFriction,
+        useDuration
+    };
+    return self;
+}
+function ScrollBounds(limit, location, target, scrollBody, percentOfView) {
+    const pullBackThreshold = percentOfView.measure(10);
+    const edgeOffsetTolerance = percentOfView.measure(50);
+    const frictionLimit = Limit(0.1, 0.99);
+    let disabled = false;
+    function shouldConstrain() {
+        if (disabled) return false;
+        if (!limit.reachedAny(target.get())) return false;
+        if (!limit.reachedAny(location.get())) return false;
+        return true;
+    }
+    function constrain(pointerDown) {
+        if (!shouldConstrain()) return;
+        const edge = limit.reachedMin(location.get()) ? 'min' : 'max';
+        const diffToEdge = mathAbs(limit[edge] - location.get());
+        const diffToTarget = target.get() - location.get();
+        const friction = frictionLimit.constrain(diffToEdge / edgeOffsetTolerance);
+        target.subtract(diffToTarget * friction);
+        if (!pointerDown && mathAbs(diffToTarget) < pullBackThreshold) {
+            target.set(limit.constrain(target.get()));
+            scrollBody.useDuration(25).useBaseFriction();
+        }
+    }
+    function toggleActive(active) {
+        disabled = !active;
+    }
+    const self = {
+        shouldConstrain,
+        constrain,
+        toggleActive
+    };
+    return self;
+}
+function ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance) {
+    const scrollBounds = Limit(-contentSize + viewSize, 0);
+    const snapsBounded = measureBounded();
+    const scrollContainLimit = findScrollContainLimit();
+    const snapsContained = measureContained();
+    function usePixelTolerance(bound, snap) {
+        return deltaAbs(bound, snap) <= 1;
+    }
+    function findScrollContainLimit() {
+        const startSnap = snapsBounded[0];
+        const endSnap = arrayLast(snapsBounded);
+        const min = snapsBounded.lastIndexOf(startSnap);
+        const max = snapsBounded.indexOf(endSnap) + 1;
+        return Limit(min, max);
+    }
+    function measureBounded() {
+        return snapsAligned.map((snapAligned, index)=>{
+            const { min, max } = scrollBounds;
+            const snap = scrollBounds.constrain(snapAligned);
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(snapsAligned, index);
+            if (isFirst) return max;
+            if (isLast) return min;
+            if (usePixelTolerance(min, snap)) return min;
+            if (usePixelTolerance(max, snap)) return max;
+            return snap;
+        }).map((scrollBound)=>parseFloat(scrollBound.toFixed(3)));
+    }
+    function measureContained() {
+        if (contentSize <= viewSize + pixelTolerance) return [
+            scrollBounds.max
+        ];
+        if (containScroll === 'keepSnaps') return snapsBounded;
+        const { min, max } = scrollContainLimit;
+        return snapsBounded.slice(min, max);
+    }
+    const self = {
+        snapsContained,
+        scrollContainLimit
+    };
+    return self;
+}
+function ScrollLimit(contentSize, scrollSnaps, loop) {
+    const max = scrollSnaps[0];
+    const min = loop ? max - contentSize : arrayLast(scrollSnaps);
+    const limit = Limit(min, max);
+    const self = {
+        limit
+    };
+    return self;
+}
+function ScrollLooper(contentSize, limit, location, vectors) {
+    const jointSafety = 0.1;
+    const min = limit.min + jointSafety;
+    const max = limit.max + jointSafety;
+    const { reachedMin, reachedMax } = Limit(min, max);
+    function shouldLoop(direction) {
+        if (direction === 1) return reachedMax(location.get());
+        if (direction === -1) return reachedMin(location.get());
+        return false;
+    }
+    function loop(direction) {
+        if (!shouldLoop(direction)) return;
+        const loopDistance = contentSize * (direction * -1);
+        vectors.forEach((v)=>v.add(loopDistance));
+    }
+    const self = {
+        loop
+    };
+    return self;
+}
+function ScrollProgress(limit) {
+    const { max, length } = limit;
+    function get(n) {
+        const currentLocation = n - max;
+        return length ? currentLocation / -length : 0;
+    }
+    const self = {
+        get
+    };
+    return self;
+}
+function ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll) {
+    const { startEdge, endEdge } = axis;
+    const { groupSlides } = slidesToScroll;
+    const alignments = measureSizes().map(alignment.measure);
+    const snaps = measureUnaligned();
+    const snapsAligned = measureAligned();
+    function measureSizes() {
+        return groupSlides(slideRects).map((rects)=>arrayLast(rects)[endEdge] - rects[0][startEdge]).map(mathAbs);
+    }
+    function measureUnaligned() {
+        return slideRects.map((rect)=>containerRect[startEdge] - rect[startEdge]).map((snap)=>-mathAbs(snap));
+    }
+    function measureAligned() {
+        return groupSlides(snaps).map((g)=>g[0]).map((snap, index)=>snap + alignments[index]);
+    }
+    const self = {
+        snaps,
+        snapsAligned
+    };
+    return self;
+}
+function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
+    const { groupSlides } = slidesToScroll;
+    const { min, max } = scrollContainLimit;
+    const slideRegistry = createSlideRegistry();
+    function createSlideRegistry() {
+        const groupedSlideIndexes = groupSlides(slideIndexes);
+        const doNotContain = !containSnaps || containScroll === 'keepSnaps';
+        if (scrollSnaps.length === 1) return [
+            slideIndexes
+        ];
+        if (doNotContain) return groupedSlideIndexes;
+        return groupedSlideIndexes.slice(min, max).map((group, index, groups)=>{
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(groups, index);
+            if (isFirst) {
+                const range = arrayLast(groups[0]) + 1;
+                return arrayFromNumber(range);
+            }
+            if (isLast) {
+                const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
+                return arrayFromNumber(range, arrayLast(groups)[0]);
+            }
+            return group;
+        });
+    }
+    const self = {
+        slideRegistry
+    };
+    return self;
+}
+function ScrollTarget(loop, scrollSnaps, contentSize, limit, targetVector) {
+    const { reachedAny, removeOffset, constrain } = limit;
+    function minDistance(distances) {
+        return distances.concat().sort((a, b)=>mathAbs(a) - mathAbs(b))[0];
+    }
+    function findTargetSnap(target) {
+        const distance = loop ? removeOffset(target) : constrain(target);
+        const ascDiffsToSnaps = scrollSnaps.map((snap, index)=>({
+                diff: shortcut(snap - distance, 0),
+                index
+            })).sort((d1, d2)=>mathAbs(d1.diff) - mathAbs(d2.diff));
+        const { index } = ascDiffsToSnaps[0];
+        return {
+            index,
+            distance
+        };
+    }
+    function shortcut(target, direction) {
+        const targets = [
+            target,
+            target + contentSize,
+            target - contentSize
+        ];
+        if (!loop) return target;
+        if (!direction) return minDistance(targets);
+        const matchingTargets = targets.filter((t)=>mathSign(t) === direction);
+        if (matchingTargets.length) return minDistance(matchingTargets);
+        return arrayLast(targets) - contentSize;
+    }
+    function byIndex(index, direction) {
+        const diffToSnap = scrollSnaps[index] - targetVector.get();
+        const distance = shortcut(diffToSnap, direction);
+        return {
+            index,
+            distance
+        };
+    }
+    function byDistance(distance, snap) {
+        const target = targetVector.get() + distance;
+        const { index, distance: targetSnapDistance } = findTargetSnap(target);
+        const reachedBound = !loop && reachedAny(target);
+        if (!snap || reachedBound) return {
+            index,
+            distance
+        };
+        const diffToSnap = scrollSnaps[index] - targetSnapDistance;
+        const snapDistance = distance + shortcut(diffToSnap, 0);
+        return {
+            index,
+            distance: snapDistance
+        };
+    }
+    const self = {
+        byDistance,
+        byIndex,
+        shortcut
+    };
+    return self;
+}
+function ScrollTo(animation, indexCurrent, indexPrevious, scrollBody, scrollTarget, targetVector, eventHandler) {
+    function scrollTo(target) {
+        const distanceDiff = target.distance;
+        const indexDiff = target.index !== indexCurrent.get();
+        targetVector.add(distanceDiff);
+        if (distanceDiff) {
+            if (scrollBody.duration()) {
+                animation.start();
+            } else {
+                animation.update();
+                animation.render(1);
+                animation.update();
+            }
+        }
+        if (indexDiff) {
+            indexPrevious.set(indexCurrent.get());
+            indexCurrent.set(target.index);
+            eventHandler.emit('select');
+        }
+    }
+    function distance(n, snap) {
+        const target = scrollTarget.byDistance(n, snap);
+        scrollTo(target);
+    }
+    function index(n, direction) {
+        const targetIndex = indexCurrent.clone().set(n);
+        const target = scrollTarget.byIndex(targetIndex.get(), direction);
+        scrollTo(target);
+    }
+    const self = {
+        distance,
+        index
+    };
+    return self;
+}
+function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
+    const focusListenerOptions = {
+        passive: true,
+        capture: true
+    };
+    let lastTabPressTime = 0;
+    function init(emblaApi) {
+        if (!watchFocus) return;
+        function defaultCallback(index) {
+            const nowTime = new Date().getTime();
+            const diffTime = nowTime - lastTabPressTime;
+            if (diffTime > 10) return;
+            eventHandler.emit('slideFocusStart');
+            root.scrollLeft = 0;
+            const group = slideRegistry.findIndex((group)=>group.includes(index));
+            if (!isNumber(group)) return;
+            scrollBody.useDuration(0);
+            scrollTo.index(group, 0);
+            eventHandler.emit('slideFocus');
+        }
+        eventStore.add(document, 'keydown', registerTabPress, false);
+        slides.forEach((slide, slideIndex)=>{
+            eventStore.add(slide, 'focus', (evt)=>{
+                if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
+                    defaultCallback(slideIndex);
+                }
+            }, focusListenerOptions);
+        });
+    }
+    function registerTabPress(event) {
+        if (event.code === 'Tab') lastTabPressTime = new Date().getTime();
+    }
+    const self = {
+        init
+    };
+    return self;
+}
+function Vector1D(initialValue) {
+    let value = initialValue;
+    function get() {
+        return value;
+    }
+    function set(n) {
+        value = normalizeInput(n);
+    }
+    function add(n) {
+        value += normalizeInput(n);
+    }
+    function subtract(n) {
+        value -= normalizeInput(n);
+    }
+    function normalizeInput(n) {
+        return isNumber(n) ? n : n.get();
+    }
+    const self = {
+        get,
+        set,
+        add,
+        subtract
+    };
+    return self;
+}
+function Translate(axis, container) {
+    const translate = axis.scroll === 'x' ? x : y;
+    const containerStyle = container.style;
+    let previousTarget = null;
+    let disabled = false;
+    function x(n) {
+        return `translate3d(${n}px,0px,0px)`;
+    }
+    function y(n) {
+        return `translate3d(0px,${n}px,0px)`;
+    }
+    function to(target) {
+        if (disabled) return;
+        const newTarget = roundToTwoDecimals(axis.direction(target));
+        if (newTarget === previousTarget) return;
+        containerStyle.transform = translate(newTarget);
+        previousTarget = newTarget;
+    }
+    function toggleActive(active) {
+        disabled = !active;
+    }
+    function clear() {
+        if (disabled) return;
+        containerStyle.transform = '';
+        if (!container.getAttribute('style')) container.removeAttribute('style');
+    }
+    const self = {
+        clear,
+        to,
+        toggleActive
+    };
+    return self;
+}
+function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
+    const roundingSafety = 0.5;
+    const ascItems = arrayKeys(slideSizesWithGaps);
+    const descItems = arrayKeys(slideSizesWithGaps).reverse();
+    const loopPoints = startPoints().concat(endPoints());
+    function removeSlideSizes(indexes, from) {
+        return indexes.reduce((a, i)=>{
+            return a - slideSizesWithGaps[i];
+        }, from);
+    }
+    function slidesInGap(indexes, gap) {
+        return indexes.reduce((a, i)=>{
+            const remainingGap = removeSlideSizes(a, gap);
+            return remainingGap > 0 ? a.concat([
+                i
+            ]) : a;
+        }, []);
+    }
+    function findSlideBounds(offset) {
+        return snaps.map((snap, index)=>({
+                start: snap - slideSizes[index] + roundingSafety + offset,
+                end: snap + viewSize - roundingSafety + offset
+            }));
+    }
+    function findLoopPoints(indexes, offset, isEndEdge) {
+        const slideBounds = findSlideBounds(offset);
+        return indexes.map((index)=>{
+            const initial = isEndEdge ? 0 : -contentSize;
+            const altered = isEndEdge ? contentSize : 0;
+            const boundEdge = isEndEdge ? 'end' : 'start';
+            const loopPoint = slideBounds[index][boundEdge];
+            return {
+                index,
+                loopPoint,
+                slideLocation: Vector1D(-1),
+                translate: Translate(axis, slides[index]),
+                target: ()=>location.get() > loopPoint ? initial : altered
+            };
+        });
+    }
+    function startPoints() {
+        const gap = scrollSnaps[0];
+        const indexes = slidesInGap(descItems, gap);
+        return findLoopPoints(indexes, contentSize, false);
+    }
+    function endPoints() {
+        const gap = viewSize - scrollSnaps[0] - 1;
+        const indexes = slidesInGap(ascItems, gap);
+        return findLoopPoints(indexes, -contentSize, true);
+    }
+    function canLoop() {
+        return loopPoints.every(({ index })=>{
+            const otherIndexes = ascItems.filter((i)=>i !== index);
+            return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
+        });
+    }
+    function loop() {
+        loopPoints.forEach((loopPoint)=>{
+            const { target, translate, slideLocation } = loopPoint;
+            const shiftLocation = target();
+            if (shiftLocation === slideLocation.get()) return;
+            translate.to(shiftLocation);
+            slideLocation.set(shiftLocation);
+        });
+    }
+    function clear() {
+        loopPoints.forEach((loopPoint)=>loopPoint.translate.clear());
+    }
+    const self = {
+        canLoop,
+        clear,
+        loop,
+        loopPoints
+    };
+    return self;
+}
+function SlidesHandler(container, eventHandler, watchSlides) {
+    let mutationObserver;
+    let destroyed = false;
+    function init(emblaApi) {
+        if (!watchSlides) return;
+        function defaultCallback(mutations) {
+            for (const mutation of mutations){
+                if (mutation.type === 'childList') {
+                    emblaApi.reInit();
+                    eventHandler.emit('slidesChanged');
+                    break;
+                }
+            }
+        }
+        mutationObserver = new MutationObserver((mutations)=>{
+            if (destroyed) return;
+            if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
+                defaultCallback(mutations);
+            }
+        });
+        mutationObserver.observe(container, {
+            childList: true
+        });
+    }
+    function destroy() {
+        if (mutationObserver) mutationObserver.disconnect();
+        destroyed = true;
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function SlidesInView(container, slides, eventHandler, threshold) {
+    const intersectionEntryMap = {};
+    let inViewCache = null;
+    let notInViewCache = null;
+    let intersectionObserver;
+    let destroyed = false;
+    function init() {
+        intersectionObserver = new IntersectionObserver((entries)=>{
+            if (destroyed) return;
+            entries.forEach((entry)=>{
+                const index = slides.indexOf(entry.target);
+                intersectionEntryMap[index] = entry;
+            });
+            inViewCache = null;
+            notInViewCache = null;
+            eventHandler.emit('slidesInView');
+        }, {
+            root: container.parentElement,
+            threshold
+        });
+        slides.forEach((slide)=>intersectionObserver.observe(slide));
+    }
+    function destroy() {
+        if (intersectionObserver) intersectionObserver.disconnect();
+        destroyed = true;
+    }
+    function createInViewList(inView) {
+        return objectKeys(intersectionEntryMap).reduce((list, slideIndex)=>{
+            const index = parseInt(slideIndex);
+            const { isIntersecting } = intersectionEntryMap[index];
+            const inViewMatch = inView && isIntersecting;
+            const notInViewMatch = !inView && !isIntersecting;
+            if (inViewMatch || notInViewMatch) list.push(index);
+            return list;
+        }, []);
+    }
+    function get(inView = true) {
+        if (inView && inViewCache) return inViewCache;
+        if (!inView && notInViewCache) return notInViewCache;
+        const slideIndexes = createInViewList(inView);
+        if (inView) inViewCache = slideIndexes;
+        if (!inView) notInViewCache = slideIndexes;
+        return slideIndexes;
+    }
+    const self = {
+        init,
+        destroy,
+        get
+    };
+    return self;
+}
+function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
+    const { measureSize, startEdge, endEdge } = axis;
+    const withEdgeGap = slideRects[0] && readEdgeGap;
+    const startGap = measureStartGap();
+    const endGap = measureEndGap();
+    const slideSizes = slideRects.map(measureSize);
+    const slideSizesWithGaps = measureWithGaps();
+    function measureStartGap() {
+        if (!withEdgeGap) return 0;
+        const slideRect = slideRects[0];
+        return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
+    }
+    function measureEndGap() {
+        if (!withEdgeGap) return 0;
+        const style = ownerWindow.getComputedStyle(arrayLast(slides));
+        return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
+    }
+    function measureWithGaps() {
+        return slideRects.map((rect, index, rects)=>{
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(rects, index);
+            if (isFirst) return slideSizes[index] + startGap;
+            if (isLast) return slideSizes[index] + endGap;
+            return rects[index + 1][startEdge] - rect[startEdge];
+        }).map(mathAbs);
+    }
+    const self = {
+        slideSizes,
+        slideSizesWithGaps,
+        startGap,
+        endGap
+    };
+    return self;
+}
+function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
+    const { startEdge, endEdge, direction } = axis;
+    const groupByNumber = isNumber(slidesToScroll);
+    function byNumber(array, groupSize) {
+        return arrayKeys(array).filter((i)=>i % groupSize === 0).map((i)=>array.slice(i, i + groupSize));
+    }
+    function bySize(array) {
+        if (!array.length) return [];
+        return arrayKeys(array).reduce((groups, rectB, index)=>{
+            const rectA = arrayLast(groups) || 0;
+            const isFirst = rectA === 0;
+            const isLast = rectB === arrayLastIndex(array);
+            const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
+            const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
+            const gapA = !loop && isFirst ? direction(startGap) : 0;
+            const gapB = !loop && isLast ? direction(endGap) : 0;
+            const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
+            if (index && chunkSize > viewSize + pixelTolerance) groups.push(rectB);
+            if (isLast) groups.push(array.length);
+            return groups;
+        }, []).map((currentSize, index, groups)=>{
+            const previousSize = Math.max(groups[index - 1] || 0);
+            return array.slice(previousSize, currentSize);
+        });
+    }
+    function groupSlides(array) {
+        return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
+    }
+    const self = {
+        groupSlides
+    };
+    return self;
+}
+function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
+    // Options
+    const { align, axis: scrollAxis, direction, startIndex, loop, duration, dragFree, dragThreshold, inViewThreshold, slidesToScroll: groupSlides, skipSnaps, containScroll, watchResize, watchSlides, watchDrag, watchFocus } = options;
+    // Measurements
+    const pixelTolerance = 2;
+    const nodeRects = NodeRects();
+    const containerRect = nodeRects.measure(container);
+    const slideRects = slides.map(nodeRects.measure);
+    const axis = Axis(scrollAxis, direction);
+    const viewSize = axis.measureSize(containerRect);
+    const percentOfView = PercentOfView(viewSize);
+    const alignment = Alignment(align, viewSize);
+    const containSnaps = !loop && !!containScroll;
+    const readEdgeGap = loop || !!containScroll;
+    const { slideSizes, slideSizesWithGaps, startGap, endGap } = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
+    const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
+    const { snaps, snapsAligned } = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
+    const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
+    const { snapsContained, scrollContainLimit } = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
+    const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
+    const { limit } = ScrollLimit(contentSize, scrollSnaps, loop);
+    // Indexes
+    const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
+    const indexPrevious = index.clone();
+    const slideIndexes = arrayKeys(slides);
+    // Animation
+    const update = ({ dragHandler, scrollBody, scrollBounds, options: { loop } })=>{
+        if (!loop) scrollBounds.constrain(dragHandler.pointerDown());
+        scrollBody.seek();
+    };
+    const render = ({ scrollBody, translate, location, offsetLocation, previousLocation, scrollLooper, slideLooper, dragHandler, animation, eventHandler, scrollBounds, options: { loop } }, alpha)=>{
+        const shouldSettle = scrollBody.settled();
+        const withinBounds = !scrollBounds.shouldConstrain();
+        const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
+        const hasSettledAndIdle = hasSettled && !dragHandler.pointerDown();
+        if (hasSettledAndIdle) animation.stop();
+        const interpolatedLocation = location.get() * alpha + previousLocation.get() * (1 - alpha);
+        offsetLocation.set(interpolatedLocation);
+        if (loop) {
+            scrollLooper.loop(scrollBody.direction());
+            slideLooper.loop();
+        }
+        translate.to(offsetLocation.get());
+        if (hasSettledAndIdle) eventHandler.emit('settle');
+        if (!hasSettled) eventHandler.emit('scroll');
+    };
+    const animation = Animations(ownerDocument, ownerWindow, ()=>update(engine), (alpha)=>render(engine, alpha));
+    // Shared
+    const friction = 0.68;
+    const startLocation = scrollSnaps[index.get()];
+    const location = Vector1D(startLocation);
+    const previousLocation = Vector1D(startLocation);
+    const offsetLocation = Vector1D(startLocation);
+    const target = Vector1D(startLocation);
+    const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+    const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
+    const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
+    const scrollProgress = ScrollProgress(limit);
+    const eventStore = EventStore();
+    const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
+    const { slideRegistry } = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
+    const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
+    // Engine
+    const engine = {
+        ownerDocument,
+        ownerWindow,
+        eventHandler,
+        containerRect,
+        slideRects,
+        animation,
+        axis,
+        dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
+        eventStore,
+        percentOfView,
+        index,
+        indexPrevious,
+        limit,
+        location,
+        offsetLocation,
+        previousLocation,
+        options,
+        resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
+        scrollBody,
+        scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
+        scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [
+            location,
+            offsetLocation,
+            previousLocation,
+            target
+        ]),
+        scrollProgress,
+        scrollSnapList: scrollSnaps.map(scrollProgress.get),
+        scrollSnaps,
+        scrollTarget,
+        scrollTo,
+        slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
+        slideFocus,
+        slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
+        slidesInView,
+        slideIndexes,
+        slideRegistry,
+        slidesToScroll,
+        target,
+        translate: Translate(axis, container)
+    };
+    return engine;
+}
+function EventHandler() {
+    let listeners = {};
+    let api;
+    function init(emblaApi) {
+        api = emblaApi;
+    }
+    function getListeners(evt) {
+        return listeners[evt] || [];
+    }
+    function emit(evt) {
+        getListeners(evt).forEach((e)=>e(api, evt));
+        return self;
+    }
+    function on(evt, cb) {
+        listeners[evt] = getListeners(evt).concat([
+            cb
+        ]);
+        return self;
+    }
+    function off(evt, cb) {
+        listeners[evt] = getListeners(evt).filter((e)=>e !== cb);
+        return self;
+    }
+    function clear() {
+        listeners = {};
+    }
+    const self = {
+        init,
+        emit,
+        off,
+        on,
+        clear
+    };
+    return self;
+}
+const defaultOptions = {
+    align: 'center',
+    axis: 'x',
+    container: null,
+    slides: null,
+    containScroll: 'trimSnaps',
+    direction: 'ltr',
+    slidesToScroll: 1,
+    inViewThreshold: 0,
+    breakpoints: {},
+    dragFree: false,
+    dragThreshold: 10,
+    loop: false,
+    skipSnaps: false,
+    duration: 25,
+    startIndex: 0,
+    active: true,
+    watchDrag: true,
+    watchResize: true,
+    watchSlides: true,
+    watchFocus: true
+};
+function OptionsHandler(ownerWindow) {
+    function mergeOptions(optionsA, optionsB) {
+        return objectsMergeDeep(optionsA, optionsB || {});
+    }
+    function optionsAtMedia(options) {
+        const optionsAtMedia = options.breakpoints || {};
+        const matchedMediaOptions = objectKeys(optionsAtMedia).filter((media)=>ownerWindow.matchMedia(media).matches).map((media)=>optionsAtMedia[media]).reduce((a, mediaOption)=>mergeOptions(a, mediaOption), {});
+        return mergeOptions(options, matchedMediaOptions);
+    }
+    function optionsMediaQueries(optionsList) {
+        return optionsList.map((options)=>objectKeys(options.breakpoints || {})).reduce((acc, mediaQueries)=>acc.concat(mediaQueries), []).map(ownerWindow.matchMedia);
+    }
+    const self = {
+        mergeOptions,
+        optionsAtMedia,
+        optionsMediaQueries
+    };
+    return self;
+}
+function PluginsHandler(optionsHandler) {
+    let activePlugins = [];
+    function init(emblaApi, plugins) {
+        activePlugins = plugins.filter(({ options })=>optionsHandler.optionsAtMedia(options).active !== false);
+        activePlugins.forEach((plugin)=>plugin.init(emblaApi, optionsHandler));
+        return plugins.reduce((map, plugin)=>Object.assign(map, {
+                [plugin.name]: plugin
+            }), {});
+    }
+    function destroy() {
+        activePlugins = activePlugins.filter((plugin)=>plugin.destroy());
+    }
+    const self = {
+        init,
+        destroy
+    };
+    return self;
+}
+function EmblaCarousel(root, userOptions, userPlugins) {
+    const ownerDocument = root.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    const optionsHandler = OptionsHandler(ownerWindow);
+    const pluginsHandler = PluginsHandler(optionsHandler);
+    const mediaHandlers = EventStore();
+    const eventHandler = EventHandler();
+    const { mergeOptions, optionsAtMedia, optionsMediaQueries } = optionsHandler;
+    const { on, off, emit } = eventHandler;
+    const reInit = reActivate;
+    let destroyed = false;
+    let engine;
+    let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions);
+    let options = mergeOptions(optionsBase);
+    let pluginList = [];
+    let pluginApis;
+    let container;
+    let slides;
+    function storeElements() {
+        const { container: userContainer, slides: userSlides } = options;
+        const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
+        container = customContainer || root.children[0];
+        const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
+        slides = [].slice.call(customSlides || container.children);
+    }
+    function createEngine(options) {
+        const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
+        if (options.loop && !engine.slideLooper.canLoop()) {
+            const optionsWithoutLoop = Object.assign({}, options, {
+                loop: false
+            });
+            return createEngine(optionsWithoutLoop);
+        }
+        return engine;
+    }
+    function activate(withOptions, withPlugins) {
+        if (destroyed) return;
+        optionsBase = mergeOptions(optionsBase, withOptions);
+        options = optionsAtMedia(optionsBase);
+        pluginList = withPlugins || pluginList;
+        storeElements();
+        engine = createEngine(options);
+        optionsMediaQueries([
+            optionsBase,
+            ...pluginList.map(({ options })=>options)
+        ]).forEach((query)=>mediaHandlers.add(query, 'change', reActivate));
+        if (!options.active) return;
+        engine.translate.to(engine.location.get());
+        engine.animation.init();
+        engine.slidesInView.init();
+        engine.slideFocus.init(self);
+        engine.eventHandler.init(self);
+        engine.resizeHandler.init(self);
+        engine.slidesHandler.init(self);
+        if (engine.options.loop) engine.slideLooper.loop();
+        if (container.offsetParent && slides.length) engine.dragHandler.init(self);
+        pluginApis = pluginsHandler.init(self, pluginList);
+    }
+    function reActivate(withOptions, withPlugins) {
+        const startIndex = selectedScrollSnap();
+        deActivate();
+        activate(mergeOptions({
+            startIndex
+        }, withOptions), withPlugins);
+        eventHandler.emit('reInit');
+    }
+    function deActivate() {
+        engine.dragHandler.destroy();
+        engine.eventStore.clear();
+        engine.translate.clear();
+        engine.slideLooper.clear();
+        engine.resizeHandler.destroy();
+        engine.slidesHandler.destroy();
+        engine.slidesInView.destroy();
+        engine.animation.destroy();
+        pluginsHandler.destroy();
+        mediaHandlers.clear();
+    }
+    function destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        mediaHandlers.clear();
+        deActivate();
+        eventHandler.emit('destroy');
+        eventHandler.clear();
+    }
+    function scrollTo(index, jump, direction) {
+        if (!options.active || destroyed) return;
+        engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
+        engine.scrollTo.index(index, direction || 0);
+    }
+    function scrollNext(jump) {
+        const next = engine.index.add(1).get();
+        scrollTo(next, jump, -1);
+    }
+    function scrollPrev(jump) {
+        const prev = engine.index.add(-1).get();
+        scrollTo(prev, jump, 1);
+    }
+    function canScrollNext() {
+        const next = engine.index.add(1).get();
+        return next !== selectedScrollSnap();
+    }
+    function canScrollPrev() {
+        const prev = engine.index.add(-1).get();
+        return prev !== selectedScrollSnap();
+    }
+    function scrollSnapList() {
+        return engine.scrollSnapList;
+    }
+    function scrollProgress() {
+        return engine.scrollProgress.get(engine.offsetLocation.get());
+    }
+    function selectedScrollSnap() {
+        return engine.index.get();
+    }
+    function previousScrollSnap() {
+        return engine.indexPrevious.get();
+    }
+    function slidesInView() {
+        return engine.slidesInView.get();
+    }
+    function slidesNotInView() {
+        return engine.slidesInView.get(false);
+    }
+    function plugins() {
+        return pluginApis;
+    }
+    function internalEngine() {
+        return engine;
+    }
+    function rootNode() {
+        return root;
+    }
+    function containerNode() {
+        return container;
+    }
+    function slideNodes() {
+        return slides;
+    }
+    const self = {
+        canScrollNext,
+        canScrollPrev,
+        containerNode,
+        internalEngine,
+        destroy,
+        off,
+        on,
+        emit,
+        plugins,
+        previousScrollSnap,
+        reInit,
+        rootNode,
+        scrollNext,
+        scrollPrev,
+        scrollProgress,
+        scrollSnapList,
+        scrollTo,
+        selectedScrollSnap,
+        slideNodes,
+        slidesInView,
+        slidesNotInView
+    };
+    activate(userOptions, userPlugins);
+    setTimeout(()=>eventHandler.emit('init'), 0);
+    return self;
+}
+EmblaCarousel.globalOptions = undefined;
+
+function useEmblaCarousel(options = {}, plugins = []) {
+    const storedOptions = React.useRef(options);
+    const storedPlugins = React.useRef(plugins);
+    const [emblaApi, setEmblaApi] = React.useState();
+    const [viewport, setViewport] = React.useState();
+    const reInit = React.useCallback(()=>{
+        if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
+    }, [
+        emblaApi
+    ]);
+    React.useEffect(()=>{
+        if (areOptionsEqual(storedOptions.current, options)) return;
+        storedOptions.current = options;
+        reInit();
+    }, [
+        options,
+        reInit
+    ]);
+    React.useEffect(()=>{
+        if (arePluginsEqual(storedPlugins.current, plugins)) return;
+        storedPlugins.current = plugins;
+        reInit();
+    }, [
+        plugins,
+        reInit
+    ]);
+    React.useEffect(()=>{
+        if (canUseDOM() && viewport) {
+            EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions;
+            const newEmblaApi = EmblaCarousel(viewport, storedOptions.current, storedPlugins.current);
+            setEmblaApi(newEmblaApi);
+            return ()=>newEmblaApi.destroy();
+        } else {
+            setEmblaApi(undefined);
+        }
+    }, [
+        viewport,
+        setEmblaApi
+    ]);
+    return [
+        setViewport,
+        emblaApi
+    ];
+}
+useEmblaCarousel.globalOptions = undefined;
+
+function useRenderStrategy(props) {
+    const wasEverPresent = React.useRef(false);
+    if (props.present) {
+        wasEverPresent.current = true;
+    }
+    return {
+        unmounted: !props.present && !wasEverPresent.current && props.lazyMount || props.unmountOnExit && !props.present && wasEverPresent.current
+    };
+}
+const RenderStrategyPropsContext = /*#__PURE__*/ React.createContext(null);
+const RenderStrategyPropsProvider = RenderStrategyPropsContext.Provider;
+function useRenderStrategyPropsContext({ strict = true } = {}) {
+    const context = React.useContext(RenderStrategyPropsContext);
+    if (!context && strict) {
+        throw new Error("useRenderStrategyPropsContext must be used within a RenderStrategyPropsProvider");
+    }
+    return context;
+}
+/* ID -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const getTriggerId = (value, id)=>`tabs:${value}:${id}:trigger-root`;
+const getListId = (id)=>`tabs:${id}:list`;
+const getContentId = (value, id)=>`tabs:${value}:${id}:content`;
+/* Query -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const getTriggerByValue = (listEl, value)=>{
+    return listEl.querySelector(`[data-value="${value}"]`);
+};
+const getEnabledValues = (el)=>{
+    if (!el) return [];
+    return Array.from(el.children).filter((child)=>!child.hasAttribute("aria-disabled")).map((child)=>child.getAttribute("data-value")).filter(Boolean);
+};
+/* Prevent Drag -----------------------------------------------------------------------
+-------------------------------------------------------------------------------- */ const PREVENT_DRAG_ATTRIBUTE = "data-embla-prevent-drag";
+const isDragPrevented = (el)=>{
+    return el.closest(`[${PREVENT_DRAG_ATTRIBUTE}]`) != null;
+};
+function getPrevIndex(index, length) {
+    if (length <= 0) {
+        throw new Error("Length must be a positive number.");
+    }
+    return (index - 1 + length) % length;
+}
+function getNextIndex(index, length) {
+    if (length <= 0) {
+        throw new Error("Length must be a positive number.");
+    }
+    return (index + 1) % length;
+}
+// Helper function to scroll tab into view
+function scrollTabIntoView(tabElement, listElement, options) {
+    const isHorizontal = listElement.getAttribute("aria-orientation") !== "vertical";
+    // Default padding is 16px if not specified
+    const scrollPadding = options?.scrollPadding;
+    if (isHorizontal) {
+        const tabLeft = tabElement.offsetLeft;
+        const tabRight = tabLeft + tabElement.offsetWidth;
+        const listScrollLeft = listElement.scrollLeft;
+        const listWidth = listElement.clientWidth;
+        const listRight = listScrollLeft + listWidth;
+        if (tabLeft < listScrollLeft) {
+            // Tab is to the left of the visible area - scroll a bit more to the left
+            listElement.scrollTo({
+                left: Math.max(0, tabLeft - scrollPadding),
+                behavior: "smooth"
+            });
+        } else if (tabRight > listRight) {
+            // Tab is to the right of the visible area - scroll a bit more to the right
+            listElement.scrollTo({
+                left: tabRight - listWidth + scrollPadding,
+                behavior: "smooth"
+            });
+        }
+    } else {
+        const tabTop = tabElement.offsetTop;
+        const tabBottom = tabTop + tabElement.offsetHeight;
+        const listScrollTop = listElement.scrollTop;
+        const listHeight = listElement.clientHeight;
+        const listBottom = listScrollTop + listHeight;
+        if (tabTop < listScrollTop) {
+            // Tab is above the visible area - scroll a bit more up
+            listElement.scrollTo({
+                top: Math.max(0, tabTop - scrollPadding),
+                behavior: "smooth"
+            });
+        } else if (tabBottom > listBottom) {
+            // Tab is below the visible area - scroll a bit more down
+            listElement.scrollTo({
+                top: tabBottom - listHeight + scrollPadding,
+                behavior: "smooth"
+            });
+        }
+    }
+}
+function useIsSSR() {
+    const [isSSR, setIsSSR] = React.useState(true);
+    React.useEffect(()=>{
+        setIsSSR(false);
+    }, []);
+    return isSSR;
+}
+function useTabsState(props) {
+    const [interactionState, setInteractionState] = React.useState("idle");
+    const [value, setValue] = useControllableState$1({
+        prop: props.value,
+        defaultProp: props.defaultValue ?? undefined,
+        onChange: props.onValueChange
+    });
+    const [focusedValue, setFocusedValue] = React.useState(null);
+    const [isFocusVisible, setIsFocusVisible] = React.useState(false);
+    const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
+    const [listEl, listRef] = React.useState(null);
+    const [selectedTriggerEl, setSelectedTriggerEl] = React.useState(null);
+    const selectedTriggerSize = useSize(selectedTriggerEl);
+    const enabledValues = React.useMemo(()=>listEl ? getEnabledValues(listEl) : [], [
+        listEl
+    ]);
+    const contentIndex = value ? enabledValues.indexOf(value) : -1;
+    const prevIndex = contentIndex >= 0 ? getPrevIndex(contentIndex, enabledValues.length) : -1;
+    const nextIndex = contentIndex >= 0 ? getNextIndex(contentIndex, enabledValues.length) : -1;
+    // Scroll selected tab into view when it changes
+    // TODO: this implementation is temporary, we should create some sort of hook or plugin system
+    //       to allow users to customize the scroll behavior.
+    React.useEffect(()=>{
+        if (selectedTriggerEl && listEl) {
+            scrollTabIntoView(selectedTriggerEl, listEl, {
+                scrollPadding: 16
+            });
+        }
+    }, [
+        selectedTriggerEl,
+        listEl
+    ]);
+    const focusTriggerByValue = React.useCallback((value)=>{
+        if (listEl) {
+            getTriggerByValue(listEl, value)?.focus();
+        }
+    }, [
+        listEl
+    ]);
+    const selectPrevAction = React.useCallback(()=>{
+        const prevValue = enabledValues[prevIndex];
+        if (!prevValue) return;
+        setValue(prevValue);
+    }, [
+        enabledValues,
+        prevIndex,
+        setValue
+    ]);
+    const selectNextAction = React.useCallback(()=>{
+        const nextValue = enabledValues[nextIndex];
+        if (!nextValue) return;
+        setValue(nextValue);
+    }, [
+        enabledValues,
+        nextIndex,
+        setValue
+    ]);
+    const selectFirstAction = React.useCallback(()=>{
+        const firstValue = enabledValues[0];
+        if (!firstValue) return;
+        setValue(firstValue);
+    }, [
+        enabledValues,
+        setValue
+    ]);
+    const selectLastAction = React.useCallback(()=>{
+        const lastValue = enabledValues[enabledValues.length - 1];
+        if (!lastValue) return;
+        setValue(lastValue);
+    }, [
+        enabledValues,
+        setValue
+    ]);
+    const setFocusedValueAction = React.useCallback((value)=>{
+        setFocusedValue(value);
+    }, []);
+    const clearFocusedValueAction = React.useCallback(()=>{
+        setFocusedValue(null);
+    }, []);
+    const setValueAction = React.useCallback((value)=>{
+        setValue(value);
+    }, [
+        setValue
+    ]);
+    const actions = {
+        selectPrev: selectPrevAction,
+        selectNext: selectNextAction,
+        selectFirst: selectFirstAction,
+        selectLast: selectLastAction,
+        setFocusedValue: setFocusedValueAction,
+        clearFocusedValue: clearFocusedValueAction,
+        setValue: setValueAction
+    };
+    const arrowPrevEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            focusTriggerByValue(enabledValues[prevIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        focusTriggerByValue,
+        enabledValues,
+        prevIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowNextEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            focusTriggerByValue(enabledValues[nextIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        focusTriggerByValue,
+        enabledValues,
+        nextIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowUpEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            focusTriggerByValue(enabledValues[prevIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        focusTriggerByValue,
+        enabledValues,
+        prevIndex,
+        isFocusVisibleSupported
+    ]);
+    const arrowDownEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            focusTriggerByValue(enabledValues[nextIndex] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        focusTriggerByValue,
+        enabledValues,
+        nextIndex,
+        isFocusVisibleSupported
+    ]);
+    const homeEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectFirst();
+            focusTriggerByValue(enabledValues[0] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectFirst,
+        focusTriggerByValue,
+        enabledValues,
+        isFocusVisibleSupported
+    ]);
+    const endEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectLast();
+            focusTriggerByValue(enabledValues[enabledValues.length - 1] ?? "");
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectLast,
+        focusTriggerByValue,
+        enabledValues,
+        isFocusVisibleSupported
+    ]);
+    const tabFocusEvent = React.useCallback((value)=>{
+        actions.setFocusedValue(value);
+        if (interactionState === "idle") {
+            setInteractionState("focused");
+        }
+    }, [
+        interactionState,
+        actions.setFocusedValue
+    ]);
+    const tabBlurEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.clearFocusedValue();
+            setInteractionState("idle");
+        }
+    }, [
+        interactionState,
+        actions.clearFocusedValue
+    ]);
+    const tabClickEvent = React.useCallback((value)=>{
+        actions.setValue(value);
+        if (interactionState === "idle") {
+            setInteractionState("focused");
+        }
+    }, [
+        interactionState,
+        actions.setValue
+    ]);
+    const setValueEvent = React.useCallback((value)=>{
+        actions.setValue(value);
+    }, [
+        actions.setValue
+    ]);
+    const selectNextEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectNext();
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectNext,
+        isFocusVisibleSupported
+    ]);
+    const selectPrevEvent = React.useCallback(()=>{
+        if (interactionState === "focused") {
+            actions.selectPrev();
+            if (isFocusVisibleSupported) {
+                setIsFocusVisible(true);
+            }
+        }
+    }, [
+        interactionState,
+        actions.selectPrev,
+        isFocusVisibleSupported
+    ]);
+    const setContentIndexEvent = React.useCallback((index)=>{
+        const valueFromIndex = enabledValues[index];
+        if (!valueFromIndex) return;
+        actions.setValue(valueFromIndex);
+    }, [
+        actions.setValue,
+        enabledValues
+    ]);
+    const setIsFocusVisibleEvent = React.useCallback((isFocusVisible)=>{
+        setIsFocusVisible(isFocusVisible);
+    }, []);
+    const setSelectedTriggerElEvent = React.useCallback((element)=>{
+        setSelectedTriggerEl(element);
+    }, []);
+    const events = {
+        arrowPrev: arrowPrevEvent,
+        arrowNext: arrowNextEvent,
+        arrowUp: arrowUpEvent,
+        arrowDown: arrowDownEvent,
+        home: homeEvent,
+        end: endEvent,
+        tabFocus: tabFocusEvent,
+        tabBlur: tabBlurEvent,
+        tabClick: tabClickEvent,
+        setValue: setValueEvent,
+        selectNext: selectNextEvent,
+        selectPrev: selectPrevEvent,
+        setContentIndex: setContentIndexEvent,
+        setIsFocusVisible: setIsFocusVisibleEvent,
+        setSelectedTriggerEl: setSelectedTriggerElEvent
+    };
+    const refs = React.useMemo(()=>({
+            list: listRef
+        }), []);
+    const triggerRect = React.useMemo(()=>({
+            width: selectedTriggerSize?.width ?? selectedTriggerEl?.offsetWidth ?? 0,
+            left: selectedTriggerEl?.offsetLeft ?? 0
+        }), [
+        selectedTriggerSize,
+        selectedTriggerEl
+    ]);
+    const isSSR = useIsSSR();
+    return {
+        refs,
+        interactionState,
+        value,
+        isSSR,
+        triggerRect,
+        focusedValue,
+        isFocusVisible,
+        contentIndex,
+        events,
+        isFocusVisibleSupported
+    };
+}
+function useTabs(props) {
+    const autoId = React.useId();
+    const { refs, interactionState, value, isSSR, events, triggerRect, focusedValue, isFocusVisible, contentIndex, isFocusVisibleSupported } = useTabsState(props);
+    const { orientation = "horizontal" } = props;
+    const focused = interactionState === "focused";
+    const stateProps = React.useMemo(()=>domUtils.elementProps({
+            "data-orientation": orientation,
+            "data-focus": domUtils.dataAttr(focused),
+            "data-ssr": domUtils.dataAttr(isSSR)
+        }), [
+        orientation,
+        focused,
+        isSSR
+    ]);
+    return {
+        refs,
+        value,
+        contentIndex,
+        triggerRect,
+        selectNext: events.selectNext,
+        selectPrev: events.selectPrev,
+        setValue: events.setValue,
+        setContentIndex: events.setContentIndex,
+        stateProps,
+        rootProps: domUtils.elementProps({
+            ...stateProps,
+            style: {
+                "--indicator-left": `${triggerRect.left}px`,
+                "--indicator-width": `${triggerRect.width}px`
+            }
+        }),
+        listProps: domUtils.elementProps({
+            id: getListId(autoId),
+            role: "tablist",
+            "aria-orientation": orientation,
+            ...stateProps,
+            onKeyDown (event) {
+                if (event.defaultPrevented) return;
+                if (event.nativeEvent.isComposing) return;
+                // TODO: support activationMode="manual"
+                switch(event.key){
+                    case "ArrowLeft":
+                        if (orientation !== "horizontal") return;
+                        event.preventDefault();
+                        events.arrowPrev();
+                        break;
+                    case "ArrowRight":
+                        if (orientation !== "horizontal") return;
+                        event.preventDefault();
+                        events.arrowNext();
+                        break;
+                    case "ArrowUp":
+                        if (orientation !== "vertical") return;
+                        event.preventDefault();
+                        events.arrowPrev();
+                        break;
+                    case "ArrowDown":
+                        if (orientation !== "vertical") return;
+                        event.preventDefault();
+                        events.arrowNext();
+                        break;
+                    case "Home":
+                        {
+                            event.preventDefault();
+                            events.home();
+                            break;
+                        }
+                    case "End":
+                        {
+                            event.preventDefault();
+                            events.end();
+                            break;
+                        }
+                }
+            }
+        }),
+        getTriggerProps: (props)=>{
+            const { disabled: isDisabled, value: triggerValue } = props;
+            const itemState = {
+                isDisabled,
+                isSelected: value === triggerValue,
+                isFocused: focusedValue === triggerValue
+            };
+            const itemStateProps = {
+                "data-focus": domUtils.dataAttr(itemState.isFocused),
+                "data-focus-visible": domUtils.dataAttr(itemState.isFocused && isFocusVisible),
+                "data-selected": domUtils.dataAttr(itemState.isSelected),
+                "data-disabled": domUtils.dataAttr(itemState.isDisabled),
+                "data-ssr": domUtils.dataAttr(isSSR),
+                "aria-disabled": domUtils.ariaAttr(itemState.isDisabled),
+                "aria-selected": domUtils.ariaAttr(itemState.isSelected)
+            };
+            const ref = (element)=>{
+                if (element && triggerValue === value) {
+                    events.setSelectedTriggerEl(element);
+                }
+            };
+            return {
+                ...itemState,
+                refs: {
+                    root: ref
+                },
+                stateProps: itemStateProps,
+                rootProps: domUtils.buttonProps({
+                    id: getTriggerId(triggerValue, autoId),
+                    role: "tab",
+                    type: "button",
+                    disabled: isDisabled,
+                    tabIndex: itemState.isSelected ? 0 : -1,
+                    ...itemStateProps,
+                    "data-value": triggerValue,
+                    "data-orientation": orientation,
+                    "data-ownedby": getListId(autoId),
+                    "aria-controls": getContentId(triggerValue, autoId),
+                    onClick (event) {
+                        if (itemState.isDisabled) return;
+                        if (event.defaultPrevented) return;
+                        events.tabClick(triggerValue);
+                    },
+                    onFocus (event) {
+                        events.tabFocus(props.value);
+                        if (isFocusVisibleSupported) {
+                            events.setIsFocusVisible(event.target.matches(":focus-visible"));
+                        }
+                    },
+                    onBlur (event) {
+                        const target = event.relatedTarget;
+                        if (target?.getAttribute("role") !== "tab") {
+                            events.tabBlur();
+                        }
+                        if (isFocusVisibleSupported) {
+                            events.setIsFocusVisible(false);
+                        }
+                    }
+                })
+            };
+        },
+        getContentProps: (props)=>{
+            const { value: contentValue } = props;
+            const triggerId = getTriggerId(contentValue, autoId);
+            const isSelected = value === contentValue;
+            return domUtils.elementProps({
+                id: getContentId(contentValue, autoId),
+                tabIndex: -1,
+                role: "tabpanel",
+                "aria-labelledby": triggerId,
+                "aria-selected": domUtils.ariaAttr(isSelected),
+                "aria-hidden": !isSelected,
+                "data-selected": domUtils.dataAttr(isSelected),
+                "data-orientation": orientation,
+                "data-ownedby": getListId(autoId),
+                "data-ssr": domUtils.dataAttr(isSSR)
+            });
+        },
+        indicatorProps: domUtils.elementProps({
+            ...stateProps
+        })
+    };
+}
+const TabsContext = /*#__PURE__*/ React.createContext(null);
+const TabsProvider = TabsContext.Provider;
+function useTabsContext({ strict = true } = {}) {
+    const context = React.useContext(TabsContext);
+    if (!context && strict) {
+        throw new Error("useTabsContext must be used within a Tabs");
+    }
+    return context;
+}
+const autoHeight = AutoHeight();
+const plugins = [
+    autoHeight
+];
+const useTabsCarouselState = (props)=>{
+    const api = useTabsContext();
+    const slideHeights = React.useRef(new WeakMap());
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: props.loop,
+        dragThreshold: props.dragThreshold,
+        duration: 20,
+        watchDrag: (_, event)=>{
+            if (event.target instanceof HTMLElement) {
+                if (isDragPrevented(event.target)) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        // Workaround for Embla v8 AutoHeight plugin not detecting lazy-loaded content height changes.
+        // ref: https://github.com/davidjerleke/embla-carousel/discussions/1142
+        // Embla's default resize handler only reInits on axis-size (width, for a horizontal carousel)
+        // changes, so a slide growing taller (e.g. after lazy mount) never triggers a recalculation.
+        // We reInit manually, but ONLY when a slide's *height* actually changes — reInit-ing on every
+        // slide resize (including width fluctuations during horizontal scroll) re-applies Embla's
+        // translate3d mid-scroll and breaks momentum scrolling in WKWebView/Safari.
+        watchResize: (emblaApi, entries)=>{
+            const heights = slideHeights.current;
+            const slides = emblaApi.slideNodes();
+            for (const entry of entries){
+                const slide = slides.find((node)=>node === entry.target);
+                if (!slide) continue;
+                const newHeight = slide.offsetHeight;
+                const prevHeight = heights.get(slide);
+                heights.set(slide, newHeight);
+                if (prevHeight !== undefined && newHeight !== prevHeight) {
+                    emblaApi.reInit();
+                    return false;
+                }
+            }
+            return true;
+        }
+    }, plugins);
+    const onSettle = useCallbackRef(props.onSettle);
+    const onSwipeStart = useCallbackRef(props.onSwipeStart);
+    const onSwipeEnd = useCallbackRef(props.onSwipeEnd);
+    React.useEffect(()=>{
+        const select = emblaApi?.on("select", ()=>{
+            const contentIndex = emblaApi.selectedScrollSnap();
+            api.setContentIndex(contentIndex);
+        });
+        const settle = emblaApi?.on("settle", ()=>{
+            onSettle?.();
+        });
+        const pointerDown = emblaApi?.on("pointerDown", ()=>{
+            onSwipeStart?.();
+        });
+        const pointerUp = emblaApi?.on("pointerUp", ()=>{
+            onSwipeEnd?.();
+        });
+        return ()=>{
+            select?.clear();
+            settle?.clear();
+            pointerDown?.clear();
+            pointerUp?.clear();
+        };
+    }, [
+        emblaApi,
+        api.setContentIndex,
+        onSettle,
+        onSwipeStart,
+        onSwipeEnd
+    ]);
+    const getContentIndex = useCallbackRef(()=>api.contentIndex);
+    React.useEffect(()=>{
+        const reInit = emblaApi?.on("reInit", ()=>{
+            emblaApi?.scrollTo(getContentIndex(), true);
+        });
+        return ()=>{
+            reInit?.clear();
+        };
+    }, [
+        getContentIndex,
+        emblaApi
+    ]);
+    React.useEffect(()=>{
+        if (!emblaApi) return;
+        const { dragHandler } = emblaApi.internalEngine();
+        if (props.swipeable) {
+            dragHandler.init(emblaApi);
+        } else {
+            dragHandler.destroy();
+        }
+    }, [
+        emblaApi,
+        props.swipeable
+    ]);
+    const isInitialScroll = React.useRef(true);
+    React.useEffect(()=>{
+        if (emblaApi && api.contentIndex !== emblaApi.selectedScrollSnap()) {
+            const engine = emblaApi.internalEngine();
+            /**
+       * We want the content to quickly snap into place when a tab changes.
+       * However, using a very small duration can result in an underdamped spring, which produces a rubber-band (oscillatory) effect.
+       *
+       * To avoid that, we intentionally use a low duration and friction so that the motion feels fast (snappy)
+       * without overshooting. The underlying idea is to map our parameters to a physical spring model—a damped harmonic oscillator—
+       * so we can control the dynamics in a physically intuitive way.
+       *
+       * In embla, the acceleration is modeled as:
+       *   a = (displacement * friction) / duration - velocity * (1 - friction)
+       *
+       * In a classical damped harmonic oscillator (assuming unit mass, m = 1), the acceleration is:
+       *   a = (stiffness * displacement - damping * velocity)
+       *
+       * By comparing the two equations, we can equate the coefficients for displacement and velocity:
+       *
+       *   For the displacement term:
+       *     stiffness = friction / duration
+       *
+       *   For the velocity term:
+       *     damping = 1 - friction
+       *
+       * Additionally, the damping ratio (zeta) for a damped oscillator is defined as:
+       *   zeta = damping / (2 * sqrt(stiffness))
+       *
+       * Substituting the derived expressions for stiffness and damping gives:
+       *   zeta = (1 - friction) / (2 * sqrt(friction / duration))
+       *
+       * This damping ratio (zeta) tells us the nature of the response:
+       *   - zeta < 1: Underdamped (oscillatory, rubber-band effect)
+       *   - zeta = 1: Critically damped (fast snap without overshoot)
+       *   - zeta > 1: Overdamped (slow response)
+       *
+       * For our current configuration, we use:
+       *
+       *     duration = 4
+       *     friction = 0.4
+       *
+       * Which gives:
+       *
+       *     stiffness = 0.4 / 4 = 0.1
+       *     damping   = 1 - 0.4 = 0.6
+       *
+       * And the damping ratio becomes:
+       *
+       *     zeta = 0.6 / (2 * sqrt(0.1))
+       *       = 0.6 / (2 * 0.31623...)
+       *       = 0.6 / 0.63246...
+       *       = 0.94868...
+       *
+       * Since zeta is close to 1, this spring is nearly critically damped. This is enough for our usage,
+       * ensuring that the animation snaps quickly without overshooting (avoiding the rubber-band effect)
+       * when switching tabs.
+       */ if (isInitialScroll.current) {
+                engine.scrollBody.useDuration(0);
+                isInitialScroll.current = false;
+            } else {
+                engine.scrollBody.useDuration(4).useFriction(0.4);
+            }
+            engine.scrollTo.index(api.contentIndex, 0);
+        }
+    }, [
+        emblaApi,
+        api.contentIndex
+    ]);
+    return {
+        refs: {
+            root: emblaRef
+        },
+        autoHeight: props.autoHeight
+    };
+};
+const useTabsCarousel = (props)=>{
+    const { refs, autoHeight } = useTabsCarouselState(props);
+    const stateProps = domUtils.elementProps({
+        "data-carousel": "",
+        "data-auto-height": domUtils.dataAttr(autoHeight)
+    });
+    return {
+        refs,
+        stateProps,
+        rootProps: domUtils.elementProps({
+            ...stateProps
+        }),
+        cameraProps: domUtils.elementProps({
+            ...stateProps
+        })
+    };
+};
+const TabsCarouselContext = /*#__PURE__*/ React.createContext(null);
+const TabsCarouselProvider = TabsCarouselContext.Provider;
+function useTabsCarouselContext({ strict = true } = {}) {
+    const context = React.useContext(TabsCarouselContext);
+    if (!context && strict) {
+        throw new Error("useTabsCarouselContext must be used within a TabsCarousel");
+    }
+    return context;
+}
+const TabsTriggerContext = /*#__PURE__*/ React.createContext(null);
+const TabsTriggerProvider = TabsTriggerContext.Provider;
+const TabsRoot$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { defaultValue, value, onValueChange, orientation, lazyMount, unmountOnExit, ...otherProps } = props;
+    const api = useTabs({
+        defaultValue,
+        value,
+        onValueChange,
+        orientation
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(TabsProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(RenderStrategyPropsProvider, {
+            value: React.useMemo(()=>({
+                    lazyMount,
+                    unmountOnExit
+                }), [
+                lazyMount,
+                unmountOnExit
+            ]),
+            children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                ref: ref,
+                ...domUtils.mergeProps(api.rootProps, otherProps)
+            })
+        })
+    });
+});
+TabsRoot$1.displayName = "TabsRoot";
+const TabsList$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useTabsContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+        ref: composeRefs(api.refs.list, ref),
+        ...domUtils.mergeProps(api.listProps, props)
+    });
+});
+TabsList$1.displayName = "TabsList";
+const TabsTrigger$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { value, disabled, ...otherProps } = props;
+    const api = useTabsContext();
+    const triggerApi = api.getTriggerProps({
+        value,
+        disabled
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(TabsTriggerProvider, {
+        value: triggerApi,
+        children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+            ref: composeRefs(triggerApi.refs.root, ref),
+            ...domUtils.mergeProps(triggerApi.rootProps, otherProps)
+        })
+    });
+});
+TabsTrigger$1.displayName = "TabsTrigger";
+const TabsContent$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { value, children, ...otherProps } = props;
+    const api = useTabsContext();
+    const carouselApi = useTabsCarouselContext({
+        strict: false
+    });
+    const inCarousel = carouselApi != null;
+    const renderStrategyProps = useRenderStrategyPropsContext();
+    const { unmounted } = useRenderStrategy({
+        ...renderStrategyProps,
+        present: api.value === value
+    });
+    // Outside a carousel, an unmounted tab renders nothing at all.
+    // Inside a carousel, every tab must keep its slide slot even while unmounted:
+    // the carousel syncs by numeric index, so collapsing the slide set (returning
+    // null for lazy/exited tabs) makes embla's snap index drift from the tab's
+    // logical index, and clicking/swiping to a far tab lands on the wrong one.
+    // We keep the slot but still honor lazyMount/unmountOnExit for the children,
+    // so expensive content stays lazy — only the empty slide wrapper persists.
+    if (unmounted && !inCarousel) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+        ref: ref,
+        ...domUtils.mergeProps(api.getContentProps({
+            value
+        }), carouselApi?.stateProps ?? {}, otherProps),
+        children: unmounted ? null : children
+    });
+});
+TabsContent$1.displayName = "TabsContent";
+const TabsIndicator$1 = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useTabsContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+        ref: ref,
+        ...domUtils.mergeProps(api.indicatorProps, props)
+    });
+});
+const TabsCarousel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { dragThreshold, loop, swipeable, autoHeight, onSettle, onSwipeStart, onSwipeEnd, ...otherProps } = props;
+    const api = useTabsCarousel({
+        dragThreshold,
+        loop,
+        swipeable,
+        onSettle,
+        autoHeight,
+        onSwipeStart,
+        onSwipeEnd
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(TabsCarouselProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+            ref: composeRefs(api.refs.root, ref),
+            ...domUtils.mergeProps(api.rootProps, otherProps),
+            children: props.children
+        })
+    });
+});
+TabsCarousel.displayName = "TabsCarousel";
+const TabsCarouselCamera = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useTabsCarouselContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+        ref: ref,
+        ...domUtils.mergeProps(api.cameraProps, props)
+    });
+});
+TabsCarouselCamera.displayName = "TabsCarouselCamera";
+
+var Tabs_namespace = {
+    __proto__: null,
+    Carousel: TabsCarousel,
+    CarouselCamera: TabsCarouselCamera,
+    Content: TabsContent$1,
+    Indicator: TabsIndicator$1,
+    List: TabsList$1,
+    Root: TabsRoot$1,
+    Trigger: TabsTrigger$1};
+
+const { withProvider, withContext } = createSlotRecipeContext(tabs.tabs);
+const TabsRoot = withProvider(Tabs_namespace.Root, "root");
+const TabsList = withContext(Tabs_namespace.List, "list");
+const TabsTrigger = withScaleFeedback(withContext(Tabs_namespace.Trigger, "trigger"));
+const TabsIndicator = withContext(Tabs_namespace.Indicator, "indicator");
+const TabsContent = withContext(Tabs_namespace.Content, "content");
+withContext(Tabs_namespace.Carousel, "carousel");
+withContext(Tabs_namespace.CarouselCamera, "carouselCamera");
+
+const RESIZE_MIN_WIDTH = 360;
+const RESIZE_MAX_WIDTH = 720;
+/**
+ * Right-side record peek panel -- Attio's own peek shows a Highlights card
+ * area and an Activity feed (measured live). Ported from your-moon/crisp's
+ * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
+ * (`side="right" floating`) rather than crisp's own duplicate absolute-
+ * positioning/slide-in/resize-handle implementation -- the outer shell (the
+ * enter/exit keyframe animation, the full-height overlay, the drag handle
+ * itself) all come from that primitive; this component only renders the
+ * CONTENT inside it.
+ *
+ * OVERLAY, not docked: `floating` (on the `ResizablePanel` this is built on)
+ * now means a real `position: absolute` overlay that reserves ZERO layout
+ * width -- opening this panel never shrinks or reflows a table beside it
+ * (your-moon/crisp#448 reversed an earlier in-flow/docked attempt at this
+ * exact spot, reported live as "table's action buttons moving"). Because of
+ * that, THIS COMPONENT OWNS ITS OWN POSITIONING -- a consumer does not wrap
+ * it in a flex row with the table; it renders `<RecordPreview>` as an
+ * ordinary sibling of the table. The one requirement: the shared parent
+ * (the table region's own wrapper) must itself be a positioned element
+ * (typically `position: relative`) with a real height, since that's the
+ * containing block this panel's `inset: 0` resolves against. See
+ * `DataTable.stories.tsx`'s own Showcase for the pattern:
+ *
+ * ```tsx
+ * <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+ *   <DataTable style={{ width: "100%", height: "100%" }} ... />
+ *   <RecordPreview open={open} record={record} onClose={onClose} ... />
+ * </div>
+ * ```
+ *
+ * Enter/exit: closing this panel is a state change (`open` -> false) that
+ * typically clears `record` in the SAME update (see the DataTable story's
+ * own `onClose={() => setPreviewRow(null)}`), so by the time an exit
+ * animation should play, the values this component would render are
+ * already gone. `usePresence` (`@seed-design/react-presence`, the same
+ * idiom Dialog/Drawer already use for their own floating layers) keeps the
+ * tree mounted for exactly the exit animation's duration; the snapshot
+ * below keeps the LAST visible props around for that same window, since
+ * without it the panel would animate out empty.
+ */ function RecordPreview(props) {
+    const shouldRender = props.open && props.record != null;
+    const { isPresent, ref: panelElementRef } = usePresence(shouldRender);
+    const lastVisiblePropsRef = React.useRef(props);
+    if (shouldRender) lastVisiblePropsRef.current = props;
+    if (!isPresent) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(RecordPreviewPanel, {
+        ...shouldRender ? props : lastVisiblePropsRef.current,
+        animationState: shouldRender ? "open" : "closed",
+        panelElementRef: panelElementRef
+    });
+}
+RecordPreview.displayName = "RecordPreview";
+function RecordPreviewPanel({ open: _open, record, onClose, className, animationState, panelElementRef, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 497, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, tabs, activeTab, defaultActiveTab, onTabChange, overviewTabLabel = "Overview", footer, backdrop = false, ...rest }) {
+    const titleId = React.useId();
+    const classNames = recordPreview();
+    // Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
+    // independent (Attio's own Emails/Notes/Tasks open without closing one
+    // another): a plain `Set`, reset whenever the record itself changes so a
+    // stale open section doesn't carry over between two different records.
+    const [openSections, setOpenSections] = React.useState(()=>new Set());
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `record` is read as a change TRIGGER, not a value the effect body needs -- reset whenever it changes identity, regardless of what it now points to.
+    React.useEffect(()=>{
+        setOpenSections(new Set());
+    }, [
+        record
+    ]);
+    const toggleSection = (key)=>setOpenSections((prev)=>{
+            const next = new Set(prev);
+            if (next.has(key)) next.delete(key);
+            else next.add(key);
+            return next;
+        });
+    // Close on Escape. Simpler than crisp's own version (crisp additionally
+    // checks `hasOpenFloatingLayer()` so an Escape meant for a nested Menu/
+    // Select/Popover doesn't also close this panel) -- crispy-seed has no
+    // equivalent floating-stack registry to read, so a consumer nesting its
+    // own floating layers inside `footer`/`sections` content should stop
+    // propagation on its own Escape handler. This component is only ever
+    // mounted (by `RecordPreview`, above) while genuinely open or animating
+    // out, so there's no separate `open` flag to gate on here.
+    React.useEffect(()=>{
+        const onKey = (event)=>{
+            if (event.key === "Escape") onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return ()=>document.removeEventListener("keydown", onKey);
+    }, [
+        onClose
+    ]);
+    // Defensive only -- `RecordPreview` never mounts this without a record.
+    if (!record) return null;
+    const heading = title ?? record.name ?? "Record";
+    // The plain (non-tabs) layout -- unchanged from before `tabs` existed.
+    // Extracted so it can ALSO become the synthesized "Overview" tab's own
+    // content below, rather than being re-authored as JSX twice.
+    const overviewContent = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            highlights && highlights.length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                className: classNames.section,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                        className: classNames.sectionHead,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                            className: classNames.sectionLabel,
+                            children: highlightsLabel
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                        className: classNames.highlights,
+                        children: highlights.map((h)=>/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                                className: classNames.highlight,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
+                                        className: classNames.highlightLabel,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                children: h.label
+                                            }),
+                                            h.icon ? /*#__PURE__*/ jsxRuntime.jsx(h.icon, {
+                                                size: 16
+                                            }) : null
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.highlightValue,
+                                        children: h.value
+                                    })
+                                ]
+                            }, h.key))
+                    })
+                ]
+            }),
+            activity != null && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                className: classNames.section,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                        className: classNames.sectionHead,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                className: classNames.sectionLabel,
+                                children: activityLabel
+                            }),
+                            onViewAllActivity && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                                type: "button",
+                                className: classNames.sectionAction,
+                                onClick: onViewAllActivity,
+                                children: viewAllActivityLabel
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                        className: classNames.activity,
+                        children: activity
+                    })
+                ]
+            }),
+            sections && sections.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                className: classNames.sections,
+                children: sections.map((s)=>{
+                    const isOpen = openSections.has(s.key);
+                    const panelId = `${titleId}-section-${s.key}`;
+                    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        children: [
+                            s.content ? /*#__PURE__*/ jsxRuntime.jsxs(Primitive.button, {
+                                type: "button",
+                                className: classNames.sectionTrigger,
+                                "aria-expanded": isOpen,
+                                "aria-controls": panelId,
+                                onClick: ()=>toggleSection(s.key),
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.sectionRowLabel,
+                                        children: s.label
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.sectionRowCount,
+                                        children: s.count
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
+                                        className: classNames.sectionChevron,
+                                        size: 14,
+                                        "data-open": isOpen ? "" : undefined,
+                                        "aria-hidden": "true"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                                className: classNames.sectionTrigger,
+                                "data-inert": "",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.sectionRowLabel,
+                                        children: s.label
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                        className: classNames.sectionRowCount,
+                                        children: s.count
+                                    })
+                                ]
+                            }),
+                            s.content && isOpen && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                                id: panelId,
+                                className: classNames.sectionContent,
+                                children: s.content
+                            })
+                        ]
+                    }, s.key);
+                })
+            })
+        ]
+    });
+    // Combine (`tabs`'s own doc comment): when there's ALSO plain overview
+    // content given alongside `tabs`, prepend a synthesized tab carrying it,
+    // ahead of the consumer's own tabs -- so `tabs` and the simpler Highlights/
+    // Activity/sections props stay usable TOGETHER rather than one silently
+    // replacing the other.
+    const hasOverviewContent = highlights && highlights.length > 0 || activity != null || sections && sections.length > 0;
+    const allTabs = tabs && hasOverviewContent ? [
+        {
+            key: "__overview",
+            label: overviewTabLabel,
+            content: overviewContent
+        },
+        ...tabs
+    ] : tabs ?? [];
+    return /*#__PURE__*/ jsxRuntime.jsx(ResizablePanel, {
+        side: "right",
+        floating: true,
+        backdrop: backdrop,
+        onBackdropClick: onClose,
+        animationState: animationState,
+        panelElementRef: panelElementRef,
+        resizable: resizable,
+        width: width,
+        defaultSize: defaultWidth,
+        onWidthChange: onWidthChange,
+        min: minWidth,
+        max: maxWidth,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+            className: clsx(classNames.root, className),
+            ...rest,
+            role: "dialog",
+            "aria-labelledby": titleId,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
+                    className: classNames.toolbar,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                            type: "button",
+                            className: classNames.iconbtn,
+                            "aria-label": closeLabel,
+                            onClick: onClose,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
+                                size: 16
+                            })
+                        }),
+                        (onPrevious || onNext) && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
+                            className: classNames.pager,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
+                                    type: "button",
+                                    className: classNames.navbtn,
+                                    "aria-label": previousRecordLabel,
+                                    disabled: !onPrevious,
+                                    onClick: onPrevious,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronUpLine_default, {
+                                        size: 16
+                                    })
+                                }),
                                 /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
                                     type: "button",
                                     className: classNames.navbtn,
@@ -11563,121 +14716,49 @@ const RESIZE_MAX_WIDTH = 720;
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                    className: classNames.body,
-                    children: [
-                        highlights && highlights.length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                            className: classNames.section,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
-                                    className: classNames.sectionHead,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                        className: classNames.sectionLabel,
-                                        children: highlightsLabel
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
-                                    className: classNames.highlights,
-                                    children: highlights.map((h)=>/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                                            className: classNames.highlight,
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
-                                                    className: classNames.highlightLabel,
-                                                    children: [
-                                                        /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                                            children: h.label
-                                                        }),
-                                                        h.icon ? /*#__PURE__*/ jsxRuntime.jsx(h.icon, {
-                                                            size: 16
-                                                        }) : null
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                                    className: classNames.highlightValue,
-                                                    children: h.value
-                                                })
-                                            ]
-                                        }, h.key))
-                                })
-                            ]
-                        }),
-                        activity != null && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                            className: classNames.section,
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                                    className: classNames.sectionHead,
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                            className: classNames.sectionLabel,
-                                            children: activityLabel
-                                        }),
-                                        onViewAllActivity && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
-                                            type: "button",
-                                            className: classNames.sectionAction,
-                                            onClick: onViewAllActivity,
-                                            children: viewAllActivityLabel
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
-                                    className: classNames.activity,
-                                    children: activity
-                                })
-                            ]
-                        }),
-                        sections && sections.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
-                            className: classNames.sections,
-                            children: sections.map((s)=>{
-                                const isOpen = openSections.has(s.key);
-                                const panelId = `${titleId}-section-${s.key}`;
-                                return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                    children: [
-                                        s.content ? /*#__PURE__*/ jsxRuntime.jsxs(Primitive.button, {
-                                            type: "button",
-                                            className: classNames.sectionTrigger,
-                                            "aria-expanded": isOpen,
-                                            "aria-controls": panelId,
-                                            onClick: ()=>toggleSection(s.key),
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                                    className: classNames.sectionRowLabel,
-                                                    children: s.label
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                                    className: classNames.sectionRowCount,
-                                                    children: s.count
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
-                                                    className: classNames.sectionChevron,
-                                                    size: 14,
-                                                    "data-open": isOpen ? "" : undefined,
-                                                    "aria-hidden": "true"
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
-                                            className: classNames.sectionTrigger,
-                                            "data-inert": "",
+                tabs && tabs.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                    className: classNames.tabsRoot,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(TabsRoot, {
+                        value: activeTab,
+                        defaultValue: defaultActiveTab ?? allTabs[0]?.key,
+                        onValueChange: onTabChange,
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: "1 1 auto",
+                            minHeight: 0,
+                            overflow: "hidden"
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(TabsList, {
+                                children: [
+                                    allTabs.map((tab)=>/*#__PURE__*/ jsxRuntime.jsxs(TabsTrigger, {
+                                            value: tab.key,
                                             children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                                    className: classNames.sectionRowLabel,
-                                                    children: s.label
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
-                                                    className: classNames.sectionRowCount,
-                                                    children: s.count
+                                                tab.label,
+                                                tab.badge != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
+                                                    className: classNames.tabBadge,
+                                                    children: tab.badge
                                                 })
                                             ]
-                                        }),
-                                        s.content && isOpen && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
-                                            id: panelId,
-                                            className: classNames.sectionContent,
-                                            children: s.content
-                                        })
-                                    ]
-                                }, s.key);
-                            })
-                        })
-                    ]
+                                        }, tab.key)),
+                                    /*#__PURE__*/ jsxRuntime.jsx(TabsIndicator, {})
+                                ]
+                            }),
+                            allTabs.map((tab)=>/*#__PURE__*/ jsxRuntime.jsx(TabsContent, {
+                                    value: tab.key,
+                                    className: classNames.tabPanel,
+                                    style: {
+                                        flex: "1 1 auto",
+                                        minHeight: 0
+                                    },
+                                    children: tab.content
+                                }, tab.key))
+                        ]
+                    })
+                }) : /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
+                    className: classNames.body,
+                    children: overviewContent
                 }),
                 footer != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
                     className: classNames.footer,
@@ -11687,7 +14768,7 @@ const RESIZE_MAX_WIDTH = 720;
         })
     });
 }
-RecordPreview.displayName = "RecordPreview";
+RecordPreviewPanel.displayName = "RecordPreviewPanel";
 
 exports.DataTable = DataTable;
 exports.DataTableViewsControl = DataTableViewsControl;