@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Fieldset/Fieldset.js

@@ -1,28 +1,29 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import cx from 'classnames';
-/**
- * Fieldset component to group several inputs, controls and labels within a form.
- * @example
- * <Fieldset legend='Settings'>
- *   <Input />
- *   <InputGroup>
- *     <ToggleSwitch />
- *     <ToggleSwitch />
- *   </InputGroup>
- * </Fieldset>
- */
 export const Fieldset = React.forwardRef((props, ref) => {
-    const { children, className, disabled, legend, ...rest } = props;
-    return (React.createElement(Box, { as: 'fieldset', className: cx('iui-fieldset', className), disabled: disabled, ref: ref, ...rest },
-        legend && React.createElement("legend", null, legend),
-        disabled
-            ? React.Children.map(children, (child) => React.isValidElement(child)
-                ? React.cloneElement(child, { disabled: true })
-                : child)
-            : children));
+  const { children, className, disabled, legend, ...rest } = props;
+  return _jsxs(Box, {
+    as: 'fieldset',
+    className: cx('iui-fieldset', className),
+    disabled: disabled,
+    ref: ref,
+    ...rest,
+    children: [
+      legend &&
+        _jsx('legend', {
+          children: legend,
+        }),
+      disabled
+        ? React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  disabled: true,
+                })
+              : child,
+          )
+        : children,
+    ],
+  });
 });

package/esm/core/FileUpload/FileEmptyCard.js

@@ -1,46 +1,42 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box, polymorphic, SvgUpload } from '../../utils/index.js';
 import cx from 'classnames';
 import { FileUploadCard } from './FileUploadCard.js';
-// ----------------------------------------------------------------------------
-// FileEmptyCard.Icon component
 const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
-    children: React.createElement(SvgUpload, null),
+  children: _jsx(SvgUpload, {}),
 });
-// ----------------------------------------------------------------------------
-// FileEmptyCard.Text component
 const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
-// ----------------------------------------------------------------------------
-// FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
-        React.createElement(FileEmptyCard.Icon, null),
-        React.createElement(FileEmptyCard.Text, null,
-            React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),
-            React.createElement("div", null, "to upload."))))));
+  const { children, className, ...rest } = props;
+  return _jsx(Box, {
+    className: cx('iui-file-card-empty', className),
+    ref: ref,
+    ...rest,
+    children:
+      children ??
+      _jsxs(_Fragment, {
+        children: [
+          _jsx(FileEmptyCard.Icon, {}),
+          _jsxs(FileEmptyCard.Text, {
+            children: [
+              _jsx(FileUploadCard.InputLabel, {
+                children: 'Choose a file',
+              }),
+              _jsx('div', {
+                children: 'to upload.',
+              }),
+            ],
+          }),
+        ],
+      }),
+  });
 });
-/**
- * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
- * @example
- * <FileEmptyCard />
- * <FileEmptyCard>
- *   <FileEmptyCard.Icon>
- *     <SvgSmileySadVery />
- *   </FileEmptyCard.Icon>
- *   <FileEmptyCard.Text>
- *     <FileUploadCard.InputLabel>
- *       Custom Label Text
- *     </FileUploadCard.InputLabel>
- *     <div>Custom Description Text</div>
- *   </FileEmptyCard.Text>
- * </FileEmptyCard>
- */
 export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-    Icon: FileEmptyCardIcon,
-    Text: FileEmptyCardText,
+  Icon: FileEmptyCardIcon,
+  Text: FileEmptyCardText,
 });

package/esm/core/FileUpload/FileUpload.js

