@jobber/components 6.20.8 → 6.22.0

package/dist/Banner/index.cjs

@@ -16,6 +16,7 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../ButtonDismiss-cjs.js');
 
 

package/dist/Banner/index.mjs

@@ -14,4 +14,5 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../ButtonDismiss-es.js';

package/dist/Button/Button.d.ts

@@ -1,74 +1,8 @@
-import React from "react";
-import { XOR } from "ts-xor";
-import { LinkProps } from "react-router-dom";
-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<S = unknown> extends ButtonFoundationProps {
-    /**
-     * **Deprecated**: to will be removed in the next major version
-     * @deprecated
-     */
-    readonly to?: LinkProps<S>["to"];
-}
-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<BaseActionProps, "external" | "onClick"> {
-    readonly name?: string;
-    readonly submit: boolean;
-    readonly type?: "primary" | "secondary" | "tertiary";
-    readonly value?: string;
-}
-interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
-    /**
-     * Allows the button to submit a form
-     */
-    submit: boolean;
-}
-interface BasicButtonProps extends ButtonFoundationProps {
-    /**
-     * Used to override the default button role.
-     */
-    readonly role?: string;
-}
-export type ButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<XOR<SubmitButtonProps, BasicButtonProps>, XOR<ButtonLinkProps, ButtonAnchorProps>> & XOR<ButtonIconProps, ButtonLabelProps>;
-export declare function Button(props: ButtonProps): JSX.Element;
-export {};
+import { ButtonProps } from "./Button.types";
+import { ButtonIcon, ButtonLabel } from "./ButtonInternals";
+declare function Button(props: ButtonProps): JSX.Element;
+declare namespace Button {
+    var Label: typeof ButtonLabel;
+    var Icon: typeof ButtonIcon;
+}
+export { Button, ButtonProps };

package/dist/Button/Button.types.d.ts

@@ -0,0 +1,85 @@
+import { IconNames } from "@jobber/design";
+import { LinkProps } from "react-router-dom";
+import { XOR } from "ts-xor";
+export type HTMLButtonType = "button" | "submit";
+export type ButtonVariation = "work" | "learning" | "subtle" | "destructive";
+export type ButtonSize = "small" | "base" | "large";
+export type ButtonType = "primary" | "secondary" | "tertiary";
+export interface ButtonFoundationProps {
+    /**
+     * Used for screen readers. Will override label on screen
+     * reader if present.
+     */
+    readonly ariaControls?: string;
+    readonly ariaHaspopup?: boolean;
+    readonly ariaExpanded?: boolean;
+    readonly disabled?: boolean;
+    readonly external?: boolean;
+    readonly fullWidth?: boolean;
+    readonly id?: string;
+    readonly loading?: boolean;
+    readonly size?: ButtonSize;
+    readonly ariaLabel?: string;
+    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+    onMouseDown?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+}
+interface ButtonNonComposableProps extends ButtonFoundationProps {
+    readonly icon?: IconNames;
+    readonly iconOnRight?: boolean;
+    readonly label?: string;
+}
+interface ButtonIconProps extends ButtonNonComposableProps {
+    readonly icon: IconNames;
+    readonly ariaLabel: string;
+}
+interface ButtonLabelProps extends ButtonNonComposableProps {
+    readonly label: string;
+}
+interface ButtonAnchorProps extends ButtonFoundationProps {
+    /**
+     * Used to create an 'href' on an anchor tag.
+     */
+    readonly url?: string;
+}
+interface ButtonLinkProps<S = unknown> extends ButtonFoundationProps {
+    /**
+     * **Deprecated**: to will be removed in the next major version
+     * @deprecated
+     */
+    readonly to?: LinkProps<S>["to"];
+}
+interface BaseActionProps extends ButtonFoundationProps {
+    readonly variation?: ButtonVariation;
+    readonly type?: ButtonType;
+}
+interface DestructiveActionProps extends ButtonFoundationProps {
+    readonly variation: Extract<ButtonVariation, "destructive">;
+    readonly type?: ButtonType;
+}
+interface SubmitActionProps extends Omit<BaseActionProps, "external" | "onClick"> {
+    readonly name?: string;
+    readonly submit: boolean;
+    readonly type?: ButtonType;
+    readonly value?: string;
+}
+interface SubmitButtonProps extends Omit<ButtonFoundationProps, "external" | "onClick"> {
+    /**
+     * Allows the button to submit a form
+     */
+    submit: boolean;
+}
+interface BasicButtonProps extends ButtonFoundationProps {
+    /**
+     * Used to override the default button role.
+     */
+    readonly role?: string;
+}
+type BaseButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<XOR<SubmitButtonProps, BasicButtonProps>, XOR<ButtonLinkProps, ButtonAnchorProps>>;
+export type ButtonWithChildrenProps = BaseButtonProps & {
+    readonly children: React.ReactNode;
+};
+export type ButtonWithoutChildrenProps = BaseButtonProps & XOR<ButtonIconProps, ButtonLabelProps> & {
+    readonly children?: never;
+};
+export type ButtonProps = XOR<ButtonWithChildrenProps, ButtonWithoutChildrenProps>;
+export {};

