@jobber/components 4.0.0 → 4.0.1-pre.4

package/dist/Autocomplete/Autocomplete.d.ts

@@ -2,7 +2,7 @@
 import { XOR } from "ts-xor";
 import { GroupOption, Option } from "./Option";
 import { FormFieldProps } from "../FormField";
-declare type OptionCollection = XOR<Option[], GroupOption[]>;
+type OptionCollection = XOR<Option[], GroupOption[]>;
 interface AutocompleteProps extends Pick<FormFieldProps, "size" | "onBlur" | "onFocus" | "invalid"> {
     /**
      * Initial options to show when user first focuses the Autocomplete

package/dist/Autocomplete/Option.d.ts

@@ -1,5 +1,5 @@
 import { XOR } from "ts-xor";
-declare type OptionValue = string | number;
+type OptionValue = string | number;
 interface BaseOption {
     label: string;
 }
@@ -11,5 +11,5 @@ export interface Option extends BaseOption {
 export interface GroupOption extends BaseOption {
     options: Option[];
 }
-export declare type AnyOption = XOR<Option, GroupOption>;
+export type AnyOption = XOR<Option, GroupOption>;
 export {};

package/dist/Autocomplete/index.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
+var tslib_es6 = require('../tslib.es6-efe27175.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var classnames = require('classnames');
 var useEventListener = require('@use-it/event-listener');
-var Text = require('../Text-e012fb46.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-var Heading = require('../Heading-a9a66964.js');
-var InputText = require('../InputText-523d0e48.js');
-require('../Typography-fbe0ed6e.js');
+var Text = require('../Text-7ce00adb.js');
+var Icon = require('../Icon-405a216c.js');
+var Heading = require('../Heading-7b203f7f.js');
+var InputText = require('../InputText-12b112a9.js');
+require('../Typography-9262511f.js');
 require('@jobber/design');
-require('../FormField-76068c0b.js');
+require('../FormField-1e444bb6.js');
 require('uuid');
 require('react-hook-form');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../InputValidation-06a8a7ba.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,28 +39,23 @@ var IndexChange;
     IndexChange[IndexChange["Previous"] = -1] = "Previous";
     IndexChange[IndexChange["Next"] = 1] = "Next";
 })(IndexChange || (IndexChange = {}));
-function Menu(_a) {
-    var _b;
-    var visible = _a.visible, options = _a.options, selectedOption = _a.selectedOption, onOptionSelect = _a.onOptionSelect;
-    var _c = tslib_es6.__read(React.useState(0), 2), highlightedIndex = _c[0], setHighlightedIndex = _c[1];
-    var optionMenuClass = classnames__default["default"](styles.options, (_b = {},
-        _b[styles.visible] = visible,
-        _b));
-    var menuDiv = React.useRef();
-    var detectSeparatorCondition = function (option) {
-        return option.description || option.details;
-    };
-    var detectGroups = function (option) { return option.options; };
-    var addSeparators = options.some(detectSeparatorCondition);
-    var initialHighlight = options.some(detectGroups) ? 1 : 0;
+function Menu({ visible, options, selectedOption, onOptionSelect, }) {
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    const optionMenuClass = classnames__default["default"](styles.options, {
+        [styles.visible]: visible,
+    });
+    const menuDiv = React.useRef();
+    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(function () { return setHighlightedIndex(initialHighlight); }, [options]);
-    return (React__default["default"].createElement("div", { className: optionMenuClass, ref: menuDiv }, options.map(function (option, index) {
-        var _a;
-        var optionClass = classnames__default["default"](styles.option, (_a = {},
-            _a[styles.active] = index === highlightedIndex,
-            _a[styles.separator] = addSeparators,
-            _a));
+    React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    return (React__default["default"].createElement("div", { className: optionMenuClass, ref: menuDiv }, options.map((option, index) => {
+        const optionClass = classnames__default["default"](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)));
@@ -75,8 +70,8 @@ function Menu(_a) {
                     React__default["default"].createElement(Text.Text, null, option.details))))));
     })));
     function setupKeyListeners() {
-        useOnKeyDown("ArrowDown", function (event) {
-            var indexChange = arrowKeyPress(event, IndexChange.Next);
+        useOnKeyDown("ArrowDown", (event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
@@ -84,8 +79,8 @@ function Menu(_a) {
                 scrollMenuIfItemNotInView(menuDiv.current, "down");
             }
         });
-        useOnKeyDown("ArrowUp", function (event) {
-            var indexChange = arrowKeyPress(event, IndexChange.Previous);
+        useOnKeyDown("ArrowUp", (event) => {
+            const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
@@ -94,13 +89,13 @@ function Menu(_a) {
             }
         });
         function scrollMenuIfItemNotInView(menuDivElement, direction) {
-            var itemDiv = menuDivElement.querySelector("button." + styles.option + ":nth-child(" + (highlightedIndex + 1) + ")");
+            const itemDiv = menuDivElement.querySelector(`button.${styles.option}:nth-child(${highlightedIndex + 1})`);
             if (!itemDiv)
                 return;
-            var menuTop = menuDivElement.getBoundingClientRect().top;
-            var _a = itemDiv.getBoundingClientRect(), itemTop = _a.top, itemHeight = _a.height, itemBottom = _a.bottom;
-            var itemTrueBottom = itemBottom + itemHeight;
-            var menuBottom = menuDivElement.getBoundingClientRect().bottom;
+            const menuTop = menuDivElement.getBoundingClientRect().top;
+            const { top: itemTop, height: itemHeight, bottom: itemBottom, } = itemDiv.getBoundingClientRect();
+            const itemTrueBottom = itemBottom + itemHeight;
+            const menuBottom = menuDivElement.getBoundingClientRect().bottom;
             if (direction == "up" && itemTop - itemHeight < menuTop) {
                 menuDivElement.scrollTop -= itemHeight;
             }
@@ -108,7 +103,7 @@ function Menu(_a) {
                 menuDivElement.scrollTop += itemHeight;
             }
         }
-        useOnKeyDown("Enter", function (event) {
+        useOnKeyDown("Enter", (event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
@@ -121,7 +116,7 @@ function Menu(_a) {
         if (!visible)
             return;
         event.preventDefault();
-        var requestedIndex = options[highlightedIndex + direction];
+        const requestedIndex = options[highlightedIndex + direction];
         return requestedIndex && isGroup(requestedIndex)
             ? direction + direction
             : direction;
@@ -134,8 +129,8 @@ 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", function (event) {
-        var newEvent = event;
+    useEventListener__default["default"]("keydown", event => {
+        const newEvent = event;
         if (newEvent.key === keyName) {
             handler(newEvent);
         }
@@ -152,18 +147,17 @@ function isGroup(option) {
  * debounce functions.
  */
 // eslint-disable-next-line max-statements
-function Autocomplete(_a) {
-    var _b = _a.initialOptions, initialOptions = _b === void 0 ? [] : _b, value = _a.value, _c = _a.allowFreeForm, allowFreeForm = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? undefined : _d, invalid = _a.invalid, _e = _a.debounce, debounceRate = _e === void 0 ? 300 : _e, onChange = _a.onChange, getOptions = _a.getOptions, placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus;
-    var _f;
-    var _g = tslib_es6.__read(React.useState(initialOptions), 2), options = _g[0], setOptions = _g[1];
-    var _h = tslib_es6.__read(React.useState(false), 2), menuVisible = _h[0], setMenuVisible = _h[1];
-    var _j = tslib_es6.__read(React.useState((_f = value === null || value === void 0 ? void 0 : value.label) !== null && _f !== void 0 ? _f : ""), 2), inputText = _j[0], setInputText = _j[1];
-    var delayedSearch = debounce__default["default"](updateSearch, debounceRate);
-    React.useEffect(function () {
+function Autocomplete({ initialOptions = [], value, allowFreeForm = true, size = undefined, invalid, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, }) {
+    var _a;
+    const [options, setOptions] = React.useState(initialOptions);
+    const [menuVisible, setMenuVisible] = React.useState(false);
+    const [inputText, setInputText] = React.useState((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    const delayedSearch = debounce__default["default"](updateSearch, debounceRate);
+    React.useEffect(() => {
         delayedSearch();
         return delayedSearch.cancel;
     }, [inputText]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         var _a;
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
@@ -177,20 +171,10 @@ function Autocomplete(_a) {
         }
     }
     function updateSearch() {
-        return tslib_es6.__awaiter(this, void 0, void 0, function () {
-            var updatedOptions, filteredOptions;
-            return tslib_es6.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getOptions(inputText)];
-                    case 1:
-                        updatedOptions = _a.sent();
-                        filteredOptions = updatedOptions.filter(function (option) {
-                            return "options" in option && option.options ? option.options.length > 0 : true;
-                        });
-                        setOptions(mapToOptions(filteredOptions));
-                        return [2 /*return*/];
-                }
-            });
+        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) {

package/dist/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { XOR } from "ts-xor";
-declare type AvatarSize = "base" | "large" | "small";
+type AvatarSize = "base" | "large" | "small";
 interface AvatarFoundationProps {
     /**
      * A url for the image that will be displayed
@@ -33,6 +33,6 @@ interface AvatarWithImageProps extends AvatarFoundationProps {
 interface AvatarWithInitialsProps extends AvatarFoundationProps {
     readonly initials: string;
 }
-export declare type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
+export type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
 export declare function Avatar({ imageUrl, name, initials, size, color, }: AvatarProps): JSX.Element;
 export {};

package/dist/Avatar/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Avatar = require('../Avatar-cfd04e86.js');
+var Avatar = require('../Avatar-89cfd0a6.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 require('color');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 
 

package/dist/{Avatar-cfd04e86.js → Avatar-89cfd0a6.js}

@@ -4,7 +4,7 @@ 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');
+var Icon = require('./Icon-405a216c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -40,7 +40,7 @@ function deconstructCssCustomProperty(color) {
     /**
      * Rips apart the `var(--custom-property)` into just `--custom-property`.
      */
-    var customProperty = color
+    const customProperty = color
         .replace("var(", "")
         .slice(0, -1)
         .split(" ")
@@ -50,32 +50,28 @@ function deconstructCssCustomProperty(color) {
         .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 = {
+function Avatar({ imageUrl, name, initials, size = "base", color, }) {
+    const style = {
         backgroundColor: color,
         borderColor: color,
     };
     if (imageUrl) {
-        style.backgroundImage = "url(" + 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));
+    const shouldBeDark = color == undefined || isDark(color);
+    const className = classnames__default["default"](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 }))));
 }
-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;
+function Initials({ initials, dark = false, iconSize = "base", }) {
     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));
+    const className = classnames__default["default"](styles.initials, {
+        [styles.smallInitials]: initials.length > 2,
+    });
     return React__default["default"].createElement("span", { className: className }, initials.substr(0, 3));
 }
 

package/dist/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ButtonProps } from "../Button";
-export declare type BannerType = "notice" | "success" | "warning" | "error";
+export type BannerType = "notice" | "success" | "warning" | "error";
 interface BannerProps {
     readonly children: ReactNode;
     readonly type: BannerType;

package/dist/Banner/index.js

@@ -2,16 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-var Text = require('../Text-e012fb46.js');
-var Button = require('../Button-cd30df0f.js');
+var Icon = require('../Icon-405a216c.js');
+var Text = require('../Text-7ce00adb.js');
+var Button = require('../Button-16e043ec.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,18 +26,16 @@ var css = ".nw7Tf4jicBNmfENtxh7tG {\n  background-color: var(--color-informative
 var types = {"notice":"nw7Tf4jicBNmfENtxh7tG","success":"myY4eq0vr_r4Twz0QcBwu","warning":"eExwEf69eCfam2C6Ekk5D","error":"_1U_-uPZepxvaZPO5hh8G4O"};
 styleInject_es.styleInject(css);
 
-function Banner(_a) {
-    var _b;
-    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, onDismiss = _a.onDismiss;
-    var _d = tslib_es6.__read(React.useState(true), 2), showBanner = _d[0], setShowBanner = _d[1];
-    var bannerWidths = {
+function Banner({ children, type, primaryAction, dismissible = true, onDismiss, }) {
+    const [showBanner, setShowBanner] = React.useState(true);
+    const bannerWidths = {
         small: 320,
         medium: 480,
     };
-    var _e = tslib_es6.__read(jobberHooks.useResizeObserver({
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
         widths: bannerWidths,
-    }), 2), bannerRef = _e[0], _f = _e[1].width, bannerWidth = _f === void 0 ? bannerWidths.small : _f;
-    var iconColors = {
+    });
+    const iconColors = {
         notice: "informative",
         success: "success",
         warning: "warning",
@@ -51,15 +48,15 @@ function Banner(_a) {
             variation: type === "notice" ? "learning" : "work",
         }, primaryAction);
     }
-    var bannerClassNames = classnames__default["default"](styles.banner, types[type], (_b = {},
-        _b[styles.medium] = bannerWidth >= bannerWidths.medium,
-        _b));
+    const bannerClassNames = classnames__default["default"](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 },
             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, tslib_es6.__assign({}, primaryAction))))),