@@ -1,49 +1,66 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, mergeEventHandlers } from '../../utils/index.js';
-/**
- * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
- * Provides support for dragging and dropping multiple files.
- * @example
- * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
- * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
- */
 export const FileUpload = React.forwardRef((props, forwardedRef) => {
-    const { dragContent, children, onFileDropped, contentProps, ...rest } = props;
-    const [isDragActive, setIsDragActive] = React.useState(false);
-    const onDragOverHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const onDragEnterHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // only set active if a file is dragged over
-        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
-            setIsDragActive(true);
-        }
-    };
-    const onDragLeaveHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // only set inactive if secondary target is outside the component
-        if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) {
-            setIsDragActive(false);
-        }
-    };
-    const onDropHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDragActive) {
-            setIsDragActive(false);
-            onFileDropped(e.dataTransfer?.files, e);
-        }
-    };
-    return (React.createElement(Box, { ...rest, className: cx('iui-file-upload', { 'iui-drag': isDragActive }, props?.className), ref: forwardedRef, onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler), onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler), onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler), onDrop: mergeEventHandlers(props.onDrop, onDropHandler) },
-        dragContent ? (children) : (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, children)),
-        dragContent && (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, dragContent))));
+  const { dragContent, children, onFileDropped, contentProps, ...rest } = props;
+  const [isDragActive, setIsDragActive] = React.useState(false);
+  const onDragOverHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const onDragEnterHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
+      setIsDragActive(true);
+    }
+  };
+  const onDragLeaveHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) {
+      setIsDragActive(false);
+    }
+  };
+  const onDropHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragActive) {
+      setIsDragActive(false);
+      onFileDropped(e.dataTransfer?.files, e);
+    }
+  };
+  return _jsxs(Box, {
+    ...rest,
+    className: cx(
+      'iui-file-upload',
+      {
+        'iui-drag': isDragActive,
+      },
+      props?.className,
+    ),
+    ref: forwardedRef,
+    onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
+    onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
+    onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
+    onDrop: mergeEventHandlers(props.onDrop, onDropHandler),
+    children: [
+      dragContent
+        ? children
+        : _jsx(Box, {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-content', contentProps?.className),
+            children: children,
+          }),
+      dragContent &&
+        _jsx(Box, {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-content', contentProps?.className),
+          children: dragContent,
+        }),
+    ],
+  });
 });

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -62,7 +62,7 @@ export declare const FileUploadCardContext: React.Context<{
     /**
      * Callback fired when files have changed
      */
-    onFilesChange?: ((files: File[]) => void) | undefined;
+    onFilesChange?: (files: File[]) => void;
     /**
      * Sets the state of the files within FileUploadCard
      */
@@ -70,7 +70,7 @@ export declare const FileUploadCardContext: React.Context<{
     /**
      * Id to pass to input
      */
-    inputId?: string | undefined;
+    inputId?: string;
     setInputId: (inputId: string) => void;
 } | undefined>;
 export {};

package/esm/core/FileUpload/FileUploadCard.js

@@ -1,153 +1,190 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import * as React from 'react';
-import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, polymorphic, Box, } from '../../utils/index.js';
+import {
+  getWindow,
+  SvgDocument,
+  useMergedRefs,
+  useSafeContext,
+  useId,
+  mergeEventHandlers,
+  polymorphic,
+  Box,
+} from '../../utils/index.js';
 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 i = 0;
-    while (bytes >= 1024 && ++i) {
-        bytes = bytes / 1024;
-    }
-    return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
+  const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
+  let i = 0;
+  while (bytes >= 1024 && ++i) {
+    bytes = bytes / 1024;
+  }
+  return bytes.toFixed(bytes < 10 && i > 0 ? 2 : 0) + units[i];
 };
 const toDate = (dateNumber) => {
-    const date = new Date(dateNumber);
-    return date.toDateString() + ' ' + date.toLocaleTimeString();
+  const date = new Date(dateNumber);
+  return date.toDateString() + ' ' + date.toLocaleTimeString();
 };
-// ----------------------------------------------------------------------------
-// FileUploadCard.Icon component
 const FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
-    children: React.createElement(SvgDocument, null),
+  children: _jsx(SvgDocument, {}),
 });
 FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
-// ----------------------------------------------------------------------------
-// FileUploadCard.Info component
 const FileUploadCardInfo = polymorphic.span('iui-file-card-text');
 FileUploadCardInfo.displayName = 'FileUploadCard.Info';
-// ----------------------------------------------------------------------------
-// FileUploadCard.Title component
 const FileUploadCardTitle = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { files } = useSafeContext(FileUploadCardContext);
