@exem-ui/react 0.3.4-next.20261015085356 → 0.3.4-next.20261022010408

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkSHNVBKAJ_js = require('./chunk-SHNVBKAJ.js');
+var chunkLDCNEHLQ_js = require('./chunk-LDCNEHLQ.js');
 var chunkJIFX424V_js = require('./chunk-JIFX424V.js');
 var utils = require('@exem-ui/core/utils');
 var React = require('react');
@@ -13,7 +13,6 @@ var SwitchPrimitives = require('@radix-ui/react-switch');
 var reactDayPicker = require('react-day-picker');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var dialog = require('@base-ui/react/dialog');
-var DialogPrimitive2 = require('@radix-ui/react-dialog');
 var reResizable = require('re-resizable');
 var progress = require('@base-ui/react/progress');
 var sonner = require('sonner');
@@ -41,7 +40,6 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var DialogPrimitive2__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive2);
 
 var SIZE_CONFIG = {
   xsmall: {
@@ -491,6 +489,7 @@ var buttonVariants = utils.cva(
     },
     variants: {
       size: {
+        "2xsmall": "h-5 gap-0 px-1 text-caption font-medium",
         xsmall: "h-6 gap-0 px-1 text-body-3 font-medium",
         small: "h-7 gap-0.5 px-1.5 text-body-2 font-medium",
         medium: "h-8 gap-0.5 px-2 text-body-2 font-medium",
@@ -501,6 +500,7 @@ var buttonVariants = utils.cva(
   }
 );
 var iconSizeMap = {
+  "2xsmall": chunkJIFX424V_js.iconSizes.xs,
   xsmall: chunkJIFX424V_js.iconSizes.sm,
   small: chunkJIFX424V_js.iconSizes.sm,
   medium: chunkJIFX424V_js.iconSizes.sm,
@@ -544,6 +544,7 @@ function Button({
   );
 }
 var iconButtonSizeClasses = {
+  "2xsmall": "size-5",
   xsmall: "size-6",
   small: "size-7",
   medium: "size-8",
@@ -560,7 +561,7 @@ function IconButton({
   ...props
 }) {
   const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkSHNVBKAJ_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkLDCNEHLQ_js.ConditionalTooltip, { tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       "aria-label": ariaLabel ?? (ariaLabelledBy === void 0 ? tooltipLabel : void 0),
@@ -624,7 +625,7 @@ function ButtonGroup({
             item.id
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(chunkSHNVBKAJ_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(chunkLDCNEHLQ_js.ConditionalTooltip, { tooltip: item.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...buttonBaseProps, leftIcon: item.icon, children: item.label }) }, item.id);
       })
     }
   );
@@ -1024,12 +1025,12 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
 }
 var dropdownVariants = {
   content: utils.cn(
-    chunkSHNVBKAJ_js.overlayListVariants.content,
+    chunkLDCNEHLQ_js.overlayListVariants.content,
     "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
   ),
-  viewport: chunkSHNVBKAJ_js.overlayListVariants.viewport,
-  item: (props) => utils.cn(chunkSHNVBKAJ_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
-  slotSize: chunkSHNVBKAJ_js.overlayListVariants.slotSize,
+  viewport: chunkLDCNEHLQ_js.overlayListVariants.viewport,
+  item: (props) => utils.cn(chunkLDCNEHLQ_js.overlayListVariants.item(props), "focus:bg-elevation-elevation-2"),
+  slotSize: chunkLDCNEHLQ_js.overlayListVariants.slotSize,
   separator: utils.cn("my-0.5 h-px bg-border-primary"),
   label: utils.cva("px-2 font-medium text-text-secondary", {
     defaultVariants: { size: "medium" },
@@ -1080,9 +1081,9 @@ Dropdown.Item = React.forwardRef(({ className, children, leftSlot, rightSlot, si
       className: utils.cn(dropdownVariants.item({ size }), className),
       ...props,
       children: [
-        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSHNVBKAJ_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunkSHNVBKAJ_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
-        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkSHNVBKAJ_js.overlayListVariants.slotSize({ size }), children: rightSlot })
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLDCNEHLQ_js.overlayListVariants.slotSize({ size }), children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(chunkLDCNEHLQ_js.overlayListVariants.itemText({ size }), "min-w-0 flex-1 truncate"), children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLDCNEHLQ_js.overlayListVariants.slotSize({ size }), children: rightSlot })
       ]
     }
   );
@@ -1127,8 +1128,8 @@ var useTextAreaContext = () => {
   return context;
 };
 var textAreaVariants = {
-  container: chunkSHNVBKAJ_js.commonInputVariants.container,
-  label: chunkSHNVBKAJ_js.commonInputVariants.label,
+  container: chunkLDCNEHLQ_js.commonInputVariants.container,
+  label: chunkLDCNEHLQ_js.commonInputVariants.label,
   field: utils.cva(
     "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
     {
@@ -1182,7 +1183,7 @@ var textAreaVariants = {
     },
     defaultVariants: { size: "medium" }
   }),
-  description: chunkSHNVBKAJ_js.commonInputVariants.description,
+  description: chunkLDCNEHLQ_js.commonInputVariants.description,
   counter: utils.cva("text-nowrap font-regular", {
     variants: {
       disabled: {
@@ -1323,7 +1324,7 @@ var TextField = React.forwardRef(
   }, ref) => {
     const uniqueId = React.useId();
     const id = providedId || `text-field-${uniqueId}`;
-    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.container(), className), children: children || /* @__PURE__ */ jsxRuntime.jsx(TextField.Input, { ...inputProps }) }) });
   }
 );
 TextField.Label = React.forwardRef(
@@ -1334,7 +1335,7 @@ TextField.Label = React.forwardRef(
       {
         ref,
         htmlFor: id,
-        className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.label({ size, disabled, required }), className),
+        className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.label({ size, disabled, required }), className),
         children
       }
     );
@@ -1353,11 +1354,11 @@ TextField.Input = React.forwardRef(
     } = useTextFieldContext();
     const state = disabled ? "disabled" : error ? "error" : "default";
     const isControlled = contextValue !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.wrapper({ variant, size, state }), className), children: [
       leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunkSHNVBKAJ_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunkLDCNEHLQ_js.textFieldVariants.icon({ size })),
           children: leftIcon
         }
       ),
