@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.4

package/dist/Avatar-229083ec.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import Color from 'color';
-import { I as Icon } from './Icon-22723fe6.js';
-
-var css_248z = ":root {\n  --avatar-size: calc(var(--base-unit) * 2);\n  --avatar-border-size: var(--border-base);\n}\n\n.WniTNadEyPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  width: calc(var(--base-unit) * 2);\n  width: var(--avatar-size);\n  height: calc(var(--base-unit) * 2);\n  height: var(--avatar-size);\n  min-width: calc(var(--base-unit) * 2);\n  min-width: var(--avatar-size);\n  min-height: calc(var(--base-unit) * 2);\n  min-height: var(--avatar-size);\n  border-radius: var(--radius-circle);\n  color: var(--color-heading);\n  font-size: calc(var(--base-unit) * 2);\n  font-size: var(--avatar-size);\n  -webkit-font-smoothing: antialiased;\n  background: no-repeat center center var(--color-greyBlue);\n  background-size: cover;\n}\n\n.WniTNadEyPk-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._8Pqn2uZpaZg- {\n  --avatar-size: calc(var(--base-unit) * 4.5);\n  --avatar-border-size: var(--border-thick);\n}\n\n.S-edTXYA-7E- {\n  --avatar-size: calc(var(--base-unit) * 1.5);\n}\n\n.S1iBGElfOUA- {\n  color: var(--color-text--reverse);\n}\n\n.ErPhpHHpiBQ- {\n  font-size: calc((var(--base-unit) * 2) / 2);\n  font-size: calc(calc(var(--base-unit) * 2) / 2);\n  font-size: calc(var(--avatar-size) / 2);\n  text-transform: uppercase;\n}\n\n.aC-d-mngrIc- {\n  font-size: calc((var(--base-unit) * 2) / 2.25);\n  font-size: calc(calc(var(--base-unit) * 2) / 2.25);\n  font-size: calc(var(--avatar-size) / 2.25);\n}\n\n.nR0S-GzjDnQ- {\n  width: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  height: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  box-shadow: 0 0 0 var(--border-thick) var(--color-white) inset;\n  border-style: solid;\n  border-width: var(--border-base);\n  border-width: var(--avatar-border-size);\n}\n";
-var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
-styleInject(css_248z);
-
-function isDark(colorToCheck) {
-    if (colorToCheck == undefined) {
-        return false;
-    }
-    if (colorToCheck) {
-        try {
-            return Color(deconstructCssCustomProperty(colorToCheck)).isDark();
-        }
-        catch (err) {
-            console.log(err);
-        }
-    }
-    return false;
-}
-function deconstructCssCustomProperty(color) {
-    if (!color) {
-        return;
-    }
-    if (!color.toLowerCase().startsWith("var(")) {
-        return color;
-    }
-    /**
-     * Rips apart the `var(--custom-property)` into just `--custom-property`.
-     */
-    const customProperty = color
-        .replace("var(", "")
-        .slice(0, -1)
-        .split(" ")
-        .join("");
-    return getComputedStyle(document.documentElement)
-        .getPropertyValue(customProperty)
-        .trim();
-}
-
-function Avatar({ imageUrl, name, initials, size = "base", color, }) {
-    const style = {
-        backgroundColor: color,
-        borderColor: color,
-    };
-    if (imageUrl) {
-        style.backgroundImage = `url(${imageUrl})`;
-    }
-    const shouldBeDark = color == undefined || isDark(color);
-    const className = classnames(styles.avatar, size !== "base" && styles[size], {
-        [styles.hasBorder]: imageUrl && color,
-        [styles.isDark]: shouldBeDark,
-    });
-    return (React.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
-}
-function Initials({ initials, dark = false, iconSize = "base", }) {
-    if (!initials) {
-        return (React.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
-    }
-    const className = classnames(styles.initials, {
-        [styles.smallInitials]: initials.length > 2,
-    });
-    return React.createElement("span", { className: className }, initials.substr(0, 3));
-}
-
-export { Avatar as A };

package/dist/Avatar-cccf72b9.js

@@ -1,78 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Color = require('color');
-var Icon = require('./Icon-405a216c.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-
-var css_248z = ":root {\n  --avatar-size: calc(var(--base-unit) * 2);\n  --avatar-border-size: var(--border-base);\n}\n\n.WniTNadEyPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  width: calc(var(--base-unit) * 2);\n  width: var(--avatar-size);\n  height: calc(var(--base-unit) * 2);\n  height: var(--avatar-size);\n  min-width: calc(var(--base-unit) * 2);\n  min-width: var(--avatar-size);\n  min-height: calc(var(--base-unit) * 2);\n  min-height: var(--avatar-size);\n  border-radius: var(--radius-circle);\n  color: var(--color-heading);\n  font-size: calc(var(--base-unit) * 2);\n  font-size: var(--avatar-size);\n  -webkit-font-smoothing: antialiased;\n  background: no-repeat center center var(--color-greyBlue);\n  background-size: cover;\n}\n\n.WniTNadEyPk-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._8Pqn2uZpaZg- {\n  --avatar-size: calc(var(--base-unit) * 4.5);\n  --avatar-border-size: var(--border-thick);\n}\n\n.S-edTXYA-7E- {\n  --avatar-size: calc(var(--base-unit) * 1.5);\n}\n\n.S1iBGElfOUA- {\n  color: var(--color-text--reverse);\n}\n\n.ErPhpHHpiBQ- {\n  font-size: calc((var(--base-unit) * 2) / 2);\n  font-size: calc(calc(var(--base-unit) * 2) / 2);\n  font-size: calc(var(--avatar-size) / 2);\n  text-transform: uppercase;\n}\n\n.aC-d-mngrIc- {\n  font-size: calc((var(--base-unit) * 2) / 2.25);\n  font-size: calc(calc(var(--base-unit) * 2) / 2.25);\n  font-size: calc(var(--avatar-size) / 2.25);\n}\n\n.nR0S-GzjDnQ- {\n  width: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  height: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  box-shadow: 0 0 0 var(--border-thick) var(--color-white) inset;\n  border-style: solid;\n  border-width: var(--border-base);\n  border-width: var(--avatar-border-size);\n}\n";
-var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
-styleInject_es.styleInject(css_248z);
-
-function isDark(colorToCheck) {
-    if (colorToCheck == undefined) {
-        return false;
-    }
-    if (colorToCheck) {
-        try {
-            return Color__default["default"](deconstructCssCustomProperty(colorToCheck)).isDark();
-        }
-        catch (err) {
-            console.log(err);
-        }
-    }
-    return false;
-}
-function deconstructCssCustomProperty(color) {
-    if (!color) {
-        return;
-    }
-    if (!color.toLowerCase().startsWith("var(")) {
-        return color;
-    }
-    /**
-     * Rips apart the `var(--custom-property)` into just `--custom-property`.
-     */
-    const customProperty = color
-        .replace("var(", "")
-        .slice(0, -1)
-        .split(" ")
-        .join("");
-    return getComputedStyle(document.documentElement)
-        .getPropertyValue(customProperty)
-        .trim();
-}
-
-function Avatar({ imageUrl, name, initials, size = "base", color, }) {
-    const style = {
-        backgroundColor: color,
-        borderColor: color,
-    };
-    if (imageUrl) {
-        style.backgroundImage = `url(${imageUrl})`;
-    }
-    const shouldBeDark = color == undefined || isDark(color);
-    const className = classnames__default["default"](styles.avatar, size !== "base" && styles[size], {
-        [styles.hasBorder]: imageUrl && color,
-        [styles.isDark]: shouldBeDark,
-    });
-    return (React__default["default"].createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default["default"].createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
-}
-function Initials({ initials, dark = false, iconSize = "base", }) {
-    if (!initials) {
-        return (React__default["default"].createElement(Icon.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
-    }
-    const className = classnames__default["default"](styles.initials, {
-        [styles.smallInitials]: initials.length > 2,
-    });
-    return React__default["default"].createElement("span", { className: className }, initials.substr(0, 3));
-}
-
-exports.Avatar = Avatar;

package/dist/Avatar.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Avatar = require('./Avatar-cccf72b9.js');
-require('react');
-require('classnames');
-require('./style-inject.es-9d2f5f4e.js');
-require('color');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-
-
-
-exports.Avatar = Avatar.Avatar;

package/dist/Avatar.js

@@ -1,7 +0,0 @@
-export { A as Avatar } from './Avatar-229083ec.js';
-import 'react';
-import 'classnames';
-import './style-inject.es-a0e1a0ba.js';
-import 'color';
-import './Icon-22723fe6.js';
-import '@jobber/design';

package/dist/Banner-18d94700.js

@@ -1,105 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks/useResizeObserver');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var getAtlantisConfig = require('./getAtlantisConfig-0f3e8af2.js');
-var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-714f7d14.js');
-var Button = require('./Button-ec64869e.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 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  color: var(--color-text);\n  background-color: var(--color-surface--background);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .meuT8gYQPJU- {\n  padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  background-color: var(--color-surface);\n}\n\n.y4BapyZr-fo- > a {\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\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: 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 (--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 (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc(var(--space-smallest) * -1) 0;\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: 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: var(--space-smaller);\n  border-radius: var(--radius-circle);\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 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: 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: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\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: var(--color-success);\n}\n\n.r3hqur-vxwI- {\n  background-color: var(--color-destructive);\n}\n\n.-c8TbjyV5YU- {\n  background-color: var(--color-warning);\n}\n\n.bMc69fYWngM- {\n  background-color: var(--color-informative);\n}\n";
-var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c8TbjyV5YU-","notice":"bMc69fYWngM-"};
-styleInject_es.styleInject(css_248z);
-
-function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
-    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" });
-}
-
-function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
-    const [showBanner, setShowBanner] = React.useState(true);
-    const bannerIcon = icon || getBannerIcon(type);
-    const bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    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",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
-        }, primaryAction);
-    }
-    const bannerClassNames = classnames__default["default"](styles.banner, types[type], {
-        [styles.medium]: bannerWidth >= bannerWidths.medium,
-    });
-    if (!showBanner)
-        return null;
-    return (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default["default"].createElement("div", { className: styles.bannerContent },
-            bannerIcon && React__default["default"].createElement(BannerIcon, { icon: bannerIcon, type: type }),
-            React__default["default"].createElement("div", { className: styles.bannerChildren },
-                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] })))));
-    function handleClose() {
-        setShowBanner(!showBanner);
-        onDismiss && onDismiss();
-    }
-}
-function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = getAtlantisConfig.getAtlantisConfig();
-    if (!JOBBER_RETHEME)
-        return;
-    switch (type) {
-        case "notice":
-            return "starburst";
-        case "success":
-            return "checkmark";
-        case "warning":
-            return "help";
-        case "error":
-            return "alert";
-    }
-}
-function BannerChildren({ children, }) {
-    if (!children)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    if (children && typeof children === "string") {
-        return React__default["default"].createElement(Text.Text, null, children);
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-}
-
-exports.Banner = Banner;

package/dist/Banner-5475a9ea.js

@@ -1,98 +0,0 @@
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import { useResizeObserver } from '@jobber/hooks/useResizeObserver';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import { g as getAtlantisConfig } from './getAtlantisConfig-5b50057c.js';
-import { I as Icon } from './Icon-22723fe6.js';
-import { T as Text } from './Text-c92ddeb3.js';
-import { B as Button } from './Button-30154871.js';
-
-var css_248z$2 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  color: var(--color-text);\n  background-color: var(--color-surface--background);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .meuT8gYQPJU- {\n  padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  background-color: var(--color-surface);\n}\n\n.y4BapyZr-fo- > a {\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\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: 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 (--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 (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc(var(--space-smallest) * -1) 0;\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: 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: var(--space-smaller);\n  border-radius: var(--radius-circle);\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 styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-","iconWrapper":"SG8xSJADp2k-"};
-styleInject(css_248z$2);
-
-var css_248z$1 = ".wWW-2T7rCV0- {\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: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: var(--color-red--lighter);\n}\n";
-var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
-styleInject(css_248z$1);
-
-var css_248z = "._5-B0X5vn0eA- {\n  background-color: var(--color-success);\n}\n\n.r3hqur-vxwI- {\n  background-color: var(--color-destructive);\n}\n\n.-c8TbjyV5YU- {\n  background-color: var(--color-warning);\n}\n\n.bMc69fYWngM- {\n  background-color: var(--color-informative);\n}\n";
-var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c8TbjyV5YU-","notice":"bMc69fYWngM-"};
-styleInject(css_248z);
-
-function BannerIcon({ icon, type }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
-    if (JOBBER_RETHEME) {
-        return (React.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
-            React.createElement(Icon, { name: icon, color: "white", size: "small" })));
-    }
-    return React.createElement(Icon, { name: icon, color: "greyBlueDark" });
-}
-
-function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
-    const [showBanner, setShowBanner] = useState(true);
-    const bannerIcon = icon || getBannerIcon(type);
-    const bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
-        widths: bannerWidths,
-    });
-    const iconColors = {
-        notice: "informative",
-        success: "success",
-        warning: "warning",
-        error: "critical",
-    };
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({
-            size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
-        }, primaryAction);
-    }
-    const bannerClassNames = classnames(styles.banner, types[type], {
-        [styles.medium]: bannerWidth >= bannerWidths.medium,
-    });
-    if (!showBanner)
-        return null;
-    return (React.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React.createElement("div", { className: styles.bannerContent },
-            bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
-            React.createElement("div", { className: styles.bannerChildren },
-                React.createElement(BannerChildren, null, children)),
-            primaryAction && (React.createElement("div", { className: styles.bannerAction },
-                React.createElement(Button, Object.assign({}, primaryAction))))),
-        dismissible && (React.createElement("button", { type: "button", className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
-            React.createElement(Icon, { name: "cross", color: JOBBER_RETHEME ? "interactiveSubtle" : iconColors[type] })))));
-    function handleClose() {
-        setShowBanner(!showBanner);
-        onDismiss && onDismiss();
-    }
-}
-function getBannerIcon(type) {
-    const { JOBBER_RETHEME } = getAtlantisConfig();
-    if (!JOBBER_RETHEME)
-        return;
-    switch (type) {
-        case "notice":
-            return "starburst";
-        case "success":
-            return "checkmark";
-        case "warning":
-            return "help";
-        case "error":
-            return "alert";
-    }
-}
-function BannerChildren({ children, }) {
-    if (!children)
-        return React.createElement(React.Fragment, null);
-    if (children && typeof children === "string") {
-        return React.createElement(Text, null, children);
-    }
-    return React.createElement(React.Fragment, null, children);
-}
-
-export { Banner as B };

