@jobber/components 2.86.0 → 2.86.2

package/dist/Avatar/Avatar.d.ts

@@ -1,37 +1,37 @@
-import { XOR } from "ts-xor";
-declare type AvatarSize = "base" | "large" | "small";
-interface AvatarFoundationProps {
-    /**
-     * A url for the image that will be displayed
-     */
-    readonly imageUrl?: string;
-    /**
-     * A users name to be used for assistive technology
-     */
-    readonly name?: string;
-    /**
-     * The initials that will be displayed if no image is set.\
-     */
-    readonly initials?: string;
-    /**
-     * The background and border color that represents the user. This should be
-     * represented as a value that can be read by CSS
-     */
-    readonly color?: string;
-    /**
-     * Change the size of the avatar
-     * @property "large" - Make avatar to be the focal point
-     * @property "small" - For higher-density/compact places or components
-     * @default "base"
-     */
-    readonly size?: AvatarSize;
-}
-interface AvatarWithImageProps extends AvatarFoundationProps {
-    readonly imageUrl: string;
-}
-interface AvatarWithInitialsProps extends AvatarFoundationProps {
-    readonly initials: string;
-}
-export declare type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
-export declare function Avatar({ imageUrl, name, initials, size, color, }: AvatarProps): JSX.Element;
-export {};
+import { XOR } from "ts-xor";
+declare type AvatarSize = "base" | "large" | "small";
+interface AvatarFoundationProps {
+    /**
+     * A url for the image that will be displayed
+     */
+    readonly imageUrl?: string;
+    /**
+     * A users name to be used for assistive technology
+     */
+    readonly name?: string;
+    /**
+     * The initials that will be displayed if no image is set.\
+     */
+    readonly initials?: string;
+    /**
+     * The background and border color that represents the user. This should be
+     * represented as a value that can be read by CSS
+     */
+    readonly color?: string;
+    /**
+     * Change the size of the avatar
+     * @property "large" - Make avatar to be the focal point
+     * @property "small" - For higher-density/compact places or components
+     * @default "base"
+     */
+    readonly size?: AvatarSize;
+}
+interface AvatarWithImageProps extends AvatarFoundationProps {
+    readonly imageUrl: string;
+}
+interface AvatarWithInitialsProps extends AvatarFoundationProps {
+    readonly initials: string;
+}
+export declare type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
+export declare function Avatar({ imageUrl, name, initials, size, color, }: AvatarProps): JSX.Element;
+export {};

package/dist/Avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, AvatarProps } from "./Avatar";
+export { Avatar, AvatarProps } from "./Avatar";

package/dist/Avatar/index.js

