@autoguru/overdrive 4.10.2 → 4.11.0

package/dist/components/StandardModal/StandardModal.css.js

@@ -1,65 +1,77 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/StandardModal/StandardModal.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 } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
-import { responsiveStyle } from '../../utils/responsiveStyle';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { responsiveStyle } from "../../utils/responsiveStyle.js";
 export const container = style({
-    outline: '0',
-});
-export const modal = style({
-    width: '100vw',
+  outline: '0'
+}, "container");
+export const modal = style(_objectSpread({
+  width: '100vw',
+  height: 'auto',
+  alignSelf: 'flex-end',
+  minHeight: "calc(3 * ".concat(vars.space['8'], ")"),
+  maxHeight: "calc(100vh - ".concat(vars.space['8'], ")"),
+  borderRadius: "".concat(vars.space['2'], " ").concat(vars.space['2'], " 0 0")
+}, responsiveStyle({
+  tablet: {
+    alignSelf: 'center',
+    borderRadius: "".concat(vars.space['1'])
+  },
+  desktop: {
+    maxWidth: "calc(100% - ".concat(vars.space['9'], " * 2)"),
     height: 'auto',
-    alignSelf: 'flex-end',
-    minHeight: `calc(3 * ${vars.space['8']})`,
-    maxHeight: `calc(100vh - ${vars.space['8']})`,
-    borderRadius: `${vars.space['2']} ${vars.space['2']} 0 0`,
-    ...responsiveStyle({
-        tablet: {
-            alignSelf: 'center',
-            borderRadius: `${vars.space['1']}`,
-        },
-        desktop: {
-            maxWidth: `calc(100% - ${vars.space['9']} * 2)`,
-            height: 'auto',
-            maxHeight: `calc(100vh - ${vars.space['9']} * 2)`,
-            boxShadow: '0 0 32px 0 rgba(0,0,0, 0.012), 0 24px 96px 0 rgba(0,0,0, 0.08)',
-            marginTop: 0,
-        },
-    }),
-});
+    maxHeight: "calc(100vh - ".concat(vars.space['9'], " * 2)"),
+    boxShadow: '0 0 32px 0 rgba(0,0,0, 0.012), 0 24px 96px 0 rgba(0,0,0, 0.08)',
+    marginTop: 0
+  }
+})), "modal");
 export const modalSizeSkinny = style(responsiveStyle({
-    tablet: {
-        maxWidth: '420px',
-    },
-    desktop: {
-        maxWidth: '420px',
-    },
-    largeDesktop: {
-        width: '420px',
-    },
-}));
+  tablet: {
+    maxWidth: '420px'
+  },
+  desktop: {
+    maxWidth: '420px'
+  },
+  largeDesktop: {
+    width: '420px'
+  }
+}), "modalSizeSkinny");
 export const modalSizeNarrow = style(responsiveStyle({
-    tablet: {
-        maxWidth: '600px',
-    },
-    desktop: {
-        maxWidth: '600px',
-    },
-    largeDesktop: {
-        width: '600px',
-    },
-}));
+  tablet: {
+    maxWidth: '600px'
+  },
+  desktop: {
+    maxWidth: '600px'
+  },
+  largeDesktop: {
+    width: '600px'
+  }
+}), "modalSizeNarrow");
 export const modalSizeStandard = style(responsiveStyle({
-    tablet: {
-        width: '800px',
-    },
-}));
+  tablet: {
+    width: '800px'
+  }
+}), "modalSizeStandard");
 export const headerCloseButton = style({
-    top: 0,
-    right: 0,
-    bottom: 0,
-});
+  top: 0,
+  right: 0,
+  bottom: 0
+}, "headerCloseButton");
 export const content = style({
-    overflowY: 'auto',
-    overscrollBehavior: 'contain',
-    webkitOverflowScrolling: 'touch',
-    '-webkit-overflow-scrolling': 'touch',
-});
+  overflowY: 'auto',
+  overscrollBehavior: 'contain',
+  webkitOverflowScrolling: 'touch',
+  '-webkit-overflow-scrolling': 'touch'
+}, "content");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/StandardModal/StandardModal.js

@@ -1,59 +1,134 @@
+"use strict";
+
 import { WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { isBrowser, useEventCallback, useId } from '../../utils';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Heading } from '../Heading';
