@wireapp/react-ui-kit 8.14.1 → 8.14.4

package/src/Form/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","sourceRoot":"","sources":["CodeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["CodeInput.tsx"],"names":["CodeInputWrapper","props","digitInputStyle","theme","marginLeft","boxShadow","COLOR_V2","GRAY_60","fontSize","lineHeight","borderRadius","padding","textAlign","width","height","DigitInput","React","forwardRef","ref","CodeInput","style","digits","autoFocus","markInvalid","onCodeComplete","noop","disabled","Array","fill","values","setValues","inputs","forceSelection","event","target","select","forceSelectionPreventDefault","preventDefault","nextField","currentFieldIndex","nextFieldIndex","focus","previousField","setValue","fieldIndex","value","test","valuesCopy","slice","length","handleKeyDown","key","handlePaste","pastedValue","clipboardData","getData","cleanedPaste","replace","concat","split","completeCode","join","from","_","index","node"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {useEffect, useState} from 'react';\n\nimport {Theme} from '../Layout';\nimport {noop} from '../util';\nimport {InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\n\nconst CodeInputWrapper = (props: React.HTMLProps<HTMLDivElement>) => (\n  <div\n    css={{\n      display: 'flex',\n      justifyContent: 'center',\n    }}\n    {...props}\n  />\n);\n\ntype DigitInputProps<T = HTMLInputElement> = InputProps<T>;\n\nconst digitInputStyle: <T>(theme: Theme, props: DigitInputProps<T>) => CSSObject = (theme, props) => ({\n  ...inputStyle(theme, props),\n  '& + &': {\n    marginLeft: 'min(19px, 2vw)',\n  },\n  '&:hover': {\n    boxShadow: `0 0 0 1px ${COLOR_V2.GRAY_60}`,\n  },\n  fontSize: '24px',\n  lineHeight: '28px',\n  borderRadius: '12px',\n  padding: 0,\n  textAlign: 'center',\n  width: 'min(48px, 13vw)',\n  height: '56px',\n});\n\nconst DigitInput: React.FC<DigitInputProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  DigitInputProps<HTMLInputElement>\n>((props, ref) => <input ref={ref} css={(theme: Theme) => digitInputStyle(theme, props)} {...props} type=\"tel\" />);\n\nexport interface CodeInputProps<T = HTMLInputElement> extends InputProps<T> {\n  autoFocus?: boolean;\n  digits?: number;\n  markInvalid?: boolean;\n  onCodeComplete?: (completeCode?: string) => void;\n}\n\nexport const CodeInput = ({\n  style,\n  digits = 6,\n  autoFocus = false,\n  markInvalid,\n  onCodeComplete = noop,\n  disabled,\n}: CodeInputProps) => {\n  const [values, setValues] = useState(Array(digits).fill(''));\n  const inputs = Array(digits);\n\n  const forceSelection = (\n    event:\n      | React.MouseEvent<HTMLInputElement>\n      | React.TouchEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.FocusEvent<HTMLInputElement>,\n  ) => {\n    const target = event.target as HTMLInputElement;\n    target.select();\n  };\n\n  const forceSelectionPreventDefault = (\n    event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>,\n  ) => {\n    forceSelection(event);\n    event.preventDefault();\n  };\n\n  const nextField = (currentFieldIndex: number) => {\n    const nextFieldIndex = currentFieldIndex + 1;\n    if (nextFieldIndex < digits) {\n      inputs[nextFieldIndex].focus();\n    }\n  };\n\n  const previousField = (currentFieldIndex: number) => {\n    if (currentFieldIndex > 0) {\n      inputs[currentFieldIndex - 1].focus();\n    }\n  };\n\n  const setValue = (fieldIndex: number, value: string) => {\n    if (/^[0-9]?$/.test(value)) {\n      const valuesCopy = values.slice();\n      valuesCopy[fieldIndex] = value;\n      setValues(valuesCopy);\n      if (value.length) {\n        nextField(fieldIndex);\n      }\n    }\n  };\n\n  const handleKeyDown = (fieldIndex: number, {key}: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (key) {\n      case 'Backspace':\n        setValue(fieldIndex, '');\n        previousField(fieldIndex);\n        break;\n      case 'ArrowLeft':\n        previousField(fieldIndex);\n        break;\n      case 'ArrowRight':\n        nextField(fieldIndex);\n        break;\n    }\n    if (/^[0-9]$/.test(key)) {\n      setValue(fieldIndex, key);\n    }\n  };\n\n  const handlePaste = (fieldIndex: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n    const pastedValue = event.clipboardData.getData('Text');\n    const cleanedPaste = pastedValue.replace(/[^0-9]/g, '');\n    if (/^[0-9]+$/.test(cleanedPaste)) {\n      setValues(values.slice(0, fieldIndex).concat(cleanedPaste.split('')).slice(0, digits));\n    }\n  };\n\n  useEffect(() => {\n    const completeCode = values.join('');\n    if (completeCode.length === digits) {\n      onCodeComplete(completeCode);\n    }\n  }, [values]);\n\n  return (\n    <CodeInputWrapper style={style}>\n      {Array.from({length: digits}, (_, index) => (\n        <DigitInput\n          autoFocus={index === 0 && autoFocus}\n          key={index}\n          onPaste={event => handlePaste(index, event)}\n          onFocus={forceSelection}\n          onMouseDown={forceSelectionPreventDefault}\n          onTouchStart={forceSelectionPreventDefault}\n          onKeyDown={event => handleKeyDown(index, event)}\n          onKeyUp={forceSelection}\n          markInvalid={markInvalid}\n          ref={node => (inputs[index] = node)}\n          value={values[index]}\n          onChange={() => {}}\n          disabled={disabled}\n        />\n      ))}\n    </CodeInputWrapper>\n  );\n};\n"],"file":"CodeInput.js"}

package/src/Form/DropFileInput.js

@@ -1,139 +1,237 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2022 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.DropFileInput = exports.dropFileZonDescriptionStyle = exports.dropFileZoneHeadingStyle = exports.dropFileZoneLabelStyle = exports.dropFileZoneWrapperStyle = exports.dropFileWrapperStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
-const Identity_1 = require("../Identity");
-const Icon_1 = require("../Icon");
-const Layout_1 = require("../Layout");
-const visuallyHiddenStyles = {
-    clip: 'rect(0 0 0 0)',
-    clipPath: 'inset(50%)',
-    height: '1px',
-    overflow: 'hidden',
-    position: 'absolute',
-    whiteSpace: 'nowrap',
-    width: '1px',
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _Identity = require("../Identity");
+
+var _Icon = require("../Icon");
+
+var _Layout = require("../Layout");
+
+var _excluded = ["onFilesUploaded", "onInvalidFilesDropError", "dropFileZoneWrapperCSS", "labelText", "headingText", "description", "accept", "multiple"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var visuallyHiddenStyles = {
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  overflow: 'hidden',
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px'
 };
-exports.dropFileWrapperStyle = {
-    maxWidth: '330px',
+var dropFileWrapperStyle = {
+  maxWidth: '330px'
 };
-const dropFileZoneWrapperStyle = (theme, isDraggedOver) => ({
+exports.dropFileWrapperStyle = dropFileWrapperStyle;
+
+var dropFileZoneWrapperStyle = function dropFileZoneWrapperStyle(theme, isDraggedOver) {
+  return {
     width: '100%',
     padding: '28px 12px',
-    border: `1px dashed ${theme.general.primaryColor}`,
+    border: "1px dashed ".concat(theme.general.primaryColor),
     borderBottomWidth: '2px',
     borderRadius: '6px',
     textAlign: 'center',
-    backgroundColor: isDraggedOver ? theme.general.backgroundColor : Identity_1.COLOR.WHITE,
+    backgroundColor: isDraggedOver ? theme.general.backgroundColor : _Identity.COLOR.WHITE,
     fontWeight: 400,
     fontSize: '12px',
     lineHeight: '13px',
-    color: Identity_1.COLOR.GRAY,
-});
+    color: _Identity.COLOR.GRAY
+  };
+};
+
 exports.dropFileZoneWrapperStyle = dropFileZoneWrapperStyle;
-const dropFileZoneLabelStyle = theme => ({
+
+var dropFileZoneLabelStyle = function dropFileZoneLabelStyle(theme) {
+  return {
     color: theme.general.primaryColor,
     cursor: 'pointer',
     ':focus-within': {
-        outline: `1px solid ${theme.general.primaryColor}`,
+      outline: "1px solid ".concat(theme.general.primaryColor)
     },
     ':hover': {
-        textDecoration: 'underline',
-    },
-});
+      textDecoration: 'underline'
+    }
+  };
+};
+
 exports.dropFileZoneLabelStyle = dropFileZoneLabelStyle;
-exports.dropFileZoneHeadingStyle = {
-    display: 'block',
-    whiteSpace: 'pre-line',
+var dropFileZoneHeadingStyle = {
+  display: 'block',
+  whiteSpace: 'pre-line'
 };
-exports.dropFileZonDescriptionStyle = {
-    marginTop: '12px',
-    fontWeight: 400,
-    fontSize: '10px',
-    lineHeight: '13px',
-    color: Identity_1.COLOR.GRAY,
-    whiteSpace: 'pre-line',
+exports.dropFileZoneHeadingStyle = dropFileZoneHeadingStyle;
+var dropFileZonDescriptionStyle = {
+  marginTop: '12px',
+  fontWeight: 400,
+  fontSize: '10px',
+  lineHeight: '13px',
+  color: _Identity.COLOR.GRAY,
+  whiteSpace: 'pre-line'
+};
+exports.dropFileZonDescriptionStyle = dropFileZonDescriptionStyle;
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "pztmsj",
+  styles: "max-width:280px;margin:0 auto"
+} : {
+  name: "urj1u0-DropFileInput",
+  styles: "max-width:280px;margin:0 auto;label:DropFileInput;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRyb3BGaWxlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtMbUUiLCJmaWxlIjoiRHJvcEZpbGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VTdGF0ZSwgRkMsIGZvcndhcmRSZWYsIERyYWdFdmVudH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtVcGxvYWRJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCB7RmxleEJveH0gZnJvbSAnLi4vTGF5b3V0JztcblxuZXhwb3J0IGludGVyZmFjZSBEcm9wRmlsZUlucHV0UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgVGV4dFByb3BzPFQ+IHtcbiAgb25GaWxlc1VwbG9hZGVkOiAoZmlsZXM6IEZpbGVbXSkgPT4gdm9pZDtcbiAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3I6ICgpID0+IHZvaWQ7XG4gIGxhYmVsVGV4dDogc3RyaW5nO1xuICBoZWFkaW5nVGV4dDogc3RyaW5nO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgZHJvcEZpbGVab25lV3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuY29uc3QgdmlzdWFsbHlIaWRkZW5TdHlsZXM6IENTU09iamVjdCA9IHtcbiAgY2xpcDogJ3JlY3QoMCAwIDAgMCknLFxuICBjbGlwUGF0aDogJ2luc2V0KDUwJSknLFxuICBoZWlnaHQ6ICcxcHgnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgd2lkdGg6ICcxcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlV3JhcHBlclN0eWxlOiBDU1NPYmplY3QgPSB7XG4gIG1heFdpZHRoOiAnMzMwcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlWm9uZVdyYXBwZXJTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgaXNEcmFnZ2VkT3ZlcjogYm9vbGVhbikgPT4gQ1NTT2JqZWN0ID0gKFxuICB0aGVtZSxcbiAgaXNEcmFnZ2VkT3ZlcixcbikgPT4gKHtcbiAgd2lkdGg6ICcxMDAlJyxcbiAgcGFkZGluZzogJzI4cHggMTJweCcsXG4gIGJvcmRlcjogYDFweCBkYXNoZWQgJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICBib3JkZXJCb3R0b21XaWR0aDogJzJweCcsXG4gIGJvcmRlclJhZGl1czogJzZweCcsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIGJhY2tncm91bmRDb2xvcjogaXNEcmFnZ2VkT3ZlciA/IHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yIDogQ09MT1IuV0hJVEUsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMnB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZHJvcEZpbGVab25lTGFiZWxTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSkgPT4gQ1NTT2JqZWN0ID0gdGhlbWUgPT4gKHtcbiAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJzpmb2N1cy13aXRoaW4nOiB7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIH0sXG4gICc6aG92ZXInOiB7XG4gICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbmVIZWFkaW5nU3R5bGU6IENTU09iamVjdCA9IHtcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbkRlc2NyaXB0aW9uU3R5bGU6IENTU09iamVjdCA9IHtcbiAgbWFyZ2luVG9wOiAnMTJweCcsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMHB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBEcm9wRmlsZUlucHV0OiBGQzxEcm9wRmlsZUlucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgRHJvcEZpbGVJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KFxuICAoXG4gICAge1xuICAgICAgb25GaWxlc1VwbG9hZGVkLFxuICAgICAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3IsXG4gICAgICBkcm9wRmlsZVpvbmVXcmFwcGVyQ1NTLFxuICAgICAgbGFiZWxUZXh0LFxuICAgICAgaGVhZGluZ1RleHQsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGFjY2VwdCxcbiAgICAgIG11bHRpcGxlLFxuICAgICAgLi4uaW5wdXRQcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBbaXNEcmFnZ2VkT3Zlciwgc2V0SXNEcmFnZ2VkT3Zlcl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgICBjb25zdCByZXNldERyYWdnZWRPdmVyID0gKCkgPT4gc2V0SXNEcmFnZ2VkT3ZlcihmYWxzZSk7XG5cbiAgICBjb25zdCBoYW5kbGVEcmFnT3ZlciA9IChldmVudDogRHJhZ0V2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgZXZlbnQuZGF0YVRyYW5zZmVyLmRyb3BFZmZlY3QgPSAnY29weSc7XG5cbiAgICAgIGlmIChldmVudC5kYXRhVHJhbnNmZXIuaXRlbXMubGVuZ3RoID4gMCkge1xuICAgICAgICBzZXRJc0RyYWdnZWRPdmVyKHRydWUpO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBoYW5kbGVEcm9wID0gKGV2ZW50OiBEcmFnRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cbiAgICAgIHJlc2V0RHJhZ2dlZE92ZXIoKTtcblxuICAgICAgY29uc3Qge2ZpbGVzfSA9IGV2ZW50LmRhdGFUcmFuc2ZlcjtcbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZmlsZXNBcnIgPSBtdWx0aXBsZSA/IEFycmF5LmZyb20oZmlsZXMpIDogW2ZpbGVzWzBdXTtcblxuICAgICAgY29uc3QgYXJlRmlsZXNWYWxpZCA9ICEhYWNjZXB0XG4gICAgICAgID8gZmlsZXNBcnIuZXZlcnkoZmlsZSA9PlxuICAgICAgICAgICAgYWNjZXB0XG4gICAgICAgICAgICAgIC5zcGxpdCgnLCcpXG4gICAgICAgICAgICAgIC5tYXAodiA9PiB2LnRyaW0oKSlcbiAgICAgICAgICAgICAgLmluY2x1ZGVzKGZpbGUudHlwZSksXG4gICAgICAgICAgKVxuICAgICAgICA6IHRydWU7XG5cbiAgICAgIGlmICghYXJlRmlsZXNWYWxpZCkge1xuICAgICAgICBvbkludmFsaWRGaWxlc0Ryb3BFcnJvcigpO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIG9uRmlsZXNVcGxvYWRlZChmaWxlc0Fycik7XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChldmVudDogUmVhY3QuQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHtmaWxlc30gPSBldmVudC50YXJnZXQ7XG5cbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgb25GaWxlc1VwbG9hZGVkKEFycmF5LmZyb20oZmlsZXMpKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY3NzPXtkcm9wRmlsZVdyYXBwZXJTdHlsZX0+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgICAgICAuLi5kcm9wRmlsZVpvbmVXcmFwcGVyU3R5bGUodGhlbWUsIGlzRHJhZ2dlZE92ZXIpLFxuICAgICAgICAgICAgLi4uZHJvcEZpbGVab25lV3JhcHBlckNTUyxcbiAgICAgICAgICB9KX1cbiAgICAgICAgICBkYXRhLXRlc3RpZD1cImRyb3B6b25lXCJcbiAgICAgICAgICBvbkRyYWdPdmVyPXtoYW5kbGVEcmFnT3Zlcn1cbiAgICAgICAgICBvbkRyYWdMZWF2ZT17cmVzZXREcmFnZ2VkT3Zlcn1cbiAgICAgICAgICBvbkRyb3A9e2hhbmRsZURyb3B9XG4gICAgICAgID5cbiAgICAgICAgICA8RmxleEJveCBhbGlnbj1cImNlbnRlclwiIGp1c3RpZnk9XCJjZW50ZXJcIiBmbGV4V3JhcD1cIndyYXBcIiBjc3M9e3ttYXhXaWR0aDogJzI4MHB4JywgbWFyZ2luOiAnMCBhdXRvJ319PlxuICAgICAgICAgICAgPFVwbG9hZEljb24gY3NzPXt7bWFyZ2luOiAnMTJweCAwJ319IC8+XG4gICAgICAgICAgICA8ZGl2IGNzcz17e21heFdpZHRoOiAnMTYwcHgnLCBtYXJnaW46ICcwIDI1cHgnfX0+XG4gICAgICAgICAgICAgIDxzcGFuIGNzcz17ZHJvcEZpbGVab25lSGVhZGluZ1N0eWxlfT57aGVhZGluZ1RleHR9PC9zcGFuPlxuICAgICAgICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXtgJHtoZWFkaW5nVGV4dH0gJHtsYWJlbFRleHR9ICgke2Rlc2NyaXB0aW9ufSlgfVxuICAgICAgICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gZHJvcEZpbGVab25lTGFiZWxTdHlsZSh0aGVtZSl9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3Bhbj57bGFiZWxUZXh0fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZmlsZS1pbnB1dFwiXG4gICAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICAgIGFjY2VwdD17YWNjZXB0fVxuICAgICAgICAgICAgICAgICAgbXVsdGlwbGU9e211bHRpcGxlfVxuICAgICAgICAgICAgICAgICAgY3NzPXt2aXN1YWxseUhpZGRlblN0eWxlc31cbiAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgICAgICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgICAgICAgICAgICB7Li4uaW5wdXRQcm9wc31cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAge2Rlc2NyaXB0aW9uICYmIDxwIGNzcz17ZHJvcEZpbGVab25EZXNjcmlwdGlvblN0eWxlfT57ZGVzY3JpcHRpb259PC9wPn1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-exports.DropFileInput = (0, react_2.forwardRef)((_a, ref) => {
-    var { onFilesUploaded, onInvalidFilesDropError, dropFileZoneWrapperCSS, labelText, headingText, description, accept, multiple } = _a, inputProps = __rest(_a, ["onFilesUploaded", "onInvalidFilesDropError", "dropFileZoneWrapperCSS", "labelText", "headingText", "description", "accept", "multiple"]);
-    const [isDraggedOver, setIsDraggedOver] = (0, react_2.useState)(false);
-    const resetDraggedOver = () => setIsDraggedOver(false);
-    const handleDragOver = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        event.dataTransfer.dropEffect = 'copy';
-        if (event.dataTransfer.items.length > 0) {
-            setIsDraggedOver(true);
-        }
-    };
-    const handleDrop = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        resetDraggedOver();
-        const { files } = event.dataTransfer;
-        if (files.length < 1) {
-            return;
-        }
-        const filesArr = multiple ? Array.from(files) : [files[0]];
-        const areFilesValid = !!accept
-            ? filesArr.every(file => accept
-                .split(',')
-                .map(v => v.trim())
-                .includes(file.type))
-            : true;
-        if (!areFilesValid) {
-            onInvalidFilesDropError();
-            return;
-        }
-        onFilesUploaded(filesArr);
-    };
-    const handleChange = (event) => {
-        const { files } = event.target;
-        if (files.length < 1) {
-            return;
-        }
-        onFilesUploaded(Array.from(files));
-    };
-    return ((0, react_1.jsx)("div", { css: exports.dropFileWrapperStyle },
-        (0, react_1.jsx)("div", { css: (theme) => (Object.assign(Object.assign({}, (0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver)), dropFileZoneWrapperCSS)), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop },
-            (0, react_1.jsx)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' } },
-                (0, react_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }),
-                (0, react_1.jsx)("div", { css: { maxWidth: '160px', margin: '0 25px' } },
-                    (0, react_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle }, headingText),
-                    (0, react_1.jsx)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme) },
-                        (0, react_1.jsx)("span", null, labelText),
-                        (0, react_1.jsx)("input", Object.assign({ "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file" }, inputProps)))))),
-        description && (0, react_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle }, description)));
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1ee42c1",
+  styles: "margin:12px 0"
+} : {
+  name: "qqk9rh-DropFileInput",
+  styles: "margin:12px 0;label:DropFileInput;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRyb3BGaWxlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Md0IiLCJmaWxlIjoiRHJvcEZpbGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VTdGF0ZSwgRkMsIGZvcndhcmRSZWYsIERyYWdFdmVudH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtVcGxvYWRJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCB7RmxleEJveH0gZnJvbSAnLi4vTGF5b3V0JztcblxuZXhwb3J0IGludGVyZmFjZSBEcm9wRmlsZUlucHV0UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgVGV4dFByb3BzPFQ+IHtcbiAgb25GaWxlc1VwbG9hZGVkOiAoZmlsZXM6IEZpbGVbXSkgPT4gdm9pZDtcbiAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3I6ICgpID0+IHZvaWQ7XG4gIGxhYmVsVGV4dDogc3RyaW5nO1xuICBoZWFkaW5nVGV4dDogc3RyaW5nO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgZHJvcEZpbGVab25lV3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuY29uc3QgdmlzdWFsbHlIaWRkZW5TdHlsZXM6IENTU09iamVjdCA9IHtcbiAgY2xpcDogJ3JlY3QoMCAwIDAgMCknLFxuICBjbGlwUGF0aDogJ2luc2V0KDUwJSknLFxuICBoZWlnaHQ6ICcxcHgnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgd2lkdGg6ICcxcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlV3JhcHBlclN0eWxlOiBDU1NPYmplY3QgPSB7XG4gIG1heFdpZHRoOiAnMzMwcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlWm9uZVdyYXBwZXJTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgaXNEcmFnZ2VkT3ZlcjogYm9vbGVhbikgPT4gQ1NTT2JqZWN0ID0gKFxuICB0aGVtZSxcbiAgaXNEcmFnZ2VkT3ZlcixcbikgPT4gKHtcbiAgd2lkdGg6ICcxMDAlJyxcbiAgcGFkZGluZzogJzI4cHggMTJweCcsXG4gIGJvcmRlcjogYDFweCBkYXNoZWQgJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICBib3JkZXJCb3R0b21XaWR0aDogJzJweCcsXG4gIGJvcmRlclJhZGl1czogJzZweCcsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIGJhY2tncm91bmRDb2xvcjogaXNEcmFnZ2VkT3ZlciA/IHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yIDogQ09MT1IuV0hJVEUsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMnB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZHJvcEZpbGVab25lTGFiZWxTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSkgPT4gQ1NTT2JqZWN0ID0gdGhlbWUgPT4gKHtcbiAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJzpmb2N1cy13aXRoaW4nOiB7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIH0sXG4gICc6aG92ZXInOiB7XG4gICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbmVIZWFkaW5nU3R5bGU6IENTU09iamVjdCA9IHtcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbkRlc2NyaXB0aW9uU3R5bGU6IENTU09iamVjdCA9IHtcbiAgbWFyZ2luVG9wOiAnMTJweCcsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMHB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBEcm9wRmlsZUlucHV0OiBGQzxEcm9wRmlsZUlucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgRHJvcEZpbGVJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KFxuICAoXG4gICAge1xuICAgICAgb25GaWxlc1VwbG9hZGVkLFxuICAgICAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3IsXG4gICAgICBkcm9wRmlsZVpvbmVXcmFwcGVyQ1NTLFxuICAgICAgbGFiZWxUZXh0LFxuICAgICAgaGVhZGluZ1RleHQsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGFjY2VwdCxcbiAgICAgIG11bHRpcGxlLFxuICAgICAgLi4uaW5wdXRQcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBbaXNEcmFnZ2VkT3Zlciwgc2V0SXNEcmFnZ2VkT3Zlcl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgICBjb25zdCByZXNldERyYWdnZWRPdmVyID0gKCkgPT4gc2V0SXNEcmFnZ2VkT3ZlcihmYWxzZSk7XG5cbiAgICBjb25zdCBoYW5kbGVEcmFnT3ZlciA9IChldmVudDogRHJhZ0V2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgZXZlbnQuZGF0YVRyYW5zZmVyLmRyb3BFZmZlY3QgPSAnY29weSc7XG5cbiAgICAgIGlmIChldmVudC5kYXRhVHJhbnNmZXIuaXRlbXMubGVuZ3RoID4gMCkge1xuICAgICAgICBzZXRJc0RyYWdnZWRPdmVyKHRydWUpO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBoYW5kbGVEcm9wID0gKGV2ZW50OiBEcmFnRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cbiAgICAgIHJlc2V0RHJhZ2dlZE92ZXIoKTtcblxuICAgICAgY29uc3Qge2ZpbGVzfSA9IGV2ZW50LmRhdGFUcmFuc2ZlcjtcbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZmlsZXNBcnIgPSBtdWx0aXBsZSA/IEFycmF5LmZyb20oZmlsZXMpIDogW2ZpbGVzWzBdXTtcblxuICAgICAgY29uc3QgYXJlRmlsZXNWYWxpZCA9ICEhYWNjZXB0XG4gICAgICAgID8gZmlsZXNBcnIuZXZlcnkoZmlsZSA9PlxuICAgICAgICAgICAgYWNjZXB0XG4gICAgICAgICAgICAgIC5zcGxpdCgnLCcpXG4gICAgICAgICAgICAgIC5tYXAodiA9PiB2LnRyaW0oKSlcbiAgICAgICAgICAgICAgLmluY2x1ZGVzKGZpbGUudHlwZSksXG4gICAgICAgICAgKVxuICAgICAgICA6IHRydWU7XG5cbiAgICAgIGlmICghYXJlRmlsZXNWYWxpZCkge1xuICAgICAgICBvbkludmFsaWRGaWxlc0Ryb3BFcnJvcigpO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIG9uRmlsZXNVcGxvYWRlZChmaWxlc0Fycik7XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChldmVudDogUmVhY3QuQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHtmaWxlc30gPSBldmVudC50YXJnZXQ7XG5cbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgb25GaWxlc1VwbG9hZGVkKEFycmF5LmZyb20oZmlsZXMpKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY3NzPXtkcm9wRmlsZVdyYXBwZXJTdHlsZX0+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgICAgICAuLi5kcm9wRmlsZVpvbmVXcmFwcGVyU3R5bGUodGhlbWUsIGlzRHJhZ2dlZE92ZXIpLFxuICAgICAgICAgICAgLi4uZHJvcEZpbGVab25lV3JhcHBlckNTUyxcbiAgICAgICAgICB9KX1cbiAgICAgICAgICBkYXRhLXRlc3RpZD1cImRyb3B6b25lXCJcbiAgICAgICAgICBvbkRyYWdPdmVyPXtoYW5kbGVEcmFnT3Zlcn1cbiAgICAgICAgICBvbkRyYWdMZWF2ZT17cmVzZXREcmFnZ2VkT3Zlcn1cbiAgICAgICAgICBvbkRyb3A9e2hhbmRsZURyb3B9XG4gICAgICAgID5cbiAgICAgICAgICA8RmxleEJveCBhbGlnbj1cImNlbnRlclwiIGp1c3RpZnk9XCJjZW50ZXJcIiBmbGV4V3JhcD1cIndyYXBcIiBjc3M9e3ttYXhXaWR0aDogJzI4MHB4JywgbWFyZ2luOiAnMCBhdXRvJ319PlxuICAgICAgICAgICAgPFVwbG9hZEljb24gY3NzPXt7bWFyZ2luOiAnMTJweCAwJ319IC8+XG4gICAgICAgICAgICA8ZGl2IGNzcz17e21heFdpZHRoOiAnMTYwcHgnLCBtYXJnaW46ICcwIDI1cHgnfX0+XG4gICAgICAgICAgICAgIDxzcGFuIGNzcz17ZHJvcEZpbGVab25lSGVhZGluZ1N0eWxlfT57aGVhZGluZ1RleHR9PC9zcGFuPlxuICAgICAgICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXtgJHtoZWFkaW5nVGV4dH0gJHtsYWJlbFRleHR9ICgke2Rlc2NyaXB0aW9ufSlgfVxuICAgICAgICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gZHJvcEZpbGVab25lTGFiZWxTdHlsZSh0aGVtZSl9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3Bhbj57bGFiZWxUZXh0fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZmlsZS1pbnB1dFwiXG4gICAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICAgIGFjY2VwdD17YWNjZXB0fVxuICAgICAgICAgICAgICAgICAgbXVsdGlwbGU9e211bHRpcGxlfVxuICAgICAgICAgICAgICAgICAgY3NzPXt2aXN1YWxseUhpZGRlblN0eWxlc31cbiAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgICAgICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgICAgICAgICAgICB7Li4uaW5wdXRQcm9wc31cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAge2Rlc2NyaXB0aW9uICYmIDxwIGNzcz17ZHJvcEZpbGVab25EZXNjcmlwdGlvblN0eWxlfT57ZGVzY3JpcHRpb259PC9wPn1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "1bszqua",
+  styles: "max-width:160px;margin:0 25px"
+} : {
+  name: "r5lgab-DropFileInput",
+  styles: "max-width:160px;margin:0 25px;label:DropFileInput;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRyb3BGaWxlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9MaUIiLCJmaWxlIjoiRHJvcEZpbGVJbnB1dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHt1c2VTdGF0ZSwgRkMsIGZvcndhcmRSZWYsIERyYWdFdmVudH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtVcGxvYWRJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCB7RmxleEJveH0gZnJvbSAnLi4vTGF5b3V0JztcblxuZXhwb3J0IGludGVyZmFjZSBEcm9wRmlsZUlucHV0UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgVGV4dFByb3BzPFQ+IHtcbiAgb25GaWxlc1VwbG9hZGVkOiAoZmlsZXM6IEZpbGVbXSkgPT4gdm9pZDtcbiAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3I6ICgpID0+IHZvaWQ7XG4gIGxhYmVsVGV4dDogc3RyaW5nO1xuICBoZWFkaW5nVGV4dDogc3RyaW5nO1xuICBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgZHJvcEZpbGVab25lV3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuY29uc3QgdmlzdWFsbHlIaWRkZW5TdHlsZXM6IENTU09iamVjdCA9IHtcbiAgY2xpcDogJ3JlY3QoMCAwIDAgMCknLFxuICBjbGlwUGF0aDogJ2luc2V0KDUwJSknLFxuICBoZWlnaHQ6ICcxcHgnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgd2lkdGg6ICcxcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlV3JhcHBlclN0eWxlOiBDU1NPYmplY3QgPSB7XG4gIG1heFdpZHRoOiAnMzMwcHgnLFxufTtcblxuZXhwb3J0IGNvbnN0IGRyb3BGaWxlWm9uZVdyYXBwZXJTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgaXNEcmFnZ2VkT3ZlcjogYm9vbGVhbikgPT4gQ1NTT2JqZWN0ID0gKFxuICB0aGVtZSxcbiAgaXNEcmFnZ2VkT3ZlcixcbikgPT4gKHtcbiAgd2lkdGg6ICcxMDAlJyxcbiAgcGFkZGluZzogJzI4cHggMTJweCcsXG4gIGJvcmRlcjogYDFweCBkYXNoZWQgJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICBib3JkZXJCb3R0b21XaWR0aDogJzJweCcsXG4gIGJvcmRlclJhZGl1czogJzZweCcsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIGJhY2tncm91bmRDb2xvcjogaXNEcmFnZ2VkT3ZlciA/IHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yIDogQ09MT1IuV0hJVEUsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMnB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZHJvcEZpbGVab25lTGFiZWxTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSkgPT4gQ1NTT2JqZWN0ID0gdGhlbWUgPT4gKHtcbiAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgJzpmb2N1cy13aXRoaW4nOiB7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIH0sXG4gICc6aG92ZXInOiB7XG4gICAgdGV4dERlY29yYXRpb246ICd1bmRlcmxpbmUnLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbmVIZWFkaW5nU3R5bGU6IENTU09iamVjdCA9IHtcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBkcm9wRmlsZVpvbkRlc2NyaXB0aW9uU3R5bGU6IENTU09iamVjdCA9IHtcbiAgbWFyZ2luVG9wOiAnMTJweCcsXG4gIGZvbnRXZWlnaHQ6IDQwMCxcbiAgZm9udFNpemU6ICcxMHB4JyxcbiAgbGluZUhlaWdodDogJzEzcHgnLFxuICBjb2xvcjogQ09MT1IuR1JBWSxcbiAgd2hpdGVTcGFjZTogJ3ByZS1saW5lJyxcbn07XG5cbmV4cG9ydCBjb25zdCBEcm9wRmlsZUlucHV0OiBGQzxEcm9wRmlsZUlucHV0UHJvcHM8SFRNTElucHV0RWxlbWVudD4+ID0gZm9yd2FyZFJlZjxcbiAgSFRNTElucHV0RWxlbWVudCxcbiAgRHJvcEZpbGVJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KFxuICAoXG4gICAge1xuICAgICAgb25GaWxlc1VwbG9hZGVkLFxuICAgICAgb25JbnZhbGlkRmlsZXNEcm9wRXJyb3IsXG4gICAgICBkcm9wRmlsZVpvbmVXcmFwcGVyQ1NTLFxuICAgICAgbGFiZWxUZXh0LFxuICAgICAgaGVhZGluZ1RleHQsXG4gICAgICBkZXNjcmlwdGlvbixcbiAgICAgIGFjY2VwdCxcbiAgICAgIG11bHRpcGxlLFxuICAgICAgLi4uaW5wdXRQcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBbaXNEcmFnZ2VkT3Zlciwgc2V0SXNEcmFnZ2VkT3Zlcl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgICBjb25zdCByZXNldERyYWdnZWRPdmVyID0gKCkgPT4gc2V0SXNEcmFnZ2VkT3ZlcihmYWxzZSk7XG5cbiAgICBjb25zdCBoYW5kbGVEcmFnT3ZlciA9IChldmVudDogRHJhZ0V2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgZXZlbnQuZGF0YVRyYW5zZmVyLmRyb3BFZmZlY3QgPSAnY29weSc7XG5cbiAgICAgIGlmIChldmVudC5kYXRhVHJhbnNmZXIuaXRlbXMubGVuZ3RoID4gMCkge1xuICAgICAgICBzZXRJc0RyYWdnZWRPdmVyKHRydWUpO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBoYW5kbGVEcm9wID0gKGV2ZW50OiBEcmFnRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cbiAgICAgIHJlc2V0RHJhZ2dlZE92ZXIoKTtcblxuICAgICAgY29uc3Qge2ZpbGVzfSA9IGV2ZW50LmRhdGFUcmFuc2ZlcjtcbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgY29uc3QgZmlsZXNBcnIgPSBtdWx0aXBsZSA/IEFycmF5LmZyb20oZmlsZXMpIDogW2ZpbGVzWzBdXTtcblxuICAgICAgY29uc3QgYXJlRmlsZXNWYWxpZCA9ICEhYWNjZXB0XG4gICAgICAgID8gZmlsZXNBcnIuZXZlcnkoZmlsZSA9PlxuICAgICAgICAgICAgYWNjZXB0XG4gICAgICAgICAgICAgIC5zcGxpdCgnLCcpXG4gICAgICAgICAgICAgIC5tYXAodiA9PiB2LnRyaW0oKSlcbiAgICAgICAgICAgICAgLmluY2x1ZGVzKGZpbGUudHlwZSksXG4gICAgICAgICAgKVxuICAgICAgICA6IHRydWU7XG5cbiAgICAgIGlmICghYXJlRmlsZXNWYWxpZCkge1xuICAgICAgICBvbkludmFsaWRGaWxlc0Ryb3BFcnJvcigpO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIG9uRmlsZXNVcGxvYWRlZChmaWxlc0Fycik7XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChldmVudDogUmVhY3QuQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHtcbiAgICAgIGNvbnN0IHtmaWxlc30gPSBldmVudC50YXJnZXQ7XG5cbiAgICAgIGlmIChmaWxlcy5sZW5ndGggPCAxKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgb25GaWxlc1VwbG9hZGVkKEFycmF5LmZyb20oZmlsZXMpKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY3NzPXtkcm9wRmlsZVdyYXBwZXJTdHlsZX0+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgICAgICAuLi5kcm9wRmlsZVpvbmVXcmFwcGVyU3R5bGUodGhlbWUsIGlzRHJhZ2dlZE92ZXIpLFxuICAgICAgICAgICAgLi4uZHJvcEZpbGVab25lV3JhcHBlckNTUyxcbiAgICAgICAgICB9KX1cbiAgICAgICAgICBkYXRhLXRlc3RpZD1cImRyb3B6b25lXCJcbiAgICAgICAgICBvbkRyYWdPdmVyPXtoYW5kbGVEcmFnT3Zlcn1cbiAgICAgICAgICBvbkRyYWdMZWF2ZT17cmVzZXREcmFnZ2VkT3Zlcn1cbiAgICAgICAgICBvbkRyb3A9e2hhbmRsZURyb3B9XG4gICAgICAgID5cbiAgICAgICAgICA8RmxleEJveCBhbGlnbj1cImNlbnRlclwiIGp1c3RpZnk9XCJjZW50ZXJcIiBmbGV4V3JhcD1cIndyYXBcIiBjc3M9e3ttYXhXaWR0aDogJzI4MHB4JywgbWFyZ2luOiAnMCBhdXRvJ319PlxuICAgICAgICAgICAgPFVwbG9hZEljb24gY3NzPXt7bWFyZ2luOiAnMTJweCAwJ319IC8+XG4gICAgICAgICAgICA8ZGl2IGNzcz17e21heFdpZHRoOiAnMTYwcHgnLCBtYXJnaW46ICcwIDI1cHgnfX0+XG4gICAgICAgICAgICAgIDxzcGFuIGNzcz17ZHJvcEZpbGVab25lSGVhZGluZ1N0eWxlfT57aGVhZGluZ1RleHR9PC9zcGFuPlxuICAgICAgICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXtgJHtoZWFkaW5nVGV4dH0gJHtsYWJlbFRleHR9ICgke2Rlc2NyaXB0aW9ufSlgfVxuICAgICAgICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gZHJvcEZpbGVab25lTGFiZWxTdHlsZSh0aGVtZSl9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3Bhbj57bGFiZWxUZXh0fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPVwiZmlsZS1pbnB1dFwiXG4gICAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICAgIGFjY2VwdD17YWNjZXB0fVxuICAgICAgICAgICAgICAgICAgbXVsdGlwbGU9e211bHRpcGxlfVxuICAgICAgICAgICAgICAgICAgY3NzPXt2aXN1YWxseUhpZGRlblN0eWxlc31cbiAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgICAgICAgICAgICB0eXBlPVwiZmlsZVwiXG4gICAgICAgICAgICAgICAgICB7Li4uaW5wdXRQcm9wc31cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAge2Rlc2NyaXB0aW9uICYmIDxwIGNzcz17ZHJvcEZpbGVab25EZXNjcmlwdGlvblN0eWxlfT57ZGVzY3JpcHRpb259PC9wPn1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var DropFileInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
+  var onFilesUploaded = _ref.onFilesUploaded,
+      onInvalidFilesDropError = _ref.onInvalidFilesDropError,
+      dropFileZoneWrapperCSS = _ref.dropFileZoneWrapperCSS,
+      labelText = _ref.labelText,
+      headingText = _ref.headingText,
+      description = _ref.description,
+      accept = _ref.accept,
+      multiple = _ref.multiple,
+      inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isDraggedOver = _useState2[0],
+      setIsDraggedOver = _useState2[1];
+
+  var resetDraggedOver = function resetDraggedOver() {
+    return setIsDraggedOver(false);
+  };
+
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'copy';
+
+    if (event.dataTransfer.items.length > 0) {
+      setIsDraggedOver(true);
+    }
+  };
+
+  var handleDrop = function handleDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    resetDraggedOver();
+    var files = event.dataTransfer.files;
+
+    if (files.length < 1) {
+      return;
+    }
+
+    var filesArr = multiple ? Array.from(files) : [files[0]];
+    var areFilesValid = !!accept ? filesArr.every(function (file) {
+      return accept.split(',').map(function (v) {
+        return v.trim();
+      }).includes(file.type);
+    }) : true;
+
+    if (!areFilesValid) {
+      onInvalidFilesDropError();
+      return;
+    }
+
+    onFilesUploaded(filesArr);
+  };
+
+  var handleChange = function handleChange(event) {
+    var files = event.target.files;
+
+    if (files.length < 1) {
+      return;
+    }
+
+    onFilesUploaded(Array.from(files));
+  };
+
+  return (0, _react.jsx)("div", {
+    css: dropFileWrapperStyle
+  }, (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return _objectSpread(_objectSpread({}, dropFileZoneWrapperStyle(theme, isDraggedOver)), dropFileZoneWrapperCSS);
+    },
+    "data-testid": "dropzone",
+    onDragOver: handleDragOver,
+    onDragLeave: resetDraggedOver,
+    onDrop: handleDrop
+  }, (0, _react.jsx)(_Layout.FlexBox, {
+    align: "center",
+    justify: "center",
+    flexWrap: "wrap",
+    css: _ref2
+  }, (0, _react.jsx)(_Icon.UploadIcon, {
+    css: _ref3
+  }), (0, _react.jsx)("div", {
+    css: _ref4
+  }, (0, _react.jsx)("span", {
+    css: dropFileZoneHeadingStyle
+  }, headingText), (0, _react.jsx)("label", {
+    "aria-label": "".concat(headingText, " ").concat(labelText, " (").concat(description, ")"),
+    css: function css(theme) {
+      return dropFileZoneLabelStyle(theme);
+    }
+  }, (0, _react.jsx)("span", null, labelText), (0, _react.jsx)("input", (0, _extends2["default"])({
+    "data-testid": "file-input",
+    ref: ref,
+    accept: accept,
+    multiple: multiple,
+    css: visuallyHiddenStyles,
+    onChange: handleChange,
+    type: "file"
+  }, inputProps)))))), description && (0, _react.jsx)("p", {
+    css: dropFileZonDescriptionStyle
+  }, description));
 });
