@autoguru/overdrive 4.8.1 → 4.9.0

package/dist/components/AutoSuggest/stories.js

@@ -82,7 +82,7 @@ export default {
   },
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/Box/useBoxStyles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,wBAIhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAQ1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
+{"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,wBAIhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}

package/dist/components/Box/useBoxStyles.css.js

@@ -106,6 +106,7 @@ export const justifyContent = makeResponsiveStyle({
     center: 'center',
     flexEnd: 'flex-end',
     spaceBetween: 'space-between',
+    spaceAround: 'space-around',
 }, 'justifyContent');
 export const pointerEvents = styleVariants({
     none: { pointerEvents: 'none' },

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

@@ -0,0 +1,6 @@
+export declare const input: string;
+export declare const colouredBoxHolder: string;
+export declare const colouredBoxHolderSize: Record<"small" | "medium", string>;
+export declare const valueText: string;
+export declare const valueTextSize: Record<"small" | "medium", string>;
+//# sourceMappingURL=ColourInput.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColourInput.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,QAEhB,CAAC;AACH,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AACH,eAAO,MAAM,qBAAqB,oCAOhC,CAAC;AACH,eAAO,MAAM,SAAS,QAGpB,CAAC;AACH,eAAO,MAAM,aAAa,oCAOxB,CAAC"}

package/dist/components/ColourInput/ColourInput.css.js

@@ -0,0 +1,29 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../themes/base/vars.css';
+export const input = style({
+    opacity: 0,
+});
+export const colouredBoxHolder = style({
+    top: '0',
+    left: '0',
+});
+export const colouredBoxHolderSize = styleVariants({
+    small: {
+        width: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
+    },
+    medium: {
+        width: vars.space['8'],
+    }
+});
+export const valueText = style({
+    top: '50%',
+    transform: 'translateY(-50%)',
+});
+export const valueTextSize = styleVariants({
+    small: {
+        left: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
+    },
+    medium: {
+        left: vars.space['8'],
+    }
+});

package/dist/components/ColourInput/ColourInput.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColourInput.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,WAAW,4SA8DvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ColourInput/ColourInput.js

@@ -0,0 +1,22 @@
+import { warning } from '@autoguru/utilities';
+import * as React from 'react';
+import { Box, useBoxStyles } from '../Box';
+import { withEnhancedInput } from '../private/InputBase';
+import * as styles from './ColourInput.css';
+import { Text } from '../Text';
+import clsx from 'clsx';
+export const ColourInput = withEnhancedInput(({ field, eventHandlers, validation, isLoading, suffixed, prefixed, size, ...rest }) => {
+    warning(field.value !== '', 'Colour Input does not support empty values.');
+    return ((React.createElement(Box, { display: 'flex', flexWrap: 'nowrap', alignItems: 'center', justifyContent: 'center', position: 'relative' },
+        React.createElement(Box, { className: [styles.colouredBoxHolder, styles.colouredBoxHolderSize[size]], display: 'flex', height: 'full', alignItems: 'center', justifyContent: 'spaceAround', flexShrink: 0, pointerEvents: 'none', position: 'absolute' },
+            React.createElement(Box, { style: { backgroundColor: field.value }, padding: size === 'medium' ? '3' : '2', borderRadius: '1' })),
+        React.createElement(Text, { display: 'block', className: clsx(styles.valueText, styles.valueTextSize[size], useBoxStyles({
+                position: 'absolute',
+            })) }, field.value),
+        React.createElement(Box, { is: 'input', type: 'color', flexGrow: 1, ...eventHandlers, ...field, ...rest, className: [styles.input, field.className], autoComplete: 'off' }))));
+}, {
+    primitiveType: 'color',
+    withPrefixIcon: false,
+    defaultValue: '#000',
+});
+export default ColourInput;

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

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

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

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

package/dist/components/ColourInput/index.js

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

package/dist/components/ColourInput/stories.js

@@ -0,0 +1,183 @@
+"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 { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
+import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+import { ColourInput } from "./index.js";
+import { tokens } from "../../themes/base/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Components/Inputs/Colour',
+  component: ColourInput,
+  parameters: {
+    chromatic: {
+      delay: 3000
+    }
+  }
+};
+const defaultColour = tokens.colours.intent.primary.background.standard;
+const iconOptions = {
+  CalendarIcon,
+  AccountEditIcon,
+  AlertCircleIcon,
+  CarMultipleIcon,
+  CurrencyUsdIcon,
+  PlusIcon,
+  StarIcon
+};
+const argTypes = {
+  value: {
+    control: {
+      type: 'date'
+    }
+  },
+  suffixIcon: {
+    defaultValue: null,
+    description: 'Input suffix Icon',
+    options: iconOptions,
+    control: {
+      type: 'select'
+    }
+  }
+};
+
+const Template = args => _jsx(ColourInput, _objectSpread({}, args));
+
+const sharedProps = {
+  disabled: false,
+  name: 'date',
+  placeholder: 'Placeholder',
+  isValid: false,
+  isTouched: false,
+  isLoading: false,
+  isFocused: false,
+  reserveHintSpace: false,
+  hintText: '',
+  notch: true,
+  suffixIcon: void 0,
+  onChange: action('onChange'),
+  onFocus: action('onFocus'),
+  onBlur: action('onBlur')
+};
+const standardProps = sharedProps;
+
+const withAValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  value: defaultColour,
+  placeholder: 'What is your favourite car colour?'
+});
+
+const withHintTextProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  hintText: 'Hint Text',
+  placeholder: 'What is your favourite car colour?'
+});
+
+const withIconProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  suffixIcon: CalendarIcon
+});
+
+const disabledProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  value: defaultColour,
+  placeholder: 'What is your favourite car colour?',
+  disabled: true
+});
+
+const validProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  value: defaultColour,
+  placeholder: 'What is your favourite car colour?',
+  isTouched: true,
+  isValid: true
+});
+
+const invalidProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  value: '#ffd402',
+  placeholder: 'What is your favourite car colour?',
+  isTouched: true,
+  isValid: false,
+  hintText: 'Invalid colour'
+});
+
+const noNotchProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  placeholder: 'What is your favourite car colour?',
+  notch: false
+});
+
+const noNotchWithValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  value: defaultColour,
+  placeholder: 'What is your favourite car colour?',
+  notch: false
+});
+
+const loadingProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  isLoading: true
+});
+
+export const standard = Template.bind(standardProps);
+standard.args = standardProps;
+standard.argTypes = argTypes;
+export const withAValue = Template.bind(withAValueProps);
+withAValue.args = withAValueProps;
+withAValue.argTypes = argTypes;
+export const withHintText = Template.bind(withHintTextProps);
+withHintText.args = withHintTextProps;
+withHintText.argTypes = argTypes;
+export const notchDisabled = Template.bind(noNotchProps);
+notchDisabled.args = noNotchProps;
+notchDisabled.argTypes = argTypes;
+export const notchDisabledWithValue = Template.bind(noNotchWithValueProps);
+notchDisabledWithValue.args = noNotchWithValueProps;
+notchDisabledWithValue.argTypes = argTypes;
+export const withPrefixIcon = Template.bind(withIconProps);
+withPrefixIcon.args = withIconProps;
+withPrefixIcon.argTypes = argTypes;
+export const disabled = Template.bind(disabledProps);
+disabled.args = disabledProps;
+disabled.argTypes = argTypes;
+export const valid = Template.bind(validProps);
+valid.args = validProps;
+valid.argTypes = argTypes;
+export const invalid = Template.bind(invalidProps);
+invalid.args = invalidProps;
+invalid.argTypes = argTypes;
+export const loading = Template.bind(loadingProps);
+loading.args = loadingProps;
+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), {}, {
+  suffixIcon: 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/DateInput/stories.js

@@ -27,7 +27,7 @@ export default {
   component: DateInput,
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/Flyout/stories.js

@@ -36,7 +36,7 @@ export default {
   },
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/Positioner/stories.js

@@ -21,7 +21,7 @@ export default {
   component: Positioner,
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   },
   argTypes: {

package/dist/components/SelectInput/stories.js

@@ -22,7 +22,7 @@ export default {
   component: SelectInput,
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/TextAreaInput/stories.js

@@ -15,7 +15,7 @@ export default {
   component: TextAreaInput,
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/TextInput/stories.js

@@ -16,7 +16,7 @@ export default {
   component: TextInput,
   parameters: {
     chromatic: {
-      delay: 900
+      delay: 3000
     }
   }
 };

package/dist/components/index.d.ts

@@ -52,4 +52,5 @@ export * from './MinimalModal';
 export * from './Image';
 export * from './NumberBubble';
 export * from './TextBubble';
+export * from './ColourInput';
 //# 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"}
+{"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"}

package/dist/components/index.js

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

package/dist/components/private/InputBase/withEnhancedInput.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;CAqBjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;CAe5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;CAoD3B,CAAC;AAEF,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC"}
+{"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;CAqBjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;CAe5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;CAqD3B,CAAC;AAEF,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC"}

package/dist/components/private/InputBase/withEnhancedInput.css.js

@@ -54,6 +54,7 @@ export const inputItselfSize = {
                 fontSize: vars.typography.size['3'].fontSize,
                 lineHeight: vars.typography.size['3'].lineHeight,
                 padding: `${vars.space['2']}`,
+                minHeight: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
             },
             textarea: {
                 padding: `0 ${vars.space['2']} ${vars.space['2']}`,

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -50,11 +50,12 @@ export declare type WrappedComponentProps<IncomingProps, PrimitiveElementType> =
     suffixed: boolean;
     isLoading: boolean;
 } & IncomingProps;
-interface EnhancedInputConfigs {
+interface EnhancedInputConfigs<ValueType = string> {
+    defaultValue?: ValueType;
     withPrefixIcon?: boolean;
     withSuffixIcon?: boolean;
-    primitiveType: 'textarea' | 'text' | 'number' | 'date' | 'select';
+    primitiveType: 'textarea' | 'text' | 'number' | 'date' | 'select' | 'color';
 }
-export declare const withEnhancedInput: <IncomingProps extends {} = {}, PrimitiveElementType extends HTMLElement = HTMLInputElement>(WrappingComponent: React.ComponentType<WrappedComponentProps<IncomingProps, PrimitiveElementType>>, { primitiveType, withPrefixIcon, withSuffixIcon, }?: EnhancedInputConfigs) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhanceInputProps<IncomingProps, PrimitiveElementType>> & React.RefAttributes<PrimitiveElementType>>;
+export declare const withEnhancedInput: <IncomingProps extends {} = {}, PrimitiveElementType extends HTMLElement = HTMLInputElement>(WrappingComponent: React.ComponentType<WrappedComponentProps<IncomingProps, PrimitiveElementType>>, { primitiveType, withPrefixIcon, withSuffixIcon, defaultValue, }?: EnhancedInputConfigs) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhanceInputProps<IncomingProps, PrimitiveElementType>> & React.RefAttributes<PrimitiveElementType>>;
 export {};
 //# sourceMappingURL=withEnhancedInput.d.ts.map

package/dist/components/private/InputBase/withEnhancedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/private/InputBase/withEnhancedInput.js

@@ -10,7 +10,7 @@ import { HintText } from './HintText';
 import * as inputStateStyles from './InputState.css';
 import { NotchedBase } from './NotchedBase';
 import * as styles from './withEnhancedInput.css';
-export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, } = { primitiveType: 'text' }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
+export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, defaultValue, } = { primitiveType: 'text', defaultValue: null }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = defaultValue || '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
     invariant(!(prefixIcon && !withPrefixIcon), 'prefix icon is not supported for this component');
     invariant(!(suffixIcon && !withSuffixIcon), 'suffix icon is not supported for this component');
     const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.8.1",
+	"version": "4.9.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -37,7 +37,7 @@
 		"watch": "tsc --watch"
 	},
 	"devDependencies": {
-		"@autoguru/icons": "1.7.18",
+		"@autoguru/icons": "1.7.27",
 		"@autoguru/tsconfig": "1.0.79",
 		"@autoguru/utilities": "1.1.1",
 		"@popperjs/core": "2.11.2",
@@ -51,7 +51,7 @@
 		"react-dom": "^18.1.0",
 		"react-focus-lock": "2.8.1",
 		"react-keyed-flatten-children": "1.3.0",
-		"webpack": "5.69.0"
+		"webpack": "5.74.0"
 	},
 	"peerDependencies": {
 		"@autoguru/icons": "^1.7.4",