carbon-react 124.2.2 → 124.3.0

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,5 +1,5 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
 declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-declare const rootTagTestRtl: (element: HTMLElement, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTestRtl: (rootNode: HTMLElement, comp: string, elem?: string, role?: string) => void;
 export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -12,9 +12,11 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-const rootTagTestRtl = (element, comp, elem, role) => {
-  expect(element.getAttribute("data-component")).toBe(comp);
-  expect(element.getAttribute("data-element")).toBe(elem);
-  expect(element.getAttribute("data-role")).toBe(role);
+const rootTagTestRtl = (rootNode, comp, elem, role) => {
+  expect(rootNode).toHaveAttribute("data-component", comp);
+  expect(rootNode).toHaveAttribute("data-element", elem);
+  expect(rootNode).toHaveAttribute("data-role", role);
 };
+
+// eslint-disable-next-line jest/no-export
 export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { LinkProps } from "../../../link";
+import { IconType } from "../../../icon";
+interface StatusUploadingProps {
+    /** the status of the upload */
+    status: "uploading";
+    /** a number from 0-100 giving the current upload progress as a percentage. Only used for the `uploading` status.
+     * If the progress prop is not specified in the `uploading` status, a loading animation will be shown instead
+     * (or text equivalent for users with a reduced-motion operating system preference).
+     */
+    progress?: number;
+}
+interface StatusDoneProps extends LinkProps {
+    /** the status of the upload */
+    status: "completed" | "previously";
+    /** the URL opened by the file link. Must be provided for only the `completed` and `previously` statuses. */
+    href: string;
+}
+interface StatusErrorProps {
+    /** the status of the upload */
+    status: "error";
+}
+interface MandatoryStatusProps {
+    /** the name of the file */
+    filename: string;
+    /** a function to be executed when the user clicks the appropriate action button (Clear/Delete File/Cancel Upload)  */
+    onAction: () => void;
+    /** The status message. Used to display the current upload progress, including error messages where appropriate. Not used for the `previously` status. */
+    message?: string;
+    /** The icon to use for the file during or after upload */
+    iconType?: IconType;
+}
+export declare type FileUploadStatusProps = MandatoryStatusProps & (StatusUploadingProps | StatusErrorProps | StatusDoneProps);
+export declare const FileUploadStatus: ({ status, filename, message, onAction, iconType, ...statusProps }: FileUploadStatusProps) => React.JSX.Element;
+export default FileUploadStatus;

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Link from "../../../link";
+import ButtonMinor from "../../../button-minor";
+import StyledTypography from "../../../typography/typography.style";
+import ProgressTracker from "../../../progress-tracker";
+import LoaderBar from "../../../loader-bar";
+import Icon from "../../../icon";
+import { StyledFileUploadStatus, StyledFileUploadStatusRow, StyledFileLinkContainer } from "./file-upload-status.style";
+import useLocale from "../../../../hooks/__internal__/useLocale";
+export const FileUploadStatus = ({
+  status,
+  filename,
+  message,
+  onAction,
+  iconType = "file_generic",
+  ...statusProps
+}) => {
+  const locale = useLocale();
+  const statusMessage = message || locale.fileInput.fileUploadStatus();
+  let buttonText;
+  let linkProps;
+  let progressBar = null;
+  switch (status) {
+    case "uploading":
+      buttonText = locale.fileInput.actions.cancel();
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, {
+        size: "small"
+      }) : /*#__PURE__*/React.createElement(ProgressTracker, {
+        size: "small",
+        progress: statusProps.progress,
+        length: "100%"
+      });
+      break;
+    case "previously":
+    case "completed":
+      buttonText = locale.fileInput.actions.delete();
+      linkProps = {
+        ...statusProps,
+        icon: iconType
+      };
+      break;
+    case "error":
+      buttonText = locale.fileInput.actions.clear();
+      break;
+    // istanbul ignore next
+    default:
+      // no other cases if consumers are using TS, but ESLint still insists on it
+      break;
+  }
+  const actionButton = /*#__PURE__*/React.createElement(ButtonMinor, {
+    onClick: onAction,
+    buttonType: "tertiary"
+  }, buttonText);
+  const fileLink = linkProps ? /*#__PURE__*/React.createElement(Link, linkProps, filename) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    type: iconType
+  }), /*#__PURE__*/React.createElement("span", null, filename));
+  const mainRow = status !== "previously" ? /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, null, /*#__PURE__*/React.createElement(StyledTypography, {
+    as: "p",
+    mb: 0,
+    "aria-live": "polite"
+  }, statusMessage), actionButton) : /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, {
+    onlyRow: true
+  }, /*#__PURE__*/React.createElement(StyledFileLinkContainer, null, fileLink), actionButton);
+  const secondRow = status !== "previously" ? /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, {
+    upperPadding: true,
+    lowerPadding: true
+  }, /*#__PURE__*/React.createElement(StyledFileLinkContainer, null, fileLink)) : null;
+  return /*#__PURE__*/React.createElement(StyledFileUploadStatus, {
+    hasError: status === "error"
+  }, mainRow, secondRow, progressBar);
+};
+export default FileUploadStatus;

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.d.ts