@@ -2,81 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
+var Avatar = require('../Avatar-cfd04e86.js');
+require('react');
+require('classnames');
+require('../style-inject.es-dcee06b6.js');
+require('color');
+require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var Color = _interopDefault(require('color'));
-
-var css = ":root {\n  --avatar-size: calc(var(--base-unit) * 2);\n  --avatar-border-size: var(--border-base);\n}\n\n._32nXNk9U4V8Tn_oqzj-1Vv {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  width: calc(var(--base-unit) * 2);\n  width: calc(var(--base-unit) * 2);\n  width: var(--avatar-size);\n  height: calc(var(--base-unit) * 2);\n  height: calc(var(--base-unit) * 2);\n  height: var(--avatar-size);\n  min-width: calc(var(--base-unit) * 2);\n  min-width: calc(var(--base-unit) * 2);\n  min-width: var(--avatar-size);\n  min-height: calc(var(--base-unit) * 2);\n  min-height: calc(var(--base-unit) * 2);\n  min-height: var(--avatar-size);\n  border-radius: var(--radius-circle);\n  color: var(--color-heading);\n  font-size: calc(var(--base-unit) * 2);\n  font-size: calc(var(--base-unit) * 2);\n  font-size: var(--avatar-size);\n  -webkit-font-smoothing: antialiased;\n  background: no-repeat center center var(--color-greyBlue);\n  background-size: cover;\n}\n\n._32nXNk9U4V8Tn_oqzj-1Vv:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._3JfcxzHXbxVujP9Nwwsm8d {\n  --avatar-size: calc(var(--base-unit) * 4.5);\n  --avatar-border-size: var(--border-thick);\n}\n\n._1gInQYSeS220Gh9DnVEr5W {\n  --avatar-size: calc(var(--base-unit) * 1.5);\n}\n\n._2jL6zuod0FYzAcQ9jHlwr0 {\n  color: var(--color-text--reverse);\n}\n\n._1EBgtTAVncoq5YcW-R48zh {\n  font-size: calc(calc(var(--base-unit) * 2) / 2);\n  font-size: calc(calc(var(--base-unit) * 2) / 2);\n  font-size: calc(var(--avatar-size) / 2);\n  text-transform: uppercase;\n}\n\n._3w35jLfoUs-eucNNL23qUF {\n  font-size: calc(calc(var(--base-unit) * 2) / 2.25);\n  font-size: calc(calc(var(--base-unit) * 2) / 2.25);\n  font-size: calc(var(--avatar-size) / 2.25);\n}\n\n.cAt2tRNytCx33iuuBj2aM {\n  width: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  height: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n  height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n  box-shadow: 0 0 0 var(--border-thick) var(--color-white) inset;\n  border-style: solid;\n  border-width: var(--border-base);\n  border-width: var(--border-base);\n  border-width: var(--avatar-border-size);\n}\n";
-var styles = {"avatar":"_32nXNk9U4V8Tn_oqzj-1Vv","large":"_3JfcxzHXbxVujP9Nwwsm8d","small":"_1gInQYSeS220Gh9DnVEr5W","isDark":"_2jL6zuod0FYzAcQ9jHlwr0","initials":"_1EBgtTAVncoq5YcW-R48zh","smallInitials":"_3w35jLfoUs-eucNNL23qUF","hasBorder":"cAt2tRNytCx33iuuBj2aM"};
-__chunk_2.styleInject(css);
 
