@jobber/components 2.86.0 → 2.86.2

package/dist/FormField-a92c7bac.js

@@ -0,0 +1,213 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var uuid = require('uuid');
+var reactHookForm = require('react-hook-form');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var classnames = require('classnames');
+var Button = require('./Button-5b2f1636.js');
+var Icon = require('./Icon-d5ad1a6d.js');
+var Text = require('./Text-9bc093e9.js');
+var InputValidation = require('./InputValidation-24d3621a.js');
+var Spinner = require('./Spinner-18d3dee6.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css = ":root {\n  /**\n   * These `--public-field` properties are used in other components such\n   * as InputGroup, therefore they must stay on :root\n   **/\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/**\n * Wrapper\n **/\n\n._2bOj_Hpd2VvA3mi9t4RcZO {\n  --field--placeholder-color: var(--color-greyBlue--light);\n  --field--placeholder-offset: 50%;\n  --field--placeholder-transform: -50%;\n\n  --field--textAlign: left;\n\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  --field--value-color: var(--color-heading);\n\n  --field--border-color: var(--color-border);\n  --field--background-color: var(--color-surface);\n\n  --field--base-elevation: var(--elevation-base);\n  --field--label-elevation: calc(var(--field--base-elevation) + 1);\n  --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n  --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  width: 100%;\n  height: var(--field--height);\n  border: var(--border-base) solid var(--field--border-color);\n  border-radius: var(--radius-base);\n  border-top-right-radius: var(--radius-base);\n  border-top-right-radius: var(--radius-base);\n  border-top-right-radius: var(--public-field--top-right-radius);\n  border-bottom-right-radius: var(--radius-base);\n  border-bottom-right-radius: var(--radius-base);\n  border-bottom-right-radius: var(--public-field--bottom-right-radius);\n  border-bottom-left-radius: var(--radius-base);\n  border-bottom-left-radius: var(--radius-base);\n  border-bottom-left-radius: var(--public-field--bottom-left-radius);\n  border-top-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n  border-top-left-radius: var(--public-field--top-left-radius);\n  color: var(--field--value-color);\n  font-size: var(--base-unit);\n  background-color: var(--field--background-color);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO * {\n  box-sizing: border-box;\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO[focus-within] {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO[focus-within] {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO:focus-within {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  box-shadow: var(--shadow-focus);\n}\n\n.IVFKQabHAwX8Kn2aNj8gM {\n  --field--label-elevation: calc(var(--field--base-elevation) - 1);\n  --field--placeholder-color: var(--color-text--secondary);\n  --field--placeholder-offset: var(--space-smallest);\n  --field--placeholder-transform: 0;\n}\n\n._2bOj_Hpd2VvA3mi9t4RcZO._1hfSn_RRn6Enf7teCHrbV8 {\n  height: auto;\n  min-height: auto;\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7[focus-within] {\n  --field--border-color: var(--color-critical);\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7[focus-within] {\n  --field--border-color: var(--color-critical);\n}\n\n._3H2M7GlXG4Qh417lRbpzS7,\n._3H2M7GlXG4Qh417lRbpzS7:focus-within {\n  --field--border-color: var(--color-critical);\n}\n\n._2xkImc45YUzsUp6bZ3Ik_4 {\n  --field--placeholder-color: var(--color-disabled);\n  --field--value-color: var(--color-disabled);\n  --field--background-color: var(--color-surface--background);\n  --field--border-color: var(--color-disabled--secondary);\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n._2RtHPlAJG3Hp2QD9Q9cfD_ {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n\n._3AHR56Sam4H_gp9JyzxRLl {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: auto;\n}\n\n._19KcCv1flBCB9mHUlTLkQL {\n  --field--textAlign: center;\n}\n\n._1wVbgkkxLyHZUFsS-xEPlc {\n  --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n._1tABQjw4-IkgUE3cbBzs7r {\n  width: calc(\n    (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n      var(--field--padding-right)\n  );\n}\n\n/**\n * Input Wrapper\n **/\n\n._1WnxEaBZY0zLsD8oKwh20b {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n      flex: 1;\n  position: relative;\n}\n\n/**\n * Input\n **/\n\n._3koQsrzZZXPVxXmmESjSG_ {\n  position: relative;\n  z-index: var(--field--base-elevation);\n  width: 100%;\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: calc(var(--base-unit) * 1.25);\n  text-align: var(--field--textAlign);\n  background: transparent;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._3koQsrzZZXPVxXmmESjSG_:focus {\n  outline: none;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n  --field--padding-bottom: var(--space-small);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8 ._3koQsrzZZXPVxXmmESjSG_ {\n  resize: vertical;\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: var(--space-small);\n  --field--padding-bottom: var(--space-small);\n}\n\n.Ntcl388Qhhu4uLJc2d1Ll ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: 0;\n  --field--padding-bottom: 0;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM.Ntcl388Qhhu4uLJc2d1Ll:not(._2N7Ipv_CbNRzrdEGCrptrV) ._3koQsrzZZXPVxXmmESjSG_ {\n  --field--padding-top: var(--space-small);\n}\n\n/**\n * Label\n **/\n\n.ktPFw5_r1v4MB-Ts5rPTG {\n  position: absolute;\n  top: var(--field--placeholder-offset);\n  z-index: var(--field--label-elevation);\n  width: 100%;\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  overflow: hidden;\n  color: var(--field--placeholder-color);\n  line-height: calc(var(--base-unit) * 1.25);\n  text-align: var(--field--textAlign);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-transform: translateY(var(--field--placeholder-transform));\n          transform: translateY(var(--field--placeholder-transform));\n  transition: all var(--timing-quick);\n}\n\n.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  font-size: calc(var(--base-unit) * 0.875);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8 .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--field--padding-top);\n  -webkit-transform: translateY(0);\n          transform: translateY(0);\n}\n\n._1hfSn_RRn6Enf7teCHrbV8.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--space-smallest);\n}\n\n._2N7Ipv_CbNRzrdEGCrptrV.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  display: none;\n}\n\n._2RtHPlAJG3Hp2QD9Q9cfD_.IVFKQabHAwX8Kn2aNj8gM .ktPFw5_r1v4MB-Ts5rPTG {\n  top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n._1yJbSG5N0hfPjPkrih4Q99 {\n  position: absolute;\n  top: 50%;\n  right: var(--space-base);\n  z-index: var(--field--postfix-elevation);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n._1EBMzQ2qM74AhLWsJH_VD7 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n  padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n  ._1EBMzQ2qM74AhLWsJH_VD7 {\n    /*\n     * disabling property-no-unknown here as this is a real property\n     * that stylelint just doesn't know about. We may be able to remove\n     * this when we update our stylelint to not care about IE11.\n     */\n    /* stylelint-disable-next-line property-no-unknown */\n    aspect-ratio: 1/1;\n    padding: 0;\n  }\n}\n\n._1EBMzQ2qM74AhLWsJH_VD7._2k-tb4HuwDpSggx3JEm4Rp {\n  margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n._1EBMzQ2qM74AhLWsJH_VD7._1Pm2Qo4Aw45IfKYq1qX4CW {\n  position: relative;\n  z-index: var(--field--postfix-action-elevation);\n}\n\n._2PE8Igv1VLxZ4mpQc6iiR4 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n}\n\n._2PE8Igv1VLxZ4mpQc6iiR4._2k-tb4HuwDpSggx3JEm4Rp {\n  margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n  padding: 0 var(--field--padding-left) 0 0;\n}\n\n.IVFKQabHAwX8Kn2aNj8gM:not(._2N7Ipv_CbNRzrdEGCrptrV) ._2PE8Igv1VLxZ4mpQc6iiR4 {\n  padding-top: calc(var(--field--padding-top) - 2px);\n}\n\n._1iN0xB6nTG687YOOopowf {\n  margin-top: var(--space-smaller);\n}\n";
+var styles = {"wrapper":"_2bOj_Hpd2VvA3mi9t4RcZO","miniLabel":"IVFKQabHAwX8Kn2aNj8gM","textarea":"_1hfSn_RRn6Enf7teCHrbV8","invalid":"_3H2M7GlXG4Qh417lRbpzS7","disabled":"_2xkImc45YUzsUp6bZ3Ik_4","small":"_2N7Ipv_CbNRzrdEGCrptrV","large":"_2RtHPlAJG3Hp2QD9Q9cfD_","inline-left":"_3AHR56Sam4H_gp9JyzxRLl","inline-right":"_3AHR56Sam4H_gp9JyzxRLl","inline":"_3AHR56Sam4H_gp9JyzxRLl","center":"_19KcCv1flBCB9mHUlTLkQL","right":"_1wVbgkkxLyHZUFsS-xEPlc","maxLength":"_1tABQjw4-IkgUE3cbBzs7r","inputWrapper":"_1WnxEaBZY0zLsD8oKwh20b","input":"_3koQsrzZZXPVxXmmESjSG_","select":"Ntcl388Qhhu4uLJc2d1Ll","label":"ktPFw5_r1v4MB-Ts5rPTG","postfix":"_1yJbSG5N0hfPjPkrih4Q99","affixIcon":"_1EBMzQ2qM74AhLWsJH_VD7","suffix":"_2k-tb4HuwDpSggx3JEm4Rp","hasAction":"_1Pm2Qo4Aw45IfKYq1qX4CW","affixLabel":"_2PE8Igv1VLxZ4mpQc6iiR4","description":"_1iN0xB6nTG687YOOopowf"};
+styleInject_es.styleInject(css);
+
+function AffixLabel(_a) {
+    var _b;
+    var label = _a.label, _c = _a.variation, variation = _c === void 0 ? "prefix" : _c, labelRef = _a.labelRef;
+    var affixLabelClass = classnames__default["default"](styles.affixLabel, (_b = {},
+        _b[styles.suffix] = variation === "suffix",
+        _b));
+    return (React__default["default"].createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+}
+function AffixIcon(_a) {
+    var _b;
+    var icon = _a.icon, onClick = _a.onClick, ariaLabel = _a.ariaLabel, _c = _a.variation, variation = _c === void 0 ? "prefix" : _c, size = _a.size;
+    var affixIconClass = classnames__default["default"](styles.affixIcon, (_b = {},
+        _b[styles.suffix] = variation === "suffix",
+        _b[styles.hasAction] = onClick,
+        _b));
+    var iconSize = size === "small" ? "small" : "base";
+    if (!icon)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement("div", { className: affixIconClass }, onClick ? (React__default["default"].createElement(Button.Button
+    /**
+     * We can cast the ariaLabel here as a `Suffix`
+     * requires an ariaLabel if there is an action
+     */
+    , { 
+        /**
+         * We can cast the ariaLabel here as a `Suffix`
+         * requires an ariaLabel if there is an action
+         */
+        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React__default["default"].createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+}
+
+function FormFieldDescription(_a) {
+    var id = _a.id, description = _a.description;
+    return (React__default["default"].createElement("div", { id: id, className: styles.description },
+        React__default["default"].createElement(Text.Text, { variation: "subdued" }, description)));
+}
+
+function FormFieldWrapper(_a) {
+    var _b, _c;
+    var align = _a.align, description = _a.description, descriptionIdentifier = _a.descriptionIdentifier, placeholder = _a.placeholder, value = _a.value, children = _a.children, invalid = _a.invalid, error = _a.error, size = _a.size, prefix = _a.prefix, suffix = _a.suffix, max = _a.max, maxLength = _a.maxLength, type = _a.type, disabled = _a.disabled, inline = _a.inline, identifier = _a.identifier;
+    var wrapperClasses = classnames__default["default"](styles.wrapper, size && styles[size], align && styles[align], (_b = {},
+        _b[styles.miniLabel] = (placeholder && value !== "") ||
+            (placeholder && type === "select") ||
+            (placeholder && type === "time"),
+        _b[styles.textarea] = type === "textarea",
+        _b[styles.invalid] = invalid !== null && invalid !== void 0 ? invalid : error,
+        _b[styles.disabled] = disabled,
+        _b[styles.inline] = inline,
+        _b[styles.maxLength] = maxLength,
+        _b[styles.select] = type === "select",
+        _b));
+    var wrapperInlineStyle = (_c = {},
+        _c["--formField-maxLength"] = maxLength || max,
+        _c);
+    var prefixRef = React.useRef();
+    var suffixRef = React.useRef();
+    var _d = tslib_es6.__read(React.useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    }), 2), labelStyle = _d[0], setLabelStyle = _d[1];
+    React.useEffect(function () {
+        setLabelStyle(getAffixPaddding);
+    }, [value]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: wrapperClasses, style: wrapperInlineStyle },
+            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default["default"].createElement(AffixIcon, tslib_es6.__assign({}, prefix, { size: size })),
+            React__default["default"].createElement("div", { className: styles.inputWrapper },
+                React__default["default"].createElement("label", { className: styles.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) ? labelStyle : undefined }, placeholder),
+                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default["default"].createElement(AffixLabel, tslib_es6.__assign({}, prefix, { labelRef: prefixRef })),
+                children,
+                (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default["default"].createElement(AffixLabel, tslib_es6.__assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
+            (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default["default"].createElement(AffixIcon, tslib_es6.__assign({}, suffix, { variation: "suffix", size: size })))),
+        description && !inline && (React__default["default"].createElement(FormFieldDescription, { id: descriptionIdentifier, description: description })),
+        error && !inline && React__default["default"].createElement(InputValidation.InputValidation, { message: error })));
+    function getAffixPaddding() {
+        var hasValue = value !== "";
+        var newPadding = {
+            paddingLeft: undefined,
+            paddingRight: undefined,
+        };
+        if ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
+            var offsetWidth = (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current).offsetWidth;
+            newPadding.paddingLeft = offset(offsetWidth);
+        }
+        if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
+            var offsetWidth = (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current).offsetWidth;
+            newPadding.paddingRight = offset(offsetWidth);
+        }
+        function offset(width) {
+            return "calc(" + width + "px + var(--space-smallest)";
+        }
+        return newPadding;
+    }
+}
+
+function FormFieldPostFix(_a) {
+    var variation = _a.variation;
+    return (React__default["default"].createElement("span", { className: styles.postfix }, variation === "select" ? (React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })) : (React__default["default"].createElement(Spinner.Spinner, { size: "small" }))));
+}
+
+function FormField(props) {
+    var _a;
+    var actionsRef = props.actionsRef, _b = props.autocomplete, autocomplete = _b === void 0 ? true : _b, children = props.children, defaultValue = props.defaultValue, description = props.description, disabled = props.disabled, inputRef = props.inputRef, inline = props.inline, keyboard = props.keyboard, max = props.max, maxLength = props.maxLength, min = props.min, name = props.name, readonly = props.readonly, rows = props.rows, loading = props.loading, _c = props.type, type = _c === void 0 ? "text" : _c, validations = props.validations, value = props.value, onChange = props.onChange, onEnter = props.onEnter, onFocus = props.onFocus, onBlur = props.onBlur, onValidation = props.onValidation;
+    var _d = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : reactHookForm.useForm({ mode: "onTouched" }), control = _d.control, errors = _d.errors, setValue = _d.setValue, watch = _d.watch;
+    var _e = tslib_es6.__read(React.useState(uuid.v1()), 1), identifier = _e[0];
+    var _f = tslib_es6.__read(React.useState("descriptionUUID--" + uuid.v1()), 1), descriptionIdentifier = _f[0];
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    var _g = tslib_es6.__read(React.useState(name ? name : "generatedName--" + identifier), 1), controlledName = _g[0];
+    React.useEffect(function () {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    React.useImperativeHandle(actionsRef, function () { return ({
+        setValue: function (newValue) {
+            setValue(controlledName, newValue);
+        },
+    }); });
+    var error = errors[controlledName] && errors[controlledName].message;
+    React.useEffect(function () { return handleValidation(); }, [error]);
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: tslib_es6.__assign({}, validations), defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "", render: function (_a) {
+            var onControllerChange = _a.onChange, onControllerBlur = _a.onBlur, controllerName = _a.name, rest = tslib_es6.__rest(_a, ["onChange", "onBlur", "name"]);
+            var fieldProps = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, rest), { id: identifier, className: styles.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange }), (description &&
+                !inline && { "aria-describedby": descriptionIdentifier }));
+            var textFieldProps = tslib_es6.__assign(tslib_es6.__assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
+            return (React__default["default"].createElement(FormFieldWrapper, tslib_es6.__assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier }), renderField()));
+            function renderField() {
+                switch (type) {
+                    case "select":
+                        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement("select", tslib_es6.__assign({}, fieldProps), children),
+                            React__default["default"].createElement(FormFieldPostFix, { variation: "select" })));
+                    case "textarea":
+                        return (React__default["default"].createElement("textarea", tslib_es6.__assign({}, textFieldProps, { rows: rows, ref: inputRef })));
+                    default:
+                        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement("input", tslib_es6.__assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef })),
+                            loading && React__default["default"].createElement(FormFieldPostFix, { variation: "spinner" })));
+                }
+            }
+            function handleChange(event) {
+                var newValue;
+                newValue = event.currentTarget.value;
+                if (type === "number" && newValue.length > 0) {
+                    newValue = parseFloat(newValue);
+                }
+                onChange && onChange(newValue, event);
+                onControllerChange(event);
+            }
+            function handleKeyDown(event) {
+                if (!onEnter)
+                    return;
+                if (event.key !== "Enter")
+                    return;
+                if (event.shiftKey || event.ctrlKey)
+                    return;
+                event.preventDefault();
+                onEnter && onEnter(event);
+            }
+            function handleFocus(event) {
+                var target = event.currentTarget;
+                setTimeout(function () { return readonly && target.select(); });
+                onFocus && onFocus();
+            }
+            function handleBlur() {
+                onBlur && onBlur();
+                onControllerBlur();
+            }
+        } }));
+    function handleValidation() {
+        onValidation && onValidation(error);
+    }
+}
+function setAutocomplete(autocompleteSetting) {
+    if (autocompleteSetting === true) {
+        return undefined;
+    }
+    else if (autocompleteSetting === false) {
+        return "autocomplete-off";
+    }
+    return autocompleteSetting;
+}
+
+exports.FormField = FormField;

