New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@autoguru/overdrive

Package Overview
Dependencies
Maintainers
0
Versions
433
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@autoguru/overdrive - npm Package Compare versions

Comparing version

4.39.1
to
4.40.0-next.0

dist/components/Button/Button-cursor.css.js
dist/components/Button/Button-windsuft.css.js
dist/report.html
dist/stats.json

2

dist/components/AutoSuggest/AutoSuggest.css.js

@@ -36,3 +36,2 @@ "use strict";

overscrollBehavior: 'contain',
'-webkit-overflow-scrolling': 'touch',
gridAutoFlow: 'row',

@@ -43,2 +42,3 @@ gridGap: 0,

blockOptions: style({
borderRadius: vars.border.radius[3],
overflowY: 'auto',

@@ -45,0 +45,0 @@ maxHeight: '384px'

12

dist/components/AutoSuggest/AutoSuggest.js

@@ -365,3 +365,3 @@ "use strict";

isOpen: shouldOpenFlyout,
triggerOffset: 4,
triggerOffset: 1,
children: _jsx(SuggestionsList, {

@@ -397,3 +397,3 @@ className: styles.suggestionList.blockOptions,

ref: suggestionListRef,
is: "ul",
as: "ul",
backgroundColour: "white",

@@ -410,3 +410,3 @@ className: [styles.suggestionList.defaults, className],

ref: highlight ? highlightRef : undefined,
is: "li",
as: "li",
id: getSuggestionId(suggestionListId, idx),

@@ -511,3 +511,3 @@ role: "option",

children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
is: "input",
as: "input",
flexGrow: 1

@@ -550,5 +550,5 @@ }, inputEventHandlers), field), {}, {

borderColour: "gray",
borderRadius: "1",
borderRadius: "3",
backgroundColour: "white",
boxShadow: "2",
boxShadow: "4",
style: {

@@ -555,0 +555,0 @@ width: triggerRef.current && !autoWidth ? triggerRef.current.clientWidth : undefined

179

dist/components/AutoSuggest/AutoSuggest.stories.d.ts

@@ -1,178 +0,9 @@

import type { StoryObj } from '@storybook/react';
import React from 'react';
declare const meta: {
title: string;
component: <PayloadType extends unknown>(p: import("./AutoSuggest").Props<PayloadType> & {
ref?: React.Ref<HTMLInputElement>;
}) => React.ReactElement;
decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
autoFocus?: boolean | undefined;
autoWidth?: boolean | undefined;
inlineOptions?: boolean | undefined;
fieldIcon?: import("@autoguru/icons").IconType | undefined;
value: import("./AutoSuggest").AutoSuggestValue<unknown> | null;
suggestions: import("./AutoSuggest").AutoSuggestValue<unknown>[];
itemRenderer?: import("./AutoSuggest").AutoSuggestItemRenderer<unknown> | undefined;
onChange?: ((value: import("./AutoSuggest").AutoSuggestValue<unknown>) => void) | undefined;
onEnter?: ((value: import("./AutoSuggest").AutoSuggestValue<unknown>) => void) | undefined;
id?: string | undefined;
backgroundColour?: keyof typeof import("../Box/useBoxStyles.css").backgroundColours | undefined;
size?: keyof typeof import("../private/InputBase/withEnhancedInput.css").inputItselfSize | undefined;
name: string;
disabled?: boolean | undefined;
key?: React.Key | null | undefined;
className?: string | undefined;
maxLength?: number | undefined;
placeholder: string;
"aria-activedescendant"?: string | undefined | undefined;
"aria-atomic"?: (boolean | "false" | "true") | undefined;
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
"aria-braillelabel"?: string | undefined | undefined;
"aria-brailleroledescription"?: string | undefined | undefined;
"aria-busy"?: (boolean | "false" | "true") | undefined;
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
"aria-colcount"?: number | undefined | undefined;
"aria-colindex"?: number | undefined | undefined;
"aria-colindextext"?: string | undefined | undefined;
"aria-colspan"?: number | undefined | undefined;
"aria-controls"?: string | undefined | undefined;
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
"aria-describedby"?: string | undefined | undefined;
"aria-description"?: string | undefined | undefined;
"aria-details"?: string | undefined | undefined;
"aria-disabled"?: (boolean | "false" | "true") | undefined;
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
"aria-errormessage"?: string | undefined | undefined;
"aria-expanded"?: (boolean | "false" | "true") | undefined;
"aria-flowto"?: string | undefined | undefined;
"aria-grabbed"?: (boolean | "false" | "true") | undefined;
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
"aria-hidden"?: (boolean | "false" | "true") | undefined;
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
"aria-keyshortcuts"?: string | undefined | undefined;
"aria-label"?: string | undefined | undefined;
"aria-labelledby"?: string | undefined | undefined;
"aria-level"?: number | undefined | undefined;
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
"aria-modal"?: (boolean | "false" | "true") | undefined;
"aria-multiline"?: (boolean | "false" | "true") | undefined;
"aria-multiselectable"?: (boolean | "false" | "true") | undefined;
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
"aria-owns"?: string | undefined | undefined;
"aria-placeholder"?: string | undefined | undefined;
"aria-posinset"?: number | undefined | undefined;
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
"aria-readonly"?: (boolean | "false" | "true") | undefined;
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
"aria-required"?: (boolean | "false" | "true") | undefined;
"aria-roledescription"?: string | undefined | undefined;
"aria-rowcount"?: number | undefined | undefined;
"aria-rowindex"?: number | undefined | undefined;
"aria-rowindextext"?: string | undefined | undefined;
"aria-rowspan"?: number | undefined | undefined;
"aria-selected"?: (boolean | "false" | "true") | undefined;
"aria-setsize"?: number | undefined | undefined;
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
"aria-valuemax"?: number | undefined | undefined;
"aria-valuemin"?: number | undefined | undefined;
"aria-valuenow"?: number | undefined | undefined;
"aria-valuetext"?: string | undefined | undefined;
onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
onReset?: (() => void) | undefined;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
isLoading?: boolean | undefined;
reserveHintSpace?: boolean | undefined;
hintText?: React.ReactNode;
notch?: boolean | undefined;
attach?: keyof typeof import("../private/InputBase/NotchedBase.css").bordersAttach["complete"] | undefined;
borderMerged?: keyof typeof import("../private/InputBase/NotchedBase.css").bordersMerged["complete"] | undefined;
isFocused?: boolean | undefined;
prefixIcon?: import("@autoguru/icons").IconType | undefined;
wrapperRef?: React.Ref<HTMLDivElement> | undefined;
isTouched?: boolean | undefined;
isValid?: boolean | undefined;
ref?: React.Ref<HTMLInputElement> | undefined;
}>) => React.JSX.Element)[];
argTypes: {
value: {
options: {
unselected: null;
};
defaultValue: null;
control: {
type: "select";
};
};
attach: {
defaultValue: string;
description: string;
options: ("NONE" | "LEFT" | "TOP" | "RIGHT" | "BOTTOM" | "ALL" | undefined)[];
control: {
type: "select";
};
};
fieldIcon: {
options: string[];
mapping: {
None: null;
Magnify: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Car: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Car Multiple': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Calendar: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Account Edit': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Alert Circle': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Currency USD': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Plus: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Star: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Check: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
};
defaultValue: null;
description: string;
};
prefixIcon: {
options: string[];
mapping: {
None: null;
Magnify: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Car: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Car Multiple': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Calendar: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Account Edit': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Alert Circle': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Currency USD': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Plus: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Star: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Check: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
};
defaultValue: null;
description: string;
};
wrapperRef: {
control: {
disable: true;
};
};
ref: {
control: {
disable: true;
};
};
};
render: (args: import("./AutoSuggest").Props<unknown> & {
ref?: React.Ref<HTMLInputElement>;
}) => React.JSX.Element;
};
import type { Meta, StoryObj } from '@storybook/react';
import { AutoSuggest } from '.';
declare const meta: Meta<typeof AutoSuggest>;
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Standard: Story;
export declare const WithValue: Story;
export declare const WithIcon: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const Small: Story;
export declare const SmallSize: Story;
export declare const Loading: Story;
//# sourceMappingURL=AutoSuggest.stories.d.ts.map

120

dist/components/Button/Button.css.d.ts

@@ -1,43 +0,85 @@