package/dist/Button/ButtonInternals.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps } from "./Button.types";
+import { IconProps } from "../Icon";
+import { TypographyProps } from "../Typography";
+/**
+ * For backwards compatibility with the legacy button
+ * @deprecated Used composed solution instead
+ */
+export declare function ButtonContent({ label, icon, size, iconOnRight, }: Pick<ButtonProps, "label" | "icon" | "size" | "iconOnRight">): JSX.Element;
+export declare function ButtonIcon({ size: sizeProp, ...props }: Pick<IconProps, "size" | "name" | "testID">): JSX.Element;
+export declare function ButtonLabel({ element, fontWeight, fontFamily, size: sizeProp, ...props }: Omit<TypographyProps, "textColor">): JSX.Element;

package/dist/Button/ButtonProvider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { ButtonSize } from "./Button.types";
+interface ButtonContextProps {
+    size: ButtonSize;
+}
+export declare function ButtonProvider({ children, size, }: PropsWithChildren<{
+    readonly size?: ButtonSize;
+}>): JSX.Element;
+export declare function useButton(): ButtonContextProps;
+export {};

package/dist/Button/index.cjs

@@ -2,8 +2,9 @@
 
 var Button = require('../Button-cjs.js');
 require('react');
-require('classnames');
 require('react-router-dom');
+require('classnames');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
@@ -11,3 +12,5 @@ require('../Typography-cjs.js');
 
 
 exports.Button = Button.Button;
+exports.useButton = Button.useButton;
+exports.useButtonStyles = Button.useButtonStyles;

package/dist/Button/index.d.ts

@@ -1 +1,4 @@
-export * from "./Button";
+export { Button } from "./Button";
+export * from "./Button.types";
+export { useButtonStyles, UseButtonStylesProps } from "./useButtonStyles";
+export { useButton } from "./ButtonProvider";

package/dist/Button/index.mjs

@@ -1,7 +1,8 @@
-export { B as Button } from '../Button-es.js';
+export { B as Button, a as useButton, u as useButtonStyles } from '../Button-es.js';
 import 'react';
-import 'classnames';
 import 'react-router-dom';
+import 'classnames';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Button/useButtonStyles.d.ts

@@ -0,0 +1,17 @@
+import { ButtonSize, ButtonType, ButtonVariation } from "./Button.types";
+/**
+ * The props that are used to style the button
+ */
+export interface UseButtonStylesProps {
+    size?: ButtonSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    variation?: ButtonVariation;
+    type?: ButtonType;
+}
+export declare function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation, type, }: UseButtonStylesProps): {
+    wrapper: string;
+    children: string;
+    combined: string;
+};

package/dist/Button-cjs.js

@@ -1,39 +1,49 @@
 'use strict';
 
 var React = require('react');
-var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
+var classnames = require('classnames');
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var Typography = require('./Typography-cjs.js');
 
