@jobber/components 4.59.0 → 4.59.1-st-spike-w.0

package/dist/AnimatedSwitcher/index.js

@@ -1,13 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-require('react');
-require('framer-motion');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-
-
-
-exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
+export { A as AnimatedSwitcher } from '../AnimatedSwitcher-6ffd5003.js';
+import 'react';
+import 'framer-motion';
+import '../Icon-22723fe6.js';
+import '@jobber/design';

package/dist/{AnimatedSwitcher-d1e1ddcf.js → AnimatedSwitcher-6ffd5003.js}

@@ -1,12 +1,6 @@
-'use strict';
-
-var React = require('react');
-var framerMotion = require('framer-motion');
-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);
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { I as Icon } from './Icon-22723fe6.js';
 
 const DURATION_SIMPLE = 0.1;
 const DURATION_AVERAGE = 0.2;
@@ -48,11 +42,11 @@ const SPIN_CLOCK_WISE = {
 };
 
 function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = React.useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
+    const [ref, setRef] = useState(null);
+    const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
     const { key, transition, child, duration } = getChildData();
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
-        React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
+    return (React.createElement(AnimatePresence, { exitBeforeEnter: true, initial: false },
+        React.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
     function getDisplayValue() {
         if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
             return window.getComputedStyle(ref.firstElementChild).display;
@@ -90,7 +84,7 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
     }
 }
 AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React__default["default"].createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default["default"].createElement(Icon.Icon, { name: initialIcon }), switchTo: React__default["default"].createElement(Icon.Icon, { name: switchToIcon }) }));
+    return (React.createElement(AnimatedSwitcher, { switched: switched, initialChild: React.createElement(Icon, { name: initialIcon }), switchTo: React.createElement(Icon, { name: switchToIcon }) }));
 };
 
-exports.AnimatedSwitcher = AnimatedSwitcher;
+export { AnimatedSwitcher as A };

package/dist/Autocomplete/index.js

