@autoguru/overdrive 4.10.2 → 4.11.1

package/dist/components/Table/TableHeadCell.css.js

@@ -1,55 +1,66 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Table/TableHeadCell.css.ts", "@autoguru/overdrive");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
-export const sorterButton = style({ userSelect: 'text' });
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const sorterButton = style({
+  userSelect: 'text'
+}, "sorterButton");
 export const text = style({
+  color: vars.typography.colour.muted,
+  selectors: {
+    ["".concat(sorterButton, ":hover &")]: {
+      color: vars.typography.colour.dark
+    }
+  }
+}, "text");
+const sorterRoot = style({
+  transformOrigin: 'center',
+  transitionProperty: 'transform',
+  transitionDuration: '0.3s',
+  willChange: 'transform'
+}, "sorterRoot");
+export const sorter = _objectSpread({
+  root: [sorterRoot, style({
     color: vars.typography.colour.muted,
+    transitionTimingFunction: vars.animation.easing.standard,
     selectors: {
-        [`${sorterButton}:hover &`]: {
-            color: vars.typography.colour.dark,
-        },
-    },
-});
-const sorterRoot = style({
-    transformOrigin: 'center',
-    transitionProperty: 'transform',
-    transitionDuration: '0.3s',
-    willChange: 'transform',
-});
-export const sorter = {
-    root: [
-        sorterRoot,
-        style({
-            color: vars.typography.colour.muted,
-            transitionTimingFunction: vars.animation.easing.standard,
-            selectors: {
-                [`${sorterButton}:hover &`]: {
-                    color: vars.typography.colour.dark,
-                },
-            },
-        }),
-    ],
-    ...styleVariants({
-        none: {
-            opacity: '0',
-            transform: 'translateY(10%) rotateX(0)',
-            transitionProperty: 'transform, opacity',
-            selectors: {
-                [`${sorterButton}:hover &`]: {
-                    opacity: '0.50',
-                    transform: 'translateY(0px) rotateX(0)',
-                },
-            },
-        },
-        asc: {
-            transform: 'translateY(0px) rotateY(0)',
-        },
-        desc: {
-            transform: 'translateY(0px) rotateX(180deg)',
-        },
-    }),
-};
+      ["".concat(sorterButton, ":hover &")]: {
+        color: vars.typography.colour.dark
+      }
+    }
+  }, "sorter_root")]
+}, styleVariants({
+  none: {
+    opacity: '0',
+    transform: 'translateY(10%) rotateX(0)',
+    transitionProperty: 'transform, opacity',
+    selectors: {
+      ["".concat(sorterButton, ":hover &")]: {
+        opacity: '0.50',
+        transform: 'translateY(0px) rotateX(0)'
+      }
+    }
+  },
+  asc: {
+    transform: 'translateY(0px) rotateY(0)'
+  },
+  desc: {
+    transform: 'translateY(0px) rotateX(180deg)'
+  }
+}, "sorter"));
 export const sticky = style({
-    position: 'sticky',
-    top: 0,
-    zIndex: 1,
-});
+  position: 'sticky',
+  top: 0,
+  zIndex: 1
+}, "sticky");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Table/TableHeadCell.js

@@ -1,46 +1,92 @@
+"use strict";
+
 import { ArrowUpIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef, useCallback } from 'react';
-import { alignmentToFlexAlignment } from '../../utils';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Inline } from '../Inline';
-import { Text } from '../Text';
-import { VisuallyHidden } from '../VisuallyHidden';
-import * as styles from './TableHeadCell.css';
-import { useTableContext } from './context';
-const sortToAria = (sort) => {
-    if (sort === 'asc')
-        return 'ascending';
-    if (sort === 'desc')
-        return 'descending';
-    return 'none';
+import { alignmentToFlexAlignment } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { Text } from "../Text/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import * as styles from "./TableHeadCell.css.js";
+import { useTableContext } from "./context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const sortToAria = sort => {
+  if (sort === 'asc') return 'ascending';
+  if (sort === 'desc') return 'descending';
+  return 'none';
 };