export declare const root: string;
import { RecipeVariants } from '@vanilla-extract/recipes';
export declare const body: string;
export declare const hiddenContent: string;
export declare const loading: string;
export declare const enabled: string;
export declare const disabled: string;
export declare const spinner: string;
export declare const size: {
small: Record<"default" | "rounded" | "iconOnly", string>;
medium: Record<"default" | "rounded" | "iconOnly", string>;
};
export declare const variant: {
primary: string;
brand: string;
secondary: string;
danger: string;
information: string;
warning: string;
success: string;
};
export declare const defaultStates: {
primary: string;
brand: string;
secondary: string;
danger: string;
information: string;
warning: string;
success: string;
};
export declare const minimal: {
defaults: string;
noneRounded: string;
};
export declare const minimalStates: {
primary: string;
brand: string;
secondary: string;
danger: string;
information: string;
warning: string;
success: string;
};
export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
size: {
small: {
height: "36px";
};
medium: {
height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
shape: {
default: {};
rounded: {};
iconOnly: {};
};
intent: {
primary: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
brand: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
secondary: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
selectors: {
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
};
danger: {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
information: {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
warning: {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
success: {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
"&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
};
};
minimal: {
true: {
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
backgroundColor: "transparent";
border: "none";
};
false: never[];
};
}>;
export type StyledButtonProps = NonNullable<RecipeVariants<typeof button>>;
//# sourceMappingURL=Button.css.d.ts.map

464

dist/components/Button/Button.css.js

@@ -5,12 +5,9 @@ "use strict";

__vanilla_filescope__.setFileScope("lib/components/Button/Button.css.ts", "@autoguru/overdrive");
import { style, styleVariants } from '@vanilla-extract/css';
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
import { themeContractVars as vars } from "../../themes/theme.css.js";
export const root = style({
transitionDelay: '0s',
transitionTimingFunction: vars.animation.easing.standard,
transitionDuration: '0.1s',
transitionProperty: 'color, background-color, border-color, box-shadow, transform',
transform: 'translate(0, 0) scale(1)',
willChange: 'transform'
}, "root");
const intentColors = vars.colours.intent;
const smallHeight = '36px';
const selectorFocusHoverActive = '&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active';
export const body = style({

@@ -24,268 +21,253 @@ display: 'grid',

}, "hiddenContent");
export const loading = style({
cursor: 'not-allowed'
}, "loading");
export const enabled = style({
cursor: 'pointer'
}, "enabled");
export const disabled = style({
cursor: 'not-allowed',
opacity: '0.3'
}, "disabled");
export const spinner = style({
margin: '0 auto'
}, "spinner");
const smallHeight = '36px';
export const size = {
small: styleVariants({
default: {
minWidth: vars.space['8'],
height: smallHeight,
gridGap: vars.space['1']
},
rounded: {
minWidth: smallHeight
},
iconOnly: {
width: smallHeight
export const button = recipe({
base: [{
transitionTimingFunction: vars.animation.easing.standard,
transitionDuration: '0.1s',
transitionProperty: 'color, background-color, border-color, box-shadow, transform',
transform: 'translate(0, 0) scale(1)',
willChange: 'transform',
cursor: 'pointer',
selectors: {
'&:active:not(:disabled, [data-loading])': {
transform: 'scale(0.97)'
},
'&[data-loading], &:disabled': {
cursor: 'not-allowed'
},
'&:not([data-loading]):disabled': {
opacity: '0.3'
}
}
}, "size_small"),
medium: styleVariants({
default: {
minWidth: vars.space['9'],
height: vars.space['8'],
gridGap: vars.space['2']
}, focusOutlineStyle],
variants: {
size: {
small: {
height: smallHeight
},
medium: {
height: vars.space['8']
}
},
rounded: {
minWidth: vars.space['8']
shape: {
default: {},
rounded: {},
iconOnly: {}
},
iconOnly: {
width: vars.space['8']
}
}, "size_medium")
};
export const variant = {
primary: style({
color: vars.colours.intent.primary.foreground,
backgroundColor: vars.colours.intent.primary.background.standard,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['2']}`
}, "variant_primary"),
brand: style({
color: vars.colours.intent.brand.foreground,
backgroundColor: vars.colours.intent.brand.background.standard,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.brand.border}, ${vars.elevation['2']}`
}, "variant_brand"),
secondary: style({
color: vars.colours.intent.secondary.foreground,
backgroundColor: vars.colours.intent.secondary.background.standard,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['2']}`
}, "variant_secondary"),
danger: style({
backgroundColor: vars.colours.intent.danger.background.standard,
color: vars.colours.intent.danger.foreground,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['2']}`
}, "variant_danger"),
information: style({
backgroundColor: vars.colours.intent.information.background.standard,
color: vars.colours.intent.information.foreground,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['2']}`
}, "variant_information"),
warning: style({
backgroundColor: vars.colours.intent.warning.background.standard,
color: vars.colours.intent.warning.foreground,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['2']}`
}, "variant_warning"),
success: style({
backgroundColor: vars.colours.intent.success.background.standard,
color: vars.colours.intent.success.foreground,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['2']}`
}, "variant_success")
};
export const defaultStates = {
primary: style({
':hover': {
color: vars.colours.intent.primary.foreground,
backgroundColor: vars.colours.intent.primary.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['3']}`
intent: {
primary: {
color: intentColors.primary.foreground,
backgroundColor: intentColors.primary.background.standard,
[selectorFocusHoverActive]: {
color: intentColors.primary.foreground,
backgroundColor: vars.colours.gamut.green700
}
},
brand: {
color: intentColors.brand.foreground,
backgroundColor: intentColors.brand.background.standard,
[selectorFocusHoverActive]: {
backgroundColor: intentColors.brand.background.strong
}
},
secondary: {
color: intentColors.secondary.foreground,
backgroundColor: intentColors.secondary.background.standard,
border: `1px solid ${intentColors.secondary.border}`,
selectors: {
[selectorFocusHoverActive]: {
backgroundColor: intentColors.secondary.background.strong,
borderColor: intentColors.secondary.background.strong
}
}
},
danger: {
backgroundColor: intentColors.danger.background.standard,
color: intentColors.danger.foreground,
[selectorFocusHoverActive]: {
backgroundColor: intentColors.danger.background.strong
}
},
information: {
backgroundColor: intentColors.information.background.standard,
color: intentColors.information.foreground,
[selectorFocusHoverActive]: {
backgroundColor: intentColors.information.background.strong
}
},
warning: {
backgroundColor: intentColors.warning.background.standard,
color: intentColors.warning.foreground,
[selectorFocusHoverActive]: {
backgroundColor: intentColors.warning.background.strong
}
},
success: {
backgroundColor: intentColors.success.background.standard,
color: intentColors.success.foreground,
[selectorFocusHoverActive]: {
backgroundColor: intentColors.success.background.strong
}
}
},
':active': {
transform: 'scale(0.97)',
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['1']}`,
color: vars.colours.intent.primary.foreground,
backgroundColor: vars.colours.intent.primary.background.strong
minimal: {
true: {
color: vars.typography.colour.neutral,
backgroundColor: 'transparent',
border: 'none'
},
false: []
}
}, "defaultStates_primary"),
brand: style({
':hover': {
color: vars.colours.intent.brand.foreground,
backgroundColor: vars.colours.intent.brand.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.brand.border}, ${vars.elevation['3']}`
},
compoundVariants: [{
variants: {
size: 'small',
shape: 'default'
},
':active': {
transform: 'scale(0.97)',
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.brand.border}, ${vars.elevation['1']}`,
color: vars.colours.intent.brand.foreground,
backgroundColor: vars.colours.intent.brand.background.strong
style: {
minWidth: vars.space['8'],
gridGap: vars.space['1']
}
}, "defaultStates_brand"),
secondary: style({
':hover': {
color: vars.colours.intent.secondary.foreground,
backgroundColor: vars.colours.intent.secondary.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['3']}`
}, {
variants: {
size: 'small',
shape: 'rounded'
},
':active': {
transform: 'scale(0.97)',
color: vars.colours.intent.secondary.foreground,
backgroundColor: vars.colours.intent.secondary.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['1']}`
style: {
minWidth: smallHeight
}
}, "defaultStates_secondary"),
danger: style({
':hover': {
color: vars.colours.intent.danger.foreground,
backgroundColor: vars.colours.intent.danger.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['3']}`
}, {
variants: {
size: 'small',
shape: 'iconOnly'
},
':active': {
transform: 'scale(0.97)',
color: vars.colours.intent.danger.foreground,
backgroundColor: vars.colours.intent.danger.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['1']}`
style: {
width: smallHeight
}
}, "defaultStates_danger"),
information: style({
':hover': {
color: vars.colours.intent.information.foreground,
backgroundColor: vars.colours.intent.information.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['3']}`
}, {
variants: {
size: 'medium',
shape: 'default'
},
':active': {
transform: 'scale(0.97)',
color: vars.colours.intent.information.foreground,
backgroundColor: vars.colours.intent.information.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['1']}`
style: {
minWidth: vars.space['9'],
gridGap: vars.space['2']
}
}, "defaultStates_information"),
warning: style({
':hover': {
color: vars.colours.intent.warning.foreground,
backgroundColor: vars.colours.intent.warning.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['3']}`
}, {
variants: {
size: 'medium',
shape: 'rounded'
},
':active': {
transform: 'scale(0.97)',
color: vars.colours.intent.warning.foreground,
backgroundColor: vars.colours.intent.warning.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['1']}`
style: {
minWidth: vars.space['8']
}
}, "defaultStates_warning"),
success: style({
':hover': {
color: vars.colours.intent.success.foreground,
backgroundColor: vars.colours.intent.success.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['3']}`
}, {
variants: {
size: 'medium',
shape: 'iconOnly'
},
':active': {
transform: 'scale(0.97)',
color: vars.colours.intent.success.foreground,
backgroundColor: vars.colours.intent.success.background.strong,
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['1']}`
style: {
width: vars.space['8']
}
}, "defaultStates_success")
};
export const minimal = {
defaults: style({
color: vars.typography.colour.neutral
}, "minimal_defaults"),
noneRounded: style({
minWidth: '50px'
}, "minimal_noneRounded")
};
export const minimalStates = {
primary: style({
':hover': {
color: vars.colours.intent.primary.background.strong,
backgroundColor: vars.colours.intent.primary.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'primary',
minimal: true
},
':active': {
color: vars.colours.intent.primary.background.strong,
backgroundColor: vars.colours.intent.primary.background.mild,
boxShadow: 'none'
style: {
selectors: {
[selectorFocusHoverActive]: {
color: intentColors.primary.background.strong,
backgroundColor: intentColors.primary.background.mild
}
}
}
}, "minimalStates_primary"),
brand: style({
':hover': {
color: vars.colours.intent.brand.background.strong,
backgroundColor: vars.colours.intent.brand.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'brand',
minimal: true
},
':active': {
color: vars.colours.intent.brand.background.strong,
backgroundColor: vars.colours.intent.brand.background.mild,
boxShadow: 'none'
style: {
selectors: {
[selectorFocusHoverActive]: {
color: intentColors.brand.background.strong,
backgroundColor: intentColors.brand.background.mild
}
}
}
}, "minimalStates_brand"),
secondary: style({
':hover': {
color: vars.typography.colour.secondary,
backgroundColor: vars.colours.intent.secondary.background.strong,
boxShadow: 'none'
}, {
variants: {
intent: 'secondary',
minimal: true
},
':active': {
color: vars.typography.colour.secondary,
backgroundColor: vars.colours.intent.secondary.background.strong,
boxShadow: 'none'
style: {
selectors: {
[selectorFocusHoverActive]: {
color: vars.typography.colour.secondary,
backgroundColor: intentColors.secondary.background.strong
}
}
}
}, "minimalStates_secondary"),
danger: style({
':hover': {
color: vars.colours.intent.danger.background.strong,
backgroundColor: vars.colours.intent.danger.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'danger',
minimal: true
},
':active': {
color: vars.colours.intent.danger.background.strong,
backgroundColor: vars.colours.intent.danger.background.mild,
boxShadow: 'none'
style: {
selectors: {
[selectorFocusHoverActive]: {
color: intentColors.danger.background.strong,
backgroundColor: intentColors.danger.background.mild
}
}
}
}, "minimalStates_danger"),
information: style({
':hover': {
color: vars.colours.intent.information.background.strong,
backgroundColor: vars.colours.intent.information.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'information',
minimal: true
},
':active': {
color: vars.colours.intent.information.background.strong,
backgroundColor: vars.colours.intent.information.background.mild,
boxShadow: 'none'
style: {
selectors: {
[selectorFocusHoverActive]: {
color: intentColors.information.background.strong,
backgroundColor: intentColors.information.background.mild
}
}
}
}, "minimalStates_information"),
warning: style({
':hover': {
color: vars.colours.intent.warning.background.strong,
backgroundColor: vars.colours.intent.warning.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'warning',
minimal: true
},
':active': {
color: vars.colours.intent.warning.background.strong,
backgroundColor: vars.colours.intent.warning.background.mild,
boxShadow: 'none'
style: {
selectors: {
'&:focus-visible, &:not(:disabled):hover': {
color: intentColors.warning.background.strong,
backgroundColor: intentColors.warning.background.mild
}
}
}
}, "minimalStates_warning"),
success: style({
':hover': {
color: vars.colours.intent.success.background.strong,
backgroundColor: vars.colours.intent.success.background.mild,
boxShadow: 'none'
}, {
variants: {
intent: 'success',
minimal: true
},
':active': {
color: vars.colours.intent.success.background.strong,
backgroundColor: vars.colours.intent.success.background.mild,
boxShadow: 'none'
style: {
selectors: {
'&:focus-visible, &:not(:disabled):hover': {
color: intentColors.success.background.strong,
backgroundColor: intentColors.success.background.mild
}
}
}
}, "minimalStates_success")
};
}],
defaultVariants: {
size: 'medium',
shape: 'default',
intent: 'primary',
minimal: false
}
}, "button");
__vanilla_filescope__.endFileScope();

16

dist/components/Button/Button.d.ts
import { IconType } from '@autoguru/icons';
import * as React from 'react';
import { AriaAttributes, ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
import * as styles from './Button.css';
type ButtonPrimitive = ButtonHTMLAttributes<HTMLButtonElement>;
import { type AriaAttributes, type ComponentPropsWithRef, type ElementType, type ReactElement } from 'react';
import type { StyledButtonProps } from './Button.css';
type ButtonPrimitive = ComponentPropsWithRef<'button'>;
type AllowedChildren = string | IconType;
type ButtonSize = 'small' | 'medium';
declare const defaultEnglish: {
readonly loading: "loading";
};
type TextContent = keyof typeof defaultEnglish;
export interface ButtonProps extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'> {

@@ -15,5 +20,6 @@ children: AllowedChildren | AllowedChildren[];

rounded?: boolean;
size?: keyof typeof styles.size;
variant?: keyof typeof styles.variant;
size?: ButtonSize;
variant?: Required<StyledButtonProps['intent']>;
withDoubleClicks?: boolean;
lang?: Partial<Record<TextContent, string>>;
}

@@ -20,0 +26,0 @@ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & import("../../types").TestId & React.RefAttributes<HTMLButtonElement>>;

47

dist/components/Button/Button.js

@@ -17,4 +17,7 @@ "use strict";

const DOUBLE_CLICK_DETECTION_PERIOD = 700;
const defaultEnglish = {
loading: 'loading'
};
const getSpinnerColour = (variant, minimal) => minimal || variant === 'secondary' ? 'secondary' : 'light';
const getBorderRadius = rounded => rounded ? 'pill' : '1';
const getBorderRadius = rounded => rounded ? 'pill' : '2';
const getPadding = (size, loading) => {

@@ -24,18 +27,2 @@ if (loading) return 'none';

};
const getButtonStates = (buttonStyles, variant, disabled, minimal, rounded) => {
if (disabled) return minimal ? clsx(buttonStyles.minimal.defaults, {
[buttonStyles.minimal.noneRounded]: !rounded
}) : '';
if (minimal) return clsx(styles.minimal.defaults, styles.minimalStates[variant], {
[styles.minimal.noneRounded]: !rounded
});
return styles.defaultStates[variant];
};
const getButtonSize = (buttonStyles, size, rounded, iconOnly) => {
const currentSize = buttonStyles.size[size];
return clsx(currentSize.default, {
[currentSize.rounded]: rounded,
[currentSize.iconOnly]: iconOnly
});
};
export const Button = forwardRef((_ref, ref) => {

@@ -51,2 +38,3 @@ let {

isFullWidth = false,
lang,
minimal = false,

@@ -61,2 +49,3 @@ onClick: incomingOnClick,

} = _ref;
const language = _objectSpread(_objectSpread({}, defaultEnglish), lang);
const {

@@ -80,2 +69,7 @@ isSingleIconChild,

}, [withDoubleClicks, incomingOnClick]);
const shape = useMemo(() => {
if (isSingleIconChild) return 'iconOnly';
if (rounded) return 'rounded';
return 'default';
}, [isSingleIconChild, rounded]);
const props = {

@@ -86,4 +80,4 @@ type: Component === 'button' ? type : undefined,

disabled: disabled || isLoading,
tabIndex: disabled ? -1 : void 0,
'aria-label': ariaLabel,
'aria-label': isLoading ? language.loading : ariaLabel,
'data-loading': isLoading ? '' : undefined,
className: clsx(useBoxStyles({

@@ -104,7 +98,8 @@ is: typeof Component === 'string' ? Component : undefined,

size: size === 'medium' ? '4' : '3'
}), styles.root, getButtonStates(styles, variant, disabled || isLoading, minimal, rounded), !minimal && styles.variant[variant], getButtonSize(styles, size, rounded, isSingleIconChild && !isLoading), {
[styles.disabled]: disabled,
[styles.enabled]: !disabled && !isLoading,
[styles.loading]: isLoading
}, className),
}), styles.button({
size,
shape,
intent: variant,
minimal
}), className),
ref

@@ -144,4 +139,5 @@ };

}), _jsx(Box, {
width: "full",
height: "full",
alignItems: "center",
justifyContent: "center",
className: [styles.body, styles.hiddenContent],

@@ -162,2 +158,3 @@ children: buttonContents

});
Button.displayName = 'Button';
export default Button;

50

dist/components/Button/Button.stories.d.ts

@@ -1,48 +0,12 @@

import type { StoryObj } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '.';
declare const meta: {
title: string;
component: React.ForwardRefExoticComponent<import("./Button").ButtonProps & import("../../types").TestId & React.RefAttributes<HTMLButtonElement>>;
decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
children: (string | import("@autoguru/icons").IconType) | (string | import("@autoguru/icons").IconType)[];
disabled?: boolean | undefined;
is?: (React.ElementType | React.ReactElement) | undefined;
isLoading?: boolean | undefined;
isFullWidth?: boolean | undefined;
minimal?: boolean | undefined;
rounded?: boolean | undefined;
size?: keyof typeof import("./Button.css").size | undefined;
variant?: keyof typeof import("./Button.css").variant | undefined;
withDoubleClicks?: boolean | undefined;
id?: string | undefined | undefined;
className?: string | undefined | undefined;
type?: "submit" | "reset" | "button" | undefined | undefined;
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
"aria-label"?: string | undefined | undefined;
testId?: string | undefined;
ref?: React.Ref<HTMLButtonElement> | undefined;
key?: React.Key | null | undefined;
}>) => React.JSX.Element)[];
argTypes: {
is: {
options: string[];
};
};
};
declare const meta: Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof Button>;
export declare const Standard: Story;
export declare const PrimarySmall: Story;
export declare const PrimaryMedium: Story;
export declare const BrandSmall: Story;
export declare const BrandMedium: Story;
export declare const SecondarySmall: Story;
export declare const SecondaryMedium: Story;
export declare const InformationSmall: Story;
export declare const InformationMedium: Story;
export declare const WarningSmall: Story;
export declare const WarningMedium: Story;
export declare const SuccessSmall: Story;
export declare const SuccessMedium: Story;
export declare const PrimarySet: Story;
export declare const SecondarySet: Story;
export declare const InformationSet: Story;
export declare const WarningSet: Story;
export declare const SuccessSet: Story;
//# sourceMappingURL=Button.stories.d.ts.map

2

dist/components/CheckBox/CheckBox.css.d.ts

@@ -0,3 +1,3 @@

export declare const checkbox: Record<"default" | "selected", string>;
export declare const icon: string;
export declare const base: Record<"default" | "selected", string>;
//# sourceMappingURL=CheckBox.css.d.ts.map

54

dist/components/CheckBox/CheckBox.css.js

@@ -7,24 +7,44 @@ "use strict";

import { themeContractVars as vars } from "../../themes/theme.css.js";
export const icon = style({
zIndex: 1,
top: `calc(50% - 0.5*(${vars.space['4']}))`,
left: `calc(50% - 0.5*(${vars.space['4']}))`,
width: vars.space['4'],
height: vars.space['4']
}, "icon");
export const base = styleVariants({
import { nativeInput, checkable } from "../private/CheckableBase/CheckableBase.css.js";
const colorAccent = vars.colours.foreground.body;
const colorContrast = vars.colours.background.body;
const colorMid = vars.colours.background.neutral;
const size = vars.space['6'];
const borderRadius = vars.border.radius['1'];
const borderWidth = vars.border.width['1'];
const transition = `border-color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`;
export const checkbox = styleVariants({
default: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: size,
height: size,
boxSizing: 'border-box',
borderRadius: borderRadius,
color: colorContrast,
borderColor: colorMid,
borderStyle: 'solid',
borderWidth: borderWidth,
zIndex: 0,
borderRadius: vars.border.radius['min'],
top: vars.space['3'],
left: vars.space['3'],
width: vars.space['4'],
height: vars.space['4'],
transition: `border-color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`
selectors: {
[`${nativeInput}:not(:checked):hover ~${checkable} &`]: {
backgroundColor: colorMid
}
},
transition
},
selected: {
borderColor: vars.colours.intent.primary.background.standard,
backgroundColor: vars.colours.intent.primary.background.standard
borderColor: colorAccent,
backgroundColor: colorAccent
}
}, "base");
}, "checkbox");
export const icon = style({
transition: `transform 0.2s ${vars.animation.easing.standard}`,
selectors: {
[`${nativeInput}:checked:hover ~${checkable} ${checkbox.selected} &`]: {
transform: 'scale(0.85)'
}
}
}, "icon");
__vanilla_filescope__.endFileScope();

37

dist/components/CheckBox/CheckBox.js

@@ -8,9 +8,8 @@ "use strict";

import { noop } from "../../utils/index.js";
import { Box, useBoxStyles } from "../Box/index.js";
import { Box } from "../Box/index.js";
import { Icon } from "../Icon/index.js";
import { useTextStyles } from "../Text/index.js";
import { CheckableBase } from "../private/CheckableBase/index.js";
import { useCheckableStyles } from "../private/CheckableBase/useCheckableStyles.js";
import { checkableIndicator } from "../private/CheckableBase/CheckableBase.css.js";
import * as styles from "./CheckBox.css.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
export const CheckBox = forwardRef((_ref, ref) => {

@@ -27,11 +26,3 @@ let {

} = _ref;
const iconStyles = clsx(useTextStyles({
colour: 'white'
}), useBoxStyles({
position: 'absolute'
}));
const {
checkableItem
} = useCheckableStyles();
return _jsxs(CheckableBase, {
return _jsx(CheckableBase, {
ref: ref,

@@ -47,15 +38,15 @@ inputType: "checkbox",

handleChange: onChange,
children: [checked ? _jsx(Icon, {
className: clsx(styles.icon, iconStyles),
icon: CheckIcon,
size: "small"
}) : null, _jsx(Box, {
borderWidth: "2",
borderColour: "gray",
className: clsx(checkableItem, styles.base.default, {
[styles.base.selected]: checked
children: _jsx(Box, {
className: clsx(styles.checkbox.default, checkableIndicator, {
[styles.checkbox.selected]: checked
}),
children: _jsx(Icon, {
icon: CheckIcon,
size: "medium",
className: styles.icon
})
})]
})
});
});
CheckBox.displayName = 'Checkbox';
export default CheckBox;

30

dist/components/CheckBox/CheckBox.stories.d.ts

@@ -1,24 +0,18 @@

import { StoryObj } from '@storybook/react';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { CheckBox } from '.';
declare const meta: {
title: string;
component: React.ForwardRefExoticComponent<import("./CheckBox").Props & React.RefAttributes<HTMLInputElement>>;
decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
className?: string | undefined;
checked?: boolean | undefined;
disabled?: boolean | undefined;
name?: string | undefined;
value: string;
children?: React.ReactNode;
onClick?: ((checked: boolean) => void) | undefined;
onChange?: ((checked: boolean) => void) | undefined;
ref?: React.Ref<HTMLInputElement> | undefined;
key?: React.Key | null | undefined;
}>) => React.JSX.Element)[];
};
declare const meta: Meta<typeof CheckBox>;
export default meta;
type Story = StoryObj<typeof CheckBox>;
export declare const List: Story;
export declare const Default: Story;
export declare const Disabled: Story;
export declare const List: {
render: ({ disabled, onChange }: {
disabled: any;
onChange: any;
}) => React.JSX.Element;
args: {
disabled: boolean;
};
};
export declare const MultipleLines: Story;

@@ -25,0 +19,0 @@ export declare const WithComponent: Story;

48

dist/components/ColourInput/ColourInput.stories.d.ts

@@ -1,48 +0,8 @@

import type { StoryObj } from '@storybook/react';
declare const meta: {
title: string;
component: import("react").ForwardRefExoticComponent<import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & import("react").RefAttributes<HTMLInputElement>>;
parameters: {
chromatic: {};
};
argTypes: {
value: {
control: {
type: "color";
};
};
attach: {
defaultValue: string;
description: string;
options: ("NONE" | "LEFT" | "TOP" | "RIGHT" | "BOTTOM" | "ALL" | undefined)[];
control: {
type: "select";
};
};
suffixIcon: {
options: string[];
mapping: {
None: null;
Magnify: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
Car: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
'Car Multiple': import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
Calendar: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
'Account Edit': import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
'Alert Circle': import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
'Currency USD': import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
Plus: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
Star: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
Check: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
};
defaultValue: null;
description: string;
};
};
};
import type { Meta, StoryObj } from '@storybook/react';
import { ColourInput } from '.';
declare const meta: Meta<typeof ColourInput>;
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Standard: Story;
export declare const WithAValue: Story;
export declare const WithIcon: Story;
export declare const WithIconSmall: Story;
export declare const Filled: Story;
//# sourceMappingURL=ColourInput.stories.d.ts.map

71

dist/components/DateInput/DateInput.stories.d.ts

@@ -1,70 +0,11 @@

import type { StoryObj } from '@storybook/react';
declare const meta: {
title: string;
component: import("react").ForwardRefExoticComponent<Partial<Pick<HTMLInputElement, "min" | "max">> & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & import("react").RefAttributes<HTMLInputElement>>;
args: {
disabled: false;
name: string;
placeholder: string;
isValid: false;
isTouched: false;
isLoading: false;
isFocused: false;
reserveHintSpace: false;
hintText: string;
notch: true;
prefixIcon: undefined;
onChange: import("@storybook/addon-actions").HandlerFunction;
onFocus: import("@storybook/addon-actions").HandlerFunction;
onBlur: import("@storybook/addon-actions").HandlerFunction;
};
argTypes: {
value: {
control: {
type: "date";
};
};
attach: {
defaultValue: string;
description: string;
options: {
NONE: string;
TOP: string;
RIGHT: string;
LEFT: string;
BOTTOM: string;
ALL: string;
};
control: {
type: "select";
};
};
prefixIcon: {
defaultValue: null;
description: string;
options: {
CalendarIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
AccountEditIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
AlertCircleIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
CarMultipleIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
CurrencyUsdIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
PlusIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
StarIcon: import("react").ReactElement<import("react").SVGAttributes<SVGElement>, "svg">;
};
control: {
type: "select";
};
};
};
};
import type { Meta, StoryObj } from '@storybook/react';
import { DateInput } from '.';
declare const meta: Meta<typeof DateInput>;
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Standard: Story;
export declare const WithAValue: Story;
export declare const NotchDisabled: Story;
export declare const WithPrefixIcon: Story;
export declare const Invalid: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const WithValueSmall: Story;
export declare const SmallSize: Story;
export declare const WithIcons: Story;
//# sourceMappingURL=DateInput.stories.d.ts.map

8

dist/components/DropDown/DropDown.stories.d.ts

@@ -14,3 +14,3 @@ import type { StoryObj } from '@storybook/react';

id?: string | undefined | undefined;
size?: keyof typeof import("../Button/Button.css").size | undefined;
size?: ("small" | "medium") | undefined;
disabled?: boolean | undefined;

@@ -21,9 +21,10 @@ ref?: React.Ref<HTMLButtonElement> | undefined;

type?: "submit" | "reset" | "button" | undefined | undefined;
lang?: Partial<Record<"loading", string>> | undefined;
"aria-label"?: string | undefined | undefined;
testId?: string | undefined;
rounded?: boolean | undefined;
minimal?: boolean | undefined;
isLoading?: boolean | undefined;
isFullWidth?: boolean | undefined;
minimal?: boolean | undefined;
variant?: keyof typeof import("../Button/Button.css").variant | undefined;
variant?: Required<"primary" | "brand" | "secondary" | "danger" | "warning" | "success" | "information" | undefined>;
withDoubleClicks?: boolean | undefined;

@@ -60,5 +61,4 @@ alignment?: import("..").EPositionerAlignment | undefined;

export declare const MinimalPrimary: Story;
export declare const RoundedSecondary: Story;
export declare const WithCustomIcon: Story;
export declare const WithManyOptions: Story;
//# sourceMappingURL=DropDown.stories.d.ts.map

3

dist/components/EditableText/EditableText.js

@@ -89,3 +89,3 @@ "use strict";

children: [mode === 'INPUT' && _jsx(Box, _objectSpread(_objectSpread({
is: "input"
as: "input"
}, inputProps), {}, {

@@ -114,2 +114,3 @@ autoFocus: true,

});
EditableText.displayName = 'EditableText';
export default EditableText;

6

dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.js

@@ -92,5 +92,5 @@ "use strict";

if (inView && typeof activePage !== 'number') dispatch({
type: 'GO_TO_PAGE',
payload: typeof incomingActivePage === 'number' ? incomingActivePage : 0
});
type: 'GO_TO_PAGE',
payload: typeof incomingActivePage === 'number' ? incomingActivePage : 0
});
}, [incomingActivePage, activePage]);

@@ -97,0 +97,0 @@ const [containerRef, inView, entry] = useInView({

4

dist/components/MinimalModal/MinimalModal.css.js

@@ -11,6 +11,4 @@ "use strict";

overflowY: 'auto',
overscrollBehavior: 'contain',
webkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch'
overscrollBehavior: 'contain'
}, "content");
__vanilla_filescope__.endFileScope();

3

dist/components/NumberInput/NumberInput.d.ts

@@ -1,3 +0,2 @@

import * as React from 'react';
import { FocusEventHandler, FormEventHandler } from 'react';
import React, { type FocusEventHandler, type FormEventHandler } from 'react';
interface Props extends Partial<Pick<HTMLInputElement, 'min' | 'max' | 'step'>>, Pick<HTMLInputElement, 'value'> {

@@ -4,0 +3,0 @@ preventMouseWheel?: boolean;

4

dist/components/NumberInput/NumberInput.js

@@ -9,3 +9,3 @@ "use strict";

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from 'react';
import React from 'react';
import { Box } from "../Box/index.js";

@@ -52,3 +52,3 @@ import { withEnhancedInput } from "../private/InputBase/index.js";

return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
is: "input",
as: "input",
ref: inputRef

@@ -55,0 +55,0 @@ }, eventHandlers), {}, {

12

dist/components/NumberInput/NumberInput.stories.d.ts

@@ -7,11 +7,7 @@ import { Meta, StoryObj } from '@storybook/react';

export declare const Standard: Story;
export declare const WithAValue: Story;
export declare const WithHintText: Story;
export declare const NotchDisabledWithValue: Story;
export declare const WithPrefixIcon: Story;
export declare const WithSuffixIcon: Story;
export declare const WithBothIcons: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const SmallSize: Story;
export declare const WithIcons: Story;
export declare const Loading: Story;
export declare const WithValueSmall: Story;
//# sourceMappingURL=NumberInput.stories.d.ts.map

2

dist/components/NumberInput/useNumberInputBehaviours.d.ts

@@ -1,2 +0,2 @@

import { FocusEventHandler, FormEventHandler, RefObject } from 'react';
import { type FocusEventHandler, type FormEventHandler, type RefObject } from 'react';
import { EnhanceInputPrimitiveProps } from '../private/InputBase/withEnhancedInput';

@@ -3,0 +3,0 @@ interface Props {

5

dist/components/private/CheckableBase/CheckableBase.css.d.ts
export declare const root: string;
export declare const label: Record<"disabled", string>;
export declare const nativeInput: Record<"default" | "checked", string>;
export declare const nativeInput: string;
export declare const checkable: string;
export declare const checkableIndicator: string;
export declare const disabled: string;
export declare const checkableItem: string;
export declare const disabled: string;
//# sourceMappingURL=CheckableBase.css.d.ts.map

41

dist/components/private/CheckableBase/CheckableBase.css.js

@@ -6,6 +6,6 @@ "use strict";

import { style, styleVariants } from '@vanilla-extract/css';
import { focusOutline } from "../../../styles/focusOutline.css.js";
import { themeContractVars as vars } from "../../../themes/theme.css.js";
export const root = style({
cursor: 'pointer',
transition: `background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
':hover': {

@@ -20,26 +20,31 @@ backgroundColor: vars.colours.background.body

}, "label");
export const nativeInput = styleVariants({
default: {
zIndex: 2,
top: 0,
left: 0,
cursor: 'inherit',
opacity: 0
},
checked: {
outline: 'none'
}
export const nativeInput = style({
zIndex: 2,
top: 0,
left: 0,
cursor: 'inherit',
opacity: 0,
outline: 'none'
}, "nativeInput");
export const checkable = style({
width: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
height: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
width: `calc(${vars.space['6']} + (${vars.space[3]} * 2))`,
height: `calc(${vars.space['6']} + (${vars.space[3]} * 2))`,
marginTop: `calc(-1*${vars.space['3']})`,
marginBottom: `calc(-1*${vars.space['3']})`
}, "checkable");
export const checkableIndicator = style({
selectors: {
[`${nativeInput}:focus-visible ~${checkable} &`]: focusOutline
}
}, "checkableIndicator");
export const disabled = style({
opacity: 0.6,
pointerEvents: 'none'
}, "disabled");
export const checkableItem = style({
selectors: {
[`${nativeInput.default}:focus:checked ~${checkable} &`]: {
[`${nativeInput}:focus:checked ~${checkable} &`]: {
boxShadow: `0 0 0 2px ${vars.colours.intent.primary.background.strong}`
},
[`${nativeInput.default}:focus:not(:checked) ~${checkable} >&`]: {
[`${nativeInput}:focus:not(:checked) ~${checkable} >&`]: {
borderColor: vars.colours.intent.primary.background.strong

@@ -49,6 +54,2 @@ }

}, "checkableItem");
export const disabled = style({
opacity: 0.6,
pointerEvents: 'none'
}, "disabled");
__vanilla_filescope__.endFileScope();

3

dist/components/private/CheckableBase/CheckableBase.d.ts

@@ -1,3 +0,2 @@

import * as React from 'react';
import { ReactNode } from 'react';
import React, { type ReactNode } from 'react';
export interface Props {

@@ -4,0 +3,0 @@ className?: string;

20

dist/components/private/CheckableBase/CheckableBase.js
"use strict";
import clsx from 'clsx';
import * as React from 'react';
import { forwardRef } from 'react';
import React, { forwardRef, useId } from 'react';
import { Box, useBoxStyles } from "../../Box/index.js";

@@ -29,2 +28,3 @@ import { Text, useTextStyles } from "../../Text/index.js";

const nakedLabel = ['string', 'number'].includes(typeof label);
const id = useId();
return _jsxs(Box, {

@@ -46,3 +46,4 @@ display: "flex",

ref: ref,
is: "input",
id: id,
as: "input",
position: "absolute",

@@ -57,3 +58,2 @@ width: "full",

disabled: disabled,
tabIndex: disabled ? -1 : void 0,
type: inputType,

@@ -63,5 +63,3 @@ pointerEvents: disabled ? 'none' : void 0,

is: 'button'
}), styles.nativeInput.default, {
[styles.nativeInput.checked]: checked
}),
}), styles.nativeInput),
onClick: handleClick,

@@ -78,4 +76,5 @@ onChange: onChange

children: children
}), label ? _jsx(Box, {
is: "label",
}), _jsx(Box, {
as: "label",
htmlFor: id,
width: "full",

@@ -94,5 +93,6 @@ pointerEvents: disabled ? 'none' : void 0,

}) : label
}) : null]
})]
});
});
CheckableBase.displayName = 'CheckableBase';
export default CheckableBase;

