@optiaxiom/react 1.6.1 → 1.6.3

package/dist/cjs/unstable.js

@@ -1,93 +1,92 @@
 "use client";
 'use strict';
 
-var Calendar = require('./Calendar-DbWG5itO.js');
+var Calendar = require('./Calendar-CmLh80qh.js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactId = require('@radix-ui/react-id');
 var reactSlot = require('@radix-ui/react-slot');
 var React = require('react');
-require('./assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css');
-require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-DPCLHeWG.css');
+require('./assets/src/layers/layers.css.ts.vanilla-BrROz78w.css');
+require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-2PWKuKti.css');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BoDQZb4b.css');
-require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-B3pR4orF.css');
-var reactDropzone = require('react-dropzone');
-require('./assets/src/file-upload/FileUpload.css.ts.vanilla-6dTO5osP.css');
-require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-C2nTMLrH.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-CzUSojq5.css');
+require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-C1692X47.css');
+require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-B7nc_KNd.css');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+require('./assets/src/file-upload/FileUpload.css.ts.vanilla-Dy5pynrB.css');
+require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-0RomfPqT.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-BfF-ibz5.css');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DPaCJt0p.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CY00PMMN.css');
 var ResizablePrimitive = require('react-resizable-panels');
-require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-Dia6p9d-.css');
-require('./assets/src/layout/Layout.css.ts.vanilla-svaE50uj.css');
-require('./assets/src/layout/LayoutContent.css.ts.vanilla-DQee678Y.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-lk2cwVyo.css');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
+require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-C9VkGvQN.css');
+require('./assets/src/layout/Layout.css.ts.vanilla-DEoYrwwM.css');
+require('./assets/src/layout/LayoutContent.css.ts.vanilla-DmSIM-Gs.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-DhYrWfgQ.css');
 var RadixRovingFocus = require('@radix-ui/react-roving-focus');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-Dcl1w-r7.css');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-CykAidks.css');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-C26dFOfN.css');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-CZHNwXkl.css');
+require('@optiaxiom/globals');
 require('clsx');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-ClekdP9M.css');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-DLWbBYyA.css');
 require('downshift');
-require('./assets/src/input/InputControl.css.ts.vanilla-CLjACe5c.css');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-CMzF6EXy.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-SVKYD4nc.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-eGHihyjg.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-DqAoojOC.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-Dve8dSnu.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-CXCO0AxS.css');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-BG0pbEf8.css');
-require('./assets/src/dialog/DialogFooter.css.ts.vanilla-B-GXf8Av.css');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-pPuUz8ZH.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-jE1M_LxS.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-DFmhDt0Q.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-BEF19Ykk.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DOqz2bhf.css');
 require('@radix-ui/react-popover');
 require('@radix-ui/react-popper');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-B6B7Zi9W.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-C8jaYW8J.css');
-require('./assets/src/table/Table.css.ts.vanilla-BpX52tie.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-BfhI4c1E.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-CAO8y3es.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-tzgjLXSj.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-BArdi6MT.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-D8UgURxS.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BrndZ_OH.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-CGQxuEez.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-D_9kP-US.css');
+require('./assets/src/table/Table.css.ts.vanilla-CttZlX3f.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-Du2qYdY5.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-XbRWXPbL.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-Dn-PcDFp.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-gujCtmn0.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-iuy_9Fo7.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BoivQXd0.css');
 require('react-day-picker');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-Du3q_yLp.css');
-require('./assets/src/box/Box.css.ts.vanilla-BrjnHY-5.css');
-require('@optiaxiom/globals');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-CndBlSqH.css');
+require('./assets/src/box/Box.css.ts.vanilla-BrOa4W49.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-VlkxLccC.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-DrL0EMAU.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-Tyvr1INO.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BJqZoAz7.css');
-require('./assets/src/text/Text.css.ts.vanilla-DkdsN7Z7.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-BXPUynfV.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BTYo6j-K.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-MXxd5-Qf.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-D0EsrWDq.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CJ4aEjF1.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DIMZ_EzU.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-CSd7kuRG.css');
+require('./assets/src/text/Text.css.ts.vanilla-CDyvPSQq.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-DtjVFLRy.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-B6R5Xlsa.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Dl0lM4W0.css');
 require('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-CcL2sqUF.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-BD-NjJbP.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-0EXudvLA.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-hRuAUpVe.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
-require('./assets/src/transition/Transition.css.ts.vanilla-DizxM3RU.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-oX9ZRiry.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-5gEy5jc4.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-DeHprHLc.css');
 require('@radix-ui/react-portal');
 require('@radix-ui/react-tooltip');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-N2E3e5pV.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-z0IMkTCA.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-8wH_rbL6.css');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-DsZ2Arz4.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DE89CfuP.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BPD-A61j.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BW50gYJ1.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-XOrWzW6A.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-CqRCXgPw.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-Tza1ItDO.css');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-ya4d6kX0.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-B_G8KSyv.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-DJXYDbM3.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-Bztj4yWt.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -211,7 +210,7 @@ function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], tri
   }, [hotkeys]);
 }
 
