@autoguru/overdrive 2.7.0-next.6 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @autoguru/overdrive
 
+## 2.7.0
+
+### Minor Changes
+
+-   f982d1c: Upgraded to react v18 alpha
+-   0fa7afd: Overdsrive: Gets compiled into javascripts and typescript types
+-   7033333: Hooks: New useAttachedBoxes helper hook
+-   f15d951: Hooks: New useResponsiveValue value hook
+
+### Patch Changes
+
+-   b7e6aae: Adds relese script
+-   25dda76: Attached Boxes: Accept default box props
+-   85e9ceb: StandardModal: Hides it's frame overflow
+-   d08c689: Badge: Gets new large size
+-   96a8299: NumberInput: Gets new preventMouseWheel prop to prevent value
+    change while scrolling
+-   fd3cea4: AttachedBoxes: Do not get default paddings
+-   7f2122b: Adds more utils root export
+-   b7e6aae: Overdrive: Gets files list added to package.json
+-   b7e6aae: Fixes main file
+-   006435e: StandardModal: Gets narrow and skinny sizes
+-   d89cd04: LoadingBox Accepts default Box props
+-   b7e6aae: Overdrive index main index files fixed
+-   ded7b5d: Inputs: Get their hover states going to a darker shade
+-   8b1f6df: useResponsiveValue: Gets exported from libs root
+-   fd3cea4: AttachedBoxes: Accept external classnames
+-   ff9a789: Sets index.ts as main entry file
+-   ba85147: Overdrive: Multiple export changes
+-   5c1b018: Publish command: Nolonger compiles to JS
+
+## 2.7.0-next.18
+
+### Patch Changes
+
+-   Overdrive: Multiple export changes
+
+## 2.7.0-next.17
+
+### Patch Changes
+
+-   Badge: Gets new large size
+
+## 2.7.0-next.16
+
+### Patch Changes
+
+-   Publish command: Nolonger compiles to JS
+
+## 2.7.0-next.15
+
+### Patch Changes
+
+-   Adds more utils root export
+
+## 2.7.0-next.14
+
+### Patch Changes
+
+-   Sets index.ts as main entry file
+
+## 2.7.0-next.13
+
+### Patch Changes
+
+-   Fixes main file
+
+## 2.7.0-next.12
+
+### Patch Changes
+
+-   Overdrive index main index files fixed
+
+## 2.7.0-next.11
+
+### Patch Changes
+
+-   Overdrive: Gets files list added to package.json
+
+## 2.7.0-next.10
+
+### Patch Changes
+
+-   Adds relese script
+
+## 2.7.0-next.9
+
+### Minor Changes
+
+-   Overdsrive: Gets compiled into javascripts and typescript types
+
+## 2.7.0-next.8
+
+### Patch Changes
+
+-   NumberInput: Gets new preventMouseWheel prop to prevent value change while
+    scrolling
+
+## 2.7.0-next.7
+
+### Patch Changes
+
+-   StandardModal: Hides it's frame overflow
+
 ## 2.7.0-next.6
 
 ### Patch Changes
@@ -312,19 +416,7 @@
     **Example:**
 
     ```jsx
-    <Tabs active={0}>
-    	<TabList>
-    		<Tab>tab 1</Tab>
-    		<Tab>tab 2</Tab>
-    	</TabList>
-    	<TabPanes>
-    		<TabPane>tab 1 content</TabPane>
-    		<TabPane>
-    			{/* Will still be in the DOM, and React comeponet to have state retained */}
-    			tab 2 content
-    		</TabPane>
-    	</TabPanes>
-    </Tabs>
+    <Tabs active={0}>> > > > > > > } t > ></Tabs>
     ```
 
 -   7131a5f: **Tabs:** Fixes a visual quirk when indications are mixed with
@@ -386,10 +478,7 @@
     **FEATURES**
 
     ```jsx
-    <Stack is="ul">
-    	<BulletText>Point A</BulletText>
-    	<BulletText>Point B</BulletText>
-    </Stack>
+    <Stack is="ul">> ></Stack>
     ```
 
     which already wraps each child in an `li`.
