@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/TableView.mjs

@@ -7,6 +7,8 @@ import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
 import $11111a8204dcac81$export$2e2bcd8739ae039 from "../../icons/Close.mjs";
 import {CustomDialog as $6e8e8fdd66697ef1$export$82e1fa7406db6ec} from "./CustomDialog.mjs";
 import {DialogContainer as $dd7e1b1b86bf720d$export$547754aada6e339f} from "./DialogContainer.mjs";
+import {DragHandleButton as $3c1ab1fd8f31a3e2$export$4c99a519d851f90c, InsertionIndicator as $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088} from "./dnd-utils.mjs";
+import {DragPreview as $ba354da66aaa1d20$export$905ab40ac2179daa} from "./DragPreview.mjs";
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../../icons/Icon.mjs";
 import $auVFN$intlStringsmjs from "./intlStrings.mjs";
 import {Menu as $13afb0ea5f0ed767$export$d9b273488cd8ce6f, MenuItem as $13afb0ea5f0ed767$export$2ce376c2cc3355c8, MenuSection as $13afb0ea5f0ed767$export$4b1545b4f2016d26, MenuTrigger as $13afb0ea5f0ed767$export$27d2ad3c5815583e} from "./Menu.mjs";
@@ -20,20 +22,20 @@ import {useDOMRef as $80ecb974df713a30$export$c2c55ef9111cafd8} from "./useDOMRe
 import {useMediaQuery as $7a7dbc49f63d49b0$export$32d5543ab307c01} from "../../icons/useMediaQuery.mjs";
 import {useScale as $859432f3b3573fcb$export$a8d2043b2d807f4d} from "./utils.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../../icons/useSpectrumContextProps.mjs";
-import {jsxs as $auVFN$jsxs, jsx as $auVFN$jsx, Fragment as $auVFN$Fragment} from "react/jsx-runtime";
+import {jsx as $auVFN$jsx, jsxs as $auVFN$jsxs, Fragment as $auVFN$Fragment} from "react/jsx-runtime";
 import {Button as $auVFN$Button, ButtonContext as $auVFN$ButtonContext} from "react-aria-components/Button";
-import {ResizableTableContainer as $auVFN$ResizableTableContainer, Table as $auVFN$Table, TableLoadMoreItem as $auVFN$TableLoadMoreItem, TableBody as $auVFN$TableBody, Column as $auVFN$Column, ColumnResizer as $auVFN$ColumnResizer, useTableOptions as $auVFN$useTableOptions, TableHeader as $auVFN$TableHeader, Cell as $auVFN$Cell, Row as $auVFN$Row} from "react-aria-components/Table";
+import {ResizableTableContainer as $auVFN$ResizableTableContainer, Table as $auVFN$Table, TableLoadMoreItem as $auVFN$TableLoadMoreItem, TableBody as $auVFN$TableBody, Column as $auVFN$Column, ColumnResizer as $auVFN$ColumnResizer, useTableOptions as $auVFN$useTableOptions, TableHeader as $auVFN$TableHeader, Cell as $auVFN$Cell, Row as $auVFN$Row, TableFooter as $auVFN$TableFooter} from "react-aria-components/Table";
 import {Collection as $auVFN$Collection} from "react-aria/Collection";
 import {CollectionRendererContext as $auVFN$CollectionRendererContext, DefaultCollectionRenderer as $auVFN$DefaultCollectionRenderer} from "react-aria-components/CollectionBuilder";
 import {Provider as $auVFN$Provider, useSlottedContext as $auVFN$useSlottedContext, DEFAULT_SLOT as $auVFN$DEFAULT_SLOT} from "react-aria-components/slots";
 import {Form as $auVFN$Form} from "react-aria-components/Form";
 import {getActiveElement as $auVFN$getActiveElement, nodeContains as $auVFN$nodeContains, isFocusWithin as $auVFN$isFocusWithin} from "react-aria/private/utils/shadowdom/DOMFunctions";
 import {getOwnerDocument as $auVFN$getOwnerDocument} from "react-aria/private/utils/domHelpers";
+import {Rect as $auVFN$Rect, TableLayout as $auVFN$TableLayout, Virtualizer as $auVFN$Virtualizer} from "react-aria-components/Virtualizer";
 import {OverlayTriggerStateContext as $auVFN$OverlayTriggerStateContext} from "react-aria-components/Dialog";
 import {CheckboxContext as $auVFN$CheckboxContext} from "react-aria-components/Checkbox";
 import {Popover as $auVFN$Popover} from "react-aria-components/Popover";
 import {createContext as $auVFN$createContext, forwardRef as $auVFN$forwardRef, useState as $auVFN$useState, useCallback as $auVFN$useCallback, useMemo as $auVFN$useMemo, useRef as $auVFN$useRef, useContext as $auVFN$useContext, useEffect as $auVFN$useEffect} from "react";
-import {Rect as $auVFN$Rect, TableLayout as $auVFN$TableLayout, Virtualizer as $auVFN$Virtualizer} from "react-aria-components/Virtualizer";
 import {useLayoutEffect as $auVFN$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
 import {useLocale as $auVFN$useLocale} from "react-aria/I18nProvider";
 import {useLocalizedStringFormatter as $auVFN$useLocalizedStringFormatter} from "react-aria/useLocalizedStringFormatter";
@@ -91,6 +93,8 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 
 
 
@@ -107,66 +111,81 @@ const $0fcd5fb617970a1d$var$tableWrapper = function anonymous(props, overrides)
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!minHeight) rules += ' Ma13';
-    if (!minWidth) rules += ' Na13';
-    rules += ' sd13';
-    rules += ' _Bb13';
-    rules += ' __ca13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!minHeight) rules += ' Ma131';
+    if (!minWidth) rules += ' Na131';
+    rules += ' sd131';
+    rules += ' _Bb131';
+    rules += ' __ca131';
+    if (!position) rules += ' _Pc131';
+    rules += ' _Nb131';
+    rules += ' Pb131';
     return rules;
 };
+// due to the overflow: clip for actionbar, render the outline via a pseudo element so it isn't
+// clipped. 6px radius matches the table's border radius
+const $0fcd5fb617970a1d$var$rootDropOutline = "pUEtOc";
+const $0fcd5fb617970a1d$var$dropTargetBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%)]";
 const $0fcd5fb617970a1d$var$table = function anonymous(props) {
     let rules = " ";
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _oa13';
-    rules += ' _4c13';
-    rules += ' Ma13';
-    rules += ' Na13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Na13';
-    rules += ' Pa13';
-    if (props.isQuiet) rules += ' g913';
-    else rules += ' gX13';
-    rules += ' gla13';
-    rules += ' iq13';
-    rules += ' _jf13';
-    if (props.isQuiet) rules += ' _ka13';
-    else rules += ' _kb13';
-    if (props.isQuiet) rules += ' ha13';
-    else rules += ' hb13';
-    if (props.isQuiet) rules += ' ma13';
-    else rules += ' mb13';
-    if (props.isQuiet) rules += ' la13';
-    else rules += ' lb13';
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Ka13';
-    if (props.isQuiet) rules += ' od13';
-    else rules += ' of13';
-    if (props.isQuiet) rules += ' nd13';
-    else rules += ' nf13';
-    if (props.isQuiet) rules += ' kd13';
-    else rules += ' kf13';
-    if (props.isQuiet) rules += ' jd13';
-    else rules += ' jf13';
-    rules += ' _Um13';
-    if (props.isCheckboxSelection) rules += ' _Tk13';
+    rules += ' Za131';
+    rules += ' Fb131';
+    rules += ' _oa131';
+    rules += ' _4c131';
+    rules += ' Ma131';
+    rules += ' Na131';
+    rules += ' uk131';
+    rules += ' ucJ9TBTb131';
+    rules += ' ud3Euai131';
+    rules += ' uea131';
+    rules += ' ugb131';
+    rules += ' uhd131';
+    rules += ' uje131';
+    rules += ' u2NhKxcl131';
+    rules += ' uic131';
+    rules += ' xb131';
+    rules += ' _xa131';
+    rules += ' _Na131';
+    rules += ' Pa131';
+    if (props.isDropTarget) rules += ' glzvDBe131';
+    else if (props.isQuiet) rules += ' g9131';
+    else rules += ' gX131';
+    rules += ' gla131';
+    if (props.isDropTarget) rules += ' ix131';
+    else rules += ' iq131';
+    if (props.isDropTarget) rules += ' ild131';
+    else rules += ' ila131';
+    rules += ' _jf131';
+    if (props.isQuiet) rules += ' _ka131';
+    else rules += ' _kb131';
+    if (props.isQuiet) rules += ' ha131';
+    else rules += ' hb131';
+    if (props.isQuiet) rules += ' ma131';
+    else rules += ' mb131';
+    if (props.isQuiet) rules += ' la131';
+    else rules += ' lb131';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _Kd131';
+    if (props.isQuiet) rules += ' od131';
+    else rules += ' of131';
+    if (props.isQuiet) rules += ' nd131';
+    else rules += ' nf131';
+    if (props.isQuiet) rules += ' kd131';
+    else rules += ' kf131';
+    if (props.isQuiet) rules += ' jd131';
+    else rules += ' jf131';
+    rules += ' _Um131';
+    if (props.isDragAndDrop) {
+        if (props.isCheckboxSelection) rules += ' _Tn131';
+        else rules += ' _Ti131';
+    } else if (props.isCheckboxSelection) rules += ' _Tk131';
+    rules += ' _yb131';
+    if (props.isCheckboxSelection) rules += ' -dBGRde-ZosIvTc131';
+    else rules += ' -dBGRde-ZwbbKhe131';
+    rules += ' -lPUMEc-Zu131';
     return rules;
 };
 // component-height-100
