@react-spectrum/s2 1.3.0 → 1.4.0

package/dist/private/ListView.mjs

@@ -4,6 +4,8 @@ import {ActionMenuContext as $8bf3cd2442eb485e$export$7f4b66acaca28bd5} from "./
 import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
 import {Checkbox as $9b405e0f8095dce0$export$48513f6b9f8ce62d} from "./Checkbox.mjs";
 import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
+import {description as $ba354da66aaa1d20$export$6d59db4903f20f7d, DragPreview as $ba354da66aaa1d20$export$905ab40ac2179daa, icon as $ba354da66aaa1d20$export$1ca1ec8b29a4ce27, iconCenterWrapper as $ba354da66aaa1d20$export$31d1842a0fd736e6, label as $ba354da66aaa1d20$export$1237798dc640739a} from "./DragPreview.mjs";
+import {DragHandleButton as $3c1ab1fd8f31a3e2$export$4c99a519d851f90c, InsertionIndicator as $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088} from "./dnd-utils.mjs";
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../../icons/Icon.mjs";
 import {ImageContext as $dbd6f0b2503b938c$export$8151eb379fcf2442} from "./Image.mjs";
 import $alyq6$intlStringsmjs from "./intlStrings.mjs";
@@ -21,10 +23,10 @@ import {CollectionRendererContext as $alyq6$CollectionRendererContext, DefaultCo
 import {useSlottedContext as $alyq6$useSlottedContext, Provider as $alyq6$Provider, DEFAULT_SLOT as $alyq6$DEFAULT_SLOT} from "react-aria-components/slots";
 import {createContext as $alyq6$createContext, forwardRef as $alyq6$forwardRef, useRef as $alyq6$useRef, useContext as $alyq6$useContext} from "react";
 import {GridListLoadMoreItem as $alyq6$GridListLoadMoreItem, GridList as $alyq6$GridList, GridListItem as $alyq6$GridListItem} from "react-aria-components/GridList";
+import {Virtualizer as $alyq6$Virtualizer} from "react-aria-components/Virtualizer";
 import {ListLayout as $alyq6$ListLayout} from "react-stately/useVirtualizerState";
 import {useLocale as $alyq6$useLocale} from "react-aria/I18nProvider";
 import {useLocalizedStringFormatter as $alyq6$useLocalizedStringFormatter} from "react-aria/useLocalizedStringFormatter";
-import {Virtualizer as $alyq6$Virtualizer} from "react-aria-components/Virtualizer";
 
 
 function $parcel$interopDefault(a) {
@@ -63,6 +65,8 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 
 
 
@@ -80,80 +84,105 @@ const $6d4c8b365b6e9016$var$listViewWrapper = function anonymous(props, override
         if (p[1] === "_P") position = true;
         rules += p[0];
     }
-    if (!minHeight) rules += ' Ma13';
-    if (!minWidth) rules += ' Ng13';
-    rules += ' sd13';
-    rules += ' _Bb13';
-    rules += ' __ca13';
-    if (!position) rules += ' _Pc13';
-    rules += ' _Nb13';
-    rules += ' Pb13';
+    if (!minHeight) rules += ' Ma131';
+    if (!minWidth) rules += ' Ng131';
+    rules += ' sd131';
+    rules += ' _Bb131';
+    rules += ' __ca131';
+    if (!position) rules += ' _Pc131';
+    rules += ' _Nb131';
+    rules += ' Pb131';
+    rules += ' -qVUQke-ob131';
     return rules;
 };
+// similar to tableview, use this approach so we can actually have a 2px outline when root dropping.
+// cant do a external box shadow due to the clipping that is applied on the wrapper element...
+// an inset box shadow runs into problems with the item background clipping the box shadow...
+const $6d4c8b365b6e9016$var$rootDropOutline = "IJKxRb";
 // When any row has a trailing icon, reserve space so actions align.
 const $6d4c8b365b6e9016$var$hasTrailingIconRows = ':has([data-has-trailing-icon]) [role="row"]';
+const $6d4c8b365b6e9016$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 $6d4c8b365b6e9016$var$listView = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    if (props.isQuiet) rules += ' _Ka13';
-    else rules += ' _Kb13';
-    rules += ' _4c13';
-    rules += ' Ma13';
-    rules += ' Na13';
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _oa13';
-    rules += ' _Na13';
-    rules += ' Pa13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    rules += ' Oh131';
+    rules += ' Olc131';
+    rules += ' _Mc131';
+    if (props.isQuiet) rules += ' _Ka131';
+    else rules += ' _Kb131';
+    rules += ' _4c131';
+    rules += ' Ma131';
+    rules += ' Na131';
+    rules += ' Za131';
+    rules += ' Fb131';
+    rules += ' _oa131';
+    rules += ' _Na131';
+    rules += ' Pa131';
     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';
     }
-    if (props.isQuiet) rules += ' g913';
-    else rules += ' gX13';
-    rules += ' gla13';
-    if (props.isQuiet) rules += ' od13';
-    else rules += ' ob13';
-    if (props.isQuiet) rules += ' nd13';
-    else rules += ' nb13';
-    if (props.isQuiet) rules += ' kd13';
-    else rules += ' kb13';
-    if (props.isQuiet) rules += ' jd13';
-    else rules += ' jb13';
-    rules += ' iq13';
-    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';
-    rules += ' _jf13';
-    rules += ' -Ev4N4b-Zd13';
-    rules += ' -Ev4N4b-1bNH0cZuUmpre13';
+    if (props.isDropTarget) {
+        rules += ' glzvDBe131';
+        rules += ' gla131';
+    } else if (props.isQuiet) rules += ' g9131';
+    else rules += ' gX131';
+    if (props.isQuiet) rules += ' od131';
+    else rules += ' ob131';
+    if (props.isQuiet) rules += ' nd131';
+    else rules += ' nb131';
+    if (props.isQuiet) rules += ' kd131';
+    else rules += ' kb131';
+    if (props.isQuiet) rules += ' jd131';
+    else rules += ' jb131';
+    rules += ' iq131';
+    rules += ' ila131';
+    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';
+    rules += ' _jf131';
+    rules += ' _yb131';
+    rules += ' -Ev4N4b-Zd131';
+    rules += ' -Ev4N4b-1bNH0cZuUmpre131';
     return rules;
 };