@@ -429,24 +518,7 @@
     ### Example
 
     ```jsx
-    <Table columnTemplate="repeat(2, auto)">
-    	<TableRowGroup>
-    		<TableRow>
-    			<TableHeadCell>Col 1</TableHeadCell>
-    			<TableHeadCell>Col 2</TableHeadCell>
-    		</TableRow>
-    	</TableRowGroup>
-    	<TableRowGroup>
-    		<TableRow>
-    			<TableCell>Row 1, Col 1</TableCell>
-    			<TableCell>Row 1, Col 2</TableCell>
-    		</TableRow>
-    		<TableRow>
-    			<TableCell>Row 2, Col 1</TableCell>
-    			<TableCell>Row 2, Col 2</TableCell>
-    		</TableRow>
-    	</TableRowGroup>
-    </Table>
+    <Table columnTemplate="repeat(2, auto)">></Table>
     ```
 
     ### Sticky Header
@@ -454,17 +526,17 @@
     ```diff
     -<Table columnTemplate="repeat(2, auto)">
     +<Table stickyHead columnTemplate="repeat(2, auto)">
-        <TableRowGroup>
-            <TableRow>
-                <TableHeadCell>Col 1</TableHeadCell>
+    >
+    >
+    >
     ```
 
     ### Sorting Columns
 
     ```diff
     <Table columnTemplate="repeat(2, auto)">
-        <TableRowGroup>
-            <TableRow>
+    >
+    >
     -            <TableHeadCell>Col 1</TableHeadCell>
     +            <TableHeadCell sort="asc" onSortChange={}>Col 1</TableHeadCell>
     ```
@@ -479,10 +551,10 @@
 
     ```diff
     <Table columnTemplate="repeat(2, auto)">
-        <TableRowGroup>
+    >
     -        <TableRow>
     +        <TableRow onClick={}>
-                <TableHeadCell>Col 1</TableHeadCell>
+    >
     ```
 
     Please note; that if you're also tracking clicks of cell buttons, to check
@@ -512,8 +584,8 @@
     ```jsx
     <VisuallyHidden>hello screen reader</VisuallyHidden>
     <Text>
-        hello
-        <VisuallyHidden is="span">screen reader</VisuallyHidden>
+    o
+    >
     </Text>
     ```
 
@@ -523,7 +595,7 @@
 
     ```jsx
     <Text is="span" display="inlineBlock">
-    	Im now block
+    	k
     </Text>
     ```
 
@@ -566,7 +638,7 @@
 
     ```jsx
     <Box display="flex" width="full" justifyContent="center">
-    	<Button>Hello</Button>
+    	>
     </Box>
     ```
 
@@ -582,9 +654,9 @@
     <Stack is="ul"
     -    spacing="3">
     +    space="3">
-        <li>line 1</li>
-        <li>line 2</li>
-        <li>line 3</li>
+    >
+    >
+    >
     </Stack>
     ```
 
@@ -595,12 +667,7 @@
     **FEATURES**
 
     ```jsx
-    <Inline dividers>
-    	<Text>Mazda</Text>
-    	<Text>CX3</Text>
-    	<Text>Petrol</Text>
-    	<Text>2020</Text>
-    </Inline>
+    <Inline dividers>> > > ></Inline>
     ```
 
 -   a0fce92: Text: Exposes a new white-space nowrap prop
@@ -636,14 +703,7 @@
     **FEATURES**
 
     ```jsx
-    <Tabs>
-    	<TabList scrollable>
-    		<Tab>This</Tab>
-    		<Tab>Tab</Tab>
-    		<Tab>Might</Tab>
-    		<Tab>Scroll</Tab>
-    	</TabList>
-    </Tabs>
+    <Tabs>> > > > > ></Tabs>
     ```
 
 -   729dfdd: Input: Notchless inputs will no longer break when part of a flex
@@ -659,17 +719,7 @@
     would not have worked:
 
     ```jsx
-    <Stack>
-    	<p>line 0</p>
-    	{isEnabled && (
-    		<>
-    			<p>Line 1</p>
-    			<p>Line 2</p>
-    			<p>Line 3</p>
-    		</>
-    	)}
-    	<p>line 4</p>
-    </Stack>
+    <Stack>> ( > > > > > } ></Stack>
     ```
 
     > which would have the past not had lines 1-3 spaced evenly.
@@ -716,12 +766,12 @@
     ```diff
     - <Box className={clsx(styles.one, styles.two)}>
     + <Box className={[styles.one, styles.two]}>
