@jobber/components 4.85.6-CJS-to-ESM.27 → 4.85.6-formattime.45

package/dist/AnimatedPresence/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var AnimatedPresence = require('../AnimatedPresence-DFaAEYUa.js');
+var AnimatedPresence = require('../AnimatedPresence-BniO-Mp1.js');
 require('react');
 require('framer-motion');
 require('@jobber/design');

package/dist/AnimatedPresence/index.mjs

@@ -1,4 +1,4 @@
-export { A as AnimatedPresence } from '../AnimatedPresence-D73apgLB.js';
+export { A as AnimatedPresence } from '../AnimatedPresence-BfpoelOw.js';
 import 'react';
 import 'framer-motion';
 import '@jobber/design';

package/dist/AnimatedSwitcher/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var AnimatedSwitcher = require('../AnimatedSwitcher-UmlTf067.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-N0PYilvq.js');
 require('react');
 require('framer-motion');
-require('../Icon-B9XNdA1T.js');
+require('../Icon-hzzO5dnb.js');
 require('@jobber/design');
 
 

package/dist/AnimatedSwitcher/index.mjs

@@ -1,5 +1,5 @@
-export { A as AnimatedSwitcher } from '../AnimatedSwitcher-B4fUExeN.js';
+export { A as AnimatedSwitcher } from '../AnimatedSwitcher-CoSnt90A.js';
 import 'react';
 import 'framer-motion';
-import '../Icon-CoHJokXb.js';
+import '../Icon-Cxtu-PZL.js';
 import '@jobber/design';

