@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/TableView.cjs

@@ -7,6 +7,8 @@ var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
 var $8ecd53081d7d50cc$exports = require("../../icons/Close.cjs");
 var $a05aa0b0345f1846$exports = require("./CustomDialog.cjs");
 var $fc196655d58ce18c$exports = require("./DialogContainer.cjs");
+var $f1f08ef5de95f8eb$exports = require("./dnd-utils.cjs");
+var $35d2da6f10cb8588$exports = require("./DragPreview.cjs");
 var $bde97c91243ed164$exports = require("../../icons/Icon.cjs");
 var $4526404114e78c80$exports = require("./intlStrings.cjs");
 var $e741ea6b88ce4866$exports = require("./Menu.cjs");
@@ -29,11 +31,11 @@ var $iLVc8$reactariacomponentsslots = require("react-aria-components/slots");
 var $iLVc8$reactariacomponentsForm = require("react-aria-components/Form");
 var $iLVc8$reactariaprivateutilsshadowdomDOMFunctions = require("react-aria/private/utils/shadowdom/DOMFunctions");
 var $iLVc8$reactariaprivateutilsdomHelpers = require("react-aria/private/utils/domHelpers");
+var $iLVc8$reactariacomponentsVirtualizer = require("react-aria-components/Virtualizer");
 var $iLVc8$reactariacomponentsDialog = require("react-aria-components/Dialog");
 var $iLVc8$reactariacomponentsCheckbox = require("react-aria-components/Checkbox");
 var $iLVc8$reactariacomponentsPopover = require("react-aria-components/Popover");
 var $iLVc8$react = require("react");
-var $iLVc8$reactariacomponentsVirtualizer = require("react-aria-components/Virtualizer");
 var $iLVc8$reactariaprivateutilsuseLayoutEffect = require("react-aria/private/utils/useLayoutEffect");
 var $iLVc8$reactariaI18nProvider = require("react-aria/I18nProvider");
 var $iLVc8$reactariauseLocalizedStringFormatter = require("react-aria/useLocalizedStringFormatter");
@@ -57,6 +59,7 @@ $parcel$export(module.exports, "TableHeader", () => $bed37377ec7a3a9e$export$f85
 $parcel$export(module.exports, "Cell", () => $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea);
 $parcel$export(module.exports, "EditableCell", () => $bed37377ec7a3a9e$export$d27c35c47f085992);
 $parcel$export(module.exports, "Row", () => $bed37377ec7a3a9e$export$b59bdbef9ce70de2);
+$parcel$export(module.exports, "TableFooter", () => $bed37377ec7a3a9e$export$1f116082bba1f9a8);
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -104,6 +107,8 @@ $parcel$export(module.exports, "Row", () => $bed37377ec7a3a9e$export$b59bdbef9ce
 
 
 
+
+
 
 
 
@@ -120,66 +125,81 @@ const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$rootDropOutline = "pUEtOc";
+const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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
@@ -206,17 +226,14 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
         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);
@@ -230,9 +247,9 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
         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;
@@ -265,11 +282,24 @@ class $bed37377ec7a3a9e$export$4e03bdf0174fd602 extends (0, $iLVc8$reactariacomp
         layoutNode.layoutInfo.allowOverflow = true;
         return layoutNode;
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.zIndex = 1;
+        layoutInfo.allowOverflow = true;
+        return layoutInfo;
+    }
 }
 const $bed37377ec7a3a9e$export$93e4b0b2cc49b648 = /*#__PURE__*/ (0, $iLVc8$react.createContext)(null);
 const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableView(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $bed37377ec7a3a9e$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, $iLVc8$reactjsxruntime.jsx)((0, $35d2da6f10cb8588$exports.DragPreview), {
+            items: items,
+            overflowMode: overflowMode
+        });
+    if (dragAndDropHooks) dragAndDropHooks.renderDropIndicator = (target)=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.InsertionIndicator), {
+            target: target
+        });
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
     // Starts when the user selects resize from the menu, ends when resizing ends
@@ -295,7 +325,9 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
             onLoadMore: onLoadMore,
             isInResizeMode: isInResizeMode,
             setIsInResizeMode: setIsInResizeMode,
