@autoguru/overdrive 4.9.7 → 4.9.9

package/dist/components/Box/Box.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { useBoxStyles } from './useBoxStyles';
-export const Box = forwardRef(({ is: Component = 'div', 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, ...allOtherProps }, ref) => {
+export const Box = forwardRef(({ is: Component = 'div', padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginX, marginY, marginTop, marginBottom, marginLeft, marginRight, display, width = 'none', 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, ...allOtherProps }, ref) => {
     const cls = useBoxStyles({
         is: Component,
         alignItems,

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;AAgCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAoDrE,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;AAgCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA2DrE,CAAC"}

package/dist/components/Box/argTypes.js

@@ -39,6 +39,7 @@ const borderRadiusOptions = [
     'full',
     'pill',
 ];
+const widthOptions = ['full', 'none'];
 export const boxArgTypes = {
     boxShadow: {
         options: boxShadowOptions,
@@ -53,7 +54,7 @@ export const boxArgTypes = {
         },
     },
     alignItems: {
-        options: ['flexStart', 'center', 'flexEnd'],
+        options: ['flexStart', 'center', 'flexEnd', 'stretch'],
         control: {
             type: 'select',
         },
@@ -82,6 +83,13 @@ export const boxArgTypes = {
             none: 'none',
         },
     },
+    width: {
+        options: widthOptions,
+        defaultValue: null,
+        control: {
+            type: 'select',
+        },
+    },
     ...scaledProps.reduce((argTypes, prop) => {
         argTypes[prop] = {
             options: scaleOptions,

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

@@ -28,7 +28,7 @@ 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 width: Record<"full", 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>;
 export declare const textAlign: Record<"left" | "right" | "center", 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":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,wBAIhB,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":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,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"}

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

@@ -41,6 +41,9 @@ export const width = styleVariants({
     full: {
         width: '100%',
     },
+    none: {
+        width: void 0,
+    }
 });
 export const height = styleVariants({
     full: {

package/dist/components/Stack/Stack.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react';
 import type { BoxStyleProps } from '../Box';
 import * as styles from './Stack.css';
-export interface Props extends Pick<BoxStyleProps, 'is' | 'width'> {
+export interface Props extends Pick<BoxStyleProps, 'is' | 'width' | 'alignItems'> {
     space?: keyof typeof styles.child.spaces;
     className?: string;
     dividers?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,OAAO,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAsC1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA0C1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Stack/Stack.js

@@ -8,7 +8,7 @@ const supportedListTypes = [
     'ul',
     'ol',
 ];
-export const Stack = ({ space = '2', children, is = 'div', width, dividers = false, className = '', }) => {
+export const Stack = ({ space = '2', children, is = 'div', alignItems, width, dividers = false, className = '', }) => {
     const items = flattenChildren(children);
     if (items.length < 2) {
         return React.createElement(React.Fragment, null, items);
@@ -16,7 +16,7 @@ export const Stack = ({ space = '2', children, is = 'div', width, dividers = fal
     let listItem = 'div';
     if (typeof is === 'string')
         listItem = supportedListTypes.includes(is) ? 'li' : 'div';
-    return (React.createElement(Box, { is: is, className: className, width: width }, Children.map(items, (child, idx) => (React.createElement(Box, { is: listItem, className: [
+    return (React.createElement(Box, { is: is, className: className, width: width }, Children.map(items, (child, idx) => (React.createElement(Box, { is: listItem, display: alignItems ? 'flex' : void 0, flexDirection: "column", alignItems: alignItems, className: [
             styles.child.default,
             dividers ? undefined : styles.child.spaces[space],
         ] },

package/dist/components/Stack/stories.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 * as React from 'react';
+import { boxArgTypes } from "../Box/argTypes.js";
 import { Text } from "../Text/index.js";
 import { Stack } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,7 +24,6 @@ const spacingOptions = {
   8: '8',
   9: '9'
 };
-const widthOptions = ['full', null];
 export default {
   title: 'Foundation/Layout/Stack',
   component: Stack,
@@ -35,13 +35,8 @@ export default {
         type: 'select'
       }
     },
-    width: {
-      options: widthOptions,
-      defaultValue: null,
-      control: {
-        type: 'select'
-      }
-    }
+    width: boxArgTypes.width,
+    alignItems: boxArgTypes.alignItems
   }
 };
 
@@ -78,4 +73,14 @@ const withDividersProps = _objectSpread(_objectSpread({}, standardProps), {}, {
 });
 
 export const withDividers = Template.bind(withDividersProps);
-withDividers.args = withDividersProps;
+withDividers.args = withDividersProps;
+
+const withAlignmentProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  is: 'div',
+  dividers: true,
+  space: '3',
+  alignItems: 'center'
+});
+
+export const withAlignment = Template.bind(withAlignmentProps);
+withAlignment.args = withAlignmentProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.9.7",
+	"version": "4.9.9",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -45,7 +45,7 @@
 		"@types/react-dom": "^18.0.6",
 		"clsx": "1.1.1",
 		"colord": "2.9.2",
-		"csstype": "3.1.0",
+		"csstype": "3.1.1",
 		"deepmerge": "^4.2.2",
 		"eslint-plugin-jest": "26.2.2",
 		"react": "^18.1.0",