+class $6d4c8b365b6e9016$export$6f8e4757b55cd070 extends (0, $alyq6$ListLayout) {
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.zIndex = 1;
+        layoutInfo.allowOverflow = true;
+        return layoutInfo;
+    }
+}
 const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwardRef)(function ListView(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $6d4c8b365b6e9016$export$870039b0abfe3de0);
-    let { children: children, isQuiet: isQuiet, selectionStyle: selectionStyle = 'checkbox', overflowMode: overflowMode = 'truncate', loadingState: loadingState, onLoadMore: onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon: hideLinkOutIcon = false, ...otherProps } = props;
+    let { children: children, isQuiet: isQuiet, selectionStyle: selectionStyle = 'checkbox', overflowMode: overflowMode = 'truncate', loadingState: loadingState, onLoadMore: onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon: hideLinkOutIcon = false, dragAndDropHooks: dragAndDropHooks, ...otherProps } = props;
     let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)();
+    if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) dragAndDropHooks.renderDragPreview = (items)=>/*#__PURE__*/ (0, $alyq6$jsx)((0, $ba354da66aaa1d20$export$905ab40ac2179daa), {
+            items: items,
+            overflowMode: overflowMode
+        });
+    if (dragAndDropHooks) dragAndDropHooks.renderDropIndicator = (target)=>/*#__PURE__*/ (0, $alyq6$jsx)((0, $3c1ab1fd8f31a3e2$export$2c0bab5914a9d088), {
+            target: target
+        });
     let stringFormatter = (0, $alyq6$useLocalizedStringFormatter)((0, ($parcel$interopDefault($alyq6$intlStringsmjs))), '@react-spectrum/s2');
     let rowHeight = scale === 'large' ? 50 : 40;
     let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
