@autoguru/overdrive 4.10.2 → 4.11.1

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,42 @@
+"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); 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 * 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)));
-export default Flyout;
+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
+    })
+  }));
+};
+export default Flyout;

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,24 +1,44 @@
+"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, breakWord, className = '', children, }) => (React.createElement(Box, { id: id, is: is, className: [
-        useTextStyles({
-            size,
-            align,
-            colour,
-            noWrap,
-            transform,
-            fontWeight,
-            breakWord,
-        }),
-        className,
-    ] }, children));
-export default Heading;
+export const Heading = _ref => {
+  let {
+    is = 'h1',
+    align,
+    fontWeight = 'bold',
+    noWrap,
+    transform,
+    colour = 'dark',
+    size = sizeScaleDefaults[is],
+    id,
+    breakWord,
+    className = '',
+    children
+  } = _ref;
+  return _jsx(Box, {
+    id: id,
+    is: is,
+    className: [useTextStyles({
+      size,
+      align,
+      colour,
+      noWrap,
+      transform,
+      fontWeight,
+      breakWord
+    }), className],
+    children: children
+  });
+};
+export default Heading;

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 { themeContractVars as vars } from '../../themes/theme.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 { themeContractVars as vars } from "../../themes/theme.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+export const size = makeResponsiveStyle(vars.icon.size, value => ({
+  width: value,
+  height: value
 }));
+
+__vanilla_filescope__.endFileScope();

package/dist/components/Icon/Icon.js

@@ -1,14 +1,31 @@
+"use strict";
+
 import * as React from 'react';
 import { cloneElement } from 'react';
-import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import { Box, useBoxStyles } from '../Box';
-import * as styles from './Icon.css';
-export const Icon = ({ className = '', icon, size = 'small', display = 'block', }) => (React.createElement(Box, { is: "i", display: display, className: [resolveResponsiveStyle(size, styles.size), className], role: "presentation" }, cloneElement(icon, {
-    className: useBoxStyles({
+import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import { Box, useBoxStyles } from "../Box/index.js";
+import * as styles from "./Icon.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Icon = _ref => {
+  let {
+    className = '',
+    icon,
+    size = 'small',
+    display = 'block'
+  } = _ref;
+  return _jsx(Box, {
+    is: "i",
+    display: display,
+    className: [resolveResponsiveStyle(size, styles.size), className],
+    role: "presentation",
+    children: cloneElement(icon, {
+      className: useBoxStyles({
         is: 'svg',
         display: 'block',
         width: 'full',
-        height: 'full',
-    }),
-})));
-export default Icon;
+        height: 'full'
+      })
+    })
+  });
+};
+export default Icon;

package/dist/components/Icon/index.js

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

package/dist/components/Image/Image.js

@@ -1,6 +1,24 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["unoptimised"];
+
+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 * as React from 'react';
-import { useImageServer } from './ImageServerProvider';
-import { ResponsiveImage } from './ResponsiveImage';
-import { SimpleImage } from './SimpleImage';
-export const Image = ({ unoptimised = false, ...props }) => useImageServer() && !unoptimised ? (React.createElement(ResponsiveImage, { ...props })) : (React.createElement(SimpleImage, { ...props }));
-export default Image;
+import { useImageServer } from "./ImageServerProvider.js";
+import { ResponsiveImage } from "./ResponsiveImage.js";
+import { SimpleImage } from "./SimpleImage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Image = _ref => {
+  let {
+    unoptimised = false
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return useImageServer() && !unoptimised ? _jsx(ResponsiveImage, _objectSpread({}, props)) : _jsx(SimpleImage, _objectSpread({}, props));
+};
+export default Image;

package/dist/components/Image/ImageServerProvider.js

@@ -1,43 +1,63 @@
+"use strict";
+
 import * as React from 'react';
-import { createContext, useCallback, useContext, useMemo, } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const widthMap = {
-    '1': 16,
-    '2': 32,
-    '3': 48,
-    '4': 64,
-    '5': 96,
-    '6': 128,
-    '7': 256,
-    '8': 384,
-    '9': 640,
-    '10': 750,
-    '11': 828,
-    '12': 1080,
-    '13': 1200,
-    '14': 1920,
-    '15': 2048,
-    '16': 3840,
+  '1': 16,
+  '2': 32,
+  '3': 48,
+  '4': 64,
+  '5': 96,
+  '6': 128,
+  '7': 256,
+  '8': 384,
+  '9': 640,
+  '10': 750,
+  '11': 828,
+  '12': 1080,
+  '13': 1200,
+  '14': 1920,
+  '15': 2048,
+  '16': 3840
 };
 const defaultValue = {
-    widthMap,
-    getWidthValue: (width) => widthMap[width],
-    srcUrlMapper: null,
-    generateSrcSet: null,
+  widthMap,
+  getWidthValue: width => widthMap[width],
+  srcUrlMapper: null,
+  generateSrcSet: null
 };
 const imageServerCtx = createContext(null);
 export const useImageServer = () => useContext(imageServerCtx);