-import { Icon } from '../Icon';
-import { Modal } from '../Modal';
-import { useTextStyles } from '../Text';
-import * as styles from './StandardModal.css';
-export var ESize;
+import { isBrowser, useEventCallback, useId } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Button } from "../Button/index.js";
+import { Heading } from "../Heading/index.js";
+import { Icon } from "../Icon/index.js";
+import { Modal } from "../Modal/index.js";
+import { useTextStyles } from "../Text/index.js";
+import * as styles from "./StandardModal.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export let ESize;
+
 (function (ESize) {
-    ESize["Skinny"] = "skinny";
-    ESize["Narrow"] = "narrow";
-    ESize["Standard"] = "standard";
+  ESize["Skinny"] = "skinny";
+  ESize["Narrow"] = "narrow";
+  ESize["Standard"] = "standard";
 })(ESize || (ESize = {}));
-export const StandardModal = ({ isOpen, size = 'standard', className = '', title, onRequestClose, children, }) => {
-    const titleId = useId();
-    const locked = useRef(true);
-    const closeButtonHandler = useEventCallback(() => {
-        if (typeof onRequestClose === 'function')
-            onRequestClose('button');
-    });
-    const unlockModal = useEventCallback((event) => {
-        locked.current = event.target !== event.currentTarget;
-    });
-    const backdropHandler = useEventCallback((event) => {
-        if (locked.current || event.target !== event.currentTarget)
-            return;
-        if (typeof onRequestClose === 'function')
-            onRequestClose('backdrop');
-    });
-    if (isBrowser) {
-        useLayoutEffect(() => {
-            document.body.style.overflow = isOpen ? 'hidden' : '';
-            return () => {
-                document.body.style.overflow = '';
-            };
-        }, [isOpen]);
-    }
-    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
-        React.createElement(Box, { className: styles.container, height: "full", display: "flex", alignItems: "center", justifyContent: "center", "aria-hidden": isOpen ? 'false' : 'true', role: "none presentation", onMouseDown: unlockModal, onClick: backdropHandler },
-            React.createElement(Box, { is: "article", overflow: "hidden", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, display: "flex", flexDirection: "column", backgroundColour: "white", marginTop: "8", className: clsx([
-                    styles.modal,
-                    { [styles.modalSizeStandard]: size === 'standard' },
-                    { [styles.modalSizeNarrow]: size === 'narrow' },
-                    { [styles.modalSizeSkinny]: size === 'skinny' },
-                    className,
-                ]) },
-                React.createElement(Box, { is: "header", flexShrink: 0, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "full", paddingY: "3", paddingLeft: "5", paddingRight: "2", borderWidthBottom: "1", borderColour: "light" },
-                    React.createElement(Box, { flexGrow: 1, id: titleId },
-                        React.createElement(Heading, { is: "h4" }, title)),
-                    React.createElement(Button, { minimal: true, rounded: true, variant: "secondary", size: "small", "aria-label": "close", onClick: closeButtonHandler },
-                        React.createElement(Icon, { className: useTextStyles({ colour: 'muted' }), icon: WindowCloseIcon, size: "medium" }))),
-                React.createElement(Box, { is: "main", display: "flex", flexDirection: "column", flexGrow: 1, height: "full", className: styles.content }, children)))));
+
+export const StandardModal = _ref => {
+  let {
+    isOpen,
+    size = 'standard',
+    className = '',
+    title,
+    onRequestClose,
+    children
+  } = _ref;
+  const titleId = useId();
+  const locked = useRef(true);
+  const closeButtonHandler = useEventCallback(() => {
+    if (typeof onRequestClose === 'function') onRequestClose('button');
+  });
+  const unlockModal = useEventCallback(event => {
+    locked.current = event.target !== event.currentTarget;
+  });
+  const backdropHandler = useEventCallback(event => {
+    if (locked.current || event.target !== event.currentTarget) return;
+    if (typeof onRequestClose === 'function') onRequestClose('backdrop');
+  });
+
+  if (isBrowser) {
+    useLayoutEffect(() => {
+      document.body.style.overflow = isOpen ? 'hidden' : '';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }, [isOpen]);
+  }
+
+  return _jsx(Modal, {
+    isOpen: isOpen,
+    onRequestClose: onRequestClose,
+    children: _jsx(Box, {
+      className: styles.container,
+      height: "full",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "aria-hidden": isOpen ? 'false' : 'true',
+      role: "none presentation",
+      onMouseDown: unlockModal,
+      onClick: backdropHandler,
+      children: _jsxs(Box, {
+        is: "article",
+        overflow: "hidden",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColour: "white",
+        marginTop: "8",
+        className: clsx([styles.modal, {
+          [styles.modalSizeStandard]: size === 'standard'
+        }, {
+          [styles.modalSizeNarrow]: size === 'narrow'
+        }, {
+          [styles.modalSizeSkinny]: size === 'skinny'
+        }, className]),
+        children: [_jsxs(Box, {
+          is: "header",
+          flexShrink: 0,
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "full",
+          paddingY: "3",
+          paddingLeft: "5",
+          paddingRight: "2",
+          borderWidthBottom: "1",
+          borderColour: "light",
+          children: [_jsx(Box, {
+            flexGrow: 1,
+            id: titleId,
+            children: _jsx(Heading, {
+              is: "h4",
+              children: title
+            })
+          }), _jsx(Button, {
+            minimal: true,
+            rounded: true,
+            variant: "secondary",
+            size: "small",
+            "aria-label": "close",
+            onClick: closeButtonHandler,
+            children: _jsx(Icon, {
+              className: useTextStyles({
+                colour: 'muted'
+              }),
+              icon: WindowCloseIcon,
+              size: "medium"
+            })
+          })]
+        }), _jsx(Box, {
+          is: "main",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          height: "full",
+          className: styles.content,
+          children: children
+        })]
+      })
+    })
+  });
 };
