@autoguru/overdrive 4.12.3 → 4.13.0

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;AAoCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAkErE,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;AAGvC,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;AAoCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAwErE,CAAC"}

package/dist/components/Box/argTypes.js

@@ -3,6 +3,7 @@
 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 { defaultGamut } from "../../themes/base/tokens.js";
 export const scaleOptions = ['none', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRight', 'paddingLeft', 'margin', 'marginX', 'marginY', 'marginTop', 'marginRight', 'marginLeft'];
 const boxShadowOptions = ['none', '1', '2', '3', '4', '5'];
@@ -10,6 +11,12 @@ const borderRadiusOptions = ['none', '1', 'min', 'full', 'pill'];
 const widthOptions = ['full', 'none'];
 const oderOptions = [0, 1, 2];
 export const boxArgTypes = _objectSpread({
+  backgroundColour: {
+    options: Object.keys(defaultGamut),
+    control: {
+      type: 'select'
+    }
+  },
   boxShadow: {
     options: boxShadowOptions,
     control: {

package/dist/components/Image/ResponsiveImage.d.ts

@@ -3,8 +3,8 @@ import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import { widthMap } from './ImageServerProvider';
 import { SimpleImage } from './SimpleImage';
 export interface Props extends Omit<ComponentProps<typeof SimpleImage>, 'sizes'> {
-    imageWidth?: ResponsiveProp<keyof typeof widthMap>;
-    sizes?: ResponsiveProp<string>;
+    imageWidth: ResponsiveProp<keyof typeof widthMap>;
+    sizes: ResponsiveProp<string>;
     quality?: number;
 }
 export declare const ResponsiveImage: FunctionComponent<Props>;

package/dist/components/Image/ResponsiveImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQzD,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAanD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAyCpD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQzD,UAAU,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAalD,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM9B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CA6CpD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/Image/ResponsiveImage.js

@@ -38,7 +38,7 @@ export const ResponsiveImage = _ref => {
     quality
   }), [incomingSrc, quality]);
   return _jsx(SimpleImage, _objectSpread({
-    sizes: sizes,
+    sizes: sizes || void 0,
     srcSet: srcset,
     src: src
   }, imgProps));

package/dist/components/SliderProgress/ProgressStep.css.d.ts

@@ -0,0 +1,7 @@
+export declare const empty: string;
+export declare const item: string;
+export declare const fill: string;
+export declare const active: string;
+export declare const paused: string;
+export declare const passed: string;
+//# sourceMappingURL=ProgressStep.css.d.ts.map

package/dist/components/SliderProgress/ProgressStep.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressStep.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAEhB,CAAC;AAWH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC"}

package/dist/components/SliderProgress/ProgressStep.css.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/SliderProgress/ProgressStep.css.ts", "@autoguru/overdrive");
+import { keyframes, style } from '@vanilla-extract/css';
+export const empty = style({
+  opacity: 0.4
+}, "empty");
+const scaleAnim = keyframes({
+  '0%': {
+    transform: 'scale(0, 1)'
+  },
+  '100%': {
+    transform: 'scale(1, 1)'
+  }
+}, "scaleAnim");
+export const item = style({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+}, "item");
+export const fill = style({
+  animationTimingFunction: 'linear',
+  transformOrigin: '0% center',
+  animationPlayState: 'paused',
+  animationName: scaleAnim
+}, "fill");
+export const active = style({
+  animationPlayState: 'running'
+}, "active");
+export const paused = style({
+  animationPlayState: 'paused'
+}, "paused");
+export const passed = style({
+  animation: 'none'
+}, "passed");
+__vanilla_filescope__.endFileScope();

package/dist/components/SliderProgress/ProgressStep.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, NamedExoticComponent } from 'react';
+import { Box } from '../Box';
+interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
+    className?: string;
+    paused: boolean;
+    isActive: boolean;
+    hasPassed: boolean;
+    duration: string;
+    onFinished(): void;
+}
+export declare const ProgressStep: NamedExoticComponent<Props>;
+export {};
+//# sourceMappingURL=ProgressStep.d.ts.map

package/dist/components/SliderProgress/ProgressStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAoDpD,CAAC"}

package/dist/components/SliderProgress/ProgressStep.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import * as React from 'react';
+import { memo, useCallback } from 'react';
+import { useAnimationEvents } from "../../hooks/useAnimationEvents/index.js";
+import { Box } from "../Box/index.js";
+import * as styles from "./ProgressStep.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ProgressStep = memo(_ref => {
+  let {
+    className = '',
+    paused,
+    isActive,
+    hasPassed,
+    duration,
+    backgroundColour = 'white',
+    onFinished
+  } = _ref;
+  const {
+    elementRef
+  } = useAnimationEvents({
+    onAnimationEnd: useCallback(() => !hasPassed && isActive && onFinished(), [isActive, hasPassed, onFinished])
+  });
+  return _jsxs(Box, {
+    className: className,
+    position: "relative",
+    children: [_jsx(Box, {
+      ref: elementRef,
+      position: "absolute",
+      display: hasPassed ? 'none' : 'block',
+      className: [styles.item, styles.empty],
+      backgroundColour: backgroundColour
+    }), _jsx(Box, {
+      ref: elementRef,
+      position: "absolute",
+      display: isActive || hasPassed ? 'block' : 'none',
+      className: [styles.item, styles.fill, {
+        [styles.passed]: hasPassed,
+        [styles.active]: isActive,
+        [styles.paused]: isActive && paused
+      }],
+      backgroundColour: backgroundColour,
+      style: {
+        animationDuration: duration
+      }
+    })]
+  });
+});

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

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const step: string;
+//# sourceMappingURL=SliderProgress.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderProgress.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

