@jobber/components 4.85.6-CJS-to-ESM.27 → 4.85.6-ssrpeer-d.59

package/AtlantisContext.d.ts

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

package/AtlantisContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AtlantisContext = require("./dist/AtlantisContext");
+
+Object.keys(AtlantisContext).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AtlantisContext[key];
+    },
+  });
+});

package/dist/AnimatedPresence/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var AnimatedPresence = require('../AnimatedPresence-DFaAEYUa.js');
+var AnimatedPresence = require('../AnimatedPresence-DoELxlO2.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-B_iyMdIA.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-CMN__Lkx.js');
 require('react');
 require('framer-motion');
-require('../Icon-B9XNdA1T.js');
+require('../Icon-CTPUxvh3.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-DSZY5819.js';
 import 'react';
 import 'framer-motion';
-import '../Icon-CoHJokXb.js';
+import '../Icon-DuVVbkui.js';
 import '@jobber/design';

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

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

package/dist/{AnimatedSwitcher-B4fUExeN.js → AnimatedSwitcher-DSZY5819.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-DuVVbkui.js';
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;

package/dist/AtlantisContext/AtlantisContext.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export interface AtlantisContextProps {
+    /**
+     * The date format Atlantis components would use
+     */
+    readonly dateFormat: string;
+    /**
+     * The time format Atlantis components would use
+     */
+    readonly timeFormat: string;
+    /**
+     * Time zone used in converting the date and time formats
+     */
+    readonly timeZone: string;
+    /**
+     * Grabs the decimal separator and group separator based on locale
+     */
+    readonly floatSeparators: Record<"decimal" | "group", string>;
+    /**
+     * The currency symbol Atlantis components will use
+     */
+    readonly currencySymbol: string;
+    /**
+     * Change the locale of the components. This updates the strings that comes
+     * with the components, updates the date and time formats, and/or the
+     * native 3rd-party packages.
+     *
+     * @default "en"
+     */
+    readonly locale: string;
+}
+export declare const atlantisContextDefaultValues: AtlantisContextProps;
+export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;
+export declare function useAtlantisContext(): AtlantisContextProps;

package/dist/AtlantisContext/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var AtlantisContext = require('../AtlantisContext-CX2VTRpz.js');
+require('react');
+
+
+
+exports.AtlantisContext = AtlantisContext.AtlantisContext;
+exports.atlantisContextDefaultValues = AtlantisContext.atlantisContextDefaultValues;
+exports.useAtlantisContext = AtlantisContext.useAtlantisContext;

package/dist/AtlantisContext/index.d.ts

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

package/dist/AtlantisContext/index.mjs

@@ -0,0 +1,2 @@
+export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from '../AtlantisContext-B12OTjdb.js';
+import 'react';

package/dist/AtlantisContext-B12OTjdb.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const atlantisContextDefaultValues = {
+    dateFormat: "P",
+    // The system time is "p"
+    timeFormat: "p",
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    floatSeparators: { group: ",", decimal: "." },
+    currencySymbol: "$",
+    locale: "en",
+};
+const AtlantisContext = createContext(atlantisContextDefaultValues);
+function useAtlantisContext() {
+    return useContext(AtlantisContext);
+}
+
+export { AtlantisContext as A, atlantisContextDefaultValues as a, useAtlantisContext as u };

package/dist/AtlantisContext-CX2VTRpz.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const atlantisContextDefaultValues = {
+    dateFormat: "P",
+    // The system time is "p"
+    timeFormat: "p",
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    floatSeparators: { group: ",", decimal: "." },
+    currencySymbol: "$",
+    locale: "en",
+};
+const AtlantisContext = React.createContext(atlantisContextDefaultValues);
+function useAtlantisContext() {
+    return React.useContext(AtlantisContext);
+}
+
+exports.AtlantisContext = AtlantisContext;
+exports.atlantisContextDefaultValues = atlantisContextDefaultValues;
+exports.useAtlantisContext = useAtlantisContext;

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-lRgp4ZcE.js');
+require('../tslib.es6-BGeyZlVV.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-fqhrtF-n.js');
+require('../_commonjsHelpers-BpkI13wT.js');
+require('../isObjectLike-DYsKHac5.js');
+require('../isSymbol-CRFQsu6J.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-DyI76q0N.js');
+require('../useSafeLayoutEffect-BRpqyeOO.js');
+require('../useIsMounted-0A-hQw5m.js');
+require('../Text-BwPiZiWE.js');
+require('../Typography-COsPjqPQ.js');
+require('../Icon-CTPUxvh3.js');
 require('@jobber/design');
-require('../Heading-uY5NMC6R.js');
-require('../useAtlantisConfig-CFsS2rFN.js');
-require('../InputText-Bf8bpzve.js');
-require('../FormField-B865Zq6s.js');
+require('../Heading-h56oslFS.js');
+require('../useAtlantisConfig-CaOtPwZr.js');
+require('../InputText-CYO-BiAU.js');
+require('../FormField-CF4I8pym.js');
 require('react-hook-form');
-require('../Button-CdFKgOjt.js');
+require('../Button-DUXGWd67.js');
 require('react-router-dom');
-require('../InputValidation-BvFAMweO.js');
+require('../InputValidation-CYgC37Rd.js');
 require('framer-motion');
-require('../Spinner-YuQ5bN78.js');
+require('../Spinner-BBqHnOqB.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-BDQaTAlG.js';
+import '../tslib.es6-BK55SBUx.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-DlC4pNXC.js';
+import '../_commonjsHelpers-CFh3bTRZ.js';
+import '../isObjectLike-D7G8spz1.js';
+import '../isSymbol-BMkTtdfg.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-DXAfx4Z9.js';
+import '../useSafeLayoutEffect-CWnB6KFM.js';
+import '../useIsMounted-BR-gK-Fk.js';
+import '../Text-VNTJTVnp.js';
+import '../Typography-FOjcOPVe.js';
+import '../Icon-DuVVbkui.js';
 import '@jobber/design';
-import '../Heading-C6F5DmMP.js';
-import '../useAtlantisConfig-7GBnNnKI.js';
-import '../InputText-CSy-CW4w.js';
-import '../FormField-CdAuYy0F.js';
+import '../Heading-BaUTRBZj.js';
+import '../useAtlantisConfig-BJ9OoXDV.js';
+import '../InputText-DmwOn5u4.js';
+import '../FormField-CICUVowh.js';
 import 'react-hook-form';
-import '../Button-DCEN_VU9.js';
+import '../Button-BvL5x_-P.js';
 import 'react-router-dom';
-import '../InputValidation-DDTInAPc.js';
+import '../InputValidation-BDMUAh8z.js';
 import 'framer-motion';
-import '../Spinner-5gazZn3N.js';
+import '../Spinner-B-aJzQhn.js';

package/dist/{Autocomplete-DTCB6Mn3.js → Autocomplete-BDQaTAlG.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-BK55SBUx.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-DlC4pNXC.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-DXAfx4Z9.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-CWnB6KFM.js';
+import { u as useIsMounted_2 } from './useIsMounted-BR-gK-Fk.js';
+import { T as Text } from './Text-VNTJTVnp.js';
+import { I as Icon } from './Icon-DuVVbkui.js';
+import { H as Heading } from './Heading-BaUTRBZj.js';
+import { I as InputText } from './InputText-DmwOn5u4.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-lRgp4ZcE.js}

@@ -1,23 +1,20 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
+var tslib_es6 = require('./tslib.es6-BGeyZlVV.js');
 var React = require('react');
-var debounce = require('./debounce-CJA36ltI.js');
-var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var debounce = require('./debounce-fqhrtF-n.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-DyI76q0N.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-BRpqyeOO.js');
+var useIsMounted = require('./useIsMounted-0A-hQw5m.js');
+var Text = require('./Text-BwPiZiWE.js');
+var Icon = require('./Icon-CTPUxvh3.js');
+var Heading = require('./Heading-h56oslFS.js');
+var InputText = require('./InputText-CYO-BiAU.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-BSmm-RfH.js');
 require('react');
 require('classnames');
-require('../style-inject.es-XZHJH68X.js');
 require('color');
-require('../Icon-B9XNdA1T.js');
+require('../Icon-CTPUxvh3.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-BLl8_Wb9.js';
 import 'react';
 import 'classnames';
-import '../style-inject.es-tgCJW-Cu.js';
 import 'color';
-import '../Icon-CoHJokXb.js';
+import '../Icon-DuVVbkui.js';
 import '@jobber/design';

package/dist/Avatar-BLl8_Wb9.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import classnames from 'classnames';
+import Color from 'color';
+import { I as Icon } from './Icon-DuVVbkui.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-BSmm-RfH.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Color = require('color');
+var Icon = require('./Icon-CTPUxvh3.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-UaiE73ry.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-CaOtPwZr.js');
+require('../../../useSafeLayoutEffect-BRpqyeOO.js');
+require('../../../Icon-CTPUxvh3.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-BEgYz8gl.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-BJ9OoXDV.js';
+import '../../../useSafeLayoutEffect-CWnB6KFM.js';
+import '../../../Icon-DuVVbkui.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-CjuUTwq7.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-CJCcsKJc.js');
+require('../_commonjsHelpers-BpkI13wT.js');
+require('../debounce-fqhrtF-n.js');
+require('../isObjectLike-DYsKHac5.js');
+require('../isSymbol-CRFQsu6J.js');
+require('../BannerIcon-UaiE73ry.js');
+require('../useAtlantisConfig-CaOtPwZr.js');
+require('../useSafeLayoutEffect-BRpqyeOO.js');
+require('../Icon-CTPUxvh3.js');
 require('@jobber/design');
-require('../Text-L0uH5HlC.js');
-require('../Typography-g6o6Nu4H.js');
-require('../Button-CdFKgOjt.js');
+require('../Text-BwPiZiWE.js');
+require('../Typography-COsPjqPQ.js');
+require('../Button-DUXGWd67.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-nD8Qp0DC.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-BR41S3QQ.js';
+import '../_commonjsHelpers-CFh3bTRZ.js';
+import '../debounce-DlC4pNXC.js';
+import '../isObjectLike-D7G8spz1.js';
+import '../isSymbol-BMkTtdfg.js';
+import '../BannerIcon-BEgYz8gl.js';
+import '../useAtlantisConfig-BJ9OoXDV.js';
+import '../useSafeLayoutEffect-CWnB6KFM.js';
+import '../Icon-DuVVbkui.js';
 import '@jobber/design';
-import '../Text-B0MvS7fA.js';
-import '../Typography-BLZqr2yE.js';
-import '../Button-DCEN_VU9.js';
+import '../Text-VNTJTVnp.js';
+import '../Typography-FOjcOPVe.js';
+import '../Button-BvL5x_-P.js';
 import 'react-router-dom';