-    const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children ?? title));
+  const { children, className, ...rest } = props;
+  const { files } = useSafeContext(FileUploadCardContext);
+  const title =
+    files.length > 1 ? files.length + ' files selected' : files[0].name;
+  return _jsx(Box, {
+    as: 'span',
+    className: cx('iui-file-card-title', className),
+    ref: ref,
+    ...rest,
+    children: children ?? title,
+  });
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
-// ----------------------------------------------------------------------------
-// FileUploadCard.Description component
 const FileUploadCardDescription = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { 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) {
-        description += ', and ' + (files.length - 2) + ' others';
-    }
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
+  const { children, className, ...rest } = props;
+  const { 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) {
+    description += ', and ' + (files.length - 2) + ' others';
+  }
+  return _jsx(Box, {
+    as: 'span',
+    className: cx('iui-file-card-description', className),
+    ref: ref,
+    ...rest,
+    children: children ?? description,
+  });
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
-// ----------------------------------------------------------------------------
-// FileUploadCard.Action component
 const FileUploadCardAction = polymorphic.div('iui-file-card-action');
 FileUploadCardAction.displayName = 'FileUploadCard.Action';
-// ----------------------------------------------------------------------------
-// FileUploadCard.InputLabel component
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { inputId } = useSafeContext(FileUploadCardContext);
-    return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
+  const { children, ...rest } = props;
+  const { inputId } = useSafeContext(FileUploadCardContext);
+  return _jsx(Anchor, {
+    as: 'label',
+    ref: ref,
+    htmlFor: inputId,
+    ...rest,
+    children: children,
+  });
 });
 FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
