@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/TreeView/TreeView.js

@@ -1,1514 +1,1154 @@
-import { c } from 'react-compiler-runtime';
-import { FileDirectoryOpenFillIcon, FileDirectoryFillIcon, ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
-import { clsx } from 'clsx';
-import React, { useEffect } from 'react';
-import classes from './TreeView.module.css.js';
-import { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog.js';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import { useControllableState } from '../hooks/useControllableState.js';
-import { useId } from '../hooks/useId.js';
-import useSafeTimeout from '../hooks/useSafeTimeout.js';
-import { useSlots } from '../hooks/useSlots.js';
-import { getAccessibleName } from './shared.js';
-import { useRovingTabIndex, getFirstChildElement } from './useRovingTabIndex.js';
-import { useTypeahead } from './useTypeahead.js';
-import { IconButton } from '../Button/IconButton.js';
-import { ButtonComponent } from '../Button/Button.js';
-import { ActionList } from '../ActionList/index.js';
-import { usePlatform } from '../KeybindingHint/platform.js';
-import { isSlot } from '../utils/is-slot.js';
-import { fixedForwardRef } from '../utils/modern-polymorphic.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { getAccessibleKeybindingHintString } from '../KeybindingHint/utils.js';
-import { AriaStatus } from '../live-region/AriaStatus.js';
-import Spinner from '../Spinner/Spinner.js';
-import { Tooltip } from '../TooltipV2/Tooltip.js';
-import { Dialog } from '../Dialog/Dialog.js';
-import Text from '../Text/Text.js';
-import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
-import { SkeletonText } from '../SkeletonText/SkeletonText.js';
-
-const RootContext = /*#__PURE__*/React.createContext({
-  announceUpdate: () => {},
-  expandedStateCache: {
-    current: new Map()
-  },
-  scrollElementIntoView: () => {}
+import { useId as useId$1 } from "../hooks/useId.js";
+import Spinner from "../Spinner/Spinner.js";
+import { AriaStatus } from "../live-region/AriaStatus.js";
+import { fixedForwardRef } from "../utils/modern-polymorphic.js";
+import Text_default from "../Text/Text.js";
+import VisuallyHidden from "../_VisuallyHidden.js";
+import { usePlatform } from "../KeybindingHint/platform.js";
+import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
+import useSafeTimeout from "../hooks/useSafeTimeout.js";
+import { Tooltip } from "../TooltipV2/Tooltip.js";
+import { IconButton } from "../Button/IconButton.js";
+import { ButtonComponent } from "../Button/Button.js";
+import { isSlot } from "../utils/is-slot.js";
+import { useSlots } from "../hooks/useSlots.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog.js";
+import { ActionList } from "../ActionList/index.js";
+import TreeView_module_css_default from "./TreeView.module.css.js";
+import { useControllableState } from "../hooks/useControllableState.js";
+import { getAccessibleName } from "./shared.js";
+import { getFirstChildElement, useRovingTabIndex } from "./useRovingTabIndex.js";
+import { useTypeahead } from "./useTypeahead.js";
+import { SkeletonAvatar } from "../SkeletonAvatar/SkeletonAvatar.js";
+import { SkeletonText } from "../SkeletonText/SkeletonText.js";
+import { c } from "react-compiler-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, FileDirectoryOpenFillIcon } from "@primer/octicons-react";
+//#region src/TreeView/TreeView.tsx
+const RootContext = /*#__PURE__*/ React.createContext({
+	announceUpdate: () => {},
+	expandedStateCache: { current: /* @__PURE__ */ new Map() },
+	scrollElementIntoView: () => {}
 });
-const ItemContext = /*#__PURE__*/React.createContext({
-  itemId: '',
-  level: 1,
-  isSubTreeEmpty: false,
-  setIsSubTreeEmpty: () => {},
-  isExpanded: false,
-  setIsExpanded: () => {},
-  leadingVisualId: '',
-  trailingVisualId: '',
-  trailingActionId: ''
+const ItemContext = /*#__PURE__*/ React.createContext({
+	itemId: "",
+	level: 1,
+	isSubTreeEmpty: false,
+	setIsSubTreeEmpty: () => {},
+	isExpanded: false,
+	setIsExpanded: () => {},
+	leadingVisualId: "",
+	trailingVisualId: "",
+	trailingActionId: ""
 });
-
-// Module-private channel from LoadingItem to the Item it renders. Lets us mark the placeholder
-// row with `data-loading` (used by CSS to suppress hover affordances) without exposing an
-// internal-only prop on the public TreeViewItemProps API.
-const LoadingPlaceholderContext = /*#__PURE__*/React.createContext(false);
-
-// ----------------------------------------------------------------------------
-// TreeView
-
-/* Size of toggle icon in pixels. */
+const LoadingPlaceholderContext = /*#__PURE__*/ React.createContext(false);
 const TOGGLE_ICON_SIZE = 12;
-const Root = t0 => {
-  const $ = c(26);
-  const {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    children,
-    flat,
-    truncate: t1,
-    className,
-    style
-  } = t0;
-  const truncate = t1 === undefined ? true : t1;
-  const containerRef = React.useRef(null);
-  const mouseDownRef = React.useRef(false);
-  const [ariaLiveMessage, setAriaLiveMessage] = React.useState("");
-  let t2;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = message => {
-      setAriaLiveMessage(message);
-    };
-    $[0] = t2;
-  } else {
-    t2 = $[0];
-  }
-  const announceUpdate = t2;
-  let t3;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
-      mouseDownRef.current = true;
-    };
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const onMouseDown = t3;
-  let t4;
-  let t5;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = () => {
-      const onMouseUp = function onMouseUp() {
-        mouseDownRef.current = false;
-      };
-      document.addEventListener("mouseup", onMouseUp);
-      return () => {
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-    };
-    t5 = [];
-    $[2] = t4;
-    $[3] = t5;
-  } else {
-    t4 = $[2];
-    t5 = $[3];
-  }
-  useEffect(t4, t5);
-  let t6;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = {
-      containerRef,
-      mouseDownRef
-    };
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  useRovingTabIndex(t6);
-  let t7;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = {
-      containerRef,
-      onFocusChange: _temp
-    };
-    $[5] = t7;
-  } else {
-    t7 = $[5];
-  }
-  useTypeahead(t7);
-  const pendingScrollRef = React.useRef(null);
-  let t8;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = element_0 => {
-      if (!element_0) {
-        return;
-      }
-      if (pendingScrollRef.current !== null) {
-        cancelAnimationFrame(pendingScrollRef.current);
-      }
-      pendingScrollRef.current = requestAnimationFrame(() => {
-        pendingScrollRef.current = null;
-        if (!element_0.isConnected) {
-          return;
-        }
-        element_0.scrollIntoView({
-          block: "nearest",
-          inline: "nearest"
-        });
-      });
-    };
-    $[6] = t8;
-  } else {
-    t8 = $[6];
-  }
-  const scrollElementIntoView = t8;
-  let t10;
-  let t9;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = () => () => {
-      if (pendingScrollRef.current !== null) {
-        cancelAnimationFrame(pendingScrollRef.current);
-      }
-    };
-    t10 = [];
-    $[7] = t10;
-    $[8] = t9;
-  } else {
-    t10 = $[7];
-    t9 = $[8];
-  }
-  useEffect(t9, t10);
-  const expandedStateCache = React.useRef(null);
-  if (expandedStateCache.current === null) {
-    let t11;
-    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-      t11 = new Map();
-      $[9] = t11;
-    } else {
-      t11 = $[9];
-    }
-    expandedStateCache.current = t11;
-  }
-  let t11;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = {
-      announceUpdate,
-      expandedStateCache,
-      scrollElementIntoView
-    };
-    $[10] = t11;
-  } else {
-    t11 = $[10];
-  }
-  let t12;
-  if ($[11] !== ariaLiveMessage) {
-    t12 = /*#__PURE__*/jsx(VisuallyHidden, {
-      children: /*#__PURE__*/jsx(AriaStatus, {
-        announceOnShow: true,
-        children: ariaLiveMessage
-      })
-    });
-    $[11] = ariaLiveMessage;
-    $[12] = t12;
-  } else {
-    t12 = $[12];
-  }
-  const t13 = truncate || false;
-  let t14;
-  if ($[13] !== className) {
-    t14 = clsx(className, classes.TreeViewRootUlStyles);
-    $[13] = className;
-    $[14] = t14;
-  } else {
-    t14 = $[14];
-  }
-  let t15;
-  if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== flat || $[19] !== style || $[20] !== t13 || $[21] !== t14) {
-    t15 = /*#__PURE__*/jsx("ul", {
-      ref: containerRef,
-      role: "tree",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      "data-omit-spacer": flat,
-      "data-truncate-text": t13,
-      onMouseDown: onMouseDown,
-      className: t14,
-      style: style,
-      children: children
-    });
-    $[15] = ariaLabel;
-    $[16] = ariaLabelledby;
-    $[17] = children;
-    $[18] = flat;
-    $[19] = style;
-    $[20] = t13;
-    $[21] = t14;
-    $[22] = t15;
-  } else {
-    t15 = $[22];
-  }
-  let t16;
-  if ($[23] !== t12 || $[24] !== t15) {
-    t16 = /*#__PURE__*/jsx(RootContext.Provider, {
-      value: t11,
-      children: /*#__PURE__*/jsxs(Fragment, {
-        children: [t12, t15]
-      })
-    });
-    $[23] = t12;
-    $[24] = t15;
-    $[25] = t16;
-  } else {
-    t16 = $[25];
-  }
-  return t16;
+const Root = (t0) => {
+	const $ = c(26);
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, flat, truncate: t1, className, style } = t0;
+	const truncate = t1 === void 0 ? true : t1;
+	const containerRef = React.useRef(null);
+	const mouseDownRef = React.useRef(false);
+	const [ariaLiveMessage, setAriaLiveMessage] = React.useState("");
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (message) => {
+			setAriaLiveMessage(message);
+		};
+		$[0] = t2;
+	} else t2 = $[0];
+	const announceUpdate = t2;
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			mouseDownRef.current = true;
+		};
+		$[1] = t3;
+	} else t3 = $[1];
+	const onMouseDown = t3;
+	let t4;
+	let t5;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const onMouseUp = function onMouseUp() {
+				mouseDownRef.current = false;
+			};
+			document.addEventListener("mouseup", onMouseUp);
+			return () => {
+				document.removeEventListener("mouseup", onMouseUp);
+			};
+		};
+		t5 = [];
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t4 = $[2];
+		t5 = $[3];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			containerRef,
+			mouseDownRef
+		};
+		$[4] = t6;
+	} else t6 = $[4];
+	useRovingTabIndex(t6);
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			containerRef,
+			onFocusChange: _temp
+		};
+		$[5] = t7;
+	} else t7 = $[5];
+	useTypeahead(t7);
+	const pendingScrollRef = React.useRef(null);
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (element_0) => {
+			if (!element_0) return;
+			if (pendingScrollRef.current !== null) cancelAnimationFrame(pendingScrollRef.current);
+			pendingScrollRef.current = requestAnimationFrame(() => {
+				pendingScrollRef.current = null;
+				if (!element_0.isConnected) return;
+				element_0.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+			});
+		};
+		$[6] = t8;
+	} else t8 = $[6];
+	const scrollElementIntoView = t8;
+	let t10;
+	let t9;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => () => {
+			if (pendingScrollRef.current !== null) cancelAnimationFrame(pendingScrollRef.current);
+		};
+		t10 = [];
+		$[7] = t10;
+		$[8] = t9;
+	} else {
+		t10 = $[7];
+		t9 = $[8];
+	}
+	useEffect(t9, t10);
+	const expandedStateCache = React.useRef(null);
+	if (expandedStateCache.current === null) {
+		let t11;
+		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /* @__PURE__ */ new Map();
+			$[9] = t11;
+		} else t11 = $[9];
+		expandedStateCache.current = t11;
+	}
+	let t11;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = {
+			announceUpdate,
+			expandedStateCache,
+			scrollElementIntoView
+		};
+		$[10] = t11;
+	} else t11 = $[10];
+	let t12;
+	if ($[11] !== ariaLiveMessage) {
+		t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
+			announceOnShow: true,
+			children: ariaLiveMessage
+		}) });
+		$[11] = ariaLiveMessage;
+		$[12] = t12;
+	} else t12 = $[12];
+	const t13 = truncate || false;
+	let t14;
+	if ($[13] !== className) {
+		t14 = clsx(className, TreeView_module_css_default.TreeViewRootUlStyles);
+		$[13] = className;
+		$[14] = t14;
+	} else t14 = $[14];
+	let t15;
+	if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== flat || $[19] !== style || $[20] !== t13 || $[21] !== t14) {
+		t15 = /*#__PURE__*/ jsx("ul", {
+			ref: containerRef,
+			role: "tree",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-omit-spacer": flat,
+			"data-truncate-text": t13,
+			onMouseDown,
+			className: t14,
+			style,
+			children
+		});
+		$[15] = ariaLabel;
+		$[16] = ariaLabelledby;
+		$[17] = children;
+		$[18] = flat;
+		$[19] = style;
+		$[20] = t13;
+		$[21] = t14;
+		$[22] = t15;
+	} else t15 = $[22];
+	let t16;
+	if ($[23] !== t12 || $[24] !== t15) {
+		t16 = /*#__PURE__*/ jsx(RootContext.Provider, {
+			value: t11,
+			children: /*#__PURE__*/ jsxs(Fragment, { children: [t12, t15] })
+		});
+		$[23] = t12;
+		$[24] = t15;
+		$[25] = t16;
+	} else t16 = $[25];
+	return t16;
 };