+                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] })))))));
     function handleClose() {
@@ -67,8 +64,7 @@ function Banner(_a) {
         onDismiss && onDismiss();
     }
 }
-function BannerChildren(_a) {
-    var children = _a.children;
+function BannerChildren({ children }) {
     if (!children)
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     if (children && typeof children === "string") {

package/dist/Button/Button.d.ts

@@ -59,6 +59,6 @@ interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "on
      */
     submit: boolean;
 }
-export declare type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<SubmitButtonProps, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
+export 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.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-cd30df0f.js');
-require('../tslib.es6-5b50eb8e.js');
+var Button = require('../Button-16e043ec.js');
 require('react');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-dcee06b6.js');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 
 
 

package/dist/{Button-cd30df0f.js → Button-16e043ec.js}

@@ -1,12 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Icon = require('./Icon-d5ad1a6d.js');
-var Typography = require('./Typography-fbe0ed6e.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,30 +17,28 @@ var styles = {"button":"mvrsWRM8T3kCECXcDS2gd","work":"_32HTPrDFyNRObzZRUxmhK6",
 styleInject_es.styleInject(css);
 
 function Button(props) {
-    var _a;
-    var ariaControls = props.ariaControls, ariaHaspopup = props.ariaHaspopup, ariaExpanded = props.ariaExpanded, ariaLabel = props.ariaLabel, _b = props.disabled, disabled = _b === void 0 ? false : _b, external = props.external, fullWidth = props.fullWidth, icon = props.icon, label = props.label, iconOnRight = props.iconOnRight, id = props.id, loading = props.loading, onClick = props.onClick, onMouseDown = props.onMouseDown, _c = props.size, size = _c === void 0 ? "base" : _c, _d = props.type, type = _d === void 0 ? "primary" : _d, url = props.url, to = props.to, _e = props.variation, variation = _e === void 0 ? "work" : _e, submit = props.submit;
-    var buttonClassNames = classnames__default["default"](styles.button, styles[size], (_a = {},
-        _a[styles.onlyIcon] = icon && !label,
-        _a[styles.hasIconAndLabel] = icon && label,
-        _a[styles.iconOnRight] = iconOnRight,
-        _a[styles[variation]] = variation,
-        _a[styles[type]] = type,
-        _a[styles.disabled] = disabled,
-        _a[styles.fullWidth] = fullWidth,
-        _a[styles.loading] = loading,
-        _a));
-    var buttonType = submit ? "submit" : "button";
-    var tagProps = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ className: buttonClassNames, disabled: disabled,
-        id: 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 });
-    var buttonInternals = React__default["default"].createElement(ButtonInternals, tslib_es6.__assign({}, props));
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
+    const buttonClassNames = classnames__default["default"](styles.button, styles[size], {
+        [styles.onlyIcon]: icon && !label,
+        [styles.hasIconAndLabel]: icon && label,
+        [styles.iconOnRight]: iconOnRight,
+        [styles[variation]]: variation,
+        [styles[type]]: type,
+        [styles.disabled]: disabled,
+        [styles.fullWidth]: fullWidth,
+        [styles.loading]: loading,
+    });
+    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 });
+    const buttonInternals = React__default["default"].createElement(ButtonInternals, Object.assign({}, props));
     if (to) {
-        return (React__default["default"].createElement(reactRouterDom.Link, tslib_es6.__assign({}, tagProps, { to: to }), buttonInternals));
+        return (React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
     }
-    var Tag = url ? "a" : "button";
-    return React__default["default"].createElement(Tag, tslib_es6.__assign({}, tagProps), buttonInternals);
+    const Tag = url ? "a" : "button";
+    return React__default["default"].createElement(Tag, Object.assign({}, tagProps), buttonInternals);
 }