package/dist/components/SliderProgress/SliderProgress.css.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/SliderProgress/SliderProgress.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const root = style({
+  display: 'grid',
+  gridGap: vars.space['1'],
+  padding: "".concat(vars.space['3'], " ").concat(vars.space['4']),
+  alignContent: 'center',
+  justifyContent: 'center',
+  alignItems: 'center'
+}, "root");
+export const step = style({
+  height: '2px'
+}, "step");
+__vanilla_filescope__.endFileScope();

package/dist/components/SliderProgress/SliderProgress.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, NamedExoticComponent } from 'react';
+import { Box } from '../Box';
+interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
+    className?: string;
+    paused: boolean;
+    totalCount: number;
+    activeIndex: number;
+    duration: string;
+    onRequestNext(): void;
+}
+export declare const SliderProgress: NamedExoticComponent<Props>;
+export {};
+//# sourceMappingURL=SliderProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAK7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgCtD,CAAC"}

package/dist/components/SliderProgress/SliderProgress.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import clsx from 'clsx';
+import * as React from 'react';
+import { memo } from 'react';
+import { ProgressStep } from "./ProgressStep.js";
+import * as styles from "./SliderProgress.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SliderProgress = memo(_ref => {
+  let {
+    className = '',
+    paused,
+    totalCount,
+    activeIndex,
+    duration,
+    backgroundColour,
+    onRequestNext
+  } = _ref;
+  return _jsx("div", {
+    className: clsx(className, styles.root),
+    style: {
+      gridTemplateColumns: "repeat(".concat(totalCount, ", 1fr)")
+    },
+    children: Array.from({
+      length: totalCount
+    }).fill('').map((_, index) => _jsx(ProgressStep, {
+      className: styles.step,
+      paused: paused,
+      duration: duration,
+      backgroundColour: backgroundColour,
+      hasPassed: index < activeIndex,
+      isActive: index === activeIndex,
+      onFinished: onRequestNext
+    }, index))
+  });
+});

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

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

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

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

package/dist/components/SliderProgress/index.js

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

package/dist/components/SliderProgress/stories.js

@@ -0,0 +1,44 @@
+"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 { action } from '@storybook/addon-actions';
+import * as React from 'react';
+import { Box } from "../Box/index.js";
+import { boxArgTypes } from "../Box/argTypes.js";
+import { SliderProgress } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Components/Progress/SliderProgress',
+  component: SliderProgress,
+  argTypes: {
+    backgroundColour: boxArgTypes.backgroundColour
+  }
+};
+const template = args => _jsx(Box, {
+  paddingY: "8",
+  paddingX: "3",
+  backgroundColour: "gray800",
+  children: _jsx(SliderProgress, _objectSpread({}, args))
+});
+const standardProps = {
+  paused: false,
+  totalCount: 3,
+  activeIndex: 1,
+  duration: '1s',
+  onRequestNext: () => action('onRequestNext')
+};
+export const standard = template.bind(standardProps);
+standard.args = standardProps;
+const withBackgroundColourProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  backgroundColour: 'yellow500'
+});
+export const withBackgroundColour = template.bind(withBackgroundColourProps);
+withBackgroundColour.args = withBackgroundColourProps;
+const withManySlidesProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  activeIndex: 5,
+  totalCount: 20
+});
+export const withManySlides = template.bind(withManySlidesProps);
+withManySlides.args = withManySlidesProps;

package/dist/components/index.d.ts

@@ -55,4 +55,5 @@ export * from './TextBubble';
 export * from './ColourInput';
 export * from './DividerLine';
 export * from './ThemeOverrideProvider';
+export * from './SliderProgress';
 //# 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"}
+{"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"}

package/dist/components/index.js

@@ -56,4 +56,5 @@ export * from "./NumberBubble/index.js";
 export * from "./TextBubble/index.js";
 export * from "./ColourInput/index.js";
 export * from "./DividerLine/index.js";
-export * from "./ThemeOverrideProvider/index.js";
+export * from "./ThemeOverrideProvider/index.js";
+export * from "./SliderProgress/index.js";

package/dist/hooks/useAnimationEvents/index.d.ts

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

package/dist/hooks/useAnimationEvents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAnimationEvents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/hooks/useAnimationEvents/index.js

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