-Root.displayName = 'TreeView';
-
-// ----------------------------------------------------------------------------
-// TreeView.Item
-
-// We build this type manually (instead of using `PolymorphicProps`) so we can omit
-// `ref` and `onSelect` from the underlying element's props:
-// - `ref` is provided solely by `fixedForwardRef` (typed as `Ref<unknown>`), preserving
-//   backward compatibility with consumers that pass `Ref<HTMLElement>` rather than the
-//   intrinsic element's ref type (e.g. `Ref<HTMLLIElement>` for the default `<li>`).
-// - Our custom `onSelect` (typed against `HTMLElement`) replaces the native
-//   `ReactEventHandler<HTMLLIElement>` that would otherwise be intersected in
-//   and conflict with existing consumers.
-// `DistributiveOmit` keeps the omit distributing over `as` union types.
-
-const ItemImpl = fixedForwardRef(({
-  id: itemId,
-  containIntrinsicSize,
-  current: isCurrentItem = false,
-  defaultExpanded,
-  expanded,
-  onExpandedChange,
-  onSelect,
-  children,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledby,
-  secondaryActions,
-  as: Component,
-  ...restProps
-}, ref) => {
-  // When `as` is provided (and resolves to something other than the default
-  // `'li'`), we render the polymorphic element as the `role="treeitem"` and
-  // wrap it in an `<li role="none">` so the markup remains valid (a
-  // `<ul role="tree">` may only directly contain `<li>` elements). When `as`
-  // is omitted, or explicitly set to `'li'`, we render an `<li>` directly as
-  // the treeitem to preserve the historical DOM shape and ref typing for
-  // existing consumers and to avoid nesting `<li>` inside `<li>`.
-  const ItemElement = Component !== null && Component !== void 0 ? Component : 'li';
-  const isPolymorphic = Component !== undefined && Component !== 'li';
-  const [slots, rest] = useSlots(children, {
-    leadingAction: LeadingAction,
-    leadingVisual: LeadingVisual,
-    trailingVisual: TrailingVisual
-  });
-  const {
-    expandedStateCache,
-    scrollElementIntoView
-  } = React.useContext(RootContext);
-  const labelId = useId();
-  const leadingVisualId = useId();
-  const trailingVisualId = useId();
-  const trailingActionId = useId();
-  const [isExpanded, setIsExpanded] = useControllableState({
-    name: itemId,
-    // If the item was previously mounted, its expanded state might be cached.
-    // We check the cache first, and then fall back to the defaultExpanded prop.
-    // If defaultExpanded is not provided, we default to false unless the item
-    // is the current item, in which case we default to true.
-    defaultValue: () => {
-      var _ref, _expandedStateCache$c, _expandedStateCache$c2;
-      return (_ref = (_expandedStateCache$c = (_expandedStateCache$c2 = expandedStateCache.current) === null || _expandedStateCache$c2 === void 0 ? void 0 : _expandedStateCache$c2.get(itemId)) !== null && _expandedStateCache$c !== void 0 ? _expandedStateCache$c : defaultExpanded) !== null && _ref !== void 0 ? _ref : isCurrentItem;
-    },
-    value: expanded === null ? false : expanded,
-    onChange: onExpandedChange
-  });
-  const {
-    level
-  } = React.useContext(ItemContext);
-  const isLoadingPlaceholder = React.useContext(LoadingPlaceholderContext);
-  const {
-    hasSubTree,
-    subTree,
-    childrenWithoutSubTree
-  } = useSubTree(rest);
-  const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
-  const [actionCommandPressed, setActionCommandPressed] = React.useState(false);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const platform = usePlatform();
-
-  // Set the expanded state and cache it
-  const setIsExpandedWithCache = React.useCallback(newIsExpanded => {
-    var _expandedStateCache$c3;
-    setIsExpanded(newIsExpanded);
-    (_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 ? void 0 : _expandedStateCache$c3.set(itemId, newIsExpanded);
-  }, [itemId, setIsExpanded, expandedStateCache]);
-
-  // Expand or collapse the subtree
-  const toggle = React.useCallback(event => {
-    setIsExpandedWithCache(!isExpanded);
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-  }, [isExpanded, setIsExpandedWithCache]);
-  const activateActionsDialog = React.useCallback(() => {
-    if (!secondaryActions) return;
-    if (secondaryActions.length > 1) {
-      // If there are multiple secondary actions, open the action dialog
-      // as this allows users to select the action they want to interact with.
-      setActionCommandPressed(true);
-    } else {
-      // If there is only one secondary action, trigger it directly
-      const action = secondaryActions[0].onClick;
-      action();
-    }
-  }, [secondaryActions]);
-  const handleKeyDown = React.useCallback(event => {
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-        if (onSelect) {
-          onSelect(event);
-        } else {
-          toggle(event);
-        }
-        event.stopPropagation();
-        break;
-      case 'ArrowRight':
-        // Ignore if modifier keys are pressed
-        if (event.altKey || event.metaKey) return;
-        event.preventDefault();
-        event.stopPropagation();
-        setIsExpandedWithCache(true);
-        break;
-      case 'ArrowLeft':
-        // Ignore if modifier keys are pressed
-        if (event.altKey || event.metaKey) return;
-        event.preventDefault();
-        event.stopPropagation();
-        setIsExpandedWithCache(false);
-        break;
-      case 'U':
-      case 'u':
-        if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
-        activateActionsDialog();
-        break;
-    }
-  }, [onSelect, setIsExpandedWithCache, toggle, activateActionsDialog]);
-  const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
-  const shortcut = `Shift+${platform === 'apple' ? 'Meta' : 'Control'}+U`;
-  const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, platform)}) for more actions.`;
-  const itemElement =
-  /*#__PURE__*/
-  // @ts-ignore TypeScript can't infer that the `ref` here is compatible
-  // with every possible polymorphic `ItemElement` (it's typed as
-  // `Ref<unknown>` by `fixedForwardRef`), so we cast at the boundary.
-  jsxs(ItemElement, {
-    ...restProps,
-    className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
-    ref: ref,
-    tabIndex: 0,
-    id: itemId,
-    role: "treeitem",
-    "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
-    "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
-    "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
-    "aria-level": level,
-    "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
-    "aria-current": isCurrentItem ? 'true' : undefined,
-    "aria-selected": isFocused ? 'true' : 'false',
-    "data-has-leading-action": slots.leadingAction ? true : undefined,
-    "data-loading": isLoadingPlaceholder ? true : undefined,
-    onKeyDown: handleKeyDown,
-    onFocus: event => {
-      // Defer scroll to the next animation frame so that rapid keyboard
-      // navigation (held key) coalesces into a single reflow per frame
-      scrollElementIntoView(event.currentTarget.firstElementChild);
-
-      // Set the focused state
-      setIsFocused(true);
-
-      // Prevent focus event from bubbling up to parent items
-      event.stopPropagation();
-    },
-    onBlur: () => setIsFocused(false),
-    onClick: event => {
-      if (onSelect) {
-        onSelect(event);
-      } else {
-        toggle(event);
-      }
-      event.stopPropagation();
-    },
-    onAuxClick: event => {
-      if (onSelect && event.button === 1) {
-        onSelect(event);
-      }
-      event.stopPropagation();
-    },
-    children: [/*#__PURE__*/jsxs("div", {
-      className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
-      style: {
-        // @ts-ignore CSS custom property
-        '--level': level,
-        contentVisibility: containIntrinsicSize ? 'auto' : undefined,
-        containIntrinsicSize
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          gridArea: 'spacer',
-          display: 'flex'
-        },
-        children: /*#__PURE__*/jsx(LevelIndicatorLines, {
-          level: level
-        })
-      }), slots.leadingAction, hasSubTree ?
-      /*#__PURE__*/
-      // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
-      // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
-      // This has specific advice that the chevron be available only to pointer event.
-      // If they take up a button role, they become unnecessary and numerous tab stops.
-      jsx("div", {
-        className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
-        onClick: event => {
-          if (onSelect) {
-            toggle(event);
-          }
-        },
-        children: isExpanded ? /*#__PURE__*/jsx(ChevronDownIcon, {
-          size: TOGGLE_ICON_SIZE
-        }) : /*#__PURE__*/jsx(ChevronRightIcon, {
-          size: TOGGLE_ICON_SIZE
-        })
-      }) : null, /*#__PURE__*/jsxs("div", {
-        id: labelId,
-        className: clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent),
-        children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
-          className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
-          children: childrenWithoutSubTree
-        }), slots.trailingVisual]
-      }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(TrailingAction, {
-          items: secondaryActions,
-          shortcutText: trailingActionShortcutText
-        }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
-          items: secondaryActions,
-          onClose: () => setActionCommandPressed(false)
-        }) : null]
-      }) : null]
-    }), subTree]
-  });
-  return /*#__PURE__*/jsx(ItemContext.Provider, {
-    value: {
-      itemId,
-      level: level + 1,
-      isSubTreeEmpty,
-      setIsSubTreeEmpty,
-      isExpanded,
-      setIsExpanded: setIsExpandedWithCache,
-      leadingVisualId,
-      trailingVisualId,
-      trailingActionId
-    },
-    children: isPolymorphic ? /*#__PURE__*/jsx("li", {
-      role: "none",
-      children: itemElement
-    }) : itemElement
-  });
+Root.displayName = "TreeView";
+const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: isCurrentItem = false, defaultExpanded, expanded, onExpandedChange, onSelect, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, secondaryActions, as: Component, ...restProps }, ref) => {
+	const ItemElement = Component !== null && Component !== void 0 ? Component : "li";
+	const isPolymorphic = Component !== void 0 && Component !== "li";
+	const [slots, rest] = useSlots(children, {
+		leadingAction: LeadingAction,
+		leadingVisual: LeadingVisual,
+		trailingVisual: TrailingVisual
+	});
+	const { expandedStateCache, scrollElementIntoView } = React.useContext(RootContext);
+	const labelId = useId$1();
+	const leadingVisualId = useId$1();
+	const trailingVisualId = useId$1();
+	const trailingActionId = useId$1();
+	const [isExpanded, setIsExpanded] = useControllableState({
+		name: itemId,
+		defaultValue: () => {
+			var _ref, _expandedStateCache$c, _expandedStateCache$c2;
+			return (_ref = (_expandedStateCache$c = (_expandedStateCache$c2 = expandedStateCache.current) === null || _expandedStateCache$c2 === void 0 ? void 0 : _expandedStateCache$c2.get(itemId)) !== null && _expandedStateCache$c !== void 0 ? _expandedStateCache$c : defaultExpanded) !== null && _ref !== void 0 ? _ref : isCurrentItem;
+		},
+		value: expanded === null ? false : expanded,
+		onChange: onExpandedChange
+	});
+	const { level } = React.useContext(ItemContext);
+	const isLoadingPlaceholder = React.useContext(LoadingPlaceholderContext);
+	const { hasSubTree, subTree, childrenWithoutSubTree } = useSubTree(rest);
+	const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree);
+	const [actionCommandPressed, setActionCommandPressed] = React.useState(false);
+	const [isFocused, setIsFocused] = React.useState(false);
+	const platform = usePlatform();
+	const setIsExpandedWithCache = React.useCallback((newIsExpanded) => {
+		var _expandedStateCache$c3;
+		setIsExpanded(newIsExpanded);
+		(_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 || _expandedStateCache$c3.set(itemId, newIsExpanded);
+	}, [
+		itemId,
+		setIsExpanded,
+		expandedStateCache
+	]);
+	const toggle = React.useCallback((event) => {
+		setIsExpandedWithCache(!isExpanded);
+		event === null || event === void 0 || event.stopPropagation();
+	}, [isExpanded, setIsExpandedWithCache]);
+	const activateActionsDialog = React.useCallback(() => {
+		if (!secondaryActions) return;
+		if (secondaryActions.length > 1) setActionCommandPressed(true);
+		else {
+			const action = secondaryActions[0].onClick;
+			action();
+		}
+	}, [secondaryActions]);
+	const handleKeyDown = React.useCallback((event) => {
+		switch (event.key) {
+			case "Enter":
+			case " ":
+				if (onSelect) onSelect(event);
+				else toggle(event);
+				event.stopPropagation();
+				break;
+			case "ArrowRight":
+				if (event.altKey || event.metaKey) return;
+				event.preventDefault();
+				event.stopPropagation();
+				setIsExpandedWithCache(true);
+				break;
+			case "ArrowLeft":
+				if (event.altKey || event.metaKey) return;
+				event.preventDefault();
+				event.stopPropagation();
+				setIsExpandedWithCache(false);
+				break;
+			case "U":
+			case "u":
+				if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
+				activateActionsDialog();
+				break;
+		}
+	}, [
+		onSelect,
+		setIsExpandedWithCache,
+		toggle,
+		activateActionsDialog
+	]);
+	const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
+	const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(`Shift+${platform === "apple" ? "Meta" : "Control"}+U`, platform)}) for more actions.`;
+	const itemElement = /*#__PURE__*/ jsxs(ItemElement, {
+		...restProps,
+		className: clsx("PRIVATE_TreeView-item", className, TreeView_module_css_default.TreeViewItem),
+		ref,
+		tabIndex: 0,
+		id: itemId,
+		role: "treeitem",
+		"aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : void 0 : ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ""}`.trim(),
+		"aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(" ") : void 0,
+		"aria-level": level,
+		"aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? void 0 : isExpanded,
+		"aria-current": isCurrentItem ? "true" : void 0,
+		"aria-selected": isFocused ? "true" : "false",
+		"data-has-leading-action": slots.leadingAction ? true : void 0,
+		"data-loading": isLoadingPlaceholder ? true : void 0,
+		onKeyDown: handleKeyDown,
+		onFocus: (event) => {
+			scrollElementIntoView(event.currentTarget.firstElementChild);
+			setIsFocused(true);
+			event.stopPropagation();
+		},
+		onBlur: () => setIsFocused(false),
+		onClick: (event) => {
+			if (onSelect) onSelect(event);
+			else toggle(event);
+			event.stopPropagation();
+		},
+		onAuxClick: (event) => {
+			if (onSelect && event.button === 1) onSelect(event);
+			event.stopPropagation();
+		},
+		children: [/*#__PURE__*/ jsxs("div", {
+			className: clsx("PRIVATE_TreeView-item-container", TreeView_module_css_default.TreeViewItemContainer),
+			style: {
+				"--level": level,
+				contentVisibility: containIntrinsicSize ? "auto" : void 0,
+				containIntrinsicSize
+			},
+			children: [
+				/*#__PURE__*/ jsx("div", {
+					style: {
+						gridArea: "spacer",
+						display: "flex"
+					},
+					children: /*#__PURE__*/ jsx(LevelIndicatorLines, { level })
+				}),
+				slots.leadingAction,
+				hasSubTree ? /*#__PURE__*/ jsx("div", {
+					className: clsx("PRIVATE_TreeView-item-toggle", onSelect && "PRIVATE_TreeView-item-toggle--hover", level === 1 && "PRIVATE_TreeView-item-toggle--end", TreeView_module_css_default.TreeViewItemToggle, TreeView_module_css_default.TreeViewItemToggleHover, TreeView_module_css_default.TreeViewItemToggleEnd),
+					onClick: (event) => {
+						if (onSelect) toggle(event);
+					},
+					children: isExpanded ? /*#__PURE__*/ jsx(ChevronDownIcon, { size: TOGGLE_ICON_SIZE }) : /*#__PURE__*/ jsx(ChevronRightIcon, { size: TOGGLE_ICON_SIZE })
+				}) : null,
+				/*#__PURE__*/ jsxs("div", {
+					id: labelId,
+					className: clsx("PRIVATE_TreeView-item-content", TreeView_module_css_default.TreeViewItemContent),
+					children: [
+						slots.leadingVisual,
+						/*#__PURE__*/ jsx("span", {
+							className: clsx("PRIVATE_TreeView-item-content-text", TreeView_module_css_default.TreeViewItemContentText),
+							children: childrenWithoutSubTree
+						}),
+						slots.trailingVisual
+					]
+				}),
+				secondaryActions ? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(TrailingAction, {
+					items: secondaryActions,
+					shortcutText: trailingActionShortcutText
+				}), actionCommandPressed ? /*#__PURE__*/ jsx(ActionDialog, {
+					items: secondaryActions,
+					onClose: () => setActionCommandPressed(false)
+				}) : null] }) : null
+			]
+		}), subTree]
+	});
+	return /*#__PURE__*/ jsx(ItemContext.Provider, {
+		value: {
+			itemId,
+			level: level + 1,
+			isSubTreeEmpty,
+			setIsSubTreeEmpty,
+			isExpanded,
+			setIsExpanded: setIsExpandedWithCache,
+			leadingVisualId,
+			trailingVisualId,
+			trailingActionId
+		},
+		children: isPolymorphic ? /*#__PURE__*/ jsx("li", {
+			role: "none",
+			children: itemElement
+		}) : itemElement
+	});
 });