-var styles = {"button":"_7BLGtYNuJOU-","work":"amVSJ50CiOo-","learning":"V4GfDDF1ESI-","subtle":"MVT-qs-bO9M-","destructive":"_9YS8IK6Inew-","primary":"TrzCxs3OEpM-","disabled":"zgRx3ehZ2z8-","secondary":"QaWL8FLJ5Aw-","tertiary":"MhDYVRl8PUc-","small":"lPPuBfTJl5k-","base":"VyMJpVxCrxI-","large":"Uh29dvNk6I0-","onlyIcon":"tZGQ0DACs7g-","hasIconAndLabel":"_27LqTbyLaOM-","iconOnRight":"_3Mqs2Gu3Z2M-","fullWidth":"yBId-F-geAA-","loading":"NCs-BISj1XU-","animateStripes":"M0LU-Rdq-MA-","spinning":"IHmVqV9ionc-"};
+var styles = {"button":"_7BLGtYNuJOU-","work":"amVSJ50CiOo-","learning":"V4GfDDF1ESI-","subtle":"MVT-qs-bO9M-","destructive":"_9YS8IK6Inew-","primary":"TrzCxs3OEpM-","disabled":"zgRx3ehZ2z8-","secondary":"QaWL8FLJ5Aw-","tertiary":"MhDYVRl8PUc-","small":"lPPuBfTJl5k-","base":"VyMJpVxCrxI-","large":"Uh29dvNk6I0-","buttonChildren":"H8uYM7Udc4o-","fullWidth":"yBId-F-geAA-","loading":"NCs-BISj1XU-","animateStripes":"M0LU-Rdq-MA-","spinning":"IHmVqV9ionc-"};
 