-            selectionMode: selectionMode
+            selectionMode: selectionMode,
+            selectionStyle: selectionStyle,
+            disabledBehavior: disabledBehavior
         }), [
         isQuiet,
         density,
@@ -304,10 +336,13 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
         onLoadMore,
         isInResizeMode,
         setIsInResizeMode,
-        selectionMode
+        selectionMode,
+        selectionStyle,
+        disabledBehavior
     ]);
     let scrollRef = (0, $iLVc8$react.useRef)(null);
     let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single';
+    let isDragAndDrop = !!dragAndDropHooks?.useDraggableCollectionState;
     let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $85bf454149fe9ddc$exports.useActionBarContainer)({
         ...props,
         scrollRef: scrollRef
@@ -318,7 +353,7 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
         onResize: propsOnResize,
         onResizeEnd: onResizeEnd,
         onResizeStart: onResizeStart,
-        className: (UNSAFE_className || '') + $bed37377ec7a3a9e$var$tableWrapper(null, styles),
+        className: (UNSAFE_className || '') + $bed37377ec7a3a9e$var$tableWrapper(null, styles) + ' ' + $bed37377ec7a3a9e$var$rootDropOutline,
         style: UNSAFE_style,
         children: [
             /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsVirtualizer.Virtualizer), {
@@ -328,7 +363,8 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
                     estimatedRowHeight: overflowMode === 'wrap' ? $bed37377ec7a3a9e$var$ROW_HEIGHTS[density][scale] : undefined,
                     // No need for estimated headingHeight since the headers aren't affected by overflow mode: wrap
                     headingHeight: $bed37377ec7a3a9e$var$DEFAULT_HEADER_HEIGHT[scale],
-                    loaderHeight: 60
+                    loaderHeight: 60,
+                    dropIndicatorThickness: 0
                 },
                 children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$InternalTableContext.Provider, {
                     value: context,
@@ -345,11 +381,14 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
                         className: (renderProps)=>$bed37377ec7a3a9e$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,
@@ -361,7 +400,7 @@ const $bed37377ec7a3a9e$export$b3c27e869d856b7 = /*#__PURE__*/ (0, $iLVc8$react.
         ]
     });
 });
