@autoguru/overdrive 4.11.0 → 4.11.2

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,KAChB,SAAQ,aAAa,EACpB,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CACvC;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,2EA6Hf,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,KAChB,SAAQ,aAAa,EACpB,IAAI,CACH,iBAAiB,CAAC,WAAW,CAAC,EAC9B,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CACvC;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAKD,eAAO,MAAM,GAAG,2EAiIf,CAAC;AAIF,eAAe,GAAG,CAAC"}

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAmCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA2DrE,CAAC"}
+{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAwCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAkErE,CAAC"}

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.d.ts

@@ -27,7 +27,8 @@ export declare const border: {
     };
 };
 export declare const borderRadius: Record<string | number, any>;
-export declare const backgroundColours: Record<"red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "white" | "transparent", string>;
+export declare const backgroundColours: Record<import("../../themes/tokens").ColourGamut | ("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "white" | "transparent", string>;
+export declare const colours: Record<"primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information", string>;
 export declare const width: Record<"none" | "full", string>;
 export declare const height: Record<"full", string>;
 export declare const position: Record<"fixed" | "absolute" | "relative", string>;
@@ -36,6 +37,7 @@ export declare const overflow: Record<"auto" | "hidden" | "visible" | "scroll",
 export declare const display: Record<"none" | "flex" | "contents" | "block" | "inline" | "inlineFlex" | "inlineBlock", string>;
 export declare const opacity: Record<0 | 1, string>;
 export declare const userSelect: Record<"none", string>;
+export declare const order: Record<string | number, any>;
 export declare const alignItems: Record<string | number, any>;
 export declare const flexDirection: Record<string | number, any>;
 export declare const flexGrow: Record<0 | 1, string>;

package/dist/components/Box/useBoxStyles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAkB1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAsBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,iCAOhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
+{"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AA2C1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAsBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,0LAK7B,CAAC;AAEF,eAAO,MAAM,OAAO,kHAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,iCAOhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}

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.d.ts

@@ -40,6 +40,7 @@ interface Border {
 }
 interface Flex {
     alignItems?: ResponsiveProp<keyof typeof styles.alignItems>;
+    order?: ResponsiveProp<keyof typeof styles.order>;
     flexDirection?: ResponsiveProp<keyof typeof styles.flexDirection>;
     flexGrow?: keyof typeof styles.flexGrow;
     flexShrink?: keyof typeof styles.flexShrink;
@@ -54,6 +55,7 @@ export interface BoxStyleProps extends Padding, Margin, Border, Flex {
     width?: keyof typeof styles.width;
     height?: keyof typeof styles.height;
     backgroundColour?: keyof typeof styles.backgroundColours;
+    colour?: keyof typeof styles.colours;
     opacity?: keyof typeof styles.opacity;
     overflow?: keyof typeof styles.overflow;
     userSelect?: keyof typeof styles.userSelect;
@@ -61,6 +63,6 @@ export interface BoxStyleProps extends Padding, Margin, Border, Flex {
     pointerEvents?: keyof typeof styles.pointerEvents;
     className?: Parameters<typeof clsx>[0];
 }
-export declare const useBoxStyles: ({ is, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, boxShadow, borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, borderColour, borderColourX, borderColourY, borderColourTop, borderColourRight, borderColourBottom, borderColourLeft, borderRadius, backgroundColour, opacity, width, height, position, overflow, userSelect, textAlign, pointerEvents, alignItems, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, className, }: BoxStyleProps) => string;
+export declare const useBoxStyles: ({ is, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, boxShadow, borderWidth, borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, borderColour, borderColourX, borderColourY, borderColourTop, borderColourRight, borderColourBottom, borderColourLeft, borderRadius, backgroundColour, colour, opacity, width, height, position, overflow, userSelect, textAlign, pointerEvents, alignItems, order, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, className, }: BoxStyleProps) => string;
 export default useBoxStyles;
 //# sourceMappingURL=useBoxStyles.d.ts.map

package/dist/components/Box/useBoxStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBoxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,UAAU,OAAO;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;CACpD;AAED,UAAU,MAAM;IACf,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;CACnD;AAGD,UAAU,MAAM;IACf,WAAW,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,iBAAiB,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAElE,YAAY,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAChE,kBAAkB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAG/D,YAAY,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,YAAY,CAAC,CAAC;CAChE;AAED,UAAU,IAAI;IACb,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACxC,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,cAAc,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI;IACnE,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;IAC9D,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IAEtC,QAAQ,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IAExC,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAEpC,gBAAgB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,iBAAiB,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IAEtC,QAAQ,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,aAAa,CAAC;IAElD,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,YAAY,4mBAiDtB,aAAa,WAmHf,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useBoxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.ts"],"names":[],"mappings":"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"}

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.d.ts

@@ -11,6 +11,6 @@ export interface Props extends Omit<ComponentProps<typeof Box>, 'width' | 'css'>
     className?: string;
     children: ReactNode | ReactNode[];
 }
-export declare const Column: React.ForwardRefExoticComponent<Pick<Props, "backgroundColour" | "width" | "min" | "size" | "muted" | "name" | "value" | "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "alignItems" | "alignSelf" | "boxShadow" | "color" | "content" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "translate" | "userSelect" | "borderRadius" | "borderWidth" | "margin" | "overflow" | "padding" | "start" | "hidden" | "default" | "wrap" | "open" | "multiple" | "disabled" | "key" | "is" | "className" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderWidthX" | "borderWidthY" | "borderWidthTop" | "borderWidthRight" | "borderWidthBottom" | "borderWidthLeft" | "borderColour" | "borderColourX" | "borderColourY" | "borderColourTop" | "borderColourRight" | "borderColourBottom" | "borderColourLeft" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noShrink" | "grow"> & React.RefAttributes<HTMLElement>>;
+export declare const Column: React.ForwardRefExoticComponent<Pick<Props, "colour" | "backgroundColour" | "width" | "min" | "size" | "muted" | "name" | "value" | "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "alignItems" | "alignSelf" | "boxShadow" | "color" | "content" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "translate" | "userSelect" | "borderRadius" | "borderWidth" | "margin" | "overflow" | "padding" | "start" | "hidden" | "default" | "wrap" | "open" | "multiple" | "disabled" | "key" | "is" | "className" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderWidthX" | "borderWidthY" | "borderWidthTop" | "borderWidthRight" | "borderWidthBottom" | "borderWidthLeft" | "borderColour" | "borderColourX" | "borderColourY" | "borderColourTop" | "borderColourRight" | "borderColourBottom" | "borderColourLeft" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "noShrink" | "grow"> & React.RefAttributes<HTMLElement>>;
 export default Column;
 //# sourceMappingURL=Column.d.ts.map

package/dist/components/Columns/Column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,SAAS,EAAc,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,6hNAiDlB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,SAAS,EAAc,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,kjNAmDlB,CAAC;AAEF,eAAe,MAAM,CAAC"}

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/Columns.d.ts

@@ -21,6 +21,6 @@ interface ColumnContextValue {
     isList: boolean;
 }
 export declare const ColumnContext: React.Context<ColumnContextValue | null>;
-export declare const Columns: React.ForwardRefExoticComponent<Pick<Props, "backgroundColour" | "space" | "width" | "min" | "size" | "muted" | "name" | "value" | "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "alignItems" | "boxShadow" | "color" | "content" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "translate" | "userSelect" | "borderRadius" | "borderWidth" | "columns" | "margin" | "overflow" | "padding" | "start" | "hidden" | "default" | "wrap" | "open" | "multiple" | "disabled" | "key" | "is" | "className" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderWidthX" | "borderWidthY" | "borderWidthTop" | "borderWidthRight" | "borderWidthBottom" | "borderWidthLeft" | "borderColour" | "borderColourX" | "borderColourY" | "borderColourTop" | "borderColourRight" | "borderColourBottom" | "borderColourLeft" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "noWrap" | "spaceX" | "spaceY" | "wrappingDirection"> & React.RefAttributes<HTMLElement>>;
+export declare const Columns: React.ForwardRefExoticComponent<Pick<Props, "colour" | "backgroundColour" | "space" | "width" | "min" | "size" | "muted" | "name" | "value" | "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "alignItems" | "boxShadow" | "color" | "content" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "translate" | "userSelect" | "borderRadius" | "borderWidth" | "columns" | "margin" | "overflow" | "padding" | "start" | "hidden" | "default" | "wrap" | "open" | "multiple" | "disabled" | "key" | "is" | "className" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderWidthX" | "borderWidthY" | "borderWidthTop" | "borderWidthRight" | "borderWidthBottom" | "borderWidthLeft" | "borderColour" | "borderColourX" | "borderColourY" | "borderColourTop" | "borderColourRight" | "borderColourBottom" | "borderColourLeft" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "noWrap" | "spaceX" | "spaceY" | "wrappingDirection"> & React.RefAttributes<HTMLElement>>;
 export default Columns;
 //# sourceMappingURL=Columns.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAGd,SAAS,EAET,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC3B,SAAS,MAAC;IACV,SAAS,MAAC;IACV,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAE5E,eAAO,MAAM,OAAO,glNAmEnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAGd,SAAS,EAET,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC3B,SAAS,MAAC;IACV,SAAS,MAAC;IACV,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAE5E,eAAO,MAAM,OAAO,qmNAmEnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

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.d.ts

@@ -1,3 +1,4 @@
 export { default as baseTheme } from './base';
 export { default as flatRedTheme } from './flat_red';
+export { default as neutralTheme } from './neutral';
 //# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC"}

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.d.ts

@@ -0,0 +1,267 @@
+declare const _default: {
+    name: string;
+    themeRef: string;
+    vars: import("@vanilla-extract/private").MapLeafNodes<{
+        mode: string;
+        body: {
+            backgroundColour: string;
+            colour: string;
+        };
+        contentWidth: {
+            small: string;
+            large: string;
+            medium: string;
+        };
+        space: {
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            '5': string;
+            '6': string;
+            '7': string;
+            '8': string;
+            '9': string;
+            none: string;
+        };
+        colours: {
+            gamut: {
+                white: string;
+                red900: string;
+                red800: string;
+                red700: string;
+                red600: string;
+                red500: string;
+                red400: string;
+                red300: string;
+                red200: string;
+                red100: string;
+                gray900: string;
+                gray800: string;
+                gray700: string;
+                gray600: string;
+                gray500: string;
+                gray400: string;
+                gray300: string;
+                gray200: string;
+                gray100: string;
+                green900: string;
+                green800: string;
+                green700: string;
+                green600: string;
+                green500: string;
+                green400: string;
+                green300: string;
+                green200: string;
+                green100: string;
+                blue900: string;
+                blue800: string;
+                blue700: string;
+                blue600: string;
+                blue500: string;
+                blue400: string;
+                blue300: string;
+                blue200: string;
+                blue100: string;
+                yellow900: string;
+                yellow800: string;
+                yellow700: string;
+                yellow600: string;
+                yellow500: string;
+                yellow400: string;
+                yellow300: string;
+                yellow200: string;
+                yellow100: string;
+            };
+            foreground: {
+                body: string;
+                link: string;
+            };
+            background: {
+                body: string;
+                light: string;
+                neutral: string;
+                neutralDark: string;
+            };
+            intent: {
+                primary: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                secondary: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                shine: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                danger: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                warning: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                neutral: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                success: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+                information: {
+                    background: {
+                        standard: string;
+                        mild: string;
+                        strong: string;
+                    };
+                    foreground: string;
+                    border: string;
+                };
+            };
+        };
+        elevation: {
+            none: string;
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            '5': string;
+        };
+        border: {
+            width: {
+                none: string;
+                '1': string;
+                '2': string;
+                '3': string;
+            };
+            colours: {
+                light: string;
+                gray: string;
+                dark: string;
+            };
+            radius: {
+                none: string;
+                pill: string;
+                full: string;
+                '1': string;
+                min: string;
+            };
+        };
+        typography: {
+            size: {
+                '1': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '2': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '3': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '4': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '5': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '6': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '7': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '8': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                '9': {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+            };
+            colour: {
+                primary: string;
+                secondary: string;
+                shine: string;
+                link: string;
+                dark: string;
+                white: string;
+                muted: string;
+                neutral: string;
+                light: string;
+                danger: string;
+                warning: string;
+                success: string;
+                information: string;
+            };
+            fontWeight: {
+                normal: string;
+                semiBold: string;
+                bold: string;
+            };
+        };
+        animation: {
+            easing: {
+                standard: string;
+                decelerate: string;
+                accelerate: string;
+            };
+        };
+        icon: {
+            size: {
+                small: string;
+                medium: string;
+                large: string;
+            };
+        };
+    }, import("@vanilla-extract/private").CSSVarFunction>;
+    tokens: import("../tokens").Tokens;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/neutral/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}

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.d.ts

@@ -0,0 +1,3 @@
+import { Tokens } from '../tokens';
+export declare const tokens: Tokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/themes/neutral/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAkE9C,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}

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.d.ts

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

package/dist/themes/neutral/vars.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/vars.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,EAAE,MAItB,CAAC"}

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.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -30,10 +30,10 @@
 		"access": "public"
 	},
 	"scripts": {
-		"typeCheck": "tsc",
-		"typeEmit": "tsc -d --declarationDir dist",
-		"build": "babel lib --out-dir dist --extensions '.ts,.tsx, .css' && yarn run typeEmit",
-		"prepublishOnly": "yarn run build",
+		"lint": "tsc --noEmit --skipLibCheck",
+		"typeEmit": "tsc -d --declarationDir dist --emitDeclarationOnly",
+		"build": "babel lib --out-dir dist --extensions '.ts,.tsx, .css'",
+		"prepublishOnly": "yarn run build && yarn run typeEmit",
 		"watch": "tsc --watch"
 	},
 	"devDependencies": {