@autoguru/overdrive 4.15.3 → 4.17.0

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

@@ -1,3 +1,2 @@
-export declare const intentBox: string;
 export declare const contained: string;
 //# sourceMappingURL=Alert.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC"}
+{"version":3,"file":"Alert.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAGpB,CAAC"}

package/dist/components/Alert/Alert.css.js

@@ -3,14 +3,6 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Alert/Alert.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
-import { themeContractVars as vars } from "../../themes/theme.css.js";
-export const intentBox = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: vars.space['1'],
-  height: '100%'
-}, "intentBox");
 export const contained = style({
   minWidth: '280px',
   maxWidth: '640px'

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

@@ -1,11 +1,10 @@
 import { ComponentProps, FunctionComponent, ReactNode } from 'react';
-import { backgroundColours } from '../Box/useBoxStyles.css';
 import { Button } from '../Button';
-type Intent = keyof Pick<typeof backgroundColours, 'danger' | 'information' | 'success' | 'warning'>;
-export interface Props {
+import { IntentStripe } from '../IntentStripe';
+type IntentStripeProps = ComponentProps<typeof IntentStripe>;
+export interface Props extends IntentStripeProps {
     children?: ReactNode;
     className?: string;
-    intent?: Intent;
     inline?: boolean;
     dismissible?: boolean;
     onRequestClose?: ComponentProps<typeof Button>['onClick'];

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAOnC,KAAK,MAAM,GAAG,MAAM,IAAI,CACvB,OAAO,iBAAiB,EACxB,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAwE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../lib/components/Alert/Alert.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAK/C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7D,MAAM,WAAW,KAAM,SAAQ,iBAAiB;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAC1D;AASD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAwE1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Alert/Alert.js

@@ -7,6 +7,7 @@ import { Box, useBoxStyles } from "../Box/index.js";
 import { Button } from "../Button/index.js";
 import { Column, Columns } from "../Columns/index.js";
 import { Icon } from "../Icon/index.js";
+import { IntentStripe } from "../IntentStripe/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
 import * as styles from "./Alert.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,9 +46,8 @@ export const Alert = _ref => {
     borderRadius: "1",
     boxShadow: inline ? 'none' : '4',
     padding: "2",
-    children: [_jsx(Box, {
-      className: styles.intentBox,
-      backgroundColour: intent
+    children: [_jsx(IntentStripe, {
+      intent: intent
     }), _jsxs(Columns, {
       noWrap: true,
       spaceX: "2",

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

@@ -1,4 +1,5 @@
 export declare const input: string;
+export declare const contents: Record<"default" | "withLabel", string>;
 export declare const disabled: Record<"default" | "root", string>;
 export declare const spinner: string;
 //# sourceMappingURL=DatePicker.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}
+{"version":3,"file":"DatePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,QAqBhB,CAAC;AAGH,eAAO,MAAM,QAAQ,yCAWnB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}

package/dist/components/DatePicker/DatePicker.css.js

@@ -3,13 +3,14 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DatePicker/DatePicker.css.ts", "@autoguru/overdrive");
 import { style, styleVariants } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 export const input = style({
   top: 0,
   right: 0,
+  bottom: 0,
+  left: 0,
   opacity: 0,
   cursor: 'pointer',
-  display: 'grid',
-  gridTemplateColumns: 'auto 50px',
   selectors: {
     '&::-webkit-calendar-picker-indicator': {
       background: 'transparent',
@@ -25,6 +26,18 @@ export const input = style({
     }
   }
 }, "input");
+export const contents = styleVariants({
+  default: {
+    display: 'grid',
+    gridTemplateColumns: 'auto',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gridGap: vars.space['1']
+  },
+  withLabel: {
+    gridTemplateColumns: 'auto auto'
+  }
+}, "contents");
 export const disabled = styleVariants({
   default: {
     cursor: 'not-allowed'

package/dist/components/DatePicker/DatePicker.d.ts

@@ -2,10 +2,12 @@ import { IconType } from '@autoguru/icons';
 import { ComponentProps, FunctionComponent } from 'react';
 import { Icon } from '../Icon';
 export interface Props extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'value'>>, Pick<ComponentProps<typeof Icon>, 'size'> {
+    size: 'small' | 'medium' | 'large';
     className?: string;
     disabled?: boolean;
     icon?: IconType;
     isLoading?: boolean;
+    valueLabel?: string;
     onChange(date: string): any;
 }
 export declare const DatePicker: FunctionComponent<Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAe,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,EAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA4D/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAe,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAM/B,MAAM,WAAW,KAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC,EAC/D,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1C,IAAI,EAAE,OAAO,GAAC,QAAQ,GAAC,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAE;CACvB;AAOD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAsE/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -2,20 +2,24 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "icon", "size", "disabled", "isLoading", "onChange"];
+const _excluded = ["className", "icon", "size", "disabled", "isLoading", "valueLabel", "onChange"];
 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 { CalendarIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
 import { Box, useBoxStyles } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
-import * as iconStyles from "../Icon/Icon.css.js";
 import { ProgressSpinner } from "../ProgressSpinner/index.js";
+import { Text } from "../Text/index.js";
 import * as styles from "./DatePicker.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const textSizeMap = {
+  small: '2',
+  medium: '3',
+  large: '5'
+};
 export const DatePicker = _ref => {
   let {
       className = '',
@@ -23,6 +27,7 @@ export const DatePicker = _ref => {
       size = 'medium',
       disabled = false,
       isLoading = false,
+      valueLabel,
       onChange
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -34,7 +39,7 @@ export const DatePicker = _ref => {
   return _jsxs(Box, {
     position: "relative",
     overflow: "hidden",
-    className: clsx(resolveResponsiveStyle(size, iconStyles.size), className, {
+    className: clsx(className, {
       [styles.disabled.default]: disabled,
       [styles.disabled.root]: disabled
     }),
@@ -49,14 +54,22 @@ export const DatePicker = _ref => {
         [styles.disabled.default]: disabled
       }, styles.input),
       type: "date"
-    }, inputProps)), isLoading ? _jsx(ProgressSpinner, {
-      className: clsx(styles.spinner, useBoxStyles({
-        position: 'absolute'
-      })),
-      size: size
-    }) : _jsx(Icon, {
-      icon: icon,
-      size: size
+    }, inputProps)), _jsxs(Box, {
+      className: clsx(styles.contents.default, {
+        [styles.contents.withLabel]: Boolean(valueLabel)
+      }),
+      children: [isLoading ? _jsx(ProgressSpinner, {
+        className: clsx(styles.spinner, useBoxStyles({
+          position: 'absolute'
+        })),
+        size: size
+      }) : _jsx(Icon, {
+        icon: icon,
+        size: size
+      }), valueLabel && _jsx(Text, {
+        size: textSizeMap[size],
+        children: valueLabel
+      })]
     })]
   });
 };

package/dist/components/DatePicker/stories.js

@@ -5,6 +5,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 { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, MagnifyIcon, PlusIcon, StarIcon } from '@autoguru/icons';
 import * as React from 'react';
+import { Box } from "../Box/index.js";
 import { DatePicker } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconOptions = {
@@ -40,7 +41,10 @@ export default {
     }
   }
 };
-const Template = args => _jsx(DatePicker, _objectSpread({}, args));
+const Template = args => _jsx(Box, {
+  display: "flex",
+  children: _jsx(DatePicker, _objectSpread({}, args))
+});
 const standardProps = {
   isLoading: false,
   disabled: false
@@ -54,6 +58,11 @@ const smallProps = {
 };
 export const small = Template.bind(smallProps);
 small.args = smallProps;
+const smallWithLabelProps = _objectSpread(_objectSpread({}, smallProps), {}, {
+  valueLabel: 'Today'
+});
+export const smallWithLabel = Template.bind(smallWithLabelProps);
+smallWithLabel.args = smallWithLabelProps;
 const mediumProps = {
   size: 'medium',
   isLoading: false,
@@ -61,10 +70,20 @@ const mediumProps = {
 };
 export const medium = Template.bind(mediumProps);
 medium.args = mediumProps;
+const mediumWithLabelProps = _objectSpread(_objectSpread({}, mediumProps), {}, {
+  valueLabel: 'Today'
+});
+export const mediumWithLabel = Template.bind(mediumWithLabelProps);
+mediumWithLabel.args = mediumWithLabelProps;
 const largeProps = {
   size: 'large',
   isLoading: false,
   disabled: false
 };
 export const large = Template.bind(largeProps);
-large.args = largeProps;
+large.args = largeProps;
+const largeWithLabelProps = _objectSpread(_objectSpread({}, largeProps), {}, {
+  valueLabel: 'Today'
+});
+export const largeWithLabel = Template.bind(largeWithLabelProps);
+largeWithLabel.args = largeWithLabelProps;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntentStripe.css.d.ts","sourceRoot":"","sources":["../../../lib/components/IntentStripe/IntentStripe.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAIpB,CAAC"}

package/dist/components/IntentStripe/IntentStripe.css.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/IntentStripe/IntentStripe.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const intentBox = style({
+  top: 0,
+  left: 0,
+  width: vars.space['1']
+}, "intentBox");
+__vanilla_filescope__.endFileScope();

package/dist/components/IntentStripe/IntentStripe.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { backgroundColours } from '../Box/useBoxStyles.css';
+type Intent = keyof Pick<typeof backgroundColours, 'danger' | 'information' | 'success' | 'warning'>;
+export interface Props {
+    className?: string;
+    intent: Intent;
+}
+export declare const IntentStripe: FunctionComponent<Props>;
+export default IntentStripe;
+//# sourceMappingURL=IntentStripe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntentStripe.d.ts","sourceRoot":"","sources":["../../../lib/components/IntentStripe/IntentStripe.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI5D,KAAK,MAAM,GAAG,MAAM,IAAI,CACvB,OAAO,iBAAiB,EACxB,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CASjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/IntentStripe/IntentStripe.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import * as React from 'react';
+import { Box } from "../Box/index.js";
+import * as styles from "./IntentStripe.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IntentStripe = _ref => {
+  let {
+    className = '',
+    intent = 'success'
+  } = _ref;
+  return _jsx(Box, {
+    className: [className, styles.intentBox],
+    position: "absolute",
+    height: "full",
+    backgroundColour: intent
+  });
+};
+export default IntentStripe;

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

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

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

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

package/dist/components/IntentStripe/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { IntentStripe } from "./IntentStripe.js";

package/dist/components/IntentStripe/stories.js

@@ -0,0 +1,76 @@
+"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 { IntentStripe } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Components/IntentStripe',
+  component: IntentStripe,
+  argTypes: {
+    intent: {
+      options: ['information', 'success', 'warning', 'danger'],
+      defaultValue: 'primary',
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+const MyStripe = args => _jsx(Box, {
+  position: "relative",
+  width: "full",
+  padding: "6",
+  backgroundColour: "gray200",
+  borderRadius: "1",
+  overflow: "hidden",
+  children: _jsx(IntentStripe, _objectSpread({}, args))
+});
+const template = args => _jsx(Box, {
+  style: {
+    display: 'grid',
+    gridAutoFlow: 'row dense',
+    gridGap: '24px',
+    width: '100%'
+  },
+  children: _jsx(MyStripe, _objectSpread({}, args))
+});
+const templateAllIntents = args => _jsxs(Box, {
+  style: {
+    display: 'grid',
+    gridAutoFlow: 'row dense',
+    gridGap: '24px',
+    width: '100%'
+  },
+  children: [_jsx(MyStripe, _objectSpread(_objectSpread({}, args), {}, {
+    intent: "success"
+  })), _jsx(MyStripe, _objectSpread(_objectSpread({}, args), {}, {
+    intent: "warning"
+  })), _jsx(MyStripe, _objectSpread(_objectSpread({}, args), {}, {
+    intent: "danger"
+  })), _jsx(MyStripe, _objectSpread(_objectSpread({}, args), {}, {
+    intent: "information"
+  }))]
+});
+const standardProps = {
+  intent: void 0,
+  className: void 0
+};
+export const Standard = template.bind(standardProps);
+Standard.args = standardProps;
+export const StandardAllIntents = templateAllIntents.bind(standardProps);
+StandardAllIntents.args = standardProps;
+const inlineProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  inline: true
+});
+export const InlineAllIntents = templateAllIntents.bind(inlineProps);
+InlineAllIntents.args = inlineProps;
+const noneDismissibleProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  dismissible: false
+});
+export const NoneDismissibleAllIntents = templateAllIntents.bind(noneDismissibleProps);
+NoneDismissibleAllIntents.args = noneDismissibleProps;

package/dist/components/index.d.ts

@@ -60,4 +60,5 @@ export * from './HorizontalAutoScroller';
 export * from './FillHeightBox';
 export * from './StickyBox';
 export * from './ScrollPane';
+export * from './IntentStripe';
 //# 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;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,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;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -61,4 +61,5 @@ export * from "./SliderProgress/index.js";
 export * from "./HorizontalAutoScroller/index.js";
 export * from "./FillHeightBox/index.js";
 export * from "./StickyBox/index.js";
-export * from "./ScrollPane/index.js";
+export * from "./ScrollPane/index.js";
+export * from "./IntentStripe/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.15.3",
+	"version": "4.17.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",

package/readme.md

@@ -10,11 +10,12 @@
 </div>
 
 ---
+[Storybook playground](http://overdrive.autoguru.io/).
 
 Overdrive is a product component library, and design system for AutoGuru. Built
 with [React](https://github.com/facebook/react),
 [TypeScript](https://github.com/Microsoft/typescript),
-[Vanilla Extract](https://seek-oss.github.io/vanilla-extract/), and
+[Vanilla Extract](https://github.com/vanilla-extract-css/vanilla-extract/), and
 [Storybook](https://github.com/storybooks/storybook).
 
 ## Usage
@@ -45,6 +46,11 @@ yarn add @autoguru/overdrive \
     </OverdriveProvider>
     ```
 
+## Docs
+
+Find more about Overdrive API and usages in our [docs](http://overdrive.autoguru.io/?path=/docs/components-actions--no-wrap).
+
+
 ## Thanks
 
 [Chromatic](https://www.chromaticqa.com) for providing component screenshot