-export const ImageServerProvider = ({ children, srcUrlMapper = defaultValue.srcUrlMapper, getWidthValue = defaultValue.getWidthValue, widthMap = defaultValue.widthMap, }) => {
-    const generateSrcSet = useCallback(({ quality, src }) => Object.keys(widthMap)
-        .map((key) => {
-        const width = getWidthValue(key);
-        return `${srcUrlMapper({ quality, src, width })} ${width}w`;
-    })
-        .join(', '), [widthMap, srcUrlMapper, getWidthValue]);
-    return (React.createElement(imageServerCtx.Provider, { value: useMemo(() => ({
-            widthMap,
-            srcUrlMapper,
-            getWidthValue,
-            generateSrcSet,
-        }), [srcUrlMapper, widthMap, getWidthValue, generateSrcSet]) }, children));
+export const ImageServerProvider = _ref => {
+  let {
+    children,
+    srcUrlMapper = defaultValue.srcUrlMapper,
+    getWidthValue = defaultValue.getWidthValue,
+    widthMap = defaultValue.widthMap
+  } = _ref;
+  const generateSrcSet = useCallback((_ref2) => {
+    let {
+      quality,
+      src
+    } = _ref2;
+    return Object.keys(widthMap).map(key => {
+      const width = getWidthValue(key);
+      return "".concat(srcUrlMapper({
+        quality,
+        src,
+        width
+      }), " ").concat(width, "w");
+    }).join(', ');
+  }, [widthMap, srcUrlMapper, getWidthValue]);
+  return _jsx(imageServerCtx.Provider, {
+    value: useMemo(() => ({
+      widthMap,
+      srcUrlMapper,
+      getWidthValue,
+      generateSrcSet
+    }), [srcUrlMapper, widthMap, getWidthValue, generateSrcSet]),
+    children: children
+  });
 };
-export default ImageServerProvider;
+export default ImageServerProvider;

package/dist/components/Image/ResponsiveImage.js

@@ -1,25 +1,50 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["imageWidth", "sizes", "quality", "src"];
+
+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 { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { useResponsiveValue } from '../../hooks/useResponsiveValue';
-import { useImageServer } from './ImageServerProvider';
-import { SimpleImage } from './SimpleImage';
-export const ResponsiveImage = ({ imageWidth: imageWidthList, sizes: sizesList = '100vw', quality = 70, src: incomingSrc, ...imgProps }) => {
-    invariant(quality > 0 && quality <= 100, 'Image must be a number between 1 and 100.');
-    const imageWidth = useResponsiveValue(imageWidthList);
-    const sizes = useResponsiveValue(sizesList);
-    const { srcUrlMapper, getWidthValue, generateSrcSet } = useImageServer();
-    const src = useMemo(() => srcUrlMapper({
-        src: incomingSrc,
-        width: getWidthValue(imageWidth),
-        quality,
-    }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
-    const srcset = useMemo(() => imageWidth
-        ? void 0
-        : generateSrcSet({
-            src: incomingSrc,
-            quality,
-        }), [incomingSrc, quality]);
-    return (React.createElement(SimpleImage, { sizes: sizes, srcSet: srcset, src: src, ...imgProps }));
+import { useResponsiveValue } from "../../hooks/useResponsiveValue/index.js";
+import { useImageServer } from "./ImageServerProvider.js";
+import { SimpleImage } from "./SimpleImage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ResponsiveImage = _ref => {
+  let {
+    imageWidth: imageWidthList,
+    sizes: sizesList = '100vw',
+    quality = 70,
+    src: incomingSrc
+  } = _ref,
+      imgProps = _objectWithoutProperties(_ref, _excluded);
+
+  !(quality > 0 && quality <= 100) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Image must be a number between 1 and 100.') : invariant(false) : void 0;
+  const imageWidth = useResponsiveValue(imageWidthList);
+  const sizes = useResponsiveValue(sizesList);
+  const {
+    srcUrlMapper,
+    getWidthValue,
+    generateSrcSet
+  } = useImageServer();
+  const src = useMemo(() => srcUrlMapper({
+    src: incomingSrc,
+    width: getWidthValue(imageWidth),
+    quality
+  }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
+  const srcset = useMemo(() => imageWidth ? void 0 : generateSrcSet({
+    src: incomingSrc,
+    quality
+  }), [incomingSrc, quality]);
+  return _jsx(SimpleImage, _objectSpread({
+    sizes: sizes,
+    srcSet: srcset,
+    src: src
+  }, imgProps));
 };
-export default ResponsiveImage;
+export default ResponsiveImage;

package/dist/components/Image/SimpleImage.js

@@ -1,3 +1,31 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["eager", "syncDecoding", "className", "src", "srcSet"];
+
+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 * as React from 'react';
-export const SimpleImage = ({ eager = 'false', syncDecoding = 'false', className = '', src, srcSet, ...imgProps }) => (React.createElement("img", { loading: eager ? 'eager' : 'lazy', decoding: syncDecoding ? 'sync' : 'async', className: className, srcSet: srcSet, src: src, ...imgProps }));
-export default SimpleImage;
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SimpleImage = _ref => {
+  let {
+    eager = 'false',
+    syncDecoding = 'false',
+    className = '',
+    src,
+    srcSet
+  } = _ref,
+      imgProps = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx("img", _objectSpread({
+    loading: eager ? 'eager' : 'lazy',
+    decoding: syncDecoding ? 'sync' : 'async',
+    className: className,
+    srcSet: srcSet,
+    src: src
+  }, imgProps));
+};
+export default SimpleImage;

package/dist/components/Image/index.js

@@ -1,2 +1,4 @@
-export { Image } from './Image';
-export { ImageServerProvider, useImageServer } from './ImageServerProvider';
+"use strict";
+
+export { Image } from "./Image.js";
+export { ImageServerProvider, useImageServer } from "./ImageServerProvider.js";

package/dist/components/Image/types.js

@@ -1 +1,3 @@
-export {};
+"use strict";
+
+export {};

package/dist/components/Inline/Inline.js

@@ -1,35 +1,79 @@
+"use strict";
+
 import * as React from 'react';
 import { Children, isValidElement } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { useNegativeMarginLeft, useNegativeMarginTop, } from '../../hooks/useNegativeMargin/useNegativeMargin';
-import { Box } from '../Box';
-import { Text } from '../Text';
-const supportedListTypes = [
-    'ul',
-    'ol',
-];
-export const Inline = ({ is = 'div', children, space = '2', alignY = 'center', alignX, noWrap, dividers, width, }) => {
-    const negativeMarginLeft = useNegativeMarginLeft(space);
-    const negativeMarginTop = useNegativeMarginTop(space);
-    const items = flattenChildren(children);
-    if (items.length < 2) {
-        return React.createElement(React.Fragment, null, items);
-    }
-    const divider = renderDivider(dividers);
-    let listItem = 'div';
-    if (typeof is === 'string')
-        listItem = supportedListTypes.includes(is) ? 'li' : 'div';
-    return (React.createElement(Box, { is: is, width: width, position: "relative", display: "flex", alignItems: alignY, justifyContent: alignX, flexDirection: "row", flexWrap: noWrap ? 'nowrap' : 'wrap', className: [negativeMarginTop, !dividers && negativeMarginLeft] }, Children.map(items, (child, idx) => child !== null && child !== undefined ? (React.createElement(Box, { is: listItem, display: "flex", flexDirection: "row", flexWrap: "nowrap", alignItems: alignY, paddingTop: space, paddingLeft: dividers ? undefined : space },
-        child,
-        dividers && idx !== items.length - 1 ? (React.createElement(Box, { paddingX: space }, divider)) : null)) : null)));
+import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
+import { Box } from "../Box/index.js";
+import { Text } from "../Text/index.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 Inline = _ref => {
+  let {
+    is = 'div',
+    children,
+    space = '2',
+    alignY = 'center',
+    alignX,
+    noWrap,
+    dividers,
+    width
+  } = _ref;
+  const negativeMarginLeft = useNegativeMarginLeft(space);
+  const negativeMarginTop = useNegativeMarginTop(space);
+  const items = flattenChildren(children);
+
+  if (items.length < 2) {
+    return _jsx(_Fragment, {
+      children: items
+    });
+  }
+
+  const divider = renderDivider(dividers);
+  let listItem = 'div';
+  if (typeof is === 'string') listItem = supportedListTypes.includes(is) ? 'li' : 'div';
+  return _jsx(Box, {
+    is: is,
+    width: width,
+    position: "relative",
+    display: "flex",
+    alignItems: alignY,
+    justifyContent: alignX,
+    flexDirection: "row",
+    flexWrap: noWrap ? 'nowrap' : 'wrap',
+    className: [negativeMarginTop, !dividers && negativeMarginLeft],
+    children: Children.map(items, (child, idx) => child !== null && child !== undefined ? _jsxs(Box, {
+      is: listItem,
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "nowrap",
+      alignItems: alignY,
+      paddingTop: space,
+      paddingLeft: dividers ? undefined : space,
+      children: [child, dividers && idx !== items.length - 1 ? _jsx(Box, {
+        paddingX: space,
+        children: divider
+      }) : null]
+    }) : null)
+  });
 };
-const renderDivider = (dividers) => {
-    if (typeof dividers === 'boolean') {
-        return dividers ? React.createElement(Text, null, "\u2022") : null;
-    }
-    if (isValidElement(dividers)) {
-        return dividers;
-    }
-    return React.createElement(Text, null, dividers);
+
+const renderDivider = dividers => {
+  if (typeof dividers === 'boolean') {
+    return dividers ? _jsx(Text, {
+      children: "\u2022"
+    }) : null;
+  }
+
+  if (isValidElement(dividers)) {
+    return dividers;
+  }
+
+  return _jsx(Text, {
+    children: dividers
+  });
 };
-export default Inline;
+
+export default Inline;

package/dist/components/Inline/index.js

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