+exports.DropFileInput = DropFileInput;
 //# sourceMappingURL=DropFileInput.js.map

package/src/Form/DropFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropFileInput.js","sourceRoot":"","sources":["DropFileInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["DropFileInput.tsx"],"names":["visuallyHiddenStyles","clip","clipPath","height","overflow","position","whiteSpace","width","dropFileWrapperStyle","maxWidth","dropFileZoneWrapperStyle","theme","isDraggedOver","padding","border","general","primaryColor","borderBottomWidth","borderRadius","textAlign","backgroundColor","COLOR","WHITE","fontWeight","fontSize","lineHeight","color","GRAY","dropFileZoneLabelStyle","cursor","outline","textDecoration","dropFileZoneHeadingStyle","display","dropFileZonDescriptionStyle","marginTop","DropFileInput","ref","onFilesUploaded","onInvalidFilesDropError","dropFileZoneWrapperCSS","labelText","headingText","description","accept","multiple","inputProps","setIsDraggedOver","resetDraggedOver","handleDragOver","event","preventDefault","stopPropagation","dataTransfer","dropEffect","items","length","handleDrop","files","filesArr","Array","from","areFilesValid","every","file","split","map","v","trim","includes","type","handleChange","target"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {useState, FC, forwardRef, DragEvent} from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {TextProps} from '../Text';\nimport {UploadIcon} from '../Icon';\nimport {FlexBox} from '../Layout';\n\nexport interface DropFileInputProps<T = HTMLInputElement> extends TextProps<T> {\n  onFilesUploaded: (files: File[]) => void;\n  onInvalidFilesDropError: () => void;\n  labelText: string;\n  headingText: string;\n  description?: string;\n  dropFileZoneWrapperCSS?: CSSObject;\n}\n\nconst visuallyHiddenStyles: CSSObject = {\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: '1px',\n  overflow: 'hidden',\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: '1px',\n};\n\nexport const dropFileWrapperStyle: CSSObject = {\n  maxWidth: '330px',\n};\n\nexport const dropFileZoneWrapperStyle: <T>(theme: Theme, isDraggedOver: boolean) => CSSObject = (\n  theme,\n  isDraggedOver,\n) => ({\n  width: '100%',\n  padding: '28px 12px',\n  border: `1px dashed ${theme.general.primaryColor}`,\n  borderBottomWidth: '2px',\n  borderRadius: '6px',\n  textAlign: 'center',\n  backgroundColor: isDraggedOver ? theme.general.backgroundColor : COLOR.WHITE,\n  fontWeight: 400,\n  fontSize: '12px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n});\n\nexport const dropFileZoneLabelStyle: <T>(theme: Theme) => CSSObject = theme => ({\n  color: theme.general.primaryColor,\n  cursor: 'pointer',\n  ':focus-within': {\n    outline: `1px solid ${theme.general.primaryColor}`,\n  },\n  ':hover': {\n    textDecoration: 'underline',\n  },\n});\n\nexport const dropFileZoneHeadingStyle: CSSObject = {\n  display: 'block',\n  whiteSpace: 'pre-line',\n};\n\nexport const dropFileZonDescriptionStyle: CSSObject = {\n  marginTop: '12px',\n  fontWeight: 400,\n  fontSize: '10px',\n  lineHeight: '13px',\n  color: COLOR.GRAY,\n  whiteSpace: 'pre-line',\n};\n\nexport const DropFileInput: FC<DropFileInputProps<HTMLInputElement>> = forwardRef<\n  HTMLInputElement,\n  DropFileInputProps<HTMLInputElement>\n>(\n  (\n    {\n      onFilesUploaded,\n      onInvalidFilesDropError,\n      dropFileZoneWrapperCSS,\n      labelText,\n      headingText,\n      description,\n      accept,\n      multiple,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const [isDraggedOver, setIsDraggedOver] = useState(false);\n\n    const resetDraggedOver = () => setIsDraggedOver(false);\n\n    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.dropEffect = 'copy';\n\n      if (event.dataTransfer.items.length > 0) {\n        setIsDraggedOver(true);\n      }\n    };\n\n    const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      resetDraggedOver();\n\n      const {files} = event.dataTransfer;\n      if (files.length < 1) {\n        return;\n      }\n\n      const filesArr = multiple ? Array.from(files) : [files[0]];\n\n      const areFilesValid = !!accept\n        ? filesArr.every(file =>\n            accept\n              .split(',')\n              .map(v => v.trim())\n              .includes(file.type),\n          )\n        : true;\n\n      if (!areFilesValid) {\n        onInvalidFilesDropError();\n        return;\n      }\n\n      onFilesUploaded(filesArr);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const {files} = event.target;\n\n      if (files.length < 1) {\n        return;\n      }\n\n      onFilesUploaded(Array.from(files));\n    };\n\n    return (\n      <div css={dropFileWrapperStyle}>\n        <div\n          css={(theme: Theme) => ({\n            ...dropFileZoneWrapperStyle(theme, isDraggedOver),\n            ...dropFileZoneWrapperCSS,\n          })}\n          data-testid=\"dropzone\"\n          onDragOver={handleDragOver}\n          onDragLeave={resetDraggedOver}\n          onDrop={handleDrop}\n        >\n          <FlexBox align=\"center\" justify=\"center\" flexWrap=\"wrap\" css={{maxWidth: '280px', margin: '0 auto'}}>\n            <UploadIcon css={{margin: '12px 0'}} />\n            <div css={{maxWidth: '160px', margin: '0 25px'}}>\n              <span css={dropFileZoneHeadingStyle}>{headingText}</span>\n              <label\n                aria-label={`${headingText} ${labelText} (${description})`}\n                css={(theme: Theme) => dropFileZoneLabelStyle(theme)}\n              >\n                <span>{labelText}</span>\n                <input\n                  data-testid=\"file-input\"\n                  ref={ref}\n                  accept={accept}\n                  multiple={multiple}\n                  css={visuallyHiddenStyles}\n                  onChange={handleChange}\n                  type=\"file\"\n                  {...inputProps}\n                />\n              </label>\n            </div>\n          </FlexBox>\n        </div>\n        {description && <p css={dropFileZonDescriptionStyle}>{description}</p>}\n      </div>\n    );\n  },\n);\n"],"file":"DropFileInput.js"}

package/src/Form/ErrorMessage.js

@@ -1,54 +1,87 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ErrorMessage = exports.filterErrorMessageProps = exports.errorMessageStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Identity_1 = require("../Identity");
-const Layout_1 = require("../Layout");
-const Text_1 = require("../Text");
-const util_1 = require("../util");
-const errorMessageStyle = (theme, _a) => {
-    var { justify = 'flex-start', align = 'center' } = _a, props = __rest(_a, ["justify", "align"]);
-    return (Object.assign(Object.assign({}, (0, Layout_1.flexBoxStyle)(Object.assign({ align, justify }, props))), { a: Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold: false, fontSize: '12px', textTransform: 'none' }, props))), marginBottom: '12px' }));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _Identity = require("../Identity");
+
+var _Layout = require("../Layout");
+
+var _Text = require("../Text");
+
+var _util = require("../util");
+
+var _excluded = ["justify", "align"],
+    _excluded2 = ["children"];
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var errorMessageStyle = function errorMessageStyle(theme, _ref) {
+  var _ref$justify = _ref.justify,
+      justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return _objectSpread(_objectSpread({}, (0, _Layout.flexBoxStyle)(_objectSpread({
+    align: align,
+    justify: justify
+  }, props))), {}, {
+    a: _objectSpread({}, (0, _Text.linkStyle)(theme, _objectSpread({
+      bold: false,
+      fontSize: '12px',
+      textTransform: 'none'
+    }, props))),
+    marginBottom: '12px'
+  });
 };