2

dist/components/private/InputBase/HintText.d.ts

@@ -1,2 +0,2 @@

import { FunctionComponent, ReactNode } from 'react';
import { type FunctionComponent, type ReactNode } from 'react';
export interface Props {

@@ -3,0 +3,0 @@ hintText: ReactNode;

5

dist/components/private/InputBase/HintText.js
"use strict";
import clsx from 'clsx';
import * as React from 'react';
import React from 'react';
import { useBoxStyles } from "../../Box/index.js";

@@ -18,4 +18,3 @@ import { Text } from "../../Text/index.js";

is: 'p',
marginTop: '2',
marginLeft: '4'
marginTop: '1'
});

@@ -22,0 +21,0 @@ if (!hintText && !reserveHintSpace) return null;

10

dist/components/private/InputBase/InputState.css.js

@@ -8,13 +8,13 @@ "use strict";

const activeColour = style({
color: vars.typography.colour.information
color: vars.typography.colour.dark
}, "activeColour");
const activeBorderColour = style({
color: vars.typography.colour.information
color: vars.typography.colour.dark
}, "activeBorderColour");
export const disabled = styleVariants({
colour: {
color: vars.typography.colour.muted
color: vars.colours.gamut.gray200
},
borderColour: {
borderColor: vars.typography.colour.muted
borderColor: vars.border.colours.gray
}

@@ -28,3 +28,3 @@ }, "disabled");