@@ -1368,7 +1369,7 @@ TextField.Input = React.forwardRef(
             ref,
             id,
             disabled,
-            className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.input({ size, state })),
+            className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.input({ size, state })),
             onChange: (e) => {
               contextOnChange?.(e);
             },
@@ -1376,12 +1377,12 @@ TextField.Input = React.forwardRef(
             ...isControlled ? { value: contextValue } : {}
           }
         ),
-        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.subText({ size, disabled })), children: subText })
+        subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.subText({ size, disabled })), children: subText })
       ] }),
       rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: utils.cn("flex items-center justify-center", chunkSHNVBKAJ_js.textFieldVariants.icon({ size })),
+          className: utils.cn("flex items-center justify-center", chunkLDCNEHLQ_js.textFieldVariants.icon({ size })),
           children: rightIcon
         }
       )
@@ -1395,7 +1396,7 @@ TextField.Description = React.forwardRef(
       "p",
       {
         ref,
-        className: utils.cn(chunkSHNVBKAJ_js.textFieldVariants.description({ size, error, disabled }), className),
+        className: utils.cn(chunkLDCNEHLQ_js.textFieldVariants.description({ size, error, disabled }), className),
         children
       }
     );
@@ -1514,7 +1515,7 @@ function ModalBody({
         scroll && "h-full [&_[data-slot=scroll-area-viewport]>div]:h-full"
       ),
       ...props,
-      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunkSHNVBKAJ_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
+      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(chunkLDCNEHLQ_js.ScrollArea, { className: "h-full flex flex-col", disableHorizontalScroll: !horizontalScroll, children: content }) : content
     }
   );
 }