-var root$1 = Calendar.recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'k0osna']});
+var root$1 = Calendar.recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'d2wqbs']});
 
 const [DetailsPanelProvider, useDetailsPanelContext] = reactContext.createContext("@optiaxiom/react/DetailsPanel");
 
@@ -242,14 +241,14 @@ const DetailsPanelBody = React.forwardRef(({ children, ...props }, ref) => {
 });
 DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
 
-var footer = Calendar.recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'mz1psv']});
+var footer = Calendar.recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'_1skc5xb']});
 
 const DetailsPanelFooter = React.forwardRef(({ children, className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Calendar.ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar.Flex, { ref, ...footer({}, className), ...props, children }) });
 });
 DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
 
-var header = Calendar.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'m4y8zc']});
+var header = Calendar.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'cddjbu']});
 
 const DetailsPanelHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -286,29 +285,23 @@ const DetailsPanelHeader = React.forwardRef(
 );
 DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
 
-var upload = Calendar.recipeRuntime({base:[{color:'fg.default'},'l62r1n']});
+var upload = Calendar.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_8xe1l9']});
 
 const [FileUploadProvider, useFileUploadContext] = reactContext.createContext("@optiaxiom/react/FileUpload");
 
 const FileUpload = React.forwardRef(
-  ({ accept, children, className, onFilesDrop, ...props }, ref) => {
-    const { getInputProps, getRootProps, isDragActive, open } = reactDropzone.useDropzone({
-      accept,
-      noClick: true,
-      noKeyboard: true,
-      onDrop: (acceptedFiles) => {
-        if (acceptedFiles.length) {
-          onFilesDrop?.(acceptedFiles);
-        }
-      }
-    });
+  ({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const inputRef = React.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsx(
       FileUploadProvider,
       {
-        getInputProps,
-        getRootProps,
-        isDragActive,
-        openFileDialog: open,
+        accept: (accept ?? []).join(","),
+        disabled,
+        inputRef,
+        onFilesDrop,
+        rootRef: innerRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(Calendar.Box, { ref, ...upload({}, className), ...props, children })
       }
     );
@@ -316,39 +309,49 @@ const FileUpload = React.forwardRef(
 );
 FileUpload.displayName = "@optiaxiom/react/FileUpload";
 
-const IconFileImportSolid = Calendar.withIcon(
+const IconFileImport = Calendar.withIcon(
   {
-    name: "IconFileImportSolid",
-    viewBox: "0 0 512 512"
+    name: "IconFileImport"
   },
-  // <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
-      d: "M128 64c0-35.3 28.7-64 64-64L352 0l0 128c0 17.7 14.3 32 32 32l128 0 0 288c0 35.3-28.7 64-64 64l-256 0c-35.3 0-64-28.7-64-64l0-112 174.1 0-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39L128 288l0-224zm0 224l0 48L24 336c-13.3 0-24-10.7-24-24s10.7-24 24-24l104 0zM512 128l-128 0L384 0 512 128z",
+      d: "M12.1426 0.00292969C12.1639 0.00180327 12.1854 1.32505e-06 12.207 0C12.5271 0 12.8342 0.127186 13.0605 0.353516L16.6465 3.93945C16.8728 4.16582 17 4.47286 17 4.79297C17 4.81264 16.998 4.83212 16.9971 4.85156C16.9979 4.87236 17 4.89316 17 4.91406V14.5C16.9999 15.3284 16.3284 16 15.5 16H6.5C5.67161 16 5.00006 15.3284 5 14.5V11H6V14.5C6.00006 14.7761 6.2239 15 6.5 15H15.5C15.7761 15 15.9999 14.7761 16 14.5V5.98047C15.9326 5.99213 15.8637 6 15.793 6H12.5C11.6716 6 11 5.32843 11 4.5V1.20703C11 1.13639 11.0069 1.06731 11.0186 1H6.5C6.22386 1 6 1.22386 6 1.5V8H5V1.5C5 0.671573 5.67157 0 6.5 0H12.0859C12.1049 1.90532e-06 12.1237 0.00221438 12.1426 0.00292969ZM8.96484 6.14648C9.16011 5.95122 9.47661 5.95122 9.67188 6.14648L12.8535 9.32812C13.0487 9.52339 13.0488 9.83991 12.8535 10.0352L9.67188 13.2168C9.47663 13.412 9.16009 13.412 8.96484 13.2168C8.7696 13.0216 8.76964 12.705 8.96484 12.5098L11.293 10.1816H2.5C2.2239 10.1816 2.00006 9.95773 2 9.68164C2 9.4055 2.22386 9.18164 2.5 9.18164H11.293L8.96484 6.85352C8.7696 6.65827 8.76964 6.34175 8.96484 6.14648ZM12.1553 1.00684C12.066 1.02987 12 1.11061 12 1.20703V4.5C12 4.77614 12.2239 5 12.5 5H15.793C15.8911 4.99997 15.9728 4.93153 15.9941 4.83984C15.9832 4.76713 15.9567 4.69771 15.916 4.63672L15.8535 4.56055L12.4395 1.14648C12.3623 1.06931 12.2621 1.02189 12.1553 1.00684Z",
       fill: "currentColor"
     }
   )
 );
 
-var dropzone = Calendar.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',border:'1',fontSize:'md',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors',z:'10'},'vu0owr'],variants:{drag:{false:{},true:['t5d9rz']},hidden:{false:'_35li5p',true:'_169ko0l'},overlay:{false:{},true:'gvx5ah'}}});
+var dropzone = Calendar.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'hmao0b'],variants:{drag:{false:{},true:['_45fb55']},hidden:{false:'lri34i',true:'pugixf'},overlay:{false:{flex:'1'},true:[{z:'10'},'_12q4n2f']}}});
+var label = Calendar.recipeRuntime({base:[{alignItems:'center',gap:'8'}],variants:{disabled:{false:{},true:'utnr0g'}}});
+
+const useFileUploadTrigger = () => {
+  const { inputRef } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadOpen"
+  );
+  return React.useCallback(() => {
+    inputRef.current?.click();
+  }, [inputRef]);
+};
 
 const Slot$1 = reactSlot.createSlot("@optiaxiom/react/FileUploadTrigger");
 const FileUploadTrigger = React.forwardRef(({ asChild, children, onClick, ...props }, ref) => {
   const { boxProps, restProps } = Calendar.extractBoxProps(props);
   const Comp = asChild ? Slot$1 : Calendar.Button;
-  const { openFileDialog } = useFileUploadContext(
+  const { disabled } = useFileUploadContext(
     "@optiaxiom/react/FileUploadTrigger"
   );
+  const open = useFileUploadTrigger();
   return /* @__PURE__ */ jsxRuntime.jsx(Calendar.Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
     {
+      disabled,
       onClick: (event) => {
         onClick?.(event);
         if (event.defaultPrevented) {
           return;
         }
-        openFileDialog();
+        open();
       },
       ref,
       ...restProps,
@@ -358,10 +361,36 @@ const FileUploadTrigger = React.forwardRef(({ asChild, children, onClick, ...pro
 });
 FileUploadTrigger.displayName = "@optiaxiom/react/FileUploadTrigger";
 
+const useContainerSize = (ref) => {
+  const [size, setSize] = React.useState();
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      if (!ref.current) {
+        return;
+      }
+      for (const entry of entries) {
+        setSize(entry.borderBoxSize[0].blockSize);
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+};
+
 const useDraggingOverBody = () => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
   const [isDragging, setIsDragging] = React.useState(false);
   const dropRef = React.useRef();
   React.useEffect(() => {
+    if (disabled) {
+      return;
+    }
     const over = () => {
       setIsDragging(true);
       window.clearTimeout(dropRef.current);
@@ -373,52 +402,252 @@ const useDraggingOverBody = () => {
     return () => {
       document.body.removeEventListener("dragover", over);
     };
-  }, []);
+  }, [disabled]);
   return isDragging;
 };
 
+const useFileUploadDragging = ({ onDragEnter, onDragLeave, onDrop, ...props } = {}, onDraggingChange) => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
+  const targetsRef = React.useRef([]);
+  return {
+    ...props,
+    onDragEnter: (event) => {
+      onDragEnter?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = [...targetsRef.current, event.target];
+      onDraggingChange(true);
+    },
+    onDragLeave: (event) => {
+      onDragLeave?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = targetsRef.current.filter(
+        (element) => element !== event.target
+      );
+      if (targetsRef.current.length === 0) {
+        onDraggingChange(false);
+      }
+    },
+    onDrop: (event) => {
+      onDrop?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = [];
+      onDraggingChange(false);
+    }
+  };
+};
+
+const useFileUploadDrop = ({
+  onDragOver,
+  onDrop,
+  ...props
+} = {}) => {
+  const { accept, disabled, onFilesDrop } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadDrop"
+  );
+  const auth = Calendar.useAuthContext();
+  return {
+    ...props,
+    onDragOver: (event) => {
+      onDragOver?.(event);
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+    },
+    onDrop: async (event) => {
+      onDrop?.(event);
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+      onFilesDrop?.(
+        event.dataTransfer.items ? (await Promise.all(
+          Array.from(event.dataTransfer.items).map((item) => {
+            if (item.kind === "file") {
+              const file = item.getAsFile();
+              return file && isValidFile(file, accept) ? file : null;
+            } else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
+              if (!auth) {
+                throw new Error(
+                  "Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?"
+                );
+              }
+              try {
+                const data = JSON.parse(
+                  event.dataTransfer.getData(item.type)
+                );
+                const resource = {
+                  name: data.name || "",
+                  type: data.mime_type || "",
+                  url: data.link
+                };
+                return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
+              } catch {
+              }
+            }
+            return null;
+          })
+        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter(
+          (file) => isValidFile(file, accept)
+        )
+      );
+    }
+  };
+};
+async function getRemoteFile(resource, auth, retry = false) {
+  const url = new URL(resource.url);
+  if (!url.searchParams.has("instance_id")) {
+    url.searchParams.set("instance_id", auth.instance || "");
+  }
+  const response = await fetch(url.toString(), {
+    headers: {
+      Authorization: `Bearer ${auth.token}`,
+      "X-Instance-Id": auth.instance,
+      "X-Product-Sku": "Axiom"
+    }
+  });
+  if (response.status === 401 && retry) {
+    return getRemoteFile(resource, {
+      ...auth,
+      token: await auth.refresh()
+    });
+  } else if (!response.ok) {
+    throw new Error("Could not download file from Opal.", {
+      cause: new Error(
+        `Got status ${response.status} attempting to download ${resource.url}`
+      )
+    });
+  } else {
+    return new File([await response.arrayBuffer()], resource.name, {
+      type: response.headers.get("Content-Type") || "application/octet-stream"
+    });
+  }
+}
+function isValidFile(file, accept) {
+  if (!file) {
+    return false;
+  }
+  if (!accept) {
+    return true;
+  }
+  const acceptedFiles = accept.split(",");
+  if (acceptedFiles.length === 0) {
+    return true;
+  }
+  const fileName = "name" in file ? file.name : "";
+  const mimeType = (file.type || "").toLowerCase();
+  const baseMimeType = mimeType.replace(/\/.*$/, "");
+  return acceptedFiles.some((type) => {
+    const validType = type.trim().toLowerCase();
+    if (validType.charAt(0) === ".") {
+      return fileName.toLowerCase().endsWith(validType);
+    } else if (validType.endsWith("/*")) {
+      return baseMimeType === validType.replace(/\/.*$/, "");
+    }
+    return mimeType === validType;
+  });
+}
+
+const useStickyPosition = (ref, visible) => {
+  const { rootRef } = useFileUploadContext(
+    "@optiaxiom/react/useStickyPosition"
+  );
+  React.useEffect(() => {
+    if (!visible || !rootRef.current) {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (!rootRef.current || !ref.current) {
+        return;
+      }
+      const entry = entries[0];
+      if (!entry.isIntersecting) {
+        return;
+      }
+      const { height, top } = entries[0].intersectionRect;
+      const rootRect = rootRef.current.getBoundingClientRect();
+      ref.current.style.maxHeight = `${Math.max(108, height)}px`;
+      ref.current.style.top = `${top - rootRect.top}px`;
+    });
+    observer.observe(rootRef.current);
+    let timer = 0;
+    const listener = () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (rootRef.current) {
+          observer.unobserve(rootRef.current);
+          observer.observe(rootRef.current);
+        }
+      }, 300);
+    };
+    window.addEventListener("scroll", listener, true);
+    return () => {
+      window.removeEventListener("scroll", listener, true);
+      observer.disconnect();
+    };
+  }, [visible, rootRef, ref]);
+};
+
 const FileUploadDropzone = React.forwardRef(
   ({
     children,
     className,
     description,
-    label = "Drop your files here",
-    overlay,
+    label: label$1 = "Drag and drop files here",
+    overlay = false,
     ...props
-  }, ref) => {
-    const { getInputProps, getRootProps, isDragActive } = useFileUploadContext(
+  }, outerRef) => {
+    const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext(
       "@optiaxiom/react/FileUploadDropzone"
     );
+    const [isDragging, setIsDragging] = React.useState(false);
     const isDraggingOverBody = useDraggingOverBody();
+    const innerRef = React.useRef(null);
+    useStickyPosition(innerRef, overlay && isDraggingOverBody);
+    const size = useContainerSize(innerRef) ?? 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Calendar.Flex,
       {
-        ref,
-        ...getRootProps({
-          ...dropzone(
-            {
-              drag: isDragActive,
-              hidden: overlay && !isDraggingOverBody,
-              overlay
-            },
-            className
-          ),
-          ...props
-        }),
+        fontSize: size > 448 ? "lg" : "md",
+        ref: reactComposeRefs.useComposedRefs(innerRef, outerRef),
+        ...dropzone(
+          {
+            drag: isDragging,
+            hidden: overlay && !isDraggingOverBody,
+            overlay
+          },
+          className
+        ),
+        ...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(Calendar.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
-              ...getInputProps({
-                "aria-description": description,
-                "aria-label": label
-              })
+              accept,
+              "aria-description": description,
+              "aria-label": label$1,
+              disabled,
+              multiple: true,
+              onChange: (event) => {
+                onFilesDrop?.([...event.target.files || []]);
+                event.target.value = "";
+              },
+              ref: inputRef,
+              type: "file"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Flex, { alignItems: "center", gap: "8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Calendar.Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsxRuntime.jsx(IconFileImportSolid, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Calendar.Text, { children: label }),
-            description && /* @__PURE__ */ jsxRuntime.jsx(Calendar.Text, { color: "fg.tertiary", fontSize: "sm", children: description })
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Flex, { ...label({ disabled }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Calendar.Icon, { asChild: true, color: "fg.secondary", h: size > 448 ? "lg" : "sm", children: /* @__PURE__ */ jsxRuntime.jsx(IconFileImport, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Calendar.Text, { children: label$1 }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(Calendar.Text, { color: "fg.tertiary", children: description })
           ] }),
           !overlay && (children ?? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTrigger, {}))
         ]
@@ -428,14 +657,7 @@ const FileUploadDropzone = React.forwardRef(
 );
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 
-const useFileUploadTrigger = () => {
-  const { openFileDialog } = useFileUploadContext(
-    "@optiaxiom/react/useFileUploadOpen"
-  );
-  return openFileDialog;
-};
-
-var mark = Calendar.recipeRuntime({base:'_12oe70z'});
+var mark = Calendar.recipeRuntime({base:'_1iuh5ei'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -467,8 +689,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Calendar.recipeRuntime({base:'uzix96',variants:{empty:{false:{},true:'yqs7an'}}});
-var input = Calendar.recipeRuntime({base:'_1qxey4w'});
+var editor = Calendar.recipeRuntime({base:'_1xvi9lr',variants:{empty:{false:{},true:'_1c878bq'}}});
+var input = Calendar.recipeRuntime({base:'itht8c'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -554,8 +776,8 @@ const Resizable = ({ ...props }) => {
 };
 Resizable.displayName = "@optiaxiom/react/Resizable";
 
-var handle$1 = Calendar.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1ceb76q']});
-var root = Calendar.recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'_1a5ynbv']});
+var handle$1 = Calendar.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_17x9f47']});
+var root = Calendar.recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'_1k9s2io']});
 
 const ResizableHandle = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Calendar.Flex, { asChild: true, ...root(), children: /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Calendar.Box, { ...handle$1() }) }) });