borderColour: style({
borderColor: vars.typography.colour.muted
borderColor: vars.border.colours.gray
}, "natural_default_borderColour")

@@ -31,0 +31,0 @@ },

2

dist/components/private/InputBase/NotchedBase.css.d.ts

@@ -22,5 +22,5 @@ export declare const root: string;

type Size = 'small' | 'medium';
export declare const placeholder: Record<"default" | "mutedLabelStyles", string>;
export declare const placeholder: Record<"default" | "disabled" | "mutedLabelStyles", string>;
export declare const placeholderPlacement: Record<Size, Record<string, string>>;
export {};
//# sourceMappingURL=NotchedBase.css.d.ts.map

31

dist/components/private/InputBase/NotchedBase.css.js

@@ -19,4 +19,3 @@ "use strict";

const borderVisualDefaults = style({
borderRadius: vars.border.radius['1'],
boxShadow: vars.elevation['2']
borderRadius: vars.border.radius['2']
}, "borderVisualDefaults");

@@ -35,5 +34,3 @@ export const notchGapPlaceholder = style({

}, "borders_root_default")],
disabled: style({
boxShadow: 'none'
}, "borders_root_disabled")
disabled: ''
},

@@ -44,3 +41,3 @@ complete: [borderVisualDefaults, borderRegionDefaults],

