@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/Columns/Columns.css.js

@@ -1,44 +1,36 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Columns/Columns.css.ts", "@autoguru/overdrive");
-
 import { styleVariants } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
-import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+import { vars } from '../../themes/base/vars.css';
+import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
 export const space = {
-  spaceX: makeResponsiveStyle(vars.space, 'paddingLeft'),
-  spaceY: makeResponsiveStyle(vars.space, 'paddingTop')
+    spaceX: makeResponsiveStyle(vars.space, 'paddingLeft'),
+    spaceY: makeResponsiveStyle(vars.space, 'paddingTop'),
 };
 export const wrapping = styleVariants({
-  wrap: {
-    flexWrap: 'wrap'
-  },
-  noWrap: {
-    flexWrap: 'nowrap'
-  },
-  reverseWrap: {
-    flexWrap: 'wrap-reverse'
-  }
-}, "wrapping");
+    wrap: {
+        flexWrap: 'wrap',
+    },
+    noWrap: {
+        flexWrap: 'nowrap',
+    },
+    reverseWrap: {
+        flexWrap: 'wrap-reverse',
+    },
+});
 export const align = styleVariants({
-  stretch: {
-    alignContent: 'stretch',
-    alignItems: 'stretch'
-  },
-  top: {
-    alignContent: 'flex-start',
-    alignItems: 'flex-start'
-  },
-  centre: {
-    alignContent: 'center',
-    alignItems: 'center'
-  },
-  bottom: {
-    alignContent: 'flex-end',
-    alignItems: 'flex-end'
-  }
-}, "align");
-
-__vanilla_filescope__.endFileScope();
+    stretch: {
+        alignContent: 'stretch',
+        alignItems: 'stretch',
+    },
+    top: {
+        alignContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    centre: {
+        alignContent: 'center',
+        alignItems: 'center',
+    },
+    bottom: {
+        alignContent: 'flex-end',
+        alignItems: 'flex-end',
+    },
+});

package/dist/components/Columns/Columns.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { Tokens } from '../../themes/tokens';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import { Box } from '../Box';
+import * as styles from './Columns.css';
+export interface Props extends Omit<ComponentProps<typeof Box>, 'css'> {
+    className?: string;
+    columns?: number;
+    space?: ResponsiveProp<keyof Tokens['space']>;
+    spaceX?: ResponsiveProp<keyof typeof styles.space.spaceX>;
+    spaceY?: ResponsiveProp<keyof typeof styles.space.spaceY>;
+    noWrap?: boolean;
+    wrappingDirection?: keyof typeof styles.wrapping;
+    align?: keyof typeof styles.align;
+    children?: ReactNode;
+}
+interface ColumnContextValue {
+    spaceXCls: any;
+    spaceYCls: any;
+    isList: boolean;
+}
+export declare const ColumnContext: React.Context<ColumnContextValue>;
+export declare const Columns: React.ForwardRefExoticComponent<Pick<Props, "value" | "id" | "backgroundColour" | "space" | "width" | "min" | "size" | "muted" | "name" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "alignItems" | "boxShadow" | "color" | "content" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "translate" | "userSelect" | "borderRadius" | "borderWidth" | "columns" | "margin" | "overflow" | "padding" | "start" | "hidden" | "default" | "wrap" | "open" | "multiple" | "disabled" | "key" | "is" | "className" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderWidthX" | "borderWidthY" | "borderWidthTop" | "borderWidthRight" | "borderWidthBottom" | "borderWidthLeft" | "borderColour" | "borderColourX" | "borderColourY" | "borderColourTop" | "borderColourRight" | "borderColourBottom" | "borderColourLeft" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "noWrap" | "spaceX" | "spaceY" | "wrappingDirection"> & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAGd,SAAS,EAET,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC3B,SAAS,MAAC;IACV,SAAS,MAAC;IACV,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,mCAAiD,CAAC;AAE5E,eAAO,MAAM,OAAO,glNAiEnB,CAAC"}

package/dist/components/Columns/Columns.js

@@ -1,58 +1,25 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align", "is"];
-
-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 clsx from 'clsx';
 import * as React from 'react';