@@ -567,7 +789,7 @@ const ResizablePanel = ({ ...props }) => {
 };
 ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
 
-var layout = Calendar.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_2efshf'],variants:{size:{full:'qig6cy',screen:'_18oo729'}}});
+var layout = Calendar.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'s9wume'],variants:{size:{full:'_88lu3s',screen:'_4cda8q'}}});
 
 const Layout = React.forwardRef(
   ({
@@ -600,7 +822,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var content = Calendar.recipeRuntime({base:[{overflow:'auto',px:'32',py:'24'},'_1gg89o1']});
+var content = Calendar.recipeRuntime({base:[{overflow:'auto',px:'32',py:'24'},'pl9gl3']});
 
 const LayoutContent = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -618,7 +840,7 @@ const LayoutContent = React.forwardRef(
 );
 LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
 
-var pill = Calendar.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'_1q8ljd'],variants:{interactive:{false:{},true:'n5ka24'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Calendar.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'qvulz3'],variants:{interactive:{false:{},true:'_1nbhhwf'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -852,22 +1074,20 @@ const PillMenuContent = React.forwardRef(
 );
 PillMenuContent.displayName = "@optiaxiom/react/PillMenuContent";
 
-const IconPlusSolid = Calendar.withIcon(
+const IconPlus = Calendar.withIcon(
   {
-    name: "IconPlusSolid",
-    viewBox: "0 0 448 512"
+    name: "IconPlus"
   },
-  // <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
-      d: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z",
+      d: "M10.5 2C10.7761 2 11 2.22386 11 2.5V8H16.5C16.7761 8 17 8.22386 17 8.5C17 8.77614 16.7761 9 16.5 9H11V14.5C11 14.7761 10.7761 15 10.5 15C10.2239 15 10 14.7761 10 14.5V9H4.5C4.22386 9 4 8.77614 4 8.5C4 8.22386 4.22386 8 4.5 8H10V2.5C10 2.22386 10.2239 2 10.5 2Z",
       fill: "currentColor"
     }
   )
 );
 
-const PillMenuTrigger = React.forwardRef(({ onKeyDown, ...props }, outerRef) => {
+const PillMenuTrigger = React.forwardRef(({ children, onKeyDown, ...props }, outerRef) => {
   const { options } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
   const { inputValue } = Calendar.useCommandContext("@optiaxiom/react/PillMenuTrigger");
   const innerRef = React.useRef(null);
@@ -876,8 +1096,8 @@ const PillMenuTrigger = React.forwardRef(({ onKeyDown, ...props }, outerRef) =>
     Calendar.MenuTrigger,
     {
       appearance: options.length ? "subtle" : "default",
-      "aria-label": props["aria-label"],
-      icon: /* @__PURE__ */ jsxRuntime.jsx(IconPlusSolid, {}),
+      "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(IconPlus, {}),
       onKeyDown: (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented) {
@@ -894,7 +1114,7 @@ const PillMenuTrigger = React.forwardRef(({ onKeyDown, ...props }, outerRef) =>
       rounded: options.length ? "full" : void 0,
       size: "sm",
       ...props,
-      children: options.length ? void 0 : props["aria-label"]
+      children: options.length ? void 0 : children
     }
   ) }, "trigger");
 });
@@ -962,7 +1182,7 @@ const SortableGroup = React.forwardRef(
 );
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
 
-var handle = Calendar.recipeRuntime({base:'_1u0vukm'});
+var handle = Calendar.recipeRuntime({base:'_1be09uu'});
 
 const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
 
@@ -987,7 +1207,7 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = Calendar.recipeRuntime({base:'a2ylci',variants:{handle:{false:{},true:'_1bdk6ux'}}});
+var item = Calendar.recipeRuntime({base:'_1q081cf',variants:{handle:{false:{},true:'_115o2a7'}}});
 
 const SortableItem = React.forwardRef(
   ({ children, className, index, item: id, ...props }, outerRef) => {