package/dist/FormatDate/FormatDate.d.ts

@@ -1,12 +1,12 @@
-import { CivilDate } from "@std-proposal/temporal";
-interface FormatDateProps {
-    /**
-     * Date to be formatted.
-     *
-     * A `string` should be an ISO 8601 format date string.
-     */
-    readonly date: CivilDate | Date | string;
-}
-export declare function FormatDate({ date: inputDate }: FormatDateProps): JSX.Element;
-export declare function strFormatDate(date: Date): string;
-export {};
+import { CivilDate } from "@std-proposal/temporal";
+interface FormatDateProps {
+    /**
+     * Date to be formatted.
+     *
+     * A `string` should be an ISO 8601 format date string.
+     */
+    readonly date: CivilDate | Date | string;
+}
+export declare function FormatDate({ date: inputDate }: FormatDateProps): JSX.Element;
+export declare function strFormatDate(date: Date): string;
+export {};

package/dist/FormatDate/index.d.ts

@@ -1 +1 @@
-export { strFormatDate, FormatDate } from "./FormatDate";
+export { strFormatDate, FormatDate } from "./FormatDate";

package/dist/FormatDate/index.js

@@ -2,31 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
 
-function FormatDate(_a) {
-    var inputDate = _a.date;
-    var dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else if (typeof inputDate === "string") {
-        dateObject = new Date(inputDate);
-    }
-    else {
-        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
-    }
-    return React__default.createElement(React__default.Fragment, null, strFormatDate(dateObject));
-}
-function strFormatDate(date) {
-    return date.toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-    });
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function FormatDate(_a) {
+    var inputDate = _a.date;
+    var dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject));
+}
+function strFormatDate(date) {
+    return date.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
 }
 
 exports.FormatDate = FormatDate;

