@autoguru/overdrive 4.1.9 → 4.1.12

package/dist/components/Button/Button.css.d.ts

@@ -0,0 +1,31 @@
+export declare const root: string;
+export declare const body: string;
+export declare const hiddenContent: string;
+export declare const loading: string;
+export declare const enabled: string;
+export declare const disabled: string;
+export declare const spinner: string;
+export declare const size: {
+    small: Record<"default" | "rounded" | "iconOnly", string>;
+    medium: Record<"default" | "rounded" | "iconOnly", string>;
+};
+export declare const variant: {
+    primary: string;
+    secondary: string;
+    danger: string;
+};
+export declare const defaultStates: {
+    primary: string;
+    secondary: string;
+    danger: string;
+};
+export declare const minimal: {
+    defaults: string;
+    noneRounded: string;
+};
+export declare const minimalStates: {
+    primary: string;
+    secondary: string;
+    danger: string;
+};
+//# sourceMappingURL=Button.css.d.ts.map

package/dist/components/Button/Button.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AACH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAIH,eAAO,MAAM,IAAI;;;CA2BhB,CAAC;AACF,eAAO,MAAM,OAAO;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAwCzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;CAqCzB,CAAC"}

package/dist/components/Button/Button.css.js

@@ -1,169 +1,164 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Button/Button.css.ts", "@autoguru/overdrive");
-
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 export const root = style({
-  transitionDelay: '0s',
-  transitionTimingFunction: vars.animation.easing.standard,
-  transitionDuration: '0.1s',
-  transitionProperty: 'color, background-color, border-color, box-shadow, transform',
-  transform: 'translate3d(0, 0, 1) scale(1)',
-  willChange: 'transform'
-}, "root");
+    transitionDelay: '0s',
+    transitionTimingFunction: vars.animation.easing.standard,
+    transitionDuration: '0.1s',
+    transitionProperty: 'color, background-color, border-color, box-shadow, transform',
+    transform: 'translate3d(0, 0, 1) scale(1)',
+    willChange: 'transform',
+});
 export const body = style({
-  display: 'grid',
-  gridAutoFlow: 'column dense',
-  gridGap: vars.space['1']
-}, "body");
+    display: 'grid',
+    gridAutoFlow: 'column dense',
+    gridGap: vars.space['1'],
+});
+export const hiddenContent = style({
+    visibility: 'hidden',
+});
 export const loading = style({
-  cursor: 'not-allowed'
-}, "loading");
+    cursor: 'not-allowed',
+});
 export const enabled = style({
-  cursor: 'pointer'
-}, "enabled");
+    cursor: 'pointer',
+});
 export const disabled = style({
-  cursor: 'not-allowed',
-  opacity: '0.3'
-}, "disabled");
+    cursor: 'not-allowed',
+    opacity: '0.3',
+});
 export const spinner = style({
-  margin: '0 auto'
-}, "spinner");
+    margin: '0 auto',
+});
 const smallHeight = '36px';
 export const size = {
-  small: styleVariants({
-    default: {
-      minWidth: vars.space['8'],
-      height: smallHeight,
-      gridGap: vars.space['1']
-    },
-    rounded: {
-      minWidth: smallHeight
-    },
-    iconOnly: {
-      width: smallHeight
-    }
-  }, "size_small"),
-  medium: styleVariants({
-    default: {
-      minWidth: vars.space['9'],
-      height: vars.space['8'],
-      gridGap: vars.space['2']
-    },
-    rounded: {
-      minWidth: vars.space['8']
-    },
-    iconOnly: {
-      width: vars.space['8']
-    }
-  }, "size_medium")
+    small: styleVariants({
+        default: {
+            minWidth: vars.space['8'],
+            height: smallHeight,
+            gridGap: vars.space['1'],
+        },
+        rounded: {
+            minWidth: smallHeight,
+        },
+        iconOnly: {
+            width: smallHeight,
+        },
+    }),
+    medium: styleVariants({
+        default: {
+            minWidth: vars.space['9'],
+            height: vars.space['8'],
+            gridGap: vars.space['2'],
+        },
+        rounded: {
+            minWidth: vars.space['8'],
+        },
+        iconOnly: {
+            width: vars.space['8'],
+        },
+    }),
 };
 export const variant = {
-  primary: style({
-    color: vars.colours.intent.primary.foreground,
-    backgroundColor: vars.colours.intent.primary.background.standard,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['2'])
-  }, "variant_primary"),
-  secondary: style({
-    color: vars.colours.intent.secondary.foreground,
-    backgroundColor: vars.colours.intent.secondary.background.standard,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.foreground, ", ").concat(vars.elevation['2'])
-  }, "variant_secondary"),
-  danger: style({
-    backgroundColor: vars.colours.intent.danger.background.standard,
-    color: vars.colours.intent.danger.foreground,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.background.standard, ", ").concat(vars.elevation['2'])
-  }, "variant_danger")
+    primary: style({
+        color: vars.colours.intent.primary.foreground,
+        backgroundColor: vars.colours.intent.primary.background.standard,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['2']}`,
+    }),
+    secondary: style({
+        color: vars.colours.intent.secondary.foreground,
+        backgroundColor: vars.colours.intent.secondary.background.standard,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.foreground}, ${vars.elevation['2']}`,
+    }),
+    danger: style({
+        backgroundColor: vars.colours.intent.danger.background.standard,
+        color: vars.colours.intent.danger.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.background.standard}, ${vars.elevation['2']}`,
+    }),
 };
 export const defaultStates = {
-  primary: style({
-    ':hover': {
-      color: vars.colours.intent.primary.foreground,
-      backgroundColor: vars.colours.intent.primary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['1']),
-      color: vars.colours.intent.primary.foreground,
-      backgroundColor: vars.colours.intent.primary.background.strong
-    }
-  }, "defaultStates_primary"),
-  secondary: style({
-    ':hover': {
-      color: vars.colours.intent.secondary.foreground,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.foreground, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.secondary.foreground,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.background.strong, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_secondary"),
-  danger: style({
-    ':hover': {
-      color: vars.colours.intent.danger.foreground,
-      backgroundColor: vars.colours.intent.danger.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.background.strong, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.danger.foreground,
-      backgroundColor: vars.colours.intent.danger.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.background.strong, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_danger")
+    primary: style({
+        ':hover': {
+            color: vars.colours.intent.primary.foreground,
+            backgroundColor: vars.colours.intent.primary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`,
+            color: vars.colours.intent.primary.foreground,
+            backgroundColor: vars.colours.intent.primary.background.strong,
+        },
+    }),
+    secondary: style({
+        ':hover': {
+            color: vars.colours.intent.secondary.foreground,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.foreground}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.secondary.foreground,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.background.strong}, ${vars.elevation['1']}`,
+        },
+    }),
+    danger: style({
+        ':hover': {
+            color: vars.colours.intent.danger.foreground,
+            backgroundColor: vars.colours.intent.danger.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.background.strong}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.danger.foreground,
+            backgroundColor: vars.colours.intent.danger.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.background.strong}, ${vars.elevation['1']}`,
+        },
+    }),
 };
 export const minimal = {
-  defaults: style({
-    color: vars.typography.colour.neutral
-  }, "minimal_defaults"),
-  noneRounded: style({
-    minWidth: '50px'
-  }, "minimal_noneRounded")
+    defaults: style({
+        color: vars.typography.colour.neutral,
+    }),
+    noneRounded: style({
+        minWidth: '50px',
+    }),
 };
 export const minimalStates = {
-  primary: style({
-    ':hover': {
-      color: vars.colours.intent.primary.background.strong,
-      backgroundColor: vars.colours.intent.primary.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.primary.background.strong,
-      backgroundColor: vars.colours.intent.primary.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_primary"),
-  secondary: style({
-    ':hover': {
-      color: vars.typography.colour.secondary,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.typography.colour.secondary,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_secondary"),
-  danger: style({
-    ':hover': {
-      color: vars.colours.intent.danger.background.strong,
-      backgroundColor: vars.colours.intent.danger.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.danger.background.strong,
-      backgroundColor: vars.colours.intent.danger.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_danger")
+    primary: style({
+        ':hover': {
+            color: vars.colours.intent.primary.background.strong,
+            backgroundColor: vars.colours.intent.primary.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.primary.background.strong,
+            backgroundColor: vars.colours.intent.primary.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    secondary: style({
+        ':hover': {
+            color: vars.typography.colour.secondary,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.typography.colour.secondary,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: 'none',
+        },
+    }),
+    danger: style({
+        ':hover': {
+            color: vars.colours.intent.danger.background.strong,
+            backgroundColor: vars.colours.intent.danger.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.danger.background.strong,
+            backgroundColor: vars.colours.intent.danger.background.mild,
+            boxShadow: 'none',
+        },
+    }),
 };
-
-__vanilla_filescope__.endFileScope();

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,20 @@
+import { IconType } from '@autoguru/icons';
+import * as React from 'react';
+import { AriaAttributes, ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
+import * as styles from './Button.css';
+declare type ButtonPrimitive = ButtonHTMLAttributes<HTMLButtonElement>;
+declare type AllowedChildren = string | IconType;
+export interface Props extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'> {
+    children: AllowedChildren | AllowedChildren[];
+    disabled?: boolean;
+    is?: ElementType | ReactElement;
+    isLoading?: boolean;
+    isFullWidth?: boolean;
+    minimal?: boolean;
+    rounded?: boolean;
+    size?: keyof typeof styles.size;
+    variant?: keyof typeof styles.variant;
+}
+export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAkJlB,CAAC"}

package/dist/components/Button/Button.js

@@ -1,122 +1,86 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import clsx from 'clsx';
 import * as React from 'react';
-import { cloneElement, createElement, forwardRef, isValidElement, useMemo } from 'react';
-import { Box, useBoxStyles } from "../Box/index.js";
-import { Icon } from "../Icon/index.js";
-import { ProgressSpinner } from "../ProgressSpinner/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./Button.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-
+import { cloneElement, createElement, forwardRef, isValidElement, useMemo, } from 'react';
+import { Box, useBoxStyles } from '../Box';
+import { Icon } from '../Icon';
+import { ProgressSpinner } from '../ProgressSpinner';
+import { useTextStyles } from '../Text';
+import * as styles from './Button.css';
 const getSpinnerColour = (variant, minimal) => minimal || variant === 'secondary' ? 'secondary' : 'light';
-
-const getBorderRadius = rounded => rounded ? 'pill' : '1';
-
+const getBorderRadius = (rounded) => rounded ? 'pill' : '1';
 const getPadding = (size, loading) => {
-  if (loading) return 'none';
-  return size === 'small' ? '3' : '4';
+    if (loading)
+        return 'none';
+    return size === 'small' ? '3' : '4';
 };
-
-export const Button = forwardRef((_ref, ref) => {
-  var _maybeIconProps$size;
-
-  let {
-    children,
-    className = '',
-    disabled = false,
-    id,
-    is: Component = 'button',
-    isLoading = false,
-    isFullWidth = false,
-    minimal = false,
-    onClick,
-    rounded = false,
-    size = 'medium',
-    type = 'button',
-    variant = 'secondary',
-    'aria-label': ariaLabel
-  } = _ref;
-  const {
-    isSingleIconChild,
-    props: maybeIconProps
-  } = useMemo(() => {
-    const maybeIcon = isValidElement(children) && children.type === Icon;
-    const maybeProps = children;
-    return maybeIcon ? {
-      isSingleIconChild: true,
-      props: maybeProps.props
-    } : {
-      isSingleIconChild: false
+export const Button = forwardRef(({ children, className = '', disabled = false, id, is: Component = 'button', isLoading = false, isFullWidth = false, minimal = false, onClick, rounded = false, size = 'medium', type = 'button', variant = 'secondary', 'aria-label': ariaLabel, }, ref) => {
+    const { isSingleIconChild, props: maybeIconProps } = useMemo(() => {
+        const maybeIcon = isValidElement(children) && children.type === Icon;
+        const maybeProps = children;
+        return maybeIcon
+            ? {
+                isSingleIconChild: true,
+                props: maybeProps.props,
+            }
+            : { isSingleIconChild: false };
+    }, [children]);
+    const props = {
+        type: Component === 'button' ? type : undefined,
+        id,
+        onClick,
+        disabled: disabled || isLoading,
+        'aria-label': ariaLabel,
+        className: clsx(useBoxStyles({
+            is: typeof Component === 'string' ? Component : undefined,
+            display: 'inlineBlock',
+            overflow: 'hidden',
+            borderRadius: getBorderRadius(rounded),
+            textAlign: 'center',
+            borderWidth: 'none',
+            paddingY: 'none',
+            paddingX: getPadding(size, isLoading),
+            width: isFullWidth ? 'full' : void 0,
+        }), useTextStyles({
+            colour: 'white',
+            fontWeight: 'semiBold',
+            size: size === 'medium' ? '4' : '3',
+        }), styles.root, getButtonStates(styles, variant, disabled || isLoading, minimal, rounded), !minimal && styles.variant[variant], getButtonSize(styles, size, rounded, isSingleIconChild && !isLoading), {
+            [styles.disabled]: disabled,
+            [styles.enabled]: !disabled && !isLoading,
+            [styles.loading]: isLoading,
+        }, className),
+        ref,
     };
-  }, [children]);
-  const props = {
-    type: Component === 'button' ? type : undefined,
-    id,
-    onClick,
-    disabled: disabled || isLoading,
-    'aria-label': ariaLabel,
-    className: clsx(useBoxStyles({
-      is: typeof Component === 'string' ? Component : undefined,
-      display: 'inlineBlock',
-      overflow: 'hidden',
-      borderRadius: getBorderRadius(rounded),
-      textAlign: 'center',
-      borderWidth: 'none',
-      paddingY: 'none',
-      paddingX: getPadding(size, isLoading),
-      width: isFullWidth ? 'full' : void 0
-    }), useTextStyles({
-      colour: 'white',
-      fontWeight: 'semiBold',
-      size: size === 'medium' ? '4' : '3'
-    }), styles.root, getButtonStates(styles, variant, disabled || isLoading, minimal, rounded), !minimal && styles.variant[variant], getButtonSize(styles, size, rounded, isSingleIconChild && !isLoading), {
-      [styles.disabled]: disabled,
-      [styles.enabled]: !disabled && !isLoading,
-      [styles.loading]: isLoading
-    }, className),
-    ref
-  };
-  const child = isLoading ? _jsx(ProgressSpinner, {
-    className: styles.spinner,
-    colour: getSpinnerColour(variant, minimal)
-  }) : _jsx(Box, {
-    alignItems: "center",
-    justifyContent: "center",
-    height: "full",
-    className: styles.body,
-    children: isSingleIconChild && maybeIconProps ? _jsx(Icon, _objectSpread({
-      size: ((_maybeIconProps$size = maybeIconProps.size) !== null && _maybeIconProps$size !== void 0 ? _maybeIconProps$size : size === 'small') ? 'small' : 'medium'
-    }, maybeIconProps)) : children
-  });
-  return isValidElement(Component) ? cloneElement(Component, _objectSpread({
-    ref
-  }, props), child) : createElement(Component, _objectSpread({
-    ref
-  }, props), child);
+    const buttonContents = useMemo(() => (React.createElement(React.Fragment, null, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
+            ? 'small'
+            : 'medium', ...maybeIconProps })) : (children))), [maybeIconProps, isSingleIconChild, children, size]);
+    const child = isLoading ? (React.createElement(Box, { display: "flex", justifyContent: "center", position: "relative", alignItems: "center", width: "full", height: "full" },
+        React.createElement(Box, { position: "absolute", alignItems: "center", justifyContent: "center", display: "flex", width: "full", height: "full" },
+            React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })),
+        React.createElement(Box, { width: "full", height: "full", className: [styles.body, styles.hiddenContent] }, buttonContents))) : (React.createElement(Box, { height: "full", alignItems: "center", justifyContent: "center", className: styles.body }, buttonContents));
+    return isValidElement(Component)
+        ?
+            cloneElement(Component, { ref, ...props }, child)
+        :
+            createElement(Component, { ref, ...props }, child);
 });
-
 const getButtonStates = (buttonStyles, variant, disabled, minimal, rounded) => {
-  if (disabled) return minimal ? clsx(buttonStyles.minimal.defaults, {
-    [buttonStyles.minimal.noneRounded]: !rounded
-  }) : '';
-  if (minimal) return clsx(styles.minimal.defaults, styles.minimalStates[variant], {
-    [styles.minimal.noneRounded]: !rounded
-  });
-  return styles.defaultStates[variant];
+    if (disabled)
+        return minimal
+            ? clsx(buttonStyles.minimal.defaults, {
+                [buttonStyles.minimal.noneRounded]: !rounded,
+            })
+            : '';
+    if (minimal)
+        return clsx(styles.minimal.defaults, styles.minimalStates[variant], {
+            [styles.minimal.noneRounded]: !rounded,
+        });
+    return styles.defaultStates[variant];
 };
-
 const getButtonSize = (buttonStyles, size, rounded, iconOnly) => {
-  const currentSize = buttonStyles.size[size];
-  return clsx(currentSize.default, {
-    [currentSize.rounded]: rounded,
-    [currentSize.iconOnly]: iconOnly
-  });
-};
+    const currentSize = buttonStyles.size[size];
+    return clsx(currentSize.default, {
+        [currentSize.rounded]: rounded,
+        [currentSize.iconOnly]: iconOnly,
+    });
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Button/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { Button } from "./Button.js";
+export { Button } from './Button';

package/dist/components/Button/stories.js

@@ -2,9 +2,9 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { AccountBoxIcon } from '@autoguru/icons';
 import * as React from 'react';
@@ -62,7 +62,7 @@ const TemplateMulti = args => _jsxs(_Fragment, {
       children: _jsx(Button, _objectSpread(_objectSpread({
         isLoading: true
       }, args), {}, {
-        children: "Login"
+        children: "A very very very long button Label"
       }))
     }), _jsx(Column, {
       children: _jsx(Button, _objectSpread(_objectSpread({

package/dist/components/CheckBox/CheckBox.css.d.ts

@@ -0,0 +1,3 @@
+export declare const icon: string;
+export declare const base: Record<"default" | "selected", string>;
+//# sourceMappingURL=CheckBox.css.d.ts.map

package/dist/components/CheckBox/CheckBox.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,IAAI,wCAef,CAAC"}