@react-spectrum/s2 1.3.1 → 1.5.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 += ' Ma15';
+    if (!minWidth) rules += ' Na15';
+    rules += ' sd15';
+    rules += ' _Bb15';
+    rules += ' __ca15';
+    if (!position) rules += ' _Pc15';
+    rules += ' _Nb15';
+    rules += ' Pb15';
     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 += ' Za15';
+    rules += ' Fb15';
+    rules += ' _oa15';
+    rules += ' _4c15';
+    rules += ' Ma15';
+    rules += ' Na15';
+    rules += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' xb15';
+    rules += ' _xa15';
+    rules += ' _Na15';
+    rules += ' Pa15';
+    if (props.isDropTarget) rules += ' glzvDBe15';
+    else if (props.isQuiet) rules += ' g915';
+    else rules += ' gX15';
+    rules += ' gla15';
+    if (props.isDropTarget) rules += ' ix15';
+    else rules += ' iq15';
+    if (props.isDropTarget) rules += ' ild15';
+    else rules += ' ila15';
+    rules += ' _jf15';
+    if (props.isQuiet) rules += ' _ka15';
+    else rules += ' _kb15';
+    if (props.isQuiet) rules += ' ha15';
+    else rules += ' hb15';
+    if (props.isQuiet) rules += ' ma15';
+    else rules += ' mb15';
+    if (props.isQuiet) rules += ' la15';
+    else rules += ' lb15';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' _Mc15';
+    rules += ' _Kd15';
+    if (props.isQuiet) rules += ' od15';
+    else rules += ' of15';
+    if (props.isQuiet) rules += ' nd15';
+    else rules += ' nf15';
+    if (props.isQuiet) rules += ' kd15';
+    else rules += ' kf15';
+    if (props.isQuiet) rules += ' jd15';
+    else rules += ' jf15';
+    rules += ' _Um15';
+    if (props.isDragAndDrop) {
+        if (props.isCheckboxSelection) rules += ' _Tn15';
+        else rules += ' _Ti15';
+    } else if (props.isCheckboxSelection) rules += ' _Tk15';
+    rules += ' _yb15';
+    if (props.isCheckboxSelection) rules += ' -dBGRde-ZosIvTc15';
+    else rules += ' -dBGRde-ZwbbKhe15';
+    rules += ' -lPUMEc-Zu15';
     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 = " sd15 eb15 _Ca15 Za15 Fb15";
 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: " Fb15 Za15",
         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: " Fb15",
         ...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 += ' _Lf15';
+            else rules += ' _Le15';
+            rules += ' _Kb15';
+            rules += ' _Mc15';
+            rules += ' Oh15';
+            rules += ' Olc15';
+            rules += ' osmOfn15';
+            rules += ' nsmOfn15';
+            rules += ' ksmOfn15';
+            rules += ' jsmOfn15';
+            rules += ' _9d15';
+            rules += ' _Pa15';
+            rules += ' WEDXqxb15';
+            rules += ' _lr15';
+            rules += ' _Ar15';
+            rules += ' _zr15';
+            rules += ' _Ob15';
             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 += ' F40ub4c15';
+    rules += ' _oa15';
+    if (props.isPressed) rules += ' po15';
+    else if (props.isFocusVisible) rules += ' po15';
+    else if (props.isHovered) rules += ' po15';
+    else rules += ' pt15';
+    rules += ' plb15';
+    if (props.isMenu) rules += ' Sd15';
+    else rules += ' Sf15';
+    if (props.isMenu) rules += ' Rd15';
+    else rules += ' Rf15';
+    if (props.align === "end") rules += ' _Wb15';
+    else if (props.align === "center") rules += ' _Wa15';
+    else if (props.align === "start") rules += ' _Wd15';
+    rules += ' _Le15';
+    rules += ' _Pc15';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
-    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 += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' xd15';
+    rules += ' _xa15';
+    rules += ' xX0cczbc15';
+    rules += ' _xX0cczba15';
+    rules += ' sd15';
+    rules += ' iq15';
+    rules += ' ila15';
+    if (props.isQuiet) rules += ' _kb15';
+    else rules += ' _ka15';
+    rules += ' hb15';
+    rules += ' ma15';
+    if (props.isMenu) rules += ' lb15';
+    else rules += ' la15';
+    rules += ' _jf15';
+    rules += ' _yb15';
     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 += ' Na15';