borderRight: 'none',
borderRadius: `${vars.border.radius['1']} 0 0 ${vars.border.radius['1']}`
borderRadius: `${vars.border.radius['2']} 0 0 ${vars.border.radius['2']}`
}, "borders_leading")],

@@ -56,3 +53,3 @@ middle: [borderRegionDefaults, style({

borderLeft: 'none',
borderRadius: `0 ${vars.border.radius['1']} ${vars.border.radius['1']} 0`
borderRadius: `0 ${vars.border.radius['2']} ${vars.border.radius['2']} 0`
}, "borders_trailing")]

@@ -63,15 +60,15 @@ };

NONE: {
borderRadius: `${vars.border.radius['1']}`
borderRadius: `${vars.border.radius['2']}`
},
LEFT: {
borderRadius: `0 ${vars.border.radius['1']} ${vars.border.radius['1']} 0`
borderRadius: `0 ${vars.border.radius['2']} ${vars.border.radius['2']} 0`
},
TOP: {
borderRadius: `0 0 ${vars.border.radius['1']} ${vars.border.radius['1']}`
borderRadius: `0 0 ${vars.border.radius['2']} ${vars.border.radius['2']}`
},
RIGHT: {
borderRadius: `${vars.border.radius['1']} 0 0 ${vars.border.radius['1']}`
borderRadius: `${vars.border.radius['2']} 0 0 ${vars.border.radius['2']}`
},
BOTTOM: {
borderRadius: `${vars.border.radius['1']} ${vars.border.radius['1']} 0 0`
borderRadius: `${vars.border.radius['2']} ${vars.border.radius['2']} 0 0`
},

@@ -143,2 +140,5 @@ ALL: {

color: vars.typography.colour.muted
},
disabled: {
color: vars.colours.background.neutral
}

@@ -150,3 +150,8 @@ }, "placeholder");

}
return size === 'medium' ? `${prefixed ? `calc(${vars.space['7']} + ${vars.space['3']})` : vars.typography.size['4'].fontSize}, calc((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2)` : `${prefixed ? `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})` : vars.space['2']}, calc(${vars.space['2']} + 2px)`;
if (size === 'medium') {
const from = prefixed ? `calc(${vars.space['7']} + ${vars.space['3']})` : vars.typography.size['4'].fontSize;
return `${from}, calc((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2)`;
}
const from = prefixed ? `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})` : vars.space['2'];
return `${from}, calc(${vars.space['2']} + 2px)`;
};