@@ -1639,55 +1640,16 @@ var Modal = Object.assign(ModalRoot, {
   Description: ModalDescription
 });
 
-// src/hooks/useOverlayDismissGuard.ts
-var isBaseUiPopupOpen = () => Boolean(
-  document.querySelector('[data-base-ui-portal] [data-slot="combobox-content"][data-open]')
-);
-var isTargetInsideBaseUiPopup = (target) => target instanceof Element && Boolean(target.closest("[data-base-ui-portal]"));
-var shouldPreventDismissForSelect = (target) => {
-  const isSelectOpen = Boolean(
-    document.querySelector('[data-radix-select-content][data-state="open"]')
-  );
-  if (isSelectOpen) {
-    return true;
-  }
-  if (!(target instanceof Element)) {
-    return false;
-  }
-  return Boolean(
-    target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
-  );
-};
-function useOverlayDismissGuard({
-  onInteractOutside,
-  onEscapeKeyDown
-}) {
-  const handleInteractOutside = (event) => {
-    if (shouldPreventDismissForSelect(event.target) || isTargetInsideBaseUiPopup(event.target)) {
-      event.preventDefault();
-    }
-    onInteractOutside?.(event);
-  };
-  const handleEscapeKeyDown = (event) => {
-    if (isBaseUiPopupOpen()) {
-      event.preventDefault();
-    }
-    onEscapeKeyDown?.(event);
-  };
-  return { onEscapeKeyDown: handleEscapeKeyDown, onInteractOutside: handleInteractOutside };
-}
-
 // src/sheet/sheetResize.ts
 var SHEET_EDGE_GAP = "[--sheet-edge-gap:40px]";