-const $bed37377ec7a3a9e$var$centeredWrapper = " sd13 eb13 _Ca13 Za13 Fb13";
+const $bed37377ec7a3a9e$var$centeredWrapper = " sd131 eb131 _Ca131 Za131 Fb131";
 const $bed37377ec7a3a9e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableBody(props, ref) {
     let { items: items, renderEmptyState: renderEmptyState, children: children, dependencies: dependencies = [] } = props;
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
@@ -376,7 +415,7 @@ const $bed37377ec7a3a9e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $iLVc8$react
     let loadMoreSpinner = /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.TableLoadMoreItem), {
         isLoading: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
-        className: " Fb13 Za13",
+        className: " Fb131 Za131",
         children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
             className: $bed37377ec7a3a9e$var$centeredWrapper,
             children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $1c116ea4b0d2d023$exports.ProgressCircle), {
@@ -422,7 +461,7 @@ const $bed37377ec7a3a9e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $iLVc8$react
     return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.TableBody), {
         // @ts-ignore
         ref: domRef,
-        className: " Fb13",
+        className: " Fb131",
         ...props,
         renderEmptyState: emptyRender,
         dependencies: [
@@ -440,31 +479,36 @@ const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$CellFocusRing() {
     return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.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
@@ -473,62 +517,62 @@ function $bed37377ec7a3a9e$var$CellFocusRing() {
 }
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Column(props, ref) {
@@ -572,26 +616,26 @@ const $bed37377ec7a3a9e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $iLVc8$react
 });
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$ColumnContents(props) {
@@ -621,94 +665,95 @@ function $bed37377ec7a3a9e$var$ColumnContents(props) {
 }
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$columnHeaderText = " _Nc13 Pc13 _Yb13 _7c13 NXJkxGe13 _ua13 _vb13 _sd13";
-const $bed37377ec7a3a9e$var$chevronIcon = " _Sd13 It13 Isu13 NXJkxGe13 _va13 -_8sjo0b-t5ZbAob13";
-const $bed37377ec7a3a9e$var$nubbin = " _Pa13 Wr13 _AlhfIS13 ZXJkxGe13 FXJkxGe13 t5qAiPc13 tla13 -_8sjo0b-tw13 -_8sjo0b-lt8pvGJ13";
+const $bed37377ec7a3a9e$var$columnHeaderText = " _Nc131 Pc131 _Yb131 _7c131 NXJkxGe131 _ua131 _vb131 _sd131";
+const $bed37377ec7a3a9e$var$chevronIcon = " _Sd131 It131 Isu131 NXJkxGe131 _va131 -_8sjo0b-t5ZbAob131";
+const $bed37377ec7a3a9e$var$nubbin = " _Pa131 Wr131 _AlhfIS131 ZXJkxGe131 FXJkxGe131 t5qAiPc131 tla131 -_8sjo0b-tw131 -_8sjo0b-lt8pvGJ131";
 function $bed37377ec7a3a9e$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, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
@@ -795,7 +840,7 @@ function $bed37377ec7a3a9e$var$ColumnWithMenu(props) {
                     }),
                     /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $e741ea6b88ce4866$exports.Menu), {
                         onAction: onMenuSelect,
-                        styles: " Nn13",
+                        styles: " Nn131",
                         children: [
                             items.length > 0 && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $e741ea6b88ce4866$exports.MenuSection), {
                                 children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariaCollection.Collection), {
@@ -846,53 +891,75 @@ function $bed37377ec7a3a9e$var$ResizerIndicator({ isFocusVisible: isFocusVisible
 }
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$selectAllCheckbox = "";
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$export$f850895b287ef28e = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableHeader({ columns: columns, dependencies: dependencies, children: children }, ref) {
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
-    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponentsTable.useTableOptions)();
-    let { isQuiet: isQuiet } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
+    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode, allowsDragging: allowsDragging } = (0, $iLVc8$reactariacomponentsTable.useTableOptions)();
+    let { isQuiet: isQuiet, selectionStyle: selectionStyle } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
+    let stringFormatter = (0, $iLVc8$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
     return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponentsTable.TableHeader), {
         // @ts-ignore
         ref: domRef,
         className: $bed37377ec7a3a9e$var$tableHeader,
         children: [
-            selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.Column), {
+            allowsDragging && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.Column), {
+                // @ts-ignore
+                isSticky: true,
+                width: scale === 'medium' ? 16 : 20,
+                minWidth: scale === 'medium' ? 16 : 20,
+                className: $bed37377ec7a3a9e$var$selectAllCheckboxColumn({
+                    isQuiet: isQuiet
+                }),
+                children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
+                        children: [
+                            isFocusVisible && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$CellFocusRing, {}),
+                            /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariaVisuallyHidden.VisuallyHidden), {
+                                children: stringFormatter.format('table.drag')
+                            })
+                        ]
+                    })
+            }),
+            selectionBehavior === 'toggle' && selectionStyle === 'checkbox' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.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,
@@ -929,21 +996,12 @@ function $bed37377ec7a3a9e$var$VisuallyHiddenSelectAllLabel() {
     });
 }
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$treeColumnStyles = {
-    '--indent': {
-        type: 'width',
-        value: 16
-    },
     '--treeColumnPadding': {
         type: 'width',
         value: {
@@ -958,88 +1016,80 @@ const $bed37377ec7a3a9e$var$treeColumnStyles = {
 };
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$divider = " sb131 _Pa131 ZceNfn131 Fb131 _zr131 gp95UEb131 _9c131";
 const $bed37377ec7a3a9e$var$stickyCell = {
     backgroundColor: 'gray-25'
 };
-const $bed37377ec7a3a9e$var$checkboxCellStyle = " iA13 ha13 _ka13 ma13 la13 _jf13 _Pc13 pBvFblc13 _Le13 Sf13 Rt13 gs9yXOb13 sd13 _cb13 eb13 _Cg13 FBJsHLe13";
+const $bed37377ec7a3a9e$var$checkboxCellStyle = " _Pc131 pBvFblc131 _Le131 Sf131 Rt131 gs9yXOb131 sd131 _cb131 eb131 _Cg131 FBJsHLe131 ha131";
+const $bed37377ec7a3a9e$var$dragCellStyle = " _Pc131 pBvFblc131 _Le131 Sp131 Rp131 gs9yXOb131 _cb131 FBJsHLe131 ha131";
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Cell(props, ref) {
@@ -1062,6 +1112,9 @@ const $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $iLVc8$react
         ...otherProps,
         children: ({ id: id, isFocusVisible: isFocusVisible, hasChildItems: hasChildItems, isTreeColumn: isTreeColumn, isExpanded: isExpanded, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactjsxruntime.Fragment), {
                 children: [
+                    showDivider && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)("div", {
+                        className: $bed37377ec7a3a9e$var$divider
+                    }),
                     hasChildItems && isTreeColumn && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$ExpandableRowChevron, {
                         isDisabled: isDisabled,
                         isExpanded: isExpanded
@@ -1081,38 +1134,38 @@ const $bed37377ec7a3a9e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $iLVc8$react
 });
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$ExpandableRowChevron(props1) {
@@ -1133,20 +1186,20 @@ function $bed37377ec7a3a9e$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
@@ -1156,59 +1209,59 @@ function $bed37377ec7a3a9e$var$ExpandableRowChevron(props1) {
 }
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$editPopover = function anonymous(props, overrides) {
@@ -1219,33 +1272,45 @@ let $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$export$d27c35c47f085992 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function EditableCell(props, ref) {
@@ -1326,7 +1391,9 @@ function $bed37377ec7a3a9e$var$EditableCellInner(props1) {
     (0, $iLVc8$react.useEffect)(()=>{
         if (isOpen) {
             let activeElement = (0, $iLVc8$reactariaprivateutilsshadowdomDOMFunctions.getActiveElement)((0, $iLVc8$reactariaprivateutilsdomHelpers.getOwnerDocument)(formRef.current));
-            if (activeElement && (0, $iLVc8$reactariaprivateutilsshadowdomDOMFunctions.nodeContains)(formRef.current, activeElement) && (activeElement instanceof HTMLInputElement && !$bed37377ec7a3a9e$var$nonTextInputTypes.has(activeElement.type) || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === 'function') activeElement.select();
+            if (activeElement && (0, $iLVc8$reactariaprivateutilsshadowdomDOMFunctions.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 && !$bed37377ec7a3a9e$var$nonTextInputTypes.has(activeElement.type) || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === 'function') activeElement.select();
         }
     }, [
         isOpen
@@ -1380,11 +1447,11 @@ function $bed37377ec7a3a9e$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
@@ -1445,14 +1512,14 @@ function $bed37377ec7a3a9e$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, $iLVc8$reactjsxruntime.jsxs)("div", {
-                                        className: " sd13 _tc13 ea13 _va13 _ua13",
+                                        className: " sd131 _tc131 ea131 _va131 _ua131",
                                         children: [
                                             /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
                                                 isQuiet: true,
@@ -1486,12 +1553,12 @@ function $bed37377ec7a3a9e$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, $iLVc8$reactjsxruntime.jsxs)((0, $e1016b8947dbadb8$exports.ButtonGroup), {
                                         align: "end",
-                                        styles: " _dd13",
+                                        styles: " _dd131",
                                         children: [
                                             /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $25d06cf8d4e72761$exports.Button), {
                                                 onPress: cancel,
@@ -1518,12 +1585,32 @@ function $bed37377ec7a3a9e$var$EditableCellInner(props1) {
 // Use color-mix instead of transparency so sticky cells work correctly.
 const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$rootRowDropStyles = {
+    default: $bed37377ec7a3a9e$var$rootDropRowBackground,
+    isSelected: $bed37377ec7a3a9e$var$rootDropSelectedRowBackground,
+    forcedColors: 'Background'
+};
+const $bed37377ec7a3a9e$var$rowDropStyles = {
+    default: $bed37377ec7a3a9e$var$rowDropBackground,
+    isSelected: $bed37377ec7a3a9e$var$rowDropSelectedBackground,
+    forcedColors: 'Background'
+};
 const $bed37377ec7a3a9e$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: {
@@ -1532,9 +1619,23 @@ const $bed37377ec7a3a9e$var$rowBackgroundColor = {
         isHovered: $bed37377ec7a3a9e$var$selectedActiveBackground,
         isPressed: $bed37377ec7a3a9e$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] *)': $bed37377ec7a3a9e$var$rootRowDropStyles,
+    isDropTarget: $bed37377ec7a3a9e$var$rowDropStyles
 };
 const $bed37377ec7a3a9e$var$rowTextColor = {
     default: {
@@ -1549,60 +1650,150 @@ const $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$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 $bed37377ec7a3a9e$var$highlightSelectionBorder = "XvgEBe";
+const $bed37377ec7a3a9e$var$focusIndicator = "_7GNHP";
+const $bed37377ec7a3a9e$var$selectionCheckbox = " _6c131 _6Lcn87b131";
 const $bed37377ec7a3a9e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function Row({ id: id, columns: columns, children: children, dependencies: dependencies = [], ...otherProps }, ref) {
-    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $iLVc8$reactariacomponentsTable.useTableOptions)();
-    let tableVisualOptions = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
+    let { selectionBehavior: selectionBehavior, selectionMode: selectionMode, allowsDragging: allowsDragging } = (0, $iLVc8$reactariacomponentsTable.useTableOptions)();
+    let { selectionStyle: selectionStyle, ...tableVisualOptions } = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$InternalTableContext);
     let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
+    let isInFooter = (0, $iLVc8$react.useContext)($bed37377ec7a3a9e$var$FooterContext);
     return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsxs)((0, $iLVc8$reactariacomponentsTable.Row), {
         // @ts-ignore
         ref: domRef,
@@ -1611,13 +1802,30 @@ const $bed37377ec7a3a9e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $iLVc8$react
             ...dependencies,
             columns
         ],
+        isDisabled: isInFooter,
+        disabledBehavior: isInFooter ? 'selection' : undefined,
         className: (renderProps)=>$bed37377ec7a3a9e$var$row({
                 ...renderProps,
-                ...tableVisualOptions
-            }) + (renderProps.isFocusVisible ? " hFh6wc" : ''),
+                ...tableVisualOptions,
+                selectionStyle: selectionStyle,
+                isInFooter: isInFooter,
+                isNextSelected: $bed37377ec7a3a9e$export$801a7cfaf3e363f5(renderProps.id, renderProps.state),
+                isPrevSelected: $bed37377ec7a3a9e$export$aebccab86af12e73(renderProps.id, renderProps.state)
+            }) + (renderProps.isFocusVisible || renderProps.isDropTarget ? ' ' + $bed37377ec7a3a9e$var$focusIndicator : '') + (selectionStyle === 'highlight' ? ' ' + $bed37377ec7a3a9e$var$highlightSelectionBorder : ''),
         ...otherProps,
         children: [
-            selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$export$f6f0c3fe4ec306ea, {
+            allowsDragging && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.Cell), {
+                // @ts-ignore
+                isSticky: true,
+                className: $bed37377ec7a3a9e$var$dragCellStyle,
+                children: ({ isFocusVisibleWithinRow: isFocusVisibleWithinRow })=>!(otherProps.isDisabled && tableVisualOptions.disabledBehavior === 'all') && /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $f1f08ef5de95f8eb$exports.DragHandleButton), {
+                        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, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$export$f6f0c3fe4ec306ea, {
                 isSticky: true,
                 className: $bed37377ec7a3a9e$var$checkboxCellStyle,
                 children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $af04e099a53d3e85$exports.Checkbox), {
@@ -1636,6 +1844,27 @@ const $bed37377ec7a3a9e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $iLVc8$react
         ]
     });
 });
+const $bed37377ec7a3a9e$var$FooterContext = /*#__PURE__*/ (0, $iLVc8$react.createContext)(false);
+const $bed37377ec7a3a9e$export$1f116082bba1f9a8 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function TableFooter(props, ref) {
+    let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)($bed37377ec7a3a9e$var$FooterContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $iLVc8$reactariacomponentsTable.TableFooter), {
+            ...props,
+            ref: domRef
+        })
+    });
+});
+function $bed37377ec7a3a9e$export$801a7cfaf3e363f5(id, state) {
+    if (id == null || !state) return false;
+    let keyAfter = state.collection.getKeyAfter(id);
+    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+function $bed37377ec7a3a9e$export$aebccab86af12e73(id, state) {
+    if (id == null || !state) return false;
+    let keyBefore = state.collection.getKeyBefore(id);
+    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
 
 
 //# sourceMappingURL=TableView.cjs.map