@@ -180,7 +209,7 @@ const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwa
     let loadMoreSpinner = onLoadMore ? /*#__PURE__*/ (0, $alyq6$jsx)((0, $alyq6$GridListLoadMoreItem), {
         isLoading: loadingState === 'loadingMore',
         onLoadMore: onLoadMore,
-        className: " Fb13 Za13 Tt13 Qt13",
+        className: " Fb131 Za131 Tt131 Qt131",
         children: /*#__PURE__*/ (0, $alyq6$jsx)("div", {
             className: $6d4c8b365b6e9016$var$centeredWrapper,
             children: /*#__PURE__*/ (0, $alyq6$jsx)("div", {
@@ -219,14 +248,15 @@ const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwa
     });
     return /*#__PURE__*/ (0, $alyq6$jsxs)("div", {
         ref: domRef,
-        className: (props.UNSAFE_className || '') + $6d4c8b365b6e9016$var$listViewWrapper(null, props.styles),
+        className: (props.UNSAFE_className || '') + $6d4c8b365b6e9016$var$listViewWrapper(null, props.styles) + ' ' + $6d4c8b365b6e9016$var$rootDropOutline,
         style: props.UNSAFE_style,
         children: [
             /*#__PURE__*/ (0, $alyq6$jsx)((0, $alyq6$Virtualizer), {
-                layout: (0, $alyq6$ListLayout),
+                layout: $6d4c8b365b6e9016$export$6f8e4757b55cd070,
                 layoutOptions: {
                     estimatedRowHeight: rowHeight,
-                    loaderHeight: 60
+                    loaderHeight: 60,
+                    dropIndicatorThickness: 0
                 },
                 children: /*#__PURE__*/ (0, $alyq6$jsx)($6d4c8b365b6e9016$var$InternalListViewContext.Provider, {
                     value: {
@@ -239,6 +269,7 @@ const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwa
                     children: /*#__PURE__*/ (0, $alyq6$jsx)((0, $alyq6$GridList), {
                         ref: scrollRef,
                         ...gridListProps,
+                        dragAndDropHooks: dragAndDropHooks,
                         selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                         selectionMode: gridListProps.selectionMode,
                         renderEmptyState: renderEmptyState,
@@ -248,7 +279,8 @@ const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwa
                         },
                         className: (renderProps)=>$6d4c8b365b6e9016$var$listView({
                                 ...renderProps,
-                                isQuiet: isQuiet
+                                isQuiet: isQuiet,
+                                isDropTarget: renderProps.isDropTarget
                             }),
                         selectedKeys: selectedKeys,
                         defaultSelectedKeys: undefined,
@@ -263,365 +295,255 @@ const $6d4c8b365b6e9016$export$84d0dd190d551cd1 = /*#__PURE__*/ (0, $alyq6$forwa
 });
 const $6d4c8b365b6e9016$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 $6d4c8b365b6e9016$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: removed the background color in HCM for highlight selection since it made it hard to see the focus
+// ring of the drag button, this matches v3 anyways. thoughts?
 const $6d4c8b365b6e9016$var$listitem = function anonymous(props) {
     let rules = " ";
-    rules += ' _Le13';
-    rules += ' _oa13';
-    rules += ' qh13';
-    rules += ' Sd13';
-    rules += ' Rd13';
-    rules += ' Tt13';
-    rules += ' Qt13';
-    rules += ' g913';
-    if (props.isDisabled) rules += ' pp13';
+    rules += ' _Le131';
+    rules += ' _oa131';
+    rules += ' qh131';
+    rules += ' Sd131';
+    rules += ' Rd131';
+    rules += ' Tt131';
+    rules += ' Qt131';
+    rules += ' g9131';
+    if (props.isDisabled) rules += ' pp131';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po13';
-        else if (props.isFocusVisible) rules += ' po13';
-        else if (props.isHovered) rules += ' po13';
-        else rules += ' pt13';
+        if (props.isPressed) rules += ' po131';
+        else if (props.isFocusVisible) rules += ' po131';
+        else if (props.isHovered) rules += ' po131';
+        else rules += ' pt131';
     } else {
-        if (props.isPressed) rules += ' pt13';
-        else if (props.isFocusVisible) rules += ' pt13';
-        else if (props.isHovered) rules += ' pt13';
-        else rules += ' pv13';
+        if (props.isPressed) rules += ' pt131';
+        else if (props.isFocusVisible) rules += ' pt131';
+        else if (props.isHovered) rules += ' pt131';
+        else rules += ' pv131';
     }
-    if (props.isDisabled) rules += ' plc13';
-    else if (props.selectionStyle === "highlight") {
-        if (props.isSelected) rules += ' ple13';
-        else rules += ' plb13';
-    } else rules += ' plb13';
-    rules += ' _Pc13';
-    rules += ' z2mU13';
-    rules += ' yzZKy13';
-    rules += ' se13';
-    rules += ' C91zTN13';
-    rules += ' DIVIQId13';
-    rules += ' Exumf9b13';
-    rules += ' UDNKd2dai5a013';
-    rules += ' ea13';
-    if (props.scale === "large") rules += ' MODqQub13';
-    else rules += ' Mh13';
-    rules += ' _Xa13';
-    if (props.isLink) rules += ' ry13';
-    else rules += ' ri13';
+    if (props.isDisabled) rules += ' plc131';
+    else if (props.isSelected) {
+        if (props.selectionStyle === "highlight") rules += ' ple131';
+    } else rules += ' plb131';
+    rules += ' _Pc131';
+    rules += ' z2mU131';
+    rules += ' yzZKy131';
+    rules += ' se131';
+    rules += ' CTJxasc131';
+    rules += ' Ds5idie131';
+    rules += ' Exumf9b131';
+    rules += ' UDNKd2dai5a0131';
+    rules += ' ea131';
+    if (props.scale === "large") rules += ' MODqQub131';
+    else rules += ' Mh131';
+    rules += ' _Xa131';
+    if (props.isLink) rules += ' ry131';
+    else rules += ' ri131';
     if (props.isSelected) {
-        if (props.selectionStyle === "checkbox") rules += ' -EH8uVb-iq13';
-        else if (props.selectionStyle === "highlight") rules += ' -EH8uVb-iw13';
-    } else rules += ' -EH8uVb-iq13';
-    rules += ' -EH8uVb-lia13';
-    rules += ' _ka13';
+        if (props.selectionStyle === "checkbox") rules += ' -EH8uVb-iq131';
+        else if (props.selectionStyle === "highlight") {
+            rules += ' -EH8uVb-iw131';
+            rules += ' -EH8uVb-lid131';
+        }
+    } else {
+        rules += ' -EH8uVb-iq131';
+        rules += ' -EH8uVb-lia131';
+    }
+    rules += ' _ka131';
     if (props.isLastItem) {
-        if (props.isQuiet) rules += ' ha13';
-        else rules += ' hb13';
-    } else rules += ' hb13';
-    rules += ' ma13';
-    rules += ' la13';
-    rules += ' _jf13';
-    if (props.isSelected) rules += ' iA13';
-    else if (props.isNextSelected) rules += ' iA13';
-    else rules += ' i4pzfu13';
-    rules += ' ila13';
-    rules += ' -Bu7z1c-ob13';
-    rules += ' _yb13';
+        if (props.isQuiet) rules += ' ha131';
+        else rules += ' hb131';
+    } else rules += ' hb131';
+    rules += ' ma131';
+    rules += ' la131';
+    rules += ' _jf131';
+    if (props.isSelected) rules += ' iA131';
+    else if (props.isNextSelected) rules += ' iA131';
+    else rules += ' i4pzfu131';
+    rules += ' ila131';
+    rules += ' -Bu7z1c-ob131';
+    rules += ' _yb131';
     return rules;
 };
 const $6d4c8b365b6e9016$var$insetBorderRadius = 'calc(var(--radius) - 1px)';
+const $6d4c8b365b6e9016$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 $6d4c8b365b6e9016$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 $6d4c8b365b6e9016$var$rootRowDropStyles = {
+    // Unlike v3 tableview, v3 listview has the same background color for the listview itself and the rows when
+    // dropping on root
+    default: $6d4c8b365b6e9016$var$dropTargetBackground,
+    isSelected: $6d4c8b365b6e9016$var$rootDropSelectedRowBackground,
+    forcedColors: 'Background'
+};
+const $6d4c8b365b6e9016$var$rowDropStyles = {
+    // Also unlike v3, dropping on a selected row vs a non selected row doesn't have any difference in background color
+    default: $6d4c8b365b6e9016$var$rowDropBackground,
+    isSelected: $6d4c8b365b6e9016$var$rowDropBackground,
+    forcedColors: 'Background'
+};
 const $6d4c8b365b6e9016$var$listRowBackground = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa13';
-    rules += ' _9a13';
-    if (props.isFirstItem) rules += ' Wr13';
-    else if (props.isPrevSelected) rules += ' Wr13';
-    else if (props.isSelected) rules += ' WLPOtrc13';
-    else rules += ' Wr13';
-    rules += ' Wlr13';
-    rules += ' _Er13';
-    rules += ' _Rr13';
-    if (props.isSelected) rules += ' _lLPOtrc13';
-    else rules += ' _lr13';
-    if (props.isSelected) {
+    rules += ' _Pa131';
+    rules += ' _9a131';
+    if (props.isFirstItem) rules += ' Wr131';
+    else if (props.isPrevSelected) rules += ' Wr131';
+    else if (props.isSelected) rules += ' WLPOtrc131';
+    else rules += ' Wr131';
+    rules += ' Wlr131';
+    rules += ' _Er131';
+    rules += ' _Rr131';
+    if (props.isSelected) rules += ' _lLPOtrc131';
+    else rules += ' _lr131';
+    if (props.isDropTarget) {
+        if (props.isSelected) rules += ' glzvDBe131';
+        else rules += ' glzvDBe131';
+        rules += ' gla131';
+    } else {
+        if (props.isSelected) {
+            if (props.selectionStyle === "highlight") {
+                if (props.isPressed) rules += ' gaZwDBe131';
+                else if (props.isHovered) rules += ' gaZwDBe131';
+                else rules += ' glzvDBe131';
+            } else if (props.selectionStyle === "checkbox") {
+                if (props.isFocusVisible) rules += ' gRfT7e131';
+                else if (props.isPressed) rules += ' gRfT7e131';
+                else if (props.isHovered) rules += ' gRfT7e131';
+                else rules += ' gj1B7i131';
+            }
+        } else if (props.isPressed) {
+            if (props.selectionStyle === "checkbox") rules += ' gRfT7e131';
+            else rules += ' g7IonAe131';
+        } else if (props.isHovered) {
+            if (props.selectionStyle === "checkbox") rules += ' gj1B7i131';
+            else rules += ' gVQkD8c131';
+        } else rules += ' gs9yXOb131';
         if (props.selectionStyle === "highlight") {
-            if (props.isPressed) rules += ' gaZwDBe13';
-            else if (props.isHovered) rules += ' gaZwDBe13';
-            else rules += ' glzvDBe13';
-        } else if (props.selectionStyle === "checkbox") {
-            if (props.isFocusVisible) rules += ' gRfT7e13';
-            else if (props.isPressed) rules += ' gRfT7e13';
-            else if (props.isHovered) rules += ' gRfT7e13';
-            else rules += ' gj1B7i13';
-        }
-    } else if (props.isPressed) {
-        if (props.selectionStyle === "checkbox") rules += ' gRfT7e13';
-        else rules += ' g7IonAe13';
-    } else if (props.isHovered) {
-        if (props.selectionStyle === "checkbox") rules += ' gj1B7i13';
-        else rules += ' gVQkD8c13';
-    } else rules += ' gs9yXOb13';
-    if (props.selectionStyle === "highlight") {
-        if (props.isSelected) rules += ' gle13';
-        else rules += ' gla13';
-    } else rules += ' gla13';
-    if (props.isPrevNotSelected) {
-        if (props.isQuiet) rules += ' ob13';
+            if (props.isSelected) rules += ' gle131';
+            else rules += ' gl9131';
+        } else rules += ' gl9131';
+        if (props.isSelected) rules += ' gRQaNpdubHDBe131';
+        else rules += ' gRQaNpdlzvDBe131';
+        rules += ' gRQaNpdla131';
+    }
+    if (props.isDropTarget) rules += ' o7E7Gic131';
+    else if (props.isPrevNotSelected) {
+        if (props.isQuiet) rules += ' ob131';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' o7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' od13';
+            if (props.selectionStyle === "highlight") rules += ' o7E7Gic131';
+            else if (props.selectionStyle === "checkbox") rules += ' od131';
         }
-    } else if (props.isSelected) rules += ' od13';
-    else if (props.isQuiet) rules += ' ob13';
-    if (props.isPrevNotSelected) {
-        if (props.isQuiet) rules += ' nb13';
+    } else if (props.isSelected) rules += ' od131';
+    else if (props.isQuiet) rules += ' ob131';
+    if (props.isDropTarget) rules += ' n7E7Gic131';
+    else if (props.isPrevNotSelected) {
+        if (props.isQuiet) rules += ' nb131';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' n7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' nd13';
+            if (props.selectionStyle === "highlight") rules += ' n7E7Gic131';
+            else if (props.selectionStyle === "checkbox") rules += ' nd131';
         }
-    } else if (props.isSelected) rules += ' nd13';
-    else if (props.isQuiet) rules += ' nb13';
-    if (props.isNextNotSelected) {
-        if (props.isQuiet) rules += ' kb13';
+    } else if (props.isSelected) rules += ' nd131';
+    else if (props.isQuiet) rules += ' nb131';
+    if (props.isDropTarget) rules += ' k7E7Gic131';
+    else if (props.isNextNotSelected) {
+        if (props.isQuiet) rules += ' kb131';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' k7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' kd13';
+            if (props.selectionStyle === "highlight") rules += ' k7E7Gic131';
+            else if (props.selectionStyle === "checkbox") rules += ' kd131';
         }
-    } else if (props.isSelected) rules += ' kd13';
-    else if (props.isQuiet) rules += ' kb13';
-    if (props.isNextNotSelected) {
-        if (props.isQuiet) rules += ' jb13';
+    } else if (props.isSelected) rules += ' kd131';
+    else if (props.isQuiet) rules += ' kb131';
+    if (props.isDropTarget) rules += ' j7E7Gic131';
+    else if (props.isNextNotSelected) {
+        if (props.isQuiet) rules += ' jb131';
         else if (props.isSelected) {
-            if (props.selectionStyle === "highlight") rules += ' j7E7Gic13';
-            else if (props.selectionStyle === "checkbox") rules += ' jd13';
+            if (props.selectionStyle === "highlight") rules += ' j7E7Gic131';
+            else if (props.selectionStyle === "checkbox") rules += ' jd131';
         }
-    } else if (props.isSelected) rules += ' jd13';
-    else if (props.isQuiet) rules += ' jb13';
-    if (props.isPrevSelected) rules += ' _ka13';
+    } else if (props.isSelected) rules += ' jd131';
+    else if (props.isQuiet) rules += ' jb131';
+    if (props.isDropTarget) rules += ' _kc131';
+    else if (props.isPrevSelected) rules += ' _ka131';
     else {
-        if (props.selectionStyle === "highlight") rules += ' _kb13';
-        else if (props.selectionStyle === "checkbox") rules += ' _ka13';
+        if (props.selectionStyle === "highlight") rules += ' _kb131';
+        else if (props.selectionStyle === "checkbox") rules += ' _ka131';
     }
-    if (props.isNextSelected) rules += ' ha13';
+    if (props.isDropTarget) rules += ' hc131';
+    else if (props.isNextSelected) rules += ' ha131';
     else {
-        if (props.selectionStyle === "highlight") rules += ' hb13';
-        else if (props.selectionStyle === "checkbox") rules += ' ha13';
+        if (props.selectionStyle === "highlight") rules += ' hb131';
+        else if (props.selectionStyle === "checkbox") rules += ' ha131';
     }
-    if (props.selectionStyle === "highlight") rules += ' mb13';
-    else if (props.selectionStyle === "checkbox") rules += ' ma13';
-    if (props.selectionStyle === "highlight") rules += ' lb13';
-    else if (props.selectionStyle === "checkbox") rules += ' la13';
-    rules += ' _jf13';
-    if (props.isSelected) {
-        if (props.selectionStyle === "highlight") rules += ' i4pzfu13';
-        else if (props.selectionStyle === "checkbox") rules += ' iA13';
-    } else rules += ' iA13';
-    return rules;
-};
-let $6d4c8b365b6e9016$var$listRowFocusRing = function anonymous(props) {
-    let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    if (props.selectionStyle === "highlight") rules += ' Ola13';
-    else rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _MlkNNfn13';
-    rules += ' _Kb13';
-    rules += ' _KlToPtrc13';
-    rules += ' _Pa13';
-    if (props.isFirstItem) rules += ' Wr13';
-    else rules += ' WLPOtrc13';
-    if (props.selectionStyle === "highlight") rules += ' _lLPOtrc13';
-    else if (props.selectionStyle === "checkbox") {
-        if (props.isNextSelected) rules += ' _lr13';
-        else rules += ' _lLPOtrc13';
-    }
-    rules += ' _Ar13';
-    rules += ' _zr13';
-    if (props.isQuiet) rules += ' ob13';
-    else rules += ' o7E7Gic13';
-    if (props.isQuiet) rules += ' nb13';
-    else rules += ' n7E7Gic13';
-    if (props.isQuiet) rules += ' kb13';
-    else rules += ' k7E7Gic13';
-    if (props.isQuiet) rules += ' jb13';
-    else rules += ' j7E7Gic13';
-    rules += ' _9c13';
-    rules += ' _Ob13';
-    return rules;
-};
-let $6d4c8b365b6e9016$export$1237798dc640739a = function anonymous(props) {
-    let rules = " ";
-    rules += ' zv6x9r13';
-    rules += ' yv6x9r13';
-    rules += ' Bv6x9r13';
-    rules += ' Av6x9r13';
-    rules += ' _dc13';
-    if (props.size === "XL") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "L") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "S") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else if (props.size === "XS") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    } else {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
-    }
-    if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
-    } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
-    } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
-    } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
-    } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
-    }
-    if (props.size === "XL") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "L") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "S") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else if (props.size === "XS") {
-        rules += ' xb13';
-        rules += ' _xa13';
-    } else {
-        rules += ' xb13';
-        rules += ' _xa13';
+    if (props.isDropTarget) rules += ' mc131';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' mb131';
+        else if (props.selectionStyle === "checkbox") rules += ' ma131';
     }
