@jobber/components 4.1.1 → 4.1.3-pre.14

package/dist/FeatureSwitch/index.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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-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');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Heading = require('../Heading-8c6e4e0b.js');
+var Text = require('../Text-4c04ddc3.js');
+var Content = require('../Content-af82acba.js');
+var Switch = require('../Switch-21d7093a.js');
+var Button = require('../Button-186ef2c1.js');
+var Emphasis = require('../Emphasis-53e963b5.js');
+var Markdown = require('../Markdown-5d86d6e7.js');
+require('../Typography-dd9717e7.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
@@ -24,9 +24,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css = "._2wLd_KRTNAGUWLuHUk3oW {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._3S4AEFcAzye_0NKuyb26Pt {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-item-align: center;\n      align-self: center;\n  padding-right: var(--space-base);\n  transition: opacity var(--timing-base);\n}\n\n._3fTQ2YTOZjh3z63IpmHOEX {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  position: relative;\n}\n\n.vVv_rOT7pURJPkU4rvJPE {\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  margin-top: var(--space-smallest);\n  text-align: center;\n}\n\n.f8zTHuP6EgBAklxGjSv1O {\n  opacity: 0.5;\n}\n\n.NweVtD0555WFOwkVpskgX {\n  opacity: 1;\n}\n";
+var css_248z = "._2wLd_KRTNAGUWLuHUk3oW {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._3S4AEFcAzye_0NKuyb26Pt {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-item-align: center;\n      align-self: center;\n  padding-right: var(--space-base);\n  transition: opacity var(--timing-base);\n}\n\n._3fTQ2YTOZjh3z63IpmHOEX {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  position: relative;\n}\n\n.vVv_rOT7pURJPkU4rvJPE {\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  margin-top: var(--space-smallest);\n  text-align: center;\n}\n\n.f8zTHuP6EgBAklxGjSv1O {\n  opacity: 0.5;\n}\n\n.NweVtD0555WFOwkVpskgX {\n  opacity: 1;\n}\n";
 var styles = {"container":"_2wLd_KRTNAGUWLuHUk3oW","content":"_3S4AEFcAzye_0NKuyb26Pt","action":"_3fTQ2YTOZjh3z63IpmHOEX","savedIndicator":"vVv_rOT7pURJPkU4rvJPE","featureContent":"f8zTHuP6EgBAklxGjSv1O","enabled":"NweVtD0555WFOwkVpskgX"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
     const [savedIndicator, setSavedIndicator] = React.useState(false);

package/dist/Form/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-efe27175.js');
+var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Form = React.forwardRef(function InternalForm({ onSubmit, children, onStateChange }, ref) {
     const methods = reactHookForm.useForm({ mode: "onTouched" });
-    const { errors, trigger, handleSubmit, formState: { isDirty, isValid }, } = methods;
+    const { trigger, handleSubmit, formState: { isDirty, isValid, errors }, } = methods;
     React.useEffect(() => onStateChange && onStateChange({ isDirty, isValid }), [isDirty, isValid]);
     React.useImperativeHandle(ref, () => ({
         /**

package/dist/FormField/index.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-79a0a375.js');
-require('../tslib.es6-efe27175.js');
+var FormField = require('../FormField-aff52a1d.js');
+require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
-require('../style-inject.es-dcee06b6.js');
+require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-16e043ec.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-9262511f.js');
-require('../Text-7ce00adb.js');
-require('../InputValidation-97dd0dcf.js');
+require('../Typography-dd9717e7.js');
+require('../Text-4c04ddc3.js');
+require('../InputValidation-e09f5d20.js');
 require('framer-motion');
-require('../Spinner-ae4c8a85.js');
+require('../Spinner-35cee923.js');
 
 
 

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

@@ -1,25 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-efe27175.js');
+var tslib_es6 = require('./tslib.es6-5b8768b7.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 styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var Button = require('./Button-16e043ec.js');
+var Button = require('./Button-186ef2c1.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');
+var Text = require('./Text-4c04ddc3.js');
+var InputValidation = require('./InputValidation-e09f5d20.js');
+var Spinner = require('./Spinner-35cee923.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  --field--value-lineHeight: calc(var(--base-unit) * 1.25);\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(--typography--fontSize-base);\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/* override iOS default styling for disabled input */\n\n._2xkImc45YUzsUp6bZ3Ik_4 :disabled {\n  -webkit-text-fill-color: var(--field--value-color);\n  opacity: 1;\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: var(--field--value-lineHeight);\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: var(--field--value-lineHeight);\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: var(--typography--fontSize-small);\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  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n  line-height: var(--field--value-lineHeight);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\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 css_248z = ":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  --field--value-lineHeight: calc(var(--base-unit) * 1.25);\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(--typography--fontSize-base);\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/* override iOS default styling for disabled input */\n\n._2xkImc45YUzsUp6bZ3Ik_4 :disabled {\n  -webkit-text-fill-color: var(--field--value-color);\n  opacity: 1;\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: var(--field--value-lineHeight);\n  text-align: var(--field--textAlign);\n  background: transparent;\n  -webkit-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: var(--field--value-lineHeight);\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: var(--typography--fontSize-small);\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  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n  padding: 0 0 0 var(--field--padding-left);\n  line-height: var(--field--value-lineHeight);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\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);
+styleInject_es.styleInject(css_248z);
 
 function AffixLabel({ label, variation = "prefix", labelRef, }) {
     const affixLabelClass = classnames__default["default"](styles.affixLabel, {
@@ -113,10 +113,11 @@ 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" }))));
 }
 
+// eslint-disable-next-line max-statements
 function FormField(props) {
-    var _a;
+    var _a, _b;
     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
+    const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
         ? reactHookForm.useFormContext()
         : reactHookForm.useForm({ mode: "onTouched" });
     const [identifier] = React.useState(uuid.v1());
@@ -137,10 +138,11 @@ function FormField(props) {
             setValue(controlledName, newValue);
         },
     }));
-    const error = errors[controlledName] && errors[controlledName].message;
+    const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
+    const error = getErrorMessage();
     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"]);
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["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 }));
             const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown });
@@ -188,6 +190,12 @@ function FormField(props) {
                 onControllerBlur();
             }
         } }));
+    function getErrorMessage() {
+        if (typeof message === "string") {
+            return message;
+        }
+        return "";
+    }
     function handleValidation() {
         onValidation && onValidation(error);
     }

package/dist/FormatEmail/index.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.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 css_248z = "._2WQ6E_TFQTKhlZCeQv65zh {\n  font-style: normal;\n}\n";
 var styles = {"email":"_2WQ6E_TFQTKhlZCeQv65zh"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function FormatEmail({ email }) {
     const className = classnames__default["default"](styles.email);

package/dist/FormatFile/index.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-3512f838.js');
+var FormatFile = require('../FormatFile-42ea7a6a.js');
 require('react');
 require('classnames');
 require('filesize');
-require('../style-inject.es-dcee06b6.js');
-require('../Button-16e043ec.js');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-9262511f.js');
-require('../ConfirmationModal-6a7beee2.js');
+require('../Typography-dd9717e7.js');
+require('../ConfirmationModal-ac668c46.js');
 require('@jobber/hooks');
-require('../Modal-757e83fd.js');
+require('../Modal-e41f9284.js');
 require('react-dom');
 require('framer-motion');
-require('../Heading-7b203f7f.js');
-require('../ButtonDismiss-3fb1eaf9.js');
-require('../Content-05df8f7f.js');
-require('../Markdown-be2dcd0c.js');
+require('../Heading-8c6e4e0b.js');
+require('../ButtonDismiss-d2d16622.js');
+require('../Content-af82acba.js');
+require('../Markdown-5d86d6e7.js');
 require('react-markdown');
-require('../Text-7ce00adb.js');
-require('../Emphasis-23dc2a0a.js');
-require('../ProgressBar-f028b159.js');
+require('../Text-4c04ddc3.js');
+require('../Emphasis-53e963b5.js');
+require('../ProgressBar-d3178aa9.js');
 
 
 

package/dist/FormatFile-42ea7a6a.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getHumanReadableFileSize = require('filesize');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Button = require('./Button-186ef2c1.js');
+var ConfirmationModal = require('./ConfirmationModal-ac668c46.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-dd9717e7.js');
+var Text = require('./Text-4c04ddc3.js');
+var ProgressBar = require('./ProgressBar-d3178aa9.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 getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
+
+var css_248z$1 = ":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  box-sizing: border-box;\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$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_248z$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: () => 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_248z = "._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_248z);
+
+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(src => setImageSource(src));
+    }
+    const image = (React__default["default"].createElement("img", { src: imageSource, onLoad: () => {
+            setImageLoaded(true);
+        }, className: classnames__default["default"](styles.image, { [styles.loading]: !imageLoaded }), alt: name, "data-testid": "internalThumbnailImage" }));
+    if (imageLoaded) {
+        return image;
+    }
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.content, styles[size]) },
+        imageSource && image,
+        React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue" }),
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles.fileName) }, hideName && (React__default["default"].createElement(Typography.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({ 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 },
+                React__default["default"].createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default["default"].createElement("div", { className: styles$1.progress },
+                    React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default["default"].createElement("div", { className: styles$1.contentBlock },
+                React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
+                React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
+        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({ display, isComplete, onClick, onDelete, }) {
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
+exports.FormatFile = FormatFile;

package/dist/Gallery/index.js

@@ -4,28 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var LightBox = require('../LightBox-dd1afa97.js');
-var FormatFile = require('../FormatFile-3512f838.js');
-var Button = require('../Button-16e043ec.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var LightBox = require('../LightBox-8472bc9d.js');
+var FormatFile = require('../FormatFile-42ea7a6a.js');
+var Button = require('../Button-186ef2c1.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks');
-require('../ButtonDismiss-3fb1eaf9.js');
+require('../ButtonDismiss-d2d16622.js');
 require('filesize');
-require('../ConfirmationModal-6a7beee2.js');
-require('../Modal-757e83fd.js');
-require('../Heading-7b203f7f.js');
-require('../Typography-9262511f.js');
-require('../Content-05df8f7f.js');
-require('../Markdown-be2dcd0c.js');
+require('../ConfirmationModal-ac668c46.js');
+require('../Modal-e41f9284.js');
+require('../Heading-8c6e4e0b.js');
+require('../Typography-dd9717e7.js');
+require('../Content-af82acba.js');
+require('../Markdown-5d86d6e7.js');
 require('react-markdown');
-require('../Text-7ce00adb.js');
-require('../Emphasis-23dc2a0a.js');
+require('../Text-4c04ddc3.js');
+require('../Emphasis-53e963b5.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ProgressBar-f028b159.js');
+require('../ProgressBar-d3178aa9.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,9 +33,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css = ".oLHYkzv718LqMvtqFZFcZ,\n._2JSG0uYj1HSXFads63nptQ {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._2JSG0uYj1HSXFads63nptQ {\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n}\n\n._3LkQj1p9wvHbrfXfz2nUYp {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.FG8mZ6UcMPRsMC9HQinY2 {\n  width: 56px;\n  height: 56px;\n}\n\n._1cTzKosWc22qxWZSiI0CzZ {\n  width: 168px;\n  height: 168px;\n  box-shadow: var(--shadow-base);\n}\n";
+var css_248z = ".oLHYkzv718LqMvtqFZFcZ,\n._2JSG0uYj1HSXFads63nptQ {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._2JSG0uYj1HSXFads63nptQ {\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n}\n\n._3LkQj1p9wvHbrfXfz2nUYp {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.FG8mZ6UcMPRsMC9HQinY2 {\n  width: 56px;\n  height: 56px;\n}\n\n._1cTzKosWc22qxWZSiI0CzZ {\n  width: 168px;\n  height: 168px;\n  box-shadow: var(--shadow-base);\n}\n";
 var styles = {"gallery":"oLHYkzv718LqMvtqFZFcZ","galleryLarge":"_2JSG0uYj1HSXFads63nptQ","showMoreButton":"_3LkQj1p9wvHbrfXfz2nUYp","baseShowMoreButton":"FG8mZ6UcMPRsMC9HQinY2","largeShowMoreButton":"_1cTzKosWc22qxWZSiI0CzZ"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function Gallery({ files, size = "base", max, onDelete }) {
     const { images, filesToImageIndex } = generateImagesArray(files);

package/dist/Heading/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Heading = require('../Heading-7b203f7f.js');
+var Heading = require('../Heading-8c6e4e0b.js');
 require('react');
-require('../Typography-9262511f.js');
+require('../Typography-dd9717e7.js');
 require('classnames');
-require('../style-inject.es-dcee06b6.js');
+require('../style-inject.es-9d2f5f4e.js');
 
 
 

package/dist/{Heading-7b203f7f.js → Heading-8c6e4e0b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-9262511f.js');
+var Typography = require('./Typography-dd9717e7.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InlineLabel/index.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-9262511f.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Typography = require('../Typography-dd9717e7.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 = "._2CX7X_wH5lb0fioNTuYTB3 {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: var(--radius-large);\n}\n\n.hIEzl9j3x8azFGCx53-RF {\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n._2FEAdHSbQ1julTQlXKcU9G {\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.y2IZqgoDbEVd68JUw74_V {\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._3ayhjHoV55pJnCyceIIodY {\n  color: var(--color-greyBlue--dark);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._1NRX5K08cyefHFTjmEY7JC {\n  color: var(--color-red--dark);\n  background-color: var(--color-red--lightest);\n}\n\n._2WqpAFlUhWh2Wycr-r2uMn {\n  color: var(--color-orange--dark);\n  background-color: var(--color-orange--lightest);\n}\n\n.EM3QGMlc1v7pjfVBR2j82 {\n  color: var(--color-green--dark);\n  background-color: var(--color-green--lightest);\n}\n\n.LuBWHY5BJNh4RnEPozKgA {\n  color: var(--color-blue--dark);\n  background-color: var(--color-blue--lightest);\n}\n\n._36P3W4wMGeF6ObMYI87q2b {\n  color: var(--color-navy--dark);\n  background-color: var(--color-navy--lightest);\n}\n\n.z7yJ1rNuOTksBtZ0cr3ys {\n  color: var(--color-yellow--dark);\n  background-color: var(--color-yellow--lightest);\n}\n\n._2jRJWXkl2av1GzSTdc4GS {\n  color: var(--color-lime--dark);\n  background-color: var(--color-lime--lightest);\n}\n\n._2DSYzUVBgtIaB1xsMr7rVj {\n  color: var(--color-purple--dark);\n  background-color: var(--color-purple--lightest);\n}\n\n._27cvq6AfdeOP6SUuX5Ex_T {\n  color: var(--color-pink--dark);\n  background-color: var(--color-pink--lightest);\n}\n\n.eImPpTsVAb13A3dFkEkBc {\n  color: var(--color-teal--dark);\n  background-color: var(--color-teal--lightest);\n}\n\n._1AcWxzfWcjE71_gRrEo-J_ {\n  color: var(--color-yellowGreen--dark);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.J21zEr7ZIvGwt6R5-MZQ7 {\n  color: var(--color-white);\n  background-color: var(--color-blue--light);\n}\n\n._27HNFihCeydE5HUcbCskQ4 {\n  color: var(--color-lightBlue--dark);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n._3_dDXhHTqG9pa_au-60pWR {\n  color: var(--color-indigo--dark);\n  background-color: var(--color-indigo--lightest);\n}\n";
+var css_248z = "._2CX7X_wH5lb0fioNTuYTB3 {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: var(--radius-large);\n}\n\n.hIEzl9j3x8azFGCx53-RF {\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n._2FEAdHSbQ1julTQlXKcU9G {\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.y2IZqgoDbEVd68JUw74_V {\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._3ayhjHoV55pJnCyceIIodY {\n  color: var(--color-greyBlue--dark);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._1NRX5K08cyefHFTjmEY7JC {\n  color: var(--color-red--dark);\n  background-color: var(--color-red--lightest);\n}\n\n._2WqpAFlUhWh2Wycr-r2uMn {\n  color: var(--color-orange--dark);\n  background-color: var(--color-orange--lightest);\n}\n\n.EM3QGMlc1v7pjfVBR2j82 {\n  color: var(--color-green--dark);\n  background-color: var(--color-green--lightest);\n}\n\n.LuBWHY5BJNh4RnEPozKgA {\n  color: var(--color-blue--dark);\n  background-color: var(--color-blue--lightest);\n}\n\n._36P3W4wMGeF6ObMYI87q2b {\n  color: var(--color-navy--dark);\n  background-color: var(--color-navy--lightest);\n}\n\n.z7yJ1rNuOTksBtZ0cr3ys {\n  color: var(--color-yellow--dark);\n  background-color: var(--color-yellow--lightest);\n}\n\n._2jRJWXkl2av1GzSTdc4GS {\n  color: var(--color-lime--dark);\n  background-color: var(--color-lime--lightest);\n}\n\n._2DSYzUVBgtIaB1xsMr7rVj {\n  color: var(--color-purple--dark);\n  background-color: var(--color-purple--lightest);\n}\n\n._27cvq6AfdeOP6SUuX5Ex_T {\n  color: var(--color-pink--dark);\n  background-color: var(--color-pink--lightest);\n}\n\n.eImPpTsVAb13A3dFkEkBc {\n  color: var(--color-teal--dark);\n  background-color: var(--color-teal--lightest);\n}\n\n._1AcWxzfWcjE71_gRrEo-J_ {\n  color: var(--color-yellowGreen--dark);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.J21zEr7ZIvGwt6R5-MZQ7 {\n  color: var(--color-white);\n  background-color: var(--color-blue--light);\n}\n\n._27HNFihCeydE5HUcbCskQ4 {\n  color: var(--color-lightBlue--dark);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n._3_dDXhHTqG9pa_au-60pWR {\n  color: var(--color-indigo--dark);\n  background-color: var(--color-indigo--lightest);\n}\n";
 var styles = {"inlineLabel":"_2CX7X_wH5lb0fioNTuYTB3","base":"hIEzl9j3x8azFGCx53-RF","large":"_2FEAdHSbQ1julTQlXKcU9G","larger":"y2IZqgoDbEVd68JUw74_V","greyBlue":"_3ayhjHoV55pJnCyceIIodY","red":"_1NRX5K08cyefHFTjmEY7JC","orange":"_2WqpAFlUhWh2Wycr-r2uMn","green":"EM3QGMlc1v7pjfVBR2j82","blue":"LuBWHY5BJNh4RnEPozKgA","navy":"_36P3W4wMGeF6ObMYI87q2b","yellow":"z7yJ1rNuOTksBtZ0cr3ys","lime":"_2jRJWXkl2av1GzSTdc4GS","purple":"_2DSYzUVBgtIaB1xsMr7rVj","pink":"_27cvq6AfdeOP6SUuX5Ex_T","teal":"eImPpTsVAb13A3dFkEkBc","yellowGreen":"_1AcWxzfWcjE71_gRrEo-J_","blueDark":"J21zEr7ZIvGwt6R5-MZQ7","lightBlue":"_27HNFihCeydE5HUcbCskQ4","indigo":"_3_dDXhHTqG9pa_au-60pWR"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function InlineLabel({ size = "base", color = "greyBlue", children, }) {
     const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);

package/dist/InputAvatar/index.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-efe27175.js');
+var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
-var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Avatar = require('../Avatar-89cfd0a6.js');
-var InputFile = require('../InputFile-5e0ed2b5.js');
-var ProgressBar = require('../ProgressBar-f028b159.js');
-var Button = require('../Button-16e043ec.js');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Avatar = require('../Avatar-01c5ba8b.js');
+var InputFile = require('../InputFile-e7c15211.js');
+var ProgressBar = require('../ProgressBar-d3178aa9.js');
+var Button = require('../Button-186ef2c1.js');
 require('classnames');
 require('color');
 require('../Icon-405a216c.js');
@@ -16,17 +16,17 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-05df8f7f.js');
-require('../Typography-9262511f.js');
+require('../Content-af82acba.js');
+require('../Typography-dd9717e7.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css = "._1e1D2becaB2vzZJ8QkTQFY {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1e1D2becaB2vzZJ8QkTQFY > *:not(:last-child) {\n  margin-right: var(--space-small);\n}\n\n.TQgDlkCH4_o4LkH2hOqde {\n  position: relative;\n}\n\n.zq7uZTFFJ0aS_hIEAvVPX {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 100%;\n  margin: 0 var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--dark);\n  opacity: 0.3;\n  mix-blend-mode: multiply;\n}\n";
+var css_248z = "._1e1D2becaB2vzZJ8QkTQFY {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1e1D2becaB2vzZJ8QkTQFY > *:not(:last-child) {\n  margin-right: var(--space-small);\n}\n\n.TQgDlkCH4_o4LkH2hOqde {\n  position: relative;\n}\n\n.zq7uZTFFJ0aS_hIEAvVPX {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 100%;\n  margin: 0 var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--dark);\n  opacity: 0.3;\n  mix-blend-mode: multiply;\n}\n";
 var styles = {"inputAvatar":"_1e1D2becaB2vzZJ8QkTQFY","preview":"TQgDlkCH4_o4LkH2hOqde","centered":"zq7uZTFFJ0aS_hIEAvVPX","overlay":"_3wSTh_yNalSZ5i5bnf_clw"};
-styleInject_es.styleInject(css);
+styleInject_es.styleInject(css_248z);
 
 function InputAvatar(_a) {
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);

package/dist/InputDate/index.js

@@ -4,22 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-79a0a375.js');
-var DatePicker = require('../DatePicker-0696b0f0.js');
-require('../tslib.es6-efe27175.js');
+var FormField = require('../FormField-aff52a1d.js');
+var DatePicker = require('../DatePicker-e085dff4.js');
+require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
-require('../style-inject.es-dcee06b6.js');
+require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-16e043ec.js');
+require('../Button-186ef2c1.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-9262511f.js');
-require('../Text-7ce00adb.js');
-require('../InputValidation-97dd0dcf.js');
+require('../Typography-dd9717e7.js');
+require('../Text-4c04ddc3.js');
+require('../InputValidation-e09f5d20.js');
 require('framer-motion');
-require('../Spinner-ae4c8a85.js');
+require('../Spinner-35cee923.js');
 require('react-datepicker');
 require('@jobber/hooks');