-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`.
-     */
-    var customProperty = color
-        .replace("var(", "")
-        .slice(0, -1)
-        .split(" ")
-        .join("");
-    return getComputedStyle(document.documentElement)
-        .getPropertyValue(customProperty)
-        .trim();
-}
 
-function Avatar(_a) {
-    var _b;
-    var imageUrl = _a.imageUrl, name = _a.name, initials = _a.initials, _c = _a.size, size = _c === void 0 ? "base" : _c, color = _a.color;
-    var style = {
-        backgroundColor: color,
-        borderColor: color,
-    };
-    if (imageUrl) {
-        style.backgroundImage = "url(" + imageUrl + ")";
-    }
-    var shouldBeDark = color == undefined || isDark(color);
-    var className = classnames(styles.avatar, size !== "base" && styles[size], (_b = {},
-        _b[styles.hasBorder] = imageUrl && color,
-        _b[styles.isDark] = shouldBeDark,
-        _b));
-    return (React__default.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
-}
-function Initials(_a) {
-    var _b;
-    var initials = _a.initials, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "base" : _d;
-    if (!initials) {
-        return (React__default.createElement(index$2.Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
-    }
-    var className = classnames(styles.initials, (_b = {},
-        _b[styles.smallInitials] = initials.length > 2,
-        _b));
-    return React__default.createElement("span", { className: className }, initials.substr(0, 3));
-}
 
-exports.Avatar = Avatar;
+exports.Avatar = Avatar.Avatar;

package/dist/Avatar/utilities.d.ts

@@ -1 +1 @@
-export declare function isDark(colorToCheck?: string): boolean;
+export declare function isDark(colorToCheck?: string): boolean;

package/dist/Avatar-cfd04e86.js

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

package/dist/Banner/Banner.d.ts

@@ -1,19 +1,19 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button";
-export declare type BannerType = "notice" | "success" | "warning" | "error";
-interface BannerProps {
-    readonly children: ReactNode;
-    readonly type: BannerType;
-    /**
-     * The default cta variation should be a 'work' variation. If the banner
-     * 'type' is set to 'notice' we change the cta variation to 'learning'
-     */
-    readonly primaryAction?: ButtonProps;
-    /**
-     * @default true
-     */
-    readonly dismissible?: boolean;
-    onDismiss?(): void;
-}
-export declare function Banner({ children, type, primaryAction, dismissible, onDismiss, }: BannerProps): JSX.Element;
-export {};
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button";
+export declare type BannerType = "notice" | "success" | "warning" | "error";
+interface BannerProps {
+    readonly children: ReactNode;
+    readonly type: BannerType;
+    /**
+     * The default cta variation should be a 'work' variation. If the banner
+     * 'type' is set to 'notice' we change the cta variation to 'learning'
+     */
+    readonly primaryAction?: ButtonProps;
+    /**
+     * @default true
+     */
+    readonly dismissible?: boolean;
+    onDismiss?(): void;
+}
+export declare function Banner({ children, type, primaryAction, dismissible, onDismiss, }: BannerProps): JSX.Element;
+export {};

package/dist/Banner/index.d.ts

@@ -1 +1 @@
-export { Banner, BannerType } from "./Banner";
+export { Banner, BannerType } from "./Banner";

package/dist/Banner/index.js

@@ -2,79 +2,81 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
+var classnames = require('classnames');
+var hooks = require('@jobber/hooks');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Icon = require('../Icon-d5ad1a6d.js');
+var Text = require('../Text-9bc093e9.js');
+var Button = require('../Button-5b2f1636.js');
 require('@jobber/design');
-var index$2 = require('../Icon/index.js');
+require('../Typography-7e542a72.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
-var hooks = require('@jobber/hooks');
 
-var css = ":root {\n  --flash--inset: var(--space-base);\n  --flash--inset--small: var(--space-small);\n}\n\n._364vcgV1m5AeWxKbtAvmwW {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--flash--inset);\n  color: var(--color-black);\n  background-color: var(--color-grey--lightest);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._3GnUCvx5Y7mFbH2Z7IN5U- {\n  padding-top: var(--space-smallest);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--flash--inset);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: var(--space-small);\n  margin-top: var(--space-small);\n  margin-top: var(--flash--inset--small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--flash--inset--small);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:first-child {\n  margin-top: 0;\n  margin-right: var(--space-base);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css$1 = ":root {\n  --flash--inset: var(--space-base);\n  --flash--inset--small: var(--space-small);\n}\n\n._364vcgV1m5AeWxKbtAvmwW {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--flash--inset);\n  color: var(--color-black);\n  background-color: var(--color-grey--lightest);\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._3GnUCvx5Y7mFbH2Z7IN5U- {\n  padding-top: var(--space-smallest);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--flash--inset);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: var(--space-small);\n  margin-top: var(--space-small);\n  margin-top: var(--flash--inset--small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--flash--inset--small);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:first-child {\n  margin-top: 0;\n  margin-right: var(--space-base);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
 var styles = {"flash":"_364vcgV1m5AeWxKbtAvmwW","bannerContent":"_3vGMT9on-QbjXBlSaiNcgm","dismissibleSpacing":"_3GnUCvx5Y7mFbH2Z7IN5U-","medium":"_1S5EoHZng2ePaBlNMXhUYb","bannerAction":"_12QzEnq3z7-XCpLmgYARp","closeButton":"_2MtsHfzp46XdG3BZQtOLm-"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css$1);
 
-var css$1 = ".nw7Tf4jicBNmfENtxh7tG {\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.myY4eq0vr_r4Twz0QcBwu {\n  background-color: var(--color-green--lighter);\n}\n\n.eExwEf69eCfam2C6Ekk5D {\n  background-color: var(--color-yellow--lighter);\n}\n\n._1U_-uPZepxvaZPO5hh8G4O {\n  background-color: var(--color-red--lighter);\n}\n";
+var css = ".nw7Tf4jicBNmfENtxh7tG {\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.myY4eq0vr_r4Twz0QcBwu {\n  background-color: var(--color-green--lighter);\n}\n\n.eExwEf69eCfam2C6Ekk5D {\n  background-color: var(--color-yellow--lighter);\n}\n\n._1U_-uPZepxvaZPO5hh8G4O {\n  background-color: var(--color-red--lighter);\n}\n";
 var types = {"notice":"nw7Tf4jicBNmfENtxh7tG","success":"myY4eq0vr_r4Twz0QcBwu","warning":"eExwEf69eCfam2C6Ekk5D","error":"_1U_-uPZepxvaZPO5hh8G4O"};
-__chunk_2.styleInject(css$1);
+styleInject_es.styleInject(css);
 
-function Banner(_a) {
-    var _b, _c;
-    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _d = _a.dismissible, dismissible = _d === void 0 ? true : _d, onDismiss = _a.onDismiss;
-    var _e = __chunk_1.__read(React.useState(true), 2), showFlash = _e[0], setShowFlash = _e[1];
-    var bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    var _f = __chunk_1.__read(hooks.useResizeObserver({
-        widths: bannerWidths,
-    }), 2), bannerRef = _f[0], _g = _f[1].width, bannerWidth = _g === void 0 ? bannerWidths.small : _g;
-    var iconColors = {
-        notice: "lightBlue",
-        success: "green",
-        warning: "yellow",
-        error: "red",
-    };
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({
-            size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
-        }, primaryAction);
-    }
-    var flashClassNames = classnames(styles.flash, types[type], (_b = {},
-        _b[styles.medium] = bannerWidth >= bannerWidths.medium,
-        _b));
-    var contentClassNames = classnames(styles.bannerContent, (_c = {},
-        _c[styles.dismissibleSpacing] = dismissible,
-        _c));
-    return (React__default.createElement(React__default.Fragment, null, showFlash && (React__default.createElement("div", { className: flashClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default.createElement("div", { className: contentClassNames },
-            React__default.createElement(BannerChildren, null, children),
-            primaryAction && (React__default.createElement("div", { className: styles.bannerAction },
-                React__default.createElement(index$5.Button, __chunk_1.__assign({}, primaryAction))))),
-        dismissible && (React__default.createElement("button", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
-            React__default.createElement(index$2.Icon, { name: "cross", color: iconColors[type] })))))));
-    function handleClose() {
-        setShowFlash(!showFlash);
-        onDismiss && onDismiss();
-    }
-}
-function BannerChildren(_a) {
-    var children = _a.children;
-    if (!children)
-        return React__default.createElement(React__default.Fragment, null);
-    if (children && typeof children === "string") {
-        return React__default.createElement(index$1.Text, null, children);
-    }
-    return React__default.createElement(React__default.Fragment, null, children);
+function Banner(_a) {
+    var _b, _c;
+    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _d = _a.dismissible, dismissible = _d === void 0 ? true : _d, onDismiss = _a.onDismiss;
+    var _e = tslib_es6.__read(React.useState(true), 2), showFlash = _e[0], setShowFlash = _e[1];
+    var bannerWidths = {
+        small: 320,
+        medium: 480,
+    };
+    var _f = tslib_es6.__read(hooks.useResizeObserver({
+        widths: bannerWidths,
+    }), 2), bannerRef = _f[0], _g = _f[1].width, bannerWidth = _g === void 0 ? bannerWidths.small : _g;
+    var iconColors = {
+        notice: "lightBlue",
+        success: "green",
+        warning: "yellow",
+        error: "red",
+    };
+    if (primaryAction != undefined) {
+        primaryAction = Object.assign({
+            size: "small",
+            type: "tertiary",
+            variation: type === "notice" ? "learning" : "work",
+        }, primaryAction);
+    }
+    var flashClassNames = classnames__default["default"](styles.flash, types[type], (_b = {},
+        _b[styles.medium] = bannerWidth >= bannerWidths.medium,
+        _b));
+    var contentClassNames = classnames__default["default"](styles.bannerContent, (_c = {},
+        _c[styles.dismissibleSpacing] = dismissible,
+        _c));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, showFlash && (React__default["default"].createElement("div", { className: flashClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
+        React__default["default"].createElement("div", { className: contentClassNames },
+            React__default["default"].createElement(BannerChildren, null, children),
+            primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
+                React__default["default"].createElement(Button.Button, tslib_es6.__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] })))))));
+    function handleClose() {
+        setShowFlash(!showFlash);
+        onDismiss && onDismiss();
+    }
+}
+function BannerChildren(_a) {
+    var children = _a.children;
+    if (!children)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    if (children && typeof children === "string") {
+        return React__default["default"].createElement(Text.Text, null, children);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
 exports.Banner = Banner;

package/dist/Button/Button.d.ts

@@ -1,64 +1,64 @@
-import React from "react";
-import { XOR } from "ts-xor";
-import { IconNames } from "@jobber/design";
-interface ButtonFoundationProps {
-    /**
-     * Used for screen readers. Will override label on screen
-     * reader if present.
-     */
-    readonly ariaLabel?: string;
-    readonly ariaControls?: string;
-    readonly ariaHaspopup?: boolean;
-    readonly ariaExpanded?: boolean;
-    readonly disabled?: boolean;
-    readonly external?: boolean;
-    readonly fullWidth?: boolean;
-    readonly icon?: IconNames;
-    readonly iconOnRight?: boolean;
-    readonly id?: string;
-    readonly label?: string;
-    readonly loading?: boolean;
-    readonly size?: "small" | "base" | "large";
-    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
-    onMouseDown?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
-}
-interface ButtonIconProps extends ButtonFoundationProps {
-    readonly icon: IconNames;
-    readonly ariaLabel: string;
-}
-interface ButtonLabelProps extends ButtonFoundationProps {
-    readonly label: string;
-}
-interface ButtonAnchorProps extends ButtonFoundationProps {
-    /**
-     * Used to create an 'href' on an anchor tag.
-     */
-    readonly url?: string;
-}
-interface ButtonLinkProps extends ButtonFoundationProps {
-    /**
-     * Used for client side routing. Only use when inside a routed component.
-     */
-    readonly to?: string;
-}
-interface BaseActionProps extends ButtonFoundationProps {
-    readonly variation?: "work" | "learning" | "subtle" | "destructive";
-    readonly type?: "primary" | "secondary" | "tertiary";
-}
-interface DestructiveActionProps extends ButtonFoundationProps {
-    readonly variation: "destructive";
-    readonly type?: "primary" | "secondary" | "tertiary";
-}
-interface SubmitActionProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
-    readonly type?: "primary";
-    readonly submit: boolean;
-}
-interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
-    /**
-     * Allows the button to submit a form
-     */
-    submit: boolean;
-}
-export declare type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<SubmitButtonProps, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
-export declare function Button(props: ButtonProps): JSX.Element;
-export {};
+import React from "react";
+import { XOR } from "ts-xor";
+import { IconNames } from "@jobber/design";
+interface ButtonFoundationProps {
+    /**
+     * Used for screen readers. Will override label on screen
+     * reader if present.
+     */
+    readonly ariaLabel?: string;
+    readonly ariaControls?: string;
+    readonly ariaHaspopup?: boolean;
+    readonly ariaExpanded?: boolean;
+    readonly disabled?: boolean;
+    readonly external?: boolean;
+    readonly fullWidth?: boolean;
+    readonly icon?: IconNames;
+    readonly iconOnRight?: boolean;
+    readonly id?: string;
+    readonly label?: string;
+    readonly loading?: boolean;
+    readonly size?: "small" | "base" | "large";
+    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+    onMouseDown?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+}
+interface ButtonIconProps extends ButtonFoundationProps {
+    readonly icon: IconNames;
+    readonly ariaLabel: string;
+}
+interface ButtonLabelProps extends ButtonFoundationProps {
+    readonly label: string;
+}
+interface ButtonAnchorProps extends ButtonFoundationProps {
+    /**
+     * Used to create an 'href' on an anchor tag.
+     */
+    readonly url?: string;
+}
+interface ButtonLinkProps extends ButtonFoundationProps {
+    /**
+     * Used for client side routing. Only use when inside a routed component.
+     */
+    readonly to?: string;
+}
+interface BaseActionProps extends ButtonFoundationProps {
+    readonly variation?: "work" | "learning" | "subtle" | "destructive";
+    readonly type?: "primary" | "secondary" | "tertiary";
+}
+interface DestructiveActionProps extends ButtonFoundationProps {
+    readonly variation: "destructive";
+    readonly type?: "primary" | "secondary" | "tertiary";
+}
+interface SubmitActionProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
+    readonly type?: "primary";
+    readonly submit: boolean;
+}
+interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
+    /**
+     * Allows the button to submit a form
+     */
+    submit: boolean;
+}
+export declare type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<SubmitButtonProps, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
+export declare function Button(props: ButtonProps): JSX.Element;
+export {};

package/dist/Button/index.d.ts

@@ -1 +1 @@
-export * from "./Button";
+export * from "./Button";