-const Item = Object.assign(ItemImpl, {
-  displayName: 'TreeView.Item'
-});
-
+const Item = Object.assign(ItemImpl, { displayName: "TreeView.Item" });
 /** Lines to indicate the depth of an item in a TreeView */
-const LevelIndicatorLines = t0 => {
-  const $ = c(3);
-  const {
-    level
-  } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      width: "100%",
-      display: "flex"
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  let t2;
-  if ($[1] !== level) {
-    t2 = /*#__PURE__*/jsx("div", {
-      style: t1,
-      children: Array.from({
-        length: level - 1
-      }).map(_temp2)
-    });
-    $[1] = level;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  return t2;
+const LevelIndicatorLines = (t0) => {
+	const $ = c(3);
+	const { level } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			width: "100%",
+			display: "flex"
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== level) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			style: t1,
+			children: Array.from({ length: level - 1 }).map(_temp2)
+		});
+		$[1] = level;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
 };
-
-// ----------------------------------------------------------------------------
-// TreeView.SubTree
-
-const SubTree = t0 => {
-  const $ = c(29);
-  const {
-    count,
-    state,
-    children,
-    "aria-label": ariaLabel
-  } = t0;
-  const {
-    announceUpdate
-  } = React.useContext(RootContext);
-  const {
-    itemId,
-    isExpanded,
-    isSubTreeEmpty,
-    setIsSubTreeEmpty
-  } = React.useContext(ItemContext);
-  const loadingItemRef = React.useRef(null);
-  const ref = React.useRef(null);
-  const [loadingFocused, setLoadingFocused] = React.useState(false);
-  const [subTreeLabel, setSubTreeLabel] = React.useState("");
-  const previousState = usePreviousValue(state);
-  const {
-    safeSetTimeout
-  } = useSafeTimeout();
-  let t1;
-  let t2;
-  if ($[0] !== children || $[1] !== isSubTreeEmpty || $[2] !== setIsSubTreeEmpty || $[3] !== state) {
-    t1 = () => {
-      if (state === undefined || state === "done") {
-        if (!isSubTreeEmpty && !children) {
-          setIsSubTreeEmpty(true);
-        } else {
-          if (isSubTreeEmpty && children) {
-            setIsSubTreeEmpty(false);
-          }
-        }
-      }
-    };
-    t2 = [state, isSubTreeEmpty, setIsSubTreeEmpty, children];
-    $[0] = children;
-    $[1] = isSubTreeEmpty;
-    $[2] = setIsSubTreeEmpty;
-    $[3] = state;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t1 = $[4];
-    t2 = $[5];
-  }
-  React.useEffect(t1, t2);
-  let t3;
-  let t4;
-  if ($[6] !== announceUpdate || $[7] !== itemId || $[8] !== loadingFocused || $[9] !== previousState || $[10] !== safeSetTimeout || $[11] !== state) {
-    t3 = () => {
-      const parentElement = document.getElementById(itemId);
-      if (!parentElement) {
-        return;
-      }
-      setSubTreeLabel(getAccessibleName(parentElement));
-      if (previousState === "loading" && state === "done") {
-        var _ref$current;
-        const parentName = getAccessibleName(parentElement);
-        if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.childElementCount) {
-          announceUpdate(`${parentName} content loaded`);
-        } else {
-          announceUpdate(`${parentName} is empty`);
-        }
-        if (loadingFocused) {
-          const firstChild = getFirstChildElement(parentElement);
-          if (firstChild) {
-            safeSetTimeout(() => {
-              firstChild.focus();
-            });
-          } else {
-            safeSetTimeout(() => {
-              parentElement.focus();
-            });
-          }
-          setLoadingFocused(false);
-        }
-      } else {
-        if (state === "loading") {
-          const parentName_0 = getAccessibleName(parentElement);
-          announceUpdate(`${parentName_0} content loading`);
-        }
-      }
-    };
-    t4 = [loadingFocused, previousState, state, itemId, announceUpdate, ref, safeSetTimeout];
-    $[6] = announceUpdate;
-    $[7] = itemId;
-    $[8] = loadingFocused;
-    $[9] = previousState;
-    $[10] = safeSetTimeout;
-    $[11] = state;
-    $[12] = t3;
-    $[13] = t4;
-  } else {
-    t3 = $[12];
-    t4 = $[13];
-  }
-  React.useEffect(t3, t4);
-  let t5;
-  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = () => {
-      const handleFocus = function handleFocus() {
-        setLoadingFocused(true);
-      };
-      const handleBlur = function handleBlur(event) {
-        if (!event.relatedTarget) {
-          return;
-        }
-        setLoadingFocused(false);
-      };
-      const loadingElement = loadingItemRef.current;
-      if (!loadingElement) {
-        return;
-      }
-      loadingElement.addEventListener("focus", handleFocus);
-      loadingElement.addEventListener("blur", handleBlur);
-      return () => {
-        loadingElement.removeEventListener("focus", handleFocus);
-        loadingElement.removeEventListener("blur", handleBlur);
-      };
-    };
-    $[14] = t5;
-  } else {
-    t5 = $[14];
-  }
-  let t6;
-  if ($[15] !== state) {
-    t6 = [loadingItemRef, state];
-    $[15] = state;
-    $[16] = t6;
-  } else {
-    t6 = $[16];
-  }
-  React.useEffect(t5, t6);
-  if (!isExpanded) {
-    return null;
-  }
-  let t7;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = {
-      listStyle: "none",
-      padding: 0,
-      margin: 0
-    };
-    $[17] = t7;
-  } else {
-    t7 = $[17];
-  }
-  const t8 = ariaLabel || subTreeLabel;
-  let t9;
-  if ($[18] !== children || $[19] !== count || $[20] !== state) {
-    t9 = state === "loading" ? /*#__PURE__*/jsx(LoadingItem, {
-      ref: loadingItemRef,
-      count: count
-    }) : children;
-    $[18] = children;
-    $[19] = count;
-    $[20] = state;
-    $[21] = t9;
-  } else {
-    t9 = $[21];
-  }
-  let t10;
-  if ($[22] !== isSubTreeEmpty || $[23] !== state) {
-    t10 = isSubTreeEmpty && state !== "loading" ? /*#__PURE__*/jsx(EmptyItem, {}) : null;
-    $[22] = isSubTreeEmpty;
-    $[23] = state;
-    $[24] = t10;
-  } else {
-    t10 = $[24];
-  }
-  let t11;
-  if ($[25] !== t10 || $[26] !== t8 || $[27] !== t9) {
-    t11 = /*#__PURE__*/jsxs("ul", {
-      role: "group",
-      style: t7,
-      ref: ref,
-      "aria-label": t8,
-      children: [t9, t10]
-    });
-    $[25] = t10;
-    $[26] = t8;
-    $[27] = t9;
-    $[28] = t11;
-  } else {
-    t11 = $[28];
-  }
-  return t11;
+const SubTree = (t0) => {
+	const $ = c(29);
+	const { count, state, children, "aria-label": ariaLabel } = t0;
+	const { announceUpdate } = React.useContext(RootContext);
+	const { itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty } = React.useContext(ItemContext);
+	const loadingItemRef = React.useRef(null);
+	const ref = React.useRef(null);
+	const [loadingFocused, setLoadingFocused] = React.useState(false);
+	const [subTreeLabel, setSubTreeLabel] = React.useState("");
+	const previousState = usePreviousValue(state);
+	const { safeSetTimeout } = useSafeTimeout();
+	let t1;
+	let t2;
+	if ($[0] !== children || $[1] !== isSubTreeEmpty || $[2] !== setIsSubTreeEmpty || $[3] !== state) {
+		t1 = () => {
+			if (state === void 0 || state === "done") {
+				if (!isSubTreeEmpty && !children) setIsSubTreeEmpty(true);
+				else if (isSubTreeEmpty && children) setIsSubTreeEmpty(false);
+			}
+		};
+		t2 = [
+			state,
+			isSubTreeEmpty,
+			setIsSubTreeEmpty,
+			children
+		];
+		$[0] = children;
+		$[1] = isSubTreeEmpty;
+		$[2] = setIsSubTreeEmpty;
+		$[3] = state;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[6] !== announceUpdate || $[7] !== itemId || $[8] !== loadingFocused || $[9] !== previousState || $[10] !== safeSetTimeout || $[11] !== state) {
+		t3 = () => {
+			const parentElement = document.getElementById(itemId);
+			if (!parentElement) return;
+			setSubTreeLabel(getAccessibleName(parentElement));
+			if (previousState === "loading" && state === "done") {
+				var _ref$current;
+				const parentName = getAccessibleName(parentElement);
+				if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.childElementCount) announceUpdate(`${parentName} content loaded`);
+				else announceUpdate(`${parentName} is empty`);
+				if (loadingFocused) {
+					const firstChild = getFirstChildElement(parentElement);
+					if (firstChild) safeSetTimeout(() => {
+						firstChild.focus();
+					});
+					else safeSetTimeout(() => {
+						parentElement.focus();
+					});
+					setLoadingFocused(false);
+				}
+			} else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
+		};
+		t4 = [
+			loadingFocused,
+			previousState,
+			state,
+			itemId,
+			announceUpdate,
+			ref,
+			safeSetTimeout
+		];
+		$[6] = announceUpdate;
+		$[7] = itemId;
+		$[8] = loadingFocused;
+		$[9] = previousState;
+		$[10] = safeSetTimeout;
+		$[11] = state;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t3 = $[12];
+		t4 = $[13];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
+			const handleFocus = function handleFocus() {
+				setLoadingFocused(true);
+			};
+			const handleBlur = function handleBlur(event) {
+				if (!event.relatedTarget) return;
+				setLoadingFocused(false);
+			};
+			const loadingElement = loadingItemRef.current;
+			if (!loadingElement) return;
+			loadingElement.addEventListener("focus", handleFocus);
+			loadingElement.addEventListener("blur", handleBlur);
+			return () => {
+				loadingElement.removeEventListener("focus", handleFocus);
+				loadingElement.removeEventListener("blur", handleBlur);
+			};
+		};
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== state) {
+		t6 = [loadingItemRef, state];
+		$[15] = state;
+		$[16] = t6;
+	} else t6 = $[16];
+	React.useEffect(t5, t6);
+	if (!isExpanded) return null;
+	let t7;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			listStyle: "none",
+			padding: 0,
+			margin: 0
+		};
+		$[17] = t7;
+	} else t7 = $[17];
+	const t8 = ariaLabel || subTreeLabel;
+	let t9;
+	if ($[18] !== children || $[19] !== count || $[20] !== state) {
+		t9 = state === "loading" ? /*#__PURE__*/ jsx(LoadingItem, {
+			ref: loadingItemRef,
+			count
+		}) : children;
+		$[18] = children;
+		$[19] = count;
+		$[20] = state;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== isSubTreeEmpty || $[23] !== state) {
+		t10 = isSubTreeEmpty && state !== "loading" ? /*#__PURE__*/ jsx(EmptyItem, {}) : null;
+		$[22] = isSubTreeEmpty;
+		$[23] = state;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10 || $[26] !== t8 || $[27] !== t9) {
+		t11 = /*#__PURE__*/ jsxs("ul", {
+			role: "group",
+			style: t7,
+			ref,
+			"aria-label": t8,
+			children: [t9, t10]
+		});
+		$[25] = t10;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
+	return t11;
 };