-var getAxis = (side) => side === "left" || side === "right" ? "horizontal" : "vertical";
-var getDefaults = (axis) => axis === "horizontal" ? { minSize: 400, maxSize: "80%", defaultSize: 800 } : { minSize: 300, maxSize: "80%", defaultSize: 600 };
-var resolveMaxSize = (maxSize, axis) => {
+var SHEET_SIZE_DEFAULTS = { minSize: 400, maxSize: "80%", defaultSize: 800 };
+var resolveMaxSize = (maxSize) => {
   if (typeof maxSize === "number") {
     return maxSize;
   }
   const value = Number.parseFloat(maxSize);
   if (maxSize.trim().endsWith("%") && Number.isFinite(value)) {
-    return `${value}${axis === "horizontal" ? "vw" : "vh"}`;
+    return `${value}vw`;
   }
   return maxSize;
 };
@@ -1718,67 +1680,49 @@ var writeStoredSize = (key, size) => {
 };
 var ENABLE_BY_SIDE = {
   right: { left: true },
-  left: { right: true },
-  top: { bottom: true },
-  bottom: { top: true }
+  left: { right: true }
 };
 var HANDLE_EDGE_BY_SIDE = {
   right: "left",
-  left: "right",
-  top: "bottom",
-  bottom: "top"
+  left: "right"
 };
-var SheetResizeHandle = ({ axis, active }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
+var SheetResizeHandle = ({ active }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group/sheet-handle flex h-full w-full cursor-col-resize items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
   {
     className: utils.cn(
-      "group/sheet-handle flex h-full w-full items-center justify-center",
-      axis === "horizontal" ? "cursor-col-resize" : "cursor-row-resize"
-    ),
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: utils.cn(
-          "transition-colors group-hover/sheet-handle:bg-border-accent",
-          active ? "bg-border-accent" : "bg-border-primary",
-          axis === "horizontal" ? "h-full w-px" : "h-px w-full"
-        )
-      }
+      "transition-colors group-hover/sheet-handle:bg-border-accent",
+      active ? "bg-border-accent" : "bg-border-primary",
+      "h-full w-px"
     )
   }
-);
+) });
 var SheetResizableBox = ({ side, options, children }) => {
   const { minSize, maxSize, defaultSize, storageKey, onResize } = options;
-  const axis = getAxis(side);
-  const isHorizontal = axis === "horizontal";
-  const defaults = getDefaults(axis);
-  const resolvedMin = minSize ?? defaults.minSize;
-  const resolvedMax = resolveMaxSize(maxSize ?? defaults.maxSize, axis);
+  const resolvedMin = minSize ?? SHEET_SIZE_DEFAULTS.minSize;
+  const resolvedMax = resolveMaxSize(maxSize ?? SHEET_SIZE_DEFAULTS.maxSize);
   const [initialSize] = React.useState(() => {
     const stored = storageKey ? readStoredSize(storageKey) : null;
-    return Math.max(stored ?? defaultSize ?? defaults.defaultSize, resolvedMin);
+    return Math.max(stored ?? defaultSize ?? SHEET_SIZE_DEFAULTS.defaultSize, resolvedMin);
   });
   const [resizing, setResizing] = React.useState(false);
   const handleResizeStop = (_event, _direction, refElement) => {
     setResizing(false);
-    const next = isHorizontal ? refElement.offsetWidth : refElement.offsetHeight;
+    const next = refElement.offsetWidth;
     if (storageKey) {
       writeStoredSize(storageKey, next);
     }
     onResize?.(next);
   };
   const handleComponent = {
-    [HANDLE_EDGE_BY_SIDE[side]]: /* @__PURE__ */ jsxRuntime.jsx(SheetResizeHandle, { axis, active: resizing })
+    [HANDLE_EDGE_BY_SIDE[side]]: /* @__PURE__ */ jsxRuntime.jsx(SheetResizeHandle, { active: resizing })
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reResizable.Resizable,
     {
       enable: ENABLE_BY_SIDE[side],
-      defaultSize: isHorizontal ? { width: initialSize, height: "100%" } : { width: "100%", height: initialSize },
-      minWidth: isHorizontal ? resolvedMin : void 0,
-      maxWidth: isHorizontal ? resolvedMax : void 0,
-      minHeight: isHorizontal ? void 0 : resolvedMin,
-      maxHeight: isHorizontal ? void 0 : resolvedMax,
+      defaultSize: { width: initialSize, height: "100%" },
+      minWidth: resolvedMin,
+      maxWidth: resolvedMax,
       onResizeStart: () => setResizing(true),
       onResizeStop: handleResizeStop,
       handleComponent,
@@ -1787,135 +1731,132 @@ var SheetResizableBox = ({ side, options, children }) => {
     }
   );
 };
-var SHEET_CONTENT_BASE = "fixed z-50 data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
+var SHEET_TRANSITION = "transition-[transform,translate,opacity] duration-300 ease-out data-[ending-style]:duration-200";
 var SHEET_CONTENT_BOX = "flex flex-col border-border-primary bg-background-primary shadow-strong";
-var SHEET_SIDE_CLASSES = {
-  right: "inset-y-0 right-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
-  left: "inset-y-0 left-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
-  top: "inset-x-0 top-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
-  bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+var SHEET_ANCHOR = {
+  right: "inset-y-0 right-0 max-w-[calc(100vw-var(--sheet-edge-gap))]",
+  left: "inset-y-0 left-0 max-w-[calc(100vw-var(--sheet-edge-gap))]"
 };
-var SHEET_RESIZE_SIDE_CLASSES = {
-  right: "inset-y-0 right-0 max-w-[calc(100vw-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
-  left: "inset-y-0 left-0 max-w-[calc(100vw-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
-  top: "inset-x-0 top-0 max-h-[calc(100vh-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
-  bottom: "inset-x-0 bottom-0 max-h-[calc(100vh-var(--sheet-edge-gap))] data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+var SHEET_SLIDE = {
+  right: "data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+  left: "data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full"
 };
-var SheetContext = React.createContext({ side: "right" });
-var SheetRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { ...props });
-var Sheet = SheetRoot;
-Sheet.Trigger = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Trigger, { ref, ...props })
-);
-Sheet.Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { ...props });
-Sheet.Close = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Close, { ref, ...props })
-);
-Sheet.Overlay = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive2__namespace.Overlay,
+var SHEET_BOX_SIZE = {
+  right: "h-full w-[800px] border-l",
+  left: "h-full w-[800px] border-r"
+};
+var SheetModalContext = React.createContext(void 0);
+function SheetRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetModalContext.Provider, { value: props.modal, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { ...props }) });
+}
+function SheetTrigger(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetPortal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Backdrop,
     {
-      ref,
+      "data-slot": "sheet-overlay",
       className: utils.cn(
-        "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-component-dim",
+        "transition-opacity duration-300 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
         className
       ),
       ...props
     }
-  )
-);
-Sheet.Content = React.forwardRef(
-  ({
-    className,
-    children,
-    side = "right",
-    resizable = false,
-    onInteractOutside,
-    onEscapeKeyDown,
-    ...props
-  }, ref) => {
-    const resizeOptions = typeof resizable === "object" ? resizable : { use: resizable };
-    const isResizable = resizeOptions.use ?? true;
-    const dismissGuard = useOverlayDismissGuard({ onEscapeKeyDown, onInteractOutside });
-    return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Sheet.Overlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DialogPrimitive2__namespace.Content,
-        {
-          ref,
-          className: utils.cn(
-            SHEET_CONTENT_BASE,
-            SHEET_EDGE_GAP,
-            isResizable ? SHEET_RESIZE_SIDE_CLASSES[side] : utils.cn(SHEET_CONTENT_BOX, SHEET_SIDE_CLASSES[side]),
-            className
-          ),
-          ...props,
-          ...dismissGuard,
-          children: isResizable ? /* @__PURE__ */ jsxRuntime.jsx(SheetResizableBox, { side, options: resizeOptions, children }) : children
-        }
-      )
-    ] }) });
-  }
-);
-Sheet.Header = React.forwardRef(
-  ({ className, line = true, rightSlot, children, ...props }, ref) => {
-    const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive2__namespace.Close,
-      {
-        className: utils.cn(
-          "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunkJIFX424V_js.X, { type: "regular", size: 20 })
-      }
-    ) : rightSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side: sideProp = "right",
+  resizable = false,
+  ...props
+}) {
+  const side = sideProp === "left" ? "left" : "right";
+  const modal = React.useContext(SheetModalContext);
+  const resizeOptions = typeof resizable === "object" ? resizable : { use: resizable };
+  const isResizable = resizeOptions.use ?? true;
+  const showOverlay = modal !== false && modal !== "trap-focus";
+  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+    showOverlay && /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Popup,
       {
-        ref,
+        "data-slot": "sheet-content",
         className: utils.cn(
-          "flex shrink-0 flex-row items-center gap-2 h-12 pl-4 pr-2",
-          line && "border-b border-border-primary",
+          "fixed z-50",
+          SHEET_EDGE_GAP,
+          SHEET_TRANSITION,
+          SHEET_ANCHOR[side],
+          SHEET_SLIDE[side],
+          !isResizable && utils.cn(SHEET_CONTENT_BOX, SHEET_BOX_SIZE[side]),
           className
         ),
         ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-1", children }),
-          rightElement ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-row items-center", children: rightElement }) : null
-        ]
-      }
-    );
-  }
-);
-Sheet.Body = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { side } = React.useContext(SheetContext);
-    const disableHorizontalScroll = side === "left" || side === "right";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex-1 flex flex-col min-h-0 h-full",
-          "[&_[data-slot=scroll-area-viewport]>div]:h-full"
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunkSHNVBKAJ_js.ScrollArea,
-          {
-            className: "h-full flex flex-col",
-            disableHorizontalScroll,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("p-4", className), children })
-          }
-        )
+        children: isResizable ? /* @__PURE__ */ jsxRuntime.jsx(SheetResizableBox, { side, options: resizeOptions, children }) : children
       }