+    rules += ' sd15';
+    rules += ' eb15';
+    rules += ' Za15';
+    if (props.align === "end") rules += ' _Cb15';
+    else if (props.align === "center") rules += ' _Ca15';
+    else if (props.align === "default") rules += ' _Cg15';
     return rules;
 };
 const $0fcd5fb617970a1d$var$sortIcon = function anonymous(props) {
     let rules = " ";
-    rules += ' ZXJkxGe13';
-    rules += ' FXJkxGe13';
-    rules += ' _va13';
+    rules += ' ZXJkxGe15';
+    rules += ' FXJkxGe15';
+    rules += ' _va15';
     if (props.isButton) {
-        rules += ' Ht13';
-        rules += ' Hsu13';
-    } else rules += ' Hv13';
-    rules += ' _5b13';
-    rules += ' -_8sjo0b-t5ZbAob13';
+        rules += ' Ht15';
+        rules += ' Hsu15';
+    } else rules += ' Hv15';
+    rules += ' _5b15';
+    rules += ' -_8sjo0b-t5ZbAob15';
     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 += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' _Kb15';
+    rules += ' _Mc15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' osmOfn15';
+    rules += ' nsmOfn15';
+    rules += ' ksmOfn15';
+    rules += ' jsmOfn15';
+    rules += ' _9d15';
+    rules += ' pt15';
+    rules += ' Za15';
+    rules += ' _Pc15';
+    rules += ' sd15';
+    rules += ' eb15';
+    if (props.align === "end") rules += ' _Cb15';
+    else if (props.align === "center") rules += ' _Ca15';
+    else if (props.align === "default") rules += ' _Cg15';
+    rules += ' Sf15';
+    rules += ' Rf15';
+    rules += ' g915';
+    rules += ' _je15';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
-    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 += ' uk15';
+    rules += ' ucJ9TBTb15';
+    rules += ' ud3Euai15';
+    rules += ' uea15';
+    rules += ' ugb15';
+    rules += ' uhd15';
+    rules += ' uje15';
+    rules += ' u2NhKxcl15';
+    rules += ' uic15';
+    rules += ' xd15';
+    rules += ' _xa15';
+    rules += ' xX0cczbc15';
+    rules += ' _xX0cczba15';
     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 += ' sb15';
+    else if (props.isResizing) rules += ' sb15';
+    else rules += ' sjBAxlb15';
+    rules += ' Zj15';
+    rules += ' Fb15';
+    rules += ' _Pa15';
+    rules += ' Wr15';
+    rules += ' _zdYbyj15';
+    if (props.resizableDirection === "both") rules += ' rk15';
+    else if (props.resizableDirection === "right") rules += ' rF15';
+    else if (props.resizableDirection === "left") rules += ' rj15';
+    else rules += ' rt15';
     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 += ' g5qAiPc15';
+    else if (props.isFocusVisible) rules += ' g5qAiPc15';
+    else rules += ' gE15';
+    if (props.isResizing) rules += ' gle15';
+    else if (props.isFocusVisible) rules += ' gle15';
+    else rules += ' gla15';
+    if (props.isResizing) rules += ' Fc15';
+    else rules += ' Fb15';
+    if (props.isResizing) rules += ' Zf15';
+    else rules += ' Ze15';
+    rules += ' _Pa15';
+    rules += ' _AWJpoB15';
     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 = " _Nc15 Pc15 _Yb15 _7c15 NXJkxGe15 _ua15 _vb15 _sd15";
