@jobber/components 4.0.2 → 4.1.1

package/dist/FormField/FormFieldTypes.d.ts

@@ -2,8 +2,8 @@ import { ChangeEvent, ReactNode, RefObject } from "react";
 import { RegisterOptions } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { IconNames } from "../Icon";
-export declare type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "email";
-export declare type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
+export type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "email";
+export type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
 export interface FieldActionsRef {
     setValue(value: string | number): void;
 }

package/dist/FormField/index.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-ac310b6f.js');
-require('../tslib.es6-5b50eb8e.js');
+var FormField = require('../FormField-79a0a375.js');
+require('../tslib.es6-efe27175.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 
 

package/dist/{FormField-ac310b6f.js → FormField-79a0a375.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var tslib_es6 = require('./tslib.es6-efe27175.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-cd30df0f.js');
-var Icon = require('./Icon-d5ad1a6d.js');
-var Text = require('./Text-e012fb46.js');
-var InputValidation = require('./InputValidation-06a8a7ba.js');
-var Spinner = require('./Spinner-e4e9c8eb.js');
+var Button = require('./Button-16e043ec.js');
+var Icon = require('./Icon-405a216c.js');
+var Text = require('./Text-7ce00adb.js');
+var InputValidation = require('./InputValidation-97dd0dcf.js');
+var Spinner = require('./Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,22 +21,18 @@ var css = ":root {\n  /**\n   * These `--public-field` properties are used in ot
 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));
+function AffixLabel({ label, variation = "prefix", labelRef, }) {
+    const affixLabelClass = classnames__default["default"](styles.affixLabel, {
+        [styles.suffix]: variation === "suffix",
+    });
     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";
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+    const affixIconClass = classnames__default["default"](styles.affixIcon, {
+        [styles.suffix]: variation === "suffix",
+        [styles.hasAction]: onClick,
+    });
+    const 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
@@ -52,123 +48,119 @@ function AffixIcon(_a) {
         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;
+function FormFieldDescription({ id, description, }) {
     return (React__default["default"].createElement("div", { id: id, className: styles.description },
         React__default["default"].createElement(Text.Text, { size: "small", 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 !== "") ||
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, }) {
+    const wrapperClasses = classnames__default["default"](styles.wrapper, size && styles[size], align && styles[align], {
+        [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({
+        [styles.textarea]: type === "textarea",
+        [styles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [styles.disabled]: disabled,
+        [styles.inline]: inline,
+        [styles.maxLength]: maxLength,
+        [styles.select]: type === "select",
+    });
+    const wrapperInlineStyle = {
+        ["--formField-maxLength"]: maxLength || max,
+    };
+    const prefixRef = React.useRef();
+    const suffixRef = React.useRef();
+    const [labelStyle, setLabelStyle] = React.useState({
         paddingLeft: undefined,
         paddingRight: undefined,
-    }), 2), labelStyle = _d[0], setLabelStyle = _d[1];
-    React.useEffect(function () {
+    });
+    React.useEffect(() => {
         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 })),
+            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React__default["default"].createElement(AffixIcon, Object.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 })),
+                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && React__default["default"].createElement(AffixLabel, Object.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 })))),
+                (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default["default"].createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
+            (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default["default"].createElement(AffixIcon, Object.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 = {
+        const hasValue = value !== "";
+        const newPadding = {
             paddingLeft: undefined,
             paddingRight: undefined,
         };
         if ((prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) && !hasValue) {
-            var offsetWidth = prefixRef.current.offsetWidth;
+            const { offsetWidth } = prefixRef.current;
             newPadding.paddingLeft = offset(offsetWidth);
         }
         if ((suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) && !hasValue) {
-            var offsetWidth = suffixRef.current.offsetWidth;
+            const { offsetWidth } = suffixRef.current;
             newPadding.paddingRight = offset(offsetWidth);
         }
         function offset(width) {
-            return "calc(" + width + "px + var(--space-smallest)";
+            return `calc(${width}px + var(--space-smallest)`;
         }
         return newPadding;
     }
 }
 
-function FormFieldPostFix(_a) {
-    var variation = _a.variation;
+function FormFieldPostFix({ 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
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, } = props;
+    const { control, errors, setValue, watch } = 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];
+        : reactHookForm.useForm({ mode: "onTouched" });
+    const [identifier] = React.useState(uuid.v1());
+    const [descriptionIdentifier] = React.useState(`descriptionUUID--${uuid.v1()}`);
     /**
      * 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 () {
+    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
         if (value != undefined) {
             setValue(controlledName, value);
         }
     }, [value, watch(controlledName)]);
-    React.useImperativeHandle(actionsRef, function () { return ({
-        setValue: function (newValue) {
+    React.useImperativeHandle(actionsRef, () => ({
+        setValue: 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 &&
+    }));
+    const error = errors[controlledName] && errors[controlledName].message;
+    React.useEffect(() => handleValidation(), [error]);
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "", render: (_a) => {
+            var { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _a, rest = tslib_es6.__rest(_a, ["onChange", "onBlur", "name"]);
+            const fieldProps = Object.assign(Object.assign(Object.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()));
+            const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
+            return (React__default["default"].createElement(FormFieldWrapper, Object.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("select", Object.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 })));
+                        return (React__default["default"].createElement("textarea", Object.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 })),
+                            React__default["default"].createElement("input", Object.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;
+                let newValue;
                 newValue = event.currentTarget.value;
                 if (type === "number" && newValue.length > 0) {
                     newValue = parseFloat(newValue);
@@ -187,8 +179,8 @@ function FormField(props) {
                 onEnter && onEnter(event);
             }
             function handleFocus(event) {
-                var target = event.currentTarget;
-                setTimeout(function () { return readonly && target.select(); });
+                const target = event.currentTarget;
+                setTimeout(() => readonly && target.select());
                 onFocus && onFocus();
             }
             function handleBlur() {

package/dist/FormatDate/index.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatDate(_a) {
-    var inputDate = _a.date;
-    var dateObject;
+function FormatDate({ date: inputDate }) {
+    let dateObject;
     if (inputDate instanceof Date) {
         dateObject = inputDate;
     }

package/dist/FormatEmail/index.js

@@ -15,9 +15,8 @@ var css = "._2WQ6E_TFQTKhlZCeQv65zh {\n  font-style: normal;\n}\n";
 var styles = {"email":"_2WQ6E_TFQTKhlZCeQv65zh"};
 styleInject_es.styleInject(css);
 
-function FormatEmail(_a) {
-    var email = _a.email;
-    var className = classnames__default["default"](styles.email);
+function FormatEmail({ email }) {
+    const className = classnames__default["default"](styles.email);
     return React__default["default"].createElement("address", { className: className }, email);
 }
 

package/dist/FormatFile/index.js

@@ -2,30 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-18e8a54a.js');
+var FormatFile = require('../FormatFile-3512f838.js');
 require('react');
 require('classnames');
 require('filesize');
 require('../style-inject.es-dcee06b6.js');
-require('../tslib.es6-5b50eb8e.js');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../ConfirmationModal-e95f46d7.js');
+require('../Typography-9262511f.js');
+require('../ConfirmationModal-6a7beee2.js');
 require('@jobber/hooks');
-require('../Modal-cc3bd7bf.js');
+require('../Modal-757e83fd.js');
 require('react-dom');
 require('framer-motion');
-require('../Heading-a9a66964.js');
-require('../ButtonDismiss-a9590195.js');
-require('../Content-18de5fbb.js');
-require('../Markdown-b53e0308.js');
+require('../Heading-7b203f7f.js');
+require('../ButtonDismiss-3fb1eaf9.js');
+require('../Content-05df8f7f.js');
+require('../Markdown-be2dcd0c.js');
 require('react-markdown');
-require('../Text-e012fb46.js');
-require('../Emphasis-75a3f411.js');
-require('../ProgressBar-e9a49129.js');
+require('../Text-7ce00adb.js');
+require('../Emphasis-23dc2a0a.js');
+require('../ProgressBar-f028b159.js');
 
 
 

package/dist/{FormatFile-18e8a54a.js → FormatFile-3512f838.js}

@@ -4,13 +4,12 @@ var React = require('react');
 var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var Button = require('./Button-cd30df0f.js');
-var ConfirmationModal = require('./ConfirmationModal-e95f46d7.js');
-var Icon = require('./Icon-d5ad1a6d.js');
-var Typography = require('./Typography-fbe0ed6e.js');
-var Text = require('./Text-e012fb46.js');
-var ProgressBar = require('./ProgressBar-e9a49129.js');
+var Button = require('./Button-16e043ec.js');
+var ConfirmationModal = require('./ConfirmationModal-6a7beee2.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-9262511f.js');
+var Text = require('./Text-7ce00adb.js');
+var ProgressBar = require('./ProgressBar-f028b159.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,31 +21,28 @@ var css$1 = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  -
 var styles$1 = {"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"};
 styleInject_es.styleInject(css$1);
 
-function FormatFileDeleteButton(_a) {
-    var size = _a.size, onDelete = _a.onDelete;
-    var buttonSize = size === "base" ? "small" : "base";
-    var _b = tslib_es6.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
+function FormatFileDeleteButton({ size, onDelete }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Button.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React__default["default"].createElement(ConfirmationModal.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); } })));
+        React__default["default"].createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
 }
 
 var css = "._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: var(--typography--fontSize-smaller);\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 = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
 styleInject_es.styleInject(css);
 
-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 = tslib_es6.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
-    var _e = tslib_es6.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
-    var iconName = getIconNameFromType(file.type);
+function InternalThumbnail({ name, hideName = false, size, file, }) {
+    const [imageSource, setImageSource] = React.useState();
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    const iconName = getIconNameFromType(file.type);
     if (!imageSource && file.type.startsWith("image/")) {
-        file.src().then(function (src) { return setImageSource(src); });
+        file.src().then(src => setImageSource(src));
     }
-    var image = (React__default["default"].createElement("img", { src: imageSource, onLoad: function () {
+    const image = (React__default["default"].createElement("img", { src: imageSource, onLoad: () => {
             setImageLoaded(true);
-        }, className: classnames__default["default"](styles.image, (_b = {}, _b[styles.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
+        }, className: classnames__default["default"](styles.image, { [styles.loading]: !imageLoaded }), alt: name, "data-testid": "internalThumbnailImage" }));
     if (imageLoaded) {
         return image;
     }
@@ -70,22 +66,20 @@ function getIconNameFromType(mimeType) {
     }
 }
 
-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__default["default"](file.size);
-    var wrapperClassNames = classnames__default["default"](styles$1[display], (_b = {},
-        _b[styles$1[displaySize]] = display === "compact",
-        _b));
-    var DetailsContainer = isComplete && onClick ? "button" : "div";
-    var detailsClassNames = classnames__default["default"](styles$1.wrapper, (_c = {},
-        _c[styles$1[displaySize]] = display === "compact",
-        _c[styles$1.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
-        _c[styles$1.clickable] = onClick,
-        _c[styles$1.deleteable] = display === "compact",
-        _c));
-    var thumbnailContainerClassNames = classnames__default["default"](styles$1.thumbnail, styles$1[displaySize]);
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const isComplete = file.progress >= 1;
+    const fileSize = getHumanReadableFileSize__default["default"](file.size);
+    const wrapperClassNames = classnames__default["default"](styles$1[display], {
+        [styles$1[displaySize]]: display === "compact",
+    });
+    const DetailsContainer = isComplete && onClick ? "button" : "div";
+    const detailsClassNames = classnames__default["default"](styles$1.wrapper, {
+        [styles$1[displaySize]]: display === "compact",
+        [styles$1.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles$1.clickable]: onClick,
+        [styles$1.deleteable]: display === "compact",
+    });
+    const thumbnailContainerClassNames = classnames__default["default"](styles$1.thumbnail, styles$1[displaySize]);
     return (React__default["default"].createElement("div", { className: wrapperClassNames },
         React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
             React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
@@ -98,8 +92,7 @@ function FormatFile(_a) {
         isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$1.deleteButton },
             React__default["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;
+function isHoverable({ display, isComplete, onClick, onDelete, }) {
     if (display === "compact") {
         return Boolean(isComplete && (onClick || onDelete));
     }

package/dist/FormatRelativeDateTime/index.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatRelativeDateTime(_a) {
-    var inputDate = _a.date;
-    var dateObject;
+function FormatRelativeDateTime({ date: inputDate, }) {
+    let dateObject;
     if (inputDate instanceof Date) {
         dateObject = inputDate;
     }
@@ -20,9 +19,9 @@ function FormatRelativeDateTime(_a) {
     else {
         dateObject = new Date(inputDate.toJSON());
     }
-    var now = Date.now() / 1000; //seconds
-    var date = dateObject;
-    var delta = now - date.getTime() / 1000; //seconds;
+    const now = Date.now() / 1000; //seconds
+    const date = dateObject;
+    const delta = now - date.getTime() / 1000; //seconds;
     switch (relativeTimeRange(delta)) {
         case "less than an hour":
             return React__default["default"].createElement(React__default["default"].Fragment, null, showMinutes(Math.round(delta / 60)));

package/dist/FormatTime/index.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatTime(_a) {
-    var inputTime = _a.time, use24HourClock = _a.use24HourClock;
-    var dateObject;
+function FormatTime({ time: inputTime, use24HourClock, }) {
+    let dateObject;
     if (inputTime instanceof Date) {
         dateObject = inputTime;
     }
@@ -18,10 +17,10 @@ function FormatTime(_a) {
         dateObject = new Date(inputTime);
     }
     else {
-        var currentDate = new Date();
-        var currentYear = currentDate.getFullYear();
-        var currentMonth = currentDate.getMonth();
-        var currentDay = currentDate.getDay();
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        const currentDay = currentDate.getDay();
         dateObject = new Date(currentYear, currentMonth, currentDay, inputTime.hour, inputTime.minute, inputTime.second, inputTime.millisecond);
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null, formatCivilTime(dateObject, use24HourClock));

package/dist/Gallery/GalleryTypes.d.ts

@@ -1,7 +1,7 @@
 import { IconNames } from "../Icon";
 import { FileUpload } from "../InputFile";
-export declare type Sizes = "small" | "base" | "large" | "extraLarge";
-export declare type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
+export type Sizes = "small" | "base" | "large" | "extraLarge";
+export type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
 export interface GalleryProps {
     /**
      * The size of the files and their spacing in the gallery