-    );
-  }
-);
-Sheet.Footer = React.forwardRef(
-  ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    )
+  ] });
+}
+function SheetHeader({ className, line = true, rightSlot, children, ...props }) {
+  const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Close,
+    {
+      "data-slot": "sheet-close-icon",
+      className: utils.cn(
+        "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunkJIFX424V_js.X, { type: "regular", size: 20 })
+    }
+  ) : rightSlot;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      "data-slot": "sheet-header",
+      className: utils.cn(
+        "flex shrink-0 flex-row items-center gap-2 h-12 pl-4 pr-2",
+        line && "border-b border-border-primary",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-1", children }),
+        rightElement ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-row items-center", children: rightElement }) : null
+      ]
+    }
+  );
+}
+function SheetBody({ className, children, scroll = true, ...props }) {
+  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("p-4", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      className: utils.cn(
+        "flex-1 flex flex-col min-h-0",
+        scroll && "h-full [&_[data-slot=scroll-area-viewport]>div]:h-full"
+      ),
+      ...props,
+      children: scroll ? /* @__PURE__ */ jsxRuntime.jsx(
+        chunkLDCNEHLQ_js.ScrollArea,
+        {
+          className: "h-full flex flex-col",
+          disableHorizontalScroll: true,
+          children: content
+        }
+      ) : content
+    }
+  );
+}
+function SheetFooter({ className, line = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
       className: utils.cn(
         "flex flex-row items-center justify-between h-14 gap-3 px-4 py-3",
         line && "border-t border-border-primary",
@@ -1923,13 +1864,19 @@ Sheet.Footer = React.forwardRef(
       ),
       ...props
     }
-  )
-);
-Sheet.FooterDescription = React.forwardRef(
-  ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  );
+}
+function SheetFooterDescription({
+  className,
+  error = false,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      "data-slot": "sheet-footer-description",
       className: utils.cn(
         "flex flex-row items-center gap-1 text-body-3",
         error ? "text-text-critical" : "text-text-tertiary",
@@ -1941,43 +1888,71 @@ Sheet.FooterDescription = React.forwardRef(
         children
       ]
     }
-  )
-);
-Sheet.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
-Sheet.Title = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive2__namespace.Title,
+  );
+}
+function SheetActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      ref,
+      "data-slot": "sheet-actions",
+      className: utils.cn("ml-auto flex flex-row items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function SheetClose(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
       className: utils.cn(
         "text-body-1 font-semibold leading-none tracking-tight text-text-primary",
         className
       ),
       ...props
     }