package/dist/Banner.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Banner = require('./Banner-18d94700.js');
-require('react');
-require('classnames');
-require('@jobber/hooks/useResizeObserver');
-require('./style-inject.es-9d2f5f4e.js');
-require('./getAtlantisConfig-0f3e8af2.js');
-require('./Icon-405a216c.js');
-require('@jobber/design');
-require('./Text-714f7d14.js');
-require('./Typography-fd88fcce.js');
-require('./Button-ec64869e.js');
-require('react-router-dom');
-
-
-
-exports.Banner = Banner.Banner;

package/dist/Banner.js

@@ -1,12 +0,0 @@
-export { B as Banner } from './Banner-5475a9ea.js';
-import 'react';
-import 'classnames';
-import '@jobber/hooks/useResizeObserver';
-import './style-inject.es-a0e1a0ba.js';
-import './getAtlantisConfig-5b50057c.js';
-import './Icon-22723fe6.js';
-import '@jobber/design';
-import './Text-c92ddeb3.js';
-import './Typography-52ed1386.js';
-import './Button-30154871.js';
-import 'react-router-dom';

package/dist/Body-22878526.js

@@ -1,64 +0,0 @@
-'use strict';
-
-var React = require('react');
-var formatters = require('@jobber/formatters');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var classnames = require('classnames');
-
-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 = ".gFY9BLPF808- {\n  --border-color: var(--color-border);\n  --header-border-color: var(--color-border--section);\n  --horizontal-inset: var(--space-base);\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.gFY9BLPF808-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: solid var(--border-base) var(--border-color);\n  border-radius: var(--radius-base);\n  pointer-events: none;\n}\n\n.NZbmlKVakYo-:not(:last-child) {\n  border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._72-uJqZ5jGE- .NZbmlKVakYo- {\n  border-bottom: solid var(--border-base) var(--header-border-color);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\n.fEVdTCw9eOU- .NZbmlKVakYo- {\n  border-top: solid var(--border-thicker) var(--border-color);\n}\n";
-var styles$1 = {"table":"gFY9BLPF808-","row":"NZbmlKVakYo-","header":"_72-uJqZ5jGE-","footer":"fEVdTCw9eOU-"};
-styleInject_es.styleInject(css_248z$1);
-
-function Table({ children }) {
-    return React__default["default"].createElement("table", { className: styles$1.table }, children);
-}
-
-function Row({ children }) {
-    return React__default["default"].createElement("tr", { className: styles$1.row }, children);
-}
-
-var css_248z = ".xibCW9zSMXU- {\n  padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n  text-align: left;\n}\n\n.SD8FBgvYMQg- {\n  text-align: left;\n}\n\n._5VZpkU0Gu40- {\n  text-align: center;\n}\n\n.DNPkTtpA-8g- {\n  text-align: right;\n}\n\n._5EfJs7A9kEg- {\n  -webkit-font-feature-settings: \"tnum\";\n          font-feature-settings: \"tnum\";\n}\n\n.xibCW9zSMXU-:first-child {\n  padding-left: var(--horizontal-inset);\n}\n\n.xibCW9zSMXU-:last-child {\n  padding-right: var(--horizontal-inset);\n}\n";
-var styles = {"cell":"xibCW9zSMXU-","left":"SD8FBgvYMQg-","center":"_5VZpkU0Gu40-","right":"DNPkTtpA-8g-","numeric":"_5EfJs7A9kEg-"};
-styleInject_es.styleInject(css_248z);
-
-function Cell({ children, align = "left" }) {
-    const className = classnames__default["default"](styles.cell, styles[align]);
-    return React__default["default"].createElement("td", { className: className }, children);
-}
-
-function CellNumeric({ value }) {
-    return (React__default["default"].createElement(Cell, { align: "right" },
-        React__default["default"].createElement("span", { className: styles.numeric }, value.toString())));
-}
-
-function CellCurrency({ value, currency = undefined, }) {
-    return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
-}
-
-function Header({ children }) {
-    return (React__default["default"].createElement("thead", { className: styles$1.header },
-        React__default["default"].createElement(Row, null, children)));
-}
-
-function Footer({ children }) {
-    return (React__default["default"].createElement("tfoot", { className: styles$1.footer },
-        React__default["default"].createElement(Row, null, children)));
-}
-
-function Body({ children }) {
-    return React__default["default"].createElement("tbody", null, children);
-}
-
-exports.Body = Body;
-exports.Cell = Cell;
-exports.CellCurrency = CellCurrency;
-exports.CellNumeric = CellNumeric;
-exports.Footer = Footer;
-exports.Header = Header;
-exports.Row = Row;
-exports.Table = Table;

