@autoguru/overdrive 4.1.6 → 4.1.9

package/dist/themes/flat_red/tokens.js

@@ -1,182 +1,186 @@
-import { tokens as baseTokens } from '../base/tokens';
-import { buildColourGamut } from '../makeTheme';
+"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 { tokens as baseTokens } from "../base/tokens.js";
+import { buildColourGamut } from "../makeTheme.js";
 const colours = {
-    gray: {
-        900: '#263238',
-        800: '#37474F',
-        700: '#455A64',
-        600: '#607D8B',
-        500: '#78909C',
-        400: '#90A4AE',
-        300: '#B0BEC5',
-        200: '#CFD8DC',
-        100: '#ECEFF1',
-    },
-    green: {
-        900: '#007800',
-        800: '#009b00',
-        700: '#00af00',
-        600: '#00c400',
-        500: '#00d500',
-        400: '#52dc42',
-        300: '#7ce36a',
-        200: '#a6ec98',
-        100: '#cbf4c1',
-    },
-    blue: {
-        900: '#1a259c',
-        800: '#3530aa',
-        700: '#4336b2',
-        600: '#523ebb',
-        500: '#5c43c2',
-        400: '#765ecb',
-        300: '#8f7ad5',
-        200: '#b0a1e0',
-        100: '#cfc6ec',
-    },
-    yellow: {
-        900: '#cb5300',
-        800: '#d56b00',
-        700: '#db7903',
-        600: '#e18807',
-        500: '#e5930b',
-        400: '#e8a229',
-        300: '#ebb24e',
-        200: '#f0c880',
-        100: '#f6ddb2',
-    },
-    red: {
-        900: '#d50000',
-        800: '#ED0C06',
-        700: '#fb1e0d',
-        600: '#ff2813',
-        500: '#ff3018',
-        400: '#ff5a3c',
-        300: '#ff7d5f',
-        200: '#ffa48d',
-        100: '#ffc8ba',
-    },
+  gray: {
+    900: '#263238',
+    800: '#37474F',
+    700: '#455A64',
+    600: '#607D8B',
+    500: '#78909C',
+    400: '#90A4AE',
+    300: '#B0BEC5',
+    200: '#CFD8DC',
+    100: '#ECEFF1'
+  },
+  green: {
+    900: '#007800',
+    800: '#009b00',
+    700: '#00af00',
+    600: '#00c400',
+    500: '#00d500',
+    400: '#52dc42',
+    300: '#7ce36a',
+    200: '#a6ec98',
+    100: '#cbf4c1'
+  },
+  blue: {
+    900: '#1a259c',
+    800: '#3530aa',
+    700: '#4336b2',
+    600: '#523ebb',
+    500: '#5c43c2',
+    400: '#765ecb',
+    300: '#8f7ad5',
+    200: '#b0a1e0',
+    100: '#cfc6ec'
+  },
+  yellow: {
+    900: '#cb5300',
+    800: '#d56b00',
+    700: '#db7903',
+    600: '#e18807',
+    500: '#e5930b',
+    400: '#e8a229',
+    300: '#ebb24e',
+    200: '#f0c880',
+    100: '#f6ddb2'
+  },
+  red: {
+    900: '#d50000',
+    800: '#ED0C06',
+    700: '#fb1e0d',
+    600: '#ff2813',
+    500: '#ff3018',
+    400: '#ff5a3c',
+    300: '#ff7d5f',
+    200: '#ffa48d',
+    100: '#ffc8ba'
+  }
 };
 const white = '#fff';
 const secondaryForeground = colours.blue['800'];
 const flatElevation = '0 0 0 0 rgba(0, 0, 0, 0.0)';