-export default StandardModal;
+export default StandardModal;

package/dist/components/StandardModal/index.js

@@ -1 +1,3 @@
-export { StandardModal, ESize as EStandardModalSize } from './StandardModal';
+"use strict";
+
+export { StandardModal, ESize as EStandardModalSize } from "./StandardModal.js";

package/dist/components/StarRating/StarRating.css.js

@@ -1,10 +1,18 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/StarRating/StarRating.css.ts", "@autoguru/overdrive");
+
 import { styleVariants } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 export const star = styleVariants({
-    default: {
-        color: vars.colours.intent.shine.foreground,
-    },
-    empty: {
-        color: vars.colours.intent.shine.background.standard,
-    },
-});
+  default: {
+    color: vars.colours.intent.shine.foreground
+  },
+  empty: {
+    color: vars.colours.intent.shine.background.standard
+  }
+}, "star");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/StarRating/StarRating.js

@@ -1,59 +1,103 @@
+"use strict";
+
 import { StarHalfIcon, StarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { memo } from 'react';
-import { Box, useBoxStyles } from '../Box';
-import { Icon } from '../Icon';
-import { Inline } from '../Inline';
-import { Text } from '../Text';
-import * as styles from './StarRating.css';
+import { Box, useBoxStyles } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { Text } from "../Text/index.js";
+import * as styles from "./StarRating.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const totalStars = 5;
-export var EStarRatingSize;
+export let EStarRatingSize;
+
 (function (EStarRatingSize) {
-    EStarRatingSize["Medium"] = "medium";
-    EStarRatingSize["Small"] = "small";
+  EStarRatingSize["Medium"] = "medium";
+  EStarRatingSize["Small"] = "small";
 })(EStarRatingSize || (EStarRatingSize = {}));
+
 var EStarType;
+
 (function (EStarType) {
-    EStarType[EStarType["Full"] = 0] = "Full";
-    EStarType[EStarType["Half"] = 1] = "Half";
-    EStarType[EStarType["Empty"] = 2] = "Empty";
+  EStarType[EStarType["Full"] = 0] = "Full";
+  EStarType[EStarType["Half"] = 1] = "Half";
+  EStarType[EStarType["Empty"] = 2] = "Empty";
 })(EStarType || (EStarType = {}));
-const starSizeMap = new Map([
-    [EStarRatingSize.Medium, 'medium'],
-    [EStarRatingSize.Small, 'small'],
-]);
-const labelSizeMap = new Map([
-    [EStarRatingSize.Small, '3'],
-    [EStarRatingSize.Medium, '4'],
-]);
-export const StarRating = memo(({ className = '', rating, label = rating, size = EStarRatingSize.Medium, }) => (React.createElement(Box, { className: className },
-    React.createElement(Inline, { space: "4", alignY: "center" },
-        React.createElement(Inline, { space: "none", alignY: "center" }, Array.from({ length: totalStars })
-            .fill(0)
-            .map((_, index) => (React.createElement(Star, { key: index, index: index, rating: rating, size: size })))),
-        label === null ? null : (React.createElement(Text, { size: labelSizeMap.get(size) }, label))))));
+
+const starSizeMap = new Map([[EStarRatingSize.Medium, 'medium'], [EStarRatingSize.Small, 'small']]);
+const labelSizeMap = new Map([[EStarRatingSize.Small, '3'], [EStarRatingSize.Medium, '4']]);
+export const StarRating = memo(_ref => {
+  let {
+    className = '',
+    rating,
+    label = rating,
+    size = EStarRatingSize.Medium
+  } = _ref;
+  return _jsx(Box, {
+    className: className,
+    children: _jsxs(Inline, {
+      space: "4",
+      alignY: "center",
+      children: [_jsx(Inline, {
+        space: "none",
+        alignY: "center",
+        children: Array.from({
+          length: totalStars
+        }).fill(0).map((_, index) => _jsx(Star, {
+          index: index,
+          rating: rating,
+          size: size
+        }, index))
+      }), label === null ? null : _jsx(Text, {
+        size: labelSizeMap.get(size),
+        children: label
+      })]
+    })
+  });
+});
+
 const getStarIconType = (index, rating) => {
-    if (index + 1 <= Math.floor(rating)) {
-        return EStarType.Full;
-    }
-    if (index + 1 > Math.ceil(rating)) {
-        return EStarType.Empty;
-    }
-    const decimalPart = Math.round((rating - index) * 1e1);
-    if (decimalPart <= 2) {
-        return EStarType.Empty;
-    }
-    if (decimalPart >= 8) {
-        return EStarType.Full;
-    }
-    return EStarType.Half;
+  if (index + 1 <= Math.floor(rating)) {
+    return EStarType.Full;
+  }
+
+  if (index + 1 > Math.ceil(rating)) {
+    return EStarType.Empty;
+  }
+
+  const decimalPart = Math.round((rating - index) * 1e1);
+
+  if (decimalPart <= 2) {
+    return EStarType.Empty;
+  }
+
+  if (decimalPart >= 8) {
+    return EStarType.Full;
+  }
+
+  return EStarType.Half;
 };
-const Star = ({ index, rating = 0, size = EStarRatingSize.Medium, }) => {
-    const starType = getStarIconType(index, rating);
-    const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
-    return (React.createElement(Icon, { key: index, icon: star, size: starSizeMap.get(size), className: clsx(useBoxStyles({ position: 'relative' }), styles.star.default, {
-            [styles.star.empty]: starType === EStarType.Empty,
-        }) }));
+
+const Star = _ref2 => {
+  let {
+    index,
+    rating = 0,
+    size = EStarRatingSize.Medium
+  } = _ref2;
+  const starType = getStarIconType(index, rating);
+  const star = starType === EStarType.Half ? StarHalfIcon : StarIcon;
+  return _jsx(Icon, {
+    icon: star,
+    size: starSizeMap.get(size),
+    className: clsx(useBoxStyles({
+      position: 'relative'
+    }), styles.star.default, {
+      [styles.star.empty]: starType === EStarType.Empty
+    })
+  }, index);
 };
-export default StarRating;
+
+export default StarRating;

package/dist/components/StarRating/index.js

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

package/dist/components/Stepper/Stepper.css.js

@@ -1,41 +1,51 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Stepper/Stepper.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
-export const disabled = style({ cursor: 'not-allowed' });
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const disabled = style({
+  cursor: 'not-allowed'
+}, "disabled");
 export const root = style({
-    width: 'max-content',
-    selectors: {
-        [`&:not(${disabled}):focus`]: {
-            borderColor: vars.colours.intent.information.background.standard,
-        },
-    },
-});
+  width: 'max-content',
+  selectors: {
+    ["&:not(".concat(disabled, "):focus")]: {
+      borderColor: vars.colours.intent.information.background.standard
+    }
+  }
+}, "root");
 export const width = styleVariants({
-    full: {
-        width: '100%',
-    },
-    default: {
-        width: 'max-content',
-    },
-});
+  full: {
+    width: '100%'
+  },
+  default: {
+    width: 'max-content'
+  }
+}, "width");
 export const handle = styleVariants({
-    default: {
-        width: vars.space[6],
-        height: vars.space[6],
-        backgroundColor: vars.colours.intent.primary.background.standard,
-        transition: `background-color 0.1s ${vars.animation.easing.standard}`,
-        selectors: {
-            [`${root}:not(${disabled}) &:hover`]: {
-                backgroundColor: vars.colours.intent.primary.background.strong,
-            },
-            [`${root}:not(${disabled}) &:active`]: {
-                backgroundColor: vars.colours.intent.primary.background.strong,
-            },
-        },
-    },
-    disabled: {
-        borderColor: vars.colours.background.neutral,
-    },
-});
+  default: {
+    width: vars.space[6],
+    height: vars.space[6],
+    backgroundColor: vars.colours.intent.primary.background.standard,
+    transition: "background-color 0.1s ".concat(vars.animation.easing.standard),
+    selectors: {
+      ["".concat(root, ":not(").concat(disabled, ") &:hover")]: {
+        backgroundColor: vars.colours.intent.primary.background.strong
+      },
+      ["".concat(root, ":not(").concat(disabled, ") &:active")]: {
+        backgroundColor: vars.colours.intent.primary.background.strong
+      }
+    }
+  },
+  disabled: {
+    borderColor: vars.colours.background.neutral
+  }
+}, "handle");
 export const label = style({
-    minWidth: vars.space['8'],
-});
+  minWidth: vars.space['8']
+}, "label");
+
+__vanilla_filescope__.endFileScope();