@optiaxiom/react 1.6.1 → 1.6.3

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-B3pR4orF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-B7nc_KNd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'m4y8zc']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'cddjbu']});
 
 export { header };

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1bewi5k']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1hslkva']});
 
 export { body };

package/dist/esm/packages/react/src/dialog/DialogContent-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-BG0pbEf8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DFmhDt0Q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_10csj5e'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1deh5uk'],variants:{size:{sm:'_13uirg9',md:'_1ea14lc',lg:'_1uy7v0h',fullscreen:'jit4yf'}}});
-var nestedDialogCountVar = 'var(--h947ma)';
-var scrollPaddingBottomVar = 'var(--nz8v4v)';
-var scrollPaddingTopVar = 'var(--kxst0t)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1mvnas3'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'bcqqki'],variants:{size:{sm:'hcxg7w',md:'_28a1t6',lg:'zzjhib',fullscreen:'x0e75q'}}});
+var nestedDialogCountVar = 'var(--_16xqlzn)';
+var scrollPaddingBottomVar = 'var(--wshy9i)';
+var scrollPaddingTopVar = 'var(--_3d4vdc)';
 
 export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-B-GXf8Av.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-BEF19Ykk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1ab4v1g']});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'tbd3yb']});
 
 export { footer };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-pPuUz8ZH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DOqz2bhf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_6o8ln6']});
-var close = recipeRuntime({base:['_13oaa0n']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_19twp2a']});
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1vqhgaf']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'usgp49']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1h07dtd']});
+var close = recipeRuntime({base:['_1onvy0y']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'h2xbxl']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'gm9dt5']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_19trf5v']});
 
 export { actions, close, description, header, title };

package/dist/esm/packages/react/src/disclosure/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-CoETppVN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-Cbds0BnK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1ys5kus']});
-var outer = recipeRuntime({base:[{display:'grid'},'tyhskd'],variants:{scale:{false:'y9ctog',true:{}}}});
+var inner = recipeRuntime({base:['_1fhn067']});
+var outer = recipeRuntime({base:[{display:'grid'},'u3c7a5'],variants:{scale:{false:'_1gcbf2i',true:{}}}});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DGbkbF-u.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-53Nc9ZIg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1vtyvfo',start:'oqg9p0'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1wyvnm7']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1g9fo7g']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1i8ze0m',start:'_1skvdlm'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1jvn3jq']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1cdlz1o']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/file-upload/FileUpload-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-6dTO5osP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-Dy5pynrB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var upload = recipeRuntime({base:[{color:'fg.default'},'l62r1n']});
+var upload = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_8xe1l9']});
 
 export { upload };