-function ButtonInternals(_a) {
-    var label = _a.label, icon = _a.icon, _b = _a.size, size = _b === void 0 ? "base" : _b;
+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)));

package/dist/ButtonDismiss/index.js

@@ -2,16 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-a9590195.js');
+var ButtonDismiss = require('../ButtonDismiss-3fb1eaf9.js');
 require('react');
-require('../Button-cd30df0f.js');
-require('../tslib.es6-5b50eb8e.js');
+require('../Button-16e043ec.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-dcee06b6.js');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 
 
 

package/dist/{ButtonDismiss-a9590195.js → ButtonDismiss-3fb1eaf9.js}

@@ -1,14 +1,13 @@
 'use strict';
 
 var React = require('react');
-var Button = require('./Button-cd30df0f.js');
+var Button = require('./Button-16e043ec.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ButtonDismiss(_a) {
-    var onClick = _a.onClick, ariaLabel = _a.ariaLabel;
+function ButtonDismiss({ onClick, ariaLabel }) {
     return (React__default["default"].createElement(Button.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
 }
 

package/dist/Card/Card.d.ts

@@ -14,6 +14,6 @@ interface LinkCardProps extends CardProps {
 interface ClickableCardProps extends CardProps {
     onClick(event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
 }
-declare type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
+type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
 export declare function Card({ accent, header, children, onClick, title, url, external, }: CardPropOptions): JSX.Element;
 export {};

package/dist/Card/index.js

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-b9f8d6f3.js');
-require('../tslib.es6-5b50eb8e.js');
+var Card = require('../Card-edab9c3c.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
-require('../Heading-a9a66964.js');
-require('../Typography-fbe0ed6e.js');
-require('../Button-cd30df0f.js');
+require('../Heading-7b203f7f.js');
+require('../Typography-9262511f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-826cfb89.js');
+require('../Menu-d6a7d17b.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks');

package/dist/Card/types.d.ts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from "react";
 import colors from "./colors.css";
 import { ButtonProps } from "../Button";
 import { MenuProps } from "../Menu";
-export declare type ActionProps = ReactElement<Omit<ButtonProps, "size" | "fullWidth"> | MenuProps>;
+export type ActionProps = ReactElement<Omit<ButtonProps, "size" | "fullWidth"> | MenuProps>;
 export interface HeaderActionProps {
     /**
      * The title of the card.