@autoguru/overdrive 4.10.2 → 4.11.0

package/dist/components/private/InputBase/withEnhancedInput.js

@@ -1,112 +1,210 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["placeholder", "name", "id", "hintText", "disabled", "className", "isTouched", "isValid", "isLoading", "notch", "reserveHintSpace", "size", "value", "onChange", "onReset", "onMouseLeave", "onMouseEnter", "onBlur", "onFocus", "onKeyDown", "prefixIcon", "suffixIcon", "wrapperRef", "autoFocus", "attach", "borderMerged"];
+
+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, wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { forwardRef, useCallback, useState, } from 'react';
-import { useInputControlledState } from '../../../utils';
-import { Box, useBoxStyles } from '../../Box';
-import { Icon } from '../../Icon';
-import { ProgressSpinner } from '../../ProgressSpinner';
-import { HintText } from './HintText';
-import * as inputStateStyles from './InputState.css';
-import { NotchedBase } from './NotchedBase';
-import * as styles from './withEnhancedInput.css';
-export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, defaultValue, } = { primitiveType: 'text', defaultValue: void 0 }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = defaultValue || '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, attach, borderMerged, ...rest }, ref) => {
-    invariant(!(prefixIcon && !withPrefixIcon), 'prefix icon is not supported for this component');
-    invariant(!(suffixIcon && !withSuffixIcon), 'suffix icon is not supported for this component');
+import { forwardRef, useCallback, useState } from 'react';
+import { useInputControlledState } from "../../../utils/index.js";
+import { Box, useBoxStyles } from "../../Box/index.js";
+import { Icon } from "../../Icon/index.js";
+import { ProgressSpinner } from "../../ProgressSpinner/index.js";
+import { HintText } from "./HintText.js";
+import * as inputStateStyles from "./InputState.css.js";
+import { NotchedBase } from "./NotchedBase.js";
+import * as styles from "./withEnhancedInput.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const withEnhancedInput = function (WrappingComponent) {
+  let {
+    primitiveType = 'text',
+    withPrefixIcon = true,
+    withSuffixIcon = true,
+    defaultValue
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    primitiveType: 'text',
+    defaultValue: void 0
+  };
+  return forwardRef((_ref, ref) => {
+    let {
+      placeholder,
+      name,
+      id = name,
+      hintText,
+      disabled = false,
+      className,
+      isTouched,
+      isValid,
+      isLoading = false,
+      notch = true,
+      reserveHintSpace = false,
+      size = 'medium',
+      value: incomingValue = defaultValue || '',
+      onChange: incomingOnChange,
+      onReset,
+      onMouseLeave,
+      onMouseEnter,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      prefixIcon,
+      suffixIcon,
+      wrapperRef,
+      autoFocus,
+      attach,
+      borderMerged
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    !!(prefixIcon && !withPrefixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'prefix icon is not supported for this component') : invariant(false) : void 0;
+    !!(suffixIcon && !withSuffixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'suffix icon is not supported for this component') : invariant(false) : void 0;
     const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
     const [isActive, setActive] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const isEmpty = primitiveType === 'date' && value === '' ? false : value === '';
     const derivedColours = derivedColourIntent({
-        isValid,
-        isHovered,
-        isActive,
-        isTouched,
-        disabled,
+      isValid,
+      isHovered,
+      isActive,
+      isTouched,
+      disabled
     }, inputStateStyles);
     const inputItselfClassName = clsx(useBoxStyles({
-        is: primitiveType === 'textarea' ? 'textarea' : 'input',
-        width: 'full',
-        position: 'relative',
-        display: 'flex',
+      is: primitiveType === 'textarea' ? 'textarea' : 'input',
+      width: 'full',
+      position: 'relative',
+      display: 'flex'
     }), styles.input.itself.root, styles.types[primitiveType], styles.inputItselfSize[size].root.any, styles.inputItselfSize[size].root[primitiveType], {
-        [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),
-        [styles.inputItselfSize[size].prefixed[primitiveType]]: Boolean(prefixIcon),
-        [styles.inputItselfSize[size].suffixed.any]: Boolean(suffixIcon || isLoading),
-        [styles.inputItselfSize[size].suffixed[primitiveType]]: Boolean(suffixIcon || isLoading),
+      [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),
+      [styles.inputItselfSize[size].prefixed[primitiveType]]: Boolean(prefixIcon),
+      [styles.inputItselfSize[size].suffixed.any]: Boolean(suffixIcon || isLoading),
+      [styles.inputItselfSize[size].suffixed[primitiveType]]: Boolean(suffixIcon || isLoading)
     });
-    const wrappingComponent = {
-        validation: {
-            isTouched,
-            isValid,
-        },
-        size,
-        eventHandlers: {
-            onChange: wrapEvent((event) => {
-                if (disabled) {
-                    event.preventDefault();
-                    return false;
-                }
-                return true;
-            }, onChange),
-            onFocus: wrapEvent(() => setActive(true), onFocus),
-            onBlur: wrapEvent(() => setActive(false), onBlur),
-            onMouseEnter,
-            onMouseLeave,
-            onKeyDown,
-            onReset,
-        },
-        field: {
-            name,
-            id,
-            disabled,
-            value,
-            autoFocus,
-            className: inputItselfClassName,
-            placeholder: notch ? undefined : placeholder,
-            ref,
-        },
-        prefixed: Boolean(prefixIcon),
-        suffixed: Boolean(suffixIcon),
-        isLoading,
-        'aria-busy': isLoading || void 0,
-        ...rest,
-    };
+
+    const wrappingComponent = _objectSpread({
+      validation: {
+        isTouched,
+        isValid
+      },
+      size,
+      eventHandlers: {
+        onChange: wrapEvent(event => {
+          if (disabled) {
+            event.preventDefault();
+            return false;
+          }
+
+          return true;
+        }, onChange),
+        onFocus: wrapEvent(() => setActive(true), onFocus),
+        onBlur: wrapEvent(() => setActive(false), onBlur),
+        onMouseEnter,
+        onMouseLeave,
+        onKeyDown,
+        onReset
+      },
+      field: {
+        name,
+        id,
+        disabled,
+        value,
+        autoFocus,
+        className: inputItselfClassName,
+        placeholder: notch ? undefined : placeholder,
+        ref
+      },
+      prefixed: Boolean(prefixIcon),
+      suffixed: Boolean(suffixIcon),
+      isLoading,
+      'aria-busy': isLoading || void 0
+    }, rest);
+
     const onMouseOver = useCallback(() => {
-        setIsHovered(true);
+      setIsHovered(true);
     }, []);
     const onMouseOut = useCallback(() => {
-        setIsHovered(false);
+      setIsHovered(false);
     }, []);
     const iconStyles = useBoxStyles({
-        pointerEvents: 'none',
-        position: 'absolute',
+      pointerEvents: 'none',
+      position: 'absolute'
     });
-    return (React.createElement(Box, { width: "full", className: className, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut },
-        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, size: size, disabled: disabled, notch: notch, placeholder: placeholder, attach: attach, borderMerged: borderMerged, isFocused: isActive, isHovered: isHovered, placeholderColourClassName: clsx({
-                [derivedColours.colour]: !isEmpty,
-            }), borderColourClassName: derivedColours.borderColour },
-            React.createElement(Box, { ref: wrapperRef, className: styles.inputWrapperSize[size].root[primitiveType], width: "full", height: "full" },
-                prefixIcon ? (React.createElement(Icon, { icon: prefixIcon, size: "medium", className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
-                isLoading ? (React.createElement(ProgressSpinner, { className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
-                suffixIcon && !isLoading ? (React.createElement(Icon, { icon: suffixIcon, size: "medium", className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour) })) : null,
-                React.createElement(WrappingComponent, { ...wrappingComponent }))),
-        hintText || reserveHintSpace ? (React.createElement(HintText, { className: derivedColours.colour, hintText: hintText, disabled: disabled, reserveHintSpace: reserveHintSpace })) : null));
-});
-const stateNodeGetter = (styles) => (isHovered, isActive) => {
-    if (isHovered)
-        return styles.hover;
-    if (isActive)
-        return styles.active;
-    return styles.default;
+    return _jsxs(Box, {
+      width: "full",
+      className: className,
+      onMouseEnter: onMouseOver,
+      onMouseLeave: onMouseOut,
+      children: [_jsx(NotchedBase, {
+        id: id,
+        prefixed: Boolean(prefixIcon),
+        isEmpty: isEmpty,
+        size: size,
+        disabled: disabled,
+        notch: notch,
+        placeholder: placeholder,
+        attach: attach,
+        borderMerged: borderMerged,
+        isFocused: isActive,
+        isHovered: isHovered,
+        placeholderColourClassName: clsx({
+          [derivedColours.colour]: !isEmpty
+        }),
+        borderColourClassName: derivedColours.borderColour,
+        children: _jsxs(Box, {
+          ref: wrapperRef,
+          className: styles.inputWrapperSize[size].root[primitiveType],
+          width: "full",
+          height: "full",
+          children: [prefixIcon ? _jsx(Icon, {
+            icon: prefixIcon,
+            size: "medium",
+            className: clsx(iconStyles, styles.iconRoot, styles.prefixIcon, styles.iconSize[size], derivedColours.colour)
+          }) : null, isLoading ? _jsx(ProgressSpinner, {
+            className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
+          }) : null, suffixIcon && !isLoading ? _jsx(Icon, {
+            icon: suffixIcon,
+            size: "medium",
+            className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
+          }) : null, _jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
+        })
+      }), hintText || reserveHintSpace ? _jsx(HintText, {
+        className: derivedColours.colour,
+        hintText: hintText,
+        disabled: disabled,
+        reserveHintSpace: reserveHintSpace
+      }) : null]
+    });
+  });
 };
-const derivedColourIntent = ({ isTouched, isValid, disabled, isHovered, isActive }, styles) => {
-    if (disabled)
-        return styles.disabled;
-    if (isTouched === true) {
-        const node = stateNodeGetter(isValid ? styles.success : styles.error);
-        return node(isHovered, isActive);
-    }
-    const node = stateNodeGetter(isActive ? styles.active : styles.natural);
-    return node(isHovered, isActive);
+
+const stateNodeGetter = styles => (isHovered, isActive) => {
+  if (isHovered) return styles.hover;
+  if (isActive) return styles.active;
+  return styles.default;
 };
+
+const derivedColourIntent = (_ref2, styles) => {
+  let {
+    isTouched,
+    isValid,
+    disabled,
+    isHovered,
+    isActive
+  } = _ref2;
+  if (disabled) return styles.disabled;
+
+  if (isTouched === true) {
+    const node = stateNodeGetter(isValid ? styles.success : styles.error);
+    return node(isHovered, isActive);
+  }
+
+  const node = stateNodeGetter(isActive ? styles.active : styles.natural);
+  return node(isHovered, isActive);
+};

package/dist/hooks/useAttachedBoxes/index.js

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

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.css.js

@@ -1,21 +1,29 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/hooks/useAttachedBoxes/useAttachedBoxes.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
-import { themeContractVars as vars } from '../../themes/theme.css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
 export const grid = {
-    default: style({
-        display: 'grid',
-    }),
-    gaps: makeResponsiveStyle(vars.space, 'gridGap'),
-    topLeft: style({
-        borderTopLeftRadius: vars.border.radius['1'],
-    }),
-    topRight: style({
-        borderTopRightRadius: vars.border.radius['1'],
-    }),
-    bottomRight: style({
-        borderBottomRightRadius: vars.border.radius['1'],
-    }),
-    bottomLeft: style({
-        borderBottomLeftRadius: vars.border.radius['1'],
-    }),
+  default: style({
+    display: 'grid'
+  }, "grid_default"),
+  gaps: makeResponsiveStyle(vars.space, 'gridGap'),
+  topLeft: style({
+    borderTopLeftRadius: vars.border.radius['1']
+  }, "grid_topLeft"),
+  topRight: style({
+    borderTopRightRadius: vars.border.radius['1']
+  }, "grid_topRight"),
+  bottomRight: style({
+    borderBottomRightRadius: vars.border.radius['1']
+  }, "grid_bottomRight"),
+  bottomLeft: style({
+    borderBottomLeftRadius: vars.border.radius['1']
+  }, "grid_bottomLeft")
 };
+
+__vanilla_filescope__.endFileScope();

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.js

@@ -1,51 +1,76 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "className"];
+
+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 clsx from 'clsx';
 import * as React from 'react';
-import { Box } from '../../components';
-import { getEarliestKnownToken, resolveResponsiveStyle, } from '../../utils/resolveResponsiveProps';
-import { useMedia } from '../useMedia';
-import * as styles from './useAttachedBoxes.css';
+import { Box } from "../../components/index.js";
+import { getEarliestKnownToken, resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import { useMedia } from "../useMedia/index.js";
+import * as styles from "./useAttachedBoxes.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
 function useResponsiveValue(responsiveValue) {
-    if (!Array.isArray(responsiveValue))
-        return responsiveValue;
-    const activeBP = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop'], false).reduce((activeBreakPoint, current, index) => {
-        if (current)
-            activeBreakPoint = index + 1;
-        return activeBreakPoint;
-    }, 1);
-    return getEarliestKnownToken(responsiveValue, activeBP);
+  if (!Array.isArray(responsiveValue)) return responsiveValue;
+  const activeBP = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop'], false).reduce((activeBreakPoint, current, index) => {
+    if (current) activeBreakPoint = index + 1;
+    return activeBreakPoint;
+  }, 1);
+  return getEarliestKnownToken(responsiveValue, activeBP);
 }
