@autoguru/overdrive 4.10.2 → 4.11.0

package/dist/components/Actions/Actions.js

@@ -1,6 +1,23 @@
+"use strict";
+
 import * as React from 'react';
-import { Children, } from 'react';
+import { Children } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { Column, Columns } from '../Columns';
-export const Actions = ({ children, noWrap, wrappingDirection, }) => (React.createElement(Columns, { space: "3", noWrap: noWrap, wrappingDirection: wrappingDirection }, Children.map(flattenChildren(children), (child) => (React.createElement(Column, null, child)))));
-export default Actions;
+import { Column, Columns } from "../Columns/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Actions = _ref => {
+  let {
+    children,
+    noWrap,
+    wrappingDirection
+  } = _ref;
+  return _jsx(Columns, {
+    space: "3",
+    noWrap: noWrap,
+    wrappingDirection: wrappingDirection,
+    children: Children.map(flattenChildren(children), child => _jsx(Column, {
+      children: child
+    }))
+  });
+};
+export default Actions;

package/dist/components/Actions/index.js

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

package/dist/components/Alert/Alert.css.js

@@ -1,23 +1,31 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Alert/Alert.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
-import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
 export const root = style({
-    ':before': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: vars.space['1'],
-        height: '100%',
-        content: '""',
-    },
-});
-export const intent = styleVariants(mapTokenToProperty(vars.colours.intent, (value) => ({
-    color: value.background.standard,
-    ':before': {
-        backgroundColor: value.background.standard,
-    },
-}), ['neutral', 'shine', 'primary', 'secondary']));
+  ':before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: vars.space['1'],
+    height: '100%',
+    content: '""'
+  }
+}, "root");
+export const intent = styleVariants(mapTokenToProperty(vars.colours.intent, value => ({
+  color: value.background.standard,
+  ':before': {
+    backgroundColor: value.background.standard
+  }
+}), ['neutral', 'shine', 'primary', 'secondary']), "intent");
 export const contained = style({
-    minWidth: '280px',
-    maxWidth: '640px',
-});
+  minWidth: '280px',
+  maxWidth: '640px'
+}, "contained");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Alert/Alert.js

@@ -1,31 +1,89 @@
-import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon, } from '@autoguru/icons';
+"use strict";
+
+import { AlertCircleIcon, AlertIcon, CheckCircleIcon, InformationIcon, WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box, useBoxStyles } from '../Box';
-import { Button } from '../Button';
-import { Column, Columns } from '../Columns';
-import { Icon } from '../Icon';
-import { Text, useTextStyles } from '../Text';
-import * as styles from './Alert.css';
+import { Box, useBoxStyles } from "../Box/index.js";
+import { Button } from "../Button/index.js";
+import { Column, Columns } from "../Columns/index.js";
+import { Icon } from "../Icon/index.js";
+import { Text, useTextStyles } from "../Text/index.js";
+import * as styles from "./Alert.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapForIntent = {
-    danger: AlertCircleIcon,
-    information: InformationIcon,
-    success: CheckCircleIcon,
-    warning: AlertIcon,
+  danger: AlertCircleIcon,
+  information: InformationIcon,
+  success: CheckCircleIcon,
+  warning: AlertIcon
 };
