@autoguru/overdrive 4.3.3 → 4.3.4

package/dist/components/Positioner/Positioner.js

@@ -1,93 +1,116 @@
+"use strict";
+
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+const _excluded = ["alignment", "isOpen", "triggerRef", "triggerOffset", "children"];
+
+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 { flip, offset, popperGenerator, preventOverflow } from '@popperjs/core';
 import { defaultModifiers } from '@popperjs/core/lib/popper';
 import * as React from 'react';
-import { useCallback, useEffect, useRef, } from 'react';
-import { isBrowser, setRef } from '../../utils';
-import { Box } from '../Box';
-import { Portal } from '../Portal';
-import * as styles from './Positioner.css';
-import { EAlignment } from './alignment';
-export { EAlignment } from './alignment';
+import { useCallback, useEffect, useRef } from 'react';
+import { isBrowser, setRef } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Portal } from "../Portal/index.js";
+import * as styles from "./Positioner.css.js";
+import { EAlignment } from "./alignment.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export { EAlignment } from "./alignment.js";
 const createPopper = popperGenerator({
-    defaultModifiers: [
-        ...defaultModifiers,
-        offset,
-        {
-            ...preventOverflow,
-            options: {
-                tether: false,
-                altAxis: true,
-                padding: 8,
-            },
-        },
-        flip,
-    ],
-    defaultOptions: {
-        placement: 'bottom',
-    },
+  defaultModifiers: [].concat(_toConsumableArray(defaultModifiers), [offset, _objectSpread(_objectSpread({}, preventOverflow), {}, {
+    options: {
+      tether: false,
+      altAxis: true,
+      padding: 8
+    }
+  }), flip]),
+  defaultOptions: {
+    placement: 'bottom'
+  }
 });
-export const Positioner = ({ alignment = EAlignment.BOTTOM_LEFT, isOpen = false, triggerRef, triggerOffset = 12, children, ...boxProps }) => {
-    if (!isBrowser)
-        return null;
-    const placement = convertPlacement(alignment);
-    const referenceRef = useRef(null);
-    const popperInstanceRef = React.useRef(null);
-    useEffect(() => {
-        if (popperInstanceRef.current) {
-            popperInstanceRef.current.update();
+export const Positioner = _ref => {
+  let {
+    alignment = EAlignment.BOTTOM_LEFT,
+    isOpen = false,
+    triggerRef,
+    triggerOffset = 12,
+    children
+  } = _ref,
+      boxProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (!isBrowser) return null;
+  const placement = convertPlacement(alignment);
+  const referenceRef = useRef(null);
+  const popperInstanceRef = React.useRef(null);
+  useEffect(() => {
+    if (popperInstanceRef.current) {
+      popperInstanceRef.current.update();
+    }
+  });
+  const handleOpen = useCallback(() => {
+    if (!referenceRef.current || !triggerRef.current || !isOpen) return;
+    if (popperInstanceRef.current) popperInstanceRef.current.destroy();
+    const popper = createPopper(triggerRef.current, referenceRef.current, {
+      placement,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, triggerOffset]
         }
+      }]
     });
-    const handleOpen = useCallback(() => {
-        if (!referenceRef.current || !triggerRef.current || !isOpen)
-            return;
-        if (popperInstanceRef.current)
-            popperInstanceRef.current.destroy();
-        const popper = createPopper(triggerRef.current, referenceRef.current, {
-            placement,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, triggerOffset],
-                    },
-                },
-            ],
-        });
-        setRef(popperInstanceRef, popper);
-    }, [isOpen, placement, triggerOffset]);
-    const handleClose = () => {
-        if (!popperInstanceRef.current)
-            return;
-        popperInstanceRef.current.destroy();
-        setRef(popperInstanceRef, null);
-    };
-    useEffect(() => {
-        handleOpen();
-    }, [handleOpen]);
-    useEffect(() => () => void handleClose(), []);
-    useEffect(() => {
-        if (!isOpen) {
-            handleClose();
-        }
-    }, [isOpen]);
-    const handleRef = useCallback((node) => {
-        setRef(referenceRef, node);
-        handleOpen();
-    }, [handleOpen]);
-    return (React.createElement(Portal, null,
-        React.createElement(Box, { ...boxProps, ref: handleRef, position: "fixed", className: styles.root, "aria-hidden": !isOpen }, isOpen ? children : null)));
-};
-const convertPlacement = (alignment) => {
-    switch (alignment) {
-        case EAlignment.BOTTOM_LEFT:
-            return 'bottom-start';
-        case EAlignment.BOTTOM_RIGHT:
-            return 'bottom-end';
-        case EAlignment.TOP_LEFT:
-            return 'top-start';
-        case EAlignment.TOP_RIGHT:
-            return 'top-end';
-        default:
-            return alignment;
+    setRef(popperInstanceRef, popper);
+  }, [isOpen, placement, triggerOffset]);
+
+  const handleClose = () => {
+    if (!popperInstanceRef.current) return;
+    popperInstanceRef.current.destroy();
+    setRef(popperInstanceRef, null);
+  };
+
+  useEffect(() => {
+    handleOpen();
+  }, [handleOpen]);
+  useEffect(() => () => void handleClose(), []);
+  useEffect(() => {
+    if (!isOpen) {
+      handleClose();
     }
+  }, [isOpen]);
+  const handleRef = useCallback(node => {
+    setRef(referenceRef, node);
+    handleOpen();
+  }, [handleOpen]);
+  return _jsx(Portal, {
+    children: _jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+      ref: handleRef,
+      position: "fixed",
+      className: styles.root,
+      "aria-hidden": !isOpen,
+      children: isOpen ? children : null
+    }))
+  });
 };