-export const tokens = {
-    ...baseTokens,
-    colours: {
-        gamut: {
-            ...buildColourGamut(colours),
-            white,
+export const tokens = _objectSpread(_objectSpread({}, baseTokens), {}, {
+  colours: {
+    gamut: _objectSpread(_objectSpread({}, buildColourGamut(colours)), {}, {
+      white
+    }),
+    foreground: {
+      body: colours.gray['900'],
+      link: colours.green['600']
+    },
+    background: {
+      body: white,
+      light: colours.gray['200'],
+      neutral: colours.gray['400'],
+      neutralDark: colours.gray['800']
+    },
+    intent: {
+      primary: {
+        background: {
+          standard: colours.red['600'],
+          mild: colours.red['100'],
+          strong: colours.red['900']
         },
-        foreground: {
-            body: colours.gray['900'],
-            link: colours.green['600'],
+        foreground: white
+      },
+      secondary: {
+        background: {
+          standard: white,
+          mild: white,
+          strong: colours.gray['100']
         },
+        foreground: secondaryForeground
+      },
+      shine: {
         background: {
-            body: white,
-            light: colours.gray['200'],
-            neutral: colours.gray['400'],
-            neutralDark: colours.gray['800'],
+          standard: colours.gray['200'],
+          mild: colours.gray['100'],
+          strong: colours.gray['300']
         },
-        intent: {
-            primary: {
-                background: {
-                    standard: colours.red['600'],
-                    mild: colours.red['100'],
-                    strong: colours.red['900'],
-                },
-                foreground: white,
-            },
-            secondary: {
-                background: {
-                    standard: white,
-                    mild: white,
-                    strong: colours.gray['100'],
-                },
-                foreground: secondaryForeground,
-            },
-            shine: {
-                background: {
-                    standard: colours.gray['200'],
-                    mild: colours.gray['100'],
-                    strong: colours.gray['300'],
-                },
-                foreground: colours.yellow['500'],
-            },
-            danger: {
-                background: {
-                    standard: colours.red['600'],
-                    mild: colours.red['100'],
-                    strong: colours.red['800'],
-                },
-                foreground: white,
-            },
-            warning: {
-                background: {
-                    standard: colours.yellow['800'],
-                    mild: colours.yellow['100'],
-                    strong: colours.yellow['900'],
-                },
-                foreground: colours.yellow['200'],
-            },
-            neutral: {
-                background: {
-                    standard: colours.gray['700'],
-                    mild: colours.gray['100'],
-                    strong: colours.gray['900'],
-                },
-                foreground: white,
-            },
-            success: {
-                background: {
-                    standard: colours.green['700'],
-                    mild: colours.green['100'],
-                    strong: colours.green['900'],
-                },
-                foreground: colours.green['200'],
-            },
-            information: {
-                background: {
-                    standard: colours.blue['800'],
-                    mild: colours.blue['100'],
-                    strong: colours.blue['900'],
-                },
-                foreground: colours.blue['200'],
-            },
+        foreground: colours.yellow['500']
+      },
+      danger: {
+        background: {
+          standard: colours.red['600'],
+          mild: colours.red['100'],
+          strong: colours.red['800']
         },
-    },
-    elevation: {
-        none: 'none',
-        '1': flatElevation,
-        '2': flatElevation,
-        '3': flatElevation,
-        '4': flatElevation,
-        '5': flatElevation,
-    },
-    border: {
-        width: {
-            none: '0',
-            '1': '1px',
-            '2': '2px',
-            '3': '4px',
+        foreground: white
+      },
+      warning: {
+        background: {
+          standard: colours.yellow['800'],
+          mild: colours.yellow['100'],
+          strong: colours.yellow['900']
+        },
+        foreground: colours.yellow['200']
+      },
+      neutral: {
+        background: {
+          standard: colours.gray['700'],
+          mild: colours.gray['100'],
+          strong: colours.gray['900']
         },
-        colours: {
-            light: colours.gray['200'],
-            gray: colours.gray['300'],
-            dark: colours.gray['900'],
+        foreground: white
+      },
+      success: {
+        background: {
+          standard: colours.green['700'],
+          mild: colours.green['100'],
+          strong: colours.green['900']
         },
-        radius: {
-            none: 'none',
-            pill: `${1e9}px`,
-            full: '50%',
-            min: 'none',
-            '1': 'none',
+        foreground: colours.green['200']
+      },
+      information: {
+        background: {
+          standard: colours.blue['800'],
+          mild: colours.blue['100'],
+          strong: colours.blue['900']
         },
+        foreground: colours.blue['200']
+      }
+    }
+  },
+  elevation: {
+    none: 'none',
+    '1': flatElevation,
+    '2': flatElevation,
+    '3': flatElevation,
+    '4': flatElevation,
+    '5': flatElevation
+  },
+  border: {
+    width: {
+      none: '0',
+      '1': '1px',
+      '2': '2px',
+      '3': '4px'
     },
-    typography: {
-        ...baseTokens.typography,
-        colour: {
-            ...baseTokens.typography.colour,
-            primary: colours.red['600'],
-        },
+    colours: {
+      light: colours.gray['200'],
+      gray: colours.gray['300'],
+      dark: colours.gray['900']
     },
-};
+    radius: {
+      none: 'none',
+      pill: "".concat(1e9, "px"),
+      full: '50%',
+      min: 'none',
+      '1': 'none'
+    }
+  },
+  typography: _objectSpread(_objectSpread({}, baseTokens.typography), {}, {
+    colour: _objectSpread(_objectSpread({}, baseTokens.typography.colour), {}, {
+      primary: colours.red['600']
+    })
+  })
+});

package/dist/themes/flat_red/vars.css.js

@@ -1,4 +1,12 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/themes/flat_red/vars.css.ts", "@autoguru/overdrive");
+
 import { createTheme } from '@vanilla-extract/css';
-import { vars as baseVars } from '../base/vars.css';
-import { tokens } from './tokens';
+import { vars as baseVars } from "../base/vars.css.js";
+import { tokens } from "./tokens.js";
 export const themeRef = createTheme(baseVars, tokens, 'flatRed');
+
+__vanilla_filescope__.endFileScope();

package/dist/themes/helpers.js

@@ -1,11 +1,10 @@
+"use strict";
+
 import { colord } from 'colord';
-export const shadedColour = (colour, intensity, direction, isDarkTheme = false, transparency = 0) => {
-    const intensityValue = typeof intensity === 'string' ? Number(intensity) : intensity;
-    const transparencyValue = typeof transparency === 'string' ? Number(transparency) : transparency;
-    return colord(colour)[(!isDarkTheme && direction === 'backward') ||
-        (isDarkTheme && direction === 'forward')
-        ? 'darken'
-        : 'lighten'](intensityValue || void 0)
-        .alpha(typeof transparencyValue === 'number' ? 1 - transparencyValue : 1)
-        .toHex();
-};
+export const shadedColour = function shadedColour(colour, intensity, direction) {
+  let isDarkTheme = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let transparency = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  const intensityValue = typeof intensity === 'string' ? Number(intensity) : intensity;
+  const transparencyValue = typeof transparency === 'string' ? Number(transparency) : transparency;
+  return colord(colour)[!isDarkTheme && direction === 'backward' || isDarkTheme && direction === 'forward' ? 'darken' : 'lighten'](intensityValue || void 0).alpha(typeof transparencyValue === 'number' ? 1 - transparencyValue : 1).toHex();
+};

package/dist/themes/index.js

@@ -1,2 +1,4 @@
-export { default as baseTheme } from './base';
-export { default as flatRedTheme } from './flat_red';
+"use strict";
+
+export { default as baseTheme } from "./base/index.js";
+export { default as flatRedTheme } from "./flat_red/index.js";

package/dist/themes/makeTheme.js

@@ -1,22 +1,33 @@
+"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 breakpoints = {
-    mobile: '0px',
-    tablet: '768px',
-    desktop: '1024px',
-    largeDesktop: '1440px',
+  mobile: '0px',
+  tablet: '768px',
+  desktop: '1024px',
+  largeDesktop: '1440px'
 };
-export const makeRuntimeTokens = (tokens, runtimeBreakpoints = breakpoints) => ({
+export const makeRuntimeTokens = function makeRuntimeTokens(tokens) {
+  let runtimeBreakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : breakpoints;
+  return {
     breakpoints: runtimeBreakpoints,
     body: {
-        colour: tokens.colours.foreground.body,
-        backgroundColour: tokens.colours.background.body,
-    },
-});
-export const buildColourGamut = (colours) => Object.entries(colours).reduce((result, [name, colourGrades]) => ({
-    ...result,
-    ...Object.entries(colourGrades).reduce((grades, [colourGradeName, colour]) => {
-        return {
-            ...grades,
-            [`${name}${colourGradeName}`]: colour,
-        };
-    }, {}),
-}), {});
+      colour: tokens.colours.foreground.body,
+      backgroundColour: tokens.colours.background.body
+    }
+  };
+};
+export const buildColourGamut = colours => Object.entries(colours).reduce((result, _ref) => {
+  let [name, colourGrades] = _ref;
+  return _objectSpread(_objectSpread({}, result), Object.entries(colourGrades).reduce((grades, _ref2) => {
+    let [colourGradeName, colour] = _ref2;
+    return _objectSpread(_objectSpread({}, grades), {}, {
+      ["".concat(name).concat(colourGradeName)]: colour
+    });
+  }, {}));
+}, {});

package/dist/themes/tokens.js

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

package/dist/utils/index.js

@@ -1,94 +1,110 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+"use strict";
+
+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 ?? (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);
+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());
     }
-    else if (ref) {
-        ref.current = value;
+  }, []);
+  useEffect(() => {
+    if (!serverHandoffComplete) {
+      serverHandoffComplete = true;
     }
+  }, []);
+  return id === null ? null : "od-".concat(String(id));
 };
-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), []);
+export const setRef = (ref, value) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
 };
-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);
-    };
+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;
+};
+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);
+  }, []);
+};
+
+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;
     requestAnimationFrame(step);
-    return cancel;
+  };
+
+  requestAnimationFrame(step);
+  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 = () => {};