@autoguru/overdrive 4.9.7 → 4.10.0

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;AAmCF,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,10 @@ const borderRadiusOptions = [
     'full',
     'pill',
 ];
+const widthOptions = [
+    'full',
+    'none',
+];
 export const boxArgTypes = {
     boxShadow: {
         options: boxShadowOptions,
@@ -53,7 +57,7 @@ export const boxArgTypes = {
         },
     },
     alignItems: {
-        options: ['flexStart', 'center', 'flexEnd'],
+        options: ['flexStart', 'center', 'flexEnd', 'stretch'],
         control: {
             type: 'select',
         },
@@ -82,6 +86,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/DividerLine/DividerLine.css.d.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { Tokens } from '../../themes/tokens';
+declare type Colours = keyof Tokens['colours']['intent'];
+export declare const colours: Record<Colours, ReturnType<typeof style>>;
+export declare const size: {
+    horizontal: Record<never, string>;
+    vertical: Record<never, string>;
+};
+export {};
+//# sourceMappingURL=DividerLine.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLine.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DividerLine/DividerLine.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAiB,MAAM,sBAAsB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,aAAK,OAAO,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;AACjD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAyB7D,CAAC;AAIF,eAAO,MAAM,IAAI;;;CAiBhB,CAAC"}

package/dist/components/DividerLine/DividerLine.css.js

@@ -0,0 +1,43 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { themeContractVars as vars } from '../../themes/theme.css';
+export const colours = {
+    primary: style({
+        backgroundColor: vars.colours.intent.primary.background.standard,
+    }),
+    secondary: style({
+        backgroundColor: vars.colours.intent.secondary.background.standard,
+    }),
+    danger: style({
+        backgroundColor: vars.colours.intent.danger.background.standard,
+    }),
+    information: style({
+        backgroundColor: vars.colours.intent.information.background.standard,
+    }),
+    warning: style({
+        backgroundColor: vars.colours.intent.warning.background.standard,
+    }),
+    success: style({
+        backgroundColor: vars.colours.intent.success.background.standard,
+    }),
+    neutral: style({
+        backgroundColor: vars.colours.intent.neutral.background.mild,
+    }),
+    shine: style({
+        backgroundColor: vars.colours.intent.shine.foreground,
+    }),
+};
+const sizes = [1, 2, 3];
+export const size = {
+    horizontal: styleVariants(sizes.reduce((sizes, size) => {
+        sizes[size] = {
+            height: size,
+        };
+        return sizes;
+    }, {})),
+    vertical: styleVariants(sizes.reduce((sizes, size) => {
+        sizes[size] = {
+            width: size,
+        };
+        return sizes;
+    }, {})),
+};

package/dist/components/DividerLine/DividerLine.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Box } from '../';
+import * as styles from './DividerLine.css';
+interface Props {
+    isVertical?: boolean;
+    className?: string;
+    space: ComponentProps<typeof Box>['marginY'];
+    colour?: keyof typeof styles.colours;
+    size?: keyof typeof styles.size['horizontal'];
+}
+export declare const DividerLine: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=DividerLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerLine.d.ts","sourceRoot":"","sources":["../../../lib/components/DividerLine/DividerLine.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,UAAU,KAAK;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAehD,CAAC"}

package/dist/components/DividerLine/DividerLine.js

@@ -0,0 +1,8 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import { Box } from '../';
+import * as styles from './DividerLine.css';
+export const DividerLine = ({ className = '', isVertical = false, space = '3', colour = 'primary', size = 1, }) => (React.createElement(Box, { className: clsx(className, styles.colours[colour], {
+        [styles.size.horizontal[size]]: !isVertical,
+        [styles.size.vertical[size]]: isVertical,
+    }), marginY: isVertical ? void 0 : space, marginX: isVertical ? space : void 0 }));

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

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

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

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

package/dist/components/DividerLine/index.js

@@ -0,0 +1 @@
+export { DividerLine } from './DividerLine';

package/dist/components/DividerLine/stories.js

@@ -0,0 +1,126 @@
+"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 * as React from 'react';
+import { Box } from "../Box/index.js";
+import { Heading } from "../Heading/index.js";
+import { Inline } from "../Inline/index.js";
+import { DividerLine } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const spacingOptions = {
+  none: 'none',
+  1: '1',
+  2: '2',
+  3: '3',
+  4: '4',
+  5: '5',
+  6: '6',
+  7: '7',
+  8: '8',
+  9: '9'
+};
+const sizeOptions = [1, 2, 3];
+const colours = ['primary', 'secondary', 'danger', 'information', 'warning', 'success', 'neutral', 'shine'];
+export default {
+  title: 'Components/DividerLine',
+  component: DividerLine,
+  argTypes: {
+    space: {
+      options: spacingOptions,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    },
+    colour: {
+      options: colours,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: sizeOptions,
+      defaultValue: 1,
+      control: {
+        type: 'select'
+      }
+    }
+  },
+  decorators: [story => _jsx("div", {
+    style: {
+      display: 'grid',
+      gridAutoFlow: 'row dense',
+      gridGap: '10px'
+    },
+    children: _jsx("div", {
+      style: {
+        display: 'grid',
+        gap: '10px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(10px, max-content))'
+      },
+      children: story()
+    })
+  })]
+};
+
+const template = args => _jsxs(Box, {
+  children: [_jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  }), _jsx(DividerLine, _objectSpread({}, args)), _jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  })]
+});
+
+const verticalTemplate = args => _jsxs(Inline, {
+  alignY: "stretch",
+  children: [_jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  }), _jsx(DividerLine, _objectSpread({}, args)), _jsx(Heading, {
+    is: "h2",
+    size: "7",
+    children: "Title 1"
+  })]
+});
+
+const templateAllColours = args => _jsx(Box, {
+  children: colours.map(colour => _jsxs(_Fragment, {
+    children: [_jsx(Heading, {
+      is: "h2",
+      size: "7",
+      children: "Title"
+    }), _jsx(DividerLine, _objectSpread(_objectSpread({}, args), {}, {
+      colour: colour
+    }))]
+  }))
+});
+
+const standardProps = {
+  space: '5',
+  size: 3,
+  colour: 'primary'
+};
+export const standard = template.bind(standardProps);
+standard.args = standardProps;
+
+const verticalProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  isVertical: true
+});
+
+export const vertical = verticalTemplate.bind(verticalProps);
+vertical.args = verticalProps;
+export const standardAllColours = templateAllColours.bind(standardProps);
+standardAllColours.args = standardProps;

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/dist/components/index.d.ts

@@ -53,4 +53,5 @@ export * from './Image';
 export * from './NumberBubble';
 export * from './TextBubble';
 export * from './ColourInput';
+export * from './DividerLine';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -53,3 +53,4 @@ export * from './Image';
 export * from './NumberBubble';
 export * from './TextBubble';
 export * from './ColourInput';
+export * from './DividerLine';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.9.7",
+	"version": "4.10.0",
 	"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",