+
+const convertPlacement = alignment => {
+  switch (alignment) {
+    case EAlignment.BOTTOM_LEFT:
+      return 'bottom-start';
+
+    case EAlignment.BOTTOM_RIGHT:
+      return 'bottom-end';
+
+    case EAlignment.TOP_LEFT:
+      return 'top-start';
+
+    case EAlignment.TOP_RIGHT:
+      return 'top-end';
+
+    default:
+      return alignment;
+  }
+};

package/dist/components/Positioner/alignment.js

@@ -1,11 +1,14 @@
-export var EAlignment;
+"use strict";
+
+export let EAlignment;
+
 (function (EAlignment) {
-    EAlignment["TOP"] = "top";
-    EAlignment["TOP_LEFT"] = "top_left";
-    EAlignment["TOP_RIGHT"] = "top_right";
-    EAlignment["BOTTOM"] = "bottom";
-    EAlignment["BOTTOM_LEFT"] = "bottom_left";
-    EAlignment["BOTTOM_RIGHT"] = "bottom_right";
-    EAlignment["LEFT"] = "left";
-    EAlignment["RIGHT"] = "right";
-})(EAlignment || (EAlignment = {}));
+  EAlignment["TOP"] = "top";
+  EAlignment["TOP_LEFT"] = "top_left";
+  EAlignment["TOP_RIGHT"] = "top_right";
+  EAlignment["BOTTOM"] = "bottom";
+  EAlignment["BOTTOM_LEFT"] = "bottom_left";
+  EAlignment["BOTTOM_RIGHT"] = "bottom_right";
+  EAlignment["LEFT"] = "left";
+  EAlignment["RIGHT"] = "right";
+})(EAlignment || (EAlignment = {}));

package/dist/components/Positioner/index.js

@@ -1,2 +1,4 @@
-export { EAlignment as EPositionerAlignment } from './alignment';
-export { Positioner } from './Positioner';
+"use strict";
+
+export { EAlignment as EPositionerAlignment } from "./alignment.js";
+export { Positioner } from "./Positioner.js";