+const $0fcd5fb617970a1d$var$chevronIcon = " _Sd15 It15 Isu15 NXJkxGe15 _va15 -_8sjo0b-t5ZbAob15";
+const $0fcd5fb617970a1d$var$nubbin = " _Pa15 Wr15 _AlhfIS15 ZXJkxGe15 FXJkxGe15 t5qAiPc15 tla15 -_8sjo0b-tw15 -_8sjo0b-lt8pvGJ15";
 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: " Nn15",
                         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 += ' Fb15';
+    rules += ' Za15';
+    rules += ' gL15';
+    rules += ' gl915';
+    rules += ' JLPOtrc15';
+    if (props.isHovered) rules += ' -xLp2wc-sb15';
+    else rules += ' -xLp2wc-sk15';
     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 += ' Sd15';
+    rules += ' SZbReHcf15';
+    rules += ' Rd15';
+    rules += ' R3n0jFt15';
+    rules += ' Td15';
+    rules += ' Qd15';
+    rules += ' Fb15';
+    rules += ' _oa15';
+    rules += ' _Le15';
+    rules += ' _Pc15';
+    rules += ' sd15';
+    rules += ' _cb15';
+    rules += ' eb15';
+    rules += ' _Cg15';
+    rules += ' iq15';
+    rules += ' ila15';
+    rules += ' ma15';
+    rules += ' la15';
+    if (props.isQuiet) rules += ' _kb15';
+    else rules += ' _ka15';
+    rules += ' hb15';
+    rules += ' _jf15';
+    rules += ' gL15';
+    rules += ' gl915';
     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 += ' _Pc15';
+    rules += ' pBvFblc15';
+    rules += ' _Le15';
+    if (props.isTreeColumn) rules += ' S7cyhDe15';
+    else rules += ' Sf15';
+    rules += ' Rf15';
+    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv15';
+    else rules += ' -WWxPD-Zu15';
+    if (props.density === "spacious") rules += ' Mk15';
+    else if (props.density === "compact") rules += ' Mi15';
+    else rules += ' Mh15';
+    rules += ' _oa15';
+    rules += ' Fb15';
+    rules += ' Za15';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
-    rules += ' eb13';
-    rules += ' sd13';
+    rules += ' eb15';
+    rules += ' sd15';
     return rules;
 };
+const $0fcd5fb617970a1d$var$divider = " sb15 _Pa15 ZceNfn15 Fb15 _zr15 gp95UEb15 _9c15";
 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 = " _Pc15 pBvFblc15 _Le15 Sf15 Rt15 gs9yXOb15 sd15 _cb15 eb15 _Cg15 FBJsHLe15 ha15";
+const $0fcd5fb617970a1d$var$dragCellStyle = " _Pc15 pBvFblc15 _Le15 Sp15 Rp15 gs9yXOb15 _cb15 FBJsHLe15 ha15";
 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 += ' _Ne15';
+    else rules += ' _Nc15';
+    if (props.isSticky) rules += ' Pe15';
+    else rules += ' Pc15';
+    if (props.isSticky) rules += ' _Ya15';
+    else rules += ' _Yb15';
+    if (props.overflowMode === "wrap") rules += ' _7b15';
+    else rules += ' _7c15';
+    if (props.align === "end") rules += ' _Wb15';
+    else if (props.align === "center") rules += ' _Wa15';
+    else if (props.align === "start") rules += ' _Wd15';
+    rules += ' Za15';
+    rules += ' ZZbReHce4mUs15';
+    rules += ' _Bb15';
+    if (props.isSticky) rules += ' Td15';
+    else rules += ' Tp15';
+    if (props.isSticky) rules += ' Qd15';
+    else rules += ' Qp15';
+    if (props.isSticky) rules += ' Sd15';
+    else rules += ' Sp15';
+    if (props.isSticky) rules += ' Rd15';
+    else rules += ' Rp15';
+    if (props.isSticky) rules += ' Jy15';
+    else rules += ' Jb15';
+    if (props.isSticky) rules += ' Gy15';
+    else rules += ' Gb15';
+    if (props.isSticky) rules += ' Iy15';
+    else rules += ' Ib15';
+    if (props.isSticky) rules += ' Hy15';
+    else rules += ' Hb15';
+    if (props.isSticky) rules += ' gs9yXOb15';
+    else rules += ' g915';
     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 += ' z8dW5Qb15';
