@jobber/components 4.14.0 → 4.14.1-pre.3

package/dist/Autocomplete/index.js

@@ -13,13 +13,13 @@ var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-ac475d1d.js');
+var InputText = require('../InputText-e5738583.js');
 require('../Typography-fd6f932a.js');
 require('@jobber/design');
-require('../FormField-e2ff403a.js');
+require('../FormField-53d521d5.js');
 require('uuid');
 require('react-hook-form');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../InputValidation-bf743417.js');
 require('framer-motion');

package/dist/Banner/index.js

@@ -8,7 +8,7 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-e7ed0974.js');
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
 require('react-router-dom');

package/dist/Button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 require('react');
 require('classnames');
 require('react-router-dom');

package/dist/Button-7698424c.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var reactRouterDom = require('react-router-dom');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-fd6f932a.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 = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: var(--timing-loading--extended);\n}\n\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: calc(16px / 16) solid rgb(125, 176, 14);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  letter-spacing: calc(16px / 40);\n  letter-spacing: var(--typography--letterSpacing-loose);\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.U9VsquOtk2I- * {\n  fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n  color: inherit;\n  /* required to over-ride very specific fill from <Icon> */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  border-color: rgb(81, 114, 9);\n  border-color: var(--button--color-variation--hover);\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._4W8X0dxZDK4- {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n.vDKO-cmh8vY- {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  color: rgba(255, 255, 255, 1);\n  color: var(--button--color-primaryLabel);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--button--color-variation);\n  fill: rgba(255, 255, 255, 1);\n  fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  background-color: rgb(81, 114, 9);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: rgb(125, 176, 14);\n  border-color: var(--button--color-variation);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus {\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus {\n  border-color: transparent;\n  color: rgb(66, 78, 86);\n  color: var(--color-interactive--subtle--hover);\n  fill: rgb(66, 78, 86);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n  min-height: calc(16px * 1.5);\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  letter-spacing: 0;\n}\n\n.amIh7vPETfo- {\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc((16px * 1) - 4px);\n  padding: 0 calc(calc(16px * 1) - 4px);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n.ON6ezOojFVo- {\n  min-height: calc(16px * 3);\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 calc(16px * 1);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.Qq-idRLJTCk- {\n  width: calc(16px * 2.25);\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n  width: calc((16px / 2) * 3);\n  width: calc(calc(16px / 2) * 3);\n  width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc((16px * 1) * 2.25);\n  width: calc(calc(16px * 1) * 2.25);\n  width: calc(var(--space-base) * 2.25);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n  width: calc((16px * 1.5) * 2);\n  width: calc(calc(16px * 1.5) * 2);\n  width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n}\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.EWh1gvgPJQg- > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.ZCHqCEyLBw0- {\n  width: 100%;\n}\n\n.VVFKEv1ksMA- {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.1) 50%,\n    rgba(0, 0, 0, 0.1) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: calc(16px * 2) calc(16px * 2);\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2000ms;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2000ms;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: a8Q-0lnKH5M-;\n          animation-name: a8Q-0lnKH5M-;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0.25) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.25) 50%,\n    rgba(255, 255, 255, 0.25) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
+var styles = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBdJ0k-","destructive":"_4W8X0dxZDK4-","subtle":"vDKO-cmh8vY-","primary":"FXqN12jWtPo-","disabled":"bg-l22drjd0-","secondary":"pf6G840lKdA-","tertiary":"m7DbwRZWcNk-","small":"STSDgSRREx4-","base":"amIh7vPETfo-","large":"ON6ezOojFVo-","onlyIcon":"Qq-idRLJTCk-","hasIconAndLabel":"EWh1gvgPJQg-","iconOnRight":"pfzTUMgNb3o-","fullWidth":"ZCHqCEyLBw0-","loading":"VVFKEv1ksMA-","animateStripes":"a8Q-0lnKH5M-"};
+styleInject_es.styleInject(css_248z);
+
+function Button(props) {
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
+    const buttonClassNames = classnames__default["default"](styles.button, styles[size], {
+        [styles.onlyIcon]: icon && !label,
+        [styles.hasIconAndLabel]: icon && label,
+        [styles.iconOnRight]: iconOnRight,
+        [styles[variation]]: variation,
+        [styles[type]]: type,
+        [styles.disabled]: disabled,
+        [styles.fullWidth]: fullWidth,
+        [styles.loading]: loading,
+    });
+    const buttonType = submit ? "submit" : "button";
+    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
+        id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel });
+    const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
+    if (to) {
+        return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+    }
+    const Tag = url ? "a" : "button";
+    return React__default["default"].createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+}
+function ButtonInternals({ label, icon, size = "base" }) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        icon && React__default["default"].createElement(Icon.Icon, { name: icon, size: size }),
+        React__default["default"].createElement(Typography.Typography, { element: "span", fontWeight: "extraBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
+}
+function getTypeSizes(size) {
+    switch (size) {
+        case "small":
+            return "small";
+        case "large":
+            return "large";
+        default:
+            return "base";
+    }
+}
+
+exports.Button = Button;

package/dist/ButtonDismiss/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-7d9deeab.js');
+var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
 require('react');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{ButtonDismiss-7d9deeab.js → ButtonDismiss-c7ee94a9.js}

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

package/dist/Card/index.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-140ec4c2.js');
+var Card = require('../Card-405e6575.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-2528a30a.js');
+require('../Menu-d2445bae.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Card-140ec4c2.js → Card-405e6575.js}

@@ -4,8 +4,8 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
-var Button = require('./Button-69409e46.js');
-var Menu = require('./Menu-2528a30a.js');
+var Button = require('./Button-7698424c.js');
+var Menu = require('./Menu-d2445bae.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -15,7 +15,7 @@ var lodash = require('lodash');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var reactPopper = require('react-popper');
 var Text = require('../Text-e7ed0974.js');
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 require('@jobber/design');
 require('color');

package/dist/ConfirmationModal/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-522a9311.js');
+var ConfirmationModal = require('../ConfirmationModal-7835c534.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-4a620c9f.js');
+require('../Modal-29fdefc8.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');
@@ -14,11 +14,11 @@ require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-7d9deeab.js');
+require('../ButtonDismiss-c7ee94a9.js');
 require('../Content-a6590328.js');
 require('../Markdown-53a0bfda.js');
 require('react-markdown');

package/dist/{ConfirmationModal-522a9311.js → ConfirmationModal-7835c534.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-4a620c9f.js');
+var Modal = require('./Modal-29fdefc8.js');
 var Content = require('./Content-a6590328.js');
 var Markdown = require('./Markdown-53a0bfda.js');
 

package/dist/DataDump/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-140ec4c2.js');
+var Card = require('../Card-405e6575.js');
 var Content = require('../Content-a6590328.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-2528a30a.js');
+require('../Menu-d2445bae.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/DataTable/index.js

@@ -8,10 +8,10 @@ var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-004ed21f.js');
-var Button = require('../Button-69409e46.js');
+var Option = require('../Option-d3ad5f17.js');
+var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-require('../FormField-e2ff403a.js');
+require('../FormField-53d521d5.js');
 require('uuid');
 require('react-hook-form');
 require('../Icon-405a216c.js');

package/dist/DatePicker/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-5ead9469.js');
+var DatePicker = require('../DatePicker-98f03314.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks/useRefocusOnActivator');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{DatePicker-5ead9469.js → DatePicker-98f03314.js}

@@ -6,7 +6,7 @@ var ReactDatePicker = require('react-datepicker');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Typography = require('./Typography-fd6f932a.js');
-var Button = require('./Button-69409e46.js');
+var Button = require('./Button-7698424c.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Drawer/index.js

@@ -6,9 +6,9 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-a1191b15.js');
-var ButtonDismiss = require('../ButtonDismiss-7d9deeab.js');
+var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/FeatureSwitch/index.js

@@ -10,7 +10,7 @@ var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-a6590328.js');
 var Switch = require('../Switch-e75145cc.js');
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 var Markdown = require('../Markdown-53a0bfda.js');
 require('../Typography-fd6f932a.js');

package/dist/FormField/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormField = require('../FormField-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{FormField-e2ff403a.js → FormField-53d521d5.js}

@@ -6,7 +6,7 @@ var uuid = require('uuid');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var Button = require('./Button-69409e46.js');
+var Button = require('./Button-7698424c.js');
 var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-e7ed0974.js');
 var InputValidation = require('./InputValidation-bf743417.js');

package/dist/FormatFile/index.js

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-01a00e98.js');
+var FormatFile = require('../FormatFile-8450a8de.js');
 require('react');
 require('classnames');
 require('filesize');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
-require('../ConfirmationModal-522a9311.js');
+require('../ConfirmationModal-7835c534.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-4a620c9f.js');
+require('../Modal-29fdefc8.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('../Heading-a1191b15.js');
-require('../ButtonDismiss-7d9deeab.js');
+require('../ButtonDismiss-c7ee94a9.js');
 require('../Content-a6590328.js');
 require('../Markdown-53a0bfda.js');
 require('react-markdown');

package/dist/{FormatFile-01a00e98.js → FormatFile-8450a8de.js}

@@ -4,8 +4,8 @@ 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-69409e46.js');
-var ConfirmationModal = require('./ConfirmationModal-522a9311.js');
+var Button = require('./Button-7698424c.js');
+var ConfirmationModal = require('./ConfirmationModal-7835c534.js');
 var Glimmer = require('./Glimmer-f670c24e.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-fd6f932a.js');

package/dist/Gallery/index.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var LightBox = require('../LightBox-e147a5bc.js');
-var FormatFile = require('../FormatFile-01a00e98.js');
-var Button = require('../Button-69409e46.js');
+var LightBox = require('../LightBox-b59ee23b.js');
+var FormatFile = require('../FormatFile-8450a8de.js');
+var Button = require('../Button-7698424c.js');
 require('framer-motion');
 require('react-dom');
 require('lodash/debounce');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
-require('../ButtonDismiss-7d9deeab.js');
+require('../ButtonDismiss-c7ee94a9.js');
 require('filesize');
-require('../ConfirmationModal-522a9311.js');
-require('../Modal-4a620c9f.js');
+require('../ConfirmationModal-7835c534.js');
+require('../Modal-29fdefc8.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
 require('../Content-a6590328.js');

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { GridCell, GridCellProps } from "./GridCell";
+import alignments from "./GridAlign.css";
+interface GridProps {
+    /**
+     * Add spacing between elements.
+     */
+    readonly gap?: boolean;
+    /**
+     * Adjust the alignment of columns. We only support a few select properties
+     * from `align-items` due to the nature of the other properties acting the
+     * same. Read more about [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property values.
+     */
+    readonly alignItems?: keyof typeof alignments;
+    /**
+     * Array of `Grid.Cell` children
+     */
+    readonly children: Array<ReactElement<GridCellProps>>;
+}
+export declare const GRID_TEST_ID = "ATL-Grid";
+export declare function Grid({ alignItems, gap, children, }: GridProps): JSX.Element;
+export declare namespace Grid {
+    var Cell: typeof GridCell;
+}
+export {};

package/dist/Grid/GridCell/GridCell.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from "react";
+/**
+ * Breakpoints that we support
+ */
+declare const breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+/**
+ *  Grab the type from breakpoints const
+ */
+type ValuesOf<T extends readonly unknown[]> = T[number];
+type Breakpoints = ValuesOf<typeof breakpoints>;
+type ColumnSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface GridCellProps {
+    /**
+     * Set how many columns wide the cell is in the grid
+     */
+    readonly size: {
+        [Breakpoint in Breakpoints]?: ColumnSizes;
+    };
+}
+export declare const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+export declare function GridCell({ size, children }: PropsWithChildren<GridCellProps>): JSX.Element;
+export {};

package/dist/Grid/GridCell/index.d.ts

@@ -0,0 +1 @@
+export * from "./GridCell";

package/dist/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from "./Grid";

package/dist/Grid/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+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_248z$2 = "._3ktwlV3aNFk- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:490px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 640px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width:1440px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width:1680px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
+var styles$1 = {"gridCell":"_3ktwlV3aNFk-"};
+styleInject_es.styleInject(css_248z$2);
+
+/**
+ * Breakpoints that we support
+ */
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const MAX_COLUMNS = 12;
+const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
+function GridCell({ size, children }) {
+    /**
+     * Build CSS variables for column sizes for all possible breakpoints to size
+     * the column
+     */
+    const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
+    return (React__default["default"].createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles$1.gridCell, style: cssSizeVariables }, children));
+}
+function getSizeCSSVariables(size) {
+    return (breakpointsObj, currentSize) => {
+        let columnSize = size[currentSize];
+        // If a column size isn't provided in the size prop, use the previous
+        // breakpoint's value
+        if (!columnSize) {
+            const existingValues = Object.values(breakpointsObj);
+            const lastKnownValue = existingValues[existingValues.length - 1];
+            columnSize = lastKnownValue || MAX_COLUMNS;
+        }
+        breakpointsObj[`--gridCell--size-${currentSize}`] = columnSize;
+        return breakpointsObj;
+    };
+}
+
+var css_248z$1 = ".NqFGJV-UF3Q- {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n@media (min-width:768px) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n  }\n}\n\n@media (--medium-screens-and-up) {\n  .IZLiiSquUTM- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n  }\n}\n";
+var styles = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = "._8XlrWg3FV-Q- {\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.uKzqJPlYxJs- {\n  -ms-flex-align: start;\n      align-items: start;\n}\n\n.CSBjeFlj2xQ- {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.BYyFdzONXyk- {\n  -ms-flex-align: stretch;\n      align-items: stretch;\n}\n";
+var alignments = {"center":"_8XlrWg3FV-Q-","start":"uKzqJPlYxJs-","end":"CSBjeFlj2xQ-","stretch":"BYyFdzONXyk-"};
+styleInject_es.styleInject(css_248z);
+
+const GRID_TEST_ID = "ATL-Grid";
+function Grid({ alignItems = "start", gap = true, children, }) {
+    const classnames = classnames__default["default"](styles.grid, alignments[alignItems], {
+        [styles.gap]: gap,
+    });
+    return (React__default["default"].createElement("div", { "data-testid": GRID_TEST_ID, className: classnames }, children));
+}
+Grid.Cell = GridCell;
+
+exports.GRID_TEST_ID = GRID_TEST_ID;
+exports.Grid = Grid;

package/dist/InputAvatar/index.js

@@ -6,9 +6,9 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-1aa30ee1.js');
-var InputFile = require('../InputFile-a7c0fbbc.js');
+var InputFile = require('../InputFile-ee80726f.js');
 var ProgressBar = require('../ProgressBar-5dfc1885.js');
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 require('classnames');
 require('color');
 require('../Icon-405a216c.js');

package/dist/InputDate/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lodash = require('lodash');
 var React = require('react');
-var FormField = require('../FormField-e2ff403a.js');
-var DatePicker = require('../DatePicker-5ead9469.js');
+var FormField = require('../FormField-53d521d5.js');
+var DatePicker = require('../DatePicker-98f03314.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputEmail/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-a7c0fbbc.js');
+var InputFile = require('../InputFile-ee80726f.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,7 +10,7 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputFile-a7c0fbbc.js → InputFile-ee80726f.js}

@@ -7,7 +7,7 @@ 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-69409e46.js');
+var Button = require('./Button-7698424c.js');
 var Content = require('./Content-a6590328.js');
 var Typography = require('./Typography-fd6f932a.js');
 

package/dist/InputNumber/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputPassword/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/InputPhoneNumber/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('uuid');
 require('react-hook-form');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
@@ -99,7 +99,7 @@ function InputPhoneNumber(_a) {
         // Remove special characters from pattern
         const cleanValue = value.replace(new RegExp(`[${specialCharacters}]`, "g"), "");
         const cleanValueRequiredLength = (pattern.match(/\*/g) || []).length;
-        if (cleanValue.length < cleanValueRequiredLength) {
+        if (cleanValue.length > 0 && cleanValue.length < cleanValueRequiredLength) {
             return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
         }
         if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {

package/dist/InputText/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-ac475d1d.js');
+var InputText = require('../InputText-e5738583.js');
 require('react');
-require('../FormField-e2ff403a.js');
+require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{InputText-ac475d1d.js → InputText-e5738583.js}

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

package/dist/InputTime/index.js

@@ -6,12 +6,12 @@ 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-e2ff403a.js');
+var FormField = require('../FormField-53d521d5.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/LightBox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-e147a5bc.js');
+var LightBox = require('../LightBox-b59ee23b.js');
 require('react');
 require('framer-motion');
 require('react-dom');
@@ -11,8 +11,8 @@ require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
-require('../ButtonDismiss-7d9deeab.js');
-require('../Button-69409e46.js');
+require('../ButtonDismiss-c7ee94a9.js');
+require('../Button-7698424c.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');

package/dist/{LightBox-e147a5bc.js → LightBox-b59ee23b.js}

@@ -8,8 +8,8 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('./ButtonDismiss-7d9deeab.js');
-var Button = require('./Button-69409e46.js');
+var ButtonDismiss = require('./ButtonDismiss-c7ee94a9.js');
+var Button = require('./Button-7698424c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Menu/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-2528a30a.js');
+var Menu = require('../Menu-d2445bae.js');
 require('react');
 require('uuid');
 require('classnames');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/{Menu-2528a30a.js → Menu-d2445bae.js}

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Button = require('./Button-69409e46.js');
+var Button = require('./Button-7698424c.js');
 var Typography = require('./Typography-fd6f932a.js');
 var Icon = require('./Icon-405a216c.js');
 

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-4a620c9f.js');
+var Modal = require('../Modal-29fdefc8.js');
 require('react');
 require('react-dom');
 require('classnames');
@@ -13,11 +13,11 @@ require('@jobber/hooks/useFocusTrap');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Heading-a1191b15.js');
 require('../Typography-fd6f932a.js');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ButtonDismiss-7d9deeab.js');
+require('../ButtonDismiss-c7ee94a9.js');
 
 
 

package/dist/{Modal-4a620c9f.js → Modal-29fdefc8.js}

@@ -9,8 +9,8 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-a1191b15.js');
-var Button = require('./Button-69409e46.js');
-var ButtonDismiss = require('./ButtonDismiss-7d9deeab.js');
+var Button = require('./Button-7698424c.js');
+var ButtonDismiss = require('./ButtonDismiss-c7ee94a9.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/{Option-004ed21f.js → Option-d3ad5f17.js}

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

package/dist/Page/index.js

@@ -10,8 +10,8 @@ var Heading = require('../Heading-a1191b15.js');
 var Text = require('../Text-e7ed0974.js');
 var Content = require('../Content-a6590328.js');
 var Markdown = require('../Markdown-53a0bfda.js');
-var Button = require('../Button-69409e46.js');
-var Menu = require('../Menu-2528a30a.js');
+var Button = require('../Button-7698424c.js');
+var Menu = require('../Menu-d2445bae.js');
 var Emphasis = require('../Emphasis-76a10790.js');
 require('../Typography-fd6f932a.js');
 require('react-markdown');

package/dist/Popover/index.js

@@ -6,8 +6,8 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('../ButtonDismiss-7d9deeab.js');
-require('../Button-69409e46.js');
+var ButtonDismiss = require('../ButtonDismiss-c7ee94a9.js');
+require('../Button-7698424c.js');
 require('classnames');
 require('react-router-dom');
 require('../Icon-405a216c.js');

package/dist/Select/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-004ed21f.js');
+var Option = require('../Option-d3ad5f17.js');
 require('react');
-require('../FormField-e2ff403a.js');
+require('../FormField-53d521d5.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-69409e46.js');
+require('../Button-7698424c.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Toast/index.js

@@ -7,7 +7,7 @@ var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Button = require('../Button-69409e46.js');
+var Button = require('../Button-7698424c.js');
 var Typography = require('../Typography-fd6f932a.js');
 require('@jobber/design');
 require('classnames');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.14.0",
+  "version": "4.14.1-pre.3+b448097d",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.38.1",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "829d4fcd134dc6a9d3b2a0cd0890d0599ded1d08"
+  "gitHead": "b448097df5b2f4548f09f6d2958363077e59fa73"
 }

package/dist/Button-69409e46.js

@@ -1,57 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var reactRouterDom = require('react-router-dom');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-fd6f932a.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 = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: 2s;\n}\n\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: calc(16px / 16) solid rgb(125, 176, 14);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  letter-spacing: calc(16px / 40);\n  letter-spacing: var(--typography--letterSpacing-loose);\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.U9VsquOtk2I- * {\n  fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n  color: inherit;\n  /* required to over-ride very specific fill from <Icon> */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  border-color: rgb(81, 114, 9);\n  border-color: var(--button--color-variation--hover);\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._4W8X0dxZDK4- {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n.vDKO-cmh8vY- {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  color: rgba(255, 255, 255, 1);\n  color: var(--button--color-primaryLabel);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--button--color-variation);\n  fill: rgba(255, 255, 255, 1);\n  fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  background-color: rgb(81, 114, 9);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: rgb(125, 176, 14);\n  border-color: var(--button--color-variation);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus {\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus {\n  border-color: transparent;\n  color: rgb(66, 78, 86);\n  color: var(--color-interactive--subtle--hover);\n  fill: rgb(66, 78, 86);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n  min-height: calc(16px * 1.5);\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  letter-spacing: 0;\n}\n\n.amIh7vPETfo- {\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc((16px * 1) - 4px);\n  padding: 0 calc(calc(16px * 1) - 4px);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n.ON6ezOojFVo- {\n  min-height: calc(16px * 3);\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 calc(16px * 1);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.Qq-idRLJTCk- {\n  width: calc(16px * 2.25);\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n  width: calc((16px / 2) * 3);\n  width: calc(calc(16px / 2) * 3);\n  width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc((16px * 1) * 2.25);\n  width: calc(calc(16px * 1) * 2.25);\n  width: calc(var(--space-base) * 2.25);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n  width: calc((16px * 1.5) * 2);\n  width: calc(calc(16px * 1.5) * 2);\n  width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n}\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.EWh1gvgPJQg- > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.ZCHqCEyLBw0- {\n  width: 100%;\n}\n\n.VVFKEv1ksMA- {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.1) 50%,\n    rgba(0, 0, 0, 0.1) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: calc(16px * 2) calc(16px * 2);\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2s;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2s;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: a8Q-0lnKH5M-;\n          animation-name: a8Q-0lnKH5M-;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0.25) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.25) 50%,\n    rgba(255, 255, 255, 0.25) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
-var styles = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBdJ0k-","destructive":"_4W8X0dxZDK4-","subtle":"vDKO-cmh8vY-","primary":"FXqN12jWtPo-","disabled":"bg-l22drjd0-","secondary":"pf6G840lKdA-","tertiary":"m7DbwRZWcNk-","small":"STSDgSRREx4-","base":"amIh7vPETfo-","large":"ON6ezOojFVo-","onlyIcon":"Qq-idRLJTCk-","hasIconAndLabel":"EWh1gvgPJQg-","iconOnRight":"pfzTUMgNb3o-","fullWidth":"ZCHqCEyLBw0-","loading":"VVFKEv1ksMA-","animateStripes":"a8Q-0lnKH5M-"};
-styleInject_es.styleInject(css_248z);
-
-function Button(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
-    const buttonClassNames = classnames__default["default"](styles.button, styles[size], {
-        [styles.onlyIcon]: icon && !label,
-        [styles.hasIconAndLabel]: icon && label,
-        [styles.iconOnRight]: iconOnRight,
-        [styles[variation]]: variation,
-        [styles[type]]: type,
-        [styles.disabled]: disabled,
-        [styles.fullWidth]: fullWidth,
-        [styles.loading]: loading,
-    });
-    const buttonType = submit ? "submit" : "button";
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
-        id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel });
-    const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
-    if (to) {
-        return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    const Tag = url ? "a" : "button";
-    return React__default["default"].createElement(Tag, Object.assign({}, tagProps), buttonInternals);
-}
-function ButtonInternals({ label, icon, size = "base" }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, size: size }),
-        React__default["default"].createElement(Typography.Typography, { element: "span", fontWeight: "extraBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
-}
-function getTypeSizes(size) {
-    switch (size) {
-        case "small":
-            return "small";
-        case "large":
-            return "large";
-        default:
-            return "base";
-    }
-}
-
-exports.Button = Button;