@jobber/components 4.0.0 → 4.0.1-pre.4

package/dist/Drawer/index.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-a9a66964.js');
-var ButtonDismiss = require('../ButtonDismiss-a9590195.js');
-require('../tslib.es6-5b50eb8e.js');
-require('../Typography-fbe0ed6e.js');
-require('../Button-cd30df0f.js');
+var Heading = require('../Heading-7b203f7f.js');
+var ButtonDismiss = require('../ButtonDismiss-3fb1eaf9.js');
+require('../Typography-9262511f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,9 +22,8 @@ var css$1 = ":root {\n  --drawer-width: calc(var(--space-base) * 17.5);\n  --dra
 var styles$1 = {"container":"_3XszLcqw8Bk5bbTId3P8ZV","drawer":"_2nsJzlCbORiq2Zp1r2Zfjq","open":"BVcThJJ-WMJCtzGk9CfUq","header":"_1ql7AVWGaU-1bl2yZegFqH","contentScroll":"axZAc8S3vSa8nFC4yMJaW","content":"_3MACAQEV8zhNH4_KtJ0DiM"};
 styleInject_es.styleInject(css$1);
 
-function Drawer(_a) {
-    var title = _a.title, children = _a.children, _b = _a.open, open = _b === void 0 ? true : _b, onRequestClose = _a.onRequestClose, id = _a.id;
-    var drawerClassNames = classnames__default["default"](styles$1.container, open && styles$1.open);
+function Drawer({ title, children, open = true, onRequestClose, id, }) {
+    const drawerClassNames = classnames__default["default"](styles$1.container, open && styles$1.open);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
             React__default["default"].createElement("div", { className: styles$1.drawer },
@@ -33,19 +31,17 @@ function Drawer(_a) {
                 React__default["default"].createElement("div", { className: styles$1.contentScroll },
                     React__default["default"].createElement("div", { className: styles$1.content }, children))))));
 }
