@autoguru/overdrive 4.15.2 → 4.16.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/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/Stack/Divider.css.js

@@ -6,6 +6,6 @@ import { style } from '@vanilla-extract/css';
 import { themeContractVars as vars } from "../../themes/theme.css.js";
 export const line = style({
   height: '1px',
-  boxShadow: "inset 0 0 0 1px ".concat(vars.colours.background.light)
+  boxShadow: "inset 0 0 0 1px ".concat(vars.colours.background.neutral)
 }, "line");
 __vanilla_filescope__.endFileScope();

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/dist/themes/base/tokens.js

@@ -98,7 +98,7 @@ export const tokens = {
     background: {
       body: white,
       light: baseThemeColours.gray['200'],
-      neutral: baseThemeColours.gray['400'],
+      neutral: baseThemeColours.gray['300'],
       neutralDark: baseThemeColours.gray['800']
     },
     intent: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.15.2",
+	"version": "4.16.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -56,7 +56,7 @@
 		"react-intersection-observer": "^9.4.3",
 		"react-keyed-flatten-children": "1.3.0",
 		"react-swipeable": "^7.0.0",
-		"webpack": "5.76.2"
+		"webpack": "5.77.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": "^1.7.28",

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