-export const TableHeadCell = forwardRef(({ align = 'left', onSort, sort, padding: incomingPadding, 'aria-label': ariaLabel, children, }, ref) => {
-    const tableContext = useTableContext();
-    const padding = incomingPadding ?? tableContext?.padding ?? 'none';
-    const sortClickHandler = useCallback((event) => {
-        if (typeof onSort === 'function') {
-            onSort(event);
-        }
-    }, [onSort]);
-    const shouldSort = typeof sort === 'string';
-    const sorter = (React.createElement(Icon, { icon: ArrowUpIcon, size: "small", className: clsx([
-            styles.sorter.root,
-            styles.sorter[sort ?? 'none'],
-        ]) }));
-    const child = (React.createElement(Inline, { alignY: "center", alignX: alignmentToFlexAlignment(align), space: "1" },
-        align === 'right' && shouldSort ? sorter : null,
-        React.createElement(Text, { strong: true, size: "2", is: "span", className: styles.text },
-            children,
-            shouldSort ? (React.createElement(VisuallyHidden, { is: "span" },
-                ' ',
-                "sorted ",
-                sortToAria(sort))) : null),
-        (align === 'left' || align === 'center') && shouldSort
-            ? sorter
-            : null));
-    return (React.createElement(Box, { ref: ref, role: "columnheader", scope: "col", display: "flex", alignItems: "center", justifyContent: alignmentToFlexAlignment(align), padding: sort ? undefined : padding, backgroundColour: "gray100", borderColourBottom: "light", borderWidthBottom: "1", "aria-sort": shouldSort ? sortToAria(sort) : undefined, "aria-label": ariaLabel, className: tableContext.stickyHead && styles.sticky, onClick: sort ? sortClickHandler : undefined }, sort ? (React.createElement(Box, { is: "button", display: "block", width: "full", padding: padding, tabIndex: -1, className: styles.sorterButton }, child)) : (child)));
+
+export const TableHeadCell = forwardRef((_ref, ref) => {
+  var _ref2;
+
+  let {
+    align = 'left',
+    onSort,
+    sort,
+    padding: incomingPadding,
+    'aria-label': ariaLabel,
+    children
+  } = _ref;
+  const tableContext = useTableContext();
+  const padding = (_ref2 = incomingPadding !== null && incomingPadding !== void 0 ? incomingPadding : tableContext === null || tableContext === void 0 ? void 0 : tableContext.padding) !== null && _ref2 !== void 0 ? _ref2 : 'none';
+  const sortClickHandler = useCallback(event => {
+    if (typeof onSort === 'function') {
+      onSort(event);
+    }
+  }, [onSort]);
+  const shouldSort = typeof sort === 'string';
+
+  const sorter = _jsx(Icon, {
+    icon: ArrowUpIcon,
+    size: "small",
+    className: clsx([styles.sorter.root, styles.sorter[sort !== null && sort !== void 0 ? sort : 'none']])
+  });
+
+  const child = _jsxs(Inline, {
+    alignY: "center",
+    alignX: alignmentToFlexAlignment(align),
+    space: "1",
+    children: [align === 'right' && shouldSort ? sorter : null, _jsxs(Text, {
+      strong: true,
+      size: "2",
+      is: "span",
+      className: styles.text,
+      children: [children, shouldSort ? _jsxs(VisuallyHidden, {
+        is: "span",
+        children: [' ', "sorted ", sortToAria(sort)]
+      }) : null]
+    }), (align === 'left' || align === 'center') && shouldSort ? sorter : null]
+  });
+
+  return _jsx(Box, {
+    ref: ref,
+    role: "columnheader",
+    scope: "col",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: alignmentToFlexAlignment(align),
+    padding: sort ? undefined : padding,
+    backgroundColour: "gray100",
+    borderColourBottom: "light",
+    borderWidthBottom: "1",
+    "aria-sort": shouldSort ? sortToAria(sort) : undefined,
+    "aria-label": ariaLabel,
+    className: tableContext.stickyHead && styles.sticky,
+    onClick: sort ? sortClickHandler : undefined,
+    children: sort ? _jsx(Box, {
+      is: "button",
+      display: "block",
+      width: "full",
+      padding: padding,
+      tabIndex: -1,
+      className: styles.sorterButton,
+      children: child
+    }) : child
+  });
 });
-export default TableHeadCell;
+export default TableHeadCell;

package/dist/components/Table/TableRow.js

@@ -1,5 +1,20 @@
+"use strict";
+
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box } from '../Box';
-export const TableRow = forwardRef(({ children, onClick }, ref) => (React.createElement(Box, { ref: ref, display: "contents", role: "row", onClick: onClick }, children)));
-export default TableRow;
+import { Box } from "../Box/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableRow = forwardRef((_ref, ref) => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  return _jsx(Box, {
+    ref: ref,
+    display: "contents",
+    role: "row",
+    onClick: onClick,
+    children: children
+  });
+});
+export default TableRow;

