@dxos/react-ui-stack 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/dist/lib/browser/index.mjs

@@ -1,9 +1,3 @@
-// src/components/CardStack/CardStack.tsx
-import { Slot } from "@radix-ui/react-slot";
-import React2, { forwardRef as forwardRef2 } from "react";
-import { Card } from "@dxos/react-ui-mosaic";
-import { cardDefaultInlineSize, mx as mx2 } from "@dxos/ui-theme";
-
 // src/components/Stack/Stack.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React, { Children, forwardRef, useCallback, useEffect, useMemo, useState as useState2 } from "react";
@@ -99,10 +93,10 @@ var StackItemContext = /* @__PURE__ */ createContext({
 var useStackItem = () => useContext(StackItemContext);
 
 // src/components/Stack/Stack.tsx
-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 railGridHorizontal = "grid-rows-[[rail-start]_var(--dx-rail-size)_[content-start]_1fr_[content-end]]";
+var railGridVertical = "grid-cols-[[rail-start]_var(--dx-rail-size)_[content-start]_1fr_[content-end]]";
+var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--dx-rail-size)_[content-start]_fit-content(calc(100%-var(--dx-rail-size)*2+2px))_[content-end]]";
+var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--dx-rail-size)_[content-start]_fit-content(calc(100%-var(--dx-rail-size)*2+2px))_[content-end]]";
 var autoScrollRootAttributes = {
   "data-drag-autoscroll": "idle"
 };
@@ -254,7 +248,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
   ]);
   const gridClasses = useMemo(() => {
     if (!rail) {
-      return orientation === "horizontal" ? "grid-rows-1 pli-[--stack-gap]" : "grid-cols-1 plb-[--stack-gap]";
+      return orientation === "horizontal" ? "grid-rows-1 px-(--stack-gap)" : "grid-cols-1 py-(--stack-gap)";
     }
     if (orientation === "horizontal") {
       return railGridHorizontal;
@@ -294,7 +288,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
     }
   }, /* @__PURE__ */ React.createElement("div", {
     ...props,
-    className: mx("grid relative [--stack-gap:var(--dx-trimXs)]", gridClasses, size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
+    className: mx("grid relative [--stack-gap:var(--spacing-trim-xs)]", gridClasses, size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-h-0 max-h-full h-full" : "overflow-y-auto min-w-0 max-w-full w-full"), classNames),
     onKeyDown: handleKeyDown,
     onBlur: handleBlur,
     "data-dx-stack": stackId,
@@ -315,196 +309,6 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
   })));
 });
 
