@autoguru/overdrive 4.0.2 → 4.0.3

package/dist/components/Radio/Radio.css.js

@@ -1,25 +1,33 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Radio/Radio.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const circle = styleVariants({
-    default: {
-        transition: `border-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    },
-    outer: {
-        top: vars.space['3'],
-        left: vars.space['3'],
-        width: vars.space['4'],
-        height: vars.space['4'],
-    },
-    inner: {
-        top: `calc(${vars.space['3']} + (${vars.space['4']} - ${vars.space['2']}) * 0.5)`,
-        left: `calc(${vars.space['3']} + (${vars.space['4']} - ${vars.space['2']}) * 0.5)`,
-        width: vars.space['2'],
-        height: vars.space['2'],
-    },
-    selectedInner: {
-        borderWidth: `calc(${vars.space['2']} / 2)`,
-    },
-    selected: {
-        borderColor: vars.typography.colour.primary,
-    },
-});
+  default: {
+    transition: "border-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+  },
+  outer: {
+    top: vars.space['3'],
+    left: vars.space['3'],
+    width: vars.space['4'],
+    height: vars.space['4']
+  },
+  inner: {
+    top: "calc(".concat(vars.space['3'], " + (").concat(vars.space['4'], " - ").concat(vars.space['2'], ") * 0.5)"),
+    left: "calc(".concat(vars.space['3'], " + (").concat(vars.space['4'], " - ").concat(vars.space['2'], ") * 0.5)"),
+    width: vars.space['2'],
+    height: vars.space['2']
+  },
+  selectedInner: {
+    borderWidth: "calc(".concat(vars.space['2'], " / 2)")
+  },
+  selected: {
+    borderColor: vars.typography.colour.primary
+  }
+}, "circle");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Radio/Radio.js

@@ -1,22 +1,61 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box } from '../Box';
-import { CheckableBase } from '../private/CheckableBase';
-import { useCheckableStyles } from '../private/CheckableBase/useCheckableStyles';
-import * as styles from './Radio.css';
-import { useRadioContext } from './RadioGroup';
-export const Radio = forwardRef(({ value, className = '', children, disabled = false }, ref) => {
-    const { checkableItem } = useCheckableStyles();
-    const radioContext = useRadioContext();
-    const isChecked = value === radioContext.value;
-    const handleClick = () => radioContext.radioSelected?.(value);
-    return (React.createElement(CheckableBase, { ref: ref, inputType: "radio", className: className, inputName: radioContext.inputName, value: value, label: children, disabled: disabled, checked: isChecked, handleClick: handleClick },
-        React.createElement(Box, { borderRadius: "pill", position: "absolute", borderWidth: "2", borderColour: "gray", className: clsx(checkableItem, styles.circle.default, styles.circle.outer, {
-                [styles.circle.selected]: isChecked,
-            }) }),
-        React.createElement(Box, { borderRadius: "pill", position: "absolute", borderColour: "gray", borderWidth: "none", className: clsx(styles.circle.default, styles.circle.inner, {
-                [styles.circle.selected]: isChecked,
-                [styles.circle.selectedInner]: isChecked,
-            }) })));
-});
+import { Box } from "../Box/index.js";
+import { CheckableBase } from "../private/CheckableBase/index.js";
+import { useCheckableStyles } from "../private/CheckableBase/useCheckableStyles.js";
+import * as styles from "./Radio.css.js";
+import { useRadioContext } from "./RadioGroup.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Radio = forwardRef((_ref, ref) => {
+  let {
+    value,
+    className = '',
+    children,
+    disabled = false
+  } = _ref;
+  const {
+    checkableItem
+  } = useCheckableStyles();
+  const radioContext = useRadioContext();
+  const isChecked = value === radioContext.value;
+
+  const handleClick = () => {
+    var _radioContext$radioSe;
+
+    return (_radioContext$radioSe = radioContext.radioSelected) === null || _radioContext$radioSe === void 0 ? void 0 : _radioContext$radioSe.call(radioContext, value);
+  };
+
+  return _jsxs(CheckableBase, {
+    ref: ref,
+    inputType: "radio",
+    className: className,
+    inputName: radioContext.inputName,
+    value: value,
+    label: children,
+    disabled: disabled,
+    checked: isChecked,
+    handleClick: handleClick,
+    children: [_jsx(Box, {
+      borderRadius: "pill",
+      position: "absolute",
+      borderWidth: "2",
+      borderColour: "gray",
+      className: clsx(checkableItem, styles.circle.default, styles.circle.outer, {
+        [styles.circle.selected]: isChecked
+      })
+    }), _jsx(Box, {
+      borderRadius: "pill",
+      position: "absolute",
+      borderColour: "gray",
+      borderWidth: "none",
+      className: clsx(styles.circle.default, styles.circle.inner, {
+        [styles.circle.selected]: isChecked,
+        [styles.circle.selectedInner]: isChecked
+      })
+    })]
+  });
+});

package/dist/components/Radio/RadioGroup.js

@@ -1,10 +1,35 @@
+"use strict";
+
 import * as React from 'react';
-import { createContext, forwardRef, useContext, useMemo, } from 'react';
-import { Box } from '../Box';
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { Box } from "../Box/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const RadioContext = createContext(null);
 export const useRadioContext = () => useContext(RadioContext);
-export const RadioGroup = forwardRef(({ name, value, className = '', onChange, children }, ref) => {
-    const contextValue = useMemo(() => ({ value, inputName: name, radioSelected: onChange }), [value, name, onChange]);
-    return (React.createElement(RadioContext.Provider, { value: contextValue },
-        React.createElement(Box, { ref: ref, position: "relative", display: "flex", flexDirection: "column", width: "full", padding: "none", className: className }, children)));
-});
+export const RadioGroup = forwardRef((_ref, ref) => {
+  let {
+    name,
+    value,
+    className = '',
+    onChange,
+    children
+  } = _ref;
+  const contextValue = useMemo(() => ({
+    value,
+    inputName: name,
+    radioSelected: onChange
+  }), [value, name, onChange]);
+  return _jsx(RadioContext.Provider, {
+    value: contextValue,
+    children: _jsx(Box, {
+      ref: ref,
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      padding: "none",
+      className: className,
+      children: children
+    })
+  });
+});

package/dist/components/Radio/index.js

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

package/dist/components/Section/Section.css.js

@@ -1,7 +1,15 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Section/Section.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
-import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
+import { vars } from "../../themes/base/vars.css.js";
+import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
 export const root = style({
-    margin: '0 auto',
-});
-export const width = styleVariants(mapTokenToProperty(vars.contentWidth, 'maxWidth'));
+  margin: '0 auto'
+}, "root");
+export const width = styleVariants(mapTokenToProperty(vars.contentWidth, 'maxWidth'), "width");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Section/Section.js

@@ -1,5 +1,20 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box } from '../Box';
-import * as styles from './Section.css';
-export const Section = ({ children, width = 'medium', paddingX, }) => (React.createElement(Box, { className: clsx(styles.root, styles.width[width]), width: "full", paddingX: paddingX }, children));
+import { Box } from "../Box/index.js";
+import * as styles from "./Section.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Section = _ref => {
+  let {
+    children,
+    width = 'medium',
+    paddingX
+  } = _ref;
+  return _jsx(Box, {
+    className: clsx(styles.root, styles.width[width]),
+    width: "full",
+    paddingX: paddingX,
+    children: children
+  });
+};

package/dist/components/Section/index.js

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

package/dist/components/SelectInput/SelectInput.css.js

@@ -1,14 +1,22 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/SelectInput/SelectInput.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
-export const input = style({});
+import { vars } from "../../themes/base/vars.css.js";
+export const input = style({}, "input");
 export const paddedInput = style({
-    selectors: {
-        [`${input}&`]: {
-            paddingRight: vars.space['8'],
-        },
-    },
-});
+  selectors: {
+    ["".concat(input, "&")]: {
+      paddingRight: vars.space['8']
+    }
+  }
+}, "paddedInput");
 export const arrow = style({
-    top: '0',
-    right: '0',
-});
+  top: '0',
+  right: '0'
+}, "arrow");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/SelectInput/SelectInput.js

@@ -1,13 +1,61 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["field", "eventHandlers", "suffixed", "prefixed", "validation", "isLoading", "fieldIcon"];
+
+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 { ChevronDownIcon } from '@autoguru/icons';
 import * as React from 'react';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { withEnhancedInput } from '../private/InputBase';
-import * as styles from './SelectInput.css';
-export const SelectInput = withEnhancedInput(({ field, eventHandlers, suffixed, prefixed, validation, isLoading, fieldIcon = ChevronDownIcon, ...rest }) => (React.createElement(Box, { display: "flex", flexWrap: "nowrap", alignItems: "center", justifyContent: "center", position: "relative" },
-    React.createElement(Box, { is: "select", flexGrow: 1, ...eventHandlers, ...field, ...rest, className: [styles.input, styles.paddedInput, field.className], autoComplete: "off" }),
-    isLoading ? null : (React.createElement(Box, { className: styles.arrow, display: "flex", alignItems: "center", height: "full", marginRight: "4", flexShrink: 0, pointerEvents: "none", position: "absolute" },
-        React.createElement(Icon, { size: "medium", icon: fieldIcon }))))), {
-    primitiveType: 'select',
-    withSuffixIcon: false,
-});
+import { Box } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { withEnhancedInput } from "../private/InputBase/index.js";
+import * as styles from "./SelectInput.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SelectInput = withEnhancedInput(_ref => {
+  let {
+    field,
+    eventHandlers,
+    suffixed,
+    prefixed,
+    validation,
+    isLoading,
+    fieldIcon = ChevronDownIcon
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsxs(Box, {
+    display: "flex",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      is: "select",
+      flexGrow: 1
+    }, eventHandlers), field), rest), {}, {
+      className: [styles.input, styles.paddedInput, field.className],
+      autoComplete: "off"
+    })), isLoading ? null : _jsx(Box, {
+      className: styles.arrow,
+      display: "flex",
+      alignItems: "center",
+      height: "full",
+      marginRight: "4",
+      flexShrink: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      children: _jsx(Icon, {
+        size: "medium",
+        icon: fieldIcon
+      })
+    })]
+  });
+}, {
+  primitiveType: 'select',
+  withSuffixIcon: false
+});

package/dist/components/SelectInput/index.js

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

package/dist/components/SimplePagination/SimplePagination.js

@@ -1,21 +1,59 @@
+"use strict";
+
 import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
 import * as React from 'react';
-import { noop } from '../../utils';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { Inline } from '../Inline';
-export var EChangeDirection;
+import { noop } from "../../utils/index.js";
+import { Button } from "../Button/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export let EChangeDirection;
+
 (function (EChangeDirection) {
-    EChangeDirection["Previous"] = "previous";
-    EChangeDirection["Next"] = "next";
+  EChangeDirection["Previous"] = "previous";
+  EChangeDirection["Next"] = "next";
 })(EChangeDirection || (EChangeDirection = {}));
-export const SimplePagination = ({ hasNext = false, hasPrevious = false, onChange = noop, }) => {
-    const handleClick = (direction) => () => {
-        onChange(direction);
-    };
-    return (React.createElement(Inline, { is: "nav", space: "6", "aria-label": "pagination", alignX: "center", alignY: "center" },
-        React.createElement(Button, { rounded: true, disabled: !hasPrevious, size: "small", variant: "secondary", "aria-label": "previous page", onClick: handleClick(EChangeDirection.Previous) },
-            React.createElement(Icon, { size: "medium", icon: ChevronLeftIcon })),
-        React.createElement(Button, { rounded: true, disabled: !hasNext, size: "small", variant: "secondary", "aria-label": "next page", onClick: handleClick(EChangeDirection.Next) },
-            React.createElement(Icon, { size: "medium", icon: ChevronRightIcon }))));
-};
+
+export const SimplePagination = _ref => {
+  let {
+    hasNext = false,
+    hasPrevious = false,
+    onChange = noop
+  } = _ref;
+
+  const handleClick = direction => () => {
+    onChange(direction);
+  };
+
+  return _jsxs(Inline, {
+    is: "nav",
+    space: "6",
+    "aria-label": "pagination",
+    alignX: "center",
+    alignY: "center",
+    children: [_jsx(Button, {
+      rounded: true,
+      disabled: !hasPrevious,
+      size: "small",
+      variant: "secondary",
+      "aria-label": "previous page",
+      onClick: handleClick(EChangeDirection.Previous),
+      children: _jsx(Icon, {
+        size: "medium",
+        icon: ChevronLeftIcon
+      })
+    }), _jsx(Button, {
+      rounded: true,
+      disabled: !hasNext,
+      size: "small",
+      variant: "secondary",
+      "aria-label": "next page",
+      onClick: handleClick(EChangeDirection.Next),
+      children: _jsx(Icon, {
+        size: "medium",
+        icon: ChevronRightIcon
+      })
+    })]
+  });
+};

package/dist/components/SimplePagination/index.js

@@ -1 +1,3 @@
-export { SimplePagination, EChangeDirection as EPageChangeDirection, } from './SimplePagination';
+"use strict";
+
+export { SimplePagination, EChangeDirection as EPageChangeDirection } from "./SimplePagination.js";

package/dist/components/Stack/Divider.css.js

@@ -1,6 +1,14 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Stack/Divider.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const line = style({
-    height: '1px',
-    boxShadow: `inset 0 0 0 1px ${vars.colours.background.light}`,
-});
+  height: '1px',
+  boxShadow: "inset 0 0 0 1px ".concat(vars.colours.background.light)
+}, "line");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Stack/Divider.js

@@ -1,5 +1,14 @@
+"use strict";
+
 import * as React from 'react';
-import { Box } from '../Box';
-import * as styles from './Divider.css';
-export const Divider = () => (React.createElement(Box, { position: "relative" },
-    React.createElement(Box, { position: "absolute", className: styles.line, width: "full" })));
+import { Box } from "../Box/index.js";
+import * as styles from "./Divider.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Divider = () => _jsx(Box, {
+  position: "relative",
+  children: _jsx(Box, {
+    position: "absolute",
+    className: styles.line,
+    width: "full"
+  })
+});

package/dist/components/Stack/Stack.css.js

@@ -1,13 +1,21 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Stack/Stack.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
-import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
+import { vars } from "../../themes/base/vars.css.js";
+import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
 export const child = {
-    spaces: styleVariants(mapTokenToProperty(vars.space, (value) => ({
-        paddingBottom: value,
-    }))),
-    default: style({
-        ':last-child': {
-            paddingBottom: 0,
-        },
-    }),
+  spaces: styleVariants(mapTokenToProperty(vars.space, value => ({
+    paddingBottom: value
+  })), "child_spaces"),
+  default: style({
+    ':last-child': {
+      paddingBottom: 0
+    }
+  }, "child_default")
 };
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Stack/Stack.js

@@ -1,26 +1,46 @@
+"use strict";
+
 import * as React from 'react';
 import { Children } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { Box } from '../Box';
-import { Divider } from './Divider';
-import * as styles from './Stack.css';
-const supportedListTypes = [
-    'ul',
-    'ol',
-];
-export const Stack = ({ space = '2', children, is = 'div', width, dividers = false, className = '', }) => {
-    const items = flattenChildren(children);
-    if (items.length < 2) {
-        return React.createElement(React.Fragment, null, items);
-    }
-    let listItem = 'div';
-    if (typeof is === 'string')
-        listItem = supportedListTypes.includes(is) ? 'li' : 'div';
-    return (React.createElement(Box, { is: is, className: className, width: width }, Children.map(items, (child, idx) => (React.createElement(Box, { is: listItem, className: [
-            styles.child.default,
-            dividers ? undefined : styles.child.spaces[space],
-        ] },
-        dividers && idx > 0 ? (React.createElement(Box, { paddingY: space, width: "full" },
-            React.createElement(Divider, null))) : null,
-        child)))));
-};
+import { Box } from "../Box/index.js";
+import { Divider } from "./Divider.js";
+import * as styles from "./Stack.css.js";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const supportedListTypes = ['ul', 'ol'];
+export const Stack = _ref => {
+  let {
+    space = '2',
+    children,
+    is = 'div',
+    width,
+    dividers = false,
+    className = ''
+  } = _ref;
+  const items = flattenChildren(children);
+
+  if (items.length < 2) {
+    return _jsx(_Fragment, {
+      children: items
+    });
+  }
+
+  let listItem = 'div';
+  if (typeof is === 'string') listItem = supportedListTypes.includes(is) ? 'li' : 'div';
+  return _jsx(Box, {
+    is: is,
+    className: className,
+    width: width,
+    children: Children.map(items, (child, idx) => _jsxs(Box, {
+      is: listItem,
+      className: [styles.child.default, dividers ? undefined : styles.child.spaces[space]],
+      children: [dividers && idx > 0 ? _jsx(Box, {
+        paddingY: space,
+        width: "full",
+        children: _jsx(Divider, {})
+      }) : null, child]
+    }))
+  });
+};

package/dist/components/Stack/index.js

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