@autoguru/overdrive 4.1.0 → 4.1.4

package/dist/components/AutoSuggest/index.js

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

package/dist/components/AutoSuggest/stories.js

@@ -96,6 +96,7 @@ const standardProps = {
   prefixIcon: void 0,
   onReset: () => action('onReset')(),
   onChange: thing => action('onChange')(thing),
+  onEnter: thing => action('onEnter')(thing),
   onFocus: thing => action('onFocus')(thing),
   onBlur: thing => action('onBlur')(thing)
 };

package/dist/components/AutoSuggest/useLayoutSuggestionVisible.js

@@ -1,33 +1,31 @@
+"use strict";
+
 import { useLayoutEffect } from 'react';
-import { isBrowser } from '../../utils';
+import { isBrowser } from "../../utils/index.js";
 export const useLayoutSuggestionVisible = (highlightIndex, highlightRef, suggestionListRef) => {
-    if (isBrowser) {
-        useLayoutEffect(() => {
-            if (highlightRef.current &&
-                suggestionListRef.current &&
-                highlightIndex > -1) {
-                const highlightItem = highlightRef.current;
-                const suggestionListItem = suggestionListRef.current;
-                const itemOffsetRelativeToContainer = highlightItem.offsetParent === suggestionListItem
-                    ? highlightItem.offsetTop
-                    : highlightItem.offsetTop -
-                        suggestionListItem.offsetTop;
-                let { scrollTop } = suggestionListItem;
-                const { offsetHeight } = suggestionListItem;
-                if (itemOffsetRelativeToContainer < scrollTop) {
-                    scrollTop = itemOffsetRelativeToContainer;
-                }
-                else if (itemOffsetRelativeToContainer + highlightItem.offsetHeight >
-                    scrollTop + offsetHeight) {
-                    scrollTop =
-                        itemOffsetRelativeToContainer +
-                            highlightItem.offsetHeight -
-                            offsetHeight;
-                }
-                if (scrollTop !== scrollTop) {
-                    suggestionListItem.scrollTop = scrollTop;
-                }
-            }
-        }, [highlightIndex, highlightRef, suggestionListRef]);
-    }
-};
+  if (isBrowser) {
+    useLayoutEffect(() => {
+      if (highlightRef.current && suggestionListRef.current && highlightIndex > -1) {
+        const highlightItem = highlightRef.current;
+        const suggestionListItem = suggestionListRef.current;
+        const itemOffsetRelativeToContainer = highlightItem.offsetParent === suggestionListItem ? highlightItem.offsetTop : highlightItem.offsetTop - suggestionListItem.offsetTop;
+        let {
+          scrollTop
+        } = suggestionListItem;
+        const {
+          offsetHeight
+        } = suggestionListItem;
+
+        if (itemOffsetRelativeToContainer < scrollTop) {
+          scrollTop = itemOffsetRelativeToContainer;
+        } else if (itemOffsetRelativeToContainer + highlightItem.offsetHeight > scrollTop + offsetHeight) {
+          scrollTop = itemOffsetRelativeToContainer + highlightItem.offsetHeight - offsetHeight;
+        }
+
+        if (scrollTop !== scrollTop) {
+          suggestionListItem.scrollTop = scrollTop;
+        }
+      }
+    }, [highlightIndex, highlightRef, suggestionListRef]);
+  }
+};

package/dist/components/Badge/Badge.css.js