-    if (props.size === "XL") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "L") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "S") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else if (props.size === "XS") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
-    } else {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+    if (props.isDropTarget) rules += ' lc131';
+    else {
+        if (props.selectionStyle === "highlight") rules += ' lb131';
+        else if (props.selectionStyle === "checkbox") rules += ' la131';
     }
-    rules += ' p40ub4c13';
-    rules += ' _Nc13';
-    rules += ' Pc13';
-    rules += ' _Yb13';
-    if (props.overflowMode === "wrap") rules += ' _7b13';
-    else rules += ' _7c13';
+    rules += ' _jf131';
+    if (props.isDropTarget) rules += ' ix131';
+    else if (props.isSelected) {
+        if (props.selectionStyle === "highlight") rules += ' i4pzfu131';
+        else if (props.selectionStyle === "checkbox") rules += ' iA131';
+    } else rules += ' iA131';
+    if (props.isDropTarget) rules += ' ild131';
     return rules;
 };
-let $6d4c8b365b6e9016$export$6d59db4903f20f7d = function anonymous(props) {
+let $6d4c8b365b6e9016$var$listRowFocusRing = function anonymous(props) {
     let rules = " ";
-    rules += ' z9u7zPc13';
-    rules += ' y9u7zPc13';
-    rules += ' B9u7zPc13';
-    rules += ' A9u7zPc13';
-    rules += ' _dc13';
-    rules += ' _Nc13';
-    rules += ' Pc13';
-    rules += ' _Yb13';
-    if (props.overflowMode === "wrap") rules += ' _7b13';
-    else rules += ' _7c13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
-    rules += ' -_6BNtrc-b13';
-    rules += ' vx13';
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
-    if (props.isDisabled) rules += ' pp13';
-    else {
-        if (props.isPressed) rules += ' pt13';
-        else if (props.isFocusVisible) rules += ' pt13';
-        else if (props.isHovered) rules += ' pt13';
-        else rules += ' pv13';
+    if (props.isFocusVisible) rules += ' _Lf131';
+    else rules += ' _Le131';
+    rules += ' Oh131';
+    if (props.selectionStyle === "highlight") rules += ' Ola131';
+    else rules += ' Olc131';
+    rules += ' _Mc131';
+    rules += ' _MlkNNfn131';
+    rules += ' _Kb131';
+    rules += ' _KlToPtrc131';
+    rules += ' _Pa131';
+    if (props.isFirstItem) rules += ' Wr131';
+    else rules += ' WLPOtrc131';
+    if (props.selectionStyle === "highlight") rules += ' _lLPOtrc131';
+    else if (props.selectionStyle === "checkbox") {
+        if (props.isNextSelected) rules += ' _lr131';
+        else rules += ' _lLPOtrc131';
     }
-    rules += ' pl40ub4c13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
+    rules += ' _Ar131';
+    rules += ' _zr131';
+    if (props.isQuiet) rules += ' ob131';
+    else rules += ' o7E7Gic131';
+    if (props.isQuiet) rules += ' nb131';
+    else rules += ' n7E7Gic131';
+    if (props.isQuiet) rules += ' kb131';
+    else rules += ' k7E7Gic131';
+    if (props.isQuiet) rules += ' jb131';
+    else rules += ' j7E7Gic131';
+    rules += ' _9c131';
+    rules += ' _Ob131';
     return rules;
 };
-let $6d4c8b365b6e9016$export$31d1842a0fd736e6 = " sd13 z2U5Crc13 y2U5Crc13 B2U5Crc13 AvoofG13 _dc13 eb13";
-let $6d4c8b365b6e9016$export$1ca1ec8b29a4ce27 = " sb13 ZuUmpre13 FuUmpre13 Ht13 Hsu13 -_8sjo0b-t5ZbAob13";
-let $6d4c8b365b6e9016$var$image = " z2U5Crc13 y2U5Crc13 B2U5Crc13 AvoofG13 Ht13 Hsu13 _dc13 oa13 na13 ka13 ja13 ZC13 fa13 _Hb13";
-let $6d4c8b365b6e9016$var$actionButtonGroup = " zkG38H13 ykG38H13 BkG38H13 AvoofG13 _dc13 __Ac13 It13 Isu13";
-let $6d4c8b365b6e9016$var$listActionMenu = " z6Nrfjc13 y6Nrfjc13 B6Nrfjc13 AvoofG13 _dc13";
+let $6d4c8b365b6e9016$var$rowWrapper = " sc131";
+let $6d4c8b365b6e9016$var$image = " z2U5Crc131 y2U5Crc131 B2U5Crc131 AvoofG131 Ht131 Hsu131 _dc131 oa131 na131 ka131 ja131 ZC131 fa131 _Hb131";
+let $6d4c8b365b6e9016$var$actionButtonGroup = " zkG38H131 ykG38H131 BkG38H131 AvoofG131 _dc131 __Ac131 It131 Isu131";
+let $6d4c8b365b6e9016$var$listActionMenu = " z6Nrfjc131 y6Nrfjc131 B6Nrfjc131 AvoofG131 _dc131";
 const $6d4c8b365b6e9016$var$listCheckbox = function anonymous(props) {
     let rules = " ";
-    rules += ' z2CW8rb13';
-    rules += ' y2CW8rb13';
-    rules += ' B2CW8rb13';
-    rules += ' AvoofG13';
-    rules += ' _dc13';
-    rules += ' Hv13';
-    if (props.isDisabled) rules += ' _6b13';
-    else rules += ' _6c13';
+    rules += ' z2CW8rb131';
+    rules += ' y2CW8rb131';
+    rules += ' B2CW8rb131';
+    rules += ' AvoofG131';
+    rules += ' _dc131';
+    rules += ' Hv131';
+    if (props.isDisabled) rules += ' _6b131';
+    else rules += ' _6c131';
     return rules;
 };
-const $6d4c8b365b6e9016$var$listTrailingIcon = " znWsohc13 ynWsohc13 BnWsohc13 AvoofG13 _dc13 sd13 eb13 It13 Isu13";
-const $6d4c8b365b6e9016$var$centeredWrapper = " sd13 eb13 _Ca13 Za13 Fb13";
-const $6d4c8b365b6e9016$var$loadingSpinnerWrapper = " TuNalie13 QuNalie13 SuNalie13 RuNalie13";
-const $6d4c8b365b6e9016$var$emptyStateWrapper = " sd13 eb13 _Ca13 Za13 Fb13 _oa13 Tf13 Qf13 Sf13 Rf13";
+const $6d4c8b365b6e9016$var$listTrailingIcon = " znWsohc131 ynWsohc131 BnWsohc131 AvoofG131 _dc131 sd131 eb131 It131 Isu131";
+let $6d4c8b365b6e9016$var$dragButtonContainer = " zdYeQw131 ydYeQw131 BdYeQw131 AvoofG131 _dc131 sd131 eb131 Zi131";
+const $6d4c8b365b6e9016$var$centeredWrapper = " sd131 eb131 _Ca131 Za131 Fb131";
+const $6d4c8b365b6e9016$var$loadingSpinnerWrapper = " TuNalie131 QuNalie131 SuNalie131 RuNalie131";
+const $6d4c8b365b6e9016$var$emptyStateWrapper = " sd131 eb131 _Ca131 Za131 Fb131 _oa131 Tf131 Qf131 Sf131 Rf131";
 function $6d4c8b365b6e9016$var$ListSelectionCheckbox({ isDisabled: isDisabled }) {
     let selectionContext = (0, $alyq6$useSlottedContext)((0, $alyq6$CheckboxContext), 'selection');
     let isSelectionDisabled = isDisabled || !!selectionContext?.isDisabled;
@@ -634,24 +556,6 @@ function $6d4c8b365b6e9016$var$ListSelectionCheckbox({ isDisabled: isDisabled })
         })
     });
 }