-import { createContext, forwardRef, useMemo } from 'react';
-import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
-import { Box } from "../Box/index.js";
-import * as styles from "./Columns.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useMemo, } from 'react';
+import { useNegativeMarginLeft, useNegativeMarginTop, } from '../../hooks/useNegativeMargin/useNegativeMargin';
+import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
+import { Box } from '../Box';
+import * as styles from './Columns.css';
 export const ColumnContext = createContext(null);
-export const Columns = forwardRef((_ref, ref) => {
-  let {
-    className = '',
-    children,
-    space,
-    spaceX,
-    spaceY,
-    noWrap,
-    wrappingDirection = 'default',
-    align = 'stretch',
-    is
-  } = _ref,
-      boxProps = _objectWithoutProperties(_ref, _excluded);
-
-  const resolvedSpaceX = spaceX || space || ['none'];
-  const resolvedSpaceY = spaceY || space || ['none'];
-  const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
-  const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
-  return _jsx(Box, _objectSpread(_objectSpread({
-    ref: ref,
-    is: is,
-    display: "flex",
-    flexDirection: "row",
-    className: clsx(marginLeftFix, marginTopFix, styles.align[align], className, {
-      [styles.wrapping.wrap]: !noWrap,
-      [styles.wrapping.noWrap]: noWrap,
-      [styles.wrapping.reverseWrap]: wrappingDirection === 'reverse'
-    })
-  }, boxProps), {}, {
-    children: _jsx(ColumnContext.Provider, {
-      value: useMemo(() => ({
-        spaceXCls: resolveResponsiveStyle(resolvedSpaceX, styles.space.spaceX),
-        spaceYCls: resolveResponsiveStyle(resolvedSpaceY, styles.space.spaceY),
-        isList: typeof is === 'string' && ['ul', 'ol'].includes(is)
-      }), [resolvedSpaceX, resolvedSpaceY, styles]),
-      children: children
-    })
-  }));
-});
+export const Columns = forwardRef(({ className = '', children, space, spaceX, spaceY, noWrap, wrappingDirection = 'default', align = 'stretch', is, ...boxProps }, ref) => {
+    const resolvedSpaceX = spaceX || space || ['none'];
+    const resolvedSpaceY = spaceY || space || ['none'];
+    const marginLeftFix = useNegativeMarginLeft(resolvedSpaceX);
+    const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
+    return (React.createElement(Box, { ref: ref, is: is, display: "flex", flexDirection: "row", className: clsx(marginLeftFix, marginTopFix, styles.align[align], className, {
+            [styles.wrapping.wrap]: !noWrap,
+            [styles.wrapping.noWrap]: noWrap,
+            [styles.wrapping.reverseWrap]: wrappingDirection === 'reverse',
+        }), ...boxProps },
+        React.createElement(ColumnContext.Provider, { value: useMemo(() => ({
+                spaceXCls: resolveResponsiveStyle(resolvedSpaceX, styles.space.spaceX),
+                spaceYCls: resolveResponsiveStyle(resolvedSpaceY, styles.space.spaceY),
+                isList: typeof is === 'string' &&
+                    ['ul', 'ol'].includes(is),
+            }), [resolvedSpaceX, resolvedSpaceY, styles]) }, children)));
+});

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

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

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

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

package/dist/components/Columns/index.js

@@ -1,4 +1,2 @@
-"use strict";
-
-export { Columns } from "./Columns.js";
-export { Column } from "./Column.js";
+export { Columns } from './Columns';
+export { Column } from './Column';

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const DateInput: React.ForwardRefExoticComponent<Partial<Pick<HTMLInputElement, "min" | "max">> & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DateInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../lib/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,SAAS,6VAgCrB,CAAC"}

package/dist/components/DateInput/DateInput.js

@@ -1,36 +1,10 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["field", "eventHandlers", "validation", "isLoading", "suffixed", "prefixed"];
-
-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 { warning } from '@autoguru/utilities';
 import * as React from 'react';
-import { Box } from "../Box/index.js";
-import { withEnhancedInput } from "../private/InputBase/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DateInput = withEnhancedInput(_ref => {
-  let {
-    field,
-    eventHandlers,
-    validation,
-    isLoading,
-    suffixed,
-    prefixed
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  process.env.NODE_ENV !== "production" ? warning(field.value !== '', 'Date Input does not support empty values.') : void 0;
-  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    is: "input"
-  }, eventHandlers), field), rest), {}, {
-    autoComplete: "off",
-    type: "date"
-  }));
+import { Box } from '../Box';
+import { withEnhancedInput } from '../private/InputBase';
+export const DateInput = withEnhancedInput(({ field, eventHandlers, validation, isLoading, suffixed, prefixed, size, ...rest }) => {
+    warning(field.value !== '', 'Date Input does not support empty values.');
+    return (React.createElement(Box, { is: "input", ...eventHandlers, ...field, ...rest, autoComplete: "off", type: "date" }));
 }, {
-  primitiveType: 'date'
-});
+    primitiveType: 'date',
+});

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

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

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

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