-export const Alert = ({ children, className = '', intent = 'success', inline = false, onRequestClose, dismissible = typeof onRequestClose === 'function', }) => {
-    const dismissBtnStyles = useTextStyles({ colour: 'muted' });
-    return (React.createElement(Box, { className: clsx(className, styles.root, styles.intent[intent], {
-            [styles.contained]: !inline,
-        }), role: "alert", overflow: "hidden", position: "relative", backgroundColour: "white", borderWidth: "1", borderColour: "gray", borderRadius: "1", boxShadow: inline ? 'none' : '4', padding: "2" },
-        React.createElement(Columns, { noWrap: true, spaceX: "2" },
-            React.createElement(Column, { noShrink: true, alignSelf: "top" },
-                React.createElement(Icon, { icon: iconMapForIntent[intent], size: "medium", className: useBoxStyles({
-                        marginY: '2',
-                        marginLeft: '2',
-                    }) })),
-            React.createElement(Column, { grow: true, width: "auto", alignSelf: "centre", className: useTextStyles({ colour: 'dark' }) }, typeof children === 'string' ? (React.createElement(Text, null, children)) : (children)),
-            React.createElement(Column, { noShrink: true, alignSelf: "top" }, dismissible && (React.createElement(Button, { minimal: true, rounded: true, variant: "secondary", size: "small", "aria-label": "close", onClick: onRequestClose },
-                React.createElement(Icon, { className: dismissBtnStyles, icon: WindowCloseIcon, size: "medium" })))))));
+export const Alert = _ref => {
+  let {
+    children,
+    className = '',
+    intent = 'success',
+    inline = false,
+    onRequestClose,
+    dismissible = typeof onRequestClose === 'function'
+  } = _ref;
+  const dismissBtnStyles = useTextStyles({
+    colour: 'muted'
+  });
+  return _jsx(Box, {
+    className: clsx(className, styles.root, styles.intent[intent], {
+      [styles.contained]: !inline
+    }),
+    role: "alert",
+    overflow: "hidden",
+    position: "relative",
+    backgroundColour: "white",
+    borderWidth: "1",
+    borderColour: "gray",
+    borderRadius: "1",
+    boxShadow: inline ? 'none' : '4',
+    padding: "2",
+    children: _jsxs(Columns, {
+      noWrap: true,
+      spaceX: "2",
+      children: [_jsx(Column, {
+        noShrink: true,
+        alignSelf: "top",
+        children: _jsx(Icon, {
+          icon: iconMapForIntent[intent],
+          size: "medium",
+          className: useBoxStyles({
+            marginY: '2',
+            marginLeft: '2'
+          })
+        })
+      }), _jsx(Column, {
+        grow: true,
+        width: "auto",
+        alignSelf: "centre",
+        className: useTextStyles({
+          colour: 'dark'
+        }),
+        children: typeof children === 'string' ? _jsx(Text, {
+          children: children
+        }) : children
+      }), _jsx(Column, {
+        noShrink: true,
+        alignSelf: "top",
+        children: dismissible && _jsx(Button, {
+          minimal: true,
+          rounded: true,
+          variant: "secondary",
+          size: "small",
+          "aria-label": "close",
+          onClick: onRequestClose,
+          children: _jsx(Icon, {
+            className: dismissBtnStyles,
+            icon: WindowCloseIcon,
+            size: "medium"
+          })
+        })
+      })]
+    })
+  });
 };
-export default Alert;
+export default Alert;

package/dist/components/Alert/index.js

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

package/dist/components/Anchor/Anchor.css.js

@@ -1,5 +1,13 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Anchor/Anchor.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    textDecoration: 'none',
-    cursor: 'pointer',
-});
+  textDecoration: 'none',
+  cursor: 'pointer'
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Anchor/Anchor.js

@@ -1,31 +1,56 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { cloneElement, createElement, isValidElement, } from 'react';
-import { useBoxStyles } from '../Box';
-import { Icon } from '../Icon';
-import { Inline } from '../Inline';
-import { Text, useTextStyles } from '../Text';
-import * as styles from './Anchor.css';
-export const Anchor = ({ rel, href, target, title, className = '', is: Component = 'a', disabled = false, children, icon, }) => {
-    const textStyles = useTextStyles({
-        colour: 'link',
-    });
-    const props = {
-        className: clsx(styles.root, textStyles, useBoxStyles({
-            is: typeof Component === 'string' ? Component : undefined,
-            display: 'inline',
-        }), className),
-        disabled,
-        rel,
-        href,
-        target,
-        title,
-    };
-    const childs = (React.createElement(Inline, { space: "2" },
-        icon && React.createElement(Icon, { icon: icon, size: "small", className: textStyles }),
-        React.createElement(Text, { fontWeight: "bold", size: "4", colour: "link" }, children)));
-    return isValidElement(Component)
-        ? cloneElement(Component, props, childs)
-        : createElement(Component, props, childs);
+import { cloneElement, createElement, isValidElement } from 'react';
+import { useBoxStyles } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { Text, useTextStyles } from "../Text/index.js";
+import * as styles from "./Anchor.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Anchor = _ref => {
+  let {
+    rel,
+    href,
+    target,
+    title,
+    className = '',
+    is: Component = 'a',
+    disabled = false,
+    children,
+    icon
+  } = _ref;
+  const textStyles = useTextStyles({
+    colour: 'link'
+  });
+  const props = {
+    className: clsx(styles.root, textStyles, useBoxStyles({
+      is: typeof Component === 'string' ? Component : undefined,
+      display: 'inline'
+    }), className),
+    disabled,
+    rel,
+    href,
+    target,
+    title
+  };
+
+  const childs = _jsxs(Inline, {
+    space: "2",
+    children: [icon && _jsx(Icon, {
+      icon: icon,
+      size: "small",
+      className: textStyles
+    }), _jsx(Text, {
+      fontWeight: "bold",
+      size: "4",
+      colour: "link",
+      children: children
+    })]
+  });
+
+  return isValidElement(Component) ? cloneElement(Component, props, childs) : createElement(Component, props, childs);
 };
-export default Anchor;
+export default Anchor;

package/dist/components/Anchor/index.js

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

package/dist/components/AutoSuggest/AutoSuggest.css.js