-  )
-);
-Sheet.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive2__namespace.Description,
-  {
-    ref,
-    className: utils.cn("text-body-2 text-text-tertiary", className),
-    ...props
-  }
-));
-Sheet.displayName = "Sheet";
-Sheet.Trigger.displayName = "Sheet.Trigger";
-Sheet.Portal.displayName = "Sheet.Portal";
-Sheet.Close.displayName = "Sheet.Close";
-Sheet.Overlay.displayName = "Sheet.Overlay";
-Sheet.Content.displayName = "Sheet.Content";
-Sheet.Header.displayName = "Sheet.Header";
-Sheet.Body.displayName = "Sheet.Body";
-Sheet.Footer.displayName = "Sheet.Footer";
-Sheet.FooterDescription.displayName = "Sheet.FooterDescription";
-Sheet.Actions.displayName = "Sheet.Actions";
-Sheet.Title.displayName = "Sheet.Title";
-Sheet.Description.displayName = "Sheet.Description";
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: utils.cn("text-body-2 text-text-tertiary", className),
+      ...props
+    }
+  );
+}
+SheetRoot.displayName = "Sheet";
+SheetTrigger.displayName = "Sheet.Trigger";
+SheetPortal.displayName = "Sheet.Portal";
+SheetClose.displayName = "Sheet.Close";
+SheetOverlay.displayName = "Sheet.Overlay";
+SheetContent.displayName = "Sheet.Content";
+SheetHeader.displayName = "Sheet.Header";
+SheetBody.displayName = "Sheet.Body";
+SheetFooter.displayName = "Sheet.Footer";
+SheetFooterDescription.displayName = "Sheet.FooterDescription";
+SheetActions.displayName = "Sheet.Actions";
+SheetTitle.displayName = "Sheet.Title";
+SheetDescription.displayName = "Sheet.Description";
+var Sheet = Object.assign(SheetRoot, {
+  Trigger: SheetTrigger,
+  Portal: SheetPortal,
+  Close: SheetClose,
+  Overlay: SheetOverlay,
+  Content: SheetContent,
+  Header: SheetHeader,
+  Body: SheetBody,
+  Footer: SheetFooter,
+  FooterDescription: SheetFooterDescription,
+  Actions: SheetActions,
+  Title: SheetTitle,
+  Description: SheetDescription
+});
 var MESSAGE_BOX_TRANSITION = "transition-[transform,scale,opacity] duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
 var MessageBoxContext = React.createContext({ variant: "default" });
 function MessageBoxRoot(props) {
@@ -2554,95 +2529,95 @@ var buttonize = (fn) => {
 
 Object.defineProperty(exports, "ColorPalette", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ColorPalette; }
+  get: function () { return chunkLDCNEHLQ_js.ColorPalette; }
 });
 Object.defineProperty(exports, "ColorPaletteColors", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ColorPaletteColors; }
