@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Dialog/DialogMain.js

@@ -14,8 +14,8 @@ import { Transition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
 export const DialogMain = React.forwardRef((props, ref) => {
-  const dialogContext = useDialogContext();
-  const {
+  let dialogContext = useDialogContext();
+  let {
     className,
     children,
     styleType = 'default',
@@ -33,62 +33,49 @@ export const DialogMain = React.forwardRef((props, ref) => {
     placement = dialogContext.placement,
     ...rest
   } = props;
-  const [style, setStyle] = React.useState();
-  const dialogRef = React.useRef(null);
-  const hasBeenResized = React.useRef(false);
-  const previousFocusedElement = React.useRef();
-  const originalBodyOverflow = React.useRef('');
+  let [style, setStyle] = React.useState();
+  let dialogRef = React.useRef(null);
+  let hasBeenResized = React.useRef(false);
+  let previousFocusedElement = React.useRef();
+  let originalBodyOverflow = React.useRef('');
   React.useEffect(() => {
-    if (isOpen) {
-      originalBodyOverflow.current = document.body.style.overflow;
-    }
+    if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   React.useEffect(() => {
-    const ownerDocument = dialogRef.current?.ownerDocument;
+    let ownerDocument = dialogRef.current?.ownerDocument;
     if (
       !ownerDocument ||
       !preventDocumentScroll ||
-      originalBodyOverflow.current === 'hidden'
-    ) {
+      'hidden' === originalBodyOverflow.current
+    )
       return;
-    }
-    if (isOpen) {
-      ownerDocument.body.style.overflow = 'hidden';
-    } else {
-      ownerDocument.body.style.overflow = originalBodyOverflow.current;
-    }
+    if (isOpen) ownerDocument.body.style.overflow = 'hidden';
+    else ownerDocument.body.style.overflow = originalBodyOverflow.current;
     return () => {
       ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
   }, [isOpen, preventDocumentScroll]);
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
+  let handleKeyDown = (event) => {
+    if (event.altKey) return;
     event.persist();
-    if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
       onClose(event);
-    }
     onKeyDown?.(event);
   };
-  const { onPointerDown, transform } = useDragAndDrop(
+  let { onPointerDown, transform } = useDragAndDrop(
     dialogRef,
     dialogContext.dialogRootRef,
     isDraggable,
   );
-  const handlePointerDown = React.useCallback(
+  let handlePointerDown = React.useCallback(
     (event) => {
-      if (isDraggable) {
-        onPointerDown(event);
-      }
+      if (isDraggable) onPointerDown(event);
     },
     [isDraggable, onPointerDown],
   );
   useLayoutEffect(() => {
-    if (!isDraggable || !isOpen) {
-      return;
-    }
-    const [translateX, translateY] = getTranslateValuesFromElement(
+    if (!isDraggable || !isOpen) return;
+    let [translateX, translateY] = getTranslateValuesFromElement(
       dialogRef.current,
     );
     setStyle((oldStyle) => ({
@@ -98,20 +85,20 @@ export const DialogMain = React.forwardRef((props, ref) => {
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
   }, [isDraggable, isOpen]);
-  const setResizeStyle = React.useCallback((newStyle) => {
+  let setResizeStyle = React.useCallback((newStyle) => {
     setStyle((oldStyle) => ({
       ...oldStyle,
       ...newStyle,
     }));
   }, []);
-  const content = React.createElement(
+  let content = React.createElement(
     Box,
     {
       className: cx(
         'iui-dialog',
         {
-          'iui-dialog-default': styleType === 'default',
-          'iui-dialog-full-page': styleType === 'fullPage',
+          'iui-dialog-default': 'default' === styleType,
+          'iui-dialog-full-page': 'fullPage' === styleType,
           'iui-dialog-visible': isOpen,
           'iui-dialog-draggable': isDraggable,
         },
@@ -171,9 +158,8 @@ export const DialogMain = React.forwardRef((props, ref) => {
           dialogRef.current?.contains(
             dialogRef.current?.ownerDocument.activeElement,
           )
-        ) {
+        )
           previousFocusedElement.current?.focus();
-        }
       },
       unmountOnExit: true,
       nodeRef: dialogRef,

package/esm/core/Dialog/DialogTitleBar.js

@@ -7,8 +7,8 @@ import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';
 export const DialogTitleBar = Object.assign(
   React.forwardRef((props, ref) => {
-    const dialogContext = useDialogContext();
-    const {
+    let dialogContext = useDialogContext();
+    let {
       children,
       titleText,
       isDismissible = dialogContext.isDismissible,
@@ -18,7 +18,7 @@ export const DialogTitleBar = Object.assign(
       onPointerDown: onPointerDownProp,
       ...rest
     } = props;
-    const { onPointerDown } = useDialogDragContext();
+    let { onPointerDown } = useDialogDragContext();
     return React.createElement(
       Box,
       {

package/esm/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,6 +1,8 @@
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
- * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
+ * <Dialog.TitleBar>
+ *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
+ * </Dialog.TitleBar>
  */
 export declare const DialogTitleBarTitle: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Divider/Divider.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/components/Box.js';
 export const Divider = React.forwardRef((props, ref) => {
-  const { className, orientation = 'horizontal', ...rest } = props;
+  let { className, orientation = 'horizontal', ...rest } = props;
   return React.createElement(Box, {
     as: 'hr',
     className: cx('iui-divider', className),
-    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+    'aria-orientation': 'vertical' === orientation ? 'vertical' : void 0,
     ref: ref,
     ...rest,
   });

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { FloatingTree } from '@floating-ui/react';
-export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
-  return React.createElement(
+export const DropdownMenu = React.forwardRef((props, forwardedRef) =>
+  React.createElement(
     FloatingTree,
     null,
     React.createElement(DropdownMenuContent, {
       ref: forwardedRef,
       ...props,
     }),
-  );
-});
-const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
-  const {
+  ),
+);
+let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
+  let {
     menuItems,
     children,
     role = 'menu',
@@ -24,15 +24,14 @@ const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
     portal = true,
     ...rest
   } = props;
-  const [visible, setVisible] = useControlledState(
+  let [visible, setVisible] = useControlledState(
     false,
     visibleProp,
     onVisibleChange,
   );
-  const menuContent = React.useMemo(() => {
-    if (typeof menuItems === 'function') {
+  let menuContent = React.useMemo(() => {
+    if ('function' == typeof menuItems)
       return menuItems(() => setVisible(false));
-    }
     return menuItems;
   }, [menuItems, setVisible]);
   return React.createElement(
@@ -43,12 +42,8 @@ const DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
       {
         trigger: children,
         onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-          if (e.defaultPrevented) {
-            return;
-          }
-          if (e.key === 'Tab') {
-            setVisible(false);
-          }
+          if (e.defaultPrevented) return;
+          if ('Tab' === e.key) setVisible(false);
         }),
         role: role,
         ref: forwardedRef,

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -12,10 +12,9 @@ import {
 } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
-const ExpandableBlockContext = React.createContext(undefined);
-ExpandableBlockContext.displayName = 'ExpandableBlockContext';
-const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
-  const { children, title, caption, endIcon, ...rest } = props;
+let ExpandableBlockContext = React.createContext(void 0);
+let ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
+  let { children, title, caption, endIcon, ...rest } = props;
   return React.createElement(
     ExpandableBlock.Wrapper,
     {
@@ -30,9 +29,8 @@ const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
     React.createElement(ExpandableBlock.Content, null, children),
   );
 });
-ExpandableBlockComponent.displayName = 'ExpandableBlock';
-const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-  const {
+let ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
+  let {
     children,
     className,
     onToggle,
@@ -44,9 +42,9 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
     disabled = false,
     ...rest
   } = props;
-  const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-  const expanded = isExpanded ?? expandedState;
-  const [descriptionId, setDescriptionId] = React.useState(undefined);
+  let [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+  let expanded = isExpanded ?? expandedState;
+  let [descriptionId, setDescriptionId] = React.useState(void 0);
   return React.createElement(
     ExpandableBlockContext.Provider,
     {
@@ -69,7 +67,7 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
         className: cx('iui-expandable-block', className),
         'data-iui-expanded': expanded,
         'data-iui-size': size,
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+        'data-iui-variant': 'default' !== styleType ? styleType : void 0,
         style: style,
         ref: forwardedRef,
         ...rest,
@@ -78,16 +76,15 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
-const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-  const { className, children, label, caption, expandIcon, endIcon, ...rest } =
+let ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
+  let { className, children, label, caption, expandIcon, endIcon, ...rest } =
     props;
-  const { disabled, status } = useSafeContext(ExpandableBlockContext);
+  let { disabled, status } = useSafeContext(ExpandableBlockContext);
   return React.createElement(
     LinkBox,
     {
       className: cx('iui-expandable-header', className),
-      'data-iui-disabled': disabled ? 'true' : undefined,
+      'data-iui-disabled': disabled ? 'true' : void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -109,9 +106,8 @@ const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
-const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
+let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
+  let { className, children, ...rest } = props;
   return React.createElement(
     Icon,
     {
@@ -125,12 +121,10 @@ const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
-const ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
-ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
-const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-  const { className, children, onClick: onClickProp, ...rest } = props;
-  const { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
+let ExpandableBlockLabelArea = polymorphic.span('iui-expandable-block-label');
+let ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
+  let { className, children, onClick: onClickProp, ...rest } = props;
+  let { isExpanded, setExpanded, disabled, onToggle, descriptionId } =
     useSafeContext(ExpandableBlockContext);
   return React.createElement(
     ButtonBase,
@@ -139,9 +133,7 @@ const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
       'aria-expanded': isExpanded,
       'aria-disabled': disabled,
       onClick: mergeEventHandlers(onClickProp, () => {
-        if (disabled) {
-          return;
-        }
+        if (disabled) return;
         setExpanded(!isExpanded);
         onToggle?.(!isExpanded);
       }),
@@ -152,13 +144,12 @@ const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
-const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
-  const fallbackId = useId();
-  const { setDescriptionId } = useSafeContext(ExpandableBlockContext);
+let ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
+  let fallbackId = useId();
+  let { setDescriptionId } = useSafeContext(ExpandableBlockContext);
   React.useEffect(() => {
     setDescriptionId(props.id || fallbackId);
-    return () => setDescriptionId(undefined);
+    return () => setDescriptionId(void 0);
   }, [props.id, fallbackId, setDescriptionId]);
   return React.createElement(Box, {
     ref: forwardedRef,
@@ -167,11 +158,10 @@ const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
     className: cx('iui-expandable-block-caption', props?.className),
   });
 });
-ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
-const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
-  const { status } = useSafeContext(ExpandableBlockContext);
-  const icon = children ?? (status && StatusIconMap[status]());
+let ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
+  let { children, ...rest } = props;
+  let { status } = useSafeContext(ExpandableBlockContext);
+  let icon = children ?? (status && StatusIconMap[status]());
   return React.createElement(
     Icon,
     {
@@ -182,9 +172,8 @@ const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
     icon,
   );
 });
-ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
-const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-  const { className, children, innerProps, ...rest } = props;
+let ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
+  let { className, children, innerProps, ...rest } = props;
   return React.createElement(
     Box,
     {
@@ -195,7 +184,6 @@ const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
     React.createElement(Box, innerProps, children),
   );
 });
-ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
   Wrapper: ExpandableBlockWrapper,
   Trigger: ExpandableBlockTrigger,

package/esm/core/Fieldset/Fieldset.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { FieldsetBase } from '../../utils/index.js';
 import cx from 'classnames';
 export const Fieldset = React.forwardRef((props, ref) => {
-  const { children, className, disabled, legend, ...rest } = props;
+  let { children, className, disabled, legend, ...rest } = props;
   return React.createElement(
-    Box,
+    FieldsetBase,
     {
-      as: 'fieldset',
       className: cx('iui-fieldset', className),
       disabled: disabled,
       ref: ref,

package/esm/core/FileUpload/FileEmptyCard.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { Box, polymorphic, SvgUpload } from '../../utils/index.js';
 import cx from 'classnames';
 import { FileUploadCard } from './FileUploadCard.js';
-const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
+let FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
   children: React.createElement(SvgUpload, null),
 });
-const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
-const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
+let FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
+let FileEmptyCardComponent = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
   return React.createElement(
     Box,
     {

package/esm/core/FileUpload/FileUpload.js

@@ -2,27 +2,25 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, mergeEventHandlers } from '../../utils/index.js';
 export const FileUpload = React.forwardRef((props, forwardedRef) => {
-  const { dragContent, children, onFileDropped, contentProps, ...rest } = props;
-  const [isDragActive, setIsDragActive] = React.useState(false);
-  const onDragOverHandler = (e) => {
+  let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
+  let [isDragActive, setIsDragActive] = React.useState(false);
+  let onDragOverHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
   };
-  const onDragEnterHandler = (e) => {
+  let onDragEnterHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
+    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file')
       setIsDragActive(true);
-    }
   };
-  const onDragLeaveHandler = (e) => {
+  let onDragLeaveHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) {
+    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget))
       setIsDragActive(false);
-    }
   };
-  const onDropHandler = (e) => {
+  let onDropHandler = (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (isDragActive) {

package/esm/core/FileUpload/FileUploadCard.js

@@ -13,28 +13,24 @@ import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-const toBytes = (bytes) => {
-  const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
+let toBytes = (bytes) => {
+  let units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
   let i = 0;
-  while (bytes >= 1024 && ++i) {
-    bytes = bytes / 1024;
-  }
+  while (bytes >= 1024 && ++i) bytes /= 1024;
   return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
 };
-const toDate = (dateNumber) => {
-  const date = new Date(dateNumber);
+let toDate = (dateNumber) => {
+  let date = new Date(dateNumber);
   return date.toDateString() + ' ' + date.toLocaleTimeString();
 };
-const FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
+let FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
   children: React.createElement(SvgDocument, null),
 });
-FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
-const FileUploadCardInfo = polymorphic.span('iui-file-card-text');
-FileUploadCardInfo.displayName = 'FileUploadCard.Info';
-const FileUploadCardTitle = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { files } = useSafeContext(FileUploadCardContext);
-  const title =
+let FileUploadCardInfo = polymorphic.span('iui-file-card-text');
+let FileUploadCardTitle = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  let { files } = useSafeContext(FileUploadCardContext);
+  let title =
     files.length > 1 ? files.length + ' files selected' : files[0].name;
   return React.createElement(
     Box,
@@ -47,17 +43,15 @@ const FileUploadCardTitle = React.forwardRef((props, ref) => {
     children ?? title,
   );
 });
-FileUploadCardTitle.displayName = 'FileUploadCard.Title';
-const FileUploadCardDescription = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const { files } = useSafeContext(FileUploadCardContext);
+let FileUploadCardDescription = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  let { files } = useSafeContext(FileUploadCardContext);
   let description =
     files.length > 1
       ? files[0].name + ', ' + files[1].name
       : toBytes(files[0].size) + ' ' + toDate(files[0].lastModified);
-  if (files.length > 2) {
+  if (files.length > 2)
     description += ', and ' + (files.length - 2) + ' others';
-  }
   return React.createElement(
     Box,
     {
@@ -69,12 +63,10 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     children ?? description,
   );
 });
-FileUploadCardDescription.displayName = 'FileUploadCard.Description';
-const FileUploadCardAction = polymorphic.div('iui-file-card-action');
-FileUploadCardAction.displayName = 'FileUploadCard.Action';
-const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const { inputId } = useSafeContext(FileUploadCardContext);
+let FileUploadCardAction = polymorphic.div('iui-file-card-action');
+let FileUploadCardInputLabel = React.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
+  let { inputId } = useSafeContext(FileUploadCardContext);
   return React.createElement(
     Anchor,
     {
@@ -86,28 +78,23 @@ const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
-FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
-const FileUploadCardInput = React.forwardRef((props, ref) => {
-  const { children, onChange, id, ...rest } = props;
-  const { files, onFilesChange, setInternalFiles, inputId, setInputId } =
+let FileUploadCardInput = React.forwardRef((props, ref) => {
+  let { children, onChange, id, ...rest } = props;
+  let { files, onFilesChange, setInternalFiles, inputId, setInputId } =
     useSafeContext(FileUploadCardContext);
-  const setNativeFilesRef = React.useCallback(
+  let setNativeFilesRef = React.useCallback(
     (node) => {
-      if (!node || !getWindow()?.DataTransfer) {
-        return;
-      }
-      const dataTransfer = new DataTransfer();
+      if (!node || !getWindow()?.DataTransfer) return;
+      let dataTransfer = new DataTransfer();
       dataTransfer.items.clear();
       Array.from(files).forEach((file) => dataTransfer.items.add(file));
       node.files = dataTransfer.files;
     },
     [files],
   );
-  const refs = useMergedRefs(ref, setNativeFilesRef);
+  let refs = useMergedRefs(ref, setNativeFilesRef);
   React.useEffect(() => {
-    if (id && id !== inputId) {
-      setInputId(id);
-    }
+    if (id && id !== inputId) setInputId(id);
   }, [id, inputId, setInputId]);
   return React.createElement(
     React.Fragment,
@@ -117,7 +104,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
       type: 'file',
       unhideOnFocus: false,
       onChange: mergeEventHandlers(onChange, (e) => {
-        const _files = Array.from(e.currentTarget.files || []);
+        let _files = Array.from(e.currentTarget.files || []);
         onFilesChange?.(_files);
         setInternalFiles(_files);
       }),
@@ -128,9 +115,8 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
     children,
   );
 });
-FileUploadCardInput.displayName = 'FileUploadCard.Input';
-const FileUploadCardComponent = React.forwardRef((props, ref) => {
-  const {
+let FileUploadCardComponent = React.forwardRef((props, ref) => {
+  let {
     className,
     children,
     files: filesProp,
@@ -139,10 +125,10 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
     input,
     ...rest
   } = props;
-  const [internalFiles, setInternalFiles] = React.useState();
-  const uid = useId();
-  const [inputId, setInputId] = React.useState(uid);
-  const files = filesProp ?? internalFiles ?? [];
+  let [internalFiles, setInternalFiles] = React.useState();
+  let uid = useId();
+  let [inputId, setInputId] = React.useState(uid);
+  let files = filesProp ?? internalFiles ?? [];
   return React.createElement(
     FileUploadCardContext.Provider,
     {
@@ -193,5 +179,4 @@ export const FileUploadCard = Object.assign(FileUploadCardComponent, {
   InputLabel: FileUploadCardInputLabel,
   Input: FileUploadCardInput,
 });
-FileUploadCard.displayName = 'FileUploadCard';
-export const FileUploadCardContext = React.createContext(undefined);
+export const FileUploadCardContext = React.createContext(void 0);

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { SvgUpload, Box } from '../../utils/index.js';
 import { Anchor } from '../Typography/Anchor.js';
 export const FileUploadTemplate = React.forwardRef((props, ref) => {
-  const {
+  let {
     onChange,
     acceptMultiple = true,
     acceptType,