-        Hello
+    o
     </Box>
 
     - <Box className={clsx({[styles.one]: maybeDoMe}, styles.two)}>
     + <Box className={[{[styles.one]: maybeDoMe}, styles.two]}>
-        Hello
+    o
     </Box>
     ```
 
@@ -747,9 +797,8 @@
     `<AutoSuggest>` can now be given a `autoWidth` prop that will auto the width
     in relation to setting the width, or for it to be automatic.
 
-    -   `autoWidth={true}` means, size the flyout to the width of flyout
-        children "automatically"
-    -   `autoWidth={false}` means to set to the width of the select input.
+        	- `autoWidth={true}` means, size the flyout to the width of flyout children "automatically"
+        	- `autoWidth={false}` means to set to the width of the select input.
 
     eg:
 
@@ -757,15 +806,15 @@
 
     // size to the width of the flyout children
     <AutoSuggest
-        placeholder="How are you?"
-        suggestions={[{ text: "Im an item" }]}
-        autoWidth
+    "
+    }
+    h
     />
 
     // size to the width of the input (current behaviour)
     <AutoSuggest
-        placeholder="How are you?"
-        suggestions={[{ text: "Im an item" }]}
+    "
+    }
     />
 
     ```
@@ -840,16 +889,16 @@
     ```jsx
     // Input
     <div>
-        some sibling
-        <Portal>
-            <div>my child</div>
-        </Portal>
+    g
+    >
+    >
+    >
     </div>
 
     // Result
     <body>
-        <div>some sibling>
-        <div>my child</div>
+    >
+    >
     </body>
     ```
 
@@ -863,8 +912,8 @@
     backdrop. Also; if you wish to remove the fadeIn/fadeOut animation, a
     `transition?: boolean` can also be provided.
 
-    -   Removes `<ModalPortal />` in favor of `<Modal />`
-    -   Deprecated `withModal`, which could simply just use the Modal component
+        	- Removes `<ModalPortal />` in favor of `<Modal />`
+        	- Deprecated `withModal`, which could simply just use the Modal component
 
     Worth noting that a `role="presentation"` is applied to the `Modal`, so
     consumers should be applying a `role="none presentation"` to their direct
@@ -874,7 +923,7 @@
 
     ```jsx
     <Modal isOpen={true} onRequestClose={function() {}}>
-    	<div>some content</div>
+    	>
     </Modal>
     ```
 
@@ -896,10 +945,10 @@
 
     ```
     <Tabs>
-        <TabList stretch>
-            <Tab>Tab a</Tab>
-            <Tab>Tab b</Tab>
-        </TabList>
+    >
+    >
+    >
+    >
     </Tabs>
     ```
 
@@ -918,11 +967,9 @@
 
     Breakpoints have been amended to follow (mobile first):
 
-    -   `tablet` is iPad Mini width less 25%, so any device greater than 768px
-    -   `desktop` we are considering as iPad Pro width less 25%, so any device
-        larger than 1024px
-    -   `largeDesktop` is taken as a 1920x1080 less 25%, so any device larger
-        than 1440px
+        	- `tablet` is iPad Mini width less 25%, so any device greater than 768px
+        	- `desktop` we are considering as iPad Pro width less 25%, so any device larger than 1024px
+        	- `largeDesktop` is taken as a 1920x1080 less 25%, so any device larger than 1440px
 
     all at landscape.
 
@@ -934,11 +981,7 @@
     eg:
 
     ```jsx
-    <Inline>
-    	<Badge colour="green" label="Success" />
-    	<Badge colour="red" label="Danger" />
-    	<Badge colour="blue" label="Information" />
-    </Inline>
+    <Inline>> > ></Inline>
     ```
 
     **`<Section />`**
