@dxos/react-ui-stack 0.8.3 → 0.8.4-main.f9ba587

package/dist/lib/node/index.cjs

@@ -1,1220 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  Card: () => Card,
-  CardDragPreview: () => CardDragPreview2,
-  CardStack: () => CardStack,
-  CardStackDragPreview: () => CardStackDragPreview,
-  DEFAULT_EXTRINSIC_SIZE: () => DEFAULT_EXTRINSIC_SIZE,
-  DEFAULT_HORIZONTAL_SIZE: () => DEFAULT_HORIZONTAL_SIZE,
-  DEFAULT_VERTICAL_SIZE: () => DEFAULT_VERTICAL_SIZE,
-  Stack: () => Stack,
-  StackContext: () => StackContext,
-  StackItem: () => StackItem,
-  StackItemDragPreview: () => StackItemDragPreview,
-  autoScrollRootAttributes: () => autoScrollRootAttributes,
-  cardChrome: () => cardChrome,
-  cardContent: () => cardContent,
-  cardDialogContent: () => cardDialogContent,
-  cardDialogHeader: () => cardDialogHeader,
-  cardDialogOverflow: () => cardDialogOverflow,
-  cardDialogPaddedOverflow: () => cardDialogPaddedOverflow,
-  cardDialogSearchListRoot: () => cardDialogSearchListRoot,
-  cardHeading: () => cardHeading,
-  cardRoot: () => cardRoot,
-  cardSpacing: () => cardSpacing,
-  cardStackContent: () => cardStackContent,
-  cardStackFooter: () => cardStackFooter,
-  cardStackHeading: () => cardStackHeading,
-  cardStackRoot: () => cardStackRoot,
-  cardText: () => cardText,
-  labelSpacing: () => labelSpacing,
-  railGridHorizontal: () => railGridHorizontal,
-  railGridHorizontalContainFitContent: () => railGridHorizontalContainFitContent,
-  railGridVertical: () => railGridVertical,
-  railGridVerticalContainFitContent: () => railGridVerticalContainFitContent,
-  translations: () => translations_default
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_react_tabster = require("@fluentui/react-tabster");
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
-var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_react2 = require("react");
-var import_react3 = require("react");
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_preserve_offset_on_source = require("@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source");
-var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
-var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_react_tabster2 = require("@fluentui/react-tabster");
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react4 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_dnd = require("@dxos/react-ui-dnd");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_react6 = __toESM(require("react"));
-var import_tracking5 = require("@preact-signals/safe-react/tracking");
-var import_react_tabster3 = require("@fluentui/react-tabster");
-var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react7 = __toESM(require("react"));
-var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_tracking6 = require("@preact-signals/safe-react/tracking");
-var import_react8 = __toESM(require("react"));
-var import_react_ui_dnd2 = require("@dxos/react-ui-dnd");
-var import_tracking7 = require("@preact-signals/safe-react/tracking");
-var import_react9 = __toESM(require("react"));
-var import_keyboard = require("@dxos/keyboard");
-var import_react_ui3 = require("@dxos/react-ui");
-var import_react_ui_attention2 = require("@dxos/react-ui-attention");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_util = require("@dxos/util");
-var import_tracking8 = require("@preact-signals/safe-react/tracking");
-var import_react10 = __toESM(require("react"));
-var import_tracking9 = require("@preact-signals/safe-react/tracking");
-var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react_slot3 = require("@radix-ui/react-slot");
-var import_react11 = __toESM(require("react"));
-var import_react_ui4 = require("@dxos/react-ui");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
-var import_tracking10 = require("@preact-signals/safe-react/tracking");
-var import_react12 = __toESM(require("react"));
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
-var import_tracking11 = require("@preact-signals/safe-react/tracking");
-var import_react_slot4 = require("@radix-ui/react-slot");
-var import_react13 = __toESM(require("react"));
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
-var import_tracking12 = require("@preact-signals/safe-react/tracking");
-var import_react14 = __toESM(require("react"));
-var import_react_ui5 = require("@dxos/react-ui");
-var import_react_ui_theme9 = require("@dxos/react-ui-theme");
-var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
-  const [dropping, setDropping] = (0, import_react2.useState)(false);
-  (0, import_react2.useLayoutEffect)(() => {
-    if (!element || !selfDroppable) {
-      return;
-    }
-    const acceptSourceType = orientation === "horizontal" ? "column" : "card";
-    return (0, import_combine.combine)((0, import_adapter.dropTargetForElements)({
-      element,
-      getData: ({ input, element: element2 }) => {
-        return (0, import_closest_edge.attachClosestEdge)({
-          id,
-          type: orientation === "horizontal" ? "card" : "column"
-        }, {
-          input,
-          element: element2,
-          allowedEdges: [
-            orientation === "horizontal" ? "left" : "top"
-          ]
-        });
-      },
-      onDragEnter: ({ source }) => {
-        if (source.data.type === acceptSourceType) {
-          setDropping(true);
-        }
-      },
-      onDrag: ({ source }) => {
-        if (source.data.type === acceptSourceType) {
-          setDropping(true);
-        }
-      },
-      onDragLeave: () => {
-        return setDropping(false);
-      },
-      onDrop: ({ self, source }) => {
-        setDropping(false);
-        if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
-          onRearrange(source.data, self.data, (0, import_closest_edge.extractClosestEdge)(self.data));
-        }
-      }
-    }), (0, import_element.autoScrollForElements)({
-      element: scrollElement,
-      getAllowedAxis: () => orientation
-    }));
-  }, [
-    element,
-    scrollElement,
-    selfDroppable,
-    orientation,
-    id,
-    onRearrange
-  ]);
-  return {
-    dropping
-  };
-};
-var StackContext = /* @__PURE__ */ (0, import_react3.createContext)({
-  orientation: "vertical",
-  rail: true,
-  size: "intrinsic"
-});
-var useStack = () => (0, import_react3.useContext)(StackContext);
-var idle = {
-  type: "idle"
-};
-var StackItemContext = /* @__PURE__ */ (0, import_react3.createContext)({
-  selfDragHandleRef: () => {
-  },
-  size: "min-content",
-  setSize: () => {
-  },
-  state: idle,
-  setState: () => {
-  }
-});
-var useStackItem = () => (0, import_react3.useContext)(StackItemContext);
-var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
-var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
-var autoScrollRootAttributes = {
-  "data-drag-autoscroll": "idle"
-};
-var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = import_react.Children.count(children), getDropElement, separatorOnScroll, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const [stackElement, stackRef] = (0, import_react.useState)(null);
-    const composedItemRef = (0, import_react_compose_refs.composeRefs)(stackRef, forwardedRef);
-    const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
-      axis: orientation
-    });
-    const styles = {
-      [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
-      ...style
-    };
-    const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
-    const { dropping } = useStackDropForElements({
-      id: props.id,
-      element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
-      scrollElement: stackElement,
-      selfDroppable,
-      orientation,
-      onRearrange
-    });
-    const handleScroll = (0, import_react.useCallback)(() => {
-      if (stackElement && Number.isFinite(separatorOnScroll)) {
-        const scrollPosition = orientation === "horizontal" ? stackElement.scrollLeft : stackElement.scrollTop;
-        const scrollSize = orientation === "horizontal" ? stackElement.scrollWidth : stackElement.scrollHeight;
-        const clientSize = orientation === "horizontal" ? stackElement.clientWidth : stackElement.clientHeight;
-        const separatorHost = stackElement.closest("[data-scroll-separator]");
-        if (separatorHost) {
-          separatorHost.setAttribute("data-scroll-separator", String(scrollPosition > separatorOnScroll));
-          separatorHost.setAttribute("data-scroll-separator-end", String(scrollSize - (scrollPosition + clientSize) > separatorOnScroll));
-        }
-      }
-    }, [
-      stackElement,
-      separatorOnScroll,
-      orientation
-    ]);
-    const gridClasses = (0, import_react.useMemo)(() => {
-      if (!rail) {
-        return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
-      }
-      if (orientation === "horizontal") {
-        return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
-      } else {
-        return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
-      }
-    }, [
-      rail,
-      orientation,
-      size
-    ]);
-    (0, import_react.useEffect)(() => {
-      if (!(stackElement && Number.isFinite(separatorOnScroll))) {
-        return;
-      }
-      const observer = new MutationObserver(() => {
-        handleScroll();
-      });
-      observer.observe(stackElement, {
-        childList: true,
-        subtree: true
-      });
-      return () => {
-        observer.disconnect();
-      };
-    }, [
-      stackElement,
-      handleScroll
-    ]);
-    return /* @__PURE__ */ import_react.default.createElement(StackContext.Provider, {
-      value: {
-        orientation,
-        rail,
-        size,
-        onRearrange
-      }
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      ...props,
-      ...arrowNavigationAttrs,
-      className: (0, import_react_ui_theme.mx)("grid relative", gridClasses, (size === "contain" || size === "contain-fit-content") && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
-      "data-rail": rail,
-      "aria-orientation": orientation,
-      style: styles,
-      ref: composedItemRef,
-      ...Number.isFinite(separatorOnScroll) && {
-        onScroll: handleScroll
-      }
-    }, children, selfDroppable && dropping && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
-      lineInset: 8,
-      terminalInset: -8,
-      gap: -8,
-      edge: orientation === "horizontal" ? "left" : "top"
-    })));
-  } finally {
-    _effect.f();
-  }
-});
-var StackItemContent = /* @__PURE__ */ (0, import_react5.forwardRef)(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { size: stackItemSize } = useStack();
-    const { role } = useStackItem();
-    const style = (0, import_react5.useMemo)(() => layoutManaged ? {} : {
-      gridTemplateRows: [
-        ...toolbar ? [
-          role === "section" ? "calc(var(--toolbar-size) - 1px)" : "var(--toolbar-size)"
-        ] : [],
-        "1fr",
-        ...statusbar ? [
-          "var(--statusbar-size)"
-        ] : []
-      ].join(" ")
-    }, [
-      toolbar,
-      statusbar,
-      layoutManaged
-    ]);
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
-      role: "none",
-      ...props,
-      className: (0, import_react_ui_theme3.mx)("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", toolbar && "[&_.dx-toolbar]:relative [&_.dx-toolbar]:border-be [&_.dx-toolbar]:border-subduedSeparator", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", classNames),
-      style,
-      "data-popover-collision-boundary": true,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var StackItemDragHandle = ({ asChild, children }) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { selfDragHandleRef } = useStackItem();
-    const Root = asChild ? import_react_slot.Slot : "div";
-    return /* @__PURE__ */ import_react6.default.createElement(Root, {
-      ref: selfDragHandleRef,
-      role: "button"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const { orientation } = useStack();
-    const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
-      tabBehavior: "limited"
-    });
-    const Root = asChild ? import_react_slot2.Slot : "div";
-    return /* @__PURE__ */ import_react7.default.createElement(Root, {
-      role: "heading",
-      ...props,
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      className: (0, import_react_ui_theme4.mx)("flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var StackItemHeadingStickyContent = ({ children }) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react7.default.createElement("div", {
-      role: "none",
-      className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react7.forwardRef)(({ attendableId, related, classNames, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention.useAttention)(attendableId);
-    return /* @__PURE__ */ import_react7.default.createElement("h1", {
-      ...props,
-      "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
-      className: (0, import_react_ui_theme4.mx)("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
-var MIN_WIDTH = 20;
-var MIN_HEIGHT = 3;
-var StackItemResizeHandle = () => {
-  var _effect = (0, import_tracking6.useSignals)();
-  try {
-    const { orientation } = useStack();
-    const { setSize, size } = useStackItem();
-    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_dnd2.ResizeHandle, {
-      side: orientation === "horizontal" ? "inline-end" : "block-end",
-      fallbackSize: DEFAULT_EXTRINSIC_SIZE,
-      minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
-      size,
-      onSizeChange: setSize
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var MenuSignifierHorizontal = () => {
-  var _effect = (0, import_tracking8.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react10.default.createElement("svg", {
-      className: "absolute block-end-[7px]",
-      width: 20,
-      height: 2,
-      viewBox: "0 0 20 2",
-      stroke: "currentColor",
-      opacity: 0.5
-    }, /* @__PURE__ */ import_react10.default.createElement("line", {
-      x1: 0.5,
-      y1: 0.75,
-      x2: 19,
-      y2: 0.75,
-      strokeWidth: 1.25,
-      strokeLinecap: "round",
-      strokeDasharray: "6 20",
-      strokeDashoffset: "-6.5"
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var translationKey = "stack";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "resize label": "Drag to resize",
-        "drag handle label": "Drag to rearrange",
-        "pin start label": "Pin to the left sidebar",
-        "pin end label": "Pin to the right sidebar",
-        "increment start label": "Move to the left",
-        "increment end label": "Move to the right",
-        "close label": "Close",
-        "minify label": "Minify"
-      }
-    }
-  }
-];
-var StackItemSigilButton = /* @__PURE__ */ (0, import_react9.forwardRef)(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking7.useSignals)();
-  try {
-    const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention2.useAttention)(attendableId);
-    const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Button, {
-      ...props,
-      variant,
-      classNames: [
-        "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
-        classNames
-      ],
-      ref: forwardedRef
-    }, isMenu && /* @__PURE__ */ import_react9.default.createElement(MenuSignifierHorizontal, null), children);
-  } finally {
-    _effect.f();
-  }
-});
-var StackItemSigil = /* @__PURE__ */ (0, import_react9.forwardRef)(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
-  var _effect = (0, import_tracking7.useSignals)();
-  try {
-    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-    const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react9.useState)(false);
-    const hasActions = actionGroups && actionGroups.length > 0;
-    const button = /* @__PURE__ */ import_react9.default.createElement(StackItemSigilButton, {
-      attendableId,
-      related,
-      isMenu: hasActions,
-      // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
-      //   Remove underscore icon when no actions are available?
-      classNames: !hasActions && "cursor-default"
-    }, /* @__PURE__ */ import_react9.default.createElement("span", {
-      className: "sr-only"
-    }, triggerLabel), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-      icon,
-      size: 5
-    }));
-    if (!hasActions) {
-      return button;
-    }
-    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Root, {
-      open: optionsMenuOpen,
-      onOpenChange: setOptionsMenuOpen
-    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
-      asChild: true,
-      ref: forwardedRef
-    }, button), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Content, {
-      classNames: "z-[31]"
-    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
-      const separator = index > 0 ? /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Separator, null) : null;
-      return /* @__PURE__ */ import_react9.default.createElement(import_react9.Fragment, {
-        key: index
-      }, separator, actions.map((action) => {
-        const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[(0, import_util.getHostPlatform)()];
-        const menuItemType = action.properties.menuItemType;
-        const Root = menuItemType === "toggle" ? import_react_ui3.DropdownMenu.CheckboxItem : import_react_ui3.DropdownMenu.Item;
-        return /* @__PURE__ */ import_react9.default.createElement(Root, {
-          key: action.id,
-          onClick: (event) => {
-            if (action.properties.disabled) {
-              return;
-            }
-            event.stopPropagation();
-            setOptionsMenuOpen(false);
-            onAction?.(action);
-          },
-          classNames: "gap-2",
-          disabled: action.properties.disabled,
-          checked: menuItemType === "toggle" ? action.properties.isChecked : void 0,
-          ...action.properties?.testId && {
-            "data-testid": action.properties.testId
-          }
-        }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-          icon: action.properties.icon ?? "ph--placeholder--regular",
-          size: 4
-        }), /* @__PURE__ */ import_react9.default.createElement("span", {
-          className: "grow truncate"
-        }, (0, import_react_ui3.toLocalizedString)(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.ItemIndicator, {
-          asChild: true
-        }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-          icon: "ph--check--regular",
-          size: 4
-        })), shortcut && /* @__PURE__ */ import_react9.default.createElement("span", {
-          className: (0, import_react_ui_theme5.mx)("shrink-0", import_react_ui_theme5.descriptionText)
-        }, (0, import_keyboard.keySymbols)(shortcut).join("")));
-      }));
-    }), children), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-});
-var DEFAULT_HORIZONTAL_SIZE = 48;
-var DEFAULT_VERTICAL_SIZE = "min-content";
-var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ (0, import_react4.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const [itemElement, itemRef] = (0, import_react4.useState)(null);
-    const [selfDragHandleElement, selfDragHandleRef] = (0, import_react4.useState)(null);
-    const [closestEdge, setEdge] = (0, import_react4.useState)(null);
-    const [sourceId, setSourceId] = (0, import_react4.useState)(null);
-    const [dragState, setDragState] = (0, import_react4.useState)(idle);
-    const { orientation, rail, onRearrange } = useStack();
-    const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = (0, import_react4.useState)(propsSize);
-    const Root = role ?? "div";
-    const composedItemRef = (0, import_react_compose_refs2.composeRefs)(itemRef, forwardedRef);
-    const setSize = (0, import_react4.useCallback)((nextSize, commit) => {
-      setInternalSize(nextSize);
-      if (commit) {
-        onSizeChange?.(nextSize);
-      }
-    }, [
-      onSizeChange
-    ]);
-    const type = orientation === "horizontal" ? "column" : "card";
-    (0, import_react4.useLayoutEffect)(() => {
-      if (!itemElement || !onRearrange || disableRearrange) {
-        return;
-      }
-      return (0, import_combine2.combine)((0, import_adapter2.draggable)({
-        element: itemElement,
-        ...selfDragHandleElement && {
-          dragHandle: selfDragHandleElement
-        },
-        getInitialData: () => ({
-          id: item.id,
-          type
-        }),
-        onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
-          document.body.setAttribute("data-drag-preview", "true");
-          const offsetFn = (0, import_preserve_offset_on_source.preserveOffsetOnSource)({
-            element: source.element,
-            input: location.current.input
-          });
-          const rect = source.element.getBoundingClientRect();
-          (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
-            nativeSetDragImage,
-            getOffset: ({ container }) => {
-              return offsetFn({
-                container
-              });
-            },
-            render: ({ container }) => {
-              container.style.width = rect.width + "px";
-              setDragState({
-                type: "preview",
-                container,
-                item
-              });
-              return () => {
-              };
-            }
-          });
-        },
-        onDragStart: () => {
-          document.body.removeAttribute("data-drag-preview");
-          itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
-          setDragState({
-            type: "is-dragging",
-            item
-          });
-        },
-        onDrop: () => {
-          itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
-          setDragState(idle);
-        }
-      }), (0, import_adapter2.dropTargetForElements)({
-        element: itemElement,
-        getData: ({ input, element }) => {
-          return (0, import_closest_edge2.attachClosestEdge)({
-            id: item.id,
-            type
-          }, {
-            input,
-            element,
-            allowedEdges: orientation === "horizontal" ? [
-              "left",
-              "right"
-            ] : [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        onDragEnter: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
-            setSourceId(source.data.id);
-          }
-        },
-        onDrag: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
-            setSourceId(source.data.id);
-          }
-        },
-        onDragLeave: () => {
-          setEdge(null);
-          setSourceId(null);
-        },
-        onDrop: ({ self, source }) => {
-          setEdge(null);
-          setSourceId(null);
-          if (source.data.type === self.data.type) {
-            onRearrange(source.data, self.data, (0, import_closest_edge2.extractClosestEdge)(self.data));
-          }
-        }
-      }));
-    }, [
-      orientation,
-      item,
-      onRearrange,
-      selfDragHandleElement,
-      itemElement
-    ]);
-    const focusableGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
-      tabBehavior: "limited"
-    });
-    const shouldShowDropIndicator = () => {
-      if (!closestEdge || !sourceId) {
-        return false;
-      }
-      if (sourceId === item.id) {
-        return false;
-      }
-      const isTrailingEdgeOfPrevSibling = prevSiblingId !== void 0 && sourceId === prevSiblingId && (orientation === "horizontal" && closestEdge === "left" || orientation === "vertical" && closestEdge === "top");
-      if (isTrailingEdgeOfPrevSibling) {
-        return false;
-      }
-      const isLeadingEdgeOfNextSibling = nextSiblingId !== void 0 && sourceId === nextSiblingId && (orientation === "horizontal" && closestEdge === "right" || orientation === "vertical" && closestEdge === "bottom");
-      if (isLeadingEdgeOfNextSibling) {
-        return false;
-      }
-      return true;
-    };
-    const stackItemContextValue = (0, import_react4.useMemo)(() => ({
-      selfDragHandleRef,
-      size,
-      setSize,
-      state: dragState,
-      setState: setDragState,
-      role
-    }), [
-      selfDragHandleRef,
-      size,
-      setSize,
-      dragState,
-      setDragState,
-      role
-    ]);
-    return /* @__PURE__ */ import_react4.default.createElement(StackItemContext.Provider, {
-      value: stackItemContextValue
-    }, /* @__PURE__ */ import_react4.default.createElement(Root, {
-      ...props,
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : orientation === "horizontal" ? "dx-focus-ring-group-x" : "dx-focus-ring-group-y", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
-      "data-dx-stack-item": true,
-      ...import_react_ui_dnd.resizeAttributes,
-      style: {
-        ...(0, import_react_ui_dnd.sizeStyle)(size, orientation),
-        ...Number.isFinite(order) && {
-          [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
-        },
-        ...style
-      },
-      ref: composedItemRef
-    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ListItem.DropIndicator, {
-      lineInset: 8,
-      terminalInset: -8,
-      edge: closestEdge
-    })));
-  } finally {
-    _effect.f();
-  }
-});
-var StackItemDragPreview = ({ children }) => {
-  const { state } = useStackItem();
-  return state?.type === "preview" ? /* @__PURE__ */ (0, import_react_dom.createPortal)(children({
-    item: state.item
-  }), state.container) : null;
-};
-var StackItem = {
-  Root: StackItemRoot,
-  Content: StackItemContent,
-  Heading: StackItemHeading,
-  HeadingLabel: StackItemHeadingLabel,
-  HeadingStickyContent: StackItemHeadingStickyContent,
-  ResizeHandle: StackItemResizeHandle,
-  DragHandle: StackItemDragHandle,
-  Sigil: StackItemSigil,
-  SigilButton: StackItemSigilButton,
-  DragPreview: StackItemDragPreview
-};
-var cardRoot = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-var cardContent = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
-var cardSpacing = "pli-cardSpacingInline mlb-cardSpacingBlock";
-var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
-var cardDialogContent = "p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden";
-var cardDialogHeader = "pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between";
-var cardDialogOverflow = "overflow-y-auto min-bs-0 flex-1";
-var cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
-var cardDialogSearchListRoot = "pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col";
-var cardText = cardSpacing;
-var cardHeading = "text-lg font-medium line-clamp-2";
-var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
-var CardRoot = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot3.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardRoot,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme6.mx)(cardRoot, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardContent = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot3.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardContent,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme6.mx)(cardContent, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardConditionalContent = ({ role, children }) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    if ([
-      "popover",
-      "card--kanban"
-    ].includes(role ?? "never")) {
-      return /* @__PURE__ */ import_react11.default.createElement("div", {
-        className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
-      }, children);
-    } else {
-      return /* @__PURE__ */ import_react11.default.createElement(CardContent, role === "card--document" && {
-        classNames: [
-          "mlb-[1em]",
-          import_react_ui_theme6.hoverableControls
-        ]
-      }, children);
-    }
-  } finally {
-    _effect.f();
-  }
-};
-var CardHeading = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot3.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardHeading,
-        cardText,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme6.mx)(cardHeading, cardText, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardToolbar = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Toolbar.Root, {
-      ...props,
-      classNames: [
-        "bg-transparent",
-        classNames
-      ],
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardToolbarIconButton = import_react_ui4.Toolbar.IconButton;
-var CardToolbarSeparator = import_react_ui4.Toolbar.Separator;
-var CardDragHandle = /* @__PURE__ */ (0, import_react11.forwardRef)(({ toolbarItem }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const { t } = (0, import_react_ui4.useTranslation)(translationKey);
-    const Root = toolbarItem ? import_react_ui4.Toolbar.IconButton : import_react_ui4.IconButton;
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      iconOnly: true,
-      icon: "ph--dots-six-vertical--regular",
-      variant: "ghost",
-      label: t("card drag handle label"),
-      classNames: "pli-2",
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
-var CardDragPreview = StackItem.DragPreview;
-var CardMenu = import_react_primitive.Primitive.div;
-var CardPoster = (props) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
-    if (props.image) {
-      return /* @__PURE__ */ import_react11.default.createElement("img", {
-        className: `dx-card__poster ${aspect} object-cover is-full bs-auto`,
-        src: props.image,
-        alt: props.alt
-      });
-    }
-    if (props.icon) {
-      return /* @__PURE__ */ import_react11.default.createElement("div", {
-        role: "image",
-        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
-        "aria-label": props.alt
-      }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
-        icon: props.icon,
-        size: 10
-      }));
-    }
-  } finally {
-    _effect.f();
-  }
-};
-var CardChrome = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot3.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardChrome,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme6.mx)(cardChrome, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardText = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking9.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot3.Slot : "p";
-    const rootProps = asChild ? {
-      classNames: [
-        cardText,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme6.mx)(cardText, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react11.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var Card = {
-  Root: CardRoot,
-  Content: CardContent,
-  Container: CardConditionalContent,
-  Heading: CardHeading,
-  Toolbar: CardToolbar,
-  ToolbarIconButton: CardToolbarIconButton,
-  ToolbarSeparator: CardToolbarSeparator,
-  DragHandle: CardDragHandle,
-  DragPreview: CardDragPreview,
-  Menu: CardMenu,
-  Poster: CardPoster,
-  Chrome: CardChrome,
-  Text: CardText
-};
-var CardDragPreviewRoot = ({ children }) => {
-  var _effect = (0, import_tracking10.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      className: "p-2"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardDragPreviewContent = ({ children }) => {
-  var _effect = (0, import_tracking10.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      className: (0, import_react_ui_theme7.mx)(cardContent, "ring-focusLine ring-neutralFocusIndicator")
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardDragPreview2 = {
-  Root: CardDragPreviewRoot,
-  Content: CardDragPreviewContent
-};
-var CardStackStack = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking11.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react13.default.createElement(Stack, {
-      orientation: "vertical",
-      size: "contain",
-      rail: false,
-      classNames: (
-        /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
-        [
-          "plb-1",
-          itemsCount > 0 && "plb-2",
-          classNames
-        ]
-      ),
-      itemsCount,
-      separatorOnScroll: 9,
-      "data-density": "fine",
-      ...props,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardStackDragHandle = Card.DragHandle;
-var cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
-var CardStackHeading = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking11.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot4.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackHeading,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme8.mx)(cardStackHeading, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react13.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var cardStackFooter = 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
-var CardStackFooter = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking11.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot4.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackFooter,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme8.mx)(cardStackFooter, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react13.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var cardStackContent = [
-  "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop",
-  railGridHorizontalContainFitContent
-];
-var CardStackContent = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking11.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot4.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        ...cardStackContent,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme8.mx)(...cardStackContent, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react13.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      "data-scroll-separator": "false",
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var cardStackRoot = "flex flex-col pli-2 plb-2";
-var CardStackRoot = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking11.useSignals)();
-  try {
-    const Root = asChild ? import_react_slot4.Slot : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackRoot,
-        classNames
-      ]
-    } : {
-      className: (0, import_react_ui_theme8.mx)(cardStackRoot, classNames),
-      role
-    };
-    return /* @__PURE__ */ import_react13.default.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardStack = {
-  Root: CardStackRoot,
-  Content: CardStackContent,
-  Stack: CardStackStack,
-  Heading: CardStackHeading,
-  Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle
-};
-var CardStackDragPreviewRoot = ({ children }) => {
-  var _effect = (0, import_tracking12.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      className: "p-2"
-    }, /* @__PURE__ */ import_react14.default.createElement("div", {
-      className: "rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col"
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var CardStackDragPreviewHeading = ({ children }) => {
-  var _effect = (0, import_tracking12.useSignals)();
-  try {
-    const { t } = (0, import_react_ui5.useTranslation)(translationKey);
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      className: "flex items-center p-2"
-    }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui5.IconButton, {
-      iconOnly: true,
-      icon: "ph--dots-six-vertical--regular",
-      variant: "ghost",
-      label: t("column drag handle label"),
-      classNames: "pli-2"
-    }), children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
-  var _effect = (0, import_tracking12.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      className: (0, import_react_ui_theme9.mx)("overflow-y-auto flex-1 pli-2 flex flex-col gap-2", "plb-1", itemsCount > 0 ? "plb-2" : "plb-1")
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardStackDragPreviewFooter = ({ children }) => {
-  var _effect = (0, import_tracking12.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      className: "p-2 border-t border-separator"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardStackDragPreview = {
-  Root: CardStackDragPreviewRoot,
-  Heading: CardStackDragPreviewHeading,
-  Content: CardStackDragPreviewContent,
-  Footer: CardStackDragPreviewFooter
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Card,
-  CardDragPreview,
-  CardStack,
-  CardStackDragPreview,
-  DEFAULT_EXTRINSIC_SIZE,
-  DEFAULT_HORIZONTAL_SIZE,
-  DEFAULT_VERTICAL_SIZE,
-  Stack,
-  StackContext,
-  StackItem,
-  StackItemDragPreview,
-  autoScrollRootAttributes,
-  cardChrome,
-  cardContent,
-  cardDialogContent,
-  cardDialogHeader,
-  cardDialogOverflow,
-  cardDialogPaddedOverflow,
-  cardDialogSearchListRoot,
-  cardHeading,
-  cardRoot,
-  cardSpacing,
-  cardStackContent,
-  cardStackFooter,
-  cardStackHeading,
-  cardStackRoot,
-  cardText,
-  labelSpacing,
-  railGridHorizontal,
-  railGridHorizontalContainFitContent,
-  railGridVertical,
-  railGridVerticalContainFitContent,
-  translations
-});
-//# sourceMappingURL=index.cjs.map