@@ -1,78 +1,86 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Badge/Badge.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 label = style({
-    textOverflow: 'ellipsis',
-    letterSpacing: '0.5px',
-    textTransform: 'uppercase',
-});
+  textOverflow: 'ellipsis',
+  letterSpacing: '0.5px',
+  textTransform: 'uppercase'
+}, "label");
 export const labelSize = styleVariants({
-    standard: {
-        fontSize: vars.typography.size['2'].fontSize,
-        lineHeight: vars.typography.size['2'].fontSize,
+  standard: {
+    fontSize: vars.typography.size['2'].fontSize,
+    lineHeight: vars.typography.size['2'].fontSize
+  },
+  large: {
+    fontSize: vars.typography.size['4'].fontSize,
+    lineHeight: vars.typography.size['4'].fontSize
+  }
+}, "labelSize");
+export const colours = {
+  default: styleVariants({
+    neutral: {
+      backgroundColor: vars.colours.intent.neutral.background.standard
     },
-    large: {
-        fontSize: vars.typography.size['4'].fontSize,
-        lineHeight: vars.typography.size['4'].fontSize,
+    green: {
+      backgroundColor: vars.colours.intent.success.background.standard
     },
-});
-export const colours = {
-    default: styleVariants({
-        neutral: {
-            backgroundColor: vars.colours.intent.neutral.background.standard,
-        },
-        green: {
-            backgroundColor: vars.colours.intent.success.background.standard,
-        },
-        blue: {
-            backgroundColor: vars.colours.intent.information.background.standard,
-        },
-        yellow: {
-            backgroundColor: vars.colours.intent.warning.background.standard,
-        },
-        red: {
-            backgroundColor: vars.colours.intent.danger.background.standard,
-        },
-    }),
-    inverted: {
-        neutral: styleVariants({
-            background: {
-                backgroundColor: vars.colours.intent.neutral.background.mild,
-            },
-            text: {
-                color: vars.colours.intent.neutral.background.standard,
-            },
-        }),
-        green: styleVariants({
-            background: {
-                backgroundColor: vars.colours.intent.success.background.mild,
-            },
-            text: {
-                color: vars.colours.intent.success.background.standard,
-            },
-        }),
-        blue: styleVariants({
-            background: {
-                backgroundColor: vars.colours.intent.information.background.mild,
-            },
-            text: {
-                color: vars.colours.intent.information.background.standard,
-            },
-        }),
-        yellow: styleVariants({
-            background: {
-                backgroundColor: vars.colours.intent.warning.background.mild,
-            },
-            text: {
-                color: vars.colours.intent.warning.background.standard,
-            },
-        }),
-        red: styleVariants({
-            background: {
-                backgroundColor: vars.colours.intent.danger.background.mild,
-            },
-            text: {
-                color: vars.colours.intent.danger.background.standard,
-            },
-        }),
+    blue: {
+      backgroundColor: vars.colours.intent.information.background.standard
+    },
+    yellow: {
+      backgroundColor: vars.colours.intent.warning.background.standard
     },
+    red: {
+      backgroundColor: vars.colours.intent.danger.background.standard
+    }
+  }, "colours_default"),
+  inverted: {
+    neutral: styleVariants({
+      background: {
+        backgroundColor: vars.colours.intent.neutral.background.mild
+      },
+      text: {
+        color: vars.colours.intent.neutral.background.standard
+      }
+    }, "colours_inverted_neutral"),
+    green: styleVariants({
+      background: {
+        backgroundColor: vars.colours.intent.success.background.mild
+      },
+      text: {
+        color: vars.colours.intent.success.background.standard
+      }
+    }, "colours_inverted_green"),
+    blue: styleVariants({
+      background: {
+        backgroundColor: vars.colours.intent.information.background.mild
+      },
+      text: {
+        color: vars.colours.intent.information.background.standard
+      }
+    }, "colours_inverted_blue"),
+    yellow: styleVariants({
+      background: {
+        backgroundColor: vars.colours.intent.warning.background.mild
+      },
+      text: {
+        color: vars.colours.intent.warning.background.standard
+      }
+    }, "colours_inverted_yellow"),
+    red: styleVariants({
+      background: {
+        backgroundColor: vars.colours.intent.danger.background.mild
+      },
+      text: {
+        color: vars.colours.intent.danger.background.standard
+      }
+    }, "colours_inverted_red")
+  }
 };
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Badge/Badge.js

@@ -1,30 +1,45 @@
+"use strict";
+
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
-import { Box } from '../Box';
-import { useTextStyles } from '../Text';
-import * as styles from './Badge.css';
-export const Badge = ({ label, colour = 'neutral', look = 'standard', size = 'standard', className = '', }) => {
-    const isStandardSize = size === 'standard';
-    const textStyles = useTextStyles({
-        noWrap: true,
-        fontWeight: 'semiBold',
-        colour: 'unset',
-    });
-    const inverted = look === 'inverted';
-    invariant(['string', 'number'].includes(typeof label), "Badge `label` can only contain string's or number's");
-    return (React.createElement(Box, { display: "flex" },
-        React.createElement(Box, { className: [
-                className,
-                styles.labelSize[size],
-                inverted
-                    ? styles.colours.inverted[colour].background
-                    : styles.colours.default[colour],
-            ], overflow: "hidden", display: "block", paddingX: isStandardSize ? '1' : '4', paddingY: isStandardSize ? '1' : '2', borderRadius: "1" },
-            React.createElement(Box, { is: "span", display: "block", overflow: "hidden", className: [
-                    textStyles,
-                    styles.label,
-                    inverted
-                        ? styles.colours.inverted[colour].text
-                        : useTextStyles({ colour: 'white' }),
-                ] }, label))));
-};
+import { Box } from "../Box/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./Badge.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Badge = _ref => {
+  let {
+    label,
+    colour = 'neutral',
+    look = 'standard',
+    size = 'standard',
+    className = ''
+  } = _ref;
+  const isStandardSize = size === 'standard';
+  const textStyles = useTextStyles({
+    noWrap: true,
+    fontWeight: 'semiBold',
+    colour: 'unset'
+  });
+  const inverted = look === 'inverted';
+  !['string', 'number'].includes(typeof label) ? process.env.NODE_ENV !== "production" ? invariant(false, "Badge `label` can only contain string's or number's") : invariant(false) : void 0;
+  return _jsx(Box, {
+    display: "flex",
+    children: _jsx(Box, {
+      className: [className, styles.labelSize[size], inverted ? styles.colours.inverted[colour].background : styles.colours.default[colour]],
+      overflow: "hidden",
+      display: "block",
+      paddingX: isStandardSize ? '1' : '4',
+      paddingY: isStandardSize ? '1' : '2',
+      borderRadius: "1",
+      children: _jsx(Box, {
+        is: "span",
+        display: "block",
+        overflow: "hidden",
+        className: [textStyles, styles.label, inverted ? styles.colours.inverted[colour].text : useTextStyles({
+          colour: 'white'
+        })],
+        children: label
+      })
+    })
+  });
+};

package/dist/components/Badge/index.js

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

package/dist/components/Box/Box.js

@@ -1,57 +1,126 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "opacity", "className", "alignItems", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
+
+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 { forwardRef } from 'react';
-import { useBoxStyles } from './useBoxStyles';
-export const Box = forwardRef(({ is: Component = 'div', padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, display, width, height, position, overflow, userSelect, textAlign, pointerEvents, borderColour, borderColourX, borderColourY, borderColourTop, borderColourRight, borderColourBottom, borderColourLeft, borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, boxShadow, borderRadius, backgroundColour, opacity, className = '', alignItems, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, children, ...allOtherProps }, ref) => {
-    const cls = useBoxStyles({
-        is: Component,
-        alignItems,
-        backgroundColour,
-        borderColour,
-        borderColourBottom,
-        borderColourLeft,
-        borderColourRight,
-        borderColourTop,
-        borderColourX,
-        borderColourY,
-        borderRadius,
-        borderWidth,
-        borderWidthBottom,
-        borderWidthLeft,
-        borderWidthRight,
-        borderWidthTop,
-        borderWidthX,
-        borderWidthY,
-        boxShadow,
-        display,
-        flexDirection,
-        flexGrow,
-        flexShrink,
-        flexWrap,
-        height,
-        justifyContent,
-        margin,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        marginTop,
-        marginX,
-        marginY,
-        opacity,
-        overflow,
-        padding,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        paddingTop,
-        paddingX,
-        paddingY,
-        pointerEvents,
-        position,
-        textAlign,
-        userSelect,
-        width,
-    });
-    return (React.createElement(Component, { ref: ref, className: clsx(cls, className), ...allOtherProps }, children));
+import { useBoxStyles } from "./useBoxStyles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Box = forwardRef((_ref, ref) => {
+  let {
+    is: Component = 'div',
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    display,
+    width,
+    height,
+    position,
+    overflow,
+    userSelect,
+    textAlign,
+    pointerEvents,
+    borderColour,
+    borderColourX,
+    borderColourY,
+    borderColourTop,
+    borderColourRight,
+    borderColourBottom,
+    borderColourLeft,
+    borderWidth,
+    borderWidthX,
+    borderWidthY,
+    borderWidthTop,
+    borderWidthRight,
+    borderWidthBottom,
+    borderWidthLeft,
+    boxShadow,
+    borderRadius,
+    backgroundColour,
+    opacity,
+    className = '',
+    alignItems,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    justifyContent,
+    children
+  } = _ref,
+      allOtherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const cls = useBoxStyles({
+    is: Component,
+    alignItems,
+    backgroundColour,
+    borderColour,
+    borderColourBottom,
+    borderColourLeft,
+    borderColourRight,
+    borderColourTop,
+    borderColourX,
+    borderColourY,
+    borderRadius,
+    borderWidth,
+    borderWidthBottom,
+    borderWidthLeft,
+    borderWidthRight,
+    borderWidthTop,
+    borderWidthX,
+    borderWidthY,
+    boxShadow,
+    display,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    height,
+    justifyContent,
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginX,
+    marginY,
+    opacity,
+    overflow,
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingX,
+    paddingY,
+    pointerEvents,
+    position,
+    textAlign,
+    userSelect,
+    width
+  });
+  return _jsx(Component, _objectSpread(_objectSpread({
+    ref: ref,
+    className: clsx(cls, className)
+  }, allOtherProps), {}, {
+    children: children
+  }));
 });
-Box.displayName = 'Box';
+Box.displayName = 'Box';

package/dist/components/Box/argTypes.js

@@ -1,94 +1,64 @@
-export const scaleOptions = [
-    'none',
-    '1',
-    '2',
-    '3',
-    '4',
-    '5',
-    '6',
-    '7',
-    '8',
-    '9',
-];
-const scaledProps = [
-    'padding',
-    'paddingX',
-    'paddingY',
-    'paddingTop',
-    'paddingRight',
-    'paddingLeft',
-    'margin',
-    'marginX',
-    'marginY',
-    'marginTop',
-    'marginRight',
-    'marginLeft',
-];
-const boxShadowOptions = [
-    'none',
-    '1',
-    '2',
-    '3',
-    '4',
-    '5',
-];
-const borderRadiusOptions = [
-    'none',
-    '1',
-    'min',
-    'full',
-    'pill',
-];
-export const boxArgTypes = {
-    boxShadow: {
-        options: boxShadowOptions,
-        control: {
-            type: 'select',
-        },
-    },
-    borderRadius: {
-        options: borderRadiusOptions,
-        control: {
-            type: 'select',
-        },
-    },
-    alignItems: {
-        options: ['flexStart', 'center', 'flexEnd'],
-        control: {
-            type: 'select',
-        },
-    },
-    justifyContent: {
-        options: ['flexStart', 'center', 'flexEnd', 'spaceBetween'],
-        control: {
-            type: 'select',
-        },
-    },
-    flexDirection: {
-        options: ['row', 'rowReverse', 'column', 'columnReverse'],
-        control: {
-            type: 'select',
-        },
-    },
-    flexShrink: {
-        options: {
-            default: undefined,
-            '1': '1',
-        },
-    },
-    pointerEvents: {
-        options: {
-            default: undefined,
-            none: 'none',
-        },
-    },
-    ...scaledProps.reduce((argTypes, prop) => {
-        argTypes[prop] = {
-            options: scaleOptions,
-            control: {
-                type: 'select',
-            },
-        };
-        return argTypes;
-    }, {}),
-};
+"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; }
+
+export const scaleOptions = ['none', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRight', 'paddingLeft', 'margin', 'marginX', 'marginY', 'marginTop', 'marginRight', 'marginLeft'];
+const boxShadowOptions = ['none', '1', '2', '3', '4', '5'];
+const borderRadiusOptions = ['none', '1', 'min', 'full', 'pill'];
+export const boxArgTypes = _objectSpread({
+  boxShadow: {
+    options: boxShadowOptions,
+    control: {
+      type: 'select'
+    }
+  },
+  borderRadius: {
+    options: borderRadiusOptions,
+    control: {
+      type: 'select'
+    }
+  },
+  alignItems: {
+    options: ['flexStart', 'center', 'flexEnd'],
+    control: {
+      type: 'select'
+    }
+  },
+  justifyContent: {
+    options: ['flexStart', 'center', 'flexEnd', 'spaceBetween'],
+    control: {
+      type: 'select'
+    }
+  },
+  flexDirection: {
+    options: ['row', 'rowReverse', 'column', 'columnReverse'],
+    control: {
+      type: 'select'
+    }
+  },
+  flexShrink: {
+    options: {
+      default: undefined,
+      '1': '1'
+    }
+  },
+  pointerEvents: {
+    options: {
+      default: undefined,
+      none: 'none'
+    }
+  }
+}, scaledProps.reduce((argTypes, prop) => {
+  argTypes[prop] = {
+    options: scaleOptions,
+    control: {
+      type: 'select'
+    }
+  };
+  return argTypes;
+}, {}));

package/dist/components/Box/index.js

@@ -1,2 +1,4 @@
-export { Box } from './Box';
-export { useBoxStyles } from './useBoxStyles';
+"use strict";
+
+export { Box } from "./Box.js";
+export { useBoxStyles } from "./useBoxStyles.js";