@@ -193,17 +212,14 @@ class $0fcd5fb617970a1d$export$4e03bdf0174fd602 extends (0, $auVFN$TableLayout)
         return node.props.isSticky;
     }
     buildCollection() {
-        let [header, body] = super.buildCollection();
-        if (!header) return [];
-        let { layoutInfo: layoutInfo } = body;
+        let rowGroups = super.buildCollection();
+        if (rowGroups.length < 2) return [];
+        let { layoutInfo: layoutInfo } = rowGroups[1];
         // TableLayout's buildCollection always sets the body width to the max width between the header width, but
         // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
         let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
         if (isEmptyOrLoading) layoutInfo.rect.width = this.virtualizer.size.width - 80;
-        return [
-            header,
-            body
-        ];
+        return rowGroups;
     }
     buildLoader(node, x, y) {
         let layoutNode = super.buildLoader(node, x, y);
@@ -217,9 +233,9 @@ class $0fcd5fb617970a1d$export$4e03bdf0174fd602 extends (0, $auVFN$TableLayout)
         layoutInfo.isSticky = !isEmptyOrLoading;
         return layoutNode;
     }
-    // y is the height of the headers
-    buildBody(y) {
-        let layoutNode = super.buildBody(y);
+    buildRowGroup(y, node) {
+        let layoutNode = super.buildRowGroup(y, node);
+        if (node.type !== 'tablebody') return layoutNode;
         let { layoutInfo: layoutInfo } = layoutNode;
         // Needs overflow for sticky loader
         layoutInfo.allowOverflow = true;
@@ -252,11 +268,24 @@ class $0fcd5fb617970a1d$export$4e03bdf0174fd602 extends (0, $auVFN$TableLayout)
         layoutNode.layoutInfo.allowOverflow = true;
         return layoutNode;
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.zIndex = 1;
+        layoutInfo.allowOverflow = true;
+        return layoutInfo;
+    }
 }
 const $0fcd5fb617970a1d$export$93e4b0b2cc49b648 = /*#__PURE__*/ (0, $auVFN$createContext)(null);
 const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableView(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $0fcd5fb617970a1d$export$93e4b0b2cc49b648);
-    let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, isQuiet: isQuiet = false, density: density = 'regular', overflowMode: overflowMode = 'truncate', styles: styles, loadingState: loadingState, onResize: propsOnResize, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, onAction: onAction, onLoadMore: onLoadMore, selectionMode: selectionMode = 'none', ...otherProps } = props;
+    let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, isQuiet: isQuiet = false, density: density = 'regular', overflowMode: overflowMode = 'truncate', styles: styles, loadingState: loadingState, onResize: propsOnResize, onResizeStart: propsOnResizeStart, onResizeEnd: propsOnResizeEnd, onAction: onAction, onLoadMore: onLoadMore, selectionMode: selectionMode = 'none', selectionStyle: selectionStyle = 'checkbox', dragAndDropHooks: dragAndDropHooks, disabledBehavior: disabledBehavior = 'all', ...otherProps } = props;
+    if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) dragAndDropHooks.renderDragPreview = (items)=>/*#__PURE__*/ (0, $auVFN$jsx)((0, $ba354da66aaa1d20$export$905ab40ac2179daa), {
+            items: items,
+            overflowMode: overflowMode
+        });
+    if (dragAndDropHooks) dragAndDropHooks.renderDropIndicator = (target)=>/*#__PURE__*/ (0, $auVFN$jsx)((0, $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088), {
+            target: target
+        });
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
     let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)();
     // Starts when the user selects resize from the menu, ends when resizing ends
@@ -282,7 +311,9 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
             onLoadMore: onLoadMore,
             isInResizeMode: isInResizeMode,
             setIsInResizeMode: setIsInResizeMode,
-            selectionMode: selectionMode
+            selectionMode: selectionMode,
+            selectionStyle: selectionStyle,
+            disabledBehavior: disabledBehavior
         }), [
         isQuiet,
         density,
@@ -291,10 +322,13 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
         onLoadMore,
         isInResizeMode,
         setIsInResizeMode,
-        selectionMode
+        selectionMode,
+        selectionStyle,
+        disabledBehavior
     ]);
     let scrollRef = (0, $auVFN$useRef)(null);
     let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single';
+    let isDragAndDrop = !!dragAndDropHooks?.useDraggableCollectionState;
     let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $f21f2186348fbc5b$export$13f32e21845e01d0)({
         ...props,
         scrollRef: scrollRef
@@ -305,7 +339,7 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
         onResize: propsOnResize,
         onResizeEnd: onResizeEnd,
         onResizeStart: onResizeStart,
-        className: (UNSAFE_className || '') + $0fcd5fb617970a1d$var$tableWrapper(null, styles),
+        className: (UNSAFE_className || '') + $0fcd5fb617970a1d$var$tableWrapper(null, styles) + ' ' + $0fcd5fb617970a1d$var$rootDropOutline,
         style: UNSAFE_style,
         children: [
             /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Virtualizer), {
@@ -315,7 +349,8 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
                     estimatedRowHeight: overflowMode === 'wrap' ? $0fcd5fb617970a1d$var$ROW_HEIGHTS[density][scale] : undefined,
                     // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
                     headingHeight: $0fcd5fb617970a1d$var$DEFAULT_HEADER_HEIGHT[scale],
-                    loaderHeight: 60
+                    loaderHeight: 60,
+                    dropIndicatorThickness: 0
                 },
                 children: /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$InternalTableContext.Provider, {
                     value: context,
@@ -332,11 +367,14 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
                         className: (renderProps)=>$0fcd5fb617970a1d$var$table({
                                 ...renderProps,
                                 isCheckboxSelection: isCheckboxSelection,
+                                isDragAndDrop: isDragAndDrop,
                                 isQuiet: isQuiet
                             }),
-                        selectionBehavior: "toggle",
+                        selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                         selectionMode: selectionMode,
                         onRowAction: onAction,
+                        dragAndDropHooks: dragAndDropHooks,
+                        disabledBehavior: disabledBehavior,
                         ...otherProps,
                         selectedKeys: selectedKeys,
                         defaultSelectedKeys: undefined,
@@ -348,7 +386,7 @@ const $0fcd5fb617970a1d$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $auVFN$forwar
         ]
     });
 });