-function Button(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, name, onClick, onMouseDown, role, size = "base", type = "primary", url, to, value, variation = "work", submit, } = props;
-    const buttonClassNames = classnames(styles.button, styles[size], {
-        [styles.onlyIcon]: icon && !label,
-        [styles.hasIconAndLabel]: icon && label,
-        [styles.iconOnRight]: iconOnRight,
-        [styles[variation]]: variation,
-        [styles[type]]: type,
+const ButtonContext = React.createContext({
+    size: "base",
+});
+function ButtonProvider({ children, size = "base", }) {
+    return (React.createElement(ButtonContext.Provider, { value: { size } }, children));
+}
+function useButton() {
+    return React.useContext(ButtonContext);
+}
+
+function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    const wrapper = classnames([styles.button, styles[size], styles[variation], styles[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(Object.assign({ className: buttonClassNames, disabled,
-        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
-    const buttonInternals = React.createElement(ButtonInternals, Object.assign({}, props));
-    if (to) {
-        return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    const Tag = url ? "a" : "button";
-    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+    const children = styles.buttonChildren;
+    return {
+        wrapper,
+        children,
+        combined: classnames(wrapper, children),
+    };
 }
-function ButtonInternals({ label, icon, size = "base" }) {
+
+/**
+ * For backwards compatibility with the legacy button
+ * @deprecated Used composed solution instead
+ */
+function ButtonContent({ label, icon, size = "base", iconOnRight = false, }) {
     return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon.Icon, { name: icon, size: size }),
-        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
+        icon && !iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size }),
+        label && React.createElement(ButtonLabel, { size: size }, label),
+        icon && iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size })));
 }
 function getTypeSizes(size) {
     switch (size) {
@@ -45,5 +55,40 @@ function getTypeSizes(size) {
             return "base";
     }
 }
+function ButtonIcon(_a) {
+    var { size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["size"]);
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
+}
+function ButtonLabel(_a) {
+    var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    return (React.createElement(Typography.Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
+}
+
+function Button(props) {
+    const { size } = props;
+    return (React.createElement(ButtonProvider, { size: size },
+        React.createElement(ButtonWrapper, Object.assign({}, props))));
+}
+function ButtonWrapper(props) {
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, } = props;
+    const { combined } = useButtonStyles(props);
+    const buttonType = submit ? "submit" : "button";
+    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: combined, disabled,
+        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    const buttonInternals = props.children || React.createElement(ButtonContent, Object.assign({}, props));
+    if (to) {
+        return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+    }
+    const Tag = url ? "a" : "button";
+    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+}
+Button.Label = ButtonLabel;
+Button.Icon = ButtonIcon;
 
 exports.Button = Button;
+exports.useButton = useButton;
+exports.useButtonStyles = useButtonStyles;

package/dist/Button-es.js

@@ -1,37 +1,47 @@
-import React from 'react';
-import classnames from 'classnames';
+import React, { createContext, useContext } from 'react';
 import { Link } from 'react-router-dom';
+import classnames from 'classnames';
+import { _ as __rest } from './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 import { T as Typography } from './Typography-es.js';
 
-var styles = {"button":"_7BLGtYNuJOU-","work":"amVSJ50CiOo-","learning":"V4GfDDF1ESI-","subtle":"MVT-qs-bO9M-","destructive":"_9YS8IK6Inew-","primary":"TrzCxs3OEpM-","disabled":"zgRx3ehZ2z8-","secondary":"QaWL8FLJ5Aw-","tertiary":"MhDYVRl8PUc-","small":"lPPuBfTJl5k-","base":"VyMJpVxCrxI-","large":"Uh29dvNk6I0-","onlyIcon":"tZGQ0DACs7g-","hasIconAndLabel":"_27LqTbyLaOM-","iconOnRight":"_3Mqs2Gu3Z2M-","fullWidth":"yBId-F-geAA-","loading":"NCs-BISj1XU-","animateStripes":"M0LU-Rdq-MA-","spinning":"IHmVqV9ionc-"};
+var styles = {"button":"_7BLGtYNuJOU-","work":"amVSJ50CiOo-","learning":"V4GfDDF1ESI-","subtle":"MVT-qs-bO9M-","destructive":"_9YS8IK6Inew-","primary":"TrzCxs3OEpM-","disabled":"zgRx3ehZ2z8-","secondary":"QaWL8FLJ5Aw-","tertiary":"MhDYVRl8PUc-","small":"lPPuBfTJl5k-","base":"VyMJpVxCrxI-","large":"Uh29dvNk6I0-","buttonChildren":"H8uYM7Udc4o-","fullWidth":"yBId-F-geAA-","loading":"NCs-BISj1XU-","animateStripes":"M0LU-Rdq-MA-","spinning":"IHmVqV9ionc-"};
 
-function Button(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, name, onClick, onMouseDown, role, size = "base", type = "primary", url, to, value, variation = "work", submit, } = props;
-    const buttonClassNames = classnames(styles.button, styles[size], {
-        [styles.onlyIcon]: icon && !label,
-        [styles.hasIconAndLabel]: icon && label,
-        [styles.iconOnRight]: iconOnRight,
-        [styles[variation]]: variation,
-        [styles[type]]: type,
+const ButtonContext = createContext({
+    size: "base",
+});
+function ButtonProvider({ children, size = "base", }) {
+    return (React.createElement(ButtonContext.Provider, { value: { size } }, children));
+}
+function useButton() {
+    return useContext(ButtonContext);
+}
+
+function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    const wrapper = classnames([styles.button, styles[size], styles[variation], styles[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(Object.assign({ className: buttonClassNames, disabled,
-        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
-    const buttonInternals = React.createElement(ButtonInternals, Object.assign({}, props));
-    if (to) {
-        return (React.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
-    }
-    const Tag = url ? "a" : "button";
-    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+    const children = styles.buttonChildren;
+    return {
+        wrapper,
+        children,
+        combined: classnames(wrapper, children),
+    };
 }
-function ButtonInternals({ label, icon, size = "base" }) {
+
+/**
+ * For backwards compatibility with the legacy button
+ * @deprecated Used composed solution instead
+ */
+function ButtonContent({ label, icon, size = "base", iconOnRight = false, }) {
     return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon, { name: icon, size: size }),
-        React.createElement(Typography, { element: "span", fontWeight: "semiBold", fontFamily: "base", size: getTypeSizes(size) }, label)));
+        icon && !iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size }),
+        label && React.createElement(ButtonLabel, { size: size }, label),
+        icon && iconOnRight && React.createElement(ButtonIcon, { name: icon, size: size })));
 }
 function getTypeSizes(size) {
     switch (size) {
@@ -43,5 +53,38 @@ function getTypeSizes(size) {
             return "base";
     }
 }
+function ButtonIcon(_a) {
+    var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    return React.createElement(Icon, Object.assign({}, props, { size: size }));
+}
+function ButtonLabel(_a) {
+    var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
+    const { size: contextSize } = useButton();
+    const size = sizeProp || contextSize;
+    return (React.createElement(Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
+}
+
+function Button(props) {
+    const { size } = props;
+    return (React.createElement(ButtonProvider, { size: size },
+        React.createElement(ButtonWrapper, Object.assign({}, props))));
+}
+function ButtonWrapper(props) {
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, } = props;
+    const { combined } = useButtonStyles(props);
+    const buttonType = submit ? "submit" : "button";
+    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: combined, disabled,
+        id }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    const buttonInternals = props.children || React.createElement(ButtonContent, Object.assign({}, props));
+    if (to) {
+        return (React.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+    }
+    const Tag = url ? "a" : "button";
+    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+}
+Button.Label = ButtonLabel;
+Button.Icon = ButtonIcon;
 
-export { Button as B };
+export { Button as B, useButton as a, useButtonStyles as u };

package/dist/ButtonDismiss/index.cjs

@@ -3,8 +3,9 @@
 var ButtonDismiss = require('../ButtonDismiss-cjs.js');
 require('react');
 require('../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
+require('classnames');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/ButtonDismiss/index.mjs

@@ -1,8 +1,9 @@
 export { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import 'react';
 import '../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
+import 'classnames';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/ButtonDismiss-cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var Button = require('./Button-cjs.js');
+require('classnames');
 
 function ButtonDismiss({ onClick, ariaLabel }) {
     return (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));

package/dist/ButtonDismiss-es.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { B as Button } from './Button-es.js';
+import 'classnames';
 
 function ButtonDismiss({ onClick, ariaLabel }) {
     return (React.createElement(Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));

package/dist/Card/index.cjs

@@ -7,6 +7,7 @@ require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');

package/dist/Card/index.mjs

@@ -5,6 +5,7 @@ import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -25,6 +25,7 @@ require('../../Text-cjs.js');
 require('../../Typography-cjs.js');
 require('../../Button-cjs.js');
 require('react-router-dom');
+require('../../tslib.es6-cjs.js');
 require('../../Spinner-cjs.js');
 require('../../Chip-cjs.js');
 require('../../useInView-cjs.js');
@@ -35,7 +36,6 @@ require('../../Tooltip-cjs.js');
 require('react-dom');
 require('framer-motion');
 require('../../useIsMounted-cjs.js');
-require('../../tslib.es6-cjs.js');
 
 
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -23,6 +23,7 @@ import '../../Text-es.js';
 import '../../Typography-es.js';
 import '../../Button-es.js';
 import 'react-router-dom';
+import '../../tslib.es6-es.js';
 import '../../Spinner-es.js';
 import '../../Chip-es.js';
 import '../../useInView-es.js';
@@ -33,4 +34,3 @@ import '../../Tooltip-es.js';
 import 'react-dom';
 import 'framer-motion';
 import '../../useIsMounted-es.js';
-import '../../tslib.es6-es.js';

package/dist/Chips/index.cjs

@@ -28,8 +28,8 @@ require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../Spinner-cjs.js');
 require('../tslib.es6-cjs.js');
+require('../Spinner-cjs.js');
 require('../useInView-cjs.js');
 require('../Avatar-cjs.js');
 require('color');

package/dist/Chips/index.mjs

@@ -26,8 +26,8 @@ import '../Text-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../Spinner-es.js';
 import '../tslib.es6-es.js';
+import '../Spinner-es.js';
 import '../useInView-es.js';
 import '../Avatar-es.js';
 import 'color';

package/dist/Combobox/components/ComboboxActivator/index.cjs

@@ -3,8 +3,9 @@
 var ComboboxActivator = require('../../../ComboboxActivator-cjs.js');
 require('react');
 require('../../../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
+require('classnames');
+require('../../../tslib.es6-cjs.js');
 require('../../../Icon-cjs.js');
 require('@jobber/design');
 require('../../../Typography-cjs.js');
@@ -19,7 +20,6 @@ require('framer-motion');
 require('../../../useSafeLayoutEffect-cjs.js');
 require('../../../useIsMounted-cjs.js');
 require('react-popper');
-require('../../../tslib.es6-cjs.js');
 require('../../../ComboboxProvider-cjs.js');
 require('../../../constants-cjs.js');
 

package/dist/Combobox/components/ComboboxActivator/index.mjs

@@ -1,8 +1,9 @@
 export { C as ComboboxActivator } from '../../../ComboboxActivator-es.js';
 import 'react';
 import '../../../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
+import 'classnames';
+import '../../../tslib.es6-es.js';
 import '../../../Icon-es.js';
 import '@jobber/design';
 import '../../../Typography-es.js';
@@ -17,6 +18,5 @@ import 'framer-motion';
 import '../../../useSafeLayoutEffect-es.js';
 import '../../../useIsMounted-es.js';
 import 'react-popper';
-import '../../../tslib.es6-es.js';
 import '../../../ComboboxProvider-es.js';
 import '../../../constants-es.js';