package/dist/components/Positioner/stories.js

@@ -6,6 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 isChromatic from 'chromatic/isChromatic';
 import * as React from 'react';
 import { useRef } from 'react';
 import { Box } from "../Box/index.js";
@@ -20,7 +21,7 @@ export default {
   component: Positioner,
   parameters: {
     chromatic: {
-      disable: false
+      delay: 900
     }
   },
   argTypes: {
@@ -59,7 +60,7 @@ const Template = args => {
         padding: "2",
         children: _jsxs(Text, {
           is: "p",
-          children: ["Hello im from the consumer:", ' ', Math.ceil(Math.random() * 100)]
+          children: ["Hello im from the consumer:", ' ', isChromatic() ? '999' : Math.ceil(Math.random() * 100)]
         })
       })
     }))]

package/dist/components/ProgressBar/ProgressBar.css.js

@@ -1,9 +1,17 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/ProgressBar/ProgressBar.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 container = style({
-    height: vars.space['2'],
-});
+  height: vars.space['2']
+}, "container");
 export const bar = style({
-    transition: `width 0.2s ${vars.animation.easing.standard} 0s`,
-    willChange: 'width',
-});
+  transition: "width 0.2s ".concat(vars.animation.easing.standard, " 0s"),
+  willChange: 'width'
+}, "bar");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,16 +1,34 @@
+"use strict";
+
 import { clamp } from '@autoguru/utilities';
 import * as React from 'react';
-import { Box } from '../Box';
-import * as styles from './ProgressBar.css';
+import { Box } from "../Box/index.js";
+import * as styles from "./ProgressBar.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const colours = ['red', 'green', 'blue', 'yellow', 'neutral'];
 const backgroundColorMap = {
-    red: 'red500',
-    green: 'green500',
-    blue: 'blue500',
-    yellow: 'yellow600',
-    neutral: 'gray500',
+  red: 'red500',
+  green: 'green500',
+  blue: 'blue500',
+  yellow: 'yellow600',
+  neutral: 'gray500'
 };
-export const ProgressBar = ({ value = 0, colour = 'green', }) => (React.createElement(Box, { className: styles.container, borderRadius: "1", backgroundColour: "gray100" },
-    React.createElement(Box, { borderRadius: "1", backgroundColour: backgroundColorMap[colour], className: [styles.bar, styles.container], style: {
-            width: `${clamp(value, 0, 1) * 100}%`,
-        } })));
+export const ProgressBar = _ref => {
+  let {
+    value = 0,
+    colour = 'green'
+  } = _ref;
+  return _jsx(Box, {
+    className: styles.container,
+    borderRadius: "1",
+    backgroundColour: "gray100",
+    children: _jsx(Box, {
+      borderRadius: "1",
+      backgroundColour: backgroundColorMap[colour],
+      className: [styles.bar, styles.container],
+      style: {
+        width: "".concat(clamp(value, 0, 1) * 100, "%")
+      }
+    })
+  });
+};

package/dist/components/ProgressBar/index.js

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

package/dist/components/ProgressBarGroup/ProgressBarGroup.css.js

@@ -1,6 +1,14 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/ProgressBarGroup/ProgressBarGroup.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 root = style({
-    display: 'grid',
-    gridGap: `${vars.space['1']} ${vars.space['5']}`,
-});
+  display: 'grid',
+  gridGap: "".concat(vars.space['1'], " ").concat(vars.space['5'])
+}, "root");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/ProgressBarGroup/ProgressBarGroup.js

@@ -1,16 +1,44 @@
+"use strict";
+
 import * as React from 'react';
 import { Fragment } from 'react';
