@opengovsg/oui 0.0.20 → 0.0.22

package/dist/cjs/button/button.cjs

@@ -7,9 +7,9 @@ var $670gB$react = require('react');
 var utils = require('@react-aria/utils');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var ripple = require('../ripple/ripple.cjs');
 var useRipple = require('../ripple/use-ripple.cjs');
 var spinner = require('../spinner/spinner.cjs');
+var ripple = require('../ripple/ripple.cjs');
 
 const Button = $670gB$react.forwardRef(
   ({

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
-var select = require('../select/select.cjs');
-var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
 var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
+var select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
 var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {
@@ -63,7 +63,8 @@ const CalendarMonthDaySelector = () => {
           list: slots.yearList({ className: classNames?.yearList }),
           selectedText: slots.selectorText({
             className: classNames?.selectorText
-          })
+          }),
+          popover: "min-w-[8ch]"
         },
         selectedKey: state.visibleRange.start.year,
         "aria-label": formatMessage("selectYear"),

package/dist/cjs/checkbox/checkbox.cjs

@@ -5,11 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
 var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
 var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
 var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
+var field = require('../field/field.cjs');
 
 const Checkbox = ({
   classNames,

package/dist/cjs/combo-box/combo-box.cjs

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
+var field = require('../field/field.cjs');
 var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var popover = require('../popover/popover.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

package/dist/cjs/date-field/date-field.cjs

@@ -6,12 +6,20 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
+var field = require('../field/field.cjs');
 
 function DateField(originalProps) {
   const [
-    { label, description, errorMessage, className, classNames, ...props },
+    {
+      inputProps,
+      label,
+      description,
+      errorMessage,
+      className,
+      classNames,
+      ...props
+    },
     variantProps
   ] = $670gB$react.useMemo(
     () => utils.mapPropsVariants(originalProps, ouiTheme.dateFieldStyles.variantKeys),
@@ -28,11 +36,11 @@ function DateField(originalProps) {
       isDisabled: variantProps.isDisabled,
       className: ouiTheme.composeTailwindRenderProps(
         className ?? classNames?.base,
-        "flex flex-col gap-2"
+        "flex w-full flex-col gap-2"
       ),
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles }),
+        /* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
         description && /* @__PURE__ */ jsxRuntime.jsx(
           field.Description,
           {
@@ -67,6 +75,7 @@ function DateInput(originalProps) {
           className: ouiTheme.composeRenderProps(
             classNames?.segment,
             (className2, renderProps) => styles.segment({
+              isEditable: segment.isEditable,
               ...renderProps,
               className: className2
             })

package/dist/cjs/date-picker/date-picker.cjs

@@ -6,14 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var calendar$1 = require('../calendar/calendar.cjs');
-require('@internationalized/date');
-var dateField = require('../date-field/date-field.cjs');
-var field = require('../field/field.cjs');
-var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
+var dateField = require('../date-field/date-field.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
+var calendar$1 = require('../calendar/calendar.cjs');
+var field = require('../field/field.cjs');
 var button = require('../button/button.cjs');
+var popover = require('../popover/popover.cjs');
 
 function DatePicker(originalProps) {
   const [
@@ -26,6 +25,7 @@ function DatePicker(originalProps) {
       calendarProps,
       popoverProps,
       calendarButtonProps,
+      selectorIcon,
       ...props
     },
     variantProps
@@ -64,20 +64,44 @@ function DatePicker(originalProps) {
                 className: classNames?.calendarButton
               }),
               ...calendarButtonProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
+              children: selectorIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                calendar.default,
+                {
+                  className: styles.selectorIcon({
+                    className: classNames?.selectorIcon
+                  }),
+                  "aria-hidden": true
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
-          calendar$1.Calendar,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover,
+          {
+            placement: "bottom end",
+            classNames: classNames?.popover,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
+              calendar$1.Calendar,
+              {
+                size: variantProps.size === "xs" ? "sm" : variantProps.size,
+                classNames: classNames?.calendar,
+                pageBehavior: props.pageBehavior,
+                ...calendarProps
+              }
+            ) })
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
           {
-            size: variantProps.size === "xs" ? "sm" : variantProps.size,
-            classNames: classNames?.calendar,
-            ...calendarProps
+            className: classNames?.description,
+            size: variantProps.size,
+            children: description
           }
-        ) }) }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
       ]
     }
   );

package/dist/cjs/date-range-picker/date-range-picker.cjs

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var dateField = require('../date-field/date-field.cjs');
-var field = require('../field/field.cjs');
-var popover = require('../popover/popover.cjs');
-var rangeCalendar = require('../range-calendar/range-calendar.cjs');
 var utils = require('../system/utils.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
+var rangeCalendar = require('../range-calendar/range-calendar.cjs');
+var field = require('../field/field.cjs');
+var dateField = require('../date-field/date-field.cjs');
 var button = require('../button/button.cjs');
+var popover = require('../popover/popover.cjs');
 
 function DateRangePicker(originalProps) {
   const [

package/dist/cjs/field/field.cjs

@@ -3,6 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
@@ -14,12 +15,19 @@ function Description({ size, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Text,
     {
-      ...props,
       slot: "description",
+      ...props,
       className: ouiTheme.descriptionStyles({ className, size })
     }
   );
 }
+function FieldErrorIcon({
+  size,
+  className
+}) {
+  const styles = ouiTheme.fieldErrorStyles({ size });
+  return /* @__PURE__ */ jsxRuntime.jsx(circleAlert.default, { className: styles.icon({ className }) });
+}
 function FieldError({
   children,
   className,
@@ -28,7 +36,15 @@ function FieldError({
   ...props
 }) {
   const styles = ouiTheme.fieldErrorStyles({ size });
-  if (!children) return null;
+  const childrenFromProps = $670gB$react.useMemo(() => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FieldErrorIcon, { className: classNames?.icon, size }),
+        children
+      ] });
+    }
+    return children;
+  }, [children, classNames?.icon, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.FieldError,
     {
@@ -37,10 +53,7 @@ function FieldError({
         className ?? classNames?.text,
         (className2, renderProps) => styles.text({ ...renderProps, className: className2 })
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(circleAlert.default, { className: styles.icon({ className: classNames?.icon }) }),
-        children
-      ] })
+      children: childrenFromProps
     }
   );
 }
@@ -59,5 +72,6 @@ function FieldGroup(props) {
 
 exports.Description = Description;
 exports.FieldError = FieldError;
+exports.FieldErrorIcon = FieldErrorIcon;
 exports.FieldGroup = FieldGroup;
 exports.Label = Label;

package/dist/cjs/field/index.cjs

@@ -7,5 +7,6 @@ var field = require('./field.cjs');
 
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
+exports.FieldErrorIcon = field.FieldErrorIcon;
 exports.FieldGroup = field.FieldGroup;
 exports.Label = field.Label;

package/dist/cjs/file-dropzone/contexts.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [FileDropzoneStateContext, useFileDropzoneStateContext] = context.createContext({
+  strict: true,
+  name: "FileDropzoneStateContext"
+});
+const [FileDropzoneStyleContext, useFileDropzoneStyleContext] = context.createContext({
+  strict: true,
+  name: "FileDropzoneStyleContext"
+});
+
+exports.FileDropzoneStateContext = FileDropzoneStateContext;
+exports.FileDropzoneStyleContext = FileDropzoneStyleContext;
+exports.useFileDropzoneStateContext = useFileDropzoneStateContext;
+exports.useFileDropzoneStyleContext = useFileDropzoneStyleContext;

package/dist/cjs/file-dropzone/file-dropzone.cjs

@@ -0,0 +1,311 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var form = require('@react-stately/form');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var reactDropzone = require('react-dropzone');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var contexts = require('./contexts.cjs');
+var fileInfo = require('./file-info.cjs');
+var utils$1 = require('./utils.cjs');
+var useControllableState = require('../hooks/use-controllable-state.cjs');
+var upload = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs');
+var field = require('../field/field.cjs');
+
+const FileDropzone = (originalProps) => {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.fileDropzoneStyles.variantKeys
+  );
+  const {
+    name,
+    allowedMimeTypes = [],
+    maxFileSize = Number.POSITIVE_INFINITY,
+    minFileSize = 0,
+    showFileSizeText = true,
+    maxFiles = 1,
+    isDisabled,
+    isReadOnly,
+    classNames,
+    itemClassNames,
+    validator,
+    showRejectedFiles,
+    onError,
+    errorMessage,
+    label,
+    description,
+    children,
+    hideDropzoneOnValue = maxFiles === 1,
+    imagePreview = "small"
+  } = props;
+  const [value, setValue] = useControllableState.useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue || [],
+    onChange: props.onChange
+  });
+  const [rejections, setRejections] = useControllableState.useControllableState({
+    value: props.rejections,
+    defaultValue: [],
+    onChange: props.onRejection
+  });
+  const validationState = form.useFormValidationState({
+    ...props,
+    value
+  });
+  const { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = reactAria.useField({
+    ...props,
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  const slots = ouiTheme.fileDropzoneStyles(variantProps);
+  const fileSizeTextId = reactAria.useId();
+  const formatError = $670gB$react.useCallback(
+    (error) => utils$1.formatErrorMessage(error, {
+      maxFileSize,
+      minFileSize,
+      maxFiles
+    }),
+    [maxFileSize, maxFiles, minFileSize]
+  );
+  const onDrop = $670gB$react.useCallback(
+    (acceptedFiles, fileRejections) => {
+      const files = acceptedFiles;
+      if (showRejectedFiles) {
+        const invalidFiles = fileRejections.map(({ file, errors }) => {
+          file.errors = errors;
+          return file;
+        });
+        setRejections(invalidFiles);
+      }
+      setValue(files);
+      if (onError && fileRejections.length > 0) {
+        const firstError = fileRejections[0].errors[0];
+        onError(formatError(firstError));
+      }
+    },
+    [formatError, onError, setRejections, setValue, showRejectedFiles]
+  );
+  const handleRemoveFile = $670gB$react.useCallback(
+    (fileName) => {
+      setValue((files) => files.filter((file) => file.name !== fileName));
+    },
+    [setValue]
+  );
+  const handleRemoveRejection = $670gB$react.useCallback(
+    (fileName) => {
+      setRejections(
+        (rejections2) => rejections2.filter((file) => file.name !== fileName)
+      );
+    },
+    [setRejections]
+  );
+  const { getInputProps, ...dropzoneState } = reactDropzone.useDropzone({
+    validator,
+    accept: allowedMimeTypes.reduce(
+      (acc, type) => ({ ...acc, [type]: [] }),
+      {}
+    ),
+    onError: (e) => onError?.(e.message),
+    onDrop,
+    disabled: isDisabled,
+    noDrag: isReadOnly,
+    // Prevent ref hijack when there is a label
+    noClick: true,
+    noKeyboard: true,
+    maxSize: maxFileSize,
+    minSize: minFileSize,
+    maxFiles,
+    multiple: maxFiles !== 1
+  });
+  const fileSizeText = $670gB$react.useMemo(() => {
+    const notDefaultMaxFileSize = maxFileSize !== Number.POSITIVE_INFINITY;
+    const notDefaultMinFileSize = minFileSize !== 0;
+    const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
+    if (!shouldShow) return null;
+    if (notDefaultMaxFileSize && notDefaultMinFileSize) {
+      return `File size must be between ${utils$1.formatBytes(minFileSize, 2)} and ${utils$1.formatBytes(
+        maxFileSize,
+        2
+      )}`;
+    }
+    if (notDefaultMaxFileSize) {
+      return `Maximum file size: ${utils$1.formatBytes(maxFileSize, 2)}`;
+    }
+    if (notDefaultMinFileSize) {
+      return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2)}`;
+    }
+    return null;
+  }, [maxFileSize, minFileSize, showFileSizeText]);
+  const triggerFileSelector = $670gB$react.useCallback(() => {
+    if (isDisabled || isReadOnly) return;
+    dropzoneState.inputRef.current?.click();
+  }, [dropzoneState, isDisabled, isReadOnly]);
+  $670gB$react.useEffect(() => {
+    if (value.length <= maxFiles) {
+      let changed = false;
+      const newFiles = value.map((file) => {
+        if (file.errors?.some((e) => e.code === "too-many-files")) {
+          file.errors = file.errors.filter((e) => e.code !== "too-many-files");
+          changed = true;
+        }
+        return file;
+      });
+      if (changed) {
+        setValue(newFiles);
+      }
+    }
+  }, [maxFiles, setValue, value]);
+  const inputProps = $670gB$react.useMemo(() => {
+    const inputProps2 = { ...fieldProps, name };
+    if (fileSizeText) {
+      inputProps2["aria-describedby"] = inputProps2["aria-describedby"] ? `${inputProps2["aria-describedby"]} ${fileSizeTextId}` : fileSizeTextId;
+    }
+    return getInputProps(inputProps2);
+  }, [fieldProps, getInputProps, fileSizeTextId, name, fileSizeText]);
+  const showDropzone = $670gB$react.useMemo(() => {
+    if (hideDropzoneOnValue) {
+      return value.length < maxFiles;
+    }
+    return true;
+  }, [hideDropzoneOnValue, maxFiles, value.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Provider,
+    {
+      values: [
+        [
+          contexts.FileDropzoneStyleContext,
+          { slots, classNames, itemClassNames, ...variantProps }
+        ],
+        [
+          contexts.FileDropzoneStateContext,
+          {
+            isDisabled,
+            isReadOnly,
+            maxFiles,
+            maxFileSize,
+            showDropzone,
+            files: value,
+            handleRemoveFile,
+            handleRemoveRejection,
+            formatError,
+            inputProps,
+            triggerFileSelector,
+            ...dropzoneState
+          }
+        ],
+        [reactAriaComponents.LabelContext, labelProps],
+        [
+          reactAriaComponents.GroupContext,
+          {
+            role: "presentation",
+            isInvalid,
+            isDisabled: props.isDisabled || false
+          }
+        ],
+        [
+          reactAriaComponents.TextContext,
+          {
+            slots: {
+              fileSize: {},
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }
+        ],
+        [reactAriaComponents.FieldErrorContext, { isInvalid, validationErrors, validationDetails }]
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Group, { className: slots.base({ className: classNames?.base }), children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, children: label }),
+        showDropzone && /* @__PURE__ */ jsxRuntime.jsx(FileDropzoneDropzone, {}),
+        value.map((file) => {
+          if (typeof children === "function") {
+            return children({
+              file,
+              removeFile: () => handleRemoveFile(file.name)
+            });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(fileInfo.FileInfo, { imagePreview, file }, file.name);
+        }),
+        rejections.length >= 1 && rejections.map((rj) => /* @__PURE__ */ jsxRuntime.jsx(fileInfo.FileInfo, { imagePreview, file: rj }, rj.name)),
+        fileSizeText && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
+          {
+            size: variantProps.size,
+            id: fileSizeTextId,
+            slot: "fileSize",
+            children: fileSizeText
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
+        errorMessage && /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
+      ] })
+    }
+  );
+};
+const FileDropzoneDropzone = () => {
+  const {
+    maxFiles,
+    getRootProps,
+    inputProps,
+    triggerFileSelector,
+    isDisabled,
+    isDragActive
+  } = contexts.useFileDropzoneStateContext();
+  const { slots, classNames } = contexts.useFileDropzoneStyleContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...getRootProps({
+        "aria-disabled": isDisabled,
+        className: slots.group({
+          className: classNames?.group
+        })
+      }),
+      tabIndex: isDisabled ? void 0 : 0,
+      onClick: triggerFileSelector,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          triggerFileSelector();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-dragging": ouiTheme.dataAttr(isDragActive),
+            className: slots.dropzone({ className: classNames?.dropzone }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(upload.default, { className: slots.icon({ className: classNames?.icon }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: slots.text({ className: classNames?.text }), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: slots.dropzoneHighlight({
+                      className: classNames?.dropzoneHighlight
+                    }),
+                    children: [
+                      "Choose ",
+                      maxFiles === 1 ? `file` : `files`
+                    ]
+                  }
+                ),
+                " ",
+                "or drag and drop here"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.FileDropzone = FileDropzone;