+    rules += ' y8dW5Qb15';
+    rules += ' B8dW5Qb15';
+    rules += ' A8dW5Qb15';
     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 += ' pp15';
+        rules += ' plc15';
+    } else rules += ' p40ub4c15';
+    rules += ' Fb15';
+    rules += ' Zw15';
+    rules += ' Id15';
+    rules += ' sd15';
+    rules += ' _wb15';
+    rules += ' _cb15';
+    rules += ' _Ca15';
+    rules += ' _Le15';
+    rules += ' ri15';
     if (props.isExpanded) {
-        if (props.isRTL) rules += ' _Za13';
-        else rules += ' _Zb13';
+        if (props.isRTL) rules += ' _Za15';
+        else rules += ' _Zb15';
     }
-    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 += ' Td15';
+    rules += ' Qd15';
+    rules += ' Sd15';
+    rules += ' Rd15';
+    rules += ' Yd15';
+    rules += ' Xb15';
+    rules += ' _2b15';
+    rules += ' g915';
+    rules += ' _je15';
+    rules += ' __ca15';
+    if (props.isHidden) rules += ' _6b15';
     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-a15';
+                    rules += ' __Ha15';
                 } else if (props.direction === "ltr") {
-                    rules += ' -Z4Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -Z4Pn4c-b15';
+                    rules += ' __Ha15';
                 }
                 if (props.direction === "rtl") {
-                    rules += ' -_04Pn4c-a13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-a15';
+                    rules += ' __Ha15';
                 } else if (props.direction === "ltr") {
-                    rules += ' -_04Pn4c-b13';
-                    rules += ' __Ha13';
+                    rules += ' -_04Pn4c-b15';
+                    rules += ' __Ha15';
                 }
-                rules += ' -_8sjo0b-t5ZbAob13';
+                rules += ' -_8sjo0b-t5ZbAob15';
                 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 += ' _Pc15';
+    if (props.isDisabled) {
+        rules += ' pp15';
+        rules += ' plc15';
     } 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 += ' pt15';
+            else if (props.isFocusVisible) rules += ' pt15';
+            else if (props.isHovered) rules += ' pt15';
+            else rules += ' pv15';
+        } else {
+            if (props.isPressed) rules += ' po15';
+            else if (props.isFocusVisible) rules += ' po15';
+            else if (props.isHovered) rules += ' po15';
+            else rules += ' pt15';
+        }
+        rules += ' plb15';
     }
-    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 += ' _Le15';
+    if (props.isTreeColumn) rules += ' S7cyhDe15';
+    else rules += ' Sf15';
+    rules += ' Rf15';
+    if (props.isTreeColumnWithNoChildren) rules += ' -WWxPD-Zv15';
+    else rules += ' -WWxPD-Zu15';
+    rules += ' Tu7Fubd15';
+    rules += ' Qu7Fubd15';
+    rules += ' _oa15';
+    rules += ' FBJsHLe15';
+    rules += ' Za15';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
-    rules += ' eb13';
-    rules += ' sd13';
-    rules += ' -_k_-_ka13';
-    rules += ' -h_-hb13';
+    rules += ' eb15';
+    rules += ' sd15';
+    if (props.isDivider) rules += ' _jf15';
+    else rules += ' _je15';
+    if (props.isDivider) rules += ' lb15';
+    else rules += ' la15';
+    rules += ' iq15';
+    rules += ' ila15';
     return rules;
 };
 let $0fcd5fb617970a1d$var$editPopover = function anonymous(props, overrides) {
@@ -1206,45 +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';
-    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU13';
-    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c13';
+    if (props.colorScheme === "dark") rules += ' -ICUGx-_pa15';
+    else if (props.colorScheme === "light") rules += ' -ICUGx-_pb15';
+    else if (props.colorScheme === "light dark") rules += ' -ICUGx-_pc15';
+    rules += ' _pK8eoyd15';
+    if (props.colorScheme === "dark") rules += ' -NvXmrd-_ZLmU15';
+    else if (props.colorScheme === "light") rules += ' -NvXmrd-_ZN8Gi4c15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -NvXmrd-_ZN8Gi4c13';
-        rules += ' -NvXmrd-D1v0V_ZLmU13';
+        rules += ' -NvXmrd-_ZN8Gi4c15';
+        rules += ' -NvXmrd-D1v0V_ZLmU15';
     }