package/dist/esm/packages/react/src/file-upload/FileUpload.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useDropzone } from 'react-dropzone';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -9,24 +9,18 @@ import { upload } from './FileUpload-css.js';
 import { FileUploadProvider } from './FileUploadContext.js';
 
 const FileUpload = forwardRef(
-  ({ accept, children, className, onFilesDrop, ...props }, ref) => {
-    const { getInputProps, getRootProps, isDragActive, open } = useDropzone({
-      accept,
-      noClick: true,
-      noKeyboard: true,
-      onDrop: (acceptedFiles) => {
-        if (acceptedFiles.length) {
-          onFilesDrop?.(acceptedFiles);
-        }
-      }
-    });
+  ({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const inputRef = useRef(null);
     return /* @__PURE__ */ jsx(
       FileUploadProvider,
       {
-        getInputProps,
-        getRootProps,
-        isDragActive,
-        openFileDialog: open,
+        accept: (accept ?? []).join(","),
+        disabled,
+        inputRef,
+        onFilesDrop,
+        rootRef: innerRef,
         children: /* @__PURE__ */ jsx(Box, { ref, ...upload({}, className), ...props, children })
       }
     );

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-C2nTMLrH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-0RomfPqT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var dropzone = 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 = 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 = recipeRuntime({base:[{alignItems:'center',gap:'8'}],variants:{disabled:{false:{},true:'utnr0g'}}});
 
-export { dropzone };
+export { dropzone, label };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone.js

@@ -1,57 +1,73 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useState, useRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
-import { IconFileImportSolid } from '../icons/IconFileImportSolid.js';
+import { IconFileImport } from '../icons/IconFileImport.js';
 import { Text } from '../text/Text.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useFileUploadContext } from './FileUploadContext.js';
-import { dropzone } from './FileUploadDropzone-css.js';
+import { dropzone, label } from './FileUploadDropzone-css.js';
 import { FileUploadTrigger } from './FileUploadTrigger.js';
+import { useContainerSize } from './useContainerSize.js';
 import { useDraggingOverBody } from './useDraggingOverBody.js';
+import { useFileUploadDragging } from './useFileUploadDragging.js';
+import { useFileUploadDrop } from './useFileUploadDrop.js';
+import { useStickyPosition } from './useStickyPosition.js';
 
 const FileUploadDropzone = 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] = useState(false);
     const isDraggingOverBody = useDraggingOverBody();
+    const innerRef = useRef(null);
+    useStickyPosition(innerRef, overlay && isDraggingOverBody);
+    const size = useContainerSize(innerRef) ?? 0;
     return /* @__PURE__ */ jsxs(
       Flex,
       {
-        ref,
-        ...getRootProps({
-          ...dropzone(
-            {
-              drag: isDragActive,
-              hidden: overlay && !isDraggingOverBody,
-              overlay
-            },
-            className
-          ),
-          ...props
-        }),
+        fontSize: size > 448 ? "lg" : "md",
+        ref: useComposedRefs(innerRef, outerRef),
+        ...dropzone(
+          {
+            drag: isDragging,
+            hidden: overlay && !isDraggingOverBody,
+            overlay
+          },
+          className
+        ),
+        ...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(Flex, { alignItems: "center", gap: "8", children: [
-            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsx(IconFileImportSolid, {}) }),
-            /* @__PURE__ */ jsx(Text, { children: label }),
-            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", children: description })
+          ) }),
+          /* @__PURE__ */ jsxs(Flex, { ...label({ disabled }), children: [
+            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", h: size > 448 ? "lg" : "sm", children: /* @__PURE__ */ jsx(IconFileImport, {}) }),
+            /* @__PURE__ */ jsx(Text, { children: label$1 }),
+            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", children: description })
           ] }),
           !overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
         ]

package/dist/esm/packages/react/src/file-upload/FileUploadTrigger.js

@@ -7,23 +7,26 @@ import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { useFileUploadContext } from './FileUploadContext.js';
+import { useFileUploadTrigger } from './useFileUploadTrigger.js';
 
 const Slot = createSlot("@optiaxiom/react/FileUploadTrigger");
 const FileUploadTrigger = forwardRef(({ asChild, children, onClick, ...props }, ref) => {
   const { boxProps, restProps } = extractBoxProps(props);
   const Comp = asChild ? Slot : Button;
-  const { openFileDialog } = useFileUploadContext(
+  const { disabled } = useFileUploadContext(
     "@optiaxiom/react/FileUploadTrigger"
   );
+  const open = useFileUploadTrigger();
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsx(
     Comp,
     {
+      disabled,
       onClick: (event) => {
         onClick?.(event);
         if (event.defaultPrevented) {
           return;
         }
-        openFileDialog();
+        open();
       },
       ref,
       ...restProps,

package/dist/esm/packages/react/src/file-upload/useContainerSize.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useContainerSize = (ref) => {
+  const [size, setSize] = useState();
+  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;
+};
+
+export { useContainerSize };

package/dist/esm/packages/react/src/file-upload/useDraggingOverBody.js

@@ -1,9 +1,16 @@
 import { useState, useRef, useEffect } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
 
 const useDraggingOverBody = () => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
   const [isDragging, setIsDragging] = useState(false);
   const dropRef = useRef();
   useEffect(() => {
+    if (disabled) {
+      return;
+    }
     const over = () => {
       setIsDragging(true);
       window.clearTimeout(dropRef.current);
@@ -15,7 +22,7 @@ const useDraggingOverBody = () => {
     return () => {
       document.body.removeEventListener("dragover", over);
     };
-  }, []);
+  }, [disabled]);
   return isDragging;
 };
 

package/dist/esm/packages/react/src/file-upload/useFileUploadDragging.js

@@ -0,0 +1,42 @@
+import { useRef } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadDragging = ({ onDragEnter, onDragLeave, onDrop, ...props } = {}, onDraggingChange) => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
+  const targetsRef = 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);
+    }
+  };
+};
+
+export { useFileUploadDragging };

package/dist/esm/packages/react/src/file-upload/useFileUploadDrop.js

@@ -0,0 +1,117 @@
+import '../auth-provider/AuthProvider.js';
+import { useAuthContext } from '../auth-provider/useAuthContext.js';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadDrop = ({
+  onDragOver,
+  onDrop,
+  ...props
+} = {}) => {
+  const { accept, disabled, onFilesDrop } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadDrop"
+  );
+  const auth = 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;
+  });
+}
+
+export { useFileUploadDrop };

package/dist/esm/packages/react/src/file-upload/useFileUploadTrigger.js

@@ -1,10 +1,13 @@
+import { useCallback } from 'react';
 import { useFileUploadContext } from './FileUploadContext.js';
 
 const useFileUploadTrigger = () => {
-  const { openFileDialog } = useFileUploadContext(
+  const { inputRef } = useFileUploadContext(
     "@optiaxiom/react/useFileUploadOpen"
   );
-  return openFileDialog;
+  return useCallback(() => {
+    inputRef.current?.click();
+  }, [inputRef]);
 };
 
 export { useFileUploadTrigger };

package/dist/esm/packages/react/src/file-upload/useStickyPosition.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useStickyPosition = (ref, visible) => {
+  const { rootRef } = useFileUploadContext(
+    "@optiaxiom/react/useStickyPosition"
+  );
+  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]);
+};
+
+export { useStickyPosition };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CzUSojq5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BfF-ibz5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_12oe70z'});
+var mark = recipeRuntime({base:'_1iuh5ei'});
 
 export { mark };

package/dist/esm/packages/react/src/icons/IconFileImport.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconFileImport = withIcon(
+  {
+    name: "IconFileImport"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      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"
+    }
+  )
+);
+
+export { IconFileImport };

package/dist/esm/packages/react/src/icons/IconPlus.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconPlus = withIcon(
+  {
+    name: "IconPlus"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      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"
+    }
+  )
+);
+
+export { IconPlus };