\n {(refundAvailable || refundPending) &&\n !refundFailed &&\n type !== REFUND_TYPE &&\n (refundDisabled ||\n transactionPending ||\n differentPreviousConnection ? (\n // show tooltip when refund is disabled or payment is pending or if this is a new connection\n \n {getRefundButton()}\n \n ) : (\n
\n )}\n \n );\n};\n\nRenderOptions.propTypes = {\n listOptions: PropTypes.object.isRequired,\n labelOne: PropTypes.string.isRequired,\n labelTwo: PropTypes.string,\n formatSecondaryOptionLabel: PropTypes.func\n};\n\nRenderOptions.defaultProps = {\n labelTwo: '',\n formatSecondaryOptionLabel: null\n};\n\n/**\n * Renders a Material-UI TextField with the Autocomplete dropdown when the user types.\n *\n * @param {object} options An object of the suggested results for the dropdown.\n * @param {func} onSelect A function that gets triggered only when the user\n * selects an option from the suggested results.\n * @param {func} onUniqueValueEntered A function that gets triggered only when the user\n * submits a value that is not listed in the suggested results.\n * @param {func} onClear A function that will be called when the user clears the\n * textfield by pressing the 'X' icon in the textfield.\n * @param {func} onTextFieldChange Function called on text change.\n * @param {func} onBlur Function called when the text field is blurred\n * @param {string} inputValue The value held in state outside of this component.\n * @param {bool} error Is there an error.\n * @param {string} helperText String of text for the error.\n * @param {string} label The label to be used for the textfield. Also used in the\n * textfield's id.\n * @param {array} optionLabels An array of up to two strings. Must match the name of a key\n * from the 'options' object. Used to determine what to render as suggested items.\n * @param {func} formatSecondaryOptionLabel If two values are passed in the optionLabels prop; a function to add custom\n * formatting to optionLabels[1]. Should return a String or Number value.\n * @param {num} resultsLimit A number to specify the number of results to display as suggested results.\n * @param {func} onInputChange A callback fired when any value changes based on typing into the input field. Use in combination with inputValue for a controlled inputfield.\n * @param {string/object} defaultValue The default value for the initial render of the text field. This will reset to null after any action is taken.\n * @param {bool} allowSearchableSecondaryLabel Option to include the secondary option label to be searchable. If true, optionLabels must have two strings in the array.\n */\n\nconst AutocompleteTextField = ({\n defaultValue,\n error,\n formatSecondaryOptionLabel,\n helperText,\n id,\n inputValue,\n label,\n onBlur,\n onClear,\n onInputChange,\n onSelect,\n onTextFieldChange,\n onUniqueValueEntered,\n options,\n optionLabels,\n resultsLimit,\n allowSearchableSecondaryLabel\n}) => {\n const [initialValue, setInitialValue] = useState(null);\n const [open, setOpen] = useState(false);\n\n // We only want to set an initial value on the first mount\n // If a user has interacted with the component, we leave the value to be handled internally\n const hasInteracted = useRef();\n useEffect(() => {\n if (!hasInteracted.current) {\n hasInteracted.current = true;\n setInitialValue(defaultValue);\n }\n }, [defaultValue]);\n\n const filterOptions = createFilterOptions({\n limit: resultsLimit\n });\n\n const onValueChange = (value, reason) => {\n if (initialValue) {\n setInitialValue(null);\n }\n setOpen(true);\n switch (reason) {\n case 'selectOption':\n onSelect(value);\n setOpen(false);\n break;\n case 'blur':\n setOpen(false);\n break;\n case 'createOption':\n onUniqueValueEntered(value);\n break;\n case 'clear':\n onClear();\n setOpen(false);\n break;\n default:\n break;\n }\n };\n\n const onTextFieldClick = (value) => {\n if (!value) {\n setOpen(true);\n }\n };\n\n const buildOptionLabel = (option) => {\n if (typeof option === 'string') return option;\n return allowSearchableSecondaryLabel\n ? `${option[optionLabels[0]]} ${option[optionLabels[1]]}`\n : option[optionLabels[0]];\n };\n\n return (\n (\n
\n \n
\n )}\n onClose={(e, reason) =>\n reason === 'blur' && onValueChange(e.target.value, reason)\n }\n onChange={(_, value, reason) => onValueChange(value, reason)}\n onInputChange={(_, value, reason) => {\n if (reason === 'input') onInputChange(value);\n else if (reason === 'clear') onValueChange(value, reason);\n }}\n renderInput={(params) => (\n {\n setOpen(true);\n onTextFieldChange(e);\n }}\n label={label}\n variant=\"filled\"\n inputProps={{\n ...params.inputProps,\n maxLength: 256\n }}\n onBlur={onBlur}\n onClick={(e) => onTextFieldClick(e.target.value)}\n />\n )}\n />\n );\n};\n\nAutocompleteTextField.propTypes = {\n defaultValue: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n PropTypes.number\n ]),\n error: PropTypes.bool,\n formatSecondaryOptionLabel: PropTypes.func,\n helperText: PropTypes.string,\n id: PropTypes.string,\n inputValue: PropTypes.string,\n label: PropTypes.string.isRequired,\n onBlur: PropTypes.func,\n onClear: PropTypes.func.isRequired,\n onInputChange: PropTypes.func,\n onSelect: PropTypes.func.isRequired,\n onTextFieldChange: PropTypes.func,\n onUniqueValueEntered: PropTypes.func.isRequired,\n options: PropTypes.arrayOf(PropTypes.object).isRequired,\n optionLabels: PropTypes.arrayOf(PropTypes.string).isRequired,\n resultsLimit: PropTypes.number,\n allowSearchableSecondaryLabel: PropTypes.bool\n};\n\nAutocompleteTextField.defaultProps = {\n defaultValue: null,\n error: false,\n formatSecondaryOptionLabel: undefined,\n helperText: '',\n id: undefined,\n inputValue: undefined,\n onBlur: () => {},\n onInputChange: () => {},\n onTextFieldChange: () => {},\n resultsLimit: 10,\n allowSearchableSecondaryLabel: false\n};\n\nexport default AutocompleteTextField;\n","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getCircularProgressUtilityClass(slot) {\n return generateUtilityClass('MuiCircularProgress', slot);\n}\nconst circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);\nexport default circularProgressClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"disableShrink\", \"size\", \"style\", \"thickness\", \"value\", \"variant\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport chainPropTypes from '@mui/utils/chainPropTypes';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { keyframes, css } from '@mui/system';\nimport capitalize from '../utils/capitalize';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport styled from '../styles/styled';\nimport { getCircularProgressUtilityClass } from './circularProgressClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst SIZE = 44;\nconst circularRotateKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`));\nconst circularDashKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n`));\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n variant,\n color,\n disableShrink\n } = ownerState;\n const slots = {\n root: ['root', variant, `color${capitalize(color)}`],\n svg: ['svg'],\n circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']\n };\n return composeClasses(slots, getCircularProgressUtilityClass, classes);\n};\nconst CircularProgressRoot = styled('span', {\n name: 'MuiCircularProgress',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];\n }\n})(({\n ownerState,\n theme\n}) => _extends({\n display: 'inline-block'\n}, ownerState.variant === 'determinate' && {\n transition: theme.transitions.create('transform')\n}, ownerState.color !== 'inherit' && {\n color: (theme.vars || theme).palette[ownerState.color].main\n}), ({\n ownerState\n}) => ownerState.variant === 'indeterminate' && css(_t3 || (_t3 = _`\n animation: ${0} 1.4s linear infinite;\n `), circularRotateKeyframe));\nconst CircularProgressSVG = styled('svg', {\n name: 'MuiCircularProgress',\n slot: 'Svg',\n overridesResolver: (props, styles) => styles.svg\n})({\n display: 'block' // Keeps the progress centered\n});\nconst CircularProgressCircle = styled('circle', {\n name: 'MuiCircularProgress',\n slot: 'Circle',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];\n }\n})(({\n ownerState,\n theme\n}) => _extends({\n stroke: 'currentColor'\n}, ownerState.variant === 'determinate' && {\n transition: theme.transitions.create('stroke-dashoffset')\n}, ownerState.variant === 'indeterminate' && {\n // Some default value that looks fine waiting for the animation to kicks in.\n strokeDasharray: '80px, 200px',\n strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.\n}), ({\n ownerState\n}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css(_t4 || (_t4 = _`\n animation: ${0} 1.4s ease-in-out infinite;\n `), circularDashKeyframe));\n\n/**\n * ## ARIA\n *\n * If the progress bar is describing the loading progress of a particular region of a page,\n * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\n * attribute to `true` on that region until it has finished loading.\n */\nconst CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiCircularProgress'\n });\n const {\n className,\n color = 'primary',\n disableShrink = false,\n size = 40,\n style,\n thickness = 3.6,\n value = 0,\n variant = 'indeterminate'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n disableShrink,\n size,\n thickness,\n value,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n const circleStyle = {};\n const rootStyle = {};\n const rootProps = {};\n if (variant === 'determinate') {\n const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);\n circleStyle.strokeDasharray = circumference.toFixed(3);\n rootProps['aria-valuenow'] = Math.round(value);\n circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;\n rootStyle.transform = 'rotate(-90deg)';\n }\n return /*#__PURE__*/_jsx(CircularProgressRoot, _extends({\n className: clsx(classes.root, className),\n style: _extends({\n width: size,\n height: size\n }, rootStyle, style),\n ownerState: ownerState,\n ref: ref,\n role: \"progressbar\"\n }, rootProps, other, {\n children: /*#__PURE__*/_jsx(CircularProgressSVG, {\n className: classes.svg,\n ownerState: ownerState,\n viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,\n children: /*#__PURE__*/_jsx(CircularProgressCircle, {\n className: classes.circle,\n style: circleStyle,\n ownerState: ownerState,\n cx: SIZE,\n cy: SIZE,\n r: (SIZE - thickness) / 2,\n fill: \"none\",\n strokeWidth: thickness\n })\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? CircularProgress.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The color of the component.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).\n * @default 'primary'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),\n /**\n * If `true`, the shrink animation is disabled.\n * This only works if variant is `indeterminate`.\n * @default false\n */\n disableShrink: chainPropTypes(PropTypes.bool, props => {\n if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {\n return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');\n }\n return null;\n }),\n /**\n * The size of the component.\n * If using a number, the pixel unit is assumed.\n * If using a string, you need to provide the CSS unit, for example '3rem'.\n * @default 40\n */\n size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * @ignore\n */\n style: PropTypes.object,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The thickness of the circle.\n * @default 3.6\n */\n thickness: PropTypes.number,\n /**\n * The value of the progress indicator for the determinate variant.\n * Value between 0 and 100.\n * @default 0\n */\n value: PropTypes.number,\n /**\n * The variant to use.\n * Use indeterminate when there is no progress value.\n * @default 'indeterminate'\n */\n variant: PropTypes.oneOf(['determinate', 'indeterminate'])\n} : void 0;\nexport default CircularProgress;","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n spinner: {\n position: 'absolute',\n right: ({ centerSpinner }) =>\n !centerSpinner && theme.typography.pxToRem(15)\n },\n accessibleLoader: theme.visuallyHidden\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CircularProgress, Button } from '@mui/material';\n\nimport useStyles from './styles';\n\n/**\n * Builds on top of the standard Button component provided\n * by Material UI.\n *\n * Shows a loading icon on the right of the button when the\n * loading prop is set to true. Also adds accessible loading\n * text and aria roles for screen reading technology.\n *\n * It takes all standard props that the Button\n * would usually take, plus the below.\n * @param {mixed} children String or elements to be passed inside the Button.\n * @param {bool} disabled Is the Button disabled.\n * @param {bool} disableOnLoading Should Button be disabled when loading.\n * @param {bool} loading Should the button show loading animation.\n * @param {string} spinnerColor What is the spinner colour: primary/secondary\n */\nconst ButtonLoading = ({\n children,\n disabled,\n disableOnLoading,\n loading,\n spinnerColor,\n centerSpinner,\n ...rest\n}) => {\n const classes = useStyles({ centerSpinner });\n return (\n \n );\n};\n\nButtonLoading.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.node\n ]),\n disabled: PropTypes.bool,\n disableOnLoading: PropTypes.bool,\n loading: PropTypes.bool,\n spinnerColor: PropTypes.string,\n centerSpinner: PropTypes.bool\n};\n\nButtonLoading.defaultProps = {\n children: '',\n disabled: false,\n disableOnLoading: false,\n loading: false,\n spinnerColor: 'secondary',\n centerSpinner: false\n};\n\nexport default ButtonLoading;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n imageShadow: {\n width: '100%',\n maxWidth: theme.typography.pxToRem(200),\n boxShadow: '0px 5px 10px 3px #DEDEE7'\n },\n imageCaption: {\n fontStyle: 'italic',\n textAlign: 'center'\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid, Typography } from '@mui/material';\nimport useStyles from './styles';\n\nconst CaptionedImage = ({ caption, imageSrc }) => {\n const classes = useStyles();\n\n return (\n <>\n \n \n \n \n {caption && (\n \n {caption}\n \n )}\n \n >\n );\n};\n\nCaptionedImage.propTypes = {\n caption: PropTypes.string,\n imageSrc: PropTypes.string.isRequired\n};\n\nCaptionedImage.defaultProps = {\n caption: ''\n};\n\nexport default CaptionedImage;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n close: {\n position: 'absolute',\n top: theme.typography.pxToRem(10),\n right: theme.typography.pxToRem(10),\n color: '#35373D',\n height: theme.typography.pxToRem(36),\n width: theme.typography.pxToRem(36),\n backgroundColor: 'transparent',\n padding: `${theme.typography.pxToRem(8)} ${theme.typography.pxToRem(\n 18\n )}`,\n lineHeight: '1em',\n transition: 'all 250ms',\n '&:hover': {\n backgroundColor: '#D2E6FF',\n opacity: '0.8'\n },\n [theme.breakpoints.up('sm')]: {\n top: `calc(env(safe-area-inset-top) + ${theme.typography.pxToRem(\n 21\n )})`,\n right: `calc(env(safe-area-inset-right) + ${theme.typography.pxToRem(\n 21\n )})`\n }\n },\n closeSpan: theme.visuallyHidden\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { IconButton } from '@mui/material';\nimport Close from '@mui/icons-material/Close';\nimport useStyles from './styles';\n\n/**\n * Pure component for atomic close button. CSS styling places it absolute within\n * its wrapper. So make sure its parent has position: 'relative' set.\n * @param {func} handleClose Function to trigger close.\n */\nconst CloseButton = ({ handleClose }) => {\n const classes = useStyles();\n\n return (\n \n \n Close\n \n );\n};\n\nCloseButton.propTypes = {\n handleClose: PropTypes.func.isRequired\n};\n\nexport default CloseButton;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n colorSwatchItem: {\n display: 'inline-block'\n },\n button: {\n padding: 0\n },\n buttonEdge: {\n margin: 0\n },\n colorSwatch: {\n width: theme.typography.pxToRem(46),\n height: theme.typography.pxToRem(46)\n }\n}));\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { IconButton, SvgIcon } from '@mui/material';\nimport { documentColors, tagColors } from '@/config';\nimport useStyles from './styles';\n\nexport const PureColorSwatch = ({ backgroundColor, color }) => (\n \n);\n\nPureColorSwatch.propTypes = {\n backgroundColor: PropTypes.string.isRequired,\n color: PropTypes.string.isRequired\n};\n\nexport const ColorSwatch = ({ currentColor, selectionCallback, type }) => {\n const classes = useStyles();\n const isTags = type === 'tags';\n\n const [selectedColor, setSelectedColor] = useState(currentColor);\n\n const handleColorSelect = (selected) => {\n setSelectedColor(selected.backgroundColor);\n selectionCallback(selected);\n };\n\n return (\n
\n );\n});\n\nDrawerHeading.propTypes = {\n startAdornment: PropTypes.element,\n title: PropTypes.string.isRequired\n};\n\nDrawerHeading.defaultProps = {\n startAdornment: null\n};\n\nexport default DrawerHeading;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n filterButton: {\n backgroundColor: '#fff',\n border: '1px solid #EDEEF0',\n color: theme.palette.common.black,\n '&:hover': {\n backgroundColor: 'rgba(0,0,0, .08)',\n color: theme.palette.common.black,\n border: '1px solid #EDEEF0'\n },\n [theme.breakpoints.up('md')]: {\n maxWidth: theme.typography.pxToRem(131)\n }\n },\n filterIcon: {\n width: 24,\n height: 24\n },\n paramCount: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginLeft: 8,\n fontSize: 12,\n height: 23,\n width: 23,\n minWidth: 23,\n borderRadius: 12,\n color: theme.palette.secondary.main,\n backgroundColor: theme.palette.primary.main\n }\n}));\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { Button } from '@mui/material';\nimport { useDispatch } from 'react-redux';\nimport { FilterIcon } from '@/resources/icons';\nimport { openDrawer } from '@/state/actions';\nimport { useUrlParams } from '@/hooks';\nimport useStyles from './styles';\n\nconst CountCircle = ({ paramCount }) => {\n const classes = useStyles();\n\n if (paramCount === 0) {\n return null;\n }\n return {paramCount};\n};\n\nCountCircle.propTypes = {\n paramCount: PropTypes.number.isRequired\n};\n\nconst FilterButton = ({ base, type, watch }) => {\n const classes = useStyles();\n const dispatch = useDispatch();\n const { getUrlParams } = useUrlParams();\n\n const currentParams = getUrlParams({ base, watch });\n\n const paramCount = currentParams ? Object.keys(currentParams).length : 0;\n\n return (\n }\n onClick={() => {\n dispatch(openDrawer(`${type}Filter`));\n }}\n >\n Filter\n \n \n );\n};\n\nFilterButton.propTypes = {\n base: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n watch: PropTypes.arrayOf(PropTypes.string).isRequired\n};\n\nexport default FilterButton;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n switchLabel: {\n ...theme.typography.body2,\n color: ({ color }) => theme.palette.text[color]\n },\n switchLabelPlacement: {\n marginLeft: 2,\n width: '100%',\n justifyContent: 'space-between'\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n Switch\n} from '@mui/material';\nimport useStyles from './styles';\n\n/**\n * Common FormSwitch component to be used within forms.\n * @param {string/node} label The label for the switch. Can be a string or can be a node to allow for more customization.\n * @param {string} labelPlacement The placement of the label (i.e. \"start\" or \"end\"). Defaults to \"start\".\n * @param {string} name RHF name for the component to be passed.\n * @param {func} onChange Function to be fired on click of the switch.\n * @param {bool} checked Is the switch checked or not.\n * @param {bool} disabled Option to disable the switch.\n * @param {string} color Text color for the label. References the \"theme.typography.text\" options.\n */\nconst FormSwitch = ({\n label,\n labelPlacement,\n name,\n onChange,\n checked,\n disabled,\n color,\n helperText,\n labelWidth\n}) => {\n const classes = useStyles({ color });\n\n return (\n \n \n {label}\n \n }\n labelPlacement={labelPlacement}\n classes={{\n label: classes.switchLabel,\n labelPlacementStart: classes.switchLabelPlacement\n }}\n disabled={disabled}\n control={\n \n }\n />\n\n {helperText}\n \n );\n};\n\nFormSwitch.propTypes = {\n helperText: PropTypes.string,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n labelPlacement: PropTypes.string,\n name: PropTypes.string,\n onChange: PropTypes.func,\n checked: PropTypes.bool,\n disabled: PropTypes.bool,\n color: PropTypes.oneOf([\n 'primary',\n 'secondary',\n 'disabled',\n 'red',\n 'orange'\n ]),\n labelWidth: PropTypes.string\n};\n\nFormSwitch.defaultProps = {\n helperText: '',\n label: undefined,\n labelPlacement: 'start',\n name: '',\n onChange: () => {},\n checked: false,\n disabled: false,\n color: 'primary',\n labelWidth: null\n};\n\nexport default FormSwitch;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n filledInputDisabledRoot: {\n opacity: 0.38\n },\n filledInputDisabled: {\n color: theme.palette.text.primary,\n fontSize: theme.typography.h4.fontSize\n },\n filledInputDisabledLabel: {\n color: theme.palette.text.disabled,\n fontSize: theme.typography.h4.fontSize\n }\n}));\n","import { parseISO } from 'date-fns';\nimport React, { useState, useEffect, useRef } from 'react';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';\nimport TextField from '@mui/material/TextField';\nimport defaultUSLocale from 'date-fns/locale/en-US';\nimport isValid from 'date-fns/isValid';\nimport PropTypes from 'prop-types';\nimport { useLocale, useTimezone } from '@/hooks';\nimport { formatDate, getLocaleFile } from '@/util';\nimport useStyles from './styles';\n\nconst GenericDatePicker = ({\n error,\n helperText,\n disabled,\n disablePast,\n id,\n label,\n margin,\n required,\n selectionReturn,\n setDateError,\n startDate,\n minDate,\n value,\n className\n}) => {\n const classes = useStyles();\n const locale = useLocale();\n const timezone = useTimezone();\n\n // Preset with en-US to speed up initial page load.\n const [pickedLocale, setPickedLocale] = useState(defaultUSLocale);\n const localeRef = useRef('en-US');\n\n // As we don't want to load every single locale under the sun\n // on the initial render of the app set locale to en-US.\n // Then when redux kicks in, load their specific locale.\n // If that loader fails - we can keep en-US.\n useEffect(() => {\n const importLocale = async () => {\n try {\n // This handles setting the locale.\n await getLocaleFile({\n locale,\n setPickedLocale,\n localeRef\n });\n } catch {\n // Nothing\n // No state overwrite happens.\n }\n };\n // If the locale has not yet been loaded.\n if (localeRef.current !== locale) {\n importLocale();\n }\n }, [locale, pickedLocale]);\n\n // Display the date correctly. take format from locale and timezone\n const formatSelectLabel = (date, invalidLabel) =>\n date && isValid(date)\n ? formatDate({\n isoDate: date,\n locale,\n timezone\n })\n : invalidLabel;\n\n return (\n \n selectionReturn(data)}\n onError={(errorValue) => setDateError(Boolean(errorValue))}\n renderInput={(params) => {\n let inputError = params.error;\n if (params.error && value === '') {\n inputError = false;\n }\n return (\n \n );\n }}\n />\n \n );\n};\n\nGenericDatePicker.propTypes = {\n error: PropTypes.bool,\n helperText: PropTypes.string,\n disabled: PropTypes.bool,\n disablePast: PropTypes.bool,\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n margin: PropTypes.string,\n required: PropTypes.bool,\n selectionReturn: PropTypes.func,\n setDateError: PropTypes.func,\n startDate: PropTypes.string,\n minDate: PropTypes.string,\n value: PropTypes.string,\n className: PropTypes.string\n};\n\nGenericDatePicker.defaultProps = {\n error: false,\n helperText: '',\n disabled: false,\n disablePast: true,\n margin: 'normal',\n required: false,\n startDate: '',\n selectionReturn: () => {},\n setDateError: () => {},\n minDate: '01/01/1700',\n value: '',\n className: ''\n};\n\nexport default GenericDatePicker;\n","var _path, _path2, _mask, _g, _ellipse, _ellipse2, _g2, _ellipse3, _ellipse4, _ellipse5, _path3, _ellipse6, _mask2, _g3, _path4, _path5, _path6, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgSpilledCoffee(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 298,\n height: 127,\n viewBox: \"0 0 298 127\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M86 104.713L136.826 96L191.739 107.686L91.9183 119.372L86 104.713Z\",\n fill: \"#8692AC\",\n fillOpacity: 0.37,\n style: {\n mixBlendMode: \"multiply\"\n }\n }), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M0 97.2521L58.3437 95L111.344 95.556L27.8269 105.832L0 97.2521Z\",\n fill: \"#8692AC\",\n fillOpacity: 0.37,\n style: {\n mixBlendMode: \"multiply\"\n }\n }), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M3 88.8552C3 88.8552 10.337 100.584 19.0061 103.384C39.0975 109.872 55.7902 114.686 69.0843 117.823C97.6297 124.561 116.429 107.73 116.429 107.73C116.429 107.73 165.117 112.295 189.947 107.73C197.537 106.335 221.721 99.7413 221.721 99.7413L108.226 71C108.226 71 94.0707 83.3906 78.2332 86.5072C71.5206 87.8281 50.5505 91.9613 25.5229 91.9613C14.1425 91.9613 3 88.8552 3 88.8552Z\",\n fill: \"#F7F7F7\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M246.972 56.152C247.801 40.7293 237.183 29.2363 228.252 27.4989L133.727 5.5L126.26 90.8484L226.528 85.3622C237.371 85.3622 246.143 71.5748 246.972 56.152Z\",\n fill: \"url(#coffee6)\"\n })), _mask || (_mask = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"coffee1\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 126,\n y: 5,\n width: 125,\n height: 97\n }, /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M246.972 56.152C247.801 40.7293 237.183 29.2363 228.252 27.4989L133.727 5.5L126.26 90.8484L226.528 85.3622C237.371 85.3622 246.143 71.5748 246.972 56.152Z\",\n fill: \"white\"\n }))), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#coffee1)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M171.319 13.1758L204.744 21.0608C204.744 21.0608 214.941 34.1493 215.451 53.8032C215.96 73.4571 201.228 90.8239 201.228 90.8239L166.013 93.3386C166.013 93.3386 183.023 74.8274 182.818 52.1359C182.613 29.4444 171.319 13.1758 171.319 13.1758Z\",\n fill: \"url(#coffee11)\"\n }))), _ellipse || (_ellipse = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 130.491,\n cy: 49.2179,\n rx: 27.5,\n ry: 47,\n transform: \"rotate(5 130.491 49.2179)\",\n fill: \"url(#coffee7)\"\n })), _ellipse2 || (_ellipse2 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 130.037,\n cy: 48.6761,\n rx: 21,\n ry: 39.5,\n transform: \"rotate(5 130.037 48.6761)\",\n fill: \"url(#coffee10)\"\n })), _g2 || (_g2 = /*#__PURE__*/React.createElement(\"g\", {\n filter: \"url(#coffee2)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M150.775 51.3926C139.548 58.91 126.945 71.8523 121.908 73.3255C116.871 74.7988 107.077 77.2147 106.327 83.3277C105.577 89.4408 96.6471 91.3274 88.7057 92.4006C80.7643 93.4737 64.7173 93.7387 63.3898 97.61C62.0622 101.481 89.2337 101.481 98.8623 101.481C108.491 101.481 131.828 100.795 134.841 99.4609C137.854 98.1273 135.716 90.2661 138.214 83.3277C140.713 80.5133 148.449 73.2165 150.775 51.3926Z\",\n fill: \"url(#coffee8)\"\n }))), _ellipse3 || (_ellipse3 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 103.5,\n cy: 95.1667,\n rx: 3.5,\n ry: 1.16667,\n fill: \"#C39078\"\n })), _ellipse4 || (_ellipse4 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 123.5,\n cy: 96.5,\n rx: 1.5,\n ry: 0.5,\n fill: \"#C39078\"\n })), _ellipse5 || (_ellipse5 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 79.5,\n cy: 97.5,\n rx: 1.5,\n ry: 0.5,\n fill: \"#B38670\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M224 112H298L296 121C296 121 288.684 127 260.644 127C232.603 127 226 121 226 121L224 112Z\",\n fill: \"url(#coffee9)\"\n })), _ellipse6 || (_ellipse6 = /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 261,\n cy: 111.5,\n rx: 37,\n ry: 7.5,\n fill: \"url(#coffee3)\"\n })), _mask2 || (_mask2 = /*#__PURE__*/React.createElement(\"mask\", {\n id: \"coffee5\",\n \"mask-type\": \"alpha\",\n maskUnits: \"userSpaceOnUse\",\n x: 224,\n y: 104,\n width: 74,\n height: 15\n }, /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 261,\n cy: 111.5,\n rx: 37,\n ry: 7.5,\n fill: \"white\"\n }))), _g3 || (_g3 = /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#coffee5)\"\n }, /*#__PURE__*/React.createElement(\"ellipse\", {\n cx: 261,\n cy: 117.5,\n rx: 35,\n ry: 7.5,\n fill: \"url(#coffee4)\"\n }))), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M189.434 49.2894L189.414 54.0801C189.414 54.1453 189.422 54.2101 189.439 54.273C190.116 59.2546 192.871 60.3412 193.759 60.5643C193.846 60.5996 193.939 60.618 194.034 60.6185L203.858 60.6605C205.375 60.6657 206.609 59.4439 206.617 57.9299L206.654 49.3631C206.659 47.849 205.435 46.6168 203.918 46.609L192.193 46.5588C190.677 46.5537 189.442 47.7754 189.434 49.2894Z\",\n fill: \"url(#paint8_linear)\"\n })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.56,\n d: \"M193.303 56.1289C193.306 55.4195 192.732 54.842 192.021 54.8389L190.165 54.831C189.825 54.829 189.529 54.5994 189.443 54.2712C190.117 59.2529 192.872 60.3394 193.76 60.5625C193.47 60.45 193.28 60.1717 193.28 59.8616L193.303 56.1289Z\",\n fill: \"#FBFBFB\"\n })), _path6 || (_path6 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M199.681 53.6164C199.69 51.4115 201.236 49.642 203.148 49.6502C203.47 49.6516 203.729 49.9127 203.728 50.2334C203.726 50.5542 203.465 50.8131 203.143 50.8117C201.883 50.8063 200.851 52.0671 200.845 53.6214C200.838 55.1757 201.859 56.4477 203.119 56.4531C203.336 56.4401 203.541 56.5482 203.653 56.7338C203.765 56.9193 203.764 57.1514 203.65 57.336C203.537 57.5206 203.331 57.627 203.114 57.6122C201.202 57.604 199.672 55.8118 199.681 53.6164Z\",\n fill: \"#5096DA\"\n })), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"filter\", {\n id: \"coffee2\",\n x: 46.3428,\n y: 26.3926,\n width: 117.432,\n height: 80.0888,\n filterUnits: \"userSpaceOnUse\",\n colorInterpolationFilters: \"sRGB\"\n }, /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0,\n result: \"BackgroundImageFix\"\n }), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n in: \"SourceAlpha\",\n type: \"matrix\",\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n }), /*#__PURE__*/React.createElement(\"feOffset\", {\n dx: -2,\n dy: -10\n }), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 7.5\n }), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n type: \"matrix\",\n values: \"0 0 0 0 0.807779 0 0 0 0 0.847247 0 0 0 0 0.86352 0 0 0 0.484771 0\"\n }), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in2: \"BackgroundImageFix\",\n result: \"effect1_dropShadow\"\n }), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in: \"SourceGraphic\",\n in2: \"effect1_dropShadow\",\n result: \"shape\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee6\",\n x1: 163.69,\n y1: 51.1223,\n x2: 159.279,\n y2: 101.545,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FAFAFA\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#D6D6D6\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee11\",\n x1: 163.833,\n y1: 23.4065,\n x2: 202.017,\n y2: 83.698,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#C6E3FF\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#357ABC\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee7\",\n x1: 231.235,\n y1: -16.7153,\n x2: 146.474,\n y2: -36.4291,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#D6D6D6\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee10\",\n x1: 86.4789,\n y1: 70.8914,\n x2: 150.986,\n y2: 87.1035,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"white\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#D0D5D9\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee8\",\n x1: 98.0107,\n y1: 119.751,\n x2: 136.567,\n y2: 73.6224,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#D59582\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#89635A\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee9\",\n x1: 248.356,\n y1: 100.334,\n x2: 244.522,\n y2: 132.335,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#E1E7ED\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee3\",\n x1: 306.612,\n y1: 108.16,\n x2: 297.559,\n y2: 79.9978,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"white\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#D2D8DE\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"coffee4\",\n x1: 234.475,\n y1: 107.599,\n x2: 233.273,\n y2: 120.886,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#F8FAFB\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#EFF3F6\"\n })), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint8_linear\",\n x1: 195.067,\n y1: 60.9191,\n x2: 200.993,\n y2: 51.4506,\n gradientUnits: \"userSpaceOnUse\"\n }, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#B4B8BF\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.24,\n stopColor: \"#CACDD3\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.47,\n stopColor: \"#E3E6EB\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\"\n }), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"white\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgSpilledCoffee);\nexport default __webpack_public_path__ + \"static/media/spilled-coffee.975bfb986aa2c89bde45e6981d8a7822.svg\";\nexport { ForwardRef as ReactComponent };","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n root: {\n 'z-index': `${1301}!important`\n },\n icon: {\n display: 'flex',\n justifyContent: 'center'\n },\n wrap: ({ iconTop }) => ({\n padding: iconTop ? theme.spacing(0, 3, 3, 3) : theme.spacing(3),\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n [theme.breakpoints.up('sm')]: {\n padding: iconTop ? theme.spacing(0, 6, 6, 6) : theme.spacing(6)\n },\n [theme.breakpoints.up('md')]: {\n minWidth: theme.typography.pxToRem(600)\n }\n }),\n buttons: {\n justifyContent: 'center',\n padding: 0\n },\n button: {\n width: theme.typography.pxToRem(320),\n margin: `0 ${theme.spacing(1)}`\n },\n contentWrap: {\n textAlign: 'center',\n padding: `${theme.spacing(3)} 0`,\n maxWidth: theme.typography.pxToRem(365),\n flex: '0 0 auto',\n margin: `${theme.typography.pxToRem(10)} auto 0 auto`\n },\n title: {\n fontSize: theme.typography.pxToRem(26),\n fontWeight: 600,\n color: '#35373D',\n margin: 0\n },\n messageWrap: {\n marginTop: theme.typography.pxToRem(10)\n },\n message: {\n fontSize: theme.typography.pxToRem(17),\n fontWeight: 600,\n color: '#656B7D',\n margin: 0\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport { SpilledCoffee } from '@/resources/images';\nimport useStyles from './styles';\n\n/**\n * Generic dialog component. Handles own state and is purely to inform users\n * of single action errors/successes.\n * @param {string} confirmText Text to show in confirm button.\n * @param {elem} customIcon React component icon to replace default icon.\n * Falls back to error spilled coffee SVG.\n * @param {bool} iconTop If the icon is to be positioned at the very to of\n * the component.\n * @param {string/elem} message Message to show in dialog box. Can also take\n * React components to allow formatting. Custom components must be styled externally.\n * @param {bool} opaqueBackground Set background to solid white colour.\n * @param {bool} open If the dialog is open or closed.\n * @param {bool} onConfirm Function to fire when user presses button.\n * @param {string} title title to show in dialog box.\n */\nconst GenericDialog = ({\n confirmText,\n customIcon,\n iconTop,\n message,\n opaqueBackground,\n open,\n onConfirm,\n title\n}) => {\n const classes = useStyles({ iconTop });\n\n let backgroundProps;\n if (opaqueBackground) {\n backgroundProps = { style: { backgroundColor: '#fff' } };\n }\n\n return (\n \n );\n};\n\nGenericDialog.propTypes = {\n confirmText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n customIcon: PropTypes.node,\n iconTop: PropTypes.bool,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n opaqueBackground: PropTypes.bool,\n open: PropTypes.bool,\n onConfirm: PropTypes.func,\n title: PropTypes.string.isRequired\n};\n\nGenericDialog.defaultProps = {\n confirmText: 'Confirm',\n customIcon: null,\n iconTop: false,\n message: null,\n opaqueBackground: false,\n open: false,\n onConfirm: null\n};\n\nexport default GenericDialog;\n","export const COMMON_MIME_TYPES = new Map([\n // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types\n ['aac', 'audio/aac'],\n ['abw', 'application/x-abiword'],\n ['arc', 'application/x-freearc'],\n ['avif', 'image/avif'],\n ['avi', 'video/x-msvideo'],\n ['azw', 'application/vnd.amazon.ebook'],\n ['bin', 'application/octet-stream'],\n ['bmp', 'image/bmp'],\n ['bz', 'application/x-bzip'],\n ['bz2', 'application/x-bzip2'],\n ['cda', 'application/x-cdf'],\n ['csh', 'application/x-csh'],\n ['css', 'text/css'],\n ['csv', 'text/csv'],\n ['doc', 'application/msword'],\n ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],\n ['eot', 'application/vnd.ms-fontobject'],\n ['epub', 'application/epub+zip'],\n ['gz', 'application/gzip'],\n ['gif', 'image/gif'],\n ['heic', 'image/heic'],\n ['heif', 'image/heif'],\n ['htm', 'text/html'],\n ['html', 'text/html'],\n ['ico', 'image/vnd.microsoft.icon'],\n ['ics', 'text/calendar'],\n ['jar', 'application/java-archive'],\n ['jpeg', 'image/jpeg'],\n ['jpg', 'image/jpeg'],\n ['js', 'text/javascript'],\n ['json', 'application/json'],\n ['jsonld', 'application/ld+json'],\n ['mid', 'audio/midi'],\n ['midi', 'audio/midi'],\n ['mjs', 'text/javascript'],\n ['mp3', 'audio/mpeg'],\n ['mp4', 'video/mp4'],\n ['mpeg', 'video/mpeg'],\n ['mpkg', 'application/vnd.apple.installer+xml'],\n ['odp', 'application/vnd.oasis.opendocument.presentation'],\n ['ods', 'application/vnd.oasis.opendocument.spreadsheet'],\n ['odt', 'application/vnd.oasis.opendocument.text'],\n ['oga', 'audio/ogg'],\n ['ogv', 'video/ogg'],\n ['ogx', 'application/ogg'],\n ['opus', 'audio/opus'],\n ['otf', 'font/otf'],\n ['png', 'image/png'],\n ['pdf', 'application/pdf'],\n ['php', 'application/x-httpd-php'],\n ['ppt', 'application/vnd.ms-powerpoint'],\n ['pptx', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],\n ['rar', 'application/vnd.rar'],\n ['rtf', 'application/rtf'],\n ['sh', 'application/x-sh'],\n ['svg', 'image/svg+xml'],\n ['swf', 'application/x-shockwave-flash'],\n ['tar', 'application/x-tar'],\n ['tif', 'image/tiff'],\n ['tiff', 'image/tiff'],\n ['ts', 'video/mp2t'],\n ['ttf', 'font/ttf'],\n ['txt', 'text/plain'],\n ['vsd', 'application/vnd.visio'],\n ['wav', 'audio/wav'],\n ['weba', 'audio/webm'],\n ['webm', 'video/webm'],\n ['webp', 'image/webp'],\n ['woff', 'font/woff'],\n ['woff2', 'font/woff2'],\n ['xhtml', 'application/xhtml+xml'],\n ['xls', 'application/vnd.ms-excel'],\n ['xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],\n ['xml', 'application/xml'],\n ['xul', 'application/vnd.mozilla.xul+xml'],\n ['zip', 'application/zip'],\n ['7z', 'application/x-7z-compressed'],\n\n // Others\n ['mkv', 'video/x-matroska'],\n ['mov', 'video/quicktime'],\n ['msg', 'application/vnd.ms-outlook']\n]);\n\n\nexport function toFileWithPath(file: FileWithPath, path?: string): FileWithPath {\n const f = withMimeType(file);\n if (typeof f.path !== 'string') { // on electron, path is already set to the absolute path\n const {webkitRelativePath} = file;\n Object.defineProperty(f, 'path', {\n value: typeof path === 'string'\n ? path\n // If is set,\n // the File will have a {webkitRelativePath} property\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory\n : typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0\n ? webkitRelativePath\n : file.name,\n writable: false,\n configurable: false,\n enumerable: true\n });\n }\n\n return f;\n}\n\nexport interface FileWithPath extends File {\n readonly path?: string;\n}\n\nfunction withMimeType(file: FileWithPath) {\n const {name} = file;\n const hasExtension = name && name.lastIndexOf('.') !== -1;\n\n if (hasExtension && !file.type) {\n const ext = name.split('.')\n .pop()!.toLowerCase();\n const type = COMMON_MIME_TYPES.get(ext);\n if (type) {\n Object.defineProperty(file, 'type', {\n value: type,\n writable: false,\n configurable: false,\n enumerable: true\n });\n }\n }\n\n return file;\n}\n","import {FileWithPath, toFileWithPath} from './file';\n\n\nconst FILES_TO_IGNORE = [\n // Thumbnail cache files for macOS and Windows\n '.DS_Store', // macOs\n 'Thumbs.db' // Windows\n];\n\n\n/**\n * Convert a DragEvent's DataTrasfer object to a list of File objects\n * NOTE: If some of the items are folders,\n * everything will be flattened and placed in the same list but the paths will be kept as a {path} property.\n *\n * EXPERIMENTAL: A list of https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle objects can also be passed as an arg\n * and a list of File objects will be returned.\n *\n * @param evt\n */\nexport async function fromEvent(evt: Event | any): Promise<(FileWithPath | DataTransferItem)[]> {\n if (isObject(evt) && isDataTransfer(evt.dataTransfer)) {\n return getDataTransferFiles(evt.dataTransfer, evt.type);\n } else if (isChangeEvt(evt)) {\n return getInputFiles(evt);\n } else if (Array.isArray(evt) && evt.every(item => 'getFile' in item && typeof item.getFile === 'function')) {\n return getFsHandleFiles(evt)\n }\n return [];\n}\n\nfunction isDataTransfer(value: any): value is DataTransfer {\n return isObject(value);\n}\n\nfunction isChangeEvt(value: any): value is Event {\n return isObject(value) && isObject(value.target);\n}\n\nfunction isObject(v: any): v is T {\n return typeof v === 'object' && v !== null\n}\n\nfunction getInputFiles(evt: Event) {\n return fromList((evt.target as HTMLInputElement).files).map(file => toFileWithPath(file));\n}\n\n// Ee expect each handle to be https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle\nasync function getFsHandleFiles(handles: any[]) {\n const files = await Promise.all(handles.map(h => h.getFile()));\n return files.map(file => toFileWithPath(file));\n}\n\n\nasync function getDataTransferFiles(dt: DataTransfer, type: string) {\n // IE11 does not support dataTransfer.items\n // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility\n if (dt.items) {\n const items = fromList(dt.items)\n .filter(item => item.kind === 'file');\n // According to https://html.spec.whatwg.org/multipage/dnd.html#dndevents,\n // only 'dragstart' and 'drop' has access to the data (source node)\n if (type !== 'drop') {\n return items;\n }\n const files = await Promise.all(items.map(toFilePromises));\n return noIgnoredFiles(flatten(files));\n }\n\n return noIgnoredFiles(fromList(dt.files)\n .map(file => toFileWithPath(file)));\n}\n\nfunction noIgnoredFiles(files: FileWithPath[]) {\n return files.filter(file => FILES_TO_IGNORE.indexOf(file.name) === -1);\n}\n\n// IE11 does not support Array.from()\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility\n// https://developer.mozilla.org/en-US/docs/Web/API/FileList\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList\nfunction fromList(items: DataTransferItemList | FileList | null): T[] {\n if (items === null) {\n return [];\n }\n\n const files = [];\n\n // tslint:disable: prefer-for-of\n for (let i = 0; i < items.length; i++) {\n const file = items[i];\n files.push(file);\n }\n\n return files as any;\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem\nfunction toFilePromises(item: DataTransferItem) {\n if (typeof item.webkitGetAsEntry !== 'function') {\n return fromDataTransferItem(item);\n }\n\n const entry = item.webkitGetAsEntry();\n\n // Safari supports dropping an image node from a different window and can be retrieved using\n // the DataTransferItem.getAsFile() API\n // NOTE: FileSystemEntry.file() throws if trying to get the file\n if (entry && entry.isDirectory) {\n return fromDirEntry(entry) as any;\n }\n\n return fromDataTransferItem(item);\n}\n\nfunction flatten(items: any[]): T[] {\n return items.reduce((acc, files) => [\n ...acc,\n ...(Array.isArray(files) ? flatten(files) : [files])\n ], []);\n}\n\nfunction fromDataTransferItem(item: DataTransferItem) {\n const file = item.getAsFile();\n if (!file) {\n return Promise.reject(`${item} is not a File`);\n }\n const fwp = toFileWithPath(file);\n return Promise.resolve(fwp);\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry\nasync function fromEntry(entry: any) {\n return entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry);\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry\nfunction fromDirEntry(entry: any) {\n const reader = entry.createReader();\n\n return new Promise((resolve, reject) => {\n const entries: Promise[] = [];\n\n function readEntries() {\n // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader\n // https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries\n reader.readEntries(async (batch: any[]) => {\n if (!batch.length) {\n // Done reading directory\n try {\n const files = await Promise.all(entries);\n resolve(files);\n } catch (err) {\n reject(err);\n }\n } else {\n const items = Promise.all(batch.map(fromEntry));\n entries.push(items);\n\n // Continue reading\n readEntries();\n }\n }, (err: any) => {\n reject(err);\n });\n }\n\n readEntries();\n });\n}\n\n// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry\nasync function fromFileEntry(entry: any) {\n return new Promise((resolve, reject) => {\n entry.file((file: FileWithPath) => {\n const fwp = toFileWithPath(file, entry.fullPath);\n resolve(fwp);\n }, (err: any) => {\n reject(err);\n });\n });\n}\n\n// Infinite type recursion\n// https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540\ninterface FileArray extends Array {}\ntype FileValue = FileWithPath\n | FileArray[];\n","function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nimport accepts from \"attr-accept\"; // Error codes\n\nexport var FILE_INVALID_TYPE = \"file-invalid-type\";\nexport var FILE_TOO_LARGE = \"file-too-large\";\nexport var FILE_TOO_SMALL = \"file-too-small\";\nexport var TOO_MANY_FILES = \"too-many-files\";\nexport var ErrorCode = {\n FileInvalidType: FILE_INVALID_TYPE,\n FileTooLarge: FILE_TOO_LARGE,\n FileTooSmall: FILE_TOO_SMALL,\n TooManyFiles: TOO_MANY_FILES\n}; // File Errors\n\nexport var getInvalidTypeRejectionErr = function getInvalidTypeRejectionErr(accept) {\n accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;\n var messageSuffix = Array.isArray(accept) ? \"one of \".concat(accept.join(\", \")) : accept;\n return {\n code: FILE_INVALID_TYPE,\n message: \"File type must be \".concat(messageSuffix)\n };\n};\nexport var getTooLargeRejectionErr = function getTooLargeRejectionErr(maxSize) {\n return {\n code: FILE_TOO_LARGE,\n message: \"File is larger than \".concat(maxSize, \" \").concat(maxSize === 1 ? \"byte\" : \"bytes\")\n };\n};\nexport var getTooSmallRejectionErr = function getTooSmallRejectionErr(minSize) {\n return {\n code: FILE_TOO_SMALL,\n message: \"File is smaller than \".concat(minSize, \" \").concat(minSize === 1 ? \"byte\" : \"bytes\")\n };\n};\nexport var TOO_MANY_FILES_REJECTION = {\n code: TOO_MANY_FILES,\n message: \"Too many files\"\n}; // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with\n// that MIME type will always be accepted\n\nexport function fileAccepted(file, accept) {\n var isAcceptable = file.type === \"application/x-moz-file\" || accepts(file, accept);\n return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];\n}\nexport function fileMatchSize(file, minSize, maxSize) {\n if (isDefined(file.size)) {\n if (isDefined(minSize) && isDefined(maxSize)) {\n if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];\n if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];\n } else if (isDefined(minSize) && file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];else if (isDefined(maxSize) && file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];\n }\n\n return [true, null];\n}\n\nfunction isDefined(value) {\n return value !== undefined && value !== null;\n}\n/**\n *\n * @param {object} options\n * @param {File[]} options.files\n * @param {string|string[]} [options.accept]\n * @param {number} [options.minSize]\n * @param {number} [options.maxSize]\n * @param {boolean} [options.multiple]\n * @param {number} [options.maxFiles]\n * @param {(f: File) => FileError|FileError[]|null} [options.validator]\n * @returns\n */\n\n\nexport function allFilesAccepted(_ref) {\n var files = _ref.files,\n accept = _ref.accept,\n minSize = _ref.minSize,\n maxSize = _ref.maxSize,\n multiple = _ref.multiple,\n maxFiles = _ref.maxFiles,\n validator = _ref.validator;\n\n if (!multiple && files.length > 1 || multiple && maxFiles >= 1 && files.length > maxFiles) {\n return false;\n }\n\n return files.every(function (file) {\n var _fileAccepted = fileAccepted(file, accept),\n _fileAccepted2 = _slicedToArray(_fileAccepted, 1),\n accepted = _fileAccepted2[0];\n\n var _fileMatchSize = fileMatchSize(file, minSize, maxSize),\n _fileMatchSize2 = _slicedToArray(_fileMatchSize, 1),\n sizeMatch = _fileMatchSize2[0];\n\n var customErrors = validator ? validator(file) : null;\n return accepted && sizeMatch && !customErrors;\n });\n} // React's synthetic events has event.isPropagationStopped,\n// but to remain compatibility with other libs (Preact) fall back\n// to check event.cancelBubble\n\nexport function isPropagationStopped(event) {\n if (typeof event.isPropagationStopped === \"function\") {\n return event.isPropagationStopped();\n } else if (typeof event.cancelBubble !== \"undefined\") {\n return event.cancelBubble;\n }\n\n return false;\n}\nexport function isEvtWithFiles(event) {\n if (!event.dataTransfer) {\n return !!event.target && !!event.target.files;\n } // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file\n\n\n return Array.prototype.some.call(event.dataTransfer.types, function (type) {\n return type === \"Files\" || type === \"application/x-moz-file\";\n });\n}\nexport function isKindFile(item) {\n return _typeof(item) === \"object\" && item !== null && item.kind === \"file\";\n} // allow the entire document to be a drag target\n\nexport function onDocumentDragOver(event) {\n event.preventDefault();\n}\n\nfunction isIe(userAgent) {\n return userAgent.indexOf(\"MSIE\") !== -1 || userAgent.indexOf(\"Trident/\") !== -1;\n}\n\nfunction isEdge(userAgent) {\n return userAgent.indexOf(\"Edge/\") !== -1;\n}\n\nexport function isIeOrEdge() {\n var userAgent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.navigator.userAgent;\n return isIe(userAgent) || isEdge(userAgent);\n}\n/**\n * This is intended to be used to compose event handlers\n * They are executed in order until one of them calls `event.isPropagationStopped()`.\n * Note that the check is done on the first invoke too,\n * meaning that if propagation was stopped before invoking the fns,\n * no handlers will be executed.\n *\n * @param {Function} fns the event hanlder functions\n * @return {Function} the event handler to add to an element\n */\n\nexport function composeEventHandlers() {\n for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {\n fns[_key] = arguments[_key];\n }\n\n return function (event) {\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n\n return fns.some(function (fn) {\n if (!isPropagationStopped(event) && fn) {\n fn.apply(void 0, [event].concat(args));\n }\n\n return isPropagationStopped(event);\n });\n };\n}\n/**\n * canUseFileSystemAccessAPI checks if the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)\n * is supported by the browser.\n * @returns {boolean}\n */\n\nexport function canUseFileSystemAccessAPI() {\n return \"showOpenFilePicker\" in window;\n}\n/**\n * Convert the `{accept}` dropzone prop to the\n * `{types}` option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker\n *\n * @param {AcceptProp} accept\n * @returns {{accept: string[]}[]}\n */\n\nexport function pickerOptionsFromAccept(accept) {\n if (isDefined(accept)) {\n var acceptForPicker = Object.entries(accept).filter(function (_ref2) {\n var _ref3 = _slicedToArray(_ref2, 2),\n mimeType = _ref3[0],\n ext = _ref3[1];\n\n var ok = true;\n\n if (!isMIMEType(mimeType)) {\n console.warn(\"Skipped \\\"\".concat(mimeType, \"\\\" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types.\"));\n ok = false;\n }\n\n if (!Array.isArray(ext) || !ext.every(isExt)) {\n console.warn(\"Skipped \\\"\".concat(mimeType, \"\\\" because an invalid file extension was provided.\"));\n ok = false;\n }\n\n return ok;\n }).reduce(function (agg, _ref4) {\n var _ref5 = _slicedToArray(_ref4, 2),\n mimeType = _ref5[0],\n ext = _ref5[1];\n\n return _objectSpread(_objectSpread({}, agg), {}, _defineProperty({}, mimeType, ext));\n }, {});\n return [{\n // description is required due to https://crbug.com/1264708\n description: \"Files\",\n accept: acceptForPicker\n }];\n }\n\n return accept;\n}\n/**\n * Convert the `{accept}` dropzone prop to an array of MIME types/extensions.\n * @param {AcceptProp} accept\n * @returns {string}\n */\n\nexport function acceptPropAsAcceptAttr(accept) {\n if (isDefined(accept)) {\n return Object.entries(accept).reduce(function (a, _ref6) {\n var _ref7 = _slicedToArray(_ref6, 2),\n mimeType = _ref7[0],\n ext = _ref7[1];\n\n return [].concat(_toConsumableArray(a), [mimeType], _toConsumableArray(ext));\n }, []) // Silently discard invalid entries as pickerOptionsFromAccept warns about these\n .filter(function (v) {\n return isMIMEType(v) || isExt(v);\n }).join(\",\");\n }\n\n return undefined;\n}\n/**\n * Check if v is an exception caused by aborting a request (e.g window.showOpenFilePicker()).\n *\n * See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.\n * @param {any} v\n * @returns {boolean} True if v is an abort exception.\n */\n\nexport function isAbort(v) {\n return v instanceof DOMException && (v.name === \"AbortError\" || v.code === v.ABORT_ERR);\n}\n/**\n * Check if v is a security error.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.\n * @param {any} v\n * @returns {boolean} True if v is a security error.\n */\n\nexport function isSecurityError(v) {\n return v instanceof DOMException && (v.name === \"SecurityError\" || v.code === v.SECURITY_ERR);\n}\n/**\n * Check if v is a MIME type string.\n *\n * See accepted format: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers.\n *\n * @param {string} v\n */\n\nexport function isMIMEType(v) {\n return v === \"audio/*\" || v === \"video/*\" || v === \"image/*\" || v === \"text/*\" || /\\w+\\/[-+.\\w]+/g.test(v);\n}\n/**\n * Check if v is a file extension.\n * @param {string} v\n */\n\nexport function isExt(v) {\n return /^.*\\.[\\w]+$/.test(v);\n}\n/**\n * @typedef {Object.} AcceptProp\n */\n\n/**\n * @typedef {object} FileError\n * @property {string} message\n * @property {ErrorCode|string} code\n */\n\n/**\n * @typedef {\"file-invalid-type\"|\"file-too-large\"|\"file-too-small\"|\"too-many-files\"} ErrorCode\n */","var _excluded = [\"children\"],\n _excluded2 = [\"open\"],\n _excluded3 = [\"refKey\", \"role\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onClick\", \"onDragEnter\", \"onDragOver\", \"onDragLeave\", \"onDrop\"],\n _excluded4 = [\"refKey\", \"onChange\", \"onClick\"];\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* eslint prefer-template: 0 */\nimport React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { fromEvent } from \"file-selector\";\nimport { acceptPropAsAcceptAttr, allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, canUseFileSystemAccessAPI, isAbort, isEvtWithFiles, isIeOrEdge, isPropagationStopped, isSecurityError, onDocumentDragOver, pickerOptionsFromAccept, TOO_MANY_FILES_REJECTION } from \"./utils/index\";\n/**\n * Convenience wrapper component for the `useDropzone` hook\n *\n * ```jsx\n * \n * {({getRootProps, getInputProps}) => (\n *
\n * \n *
Drag 'n' drop some files here, or click to select files
\n *
\n * )}\n * \n * ```\n */\n\nvar Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {\n var children = _ref.children,\n params = _objectWithoutProperties(_ref, _excluded);\n\n var _useDropzone = useDropzone(params),\n open = _useDropzone.open,\n props = _objectWithoutProperties(_useDropzone, _excluded2);\n\n useImperativeHandle(ref, function () {\n return {\n open: open\n };\n }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element\n\n return /*#__PURE__*/React.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {\n open: open\n })));\n});\nDropzone.displayName = \"Dropzone\"; // Add default props for react-docgen\n\nvar defaultProps = {\n disabled: false,\n getFilesFromEvent: fromEvent,\n maxSize: Infinity,\n minSize: 0,\n multiple: true,\n maxFiles: 0,\n preventDropOnDocument: true,\n noClick: false,\n noKeyboard: false,\n noDrag: false,\n noDragEventsBubbling: false,\n validator: null,\n useFsAccessApi: true,\n autoFocus: false\n};\nDropzone.defaultProps = defaultProps;\nDropzone.propTypes = {\n /**\n * Render function that exposes the dropzone state and prop getter fns\n *\n * @param {object} params\n * @param {Function} params.getRootProps Returns the props you should apply to the root drop container you render\n * @param {Function} params.getInputProps Returns the props you should apply to hidden file input you render\n * @param {Function} params.open Open the native file selection dialog\n * @param {boolean} params.isFocused Dropzone area is in focus\n * @param {boolean} params.isFileDialogActive File dialog is opened\n * @param {boolean} params.isDragActive Active drag is in progress\n * @param {boolean} params.isDragAccept Dragged files are accepted\n * @param {boolean} params.isDragReject Some dragged files are rejected\n * @param {File[]} params.acceptedFiles Accepted files\n * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected\n */\n children: PropTypes.func,\n\n /**\n * Set accepted file types.\n * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n */\n accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),\n\n /**\n * Allow drag 'n' drop (or selection from the file dialog) of multiple files\n */\n multiple: PropTypes.bool,\n\n /**\n * If false, allow dropped items to take over the current browser window\n */\n preventDropOnDocument: PropTypes.bool,\n\n /**\n * If true, disables click to open the native file selection dialog\n */\n noClick: PropTypes.bool,\n\n /**\n * If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n */\n noKeyboard: PropTypes.bool,\n\n /**\n * If true, disables drag 'n' drop\n */\n noDrag: PropTypes.bool,\n\n /**\n * If true, stops drag event propagation to parents\n */\n noDragEventsBubbling: PropTypes.bool,\n\n /**\n * Minimum file size (in bytes)\n */\n minSize: PropTypes.number,\n\n /**\n * Maximum file size (in bytes)\n */\n maxSize: PropTypes.number,\n\n /**\n * Maximum accepted number of files\n * The default value is 0 which means there is no limitation to how many files are accepted.\n */\n maxFiles: PropTypes.number,\n\n /**\n * Enable/disable the dropzone\n */\n disabled: PropTypes.bool,\n\n /**\n * Use this to provide a custom file aggregator\n *\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n */\n getFilesFromEvent: PropTypes.func,\n\n /**\n * Cb for when closing the file dialog with no selection\n */\n onFileDialogCancel: PropTypes.func,\n\n /**\n * Cb for when opening the file dialog\n */\n onFileDialogOpen: PropTypes.func,\n\n /**\n * Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n * to open the file picker instead of using an `` click event.\n */\n useFsAccessApi: PropTypes.bool,\n\n /**\n * Set to true to focus the root element on render\n */\n autoFocus: PropTypes.bool,\n\n /**\n * Cb for when the `dragenter` event occurs.\n *\n * @param {DragEvent} event\n */\n onDragEnter: PropTypes.func,\n\n /**\n * Cb for when the `dragleave` event occurs\n *\n * @param {DragEvent} event\n */\n onDragLeave: PropTypes.func,\n\n /**\n * Cb for when the `dragover` event occurs\n *\n * @param {DragEvent} event\n */\n onDragOver: PropTypes.func,\n\n /**\n * Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n *\n * @param {File[]} acceptedFiles\n * @param {FileRejection[]} fileRejections\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n */\n onDrop: PropTypes.func,\n\n /**\n * Cb for when the `drop` event occurs.\n * Note that if no files are accepted, this callback is not invoked.\n *\n * @param {File[]} files\n * @param {(DragEvent|Event)} event\n */\n onDropAccepted: PropTypes.func,\n\n /**\n * Cb for when the `drop` event occurs.\n * Note that if no files are rejected, this callback is not invoked.\n *\n * @param {FileRejection[]} fileRejections\n * @param {(DragEvent|Event)} event\n */\n onDropRejected: PropTypes.func,\n\n /**\n * Cb for when there's some error from any of the promises.\n *\n * @param {Error} error\n */\n onError: PropTypes.func,\n\n /**\n * Custom validation function. It must return null if there's no errors.\n * @param {File} file\n * @returns {FileError|FileError[]|null}\n */\n validator: PropTypes.func\n};\nexport default Dropzone;\n/**\n * A function that is invoked for the `dragenter`,\n * `dragover` and `dragleave` events.\n * It is not invoked if the items are not files (such as link, text, etc.).\n *\n * @callback dragCb\n * @param {DragEvent} event\n */\n\n/**\n * A function that is invoked for the `drop` or input change event.\n * It is not invoked if the items are not files (such as link, text, etc.).\n *\n * @callback dropCb\n * @param {File[]} acceptedFiles List of accepted files\n * @param {FileRejection[]} fileRejections List of rejected files and why they were rejected\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n */\n\n/**\n * A function that is invoked for the `drop` or input change event.\n * It is not invoked if the items are files (such as link, text, etc.).\n *\n * @callback dropAcceptedCb\n * @param {File[]} files List of accepted files that meet the given criteria\n * (`accept`, `multiple`, `minSize`, `maxSize`)\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n */\n\n/**\n * A function that is invoked for the `drop` or input change event.\n *\n * @callback dropRejectedCb\n * @param {File[]} files List of rejected files that do not meet the given criteria\n * (`accept`, `multiple`, `minSize`, `maxSize`)\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n */\n\n/**\n * A function that is used aggregate files,\n * in a asynchronous fashion, from drag or input change events.\n *\n * @callback getFilesFromEvent\n * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n * @returns {(File[]|Promise)}\n */\n\n/**\n * An object with the current dropzone state.\n *\n * @typedef {object} DropzoneState\n * @property {boolean} isFocused Dropzone area is in focus\n * @property {boolean} isFileDialogActive File dialog is opened\n * @property {boolean} isDragActive Active drag is in progress\n * @property {boolean} isDragAccept Dragged files are accepted\n * @property {boolean} isDragReject Some dragged files are rejected\n * @property {File[]} acceptedFiles Accepted files\n * @property {FileRejection[]} fileRejections Rejected files and why they were rejected\n */\n\n/**\n * An object with the dropzone methods.\n *\n * @typedef {object} DropzoneMethods\n * @property {Function} getRootProps Returns the props you should apply to the root drop container you render\n * @property {Function} getInputProps Returns the props you should apply to hidden file input you render\n * @property {Function} open Open the native file selection dialog\n */\n\nvar initialState = {\n isFocused: false,\n isFileDialogActive: false,\n isDragActive: false,\n isDragAccept: false,\n isDragReject: false,\n acceptedFiles: [],\n fileRejections: []\n};\n/**\n * A React hook that creates a drag 'n' drop area.\n *\n * ```jsx\n * function MyDropzone(props) {\n * const {getRootProps, getInputProps} = useDropzone({\n * onDrop: acceptedFiles => {\n * // do something with the File objects, e.g. upload to some server\n * }\n * });\n * return (\n *
\n * \n *
Drag and drop some files here, or click to select files
\n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {import(\"./utils\").AcceptProp} [props.accept] Set accepted file types.\n * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n * to open the file picker instead of using an `` click event.\n * @param {boolean} autoFocus Set to true to auto focus the root element.\n * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be an object with keys as a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) and the value an array of file extensions (optional).\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n * @param {(error: Error) => void} [props.onError]\n *\n * @returns {DropzoneState & DropzoneMethods}\n */\n\nexport function useDropzone() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),\n accept = _defaultProps$props.accept,\n disabled = _defaultProps$props.disabled,\n getFilesFromEvent = _defaultProps$props.getFilesFromEvent,\n maxSize = _defaultProps$props.maxSize,\n minSize = _defaultProps$props.minSize,\n multiple = _defaultProps$props.multiple,\n maxFiles = _defaultProps$props.maxFiles,\n onDragEnter = _defaultProps$props.onDragEnter,\n onDragLeave = _defaultProps$props.onDragLeave,\n onDragOver = _defaultProps$props.onDragOver,\n onDrop = _defaultProps$props.onDrop,\n onDropAccepted = _defaultProps$props.onDropAccepted,\n onDropRejected = _defaultProps$props.onDropRejected,\n onFileDialogCancel = _defaultProps$props.onFileDialogCancel,\n onFileDialogOpen = _defaultProps$props.onFileDialogOpen,\n useFsAccessApi = _defaultProps$props.useFsAccessApi,\n autoFocus = _defaultProps$props.autoFocus,\n preventDropOnDocument = _defaultProps$props.preventDropOnDocument,\n noClick = _defaultProps$props.noClick,\n noKeyboard = _defaultProps$props.noKeyboard,\n noDrag = _defaultProps$props.noDrag,\n noDragEventsBubbling = _defaultProps$props.noDragEventsBubbling,\n onError = _defaultProps$props.onError,\n validator = _defaultProps$props.validator;\n\n var acceptAttr = useMemo(function () {\n return acceptPropAsAcceptAttr(accept);\n }, [accept]);\n var pickerTypes = useMemo(function () {\n return pickerOptionsFromAccept(accept);\n }, [accept]);\n var onFileDialogOpenCb = useMemo(function () {\n return typeof onFileDialogOpen === \"function\" ? onFileDialogOpen : noop;\n }, [onFileDialogOpen]);\n var onFileDialogCancelCb = useMemo(function () {\n return typeof onFileDialogCancel === \"function\" ? onFileDialogCancel : noop;\n }, [onFileDialogCancel]);\n /**\n * @constant\n * @type {React.MutableRefObject}\n */\n\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive;\n var fsAccessApiWorksRef = useRef(typeof window !== \"undefined\" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (!fsAccessApiWorksRef.current && isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: \"closeDialog\"\n });\n onFileDialogCancelCb();\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener(\"focus\", onWindowFocus, false);\n return function () {\n window.removeEventListener(\"focus\", onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener(\"dragover\", onDocumentDragOver, false);\n document.addEventListener(\"drop\", onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener(\"dragover\", onDocumentDragOver);\n document.removeEventListener(\"drop\", onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true\n\n useEffect(function () {\n if (!disabled && autoFocus && rootRef.current) {\n rootRef.current.focus();\n }\n\n return function () {};\n }, [rootRef, autoFocus, disabled]);\n var onErrCb = useCallback(function (e) {\n if (onError) {\n onError(e);\n } else {\n // Let the user know something's gone wrong if they haven't provided the onError cb.\n console.error(e);\n }\n }, [onError]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n var fileCount = files.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: files,\n accept: acceptAttr,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple,\n maxFiles: maxFiles,\n validator: validator\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n dispatch({\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isDragActive: true,\n type: \"setDraggedFiles\"\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n }).catch(function (e) {\n return onErrCb(e);\n });\n }\n }, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling, acceptAttr, minSize, maxSize, multiple, maxFiles, validator]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n var hasFiles = isEvtWithFiles(event);\n\n if (hasFiles && event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = \"copy\";\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (hasFiles && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return rootRef.current && rootRef.current.contains(target);\n }); // Make sure to remove a target present multiple times only once\n // (Firefox may fire dragenter/dragleave multiple times on the same element)\n\n var targetIdx = targets.indexOf(event.target);\n\n if (targetIdx !== -1) {\n targets.splice(targetIdx, 1);\n }\n\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n type: \"setDraggedFiles\",\n isDragActive: false,\n isDragAccept: false,\n isDragReject: false\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var setFiles = useCallback(function (files, event) {\n var acceptedFiles = [];\n var fileRejections = [];\n files.forEach(function (file) {\n var _fileAccepted = fileAccepted(file, acceptAttr),\n _fileAccepted2 = _slicedToArray(_fileAccepted, 2),\n accepted = _fileAccepted2[0],\n acceptError = _fileAccepted2[1];\n\n var _fileMatchSize = fileMatchSize(file, minSize, maxSize),\n _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),\n sizeMatch = _fileMatchSize2[0],\n sizeError = _fileMatchSize2[1];\n\n var customErrors = validator ? validator(file) : null;\n\n if (accepted && sizeMatch && !customErrors) {\n acceptedFiles.push(file);\n } else {\n var errors = [acceptError, sizeError];\n\n if (customErrors) {\n errors = errors.concat(customErrors);\n }\n\n fileRejections.push({\n file: file,\n errors: errors.filter(function (e) {\n return e;\n })\n });\n }\n });\n\n if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {\n // Reject everything and empty accepted files\n acceptedFiles.forEach(function (file) {\n fileRejections.push({\n file: file,\n errors: [TOO_MANY_FILES_REJECTION]\n });\n });\n acceptedFiles.splice(0);\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n fileRejections: fileRejections,\n type: \"setFiles\"\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, fileRejections, event);\n }\n\n if (fileRejections.length > 0 && onDropRejected) {\n onDropRejected(fileRejections, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n }, [dispatch, multiple, acceptAttr, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n setFiles(files, event);\n }).catch(function (e) {\n return onErrCb(e);\n });\n }\n\n dispatch({\n type: \"reset\"\n });\n }, [getFilesFromEvent, setFiles, onErrCb, noDragEventsBubbling]); // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n // No point to use FS access APIs if context is not secure\n // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection\n if (fsAccessApiWorksRef.current) {\n dispatch({\n type: \"openDialog\"\n });\n onFileDialogOpenCb(); // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker\n\n var opts = {\n multiple: multiple,\n types: pickerTypes\n };\n window.showOpenFilePicker(opts).then(function (handles) {\n return getFilesFromEvent(handles);\n }).then(function (files) {\n setFiles(files, null);\n dispatch({\n type: \"closeDialog\"\n });\n }).catch(function (e) {\n // AbortError means the user canceled\n if (isAbort(e)) {\n onFileDialogCancelCb(e);\n dispatch({\n type: \"closeDialog\"\n });\n } else if (isSecurityError(e)) {\n fsAccessApiWorksRef.current = false; // CORS, so cannot use this API\n // Try using the input\n\n if (inputRef.current) {\n inputRef.current.value = null;\n inputRef.current.click();\n } else {\n onErrCb(new Error(\"Cannot open the file picker because the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API is not supported and no was provided.\"));\n }\n } else {\n onErrCb(e);\n }\n });\n return;\n }\n\n if (inputRef.current) {\n dispatch({\n type: \"openDialog\"\n });\n onFileDialogOpenCb();\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, onErrCb, pickerTypes, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.key === \" \" || event.key === \"Enter\" || event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, openFileDialog]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: \"focus\"\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: \"blur\"\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [noClick, openFileDialog]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref2$refKey = _ref2.refKey,\n refKey = _ref2$refKey === void 0 ? \"ref\" : _ref2$refKey,\n role = _ref2.role,\n onKeyDown = _ref2.onKeyDown,\n onFocus = _ref2.onFocus,\n onBlur = _ref2.onBlur,\n onClick = _ref2.onClick,\n onDragEnter = _ref2.onDragEnter,\n onDragOver = _ref2.onDragOver,\n onDragLeave = _ref2.onDragLeave,\n onDrop = _ref2.onDrop,\n rest = _objectWithoutProperties(_ref2, _excluded3);\n\n return _objectSpread(_objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),\n role: typeof role === \"string\" && role !== \"\" ? role : \"presentation\"\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}), rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? \"ref\" : _ref3$refKey,\n onChange = _ref3.onChange,\n onClick = _ref3.onClick,\n rest = _objectWithoutProperties(_ref3, _excluded4);\n\n var inputProps = _defineProperty({\n accept: acceptAttr,\n multiple: multiple,\n type: \"file\",\n style: {\n display: \"none\"\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread(_objectSpread({}, inputProps), rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n/**\n * @param {DropzoneState} state\n * @param {{type: string} & DropzoneState} action\n * @returns {DropzoneState}\n */\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case \"focus\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: true\n });\n\n case \"blur\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: false\n });\n\n case \"openDialog\":\n return _objectSpread(_objectSpread({}, initialState), {}, {\n isFileDialogActive: true\n });\n\n case \"closeDialog\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false\n });\n\n case \"setDraggedFiles\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isDragActive: action.isDragActive,\n isDragAccept: action.isDragAccept,\n isDragReject: action.isDragReject\n });\n\n case \"setFiles\":\n return _objectSpread(_objectSpread({}, state), {}, {\n acceptedFiles: action.acceptedFiles,\n fileRejections: action.fileRejections\n });\n\n case \"reset\":\n return _objectSpread({}, initialState);\n\n default:\n return state;\n }\n}\n\nfunction noop() {}\n\nexport { ErrorCode } from \"./utils\";","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgDocumentIcon(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 48 48\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M11.4 11.4a4.2 4.2 0 0 1 4.2-4.2h9.63a4.2 4.2 0 0 1 2.97 1.23l7.17 7.17a4.2 4.2 0 0 1 1.23 2.97V36.6a4.2 4.2 0 0 1-4.2 4.2H15.6a4.2 4.2 0 0 1-4.2-4.2V11.4Z\",\n fill: \"#94A3B8\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDocumentIcon);\nexport default __webpack_public_path__ + \"static/media/document-icon.0a9a83cd95baeb6dcda8d2a09c95a73e.svg\";\nexport { ForwardRef as ReactComponent };","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n logoDropper: {\n borderRadius: 2,\n position: 'relative',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'column'\n },\n logoDropperButton: {\n backgroundColor: 'transparent',\n cursor: 'pointer',\n outline: 'none',\n padding: 0,\n width: '100%',\n border: '1.5px dashed #92BAE0'\n },\n removeBorder: {\n border: 'none'\n },\n logoDropperContent: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'column',\n cursor: 'pointer',\n padding: ({ isMakeDocumentPage }) =>\n isMakeDocumentPage\n ? `${theme.typography.pxToRem(16)} ${theme.typography.pxToRem(\n 14\n )} ${theme.typography.pxToRem(16)} ${theme.typography.pxToRem(\n 14\n )}`\n : '22px 0',\n background: '#F5F9FC',\n '&:hover': {\n background: '#E1ECF7'\n }\n },\n logoImage: {\n maxWidth: '100%',\n maxHeight: ({ isLogo, isMakeDocumentPage }) => {\n if (isLogo) {\n return theme.typography.pxToRem(132);\n }\n if (isMakeDocumentPage) {\n return theme.typography.pxToRem(100);\n }\n return theme.typography.pxToRem(400);\n },\n padding: 0,\n cursor: 'pointer',\n display: 'block',\n margin: 'auto',\n boxShadow: ({ isMakeDocumentPage }) =>\n isMakeDocumentPage ? undefined : '0px 5px 10px 3px #DEDEE7'\n },\n label: {\n color: '#909397',\n fontWeight: 500,\n fontSize: 11,\n textTransform: 'uppercase'\n },\n editButton: {\n backgroundColor: theme.palette.common.white,\n border: '1px solid #E0E5EE',\n margin: '41px 0 12px',\n '&:hover': {\n backgroundColor: 'rgba(0,0,0, .08)',\n color: theme.palette.common.black\n }\n },\n deleteButton: {\n backgroundColor: theme.palette.common.white,\n color: theme.palette.actionColors.negative,\n border: `1px solid ${theme.palette.actionColors.negative}`,\n '&:hover': {\n backgroundColor: '#35373d0a'\n }\n },\n documentIcon: {\n width: 48,\n height: 48,\n marginBottom: 8\n },\n uploadPrompt: {\n color: '#64748B'\n },\n uploadSubPrompt: {\n color: '#64748B',\n fontSize: theme.typography.pxToRem(12)\n },\n dropZoneDragOver: {\n background: '#E1ECF7'\n }\n}));\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDropzone } from 'react-dropzone';\nimport { Button, Grid, Typography } from '@mui/material';\nimport { useDispatch } from 'react-redux';\nimport { cropLogo, setQrCodeURL, toggleCropperModal } from '@/actions';\nimport { DocumentIcon } from '@/resources/icons';\nimport ButtonLoading from '../ButtonLoading';\nimport useStyles from './styles';\n\nconst ImageUploadButton = ({\n deletionPending,\n imageAlt,\n imageSrc,\n label,\n onDelete,\n isLogo,\n isMakeDocumentPage,\n loadQrReader,\n qrMerchant\n}) => {\n const classes = useStyles({ isLogo, isMakeDocumentPage });\n const dispatch = useDispatch();\n\n const onDrop = useCallback(\n (acceptedFiles) => {\n loadQrReader();\n\n acceptedFiles.forEach((file) => {\n const imageURL = URL.createObjectURL(file);\n if (isLogo || isMakeDocumentPage) {\n dispatch(cropLogo(imageURL));\n dispatch(toggleCropperModal(true));\n } else {\n dispatch(setQrCodeURL(imageURL));\n }\n });\n },\n [dispatch, isLogo, isMakeDocumentPage, loadQrReader]\n );\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: {\n 'image/jpeg': [],\n 'image/png': []\n },\n multiple: false\n });\n\n const rootProps = getRootProps({\n container: true,\n direction: 'column',\n className: classes.inner\n });\n\n const inputProps = getInputProps();\n\n return (\n \n {!isMakeDocumentPage && (isLogo || !imageSrc) && (\n \n \n {label}\n \n \n )}\n \n \n \n \n {!isMakeDocumentPage && imageSrc && (\n \n \n \n {isLogo\n ? 'Delete'\n : `Remove All ${qrMerchant} Information`}\n \n \n )}\n \n );\n};\n\nImageUploadButton.propTypes = {\n deletionPending: PropTypes.bool,\n imageAlt: PropTypes.string,\n imageSrc: PropTypes.string,\n label: PropTypes.string,\n onDelete: PropTypes.func,\n isLogo: PropTypes.bool,\n isMakeDocumentPage: PropTypes.bool,\n onEdit: PropTypes.func,\n loadQrReader: PropTypes.func,\n qrMerchant: PropTypes.string\n};\n\nImageUploadButton.defaultProps = {\n deletionPending: false,\n imageAlt: '',\n imageSrc: '',\n label: '',\n onDelete: () => {},\n isLogo: false,\n isMakeDocumentPage: false,\n onEdit: () => {},\n loadQrReader: () => {},\n qrMerchant: ''\n};\n\nexport default ImageUploadButton;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles(() => ({\n inlineLink: {\n minWidth: 'inherit',\n padding: 0,\n fontSize: 'inherit',\n lineHeight: 'inherit',\n verticalAlign: 'inherit',\n textDecoration: (disableUnderline) =>\n disableUnderline ? 'none' : 'underline',\n '&:hover': {\n backgroundColor: 'transparent',\n textDecoration: (disableUnderline) =>\n disableUnderline ? 'underline' : 'none'\n }\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@mui/material/Button';\nimport Link from '@mui/material/Link';\nimport { Link as LinkRoute } from 'react-router-dom-v5-compat';\nimport useStyles from './styles';\n\nconst ExternalLink = ({ href, disableUnderline, classes, children }) => {\n const style = useStyles(disableUnderline);\n return (\n \n {children}\n \n );\n};\n\nExternalLink.propTypes = {\n href: PropTypes.string.isRequired,\n disableUnderline: PropTypes.bool,\n classes: PropTypes.string,\n children: PropTypes.string.isRequired\n};\n\nExternalLink.defaultProps = {\n disableUnderline: true,\n classes: ''\n};\n\nconst RouterLink = ({ classes, href, disableUnderline, children }) => {\n const style = useStyles(disableUnderline);\n return (\n \n {children}\n \n );\n};\n\nRouterLink.propTypes = {\n href: PropTypes.string.isRequired,\n disableUnderline: PropTypes.bool,\n classes: PropTypes.string,\n children: PropTypes.string.isRequired\n};\n\nRouterLink.defaultProps = {\n disableUnderline: false,\n classes: ''\n};\n\nconst LinkStyledButton = ({ disableUnderline, classes, children, onClick }) => {\n const style = useStyles(disableUnderline);\n\n return (\n \n );\n};\n\nLinkStyledButton.propTypes = {\n disableUnderline: PropTypes.bool,\n classes: PropTypes.string,\n children: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired\n};\n\nLinkStyledButton.defaultProps = {\n disableUnderline: false,\n classes: ''\n};\n\n/**\n *\n * @param {string} href A link, both external links and internal routes can be passed.\n * @param {func} onClick Action to perform when the button is clicked.\n * @param {bool} disableUnderline Hides underline styling. Useful when rendering as Button that looks like a link.\n * @param {string} classes Custom CSS className to pass to the component.\n * @param {string} children The text to render. Required.\n * @returns\n */\n\nconst InlineLink = ({ href, onClick, disableUnderline, classes, children }) => {\n const isExternal = /(http)/.test(href);\n\n return (\n <>\n {isExternal && (\n \n {children}\n \n )}\n {!isExternal && href && (\n \n {children}\n \n )}\n {!href && (\n \n {children}\n \n )}\n >\n );\n};\n\nInlineLink.propTypes = {\n href: PropTypes.string,\n disableUnderline: PropTypes.bool,\n onClick: PropTypes.func,\n classes: PropTypes.string,\n children: PropTypes.string.isRequired\n};\n\nInlineLink.defaultProps = {\n disableUnderline: false,\n href: undefined,\n onClick: () => {},\n classes: ''\n};\n\nexport default InlineLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { NavLink } from 'react-router-dom-v5-compat';\n\n/**\n * Custom component to dynamically create internal/external links.\n * @param {node} children Elements to be wrapped by link.\n * @param {string} to URL to direct to.\n */\nconst Link = ({ children, to, ...other }) => {\n // Checks if link is internal/external URL.\n const internal = /^\\/(?!\\/)/.test(to);\n\n if (internal) {\n return (\n \n {children}\n \n );\n }\n return (\n \n {children}\n \n );\n};\n\nLink.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]).isRequired,\n to: PropTypes.string.isRequired\n};\n\nexport default Link;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n button: {\n width: 100,\n [theme.breakpoints.down('md')]: {\n margin: '4px 0px 8px 0px'\n }\n },\n mobileSpacer: {\n height: 32,\n width: 100\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useMediaQuery, useTheme } from '@mui/material';\nimport { useUrlParams } from '@/hooks';\nimport InlineLink from '../InlineLink';\nimport useStyles from './styles';\n\nconst ListingClearButton = ({ base, watch, hide }) => {\n const { getUrlParams, setUrlParams } = useUrlParams();\n const params = getUrlParams({ base, watch });\n const classes = useStyles();\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n if (Object.keys(params).length > 0 && !hide) {\n return (\n setUrlParams({ base, params: null })}\n >\n {isMobile ? 'Clear Filters' : 'Clear All'}\n \n );\n }\n\n if (isMobile) {\n return ;\n }\n\n return null;\n};\n\nListingClearButton.propTypes = {\n base: PropTypes.string.isRequired,\n watch: PropTypes.arrayOf(PropTypes.string),\n hide: PropTypes.bool\n};\n\nListingClearButton.defaultProps = {\n watch: [],\n hide: false\n};\n\nexport default ListingClearButton;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n dialog: {\n maxWidth: theme.typography.pxToRem(770),\n margin: 'auto'\n },\n wrapper: {\n position: 'relative',\n paddingBottom: '110%',\n backgroundColor: (props) => props.backgroundColor,\n overflow: 'hidden',\n [theme.breakpoints.up('sm')]: {\n paddingBottom: '90%'\n },\n [theme.breakpoints.up('md')]: {\n paddingBottom: '71%'\n }\n },\n inner: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n padding: `0 ${theme.typography.pxToRem(20)} ${theme.typography.pxToRem(\n 20\n )} ${theme.typography.pxToRem(20)}`,\n [theme.breakpoints.up('sm')]: {\n position: 'absolute'\n }\n },\n title: {\n color: theme.palette.primary.main,\n fontWeight: 600,\n fontSize: theme.typography.pxToRem(26),\n textAlign: 'center',\n marginTop: theme.typography.pxToRem(25)\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Dialog from '@mui/material/Dialog';\nimport useStyles from './styles';\n\n/**\n * Animation modal for sending and downloading actions.\n * @param {string} backgroundColor backgroundColor for the wrapper.\n * @param {mixed} children Lottie components that have been wrapped by this component.\n * @param {string} title String to explain the action for screen reader purposes.\n * @param {bool} open Is modal open.\n */\nconst LottieModal = ({ children, title, open, ...props }) => {\n const classes = useStyles(props);\n\n return (\n \n );\n};\n\nLottieModal.propTypes = {\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n open: PropTypes.bool\n};\n\nLottieModal.defaultProps = {\n children: null,\n title: '',\n open: false\n};\n\nexport default LottieModal;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n itemTagsContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n itemTagTopSpacing: {\n paddingTop: theme.spacing(1)\n },\n itemTagPillContainer: {\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n gap: 5\n },\n mobileItemTagPill: (tags) => ({\n backgroundColor: tags.backgroundColor,\n color: tags.color,\n border: `1px solid ${\n tags.backgroundColor === '#FFFFFF' ? '#E0E5EE' : 'transparent'\n }`,\n padding: `${theme.spacing(0.2)} ${theme.spacing(1.5)}`,\n borderRadius: 24,\n wordBreak: 'break-word',\n width: 'fit-content'\n }),\n itemTagIcon: {\n width: 16,\n height: 16,\n minWidth: 16,\n marginTop: 4,\n marginRight: 12\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@mui/material/Typography';\nimport { ButtonBase } from '@mui/material';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { TagsIconGrey } from '@/resources/icons';\nimport { openDrawer } from '@/state/actions';\nimport useStyles from './styles';\n\nexport const TableTagPills = ({ backgroundColor, color, name }) => {\n const classes = useStyles({ backgroundColor, color });\n return (\n
}\n >\n );\n};\n\nInnerCard.propTypes = {\n title: PropTypes.string,\n left: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n right: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n full: PropTypes.oneOfType([PropTypes.string, PropTypes.element])\n};\n\nInnerCard.defaultProps = {\n title: undefined,\n left: undefined,\n right: undefined,\n full: undefined\n};\n\n/**\n * The mobile view for the table listings.\n * @param {string} title Title of the card.\n * @param {string} to Page to link the card to.\n * @param {func} onClcik Function to fire if clicked.\n * @param {elements} left Elements to be stacked in the left side of the card.\n * @param {elements} right Elements to be stacked in the right side of the card.\n * @param {elements} full Elements to be full width.\n * @param {elements} actions Action icons to be shown on the card.\n */\nconst TableCard = memo(\n ({ to, title, onClick, left, right, full, actions, tags }) => {\n const [showActions, setShowActions] = useState(false);\n const classes = useStyles({ showActions });\n\n return (\n \n {actions && (\n
elements.\n // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element\n if (component === 'td') {\n scope = undefined;\n } else if (!scope && isHeadCell) {\n scope = 'col';\n }\n const variant = variantProp || tablelvl2 && tablelvl2.variant;\n const ownerState = _extends({}, props, {\n align,\n component,\n padding: paddingProp || (table && table.padding ? table.padding : 'normal'),\n size: sizeProp || (table && table.size ? table.size : 'medium'),\n sortDirection,\n stickyHeader: variant === 'head' && table && table.stickyHeader,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n let ariaSort = null;\n if (sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n return /*#__PURE__*/_jsx(TableCellRoot, _extends({\n as: component,\n ref: ref,\n className: clsx(classes.root, className),\n \"aria-sort\": ariaSort,\n scope: scope,\n ownerState: ownerState\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableCell.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * Set the text-align on the table cell content.\n *\n * Monetary or generally number fields **should be right aligned** as that allows\n * you to add them up quickly in your head without having to worry about decimals.\n * @default 'inherit'\n */\n align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * Sets the padding applied to the cell.\n * The prop defaults to the value (`'default'`) inherited from the parent Table component.\n */\n padding: PropTypes.oneOf(['checkbox', 'none', 'normal']),\n /**\n * Set scope attribute.\n */\n scope: PropTypes.string,\n /**\n * Specify the size of the cell.\n * The prop defaults to the value (`'medium'`) inherited from the parent Table component.\n */\n size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),\n /**\n * Set aria-sort direction.\n */\n sortDirection: PropTypes.oneOf(['asc', 'desc', false]),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * Specify the cell type.\n * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string])\n} : void 0;\nexport default TableCell;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTableRowUtilityClass(slot) {\n return generateUtilityClass('MuiTableRow', slot);\n}\nconst tableRowClasses = generateUtilityClasses('MuiTableRow', ['root', 'selected', 'hover', 'head', 'footer']);\nexport default tableRowClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"className\", \"component\", \"hover\", \"selected\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { alpha } from '@mui/system/colorManipulator';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport styled from '../styles/styled';\nimport tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n selected,\n hover,\n head,\n footer\n } = ownerState;\n const slots = {\n root: ['root', selected && 'selected', hover && 'hover', head && 'head', footer && 'footer']\n };\n return composeClasses(slots, getTableRowUtilityClass, classes);\n};\nconst TableRowRoot = styled('tr', {\n name: 'MuiTableRow',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.head && styles.head, ownerState.footer && styles.footer];\n }\n})(({\n theme\n}) => ({\n color: 'inherit',\n display: 'table-row',\n verticalAlign: 'middle',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n [`&.${tableRowClasses.hover}:hover`]: {\n backgroundColor: (theme.vars || theme).palette.action.hover\n },\n [`&.${tableRowClasses.selected}`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),\n '&:hover': {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)\n }\n }\n}));\nconst defaultComponent = 'tr';\n/**\n * Will automatically set dynamic row height\n * based on the material table element parent (head, body, etc).\n */\nconst TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiTableRow'\n });\n const {\n className,\n component = defaultComponent,\n hover = false,\n selected = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const tablelvl2 = React.useContext(Tablelvl2Context);\n const ownerState = _extends({}, props, {\n component,\n hover,\n selected,\n head: tablelvl2 && tablelvl2.variant === 'head',\n footer: tablelvl2 && tablelvl2.variant === 'footer'\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TableRowRoot, _extends({\n as: component,\n ref: ref,\n className: clsx(classes.root, className),\n role: component === defaultComponent ? null : 'row',\n ownerState: ownerState\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableRow.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * Should be valid `
` children such as `TableCell`.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * If `true`, the table row will shade on hover.\n * @default false\n */\n hover: PropTypes.bool,\n /**\n * If `true`, the table row will have the selected shading.\n * @default false\n */\n selected: PropTypes.bool,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TableRow;","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\"\n}), 'ArrowDownward');","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTableSortLabelUtilityClass(slot) {\n return generateUtilityClass('MuiTableSortLabel', slot);\n}\nconst tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc']);\nexport default tableSortLabelClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"active\", \"children\", \"className\", \"direction\", \"hideSortIcon\", \"IconComponent\"];\nimport composeClasses from '@mui/utils/composeClasses';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport * as React from 'react';\nimport ButtonBase from '../ButtonBase';\nimport ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';\nimport styled from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport capitalize from '../utils/capitalize';\nimport tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n direction,\n active\n } = ownerState;\n const slots = {\n root: ['root', active && 'active'],\n icon: ['icon', `iconDirection${capitalize(direction)}`]\n };\n return composeClasses(slots, getTableSortLabelUtilityClass, classes);\n};\nconst TableSortLabelRoot = styled(ButtonBase, {\n name: 'MuiTableSortLabel',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.active && styles.active];\n }\n})(({\n theme\n}) => ({\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'flex-start',\n flexDirection: 'inherit',\n alignItems: 'center',\n '&:focus': {\n color: (theme.vars || theme).palette.text.secondary\n },\n '&:hover': {\n color: (theme.vars || theme).palette.text.secondary,\n [`& .${tableSortLabelClasses.icon}`]: {\n opacity: 0.5\n }\n },\n [`&.${tableSortLabelClasses.active}`]: {\n color: (theme.vars || theme).palette.text.primary,\n [`& .${tableSortLabelClasses.icon}`]: {\n opacity: 1,\n color: (theme.vars || theme).palette.text.secondary\n }\n }\n}));\nconst TableSortLabelIcon = styled('span', {\n name: 'MuiTableSortLabel',\n slot: 'Icon',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.icon, styles[`iconDirection${capitalize(ownerState.direction)}`]];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n fontSize: 18,\n marginRight: 4,\n marginLeft: 4,\n opacity: 0,\n transition: theme.transitions.create(['opacity', 'transform'], {\n duration: theme.transitions.duration.shorter\n }),\n userSelect: 'none'\n}, ownerState.direction === 'desc' && {\n transform: 'rotate(0deg)'\n}, ownerState.direction === 'asc' && {\n transform: 'rotate(180deg)'\n}));\n\n/**\n * A button based label for placing inside `TableCell` for column sorting.\n */\nconst TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiTableSortLabel'\n });\n const {\n active = false,\n children,\n className,\n direction = 'asc',\n hideSortIcon = false,\n IconComponent = ArrowDownwardIcon\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n active,\n direction,\n hideSortIcon,\n IconComponent\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsxs(TableSortLabelRoot, _extends({\n className: clsx(classes.root, className),\n component: \"span\",\n disableRipple: true,\n ownerState: ownerState,\n ref: ref\n }, other, {\n children: [children, hideSortIcon && !active ? null : /*#__PURE__*/_jsx(TableSortLabelIcon, {\n as: IconComponent,\n className: clsx(classes.icon),\n ownerState: ownerState\n })]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableSortLabel.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * If `true`, the label will have the active styling (should be true for the sorted column).\n * @default false\n */\n active: PropTypes.bool,\n /**\n * Label contents, the arrow will be appended automatically.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The current sort direction.\n * @default 'asc'\n */\n direction: PropTypes.oneOf(['asc', 'desc']),\n /**\n * Hide sort icon when active is false.\n * @default false\n */\n hideSortIcon: PropTypes.bool,\n /**\n * Sort icon to use.\n * @default ArrowDownwardIcon\n */\n IconComponent: PropTypes.elementType,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TableSortLabel;","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n visuallyHidden: theme.visuallyHidden,\n activeSortLabel: {\n color: `${theme.palette.primary.main} !important`\n }\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TableHead from '@mui/material/TableHead';\nimport TableCell from '@mui/material/TableCell';\nimport TableRow from '@mui/material/TableRow';\nimport TableSortLabel from '@mui/material/TableSortLabel';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport useStyles from './styles';\n\n/**\n * Optional component used to add sorting to table headers.\n * @param {string} id The ID of the row.\n * @param {string} label The visible label for the row.\n */\nconst SortLabel = ({ id, handleRequestSort, label, order, orderBy }) => {\n const classes = useStyles();\n\n const createSortHandler = (property) => {\n handleRequestSort(property);\n };\n\n return (\n createSortHandler(id)}\n classes={{\n root: orderBy === id ? classes.activeSortLabel : '',\n icon: orderBy === id ? classes.activeSortLabel : ''\n }}\n >\n {label}\n {orderBy === id ? (\n \n {order === 'desc'\n ? 'sorted descending'\n : 'sorted ascending'}\n \n ) : null}\n \n );\n};\n\nSortLabel.propTypes = {\n id: PropTypes.string.isRequired,\n handleRequestSort: PropTypes.func.isRequired,\n label: PropTypes.string.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired\n};\n\n/**\n * Creates the head of the table within the TableMaker component. Sets if\n * columns can be ordered, which direction they are ordered and displays\n * accessibility labels for screen readers.\n * @param {func} handleRequestSort Function which when triggered, sorts the data\n * within the TableMaker component.\n * @param {array} headCells An array of objects that set the ID of a column as\n * a keyhead and a visible label.\n * @param {string} order Is the column to be ordered up or down. asc/desc.\n * @param {string} orderBy Which column is the data sorted by.\n */\nconst TableHeader = ({ handleRequestSort, headCells, order, orderBy }) => (\n \n \n {headCells.map((headCell) => (\n \n {headCell.sort ? (\n \n ) : (\n headCell.label\n )}\n \n ))}\n \n \n);\n\nTableHeader.propTypes = {\n handleRequestSort: PropTypes.func.isRequired,\n headCells: PropTypes.instanceOf(Array).isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired\n};\n\nexport default TableHeader;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles((theme) => ({\n cell: ({ thin }) => ({\n width: thin && theme.typography.pxToRem(80),\n padding: 0,\n wordBreak: 'break-word'\n }),\n link: {\n color: 'inherit',\n display: 'block',\n textDecoration: 'none',\n padding: theme.typography.pxToRem(20)\n },\n button: {\n color: 'inherit',\n cursor: 'pointer',\n outline: 0,\n backgroundColor: 'inherit',\n fontSize: 'inherit',\n textAlign: 'inherit',\n fontWeight: 'inherit',\n fontFamily: 'inherit',\n border: 0,\n display: 'block',\n height: '100%',\n textDecoration: 'none',\n padding: theme.typography.pxToRem(20),\n width: '100%'\n }\n}));\n","import React, { memo } from 'react';\nimport Cell from '@mui/material/TableCell';\nimport PropTypes from 'prop-types';\nimport Link from '@/components/common/Link';\nimport useStyles from './styles';\n\n/**\n * Individual table row for the TableMaker component.\n *\n * Links are set on each cell, rather than on the row - as this is correct\n * semantically.\n * @param {nodes} children Items to be put into the table cell.\n * @param {bool} thin Is the row thinner than default?\n * @param {string} to URI to link the row to.\n */\nconst TableCell = memo(({ children, thin, to, onClick }) => {\n const classes = useStyles({ thin });\n return (\n \n {to && (\n \n {children}\n \n )}\n {onClick && (\n \n )}\n {!to && !onClick && children}\n \n );\n});\n\nTableCell.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.number\n ]).isRequired,\n thin: PropTypes.bool,\n to: PropTypes.string,\n onClick: PropTypes.func\n};\n\nTableCell.defaultProps = {\n thin: false,\n to: undefined,\n onClick: undefined\n};\n\nexport default TableCell;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles(() => ({\n row: ({ hover }) => ({\n transition: 'all 250ms',\n '&:hover': {\n backgroundColor: hover && '#EFEFEF'\n }\n })\n}));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TableRow from '@mui/material/TableRow';\nimport TableCell from '../TableCell';\nimport useStyles from './styles';\n\n/**\n * Here we need to make sure that if an action icon is present, the cell\n * itself is not wrapped in a link.\n * @param {string} action Item to pass back if correct row.\n * @param {string} key Which cell the loop is generating.\n * @return {string} Link or null\n */\nexport const filterRowAction = ({ action, key }) => {\n const removeList = ['tagAmount', 'tags', 'actions'];\n\n if (!removeList.includes(key)) {\n return action;\n }\n return null;\n};\n\n/**\n * Individual table row for the TableMaker component.\n * @param {array} actionCols Array of numbers that set which columns are actions.\n * @param {string} id String to be used as the item ID.\n * @param {object} row An object including all the date required for a row. It\n * must include an ID for the row.\n * @param {string} tableSlug The name of the table in a slugified form.\n */\nconst TableItem = ({ actionCols, id, row, tableSlug }) => {\n // Remove ID, PrimaryLink, PrimaryClick from cell object so it isn't displayed.\n const cleanCells = { ...row };\n const link = row.primaryLink;\n const onClick = row.primaryClick;\n\n const classes = useStyles({ hover: link || onClick });\n\n delete cleanCells.id;\n delete cleanCells.primaryLink;\n delete cleanCells.primaryClick;\n\n // Map out each cell and create a unique key reference place within the\n // table, and the table name.\n const cells = Object.keys(cleanCells).map((key, index) => {\n if (typeof cleanCells[key] === 'undefined') {\n return null;\n }\n return (\n \n {cleanCells[key]}\n \n );\n });\n\n return {cells};\n};\n\nTableItem.propTypes = {\n actionCols: PropTypes.instanceOf(Array),\n id: PropTypes.string.isRequired,\n row: PropTypes.object.isRequired,\n tableSlug: PropTypes.string.isRequired\n};\n\nTableItem.defaultProps = {\n actionCols: []\n};\n\nexport default TableItem;\n","import makeStyles from '@mui/styles/makeStyles';\n\nexport default makeStyles(() => ({\n table: {\n // minWidth: 750\n }\n}));\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport Table from '@mui/material/Table';\nimport TableContainer from '@mui/material/TableContainer';\n\nimport TableBody from '@mui/material/TableBody';\nimport { slugify } from '@/util';\nimport TableHeader from './TableHeader';\nimport TableItem from './TableItem';\nimport useStyles from './styles';\n\n/**\n * Pure component that takes a set of information and easily displays it in a\n * filterable table.\n * @param {array} actionCols Array of numbers that set which columns are actions.\n * @param {string} ariaTableName The name of the table for screen readers.\n * @param {func} handleRequestSort Function which when triggered, sorts the data\n * within the TableMaker component.\n * @param {array} headCells An array of objects that set the ID of a column as\n * a keyhead and a visible label.\n * @param {array} rowData An array of objects that holds all the data for the\n * body of the table. This can be as much as needed, but must be as key pairs.\n * Each object MUST include an unique ID for that row. This will not be shown.\n * @param {string} order Which way the column is ordered - asc or desc.\n * @param {string} orderBy Which column the data is sorted by.\n */\nconst TableMaker = memo(\n ({\n actionCols,\n ariaTableName,\n handleRequestSort,\n headCells,\n rowData,\n order,\n orderBy\n }) => {\n const classes = useStyles();\n const tableSlug = slugify(ariaTableName);\n\n return (\n \n