@@ -1,88 +1,96 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/AutoSuggest/AutoSuggest.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 export const fullScreenRoot = style({
+  position: 'fixed',
+  zIndex: 1001,
+  top: vars.space['5'],
+  right: vars.space['5'],
+  bottom: vars.space['5'],
+  left: vars.space['5'],
+  paddingBottom: vars.space['5'],
+  overflowY: 'auto',
+  maxHeight: '100vh',
+  height: 'stretch',
+  ':before': {
+    content: '""',
     position: 'fixed',
-    zIndex: 1001,
-    top: vars.space['5'],
-    right: vars.space['5'],
-    bottom: vars.space['5'],
-    left: vars.space['5'],
-    paddingBottom: vars.space['5'],
-    overflowY: 'auto',
-    maxHeight: '100vh',
-    height: 'stretch',
-    ':before': {
-        content: '""',
-        position: 'fixed',
-        zIndex: 0,
-        backgroundColor: vars.colours.intent.secondary.background.standard,
-        pointerEvents: 'none',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-    },
-});
+    zIndex: 0,
+    backgroundColor: vars.colours.intent.secondary.background.standard,
+    pointerEvents: 'none',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }
+}, "fullScreenRoot");
 export const suggestionList = {
-    defaults: style({
-        display: 'grid',
-        overflowY: 'auto',
-        maxHeight: '384px',
-        overscrollBehavior: 'contain',
-        '-webkit-overflow-scrolling': 'touch',
-        gridAutoFlow: 'row',
-        gridGap: 0,
-        zIndex: 2,
-    }),
-    blockOptions: style({
-        overflowY: 'auto',
-        maxHeight: '384px',
-    }),
-    inlineOptions: style({
-        overflowY: 'auto',
-        maxHeight: '100%',
-    }),
-    inlineOptionsNoScroll: style({
-        overflowY: 'visible',
-        maxHeight: 'none',
-    }),
+  defaults: style({
+    display: 'grid',
+    overflowY: 'auto',
+    maxHeight: '384px',
+    overscrollBehavior: 'contain',
+    '-webkit-overflow-scrolling': 'touch',
+    gridAutoFlow: 'row',
+    gridGap: 0,
+    zIndex: 2
+  }, "suggestionList_defaults"),
+  blockOptions: style({
+    overflowY: 'auto',
+    maxHeight: '384px'
+  }, "suggestionList_blockOptions"),
+  inlineOptions: style({
+    overflowY: 'auto',
+    maxHeight: '100%'
+  }, "suggestionList_inlineOptions"),
+  inlineOptionsNoScroll: style({
+    overflowY: 'visible',
+    maxHeight: 'none'
+  }, "suggestionList_inlineOptionsNoScroll")
 };
 export const input = style({
-    position: 'sticky',
-    top: 0,
-    zIndex: 2,
-    backgroundColor: 'white',
-});
+  position: 'sticky',
+  top: 0,
+  zIndex: 2,
+  backgroundColor: 'white'
+}, "input");
 export const fullScreenInput = style({
-    width: 'calc(100% - 40px)',
-});
+  width: 'calc(100% - 40px)'
+}, "fullScreenInput");
 export const fullScreenCloseBtn = style({
-    position: 'fixed',
-    top: vars.space['5'],
-    right: vars.space['2'],
-    zIndex: 3,
-});
+  position: 'fixed',
+  top: vars.space['5'],
+  right: vars.space['2'],
+  zIndex: 3
+}, "fullScreenCloseBtn");
 export const spacer = style({
-    height: vars.space['1'],
-});
+  height: vars.space['1']
+}, "spacer");
 export const suggestion = style({
-    display: 'block',
-    padding: `${vars.space['3']} calc(${vars.space['3']} + 1px)`,
-    width: '100%',
-    cursor: 'pointer',
-    textAlign: 'left',
-    outline: 'none',
-    backgroundColor: 'transparent',
-});
+  display: 'block',
+  padding: "".concat(vars.space['3'], " calc(").concat(vars.space['3'], " + 1px)"),
+  width: '100%',
+  cursor: 'pointer',
+  textAlign: 'left',
+  outline: 'none',
+  backgroundColor: 'transparent'
+}, "suggestion");
 export const suggestionListItem = styleVariants({
-    default: {
-        zIndex: 1,
-    },
-    skipped: {
-        cursor: 'not-allowed',
-    },
-});
+  default: {
+    zIndex: 1
+  },
+  skipped: {
+    cursor: 'not-allowed'
+  }
+}, "suggestionListItem");
 export const suggestionHighlight = style({
-    color: vars.typography.colour.information,
-    backgroundColor: vars.colours.background.light,
-});
+  color: vars.typography.colour.information,
+  backgroundColor: vars.colours.background.light
+}, "suggestionHighlight");
+
+__vanilla_filescope__.endFileScope();