package/dist/components/Table/TableRowGroup.js

@@ -1,5 +1,18 @@
+"use strict";
+
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box } from '../Box';
-export const TableRowGroup = forwardRef(({ children }, ref) => (React.createElement(Box, { ref: ref, role: "rowgroup", display: "contents" }, children)));
-export default TableRowGroup;
+import { Box } from "../Box/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TableRowGroup = forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return _jsx(Box, {
+    ref: ref,
+    role: "rowgroup",
+    display: "contents",
+    children: children
+  });
+});
+export default TableRowGroup;

package/dist/components/Table/context.js

@@ -1,16 +1,27 @@
+"use strict";
+
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const tableContext = createContext(null);
-export const TableContextProvider = ({ padding, stickyHead, children, }) => {
-    const value = useMemo(() => ({
-        padding,
-        stickyHead,
-    }), [padding, stickyHead]);
-    return (React.createElement(tableContext.Provider, { value: value }, children));
+export const TableContextProvider = _ref => {
+  let {
+    padding,
+    stickyHead,
+    children
+  } = _ref;
+  const value = useMemo(() => ({
+    padding,
+    stickyHead
+  }), [padding, stickyHead]);
+  return _jsx(tableContext.Provider, {
+    value: value,
+    children: children
+  });
 };
 export const useTableContext = () => {
-    const ctx = useContext(tableContext);
-    invariant(ctx !== null, "Make sure you've got a <Table /> component in your tree");
-    return ctx;
-};
+  const ctx = useContext(tableContext);
+  !(ctx !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, "Make sure you've got a <Table /> component in your tree") : invariant(false) : void 0;
+  return ctx;
+};

package/dist/components/Table/index.js

@@ -1,5 +1,7 @@
-export { Table } from './Table';
-export { TableCell } from './TableCell';
-export { TableHeadCell } from './TableHeadCell';
-export { TableRow } from './TableRow';
-export { TableRowGroup } from './TableRowGroup';
+"use strict";
+
+export { Table } from "./Table.js";
+export { TableCell } from "./TableCell.js";
+export { TableHeadCell } from "./TableHeadCell.js";
+export { TableRow } from "./TableRow.js";
+export { TableRowGroup } from "./TableRowGroup.js";

package/dist/components/Tabs/Tab.css.js

