@autoguru/overdrive 4.1.8 → 4.1.9

package/dist/components/CheckBox/CheckBox.css.js

@@ -1,24 +1,32 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/CheckBox/CheckBox.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 icon = style({
-    zIndex: 1,
-    top: `calc(50% - 0.5*(${vars.space['4']}))`,
-    left: `calc(50% - 0.5*(${vars.space['4']}))`,
+  zIndex: 1,
+  top: "calc(50% - 0.5*(".concat(vars.space['4'], "))"),
+  left: "calc(50% - 0.5*(".concat(vars.space['4'], "))"),
+  width: vars.space['4'],
+  height: vars.space['4']
+}, "icon");
+export const base = styleVariants({
+  default: {
+    zIndex: 0,
+    borderRadius: vars.border.radius['min'],
+    top: vars.space['3'],
+    left: vars.space['3'],
     width: vars.space['4'],
     height: vars.space['4'],
-});
-export const base = styleVariants({
-    default: {
-        zIndex: 0,
-        borderRadius: vars.border.radius['min'],
-        top: vars.space['3'],
-        left: vars.space['3'],
-        width: vars.space['4'],
-        height: vars.space['4'],
-        transition: `border-color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    },
-    selected: {
-        borderColor: vars.colours.intent.primary.background.standard,
-        backgroundColor: vars.colours.intent.primary.background.standard,
-    },
-});
+    transition: "border-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, background-color 0.2s ").concat(vars.animation.easing.decelerate, " 0s")
+  },
+  selected: {
+    borderColor: vars.colours.intent.primary.background.standard,
+    backgroundColor: vars.colours.intent.primary.background.standard
+  }
+}, "base");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/CheckBox/CheckBox.js

@@ -1,20 +1,58 @@
+"use strict";
+
 import { CheckIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { noop } from '../../utils';
-import { Box, useBoxStyles } from '../Box';
-import { Icon } from '../Icon';
-import { useTextStyles } from '../Text';
-import { CheckableBase } from '../private/CheckableBase';
-import { useCheckableStyles } from '../private/CheckableBase/useCheckableStyles';
-import * as styles from './CheckBox.css';
-export const CheckBox = forwardRef(({ value, className = '', name = '', disabled = false, checked = false, onClick = noop, onChange = noop, children, }, ref) => {
-    const iconStyles = clsx(useTextStyles({ colour: 'white' }), useBoxStyles({ position: 'absolute' }));
-    const { checkableItem } = useCheckableStyles();
-    return (React.createElement(CheckableBase, { ref: ref, inputType: "checkbox", className: className, inputName: name, value: value, label: children, disabled: disabled, checked: checked, handleClick: onClick, handleChange: onChange },
-        checked ? (React.createElement(Icon, { className: clsx(styles.icon, iconStyles), icon: CheckIcon, size: "small" })) : null,
-        React.createElement(Box, { borderWidth: "2", borderColour: "gray", className: clsx(checkableItem, styles.base.default, {
-                [styles.base.selected]: checked,
-            }) })));
-});
+import { noop } from "../../utils/index.js";
+import { Box, useBoxStyles } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { useTextStyles } from "../Text/index.js";
+import { CheckableBase } from "../private/CheckableBase/index.js";
+import { useCheckableStyles } from "../private/CheckableBase/useCheckableStyles.js";
+import * as styles from "./CheckBox.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckBox = forwardRef((_ref, ref) => {
+  let {
+    value,
+    className = '',
+    name = '',
+    disabled = false,
+    checked = false,
+    onClick = noop,
+    onChange = noop,
+    children
+  } = _ref;
+  const iconStyles = clsx(useTextStyles({
+    colour: 'white'
+  }), useBoxStyles({
+    position: 'absolute'
+  }));
+  const {
+    checkableItem
+  } = useCheckableStyles();
+  return _jsxs(CheckableBase, {
+    ref: ref,
+    inputType: "checkbox",
+    className: className,
+    inputName: name,
+    value: value,
+    label: children,
+    disabled: disabled,
+    checked: checked,
+    handleClick: onClick,
+    handleChange: onChange,
+    children: [checked ? _jsx(Icon, {
+      className: clsx(styles.icon, iconStyles),
+      icon: CheckIcon,
+      size: "small"
+    }) : null, _jsx(Box, {
+      borderWidth: "2",
+      borderColour: "gray",
+      className: clsx(checkableItem, styles.base.default, {
+        [styles.base.selected]: checked
+      })
+    })]
+  });
+});

package/dist/components/CheckBox/index.js

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

package/dist/components/Columns/Column.css.js

@@ -1,30 +1,40 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Columns/Column.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
-const getSizeStyle = (scale) => `${scale * 100}%`;
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+
+const getSizeStyle = scale => "".concat(scale * 100, "%");
+
 export const width = makeResponsiveStyle({
-    '1/2': getSizeStyle(1 / 2),
-    '1/3': getSizeStyle(1 / 3),
-    '2/3': getSizeStyle(2 / 3),
-    '1/4': getSizeStyle(1 / 4),
-    '3/4': getSizeStyle(3 / 4),
-    '1/5': getSizeStyle(1 / 5),
-    '2/5': getSizeStyle(2 / 5),
-    '3/5': getSizeStyle(3 / 5),
-    '4/5': getSizeStyle(4 / 5),
-    full: getSizeStyle(1),
-    auto: 'auto',
+  '1/2': getSizeStyle(1 / 2),
+  '1/3': getSizeStyle(1 / 3),
+  '2/3': getSizeStyle(2 / 3),
+  '1/4': getSizeStyle(1 / 4),
+  '3/4': getSizeStyle(3 / 4),
+  '1/5': getSizeStyle(1 / 5),
+  '2/5': getSizeStyle(2 / 5),
+  '3/5': getSizeStyle(3 / 5),
+  '4/5': getSizeStyle(4 / 5),
+  full: getSizeStyle(1),
+  auto: 'auto'
 }, 'flexBasis');
 export const align = styleVariants({
-    stretch: {
-        alignSelf: 'stretch',
-    },
-    top: {
-        alignSelf: 'flex-start',
-    },
-    centre: {
-        alignSelf: 'center',
-    },
-    bottom: {
-        alignSelf: 'flex-end',
-    },
-});
+  stretch: {
+    alignSelf: 'stretch'
+  },
+  top: {
+    alignSelf: 'flex-start'
+  },
+  centre: {
+    alignSelf: 'center'
+  },
+  bottom: {
+    alignSelf: 'flex-end'
+  }
+}, "align");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Columns/Column.js

@@ -1,19 +1,54 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children", "width", "alignSelf", "is", "noShrink", "grow"];
+
+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 { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { forwardRef, useContext } from 'react';
-import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import { Box } from '../Box';
-import * as styles from './Column.css';
-import { ColumnContext } from './Columns';
-export const Column = forwardRef(({ className = '', children, width, alignSelf, is, noShrink = false, grow = false, ...boxProps }, ref) => {
-    const columnsContext = useContext(ColumnContext);
-    invariant(columnsContext !== null, 'Column must be wrapped inside a Columns element');
-    const { isList, spaceXCls, spaceYCls } = columnsContext;
-    return (React.createElement(Box, { is: isList ? 'li' : 'div', flexGrow: grow ? 1 : 0, flexShrink: noShrink ? 0 : void 0, className: [
-            spaceXCls,
-            spaceYCls,
-            resolveResponsiveStyle(width, styles.width),
-            styles.align[alignSelf],
-        ] },
-        React.createElement(Box, { ref: ref, is: is, display: "flex", width: "full", height: "full", className: className, ...boxProps }, children)));
-});
+import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import { Box } from "../Box/index.js";
+import * as styles from "./Column.css.js";
+import { ColumnContext } from "./Columns.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Column = forwardRef((_ref, ref) => {
+  let {
+    className = '',
+    children,
+    width,
+    alignSelf,
+    is,
+    noShrink = false,
+    grow = false
+  } = _ref,
+      boxProps = _objectWithoutProperties(_ref, _excluded);
+
+  const columnsContext = useContext(ColumnContext);
+  !(columnsContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Column must be wrapped inside a Columns element') : invariant(false) : void 0;
+  const {
+    isList,
+    spaceXCls,
+    spaceYCls
+  } = columnsContext;
+  return _jsx(Box, {
+    is: isList ? 'li' : 'div',
+    flexGrow: grow ? 1 : 0,
+    flexShrink: noShrink ? 0 : void 0,
+    className: [spaceXCls, spaceYCls, resolveResponsiveStyle(width, styles.width), styles.align[alignSelf]],
+    children: _jsx(Box, _objectSpread(_objectSpread({
+      ref: ref,
+      is: is,
+      display: "flex",
+      width: "full",
+      height: "full",
+      className: className
+    }, boxProps), {}, {
+      children: children
+    }))
+  });
+});

package/dist/components/Columns/Columns.css.js

@@ -1,36 +1,44 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Columns/Columns.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
+import { vars } from "../../themes/base/vars.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
 export const space = {
-    spaceX: makeResponsiveStyle(vars.space, 'paddingLeft'),
-    spaceY: makeResponsiveStyle(vars.space, 'paddingTop'),
+  spaceX: makeResponsiveStyle(vars.space, 'paddingLeft'),
+  spaceY: makeResponsiveStyle(vars.space, 'paddingTop')
 };
 export const wrapping = styleVariants({
-    wrap: {
-        flexWrap: 'wrap',
-    },
-    noWrap: {
-        flexWrap: 'nowrap',
-    },
-    reverseWrap: {
-        flexWrap: 'wrap-reverse',
-    },
-});
+  wrap: {
+    flexWrap: 'wrap'
+  },
+  noWrap: {
+    flexWrap: 'nowrap'
+  },
+  reverseWrap: {
+    flexWrap: 'wrap-reverse'
+  }
+}, "wrapping");
 export const align = styleVariants({
-    stretch: {
-        alignContent: 'stretch',
-        alignItems: 'stretch',
-    },
-    top: {
-        alignContent: 'flex-start',
-        alignItems: 'flex-start',
-    },
-    centre: {
-        alignContent: 'center',
-        alignItems: 'center',
-    },
-    bottom: {
-        alignContent: 'flex-end',
-        alignItems: 'flex-end',
-    },
-});
+  stretch: {
+    alignContent: 'stretch',
+    alignItems: 'stretch'
+  },
+  top: {
+    alignContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  centre: {
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+  bottom: {
+    alignContent: 'flex-end',
+    alignItems: 'flex-end'
+  }
+}, "align");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Columns/Columns.js

@@ -1,25 +1,58 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align", "is"];
+
+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 { createContext, forwardRef, useMemo } from 'react';
-import { useNegativeMarginLeft, useNegativeMarginTop, } from '../../hooks/useNegativeMargin/useNegativeMargin';
-import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import { Box } from '../Box';
-import * as styles from './Columns.css';
+import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
+import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import { Box } from "../Box/index.js";
+import * as styles from "./Columns.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ColumnContext = createContext(null);
-export const Columns = forwardRef(({ className = '', children, space, spaceX, spaceY, noWrap, wrappingDirection = 'default', align = 'stretch', is, ...boxProps }, ref) => {
-    const resolvedSpaceX = spaceX || space || ['none'];
-    const resolvedSpaceY = spaceY || space || ['none'];
-    const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
-    const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
-    return (React.createElement(Box, { ref: ref, is: is, display: "flex", flexDirection: "row", className: clsx(marginLeftFix, marginTopFix, styles.align[align], className, {
-            [styles.wrapping.wrap]: !noWrap,
-            [styles.wrapping.noWrap]: noWrap,
-            [styles.wrapping.reverseWrap]: wrappingDirection === 'reverse',
-        }), ...boxProps },
-        React.createElement(ColumnContext.Provider, { value: useMemo(() => ({
-                spaceXCls: resolveResponsiveStyle(resolvedSpaceX, styles.space.spaceX),
-                spaceYCls: resolveResponsiveStyle(resolvedSpaceY, styles.space.spaceY),
-                isList: typeof is === 'string' &&
-                    ['ul', 'ol'].includes(is),
-            }), [resolvedSpaceX, resolvedSpaceY, styles]) }, children)));
-});
+export const Columns = forwardRef((_ref, ref) => {
+  let {
+    className = '',
+    children,
+    space,
+    spaceX,
+    spaceY,
+    noWrap,
+    wrappingDirection = 'default',
+    align = 'stretch',
+    is
+  } = _ref,
+      boxProps = _objectWithoutProperties(_ref, _excluded);
+
+  const resolvedSpaceX = spaceX || space || ['none'];
+  const resolvedSpaceY = spaceY || space || ['none'];
+  const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
+  const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
+  return _jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    is: is,
+    display: "flex",
+    flexDirection: "row",
+    className: clsx(marginLeftFix, marginTopFix, styles.align[align], className, {
+      [styles.wrapping.wrap]: !noWrap,
+      [styles.wrapping.noWrap]: noWrap,
+      [styles.wrapping.reverseWrap]: wrappingDirection === 'reverse'
+    })
+  }, boxProps), {}, {
+    children: _jsx(ColumnContext.Provider, {
+      value: useMemo(() => ({
+        spaceXCls: resolveResponsiveStyle(resolvedSpaceX, styles.space.spaceX),
+        spaceYCls: resolveResponsiveStyle(resolvedSpaceY, styles.space.spaceY),
+        isList: typeof is === 'string' && ['ul', 'ol'].includes(is)
+      }), [resolvedSpaceX, resolvedSpaceY, styles]),
+      children: children
+    })
+  }));
+});

package/dist/components/Columns/index.js

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

package/dist/components/DateInput/DateInput.js

@@ -1,10 +1,36 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed"];
+
+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 { warning } from '@autoguru/utilities';
 import * as React from 'react';
-import { Box } from '../Box';
-import { withEnhancedInput } from '../private/InputBase';
-export const DateInput = withEnhancedInput(({ field, eventHandlers, validation, isLoading, suffixed, prefixed, ...rest }) => {
-    warning(field.value !== '', 'Date Input does not support empty values.');
-    return (React.createElement(Box, { is: "input", ...eventHandlers, ...field, ...rest, autoComplete: "off", type: "date" }));
+import { Box } from "../Box/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateInput = withEnhancedInput(_ref => {
+  let {
+    field,
+    eventHandlers,
+    validation,
+    isLoading,
+    suffixed,
+    prefixed
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  process.env.NODE_ENV !== "production" ? warning(field.value !== '', 'Date Input does not support empty values.') : void 0;
+  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    is: "input"
+  }, eventHandlers), field), rest), {}, {
+    autoComplete: "off",
+    type: "date"
+  }));
 }, {
-    primitiveType: 'date',
-});
+  primitiveType: 'date'
+});

package/dist/components/DateInput/index.js

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

package/dist/components/Flyout/Flyout.js

@@ -1,5 +1,41 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "triggerRef", "isOpen", "alignment", "triggerOffset"];
+
+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 * as React from 'react';
-import { Box } from '../Box';
-import { Positioner } from '../Positioner';
-export const Flyout = ({ children, triggerRef, isOpen, alignment, triggerOffset, ...rest }) => (React.createElement(Positioner, { triggerRef: triggerRef, isOpen: isOpen, alignment: alignment, triggerOffset: triggerOffset, ...rest },
-    React.createElement(Box, { overflow: "hidden", backgroundColour: "white", boxShadow: "4", borderRadius: "1", borderWidth: "1", borderColour: "gray" }, children)));
+import { Box } from "../Box/index.js";
+import { Positioner } from "../Positioner/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Flyout = _ref => {
+  let {
+    children,
+    triggerRef,
+    isOpen,
+    alignment,
+    triggerOffset
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx(Positioner, _objectSpread(_objectSpread({
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    alignment: alignment,
+    triggerOffset: triggerOffset
+  }, rest), {}, {
+    children: _jsx(Box, {
+      overflow: "hidden",
+      backgroundColour: "white",
+      boxShadow: "4",
+      borderRadius: "1",
+      borderWidth: "1",
+      borderColour: "gray",
+      children: children
+    })
+  }));
+};

package/dist/components/Flyout/index.js

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

package/dist/components/Heading/Heading.js

@@ -1,22 +1,41 @@
+"use strict";
+
 import * as React from 'react';
-import { Box } from '../Box';
-import { useTextStyles } from '../Text';
+import { Box } from "../Box/index.js";
+import { useTextStyles } from "../Text/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const sizeScaleDefaults = {
-    h1: '8',
-    h2: '7',
-    h3: '6',
-    h4: '4',
-    h5: '3',
-    h6: '2',
+  h1: '8',
+  h2: '7',
+  h3: '6',
+  h4: '4',
+  h5: '3',
+  h6: '2'
 };
-export const Heading = ({ is = 'h1', align, fontWeight = 'bold', noWrap, transform, colour = 'dark', size = sizeScaleDefaults[is], id, className = '', children, }) => (React.createElement(Box, { id: id, is: is, className: [
-        useTextStyles({
-            size,
-            align,
-            colour,
-            noWrap,
-            transform,
-            fontWeight,
-        }),
-        className,
-    ] }, children));
+export const Heading = _ref => {
+  let {
+    is = 'h1',
+    align,
+    fontWeight = 'bold',
+    noWrap,
+    transform,
+    colour = 'dark',
+    size = sizeScaleDefaults[is],
+    id,
+    className = '',
+    children
+  } = _ref;
+  return _jsx(Box, {
+    id: id,
+    is: is,
+    className: [useTextStyles({
+      size,
+      align,
+      colour,
+      noWrap,
+      transform,
+      fontWeight
+    }), className],
+    children: children
+  });
+};

package/dist/components/Heading/index.js

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

package/dist/components/Icon/Icon.css.js

@@ -1,6 +1,14 @@
-import { vars } from '../../themes/base/vars.css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
-export const size = makeResponsiveStyle(vars.icon.size, (value) => ({
-    width: value,
-    height: value,
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Icon/Icon.css.ts", "@autoguru/overdrive");
+
+import { vars } from "../../themes/base/vars.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+export const size = makeResponsiveStyle(vars.icon.size, value => ({
+  width: value,
+  height: value
 }));
+
+__vanilla_filescope__.endFileScope();