@jobber/components 4.91.2-retheme-fe.1 → 4.91.2-retheme-fe.2

package/dist/Autocomplete/index.js

@@ -12,19 +12,18 @@ var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var useIsMounted = require('@jobber/hooks/useIsMounted');
-var Text = require('../Text-f6404c6c.js');
+var Text = require('../Text-fdc65f0b.js');
 var Icon = require('../Icon-405a216c.js');
-var Heading = require('../Heading-a0e38319.js');
-var InputText = require('../InputText-0ce98f14.js');
-require('../Typography-224ae794.js');
+var Heading = require('../Heading-d025ffbb.js');
+var InputText = require('../InputText-8af32879.js');
+require('../Typography-018e1471.js');
 require('@jobber/design');
-require('../useAtlantisConfig-ed0bee66.js');
-require('../FormField-223ccc74.js');
+require('../FormField-5134bf0e.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
-require('../Button-dd7ed8c3.js');
+require('../Button-bb77a513.js');
 require('react-router-dom');
-require('../InputValidation-01b22c68.js');
+require('../InputValidation-9c582130.js');
 require('framer-motion');
 require('../Spinner-e15a3ae0.js');
 

package/dist/Banner/index.js

@@ -6,13 +6,12 @@ var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var useAtlantisConfig = require('../useAtlantisConfig-ed0bee66.js');
 var Icon = require('../Icon-405a216c.js');
-var Text = require('../Text-f6404c6c.js');
-var Button = require('../Button-dd7ed8c3.js');
-require('@jobber/hooks/useSafeLayoutEffect');
+var Text = require('../Text-fdc65f0b.js');
+var Button = require('../Button-bb77a513.js');
+var ButtonDismiss = require('../ButtonDismiss-a1df8656.js');
 require('@jobber/design');
-require('../Typography-224ae794.js');
+require('../Typography-018e1471.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,12 +19,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$2 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .meuT8gYQPJU- {\n  padding: calc((16px * 1) - (16px / 4)) calc(16px * 1);\n  padding: calc(calc(16px * 1) - calc(16px / 4)) calc(16px * 1);\n  padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 40, 55);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.SG8xSJADp2k- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .bocgLmEhcTU- .SG8xSJADp2k- {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n";
+var css_248z$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc((16px * 1) - (16px / 4)) calc(16px * 1);\n  padding: calc(calc(16px * 1) - calc(16px / 4)) calc(16px * 1);\n  padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 40, 55);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n@media (max-width: 489px) {\n\n.lunQ5SOfyLg- {\n    margin: calc((16px / 2) * -1) 0;\n    margin: calc(calc(16px / 2) * -1) 0;\n    margin: calc(var(--space-small) * -1) 0;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.lunQ5SOfyLg- {\n    margin: calc((16px / 2) * -1) 0;\n    margin: calc(calc(16px / 2) * -1) 0;\n    margin: calc(var(--space-small) * -1) 0;\n}\n  }\n\n.SG8xSJADp2k- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--background);\n}\n\n.bocgLmEhcTU- .SG8xSJADp2k- {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n";
 var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-","iconWrapper":"SG8xSJADp2k-"};
-styleInject_es.styleInject(css_248z$2);
-
-var css_248z$1 = ".wWW-2T7rCV0- {\n  background-color: rgb(239, 246, 251);\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n  background-color: rgb(198, 221, 192);\n  background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: rgb(241, 231, 159);\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: rgb(255, 206, 194);\n  background-color: var(--color-red--lighter);\n}\n";
-var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
 styleInject_es.styleInject(css_248z$1);
 
 var css_248z = "._5-B0X5vn0eA- {\n  background-color: rgb(50, 130, 28);\n  background-color: var(--color-success);\n}\n\n.r3hqur-vxwI- {\n  background-color: rgb(199, 20, 0);\n  background-color: var(--color-destructive);\n}\n\n.-c8TbjyV5YU- {\n  background-color: rgb(209, 185, 46);\n  background-color: var(--color-warning);\n}\n\n.bMc69fYWngM- {\n  background-color: rgb(60, 162, 224);\n  background-color: var(--color-informative);\n}\n";
@@ -33,16 +28,11 @@ var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c
 styleInject_es.styleInject(css_248z);
 
 function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
-    if (JOBBER_RETHEME) {
-        return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.iconWrapper, iconStyles[type]) },
-            React__default["default"].createElement(Icon.Icon, { name: icon, color: "white", size: "small" })));
-    }
-    return React__default["default"].createElement(Icon.Icon, { name: icon, color: "greyBlueDark" });
+    return (React__default["default"].createElement("span", { className: classnames__default["default"](styles.iconWrapper, iconStyles[type]) },
+        React__default["default"].createElement(Icon.Icon, { name: icon, color: "surface", size: "small" })));
 }
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
     const [showBanner, setShowBanner] = React.useState(true);
     const bannerIcon = icon || getBannerIcon(type);
     const bannerWidths = {
@@ -52,12 +42,6 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
         widths: bannerWidths,
     });