@@ -1,42 +1,50 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Tabs/Tab.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";
 const lineBottomHeight = '1px';
 const size = '20px';
 export const root = {
-    default: style({
-        padding: `calc(${vars.space['3']} + ${lineBottomHeight}) 0`,
-        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-        borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,
-        flex: 'auto',
-        ':last-of-type': {
-            marginRight: 0,
-        },
-        ':hover': {
-            color: vars.colours.intent.primary.background.strong,
-        },
-        ':focus': {
-            color: vars.colours.intent.primary.background.strong,
-        },
-    }),
-    active: style({
-        color: vars.colours.intent.primary.background.strong,
-        borderBottomColor: vars.colours.intent.primary.background.strong,
-    }),
+  default: style({
+    padding: "calc(".concat(vars.space['3'], " + ").concat(lineBottomHeight, ") 0"),
+    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, background-color 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
+    borderBottom: "calc(".concat(lineBottomHeight, " + ").concat(lineBottomHeight, ") solid transparent"),
+    flex: 'auto',
+    ':last-of-type': {
+      marginRight: 0
+    },
+    ':hover': {
+      color: vars.colours.intent.primary.background.strong
+    },
+    ':focus': {
+      color: vars.colours.intent.primary.background.strong
+    }
+  }, "root_default"),
+  active: style({
+    color: vars.colours.intent.primary.background.strong,
+    borderBottomColor: vars.colours.intent.primary.background.strong
+  }, "root_active")
 };
 export const item = style({
-    display: 'inline-flex',
-    width: 'max-content',
-    verticalAlign: 'middle',
-});
+  display: 'inline-flex',
+  width: 'max-content',
+  verticalAlign: 'middle'
+}, "item");
 export const indication = styleVariants({
-    default: {
-        backgroundColor: vars.colours.background.light,
-        minWidth: size,
-        height: size,
-        lineHeight: size,
-        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, backgroundColor 0.2s ${vars.animation.easing.decelerate} 0s`,
-    },
-    active: {
-        backgroundColor: vars.colours.intent.primary.background.strong,
-    },
-});
+  default: {
+    backgroundColor: vars.colours.background.light,
+    minWidth: size,
+    height: size,
+    lineHeight: size,
+    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, backgroundColor 0.2s ").concat(vars.animation.easing.decelerate, " 0s")
+  },
+  active: {
+    backgroundColor: vars.colours.intent.primary.background.strong
+  }
+}, "indication");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Tabs/Tab.js

@@ -1,53 +1,83 @@
+"use strict";
+
 import { invariant } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { cloneElement, createElement, forwardRef, isValidElement, useContext, } from 'react';
-import { useBoxStyles } from '../Box';
-import { Inline } from '../Inline';
-import { Text, useTextStyles } from '../Text';
-import * as styles from './Tab.css';
-import { TabListContext } from './TabList';
-import { TabsContext } from './Tabs';
-export const Tab = forwardRef(({ children, id: incomingId = null, indication = null, is: Component = 'button', }, ref) => {
-    const tabsContext = useContext(TabsContext);
-    const tabListContext = useContext(TabListContext);
-    invariant(tabsContext !== null && tabListContext !== null, 'This tab pane isnt nested beneath <Tabs /> or <TabPanes />>');
-    const isActive = tabsContext.activeIndex === tabListContext;
-    const indicationStyles = useBoxStyles({
-        display: 'inlineBlock',
-        paddingX: '1',
-        borderRadius: 'pill',
-    });
-    const controlsId = typeof incomingId === 'string'
-        ? incomingId
-        : `${tabsContext.id}-${tabListContext}-tab`;
-    const props = {
-        className: clsx(useBoxStyles({
-            is: typeof Component === 'string' ? Component : 'button',
-            display: 'inlineFlex',
-            justifyContent: 'center',
-            backgroundColour: 'transparent',
-            marginRight: '6',
-        }), useTextStyles({
-            noWrap: true,
-            size: '3',
-            fontWeight: 'bold',
-            colour: 'light',
-        }), styles.root.default, {
-            [styles.root.active]: isActive,
-        }),
-        role: 'tab',
-        'aria-selected': isActive ? 'true' : 'false',
-        'aria-controls': controlsId,
-        tabIndex: isActive ? undefined : -1,
-        onClick: () => tabsContext.onChange?.(tabListContext),
-        ref,
-    };
-    const child = (React.createElement(Inline, { noWrap: true, space: "2", alignY: "center", alignX: "center" },
-        React.createElement("span", { className: styles.item }, children),
-        typeof indication === 'number' && (React.createElement(Text, { strong: true, is: "span", size: "2", align: "center", display: "block", colour: isActive ? 'white' : 'dark', className: clsx(styles.indication.default, indicationStyles, { [styles.indication.active]: isActive }) }, indication))));
-    return isValidElement(Component)
-        ? cloneElement(Component, props, child)
-        : createElement(Component, props, child);
+import { cloneElement, createElement, forwardRef, isValidElement, useContext } from 'react';
+import { useBoxStyles } from "../Box/index.js";
+import { Inline } from "../Inline/index.js";
+import { Text, useTextStyles } from "../Text/index.js";
+import * as styles from "./Tab.css.js";
+import { TabListContext } from "./TabList.js";
+import { TabsContext } from "./Tabs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Tab = forwardRef((_ref, ref) => {
+  let {
+    children,
+    id: incomingId = null,
+    indication = null,
+    is: Component = 'button'
+  } = _ref;
+  const tabsContext = useContext(TabsContext);
+  const tabListContext = useContext(TabListContext);
+  !(tabsContext !== null && tabListContext !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'This tab pane isnt nested beneath <Tabs /> or <TabPanes />>') : invariant(false) : void 0;
+  const isActive = tabsContext.activeIndex === tabListContext;
+  const indicationStyles = useBoxStyles({
+    display: 'inlineBlock',
+    paddingX: '1',
+    borderRadius: 'pill'
+  });
+  const controlsId = typeof incomingId === 'string' ? incomingId : "".concat(tabsContext.id, "-").concat(tabListContext, "-tab");
+  const props = {
+    className: clsx(useBoxStyles({
+      is: typeof Component === 'string' ? Component : 'button',
+      display: 'inlineFlex',
+      justifyContent: 'center',
+      backgroundColour: 'transparent',
+      marginRight: '6'
+    }), useTextStyles({
+      noWrap: true,
+      size: '3',
+      fontWeight: 'bold',
+      colour: 'light'
+    }), styles.root.default, {
+      [styles.root.active]: isActive
+    }),
+    role: 'tab',
+    'aria-selected': isActive ? 'true' : 'false',
+    'aria-controls': controlsId,
+    tabIndex: isActive ? undefined : -1,
+    onClick: () => {
+      var _tabsContext$onChange;
+
+      return (_tabsContext$onChange = tabsContext.onChange) === null || _tabsContext$onChange === void 0 ? void 0 : _tabsContext$onChange.call(tabsContext, tabListContext);
+    },
+    ref
+  };
+
+  const child = _jsxs(Inline, {
+    noWrap: true,
+    space: "2",
+    alignY: "center",
+    alignX: "center",
+    children: [_jsx("span", {
+      className: styles.item,
+      children: children
+    }), typeof indication === 'number' && _jsx(Text, {
+      strong: true,
+      is: "span",
+      size: "2",
+      align: "center",
+      display: "block",
+      colour: isActive ? 'white' : 'dark',
+      className: clsx(styles.indication.default, indicationStyles, {
+        [styles.indication.active]: isActive
+      }),
+      children: indication
+    })]
+  });
+
+  return isValidElement(Component) ? cloneElement(Component, props, child) : createElement(Component, props, child);
 });
-export default Tab;
+export default Tab;

package/dist/components/Tabs/TabList.css.js

@@ -1,25 +1,33 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Tabs/TabList.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 root = styleVariants({
-    default: {
-        boxShadow: `inset 0 -1px 0 0 ${vars.border.colours.gray}`,
-    },
-    scroll: {
-        display: 'grid',
-        gridTemplateColumns: 'auto 1fr auto',
-        gridGap: vars.space['2'],
-    },
-});
+  default: {
+    boxShadow: "inset 0 -1px 0 0 ".concat(vars.border.colours.gray)
+  },
+  scroll: {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    gridGap: vars.space['2']
+  }
+}, "root");
 export const listWrapperScroll = style({
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    '-webkit-overflow-scrolling': 'auto',
-    overscrollBehavior: 'contain',
-    scrollBehavior: 'smooth',
-    scrollbarWidth: 'none',
-    selectors: {
-        '&::-webkit-scrollbar': {
-            display: 'none',
-        },
-    },
-});
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  '-webkit-overflow-scrolling': 'auto',
+  overscrollBehavior: 'contain',
+  scrollBehavior: 'smooth',
+  scrollbarWidth: 'none',
+  selectors: {
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  }
+}, "listWrapperScroll");
+
+__vanilla_filescope__.endFileScope();