package/dist/components/DateInput/index.js

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

package/dist/components/DateInput/stories.js

@@ -6,7 +6,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, CarMultipleIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
+import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import * as React from 'react';
@@ -155,4 +155,38 @@ invalid.args = invalidProps;
 invalid.argTypes = argTypes;
 export const loading = Template.bind(loadingProps);
 loading.args = loadingProps;
-loading.argTypes = argTypes;
+loading.argTypes = argTypes;
+
+const smallProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  size: 'small'
+});
+
+export const small = Template.bind(smallProps);
+small.args = smallProps;
+small.argTypes = argTypes;
+
+const withValueSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
+  size: 'small'
+});
+
+export const withValueSmall = Template.bind(withValueSmallProps);
+withValueSmall.args = withValueSmallProps;
+withValueSmall.argTypes = argTypes;
+
+const withIconSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
+  prefixIcon: CarIcon,
+  size: 'small'
+});
+
+export const withIconSmall = Template.bind(withIconSmallProps);
+withIconSmall.args = withIconSmallProps;
+withIconSmall.argTypes = argTypes;
+
+const loadingSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
+  isLoading: true,
+  size: 'small'
+});
+
+export const loadingSmall = Template.bind(loadingSmallProps);
+loadingSmall.args = loadingSmallProps;
+loadingSmall.argTypes = argTypes;

package/dist/components/Flyout/Flyout.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { Positioner } from '../Positioner';
+export declare const Flyout: FunctionComponent<ComponentPropsWithoutRef<typeof Positioner>>;
+//# sourceMappingURL=Flyout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flyout.d.ts","sourceRoot":"","sources":["../../../lib/components/Flyout/Flyout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,iBAAiB,CACrC,wBAAwB,CAAC,OAAO,UAAU,CAAC,CAkB3C,CAAC"}

package/dist/components/Flyout/Flyout.js

@@ -1,41 +1,5 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "triggerRef", "isOpen", "alignment", "triggerOffset"];
-
-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 { Positioner } from "../Positioner/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Flyout = _ref => {
-  let {
-    children,
-    triggerRef,
-    isOpen,
-    alignment,
-    triggerOffset
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return _jsx(Positioner, _objectSpread(_objectSpread({
-    triggerRef: triggerRef,
-    isOpen: isOpen,
-    alignment: alignment,
-    triggerOffset: triggerOffset
-  }, rest), {}, {
-    children: _jsx(Box, {
-      overflow: "hidden",
-      backgroundColour: "white",
-      boxShadow: "4",
-      borderRadius: "1",
-      borderWidth: "1",
-      borderColour: "gray",
-      children: children
-    })
-  }));
-};
+import { Box } from '../Box';
+import { Positioner } from '../Positioner';
+export const Flyout = ({ children, triggerRef, isOpen, alignment, triggerOffset, ...rest }) => (React.createElement(Positioner, { triggerRef: triggerRef, isOpen: isOpen, alignment: alignment, triggerOffset: triggerOffset, ...rest },
+    React.createElement(Box, { overflow: "hidden", backgroundColour: "white", boxShadow: "4", borderRadius: "1", borderWidth: "1", borderColour: "gray" }, children)));

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

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

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

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

package/dist/components/Flyout/index.js

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

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import { Tokens } from '../../themes/tokens';
+import { Box } from '../Box';
+import type { TextStyleProps } from '../Text';
+export interface Props extends Omit<TextStyleProps, 'is'>, Pick<ComponentProps<typeof Box>, 'id'> {
+    className?: string;
+    children?: ReactNode;
+    is?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    colour?: Exclude<keyof Tokens['typography']['colour'], 'muted'>;
+}
+export declare const Heading: FunctionComponent<Props>;
+//# sourceMappingURL=Heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../lib/components/Heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,EACjC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;CAChE;AAWD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CA8B5C,CAAC"}