-    const iconColors = {
-        notice: "informative",
-        success: "success",
-        warning: "warning",
-        error: "critical",
-    };
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
@@ -65,7 +49,7 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
             variation: type === "notice" ? "learning" : "work",
         }, primaryAction);
     }
-    const bannerClassNames = classnames__default["default"](styles.banner, types[type], {
+    const bannerClassNames = classnames__default["default"](styles.banner, {
         [styles.medium]: bannerWidth >= bannerWidths.medium,
     });
     if (!showBanner)
@@ -77,17 +61,14 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
                 React__default["default"].createElement(BannerChildren, null, children)),
             primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
                 React__default["default"].createElement(Button.Button, Object.assign({}, primaryAction))))),
-        dismissible && (React__default["default"].createElement("button", { type: "button", className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
-            React__default["default"].createElement(Icon.Icon, { name: "cross", color: JOBBER_RETHEME ? "interactiveSubtle" : iconColors[type] })))));
+        dismissible && (React__default["default"].createElement("div", { className: styles.closeButton },
+            React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Dismiss notification", onClick: handleClose })))));
     function handleClose() {
         setShowBanner(!showBanner);
         onDismiss && onDismiss();
     }
 }
 function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
-    if (!JOBBER_RETHEME)
-        return;
     switch (type) {
         case "notice":
             return "starburst";

package/dist/Button/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-dd7ed8c3.js');
+var Button = require('../Button-bb77a513.js');
 require('react');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-224ae794.js');
+require('../Typography-018e1471.js');
 
 
 

package/dist/Button-bb77a513.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-018e1471.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--hover);\n  --button--color-primaryLabel: var(--color-surface);\n\n  --button--duration-loading: var(--timing-loading--extended);\n\n  --button--size: 40px;\n}\n\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: 40px;\n  min-height: var(--button--size);\n  box-sizing: border-box;\n  margin: 0;\n  border: calc(16px / 16) solid rgb(50, 130, 28);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  color: rgb(50, 130, 28);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  line-height: 1;\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 ease-out;\n  transition: all var(--timing-base) ease-out;\n  -webkit-appearance: none;\n          appearance: none;\n  fill: rgb(50, 130, 28);\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-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  border-color: rgb(14, 78, 26);\n  border-color: var(--button--color-variation--hover);\n  color: rgb(14, 78, 26);\n  color: var(--button--color-variation--hover);\n  fill: rgb(14, 78, 26);\n  fill: var(--button--color-variation--hover);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n  outline: transparent;\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.vDKO-cmh8vY- {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n._4W8X0dxZDK4- {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--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-visible {\n  color: rgba(255, 255, 255, 1);\n  color: var(--button--color-primaryLabel);\n  background-color: rgb(50, 130, 28);\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-visible {\n  background-color: rgb(14, 78, 26);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: rgb(50, 130, 28);\n  color: var(--button--color-variation);\n  fill: rgb(50, 130, 28);\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(218, 224, 226);\n  border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n  color: rgb(14, 78, 26);\n  color: var(--button--color-variation--hover);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--button--color-surface--hover);\n  fill: rgb(14, 78, 26);\n  fill: var(--button--color-variation--hover);\n}\n\n.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.pf6G840lKdA-:focus-visible,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n  border-color: rgb(14, 78, 26);\n  border-color: 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.m7DbwRZWcNk- {\n  border-color: transparent;\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n  text-decoration-thickness: calc(16px / 8);\n  text-decoration-thickness: var(--border-thick);\n  text-underline-offset: calc(16px / 8);\n  text-underline-offset: var(--space-smallest);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n  background-color: rgb(241, 239, 233);\n  background-color: var(--button--color-surface--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible,\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus-visible,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus-visible {\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-visible,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible {\n  color: rgb(1, 25, 35);\n  color: var(--color-interactive--subtle--hover);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n  fill: rgb(1, 25, 35);\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  --button--size: 24px;\n  padding: calc(16px / 2) calc((16px * 1) - (16px / 4));\n  padding: calc(16px / 2) calc(calc(16px * 1) - calc(16px / 4));\n  padding: var(--space-small) calc(var(--space-base) - var(--space-smaller));\n}\n\n.amIh7vPETfo- {\n  padding: 0 calc(16px * 1);\n  padding: 0 var(--space-base);\n}\n\n.ON6ezOojFVo- {\n  --button--size: 48px;\n  padding: 0 calc((16px * 1) + (16px / 4));\n  padding: 0 calc(calc(16px * 1) + calc(16px / 4));\n  padding: 0 calc(var(--space-base) + var(--space-smaller));\n}\n\n/* Icon */\n\n.U9VsquOtk2I- svg {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n.Qq-idRLJTCk- {\n  width: 40px;\n  width: var(--button--size);\n  padding: 0;\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.EWh1gvgPJQg- > *:first-child {\n  margin-left: calc((16px / 4) * -1);\n  margin-left: calc(calc(16px / 4) * -1);\n  margin-left: calc(var(--space-smaller) * -1);\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  -ms-flex-order: 1;\n      order: 1;\n  margin-left: 0;\n  margin-right: calc((16px / 4) * -1);\n  margin-right: calc(calc(16px / 4) * -1);\n  margin-right: calc(var(--space-smaller) * -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-","subtle":"vDKO-cmh8vY-","destructive":"_4W8X0dxZDK4-","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, role, 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, role: role });
+    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: "semiBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
+}
+function getTypeSizes(size) {
+    switch (size) {
+        case "small":
+            return "base";
+        case "large":
+            return "large";
+        default:
+            return "base";
+    }
+}
+
+exports.Button = Button;

package/dist/ButtonDismiss/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-4a7b9762.js');
+var ButtonDismiss = require('../ButtonDismiss-a1df8656.js');
 require('react');
-require('../Button-dd7ed8c3.js');
+require('../Button-bb77a513.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-224ae794.js');
+require('../Typography-018e1471.js');
 
 
 

package/dist/{ButtonDismiss-4a7b9762.js → ButtonDismiss-a1df8656.js}

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

package/dist/Card/index.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-0d37c3cc.js');
+var Card = require('../Card-69212ecd.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-a0e38319.js');
-require('../Typography-224ae794.js');
-require('../useAtlantisConfig-ed0bee66.js');
-require('@jobber/hooks/useSafeLayoutEffect');
-require('../Button-dd7ed8c3.js');
+require('../Heading-d025ffbb.js');
+require('../Typography-018e1471.js');
+require('../Button-bb77a513.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-98d76ebe.js');
+require('../Menu-f9fb99bb.js');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 
 

package/dist/{Card-0d37c3cc.js → Card-69212ecd.js}

@@ -3,17 +3,17 @@
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Heading = require('./Heading-a0e38319.js');
-var Button = require('./Button-dd7ed8c3.js');
-var Menu = require('./Menu-98d76ebe.js');
+var Heading = require('./Heading-d025ffbb.js');
+var Button = require('./Button-bb77a513.js');
+var Menu = require('./Menu-f9fb99bb.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$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n  --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--card--border);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  outline-color: rgb(131, 151, 160);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n  --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: 8px 8px 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  background-color: rgb(241, 239, 233);\n  background-color: var(--card--header-background);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n  padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n  font-family: \"Inter\", Helvetica, Arial, sans-serif;\n  font-family: var(--typography--fontFamily-normal);\n  font-size: calc((16px * 1) * 1.5);\n  font-size: calc(calc(16px * 1) * 1.5);\n  font-size: var(--typography--fontSize-largest);\n}\n";
-var styles = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};
+var css_248z$1 = ":root {\n  --card--accent-color: var(--color-grey);\n  --card--base-padding: var(--space-base);\n  --card--border: var(--border-base) solid var(--color-border);\n}\n\n._2wxPdv7kELk- {\n  display: block;\n  width: 100%;\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--card--border);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  outline-color: rgb(131, 151, 160);\n  outline-color: var(--color-focus);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n  outline: 0;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n  --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n  border-top-width: 0;\n}\n\n._5LfUFF9DYsk-::before {\n  content: \" \";\n  display: block;\n  margin: 0 calc(-1 * (16px / 16));\n  margin: 0 calc(-1 * calc(16px / 16));\n  margin: 0 calc(-1 * var(--border-base));\n  border-top: 0.375rem solid rgb(181, 181, 181);\n  border-top: 0.375rem solid var(--card--accent-color);\n  border-radius: 8px 8px 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.tRfpysqqk8s- {\n  --card--border: none;\n\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n\n  box-shadow: var(--shadow-base);\n  color: inherit;\n  text-decoration: inherit;\n  cursor: pointer;\n  transition: all 100ms linear;\n  transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1);\n  padding: var(--card--base-padding);\n  padding-bottom: 0;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n";
+var styles = {"card":"_2wxPdv7kELk-","accent":"_5LfUFF9DYsk-","clickable":"tRfpysqqk8s-","header":"fAPeD1InvAI-"};
 styleInject_es.styleInject(css_248z$1);
 
 var css_248z = ".vvT4WQQNm1A- {\n  --card--accent-color: var(--color-request);\n}\n\n.ewWSA-AqPBs- {\n  --card--accent-color: var(--color-quote);\n}\n\n.ZuQFWmcM-38- {\n  --card--accent-color: var(--color-job);\n}\n\n.b9aB-DbfSI8- {\n  --card--accent-color: var(--color-invoice);\n}\n\n._6tFyd9Op3QY- {\n  --card--accent-color: var(--color-blue);\n}\n\n.uFlsik1sMf8- {\n  --card--accent-color: var(--color-blue--light);\n}\n\n._2dO0zCHWU48- {\n  --card--accent-color: var(--color-blue--lighter);\n}\n\n.RR-XaNyu23U- {\n  --card--accent-color: var(--color-blue--lightest);\n}\n\n.HLricrV5TRM- {\n  --card--accent-color: var(--color-blue--dark);\n}\n\n.fvMAXzbYjVo- {\n  --card--accent-color: var(--color-green);\n}\n\n.vppB-fszJ7M- {\n  --card--accent-color: var(--color-green--light);\n}\n\n.EH4yrRyVrog- {\n  --card--accent-color: var(--color-green--lighter);\n}\n\n.jfuIATPvpzw- {\n  --card--accent-color: var(--color-green--lightest);\n}\n\n.mDgzdSzCmlw- {\n  --card--accent-color: var(--color-green--dark);\n}\n\n.OWeyNXobrek- {\n  --card--accent-color: var(--color-lime);\n}\n\n.gBd-jW7hc2A- {\n  --card--accent-color: var(--color-lime--light);\n}\n\n.PZ3p2kISQl8- {\n  --card--accent-color: var(--color-lime--lighter);\n}\n\n.wk56Avrf5u8- {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n.BpxVs0ESZZQ- {\n  --card--accent-color: var(--color-lime--lightest);\n}\n\n.W1Plus-w90s- {\n  --card--accent-color: var(--color-yellowGreen);\n}\n\n.MBvezPZf2r0- {\n  --card--accent-color: var(--color-yellowGreen--light);\n}\n\n.HpMA-8L7gEQ- {\n  --card--accent-color: var(--color-yellowGreen--lighter);\n}\n\n.Z7K3xhC6jU8- {\n  --card--accent-color: var(--color-yellowGreen--lightest);\n}\n\n.qYud5BgZVDQ- {\n  --card--accent-color: var(--color-yellowGreen--dark);\n}\n\n.UmKFuhj-odE- {\n  --card--accent-color: var(--color-yellow);\n}\n\n.urbYXsHvb-o- {\n  --card--accent-color: var(--color-yellow--light);\n}\n\n.J5f4ygfEe1M- {\n  --card--accent-color: var(--color-yellow--lighter);\n}\n\n.f0YOqNTXr2c- {\n  --card--accent-color: var(--color-yellow--lightest);\n}\n\n.zYMhMXskG-o- {\n  --card--accent-color: var(--color-yellow--dark);\n}\n\n.xMW5G3bcZ-U- {\n  --card--accent-color: var(--color-red);\n}\n\n.-O8T8zi0AkQ- {\n  --card--accent-color: var(--color-red--light);\n}\n\n.WNaOw-wPD40- {\n  --card--accent-color: var(--color-red--light);\n}\n\n._3jne5angZmM- {\n  --card--accent-color: var(--color-red--lightest);\n}\n\n.Ce3FxZAnXks- {\n  --card--accent-color: var(--color-red--dark);\n}\n\n.Ubx9QHfbYVg- {\n  --card--accent-color: var(--color-grey);\n}\n\n._9orHaOxo3ew- {\n  --card--accent-color: var(--color-grey--light);\n}\n\n.gvgk4-Qr7G8- {\n  --card--accent-color: var(--color-grey--lighter);\n}\n\n._6dk6hwjKwz8- {\n  --card--accent-color: var(--color-grey--lightest);\n}\n\n.LFsxlyhhXWE- {\n  --card--accent-color: var(--color-grey--dark);\n}\n\n.MNze-s50Qx0- {\n  --card--accent-color: var(--color-greyBlue);\n}\n\n._1O6fbjtLDXE- {\n  --card--accent-color: var(--color-greyBlue--light);\n}\n\n._3coHcfDM3VA- {\n  --card--accent-color: var(--color-greyBlue--lighter);\n}\n\n._1GwEUK3RMmk- {\n  --card--accent-color: var(--color-greyBlue--lightest);\n}\n\n._03qQDU55XhA- {\n  --card--accent-color: var(--color-greyBlue--dark);\n}\n\n.XrONNgApzcY- {\n  --card--accent-color: var(--color-lightBlue);\n}\n\n.axCpC15OAsQ- {\n  --card--accent-color: var(--color-lightBlue--light);\n}\n\n.l7-ZKiT7ECs- {\n  --card--accent-color: var(--color-lightBlue--lighter);\n}\n\n.R-d7ifPGd-U- {\n  --card--accent-color: var(--color-lightBlue--lightest);\n}\n\n.tjGcvlfZNo0- {\n  --card--accent-color: var(--color-lightBlue--dark);\n}\n\n._6yFi1QGzU-0- {\n  --card--accent-color: var(--color-purple);\n}\n\n.s5B034ADstg- {\n  --card--accent-color: var(--color-purple--light);\n}\n\n.XvHFMKO2QkA- {\n  --card--accent-color: var(--color-purple--lighter);\n}\n\n.z1yqV2h-X0o- {\n  --card--accent-color: var(--color-purple--lightest);\n}\n\n.ShqfQED9t1k- {\n  --card--accent-color: var(--color-purple--dark);\n}\n\n.TSAuQcS9guw- {\n  --card--accent-color: var(--color-pink);\n}\n\n.GwUX04DtVTg- {\n  --card--accent-color: var(--color-pink--light);\n}\n\n.OOxzzrT-Kyg- {\n  --card--accent-color: var(--color-pink--lighter);\n}\n\n._9iIg4vnXMPQ- {\n  --card--accent-color: var(--color-pink--lightest);\n}\n\n._3VTCutRlbfQ- {\n  --card--accent-color: var(--color-pink--dark);\n}\n\n.fG-k53wCdy8- {\n  --card--accent-color: var(--color-teal);\n}\n\n.GMNha2EEVYg- {\n  --card--accent-color: var(--color-teal--light);\n}\n\n._8mCqw-pGqc8- {\n  --card--accent-color: var(--color-teal--lighter);\n}\n\n.XHd3g6apCv8- {\n  --card--accent-color: var(--color-teal--lightest);\n}\n\n.XadpYA5oNNU- {\n  --card--accent-color: var(--color-teal--dark);\n}\n\n.yOjNuw4uX2M- {\n  --card--accent-color: var(--color-orange);\n}\n\n.CFBZb6YwS8U- {\n  --card--accent-color: var(--color-orange--light);\n}\n\n.dj0X5xsNtZA- {\n  --card--accent-color: var(--color-orange--lighter);\n}\n\n.bSU2KCid1GE- {\n  --card--accent-color: var(--color-orange--lightest);\n}\n\n.dPKWRPFuIko- {\n  --card--accent-color: var(--color-orange--dark);\n}\n\n.i90uzcHXLBQ- {\n  --card--accent-color: var(--color-brown);\n}\n\n.Q1g5O8oxNQ8- {\n  --card--accent-color: var(--color-brown--light);\n}\n\n.UimWc99bIs0- {\n  --card--accent-color: var(--color-brown--lighter);\n}\n\n.AUWBtBoPSB4- {\n  --card--accent-color: var(--color-brown--lightest);\n}\n\n._7xEA4hCoooA- {\n  --card--accent-color: var(--color-brown--dark);\n}\n\n.IqAniikSo1A- {\n  --card--accent-color: var(--color-navy);\n}\n\n.NTbn2du5U28- {\n  --card--accent-color: var(--color-navy--light);\n}\n\n.RbY7pJetOU0- {\n  --card--accent-color: var(--color-navy--lighter);\n}\n\n.TAlHuH8GUaY- {\n  --card--accent-color: var(--color-navy--lightest);\n}\n\n.Pm1CuBHrg0Q- {\n  --card--accent-color: var(--color-navy--dark);\n}\n\n._-4HRcMjMcTg- {\n  --card--accent-color: var(--color-indigo);\n}\n\n.frP-WGi4cig- {\n  --card--accent-color: var(--color-indigo--light);\n}\n\n.GzJbf-nczMU- {\n  --card--accent-color: var(--color-indigo--lighter);\n}\n\n.LFsNJs2wsGY- {\n  --card--accent-color: var(--color-indigo--lightest);\n}\n\n.KRBIaqOA1G4- {\n  --card--accent-color: var(--color-indigo--dark);\n}\n\n.OXOOKDn6V-M- {\n  --card--accent-color: var(--color-white);\n}\n";
@@ -58,7 +58,7 @@ function CardHeader({ title, header, }) {
     if (heading) {
         const titleString = typeof heading === "string" ? heading : heading.title;
         return (React__default["default"].createElement("div", { className: styles.header },
-            titleString && React__default["default"].createElement(Heading.Heading, { level: 3 }, titleString),
+            titleString && React__default["default"].createElement(Heading.Heading, { level: 2 }, titleString),
             typeof heading === "object" && renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null);

package/dist/Checkbox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-d769e1d4.js');
+var Checkbox = require('../Checkbox-2ea61ab4.js');
 require('../tslib.es6-754e2961.js');
 require('react');
 require('classnames');
@@ -10,8 +10,8 @@ require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Text-f6404c6c.js');
-require('../Typography-224ae794.js');
+require('../Text-fdc65f0b.js');
+require('../Typography-018e1471.js');
 
 
 

package/dist/Checkbox-2ea61ab4.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-754e2961.js');
+var React = require('react');
+var classnames = require('classnames');
+var reactHookForm = require('react-hook-form');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Icon = require('./Icon-405a216c.js');
+var Text = require('./Text-fdc65f0b.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 = ".S4ILp9Wc1GY- {\n  --checkbox--size: 20px;\n  --checkbox--border--checked: var(--color-interactive);\n  --checkbox--border--unchecked: var(--color-border);\n  --checkbox--border--hover: var(--color-interactive);\n  display: inline-block;\n}\n\n.OFHQaLxY8zI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.HRrf3AZlpHc- {\n  --checkbox--border--checked: var(--color-disabled--secondary);\n  --checkbox--border--unchecked: var(--color-disabled--secondary);\n  --checkbox--border--hover: var(--color-disabled--secondary);\n  cursor: not-allowed;\n}\n\n.kMH5B1jwh-Y- {\n  position: relative;\n}\n\n.rup0RBe4DNU- {\n  /* Hide checkbox on UI but not screen readers and still allow focus state */\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n.lOQVnJA7zPM- {\n  display: -ms-flexbox;\n  display: flex;\n  width: var(--checkbox--size);\n  height: var(--checkbox--size);\n  box-sizing: border-box;\n  border: calc(16px / 8) solid var(--checkbox--border--unchecked);\n  border: var(--border-thick) solid var(--checkbox--border--unchecked);\n  border-radius: calc(8px / 2);\n  border-radius: var(--radius-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: all 100ms ease-out;\n  transition: all var(--timing-quick) ease-out;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.lOQVnJA7zPM-:hover,\n.S4ILp9Wc1GY-:hover .lOQVnJA7zPM- {\n  border-color: var(--checkbox--border--hover);\n}\n\n.rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,\n.rup0RBe4DNU-:checked + .lOQVnJA7zPM- {\n  border-color: var(--checkbox--border--checked);\n  background-color: rgb(50, 130, 28);\n  background-color: var(--color-interactive);\n}\n\n.rup0RBe4DNU-:focus-visible + .lOQVnJA7zPM- {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n\n.HRrf3AZlpHc- p {\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n}\n\n.HRrf3AZlpHc- .lOQVnJA7zPM- > * {\n  opacity: 0;\n}\n\n.HRrf3AZlpHc- .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,\n.HRrf3AZlpHc- .rup0RBe4DNU-:checked + .lOQVnJA7zPM- {\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n.HRrf3AZlpHc- .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM- > *,\n.HRrf3AZlpHc- .rup0RBe4DNU-:checked + .lOQVnJA7zPM- > * {\n  opacity: 1;\n}\n\n.eHENKCs5umc- {\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  margin-top: calc(16px / 8);\n  margin-top: var(--space-smallest);\n}\n\n.fSEH0cAO9cI- {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  padding-left: calc(var(--checkbox--size) + (16px / 2));\n  padding-left: calc(var(--checkbox--size) + calc(16px / 2));\n  padding-left: calc(var(--checkbox--size) + var(--space-small));\n}\n";
+var styles = {"checkBoxParent":"S4ILp9Wc1GY-","wrapper":"OFHQaLxY8zI-","disabled":"HRrf3AZlpHc-","checkHolder":"kMH5B1jwh-Y-","input":"rup0RBe4DNU-","checkBox":"lOQVnJA7zPM-","indeterminate":"Njn2CQDXwVA-","label":"eHENKCs5umc-","description":"fSEH0cAO9cI-"};
+styleInject_es.styleInject(css_248z);
+
+function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
+    const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    const [identifier] = React.useState(React.useId());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    const wrapperClassName = classnames__default["default"](styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames__default["default"](styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelText = label ? React__default["default"].createElement(Text.Text, null, label) : children;
+    return (React__default["default"].createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React__default["default"].createElement("div", { className: styles.checkBoxParent },
+                React__default["default"].createElement("label", { className: wrapperClassName },
+                    React__default["default"].createElement("span", { className: styles.checkHolder },
+                        React__default["default"].createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
+                        React__default["default"].createElement("span", { className: styles.checkBox },
+                            React__default["default"].createElement(Icon.Icon, { name: iconName, size: "small", color: "white" }))),
+                    labelText && React__default["default"].createElement("span", { className: styles.label }, labelText)),
+                description && (React__default["default"].createElement("div", { className: styles.description },
+                    React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
+}
+
+exports.Checkbox = Checkbox;

package/dist/Chip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-5c2af757.js');
+var Chip = require('../Chip-b67ae770.js');
 var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');
@@ -11,8 +11,8 @@ require('@jobber/hooks/useInView');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Avatar-a5a90da9.js');
 require('color');
-require('../Typography-224ae794.js');
-require('../Tooltip-f353204e.js');
+require('../Typography-018e1471.js');
+require('../Tooltip-1e3abeb6.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useSafeLayoutEffect');

package/dist/{Chip-5c2af757.js → Chip-b67ae770.js}

@@ -6,8 +6,8 @@ var useInView = require('@jobber/hooks/useInView');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Avatar = require('./Avatar-a5a90da9.js');
 var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-224ae794.js');
-var Tooltip = require('./Tooltip-f353204e.js');
+var Typography = require('./Typography-018e1471.js');
+var Tooltip = require('./Tooltip-1e3abeb6.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -8,15 +8,15 @@ var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var useAssert = require('@jobber/hooks/useAssert');
 var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-a5a90da9.js');
-var Typography = require('../Typography-224ae794.js');
-var Tooltip = require('../Tooltip-f353204e.js');
+var Typography = require('../Typography-018e1471.js');
+var Tooltip = require('../Tooltip-1e3abeb6.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
 require('@jobber/design');
 var reactPopper = require('react-popper');
-var Text = require('../Text-f6404c6c.js');
-var Button = require('../Button-dd7ed8c3.js');
+var Text = require('../Text-fdc65f0b.js');
+var Button = require('../Button-bb77a513.js');
 var Spinner = require('../Spinner-e15a3ae0.js');
 require('color');
 require('react-dom');

package/dist/Combobox/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-7320bde1.js');
+var Combobox = require('../Combobox-faa6bffe.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Text-f6404c6c.js');
-require('../Typography-224ae794.js');
+require('../Text-fdc65f0b.js');
+require('../Typography-018e1471.js');
 require('../Glimmer-156bb2d1.js');
 require('../tslib.es6-754e2961.js');
 require('../Content-e3f7b6fc.js');
@@ -19,16 +19,16 @@ require('../AnimatedPresence-20a02aaa.js');
 require('framer-motion');
 require('../Flex-d490c4db.js');
 require('@jobber/hooks/useInView');
-require('../Button-dd7ed8c3.js');
+require('../Button-bb77a513.js');
 require('react-router-dom');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('react-popper');
 require('@jobber/hooks/useOnKeyDown');
-require('../Chip-5c2af757.js');
+require('../Chip-b67ae770.js');
 require('../Avatar-a5a90da9.js');
 require('color');
-require('../Tooltip-f353204e.js');
+require('../Tooltip-1e3abeb6.js');
 require('@jobber/hooks/useSafeLayoutEffect');
 require('@jobber/hooks/useIsMounted');
 require('lodash/debounce');

package/dist/{Combobox-7320bde1.js → Combobox-faa6bffe.js}

@@ -5,20 +5,20 @@ var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-f6404c6c.js');
+var Text = require('./Text-fdc65f0b.js');
 var Glimmer = require('./Glimmer-156bb2d1.js');
 var Spinner = require('./Spinner-e15a3ae0.js');
 var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
 var Flex = require('./Flex-d490c4db.js');
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var useInView = require('@jobber/hooks/useInView');
-var Typography = require('./Typography-224ae794.js');
-var Button = require('./Button-dd7ed8c3.js');
+var Typography = require('./Typography-018e1471.js');
+var Button = require('./Button-bb77a513.js');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('./Chip-5c2af757.js');
+var Chip = require('./Chip-b67ae770.js');
 var debounce = require('lodash/debounce');
 var noop = require('lodash/noop');
 require('@jobber/design');
@@ -32,7 +32,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
-var css_248z$7 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(8px * 3);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
+var css_248z$7 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(218, 224, 226);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
 var styles$7 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
 styleInject_es.styleInject(css_248z$7);
 
@@ -70,7 +70,7 @@ var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px /
 var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
 styleInject_es.styleInject(css_248z$5);
 
-var css_248z$4 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(8px * 2);\n  border-radius: var(--radius-large);\n  color: rgb(1, 40, 55);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n";
+var css_248z$4 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  color: rgb(1, 40, 55);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n";
 var styles$4 = {"option":"_5QdRGmaNHvc-"};
 styleInject_es.styleInject(css_248z$4);
 
@@ -318,7 +318,7 @@ function ComboboxContent(props) {
         : template;
 }
 
-var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(8px * 2);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.jobber-retheme .ncp0nKHQ7d8- {\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 8px;\n  border-radius: var(--radius-base);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: rgb(241, 239, 233);\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(131, 151, 160);\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
 var styles$1 = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
 styleInject_es.styleInject(css_248z$1);