@@ -1,40 +1,29 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var React = require('react');
-var debounce = require('lodash/debounce');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var classnames = require('classnames');
-var useEventListener = require('@use-it/event-listener');
-var ReactDOM = require('react-dom');
-var reactPopper = require('react-popper');
-var Text = require('../Text-54334431.js');
-var Icon = require('../Icon-405a216c.js');
-var Heading = require('../Heading-4cde9989.js');
-var InputText = require('../InputText-ab237501.js');
-require('../Typography-83915c54.js');
-require('@jobber/design');
-require('../FormField-fa9254dc.js');
-require('uuid');
-require('react-hook-form');
-require('../Button-db6114a6.js');
-require('react-router-dom');
-require('../InputValidation-377d6c62.js');
-require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var useEventListener__default = /*#__PURE__*/_interopDefaultLegacy(useEventListener);
+import { _ as __rest, a as __awaiter } from '../tslib.es6-5849cd88.js';
+import React, { useState, useEffect, useLayoutEffect, forwardRef, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import { s as styleInject } from '../style-inject.es-a0e1a0ba.js';
+import classnames from 'classnames';
+import useEventListener from '@use-it/event-listener';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+import { T as Text } from '../Text-703e2c21.js';
+import { I as Icon } from '../Icon-22723fe6.js';
+import { H as Heading } from '../Heading-04994667.js';
+import { I as InputText } from '../InputText-6d262128.js';
+import '../Typography-09952a2f.js';
+import '@jobber/design';
+import '../FormField-99918ed4.js';
+import 'uuid';
+import 'react-hook-form';
+import '../Button-319d8fa0.js';
+import 'react-router-dom';
+import '../InputValidation-b6adff05.js';
+import 'framer-motion';
+import '../Spinner-5d8359b8.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  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\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(250, 246, 219);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(231, 213, 87);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 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);
+styleInject(css_248z);
 
 var IndexChange;
 (function (IndexChange) {
@@ -42,35 +31,35 @@ var IndexChange;
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
 function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
-    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    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();
-    React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    const menu = (React__default["default"].createElement("div", Object.assign({ className: classnames__default["default"](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__default["default"](styles.option, {
+    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__default["default"].createElement("div", { key: option.label, className: styles.heading },
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, option.label)));
+            return (React.createElement("div", { key: option.label, className: styles.heading },
+                React.createElement(Heading, { level: 5 }, option.label)));
         }
-        return (React__default["default"].createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
-            React__default["default"].createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
-            React__default["default"].createElement("div", { className: styles.text },
-                React__default["default"].createElement("div", { className: styles.label },
-                    React__default["default"].createElement(Text.Text, null, option.label),
-                    option.description !== undefined && (React__default["default"].createElement(Text.Text, { variation: "subdued" }, option.description))),
-                option.details !== undefined && (React__default["default"].createElement("div", { className: styles.details },
-                    React__default["default"].createElement(Text.Text, null, option.details))))));
+        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 ReactDOM.createPortal(menu, document.body);
+    return createPortal(menu, document.body);
     function setupKeyListeners() {
-        React.useEffect(() => {
+        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",
@@ -116,7 +105,7 @@ function isOptionSelected(selectedOption, option) {
 function useOnKeyDown(keyName, handler) {
     // Pending: https://github.com/donavon/use-event-listener/pull/12
     // The types in useEventListener mistakenly require a SyntheticEvent for the passed generic.
-    useEventListener__default["default"]("keydown", event => {
+    useEventListener("keydown", event => {
         const newEvent = event;
         if (newEvent.key === keyName) {
             handler(newEvent);
@@ -130,14 +119,14 @@ function isGroup(option) {
 }
 function useRepositionMenu(attachTo, visible = false) {
     var _a;
-    const [menuRef, setMenuRef] = React.useState();
-    const popper = reactPopper.usePopper(attachTo.current, menuRef, {
+    const [menuRef, setMenuRef] = useState();
+    const popper = usePopper(attachTo.current, menuRef, {
         modifiers: [
             { name: "offset", options: { offset: [0, 8] } },
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);
@@ -149,23 +138,23 @@ function useRepositionMenu(attachTo, visible = false) {
 /* 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 = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
-    const [options, setOptions] = React.useState(initialOptions);
-    const [menuVisible, setMenuVisible] = React.useState(false);
-    const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
-    const autocompleteRef = React.useRef(null);
-    const delayedSearch = debounce__default["default"](updateSearch, debounceRate);
-    React.useEffect(() => {
+    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]);
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
-    return (React__default["default"].createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
-        React__default["default"].createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
-        menuVisible && (React__default["default"].createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    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 === "") {
@@ -173,7 +162,7 @@ function AutocompleteInternal(_a, ref) {
         }
     }
     function updateSearch() {
-        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        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));
@@ -214,6 +203,6 @@ function mapToOptions(items) {
         return result;
     }, []);
 }
-const Autocomplete = React.forwardRef(AutocompleteInternal);
+const Autocomplete = forwardRef(AutocompleteInternal);
 
-exports.Autocomplete = Autocomplete;
+export { Autocomplete };

package/dist/Avatar/index.js

@@ -1,15 +1,7 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Avatar = require('../Avatar-1aa30ee1.js');
-require('react');
-require('classnames');
-require('../style-inject.es-9d2f5f4e.js');
-require('color');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-
-
-
-exports.Avatar = Avatar.Avatar;
+export { A as Avatar } from '../Avatar-b2e862de.js';
+import 'react';
+import 'classnames';
+import '../style-inject.es-a0e1a0ba.js';
+import 'color';
+import '../Icon-22723fe6.js';
+import '@jobber/design';

package/dist/{Avatar-1aa30ee1.js → Avatar-b2e862de.js}

@@ -1,20 +1,12 @@
-'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);
+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(16px * 2);\n  width: var(--avatar-size);\n  height: calc(16px * 2);\n  height: var(--avatar-size);\n  min-width: calc(16px * 2);\n  min-width: var(--avatar-size);\n  min-height: calc(16px * 2);\n  min-height: var(--avatar-size);\n  border-radius: 100%;\n  border-radius: var(--radius-circle);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-size: calc(16px * 2);\n  font-size: var(--avatar-size);\n  -webkit-font-smoothing: antialiased;\n  background: no-repeat center center rgba(101, 120, 132, 1);\n  background: no-repeat center center var(--color-greyBlue);\n  background-size: cover;\n}\n\n.WniTNadEyPk-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\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: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n}\n\n.ErPhpHHpiBQ- {\n  font-size: calc((16px * 2) / 2);\n  font-size: calc(calc(16px * 2) / 2);\n  font-size: calc(var(--avatar-size) / 2);\n  text-transform: uppercase;\n}\n\n.aC-d-mngrIc- {\n  font-size: calc((16px * 2) / 2.25);\n  font-size: calc(calc(16px * 2) / 2.25);\n  font-size: calc(var(--avatar-size) / 2.25);\n}\n\n.nR0S-GzjDnQ- {\n  width: calc((16px * 2) - (calc(16px / 16) * 2));\n  width: calc(calc(16px * 2) - (calc(16px / 16) * 2));\n  width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  height: calc((16px * 2) - (calc(16px / 16) * 2));\n  height: calc(calc(16px * 2) - (calc(16px / 16) * 2));\n  height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  box-shadow: 0 0 0 calc(16px / 8) rgba(255, 255, 255, 1) inset;\n  box-shadow: 0 0 0 var(--border-thick) var(--color-white) inset;\n  border-style: solid;\n  border-width: calc(16px / 16);\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);
+styleInject(css_248z);
 
 function isDark(colorToCheck) {
     if (colorToCheck == undefined) {
@@ -22,7 +14,7 @@ function isDark(colorToCheck) {
     }
     if (colorToCheck) {
         try {
-            return Color__default["default"](deconstructCssCustomProperty(colorToCheck)).isDark();
+            return Color(deconstructCssCustomProperty(colorToCheck)).isDark();
         }
         catch (err) {
             console.log(err);
@@ -59,20 +51,20 @@ function Avatar({ imageUrl, name, initials, size = "base", color, }) {
         style.backgroundImage = `url(${imageUrl})`;
     }
     const shouldBeDark = color == undefined || isDark(color);
-    const className = classnames__default["default"](styles.avatar, size !== "base" && styles[size], {
+    const className = classnames(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 }))));
+    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__default["default"].createElement(Icon.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
+        return (React.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
     }
-    const className = classnames__default["default"](styles.initials, {
+    const className = classnames(styles.initials, {
         [styles.smallInitials]: initials.length > 2,
     });
-    return React__default["default"].createElement("span", { className: className }, initials.substr(0, 3));
+    return React.createElement("span", { className: className }, initials.substr(0, 3));
 }
 
-exports.Avatar = Avatar;
+export { Avatar as A };

package/dist/Banner/index.js

@@ -1,42 +1,33 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks/useResizeObserver');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Icon = require('../Icon-405a216c.js');
-var Text = require('../Text-54334431.js');
-var Button = require('../Button-db6114a6.js');
-require('@jobber/design');
-require('../Typography-83915c54.js');
-require('react-router-dom');
-
-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);
+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 { I as Icon } from '../Icon-22723fe6.js';
+import { T as Text } from '../Text-703e2c21.js';
+import { B as Button } from '../Button-319d8fa0.js';
+import '@jobber/design';
+import '../Typography-09952a2f.js';
+import 'react-router-dom';
 
 var css_248z$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 41, 57);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489.98px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489.98px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
 var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-"};
-styleInject_es.styleInject(css_248z$1);
+styleInject(css_248z$1);
 
 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);
+styleInject(css_248z);
 
 function BannerIcon({ icon }) {
-    return React__default["default"].createElement(Icon.Icon, { name: icon, color: "greyBlueDark" });
+    return React.createElement(Icon, { name: icon, color: "greyBlueDark" });
 }
 
 function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const [showBanner, setShowBanner] = React.useState(true);
+    const [showBanner, setShowBanner] = useState(true);
     const bannerWidths = {
         small: 320,
         medium: 480,
     };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = useResizeObserver({
         widths: bannerWidths,
     });
     const iconColors = {
@@ -52,18 +43,18 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
             variation: type === "notice" ? "learning" : "work",
         }, primaryAction);
     }
-    const bannerClassNames = classnames__default["default"](styles.banner, types[type], {
+    const bannerClassNames = classnames(styles.banner, types[type], {
         [styles.medium]: bannerWidth >= bannerWidths.medium,
     });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default["default"].createElement("div", { className: styles.bannerContent },
-            icon && React__default["default"].createElement(BannerIcon, { icon: icon }),
-            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", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
-            React__default["default"].createElement(Icon.Icon, { name: "cross", color: iconColors[type] })))))));
+    return (React.createElement(React.Fragment, null, showBanner && (React.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
+        React.createElement("div", { className: styles.bannerContent },
+            icon && React.createElement(BannerIcon, { icon: icon }),
+            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", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
+            React.createElement(Icon, { name: "cross", color: iconColors[type] })))))));
     function handleClose() {
         setShowBanner(!showBanner);
         onDismiss && onDismiss();
@@ -71,11 +62,11 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
 }
 function BannerChildren({ children, }) {
     if (!children)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return React.createElement(React.Fragment, null);
     if (children && typeof children === "string") {
-        return React__default["default"].createElement(Text.Text, null, children);
+        return React.createElement(Text, null, children);
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 }
 
-exports.Banner = Banner;
+export { Banner };

package/dist/Button/index.js

@@ -1,16 +1,8 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Button = require('../Button-db6114a6.js');
-require('react');
-require('classnames');
-require('react-router-dom');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../Typography-83915c54.js');
-
-
-
-exports.Button = Button.Button;
+export { B as Button } from '../Button-319d8fa0.js';
+import 'react';
+import 'classnames';
+import 'react-router-dom';
+import '../style-inject.es-a0e1a0ba.js';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-09952a2f.js';

package/dist/{Button-db6114a6.js → Button-319d8fa0.js}

@@ -1,24 +1,17 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var reactRouterDom = require('react-router-dom');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-83915c54.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);
+import React from 'react';
+import classnames from 'classnames';
+import { Link } from 'react-router-dom';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { T as Typography } from './Typography-09952a2f.js';
 
 var css_248z = ":root {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n  --button--color-surface: var(--color-surface);\n  --button--color-surface--hover: var(--color-surface--background);\n  --button--color-primaryLabel: var(--color-white);\n\n  --button--duration-loading: var(--timing-loading--extended);\n}\n\n.U9VsquOtk2I- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  box-sizing: border-box;\n  margin: 0;\n  border: calc(16px / 16) solid rgb(125, 176, 14);\n  border: var(--border-base) solid var(--button--color-variation);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  -webkit-font-smoothing: antialiased;\n  letter-spacing: calc(16px / 40);\n  letter-spacing: var(--typography--letterSpacing-loose);\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -webkit-appearance: none;\n          appearance: none;\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.U9VsquOtk2I- * {\n  fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n  color: inherit;\n  /* required to over-ride very specific fill from <Icon> */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  border-color: rgb(81, 114, 9);\n  border-color: var(--button--color-variation--hover);\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus,\na.U9VsquOtk2I-:focus,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n  --button--color-variation: var(--color-interactive);\n  --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n  --button--color-variation: var(--color-informative);\n  --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n._4W8X0dxZDK4- {\n  --button--color-variation: var(--color-destructive);\n  --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n.vDKO-cmh8vY- {\n  --button--color-variation: var(--color-interactive--subtle);\n  --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  color: rgba(255, 255, 255, 1);\n  color: var(--button--color-primaryLabel);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--button--color-variation);\n  fill: rgba(255, 255, 255, 1);\n  fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus {\n  background-color: rgb(81, 114, 9);\n  background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  color: rgb(125, 176, 14);\n  color: var(--button--color-variation);\n  fill: rgb(125, 176, 14);\n  fill: var(--button--color-variation);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n  border-color: rgb(125, 176, 14);\n  border-color: var(--button--color-variation);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus {\n  color: rgb(81, 114, 9);\n  color: var(--button--color-variation--hover);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n  fill: rgb(81, 114, 9);\n  fill: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus {\n  border-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus {\n  border-color: transparent;\n  color: rgb(66, 78, 86);\n  color: var(--color-interactive--subtle--hover);\n  fill: rgb(66, 78, 86);\n  fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n  fill: rgb(181, 181, 181);\n  fill: var(--color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n  min-height: calc(16px * 1.5);\n  min-height: calc(var(--base-unit) * 1.5);\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  letter-spacing: 0;\n}\n\n.amIh7vPETfo- {\n  min-height: calc(16px * 2.25);\n  min-height: calc(var(--base-unit) * 2.25);\n  padding: 0 calc((16px * 1) - 4px);\n  padding: 0 calc(calc(16px * 1) - 4px);\n  padding: 0 calc(var(--space-base) - 4px);\n}\n\n.ON6ezOojFVo- {\n  min-height: calc(16px * 3);\n  min-height: calc(var(--base-unit) * 3);\n  padding: 0 calc(16px * 1);\n  padding: 0 var(--space-base);\n}\n\n/* Icon */\n\n.Qq-idRLJTCk- {\n  width: calc(16px * 2.25);\n  width: calc(var(--base-unit) * 2.25);\n  padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n  width: calc((16px / 2) * 3);\n  width: calc(calc(16px / 2) * 3);\n  width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n  width: calc((16px * 1) * 2.25);\n  width: calc(calc(16px * 1) * 2.25);\n  width: calc(var(--space-base) * 2.25);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n  width: calc((16px * 1.5) * 2);\n  width: calc(calc(16px * 1.5) * 2);\n  width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n  width: auto;\n}\n\n.EWh1gvgPJQg- > * {\n  text-align: left;\n}\n\n.EWh1gvgPJQg- > *:first-child {\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.pfzTUMgNb3o- > *:first-child {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n  margin-right: 0;\n  -ms-flex-order: 1;\n      order: 1;\n}\n\n.ZCHqCEyLBw0- {\n  width: 100%;\n}\n\n.VVFKEv1ksMA- {\n  background-image: linear-gradient(\n    135deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.1) 50%,\n    rgba(0, 0, 0, 0.1) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n  background-size: calc(16px * 2) calc(16px * 2);\n  background-size: var(--space-larger) var(--space-larger);\n  pointer-events: none;\n  cursor: not-allowed;\n  -webkit-animation-duration: 2000ms;\n  -webkit-animation-duration: var(--button--duration-loading);\n          animation-duration: 2000ms;\n          animation-duration: var(--button--duration-loading);\n  -webkit-animation-iteration-count: infinite;\n          animation-iteration-count: infinite;\n  -webkit-animation-name: a8Q-0lnKH5M-;\n          animation-name: a8Q-0lnKH5M-;\n  -webkit-animation-timing-function: linear;\n          animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\n  background-image: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0.25) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.25) 50%,\n    rgba(255, 255, 255, 0.25) 75%,\n    transparent 75%,\n    transparent 100%\n  );\n}\n\n@-webkit-keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n\n@keyframes a8Q-0lnKH5M- {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: calc(16px * 2) calc(16px * 2);\n    background-position: var(--space-larger) var(--space-larger);\n  }\n}\n";
 var styles = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBdJ0k-","destructive":"_4W8X0dxZDK4-","subtle":"vDKO-cmh8vY-","primary":"FXqN12jWtPo-","disabled":"bg-l22drjd0-","secondary":"pf6G840lKdA-","tertiary":"m7DbwRZWcNk-","small":"STSDgSRREx4-","base":"amIh7vPETfo-","large":"ON6ezOojFVo-","onlyIcon":"Qq-idRLJTCk-","hasIconAndLabel":"EWh1gvgPJQg-","iconOnRight":"pfzTUMgNb3o-","fullWidth":"ZCHqCEyLBw0-","loading":"VVFKEv1ksMA-","animateStripes":"a8Q-0lnKH5M-"};
-styleInject_es.styleInject(css_248z);
+styleInject(css_248z);
 
 function Button(props) {
     const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, role, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
-    const buttonClassNames = classnames__default["default"](styles.button, styles[size], {
+    const buttonClassNames = classnames(styles.button, styles[size], {
         [styles.onlyIcon]: icon && !label,
         [styles.hasIconAndLabel]: icon && label,
         [styles.iconOnRight]: iconOnRight,
@@ -31,17 +24,17 @@ function Button(props) {
     const buttonType = submit ? "submit" : "button";
     const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
         id }, (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
-    const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
+    const buttonInternals = React.createElement(ButtonInternals, Object.assign({}, props));
     if (to) {
-        return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+        return (React.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
     }
     const Tag = url ? "a" : "button";
-    return React__default["default"].createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
 }
 function ButtonInternals({ label, icon, size = "base" }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, size: size }),
-        React__default["default"].createElement(Typography.Typography, { element: "span", fontWeight: "extraBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
+    return (React.createElement(React.Fragment, null,
+        icon && React.createElement(Icon, { name: icon, size: size }),
+        React.createElement(Typography, { element: "span", fontWeight: "extraBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
 }
 function getTypeSizes(size) {
     switch (size) {
@@ -54,4 +47,4 @@ function getTypeSizes(size) {
     }
 }
 
-exports.Button = Button;
+export { Button as B };

package/dist/ButtonDismiss/index.js

@@ -1,17 +1,9 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ButtonDismiss = require('../ButtonDismiss-1ccb84ec.js');
-require('react');
-require('../Button-db6114a6.js');
-require('classnames');
-require('react-router-dom');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../Typography-83915c54.js');
-
-
-
-exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
+export { B as ButtonDismiss } from '../ButtonDismiss-85986110.js';
+import 'react';
+import '../Button-319d8fa0.js';
+import 'classnames';
+import 'react-router-dom';
+import '../style-inject.es-a0e1a0ba.js';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-09952a2f.js';