@autoguru/overdrive 4.0.3 → 4.1.2

package/dist/utils/index.js

@@ -1,110 +1,94 @@
-"use strict";
-
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 export const isBrowser = typeof window !== 'undefined';
 export const isomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 export const useUncontrolledState = (value, onChange) => {
-  if (typeof onChange === 'function') {
-    return [value, onChange];
-  }
-
-  return useState(value);
+    if (typeof onChange === 'function') {
+        return [value, onChange];
+    }
+    return useState(value);
 };
 const handlers = new WeakMap();
 export const useInputControlledState = (incomingValue, incomingOnChange) => {
-  if (typeof incomingOnChange === 'function') return [incomingValue, incomingOnChange];
-  const [value, setValue] = useState(incomingValue);
-
-  if (!handlers.has(setValue)) {
-    handlers.set(setValue, e => setValue(e.target.value));
-  }
-
-  return [value, handlers.get(setValue)];
+    if (typeof incomingOnChange === 'function')
+        return [incomingValue, incomingOnChange];
+    const [value, setValue] = useState(incomingValue);
+    if (!handlers.has(setValue)) {
+        handlers.set(setValue, (e) => setValue(e.target.value));
+    }
+    return [value, handlers.get(setValue)];
 };
 let id = 0;
-
 const genId = () => ++id;
-
 let serverHandoffComplete = false;