package/dist/hooks/useAnimationEvents/useAnimationEvents.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+interface UseImageLoadingProps {
+    elementRef?: MutableRefObject<any>;
+    onAnimationStart?(e?: AnimationEvent): void;
+    onAnimationEnd?(e?: AnimationEvent): void;
+}
+export declare const useAnimationEvents: <T>({ onAnimationStart: incomingOnAnimationStart, onAnimationEnd: incomingOnAnimationEnd, elementRef: incomingRef, }: UseImageLoadingProps) => {
+    elementRef: any;
+};
+export {};
+//# sourceMappingURL=useAnimationEvents.d.ts.map

package/dist/hooks/useAnimationEvents/useAnimationEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationEvents.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAnimationEvents/useAnimationEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAE5D,UAAU,oBAAoB;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAEnC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE5C,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1C;AAUD,eAAO,MAAM,kBAAkB,wHAI5B,oBAAoB;;CAoCtB,CAAC"}

package/dist/hooks/useAnimationEvents/useAnimationEvents.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+const finishEvents = ['animationend', 'transitionend', 'transitioncancel'];
+const startEvents = ['animationstart', 'transitionrun'];
+export const useAnimationEvents = _ref => {
+  let {
+    onAnimationStart: incomingOnAnimationStart = () => void 0,
+    onAnimationEnd: incomingOnAnimationEnd = () => void 0,
+    elementRef: incomingRef
+  } = _ref;
+  const elementRef = incomingRef !== null && incomingRef !== void 0 && incomingRef.current ? incomingRef : useRef();
+  const onAnimationStart = useRef(incomingOnAnimationStart);
+  const onAnimationEnd = useRef(incomingOnAnimationEnd);
+  onAnimationEnd.current = incomingOnAnimationEnd;
+  onAnimationStart.current = incomingOnAnimationStart;
+  useEffect(() => {
+    const startHandler = e => onAnimationStart.current(e);
+    const endHandler = e => onAnimationEnd.current(e);
+    if (elementRef.current) {
+      startEvents.forEach(event => elementRef.current.addEventListener(event, startHandler));
+      finishEvents.forEach(event => elementRef.current.addEventListener(event, endHandler));
+    }
+    return () => {
+      if (elementRef.current) {
+        startEvents.forEach(event => elementRef.current.removeEventListener(event, startHandler));
+        finishEvents.forEach(event => elementRef.current.removeEventListener(event, endHandler));
+      }
+    };
+  }, [elementRef.current]);
+  return {
+    elementRef
+  };
+};

package/dist/hooks/useResponsiveValue/useResponsiveValue.d.ts

@@ -1,4 +1,4 @@
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
-export declare function useResponsiveValue<T extends string | number | boolean | {}>(responsiveValue: ResponsiveProp<T>, fallbackCase?: boolean): T;
+export declare function useResponsiveValue<T extends string | number | boolean | {}>(responsiveValue: ResponsiveProp<T>, serverFallbackCase?: T): T | null;
 export default useResponsiveValue;
 //# sourceMappingURL=useResponsiveValue.d.ts.map

package/dist/hooks/useResponsiveValue/useResponsiveValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAC1E,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,YAAY,UAAQ,GAClB,CAAC,CAeH;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useResponsiveValue/useResponsiveValue.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,EAC1E,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,EAClC,kBAAkB,CAAC,EAAE,CAAC,GACpB,CAAC,GAAG,IAAI,CAmBV;AAED,eAAe,kBAAkB,CAAC"}

package/dist/hooks/useResponsiveValue/useResponsiveValue.js

@@ -2,12 +2,12 @@
 
 import { useMemo } from 'react';
 import { useMedia } from "../../index.js";
+import { isBrowser } from "../../utils/index.js";
 import { getEarliestKnownToken } from "../../utils/resolveResponsiveProps.js";
-export function useResponsiveValue(responsiveValue) {
-  let fallbackCase = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export function useResponsiveValue(responsiveValue, serverFallbackCase) {
+  if (!isBrowser) return serverFallbackCase || null;
   if (!Array.isArray(responsiveValue)) return responsiveValue;
-  if (fallbackCase) return responsiveValue[0];
-  const activeBP = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop'], fallbackCase).reduce((activeBreakPoint, current, index) => {
+  const activeBP = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop']).reduce((activeBreakPoint, current, index) => {
     if (current) activeBreakPoint = index + 1;
     return activeBreakPoint;
   }, 1);

package/dist/themes/base/tokens.d.ts

@@ -1,3 +1,4 @@
 import { Tokens } from '../tokens';
+export declare const defaultGamut: Record<import("../tokens").ColourGamut, string>;
 export declare const tokens: Tokens;
 //# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/themes/base/tokens.js

@@ -61,6 +61,7 @@ const colours = {
     '100': '#fdf4f4'
   }
 };
+export const defaultGamut = buildColourGamut(colours);
 const white = '#fff';
 const secondaryForeground = colours.gray['700'];
 export const tokens = {
@@ -87,7 +88,7 @@ export const tokens = {
     none: '0px'
   },
   colours: {
-    gamut: _objectSpread(_objectSpread({}, buildColourGamut(colours)), {}, {
+    gamut: _objectSpread(_objectSpread({}, defaultGamut), {}, {
       white
     }),
     foreground: {

package/package.json

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