@@ -0,0 +1,12 @@
+export declare const StyledFileLinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledFileUploadStatusRowProps {
+    upperPadding?: boolean;
+    lowerPadding?: boolean;
+    onlyRow?: boolean;
+}
+export declare const StyledFileUploadStatusRow: import("styled-components").StyledComponent<"div", any, StyledFileUploadStatusRowProps, never>;
+interface StyledFileUploadStatusProps {
+    hasError: boolean;
+}
+export declare const StyledFileUploadStatus: import("styled-components").StyledComponent<"div", any, StyledFileUploadStatusProps, never>;
+export {};

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -0,0 +1,97 @@
+import styled, { css } from "styled-components";
+import StyledTypography from "../../../typography/typography.style";
+import StyledIcon from "../../../icon/icon.style";
+import { StyledProgressBar, InnerBar as ProgressTrackerInnerBar } from "../../../progress-tracker/progress-tracker.style";
+import StyledLoaderBar, { StyledLoader, InnerBar as LoaderBarInnerBar } from "../../../loader-bar/loader-bar.style";
+import { StyledLink, StyledContent } from "../../../link/link.style";
+export const StyledFileLinkContainer = styled.div`
+  color: var(--colorsActionMajorYin090);
+  display: flex;
+  align-items: center;
+  overflow-x: clip;
+  overflow-y: visible;
+  padding-right: var(--spacing150);
+
+  ${StyledLink} {
+    overflow: hidden;
+  }
+
+  ${StyledLink} a {
+    overflow: hidden;
+    display: flex;
+    text-decoration: none;
+  }
+
+  ${StyledContent} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+  }
+
+  &&& ${StyledIcon} {
+    display: inline-flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 24px;
+    height: 24px;
+
+    // only apply these styles when the icon is not part of a Link component
+    :not(${StyledLink} ${StyledIcon}) {
+      color: var(--colorsUtilityYin065);
+      padding-right: var(--spacing100);
+    }
+  }
+`;
+export const StyledFileUploadStatusRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${({
+  onlyRow
+}) => onlyRow ? "" : "align-items: baseline;"}
+  padding-left: var(--spacing150);
+  ${({
+  upperPadding
+}) => upperPadding ? "padding-top: var(--spacing050);" : ""}
+  ${({
+  lowerPadding
+}) => lowerPadding ? "padding-bottom: var(--spacing125);" : ""}
+
+  ${StyledTypography} {
+    color: var(--colorsUtilityYin055);
+  }
+`;
+export const StyledFileUploadStatus = styled.div`
+  background-color: var(--colorsUtilityYang100);
+  ${({
+  hasError
+}) => {
+  const borderWidthToken = hasError ? "borderWidth200" : "borderWidth100";
+  const colorToken = hasError ? "colorsSemanticNegative500" : "colorsUtilityMajor300";
+  return css`
+      border: var(--${borderWidthToken}) solid var(--${colorToken});
+      ${hasError && `&& ${StyledTypography} {
+        color: var(--${colorToken});
+        font-weight: 500;
+      }`}
+    `;
+}}
+  border-radius: var(--borderRadius050);
+  width: 100%;
+
+  ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
+    border-radius: var(--borderRadius050);
+    border: none;
+  }
+
+  ${StyledLoader} {
+    display: flex;
+  }
+
+  ${StyledLoaderBar} {
+    background-color: var(--colorsSemanticNeutral200);
+  }
+
+  ${LoaderBarInnerBar} {
+    background-color: var(--colorsSemanticNeutral500);
+  }
+`;

package/esm/components/file-input/__internal__/file-upload-status/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./file-upload-status.component";
+export type { FileUploadStatusProps } from "./file-upload-status.component";

package/esm/components/file-input/__internal__/file-upload-status/index.js

@@ -0,0 +1 @@
+export { default } from "./file-upload-status.component";

package/esm/components/file-input/file-input.component.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { InputProps } from "../../__internal__/input";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { FileUploadStatusProps } from "./__internal__/file-upload-status";
+export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
+    /** Which file format(s) to accept. Will be passed to the underlying HTML input.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept  */
+    accept?: string;
+    /** Text to appear on the main button. Defaults to "Select file" */
+    buttonText?: string;
+    /** Explanatory text to appear inside the input area. Defaults to "or drag and drop your file" */
+    dragAndDropText?: string;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: React.ReactNode;
+    /** Sets the default layout to vertical - with the button below the explanatory text rather than next to it.
+     * This is the equivalent of removing the maxHeight prop - it will be over-ridden if this prop is set explicitly. */
+    isVertical?: boolean;
+    /** Label content */
+    label?: string;
+    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    maxHeight?: string;
+    /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
+    maxWidth?: string;
+    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    minHeight?: string;
+    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    minWidth?: string;
+    /** onChange event handler. Accepts a list of all files currently entered to the input. */
+    onChange: (files: FileList) => void;
+    /** used to control how to display the progress of uploaded file(s) within the component */
+    uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
+}
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+export default FileInput;

package/esm/components/file-input/file-input.component.js

@@ -0,0 +1,353 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useRef, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { InputBehaviour } from "../../__internal__/input-behaviour";
+import FormField from "../../__internal__/form-field";
+import useUniqueId from "../../hooks/__internal__/useUniqueId";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
+import ValidationMessage from "../../__internal__/validation-message";
+import { StyledHiddenFileInput, StyledFileInputPresentation } from "./file-input.style";
+import { StyledHintText, ErrorBorder } from "../textbox/textbox.style";
+import ButtonMinor from "../button-minor";
+import Typography from "../typography";
+import FileUploadStatus from "./__internal__/file-upload-status";
+import Box from "../box";
+import useLocale from "../../hooks/__internal__/useLocale";
+const FileInput = /*#__PURE__*/React.forwardRef(({
+  accept,
+  buttonText,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  dragAndDropText,
+  error,
+  label,
+  id,
+  inputHint,
+  isVertical,
+  maxHeight,
+  maxWidth,
+  minHeight = "40px",
+  minWidth = "256px",
+  name,
+  onChange,
+  required,
+  uploadStatus = [],
+  ...rest
+}, ref) => {
+  const locale = useLocale();
+  const textOnButton = buttonText || locale.fileInput.selectFile();
+  const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
+  const sizeProps = {
+    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxWidth: maxWidth || minWidth,
+    minHeight,
+    minWidth
+  };
+  const [uniqueId, uniqueName] = useUniqueId(id, name);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const [isDraggingFile, setIsDraggingFile] = useState(false);
+  const internalInputRef = useRef(null);
+  const internalCallbackRef = fileInput => {
+    internalInputRef.current = fileInput;
+    if (typeof ref === "function") {
+      ref(fileInput);
+    } else if (ref) {
+      ref.current = fileInput;
+    }
+  };
+  const startDrag = e => {
+    e.preventDefault();
+    if (e.dataTransfer?.types.includes("Files")) {
+      setIsDraggingFile(true);
+    }
+  };
+  const stopDrag = e => {
+    e.preventDefault();
+    setIsDraggingFile(false);
+  };
+  useEffect(() => {
+    document.addEventListener("dragover", startDrag);
+    document.addEventListener("drop", stopDrag);
+    document.addEventListener("dragleave", stopDrag);
+    return () => {
+      document.removeEventListener("dragover", startDrag);
+      document.removeEventListener("drop", stopDrag);
+      document.removeEventListener("dragleave", stopDrag);
+    };
+  }, []);
+  const onSelectFileClick = () => {
+    internalInputRef.current?.click();
+  };
+  const onFileAdded = files => {
+    onChange?.(files);
+  };
+  const onDragOver = e => {
+    e.preventDefault();
+    if (e.dataTransfer?.types.includes("Files")) {
+      setIsDraggedOver(true);
+    }
+  };
+  const onDragLeave = e => {
+    e.preventDefault();
+    e.stopPropagation(); // stop event triggering the document listener that resets the styles
+    setIsDraggedOver(false);
+  };
+  const onDrop = e => {
+    e.preventDefault();
+    setIsDraggedOver(false);
+    onFileAdded(e.dataTransfer.files);
+  };
+  const onInputChange = e => {
+    onFileAdded(e.target.files);
+  };
+  const {
+    labelId,
+    validationId
+  } = useInputAccessibility({
+    id: uniqueId,
+    validationRedesignOptIn: true,
+    error,
+    label
+  });
+
+  // allow for single input that a single set of status props is provided
+  const filesUploaded = Array.isArray(uploadStatus) ? uploadStatus : [uploadStatus];
+  const input = /*#__PURE__*/React.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(StyledHintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    validationId: validationId
+  }), error && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: false
+  }), /*#__PURE__*/React.createElement(StyledHiddenFileInput, _extends({}, required && {
+    required
+  }, {
+    accept: accept,
+    "aria-invalid": !!error,
+    id: uniqueId,
+    ref: internalCallbackRef,
+    name: uniqueName,
+    onChange: onInputChange,
+    type: "file"
+  }, rest)), /*#__PURE__*/React.createElement(StyledFileInputPresentation, _extends({
+    isDraggedOver: isDraggedOver,
+    isDraggingFile: isDraggingFile,
+    error: error,
+    onDragLeave: onDragLeave,
+    onDragOver: onDragOver,
+    onDrop: onDrop
+  }, sizeProps), /*#__PURE__*/React.createElement(ButtonMinor, {
+    buttonType: "primary",
+    onClick: onSelectFileClick
+  }, textOnButton), /*#__PURE__*/React.createElement(Typography, {
+    m: 0
+  }, mainText))));
+  return /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    error: error,
+    label: label,
+    labelId: labelId,
+    id: uniqueId,
+    isRequired: required,
+    "data-component": "file-input",
+    "data-role": dataRole,
+    "data-element": dataElement,
+    validationRedesignOptIn: true // do not support old-style validation for File Input component
+  }, filterStyledSystemMarginProps(rest)), filesUploaded.length === 0 ? input : filesUploaded.map(props => /*#__PURE__*/React.createElement(StyledFileInputPresentation, _extends({
+    hasUploadStatus: true
+  }, sizeProps, {
+    key: props.filename
+  }), /*#__PURE__*/React.createElement(FileUploadStatus, props)))));
+});
+FileInput.propTypes = {
+  "accept": PropTypes.string,
+  "buttonText": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "dragAndDropText": PropTypes.string,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "id": PropTypes.string,
+  "inputHint": PropTypes.node,
+  "isVertical": PropTypes.bool,
+  "label": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxHeight": PropTypes.string,
+  "maxWidth": PropTypes.string,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "minHeight": PropTypes.string,
+  "minWidth": PropTypes.string,
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onChange": PropTypes.func.isRequired,
+  "required": PropTypes.bool,
+  "uploadStatus": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.shape({
+    "filename": PropTypes.string.isRequired,
+    "iconType": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+    "message": PropTypes.string,
+    "onAction": PropTypes.func.isRequired,
+    "progress": PropTypes.number,
+    "status": PropTypes.oneOf(["uploading"]).isRequired
+  })])), PropTypes.object, PropTypes.shape({
+    "filename": PropTypes.string.isRequired,
+    "iconType": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+    "message": PropTypes.string,
+    "onAction": PropTypes.func.isRequired,
+    "progress": PropTypes.number,
+    "status": PropTypes.oneOf(["uploading"]).isRequired
+  })])
+};
+export { FileInput };
+FileInput.displayName = "FileInput";
+export default FileInput;