+  get: function () { return chunkLDCNEHLQ_js.ColorPaletteColors; }
 });
 Object.defineProperty(exports, "Combobox", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.Combobox; }
+  get: function () { return chunkLDCNEHLQ_js.Combobox; }
 });
 Object.defineProperty(exports, "ComboboxContent", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxContent; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxContent; }
 });
 Object.defineProperty(exports, "ComboboxDescription", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxDescription; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxDescription; }
 });
 Object.defineProperty(exports, "ComboboxEmpty", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxEmpty; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxEmpty; }
 });
 Object.defineProperty(exports, "ComboboxInput", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxInput; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxInput; }
 });
 Object.defineProperty(exports, "ComboboxItem", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxItem; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxItem; }
 });
 Object.defineProperty(exports, "ComboboxLabel", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxLabel; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxLabel; }
 });
 Object.defineProperty(exports, "ComboboxList", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxList; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxList; }
 });
 Object.defineProperty(exports, "ComboboxSearch", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxSearch; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxSearch; }
 });
 Object.defineProperty(exports, "ComboboxTrigger", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxTrigger; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxTrigger; }
 });
 Object.defineProperty(exports, "ComboboxValue", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ComboboxValue; }
+  get: function () { return chunkLDCNEHLQ_js.ComboboxValue; }
 });
 Object.defineProperty(exports, "DEFAULT_COLOR", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.DEFAULT_COLOR; }
+  get: function () { return chunkLDCNEHLQ_js.DEFAULT_COLOR; }
 });
 Object.defineProperty(exports, "ScrollArea", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ScrollArea; }
+  get: function () { return chunkLDCNEHLQ_js.ScrollArea; }
 });
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.ScrollBar; }
+  get: function () { return chunkLDCNEHLQ_js.ScrollBar; }
 });
 Object.defineProperty(exports, "Segment", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.Segment; }
+  get: function () { return chunkLDCNEHLQ_js.Segment; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.Select; }
+  get: function () { return chunkLDCNEHLQ_js.Select; }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.Tabs; }
+  get: function () { return chunkLDCNEHLQ_js.Tabs; }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.Tooltip; }
+  get: function () { return chunkLDCNEHLQ_js.Tooltip; }
 });
 Object.defineProperty(exports, "colorPaletteColorClasses", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.colorPaletteColorClasses; }
+  get: function () { return chunkLDCNEHLQ_js.colorPaletteColorClasses; }
 });
 Object.defineProperty(exports, "getColorPaletteColor", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.getColorPaletteColor; }
+  get: function () { return chunkLDCNEHLQ_js.getColorPaletteColor; }
 });
 Object.defineProperty(exports, "isInPalette", {
   enumerable: true,
-  get: function () { return chunkSHNVBKAJ_js.isInPalette; }
+  get: function () { return chunkLDCNEHLQ_js.isInPalette; }
 });
 exports.Avatar = Avatar;
 exports.Badge = Badge;