@autoguru/overdrive 4.11.0 → 4.11.1

package/dist/components/Box/Box.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "opacity", "className", "alignItems", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
+const _excluded = ["is", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginLeft", "marginRight", "display", "width", "height", "position", "overflow", "userSelect", "textAlign", "pointerEvents", "borderColour", "borderColourX", "borderColourY", "borderColourTop", "borderColourRight", "borderColourBottom", "borderColourLeft", "borderWidth", "borderWidthX", "borderWidthY", "borderWidthTop", "borderWidthRight", "borderWidthBottom", "borderWidthLeft", "boxShadow", "borderRadius", "backgroundColour", "colour", "opacity", "className", "alignItems", "order", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "children"];
 
 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; }
 
@@ -31,7 +31,7 @@ export const Box = forwardRef((_ref, ref) => {
     marginLeft,
     marginRight,
     display,
-    width = 'none',
+    width,
     height,
     position,
     overflow,
@@ -55,9 +55,11 @@ export const Box = forwardRef((_ref, ref) => {
     boxShadow,
     borderRadius,
     backgroundColour,
+    colour,
     opacity,
     className = '',
     alignItems,
+    order,
     flexDirection,
     flexGrow,
     flexShrink,
@@ -70,7 +72,9 @@ export const Box = forwardRef((_ref, ref) => {
   const cls = useBoxStyles({
     is: Component,
     alignItems,
+    order,
     backgroundColour,
+    colour,
     borderColour,
     borderColourBottom,
     borderColourLeft,

package/dist/components/Box/argTypes.js

@@ -11,6 +11,7 @@ const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRi
 const boxShadowOptions = ['none', '1', '2', '3', '4', '5'];
 const borderRadiusOptions = ['none', '1', 'min', 'full', 'pill'];
 const widthOptions = ['full', 'none'];
+const oderOptions = [0, 1, 2];
 export const boxArgTypes = _objectSpread({
   boxShadow: {
     options: boxShadowOptions,
@@ -60,6 +61,13 @@ export const boxArgTypes = _objectSpread({
     control: {
       type: 'select'
     }
+  },
+  order: {
+    options: oderOptions,
+    defaultValue: null,
+    control: {
+      type: 'select'
+    }
   }
 }, scaledProps.reduce((argTypes, prop) => {
   argTypes[prop] = {

package/dist/components/Box/stories.js

@@ -39,7 +39,8 @@ const standardProps = {
   padding: ['2', '4'],
   marginBottom: ['2', '4', '5', '8'],
   marginX: ['none', '3', '5'],
-  backgroundColour: 'green500',
+  backgroundColour: 'primary',
+  colour: 'primary',
   borderRadius: 'pill',
   boxShadow: ['none', '1', '2', '3']
 };

package/dist/components/Box/useBoxStyles.css.js

@@ -31,6 +31,15 @@ const borderColours = _objectSpread(_objectSpread({}, vars.border.colours), Obje
   [entry[0]]: entry[1].border
 }), {}));
 
+const backgroundColourTokens = _objectSpread(_objectSpread(_objectSpread({}, vars.colours.gamut), Object.entries(vars.colours.intent).reduce((map, entry) => _objectSpread(_objectSpread({}, map), {}, {
+  [entry[0]]: entry[1].background.standard
+}), {})), {}, {
+  transparent: 'transparent'
+});
+
+const foregroundColourTokens = Object.entries(vars.colours.intent).reduce((map, entry) => _objectSpread(_objectSpread({}, map), {}, {
+  [entry[0]]: entry[1].foreground
+}), {});
 export const border = {
   style: style({
     borderStyle: 'solid'
@@ -49,15 +58,14 @@ export const border = {
   }
 };
 export const borderRadius = makeResponsiveStyle(vars.border.radius, 'borderRadius');
-export const backgroundColours = styleVariants(mapTokenToProperty(_objectSpread(_objectSpread({}, vars.colours.gamut), {}, {
-  transparent: 'transparent'
-}), 'backgroundColor'), "backgroundColours");
+export const backgroundColours = styleVariants(mapTokenToProperty(backgroundColourTokens, 'backgroundColor'), "backgroundColours");
+export const colours = styleVariants(mapTokenToProperty(foregroundColourTokens, 'color'), "colours");
 export const width = styleVariants({
   full: {
     width: '100%'
   },
   none: {
-    width: void 0
+    width: 'auto'
   }
 }, "width");
 export const height = styleVariants({
@@ -103,6 +111,11 @@ export const userSelect = styleVariants({
     userSelect: 'none'
   }
 }, "userSelect");
+export const order = makeResponsiveStyle({
+  0: '0',
+  1: '1',
+  2: '2'
+}, 'order');
 export const alignItems = makeResponsiveStyle({
   flexStart: 'flex-start',
   center: 'center',

package/dist/components/Box/useBoxStyles.js

@@ -39,6 +39,7 @@ export const useBoxStyles = _ref => {
     borderColourLeft,
     borderRadius,
     backgroundColour,
+    colour,
     opacity,
     width,
     height,
@@ -48,6 +49,7 @@ export const useBoxStyles = _ref => {
     textAlign,
     pointerEvents,
     alignItems,
+    order,
     flexDirection,
     flexGrow,
     flexShrink,
@@ -72,6 +74,6 @@ export const useBoxStyles = _ref => {
   const resolvedBorderColourBottom = borderColourBottom || borderColourY || borderColour;
   const resolvedBorderColourLeft = borderColourLeft || borderColour || borderColour;
   const hasBorder = resolvedBorderWidthTop || resolvedBorderWidthRight || resolvedBorderWidthBottom || resolvedBorderWidthLeft;
-  return clsx(typeof is === 'string' ? [resetStyles.element[is]] : [resetStyles.element.div], resolveResponsiveStyle(resolvedPaddingTop, styles.padding.top), resolveResponsiveStyle(resolvedPaddingRight, styles.padding.right), resolveResponsiveStyle(resolvedPaddingBottom, styles.padding.bottom), resolveResponsiveStyle(resolvedPaddingLeft, styles.padding.left), resolveResponsiveStyle(resolvedMarginTop, styles.margin.top), resolveResponsiveStyle(resolvedMarginRight, styles.margin.right), resolveResponsiveStyle(resolvedMarginBottom, styles.margin.bottom), resolveResponsiveStyle(resolvedMarginLeft, styles.margin.left), styles.display[display], styles.width[width], styles.height[height], styles.position[position], styles.overflow[overflow], styles.userSelect[userSelect], styles.textAlign[textAlign], styles.pointerEvents[pointerEvents], hasBorder && styles.border.style, hasBorder && resolvedBorderColourTop && styles.border.colour.top[resolvedBorderColourTop], hasBorder && resolvedBorderColourRight && styles.border.colour.right[resolvedBorderColourRight], hasBorder && resolvedBorderColourBottom && styles.border.colour.bottom[resolvedBorderColourBottom], hasBorder && resolvedBorderColourLeft && styles.border.colour.left[resolvedBorderColourLeft], hasBorder && resolvedBorderWidthTop && resolveResponsiveStyle(resolvedBorderWidthTop, styles.border.width.top), hasBorder && resolvedBorderWidthRight && resolveResponsiveStyle(resolvedBorderWidthRight, styles.border.width.right), hasBorder && resolvedBorderWidthBottom && resolveResponsiveStyle(resolvedBorderWidthBottom, styles.border.width.bottom), hasBorder && resolvedBorderWidthLeft && resolveResponsiveStyle(resolvedBorderWidthLeft, styles.border.width.left), resolveResponsiveStyle(boxShadow, styles.boxShadow), borderRadius && resolveResponsiveStyle(borderRadius, styles.borderRadius), styles.backgroundColours[backgroundColour], styles.opacity[opacity], alignItems && resolveResponsiveStyle(alignItems, styles.alignItems), flexDirection && resolveResponsiveStyle(flexDirection, styles.flexDirection), styles.flexGrow[flexGrow], styles.flexShrink[flexShrink], styles.flexWrap[flexWrap], justifyContent && resolveResponsiveStyle(justifyContent, styles.justifyContent), className);
+  return clsx(typeof is === 'string' ? [resetStyles.element[is]] : [resetStyles.element.div], resolveResponsiveStyle(resolvedPaddingTop, styles.padding.top), resolveResponsiveStyle(resolvedPaddingRight, styles.padding.right), resolveResponsiveStyle(resolvedPaddingBottom, styles.padding.bottom), resolveResponsiveStyle(resolvedPaddingLeft, styles.padding.left), resolveResponsiveStyle(resolvedMarginTop, styles.margin.top), resolveResponsiveStyle(resolvedMarginRight, styles.margin.right), resolveResponsiveStyle(resolvedMarginBottom, styles.margin.bottom), resolveResponsiveStyle(resolvedMarginLeft, styles.margin.left), styles.display[display], styles.width[width], styles.height[height], styles.position[position], styles.overflow[overflow], styles.userSelect[userSelect], styles.textAlign[textAlign], styles.pointerEvents[pointerEvents], hasBorder && styles.border.style, hasBorder && resolvedBorderColourTop && styles.border.colour.top[resolvedBorderColourTop], hasBorder && resolvedBorderColourRight && styles.border.colour.right[resolvedBorderColourRight], hasBorder && resolvedBorderColourBottom && styles.border.colour.bottom[resolvedBorderColourBottom], hasBorder && resolvedBorderColourLeft && styles.border.colour.left[resolvedBorderColourLeft], hasBorder && resolvedBorderWidthTop && resolveResponsiveStyle(resolvedBorderWidthTop, styles.border.width.top), hasBorder && resolvedBorderWidthRight && resolveResponsiveStyle(resolvedBorderWidthRight, styles.border.width.right), hasBorder && resolvedBorderWidthBottom && resolveResponsiveStyle(resolvedBorderWidthBottom, styles.border.width.bottom), hasBorder && resolvedBorderWidthLeft && resolveResponsiveStyle(resolvedBorderWidthLeft, styles.border.width.left), resolveResponsiveStyle(boxShadow, styles.boxShadow), borderRadius && resolveResponsiveStyle(borderRadius, styles.borderRadius), styles.backgroundColours[backgroundColour], styles.colours[colour], styles.opacity[opacity], alignItems && resolveResponsiveStyle(alignItems, styles.alignItems), order && resolveResponsiveStyle(order, styles.order), flexDirection && resolveResponsiveStyle(flexDirection, styles.flexDirection), styles.flexGrow[flexGrow], styles.flexShrink[flexShrink], styles.flexWrap[flexWrap], justifyContent && resolveResponsiveStyle(justifyContent, styles.justifyContent), className);
 };
 export default useBoxStyles;

package/dist/components/Columns/Column.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "width", "alignSelf", "is", "noShrink", "grow"];
+const _excluded = ["className", "children", "width", "alignSelf", "is", "noShrink", "grow", "order"];
 
 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; }
 
@@ -24,7 +24,8 @@ export const Column = forwardRef((_ref, ref) => {
     alignSelf,
     is,
     noShrink = false,
-    grow = false
+    grow = false,
+    order
   } = _ref,
       boxProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -37,6 +38,7 @@ export const Column = forwardRef((_ref, ref) => {
   } = columnsContext;
   return _jsx(Box, {
     is: isList ? 'li' : 'div',
+    order: order,
     flexGrow: grow ? 1 : 0,
     flexShrink: noShrink ? 0 : void 0,
     className: [spaceXCls, spaceYCls, resolveResponsiveStyle(width, styles.width), styles.align[alignSelf]],

package/dist/components/Columns/stories.js

@@ -52,6 +52,7 @@ export default {
 const Template = args => _jsxs(Columns, _objectSpread(_objectSpread({}, args), {}, {
   children: [_jsx(Column, {
     width: ['full', '1/3', '1/5'],
+    order: [0, 2],
     is: "section",
     children: _jsx(Box, {
       borderColour: "gray",

package/dist/components/Section/stories.js

@@ -33,9 +33,10 @@ const boxPropsProps = {
   borderColour: 'dark',
   borderWidth: ['none', 'none', '1', '2'],
   padding: ['2', '4'],
+  backgroundColour: 'primary',
+  colour: 'primary',
   marginBottom: ['2', '4', '5', '8'],
   marginX: ['none', '3', '5'],
-  backgroundColour: 'green500',
   borderRadius: 'pill',
   boxShadow: ['none', '1', '2', '3']
 };

package/dist/themes/base/tokens.js

@@ -106,7 +106,7 @@ export const tokens = {
     intent: {
       primary: {
         background: {
-          standard: colours.green['600'],
+          standard: colours.green['700'],
           mild: colours.green['200'],
           strong: colours.green['900']
         },

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

@@ -7,6 +7,6 @@ __vanilla_filescope__.setFileScope("lib/themes/flat_red/vars.css.ts", "@autoguru
 import { createTheme } from '@vanilla-extract/css';
 import { themeContractVars } from "../theme.css.js";
 import { tokens } from "./tokens.js";
-export const themeRef = createTheme(themeContractVars, tokens, 'flatRed');
+export const themeRef = createTheme(themeContractVars, tokens, 'OD_flatRed');
 
 __vanilla_filescope__.endFileScope();

package/dist/themes/index.js

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

package/dist/themes/neutral/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { themeContractVars } from "../theme.css.js";
+import { tokens } from "./tokens.js";
+import { themeRef } from "./vars.css.js";
+export default {
+  name: 'neutralTheme',
+  themeRef,
+  vars: themeContractVars,
+  tokens
+};

package/dist/themes/neutral/tokens.js

@@ -0,0 +1,283 @@
+"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); 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 { buildColourGamut } from "../makeTheme.js";
+const colours = {
+  gray: {
+    '900': '#212338',
+    '800': '#34384c',
+    '700': '#484c5f',
+    '600': '#5c6172',
+    '500': '#6c7283',
+    '400': '#8f95a1',
+    '300': '#d4d9dd',
+    '200': '#eef0f2',
+    '100': '#fafbfc'
+  },
+  green: {
+    '900': '#078171',
+    '800': '#05987a',
+    '700': '#03af83',
+    '600': '#01c68c',
+    '500': '#00dd95',
+    '400': '#36e5aa',
+    '300': '#71edc2',
+    '200': '#e3f8f0',
+    '100': '#f2fdf9'
+  },
+  blue: {
+    '900': '#0d47a1',
+    '800': '#0d4bb7',
+    '700': '#0d50ce',
+    '600': '#0d54e5',
+    '500': '#0d59fc',
+    '400': '#4680fc',
+    '300': '#80a7fd',
+    '200': '#e1edfe',
+    '100': '#f3f8ff'
+  },
+  yellow: {
+    '900': '#f38e29',
+    '800': '#f69a1f',
+    '700': '#f9a715',
+    '600': '#fcb30b',
+    '500': '#ffc001',
+    '400': '#ffcf3d',
+    '300': '#ffde79',
+    '200': '#ffedb5',
+    '100': '#fffcf2'
+  },
+  red: {
+    '900': '#780502',
+    '800': '#96110e',
+    '700': '#b51e1a',
+    '600': '#d42b26',
+    '500': '#e12e28',
+    '400': '#e85f5b',
+    '300': '#ef918e',
+    '200': '#ffd4d4',
+    '100': '#fdf4f4'
+  }
+};
+const white = '#fff';
+const secondaryForeground = colours.gray['700'];
+export const tokens = {
+  mode: 'light',
+  body: {
+    backgroundColour: white,
+    colour: colours.gray['900']
+  },
+  contentWidth: {
+    small: '592px',
+    large: '1344px',
+    medium: '940px'
+  },
+  space: {
+    '1': '4px',
+    '2': '8px',
+    '3': '12px',
+    '4': '16px',
+    '5': '20px',
+    '6': '24px',
+    '7': '32px',
+    '8': '48px',
+    '9': '96px',
+    none: '0px'
+  },
+  colours: {
+    gamut: _objectSpread(_objectSpread({}, buildColourGamut(colours)), {}, {
+      white
+    }),
+    foreground: {
+      body: colours.gray['900'],
+      link: colours.blue['500']
+    },
+    background: {
+      body: white,
+      light: colours.gray['200'],
+      neutral: colours.gray['400'],
+      neutralDark: colours.gray['800']
+    },
+    intent: {
+      primary: {
+        background: {
+          standard: colours.gray['700'],
+          mild: colours.gray['200'],
+          strong: colours.gray['900']
+        },
+        foreground: white,
+        border: colours.gray['900']
+      },
+      secondary: {
+        background: {
+          standard: white,
+          mild: white,
+          strong: colours.gray['200']
+        },
+        foreground: secondaryForeground,
+        border: colours.gray['300']
+      },
+      shine: {
+        background: {
+          standard: colours.gray['200'],
+          mild: colours.gray['100'],
+          strong: colours.gray['300']
+        },
+        foreground: colours.yellow['500'],
+        border: colours.gray['300']
+      },
+      danger: {
+        background: {
+          standard: colours.red['600'],
+          mild: colours.red['100'],
+          strong: colours.red['800']
+        },
+        foreground: white,
+        border: colours.red['800']
+      },
+      warning: {
+        background: {
+          standard: colours.yellow['800'],
+          mild: colours.yellow['100'],
+          strong: colours.yellow['900']
+        },
+        foreground: white,
+        border: colours.yellow['900']
+      },
+      neutral: {
+        background: {
+          standard: colours.gray['700'],
+          mild: colours.gray['200'],
+          strong: colours.gray['900']
+        },
+        foreground: white,
+        border: colours.gray['900']
+      },
+      success: {
+        background: {
+          standard: colours.green['700'],
+          mild: colours.green['200'],
+          strong: colours.green['900']
+        },
+        foreground: colours.green['200'],
+        border: colours.green['900']
+      },
+      information: {
+        background: {
+          standard: colours.blue['800'],
+          mild: colours.blue['200'],
+          strong: colours.blue['900']
+        },
+        foreground: white,
+        border: colours.blue['900']
+      }
+    }
+  },
+  elevation: {
+    none: 'none',
+    '1': '0 1px 5px 0 rgba(0, 0, 0, 0.03), 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0, 0, 0, 0.05)',
+    '2': '0 1px 10px 0 rgba(0, 0, 0, 0.03),  0 4px 5px 0 rgba(0, 0, 0, 0.03),  0 2px 4px -1px rgba(0, 0, 0, 0.05)',
+    '3': '0 3px 14px 2px rgba(0, 0, 0, 0.03),  0 8px 10px 1px rgba(0, 0, 0, 0.03),  0 5px 5px -3px rgba(0, 0, 0, 0.05)',
+    '4': '0 6px 30px 5px rgba(0, 0, 0, 0.03), 0 16px 24px 2px rgba(0, 0, 0, 0.03), 0 8px 10px -5px rgba(0, 0, 0, 0.05)',
+    '5': '0 9px 46px 8px rgba(0, 0, 0, 0.03), 0 24px 38px 3px rgba(0, 0, 0, 0.03), 0 11px 15px -7px rgba(0, 0, 0, 0.05)'
+  },
+  border: {
+    width: {
+      none: '0',
+      '1': '1px',
+      '2': '2px',
+      '3': '4px'
+    },
+    colours: {
+      light: colours.gray['200'],
+      gray: colours.gray['300'],
+      dark: colours.gray['900']
+    },
+    radius: {
+      none: 'none',
+      pill: "".concat(1e9, "px"),
+      full: '50%',
+      '1': '4px',
+      min: '2px'
+    }
+  },
+  typography: {
+    size: {
+      '1': {
+        fontSize: '10px',
+        lineHeight: '12px'
+      },
+      '2': {
+        fontSize: '12px',
+        lineHeight: '18px'
+      },
+      '3': {
+        fontSize: '14px',
+        lineHeight: '20px'
+      },
+      '4': {
+        fontSize: '16px',
+        lineHeight: '22px'
+      },
+      '5': {
+        fontSize: '18px',
+        lineHeight: '26px'
+      },
+      '6': {
+        fontSize: '20px',
+        lineHeight: '28px'
+      },
+      '7': {
+        fontSize: '24px',
+        lineHeight: '30px'
+      },
+      '8': {
+        fontSize: '30px',
+        lineHeight: '40px'
+      },
+      '9': {
+        fontSize: '40px',
+        lineHeight: '48px'
+      }
+    },
+    colour: {
+      primary: colours.gray['800'],
+      secondary: colours.gray['600'],
+      shine: colours.yellow['500'],
+      link: colours.blue['500'],
+      dark: colours.gray['900'],
+      white,
+      muted: colours.gray['400'],
+      neutral: colours.gray['700'],
+      light: colours.gray['600'],
+      danger: colours.red['600'],
+      warning: colours.yellow['800'],
+      success: colours.green['600'],
+      information: colours.blue['500']
+    },
+    fontWeight: {
+      normal: '400',
+      semiBold: '500',
+      bold: '700'
+    }
+  },
+  animation: {
+    easing: {
+      standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+      decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+      accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
+    }
+  },
+  icon: {
+    size: {
+      small: '16px',
+      medium: '20px',
+      large: '32px'
+    }
+  }
+};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.11.0",
+	"version": "4.11.1",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -30,9 +30,9 @@
 		"access": "public"
 	},
 	"scripts": {
-		"typeCheck": "tsc",
-		"typeEmit": "tsc -d --declarationDir dist",
-		"build": "babel lib --out-dir dist --extensions '.ts,.tsx, .css' && yarn run typeEmit",
+		"lint": "tsc --noEmit --skipLibCheck",
+		"typeEmit": "tsc -d --declarationDir dist --emitDeclarationOnly",
+		"build": "babel lib --out-dir dist --extensions '.ts,.tsx, .css'",
 		"prepublishOnly": "yarn run build",
 		"watch": "tsc --watch"
 	},

package/dist/components/Actions/Actions.d.ts

@@ -1,8 +0,0 @@
-import { ComponentProps, FunctionComponent, ReactElement } from 'react';
-import { Columns } from '../Columns';
-export interface Props extends Partial<Pick<ComponentProps<typeof Columns>, 'noWrap' | 'wrappingDirection'>> {
-    children: ReactElement | ReactElement[];
-}
-export declare const Actions: FunctionComponent<Props>;
-export default Actions;
-//# sourceMappingURL=Actions.d.ts.map

package/dist/components/Actions/Actions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/Actions.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAU,OAAO,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,KAChB,SAAQ,OAAO,CACd,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,QAAQ,GAAG,mBAAmB,CAAC,CACpE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACxC;AAED,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAU5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Actions/index.d.ts

@@ -1,2 +0,0 @@
-export { Actions } from './Actions';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Actions/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/Alert/Alert.css.d.ts

@@ -1,4 +0,0 @@
-export declare const root: string;
-export declare const intent: Record<"primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information", string>;
-export declare const contained: string;
-//# sourceMappingURL=Alert.css.d.ts.map

package/dist/components/Alert/Alert.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QASf,CAAC;AAEH,eAAO,MAAM,MAAM,kHAWlB,CAAC;AAEF,eAAO,MAAM,SAAS,QAGpB,CAAC"}

package/dist/components/Alert/Alert.d.ts

@@ -1,15 +0,0 @@
-import { ComponentProps, FunctionComponent, ReactNode } from 'react';
-import { Button } from '../Button';
-import * as styles from './Alert.css';
-declare type Intent = keyof Omit<typeof styles.intent, 'neutral' | 'shine' | 'primary' | 'secondary'>;
-export interface Props {
-    children?: ReactNode;
-    className?: string;
-    intent?: Intent;
-    inline?: boolean;
-    dismissible?: boolean;
-    onRequestClose?: ComponentProps<typeof Button>['onClick'];
-}
-export declare const Alert: FunctionComponent<Props>;
-export default Alert;
-//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAKnC,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,aAAK,MAAM,GAAG,MAAM,IAAI,CACvB,OAAO,MAAM,CAAC,MAAM,EACpB,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAsE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/index.d.ts

@@ -1,2 +0,0 @@
-export { Alert } from './Alert';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Anchor/Anchor.css.d.ts

@@ -1,2 +0,0 @@
-export declare const root: string;
-//# sourceMappingURL=Anchor.css.d.ts.map

package/dist/components/Anchor/Anchor.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Anchor.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAGf,CAAC"}

package/dist/components/Anchor/Anchor.d.ts

@@ -1,16 +0,0 @@
-import { IconType } from '@autoguru/icons';
-import { ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
-export interface Props {
-    rel?: string;
-    href?: string;
-    title?: string;
-    target?: string;
-    className?: string;
-    is?: ElementType | ReactElement;
-    disabled?: boolean;
-    children?: ReactNode;
-    icon?: IconType;
-}
-export declare const Anchor: FunctionComponent<Props>;
-export default Anchor;
-//# sourceMappingURL=Anchor.d.ts.map

package/dist/components/Anchor/Anchor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAGN,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,KAAK;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAgD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/index.d.ts

@@ -1,2 +0,0 @@
-export { Anchor } from './Anchor';
-//# sourceMappingURL=index.d.ts.map