@jobber/components 4.2.2 → 4.2.3-pre.0

package/dist/InputEmail/index.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e1c3af82.js');
+var FormField = require('../FormField-e8371105.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-7848765d.js');
+require('../Text-bc836227.js');
+require('../InputValidation-2d104d5d.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-e7c15211.js');
+var InputFile = require('../InputFile-0a0cdf0d.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,12 +10,12 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Content-af82acba.js');
+require('../Typography-7848765d.js');
+require('../Content-373bbaee.js');
 
 
 

package/dist/{InputFile-e7c15211.js → InputFile-0a0cdf0d.js}

@@ -7,9 +7,9 @@ var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-186ef2c1.js');
-var Content = require('./Content-af82acba.js');
-var Typography = require('./Typography-dd9717e7.js');
+var Button = require('./Button-21c7bf89.js');
+var Content = require('./Content-373bbaee.js');
+var Typography = require('./Typography-7848765d.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,8 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
-var css_248z = "._2CgKZHQp30gXtQyW8h2Ex_ {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_:focus-within {\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n._3nre5MPe67v_oDs44x2IDC {\n  padding: var(--space-base);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n._3nre5MPe67v_oDs44x2IDC._1wLTm5Es7oqZzzwFiOySeN {\n  border-color: var(--color-focus);\n  background-color: var(--color-surface--hover);\n}\n";
-var styles = {"dropZoneBase":"_2CgKZHQp30gXtQyW8h2Ex_","dropZone":"_3nre5MPe67v_oDs44x2IDC","active":"_1wLTm5Es7oqZzzwFiOySeN"};
+var css_248z = ".dropZoneBase {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.dropZoneBase:focus,\n.dropZoneBase[focus-within] {\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.dropZoneBase:focus,\n.dropZoneBase:focus-within {\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.dropZone {\n  padding: var(--space-base);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.dropZone.active {\n  border-color: var(--color-focus);\n  background-color: var(--color-surface--hover);\n}\n";
 styleInject_es.styleInject(css_248z);
 
 function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }) {
@@ -34,9 +33,9 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone(options);
     const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
-    const dropZone = classnames__default["default"](styles.dropZoneBase, {
-        [styles.dropZone]: variation === "dropzone",
-        [styles.active]: isDragActive,
+    const dropZone = classnames__default["default"](css_248z.dropZoneBase, {
+        [css_248z.dropZone]: variation === "dropzone",
+        [css_248z.active]: isDragActive,
     });
     return (React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
         React__default["default"].createElement("input", Object.assign({}, getInputProps())),

package/dist/InputGroup/index.js

@@ -11,14 +11,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = "._1UKIybTcnyfJQlTx901rF5 > *:not(:last-child) {\n  margin-bottom: -1px !important;\n}\n\n._26qQBed5Rzu9i2ZIDEaESr {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: end;\n      align-items: flex-end;\n}\n\n._26qQBed5Rzu9i2ZIDEaESr > *:not(:last-child) {\n  margin-bottom: auto;\n  margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group  */\n\n._3kywSyvvwSdmNSTOqX-AQA {\n  --public-field--top-left-radius: 0;\n  --public-field--top-right-radius: 0;\n  --public-field--bottom-left-radius: 0;\n  --public-field--bottom-right-radius: 0;\n}\n\n._1UKIybTcnyfJQlTx901rF5 > :first-child:not(._26qQBed5Rzu9i2ZIDEaESr) {\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n._1UKIybTcnyfJQlTx901rF5 > :last-child:not(._26qQBed5Rzu9i2ZIDEaESr) {\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n._26qQBed5Rzu9i2ZIDEaESr:first-child > :first-child {\n  --public-field--top-left-radius: var(--radius-base);\n}\n\n._26qQBed5Rzu9i2ZIDEaESr:first-child > :last-child {\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n._26qQBed5Rzu9i2ZIDEaESr:last-child > :first-child {\n  --public-field--bottom-left-radius: var(--radius-base);\n}\n\n._26qQBed5Rzu9i2ZIDEaESr:last-child > :last-child {\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n";
-var styles = {"vertical":"_1UKIybTcnyfJQlTx901rF5","horizontal":"_26qQBed5Rzu9i2ZIDEaESr","inputGroup":"_3kywSyvvwSdmNSTOqX-AQA"};
+var css_248z = ".vertical > *:not(:last-child) {\n  margin-bottom: -1px !important;\n}\n\n.horizontal {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: end;\n      align-items: flex-end;\n}\n\n.horizontal > *:not(:last-child) {\n  margin-bottom: auto;\n  margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group  */\n\n.inputGroup {\n  --public-field--top-left-radius: 0;\n  --public-field--top-right-radius: 0;\n  --public-field--bottom-left-radius: 0;\n  --public-field--bottom-right-radius: 0;\n}\n\n.vertical > :first-child:not(.horizontal) {\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n.vertical > :last-child:not(.horizontal) {\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.horizontal:first-child > :first-child {\n  --public-field--top-left-radius: var(--radius-base);\n}\n\n.horizontal:first-child > :last-child {\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.horizontal:last-child > :first-child {\n  --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.horizontal:last-child > :last-child {\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n";
 styleInject_es.styleInject(css_248z);
 
 function InputGroup({ children, flowDirection = "vertical", }) {
     if (isInvalidGroupNesting(children))
         return React__default["default"].createElement(React__default["default"].Fragment, null);
-    const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
+    const className = classnames__default["default"](css_248z.inputGroup, css_248z[flowDirection]);
     return React__default["default"].createElement("div", { className: className }, children);
 }
 function isInvalidGroupNesting(childs) {

package/dist/InputNumber/index.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e1c3af82.js');
+var FormField = require('../FormField-e8371105.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-7848765d.js');
+require('../Text-bc836227.js');
+require('../InputValidation-2d104d5d.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e1c3af82.js');
+var FormField = require('../FormField-e8371105.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-7848765d.js');
+require('../Text-bc836227.js');
+require('../InputValidation-2d104d5d.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputText/index.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-3ac6b3a9.js');
+var InputText = require('../InputText-621b7967.js');
 require('react');
-require('../FormField-e1c3af82.js');
+require('../FormField-e8371105.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-7848765d.js');
+require('../Text-bc836227.js');
+require('../InputValidation-2d104d5d.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 
 
 

package/dist/{InputText-3ac6b3a9.js → InputText-621b7967.js}

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

package/dist/InputTime/index.js

@@ -6,20 +6,20 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-e1c3af82.js');
+var FormField = require('../FormField-e8371105.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
-require('../Text-4c04ddc3.js');
-require('../InputValidation-e09f5d20.js');
+require('../Typography-7848765d.js');
+require('../Text-bc836227.js');
+require('../InputValidation-2d104d5d.js');
 require('framer-motion');
-require('../Spinner-35cee923.js');
+require('../Spinner-aca146ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputValidation/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputValidation = require('../InputValidation-e09f5d20.js');
+var InputValidation = require('../InputValidation-2d104d5d.js');
 require('react');
 require('framer-motion');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Text-4c04ddc3.js');
-require('../Typography-dd9717e7.js');
+require('../Text-bc836227.js');
+require('../Typography-7848765d.js');
 require('classnames');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputValidation-e09f5d20.js → InputValidation-2d104d5d.js}

@@ -3,15 +3,14 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Text = require('./Text-4c04ddc3.js');
+var Text = require('./Text-bc836227.js');
 var Icon = require('./Icon-405a216c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = "._9gFxrZogiKbS3gPLv_I79 {\n  margin-top: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n._3QUt88pIWZatkYLVYFlRuL > svg {\n  margin-right: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
-var styles = {"hasValidationMessage":"_9gFxrZogiKbS3gPLv_I79","message":"_3QUt88pIWZatkYLVYFlRuL"};
+var css_248z = ".hasValidationMessage {\n  margin-top: var(--space-smaller);\n}\n\n.message {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n.message > svg {\n  margin-right: var(--space-smaller);\n}\n\n.message:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
 styleInject_es.styleInject(css_248z);
 
 function InputValidation({ message }) {
@@ -21,7 +20,7 @@ function InputValidation({ message }) {
         slideIn: { y: 0, opacity: 1 },
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null, messages && messages.length > 0 && (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true }, messages.map(msg => (React__default["default"].createElement(framerMotion.motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
-        React__default["default"].createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
+        React__default["default"].createElement("div", { className: css_248z.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
             React__default["default"].createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }),
             React__default["default"].createElement(Text.Text, { size: "small", variation: "error" }, msg)))))))));
 }

package/dist/LightBox/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-8472bc9d.js');
+var LightBox = require('../LightBox-37972860.js');
 require('react');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks');
 require('../style-inject.es-9d2f5f4e.js');
-require('../ButtonDismiss-d2d16622.js');
-require('../Button-186ef2c1.js');
+require('../ButtonDismiss-e2453670.js');
+require('../Button-21c7bf89.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
+require('../Typography-7848765d.js');
 
 
 

package/dist/{LightBox-8472bc9d.js → LightBox-37972860.js}

@@ -6,8 +6,8 @@ var ReactDOM = require('react-dom');
 var debounce = require('lodash/debounce');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('./ButtonDismiss-d2d16622.js');
-var Button = require('./Button-186ef2c1.js');
+var ButtonDismiss = require('./ButtonDismiss-e2453670.js');
+var Button = require('./Button-21c7bf89.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,8 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z = "._2qgU3ylcPWUJGRthB18cb,\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._2qgU3ylcPWUJGRthB18cb {\n  right: var(--space-base);\n}\n\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  left: var(--space-base);\n}\n\n._3FuSx2b8rfxjzTQKeVn6MW {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._2gGRj41uQJhcl0zcSNgsOA {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: var(--elevation-base);\n  padding: var(--space-small) var(--space-base);\n  color: var(--color-text--reverse--secondary);\n  font-size: var(--typography--fontSize-large);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.oyIA3-aR1Fvwn0lpp1Mgx {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1PPDSsP7v3FAZG3DA--Oq3 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n._23IH8HE3ZATpurQqLyWj-l {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n}\n\n._2UNyNw_u8HDWIzzxcSLUU6 {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
-var styles = {"next":"_2qgU3ylcPWUJGRthB18cb","prev":"_27gh3HPkx5J1Ru4Tqp_1tF","lightboxWrapper":"_3FuSx2b8rfxjzTQKeVn6MW","toolbar":"_2gGRj41uQJhcl0zcSNgsOA","title":"oyIA3-aR1Fvwn0lpp1Mgx","imagesWrapper":"_1PPDSsP7v3FAZG3DA--Oq3","overlay":"_23IH8HE3ZATpurQqLyWj-l","image":"_2UNyNw_u8HDWIzzxcSLUU6"};
+var css_248z = ".next,\n.prev {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n.next {\n  right: var(--space-base);\n}\n\n.prev {\n  left: var(--space-base);\n}\n\n.lightboxWrapper {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n.toolbar {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: var(--elevation-base);\n  padding: var(--space-small) var(--space-base);\n  color: var(--color-text--reverse--secondary);\n  font-size: var(--typography--fontSize-large);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.title {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.imagesWrapper {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n.overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n}\n\n.image {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
 styleInject_es.styleInject(css_248z);
 
 /* eslint-disable max-statements */
@@ -69,18 +68,18 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     React.useEffect(() => {
         setCurrentImageIndex(imageIndex);
     }, [imageIndex, open]);
-    const template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
-        React__default["default"].createElement("div", { className: styles.toolbar },
-            React__default["default"].createElement("span", { className: styles.title }, images[currentImageIndex].title),
+    const template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: css_248z.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
+        React__default["default"].createElement("div", { className: css_248z.toolbar },
+            React__default["default"].createElement("span", { className: css_248z.title }, images[currentImageIndex].title),
             React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
-        React__default["default"].createElement("div", { className: styles.imagesWrapper },
+        React__default["default"].createElement("div", { className: css_248z.imagesWrapper },
             React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false },
-                React__default["default"].createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+                React__default["default"].createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: css_248z.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
             React__default["default"].createElement(NextButton, { onClick: debouncedHandleNext }))),
-        React__default["default"].createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
-        React__default["default"].createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+        React__default["default"].createElement("div", { className: css_248z.toolbar }, images[currentImageIndex].caption),
+        React__default["default"].createElement("div", { className: css_248z.overlay, onClick: handleRequestClose })))));
     return ReactDOM__default["default"].createPortal(template, document.body);
     function handleMovePrevious() {
         setDirection(-1);
@@ -104,11 +103,11 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     }
 }
 function PreviousButton({ onClick }) {
-    return (React__default["default"].createElement("div", { className: styles.prev },
+    return (React__default["default"].createElement("div", { className: css_248z.prev },
         React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
 function NextButton({ onClick }) {
-    return (React__default["default"].createElement("div", { className: styles.next },
+    return (React__default["default"].createElement("div", { className: css_248z.next },
         React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 

package/dist/List/index.js

@@ -7,57 +7,54 @@ var classnames = require('classnames');
 var lodash = require('lodash');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Text = require('../Text-4c04ddc3.js');
-var Heading = require('../Heading-8c6e4e0b.js');
-var Typography = require('../Typography-dd9717e7.js');
-var Markdown = require('../Markdown-5d86d6e7.js');
-var Emphasis = require('../Emphasis-53e963b5.js');
+var Text = require('../Text-bc836227.js');
+var Heading = require('../Heading-1a5bf504.js');
+var Typography = require('../Typography-7848765d.js');
+var Markdown = require('../Markdown-f8b1c2cf.js');
+var Emphasis = require('../Emphasis-3cfd55cf.js');
 require('@jobber/design');
 require('react-markdown');
-require('../Content-af82acba.js');
+require('../Content-373bbaee.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_248z$2 = "._234cpupwZcQnNH7lwFvu3w {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.-W0NAXIbeNMPrAHa9AjQF:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp {\n  position: relative;\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp:not(:last-child) ._234cpupwZcQnNH7lwFvu3w {\n  padding-bottom: var(--space-large);\n}\n";
-var styles$1 = {"list":"_234cpupwZcQnNH7lwFvu3w","item":"-W0NAXIbeNMPrAHa9AjQF","section":"_3gKGIvbWaCDPfDxdX_9dIp"};
+var css_248z$2 = ".list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.section {\n  position: relative;\n}\n\n.section:not(:last-child) .list {\n  padding-bottom: var(--space-large);\n}\n";
 styleInject_es.styleInject(css_248z$2);
 
-var css_248z$1 = ".LPbjUDShk6cK3GXbzTC55 {\n  position: sticky;\n  top: 0;\n  padding: var(--space-small) var(--space-base);\n  border-bottom: 1px solid var(--color-border--section);\n  background-color: var(--color-surface);\n}\n\n._20KoAmqdzhCQHgym7QjG7l {\n  border-bottom-color: var(--color-greyBlue--light);\n  color: var(--color-greyBlue--light);\n}\n\n._1oDR35oSyONUPA0d94_kD- {\n  border-bottom-color: var(--color-green);\n  color: var(--color-green);\n}\n\n._17GCZtU8iTLoixbxcutdmt,\n._2GunPnEK6S7nxA3WhlBVoi {\n  border-bottom-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n._3pKjX8118O_JdihnJByRU7 {\n  border-bottom-color: var(--color-orange);\n  color: var(--color-orange);\n}\n\n._3Mm3SSqRayToZ4YENnBXTi {\n  border-bottom-color: var(--color-red);\n  color: var(--color-red);\n}\n\n._1JgWVq-AQjSXSFCthM9I_i {\n  border-bottom-color: var(--color-teal);\n  color: var(--color-teal);\n}\n";
-var sectionStyles = {"sectionHeader":"LPbjUDShk6cK3GXbzTC55","greyBlue":"_20KoAmqdzhCQHgym7QjG7l","green":"_1oDR35oSyONUPA0d94_kD-","blue":"_17GCZtU8iTLoixbxcutdmt","archived":"_2GunPnEK6S7nxA3WhlBVoi","orange":"_3pKjX8118O_JdihnJByRU7","red":"_3Mm3SSqRayToZ4YENnBXTi","teal":"_1JgWVq-AQjSXSFCthM9I_i"};
+var css_248z$1 = ".sectionHeader {\n  position: sticky;\n  top: 0;\n  padding: var(--space-small) var(--space-base);\n  border-bottom: 1px solid var(--color-border--section);\n  background-color: var(--color-surface);\n}\n\n.greyBlue {\n  border-bottom-color: var(--color-greyBlue--light);\n  color: var(--color-greyBlue--light);\n}\n\n.green {\n  border-bottom-color: var(--color-green);\n  color: var(--color-green);\n}\n\n.blue,\n.archived {\n  border-bottom-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n.orange {\n  border-bottom-color: var(--color-orange);\n  color: var(--color-orange);\n}\n\n.red {\n  border-bottom-color: var(--color-red);\n  color: var(--color-red);\n}\n\n.teal {\n  border-bottom-color: var(--color-teal);\n  color: var(--color-teal);\n}\n";
 styleInject_es.styleInject(css_248z$1);
 
-var css_248z = "._2iTo0SHtApSj1Pz0jAi44D {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  text-decoration: none;\n  background-color: transparent;\n  transition: background-color var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iTo0SHtApSj1Pz0jAi44D > * {\n  padding: var(--space-small);\n}\n\n._3fuo63dN8BYlteQspAWEB {\n  cursor: pointer;\n}\n\n._3fuo63dN8BYlteQspAWEB:hover,\n._3fuo63dN8BYlteQspAWEB:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2Ba10JIy4V4gV8mql4xqHo {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: var(--space-large);\n  height: var(--space-large);\n  box-sizing: content-box;\n}\n\n._1vz3KPZUhpnltJyF8wN7V1 {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  min-width: 0;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._1vkwx_Vuhn930_zHsgEmz3 {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  text-align: right;\n}\n\n/* States */\n\n._2QvWobst7cPMHu3OkCl2SG {\n  background-color: var(--color-surface--active);\n}\n\n/* TODO: Move truncate in typography */\n\n.d36Bq7j0EKz3c5tj7HrWN {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
-var styles = {"action":"_2iTo0SHtApSj1Pz0jAi44D","hoverable":"_3fuo63dN8BYlteQspAWEB","icon":"_2Ba10JIy4V4gV8mql4xqHo","info":"_1vz3KPZUhpnltJyF8wN7V1","amount":"_1vkwx_Vuhn930_zHsgEmz3","isActive":"_2QvWobst7cPMHu3OkCl2SG","truncate":"d36Bq7j0EKz3c5tj7HrWN"};
+var css_248z = ".action {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  text-decoration: none;\n  background-color: transparent;\n  transition: background-color var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n.action > * {\n  padding: var(--space-small);\n}\n\n.hoverable {\n  cursor: pointer;\n}\n\n.hoverable:hover,\n.hoverable:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n.icon {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: var(--space-large);\n  height: var(--space-large);\n  box-sizing: content-box;\n}\n\n.info {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  min-width: 0;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n.amount {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  text-align: right;\n}\n\n/* States */\n\n.isActive {\n  background-color: var(--color-surface--active);\n}\n\n/* TODO: Move truncate in typography */\n\n.truncate {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
 styleInject_es.styleInject(css_248z);
 
 function ListItem({ caption, content, icon, iconColor, id, isActive, onClick, title, url, value, }) {
-    const actionClasses = classnames__default["default"](styles.action, isActive && styles.isActive, (onClick || url) && styles.hoverable);
+    const actionClasses = classnames__default["default"](css_248z.action, isActive && css_248z.isActive, (onClick || url) && css_248z.hoverable);
     const Wrapper = url ? "a" : "button";
     const buttonProps = Object.assign({}, (Wrapper === "button" && { role: "button", type: "button" }));
     return (React__default["default"].createElement(Wrapper, Object.assign({ id: id.toString(), className: actionClasses, href: url, onClick: onClick }, buttonProps),
-        icon && (React__default["default"].createElement("div", { className: styles.icon },
+        icon && (React__default["default"].createElement("div", { className: css_248z.icon },
             React__default["default"].createElement(Icon.Icon, { name: icon, color: iconColor }))),
-        React__default["default"].createElement("div", { className: styles.info },
+        React__default["default"].createElement("div", { className: css_248z.info },
             title && React__default["default"].createElement(Heading.Heading, { level: 5 }, title),
             React__default["default"].createElement(Description, { content: content }),
             caption && (React__default["default"].createElement(Text.Text, { variation: "subdued" },
                 React__default["default"].createElement(Typography.Typography, { element: "span", size: "small", emphasisType: "italic" }, caption)))),
-        value && (React__default["default"].createElement("div", { className: styles.amount },
+        value && (React__default["default"].createElement("div", { className: css_248z.amount },
             React__default["default"].createElement(Text.Text, null,
                 React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" }, value))))));
 }
 function Description({ content }) {
     if (content instanceof Array) {
         return (React__default["default"].createElement(React__default["default"].Fragment, null, content.map((item, i) => (React__default["default"].createElement(Text.Text, { key: i },
-            React__default["default"].createElement("span", { className: styles.truncate },
+            React__default["default"].createElement("span", { className: css_248z.truncate },
                 React__default["default"].createElement(Markdown.Markdown, { content: item, basicUsage: true })))))));
     }
     else {
         return (React__default["default"].createElement(Text.Text, null,
-            React__default["default"].createElement("span", { className: styles.truncate },
+            React__default["default"].createElement("span", { className: css_248z.truncate },
                 React__default["default"].createElement(Markdown.Markdown, { content: content, basicUsage: true }))));
     }
 }
@@ -72,16 +69,16 @@ function List({ items }) {
     }
 }
 function DisplayList({ items }) {
-    return (React__default["default"].createElement("ul", { className: styles$1.list }, items.map(item => (React__default["default"].createElement("li", { key: item.id, className: styles$1.item },
+    return (React__default["default"].createElement("ul", { className: css_248z$2.list }, items.map(item => (React__default["default"].createElement("li", { key: item.id, className: css_248z$2.item },
         React__default["default"].createElement(ListItem, Object.assign({}, item)))))));
 }
 function SectionedList({ items }) {
     const sectionedItems = lodash.groupBy(items, item => lodash.get(item, "section", "Other"));
-    const sectionHeaderClassNames = classnames__default["default"](sectionStyles.sectionHeader);
-    return (React__default["default"].createElement("ul", { className: styles$1.list }, Object.keys(sectionedItems).map(sectionName => (React__default["default"].createElement("li", { key: sectionName, className: styles$1.section },
+    const sectionHeaderClassNames = classnames__default["default"](css_248z$1.sectionHeader);
+    return (React__default["default"].createElement("ul", { className: css_248z$2.list }, Object.keys(sectionedItems).map(sectionName => (React__default["default"].createElement("li", { key: sectionName, className: css_248z$2.section },
         React__default["default"].createElement("div", { className: sectionHeaderClassNames },
             React__default["default"].createElement(Typography.Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
-        React__default["default"].createElement("ul", { className: styles$1.list }, sectionedItems[sectionName].map(item => (React__default["default"].createElement("li", { key: item.id, className: styles$1.item },
+        React__default["default"].createElement("ul", { className: css_248z$2.list }, sectionedItems[sectionName].map(item => (React__default["default"].createElement("li", { key: item.id, className: css_248z$2.item },
             React__default["default"].createElement(ListItem, Object.assign({}, item)))))))))));
 }
 

package/dist/Markdown/index.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Markdown = require('../Markdown-5d86d6e7.js');
+var Markdown = require('../Markdown-f8b1c2cf.js');
 require('react');
 require('react-markdown');
-require('../Text-4c04ddc3.js');
-require('../Typography-dd9717e7.js');
+require('../Text-bc836227.js');
+require('../Typography-7848765d.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Emphasis-53e963b5.js');
-require('../Heading-8c6e4e0b.js');
-require('../Content-af82acba.js');
+require('../Emphasis-3cfd55cf.js');
+require('../Heading-1a5bf504.js');
+require('../Content-373bbaee.js');
 
 
 

package/dist/{Markdown-5d86d6e7.js → Markdown-f8b1c2cf.js}

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var ReactMarkdown = require('react-markdown');
-var Text = require('./Text-4c04ddc3.js');
-var Emphasis = require('./Emphasis-53e963b5.js');
-var Heading = require('./Heading-8c6e4e0b.js');
-var Content = require('./Content-af82acba.js');
+var Text = require('./Text-bc836227.js');
+var Emphasis = require('./Emphasis-3cfd55cf.js');
+var Heading = require('./Heading-1a5bf504.js');
+var Content = require('./Content-373bbaee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Menu/index.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-b5e8d8f9.js');
+var Menu = require('../Menu-6605548e.js');
 require('react');
 require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-186ef2c1.js');
+require('../Button-21c7bf89.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-dd9717e7.js');
+require('../Typography-7848765d.js');