package/dist/Body-4fbe21ac.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { formatCurrency } from '@jobber/formatters';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import classnames from 'classnames';
-
-var css_248z$1 = ".gFY9BLPF808- {\n  --border-color: var(--color-border);\n  --header-border-color: var(--color-border--section);\n  --horizontal-inset: var(--space-base);\n  position: relative;\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.gFY9BLPF808-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  border: solid var(--border-base) var(--border-color);\n  border-radius: var(--radius-base);\n  pointer-events: none;\n}\n\n.NZbmlKVakYo-:not(:last-child) {\n  border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._72-uJqZ5jGE- .NZbmlKVakYo- {\n  border-bottom: solid var(--border-base) var(--header-border-color);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\n.fEVdTCw9eOU- .NZbmlKVakYo- {\n  border-top: solid var(--border-thicker) var(--border-color);\n}\n";
-var styles$1 = {"table":"gFY9BLPF808-","row":"NZbmlKVakYo-","header":"_72-uJqZ5jGE-","footer":"fEVdTCw9eOU-"};
-styleInject(css_248z$1);
-
-function Table({ children }) {
-    return React.createElement("table", { className: styles$1.table }, children);
-}
-
-function Row({ children }) {
-    return React.createElement("tr", { className: styles$1.row }, children);
-}
-
-var css_248z = ".xibCW9zSMXU- {\n  padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n  text-align: left;\n}\n\n.SD8FBgvYMQg- {\n  text-align: left;\n}\n\n._5VZpkU0Gu40- {\n  text-align: center;\n}\n\n.DNPkTtpA-8g- {\n  text-align: right;\n}\n\n._5EfJs7A9kEg- {\n  -webkit-font-feature-settings: \"tnum\";\n          font-feature-settings: \"tnum\";\n}\n\n.xibCW9zSMXU-:first-child {\n  padding-left: var(--horizontal-inset);\n}\n\n.xibCW9zSMXU-:last-child {\n  padding-right: var(--horizontal-inset);\n}\n";
-var styles = {"cell":"xibCW9zSMXU-","left":"SD8FBgvYMQg-","center":"_5VZpkU0Gu40-","right":"DNPkTtpA-8g-","numeric":"_5EfJs7A9kEg-"};
-styleInject(css_248z);
-
-function Cell({ children, align = "left" }) {
-    const className = classnames(styles.cell, styles[align]);
-    return React.createElement("td", { className: className }, children);
-}
-
-function CellNumeric({ value }) {
-    return (React.createElement(Cell, { align: "right" },
-        React.createElement("span", { className: styles.numeric }, value.toString())));
-}
-
-function CellCurrency({ value, currency = undefined, }) {
-    return React.createElement(CellNumeric, { value: formatCurrency(value, currency) });
-}
-
-function Header({ children }) {
-    return (React.createElement("thead", { className: styles$1.header },
-        React.createElement(Row, null, children)));
-}
-
-function Footer({ children }) {
-    return (React.createElement("tfoot", { className: styles$1.footer },
-        React.createElement(Row, null, children)));
-}
-
-function Body({ children }) {
-    return React.createElement("tbody", null, children);
-}
-
-export { Body as B, Cell as C, Footer as F, Header as H, Row as R, Table as T, CellNumeric as a, CellCurrency as b };