package/dist/{AnimatedSwitcher-B4fUExeN.js → AnimatedSwitcher-CoSnt90A.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { I as Icon } from './Icon-CoHJokXb.js';
+import { I as Icon } from './Icon-Cxtu-PZL.js';
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;

package/dist/{AnimatedSwitcher-UmlTf067.js → AnimatedSwitcher-N0PYilvq.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var framerMotion = require('framer-motion');
-var Icon = require('./Icon-B9XNdA1T.js');
+var Icon = require('./Icon-hzzO5dnb.js');
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;

package/dist/Autocomplete/index.cjs

@@ -1,33 +1,32 @@
 'use strict';
 
-var Autocomplete = require('../Autocomplete-C4p_VjUV.js');
-require('../tslib.es6-ld72nsZq.js');
+var Autocomplete = require('../Autocomplete-krSdjKkZ.js');
+require('../tslib.es6-C-HYojaW.js');
 require('react');
-require('../debounce-CJA36ltI.js');
-require('../_commonjsHelpers-B83fTs8d.js');
-require('../isObjectLike-BUFV4ggG.js');
-require('../isSymbol-DS9vlqp3.js');
-require('../style-inject.es-XZHJH68X.js');
+require('../debounce-Bl-yjBp-.js');
+require('../_commonjsHelpers-Bc1dp4FJ.js');
+require('../isObjectLike-B2TjP8Gx.js');
+require('../isSymbol-Dh625d8C.js');
 require('classnames');
 require('react-dom');
 require('react-popper');
-require('../useOnKeyDown-D9ZBkLqI.js');
-require('../useSafeLayoutEffect-CYoPOUNG.js');
-require('../useIsMounted-Bd3yeb_P.js');
-require('../Text-L0uH5HlC.js');
-require('../Typography-g6o6Nu4H.js');
-require('../Icon-B9XNdA1T.js');
+require('../useOnKeyDown-DIX1rWRg.js');
+require('../useSafeLayoutEffect-D7sZrvwk.js');
+require('../useIsMounted-Bnc7sV2u.js');
+require('../Text-DjQd0Ko6.js');
+require('../Typography-D42Vw2tg.js');
+require('../Icon-hzzO5dnb.js');
 require('@jobber/design');
-require('../Heading-uY5NMC6R.js');
-require('../useAtlantisConfig-CFsS2rFN.js');
-require('../InputText-Bf8bpzve.js');
-require('../FormField-B865Zq6s.js');
+require('../Heading-B71idoWS.js');
+require('../useAtlantisConfig-DnQ8BsxW.js');
+require('../InputText-Bz7189d1.js');
+require('../FormField-Dcn1R09U.js');
 require('react-hook-form');
-require('../Button-CdFKgOjt.js');
+require('../Button-nA6ymBW2.js');
 require('react-router-dom');
-require('../InputValidation-BvFAMweO.js');
+require('../InputValidation-BmQejbB4.js');
 require('framer-motion');
-require('../Spinner-YuQ5bN78.js');
+require('../Spinner-CRuMTRDX.js');
 
 
 

package/dist/Autocomplete/index.mjs

@@ -1,28 +1,27 @@
-export { A as Autocomplete } from '../Autocomplete-DTCB6Mn3.js';
-import '../tslib.es6-Df1SgIEn.js';
+export { A as Autocomplete } from '../Autocomplete-C6FHuxXo.js';
+import '../tslib.es6-CpCvXiaK.js';
 import 'react';
-import '../debounce-D3te8_TG.js';
-import '../_commonjsHelpers-E-ZsRS8r.js';
-import '../isObjectLike-CkQBn_-v.js';
-import '../isSymbol-BB8mecpv.js';
-import '../style-inject.es-tgCJW-Cu.js';
+import '../debounce-DfEs2dId.js';
+import '../_commonjsHelpers-ByKSw8M_.js';
+import '../isObjectLike-DzUyIMtg.js';
+import '../isSymbol-CP8SYzWl.js';
 import 'classnames';
 import 'react-dom';
 import 'react-popper';
-import '../useOnKeyDown-BcoTkvog.js';
-import '../useSafeLayoutEffect-kgxSfuSX.js';
-import '../useIsMounted-Bv7nYElm.js';
-import '../Text-B0MvS7fA.js';
-import '../Typography-BLZqr2yE.js';
-import '../Icon-CoHJokXb.js';
+import '../useOnKeyDown-DUFfc1-F.js';
+import '../useSafeLayoutEffect-Dt6ttMH1.js';
+import '../useIsMounted-gVoBVqka.js';
+import '../Text-CTlHUXxm.js';
+import '../Typography-CH95DSHa.js';
+import '../Icon-Cxtu-PZL.js';
 import '@jobber/design';
-import '../Heading-C6F5DmMP.js';
-import '../useAtlantisConfig-7GBnNnKI.js';
-import '../InputText-CSy-CW4w.js';
-import '../FormField-CdAuYy0F.js';
+import '../Heading-BZh3o4sl.js';
+import '../useAtlantisConfig-U8SfFF4f.js';
+import '../InputText-DOX_d1sZ.js';
+import '../FormField-BxY4L9wD.js';
 import 'react-hook-form';
-import '../Button-DCEN_VU9.js';
+import '../Button-DNI8B3Xo.js';
 import 'react-router-dom';
-import '../InputValidation-DDTInAPc.js';
+import '../InputValidation-DN3qk6pq.js';
 import 'framer-motion';
-import '../Spinner-5gazZn3N.js';
+import '../Spinner-DVNueanD.js';

package/dist/{Autocomplete-DTCB6Mn3.js → Autocomplete-C6FHuxXo.js}

@@ -1,21 +1,18 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-Df1SgIEn.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-CpCvXiaK.js';
 import React, { useState, useEffect, forwardRef, useRef } from 'react';
-import { d as debounce } from './debounce-D3te8_TG.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { d as debounce } from './debounce-DfEs2dId.js';
 import classnames from 'classnames';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-BcoTkvog.js';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-kgxSfuSX.js';
-import { u as useIsMounted_2 } from './useIsMounted-Bv7nYElm.js';
-import { T as Text } from './Text-B0MvS7fA.js';
-import { I as Icon } from './Icon-CoHJokXb.js';
-import { H as Heading } from './Heading-C6F5DmMP.js';
-import { I as InputText } from './InputText-CSy-CW4w.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DUFfc1-F.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-Dt6ttMH1.js';
+import { u as useIsMounted_2 } from './useIsMounted-gVoBVqka.js';
+import { T as Text } from './Text-CTlHUXxm.js';
+import { I as Icon } from './Icon-Cxtu-PZL.js';
+import { H as Heading } from './Heading-BZh3o4sl.js';
+import { I as InputText } from './InputText-DOX_d1sZ.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(6 + 1001);\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: 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  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\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: calc(16px / 2);\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 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\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: calc(16px / 2);\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: calc(16px * 1.5);\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) {

package/dist/{Autocomplete-C4p_VjUV.js → Autocomplete-krSdjKkZ.js}

@@ -1,23 +1,20 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
+var tslib_es6 = require('./tslib.es6-C-HYojaW.js');
 var React = require('react');
-var debounce = require('./debounce-CJA36ltI.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var debounce = require('./debounce-Bl-yjBp-.js');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
-var useOnKeyDown = require('./useOnKeyDown-D9ZBkLqI.js');
-var useSafeLayoutEffect = require('./useSafeLayoutEffect-CYoPOUNG.js');
-var useIsMounted = require('./useIsMounted-Bd3yeb_P.js');
-var Text = require('./Text-L0uH5HlC.js');
-var Icon = require('./Icon-B9XNdA1T.js');
-var Heading = require('./Heading-uY5NMC6R.js');
-var InputText = require('./InputText-Bf8bpzve.js');
+var useOnKeyDown = require('./useOnKeyDown-DIX1rWRg.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-D7sZrvwk.js');
+var useIsMounted = require('./useIsMounted-Bnc7sV2u.js');
+var Text = require('./Text-DjQd0Ko6.js');
+var Icon = require('./Icon-hzzO5dnb.js');
+var Heading = require('./Heading-B71idoWS.js');
+var InputText = require('./InputText-Bz7189d1.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(6 + 1001);\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: 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  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\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: calc(16px / 2);\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 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\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: calc(16px / 2);\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: calc(16px * 1.5);\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_es.styleInject(css_248z);
 
 var IndexChange;
 (function (IndexChange) {

package/dist/Avatar/index.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
-var Avatar = require('../Avatar-AkaG8y0Q.js');
+var Avatar = require('../Avatar-nNI0Dlef.js');
 require('react');
 require('classnames');
-require('../style-inject.es-XZHJH68X.js');
 require('color');
-require('../Icon-B9XNdA1T.js');
+require('../Icon-hzzO5dnb.js');
 require('@jobber/design');
 
 

package/dist/Avatar/index.mjs

@@ -1,7 +1,6 @@
-export { A as Avatar } from '../Avatar-CckTha1O.js';
+export { A as Avatar } from '../Avatar-C0kVFCBc.js';
 import 'react';
 import 'classnames';
-import '../style-inject.es-tgCJW-Cu.js';
 import 'color';
-import '../Icon-CoHJokXb.js';
+import '../Icon-Cxtu-PZL.js';
 import '@jobber/design';

package/dist/Avatar-C0kVFCBc.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import classnames from 'classnames';
+import Color from 'color';
+import { I as Icon } from './Icon-Cxtu-PZL.js';
+
+var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
+
+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-nNI0Dlef.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Color = require('color');
+var Icon = require('./Icon-hzzO5dnb.js');
+
+var styles = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
+
+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.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));
+}
+
+exports.Avatar = Avatar;

package/dist/Banner/components/BannerIcon/index.cjs

@@ -1,12 +1,11 @@
 'use strict';
 
-var BannerIcon = require('../../../BannerIcon-B1SZQKIB.js');
+var BannerIcon = require('../../../BannerIcon-DI1SbgRM.js');
 require('react');
 require('classnames');
-require('../../../useAtlantisConfig-CFsS2rFN.js');
-require('../../../useSafeLayoutEffect-CYoPOUNG.js');
-require('../../../style-inject.es-XZHJH68X.js');
-require('../../../Icon-B9XNdA1T.js');
+require('../../../useAtlantisConfig-DnQ8BsxW.js');
+require('../../../useSafeLayoutEffect-D7sZrvwk.js');
+require('../../../Icon-hzzO5dnb.js');
 require('@jobber/design');
 
 

package/dist/Banner/components/BannerIcon/index.mjs

@@ -1,8 +1,7 @@
-export { B as BannerIcon } from '../../../BannerIcon-x0kR2B3_.js';
+export { B as BannerIcon } from '../../../BannerIcon-CfVDBQtf.js';
 import 'react';
 import 'classnames';
-import '../../../useAtlantisConfig-7GBnNnKI.js';
-import '../../../useSafeLayoutEffect-kgxSfuSX.js';
-import '../../../style-inject.es-tgCJW-Cu.js';
-import '../../../Icon-CoHJokXb.js';
+import '../../../useAtlantisConfig-U8SfFF4f.js';
+import '../../../useSafeLayoutEffect-Dt6ttMH1.js';
+import '../../../Icon-Cxtu-PZL.js';
 import '@jobber/design';

package/dist/Banner/index.cjs

@@ -1,22 +1,21 @@
 'use strict';
 
-var Banner = require('../Banner--DxZMMO9.js');
+var Banner = require('../Banner-Dl7XUMl4.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-BqrsAsTY.js');
-require('../_commonjsHelpers-B83fTs8d.js');
-require('../debounce-CJA36ltI.js');
-require('../isObjectLike-BUFV4ggG.js');
-require('../isSymbol-DS9vlqp3.js');
-require('../BannerIcon-B1SZQKIB.js');
-require('../useAtlantisConfig-CFsS2rFN.js');
-require('../useSafeLayoutEffect-CYoPOUNG.js');
-require('../style-inject.es-XZHJH68X.js');
-require('../Icon-B9XNdA1T.js');
+require('../useResizeObserver-BbxlOmMA.js');
+require('../_commonjsHelpers-Bc1dp4FJ.js');
+require('../debounce-Bl-yjBp-.js');
+require('../isObjectLike-B2TjP8Gx.js');
+require('../isSymbol-Dh625d8C.js');
+require('../BannerIcon-DI1SbgRM.js');
+require('../useAtlantisConfig-DnQ8BsxW.js');
+require('../useSafeLayoutEffect-D7sZrvwk.js');
+require('../Icon-hzzO5dnb.js');
 require('@jobber/design');
-require('../Text-L0uH5HlC.js');
-require('../Typography-g6o6Nu4H.js');
-require('../Button-CdFKgOjt.js');
+require('../Text-DjQd0Ko6.js');
+require('../Typography-D42Vw2tg.js');
+require('../Button-nA6ymBW2.js');
 require('react-router-dom');
 
 

package/dist/Banner/index.mjs

@@ -1,18 +1,17 @@
-export { B as Banner } from '../Banner-DSdy9opW.js';
+export { B as Banner } from '../Banner-D0tLQ_gf.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-CF7bHzff.js';
-import '../_commonjsHelpers-E-ZsRS8r.js';
-import '../debounce-D3te8_TG.js';
-import '../isObjectLike-CkQBn_-v.js';
-import '../isSymbol-BB8mecpv.js';
-import '../BannerIcon-x0kR2B3_.js';
-import '../useAtlantisConfig-7GBnNnKI.js';
-import '../useSafeLayoutEffect-kgxSfuSX.js';
-import '../style-inject.es-tgCJW-Cu.js';
-import '../Icon-CoHJokXb.js';
+import '../useResizeObserver-C2MVUhWJ.js';
+import '../_commonjsHelpers-ByKSw8M_.js';
+import '../debounce-DfEs2dId.js';
+import '../isObjectLike-DzUyIMtg.js';
+import '../isSymbol-CP8SYzWl.js';
+import '../BannerIcon-CfVDBQtf.js';
+import '../useAtlantisConfig-U8SfFF4f.js';
+import '../useSafeLayoutEffect-Dt6ttMH1.js';
+import '../Icon-Cxtu-PZL.js';
 import '@jobber/design';
-import '../Text-B0MvS7fA.js';
-import '../Typography-BLZqr2yE.js';
-import '../Button-DCEN_VU9.js';
+import '../Text-CTlHUXxm.js';
+import '../Typography-CH95DSHa.js';
+import '../Button-DNI8B3Xo.js';
 import 'react-router-dom';

package/dist/{Banner-DSdy9opW.js → Banner-D0tLQ_gf.js}

@@ -1,16 +1,13 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
-import { u as useResizeObserver } from './useResizeObserver-CF7bHzff.js';
-import { s as styles, B as BannerIcon } from './BannerIcon-x0kR2B3_.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import { I as Icon } from './Icon-CoHJokXb.js';
-import { T as Text } from './Text-B0MvS7fA.js';
-import { B as Button } from './Button-DCEN_VU9.js';
-import { u as useAtlantisConfig } from './useAtlantisConfig-7GBnNnKI.js';
+import { u as useResizeObserver } from './useResizeObserver-C2MVUhWJ.js';
+import { s as styles, B as BannerIcon } from './BannerIcon-CfVDBQtf.js';
+import { I as Icon } from './Icon-Cxtu-PZL.js';
+import { T as Text } from './Text-CTlHUXxm.js';
+import { B as Button } from './Button-DNI8B3Xo.js';
+import { u as useAtlantisConfig } from './useAtlantisConfig-U8SfFF4f.js';
 
-var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\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(203, 223, 159);\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(css_248z);
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
     const { JOBBER_RETHEME } = useAtlantisConfig();

package/dist/{Banner--DxZMMO9.js → Banner-Dl7XUMl4.js}

@@ -2,17 +2,14 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-BqrsAsTY.js');
-var BannerIcon = require('./BannerIcon-B1SZQKIB.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
-var Icon = require('./Icon-B9XNdA1T.js');
-var Text = require('./Text-L0uH5HlC.js');
-var Button = require('./Button-CdFKgOjt.js');
-var useAtlantisConfig = require('./useAtlantisConfig-CFsS2rFN.js');
+var useResizeObserver = require('./useResizeObserver-BbxlOmMA.js');
+var BannerIcon = require('./BannerIcon-DI1SbgRM.js');
+var Icon = require('./Icon-hzzO5dnb.js');
+var Text = require('./Text-DjQd0Ko6.js');
+var Button = require('./Button-nA6ymBW2.js');
+var useAtlantisConfig = require('./useAtlantisConfig-DnQ8BsxW.js');
 
-var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\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(203, 223, 159);\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);
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
     const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();

package/dist/BannerIcon-CfVDBQtf.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import classnames from 'classnames';
+import { u as useAtlantisConfig } from './useAtlantisConfig-U8SfFF4f.js';
+import { I as Icon } from './Icon-Cxtu-PZL.js';
+
+var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-","iconWrapper":"SG8xSJADp2k-"};
+
+var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c8TbjyV5YU-","notice":"bMc69fYWngM-"};
+
+function BannerIcon({ icon, type }) {
+    const { JOBBER_RETHEME } = useAtlantisConfig();
+    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" });
+}
+
+export { BannerIcon as B, styles as s };

package/dist/BannerIcon-DI1SbgRM.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var useAtlantisConfig = require('./useAtlantisConfig-DnQ8BsxW.js');
+var Icon = require('./Icon-hzzO5dnb.js');
+
+var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-","iconWrapper":"SG8xSJADp2k-"};
+
+var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c8TbjyV5YU-","notice":"bMc69fYWngM-"};
+
+function BannerIcon({ icon, type }) {
+    const { JOBBER_RETHEME } = useAtlantisConfig.useAtlantisConfig();
+    if (JOBBER_RETHEME) {
+        return (React.createElement("span", { className: classnames(styles.iconWrapper, iconStyles[type]) },
+            React.createElement(Icon.Icon, { name: icon, color: "white", size: "small" })));
+    }
+    return React.createElement(Icon.Icon, { name: icon, color: "greyBlueDark" });
+}
+
+exports.BannerIcon = BannerIcon;
+exports.styles = styles;