package/dist/FormatEmail/FormatEmail.d.ts

@@ -1,8 +1,8 @@
-interface FormatEmailProps {
-    /**
-     * Email address to format
-     */
-    readonly email: string;
-}
-export declare function FormatEmail({ email }: FormatEmailProps): JSX.Element;
-export {};
+interface FormatEmailProps {
+    /**
+     * Email address to format
+     */
+    readonly email: string;
+}
+export declare function FormatEmail({ email }: FormatEmailProps): JSX.Element;
+export {};

package/dist/FormatEmail/index.d.ts

@@ -1 +1 @@
-export { FormatEmail } from "./FormatEmail";
+export { FormatEmail } from "./FormatEmail";

package/dist/FormatEmail/index.js

@@ -2,21 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
+var classnames = require('classnames');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css = "._2WQ6E_TFQTKhlZCeQv65zh {\n  font-style: normal;\n}\n";
 var styles = {"email":"_2WQ6E_TFQTKhlZCeQv65zh"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-function FormatEmail(_a) {
-    var email = _a.email;
-    var className = classnames(styles.email);
-    return React__default.createElement("address", { className: className }, email);
+function FormatEmail(_a) {
+    var email = _a.email;
+    var className = classnames__default["default"](styles.email);
+    return React__default["default"].createElement("address", { className: className }, email);
 }
 
 exports.FormatEmail = FormatEmail;

package/dist/FormatFile/FormatFile.d.ts

@@ -1,30 +1,30 @@
-import React from "react";
-import { FileUpload } from "../InputFile";
-interface FormatFileProps {
-    /**
-     * File upload details object. (See FileUpload type.)
-     */
-    readonly file: FileUpload;
-    /**
-     * To display as either a file row or thumbnail
-     *
-     * @default "expanded"
-     */
-    readonly display?: "expanded" | "compact";
-    /**
-     * The base dimensions of the thumbnail
-     *
-     * @default "base"
-     */
-    readonly displaySize?: "base" | "large";
-    /**
-     * Function to execute when format file is clicked
-     */
-    onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
-    /**
-     * onDelete callback - this function will be called when the delete action is triggered
-     */
-    onDelete?(): void;
-}
-export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
-export {};
+import React from "react";
+import { FileUpload } from "../InputFile";
+interface FormatFileProps {
+    /**
+     * File upload details object. (See FileUpload type.)
+     */
+    readonly file: FileUpload;
+    /**
+     * To display as either a file row or thumbnail
+     *
+     * @default "expanded"
+     */
+    readonly display?: "expanded" | "compact";
+    /**
+     * The base dimensions of the thumbnail
+     *
+     * @default "base"
+     */
+    readonly displaySize?: "base" | "large";
+    /**
+     * Function to execute when format file is clicked
+     */
+    onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
+    /**
+     * onDelete callback - this function will be called when the delete action is triggered
+     */
+    onDelete?(): void;
+}
+export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
+export {};

package/dist/FormatFile/FormatFileDeleteButton.d.ts

@@ -1,6 +1,6 @@
-interface DeleteButtonProps {
-    size?: "base" | "large";
-    onDelete?: () => void;
-}
-export declare function FormatFileDeleteButton({ size, onDelete }: DeleteButtonProps): JSX.Element;
-export {};
+interface DeleteButtonProps {
+    size?: "base" | "large";
+    onDelete?: () => void;
+}
+export declare function FormatFileDeleteButton({ size, onDelete }: DeleteButtonProps): JSX.Element;
+export {};

package/dist/FormatFile/InternalThumbnail.d.ts

@@ -1,9 +1,9 @@
-import { FileUpload } from "../InputFile";
-interface InternalThumbnailProps {
-    readonly name?: string;
-    readonly hideName?: boolean;
-    readonly size: "base" | "large";
-    readonly file: FileUpload;
-}
-export declare function InternalThumbnail({ name, hideName, size, file, }: InternalThumbnailProps): JSX.Element;
-export {};
+import { FileUpload } from "../InputFile";
+interface InternalThumbnailProps {
+    readonly name?: string;
+    readonly hideName?: boolean;
+    readonly size: "base" | "large";
+    readonly file: FileUpload;
+}
+export declare function InternalThumbnail({ name, hideName, size, file, }: InternalThumbnailProps): JSX.Element;
+export {};

package/dist/FormatFile/index.d.ts

@@ -1 +1 @@
-export { FormatFile } from "./FormatFile";
+export { FormatFile } from "./FormatFile";

package/dist/FormatFile/index.js

@@ -2,122 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-require('../Heading/index.js');
+var FormatFile = require('../FormatFile-5391d4cf.js');
+require('react');
+require('classnames');
+require('filesize');
+require('../style-inject.es-dcee06b6.js');
+require('../tslib.es6-5b50eb8e.js');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
-require('framer-motion');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-7e542a72.js');
+require('../ConfirmationModal-b7ef110f.js');
 require('@jobber/hooks');
-require('../ButtonDismiss/index.js');
+require('../Modal-aaaaf2df.js');
 require('react-dom');
-require('../Modal/index.js');
-require('../Content/index.js');
+require('framer-motion');
+require('../ButtonDismiss-4cde8f7c.js');
+require('../Content-18de5fbb.js');
+require('../Markdown-69986c49.js');
 require('react-markdown');
-require('../Emphasis/index.js');
-require('../Markdown/index.js');
-var index$7 = require('../ConfirmationModal/index.js');
-var getHumanReadableFileSize = _interopDefault(require('filesize'));
-var index$8 = require('../ProgressBar/index.js');
-
-var css = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  --file-card--background-color: var(--color-white);\n  --file-card--header-background-color: var(--color-greyBlue--lighter);\n  --file-card--content-background-color: var(--color-white);\n  --file-card--border-color: var(--color-border);\n  --file-card--accent-color: var(--color-grey);\n  --file-card--base-padding: var(--space-small);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH {\n  display: grid;\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding-right: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--file-card--border-color);\n  border-radius: var(--radius-base);\n  background-color: var(--color-white);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH,\n._9dGq9pkZYNxwlhRwaVaWH {\n  position: relative;\n}\n\n._26euKXXdGUFmchTL7YqSO7 {\n  display: grid;\n  grid-template-columns: -webkit-max-content auto;\n  grid-template-columns: max-content auto;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  text-align: left;\n  background-color: var(--color-transparent);\n}\n\n._2OuJNJWNnBmTTzGAUfSaM7 {\n  width: 168px;\n  height: 168px;\n}\n\n._2GSQaEqbKQHd7Tf2XqJ5i1 {\n  width: 56px;\n  height: 56px;\n}\n\n._1JreUit2_KSn_-iQ3vBhUn {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  padding: 0;\n  overflow: hidden;\n  background-color: var(--color-surface--background);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7 {\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._26euKXXdGUFmchTL7YqSO7:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._1JreUit2_KSn_-iQ3vBhUn {\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7:focus::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-shadow: var(--shadow-focus);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._1JreUit2_KSn_-iQ3vBhUn {\n  border-right: none;\n  border-bottom-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n._3_8YVeas_gdmexLUKZ3mpR {\n  cursor: pointer;\n}\n\n._15spVvfm0lqLuhAwuIuWrm ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n  opacity: 0;\n  transition: all var(--timing-base);\n}\n\n._15spVvfm0lqLuhAwuIuWrm:hover ._1JreUit2_KSn_-iQ3vBhUn::after,\n._15spVvfm0lqLuhAwuIuWrm:focus ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  opacity: 1;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-width: 0;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._2pUMiqf0oiCus7WkVuTt57 {\n  position: absolute;\n  top: var(--space-smaller);\n  right: var(--space-smaller);\n}\n\n._2g5hRVudATuiROg0LStgTs ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: hidden;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57:focus-within,\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n";
-var styles = {"expanded":"_9dGq9pkZYNxwlhRwaVaWH","compact":"_24PiUzD_Hoe3p6hD_OxjbH","wrapper":"_26euKXXdGUFmchTL7YqSO7","large":"_2OuJNJWNnBmTTzGAUfSaM7","base":"_2GSQaEqbKQHd7Tf2XqJ5i1","thumbnail":"_1JreUit2_KSn_-iQ3vBhUn","clickable":"_3_8YVeas_gdmexLUKZ3mpR","hoverable":"_15spVvfm0lqLuhAwuIuWrm","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","deleteButton":"_2pUMiqf0oiCus7WkVuTt57","deleteable":"_2g5hRVudATuiROg0LStgTs"};
-__chunk_2.styleInject(css);
-
-function FormatFileDeleteButton(_a) {
-    var size = _a.size, onDelete = _a.onDelete;
-    var buttonSize = size === "base" ? "small" : "base";
-    var _b = __chunk_1.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(index$5.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React__default.createElement(index$7.ConfirmationModal, { title: "Confirm Deletion", message: "Are you sure you want to delete this file?", confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(); }, onRequestClose: function () { return setDeleteConfirmationOpen(false); } })));
-}
-
-var css$1 = "._15Z4SPrC7I2WxqMysdwQxX {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.VMZPGfgfpCH2eH5Mv9zgO {\n  display: none;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe {\n  display: -ms-flexbox;\n  display: flex;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  border: var(--border-base);\n  border-radius: var(--radius-base);\n  background: linear-gradient(\n    270deg,\n    rgb(244, 244, 244) 38.46%,\n    rgba(244, 244, 244, 0) 100%\n  );\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._3NVQrEqP9hGjbdbpOXGHQd::after {\n  width: var(--space-base);\n  height: var(--space-base);\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._2AI9R5gNW3y8vFV4ev1tge::after {\n  width: var(--space-large);\n  height: var(--space-large);\n}\n\n._3VjXRD4ob2Fdq9YxmNRy2S {\n  position: absolute;\n}\n\n._3NVQrEqP9hGjbdbpOXGHQd ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-smaller);\n  left: var(--space-smaller);\n  font-size: calc(var(--base-unit) * 0.625);\n}\n\n._2AI9R5gNW3y8vFV4ev1tge ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-small);\n  left: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
-var styles$1 = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
-__chunk_2.styleInject(css$1);
+require('../Text-9bc093e9.js');
+require('../Emphasis-fd845639.js');
+require('../Heading-56750113.js');
+require('../ProgressBar-e9a49129.js');
 
-function InternalThumbnail(_a) {
-    var _b;
-    var name = _a.name, _c = _a.hideName, hideName = _c === void 0 ? false : _c, size = _a.size, file = _a.file;
-    var _d = __chunk_1.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
-    var _e = __chunk_1.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
-    var iconName = getIconNameFromType(file.type);
-    if (!imageSource && file.type.startsWith("image/")) {
-        file.src().then(function (src) { return setImageSource(src); });
-    }
-    var image = (React__default.createElement("img", { src: imageSource, onLoad: function () {
-            setImageLoaded(true);
-        }, className: classnames(styles$1.image, (_b = {}, _b[styles$1.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
-    if (imageLoaded) {
-        return image;
-    }
-    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size]) },
-        imageSource && image,
-        React__default.createElement(index$2.Icon, { name: iconName, color: "greyBlue" }),
-        React__default.createElement("div", { className: classnames(styles$1.fileName) }, hideName && (React__default.createElement(index.Typography, { element: "span", textColor: "text" }, name)))));
-}
-function getIconNameFromType(mimeType) {
-    if (mimeType.startsWith("image/"))
-        return "camera";
-    if (mimeType.startsWith("video/"))
-        return "video";
-    switch (mimeType) {
-        case "application/pdf":
-            return "pdf";
-        case "application/vnd.ms-excel":
-            return "excel";
-        default:
-            return "file";
-    }
-}
 
-function FormatFile(_a) {
-    var _b, _c;
-    var file = _a.file, _d = _a.display, display = _d === void 0 ? "expanded" : _d, _e = _a.displaySize, displaySize = _e === void 0 ? "base" : _e, onDelete = _a.onDelete, onClick = _a.onClick;
-    var isComplete = file.progress >= 1;
-    var fileSize = getHumanReadableFileSize(file.size);
-    var wrapperClassNames = classnames(styles[display], (_b = {},
-        _b[styles[displaySize]] = display === "compact",
-        _b));
-    var DetailsContainer = isComplete && onClick ? "button" : "div";
-    var detailsClassNames = classnames(styles.wrapper, (_c = {},
-        _c[styles[displaySize]] = display === "compact",
-        _c[styles.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
-        _c[styles.clickable] = onClick,
-        _c[styles.deleteable] = display === "compact",
-        _c));
-    var thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
-    return (React__default.createElement("div", { className: wrapperClassNames },
-        React__default.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
-            React__default.createElement("div", { className: thumbnailContainerClassNames },
-                React__default.createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
-                !isComplete && (React__default.createElement("div", { className: styles.progress },
-                    React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-            display === "expanded" && (React__default.createElement("div", { className: styles.contentBlock },
-                React__default.createElement(index$1.Text, { size: "large" }, file.name),
-                React__default.createElement(index$1.Text, { size: "small" }, fileSize)))),
-        isComplete && onDelete && (React__default.createElement("div", { className: styles.deleteButton },
-            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
-}
-function isHoverable(_a) {
-    var display = _a.display, isComplete = _a.isComplete, onClick = _a.onClick, onDelete = _a.onDelete;
-    if (display === "compact") {
-        return Boolean(isComplete && (onClick || onDelete));
-    }
-    else if (display === "expanded") {
-        return Boolean(isComplete && onClick);
-    }
-    return false;
-}
 
-exports.FormatFile = FormatFile;
+exports.FormatFile = FormatFile.FormatFile;