@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/Autocomplete-B7YsP2Ql.js

@@ -0,0 +1,190 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-Bu_PBg9i.js';
+import React, { useState, useEffect, forwardRef, useRef } from 'react';
+import { d as debounce } from './debounce-BBtff9-S.js';
+import classnames from 'classnames';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-BJB7_guO.js';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-tr9DHxlf.js';
+import { u as useIsMounted_2 } from './useIsMounted-JfVXqbjM.js';
+import { T as Text } from './Text-C3-8gHkD.js';
+import { I as Icon } from './Icon-GaU33tZU.js';
+import { H as Heading } from './Heading-qH5QZFoM.js';
+import { I as InputText } from './InputText-CGTG1LNb.js';
+
+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-"};
+
+var IndexChange;
+(function (IndexChange) {
+    IndexChange[IndexChange["Previous"] = -1] = "Previous";
+    IndexChange[IndexChange["Next"] = 1] = "Next";
+})(IndexChange || (IndexChange = {}));
+// Adding useIsMounted is what tipped this to 13 statements.
+// Any additions beyond useIsMounted should probably see this component refactored a bit
+// eslint-disable-next-line max-statements
+function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
+    const detectSeparatorCondition = (option) => option.description || option.details;
+    const detectGroups = (option) => option.options;
+    const addSeparators = options.some(detectSeparatorCondition);
+    const initialHighlight = options.some(detectGroups) ? 1 : 0;
+    setupKeyListeners();
+    useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    const mounted = useIsMounted_2();
+    const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
+        const optionClass = classnames(styles.option, {
+            [styles.active]: index === highlightedIndex,
+            [styles.separator]: addSeparators,
+        });
+        if (isGroup(option)) {
+            return (React.createElement("div", { key: option.label, className: styles.heading },
+                React.createElement(Heading, { level: 5 }, option.label)));
+        }
+        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
+            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon, { name: "checkmark", size: "small" }))),
+            React.createElement("div", { className: styles.text },
+                React.createElement("div", { className: styles.label },
+                    React.createElement(Text, null, option.label),
+                    option.description !== undefined && (React.createElement(Text, { variation: "subdued" }, option.description))),
+                option.details !== undefined && (React.createElement("div", { className: styles.details },
+                    React.createElement(Text, null, option.details))))));
+    })));
+    return mounted.current ? createPortal(menu, document.body) : menu;
+    function setupKeyListeners() {
+        useEffect(() => {
+            var _a, _b;
+            (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }, [highlightedIndex]);
+        useOnKeyDown_2((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Next);
+            if (indexChange) {
+                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
+            }
+        }, "ArrowDown");
+        useOnKeyDown_2((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Previous);
+            if (indexChange) {
+                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
+            }
+        }, "ArrowUp");
+        useOnKeyDown_2((event) => {
+            if (!visible)
+                return;
+            if (isGroup(options[highlightedIndex]))
+                return;
+            event.preventDefault();
+            onOptionSelect(options[highlightedIndex]);
+        }, "Enter");
+    }
+    function arrowKeyPress(event, direction) {
+        if (!visible)
+            return;
+        event.preventDefault();
+        const requestedIndex = options[highlightedIndex + direction];
+        return requestedIndex && isGroup(requestedIndex)
+            ? direction + direction
+            : direction;
+    }
+}
+function isOptionSelected(selectedOption, option) {
+    return selectedOption && selectedOption.value === option.value;
+}
+function isGroup(option) {
+    if (option.options)
+        return true;
+    return false;
+}
+function useRepositionMenu(attachTo, visible = false) {
+    var _a;
+    const [menuRef, setMenuRef] = useState();
+    const popper = usePopper(attachTo.current, menuRef, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    useSafeLayoutEffect_1(() => {
+        var _a;
+        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
+    }, [visible]);
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+}
+
+// Max statements increased to make room for the debounce functions
+/* eslint max-statements: ["error", 14] */
+function AutocompleteInternal(_a, ref) {
+    var _b;
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
+    const [options, setOptions] = useState(initialOptions);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
+    const autocompleteRef = useRef(null);
+    const delayedSearch = debounce(updateSearch, debounceRate);
+    useEffect(() => {
+        delayedSearch();
+        return delayedSearch.cancel;
+    }, [inputText]);
+    useEffect(() => {
+        var _a;
+        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
+    return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+        React.createElement(InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    function updateInput(newText) {
+        setInputText(newText);
+        if (newText === "") {
+            setOptions(mapToOptions(initialOptions));
+        }
+    }
+    function updateSearch() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const updatedOptions = yield getOptions(inputText);
+            const filteredOptions = updatedOptions.filter((option) => "options" in option && option.options ? option.options.length > 0 : true);
+            setOptions(mapToOptions(filteredOptions));
+        });
+    }
+    function handleMenuChange(chosenOption) {
+        onChange(chosenOption);
+        updateInput(chosenOption.label);
+        setMenuVisible(false);
+    }
+    function handleInputChange(newText) {
+        updateInput(newText);
+        if (allowFreeForm) {
+            onChange({ label: newText });
+        }
+    }
+    function handleInputBlur() {
+        setMenuVisible(false);
+        if (value == undefined || value.label !== inputText) {
+            setInputText("");
+            onChange(undefined);
+        }
+        onBlur && onBlur();
+    }
+    function handleInputFocus() {
+        setMenuVisible(true);
+        if (onFocus) {
+            onFocus();
+        }
+    }
+}
+function mapToOptions(items) {
+    return items.reduce(function (result, item) {
+        result = result.concat([item]);
+        if (item.options) {
+            result = result.concat(item.options);
+        }
+        return result;
+    }, []);
+}
+const Autocomplete = forwardRef(AutocompleteInternal);
+
+export { Autocomplete as A };

package/dist/Autocomplete-DYj2Lg3f.js

@@ -0,0 +1,192 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-6AwvlbWV.js');
+var React = require('react');
+var debounce = require('./debounce-pg3VOrFc.js');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var reactPopper = require('react-popper');
+var useOnKeyDown = require('./useOnKeyDown-D87huTBK.js');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-DHIY4lnV.js');
+var useIsMounted = require('./useIsMounted-sXqZBlpo.js');
+var Text = require('./Text-CuGgzpie.js');
+var Icon = require('./Icon-fa-Ii8qc.js');
+var Heading = require('./Heading-BhyZ43jQ.js');
+var InputText = require('./InputText-CqaMlAXF.js');
+
+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-"};
+
+var IndexChange;
+(function (IndexChange) {
+    IndexChange[IndexChange["Previous"] = -1] = "Previous";
+    IndexChange[IndexChange["Next"] = 1] = "Next";
+})(IndexChange || (IndexChange = {}));
+// Adding useIsMounted is what tipped this to 13 statements.
+// Any additions beyond useIsMounted should probably see this component refactored a bit
+// eslint-disable-next-line max-statements
+function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
+    const [highlightedIndex, setHighlightedIndex] = React.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 mounted = useIsMounted.useIsMounted_2();
+    const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
+        const optionClass = classnames(styles.option, {
+            [styles.active]: index === highlightedIndex,
+            [styles.separator]: addSeparators,
+        });
+        if (isGroup(option)) {
+            return (React.createElement("div", { key: option.label, className: styles.heading },
+                React.createElement(Heading.Heading, { level: 5 }, option.label)));
+        }
+        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
+            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
+            React.createElement("div", { className: styles.text },
+                React.createElement("div", { className: styles.label },
+                    React.createElement(Text.Text, null, option.label),
+                    option.description !== undefined && (React.createElement(Text.Text, { variation: "subdued" }, option.description))),
+                option.details !== undefined && (React.createElement("div", { className: styles.details },
+                    React.createElement(Text.Text, null, option.details))))));
+    })));
+    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
+    function setupKeyListeners() {
+        React.useEffect(() => {
+            var _a, _b;
+            (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }, [highlightedIndex]);
+        useOnKeyDown.useOnKeyDown_2((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Next);
+            if (indexChange) {
+                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
+            }
+        }, "ArrowDown");
+        useOnKeyDown.useOnKeyDown_2((event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Previous);
+            if (indexChange) {
+                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
+            }
+        }, "ArrowUp");
+        useOnKeyDown.useOnKeyDown_2((event) => {
+            if (!visible)
+                return;
+            if (isGroup(options[highlightedIndex]))
+                return;
+            event.preventDefault();
+            onOptionSelect(options[highlightedIndex]);
+        }, "Enter");
+    }
+    function arrowKeyPress(event, direction) {
+        if (!visible)
+            return;
+        event.preventDefault();
+        const requestedIndex = options[highlightedIndex + direction];
+        return requestedIndex && isGroup(requestedIndex)
+            ? direction + direction
+            : direction;
+    }
+}
+function isOptionSelected(selectedOption, option) {
+    return selectedOption && selectedOption.value === option.value;
+}
+function isGroup(option) {
+    if (option.options)
+        return true;
+    return false;
+}
+function useRepositionMenu(attachTo, visible = false) {
+    var _a;
+    const [menuRef, setMenuRef] = React.useState();
+    const popper = reactPopper.usePopper(attachTo.current, menuRef, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
+        ],
+    });
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        var _a;
+        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
+    }, [visible]);
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+}
+
+// Max statements increased to make room for the debounce functions
+/* eslint max-statements: ["error", 14] */
+function AutocompleteInternal(_a, ref) {
+    var _b;
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = 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.debounce(updateSearch, debounceRate);
+    React.useEffect(() => {
+        delayedSearch();
+        return delayedSearch.cancel;
+    }, [inputText]);
+    React.useEffect(() => {
+        var _a;
+        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
+    return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+        React.createElement(InputText.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+    function updateInput(newText) {
+        setInputText(newText);
+        if (newText === "") {
+            setOptions(mapToOptions(initialOptions));
+        }
+    }
+    function updateSearch() {
+        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            const updatedOptions = yield getOptions(inputText);
+            const filteredOptions = updatedOptions.filter((option) => "options" in option && option.options ? option.options.length > 0 : true);
+            setOptions(mapToOptions(filteredOptions));
+        });
+    }
+    function handleMenuChange(chosenOption) {
+        onChange(chosenOption);
+        updateInput(chosenOption.label);
+        setMenuVisible(false);
+    }
+    function handleInputChange(newText) {
+        updateInput(newText);
+        if (allowFreeForm) {
+            onChange({ label: newText });
+        }
+    }
+    function handleInputBlur() {
+        setMenuVisible(false);
+        if (value == undefined || value.label !== inputText) {
+            setInputText("");
+            onChange(undefined);
+        }
+        onBlur && onBlur();
+    }
+    function handleInputFocus() {
+        setMenuVisible(true);
+        if (onFocus) {
+            onFocus();
+        }
+    }
+}
+function mapToOptions(items) {
+    return items.reduce(function (result, item) {
+        result = result.concat([item]);
+        if (item.options) {
+            result = result.concat(item.options);
+        }
+        return result;
+    }, []);
+}
+const Autocomplete = React.forwardRef(AutocompleteInternal);
+
+exports.Autocomplete = Autocomplete;

package/dist/Avatar/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var Avatar = require('../Avatar-CRADit7s.js');
+require('react');
+require('classnames');
+require('color');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+
+
+
+exports.Avatar = Avatar.Avatar;

package/dist/Avatar/index.mjs

@@ -0,0 +1,6 @@
+export { A as Avatar } from '../Avatar-kAXMTS3o.js';
+import 'react';
+import 'classnames';
+import 'color';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';

package/dist/Avatar-CRADit7s.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Color = require('color');
+var Icon = require('./Icon-fa-Ii8qc.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/Avatar-kAXMTS3o.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import classnames from 'classnames';
+import Color from 'color';
+import { I as Icon } from './Icon-GaU33tZU.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/Banner/Banner.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { IconNames } from "@jobber/design";
+import { BannerType } from "./Banner.types";
 import { ButtonProps } from "../Button";
-export type BannerType = "notice" | "success" | "warning" | "error";
 interface BannerProps {
     readonly children: ReactNode;
     readonly type: BannerType;
@@ -20,5 +20,5 @@ interface BannerProps {
     readonly icon?: IconNames;
     onDismiss?(): void;
 }
-export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element;
+export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element | null;
 export {};

package/dist/Banner/Banner.types.d.ts

@@ -0,0 +1 @@
+export type BannerType = "notice" | "success" | "warning" | "error";

package/dist/Banner/components/BannerIcon/BannerIcon.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { IconNames } from "@jobber/design";
+import { BannerType } from "../../Banner.types";
 export interface BannerIconProps {
-    icon: IconNames;
+    readonly icon: IconNames;
+    readonly type: BannerType;
 }
-export declare function BannerIcon({ icon }: BannerIconProps): JSX.Element;
+export declare function BannerIcon({ icon, type }: BannerIconProps): JSX.Element;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var BannerIcon = require('../../../BannerIcon-q3EXfo22.js');
+require('react');
+require('classnames');
+require('../../../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+
+
+
+exports.BannerIcon = BannerIcon.BannerIcon;

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

@@ -0,0 +1,5 @@
+export { B as BannerIcon } from '../../../BannerIcon-tJZ3ckww.js';
+import 'react';
+import 'classnames';
+import '../../../Icon-GaU33tZU.js';
+import '@jobber/design';

package/dist/Banner/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var Banner = require('../Banner-DGrsuGot.js');
+require('react');
+require('classnames');
+require('../useResizeObserver-B4v7ebGO.js');
+require('../_commonjsHelpers-BZy5LDD5.js');
+require('../debounce-pg3VOrFc.js');
+require('../isObjectLike-D1IeOnmx.js');
+require('../isSymbol-Bbb_qQGw.js');
+require('../BannerIcon-q3EXfo22.js');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../Text-CuGgzpie.js');
+require('../Typography-Dcec2MjG.js');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../ButtonDismiss-B6rD5rB-.js');
+
+
+
+exports.Banner = Banner.Banner;

package/dist/Banner/index.d.ts

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

package/dist/Banner/index.mjs

@@ -0,0 +1,16 @@
+export { B as Banner } from '../Banner-B72Jd8VZ.js';
+import 'react';
+import 'classnames';
+import '../useResizeObserver-CvdP2RtU.js';
+import '../_commonjsHelpers-Dy2IPW0w.js';
+import '../debounce-BBtff9-S.js';
+import '../isObjectLike-CcKIYba1.js';
+import '../isSymbol-BmwHOL7f.js';
+import '../BannerIcon-tJZ3ckww.js';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../Text-C3-8gHkD.js';
+import '../Typography-BD0mo9T9.js';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../ButtonDismiss-C2LOl-QT.js';