@react-spectrum/s2 1.3.1 → 1.5.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 += ' 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 $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 += ' 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
@@ -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 = " sd15 eb15 _Ca15 Za15 Fb15";
 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: " Fb15 Za15",
         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: " Fb15",
         ...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 += ' _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
@@ -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 += ' 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 $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 += ' 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 $bed37377ec7a3a9e$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 $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 += ' _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 $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 += ' 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 $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 += ' 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 $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 = " _Nc15 Pc15 _Yb15 _7c15 NXJkxGe15 _ua15 _vb15 _sd15";
+const $bed37377ec7a3a9e$var$chevronIcon = " _Sd15 It15 Isu15 NXJkxGe15 _va15 -_8sjo0b-t5ZbAob15";
+const $bed37377ec7a3a9e$var$nubbin = " _Pa15 Wr15 _AlhfIS15 ZXJkxGe15 FXJkxGe15 t5qAiPc15 tla15 -_8sjo0b-tw15 -_8sjo0b-lt8pvGJ15";
 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: " Nn15",
                         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 += ' Fb15';
+    rules += ' Za15';
+    rules += ' gL15';
+    rules += ' gl915';
+    rules += ' JLPOtrc15';
+    if (props.isHovered) rules += ' -xLp2wc-sb15';
+    else rules += ' -xLp2wc-sk15';
     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 += ' 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 $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 += ' _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 $bed37377ec7a3a9e$var$divider = " sb15 _Pa15 ZceNfn15 Fb15 _zr15 gp95UEb15 _9c15";
 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 = " _Pc15 pBvFblc15 _Le15 Sf15 Rt15 gs9yXOb15 sd15 _cb15 eb15 _Cg15 FBJsHLe15 ha15";
+const $bed37377ec7a3a9e$var$dragCellStyle = " _Pc15 pBvFblc15 _Le15 Sp15 Rp15 gs9yXOb15 _cb15 FBJsHLe15 ha15";
 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 += ' _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 $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 += ' 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 $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-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
@@ -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 += ' _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 $bed37377ec7a3a9e$var$editPopover = function anonymous(props, overrides) {
@@ -1219,45 +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';
-    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 $bed37377ec7a3a9e$export$d27c35c47f085992 = /*#__PURE__*/ (0, $iLVc8$react.forwardRef)(function EditableCell(props, ref) {
@@ -1338,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
@@ -1392,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 += ' _6c15';
+                                else rules += ' _6b15';
+                                rules += ' _6JGzCfcc15';
+                                rules += ' _6hcIDbbc15';
+                                rules += ' _6sc15';
                                 return rules;
                             }({
                                 isForcedVisible: isOpen || !!isSaving
@@ -1457,14 +1512,14 @@ function $bed37377ec7a3a9e$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, $iLVc8$reactjsxruntime.jsxs)("div", {
-                                        className: " sd13 _tc13 ea13 _va13 _ua13",
+                                        className: " sd15 _tc15 ea15 _va15 _ua15",
                                         children: [
                                             /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $6e265ff388155b91$exports.ActionButton), {
                                                 isQuiet: true,
@@ -1498,12 +1553,12 @@ function $bed37377ec7a3a9e$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, $iLVc8$reactjsxruntime.jsxs)((0, $e1016b8947dbadb8$exports.ButtonGroup), {
                                         align: "end",
-                                        styles: " _dd13",
+                                        styles: " _dd15",
                                         children: [
                                             /*#__PURE__*/ (0, $iLVc8$reactjsxruntime.jsx)((0, $25d06cf8d4e72761$exports.Button), {
                                                 onPress: cancel,
@@ -1530,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: {
@@ -1544,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: {
@@ -1561,60 +1650,162 @@ 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 += ' 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 $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 sticky cells, set z-index to 3
+const $bed37377ec7a3a9e$var$highlightSelectionBorder = "AVAmN";
+const $bed37377ec7a3a9e$var$focusIndicator = "yb5Ryc";
+const $bed37377ec7a3a9e$var$selectionCheckbox = " _6c15 _6Lcn87b15";
 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,
@@ -1623,13 +1814,31 @@ 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,
+                isFirstItem: $bed37377ec7a3a9e$var$isFirstItem(renderProps.id, renderProps.state),
+                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), {
@@ -1648,6 +1857,31 @@ 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);
+}
+function $bed37377ec7a3a9e$var$isFirstItem(id, state) {
+    if (id == null || !state) return false;
+    return state.collection.getFirstKey() === id;
+}
 
 
 //# sourceMappingURL=TableView.cjs.map