package/dist/Button-30154871.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { Link } from 'react-router-dom';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import { I as Icon } from './Icon-22723fe6.js';
-import { T as Typography } from './Typography-52ed1386.js';
-
-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\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: var(--border-base) solid var(--color-interactive);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: var(--radius-base);\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\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: var(--color-surface);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base) ease-out;\n  -webkit-appearance: none;\n          appearance: none;\n  fill: var(--color-interactive);\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.jobber-retheme .U9VsquOtk2I- {\n  min-height: calc(var(--base-unit) * 2.5);\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.jobber-retheme .U9VsquOtk2I- * {\n  font-weight: 600 !important;\n}\n\n.jobber-retheme .U9VsquOtk2I- * {\n  line-height: 1;\n  letter-spacing: 0;\n  /* post-retheme this can move into the TSX on L177 */\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: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n  background-color: var(--color-surface--hover);\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: 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  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n.jobber-retheme .jsKQEOBdJ0k- {\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/* 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-visible {\n  color: var(--color-surface);\n  color: var(--button--color-primaryLabel);\n  background-color: var(--color-interactive);\n  background-color: var(--button--color-variation);\n  fill: var(--color-surface);\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: var(--color-interactive--hover);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: var(--color-interactive);\n  color: var(--button--color-variation);\n  fill: var(--color-interactive);\n  fill: var(--button--color-variation);\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: var(--color-interactive);\n  border-color: var(--button--color-variation);\n}\n\n.jobber-retheme .pf6G840lKdA-,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n  color: var(--color-interactive--hover);\n  color: var(--button--color-variation--hover);\n  background-color: var(--color-surface--hover);\n  background-color: var(--button--color-surface--hover);\n  fill: var(--color-interactive--hover);\n  fill: var(--button--color-variation--hover);\n}\n\n.jobber-retheme .pf6G840lKdA-:hover,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.jobber-retheme .pf6G840lKdA-:focus-visible,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  background-color: var(--color-surface);\n  background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk- {\n  border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n  background-color: var(--color-surface--hover);\n  background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus-visible,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus-visible,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n  border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk-:hover,\n.jobber-retheme .m7DbwRZWcNk-:focus-visible,\n.jobber-retheme a.m7DbwRZWcNk-:hover,\n.jobber-retheme a.m7DbwRZWcNk-:focus-visible {\n  border-color: var(--color-interactive--hover);\n  border-color: var(--button--color-variation--hover);\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  border-color: transparent;\n  color: var(--color-interactive--subtle--hover);\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: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: var(--color-disabled--secondary);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 var(--space-small);\n  letter-spacing: 0;\n}\n\n.jobber-retheme .STSDgSRREx4- {\n  min-height: var(--space-large);\n  padding: var(--space-small) calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .STSDgSRREx4- span {\n  font-size: var(--typography--fontSize-base);\n}\n\n.amIh7vPETfo- {\n  padding: 0 calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .amIh7vPETfo- {\n  padding: 0 var(--space-base);\n}\n\n.ON6ezOojFVo- {\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 var(--space-base);\n}\n\n.jobber-retheme .ON6ezOojFVo- {\n  min-height: calc(var(--base-unit) * 3);\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: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n  width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc(var(--space-base) * 2.25);\n}\n\n.jobber-retheme .Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc(var(--space-base) * 2.5);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n  width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n  gap: var(--space-small);\n}\n\n.jobber-retheme .EWh1gvgPJQg- {\n  gap: var(--space-smaller);\n}\n\n/* Don't want to move things that will update after re-theme */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.jobber-retheme .EWh1gvgPJQg- > *:first-child {\n  margin-left: calc(var(--space-smaller) * -1);\n}\n\n.jobber-retheme .pfzTUMgNb3o- > *:first-child {\n  margin-left: 0;\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: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: var(--timing-loading--extended);\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: var(--timing-loading--extended);\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: 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: 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(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(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.createElement(ButtonInternals, Object.assign({}, props));
-    if (to) {
-        return (React.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    const Tag = url ? "a" : "button";
-    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
-}
-function ButtonInternals({ label, icon, size = "base" }) {
-    return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon, { name: icon, size: size }),
-        React.createElement(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";
-    }
-}
-
-export { Button as B };