-export const useAttachedBoxes = ({ count, columnCount: incomingColumnCount, gap = '1', backgroundColour = 'gray900', }) => {
-    const columnCount = useResponsiveValue(incomingColumnCount);
-    const decimals = (count / columnCount) % 1;
-    let colStart;
-    let extend;
-    let isLastItem;
-    const topRightIndex = Math.min(count - 1, columnCount - 1);
-    const bottomLeftIndex = decimals
-        ? Math.floor(count / columnCount) * columnCount
-        : count - columnCount;
-    return [
-        Array.from({ length: count }).map((_, index) => ({ children, className, ...rest }) => {
-            isLastItem = index === count - 1;
-            if (isLastItem && decimals) {
-                colStart = Math.round(decimals / (1 / columnCount));
-                extend = Math.round((1 - decimals) / (1 / columnCount));
-            }
-            return (React.createElement(Box, { backgroundColour: backgroundColour, className: clsx(className, {
-                    [styles.grid.topLeft]: index === 0,
-                    [styles.grid.topRight]: index === topRightIndex,
-                    [styles.grid.bottomLeft]: index === bottomLeftIndex,
-                    [styles.grid.bottomRight]: isLastItem,
-                }), style: isLastItem && decimals
-                    ? {
-                        gridColumn: `${colStart}/${colStart + 1 + extend}`,
-                    }
-                    : void 0, ...rest }, children));
-        }),
-        clsx(styles.grid.default, resolveResponsiveStyle(gap, styles.grid.gaps)),
-        {
-            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
-        },
-    ];
+
+export const useAttachedBoxes = _ref => {
+  let {
+    count,
+    columnCount: incomingColumnCount,
+    gap = '1',
+    backgroundColour = 'gray900'
+  } = _ref;
+  const columnCount = useResponsiveValue(incomingColumnCount);
+  const decimals = count / columnCount % 1;
+  let colStart;
+  let extend;
+  let isLastItem;
+  const topRightIndex = Math.min(count - 1, columnCount - 1);
+  const bottomLeftIndex = decimals ? Math.floor(count / columnCount) * columnCount : count - columnCount;
+  return [Array.from({
+    length: count
+  }).map((_, index) => _ref2 => {
+    let {
+      children,
+      className
+    } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+
+    isLastItem = index === count - 1;
+
+    if (isLastItem && decimals) {
+      colStart = Math.round(decimals / (1 / columnCount));
+      extend = Math.round((1 - decimals) / (1 / columnCount));
+    }
+
+    return _jsx(Box, _objectSpread(_objectSpread({
+      backgroundColour: backgroundColour,
+      className: clsx(className, {
+        [styles.grid.topLeft]: index === 0,
+        [styles.grid.topRight]: index === topRightIndex,
+        [styles.grid.bottomLeft]: index === bottomLeftIndex,
+        [styles.grid.bottomRight]: isLastItem
+      }),
+      style: isLastItem && decimals ? {
+        gridColumn: "".concat(colStart, "/").concat(colStart + 1 + extend)
+      } : void 0
+    }, rest), {}, {
+      children: children
+    }));
+  }), clsx(styles.grid.default, resolveResponsiveStyle(gap, styles.grid.gaps)), {
+    gridTemplateColumns: "repeat(".concat(columnCount, ", 1fr)")
+  }];
 };
-export default useAttachedBoxes;
+export default useAttachedBoxes;

package/dist/hooks/useMedia/index.js

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

package/dist/hooks/useMedia/useMedia.js

@@ -1,36 +1,46 @@
+"use strict";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import { useRuntimeTokens } from '../..';
-import { isBrowser } from '../../utils';
-export const useMedia = (queries, fallbackCase = false) => {
-    const { breakpoints } = useRuntimeTokens();
-    if (!isBrowser)
-        return queries.map(() => fallbackCase);
-    const getQueries = useCallback(() => queries.map((media) => `(min-width: ${breakpoints[media]})`), [breakpoints]);
-    const matchesInit = useMemo(() => getQueries().map((query) => window.matchMedia(query).matches), [getQueries]);
-    const [matches, setMatches] = useState(matchesInit);
-    if (isBrowser) {
-        useLayoutEffect(() => {
-            let isMounted = true;
-            const matchers = getQueries().map((query) => window.matchMedia(query));
-            const removeHandlersFn = matchers.map((matcher, idx) => {
-                const handler = (e) => {
-                    if (!isMounted)
-                        return;
-                    setMatches((prevState) => {
-                        const newState = [...prevState];
-                        newState[idx] = e.matches;
-                        return newState;
-                    });
-                };
-                matcher.addEventListener('change', handler, { passive: true });
-                return () => matcher.removeEventListener('change', handler);
-            });
-            return () => {
-                isMounted = false;
-                removeHandlersFn.forEach((item) => item());
-            };
-        }, [...queries, breakpoints]);
-    }
-    return matches;
+import { useRuntimeTokens } from "../../index.js";
+import { isBrowser } from "../../utils/index.js";
+export const useMedia = function (queries) {
+  let fallbackCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const {
+    breakpoints
+  } = useRuntimeTokens();
+  if (!isBrowser) return queries.map(() => fallbackCase);
+  const getQueries = useCallback(() => queries.map(media => "(min-width: ".concat(breakpoints[media], ")")), [breakpoints]);
+  const matchesInit = useMemo(() => getQueries().map(query => window.matchMedia(query).matches), [getQueries]);
+  const [matches, setMatches] = useState(matchesInit);
+
+  if (isBrowser) {
+    useLayoutEffect(() => {
+      let isMounted = true;
+      const matchers = getQueries().map(query => window.matchMedia(query));
+      const removeHandlersFn = matchers.map((matcher, idx) => {
+        const handler = e => {
+          if (!isMounted) return;
+          setMatches(prevState => {
+            const newState = _toConsumableArray(prevState);
+
+            newState[idx] = e.matches;
+            return newState;
+          });
+        };
+
+        matcher.addEventListener('change', handler, {
+          passive: true
+        });
+        return () => matcher.removeEventListener('change', handler);
+      });
+      return () => {
+        isMounted = false;
+        removeHandlersFn.forEach(item => item());
+      };
+    }, [].concat(_toConsumableArray(queries), [breakpoints]));
+  }
+
+  return matches;
 };
-export default useMedia;
+export default useMedia;

package/dist/hooks/useNegativeMargin/useNegativeMargin.js

@@ -1,2 +1,4 @@
-export { useNegativeMarginLeft } from './useNegativeMarginLeft';
-export { useNegativeMarginTop } from './useNegativeMarginTop';
+"use strict";
+
+export { useNegativeMarginLeft } from "./useNegativeMarginLeft.js";
+export { useNegativeMarginTop } from "./useNegativeMarginTop.js";

package/dist/hooks/useNegativeMargin/useNegativeMarginLeft.css.js

@@ -1,6 +1,14 @@
-import { themeContractVars as vars } from '../../themes/theme.css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
-export const negativeMarginLeft = makeResponsiveStyle(vars.space, (value) => ({
-    marginLeft: `calc(-1 * ${value})`,
-    width: `calc(100% + ${value})`,
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/hooks/useNegativeMargin/useNegativeMarginLeft.css.ts", "@autoguru/overdrive");
+
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+export const negativeMarginLeft = makeResponsiveStyle(vars.space, value => ({
+  marginLeft: "calc(-1 * ".concat(value, ")"),
+  width: "calc(100% + ".concat(value, ")")
 }));
+
+__vanilla_filescope__.endFileScope();

package/dist/hooks/useNegativeMargin/useNegativeMarginLeft.js

@@ -1,4 +1,6 @@
-import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import * as styles from './useNegativeMarginLeft.css';
-export const useNegativeMarginLeft = (space) => resolveResponsiveStyle(space, styles.negativeMarginLeft);
-export default useNegativeMarginLeft;
+"use strict";
+
+import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import * as styles from "./useNegativeMarginLeft.css.js";
+export const useNegativeMarginLeft = space => resolveResponsiveStyle(space, styles.negativeMarginLeft);
+export default useNegativeMarginLeft;

package/dist/hooks/useNegativeMargin/useNegativeMarginTop.css.js

@@ -1,5 +1,13 @@
-import { themeContractVars as vars } from '../../themes/theme.css';
-import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
-export const negativeMarginTop = makeResponsiveStyle(vars.space, (value) => ({
-    marginTop: `calc(-1 * ${value})`,
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/hooks/useNegativeMargin/useNegativeMarginTop.css.ts", "@autoguru/overdrive");
+
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+export const negativeMarginTop = makeResponsiveStyle(vars.space, value => ({
+  marginTop: "calc(-1 * ".concat(value, ")")
 }));
+
+__vanilla_filescope__.endFileScope();