-// ----------------------------------------------------------------------------
-// FileUploadCard.Input component
 const FileUploadCardInput = React.forwardRef((props, ref) => {
-    const { children, onChange, id, ...rest } = props;
-    const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
-    const setNativeFilesRef = React.useCallback((node) => {
-        if (!node || !getWindow()?.DataTransfer) {
-            return;
-        }
-        const 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);
-    React.useEffect(() => {
-        if (id && id !== inputId) {
-            setInputId(id);
-        }
-    }, [id, inputId, setInputId]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: mergeEventHandlers(onChange, (e) => {
-                const _files = Array.from(e.currentTarget.files || []);
-                onFilesChange?.(_files);
-                setInternalFiles(_files);
-            }), ref: refs, id: id ?? inputId, ...rest }),
-        children));
+  const { children, onChange, id, ...rest } = props;
+  const { files, onFilesChange, setInternalFiles, inputId, setInputId } =
+    useSafeContext(FileUploadCardContext);
+  const setNativeFilesRef = React.useCallback(
+    (node) => {
+      if (!node || !getWindow()?.DataTransfer) {
+        return;
+      }
+      const 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);
+  React.useEffect(() => {
+    if (id && id !== inputId) {
+      setInputId(id);
+    }
+  }, [id, inputId, setInputId]);
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx(VisuallyHidden, {
+        as: 'input',
+        type: 'file',
+        unhideOnFocus: false,
+        onChange: mergeEventHandlers(onChange, (e) => {
+          const _files = Array.from(e.currentTarget.files || []);
+          onFilesChange?.(_files);
+          setInternalFiles(_files);
+        }),
+        ref: refs,
+        id: id ?? inputId,
+        ...rest,
+      }),
+      children,
+    ],
+  });
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';
 const FileUploadCardComponent = React.forwardRef((props, ref) => {
-    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
-    const [internalFiles, setInternalFiles] = React.useState();
-    const uid = useId();
-    const [inputId, setInputId] = React.useState(uid);
-    const files = filesProp ?? internalFiles ?? [];
-    return (React.createElement(FileUploadCardContext.Provider, { value: {
-            files,
-            onFilesChange,
-            setInternalFiles,
-            inputId,
-            setInputId,
-        } },
-        files?.length ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
-            React.createElement(FileUploadCard.Icon, null),
-            React.createElement(FileUploadCard.Info, null,
-                React.createElement(FileUploadCard.Title, null),
-                React.createElement(FileUploadCard.Description, null)),
-            React.createElement(FileUploadCard.Action, null,
-                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
-        input ?? React.createElement(FileUploadCard.Input, null)));
+  const {
+    className,
+    children,
+    files: filesProp,
+    onFilesChange,
+    emptyCard = _jsx(FileEmptyCard, {}),
+    input,
+    ...rest
+  } = props;
+  const [internalFiles, setInternalFiles] = React.useState();
+  const uid = useId();
+  const [inputId, setInputId] = React.useState(uid);
+  const files = filesProp ?? internalFiles ?? [];
+  return _jsxs(FileUploadCardContext.Provider, {
+    value: {
+      files,
+      onFilesChange,
+      setInternalFiles,
+      inputId,
+      setInputId,
+    },
+    children: [
+      files?.length
+        ? _jsx(Box, {
+            className: cx('iui-file-card', className),
+            ref: ref,
+            ...rest,
+            children:
+              children ??
+              _jsxs(_Fragment, {
+                children: [
+                  _jsx(FileUploadCard.Icon, {}),
+                  _jsxs(FileUploadCard.Info, {
+                    children: [
+                      _jsx(FileUploadCard.Title, {}),
+                      _jsx(FileUploadCard.Description, {}),
+                    ],
+                  }),
+                  _jsx(FileUploadCard.Action, {
+                    children: _jsx(FileUploadCard.InputLabel, {
+                      children: 'Replace',
+                    }),
+                  }),
+                ],
+              }),
+          })
+        : emptyCard,
+      input ?? _jsx(FileUploadCard.Input, {}),
+    ],
+  });
 });
-/**
- * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
- * @example
- * <FileUploadCard />
- * <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)}>
- *   <FileUploadCard.Icon>
- *     <SvgSmileyHappyVery />
- *   </FileUploadCard.Icon>
- *   <FileUploadCard.Info>
- *     <FileUploadCard.Title>Custom File Name</FileUploadCard.Title>
- *     <FileUploadCard.Description>
- *       Custom File Description
- *     </FileUploadCard.Description>
- *   </FileUploadCard.Info>
- *   <FileUploadCard.Action>
- *     <Button
- *       onClick={() => {
- *         setFiles([]);
- *       }}
- *     />
- *     <FileUploadCard.Input name={fileInputId} ref={inputRef} />
- *   </FileUploadCard.Action>
- * </FileUploadCard>
- */
 export const FileUploadCard = Object.assign(FileUploadCardComponent, {
-    Icon: FileUploadCardIcon,
-    Info: FileUploadCardInfo,
-    Title: FileUploadCardTitle,
-    Description: FileUploadCardDescription,
-    Action: FileUploadCardAction,
-    InputLabel: FileUploadCardInputLabel,
-    Input: FileUploadCardInput,
+  Icon: FileUploadCardIcon,
+  Info: FileUploadCardInfo,
+  Title: FileUploadCardTitle,
+  Description: FileUploadCardDescription,
+  Action: FileUploadCardAction,
+  InputLabel: FileUploadCardInputLabel,
+  Input: FileUploadCardInput,
 });
 FileUploadCard.displayName = 'FileUploadCard';
 export const FileUploadCardContext = React.createContext(undefined);

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -1,27 +1,51 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../../utils/index.js';
 import { Anchor } from '../Typography/Anchor.js';
-/**
- * @deprecated Use [`FileUploadCard`](https://itwinui.bentley.com/docs/fileupload#fileuploadcard) instead.
- *
- * Default template to be used with the `FileUpload` wrapper component.
- * Contains a hidden input with styled labels (customizable).
- * @example
- * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
- */
 export const FileUploadTemplate = React.forwardRef((props, ref) => {
-    const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-file-upload-template', className), ref: ref, ...rest },
-        React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
-        React.createElement(Box, { className: 'iui-template-text' },
-            React.createElement(Anchor, { as: 'label' },
-                React.createElement(Box, { as: 'input', className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
-                label),
-            React.createElement("div", null, subtitle),
-            children)));
+  const {
+    onChange,
+    acceptMultiple = true,
+    acceptType,
+    label = 'Choose a file',
+    subtitle = 'or drag & drop it here.',
+    children,
+    className,
+    ...rest
+  } = props;
+  return _jsxs(Box, {
+    className: cx('iui-file-upload-template', className),
+    ref: ref,
+    ...rest,
+    children: [
+      _jsx(SvgUpload, {
+        className: 'iui-template-icon',
+        'aria-hidden': true,
+      }),
+      _jsxs(Box, {
+        className: 'iui-template-text',
+        children: [
+          _jsxs(Anchor, {
+            as: 'label',
+            children: [
+              _jsx(Box, {
+                as: 'input',
+                className: 'iui-browse-input',
+                type: 'file',
+                onChange: onChange,
+                multiple: acceptMultiple,
+                accept: acceptType,
+              }),
+              label,
+            ],
+          }),
+          _jsx('div', {
+            children: subtitle,
+          }),
+          children,
+        ],
+      }),
+    ],
+  });
 });