@@ -153,0 +158,0 @@ export const placeholderPlacement = {

2

dist/components/private/InputBase/NotchedBase.d.ts

@@ -1,2 +0,2 @@

import { FunctionComponent, ReactNode } from 'react';
import { type FunctionComponent, type ReactNode } from 'react';
import * as styles from './NotchedBase.css';

@@ -3,0 +3,0 @@ export interface Props {

10

dist/components/private/InputBase/NotchedBase.js
"use strict";
import clsx from 'clsx';
import * as React from 'react';
import { useRef } from 'react';
import React, { useRef } from 'react';
import { Box } from "../../Box/index.js";

@@ -80,3 +79,3 @@ import { useTextStyles } from "../../Text/index.js";

ref: labelRef,
is: "label",
as: "label",
pointerEvents: "none",

@@ -92,3 +91,4 @@ htmlFor: id,

[styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
[styles.placeholder.mutedLabelStyles]: isEmpty || disabled,
[styles.placeholder.mutedLabelStyles]: isEmpty,
[styles.placeholder.disabled]: disabled,
[styles.placeholderPlacement[size].default]: isEmpty && !prefixed,

@@ -101,3 +101,3 @@ [styles.placeholderPlacement[size].defaultPrefixed]: isEmpty && prefixed,

}), _jsx("div", {
className: clsx(styles.borders.trailing, borderColourClassName, borderColourClassName, {
className: clsx(styles.borders.trailing, borderColourClassName, {
[styles.bordersMerged.complete.RIGHT]: shouldMerge && borderMerged === 'RIGHT',

@@ -104,0 +104,0 @@ [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',

2

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

@@ -15,3 +15,3 @@ "use strict";

'&[disabled]': {
color: vars.typography.colour.muted,
color: vars.colours.background.neutral,
cursor: 'not-allowed'

@@ -18,0 +18,0 @@ },

4

dist/components/private/InputBase/withEnhancedInput.d.ts
import { IconType } from '@autoguru/icons';
import * as React from 'react';
import { AriaAttributes, ChangeEventHandler, ComponentProps, ComponentType, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode, Ref } from 'react';
import { type AriaAttributes, type ChangeEventHandler, type ComponentProps, type ComponentType, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type Ref, type RefObject } from 'react';
import { Box } from '../../Box';

@@ -43,3 +43,3 @@ import { NotchedBase } from './NotchedBase';

field: Omit<EnhanceInputPrimitiveProps, 'placeholder' | 'hintText' | 'fieldIcon' | 'size'> & {
ref: MutableRefObject<PrimitiveElementType>;
ref: RefObject<PrimitiveElementType>;
};

@@ -46,0 +46,0 @@ fieldIcon?: EnhanceInputPrimitiveProps['fieldIcon'];

5

dist/components/private/InputBase/withEnhancedInput.js

@@ -81,3 +81,3 @@ "use strict";

display: 'flex',
borderRadius: '1'
borderRadius: '2'
}), styles.input.itself.root, styles.types[primitiveType], styles.inputItselfSize[size].root.any, styles.inputItselfSize[size].root[primitiveType], {

@@ -166,3 +166,4 @@ [styles.inputItselfSize[size].prefixed.any]: Boolean(prefixIcon),

}) : null, isLoading ? _jsx(ProgressSpinner, {
className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size], derivedColours.colour)
colour: "default",
className: clsx(iconStyles, styles.iconRoot, styles.suffixIcon, styles.iconSize[size])
}) : null, suffixIcon && !isLoading ? _jsx(Icon, {

@@ -169,0 +170,0 @@ icon: suffixIcon,

2

dist/components/ProgressSpinner/ProgressSpinner.css.d.ts
export declare const circular: string;
export declare const path: string;
export declare const colours: Record<"primary" | "secondary" | "danger" | "warning" | "light", string>;
export declare const colours: Record<"primary" | "secondary" | "danger" | "warning" | "light" | "default", string>;
export declare const size: {

@@ -5,0 +5,0 @@ small: Record<"path" | "circular", string>;

3

dist/components/ProgressSpinner/ProgressSpinner.css.js

@@ -43,2 +43,5 @@ "use strict";

export const colours = styleVariants({
default: {
stroke: vars.colours.foreground.body
},
light: {

@@ -45,0 +48,0 @@ stroke: vars.typography.colour.white

5

dist/components/Radio/Radio.css.d.ts

@@ -1,2 +0,5 @@

export declare const circle: Record<"default" | "selected" | "outer" | "inner" | "selectedInner", string>;
export declare const radio: string;
export declare const radioSelected: string;
export declare const inner: string;
export declare const innerSelected: string;
//# sourceMappingURL=Radio.css.d.ts.map

68

dist/components/Radio/Radio.css.js

@@ -5,27 +5,51 @@ "use strict";

__vanilla_filescope__.setFileScope("lib/components/Radio/Radio.css.ts", "@autoguru/overdrive");
import { styleVariants } from '@vanilla-extract/css';
import { style } from '@vanilla-extract/css';
import { themeContractVars as vars } from "../../themes/theme.css.js";
export const circle = styleVariants({
default: {
transition: `border-color 0.2s ${vars.animation.easing.decelerate} 0s`
import { checkable, nativeInput } from "../private/CheckableBase/CheckableBase.css.js";
const colorAccent = vars.colours.foreground.body;
const colorContrast = vars.colours.background.body;
const colorMid = vars.colours.background.neutral;
const outerSize = vars.space['6'];
const innerSize = vars.space['3'];
const borderWidth = vars.border.width['1'];
const transition = `background-color 0.2s ${vars.animation.easing.decelerate} 0s, border-color 0.2s ${vars.animation.easing.decelerate} 0s`;
const circleBase = style({
position: 'absolute',
borderRadius: vars.border.radius.full
}, "circleBase");
export const radio = style([circleBase, {
borderColor: colorMid,
borderStyle: 'solid',
borderWidth: borderWidth,
height: outerSize,
width: outerSize,
selectors: {
[`${nativeInput}:not(:checked,[checked]):hover ~${checkable} &`]: {
backgroundColor: colorMid
}
},
outer: {
top: vars.space['3'],
left: vars.space['3'],
width: vars.space['4'],
height: vars.space['4']
},
inner: {
top: `calc(${vars.space['3']} + (${vars.space['4']} - ${vars.space['2']}) * 0.5)`,
left: `calc(${vars.space['3']} + (${vars.space['4']} - ${vars.space['2']}) * 0.5)`,
width: vars.space['2'],
height: vars.space['2']
},
selectedInner: {
borderWidth: `calc(${vars.space['2']} / 2)`
},
selected: {
borderColor: vars.typography.colour.primary
transition
}], "radio");
export const radioSelected = style({
backgroundColor: colorAccent,
borderColor: colorAccent
}, "radioSelected");
export const inner = style([circleBase, {
height: innerSize,
width: innerSize,
transition: `${transition}, transform 0.2s ${vars.animation.easing.standard}`,
selectors: {
[`${nativeInput}:not(:checked):hover ~${checkable} &`]: {
backgroundColor: colorContrast
}
}
}, "circle");
}], "inner");
export const innerSelected = style({
backgroundColor: colorContrast,
selectors: {
[`${nativeInput}:hover ~${checkable} &`]: {
transform: 'scale(0.85)'
}
}
}, "innerSelected");
__vanilla_filescope__.endFileScope();

23

dist/components/Radio/Radio.js

@@ -8,3 +8,3 @@ "use strict";

import { CheckableBase } from "../private/CheckableBase/index.js";
import { useCheckableStyles } from "../private/CheckableBase/useCheckableStyles.js";
import { checkableIndicator } from "../private/CheckableBase/CheckableBase.css.js";
import * as styles from "./Radio.css.js";

@@ -20,5 +20,2 @@ import { useRadioContext } from "./RadioGroup.js";

} = _ref;
const {
checkableItem
} = useCheckableStyles();
const radioContext = useRadioContext();

@@ -41,17 +38,8 @@ const isChecked = value === radioContext.value;

children: [_jsx(Box, {
borderRadius: "pill",
position: "absolute",
borderWidth: "2",
borderColour: "gray",
className: clsx(checkableItem, styles.circle.default, styles.circle.outer, {
[styles.circle.selected]: isChecked
className: clsx(checkableIndicator, styles.radio, {
[styles.radioSelected]: isChecked
})
}), _jsx(Box, {
borderRadius: "pill",
position: "absolute",
borderColour: "gray",
borderWidth: "none",
className: clsx(styles.circle.default, styles.circle.inner, {
[styles.circle.selected]: isChecked,
[styles.circle.selectedInner]: isChecked
className: clsx(styles.inner, {
[styles.innerSelected]: isChecked
})

@@ -61,2 +49,3 @@ })]

});
Radio.displayName = 'Radio';
export default Radio;

42

dist/components/Radio/Radio.stories.d.ts

@@ -1,37 +0,17 @@

import { StoryObj } from '@storybook/react';
import { StoryObj, Meta } from '@storybook/react';
import React from 'react';
import { Radio } from '.';
declare const _default: {
title: string;
component: React.ForwardRefExoticComponent<import("./Radio").Props & React.RefAttributes<HTMLInputElement>>;
decorators: ((story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
import { RadioGroup as RadioGroupComponent } from '.';
declare const meta: Meta<typeof RadioGroupComponent>;
export default meta;
type Story = StoryObj<typeof RadioGroupComponent>;
export declare const RadioGroup: {
render: ({ ...args }: {
[x: string]: any;
}) => React.JSX.Element;
args: {
name: string;
value: string;
className?: string | undefined;
disabled?: boolean | undefined;
children?: React.ReactNode;
ref?: React.Ref<HTMLInputElement> | undefined;
key?: React.Key | null | undefined;
}>) => React.JSX.Element)[];
argTypes: {
value: {
options: string[];
defaultValue: null;
control: {
type: "select";
};
children: {
control: {
disable: boolean;
};
};
};
};
};
export default _default;
type Story = StoryObj<typeof Radio>;
export declare const List: Story;
export declare const DisabledChecked: Story;
export declare const MultipleLines: Story;
export declare const WithChildren: Story;
export declare const WithComplexChildren: Story;
//# sourceMappingURL=Radio.stories.d.ts.map

1

dist/components/Radio/RadioGroup.js

@@ -35,2 +35,3 @@ "use strict";

});
RadioGroup.displayName = 'RadioGroup';
export default RadioGroup;

2

dist/components/SearchBar/SearchBar.stories.d.ts
import { Meta, StoryObj } from '@storybook/react';
import { SearchBar } from './SearchBar';
declare const meta: Meta;
declare const meta: Meta<typeof SearchBar>;
export default meta;

@@ -5,0 +5,0 @@ type Story = StoryObj<typeof SearchBar>;

69

dist/components/SelectInput/SelectInput.stories.d.ts

@@ -1,70 +0,11 @@

import type { StoryObj } from '@storybook/react';
import React from 'react';
declare const meta: {
title: string;
component: React.ForwardRefExoticComponent<{
children?: React.ReactNode;
} & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLSelectElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & React.RefAttributes<HTMLSelectElement>>;
args: {
value: null;
disabled: false;
name: string;
placeholder: string;
isValid: false;
isTouched: false;
isLoading: false;
isFocused: false;
reserveHintSpace: false;
hintText: string;
notch: true;
attach: "NONE";
prefixIcon: undefined;
onChange: import("@storybook/addon-actions").HandlerFunction;
onFocus: import("@storybook/addon-actions").HandlerFunction;
onBlur: import("@storybook/addon-actions").HandlerFunction;
children: React.JSX.Element;
};
argTypes: {
value: {
options: string[];
control: {
type: "select";
};
};
attach: {
description: string;
options: string[];
control: {
type: "select";
};
};
prefixIcon: {
description: string;
options: string[];
mapping: {
None: null;
Magnify: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Car: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Car Multiple': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Calendar: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Account Edit': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Alert Circle': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
'Currency USD': React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Plus: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Star: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
Check: React.ReactElement<React.SVGAttributes<SVGElement>, "svg">;
};
};
};
};
import type { Meta, StoryObj } from '@storybook/react';
import { SelectInput } from '.';
declare const meta: Meta<typeof SelectInput>;
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Standard: Story;
export declare const NotchDisabled: Story;
export declare const WithPrefixIcon: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const Loading: Story;
export declare const Small: Story;
export declare const Disabled: Story;
export declare const SizeSmall: Story;
//# sourceMappingURL=SelectInput.stories.d.ts.map

4

dist/components/StandardModal/StandardModal.css.js

@@ -68,6 +68,4 @@ "use strict";

overflowY: 'auto',
overscrollBehavior: 'contain',
webkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch'
overscrollBehavior: 'contain'
}, "content");
__vanilla_filescope__.endFileScope();

11

dist/components/Switch/Switch.css.d.ts

@@ -1,7 +0,6 @@

export declare const handle: Record<"transition" | "default" | "disabled", string>;
export declare const toggled: string;
export declare const untoggled: string;
export declare const disabled: Record<"default" | "toggled", string>;
export declare const focus: string;
export declare const root: string;
export declare const base: string;
export declare const toggle: string;
export declare const toggleOn: string;
export declare const disabled: string;
export declare const handle: Record<"default" | "active", string>;
//# sourceMappingURL=Switch.css.d.ts.map

110

dist/components/Switch/Switch.css.js

@@ -6,29 +6,57 @@ "use strict";

import { style, styleVariants } from '@vanilla-extract/css';
import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
import { themeContractVars as vars } from "../../themes/theme.css.js";
const colorAccent = vars.colours.foreground.body;
const colorContrast = vars.colours.background.body;
const colorMid = vars.colours.background.neutral;
const colorLight = vars.colours.background.light;
const height = vars.space['6'];
const handleSize = '24px';
const handleOffset = '3px';
const borderSize = '1px';
export const base = style({
display: 'inline-block'
}, "base");
export const toggle = style([{
cursor: 'pointer',
backgroundColor: colorMid,
height: height,
width: `calc(2 * ${height} - 2px)`,
borderRadius: vars.border.radius.pill,
padding: '3px 4px',
transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
selectors: {
'&:not([data-disabled]):hover': {
backgroundColor: colorAccent
}
}
}, focusOutlineStyle], "toggle");
export const toggleOn = style({
backgroundColor: colorAccent
}, "toggleOn");
export const disabled = style({
backgroundColor: colorLight,
cursor: 'not-allowed'
}, "disabled");
const handleScale = 'scale(0.95)';
const handleTranslate = `translateX(calc(${handleSize} - 4px))`;
export const handle = styleVariants({
disabled: {
border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`
},
default: {
borderSize: `${borderSize}`,
top: `calc(${handleOffset} - ${borderSize})`,
left: `calc(1.5 * ${handleOffset})`,
width: `calc(${handleSize} - (2 * ${handleOffset}))`,
height: `calc(${handleSize} - (2 * ${handleOffset}))`,
aspectRatio: '1',
height: '100%',
borderRadius: vars.border.radius.full,
backgroundColor: colorContrast,
transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
willChange: 'transform',
selectors: {
'&:hover': {
transform: 'scale(0.9)'
[`${toggle}:not([data-disabled]):hover &`]: {
transform: handleScale
}
}
},
transition: {
transform: `translateX(calc(${handleSize} - (2 * ${handleOffset})))`,
active: {
selectors: {
'&:hover': {
transform: `translateX(calc(${handleSize} - (2 * ${handleOffset}))) scale(0.9)`
[`${toggleOn} &`]: {
transform: handleTranslate
},
[`${toggle}:not([data-disabled]):hover &`]: {
transform: `${handleScale} ${handleTranslate}`
}

@@ -38,52 +66,2 @@ }

}, "handle");
export const toggled = style({
border: `${borderSize} solid ${vars.colours.intent.primary.background.strong}`,
backgroundColor: vars.colours.intent.primary.background.strong
}, "toggled");
export const untoggled = style({
border: `${borderSize} solid color-mix(in oklch, ${vars.colours.intent.primary.background.standard}, transparent 60%)`,
backgroundColor: vars.colours.intent.primary.background.mild,
transition: '0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
selectors: {
'&:hover': {
borderColor: vars.colours.intent.primary.background.strong,
backgroundColor: vars.colours.intent.primary.background.strong
}
}
}, "untoggled");
export const disabled = styleVariants({
default: {
selectors: {
'&[aria-disabled=true]': {
cursor: 'not-allowed',
border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`,
backgroundColor: 'white'
}
}
},
toggled: {
selectors: {
'&[aria-disabled=true]': {
cursor: 'not-allowed',
border: `${borderSize} solid ${vars.colours.intent.primary.background.mild}`,
backgroundColor: 'white'
}
}
}
}, "disabled");
export const focus = style({
outline: `calc(${handleOffset} - ${borderSize}) solid ${vars.colours.intent.brand.background.standard}`
}, "focus");
export const root = style({
width: `calc((2 * ${handleSize}) - 2 * ${borderSize})`,
height: `${handleSize}`,
top: `calc(${handleOffset} - ${borderSize})`,
left: `calc(1.5 * ${handleOffset})`,
transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
selectors: {
[`&:not(${disabled.default}):not(${disabled.toggled}):focus`]: {
borderColor: vars.colours.intent.information.background.standard
}
}
}, "root");
__vanilla_filescope__.endFileScope();

17

dist/components/Switch/Switch.d.ts

@@ -1,11 +0,16 @@

import { AnchorHTMLAttributes, FunctionComponent } from 'react';
import { useSwitch } from 'react-aria';
type AriaSwitchProps = Parameters<typeof useSwitch>[0];
export type SwitchProps = AriaSwitchProps & Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> & {
import React from 'react';
import { type AriaSwitchProps } from 'react-aria';
export interface SwitchProps extends AriaSwitchProps {
'aria-labelledby'?: AriaSwitchProps['aria-labelledby'];
name?: AriaSwitchProps['name'];
value?: AriaSwitchProps['value'];
isDisabled?: AriaSwitchProps['isDisabled'];
isSelected?: AriaSwitchProps['isSelected'];
onChange?: AriaSwitchProps['onChange'];
className?: string;
disabled?: boolean;
toggled?: boolean;
};
export declare const Switch: FunctionComponent<SwitchProps>;
}
export declare const Switch: ({ className, disabled, toggled, isSelected, isDisabled, ...incomingProps }: SwitchProps) => React.JSX.Element;
export default Switch;
//# sourceMappingURL=Switch.d.ts.map

57

dist/components/Switch/Switch.js

@@ -10,6 +10,6 @@ "use strict";

import clsx from 'clsx';
import * as React from 'react';
import { useRef } from 'react';
import React, { useRef } from 'react';
import { useSwitch, useFocusRing } from 'react-aria';
import { Box, useBoxStyles } from "../Box/index.js";
import { dataAttrs } from "../../utils/dataAttrs.js";
import { Box } from "../Box/index.js";
import { useTextStyles } from "../Text/index.js";

@@ -24,9 +24,9 @@ import { VisuallyHidden } from "../VisuallyHidden/index.js";

toggled,
isSelected,
isDisabled
isSelected = toggled,
isDisabled = disabled
} = _ref,
incomingProps = _objectWithoutProperties(_ref, _excluded);
const props = _objectSpread(_objectSpread({}, incomingProps), {}, {
isDisabled: isDisabled || disabled,
isSelected: isSelected || toggled
isDisabled,
isSelected
});

@@ -43,2 +43,3 @@ const state = useToggleState(props);

return _jsxs("label", {
className: styles.base,
children: [_jsx(VisuallyHidden, {

@@ -48,38 +49,22 @@ children: _jsx("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), focusProps), {}, {

}))
}), _jsx(Box, {
className: clsx(styles.root, useTextStyles({
}), _jsx(Box, _objectSpread(_objectSpread({
className: clsx(styles.toggle, useTextStyles({
size: '5'
}), {
[styles.disabled.default]: inputProps.disabled,
[styles.disabled.toggled]: state.isSelected && inputProps.disabled,
[styles.toggled]: state.isSelected,
[styles.untoggled]: !state.isSelected,
[styles.focus]: isFocusVisible
}, className),
tabIndex: inputProps.disabled ? -1 : void 0,
borderRadius: "pill",
position: "relative",
"aria-disabled": inputProps.disabled,
"aria-label": `toggle ${state.isSelected ? 'on' : 'off'}`,
[styles.disabled]: inputProps.disabled,
[styles.toggleOn]: state.isSelected
}, className)
}, dataAttrs({
disabled: inputProps.disabled,
active: state.isSelected,
'focus-visible': isFocusVisible
})), {}, {
children: _jsx(Box, {
borderWidth: "1",
position: "absolute",
borderRadius: "pill",
backgroundColour: "white",
padding: "none",
pointerEvents: inputProps.disabled ? 'none' : void 0,
boxShadow: "2",
className: clsx(styles.handle.default, useBoxStyles({
is: 'button'
}), useTextStyles({
colour: 'white'
}), {
[styles.handle.transition]: state.isSelected,
[styles.handle.default]: inputProps.disabled,
[styles.handle.disabled]: inputProps.disabled
className: clsx(styles.handle.default, {
[styles.handle.active]: state.isSelected
})
})
}), props.children]
})), props.children]
});
};
export default Switch;

20

dist/components/Switch/Switch.stories.d.ts

@@ -1,19 +0,9 @@

import type { StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Switch } from '.';
declare const meta: {
title: string;
component: import("react").FunctionComponent<import("./Switch").SwitchProps>;
args: {
isDisabled: false;
isSelected: false;
onChange: import("@storybook/addon-actions").HandlerFunction;
className: string;
};
};
declare const meta: Meta<typeof Switch>;
export default meta;
type Story = StoryObj<typeof Switch>;
export declare const Untoggled: Story;
export declare const UntoggledDisabled: Story;
export declare const Toggled: Story;
export declare const ToggledDisabled: Story;
export declare const Uncontrolled: Story;
export declare const WithLabel: Story;
export declare const Disabled: Story;
//# sourceMappingURL=Switch.stories.d.ts.map

20

dist/components/Tabs/Tab.css.js
"use strict";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
__vanilla_filescope__.setFileScope("lib/components/Tabs/Tab.css.ts", "@autoguru/overdrive");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { style, styleVariants } from '@vanilla-extract/css';
import { themeContractVars as vars } from "../../themes/theme.css.js";
import { focusOutline } from "./../../styles/focusOutline.css.js";
const lineBottomHeight = '1px';

@@ -11,3 +15,3 @@ const size = '20px';

default: style({
padding: `calc(${vars.space['3']} + ${lineBottomHeight}) 0`,
padding: `calc(${vars.space['3']} + ${lineBottomHeight}) ${vars.space['4']}`,
transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, background-color 0.2s ${vars.animation.easing.decelerate} 0s`,

@@ -20,11 +24,11 @@ borderBottom: `calc(${lineBottomHeight} + ${lineBottomHeight}) solid transparent`,

':hover': {
color: vars.colours.intent.primary.background.strong
color: vars.colours.intent.neutral.background.strong
},
':focus': {
color: vars.colours.intent.primary.background.strong
}
':focus-visible': _objectSpread(_objectSpread({}, focusOutline), {}, {
outlineOffset: '-2px'
})
}, "root_default"),
active: style({
color: vars.colours.intent.primary.background.strong,
borderBottomColor: vars.colours.intent.primary.background.strong
color: vars.colours.intent.neutral.background.strong,
borderBottomColor: vars.colours.intent.neutral.background.strong
}, "root_active")

@@ -46,5 +50,5 @@ };

active: {
backgroundColor: vars.colours.intent.primary.background.strong
backgroundColor: vars.colours.intent.neutral.background.strong
}
}, "indication");
__vanilla_filescope__.endFileScope();

3

dist/components/Tabs/Tab.js

@@ -48,3 +48,3 @@ "use strict";

'aria-selected': isActive ? 'true' : 'false',
'aria-controls': controlsId,
'data-controls': controlsId,
tabIndex: isActive ? undefined : -1,

@@ -80,2 +80,3 @@ onClick: () => {

});
Tab.displayName = 'Tab';
export default Tab;

1

dist/components/Tabs/TabList.css.js

@@ -20,3 +20,2 @@ "use strict";

overflowY: 'hidden',
'-webkit-overflow-scrolling': 'auto',
overscrollBehavior: 'contain',

@@ -23,0 +22,0 @@ scrollBehavior: 'smooth',

6

dist/components/Tabs/TabList.js

@@ -15,2 +15,6 @@ "use strict";

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultEnglish = {
next: 'scroll tabs right',
prev: 'scroll tabs left'
};
export const TabListContext = createContext(null);

@@ -92,2 +96,3 @@ export const TabList = _ref => {

onClick: handleStartButton,
"aria-label": defaultEnglish.prev,
children: _jsx(Icon, {

@@ -119,2 +124,3 @@ icon: ArrowLeftIcon

onClick: handleEndButton,
"aria-label": defaultEnglish.next,
children: _jsx(Icon, {

@@ -121,0 +127,0 @@ icon: ArrowRightIcon

4

dist/components/Tabs/TabPane.css.js

@@ -6,6 +6,8 @@ "use strict";

import { style } from '@vanilla-extract/css';
import { focusOutline } from "../../styles/focusOutline.css.js";
export const root = style({
float: 'left',
outline: 'none'
outline: 'none',
':focus-visible': focusOutline
}, "root");
__vanilla_filescope__.endFileScope();

28

dist/components/TextAreaInput/TextAreaInput.stories.d.ts

@@ -1,28 +0,10 @@

import type { StoryObj } from '@storybook/react';
declare const meta: {
title: string;
component: import("react").ForwardRefExoticComponent<Partial<Pick<HTMLTextAreaElement, "maxLength" | "type">> & import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & import("react").RefAttributes<HTMLInputElement>>;
parameters: {
chromatic: {};
};
argTypes: {
maxLength: {
defaultValue: null;
description: string;
control: {
type: "number";
};
};
};
};
import type { Meta, StoryObj } from '@storybook/react';
import { TextAreaInput } from '.';
declare const meta: Meta<typeof TextAreaInput>;
export default meta;
type Story = StoryObj<typeof meta>;
export declare const Standard: Story;
export declare const WithAValue: Story;
export declare const NotchDisabled: Story;
export declare const Filled: Story;
export declare const Small: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const Loading: Story;
export declare const Small: Story;
//# sourceMappingURL=TextAreaInput.stories.d.ts.map

2

dist/components/TextInput/TextInput.js

@@ -26,3 +26,3 @@ "use strict";

return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
is: "input"
as: "input"
}, eventHandlers), field), rest), {}, {

@@ -29,0 +29,0 @@ autoComplete: "off",

22

dist/components/TextInput/TextInput.stories.d.ts

@@ -7,19 +7,13 @@ import type { Meta, StoryObj } from '@storybook/react';

export declare const Standard: Story;
export declare const WithAValue: Story;
export declare const Filled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const Disabled: Story;
export declare const SmallSize: Story;
export declare const WithHintText: Story;
export declare const NotchDisabled: Story;
export declare const NotchDisabledWithValue: Story;
export declare const WithPrefixIcon: Story;
export declare const WithSuffixIcon: Story;
export declare const WithBothIcons: Story;
export declare const WithoutNotchLabel: Story;
export declare const WithIcons: Story;
export declare const Loading: Story;
export declare const AttachedAll: Story;
export declare const MergedAll: Story;
export declare const Disabled: Story;
export declare const Valid: Story;
export declare const Invalid: Story;
export declare const Loading: Story;
export declare const Small: Story;
export declare const WithValueSmall: Story;
export declare const WithIconSmall: Story;
export declare const LoadingSmall: Story;
//# sourceMappingURL=TextInput.stories.d.ts.map

4

dist/stories/helpers/styles.css.d.ts

@@ -26,2 +26,6 @@ import { type RecipeVariants } from '@vanilla-extract/recipes';

};
rectangle: {
borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
width: "140px";
};
};

@@ -28,0 +32,0 @@ }>;

2

dist/styles/focusOutline.css.d.ts

@@ -0,2 +1,4 @@

import { type StyleRule } from '@vanilla-extract/css';
export declare const focusOutline: StyleRule;
export declare const focusOutlineStyle: string;
//# sourceMappingURL=focusOutline.css.d.ts.map

11

dist/styles/focusOutline.css.js

@@ -8,10 +8,11 @@ "use strict";

const width = '2px';
export const focusOutline = {
outline: `solid ${width} ${tokens.colours.foreground.link}`,
outlineOffset: width
};
export const focusOutlineStyle = style({
outlineOffset: width,
outlineStyle: 'none',
outlineWidth: width,
selectors: {
'&:focus-visible, &[data-focus-visible], [data-focus-visible] &': {
outlineColor: tokens.colours.foreground.link,
outlineStyle: 'solid'
outline: `solid ${width} ${tokens.colours.foreground.link}`,
outlineOffset: width
}

@@ -18,0 +19,0 @@ }

6

dist/styles/stack.css.d.ts
import { type RecipeVariants } from '@vanilla-extract/recipes';
export declare const stack: import("@vanilla-extract/recipes").RuntimeFn<{
space: {
xxs: {
gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
xs: {
gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
};
sm: {

@@ -5,0 +11,0 @@ gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

6

dist/styles/stack.css.js

@@ -14,2 +14,8 @@ "use strict";

space: {
xxs: {
gap: tokens.space['1']
},
xs: {
gap: tokens.space['3']
},
sm: {

@@ -16,0 +22,0 @@ gap: tokens.space['5']

4

dist/themes/base/tokens.js

@@ -77,3 +77,3 @@ "use strict";

const white = '#fff';
const secondaryForeground = baseThemeColours.gray['700'];
const secondaryForeground = baseThemeColours.gray['900'];
export const tokens = {

@@ -119,3 +119,3 @@ mode: 'light',

background: {
standard: baseThemeColours.green['700'],
standard: baseThemeColours.green['600'],
mild: baseThemeColours.green['200'],

@@ -122,0 +122,0 @@ strong: baseThemeColours.green['900']

52

package.json
{
"name": "@autoguru/overdrive",
"version": "4.39.1",
"version": "4.40.0-next.0",
"description": "Overdrive is a product component library, and design system for AutoGuru.",

@@ -93,15 +93,15 @@ "types": "dist/index.d.ts",

"@popperjs/core": "^2.11.8",
"@react-stately/toggle": "^3.8.1",
"@storybook/addon-a11y": "^8.6.3",
"@storybook/addon-actions": "^8.6.3",
"@storybook/addon-essentials": "^8.6.3",
"@storybook/addon-interactions": "^8.6.3",
"@storybook/addon-links": "^8.6.3",
"@storybook/addon-onboarding": "^8.6.3",
"@storybook/blocks": "^8.6.3",
"@storybook/manager-api": "^8.6.3",
"@storybook/react": "^8.6.3",
"@storybook/react-vite": "^8.6.3",
"@storybook/test": "^8.6.3",
"@storybook/theming": "^8.6.3",
"@react-stately/toggle": "^3.8.2",
"@storybook/addon-a11y": "^8.6.4",
"@storybook/addon-actions": "^8.6.4",
"@storybook/addon-essentials": "^8.6.4",
"@storybook/addon-interactions": "^8.6.4",
"@storybook/addon-links": "^8.6.4",
"@storybook/addon-onboarding": "^8.6.4",
"@storybook/blocks": "^8.6.4",
"@storybook/manager-api": "^8.6.4",
"@storybook/react": "^8.6.4",
"@storybook/react-vite": "^8.6.4",
"@storybook/test": "^8.6.4",
"@storybook/theming": "^8.6.4",
"@testing-library/jest-dom": "^6.6.3",

@@ -111,3 +111,3 @@ "@testing-library/react": "^16.2.0",

"@testing-library/user-event": "^14.6.1",
"@types/node": "^22.13.9",
"@types/node": "^22.13.10",
"@types/react": "^19.0.10",

@@ -123,4 +123,4 @@ "@types/react-dom": "^19.0.4",

"@vanilla-extract/webpack-plugin": "^2.3.18",
"@vitest/coverage-v8": "3.0.7",
"@vitest/eslint-plugin": "^1.1.36",
"@vitest/coverage-v8": "3.0.8",
"@vitest/eslint-plugin": "^1.1.37",
"babel-plugin-add-import-extension": "^1.6.0",

@@ -137,4 +137,4 @@ "babel-plugin-dev-expression": "^0.2.3",

"deepmerge": "^4.3.1",
"eslint": "^9.21.0",
"eslint-plugin-storybook": "^0.11.3",
"eslint": "^9.22.0",
"eslint-plugin-storybook": "^0.11.4",
"husky": "^9.1.7",

@@ -153,4 +153,4 @@ "intersection-observer": "^0.12.2",

"react": "^19.0.0",
"react-aria": "^3.37.0",
"react-aria-components": "^1.6.0",
"react-aria": "^3.38.1",
"react-aria-components": "^1.7.1",
"react-dom": "^19.0.0",

@@ -160,11 +160,11 @@ "react-focus-lock": "2.13.6",

"react-keyed-flatten-children": "2.2.1",
"react-stately": "^3.35.0",
"react-stately": "^3.36.1",
"react-swipeable": "^7.0.2",
"rollup-plugin-visualizer": "^5.14.0",
"storybook": "^8.6.3",
"storybook": "^8.6.4",
"storybook-addon-tag-badges": "^1.4.0",
"typescript": "^5.7.3",
"typescript": "^5.8.2",
"url-loader": "^4.1.1",
"vite": "^6.2.0",
"vitest": "^3.0.7",
"vite": "^6.2.1",
"vitest": "^3.0.8",
"webpack": "^5.98.0"

@@ -171,0 +171,0 @@ },

41

readme.md
<p align="center">
<a href="http://overdrive.autoguru.io/">
<img alt="@autoguru/overdrive" src="https://github.com/autoguru-au/overdrive/blob/main/assets/logo.png?raw=true" width="100%">
<img alt="@autoguru/overdrive"
src="https://github.com/autoguru-au/overdrive/blob/main/assets/logo.png?raw=true" width="100%">
</a>
</p>
<div align="center">
<a href="https://codecov.io/gh/autoguru-au/overdrive" target="_blank"><img src="https://img.shields.io/codecov/c/gh/autoguru-au/overdrive/main.svg?style=for-the-badge"/></a>
<a href="https://www.npmjs.com/package/@autoguru/overdrive" target="_blank"><img src="https://img.shields.io/npm/v/@autoguru/overdrive/latest.svg?style=for-the-badge"/></a>
<div>
<a href="https://codecov.io/gh/autoguru-au/overdrive" target="_blank"><img
src="https://img.shields.io/codecov/c/gh/autoguru-au/overdrive/main.svg?style=for-the-badge"/></a>
<a href="https://www.npmjs.com/package/@autoguru/overdrive" target="_blank"><img
src="https://img.shields.io/npm/v/@autoguru/overdrive/latest.svg?style=for-the-badge"/></a>
</div>

@@ -16,7 +19,2 @@

Overdrive is a product component library and design system for AutoGuru, built
with React, TypeScript, Vanilla Extract, and Storybook.
[Storybook playground](https://overdrive.autoguru.io/).
Overdrive is a product component library, and design system for AutoGuru. Built

@@ -28,2 +26,12 @@ with [React](https://github.com/facebook/react),

The components are housed in Storybook which provides interactive documentation,
UI playground, and interaction testing.
## Storybook
Visit the Overdrive Storybook site too access foundations, components and API
specifications:
### [overdrive.autoguru.io](http://overdrive.autoguru.io/)
## Usage

@@ -34,4 +42,3 @@

```sh
yarn add @autoguru/overdrive \
react react-dom
yarn add @autoguru/overdrive react react-dom
```

@@ -53,10 +60,5 @@

Documentation
For more information on Overdrive's API and usage, check out the
[docs](http://overdrive.autoguru.io/?path=/documentation/).
## Thanks
[Chromatic](https://www.chromaticqa.com) for providing component screenshot
[Chromatic](https://www.chromaticqa.com) for providing visual regression
testing.

@@ -66,4 +68,5 @@

MIT &copy; [AutoGuru](https://www.autoguru.com.au/)
MIT ©[AutoGuru](https://www.autoguru.com.au/)
<a href="http://www.autoguru.com.au/"><img src="https://cdn.autoguru.com.au/images/logos/autoguru.svg" alt="AutoGuru" width="150" /></a>
<a href="http://www.autoguru.com.au/"><img src="https://cdn.autoguru.com.au/images/logos/autoguru.svg"
alt="AutoGuru" width="150" /></a>
dist/components/AutoSuggest/AutoSuggest.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/AutoSuggest/AutoSuggest.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/AutoSuggest/AutoSuggest.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/AutoSuggest/useLayoutSuggestionVisible.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Badge/Badge.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/components/Button/Button.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Button/Button.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Button/Button.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/CheckBox/CheckBox.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/CheckBox/CheckBox.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/CheckBox/CheckBox.stories.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/components/DateTimePicker/CalendarButton.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/DateTimePicker/CalendarGrid.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/DateTimePicker/DateTimePicker.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/DropDown/DropDown.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/EditableText/EditableText.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/components/HorizontalAutoScroller/HorizontalAutoScroller.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Image/SimpleImage.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/MinimalModal/MinimalModal.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Modal/Modal.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/NumberInput/NumberInput.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/NumberInput/NumberInput.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/NumberInput/useNumberInputBehaviours.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/OptionGrid/OptionGrid.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/OutsideClick/OutsideClick.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/CheckableBase/CheckableBase.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/CheckableBase/CheckableBase.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/CheckableBase/useCheckableStyles.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/InputBase/HintText.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/InputBase/NotchedBase.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/private/InputBase/NotchedBase.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/components/ProgressSpinner/ProgressSpinner.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Radio/Radio.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Radio/Radio.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Radio/Radio.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Radio/RadioGroup.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/SearchBar/SearchBar.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/SearchBar/SearchBar.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/SelectInput/SelectInput.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/StandardModal/StandardModal.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Switch/Switch.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Switch/Switch.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Switch/Switch.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Tabs/Tab.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Tabs/Tab.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Tabs/TabList.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Tabs/TabList.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Tabs/TabPane.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Text/useTextStyles.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/TextAreaInput/TextAreaInput.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/TextInput/TextInput.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/ThemeOverrideProvider/useBuildThemeOverrides.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/Toaster/Toast.d.ts.map

Sorry, the diff of this file is not supported yet

dist/components/VisuallyHidden/VisuallyHidden.d.ts.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/hooks/useAttachedBoxes/useAttachedBoxes.d.ts.map

Sorry, the diff of this file is not supported yet

dist/hooks/useMedia/useMedia.d.ts.map

Sorry, the diff of this file is not supported yet

dist/hooks/useNegativeMargin/useNegativeMarginLeft.d.ts.map

Sorry, the diff of this file is not supported yet

dist/hooks/useNegativeMargin/useNegativeMarginTop.d.ts.map

Sorry, the diff of this file is not supported yet

dist/hooks/useNullCheck/useNullCheck.d.ts.map

Sorry, the diff of this file is not supported yet

dist/hooks/useWindowHeightFill/useWindowHeightFill.d.ts.map

Sorry, the diff of this file is not supported yet

dist/stories/helpers/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/stories/helpers/styles.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/stories/theme.stories.d.ts.map

Sorry, the diff of this file is not supported yet

dist/styles/focusOutline.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/styles/stack.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/themes/helpers.d.ts.map

Sorry, the diff of this file is not supported yet

dist/themes/makeTheme.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/estimateTextWidth.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/mapTokenToProperty.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/number.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/refs.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/resolveResponsiveProps.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/responsiveProps.css.d.ts.map

Sorry, the diff of this file is not supported yet

dist/utils/responsiveStyle.d.ts.map

Sorry, the diff of this file is not supported yet