package/dist/components/Heading/Heading.js

@@ -1,43 +1,23 @@
-"use strict";
-
 import * as React from 'react';
-import { Box } from "../Box/index.js";
-import { useTextStyles } from "../Text/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../Box';
+import { useTextStyles } from '../Text';
 const sizeScaleDefaults = {
-  h1: '8',
-  h2: '7',
-  h3: '6',
-  h4: '4',
-  h5: '3',
-  h6: '2'
+    h1: '8',
+    h2: '7',
+    h3: '6',
+    h4: '4',
+    h5: '3',
+    h6: '2',
 };
-export const Heading = _ref => {
-  let {
-    is = 'h1',
-    align,
-    fontWeight = 'bold',
-    noWrap,
-    transform,
-    colour = 'dark',
-    size = sizeScaleDefaults[is],
-    id,
-    breakWord,
-    className = '',
-    children
-  } = _ref;
-  return _jsx(Box, {
-    id: id,
-    is: is,
-    className: [useTextStyles({
-      size,
-      align,
-      colour,
-      noWrap,
-      transform,
-      fontWeight,
-      breakWord
-    }), className],
-    children: children
-  });
-};
+export const Heading = ({ is = 'h1', align, fontWeight = 'bold', noWrap, transform, colour = 'dark', size = sizeScaleDefaults[is], id, breakWord, className = '', children, }) => (React.createElement(Box, { id: id, is: is, className: [
+        useTextStyles({
+            size,
+            align,
+            colour,
+            noWrap,
+            transform,
+            fontWeight,
+            breakWord,
+        }),
+        className,
+    ] }, children));

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

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

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

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

package/dist/components/Heading/index.js

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

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

@@ -0,0 +1,2 @@
+export declare const size: Record<string | number, any>;
+//# sourceMappingURL=Icon.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,8BAGd,CAAC"}

package/dist/components/Icon/Icon.css.js

@@ -1,14 +1,6 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Icon/Icon.css.ts", "@autoguru/overdrive");
-
-import { vars } from "../../themes/base/vars.css.js";
-import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
-export const size = makeResponsiveStyle(vars.icon.size, value => ({
-  width: value,
-  height: value
+import { vars } from '../../themes/base/vars.css';
+import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
+export const size = makeResponsiveStyle(vars.icon.size, (value) => ({
+    width: value,
+    height: value,
 }));
-
-__vanilla_filescope__.endFileScope();

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+import type { IconType } from '@autoguru/icons';
+import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import type { BoxStyleProps } from '../Box';
+import * as styles from './Icon.css';
+export interface Props {
+    display?: Extract<BoxStyleProps['display'], 'block' | 'inlineBlock'>;
+    className?: string;
+    size?: ResponsiveProp<keyof typeof styles.size | string>;
+    icon: IconType | ReactElement<SVGAttributes<SVGElement>, 'svg'>;
+}
+export declare const Icon: FunctionComponent<Props>;
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../lib/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,KAAK,MAAM,MAAM,YAAY,CAAC;AAErC,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACzD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAoBzC,CAAC"}

package/dist/components/Icon/Icon.js

@@ -1,30 +1,13 @@
-"use strict";
-
 import * as React from 'react';
 import { cloneElement } from 'react';
-import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
-import { Box, useBoxStyles } from "../Box/index.js";
-import * as styles from "./Icon.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Icon = _ref => {
-  let {
-    className = '',
-    icon,
-    size = 'small',
-    display = 'block'
-  } = _ref;
-  return _jsx(Box, {
-    is: "i",
-    display: display,
-    className: [resolveResponsiveStyle(size, styles.size), className],
-    role: "presentation",
-    children: cloneElement(icon, {
-      className: useBoxStyles({
+import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
+import { Box, useBoxStyles } from '../Box';
+import * as styles from './Icon.css';
+export const Icon = ({ className = '', icon, size = 'small', display = 'block', }) => (React.createElement(Box, { is: "i", display: display, className: [resolveResponsiveStyle(size, styles.size), className], role: "presentation" }, cloneElement(icon, {
+    className: useBoxStyles({
         is: 'svg',
         display: 'block',
         width: 'full',
-        height: 'full'
-      })
-    })
-  });
-};
+        height: 'full',
+    }),
+})));

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

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

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

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

package/dist/components/Icon/index.js

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