-SubTree.displayName = 'TreeView.SubTree';
-SubTree.__SLOT__ = Symbol('TreeView.SubTree');
+SubTree.displayName = "TreeView.SubTree";
+SubTree.__SLOT__ = Symbol("TreeView.SubTree");
 function usePreviousValue(value) {
-  const ref = React.useRef(value);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  // eslint-disable-next-line react-hooks/refs
-  return ref.current;
+	const ref = React.useRef(value);
+	React.useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
 }
 const SkeletonItem = () => {
-  const $ = c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/jsxs("span", {
-      className: clsx(classes.TreeViewSkeletonItemContainerStyle, classes.TreeViewItemSkeleton, "PRIVATE_TreeView-item-skeleton"),
-      children: [/*#__PURE__*/jsx(SkeletonAvatar, {
-        size: 16,
-        square: true
-      }), /*#__PURE__*/jsx(SkeletonText, {
-        className: classes.TreeItemSkeletonTextStyles
-      })]
-    });
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /*#__PURE__*/ jsxs("span", {
+			className: clsx(TreeView_module_css_default.TreeViewSkeletonItemContainerStyle, TreeView_module_css_default.TreeViewItemSkeleton, "PRIVATE_TreeView-item-skeleton"),
+			children: [/*#__PURE__*/ jsx(SkeletonAvatar, {
+				size: 16,
+				square: true
+			}), /*#__PURE__*/ jsx(SkeletonText, { className: TreeView_module_css_default.TreeItemSkeletonTextStyles })]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
-const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(15);
-  const {
-    count
-  } = t0;
-  const itemId = useId();
-  if (count) {
-    const t1 = ref;
-    let t2;
-    if ($[0] !== count) {
-      t2 = Array.from({
-        length: count
-      }).map(_temp3);
-      $[0] = count;
-      $[1] = t2;
-    } else {
-      t2 = $[1];
-    }
-    let t3;
-    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-      $[2] = t3;
-    } else {
-      t3 = $[2];
-    }
-    let t4;
-    if ($[3] !== count) {
-      t4 = /*#__PURE__*/jsxs("div", {
-        className: t3,
-        children: ["Loading ", count, " items"]
-      });
-      $[3] = count;
-      $[4] = t4;
-    } else {
-      t4 = $[4];
-    }
-    let t5;
-    if ($[5] !== itemId || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
-      t5 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
-        value: true,
-        children: /*#__PURE__*/jsxs(Item, {
-          id: itemId,
-          ref: t1,
-          children: [t2, t4]
-        })
-      });
-      $[5] = itemId;
-      $[6] = t1;
-      $[7] = t2;
-      $[8] = t4;
-      $[9] = t5;
-    } else {
-      t5 = $[9];
-    }
-    return t5;
-  }
-  const t1 = ref;
-  let t2;
-  let t3;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /*#__PURE__*/jsx(LeadingVisual, {
-      children: /*#__PURE__*/jsx(Spinner, {
-        size: "small"
-      })
-    });
-    t3 = /*#__PURE__*/jsx(Text, {
-      className: "fgColor-muted",
-      children: "Loading..."
-    });
-    $[10] = t2;
-    $[11] = t3;
-  } else {
-    t2 = $[10];
-    t3 = $[11];
-  }
-  let t4;
-  if ($[12] !== itemId || $[13] !== t1) {
-    t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
-      value: true,
-      children: /*#__PURE__*/jsxs(Item, {
-        id: itemId,
-        ref: t1,
-        children: [t2, t3]
-      })
-    });
-    $[12] = itemId;
-    $[13] = t1;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
-  }
-  return t4;
+const LoadingItem = /*#__PURE__*/ React.forwardRef((t0, ref) => {
+	const $ = c(15);
+	const { count } = t0;
+	const itemId = useId$1();
+	if (count) {
+		const t1 = ref;
+		let t2;
+		if ($[0] !== count) {
+			t2 = Array.from({ length: count }).map(_temp3);
+			$[0] = count;
+			$[1] = t2;
+		} else t2 = $[1];
+		let t3;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
+			$[2] = t3;
+		} else t3 = $[2];
+		let t4;
+		if ($[3] !== count) {
+			t4 = /*#__PURE__*/ jsxs("div", {
+				className: t3,
+				children: [
+					"Loading ",
+					count,
+					" items"
+				]
+			});
+			$[3] = count;
+			$[4] = t4;
+		} else t4 = $[4];
+		let t5;
+		if ($[5] !== itemId || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
+			t5 = /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
+				value: true,
+				children: /*#__PURE__*/ jsxs(Item, {
+					id: itemId,
+					ref: t1,
+					children: [t2, t4]
+				})
+			});
+			$[5] = itemId;
+			$[6] = t1;
+			$[7] = t2;
+			$[8] = t4;
+			$[9] = t5;
+		} else t5 = $[9];
+		return t5;
+	}
+	const t1 = ref;
+	let t2;
+	let t3;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /*#__PURE__*/ jsx(LeadingVisual, { children: /*#__PURE__*/ jsx(Spinner, { size: "small" }) });
+		t3 = /*#__PURE__*/ jsx(Text_default, {
+			className: "fgColor-muted",
+			children: "Loading..."
+		});
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t2 = $[10];
+		t3 = $[11];
+	}
+	let t4;
+	if ($[12] !== itemId || $[13] !== t1) {
+		t4 = /*#__PURE__*/ jsx(LoadingPlaceholderContext.Provider, {
+			value: true,
+			children: /*#__PURE__*/ jsxs(Item, {
+				id: itemId,
+				ref: t1,
+				children: [t2, t3]
+			})
+		});
+		$[12] = itemId;
+		$[13] = t1;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
 });