-const $0fcd5fb617970a1d$var$centeredWrapper = " sd13 eb13 _Ca13 Za13 Fb13";
+const $0fcd5fb617970a1d$var$centeredWrapper = " sd131 eb131 _Ca131 Za131 Fb131";
 const $0fcd5fb617970a1d$export$76ccd210b9029917 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableBody(props, ref) {
     let { items: items, renderEmptyState: renderEmptyState, children: children, dependencies: dependencies = [] } = props;
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
@@ -363,7 +401,7 @@ const $0fcd5fb617970a1d$export$76ccd210b9029917 = /*#__PURE__*/ (0, $auVFN$forwa
     let loadMoreSpinner = /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$TableLoadMoreItem), {
         isLoading: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
-        className: " Fb13 Za13",
+        className: " Fb131 Za131",
         children: /*#__PURE__*/ (0, $auVFN$jsx)("div", {
             className: $0fcd5fb617970a1d$var$centeredWrapper,
             children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7), {
@@ -409,7 +447,7 @@ const $0fcd5fb617970a1d$export$76ccd210b9029917 = /*#__PURE__*/ (0, $auVFN$forwa
     return /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$TableBody), {
         // @ts-ignore
         ref: domRef,
-        className: " Fb13",
+        className: " Fb131",
         ...props,
         renderEmptyState: emptyRender,
         dependencies: [
@@ -427,31 +465,36 @@ const $0fcd5fb617970a1d$var$cellFocus = {
     outlineWidth: 2,
     outlineColor: {
         default: 'focus-ring',
-        forcedColors: 'Highlight'
+        forcedColors: {
+            default: 'Highlight'
+        }
     },
-    borderRadius: '[6px]'
+    borderRadius: '[5px]',
+    // We need to render the cell focus ring on top of the cell divider if there is one. The divider has a z-index of 1.
+    zIndex: 2
 };
 function $0fcd5fb617970a1d$var$CellFocusRing() {
     return /*#__PURE__*/ (0, $auVFN$jsx)("div", {
         role: "presentation",
         className: function anonymous(props) {
             let rules = " ";
-            if (props.isFocusVisible) rules += ' _Lf13';
-            else rules += ' _Le13';
-            rules += ' _Kb13';
-            rules += ' _Mc13';
-            rules += ' Oh13';
-            rules += ' Olc13';
-            rules += ' of13';
-            rules += ' nf13';
-            rules += ' kf13';
-            rules += ' jf13';
-            rules += ' _Pa13';
-            rules += ' Wr13';
-            rules += ' _lr13';
-            rules += ' _Ar13';
-            rules += ' _zr13';
-            rules += ' _Ob13';
+            if (props.isFocusVisible) rules += ' _Lf131';
+            else rules += ' _Le131';
+            rules += ' _Kb131';
+            rules += ' _Mc131';
+            rules += ' Oh131';
+            rules += ' Olc131';
+            rules += ' osmOfn131';
+            rules += ' nsmOfn131';
+            rules += ' ksmOfn131';
+            rules += ' jsmOfn131';
+            rules += ' _9d131';
+            rules += ' _Pa131';
+            rules += ' Wr131';
+            rules += ' _lr131';
+            rules += ' _Ar131';
+            rules += ' _zr131';
+            rules += ' _Ob131';
             return rules;
         }({
             isFocusVisible: true
@@ -460,62 +503,62 @@ function $0fcd5fb617970a1d$var$CellFocusRing() {
 }
 const $0fcd5fb617970a1d$var$columnStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' F40ub4c13';
-    rules += ' _oa13';
-    if (props.isPressed) rules += ' po13';
-    else if (props.isFocusVisible) rules += ' po13';
-    else if (props.isHovered) rules += ' po13';
-    else rules += ' pt13';
-    rules += ' plb13';
-    if (props.isMenu) rules += ' Sd13';
-    else rules += ' Sf13';
-    if (props.isMenu) rules += ' Rd13';
-    else rules += ' Rf13';
-    if (props.align === "end") rules += ' _Wb13';
-    else if (props.align === "center") rules += ' _Wa13';
-    else if (props.align === "start") rules += ' _Wd13';
-    rules += ' _Le13';
-    rules += ' _Pc13';
+    rules += ' F40ub4c131';
+    rules += ' _oa131';
+    if (props.isPressed) rules += ' po131';
+    else if (props.isFocusVisible) rules += ' po131';
+    else if (props.isHovered) rules += ' po131';
+    else rules += ' pt131';
+    rules += ' plb131';
+    if (props.isMenu) rules += ' Sd131';
+    else rules += ' Sf131';
+    if (props.isMenu) rules += ' Rd131';
+    else rules += ' Rf131';
+    if (props.align === "end") rules += ' _Wb131';
+    else if (props.align === "center") rules += ' _Wa131';
+    else if (props.align === "start") rules += ' _Wd131';
+    rules += ' _Le131';
+    rules += ' _Pc131';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     }
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' xd13';
-    rules += ' _xa13';
-    rules += ' xX0cczbc13';
-    rules += ' _xX0cczba13';
-    rules += ' sd13';
-    rules += ' iq13';
-    rules += ' ila13';
-    if (props.isQuiet) rules += ' _kb13';
-    else rules += ' _ka13';
-    rules += ' hb13';
-    rules += ' ma13';
-    if (props.isMenu) rules += ' lb13';
-    else rules += ' la13';
-    rules += ' _jf13';
-    rules += ' _yb13';
+    rules += ' uk131';
+    rules += ' ucJ9TBTb131';
+    rules += ' ud3Euai131';
+    rules += ' uea131';
+    rules += ' ugb131';
+    rules += ' uhd131';
+    rules += ' uje131';
+    rules += ' u2NhKxcl131';
+    rules += ' uic131';
+    rules += ' xd131';
+    rules += ' _xa131';
+    rules += ' xX0cczbc131';
+    rules += ' _xX0cczba131';
+    rules += ' sd131';
+    rules += ' iq131';
+    rules += ' ila131';
+    if (props.isQuiet) rules += ' _kb131';
+    else rules += ' _ka131';
+    rules += ' hb131';
+    rules += ' ma131';
+    if (props.isMenu) rules += ' lb131';
+    else rules += ' la131';
+    rules += ' _jf131';
+    rules += ' _yb131';
     return rules;
 };
 const $0fcd5fb617970a1d$export$816b5d811295e6bc = /*#__PURE__*/ (0, $auVFN$forwardRef)(function Column(props, ref) {
@@ -559,26 +602,26 @@ const $0fcd5fb617970a1d$export$816b5d811295e6bc = /*#__PURE__*/ (0, $auVFN$forwa
 });
 const $0fcd5fb617970a1d$var$columnContentWrapper = function anonymous(props) {
     let rules = " ";
-    rules += ' Na13';
-    rules += ' sd13';
-    rules += ' eb13';
-    rules += ' Za13';
-    if (props.align === "end") rules += ' _Cb13';
-    else if (props.align === "center") rules += ' _Ca13';
-    else if (props.align === "default") rules += ' _Cg13';
+    rules += ' Na131';
+    rules += ' sd131';
+    rules += ' eb131';
+    rules += ' Za131';
+    if (props.align === "end") rules += ' _Cb131';
+    else if (props.align === "center") rules += ' _Ca131';
+    else if (props.align === "default") rules += ' _Cg131';
     return rules;
 };
 const $0fcd5fb617970a1d$var$sortIcon = function anonymous(props) {
     let rules = " ";
-    rules += ' ZXJkxGe13';
-    rules += ' FXJkxGe13';
-    rules += ' _va13';
+    rules += ' ZXJkxGe131';
+    rules += ' FXJkxGe131';
+    rules += ' _va131';
     if (props.isButton) {
-        rules += ' Ht13';
-        rules += ' Hsu13';
-    } else rules += ' Hv13';
-    rules += ' _5b13';
-    rules += ' -_8sjo0b-t5ZbAob13';
+        rules += ' Ht131';
+        rules += ' Hsu131';
+    } else rules += ' Hv131';
+    rules += ' _5b131';
+    rules += ' -_8sjo0b-t5ZbAob131';
     return rules;
 };
 function $0fcd5fb617970a1d$var$ColumnContents(props) {
@@ -608,94 +651,95 @@ function $0fcd5fb617970a1d$var$ColumnContents(props) {
 }
 const $0fcd5fb617970a1d$var$resizableMenuButtonWrapper = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' _Kb13';
-    rules += ' _Mc13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' of13';
-    rules += ' nf13';
-    rules += ' kf13';
-    rules += ' jf13';
-    rules += ' pt13';
-    rules += ' Za13';
-    rules += ' _Pc13';
-    rules += ' sd13';
-    rules += ' eb13';
-    if (props.align === "end") rules += ' _Cb13';
-    else if (props.align === "center") rules += ' _Ca13';
-    else if (props.align === "default") rules += ' _Cg13';
-    rules += ' Sf13';
-    rules += ' Rf13';
-    rules += ' g913';
-    rules += ' _je13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    rules += ' _Kb131';
+    rules += ' _Mc131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' osmOfn131';
+    rules += ' nsmOfn131';
+    rules += ' ksmOfn131';
+    rules += ' jsmOfn131';
+    rules += ' _9d131';
+    rules += ' pt131';
+    rules += ' Za131';
+    rules += ' _Pc131';
+    rules += ' sd131';
+    rules += ' eb131';
+    if (props.align === "end") rules += ' _Cb131';
+    else if (props.align === "center") rules += ' _Ca131';
+    else if (props.align === "default") rules += ' _Cg131';
+    rules += ' Sf131';
+    rules += ' Rf131';
+    rules += ' g9131';
+    rules += ' _je131';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     }
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' xd13';
-    rules += ' _xa13';
-    rules += ' xX0cczbc13';
-    rules += ' _xX0cczba13';
+    rules += ' uk131';
+    rules += ' ucJ9TBTb131';
+    rules += ' ud3Euai131';
+    rules += ' uea131';
+    rules += ' ugb131';
+    rules += ' uhd131';
+    rules += ' uje131';
+    rules += ' u2NhKxcl131';
+    rules += ' uic131';
+    rules += ' xd131';
+    rules += ' _xa131';
+    rules += ' xX0cczbc131';
+    rules += ' _xX0cczba131';
     return rules;
 };
 const $0fcd5fb617970a1d$var$resizerHandleContainer = function anonymous(props) {
     let rules = " ";
-    if (props.isInResizeMode) rules += ' sb13';
-    else if (props.isResizing) rules += ' sb13';
-    else rules += ' sjBAxlb13';
-    rules += ' Zj13';
-    rules += ' Fb13';
-    rules += ' _Pa13';
-    rules += ' Wr13';
-    rules += ' _zdYbyj13';
-    if (props.resizableDirection === "both") rules += ' rk13';
-    else if (props.resizableDirection === "right") rules += ' rF13';
-    else if (props.resizableDirection === "left") rules += ' rj13';
-    else rules += ' rt13';
+    if (props.isInResizeMode) rules += ' sb131';
+    else if (props.isResizing) rules += ' sb131';
+    else rules += ' sjBAxlb131';
+    rules += ' Zj131';
+    rules += ' Fb131';
+    rules += ' _Pa131';
+    rules += ' Wr131';
+    rules += ' _zdYbyj131';
+    if (props.resizableDirection === "both") rules += ' rk131';
+    else if (props.resizableDirection === "right") rules += ' rF131';
+    else if (props.resizableDirection === "left") rules += ' rj131';
+    else rules += ' rt131';
     return rules;
 };
 const $0fcd5fb617970a1d$var$resizerHandle = function anonymous(props) {
     let rules = " ";
-    if (props.isResizing) rules += ' g5qAiPc13';
-    else if (props.isFocusVisible) rules += ' g5qAiPc13';
-    else rules += ' gE13';
-    if (props.isResizing) rules += ' gle13';
-    else if (props.isFocusVisible) rules += ' gle13';
-    else rules += ' gla13';
-    if (props.isResizing) rules += ' Fc13';
-    else rules += ' Fb13';
-    if (props.isResizing) rules += ' Zf13';
-    else rules += ' Ze13';
-    rules += ' _Pa13';
-    rules += ' _AWJpoB13';
+    if (props.isResizing) rules += ' g5qAiPc131';
+    else if (props.isFocusVisible) rules += ' g5qAiPc131';
+    else rules += ' gE131';
+    if (props.isResizing) rules += ' gle131';
+    else if (props.isFocusVisible) rules += ' gle131';
+    else rules += ' gla131';
+    if (props.isResizing) rules += ' Fc131';
+    else rules += ' Fb131';
+    if (props.isResizing) rules += ' Zf131';
+    else rules += ' Ze131';
+    rules += ' _Pa131';
+    rules += ' _AWJpoB131';
     return rules;
 };
-const $0fcd5fb617970a1d$var$columnHeaderText = " _Nc13 Pc13 _Yb13 _7c13 NXJkxGe13 _ua13 _vb13 _sd13";
-const $0fcd5fb617970a1d$var$chevronIcon = " _Sd13 It13 Isu13 NXJkxGe13 _va13 -_8sjo0b-t5ZbAob13";
-const $0fcd5fb617970a1d$var$nubbin = " _Pa13 Wr13 _AlhfIS13 ZXJkxGe13 FXJkxGe13 t5qAiPc13 tla13 -_8sjo0b-tw13 -_8sjo0b-lt8pvGJ13";
+const $0fcd5fb617970a1d$var$columnHeaderText = " _Nc131 Pc131 _Yb131 _7c131 NXJkxGe131 _ua131 _vb131 _sd131";
+const $0fcd5fb617970a1d$var$chevronIcon = " _Sd131 It131 Isu131 NXJkxGe131 _va131 -_8sjo0b-t5ZbAob131";
+const $0fcd5fb617970a1d$var$nubbin = " _Pa131 Wr131 _AlhfIS131 ZXJkxGe131 FXJkxGe131 t5qAiPc131 tla131 -_8sjo0b-tw131 -_8sjo0b-lt8pvGJ131";
 function $0fcd5fb617970a1d$var$ColumnWithMenu(props) {
     let { allowsSorting: allowsSorting, sortDirection: sortDirection, sort: sort, startResize: startResize, children: children, align: align, isColumnResizable: isColumnResizable, menuItems: menuItems } = props;
     let { setIsInResizeMode: setIsInResizeMode, isInResizeMode: isInResizeMode } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext);
@@ -782,7 +826,7 @@ function $0fcd5fb617970a1d$var$ColumnWithMenu(props) {
                     }),
                     /*#__PURE__*/ (0, $auVFN$jsxs)((0, $13afb0ea5f0ed767$export$d9b273488cd8ce6f), {
                         onAction: onMenuSelect,
-                        styles: " Nn13",
+                        styles: " Nn131",
                         children: [
                             items.length > 0 && /*#__PURE__*/ (0, $auVFN$jsx)((0, $13afb0ea5f0ed767$export$4b1545b4f2016d26), {
                                 children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Collection), {
@@ -833,53 +877,75 @@ function $0fcd5fb617970a1d$var$ResizerIndicator({ isFocusVisible: isFocusVisible
 }
 const $0fcd5fb617970a1d$var$tableHeader = function anonymous(props) {
     let rules = " ";
-    rules += ' Fb13';
-    rules += ' Za13';
-    rules += ' gL13';
-    rules += ' JLPOtrc13';
-    if (props.isHovered) rules += ' -xLp2wc-sb13';
-    else rules += ' -xLp2wc-sk13';
+    rules += ' Fb131';
+    rules += ' Za131';
+    rules += ' gL131';
+    rules += ' gl9131';
+    rules += ' JLPOtrc131';
+    if (props.isHovered) rules += ' -xLp2wc-sb131';
+    else rules += ' -xLp2wc-sk131';
     return rules;
 };
 const $0fcd5fb617970a1d$var$selectAllCheckbox = "";
 const $0fcd5fb617970a1d$var$selectAllCheckboxColumn = function anonymous(props) {
     let rules = " ";
-    rules += ' Sd13';
-    rules += ' SZbReHcf13';
-    rules += ' Rd13';
-    rules += ' R3n0jFt13';
-    rules += ' Td13';
-    rules += ' Qd13';
-    rules += ' Fb13';
-    rules += ' _oa13';
-    rules += ' _Le13';
-    rules += ' _Pc13';
-    rules += ' sd13';
-    rules += ' _cb13';
-    rules += ' eb13';
-    rules += ' _Cg13';
-    rules += ' iq13';
-    rules += ' ila13';
-    rules += ' ma13';
-    rules += ' la13';
-    if (props.isQuiet) rules += ' _kb13';
-    else rules += ' _ka13';
-    rules += ' hb13';
-    rules += ' _jf13';
-    rules += ' gL13';
+    rules += ' Sd131';
+    rules += ' SZbReHcf131';
+    rules += ' Rd131';
+    rules += ' R3n0jFt131';
+    rules += ' Td131';
+    rules += ' Qd131';
+    rules += ' Fb131';
+    rules += ' _oa131';
+    rules += ' _Le131';
+    rules += ' _Pc131';
+    rules += ' sd131';
+    rules += ' _cb131';
+    rules += ' eb131';
+    rules += ' _Cg131';
+    rules += ' iq131';
+    rules += ' ila131';
+    rules += ' ma131';
+    rules += ' la131';
+    if (props.isQuiet) rules += ' _kb131';
+    else rules += ' _ka131';
+    rules += ' hb131';
+    rules += ' _jf131';
+    rules += ' gL131';
+    rules += ' gl9131';
     return rules;
 };
 const $0fcd5fb617970a1d$export$f850895b287ef28e = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableHeader({ columns: columns, dependencies: dependencies, children: children }, ref) {
     let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)();
-    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $auVFN$useTableOptions)();
-    let { isQuiet: isQuiet } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext);
+    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode, allowsDragging: allowsDragging } = (0, $auVFN$useTableOptions)();
+    let { isQuiet: isQuiet, selectionStyle: selectionStyle } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext);
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
+    let stringFormatter = (0, $auVFN$useLocalizedStringFormatter)((0, ($parcel$interopDefault($auVFN$intlStringsmjs))), '@react-spectrum/s2');
     return /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$TableHeader), {
         // @ts-ignore
         ref: domRef,
         className: $0fcd5fb617970a1d$var$tableHeader,
         children: [
-            selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Column), {
+            allowsDragging && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Column), {
+                // @ts-ignore
+                isSticky: true,
+                width: scale === 'medium' ? 16 : 20,
+                minWidth: scale === 'medium' ? 16 : 20,
+                className: $0fcd5fb617970a1d$var$selectAllCheckboxColumn({
+                    isQuiet: isQuiet
+                }),
+                children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), {
+                        children: [
+                            isFocusVisible && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$CellFocusRing, {}),
+                            /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$VisuallyHidden), {
+                                children: stringFormatter.format('table.drag')
+                            })
+                        ]
+                    })
+            }),
+            selectionBehavior === 'toggle' && selectionStyle === 'checkbox' && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Column), {
+                // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
+                // @ts-ignore
                 isSticky: true,
                 width: scale === 'medium' ? 40 : 52,
                 minWidth: scale === 'medium' ? 40 : 52,
@@ -916,21 +982,12 @@ function $0fcd5fb617970a1d$var$VisuallyHiddenSelectAllLabel() {
     });
 }
 const $0fcd5fb617970a1d$var$commonCellStyles = {
-    borderColor: 'transparent',
-    borderBottomWidth: 1,
-    borderTopWidth: 0,
-    borderXWidth: 0,
-    borderStyle: 'solid',
     position: 'relative',
     color: '--rowTextColor',
     outlineStyle: 'none',
     paddingX: 16 // table-edge-to-content
 };
 const $0fcd5fb617970a1d$var$treeColumnStyles = {
-    '--indent': {
-        type: 'width',
-        value: 16
-    },
     '--treeColumnPadding': {
         type: 'width',
         value: {
@@ -945,88 +1002,80 @@ const $0fcd5fb617970a1d$var$treeColumnStyles = {
 };
 const $0fcd5fb617970a1d$var$cell = function anonymous(props) {
     let rules = " ";
-    rules += ' iq13';
-    rules += ' ila13';
-    rules += ' hb13';
-    rules += ' _ka13';
-    rules += ' ma13';
-    if (props.isDivider) rules += ' lb13';
-    else rules += ' la13';
-    if (props.isDivider) rules += ' _jf13';
-    else rules += ' _je13';
-    rules += ' _Pc13';
-    rules += ' pBvFblc13';
-    rules += ' _Le13';
-    if (props.isTreeColumn) rules += ' S7cyhDe13';
-    else rules += ' Sf13';
-    rules += ' Rf13';
-    rules += ' -lPUMEc-Zu13';
-    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv13';
-    else rules += ' -WWxPD-Zu13';
-    if (props.density === "spacious") rules += ' Mk13';
-    else if (props.density === "compact") rules += ' Mi13';
-    else rules += ' Mh13';
-    rules += ' _oa13';
-    rules += ' Fb13';
-    rules += ' Za13';
+    rules += ' _Pc131';
+    rules += ' pBvFblc131';
+    rules += ' _Le131';
+    if (props.isTreeColumn) rules += ' S7cyhDe131';
+    else rules += ' Sf131';
+    rules += ' Rf131';
+    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv131';
+    else rules += ' -WWxPD-Zu131';
+    if (props.density === "spacious") rules += ' Mk131';
+    else if (props.density === "compact") rules += ' Mi131';
+    else rules += ' Mh131';
+    rules += ' _oa131';
+    rules += ' Fb131';
+    rules += ' Za131';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     }
-    rules += ' eb13';
-    rules += ' sd13';
+    rules += ' eb131';
+    rules += ' sd131';
     return rules;
 };
+const $0fcd5fb617970a1d$var$divider = " sb131 _Pa131 ZceNfn131 Fb131 _zr131 gp95UEb131 _9c131";
 const $0fcd5fb617970a1d$var$stickyCell = {
     backgroundColor: 'gray-25'
 };
-const $0fcd5fb617970a1d$var$checkboxCellStyle = " iA13 ha13 _ka13 ma13 la13 _jf13 _Pc13 pBvFblc13 _Le13 Sf13 Rt13 gs9yXOb13 sd13 _cb13 eb13 _Cg13 FBJsHLe13";
+const $0fcd5fb617970a1d$var$checkboxCellStyle = " _Pc131 pBvFblc131 _Le131 Sf131 Rt131 gs9yXOb131 sd131 _cb131 eb131 _Cg131 FBJsHLe131 ha131";
+const $0fcd5fb617970a1d$var$dragCellStyle = " _Pc131 pBvFblc131 _Le131 Sp131 Rp131 gs9yXOb131 _cb131 FBJsHLe131 ha131";
 const $0fcd5fb617970a1d$var$cellContent = function anonymous(props) {
     let rules = " ";
-    if (props.isSticky) rules += ' _Ne13';
-    else rules += ' _Nc13';
-    if (props.isSticky) rules += ' Pe13';
-    else rules += ' Pc13';
-    if (props.isSticky) rules += ' _Ya13';
-    else rules += ' _Yb13';
-    if (props.overflowMode === "wrap") rules += ' _7b13';
-    else rules += ' _7c13';
-    if (props.align === "end") rules += ' _Wb13';
-    else if (props.align === "center") rules += ' _Wa13';
-    else if (props.align === "start") rules += ' _Wd13';
-    rules += ' Za13';
-    rules += ' ZZbReHce4mUs13';
-    rules += ' _Bb13';
-    if (props.isSticky) rules += ' Td13';
-    else rules += ' Tp13';
-    if (props.isSticky) rules += ' Qd13';
-    else rules += ' Qp13';
-    if (props.isSticky) rules += ' Sd13';
-    else rules += ' Sp13';
-    if (props.isSticky) rules += ' Rd13';
-    else rules += ' Rp13';
-    if (props.isSticky) rules += ' Jy13';
-    else rules += ' Jb13';
-    if (props.isSticky) rules += ' Gy13';
-    else rules += ' Gb13';
-    if (props.isSticky) rules += ' Iy13';
-    else rules += ' Ib13';
-    if (props.isSticky) rules += ' Hy13';
-    else rules += ' Hb13';
-    if (props.isSticky) rules += ' gs9yXOb13';
-    else rules += ' g913';
+    if (props.isSticky) rules += ' _Ne131';
+    else rules += ' _Nc131';
+    if (props.isSticky) rules += ' Pe131';
+    else rules += ' Pc131';
+    if (props.isSticky) rules += ' _Ya131';
+    else rules += ' _Yb131';
+    if (props.overflowMode === "wrap") rules += ' _7b131';
+    else rules += ' _7c131';
+    if (props.align === "end") rules += ' _Wb131';
+    else if (props.align === "center") rules += ' _Wa131';
+    else if (props.align === "start") rules += ' _Wd131';
+    rules += ' Za131';
+    rules += ' ZZbReHce4mUs131';
+    rules += ' _Bb131';
+    if (props.isSticky) rules += ' Td131';
+    else rules += ' Tp131';
+    if (props.isSticky) rules += ' Qd131';
+    else rules += ' Qp131';
+    if (props.isSticky) rules += ' Sd131';
+    else rules += ' Sp131';
+    if (props.isSticky) rules += ' Rd131';
+    else rules += ' Rp131';
+    if (props.isSticky) rules += ' Jy131';
+    else rules += ' Jb131';
+    if (props.isSticky) rules += ' Gy131';
+    else rules += ' Gb131';
+    if (props.isSticky) rules += ' Iy131';
+    else rules += ' Ib131';
+    if (props.isSticky) rules += ' Hy131';
+    else rules += ' Hb131';
+    if (props.isSticky) rules += ' gs9yXOb131';
+    else rules += ' g9131';
     return rules;
 };
 const $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $auVFN$forwardRef)(function Cell(props, ref) {
@@ -1049,6 +1098,9 @@ const $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $auVFN$forwa
         ...otherProps,
         children: ({ id: id, isFocusVisible: isFocusVisible, hasChildItems: hasChildItems, isTreeColumn: isTreeColumn, isExpanded: isExpanded, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Fragment), {
                 children: [
+                    showDivider && /*#__PURE__*/ (0, $auVFN$jsx)("div", {
+                        className: $0fcd5fb617970a1d$var$divider
+                    }),
                     hasChildItems && isTreeColumn && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$ExpandableRowChevron, {
                         isDisabled: isDisabled,
                         isExpanded: isExpanded
@@ -1068,38 +1120,38 @@ const $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $auVFN$forwa
 });
 const $0fcd5fb617970a1d$var$expandButton = function anonymous(props) {
     let rules = " ";
-    rules += ' z8dW5Qb13';
-    rules += ' y8dW5Qb13';
-    rules += ' B8dW5Qb13';
-    rules += ' A8dW5Qb13';
+    rules += ' z8dW5Qb131';
+    rules += ' y8dW5Qb131';
+    rules += ' B8dW5Qb131';
+    rules += ' A8dW5Qb131';
     if (props.isDisabled) {
-        rules += ' pp13';
-        rules += ' plc13';
-    } else rules += ' p40ub4c13';
-    rules += ' Fb13';
-    rules += ' Zw13';
-    rules += ' Id13';
-    rules += ' sd13';
-    rules += ' _wb13';
-    rules += ' _cb13';
-    rules += ' _Ca13';
-    rules += ' _Le13';
-    rules += ' ri13';
+        rules += ' pp131';
+        rules += ' plc131';
+    } else rules += ' p40ub4c131';
+    rules += ' Fb131';
+    rules += ' Zw131';
+    rules += ' Id131';
+    rules += ' sd131';
+    rules += ' _wb131';
+    rules += ' _cb131';
+    rules += ' _Ca131';
+    rules += ' _Le131';
+    rules += ' ri131';
     if (props.isExpanded) {
-        if (props.isRTL) rules += ' _Za13';
-        else rules += ' _Zb13';
+        if (props.isRTL) rules += ' _Za131';
+        else rules += ' _Zb131';
     }
-    rules += ' Td13';
-    rules += ' Qd13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
-    rules += ' g913';
-    rules += ' _je13';
-    rules += ' __ca13';
-    if (props.isHidden) rules += ' _6b13';
+    rules += ' Td131';
+    rules += ' Qd131';
+    rules += ' Sd131';
+    rules += ' Rd131';
+    rules += ' Yd131';
+    rules += ' Xb131';
+    rules += ' _2b131';
+    rules += ' g9131';
+    rules += ' _je131';
+    rules += ' __ca131';
+    if (props.isHidden) rules += ' _6b131';
     return rules;
 };
 function $0fcd5fb617970a1d$var$ExpandableRowChevron(props1) {
@@ -1120,20 +1172,20 @@ function $0fcd5fb617970a1d$var$ExpandableRowChevron(props1) {
             className: function anonymous(props) {
                 let rules = " ";
                 if (props.direction === "rtl") {
-                    rules += ' -Z4Pn4c-a13';
-                    rules += ' __Ha13';
+                    rules += ' -Z4Pn4c-a131';
+                    rules += ' __Ha131';
                 } else if (props.direction === "ltr") {
-                    rules += ' -Z4Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -Z4Pn4c-b131';
+                    rules += ' __Ha131';
                 }
                 if (props.direction === "rtl") {
-                    rules += ' -_04Pn4c-a13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-a131';
+                    rules += ' __Ha131';
                 } else if (props.direction === "ltr") {
-                    rules += ' -_04Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-b131';
+                    rules += ' __Ha131';
                 }
-                rules += ' -_8sjo0b-t5ZbAob13';
+                rules += ' -_8sjo0b-t5ZbAob131';
                 return rules;
             }({
                 direction: direction
@@ -1143,59 +1195,59 @@ function $0fcd5fb617970a1d$var$ExpandableRowChevron(props1) {
 }
 const $0fcd5fb617970a1d$var$editableCell = function anonymous(props) {
     let rules = " ";
-    rules += ' iq13';
-    rules += ' ila13';
-    rules += ' hXMFGYc13';
-    rules += ' _kJ8iPYd13';
-    rules += ' ma13';
-    if (props.isDivider) rules += ' lb13';
-    else rules += ' la13';
-    if (props.isDivider) rules += ' _jf13';
-    else rules += ' _je13';
-    rules += ' _Pc13';
-    if (props.isSaving) {
-        if (props.isPressed) rules += ' pt13';
-        else if (props.isFocusVisible) rules += ' pt13';
-        else if (props.isHovered) rules += ' pt13';
-        else rules += ' pv13';
+    rules += ' _Pc131';
+    if (props.isDisabled) {
+        rules += ' pp131';
+        rules += ' plc131';
     } else {
-        if (props.isPressed) rules += ' po13';
-        else if (props.isFocusVisible) rules += ' po13';
-        else if (props.isHovered) rules += ' po13';
-        else rules += ' pt13';
+        if (props.isSaving) {
+            if (props.isPressed) rules += ' pt131';
+            else if (props.isFocusVisible) rules += ' pt131';
+            else if (props.isHovered) rules += ' pt131';
+            else rules += ' pv131';
+        } else {
+            if (props.isPressed) rules += ' po131';
+            else if (props.isFocusVisible) rules += ' po131';
+            else if (props.isHovered) rules += ' po131';
+            else rules += ' pt131';
+        }
+        rules += ' plb131';
     }
-    rules += ' _Le13';
-    if (props.isTreeColumn) rules += ' S7cyhDe13';
-    else rules += ' Sf13';
-    rules += ' Rf13';
-    rules += ' -lPUMEc-Zu13';
-    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv13';
-    else rules += ' -WWxPD-Zu13';
-    rules += ' Tu7Fubd13';
-    rules += ' Qu7Fubd13';
-    rules += ' _oa13';
-    rules += ' FBJsHLe13';
-    rules += ' Za13';
+    rules += ' _Le131';
+    if (props.isTreeColumn) rules += ' S7cyhDe131';
+    else rules += ' Sf131';
+    rules += ' Rf131';
+    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv131';
+    else rules += ' -WWxPD-Zu131';
+    rules += ' Tu7Fubd131';
+    rules += ' Qu7Fubd131';
+    rules += ' _oa131';
+    rules += ' FBJsHLe131';
+    rules += ' Za131';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     }
-    rules += ' eb13';
-    rules += ' sd13';
-    rules += ' -_k_-_ka13';
-    rules += ' -h_-hb13';
+    rules += ' eb131';
+    rules += ' sd131';
+    if (props.isDivider) rules += ' _jf131';
+    else rules += ' _je131';
+    if (props.isDivider) rules += ' lb131';
+    else rules += ' la131';
+    rules += ' iq131';
+    rules += ' ila131';
     return rules;
 };
 let $0fcd5fb617970a1d$var$editPopover = function anonymous(props, overrides) {
@@ -1206,33 +1258,45 @@ let $0fcd5fb617970a1d$var$editPopover = function anonymous(props, overrides) {
         if (p[1] === "N") minWidth = true;
         rules += p[0];
     }
-    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa13';
-    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb13';
-    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc13';
-    rules += ' _pK8eoyd13';
-    rules += ' -Ovbhqd-g_g13';
-    rules += ' gEzkoQe13';
-    rules += ' kb13';
-    rules += ' jb13';
-    rules += ' _nLeasBb13';
-    rules += ' _jf13';
-    rules += ' _kb13';
-    rules += ' hb13';
-    rules += ' mb13';
-    rules += ' lb13';
-    rules += ' ir13';
-    rules += ' ila13';
-    rules += ' _ob13';
-    rules += ' _Bb13';
-    if (props.isExiting) rules += ' _Ob13';
-    rules += ' _Le13';
-    if (!minWidth) rules += ' NuHSBze13';
-    rules += ' Tt13';
-    rules += ' Qt13';
-    rules += ' St13';
-    rules += ' Rt13';
-    rules += ' sd13';
-    rules += ' eb13';
+    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa131';
+    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb131';
+    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc131';
+    rules += ' _pK8eoyd131';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU131';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c131';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -NvXmrd-_ZN8Gi4c131';
+        rules += ' -NvXmrd-D1v0V_ZLmU131';
+    }
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c131';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU131';
+    else if (props.colorScheme === "light dark") {
+        rules += ' -j9blY-_ZLmU131';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c131';
+    }
+    rules += ' -Ovbhqd-g_g131';
+    rules += ' gEzkoQe131';
+    rules += ' kb131';
+    rules += ' jb131';
+    rules += ' _nLeasBb131';
+    rules += ' _jf131';
+    rules += ' _kb131';
+    rules += ' hb131';
+    rules += ' mb131';
+    rules += ' lb131';
+    rules += ' ir131';
+    rules += ' ila131';
+    rules += ' _ob131';
+    rules += ' _Bb131';
+    if (props.isExiting) rules += ' _Ob131';
+    rules += ' _Le131';
+    if (!minWidth) rules += ' NuHSBze131';
+    rules += ' Tt131';
+    rules += ' Qt131';
+    rules += ' St131';
+    rules += ' Rt131';
+    rules += ' sd131';
+    rules += ' eb131';
     return rules;
 };
 const $0fcd5fb617970a1d$export$d27c35c47f085992 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function EditableCell(props, ref) {
@@ -1313,7 +1377,9 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
     (0, $auVFN$useEffect)(()=>{
         if (isOpen) {
             let activeElement = (0, $auVFN$getActiveElement)((0, $auVFN$getOwnerDocument)(formRef.current));
-            if (activeElement && (0, $auVFN$nodeContains)(formRef.current, activeElement) && (activeElement instanceof HTMLInputElement && !$0fcd5fb617970a1d$var$nonTextInputTypes.has(activeElement.type) || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === 'function') activeElement.select();
+            if (activeElement && (0, $auVFN$nodeContains)(formRef.current, activeElement) && // not going to handle contenteditable https://stackoverflow.com/questions/6139107/programmatically-select-text-in-a-contenteditable-html-element
+            // seems like an edge case anyways
+            (activeElement instanceof HTMLInputElement && !$0fcd5fb617970a1d$var$nonTextInputTypes.has(activeElement.type) || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === 'function') activeElement.select();
         }
     }, [
         isOpen
@@ -1367,11 +1433,11 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
                             excludeFromTabOrder: true,
                             styles: function anonymous(props) {
                                 let rules = " ";
-                                if (props.isForcedVisible) rules += ' _6c13';
-                                else rules += ' _6b13';
-                                rules += ' _6JGzCfcc13';
-                                rules += ' _6hcIDbbc13';
-                                rules += ' _6sc13';
+                                if (props.isForcedVisible) rules += ' _6c131';
+                                else rules += ' _6b131';
+                                rules += ' _6JGzCfcc131';
+                                rules += ' _6hcIDbbc131';
+                                rules += ' _6sc131';
                                 return rules;
                             }({
                                 isForcedVisible: isOpen || !!isSaving
@@ -1432,14 +1498,14 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
                                     onSubmit?.(e);
                                     setIsOpen(false);
                                 },
-                                className: " Za13 sd13 ed13 Ul13 ql13",
+                                className: " Za131 sd131 ed131 Ul131 ql131",
                                 style: {
                                     '--input-width': `calc(${triggerWidth}px - 32px)`
                                 },
                                 children: [
                                     renderEditing(),
                                     /*#__PURE__*/ (0, $auVFN$jsxs)("div", {
-                                        className: " sd13 _tc13 ea13 _va13 _ua13",
+                                        className: " sd131 _tc131 ea131 _va131 _ua131",
                                         children: [
                                             /*#__PURE__*/ (0, $auVFN$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
                                                 isQuiet: true,
@@ -1473,12 +1539,12 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
                                     onSubmit?.(e);
                                     setIsOpen(false);
                                 },
-                                className: " Za13 sd13 _ta13 ed13 Ul13 ql13",
+                                className: " Za131 sd131 _ta131 ed131 Ul131 ql131",
                                 children: [
                                     renderEditing(),
                                     /*#__PURE__*/ (0, $auVFN$jsxs)((0, $472eaa9a9b344b9a$export$69b1032f2ecdf404), {
                                         align: "end",
-                                        styles: " _dd13",
+                                        styles: " _dd131",
                                         children: [
                                             /*#__PURE__*/ (0, $auVFN$jsx)((0, $067ea9f64ccd4e8e$export$353f5b6fc5456de1), {
                                                 onPress: cancel,
@@ -1505,12 +1571,32 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
 // Use color-mix instead of transparency so sticky cells work correctly.
 const $0fcd5fb617970a1d$var$selectedBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]";
 const $0fcd5fb617970a1d$var$selectedActiveBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]";
+// TODO: I made these up, not sure if there is a great way to go from v3 values to
+// S2. Overall the root drop color should be lighter than the row color during a root drop
+// which should be lighter than a selected row during root drop. Those root drop row colors should also be darker
+// than if the row is the drop target itself
+const $0fcd5fb617970a1d$var$rootDropRowBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 17%)]";
+const $0fcd5fb617970a1d$var$rootDropSelectedRowBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 28%)]";
+const $0fcd5fb617970a1d$var$rowDropBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%)]";
+const $0fcd5fb617970a1d$var$rowDropSelectedBackground = "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%)]";
+const $0fcd5fb617970a1d$var$rootRowDropStyles = {
+    default: $0fcd5fb617970a1d$var$rootDropRowBackground,
+    isSelected: $0fcd5fb617970a1d$var$rootDropSelectedRowBackground,
+    forcedColors: 'Background'
+};
+const $0fcd5fb617970a1d$var$rowDropStyles = {
+    default: $0fcd5fb617970a1d$var$rowDropBackground,
+    isSelected: $0fcd5fb617970a1d$var$rowDropSelectedBackground,
+    forcedColors: 'Background'
+};
 const $0fcd5fb617970a1d$var$rowBackgroundColor = {
     default: {
         default: 'gray-25',
         isQuiet: '--s2-container-bg'
     },
-    isFocusVisibleWithin: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+    forcedColors: {
+        default: 'Background'
+    },
     isHovered: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
     isPressed: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
     isSelected: {
@@ -1519,9 +1605,23 @@ const $0fcd5fb617970a1d$var$rowBackgroundColor = {
         isHovered: $0fcd5fb617970a1d$var$selectedActiveBackground,
         isPressed: $0fcd5fb617970a1d$var$selectedActiveBackground // table-selected-row-background-color, opacity /15
     },
-    forcedColors: {
-        default: 'Background'
-    }
+    selectionStyle: {
+        highlight: {
+            default: 'gray-25',
+            isQuiet: '--s2-container-bg',
+            isHovered: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+            isPressed: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+            isSelected: {
+                default: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%)]",
+                isHovered: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%)]",
+                isPressed: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%)]",
+                forcedColors: 'Highlight'
+            }
+        }
+    },
+    isInFooter: 'gray-200',
+    ':is([role="grid"][data-drop-target] *)': $0fcd5fb617970a1d$var$rootRowDropStyles,
+    isDropTarget: $0fcd5fb617970a1d$var$rowDropStyles
 };
 const $0fcd5fb617970a1d$var$rowTextColor = {
     default: {
@@ -1536,60 +1636,150 @@ const $0fcd5fb617970a1d$var$rowTextColor = {
         isFocusVisible: "neutral:focused",
         isPressed: "neutral:pressed"
     },
+    forcedColors: {
+        default: 'ButtonText',
+        isSelected: {
+            selectionStyle: {
+                highlight: 'HighlightText'
+            }
+        }
+    },
     isDisabled: {
         default: 'disabled',
         forcedColors: 'GrayText'
     },
-    forcedColors: 'ButtonText'
+    isInFooter: 'neutral'
 };
 const $0fcd5fb617970a1d$var$row = function anonymous(props) {
     let rules = " ";
-    rules += ' Fb13';
-    rules += ' _Pc13';
-    rules += ' _oa13';
-    rules += ' gs9yXOb13';
-    if (props.isSelected) {
-        if (props.isPressed) rules += ' -qH4xad-gRfT7e13';
-        else if (props.isHovered) rules += ' -qH4xad-gRfT7e13';
-        else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gRfT7e13';
-        else rules += ' -qH4xad-gj1B7i13';
-    } else if (props.isPressed) rules += ' -qH4xad-gRfT7e13';
-    else if (props.isHovered) rules += ' -qH4xad-gj1B7i13';
-    else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gj1B7i13';
-    else if (props.isQuiet) rules += ' -qH4xad-gEzkoQe13';
-    else rules += ' -qH4xad-gX13';
-    rules += ' -qH4xad-lga13';
-    if (props.isDisabled) rules += ' -Fadoyc-pp13';
-    else if (props.isSelected) {
-        if (props.isPressed) rules += ' -Fadoyc-po13';
-        else if (props.isFocusVisible) rules += ' -Fadoyc-po13';
-        else if (props.isHovered) rules += ' -Fadoyc-po13';
-        else rules += ' -Fadoyc-pt13';
+    rules += ' Fb131';
+    rules += ' _Pc131';
+    rules += ' _oa131';
+    rules += ' gs9yXOb131';
+    if (props.isDropTarget) {
+        if (props.isSelected) rules += ' -qH4xad-gaZwDBe131';
+        else rules += ' -qH4xad-glzvDBe131';
+        rules += ' -qH4xad-lga131';
+    } else {
+        if (props.isInFooter) rules += ' -qH4xad-gF131';
+        else if (props.selectionStyle === "highlight") {
+            if (props.isSelected) {
+                if (props.isPressed) rules += ' -qH4xad-gaZwDBe131';
+                else if (props.isHovered) rules += ' -qH4xad-gaZwDBe131';
+                else rules += ' -qH4xad-glzvDBe131';
+                rules += ' -qH4xad-lge131';
+            } else if (props.isPressed) rules += ' -qH4xad-gRfT7e131';
+            else if (props.isHovered) rules += ' -qH4xad-gj1B7i131';
+            else if (props.isQuiet) rules += ' -qH4xad-gEzkoQe131';
+            else rules += ' -qH4xad-gX131';
+        } else if (props.isSelected) {
+            if (props.isPressed) rules += ' -qH4xad-gRfT7e131';
+            else if (props.isHovered) rules += ' -qH4xad-gRfT7e131';
+            else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gRfT7e131';
+            else rules += ' -qH4xad-gj1B7i131';
+        } else if (props.isPressed) rules += ' -qH4xad-gRfT7e131';
+        else if (props.isHovered) rules += ' -qH4xad-gj1B7i131';
+        else {
+            if (props.isQuiet) rules += ' -qH4xad-gEzkoQe131';
+            else rules += ' -qH4xad-gX131';
+            rules += ' -qH4xad-lga131';
+        }
+        if (props.isSelected) rules += ' -qH4xad-RQaNpdgubHDBe131';
+        else rules += ' -qH4xad-RQaNpdgiyxDBe131';
+        rules += ' -qH4xad-RQaNpdlga131';
+    }
+    if (props.isInFooter) rules += ' -Fadoyc-pt131';
+    else if (props.isDisabled) {
+        rules += ' -Fadoyc-pp131';
+        rules += ' -Fadoyc-lpc131';
+    } else {
+        if (props.isSelected) {
+            if (props.isPressed) rules += ' -Fadoyc-po131';
+            else if (props.isFocusVisible) rules += ' -Fadoyc-po131';
+            else if (props.isHovered) rules += ' -Fadoyc-po131';
+            else rules += ' -Fadoyc-pt131';
+        } else {
+            if (props.isPressed) rules += ' -Fadoyc-pt131';
+            else if (props.isFocusVisible) rules += ' -Fadoyc-pt131';
+            else if (props.isHovered) rules += ' -Fadoyc-pt131';
+            else rules += ' -Fadoyc-pv131';
+        }
+        if (props.isSelected) {
+            if (props.selectionStyle === "highlight") rules += ' -Fadoyc-lpe131';
+        } else rules += ' -Fadoyc-lpb131';
+    }
+    rules += ' _Le131';
+    if (props.selectionStyle === "highlight") {
+        if (props.isNextSelected) rules += ' -mtnI9b-kd131';
+        else if (props.isSelected) rules += ' -mtnI9b-ksmOfn131';
+        else rules += ' -mtnI9b-kd131';
+    } else rules += ' -mtnI9b-kd131';
+    if (props.selectionStyle === "highlight") {
+        if (props.isPrevSelected) rules += ' -GkFu3c-od131';
+        else if (props.isSelected) rules += ' -GkFu3c-osmOfn131';
+        else rules += ' -GkFu3c-od131';
+    } else rules += ' -GkFu3c-od131';
+    rules += ' kM1g6bb131';
+    rules += ' jM1g6bb131';
+    rules += ' ow2GT5b131';
+    rules += ' nw2GT5b131';
+    if (props.isPrevSelected) rules += ' -K0jSNe-ZDWMfn131';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' -K0jSNe-Ze131';
+        else if (props.selectionStyle === "checkbox") rules += ' -K0jSNe-ZDWMfn131';
+    }
+    if (props.isNextSelected) rules += ' -ACwbMe-ZDWMfn131';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' -ACwbMe-Ze131';
+        else if (props.selectionStyle === "checkbox") rules += ' -ACwbMe-ZDWMfn131';
+    }
+    if (props.selectionStyle === "highlight") rules += ' -YiueL-Ze131';
+    else if (props.selectionStyle === "checkbox") rules += ' -YiueL-ZDWMfn131';
+    rules += ' _ka131';
+    if (props.selectionStyle === "checkbox") rules += ' hb131';
+    else if (props.selectionStyle === "highlight") rules += ' ha131';
+    rules += ' ma131';
+    rules += ' la131';
+    rules += ' _jf131';
+    if (props.selectionStyle === "checkbox") {
+        rules += ' iq131';
+        rules += ' ila131';
+    } else if (props.selectionStyle === "highlight") rules += ' iA131';
+    rules += ' -JW3yBe-iq131';
+    if (props.isSelected) rules += ' -JW3yBe-lid131';
+    else rules += ' -JW3yBe-lia131';
+    rules += ' -wFhyBe-iw131';
+    rules += ' -wFhyBe-lid131';
+    if (props.isSelected) rules += ' -EH8uVb-iuZovEb131';
+    else rules += ' -EH8uVb-iA131';
+    if (props.selectionStyle === "highlight") {
+        if (props.isNextSelected) rules += ' _nCOSyG131';
+        else rules += ' _nAMrXze131';
+    }
+    if (props.isFocusVisible) rules += ' _nlGDXwhb131';
+    if (props.isInFooter) {
+        rules += ' xd131';
+        rules += ' _xa131';
+        rules += ' xX0cczbc131';
+        rules += ' _xX0cczba131';
     } else {
-        if (props.isPressed) rules += ' -Fadoyc-pt13';
-        else if (props.isFocusVisible) rules += ' -Fadoyc-pt13';
-        else if (props.isHovered) rules += ' -Fadoyc-pt13';
-        else rules += ' -Fadoyc-pv13';
+        rules += ' xb131';
+        rules += ' _xa131';
     }
-    rules += ' -Fadoyc-lpb13';
-    rules += ' -_34HbNb-Oh13';
-    rules += ' -_34HbNb-lOc13';
-    rules += ' _Le13';
-    rules += ' _ka13';
-    rules += ' hb13';
-    rules += ' ma13';
-    rules += ' la13';
-    rules += ' _jf13';
-    rules += ' iq13';
-    rules += ' ila13';
-    rules += ' _yb13';
+    rules += ' _Bb131';
+    rules += ' _yb131';
     return rules;
 };
-const $0fcd5fb617970a1d$var$selectionCheckbox = " _6c13 _6Lcn87b13";
+// Sticky cells (the drag cell, and the checkbox cell when present) get an inline z-index=2 applied by the virtualizer's layout
+// To ensure that the highlight selection border is painted above the stick cells, set z-index to 3
+const $0fcd5fb617970a1d$var$highlightSelectionBorder = "XvgEBe";
+const $0fcd5fb617970a1d$var$focusIndicator = "_7GNHP";
+const $0fcd5fb617970a1d$var$selectionCheckbox = " _6c131 _6Lcn87b131";
 const $0fcd5fb617970a1d$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function Row({ id: id, columns: columns, children: children, dependencies: dependencies = [], ...otherProps }, ref) {
-    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $auVFN$useTableOptions)();
-    let tableVisualOptions = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext);
+    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode, allowsDragging: allowsDragging } = (0, $auVFN$useTableOptions)();
+    let { selectionStyle: selectionStyle, ...tableVisualOptions } = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$InternalTableContext);
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
+    let isInFooter = (0, $auVFN$useContext)($0fcd5fb617970a1d$var$FooterContext);
     return /*#__PURE__*/ (0, $auVFN$jsxs)((0, $auVFN$Row), {
         // @ts-ignore
         ref: domRef,
@@ -1598,13 +1788,30 @@ const $0fcd5fb617970a1d$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $auVFN$forwa
             ...dependencies,
             columns
         ],
+        isDisabled: isInFooter,
+        disabledBehavior: isInFooter ? 'selection' : undefined,
         className: (renderProps)=>$0fcd5fb617970a1d$var$row({
                 ...renderProps,
-                ...tableVisualOptions
-            }) + (renderProps.isFocusVisible ? " hFh6wc" : ''),
+                ...tableVisualOptions,
+                selectionStyle: selectionStyle,
+                isInFooter: isInFooter,
+                isNextSelected: $0fcd5fb617970a1d$export$801a7cfaf3e363f5(renderProps.id, renderProps.state),
+                isPrevSelected: $0fcd5fb617970a1d$export$aebccab86af12e73(renderProps.id, renderProps.state)
+            }) + (renderProps.isFocusVisible || renderProps.isDropTarget ? ' ' + $0fcd5fb617970a1d$var$focusIndicator : '') + (selectionStyle === 'highlight' ? ' ' + $0fcd5fb617970a1d$var$highlightSelectionBorder : ''),
         ...otherProps,
         children: [
-            selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$export$f6f0c3fe4ec306ea, {
+            allowsDragging && /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$Cell), {
+                // @ts-ignore
+                isSticky: true,
+                className: $0fcd5fb617970a1d$var$dragCellStyle,
+                children: ({ isFocusVisibleWithinRow: isFocusVisibleWithinRow })=>!(otherProps.isDisabled && tableVisualOptions.disabledBehavior === 'all') && /*#__PURE__*/ (0, $auVFN$jsx)((0, $3c1ab1fd8f31a3e2$export$4c99a519d851f90c), {
+                        isFocusVisibleWithin: isFocusVisibleWithinRow
+                    })
+            }),
+            selectionMode !== 'none' && selectionBehavior === 'toggle' && selectionStyle === 'checkbox' && // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
+            // The `spread` otherProps must be after className in Cell.
+            // @ts-ignore
+            /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$export$f6f0c3fe4ec306ea, {
                 isSticky: true,
                 className: $0fcd5fb617970a1d$var$checkboxCellStyle,
                 children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $9b405e0f8095dce0$export$48513f6b9f8ce62d), {
@@ -1623,7 +1830,28 @@ const $0fcd5fb617970a1d$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $auVFN$forwa
         ]
     });
 });
+const $0fcd5fb617970a1d$var$FooterContext = /*#__PURE__*/ (0, $auVFN$createContext)(false);
+const $0fcd5fb617970a1d$export$1f116082bba1f9a8 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function TableFooter(props, ref) {
+    let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
+    return /*#__PURE__*/ (0, $auVFN$jsx)($0fcd5fb617970a1d$var$FooterContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ (0, $auVFN$jsx)((0, $auVFN$TableFooter), {
+            ...props,
+            ref: domRef
+        })
+    });
+});
+function $0fcd5fb617970a1d$export$801a7cfaf3e363f5(id, state) {
+    if (id == null || !state) return false;
+    let keyAfter = state.collection.getKeyAfter(id);
+    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+function $0fcd5fb617970a1d$export$aebccab86af12e73(id, state) {
+    if (id == null || !state) return false;
+    let keyBefore = state.collection.getKeyBefore(id);
+    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
 
 
-export {$0fcd5fb617970a1d$export$4e03bdf0174fd602 as S2TableLayout, $0fcd5fb617970a1d$export$93e4b0b2cc49b648 as TableContext, $0fcd5fb617970a1d$export$b3c27e869d856b7 as TableView, $0fcd5fb617970a1d$export$76ccd210b9029917 as TableBody, $0fcd5fb617970a1d$export$816b5d811295e6bc as Column, $0fcd5fb617970a1d$export$f850895b287ef28e as TableHeader, $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea as Cell, $0fcd5fb617970a1d$export$d27c35c47f085992 as EditableCell, $0fcd5fb617970a1d$export$b59bdbef9ce70de2 as Row};
+export {$0fcd5fb617970a1d$export$4e03bdf0174fd602 as S2TableLayout, $0fcd5fb617970a1d$export$93e4b0b2cc49b648 as TableContext, $0fcd5fb617970a1d$export$b3c27e869d856b7 as TableView, $0fcd5fb617970a1d$export$76ccd210b9029917 as TableBody, $0fcd5fb617970a1d$export$816b5d811295e6bc as Column, $0fcd5fb617970a1d$export$f850895b287ef28e as TableHeader, $0fcd5fb617970a1d$export$f6f0c3fe4ec306ea as Cell, $0fcd5fb617970a1d$export$d27c35c47f085992 as EditableCell, $0fcd5fb617970a1d$export$b59bdbef9ce70de2 as Row, $0fcd5fb617970a1d$export$801a7cfaf3e363f5 as isNextSelected, $0fcd5fb617970a1d$export$aebccab86af12e73 as isPrevSelected, $0fcd5fb617970a1d$export$1f116082bba1f9a8 as TableFooter};
 //# sourceMappingURL=TableView.mjs.map