-export const useId = idFromProps => {
-  const initialId = idFromProps !== null && idFromProps !== void 0 ? idFromProps : serverHandoffComplete ? genId() : null;
-  const [id, setId] = useState(initialId);
-  isomorphicLayoutEffect(() => {
-    if (id === null) {
-      setId(genId());
-    }
-  }, []);
-  useEffect(() => {
-    if (!serverHandoffComplete) {
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return id === null ? null : "od-".concat(String(id));
+export const useId = (idFromProps) => {
+    const initialId = idFromProps ?? (serverHandoffComplete ? genId() : null);
+    const [id, setId] = useState(initialId);
+    isomorphicLayoutEffect(() => {
+        if (id === null) {
+            setId(genId());
+        }
+    }, []);
+    useEffect(() => {
+        if (!serverHandoffComplete) {
+            serverHandoffComplete = true;
+        }
+    }, []);
+    return id === null ? null : `od-${String(id)}`;
 };
 export const setRef = (ref, value) => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-};
-export const isHtmlElement = element => element instanceof Element || element instanceof HTMLDocument;
-export const hex2rgba = function hex2rgba(c) {
-  let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1';
-  return "rgb(".concat(c.slice(1).match(/../g).map(x => Number("0x".concat(x))), ",").concat(alpha, ")");
-};
-export const ownerWindow = node => {
-  var _ownerDocument;
-
-  return ((_ownerDocument = ownerDocument(node)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.defaultView) || window;
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
 };
-export const ownerDocument = node => (node === null || node === void 0 ? void 0 : node.ownerDocument) || document;
-export const useEventCallback = fn => {
-  const ref = useRef(fn);
-  isomorphicLayoutEffect(() => {
-    ref.current = fn;
-  });
-  return useCallback(function () {
-    return void ref.current.apply(ref, arguments);
-  }, []);
+export const isHtmlElement = (element) => element instanceof Element || element instanceof HTMLDocument;
+export const hex2rgba = (c, alpha = '1') => `rgb(${c
+    .slice(1)
+    .match(/../g)
+    .map((x) => Number(`0x${x}`))},${alpha})`;
+export const ownerWindow = (node) => ownerDocument(node)?.defaultView || window;
+export const ownerDocument = (node) => node?.ownerDocument || document;
+export const useEventCallback = (fn) => {
+    const ref = useRef(fn);
+    isomorphicLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => void ref.current(...args), []);
 };
-
-const easeInOutCubic = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-
-export const animate = function animate(element, property, to) {
-  let duration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 600;
-  let start = null;
-  const from = element[property];
-  if (start === from) return;
-  let cancelled = false;
-
-  const cancel = () => {
-    cancelled = true;
-  };
-
-  const step = timestamp => {
-    if (cancelled) return;
-
-    if (start === null) {
-      start = timestamp;
-    }
-
-    const time = Math.min(1, (timestamp - start) / duration);
-    element[property] = easeInOutCubic(time) * (to - from) + from;
-    if (time >= 1) return;
+const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+export const animate = (element, property, to, duration = 600) => {
+    let start = null;
+    const from = element[property];
+    if (start === from)
+        return;
+    let cancelled = false;
+    const cancel = () => {
+        cancelled = true;
+    };
+    const step = (timestamp) => {
+        if (cancelled)
+            return;
+        if (start === null) {
+            start = timestamp;
+        }
+        const time = Math.min(1, (timestamp - start) / duration);
+        element[property] = easeInOutCubic(time) * (to - from) + from;
+        if (time >= 1)
+            return;
+        requestAnimationFrame(step);
+    };
     requestAnimationFrame(step);
-  };
-
-  requestAnimationFrame(step);
-  return cancel;
+    return cancel;
 };
-export const alignmentToFlexAlignment = align => ({
-  center: 'center',
-  left: 'flexStart',
-  right: 'flexEnd'
-})[align];
-export const arrayRingLookup = collection => {
-  const len = collection.length;
-  return index => collection[(index % len + len) % len];
+export const alignmentToFlexAlignment = (align) => ({
+    center: 'center',
+    left: 'flexStart',
+    right: 'flexEnd',
+}[align]);
+export const arrayRingLookup = (collection) => {
+    const len = collection.length;
+    return (index) => collection[((index % len) + len) % len];
 };
-export const noop = () => {};
+export const noop = () => { };

package/dist/utils/mapTokenToProperty.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from '@vanilla-extract/css';
+import { Properties } from 'csstype';
+declare type PropValue<T> = T extends Record<string | number, infer U> ? U : never;
+export declare const mapTokenToProperty: <T>(record: T, property: keyof Properties<0 | (string & {}), string & {}> | ((value: PropValue<T>) => CSSProperties), omitKeys?: string[]) => Record<keyof T, CSSProperties>;
+export {};
+//# sourceMappingURL=mapTokenToProperty.d.ts.map

package/dist/utils/mapTokenToProperty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapTokenToProperty.d.ts","sourceRoot":"","sources":["../../lib/utils/mapTokenToProperty.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,aAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE3E,eAAO,MAAM,kBAAkB,wGAEM,aAAa,cACvC,MAAM,EAAE,mCAchB,CAAC"}

package/dist/utils/mapTokenToProperty.js

@@ -1,22 +1,10 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-export const mapTokenToProperty = function mapTokenToProperty(record, property) {
-  let omitKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return Object.entries(record).filter(_ref => {
-    let [key] = _ref;
-    return !omitKeys.includes(key);
-  }).reduce((result, _ref2) => {
-    let [key, value] = _ref2;
-    return _objectSpread(_objectSpread({}, result), {}, {
-      [key]: _objectSpread({}, typeof property === 'function' ? property(value) : {
-        [property]: value
-      })
-    });
-  }, {});
-};
+export const mapTokenToProperty = (record, property, omitKeys = []) => Object.entries(record)
+    .filter(([key]) => !omitKeys.includes(key))
+    .reduce((result, [key, value]) => ({
+    ...result,
+    [key]: {
+        ...(typeof property === 'function'
+            ? property(value)
+            : { [property]: value }),
+    },
+}), {});

package/dist/utils/resolveResponsiveProps.d.ts

@@ -0,0 +1,7 @@
+import { breakpoints } from '../themes/makeTheme';
+export declare type ResponsiveProp<T> = T | T[];
+declare type BreakpointStyleMap = Record<keyof typeof breakpoints, any>;
+export declare const resolveResponsiveStyle: <Tokens extends string | number>(responsiveArgument: ResponsiveProp<Tokens>, breakpointTokenMap: Record<Tokens, BreakpointStyleMap>) => any;
+export declare function getEarliestKnownToken<Tokens extends string | number | boolean | {}>(responsiveArgument: Tokens[], counter: number): Tokens;
+export {};
+//# sourceMappingURL=resolveResponsiveProps.d.ts.map

package/dist/utils/resolveResponsiveProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveResponsiveProps.d.ts","sourceRoot":"","sources":["../../lib/utils/resolveResponsiveProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,oBAAY,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAExC,aAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,OAAO,WAAW,EAAE,GAAG,CAAC,CAAC;AAShE,eAAO,MAAM,sBAAsB,6IAalC,CAAC;AAwBF,wBAAgB,qBAAqB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAClF,kBAAkB,EAAE,MAAM,EAAE,EAC5B,OAAO,EAAE,MAAM,GACb,MAAM,CAaR"}

package/dist/utils/resolveResponsiveProps.js

@@ -1,35 +1,37 @@
-"use strict";
-
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import clsx from 'clsx';
-const responsiveTokenOrder = ['mobile', 'tablet', 'desktop', 'largeDesktop'];
+const responsiveTokenOrder = [
+    'mobile',
+    'tablet',
+    'desktop',
+    'largeDesktop',
+];
 export const resolveResponsiveStyle = (responsiveArgument, breakpointTokenMap) => {
-  if (responsiveArgument === void 0 || responsiveArgument === null) return void 0;
-  if (!Array.isArray(responsiveArgument)) return breakpointTokenMap[responsiveArgument] ? breakpointTokenMap[responsiveArgument].mobile : void 0;
-  return clsx(_toConsumableArray(buildClassFor(responsiveArgument, breakpointTokenMap)));
+    if (responsiveArgument === void 0 || responsiveArgument === null)
+        return void 0;
+    if (!Array.isArray(responsiveArgument))
+        return breakpointTokenMap[responsiveArgument]
+            ? breakpointTokenMap[responsiveArgument].mobile
+            : void 0;
+    return clsx([...buildClassFor(responsiveArgument, breakpointTokenMap)]);
 };
-
 function* buildClassFor(responsiveArgument, breakpointTokenMap) {
-  let counter = 0;
-  const maxLoops = Math.max(responsiveArgument.length, responsiveTokenOrder.length);
-
-  while (counter < maxLoops) {
-    var _responsiveArgument$c;
-
-    const orderToken = responsiveTokenOrder[counter];
-    const result = breakpointTokenMap[(_responsiveArgument$c = responsiveArgument === null || responsiveArgument === void 0 ? void 0 : responsiveArgument[counter]) !== null && _responsiveArgument$c !== void 0 ? _responsiveArgument$c : getEarliestKnownToken(responsiveArgument, counter)];
-    yield result ? result[orderToken] : void 0;
-    ++counter;
-  }
+    let counter = 0;
+    const maxLoops = Math.max(responsiveArgument.length, responsiveTokenOrder.length);
+    while (counter < maxLoops) {
+        const orderToken = responsiveTokenOrder[counter];
+        const result = breakpointTokenMap[responsiveArgument?.[counter] ??
+            getEarliestKnownToken(responsiveArgument, counter)];
+        yield result ? result[orderToken] : void 0;
+        ++counter;
+    }
 }
-
 export function getEarliestKnownToken(responsiveArgument, counter) {
-  let idx = counter;
-
-  do {
-    --idx;
-    if (responsiveArgument[idx] !== undefined && responsiveArgument[idx] !== null) return responsiveArgument[idx];
-  } while (idx !== 0);
-
-  return '';
-}
+    let idx = counter;
+    do {
+        --idx;
+        if (responsiveArgument[idx] !== undefined &&
+            responsiveArgument[idx] !== null)
+            return responsiveArgument[idx];
+    } while (idx !== 0);
+    return '';
+}

package/dist/utils/responsiveProps.css.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from '@vanilla-extract/css';
+import { Properties } from 'csstype';
+export declare type ResponsiveProp<T extends any> = T | T[];
+export declare const makeResponsiveStyle: <Token extends Record<string | number, any>>(tokens: any, property: ((value: any) => CSSProperties) | keyof Properties<0 | (string & {}), string & {}>) => Record<keyof Token, any>;
+//# sourceMappingURL=responsiveProps.css.d.ts.map

package/dist/utils/responsiveProps.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveProps.css.d.ts","sourceRoot":"","sources":["../../lib/utils/responsiveProps.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAS,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,oBAAY,cAAc,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAIpD,eAAO,MAAM,mBAAmB,+EAEZ,GAAG,KAAK,aAAa,iFAoBS,CAAC"}

package/dist/utils/responsiveProps.css.js

@@ -1,31 +1,19 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/utils/responsiveProps.css.ts", "@autoguru/overdrive");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import { style } from '@vanilla-extract/css';
-import { breakpoints } from "../themes/makeTheme.js";
-import { responsiveStyle } from "./responsiveStyle.js";
-export const makeResponsiveStyle = (tokens, property) => Object.entries(tokens || {}).reduce((results, _ref) => {
-  let [key, value] = _ref;
-  const breakpointsKeys = Object.keys(breakpoints);
-  return _objectSpread(_objectSpread({}, results), {}, {
-    [key]: breakpointsKeys.reduce((bpList, bp) => {
-      return _objectSpread(_objectSpread({}, bpList), {}, {
-        [bp]: style(responsiveStyle({
-          [bp]: typeof property === 'string' ? {
-            [property]: value
-          } : property(value)
-        }), "makeResponsiveStyle_key_bp")
-      });
-    }, {})
-  });
+import { breakpoints } from '../themes/makeTheme';
+import { responsiveStyle } from './responsiveStyle';
+export const makeResponsiveStyle = (tokens, property) => Object.entries(tokens || {}).reduce((results, [key, value]) => {
+    const breakpointsKeys = Object.keys(breakpoints);
+    return {
+        ...results,
+        [key]: breakpointsKeys.reduce((bpList, bp) => {
+            return {
+                ...bpList,
+                [bp]: style(responsiveStyle({
+                    [bp]: typeof property === 'string'
+                        ? { [property]: value }
+                        : property(value),
+                })),
+            };
+        }, {}),
+    };
 }, {});
-
-__vanilla_filescope__.endFileScope();

package/dist/utils/responsiveStyle.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties, StyleWithSelectors } from '@vanilla-extract/css/dist/declarations/src/types';
+import { breakpoints } from '../themes/makeTheme';
+export declare const responsiveStyle: (breakpointsEntries: Partial<Record<keyof typeof breakpoints, StyleWithSelectors>>) => CSSProperties;
+//# sourceMappingURL=responsiveStyle.d.ts.map

package/dist/utils/responsiveStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveStyle.d.ts","sourceRoot":"","sources":["../../lib/utils/responsiveStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,aAAa,EACb,kBAAkB,EAClB,MAAM,kDAAkD,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,eAAO,MAAM,eAAe,uBACP,QACnB,OAAO,MAAM,kBAAkB,EAAE,kBAAkB,CAAC,CACpD,KACC,aAmBF,CAAC"}

package/dist/utils/responsiveStyle.js

@@ -1,27 +1,17 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import { breakpoints } from "../themes/makeTheme.js";
-export const responsiveStyle = breakpointsEntries => {
-  const styles = {};
-
-  for (const [query, style] of Object.entries(breakpointsEntries)) {
-    if (query === 'mobile') {
-      Object.assign(styles, style);
-      continue;
+import { breakpoints } from '../themes/makeTheme';
+export const responsiveStyle = (breakpointsEntries) => {
+    const styles = {};
+    for (const [query, style] of Object.entries(breakpointsEntries)) {
+        if (query === 'mobile') {
+            Object.assign(styles, style);
+            continue;
+        }
+        Object.assign(styles, {
+            '@media': {
+                ...styles['@media'],
+                [`screen and (min-width: ${breakpoints[query]})`]: style,
+            },
+        });
     }
-
-    Object.assign(styles, {
-      '@media': _objectSpread(_objectSpread({}, styles['@media']), {}, {
-        ["screen and (min-width: ".concat(breakpoints[query], ")")]: style
-      })
-    });
-  }
-
-  return styles;
-};
+    return styles;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.0.3",
+	"version": "4.1.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",