-    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c13';
-    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU13';
+    if (props.colorScheme === "dark") rules += ' -j9blY-_ZN8Gi4c15';
+    else if (props.colorScheme === "light") rules += ' -j9blY-_ZLmU15';
     else if (props.colorScheme === "light dark") {
-        rules += ' -j9blY-_ZLmU13';
-        rules += ' -j9blY-D1v0V_ZN8Gi4c13';
+        rules += ' -j9blY-_ZLmU15';
+        rules += ' -j9blY-D1v0V_ZN8Gi4c15';
     }
-    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';
+    rules += ' -Ovbhqd-g_g15';
+    rules += ' gEzkoQe15';
+    rules += ' kb15';
+    rules += ' jb15';
+    rules += ' _nLeasBb15';
+    rules += ' _jf15';
+    rules += ' _kb15';
+    rules += ' hb15';
+    rules += ' mb15';
+    rules += ' lb15';
+    rules += ' ir15';
+    rules += ' ila15';
+    rules += ' _ob15';
+    rules += ' _Bb15';
+    if (props.isExiting) rules += ' _Ob15';
+    rules += ' _Le15';
+    if (!minWidth) rules += ' NuHSBze15';
+    rules += ' Tt15';
+    rules += ' Qt15';
+    rules += ' St15';
+    rules += ' Rt15';
+    rules += ' sd15';
+    rules += ' eb15';
     return rules;
 };
 const $0fcd5fb617970a1d$export$d27c35c47f085992 = /*#__PURE__*/ (0, $auVFN$forwardRef)(function EditableCell(props, ref) {
@@ -1325,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
@@ -1379,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 += ' _6c15';
+                                else rules += ' _6b15';
+                                rules += ' _6JGzCfcc15';
+                                rules += ' _6hcIDbbc15';
+                                rules += ' _6sc15';
                                 return rules;
                             }({
                                 isForcedVisible: isOpen || !!isSaving
@@ -1444,14 +1498,14 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
                                     onSubmit?.(e);
                                     setIsOpen(false);
                                 },
-                                className: " Za13 sd13 ed13 Ul13 ql13",
+                                className: " Za15 sd15 ed15 Ul15 ql15",
                                 style: {
                                     '--input-width': `calc(${triggerWidth}px - 32px)`
                                 },
                                 children: [
                                     renderEditing(),
                                     /*#__PURE__*/ (0, $auVFN$jsxs)("div", {
-                                        className: " sd13 _tc13 ea13 _va13 _ua13",
+                                        className: " sd15 _tc15 ea15 _va15 _ua15",
                                         children: [
                                             /*#__PURE__*/ (0, $auVFN$jsx)((0, $da878a05ab4a403e$export$cfc7921d29ef7b80), {
                                                 isQuiet: true,
@@ -1485,12 +1539,12 @@ function $0fcd5fb617970a1d$var$EditableCellInner(props1) {
                                     onSubmit?.(e);
                                     setIsOpen(false);
                                 },
-                                className: " Za13 sd13 _ta13 ed13 Ul13 ql13",
+                                className: " Za15 sd15 _ta15 ed15 Ul15 ql15",
                                 children: [
                                     renderEditing(),
                                     /*#__PURE__*/ (0, $auVFN$jsxs)((0, $472eaa9a9b344b9a$export$69b1032f2ecdf404), {
                                         align: "end",
-                                        styles: " _dd13",
+                                        styles: " _dd15",
                                         children: [
                                             /*#__PURE__*/ (0, $auVFN$jsx)((0, $067ea9f64ccd4e8e$export$353f5b6fc5456de1), {
                                                 onPress: cancel,
@@ -1517,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: {
@@ -1531,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: {
@@ -1548,60 +1636,162 @@ 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 += ' Fb15';
+    rules += ' _Pc15';
+    rules += ' _oa15';
+    rules += ' gs9yXOb15';
+    if (props.isDropTarget) {
+        if (props.isSelected) rules += ' -qH4xad-gaZwDBe15';
+        else rules += ' -qH4xad-glzvDBe15';
+        rules += ' -qH4xad-lga15';
+    } else {
+        if (props.isInFooter) rules += ' -qH4xad-gF15';
+        else if (props.selectionStyle === "highlight") {
+            if (props.isSelected) {
+                if (props.isPressed) rules += ' -qH4xad-gaZwDBe15';
+                else if (props.isHovered) rules += ' -qH4xad-gaZwDBe15';
+                else rules += ' -qH4xad-glzvDBe15';
+                rules += ' -qH4xad-lge15';
+            } else if (props.isPressed) rules += ' -qH4xad-gRfT7e15';
+            else if (props.isHovered) rules += ' -qH4xad-gj1B7i15';
+            else if (props.isQuiet) rules += ' -qH4xad-gEzkoQe15';
+            else rules += ' -qH4xad-gX15';
+        } else if (props.isSelected) {
+            if (props.isPressed) rules += ' -qH4xad-gRfT7e15';
+            else if (props.isHovered) rules += ' -qH4xad-gRfT7e15';
+            else if (props.isFocusVisibleWithin) rules += ' -qH4xad-gRfT7e15';
+            else rules += ' -qH4xad-gj1B7i15';
+        } else if (props.isPressed) rules += ' -qH4xad-gRfT7e15';
+        else if (props.isHovered) rules += ' -qH4xad-gj1B7i15';
+        else {
+            if (props.isQuiet) rules += ' -qH4xad-gEzkoQe15';
+            else rules += ' -qH4xad-gX15';
+            rules += ' -qH4xad-lga15';
+        }
+        if (props.isSelected) rules += ' -qH4xad-RQaNpdgubHDBe15';
+        else rules += ' -qH4xad-RQaNpdgiyxDBe15';
+        rules += ' -qH4xad-RQaNpdlga15';
+    }
+    if (props.isInFooter) rules += ' -Fadoyc-pt15';
+    else if (props.isDisabled) {
+        rules += ' -Fadoyc-pp15';
+        rules += ' -Fadoyc-lpc15';
+    } else {
+        if (props.isSelected) {
+            if (props.isPressed) rules += ' -Fadoyc-po15';
+            else if (props.isFocusVisible) rules += ' -Fadoyc-po15';
+            else if (props.isHovered) rules += ' -Fadoyc-po15';
+            else rules += ' -Fadoyc-pt15';
+        } else {
+            if (props.isPressed) rules += ' -Fadoyc-pt15';
+            else if (props.isFocusVisible) rules += ' -Fadoyc-pt15';
+            else if (props.isHovered) rules += ' -Fadoyc-pt15';
+            else rules += ' -Fadoyc-pv15';
+        }
+        if (props.isSelected) {
+            if (props.selectionStyle === "highlight") rules += ' -Fadoyc-lpe15';
+        } else rules += ' -Fadoyc-lpb15';
+    }
+    rules += ' _Le15';
+    if (props.selectionStyle === "highlight") {
+        if (props.isNextSelected) rules += ' -mtnI9b-kd15';
+        else if (props.isSelected) rules += ' -mtnI9b-ksmOfn15';
+        else rules += ' -mtnI9b-kd15';
+    } else rules += ' -mtnI9b-kd15';
+    if (props.selectionStyle === "highlight") {
+        if (props.isPrevSelected) rules += ' -GkFu3c-od15';
+        else if (props.isSelected) rules += ' -GkFu3c-osmOfn15';
+        else rules += ' -GkFu3c-od15';
+    } else rules += ' -GkFu3c-od15';
+    rules += ' kM1g6bb15';
+    rules += ' jM1g6bb15';
+    rules += ' ow2GT5b15';
+    rules += ' nw2GT5b15';
+    if (props.isPrevSelected) rules += ' -K0jSNe-ZDWMfn15';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' -K0jSNe-Ze15';
+        else if (props.selectionStyle === "checkbox") rules += ' -K0jSNe-ZDWMfn15';
+    }
+    if (props.isNextSelected) rules += ' -ACwbMe-ZDWMfn15';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' -ACwbMe-Ze15';
+        else if (props.selectionStyle === "checkbox") rules += ' -ACwbMe-ZDWMfn15';
+    }
+    if (props.selectionStyle === "highlight") rules += ' -YiueL-Ze15';
+    else if (props.selectionStyle === "checkbox") rules += ' -YiueL-ZDWMfn15';
+    rules += ' _ka15';
+    rules += ' hb15';
+    rules += ' ma15';
+    rules += ' la15';
+    rules += ' _jf15';
+    if (props.selectionStyle === "checkbox") {
+        rules += ' iq15';
+        rules += ' ila15';
+    } else if (props.selectionStyle === "highlight") {
+        if (props.isNextSelected) rules += ' iA15';
+        else if (props.isSelected) rules += ' iA15';
+        else rules += ' iq15';
+    }
+    rules += ' -JW3yBe-iq15';
+    if (props.isSelected) rules += ' -JW3yBe-lid15';
+    else rules += ' -JW3yBe-lia15';
+    rules += ' -wFhyBe-iw15';
+    rules += ' -wFhyBe-lid15';
+    if (props.isSelected) rules += ' -EH8uVb-iuZovEb15';
+    else rules += ' -EH8uVb-iA15';
+    rules += ' -Ov0MLc-Oh15';
+    rules += ' -Ov0MLc-lOc15';
+    if (props.isInFooter) {
+        rules += ' xd15';
+        rules += ' _xa15';
+        rules += ' xX0cczbc15';
+        rules += ' _xX0cczba15';
     } 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 += ' xb15';
+        rules += ' _xa15';
+    }
+    rules += ' _Bb15';
+    rules += ' _yb15';
+    if (props.isFirstItem) rules += ' -eTOhNb-Wr15';
+    else rules += ' -eTOhNb-WLPOtrc15';
+    if (props.isFirstItem) rules += ' -Wasu7d-Wr15';
+    else if (props.isPrevSelected) rules += ' -Wasu7d-Wr15';
+    else if (props.isSelected) rules += ' -Wasu7d-WLPOtrc15';
+    else rules += ' -Wasu7d-Wr15';
+    rules += ' -Wasu7d-lWr15';
+    if (props.selectionStyle === "highlight") rules += ' -t5oMwe-_lLPOtrc15';
+    else if (props.selectionStyle === "checkbox") {
+        if (props.isNextSelected) rules += ' -t5oMwe-_lr15';
+        else rules += ' -t5oMwe-_lLPOtrc15';
     }
-    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';
     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 sticky cells, set z-index to 3
+const $0fcd5fb617970a1d$var$highlightSelectionBorder = "AVAmN";
+const $0fcd5fb617970a1d$var$focusIndicator = "yb5Ryc";
+const $0fcd5fb617970a1d$var$selectionCheckbox = " _6c15 _6Lcn87b15";
 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,
@@ -1610,13 +1800,31 @@ 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,
+                isFirstItem: $0fcd5fb617970a1d$var$isFirstItem(renderProps.id, renderProps.state),
+                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), {
@@ -1635,7 +1843,32 @@ 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);
+}
+function $0fcd5fb617970a1d$var$isFirstItem(id, state) {
+    if (id == null || !state) return false;
+    return state.collection.getFirstKey() === id;
+}
 
 
-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