-import { Box } from '../Box';
-import { ProgressBar } from '../ProgressBar';
-import { Text } from '../Text';
-import * as styles from './ProgressBarGroup.css';
-export const ProgressBarGroup = ({ prefixLabels, suffixLabels, values, count = values.reduce((result, item) => result + item, 0), colour, }) => {
-    const hasPrefixLabels = Array.isArray(prefixLabels);
-    const hasSuffixLabels = Array.isArray(suffixLabels);
-    return (React.createElement(Box, { className: styles.root, alignItems: "center", style: {
-            gridTemplateColumns: `${hasPrefixLabels ? 'auto ' : ''}1fr${hasSuffixLabels ? ' auto' : ''}`,
-        } }, values.map((value, idx) => (React.createElement(Fragment, { key: idx },
-        React.createElement(Text, { size: "3", align: "right", colour: "light" }, hasPrefixLabels ? prefixLabels[idx] : ''),
-        React.createElement(ProgressBar, { colour: colour, value: value / count }),
-        React.createElement(Text, { size: "3", align: "left", colour: "light" }, hasSuffixLabels ? suffixLabels[idx] : ''))))));
-};
+import { Box } from "../Box/index.js";
+import { ProgressBar } from "../ProgressBar/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./ProgressBarGroup.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ProgressBarGroup = _ref => {
+  let {
+    prefixLabels,
+    suffixLabels,
+    values,
+    count = values.reduce((result, item) => result + item, 0),
+    colour
+  } = _ref;
+  const hasPrefixLabels = Array.isArray(prefixLabels);
+  const hasSuffixLabels = Array.isArray(suffixLabels);
+  return _jsx(Box, {
+    className: styles.root,
+    alignItems: "center",
+    style: {
+      gridTemplateColumns: "".concat(hasPrefixLabels ? 'auto ' : '', "1fr").concat(hasSuffixLabels ? ' auto' : '')
+    },
+    children: values.map((value, idx) => _jsxs(Fragment, {
+      children: [_jsx(Text, {
+        size: "3",
+        align: "right",
+        colour: "light",
+        children: hasPrefixLabels ? prefixLabels[idx] : ''
+      }), _jsx(ProgressBar, {
+        colour: colour,
+        value: value / count
+      }), _jsx(Text, {
+        size: "3",
+        align: "left",
+        colour: "light",
+        children: hasSuffixLabels ? suffixLabels[idx] : ''
+      })]
+    }, idx))
+  });
+};

package/dist/components/ProgressBarGroup/index.js

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

package/dist/components/ProgressSpinner/ProgressSpinner.css.js