-// src/components/CardStack/CardStack.tsx
-var cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
-var cardStackRoot = "flex flex-col";
-var CardStackRoot = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : "div";
-  const rootProps = asChild ? {
-    classNames: [
-      cardStackRoot,
-      classNames
-    ]
-  } : {
-    className: mx2(cardStackRoot, classNames),
-    role
-  };
-  return /* @__PURE__ */ React2.createElement(Root, {
-    ...props,
-    ...rootProps,
-    ref: forwardedRef
-  }, children);
-});
-var cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
-var CardStackContent = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", footer, ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : "div";
-  const baseClassNames = footer ? [
-    cardStackContent,
-    railGridHorizontalContainFitContent
-  ] : [
-    cardStackContent
-  ];
-  const rootProps = asChild ? {
-    classNames: [
-      ...baseClassNames,
-      classNames
-    ]
-  } : {
-    className: mx2(...baseClassNames, classNames),
-    role
-  };
-  return /* @__PURE__ */ React2.createElement(Root, {
-    ...props,
-    ...rootProps,
-    "data-scroll-separator": "false",
-    ref: forwardedRef
-  }, children);
-});
-var CardStackStack = /* @__PURE__ */ forwardRef2(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React2.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-2",
-        classNames
-      ]
-    ),
-    itemsCount,
-    separatorOnScroll: 9,
-    "data-density": "fine",
-    ...props,
-    ref: forwardedRef
-  }, children);
-});
-var cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-var CardStackItem = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : "div";
-  const rootProps = asChild ? {
-    classNames: [
-      cardStackItem,
-      classNames
-    ]
-  } : {
-    className: mx2(cardStackItem, classNames),
-    role
-  };
-  return /* @__PURE__ */ React2.createElement(Root, {
-    ...props,
-    ...rootProps,
-    ref: forwardedRef
-  }, children);
-});
-var cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
-var CardStackHeading = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : "div";
-  const rootProps = asChild ? {
-    classNames: [
-      cardStackHeading,
-      classNames
-    ]
-  } : {
-    className: mx2(cardStackHeading, classNames),
-    role
-  };
-  return /* @__PURE__ */ React2.createElement(Root, {
-    ...props,
-    ...rootProps,
-    ref: forwardedRef
-  }, children);
-});
-var cardStackFooter = 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
-var CardStackFooter = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : "div";
-  const rootProps = asChild ? {
-    classNames: [
-      cardStackFooter,
-      classNames
-    ]
-  } : {
-    className: mx2(cardStackFooter, classNames),
-    role
-  };
-  return /* @__PURE__ */ React2.createElement(Root, {
-    ...props,
-    ...rootProps,
-    ref: forwardedRef
-  }, children);
-});
-var CardStackDragHandle = Card.DragHandle;
-var CardStack = {
-  Root: CardStackRoot,
-  Content: CardStackContent,
-  Stack: CardStackStack,
-  Heading: CardStackHeading,
-  Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle,
-  Item: CardStackItem
-};
-
-// src/components/CardStack/CardStackDragPreview.tsx
-import React3 from "react";
-import { IconButton, useTranslation } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-stack";
-var translations = [
-  {
-    "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"
-      }
-    }
-  }
-];
-
-// src/components/CardStack/CardStackDragPreview.tsx
-var CardStackDragPreviewRoot = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "p-2"
-  }, /* @__PURE__ */ React3.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));
-};
-var CardStackDragPreviewHeading = ({ children }) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "flex items-center p-2"
-  }, /* @__PURE__ */ React3.createElement(IconButton, {
-    iconOnly: true,
-    icon: "ph--dots-six-vertical--regular",
-    variant: "ghost",
-    label: t("column drag handle label"),
-    classNames: "pli-2"
-  }), children);
-};
-var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx3("overflow-y-auto flex-1 pli-2 flex flex-col gap-2", "plb-1", itemsCount > 0 ? "plb-2" : "plb-1")
-  }, children);
-};
-var CardStackDragPreviewFooter = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "p-2 border-bs border-separator"
-  }, children);
-};
-var CardStackDragPreview = {
-  Root: CardStackDragPreviewRoot,
-  Heading: CardStackDragPreviewHeading,
-  Content: CardStackDragPreviewContent,
-  Footer: CardStackDragPreviewFooter
-};
-
 // src/components/StackItem/StackItem.tsx
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -513,37 +317,33 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React10, { forwardRef as forwardRef6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState4 } from "react";
+import React8, { forwardRef as forwardRef5, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { ListItem as ListItem2 } from "@dxos/react-ui";
 import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
-import { mx as mx7 } from "@dxos/ui-theme";
+import { mx as mx5 } from "@dxos/ui-theme";
 
 // src/components/StackItem/StackItemContent.tsx
-import React4, { forwardRef as forwardRef3, useMemo as useMemo2 } from "react";
-import { mx as mx4 } from "@dxos/ui-theme";
-var StackItemContent = /* @__PURE__ */ forwardRef3(({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
+import React2, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { mx as mx2 } from "@dxos/ui-theme";
+var StackItemContent = /* @__PURE__ */ forwardRef2(({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
   const { size: stackItemSize } = useStack();
   const { role } = useStackItem();
   const style = useMemo2(() => ({
     gridTemplateRows: [
-      ...toolbar ? [
-        role === "section" ? "calc(var(--toolbar-size) - 1px)" : "var(--toolbar-size)"
-      ] : [],
+      toolbar && role === "section" ? "calc(var(--dx-toolbar-size) - 1px)" : "var(--dx-toolbar-size)",
       "1fr",
-      ...statusbar ? [
-        "var(--statusbar-size)"
-      ] : []
-    ].join(" ")
+      statusbar && "var(--dx-statusbar-size)"
+    ].filter(Boolean).join(" ")
   }), [
     toolbar,
     statusbar
   ]);
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     ...props,
     role: "none",
     style,
-    className: mx4("group grid grid-cols-[100%] density-coarse", stackItemSize === "contain" && "min-bs-0 overflow-hidden", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator", classNames),
+    className: mx2("group grid grid-cols-[100%] dx-density-coarse", stackItemSize === "contain" && "min-h-0 overflow-hidden", toolbar && role === "section" && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:top-0 [&_.dx-toolbar]:-mb-px [&_.dx-toolbar]:min-w-0", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-b [&>.dx-toolbar]:border-subdued-separator", classNames),
     "data-popover-collision-boundary": true,
     ref: forwardedRef
   }, children);
@@ -551,56 +351,58 @@ var StackItemContent = /* @__PURE__ */ forwardRef3(({ classNames, children, tool
 StackItemContent.displayName = "StackItemContent";
 
 // src/components/StackItem/StackItemDragHandle.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import React5 from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import React3 from "react";
 var StackItemDragHandle = ({ asChild, children }) => {
   const { selfDragHandleRef } = useStackItem();
-  const Root = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ React5.createElement(Root, {
+  const Comp = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React3.createElement(Comp, {
     ref: selfDragHandleRef,
     role: "button"
   }, children);
 };
 
 // src/components/StackItem/StackItemHeading.tsx
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React6, { forwardRef as forwardRef4 } from "react";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
-import { mx as mx5 } from "@dxos/ui-theme";
-var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
+import { mx as mx3 } from "@dxos/ui-theme";
+var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, role, ...props }) => {
   const { orientation } = useStack();
-  const Root = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ React6.createElement(Root, {
-    role: "heading",
+  const Comp = asChild ? Slot2 : Primitive2.div;
+  return /* @__PURE__ */ React4.createElement(Comp, {
     ...props,
-    className: mx5("flex items-center !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)
+    role: role ?? "heading",
+    className: mx3("flex items-center border-x-0! bg-header-surface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator' : "border-subdued-separator", orientation === "horizontal" ? "h-(--dx-rail-size)" : "w-(--dx-rail-size) flex-col", orientation === "horizontal" ? "border-b" : "border-e", classNames)
   }, children);
 };
 var StackItemHeadingStickyContent = ({ children }) => {
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
+    className: "sticky top-0 bg-(--sticky-bg) p-1 w-full"
   }, children);
 };
-var StackItemHeadingLabel = /* @__PURE__ */ forwardRef4(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related, classNames, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
-  return /* @__PURE__ */ React6.createElement("h1", {
+  return /* @__PURE__ */ React4.createElement("h1", {
     ...props,
     "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
-    className: mx5("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
+    className: mx3("px-1 min-w-0 w-0 grow truncate font-medium text-base-surface-text data-[attention=true]:text-accent-text self-center", classNames),
     ref: forwardedRef
   });
 });
 
 // src/components/StackItem/StackItemResizeHandle.tsx
-import React7 from "react";
+import React5 from "react";
 import { ResizeHandle } from "@dxos/react-ui-dnd";
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
-var StackItemResizeHandle = () => {
+var StackItemResizeHandle = (_) => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
-  return /* @__PURE__ */ React7.createElement(ResizeHandle, {
+  return /* @__PURE__ */ React5.createElement(ResizeHandle, {
     side: orientation === "horizontal" ? "inline-end" : "block-end",
     fallbackSize: DEFAULT_EXTRINSIC_SIZE,
     minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
@@ -610,23 +412,42 @@ var StackItemResizeHandle = () => {
 };
 
 // src/components/StackItem/StackItemSigil.tsx
-import React9, { Fragment, forwardRef as forwardRef5, useState as useState3 } from "react";
+import React7, { Fragment, forwardRef as forwardRef4, useState as useState3 } from "react";
 import { keySymbols } from "@dxos/keyboard";
-import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
-import { descriptionText, mx as mx6 } from "@dxos/ui-theme";
+import { mx as mx4 } from "@dxos/ui-theme";
 import { getHostPlatform } from "@dxos/util";
 
+// src/translations.ts
+var translationKey = "@dxos/react-ui-stack";
+var translations = [
+  {
+    "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"
+      }
+    }
+  }
+];
+
 // src/components/StackItem/MenuSignifier.tsx
-import React8 from "react";
-var MenuSignifierHorizontal = () => /* @__PURE__ */ React8.createElement("svg", {
-  className: "absolute block-end-[7px]",
+import React6 from "react";
+var MenuSignifierHorizontal = () => /* @__PURE__ */ React6.createElement("svg", {
+  className: "absolute bottom-[7px]",
   width: 20,
   height: 2,
   viewBox: "0 0 20 2",
   stroke: "currentColor",
   opacity: 0.5
-}, /* @__PURE__ */ React8.createElement("line", {
+}, /* @__PURE__ */ React6.createElement("line", {
   x1: 0.5,
   y1: 0.75,
   x2: 19,
@@ -638,56 +459,56 @@ var MenuSignifierHorizontal = () => /* @__PURE__ */ React8.createElement("svg",
 }));
 
 // src/components/StackItem/StackItemSigil.tsx
-var StackItemSigilButton = /* @__PURE__ */ forwardRef5(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
+var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
   const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-  return /* @__PURE__ */ React9.createElement(Button, {
+  return /* @__PURE__ */ React7.createElement(Button, {
     ...props,
     variant,
     classNames: [
-      "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
+      "shrink-0 px-0 min-h-0 w-(--dx-rail-action) h-(--dx-rail-action) relative dx-app-no-drag",
       classNames
     ],
     ref: forwardedRef
-  }, isMenu && /* @__PURE__ */ React9.createElement(MenuSignifierHorizontal, null), children);
+  }, isMenu && /* @__PURE__ */ React7.createElement(MenuSignifierHorizontal, null), children);
 });
-var StackItemSigil = /* @__PURE__ */ forwardRef5(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey);
+var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
   const [optionsMenuOpen, setOptionsMenuOpen] = useState3(false);
   const hasActions = actionGroups && actionGroups.length > 0;
-  const button = /* @__PURE__ */ React9.createElement(StackItemSigilButton, {
+  const button = /* @__PURE__ */ React7.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__ */ React9.createElement("span", {
+  }, /* @__PURE__ */ React7.createElement("span", {
     className: "sr-only"
-  }, triggerLabel), /* @__PURE__ */ React9.createElement(Icon, {
+  }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
     icon,
     size: 5
   }));
   if (!hasActions) {
     return button;
   }
-  return /* @__PURE__ */ React9.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: setOptionsMenuOpen
-  }, /* @__PURE__ */ React9.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, button), /* @__PURE__ */ React9.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React9.createElement(DropdownMenu.Content, {
+  }, button), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
     classNames: "z-[31]"
-  }, /* @__PURE__ */ React9.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
-    const separator = index > 0 ? /* @__PURE__ */ React9.createElement(DropdownMenu.Separator, null) : null;
-    return /* @__PURE__ */ React9.createElement(Fragment, {
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ React7.createElement(DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ React7.createElement(Fragment, {
       key: index
     }, separator, actions.map((action) => {
       const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
       const menuItemType = action.properties.menuItemType;
       const Root = menuItemType === "toggle" ? DropdownMenu.CheckboxItem : DropdownMenu.Item;
-      return /* @__PURE__ */ React9.createElement(Root, {
+      return /* @__PURE__ */ React7.createElement(Root, {
         key: action.id,
         onClick: (event) => {
           if (action.properties.disabled) {
@@ -703,28 +524,28 @@ var StackItemSigil = /* @__PURE__ */ forwardRef5(({ actions: actionGroups, onAct
         ...action.properties?.testId && {
           "data-testid": action.properties.testId
         }
-      }, /* @__PURE__ */ React9.createElement(Icon, {
+      }, /* @__PURE__ */ React7.createElement(Icon, {
         icon: action.properties.icon ?? "ph--placeholder--regular",
         size: 4
-      }), /* @__PURE__ */ React9.createElement("span", {
+      }), /* @__PURE__ */ React7.createElement("span", {
         className: "grow truncate"
-      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React9.createElement(DropdownMenu.ItemIndicator, {
+      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React7.createElement(DropdownMenu.ItemIndicator, {
         asChild: true
-      }, /* @__PURE__ */ React9.createElement(Icon, {
+      }, /* @__PURE__ */ React7.createElement(Icon, {
         icon: "ph--check--regular",
         size: 4
-      })), shortcut && /* @__PURE__ */ React9.createElement("span", {
-        className: mx6("shrink-0", descriptionText)
+      })), shortcut && /* @__PURE__ */ React7.createElement("span", {
+        className: mx4("shrink-0", "text-description")
       }, keySymbols(shortcut).join("")));
     }));
-  }), children), /* @__PURE__ */ React9.createElement(DropdownMenu.Arrow, null))));
+  }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
 });
 
 // src/components/StackItem/StackItem.tsx
 var DEFAULT_HORIZONTAL_SIZE = 48;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ forwardRef6(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
   const [itemElement, itemRef] = useState4(null);
   const composedItemRef = composeRefs2(itemRef, forwardedRef);
   const [selfDragHandleElement, selfDragHandleRef] = useState4(null);
@@ -878,13 +699,13 @@ var StackItemRoot = /* @__PURE__ */ forwardRef6(({ item, children, classNames, s
     setDragState,
     role
   ]);
-  return /* @__PURE__ */ React10.createElement(StackItemContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(StackItemContext.Provider, {
     value: stackItemContextValue
-  }, /* @__PURE__ */ React10.createElement(Root, {
+  }, /* @__PURE__ */ React8.createElement(Root, {
     ...props,
     tabIndex: 0,
     ...focusableGroupAttrs,
-    className: mx7("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : focusIndicatorVariant === "over-all-always" ? "dx-focus-ring-inset-over-all-always" : orientation === "horizontal" ? focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-x-always" : "dx-focus-ring-group-x" : focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-y-always" : "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),
+    className: mx5("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : focusIndicatorVariant === "over-all-always" ? "dx-focus-ring-inset-over-all-always" : orientation === "horizontal" ? focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-x-always" : "dx-focus-ring-group-x" : focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-y-always" : "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-b border-subdued-separator", classNames),
     "data-dx-stack-item": stackId,
     "data-dx-item-id": item.id,
     ...resizeAttributes,
@@ -896,7 +717,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef6(({ item, children, classNames, s
       ...style
     },
     ref: composedItemRef
-  }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React10.createElement(ListItem2.DropIndicator, {
+  }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
     lineInset: 8,
     terminalInset: -8,
     edge: closestEdge
@@ -921,8 +742,6 @@ var StackItem = {
   SigilButton: StackItemSigilButton
 };
 export {
-  CardStack,
-  CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE,
@@ -930,12 +749,6 @@ export {
   StackContext,
   StackItem,
   autoScrollRootAttributes,
-  cardStackContent,
-  cardStackDefaultInlineSizeRem,
-  cardStackFooter,
-  cardStackHeading,
-  cardStackItem,
-  cardStackRoot,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,