-function $6d4c8b365b6e9016$var$isNextSelected(id, state) {
-    if (id == null || !state) return false;
-    let keyAfter = state.collection.getKeyAfter(id);
-    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
-}
-function $6d4c8b365b6e9016$export$aebccab86af12e73(id, state) {
-    if (id == null || !state) return false;
-    let keyBefore = state.collection.getKeyBefore(id);
-    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
-}
-function $6d4c8b365b6e9016$export$50edc5c91910aafe(id, state) {
-    if (id == null || !state) return false;
-    return state.collection.getFirstKey() === id;
-}
-function $6d4c8b365b6e9016$var$isLastItem(id, state) {
-    if (id == null || !state) return false;
-    return state.collection.getLastKey() === id;
-}
 function $6d4c8b365b6e9016$export$c6bde0c04b033c0e(props1) {
     let ref = (0, $alyq6$useRef)(null);
     let { hasChildItems: hasChildItems, ...otherProps } = props1;
@@ -674,35 +578,35 @@ function $6d4c8b365b6e9016$export$c6bde0c04b033c0e(props1) {
                 isQuiet: isQuiet,
                 scale: scale,
                 selectionStyle: selectionStyle,
-                isPrevNotSelected: !$6d4c8b365b6e9016$export$aebccab86af12e73(renderProps.id, renderProps.state),
+                isPrevNotSelected: !$6d4c8b365b6e9016$var$isPrevSelected(renderProps.id, renderProps.state),
                 isNextSelected: $6d4c8b365b6e9016$var$isNextSelected(renderProps.id, renderProps.state),
                 isNextNotSelected: !$6d4c8b365b6e9016$var$isNextSelected(renderProps.id, renderProps.state),
-                isFirstItem: $6d4c8b365b6e9016$export$50edc5c91910aafe(renderProps.id, renderProps.state),
+                isFirstItem: $6d4c8b365b6e9016$var$isFirstItem(renderProps.id, renderProps.state),
                 isLastItem: $6d4c8b365b6e9016$var$isLastItem(renderProps.id, renderProps.state)
             }),
         children: (renderProps)=>{
             let { children: children } = props1;
-            let { selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, id: id, state: state } = renderProps;
-            return /*#__PURE__*/ (0, $alyq6$jsxs)((0, $alyq6$Provider), {
+            let { selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, id: id, state: state, allowsDragging: allowsDragging, isFocusVisibleWithin: isFocusVisibleWithin } = renderProps;
+            return /*#__PURE__*/ (0, $alyq6$jsx)((0, $alyq6$Provider), {
                 values: [
                     [
                         (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                         {
                             slots: {
                                 [(0, $alyq6$DEFAULT_SLOT)]: {
-                                    styles: $6d4c8b365b6e9016$export$1237798dc640739a({
+                                    styles: (0, $ba354da66aaa1d20$export$1237798dc640739a)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
                                 },
                                 label: {
-                                    styles: $6d4c8b365b6e9016$export$1237798dc640739a({
+                                    styles: (0, $ba354da66aaa1d20$export$1237798dc640739a)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
                                 },
                                 description: {
-                                    styles: $6d4c8b365b6e9016$export$6d59db4903f20f7d({
+                                    styles: (0, $ba354da66aaa1d20$export$6d59db4903f20f7d)({
                                         ...renderProps,
                                         overflowMode: overflowMode
                                     })
@@ -717,9 +621,9 @@ function $6d4c8b365b6e9016$export$c6bde0c04b033c0e(props1) {
                                 icon: {
                                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                         slot: 'icon',
-                                        styles: $6d4c8b365b6e9016$export$31d1842a0fd736e6
+                                        styles: (0, $ba354da66aaa1d20$export$31d1842a0fd736e6)
                                     }),
-                                    styles: $6d4c8b365b6e9016$export$1ca1ec8b29a4ce27
+                                    styles: (0, $ba354da66aaa1d20$export$1ca1ec8b29a4ce27)
                                 }
                             }
                         }
@@ -748,89 +652,119 @@ function $6d4c8b365b6e9016$export$c6bde0c04b033c0e(props1) {
                         }
                     ]
                 ],
-                children: [
-                    /*#__PURE__*/ (0, $alyq6$jsx)("div", {
-                        className: $6d4c8b365b6e9016$var$listRowBackground({
-                            ...renderProps,
-                            selectionStyle: selectionStyle,
-                            isQuiet: isQuiet,
-                            isPrevSelected: $6d4c8b365b6e9016$export$aebccab86af12e73(id, state),
-                            isNextSelected: $6d4c8b365b6e9016$var$isNextSelected(id, state),
-                            isPrevNotSelected: !$6d4c8b365b6e9016$export$aebccab86af12e73(id, state),
-                            isNextNotSelected: !$6d4c8b365b6e9016$var$isNextSelected(id, state),
-                            isFirstItem: $6d4c8b365b6e9016$export$50edc5c91910aafe(id, state),
-                            isLastItem: $6d4c8b365b6e9016$var$isLastItem(id, state)
-                        })
-                    }),
-                    renderProps.isFocusVisible && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
-                        className: $6d4c8b365b6e9016$var$listRowFocusRing({
-                            ...renderProps,
-                            selectionStyle: selectionStyle,
-                            isQuiet: isQuiet,
-                            isPrevSelected: $6d4c8b365b6e9016$export$aebccab86af12e73(id, state),
-                            isNextSelected: $6d4c8b365b6e9016$var$isNextSelected(id, state),
-                            isPrevNotSelected: !$6d4c8b365b6e9016$export$aebccab86af12e73(id, state),
-                            isNextNotSelected: !$6d4c8b365b6e9016$var$isNextSelected(id, state),
-                            isFirstItem: $6d4c8b365b6e9016$export$50edc5c91910aafe(id, state),
-                            isLastItem: $6d4c8b365b6e9016$var$isLastItem(id, state)
-                        })
-                    }),
-                    selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $alyq6$jsx)($6d4c8b365b6e9016$var$ListSelectionCheckbox, {
-                        isDisabled: isDisabled
-                    }),
-                    typeof children === 'string' ? /*#__PURE__*/ (0, $alyq6$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
-                        slot: "label",
-                        children: children
-                    }) : children,
-                    isLinkOut && !hideLinkOutIcon && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
-                        className: $6d4c8b365b6e9016$var$listTrailingIcon,
-                        children: /*#__PURE__*/ (0, $alyq6$jsx)((0, $d9f847a2895a93dc$export$2e2bcd8739ae039), {
-                            size: "M",
-                            className: function anonymous(props) {
-                                let rules = " ";
-                                if (props.direction === "rtl") {
-                                    rules += ' -Z4Pn4c-a13';
-                                    rules += ' __Ha13';
-                                }
-                                rules += ' -_8sjo0b-t5ZbAob13';
-                                return rules;
-                            }({
-                                direction: direction
+                children: /*#__PURE__*/ (0, $alyq6$jsxs)("div", {
+                    className: $6d4c8b365b6e9016$var$rowWrapper,
+                    children: [
+                        /*#__PURE__*/ (0, $alyq6$jsx)("div", {
+                            className: $6d4c8b365b6e9016$var$listRowBackground({
+                                ...renderProps,
+                                selectionStyle: selectionStyle,
+                                isQuiet: isQuiet,
+                                isDropTarget: renderProps.isDropTarget,
+                                isPrevSelected: $6d4c8b365b6e9016$var$isPrevSelected(id, state),
+                                isNextSelected: $6d4c8b365b6e9016$var$isNextSelected(id, state),
+                                isPrevNotSelected: !$6d4c8b365b6e9016$var$isPrevSelected(id, state),
+                                isNextNotSelected: !$6d4c8b365b6e9016$var$isNextSelected(id, state),
+                                isFirstItem: $6d4c8b365b6e9016$var$isFirstItem(id, state),
+                                isLastItem: $6d4c8b365b6e9016$var$isLastItem(id, state)
                             })
-                        })
-                    }),
-                    hasChildItems && !isLinkOut && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
-                        className: $6d4c8b365b6e9016$var$listTrailingIcon,
-                        children: /*#__PURE__*/ (0, $alyq6$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
-                            className: function anonymous(props) {
-                                let rules = " ";
-                                if (props.direction === "rtl") {
-                                    rules += ' -Z4Pn4c-a13';
-                                    rules += ' __Ha13';
-                                } else if (props.direction === "ltr") {
-                                    rules += ' -Z4Pn4c-b13';
-                                    rules += ' __Ha13';
-                                }
-                                if (props.direction === "rtl") {
-                                    rules += ' -_04Pn4c-a13';
-                                    rules += ' __Ha13';
-                                } else if (props.direction === "ltr") {
-                                    rules += ' -_04Pn4c-b13';
-                                    rules += ' __Ha13';
-                                }
-                                rules += ' -_8sjo0b-t5ZbAob13';
-                                return rules;
-                            }({
-                                direction: direction
+                        }),
+                        renderProps.isFocusVisible && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
+                            className: $6d4c8b365b6e9016$var$listRowFocusRing({
+                                ...renderProps,
+                                selectionStyle: selectionStyle,
+                                isQuiet: isQuiet,
+                                isPrevSelected: $6d4c8b365b6e9016$var$isPrevSelected(id, state),
+                                isNextSelected: $6d4c8b365b6e9016$var$isNextSelected(id, state),
+                                isPrevNotSelected: !$6d4c8b365b6e9016$var$isPrevSelected(id, state),
+                                isNextNotSelected: !$6d4c8b365b6e9016$var$isNextSelected(id, state),
+                                isFirstItem: $6d4c8b365b6e9016$var$isFirstItem(id, state),
+                                isLastItem: $6d4c8b365b6e9016$var$isLastItem(id, state)
+                            })
+                        }),
+                        allowsDragging && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
+                            className: $6d4c8b365b6e9016$var$dragButtonContainer,
+                            children: !isDisabled && /*#__PURE__*/ (0, $alyq6$jsx)((0, $3c1ab1fd8f31a3e2$export$4c99a519d851f90c), {
+                                isFocusVisibleWithin: isFocusVisibleWithin
+                            })
+                        }),
+                        selectionMode !== 'none' && selectionBehavior === 'toggle' && /*#__PURE__*/ (0, $alyq6$jsx)($6d4c8b365b6e9016$var$ListSelectionCheckbox, {
+                            isDisabled: isDisabled
+                        }),
+                        typeof children === 'string' ? /*#__PURE__*/ (0, $alyq6$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
+                            slot: "label",
+                            children: children
+                        }) : children,
+                        isLinkOut && !hideLinkOutIcon && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
+                            className: $6d4c8b365b6e9016$var$listTrailingIcon,
+                            children: /*#__PURE__*/ (0, $alyq6$jsx)((0, $d9f847a2895a93dc$export$2e2bcd8739ae039), {
+                                size: "M",
+                                className: function anonymous(props) {
+                                    let rules = " ";
+                                    if (props.direction === "rtl") {
+                                        rules += ' -Z4Pn4c-a131';
+                                        rules += ' __Ha131';
+                                    }
+                                    rules += ' -_8sjo0b-t5ZbAob131';
+                                    return rules;
+                                }({
+                                    direction: direction
+                                })
+                            })
+                        }),
+                        hasChildItems && !isLinkOut && /*#__PURE__*/ (0, $alyq6$jsx)("div", {
+                            className: $6d4c8b365b6e9016$var$listTrailingIcon,
+                            children: /*#__PURE__*/ (0, $alyq6$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
+                                className: function anonymous(props) {
+                                    let rules = " ";
+                                    if (props.direction === "rtl") {
+                                        rules += ' -Z4Pn4c-a131';
+                                        rules += ' __Ha131';
+                                    } else if (props.direction === "ltr") {
+                                        rules += ' -Z4Pn4c-b131';
+                                        rules += ' __Ha131';
+                                    }
+                                    if (props.direction === "rtl") {
+                                        rules += ' -_04Pn4c-a131';
+                                        rules += ' __Ha131';
+                                    } else if (props.direction === "ltr") {
+                                        rules += ' -_04Pn4c-b131';
+                                        rules += ' __Ha131';
+                                    }
+                                    rules += ' -_8sjo0b-t5ZbAob131';
+                                    return rules;
+                                }({
+                                    direction: direction
+                                })
                             })
                         })
-                    })
-                ]
+                    ]
+                })
             });
         }
     });
 }