+
 exports.errorMessageStyle = errorMessageStyle;
-const filterErrorMessageProps = (props) => {
-    return (0, util_1.filterProps)((0, Layout_1.filterFlexBoxProps)(props), []);
+
+var filterErrorMessageProps = function filterErrorMessageProps(props) {
+  return (0, _util.filterProps)((0, _Layout.filterFlexBoxProps)(props), []);
 };
+
 exports.filterErrorMessageProps = filterErrorMessageProps;
-const ErrorMessage = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, react_1.jsx)(Layout_1.FlexBox, Object.assign({ css: (theme) => (0, exports.errorMessageStyle)(theme, props) }, props),
-        (0, react_1.jsx)(Text_1.Text, { color: Identity_1.COLOR_V2.RED_LIGHT_500, fontSize: '12px', css: { fontWeight: 400 } }, children)));
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "mmvz9h",
+  styles: "font-weight:400"
+} : {
+  name: "z4bxhs-ErrorMessage",
+  styles: "font-weight:400;label:ErrorMessage;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVycm9yTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEMyRCIsImZpbGUiOiJFcnJvck1lc3NhZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQge0NPTE9SX1YyfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge0ZsZXhCb3gsIEZsZXhCb3hQcm9wcywgZmxleEJveFN0eWxlLCBmaWx0ZXJGbGV4Qm94UHJvcHMsIFRoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0LCBsaW5rU3R5bGV9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5cbnR5cGUgRXJyb3JNZXNzYWdlUHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiA9IEZsZXhCb3hQcm9wczxUPjtcblxuZXhwb3J0IGNvbnN0IGVycm9yTWVzc2FnZVN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wczogRXJyb3JNZXNzYWdlUHJvcHM8VD4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHtqdXN0aWZ5ID0gJ2ZsZXgtc3RhcnQnLCBhbGlnbiA9ICdjZW50ZXInLCAuLi5wcm9wc30sXG4pID0+ICh7XG4gIC4uLmZsZXhCb3hTdHlsZSh7YWxpZ24sIGp1c3RpZnksIC4uLnByb3BzfSksXG4gIGE6IHtcbiAgICAuLi5saW5rU3R5bGUodGhlbWUsIHtib2xkOiBmYWxzZSwgZm9udFNpemU6ICcxMnB4JywgdGV4dFRyYW5zZm9ybTogJ25vbmUnLCAuLi5wcm9wc30pLFxuICB9LFxuICBtYXJnaW5Cb3R0b206ICcxMnB4Jyxcbn0pO1xuXG5leHBvcnQgY29uc3QgZmlsdGVyRXJyb3JNZXNzYWdlUHJvcHMgPSAocHJvcHM6IEVycm9yTWVzc2FnZVByb3BzKSA9PiB7XG4gIHJldHVybiBmaWx0ZXJQcm9wcyhmaWx0ZXJGbGV4Qm94UHJvcHMocHJvcHMpIGFzIEVycm9yTWVzc2FnZVByb3BzLCBbXSk7XG59O1xuXG5leHBvcnQgY29uc3QgRXJyb3JNZXNzYWdlID0gKHtjaGlsZHJlbiwgLi4ucHJvcHN9OiBFcnJvck1lc3NhZ2VQcm9wcykgPT4gKFxuICA8RmxleEJveCBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGVycm9yTWVzc2FnZVN0eWxlKHRoZW1lLCBwcm9wcyl9IHsuLi5wcm9wc30+XG4gICAgPFRleHQgY29sb3I9e0NPTE9SX1YyLlJFRF9MSUdIVF81MDB9IGZvbnRTaXplPXsnMTJweCd9IGNzcz17e2ZvbnRXZWlnaHQ6IDQwMH19PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGV4dD5cbiAgPC9GbGV4Qm94PlxuKTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var ErrorMessage = function ErrorMessage(_ref2) {
+  var children = _ref2.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return (0, _react.jsx)(_Layout.FlexBox, (0, _extends2["default"])({
+    css: function css(theme) {
+      return errorMessageStyle(theme, props);
+    }
+  }, props), (0, _react.jsx)(_Text.Text, {
+    color: _Identity.COLOR_V2.RED_LIGHT_500,
+    fontSize: '12px',
+    css: _ref3
+  }, children));
 };
+
 exports.ErrorMessage = ErrorMessage;
 //# sourceMappingURL=ErrorMessage.js.map