-const EmptyItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = c(4);
-  const t0 = useId();
-  const t1 = ref;
-  let t2;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /*#__PURE__*/jsx(Text, {
-      className: "fgColor-muted",
-      children: "No items found"
-    });
-    $[0] = t2;
-  } else {
-    t2 = $[0];
-  }
-  let t3;
-  if ($[1] !== t0 || $[2] !== t1) {
-    t3 = /*#__PURE__*/jsx(Item, {
-      expanded: null,
-      id: t0,
-      ref: t1,
-      children: t2
-    });
-    $[1] = t0;
-    $[2] = t1;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  return t3;
+const EmptyItem = /*#__PURE__*/ React.forwardRef((props, ref) => {
+	const $ = c(4);
+	const t0 = useId$1();
+	const t1 = ref;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /*#__PURE__*/ jsx(Text_default, {
+			className: "fgColor-muted",
+			children: "No items found"
+		});
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== t0 || $[2] !== t1) {
+		t3 = /*#__PURE__*/ jsx(Item, {
+			expanded: null,
+			id: t0,
+			ref: t1,
+			children: t2
+		});
+		$[1] = t0;
+		$[2] = t1;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
 });
 function useSubTree(children) {
-  const $ = c(8);
-  let t0;
-  if ($[0] !== children) {
-    t0 = React.Children.toArray(children).find(_temp4);
-    $[0] = children;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const subTree = t0;
-  let t1;
-  if ($[2] !== children) {
-    t1 = React.Children.toArray(children).filter(_temp5);
-    $[2] = children;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const childrenWithoutSubTree = t1;
-  const t2 = Boolean(subTree);
-  let t3;
-  if ($[4] !== childrenWithoutSubTree || $[5] !== subTree || $[6] !== t2) {
-    t3 = {
-      subTree,
-      childrenWithoutSubTree,
-      hasSubTree: t2
-    };
-    $[4] = childrenWithoutSubTree;
-    $[5] = subTree;
-    $[6] = t2;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  return t3;
+	const $ = c(8);
+	let t0;
+	if ($[0] !== children) {
+		t0 = React.Children.toArray(children).find(_temp4);
+		$[0] = children;
+		$[1] = t0;
+	} else t0 = $[1];
+	const subTree = t0;
+	let t1;
+	if ($[2] !== children) {
+		t1 = React.Children.toArray(children).filter(_temp5);
+		$[2] = children;
+		$[3] = t1;
+	} else t1 = $[3];
+	const childrenWithoutSubTree = t1;
+	const t2 = Boolean(subTree);
+	let t3;
+	if ($[4] !== childrenWithoutSubTree || $[5] !== subTree || $[6] !== t2) {
+		t3 = {
+			subTree,
+			childrenWithoutSubTree,
+			hasSubTree: t2
+		};
+		$[4] = childrenWithoutSubTree;
+		$[5] = subTree;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 }
-
-// ----------------------------------------------------------------------------
-// TreeView.LeadingVisual and TreeView.TrailingVisual
 function _temp5(child_0) {
-  return !(/*#__PURE__*/React.isValidElement(child_0) && (child_0.type === SubTree || isSlot(child_0, SubTree)));
+	return !(/*#__PURE__*/ React.isValidElement(child_0) && (child_0.type === SubTree || isSlot(child_0, SubTree)));
 }
 function _temp4(child) {
-  return /*#__PURE__*/React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree));
+	return /*#__PURE__*/ React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree));
 }
-const LeadingVisual = props => {
-  const $ = c(13);
-  const {
-    isExpanded,
-    leadingVisualId
-  } = React.useContext(ItemContext);
-  let t0;
-  if ($[0] !== isExpanded || $[1] !== props.children) {
-    t0 = typeof props.children === "function" ? props.children({
-      isExpanded
-    }) : props.children;
-    $[0] = isExpanded;
-    $[1] = props.children;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const children = t0;
-  let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== leadingVisualId || $[5] !== props.label) {
-    t2 = /*#__PURE__*/jsx("div", {
-      className: t1,
-      "aria-hidden": true,
-      id: leadingVisualId,
-      children: props.label
-    });
-    $[4] = leadingVisualId;
-    $[5] = props.label;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = clsx("PRIVATE_TreeView-item-visual", classes.TreeViewItemVisual);
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  let t4;
-  if ($[8] !== children) {
-    t4 = /*#__PURE__*/jsx("div", {
-      className: t3,
-      "aria-hidden": true,
-      children: children
-    });
-    $[8] = children;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  let t5;
-  if ($[10] !== t2 || $[11] !== t4) {
-    t5 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, t4]
-    });
-    $[10] = t2;
-    $[11] = t4;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  return t5;
+const LeadingVisual = (props) => {
+	const $ = c(13);
+	const { isExpanded, leadingVisualId } = React.useContext(ItemContext);
+	let t0;
+	if ($[0] !== isExpanded || $[1] !== props.children) {
+		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+		$[0] = isExpanded;
+		$[1] = props.children;
+		$[2] = t0;
+	} else t0 = $[2];
+	const children = t0;
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== leadingVisualId || $[5] !== props.label) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			className: t1,
+			"aria-hidden": true,
+			id: leadingVisualId,
+			children: props.label
+		});
+		$[4] = leadingVisualId;
+		$[5] = props.label;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual);
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== children) {
+		t4 = /*#__PURE__*/ jsx("div", {
+			className: t3,
+			"aria-hidden": true,
+			children
+		});
+		$[8] = children;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 };
-LeadingVisual.displayName = 'TreeView.LeadingVisual';
-const TrailingVisual = props => {
-  const $ = c(13);
-  const {
-    isExpanded,
-    trailingVisualId
-  } = React.useContext(ItemContext);
-  let t0;
-  if ($[0] !== isExpanded || $[1] !== props.children) {
-    t0 = typeof props.children === "function" ? props.children({
-      isExpanded
-    }) : props.children;
-    $[0] = isExpanded;
-    $[1] = props.children;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const children = t0;
-  let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== props.label || $[5] !== trailingVisualId) {
-    t2 = /*#__PURE__*/jsx("div", {
-      className: t1,
-      "aria-hidden": true,
-      id: trailingVisualId,
-      children: props.label
-    });
-    $[4] = props.label;
-    $[5] = trailingVisualId;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = clsx("PRIVATE_TreeView-item-visual", classes.TreeViewItemVisual);
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  let t4;
-  if ($[8] !== children) {
-    t4 = /*#__PURE__*/jsx("div", {
-      className: t3,
-      "aria-hidden": true,
-      children: children
-    });
-    $[8] = children;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  let t5;
-  if ($[10] !== t2 || $[11] !== t4) {
-    t5 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, t4]
-    });
-    $[10] = t2;
-    $[11] = t4;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  return t5;
+LeadingVisual.displayName = "TreeView.LeadingVisual";
+const TrailingVisual = (props) => {
+	const $ = c(13);
+	const { isExpanded, trailingVisualId } = React.useContext(ItemContext);
+	let t0;
+	if ($[0] !== isExpanded || $[1] !== props.children) {
+		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+		$[0] = isExpanded;
+		$[1] = props.children;
+		$[2] = t0;
+	} else t0 = $[2];
+	const children = t0;
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props.label || $[5] !== trailingVisualId) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			className: t1,
+			"aria-hidden": true,
+			id: trailingVisualId,
+			children: props.label
+		});
+		$[4] = props.label;
+		$[5] = trailingVisualId;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = clsx("PRIVATE_TreeView-item-visual", TreeView_module_css_default.TreeViewItemVisual);
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== children) {
+		t4 = /*#__PURE__*/ jsx("div", {
+			className: t3,
+			"aria-hidden": true,
+			children
+		});
+		$[8] = children;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 };
-TrailingVisual.displayName = 'TreeView.TrailingVisual';
-
-// ----------------------------------------------------------------------------
-// TreeView.LeadingAction
-
-const LeadingAction = props => {
-  const $ = c(12);
-  const {
-    isExpanded
-  } = React.useContext(ItemContext);
-  let t0;
-  if ($[0] !== isExpanded || $[1] !== props.children) {
-    t0 = typeof props.children === "function" ? props.children({
-      isExpanded
-    }) : props.children;
-    $[0] = isExpanded;
-    $[1] = props.children;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  const children = t0;
-  let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== props.label) {
-    t2 = /*#__PURE__*/jsx("div", {
-      className: t1,
-      "aria-hidden": true,
-      children: props.label
-    });
-    $[4] = props.label;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = clsx("PRIVATE_TreeView-item-leading-action", classes.TreeViewItemLeadingAction);
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== children) {
-    t4 = /*#__PURE__*/jsx("div", {
-      className: t3,
-      "aria-hidden": true,
-      children: children
-    });
-    $[7] = children;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  let t5;
-  if ($[9] !== t2 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, t4]
-    });
-    $[9] = t2;
-    $[10] = t4;
-    $[11] = t5;
-  } else {
-    t5 = $[11];
-  }
-  return t5;
+TrailingVisual.displayName = "TreeView.TrailingVisual";
+const LeadingAction = (props) => {
+	const $ = c(12);
+	const { isExpanded } = React.useContext(ItemContext);
+	let t0;
+	if ($[0] !== isExpanded || $[1] !== props.children) {
+		t0 = typeof props.children === "function" ? props.children({ isExpanded }) : props.children;
+		$[0] = isExpanded;
+		$[1] = props.children;
+		$[2] = t0;
+	} else t0 = $[2];
+	const children = t0;
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props.label) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			className: t1,
+			"aria-hidden": true,
+			children: props.label
+		});
+		$[4] = props.label;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = clsx("PRIVATE_TreeView-item-leading-action", TreeView_module_css_default.TreeViewItemLeadingAction);
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== children) {
+		t4 = /*#__PURE__*/ jsx("div", {
+			className: t3,
+			"aria-hidden": true,
+			children
+		});
+		$[7] = children;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 };
-LeadingAction.displayName = 'TreeView.LeadingAction';
-// ----------------------------------------------------------------------------
-// TreeView.TrailingAction
-
-const TrailingAction = props => {
-  const $ = c(14);
-  const {
-    trailingActionId,
-    itemId
-  } = React.useContext(ItemContext);
-  const {
-    items,
-    shortcutText
-  } = props;
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  let t1;
-  if ($[1] !== shortcutText || $[2] !== trailingActionId) {
-    t1 = /*#__PURE__*/jsxs("div", {
-      id: trailingActionId,
-      className: t0,
-      children: ["- ", shortcutText]
-    });
-    $[1] = shortcutText;
-    $[2] = trailingActionId;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  let t2;
-  if ($[4] !== itemId || $[5] !== items) {
-    let t3;
-    if ($[7] !== itemId) {
-      t3 = (t4, index) => {
-        const {
-          label,
-          onClick,
-          icon,
-          count,
-          className
-        } = t4;
-        if (count) {
-          return /*#__PURE__*/jsx(Tooltip, {
-            text: label,
-            children: /*#__PURE__*/jsx(ButtonComponent, {
-              "aria-label": label,
-              leadingVisual: icon,
-              variant: "invisible",
-              className: clsx(className, classes.TreeViewItemTrailingActionButton),
-              onClick: onClick,
-              onKeyDown: () => {
-                const parentElement = document.getElementById(itemId);
-                parentElement === null || parentElement === void 0 ? void 0 : parentElement.focus();
-              },
-              tabIndex: -1,
-              "aria-hidden": true,
-              count: count
-            })
-          }, index);
-        }
-        return /*#__PURE__*/jsx(IconButton, {
-          icon: icon,
-          variant: "invisible",
-          "aria-label": label,
-          className: clsx(className, classes.TreeViewItemTrailingActionButton),
-          onClick: onClick,
-          tabIndex: -1,
-          "aria-hidden": true,
-          onKeyDown: () => {
-            const parentElement_0 = document.getElementById(itemId);
-            parentElement_0 === null || parentElement_0 === void 0 ? void 0 : parentElement_0.focus();
-          }
-        }, index);
-      };
-      $[7] = itemId;
-      $[8] = t3;
-    } else {
-      t3 = $[8];
-    }
-    t2 = items.map(t3);
-    $[4] = itemId;
-    $[5] = items;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[9] !== t2) {
-    t3 = /*#__PURE__*/jsx("div", {
-      className: classes.TreeViewItemTrailingAction,
-      "aria-hidden": true,
-      onClick: _temp6,
-      onKeyDown: _temp7,
-      children: t2
-    });
-    $[9] = t2;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  let t4;
-  if ($[11] !== t1 || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t1, t3]
-    });
-    $[11] = t1;
-    $[12] = t3;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  return t4;
+LeadingAction.displayName = "TreeView.LeadingAction";
+const TrailingAction = (props) => {
+	const $ = c(14);
+	const { trailingActionId, itemId } = React.useContext(ItemContext);
+	const { items, shortcutText } = props;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = clsx("PRIVATE_VisuallyHidden", TreeView_module_css_default.TreeViewVisuallyHidden);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== shortcutText || $[2] !== trailingActionId) {
+		t1 = /*#__PURE__*/ jsxs("div", {
+			id: trailingActionId,
+			className: t0,
+			children: ["- ", shortcutText]
+		});
+		$[1] = shortcutText;
+		$[2] = trailingActionId;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== itemId || $[5] !== items) {
+		let t3;
+		if ($[7] !== itemId) {
+			t3 = (t4, index) => {
+				const { label, onClick, icon, count, className } = t4;
+				if (count) return /*#__PURE__*/ jsx(Tooltip, {
+					text: label,
+					children: /*#__PURE__*/ jsx(ButtonComponent, {
+						"aria-label": label,
+						leadingVisual: icon,
+						variant: "invisible",
+						className: clsx(className, TreeView_module_css_default.TreeViewItemTrailingActionButton),
+						onClick,
+						onKeyDown: () => {
+							const parentElement = document.getElementById(itemId);
+							parentElement === null || parentElement === void 0 || parentElement.focus();
+						},
+						tabIndex: -1,
+						"aria-hidden": true,
+						count
+					})
+				}, index);
+				return /*#__PURE__*/ jsx(IconButton, {
+					icon,
+					variant: "invisible",
+					"aria-label": label,
+					className: clsx(className, TreeView_module_css_default.TreeViewItemTrailingActionButton),
+					onClick,
+					tabIndex: -1,
+					"aria-hidden": true,
+					onKeyDown: () => {
+						const parentElement_0 = document.getElementById(itemId);
+						parentElement_0 === null || parentElement_0 === void 0 || parentElement_0.focus();
+					}
+				}, index);
+			};
+			$[7] = itemId;
+			$[8] = t3;
+		} else t3 = $[8];
+		t2 = items.map(t3);
+		$[4] = itemId;
+		$[5] = items;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[9] !== t2) {
+		t3 = /*#__PURE__*/ jsx("div", {
+			className: TreeView_module_css_default.TreeViewItemTrailingAction,
+			"aria-hidden": true,
+			onClick: _temp6,
+			onKeyDown: _temp7,
+			children: t2
+		});
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t1 || $[12] !== t3) {
+		t4 = /*#__PURE__*/ jsxs(Fragment, { children: [t1, t3] });
+		$[11] = t1;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 };
-TrailingAction.displayName = 'TreeView.TrailingAction';
-// ----------------------------------------------------------------------------
-// TreeView.ActionDialog
-
-const ActionDialog = t0 => {
-  const $ = c(10);
-  const {
-    items,
-    onClose
-  } = t0;
-  const {
-    itemId
-  } = React.useContext(ItemContext);
-  let t1;
-  if ($[0] !== itemId || $[1] !== onClose) {
-    t1 = () => {
-      if (onClose) {
-        onClose();
-      }
-      setTimeout(() => {
-        const parentElement = document.getElementById(itemId);
-        parentElement === null || parentElement === void 0 ? void 0 : parentElement.focus();
-      });
-    };
-    $[0] = itemId;
-    $[1] = onClose;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== items) {
-    t2 = items.map(_temp0);
-    $[3] = items;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== t2) {
-    t3 = /*#__PURE__*/jsx(ActionList, {
-      children: t2
-    });
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== t1 || $[8] !== t3) {
-    t4 = /*#__PURE__*/jsx("div", {
-      onClick: _temp8,
-      onKeyDown: _temp9,
-      children: /*#__PURE__*/jsx(Dialog, {
-        title: "Supplemental actions",
-        onClose: t1,
-        children: t3
-      })
-    });
-    $[7] = t1;
-    $[8] = t3;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  return t4;
+TrailingAction.displayName = "TreeView.TrailingAction";
+const ActionDialog = (t0) => {
+	const $ = c(10);
+	const { items, onClose } = t0;
+	const { itemId } = React.useContext(ItemContext);
+	let t1;
+	if ($[0] !== itemId || $[1] !== onClose) {
+		t1 = () => {
+			if (onClose) onClose();
+			setTimeout(() => {
+				const parentElement = document.getElementById(itemId);
+				parentElement === null || parentElement === void 0 || parentElement.focus();
+			});
+		};
+		$[0] = itemId;
+		$[1] = onClose;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== items) {
+		t2 = items.map(_temp0);
+		$[3] = items;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /*#__PURE__*/ jsx(ActionList, { children: t2 });
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t1 || $[8] !== t3) {
+		t4 = /*#__PURE__*/ jsx("div", {
+			onClick: _temp8,
+			onKeyDown: _temp9,
+			children: /*#__PURE__*/ jsx(Dialog, {
+				title: "Supplemental actions",
+				onClose: t1,
+				children: t3
+			})
+		});
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 };
-ActionDialog.displayName = 'TreeView.ActionDialog';
-
-// ----------------------------------------------------------------------------
-// TreeView.DirectoryIcon
-
+ActionDialog.displayName = "TreeView.ActionDialog";
 const DirectoryIcon = () => {
-  const $ = c(3);
-  const {
-    isExpanded
-  } = React.useContext(ItemContext);
-  const Icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon;
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = clsx("PRIVATE_TreeView-directory-icon", classes.TreeViewDirectoryIcon);
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  let t1;
-  if ($[1] !== Icon) {
-    t1 = /*#__PURE__*/jsx("div", {
-      className: t0,
-      children: /*#__PURE__*/jsx(Icon, {})
-    });
-    $[1] = Icon;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+	const $ = c(3);
+	const { isExpanded } = React.useContext(ItemContext);
+	const Icon = isExpanded ? FileDirectoryOpenFillIcon : FileDirectoryFillIcon;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = clsx("PRIVATE_TreeView-directory-icon", TreeView_module_css_default.TreeViewDirectoryIcon);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== Icon) {
+		t1 = /*#__PURE__*/ jsx("div", {
+			className: t0,
+			children: /*#__PURE__*/ jsx(Icon, {})
+		});
+		$[1] = Icon;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 };
-
-// ----------------------------------------------------------------------------
-// TreeView.ErrorDialog
-
-const ErrorDialog = t0 => {
-  const $ = c(9);
-  const {
-    title: t1,
-    children,
-    onRetry,
-    onDismiss
-  } = t0;
-  const title = t1 === undefined ? "Error" : t1;
-  const {
-    itemId,
-    setIsExpanded
-  } = React.useContext(ItemContext);
-  let t2;
-  if ($[0] !== itemId || $[1] !== onDismiss || $[2] !== onRetry || $[3] !== setIsExpanded) {
-    t2 = gesture => {
-      setTimeout(() => {
-        const parentElement = document.getElementById(itemId);
-        parentElement === null || parentElement === void 0 ? void 0 : parentElement.focus();
-      });
-      if (gesture === "confirm") {
-        onRetry === null || onRetry === void 0 ? void 0 : onRetry();
-      } else {
-        setIsExpanded(false);
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-      }
-    };
-    $[0] = itemId;
-    $[1] = onDismiss;
-    $[2] = onRetry;
-    $[3] = setIsExpanded;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== children || $[6] !== t2 || $[7] !== title) {
-    t3 = /*#__PURE__*/jsx("div", {
-      onKeyDown: _temp1,
-      children: /*#__PURE__*/jsx(ConfirmationDialog, {
-        title: title,
-        onClose: t2,
-        confirmButtonContent: "Retry",
-        cancelButtonContent: "Dismiss",
-        children: children
-      })
-    });
-    $[5] = children;
-    $[6] = t2;
-    $[7] = title;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  return t3;
+const ErrorDialog = (t0) => {
+	const $ = c(9);
+	const { title: t1, children, onRetry, onDismiss } = t0;
+	const title = t1 === void 0 ? "Error" : t1;
+	const { itemId, setIsExpanded } = React.useContext(ItemContext);
+	let t2;
+	if ($[0] !== itemId || $[1] !== onDismiss || $[2] !== onRetry || $[3] !== setIsExpanded) {
+		t2 = (gesture) => {
+			setTimeout(() => {
+				const parentElement = document.getElementById(itemId);
+				parentElement === null || parentElement === void 0 || parentElement.focus();
+			});
+			if (gesture === "confirm") onRetry === null || onRetry === void 0 || onRetry();
+			else {
+				setIsExpanded(false);
+				onDismiss === null || onDismiss === void 0 || onDismiss();
+			}
+		};
+		$[0] = itemId;
+		$[1] = onDismiss;
+		$[2] = onRetry;
+		$[3] = setIsExpanded;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== children || $[6] !== t2 || $[7] !== title) {
+		t3 = /*#__PURE__*/ jsx("div", {
+			onKeyDown: _temp1,
+			children: /*#__PURE__*/ jsx(ConfirmationDialog, {
+				title,
+				onClose: t2,
+				confirmButtonContent: "Retry",
+				cancelButtonContent: "Dismiss",
+				children
+			})
+		});
+		$[5] = children;
+		$[6] = t2;
+		$[7] = title;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 };
-ErrorDialog.displayName = 'TreeView.ErrorDialog';
-
-// ----------------------------------------------------------------------------
-// Export
-
+ErrorDialog.displayName = "TreeView.ErrorDialog";
 const TreeView = Object.assign(Root, {
-  Item,
-  SubTree,
-  LeadingAction,
-  LeadingVisual,
-  TrailingVisual,
-  DirectoryIcon,
-  ErrorDialog
+	Item,
+	SubTree,
+	LeadingAction,
+	LeadingVisual,
+	TrailingVisual,
+	DirectoryIcon,
+	ErrorDialog
 });
 function _temp(element) {
-  if (element instanceof HTMLElement) {
-    element.focus();
-  }
+	if (element instanceof HTMLElement) element.focus();
 }
 function _temp2(_, index) {
-  return /*#__PURE__*/jsx("div", {
-    className: clsx("PRIVATE_TreeView-item-level-line", classes.TreeViewItemLevelLine)
-  }, index);
+	return /*#__PURE__*/ jsx("div", { className: clsx("PRIVATE_TreeView-item-level-line", TreeView_module_css_default.TreeViewItemLevelLine) }, index);
 }
 _temp2.displayName = "_temp2";
 function _temp3(_, i) {
-  return /*#__PURE__*/jsx(SkeletonItem, {
-    "aria-hidden": true
-  }, i);
+	return /*#__PURE__*/ jsx(SkeletonItem, { "aria-hidden": true }, i);
 }
 _temp3.displayName = "_temp3";
 function _temp6(event) {
-  return event.stopPropagation();
+	return event.stopPropagation();
 }
 function _temp7(event_0) {
-  return event_0.stopPropagation();
+	return event_0.stopPropagation();
 }
 function _temp8(event) {
-  event.stopPropagation();
+	event.stopPropagation();
 }
 function _temp9(event_0) {
-  if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event_0.key)) {
-    event_0.stopPropagation();
-  }
+	if ([
+		"Backspace",
+		"ArrowLeft",
+		"ArrowRight",
+		"ArrowUp",
+		"ArrowDown",
+		"Enter"
+	].includes(event_0.key)) event_0.stopPropagation();
 }
 function _temp0(t0, index) {
-  const {
-    label,
-    onClick,
-    icon: Icon,
-    count
-  } = t0;
-  return /*#__PURE__*/jsxs(ActionList.Item, {
-    onSelect: onClick,
-    children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-      children: /*#__PURE__*/jsx(Icon, {})
-    }), label, count ? /*#__PURE__*/jsxs(ActionList.TrailingVisual, {
-      children: [count, /*#__PURE__*/jsx(VisuallyHidden, {
-        children: "items"
-      })]
-    }) : null]
-  }, index);
+	const { label, onClick, icon: Icon, count } = t0;
+	return /*#__PURE__*/ jsxs(ActionList.Item, {
+		onSelect: onClick,
+		children: [
+			/*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) }),
+			label,
+			count ? /*#__PURE__*/ jsxs(ActionList.TrailingVisual, { children: [count, /*#__PURE__*/ jsx(VisuallyHidden, { children: "items" })] }) : null
+		]
+	}, index);
 }
 _temp0.displayName = "_temp0";
 function _temp1(event) {
-  if (["Backspace", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-    event.stopPropagation();
-  }
+	if ([
+		"Backspace",
+		"ArrowLeft",
+		"ArrowRight",
+		"ArrowUp",
+		"ArrowDown",
+		"Enter"
+	].includes(event.key)) event.stopPropagation();
 }
-
+//#endregion
 export { TreeView };