+function $6d4c8b365b6e9016$var$isNextSelected(id, state) {
+    if (id == null || !state) return false;
+    let keyAfter = state.collection.getKeyAfter(id);
+    return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+function $6d4c8b365b6e9016$var$isPrevSelected(id, state) {
+    if (id == null || !state) return false;
+    let keyBefore = state.collection.getKeyBefore(id);
+    return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
+function $6d4c8b365b6e9016$var$isFirstItem(id, state) {
+    if (id == null || !state) return false;
+    return state.collection.getFirstKey() === id;
+}
+function $6d4c8b365b6e9016$var$isLastItem(id, state) {
+    if (id == null || !state) return false;
+    let key = state.collection.getLastKey();
+    let node = key ? state.collection.getItem(key) : null;
+    return node ? node.key === id : false;
+}
 
 
-export {$6d4c8b365b6e9016$export$870039b0abfe3de0 as ListViewContext, $6d4c8b365b6e9016$export$84d0dd190d551cd1 as ListView, $6d4c8b365b6e9016$export$1237798dc640739a as label, $6d4c8b365b6e9016$export$6d59db4903f20f7d as description, $6d4c8b365b6e9016$export$31d1842a0fd736e6 as iconCenterWrapper, $6d4c8b365b6e9016$export$1ca1ec8b29a4ce27 as icon, $6d4c8b365b6e9016$export$aebccab86af12e73 as isPrevSelected, $6d4c8b365b6e9016$export$50edc5c91910aafe as isFirstItem, $6d4c8b365b6e9016$export$c6bde0c04b033c0e as ListViewItem};
+export {$6d4c8b365b6e9016$export$870039b0abfe3de0 as ListViewContext, $6d4c8b365b6e9016$export$6f8e4757b55cd070 as S2ListLayout, $6d4c8b365b6e9016$export$84d0dd190d551cd1 as ListView, $6d4c8b365b6e9016$export$c6bde0c04b033c0e as ListViewItem};
 //# sourceMappingURL=ListView.mjs.map