@@ -1,83 +1,91 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/ProgressSpinner/ProgressSpinner.css.ts", "@autoguru/overdrive");
+
 import { keyframes, style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 const spinAnim = keyframes({
-    '100%': {
-        transform: 'rotate(360deg)',
-    },
-});
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+}, "spinAnim");
 export const circular = style({
-    animationName: spinAnim,
-    transformOrigin: 'center center',
-    animationDuration: '2s',
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-});
+  animationName: spinAnim,
+  transformOrigin: 'center center',
+  animationDuration: '2s',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite'
+}, "circular");
 const stokeAnim = keyframes({
-    '0%': {
-        strokeDasharray: '1, 200',
-        strokeDashoffset: 0,
-    },
-    '50%': {
-        strokeDasharray: '89, 200',
-        strokeDashoffset: '-35px',
-    },
-    '100%': {
-        strokeDasharray: '89, 200',
-        strokeDashoffset: '-124px',
-    },
-});
-export const path = style({
+  '0%': {
     strokeDasharray: '1, 200',
-    strokeDashoffset: 0,
-    strokeLinecap: 'round',
-    animationDuration: '1.5s',
-    animationTimingFunction: vars.animation.easing.standard,
-    animationIterationCount: 'infinite',
-    animationName: stokeAnim,
-});
+    strokeDashoffset: 0
+  },
+  '50%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-35px'
+  },
+  '100%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-124px'
+  }
+}, "stokeAnim");
+export const path = style({
+  strokeDasharray: '1, 200',
+  strokeDashoffset: 0,
+  strokeLinecap: 'round',
+  animationDuration: '1.5s',
+  animationTimingFunction: vars.animation.easing.standard,
+  animationIterationCount: 'infinite',
+  animationName: stokeAnim
+}, "path");
 export const colours = styleVariants({
-    light: {
-        stroke: vars.typography.colour.white,
-    },
-    primary: {
-        stroke: vars.typography.colour.primary,
-    },
-    secondary: {
-        stroke: vars.typography.colour.secondary,
+  light: {
+    stroke: vars.typography.colour.white
+  },
+  primary: {
+    stroke: vars.typography.colour.primary
+  },
+  secondary: {
+    stroke: vars.typography.colour.secondary
+  },
+  warning: {
+    stroke: vars.typography.colour.warning
+  },
+  danger: {
+    stroke: vars.typography.colour.danger
+  }
+}, "colours");
+export const size = {
+  small: styleVariants({
+    circular: {
+      width: vars.space['3'],
+      height: vars.space['3']
     },
-    warning: {
-        stroke: vars.typography.colour.warning,
+    path: {
+      strokeWidth: '4px'
+    }
+  }, "size_small"),
+  medium: styleVariants({
+    circular: {
+      width: vars.space['4'],
+      height: vars.space['4']
     },
-    danger: {
-        stroke: vars.typography.colour.danger,
+    path: {
+      strokeWidth: '5px'
+    }
+  }, "size_medium"),
+  large: styleVariants({
+    circular: {
+      width: vars.space['6'],
+      height: vars.space['6']
     },
-});
-export const size = {
-    small: styleVariants({
-        circular: {
-            width: vars.space['3'],
-            height: vars.space['3'],
-        },
-        path: {
-            strokeWidth: '4px',
-        },
-    }),
-    medium: styleVariants({
-        circular: {
-            width: vars.space['4'],
-            height: vars.space['4'],
-        },
-        path: {
-            strokeWidth: '5px',
-        },
-    }),
-    large: styleVariants({
-        circular: {
-            width: vars.space['6'],
-            height: vars.space['6'],
-        },
-        path: {
-            strokeWidth: '6px',
-        },
-    }),
+    path: {
+      strokeWidth: '6px'
+    }
+  }, "size_large")
 };
+
+__vanilla_filescope__.endFileScope();

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -1,15 +1,33 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box, useBoxStyles } from '../Box';
-import * as styles from './ProgressSpinner.css';
-export const ProgressSpinner = ({ className = '', colour = 'primary', size = 'medium', }) => (React.createElement(Box, { className: [
-        styles.size[size].circular,
-        styles.colours[colour],
-        className,
-    ] },
-    React.createElement("svg", { className: clsx(useBoxStyles({
-            is: 'svg',
-            display: 'block',
-            overflow: 'hidden',
-        }), styles.circular), viewBox: "25 25 50 50" },
-        React.createElement("circle", { className: clsx(styles.path, styles.size[size].path), cx: "50", cy: "50", r: "20", fill: "none", strokeMiterlimit: "10" }))));
+import { Box, useBoxStyles } from "../Box/index.js";
+import * as styles from "./ProgressSpinner.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ProgressSpinner = _ref => {
+  let {
+    className = '',
+    colour = 'primary',
+    size = 'medium'
+  } = _ref;
+  return _jsx(Box, {
+    className: [styles.size[size].circular, styles.colours[colour], className],
+    children: _jsx("svg", {
+      className: clsx(useBoxStyles({
+        is: 'svg',
+        display: 'block',
+        overflow: 'hidden'
+      }), styles.circular),
+      viewBox: "25 25 50 50",
+      children: _jsx("circle", {
+        className: clsx(styles.path, styles.size[size].path),
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none",
+        strokeMiterlimit: "10"
+      })
+    })
+  });
+};

package/dist/components/ProgressSpinner/index.js

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