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

package/dist/Autocomplete-dc7a4b9e.js

@@ -0,0 +1,188 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-c563c1dd.js';
+import React, { useState, useEffect, forwardRef, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import classnames from 'classnames';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+import { useSafeLayoutEffect } from '@jobber/hooks/useSafeLayoutEffect';
+import { T as Text } from './Text-c92ddeb3.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { H as Heading } from './Heading-dfd4f1cf.js';
+import { I as InputText } from './InputText-2fd8f942.js';
+
+var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
+var styles = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
+styleInject(css_248z);
+
+var IndexChange;
+(function (IndexChange) {
+    IndexChange[IndexChange["Previous"] = -1] = "Previous";
+    IndexChange[IndexChange["Next"] = 1] = "Next";
+})(IndexChange || (IndexChange = {}));
+function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
+    const detectSeparatorCondition = (option) => option.description || option.details;
+    const detectGroups = (option) => option.options;
+    const addSeparators = options.some(detectSeparatorCondition);
+    const initialHighlight = options.some(detectGroups) ? 1 : 0;
+    setupKeyListeners();
+    useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
+        const optionClass = classnames(styles.option, {
+            [styles.active]: index === highlightedIndex,
+            [styles.separator]: addSeparators,
+        });
+        if (isGroup(option)) {
+            return (React.createElement("div", { key: option.label, className: styles.heading },
+                React.createElement(Heading, { level: 5 }, option.label)));
+        }
+        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
+            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon, { name: "checkmark", size: "small" }))),
+            React.createElement("div", { className: styles.text },
+                React.createElement("div", { className: styles.label },
+                    React.createElement(Text, null, option.label),
+                    option.description !== undefined && (React.createElement(Text, { variation: "subdued" }, option.description))),
+                option.details !== undefined && (React.createElement("div", { className: styles.details },
+                    React.createElement(Text, null, option.details))))));
+    })));
+    return createPortal(menu, document.body);
+    function setupKeyListeners() {
+        useEffect(() => {
+            var _a, _b;
+            (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }, [highlightedIndex]);
+        useOnKeyDown((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Next);
+            if (indexChange) {
+                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
+            }
+        }, "ArrowDown");
+        useOnKeyDown((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Previous);
+            if (indexChange) {
+                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
+            }
+        }, "ArrowUp");
+        useOnKeyDown((event) => {
+            if (!visible)
+                return;
+            if (isGroup(options[highlightedIndex]))
+                return;
+            event.preventDefault();
+            onOptionSelect(options[highlightedIndex]);
+        }, "Enter");
+    }
+    function arrowKeyPress(event, direction) {
+        if (!visible)
+            return;
+        event.preventDefault();
+        const requestedIndex = options[highlightedIndex + direction];
+        return requestedIndex && isGroup(requestedIndex)
+            ? direction + direction
+            : direction;
+    }
+}
+function isOptionSelected(selectedOption, option) {
+    return selectedOption && selectedOption.value === option.value;
+}
+function isGroup(option) {
+    if (option.options)
+        return true;
+    return false;
+}
+function useRepositionMenu(attachTo, visible = false) {
+    var _a;
+    const [menuRef, setMenuRef] = useState();
+    const popper = usePopper(attachTo.current, menuRef, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    useSafeLayoutEffect(() => {
+        var _a;
+        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
+    }, [visible]);
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+}
+
+// Max statements increased to make room for the debounce functions
+/* eslint max-statements: ["error", 14] */
+function AutocompleteInternal(_a, ref) {
+    var _b;
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
+    const [options, setOptions] = useState(initialOptions);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
+    const autocompleteRef = useRef(null);
+    const delayedSearch = debounce(updateSearch, debounceRate);
+    useEffect(() => {
+        delayedSearch();
+        return delayedSearch.cancel;
+    }, [inputText]);
+    useEffect(() => {
+        var _a;
+        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
+    return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+        React.createElement(InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    function updateInput(newText) {
+        setInputText(newText);
+        if (newText === "") {
+            setOptions(mapToOptions(initialOptions));
+        }
+    }
+    function updateSearch() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const updatedOptions = yield getOptions(inputText);
+            const filteredOptions = updatedOptions.filter((option) => "options" in option && option.options ? option.options.length > 0 : true);
+            setOptions(mapToOptions(filteredOptions));
+        });
+    }
+    function handleMenuChange(chosenOption) {
+        onChange(chosenOption);
+        updateInput(chosenOption.label);
+        setMenuVisible(false);
+    }
+    function handleInputChange(newText) {
+        updateInput(newText);
+        if (allowFreeForm) {
+            onChange({ label: newText });
+        }
+    }
+    function handleInputBlur() {
+        setMenuVisible(false);
+        if (value == undefined || value.label !== inputText) {
+            setInputText("");
+            onChange(undefined);
+        }
+        onBlur && onBlur();
+    }
+    function handleInputFocus() {
+        setMenuVisible(true);
+        if (onFocus) {
+            onFocus();
+        }
+    }
+}
+function mapToOptions(items) {
+    return items.reduce(function (result, item) {
+        result = result.concat([item]);
+        if (item.options) {
+            result = result.concat(item.options);
+        }
+        return result;
+    }, []);
+}
+const Autocomplete = forwardRef(AutocompleteInternal);
+
+export { Autocomplete as A };

package/dist/Autocomplete.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Autocomplete = require('./Autocomplete-b35c7ff5.js');
+require('./tslib.es6-754e2961.js');
+require('react');
+require('lodash/debounce');
+require('./style-inject.es-9d2f5f4e.js');
+require('classnames');
+require('react-dom');
+require('react-popper');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('./Text-714f7d14.js');
+require('./Typography-fd88fcce.js');
+require('./Icon-405a216c.js');
+require('@jobber/design');
+require('./Heading-a8a24775.js');
+require('./getAtlantisConfig-0f3e8af2.js');
+require('./InputText-125769fd.js');
+require('./FormField-fc30bb1a.js');
+require('react-hook-form');
+require('@jobber/hooks/useShowClear');
+require('./Button-ec64869e.js');
+require('react-router-dom');
+require('./InputValidation-4a61254d.js');
+require('framer-motion');
+require('./Spinner-3480bc34.js');
+
+
+
+exports.Autocomplete = Autocomplete.Autocomplete;

package/dist/Autocomplete.js

@@ -0,0 +1,25 @@
+export { A as Autocomplete } from './Autocomplete-dc7a4b9e.js';
+import './tslib.es6-c563c1dd.js';
+import 'react';
+import 'lodash/debounce';
+import './style-inject.es-a0e1a0ba.js';
+import 'classnames';
+import 'react-dom';
+import 'react-popper';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useSafeLayoutEffect';
+import './Text-c92ddeb3.js';
+import './Typography-52ed1386.js';
+import './Icon-22723fe6.js';
+import '@jobber/design';
+import './Heading-dfd4f1cf.js';
+import './getAtlantisConfig-5b50057c.js';
+import './InputText-2fd8f942.js';
+import './FormField-f1f405d2.js';
+import 'react-hook-form';
+import '@jobber/hooks/useShowClear';
+import './Button-30154871.js';
+import 'react-router-dom';
+import './InputValidation-fe42fc3f.js';
+import 'framer-motion';
+import './Spinner-90081e20.js';

package/dist/Avatar-229083ec.js

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,78 @@
+'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

@@ -0,0 +1,15 @@
+'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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,105 @@
+'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

@@ -0,0 +1,98 @@
+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 };