@@ -960,10 +1003,7 @@
 
     ```jsx
     <Section width="medium" paddingX={['3', , 'none']}>
-    	<Columns space="3">
-    		<Column width="2/3">...</Column>
-    		<Column width="1/3">...</Column>
-    	</Columns>
+    	>
     </Section>
     ```
 
@@ -1000,7 +1040,7 @@
     ```diff
     -<Actions className="test">
     +<Actions>
-        ...
+    .
     </Actions>
     ```
 
@@ -1012,9 +1052,9 @@
 
     **A few changes**
 
-    -   `OverdriveProvider` must now be provider
-    -   `ToastProvider` must also be provided when using a `useToast`
-    -   `@autoguru/overdrive/reset` must be given first.
+        	- `OverdriveProvider` must now be provider
+        	- `ToastProvider` must also be provided when using a `useToast`
+        	- `@autoguru/overdrive/reset` must be given first.
 
     ... and a whole series of other things. Please consult to the PR (#273) to
     get a better idea of what's changed.

package/lib/components/Alert/Alert.treat.ts

@@ -1,6 +1,6 @@
 import { style, styleMap } from 'treat';
 
-import { mapTokenToProperty } from '../../utils';
+import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
 
 export const root = style((theme) => ({
 	':before': {

package/lib/components/Alert/Alert.tsx

@@ -19,23 +19,22 @@ import { Text, useTextStyles } from '../Text';
 
 import * as styleRefs from './Alert.treat';
 
+type Intent = keyof Omit<
+	typeof styleRefs.intent,
+	'neutral' | 'shine' | 'primary' | 'secondary'
+>;
+
 export interface Props {
 	children: ReactChild;
 	className?: string;
-	intent?: keyof typeof styleRefs.intent;
+	intent?: Intent;
 	inline?: boolean;
 	dismissible?: boolean;
 
 	onRequestClose?: ComponentProps<typeof Button>['onClick'];
 }
 
-const IconMapForIntent: Record<
-	keyof Omit<
-		typeof styleRefs.intent,
-		'neutral' | 'shine' | 'primary' | 'secondary'
-	>,
-	IconType
-> = {
+const iconMapForIntent: Record<Intent, IconType> = {
 	danger: AlertCircleIcon,
 	information: InformationIcon,
 	success: CheckCircleIcon,
@@ -70,7 +69,7 @@ export const Alert: FunctionComponent<Props> = ({
 			<Columns noWrap spaceX="2">
 				<Column noShrink alignSelf="top">
 					<Icon
-						icon={IconMapForIntent[intent]}
+						icon={iconMapForIntent[intent]}
 						size="medium"
 						className={useBoxStyles({
 							marginY: '2',

package/lib/components/Badge/Badge.tsx

@@ -14,13 +14,21 @@ export interface Props {
 	colour?: keyof typeof styleRefs.colours.default;
 	className?: string;
 	look?: 'standard' | 'inverted';
+	size?: 'standard' | 'large';
 }
 
 export const Badge = memo<Props>(
-	({ label, colour = 'neutral', look = 'standard', className = '' }) => {
+	({
+		label,
+		colour = 'neutral',
+		look = 'standard',
+		size = 'standard',
+		className = '',
+	}) => {
+		const isStandardSize = size === 'standard';
 		const styles = useStyles(styleRefs);
 		const textStyles = useTextStyles({
-			size: '2',
+			size: isStandardSize ? '2' : '4',
 			noWrap: true,
 			fontWeight: 'semiBold',
 			colour: 'unset',
@@ -43,7 +51,8 @@ export const Badge = memo<Props>(
 					]}
 					overflow="hidden"
 					display="block"
-					padding="1"
+					paddingX={isStandardSize ? '1' : '4'}
+					paddingY={isStandardSize ? '1' : '2'}
 					borderRadius="1">
 					<Box
 						is="span"

package/lib/components/Box/useBoxStyles.treat.ts

@@ -1,6 +1,7 @@
 import { style, styleMap } from 'treat';
 
-import { makeResponsiveStyle, mapTokenToProperty } from '../../utils';
+import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const padding = {
 	top: makeResponsiveStyle((theme) => theme.space, 'paddingTop'),

package/lib/components/Box/useBoxStyles.ts

@@ -3,8 +3,8 @@ import type { JSXElementConstructor } from 'react';
 import { useStyles } from 'react-treat';
 import type { Theme } from 'treat/theme';
 
-import type { ResponsiveProp } from '../../utils';
-import { resolveResponsiveStyle } from '../../utils';
+import type { ResponsiveProp } from '../../utils/responsiveProps';
+import { resolveResponsiveStyle } from '../../utils/responsiveProps';
 
 import * as resetStyleRefs from '../../reset/reset.treat';
 import * as styleRefs from './useBoxStyles.treat';

package/lib/components/Button/Button.tsx

@@ -169,8 +169,11 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
 			</Box>
 		);
 
+
 		return isValidElement(Component)
+			// @ts-ignore
 			? cloneElement(Component, { ref, ...props }, child)
+			// @ts-ignore
 			: createElement(Component, { ref, ...props }, child);
 	},
 );

package/lib/components/Columns/Column.treat.ts

@@ -1,6 +1,6 @@
 import { styleMap } from 'treat';
 
-import { makeResponsiveStyle } from '../../utils';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 const getSizeStyle = (scale: number) => `${scale * 100}%`;
 

package/lib/components/Columns/Column.tsx

@@ -3,7 +3,10 @@ import * as React from 'react';
 import { ComponentProps, forwardRef, ReactNode, useContext } from 'react';
 import { useStyles } from 'react-treat';
 
-import { resolveResponsiveStyle, ResponsiveProp } from '../../utils';
+import {
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 import { Box } from '../Box';
 
 import { ColumnContext } from './Columns';

package/lib/components/Columns/Columns.treat.ts

@@ -1,6 +1,6 @@
 import { styleMap } from 'treat';
 
-import { makeResponsiveStyle } from '../../utils';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const space = {
 	spaceX: makeResponsiveStyle((theme) => theme.space, 'paddingLeft'),

package/lib/components/Columns/Columns.tsx

@@ -9,7 +9,10 @@ import {
 	useNegativeMarginLeft,
 	useNegativeMarginTop,
 } from '../../hooks/useNegativeMargin/useNegativeMargin';
-import { resolveResponsiveStyle, ResponsiveProp } from '../../utils';
+import {
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 import { Box } from '../Box';
 
 import * as styleRefs from './Columns.treat';

package/lib/components/Icon/Icon.treat.ts

@@ -1,4 +1,4 @@
-import { makeResponsiveStyle } from '../../utils';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const size = makeResponsiveStyle(
 	({ icon }) => icon.size,

package/lib/components/Icon/Icon.tsx

@@ -4,7 +4,10 @@ import * as React from 'react';
 import { cloneElement, memo } from 'react';
 import { useStyles } from 'react-treat';
 
-import { resolveResponsiveStyle, ResponsiveProp } from '../../utils';
+import {
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 import type { BoxStyleProps } from '../Box';
 import { Box, useBoxStyles } from '../Box';
 

package/lib/components/Inline/Inline.tsx

@@ -8,7 +8,7 @@ import {
 	useNegativeMarginLeft,
 	useNegativeMarginTop,
 } from '../../hooks/useNegativeMargin/useNegativeMargin';
-import type { ResponsiveProp } from '../../utils';
+import type { ResponsiveProp } from '../../utils/responsiveProps';
 import type { BoxStyleProps } from '../Box';
 import { Box } from '../Box';
 import { Text } from '../Text';

package/lib/components/NumberInput/NumberInput.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { Box } from '../Box';
 import { withEnhancedInput } from '../private/InputBase';
@@ -8,27 +9,82 @@ const isEdge: boolean =
 
 const type = isEdge ? 'text' : 'number';
 
-export const NumberInput = withEnhancedInput<
-	Partial<Pick<HTMLInputElement, 'min' | 'max' | 'step'>>
->(
+interface Props
+	extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'step'>> {
+	preventMouseWheel?: boolean;
+}
+
+export const NumberInput = withEnhancedInput<Props>(
 	({
-		field,
+		field: { ref, ...incomingFieldProps },
 		eventHandlers,
 		validation,
 		isLoading,
 		suffixed,
 		prefixed,
+		preventMouseWheel = false,
 		...rest
-	}) => (
-		<Box
-			is="input"
-			{...eventHandlers}
-			{...field}
-			{...rest}
-			autoComplete="off"
-			type={type}
-		/>
-	),
+	}) => {
+		const inputRef = useRef<HTMLInputElement>(ref?.current);
+
+		const preventWheel = useCallback<EventListener>((e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		}, []);
+
+		useEffect(() => {
+			let mouseWheelListener;
+			let onWheelListener;
+			let wheelListener;
+			if (preventMouseWheel && inputRef?.current) {
+				mouseWheelListener = inputRef.current.addEventListener(
+					'mousewheel',
+					preventWheel,
+				);
+				onWheelListener = inputRef.current.addEventListener(
+					'onwheel',
+					preventWheel,
+				);
+				wheelListener = inputRef.current.addEventListener(
+					'wheel',
+					preventWheel,
+				);
+			}
+
+			return () => {
+				if (mouseWheelListener)
+					// Standard
+					inputRef.current.removeEventListener(
+						'mousewheel',
+						mouseWheelListener,
+					);
+				if (onWheelListener)
+					// Chrome
+					inputRef.current.removeEventListener(
+						'onwheel',
+						onWheelListener,
+					);
+				if (wheelListener)
+					// Safari
+					inputRef.current.removeEventListener(
+						'wheel',
+						wheelListener,
+					);
+			};
+		}, [preventMouseWheel, inputRef.current]);
+
+		return (
+			<Box
+				is="input"
+				ref={inputRef}
+				{...eventHandlers}
+				{...incomingFieldProps}
+				{...rest}
+				autoComplete="off"
+				type={type}
+			/>
+		);
+	},
 	{
 		primitiveType: type,
 	},

package/lib/components/Section/Section.treat.ts

@@ -1,6 +1,6 @@
 import { style, styleMap } from 'treat';
 
-import { mapTokenToProperty } from '../../utils';
+import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
 
 export const root = style({
 	margin: '0 auto',

package/lib/components/Stack/Stack.treat.ts

@@ -1,6 +1,6 @@
 import { style, styleMap } from 'treat';
 
-import { mapTokenToProperty } from '../../utils';
+import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
 
 export const child = {
 	spaces: styleMap((theme) =>

package/lib/components/StandardModal/StandardModal.tsx

@@ -88,6 +88,7 @@ export const StandardModal: FunctionComponent<Props> = ({
 				onClick={backdropHandler}>
 				<Box
 					is="article"
+					overflow="hidden"
 					role="dialog"
 					aria-modal="true"
 					aria-labelledby={titleId!}

package/lib/components/Text/useTextStyles.treat.ts

@@ -1,7 +1,7 @@
 import { Style, style, styleMap } from 'treat';
 import type { Theme } from 'treat/theme';
 
-import { mapTokenToProperty } from '../../utils';
+import { mapTokenToProperty } from '../../utils/mapTokenToProperty';
 
 export const root = style(({ typography }) => ({
 	selectors: {

package/lib/components/Toaster/Toast.tsx

@@ -136,22 +136,28 @@ export const useToast = (): ToastFn => {
 				intent: 'information',
 			});
 
+		// @ts-ignore
 		fn.primary = (message, duration = DEFAULT_DURATION) =>
 			void addToast({
 				message,
 				duration,
+				// @ts-ignore
 				intent: 'primary',
 			});
+		// @ts-ignore
 		fn.secondary = (message, duration = DEFAULT_DURATION) =>
 			void addToast({
 				message,
 				duration,
+				// @ts-ignore
 				intent: 'secondary',
 			});
+		// @ts-ignore
 		fn.shine = (message, duration = DEFAULT_DURATION) =>
 			void addToast({
 				message,
 				duration,
+				// @ts-ignore
 				intent: 'shine',
 			});
 		fn.success = (message, duration = DEFAULT_DURATION) =>
@@ -160,10 +166,12 @@ export const useToast = (): ToastFn => {
 				duration,
 				intent: 'success',
 			});
+		// @ts-ignore
 		fn.neutral = (message, duration = DEFAULT_DURATION) =>
 			void addToast({
 				message,
 				duration,
+				// @ts-ignore
 				intent: 'neutral',
 			});
 		fn.danger = (message, duration = DEFAULT_DURATION) =>

package/lib/components/private/InputBase/withEnhancedInput.tsx

@@ -10,9 +10,9 @@ import {
 	forwardRef,
 	KeyboardEventHandler,
 	MouseEventHandler,
+	MutableRefObject,
 	ReactNode,
 	Ref,
-	RefObject,
 	useCallback,
 	useState,
 } from 'react';
@@ -84,7 +84,7 @@ export type WrappedComponentProps<IncomingProps, PrimitiveElementType> = {
 		EnhanceInputPrimitiveProps,
 		'placeholder' | 'hintText' | 'fieldIcon'
 	> & {
-		ref: RefObject<PrimitiveElementType>;
+		ref: MutableRefObject<PrimitiveElementType>;
 	};
 	fieldIcon?: EnhanceInputPrimitiveProps['fieldIcon'];
 	isFocused?: boolean;

package/lib/hooks/useAttachedBoxes/useAttachedBoxes.treat.ts

@@ -1,5 +1,6 @@
 import { style } from 'treat';
-import { makeResponsiveStyle } from '../../utils';
+
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const grid = {
 	default: style({

package/lib/hooks/useAttachedBoxes/useAttachedBoxes.tsx

@@ -1,12 +1,17 @@
+import clsx from 'clsx';
 import * as React from 'react';
 import { ComponentProps, FunctionComponent } from 'react';
 import { useStyles } from 'react-treat';
-import * as styleRefs from './useAttachedBoxes.treat';
-import clsx from 'clsx';
+
+import {
+	getEarliestKnownToken,
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../../lib/utils/responsiveProps';
 import { Box } from '../../components';
-import { ResponsiveProp } from '../../../dist/lib/utils';
 import { useMedia } from '../useMedia';
-import { getEarliestKnownToken, resolveResponsiveStyle } from '../../utils';
+
+import * as styleRefs from './useAttachedBoxes.treat';
 
 interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
 	count: number;

package/lib/hooks/useNegativeMargin/useNegativeMarginLeft.treat.ts

@@ -1,4 +1,4 @@
-import { makeResponsiveStyle } from '../../utils';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const negativeMarginLeft = makeResponsiveStyle(
 	(theme) => theme.space,

package/lib/hooks/useNegativeMargin/useNegativeMarginLeft.ts

@@ -1,7 +1,10 @@
 import { useStyles } from 'react-treat';
 import { Theme } from 'treat/theme';
 
-import { resolveResponsiveStyle, ResponsiveProp } from '../../utils';
+import {
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 
 import * as styleRefs from './useNegativeMarginLeft.treat';
 

package/lib/hooks/useNegativeMargin/useNegativeMarginTop.treat.ts

@@ -1,4 +1,4 @@
-import { makeResponsiveStyle } from '../../utils';
+import { makeResponsiveStyle } from '../../utils/responsiveProps';
 
 export const negativeMarginTop = makeResponsiveStyle(
 	(theme) => theme.space,

package/lib/hooks/useNegativeMargin/useNegativeMarginTop.ts

@@ -1,7 +1,10 @@
 import { useStyles } from 'react-treat';
 import { Theme } from 'treat/theme';
 
-import { resolveResponsiveStyle, ResponsiveProp } from '../../utils';
+import {
+	resolveResponsiveStyle,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 
 import * as styleRefs from './useNegativeMarginTop.treat';
 

package/lib/hooks/useResponsiveValue/useResponsiveValue.ts

@@ -1,5 +1,8 @@
 import { useMedia } from '../..';
-import { getEarliestKnownToken, ResponsiveProp } from '../../utils';
+import {
+	getEarliestKnownToken,
+	ResponsiveProp,
+} from '../../utils/responsiveProps';
 
 export function useResponsiveValue<T extends string | number | boolean>(
 	responsiveValue: ResponsiveProp<T>,

package/lib/index.ts

@@ -4,3 +4,7 @@ export { useMedia } from './hooks/useMedia';
 export { useResponsiveValue } from './hooks/useResponsiveValue';
 export { useAttachedBoxes } from './hooks/useAttachedBoxes';
 export { useId, arrayRingLookup } from './utils';
+export {
+	makeResponsiveStyle,
+	resolveResponsiveStyle,
+} from './utils/responsiveProps';

package/lib/themes/makeTheme.ts

@@ -29,7 +29,9 @@ const createUtils = (tokens: Tokens) => ({
 
 			Object.assign(styles, {
 				'@media': {
+					// @ts-ignore
 					...styles['@media'],
+					// @ts-ignore
 					[`screen and (min-width: ${tokens.breakpoints[query]}px)`]: style,
 				},
 			});
@@ -46,6 +48,7 @@ const decorateTokens = (tokens: Tokens) => ({
 
 export type OverdriveTheme = ReturnType<typeof decorateTokens>;
 
+// @ts-ignore
 export const makeTheme = (tokens: Tokens, debugName) =>
 	createTheme(decorateTokens(tokens), debugName);
 

package/lib/themes/tokens.ts

@@ -63,10 +63,6 @@ type ColourYellows =
 	| 'yellow200'
 	| 'yellow100';
 
-export interface Colours {
-	colours;
-}
-
 export type ColourGamut =
 	| ColourGrays
 	| ColourBlues

package/lib/utils/index.ts

@@ -90,9 +90,6 @@ export const hex2rgba = (c, alpha = '1') =>
 		.match(/../g)
 		.map((x) => Number(`0x${x}`))},${alpha})`;
 
-export { mapTokenToProperty } from './mapTokenToProperty';
-export * from './responsiveProps';
-
 export const ownerWindow = (node?: Node): Window =>
 	ownerDocument(node)?.defaultView || window;
 export const ownerDocument = (node?: Node): Document =>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "2.7.0-next.6",
+	"version": "2.7.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"keywords": [
 		"component",
@@ -20,29 +20,43 @@
 		"./lib/theme/**/*",
 		"./lib/themes/**/*"
 	],
-	"main": "./index.ts",
-	"dependencies": {
+	"scripts": {
+		"build": "tsc",
+		"prepublishOnly": "yarn run build",
+		"watch": "tsc --watch"
+	},
+	"types": "./dist/main.d.ts",
+	"main": "index.ts",
+	"devDependencies": {
 		"@autoguru/icons": "^1.7.4",
+		"@autoguru/tsconfig": "1.0.79",
 		"@autoguru/utilities": "^1.0.98",
 		"@popperjs/core": "^2.7.0",
+		"@types/react": "^17.0.16",
+		"@types/react-dom": "^17.0.9",
 		"clsx": "^1.1.1",
 		"colord": "^2.0.1",
 		"csstype": "^3.0.7",
+		"eslint-plugin-jest": "^24.4.0",
+		"react": "^18.0.0-alpha-b9934d6db-20210805",
+		"react-dom": "^18.0.0-alpha-b9934d6db-20210805",
 		"react-focus-lock": "^2.5.0",
 		"react-keyed-flatten-children": "^1.3.0",
-		"react-treat": "^2.0.1"
-	},
-	"devDependencies": {
-		"@autoguru/tsconfig": "1.0.79",
-		"@types/react": "^17.0.16",
-		"@types/react-dom": "^17.0.9",
-		"eslint-plugin-jest": "^24.4.0",
-		"react": "^18.0.0-alpha-19092ac8c-20210803",
-		"react-dom": "^18.0.0-alpha-19092ac8c-20210803",
+		"react-treat": "^2.0.1",
 		"treat": "2.0.4"
 	},
 	"peerDependencies": {
+		"@autoguru/icons": "^1.7.4",
+		"@autoguru/utilities": "^1.0.98",
+		"@popperjs/core": "^2.7.0",
+		"clsx": "^1.1.1",
+		"colord": "^2.0.1",
+		"csstype": "^3.0.7",
 		"react": ">=16.8",
-		"react-dom": ">=16.8"
+		"react-dom": ">=16.8",
+		"react-focus-lock": "^2.5.0",
+		"react-keyed-flatten-children": "^1.3.0",
+		"react-treat": "^2.0.1",
+		"treat": "2.0.4"
 	}
 }