@autoguru/overdrive 4.0.2 → 4.0.3

package/dist/components/BulletText/BulletText.js

@@ -1,18 +1,59 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { isValidElement } from 'react';
-import { Box } from '../Box';
-import { Inline } from '../Inline';
-import { Text } from '../Text';
-import * as styles from './BulletText.css';
-export const BulletText = ({ variant = 'primary', children, is: Component = 'div', bullet: Bullet = '•', }) => (React.createElement(Inline, { noWrap: true, space: "3", is: Component, alignX: "flexStart", alignY: "center" },
-    isValidElement(Bullet) ? (React.createElement(Box, { position: "relative", flexShrink: 0 }, Bullet)) : (React.createElement(Box, { position: "relative", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", className: clsx(styles.bullet, {
-            [styles.primary]: variant === 'primary',
-            [styles.secondary]: variant !== 'primary',
-        }), borderRadius: "pill" },
-        React.createElement(Text, { className: clsx({
-                [styles.primaryText]: variant === 'primary',
-                [styles.secondaryText]: variant !== 'primary',
-            }), is: "span", size: "2" }, Bullet))),
-    React.createElement(Box, { flexGrow: 1 },
-        React.createElement(Text, { is: "span", size: "4", display: "block" }, children))));
+import { Box } from "../Box/index.js";
+import { Inline } from "../Inline/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./BulletText.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const BulletText = _ref => {
+  let {
+    variant = 'primary',
+    children,
+    is: Component = 'div',
+    bullet: Bullet = '•'
+  } = _ref;
+  return _jsxs(Inline, {
+    noWrap: true,
+    space: "3",
+    is: Component,
+    alignX: "flexStart",
+    alignY: "center",
+    children: [isValidElement(Bullet) ? _jsx(Box, {
+      position: "relative",
+      flexShrink: 0,
+      children: Bullet
+    }) : _jsx(Box, {
+      position: "relative",
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      className: clsx(styles.bullet, {
+        [styles.primary]: variant === 'primary',
+        [styles.secondary]: variant !== 'primary'
+      }),
+      borderRadius: "pill",
+      children: _jsx(Text, {
+        className: clsx({
+          [styles.primaryText]: variant === 'primary',
+          [styles.secondaryText]: variant !== 'primary'
+        }),
+        is: "span",
+        size: "2",
+        children: Bullet
+      })
+    }), _jsx(Box, {
+      flexGrow: 1,
+      children: _jsx(Text, {
+        is: "span",
+        size: "4",
+        display: "block",
+        children: children
+      })
+    })]
+  });
+};

package/dist/components/BulletText/index.js

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

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

@@ -1,161 +1,169 @@
+"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';
+import { vars } from "../../themes/base/vars.css.js";
 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',
-});
+  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");
 export const body = style({
-    display: 'grid',
-    gridAutoFlow: 'column dense',
-    gridGap: vars.space['1'],
-});
+  display: 'grid',
+  gridAutoFlow: 'column dense',
+  gridGap: vars.space['1']
+}, "body");
 export const loading = style({
-    cursor: 'not-allowed',
-});
+  cursor: 'not-allowed'
+}, "loading");
 export const enabled = style({
-    cursor: 'pointer',
-});
+  cursor: 'pointer'
+}, "enabled");
 export const disabled = style({
-    cursor: 'not-allowed',
-    opacity: '0.3',
-});
+  cursor: 'not-allowed',
+  opacity: '0.3'
+}, "disabled");
 export const spinner = style({
-    margin: '0 auto',
-});
+  margin: '0 auto'
+}, "spinner");
 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,
-        },
-    }),
-    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'],
-        },
-    }),
+  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")
 };
 export const variant = {
-    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']}`,
-    }),
+  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")
 };
 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 ${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']}`,
-        },
-    }),
+  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")
 };
 export const minimal = {
-    defaults: style({
-        color: vars.typography.colour.neutral,
-    }),
-    noneRounded: style({
-        minWidth: '50px',
-    }),
+  defaults: style({
+    color: vars.typography.colour.neutral
+  }, "minimal_defaults"),
+  noneRounded: style({
+    minWidth: '50px'
+  }, "minimal_noneRounded")
 };
 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',
-        },
-    }),
-    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',
-        },
-    }),
+  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")
 };
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Button/Button.js

@@ -1,82 +1,122 @@
+"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';
-import { Icon } from '../Icon';
-import { ProgressSpinner } from '../ProgressSpinner';
-import { useTextStyles } from '../Text';
-import * as styles from './Button.css';
+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";
+
 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(({ 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,
+
+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
     };
-    const child = isLoading ? (React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })) : (React.createElement(Box, { alignItems: "center", justifyContent: "center", height: "full", className: styles.body }, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
-            ? 'small'
-            : 'medium', ...maybeIconProps })) : (children)));
-    return isValidElement(Component)
-        ?
-            cloneElement(Component, { ref, ...props }, child)
-        :
-            createElement(Component, { ref, ...props }, child);
+  }, [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 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.js

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