-function Header(_a) {
-    var title = _a.title, onRequestClose = _a.onRequestClose;
+function Header({ title, onRequestClose }) {
     return (React__default["default"].createElement("div", { className: styles$1.header, "data-testid": "drawer-header" },
         React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
-        React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close " + (title || "drawer") })));
+        React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
 }
 
 var css = ".Sc90BtF67zpsMHXh3g9kq {\n  display: grid;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  grid-template-columns: minmax(0, 1fr) minmax(-webkit-min-content, -webkit-max-content);\n  grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content);\n  grid-template-rows: 1fr;\n}\n";
 var styles = {"drawerGrid":"Sc90BtF67zpsMHXh3g9kq"};
 styleInject_es.styleInject(css);
 
-function DrawerGrid(_a) {
-    var children = _a.children;
+function DrawerGrid({ children }) {
     return React__default["default"].createElement("div", { className: styles.drawerGrid }, children);
 }
 

package/dist/Emphasis/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Emphasis = require('../Emphasis-75a3f411.js');
-require('../tslib.es6-5b50eb8e.js');
+var Emphasis = require('../Emphasis-23dc2a0a.js');
 require('react');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 

package/dist/{Emphasis-75a3f411.js → Emphasis-23dc2a0a.js}

@@ -1,21 +1,19 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
-var Typography = require('./Typography-fbe0ed6e.js');
+var Typography = require('./Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Emphasis(_a) {
-    var variation = _a.variation, children = _a.children;
-    var variationMap = {
+function Emphasis({ variation, children }) {
+    const variationMap = {
         bold: { element: "b", fontWeight: "bold" },
         italic: { element: "em", emphasisType: "italic" },
         highlight: { element: "strong", emphasisType: "highlight" },
     };
-    return React__default["default"].createElement(Typography.Typography, tslib_es6.__assign({}, variationMap[variation]), children);
+    return React__default["default"].createElement(Typography.Typography, Object.assign({}, variationMap[variation]), children);
 }
 
 exports.Emphasis = Emphasis;

package/dist/FeatureSwitch/index.js

@@ -2,21 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-a9a66964.js');
-var Text = require('../Text-e012fb46.js');
-var Content = require('../Content-18de5fbb.js');
-var Switch = require('../Switch-f03b70fc.js');
-var Button = require('../Button-cd30df0f.js');
-var Emphasis = require('../Emphasis-75a3f411.js');
-var Markdown = require('../Markdown-b53e0308.js');
-require('../Typography-fbe0ed6e.js');
+var Heading = require('../Heading-7b203f7f.js');
+var Text = require('../Text-7ce00adb.js');
+var Content = require('../Content-05df8f7f.js');
+var Switch = require('../Switch-7ac32f7b.js');
+var Button = require('../Button-16e043ec.js');
+var Emphasis = require('../Emphasis-23dc2a0a.js');
+var Markdown = require('../Markdown-be2dcd0c.js');
+require('../Typography-9262511f.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 require('react-markdown');
 
@@ -29,10 +28,9 @@ var css = "._2wLd_KRTNAGUWLuHUk3oW {\n  display: -ms-flexbox;\n  display: flex;\
 var styles = {"container":"_2wLd_KRTNAGUWLuHUk3oW","content":"_3S4AEFcAzye_0NKuyb26Pt","action":"_3fTQ2YTOZjh3z63IpmHOEX","savedIndicator":"vVv_rOT7pURJPkU4rvJPE","featureContent":"f8zTHuP6EgBAklxGjSv1O","enabled":"NweVtD0555WFOwkVpskgX"};
 styleInject_es.styleInject(css);
 
-function FeatureSwitch(_a) {
-    var children = _a.children, description = _a.description, _b = _a.disabled, disabled = _b === void 0 ? false : _b, enabled = _a.enabled, _c = _a.externalLink, externalLink = _c === void 0 ? false : _c, onEdit = _a.onEdit, onSwitch = _a.onSwitch, _d = _a.hasSaveIndicator, hasSaveIndicator = _d === void 0 ? false : _d, title = _a.title;
-    var _e = tslib_es6.__read(React.useState(false), 2), savedIndicator = _e[0], setSavedIndicator = _e[1];
-    var featureContentClassnames = classnames__default["default"](styles.featureContent, styles.content, enabled && styles.enabled);
+function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
+    const [savedIndicator, setSavedIndicator] = React.useState(false);
+    const featureContentClassnames = classnames__default["default"](styles.featureContent, styles.content, enabled && styles.enabled);
     shouldShowSavedIndicator();
     return (React__default["default"].createElement(Content.Content, null,
         React__default["default"].createElement("div", { className: styles.container },
@@ -57,9 +55,9 @@ function FeatureSwitch(_a) {
                 React__default["default"].createElement(Button.Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
     function shouldShowSavedIndicator() {
         // Check if the component is mounted
-        var _a = tslib_es6.__read(React.useState(false), 2), didMount = _a[0], setDidMount = _a[1];
-        React.useEffect(function () { return setDidMount(true); }, []);
-        React.useEffect(function () {
+        const [didMount, setDidMount] = React.useState(false);
+        React.useEffect(() => setDidMount(true), []);
+        React.useEffect(() => {
             didMount && hasSaveIndicator && setSavedIndicator(true);
         }, [enabled]);
     }

package/dist/Form/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
+var tslib_es6 = require('../tslib.es6-efe27175.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
@@ -10,55 +10,45 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var Form = React.forwardRef(function InternalForm(_a, ref) {
-    var _this = this;
-    var onSubmit = _a.onSubmit, children = _a.children, onStateChange = _a.onStateChange;
-    var methods = reactHookForm.useForm({ mode: "onTouched" });
-    var errors = methods.errors, trigger = methods.trigger, handleSubmit = methods.handleSubmit, _b = methods.formState, isDirty = _b.isDirty, isValid = _b.isValid;
-    React.useEffect(function () { return onStateChange && onStateChange({ isDirty: isDirty, isValid: isValid }); }, [isDirty, isValid]);
-    React.useImperativeHandle(ref, function () { return ({
+const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
+    const methods = reactHookForm.useForm({ mode: "onTouched" });
+    const { errors, trigger, handleSubmit, formState: { isDirty, isValid }, } = methods;
+    React.useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
+    React.useImperativeHandle(ref, () => ({
         /**
          * The `trigger()` method can also accept an array
          * of fields to validate. We may at some point want
          * to consider adding a `validate()` method to the
          * `Form` component.
          */
-        submit: function () { return tslib_es6.__awaiter(_this, void 0, void 0, function () {
-            var valid;
-            return tslib_es6.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, trigger()];
-                    case 1:
-                        valid = _a.sent();
-                        if (valid) {
-                            submitHandler();
-                        }
-                        else {
-                            trigger();
-                            errorHandler(errors);
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        }); },
-    }); });
+        submit: () => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            const valid = yield trigger();
+            if (valid) {
+                submitHandler();
+            }
+            else {
+                trigger();
+                errorHandler(errors);
+            }
+        }),
+    }));
     /**
      * If an onSubmit is not passed into a form, it will only be used
      * for validation. For that, we do not need to wrap it in a <form>
      * tag. This allows the <Form> component to be used in legacy code.
      */
-    var Wrapper = onSubmit ? "form" : "div";
-    var formProps = {
+    const Wrapper = onSubmit ? "form" : "div";
+    const formProps = {
         onSubmit: onSubmit && handleSubmit(submitHandler, errorHandler),
     };
-    return (React__default["default"].createElement(reactHookForm.FormProvider, tslib_es6.__assign({}, methods),
-        React__default["default"].createElement(Wrapper, tslib_es6.__assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
+    return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
+        React__default["default"].createElement(Wrapper, Object.assign({}, formProps, { "data-testid": "atlantis-form" }), children)));
     function submitHandler() {
         onSubmit && onSubmit();
     }
     function errorHandler(errs) {
-        var firstErrName = Object.keys(errs)[0];
-        var element = document.querySelector("[name=\"" + firstErrName + "\"]");
+        const firstErrName = Object.keys(errs)[0];
+        const element = document.querySelector(`[name="${firstErrName}"]`);
         if (typeof element != undefined) {
             element === null || element === void 0 ? void 0 : element.focus();
         }

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-76068c0b.js');
-require('../tslib.es6-5b50eb8e.js');
+var FormField = require('../FormField-1e444bb6.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-76068c0b.js → FormField-1e444bb6.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');