@autoguru/overdrive 4.39.2 → 4.40.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.css.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,QAuBzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;CAwB1B,CAAC;AAEF,eAAO,MAAM,cAAc,QAGzB,CAAC;AACH,eAAO,MAAM,KAAK,QAKhB,CAAC;AACH,eAAO,MAAM,eAAe,QAE1B,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAQrB,CAAC;AAEH,eAAO,MAAM,kBAAkB,uCAO7B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAG9B,CAAC"}
+{"version":3,"file":"AutoSuggest.css.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,QAuBzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;CAuB1B,CAAC;AAEF,eAAO,MAAM,cAAc,QAGzB,CAAC;AACH,eAAO,MAAM,KAAK,QAKhB,CAAC;AACH,eAAO,MAAM,eAAe,QAE1B,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAQrB,CAAC;AAEH,eAAO,MAAM,kBAAkB,uCAO7B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAG9B,CAAC"}

package/dist/components/AutoSuggest/AutoSuggest.css.js

@@ -33,12 +33,12 @@ export const suggestionList = {
     overflowY: 'auto',
     maxHeight: '384px',
     overscrollBehavior: 'contain',
-    '-webkit-overflow-scrolling': 'touch',
     gridAutoFlow: 'row',
     gridGap: 0,
     zIndex: 2
   }, "suggestionList_defaults"),
   blockOptions: style({
+    borderRadius: vars.border.radius[3],
     overflowY: 'auto',
     maxHeight: '384px'
   }, "suggestionList_blockOptions"),

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAKxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,KAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAEtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAwGD,eAAO,MAAM,WAAW,EAwFlB,CAAC,WAAW,SAAS,OAAO,EACjC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACnD,YAAY,CAAC;AAiiBlB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAKxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,KAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAyGD,eAAO,MAAM,WAAW,EAwFlB,CAAC,WAAW,SAAS,OAAO,EACjC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACnD,YAAY,CAAC;AAyhBlB,eAAe,WAAW,CAAC"}

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -362,7 +362,7 @@ const AutoSuggestInput = forwardRef(function AutoSuggestInput(_ref3, ref) {
       triggerRef: triggerRef,
       alignment: EAlignment.BOTTOM_LEFT,
       isOpen: shouldOpenFlyout,
-      triggerOffset: 4,
+      triggerOffset: 1,
       children: _jsx(SuggestionsList, {
         className: styles.suggestionList.blockOptions,
         suggestionListRef: suggestionListRef,
@@ -393,7 +393,7 @@ const SuggestionsList = _ref4 => {
   } = _ref4;
   return _jsxs(Box, {
     ref: suggestionListRef,
-    is: "ul",
+    as: "ul",
     backgroundColour: "white",
     className: [styles.suggestionList.defaults, className],
     id: suggestionListId,
@@ -405,7 +405,7 @@ const SuggestionsList = _ref4 => {
       const highlight = highlightIndex === idx;
       return _jsx(Box, {
         ref: highlight ? highlightRef : undefined,
-        is: "li",
+        as: "li",
         id: getSuggestionId(suggestionListId, idx),
         role: "option",
         "aria-selected": highlight,
@@ -505,7 +505,7 @@ const AutoSuggestInputPrimitive = withEnhancedInput(_ref5 => {
     justifyContent: "center",
     className: className,
     children: [_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      is: "input",
+      as: "input",
       flexGrow: 1
     }, inputEventHandlers), field), {}, {
       ref: handleRef,
@@ -543,9 +543,9 @@ const SuggestionListFlyout = _ref6 => {
     children: _jsx(Box, {
       borderWidth: "1",
       borderColour: "gray",
-      borderRadius: "1",
+      borderRadius: "3",
       backgroundColour: "white",
-      boxShadow: "2",
+      boxShadow: "4",
       style: {
         width: triggerRef.current && !autoWidth ? triggerRef.current.clientWidth : undefined
       },

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

@@ -1,178 +1,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

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,QAAA,MAAM,IAAI;;;WAqMqf,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA1N/f,+EAGD;6BACU,+EAGM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IoB,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}
+{"version":3,"file":"AutoSuggest.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AA+BhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAyElC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/Button/Button-cursor.css.js

@@ -0,0 +1,205 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Button/Button-cursor.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+const smallHeight = '36px';
+const baseStyles = 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'
+}, "baseStyles");
+export const body = style({
+  display: 'grid',
+  gridAutoFlow: 'column dense',
+  gridGap: vars.space['1']
+}, "body");
+export const hiddenContent = style({
+  visibility: 'hidden'
+}, "hiddenContent");
+export const spinner = style({
+  margin: '0 auto'
+}, "spinner");
+export const button = recipe({
+  base: baseStyles,
+  variants: {
+    size: {
+      small: {
+        minWidth: vars.space['8'],
+        height: smallHeight,
+        gridGap: vars.space['1']
+      },
+      medium: {
+        minWidth: vars.space['9'],
+        height: vars.space['8'],
+        gridGap: vars.space['2']
+      }
+    },
+    shape: {
+      default: {},
+      rounded: {
+        selectors: {
+          '&[data-size="small"]': {
+            minWidth: smallHeight
+          },
+          '&[data-size="medium"]': {
+            minWidth: vars.space['8']
+          }
+        }
+      },
+      iconOnly: {
+        selectors: {
+          '&[data-size="small"]': {
+            width: smallHeight
+          },
+          '&[data-size="medium"]': {
+            width: vars.space['8']
+          }
+        }
+      }
+    },
+    variant: {
+      primary: {
+        color: vars.colours.intent.primary.foreground,
+        backgroundColor: vars.colours.intent.primary.background.standard,
+        ':hover': {
+          color: vars.colours.intent.primary.foreground,
+          backgroundColor: vars.colours.gamut.green700
+        }
+      },
+      brand: {
+        color: vars.colours.intent.brand.foreground,
+        backgroundColor: vars.colours.intent.brand.background.standard,
+        ':hover': {
+          backgroundColor: vars.colours.intent.brand.background.strong
+        },
+        ':active': {
+          backgroundColor: vars.colours.intent.brand.background.strong
+        }
+      },
+      secondary: {
+        color: vars.colours.intent.secondary.foreground,
+        backgroundColor: vars.colours.intent.secondary.background.standard,
+        border: `1px solid ${vars.colours.intent.secondary.border}`,
+        selectors: {
+          '&:hover, &:focus, &:active': {
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            borderColor: vars.colours.intent.secondary.background.strong
+          }
+        }
+      },
+      danger: {
+        backgroundColor: vars.colours.intent.danger.background.standard,
+        color: vars.colours.intent.danger.foreground,
+        ':hover': {
+          backgroundColor: vars.colours.intent.danger.background.strong
+        },
+        ':active': {
+          backgroundColor: vars.colours.intent.danger.background.strong
+        }
+      },
+      information: {
+        backgroundColor: vars.colours.intent.information.background.standard,
+        color: vars.colours.intent.information.foreground,
+        ':hover': {
+          backgroundColor: vars.colours.intent.information.background.strong
+        },
+        ':active': {
+          backgroundColor: vars.colours.intent.information.background.strong
+        }
+      },
+      warning: {
+        backgroundColor: vars.colours.intent.warning.background.standard,
+        color: vars.colours.intent.warning.foreground,
+        ':hover': {
+          backgroundColor: vars.colours.intent.warning.background.strong
+        },
+        ':active': {
+          backgroundColor: vars.colours.intent.warning.background.strong
+        }
+      },
+      success: {
+        backgroundColor: vars.colours.intent.success.background.standard,
+        color: vars.colours.intent.success.foreground,
+        ':hover': {
+          backgroundColor: vars.colours.intent.success.background.strong
+        },
+        ':active': {
+          backgroundColor: vars.colours.intent.success.background.strong
+        }
+      }
+    },
+    appearance: {
+      default: {},
+      minimal: {
+        color: vars.typography.colour.neutral,
+        backgroundColor: 'transparent',
+        selectors: {
+          '&[data-variant="primary"]:hover, &[data-variant="primary"]:active': {
+            color: vars.colours.intent.primary.background.strong,
+            backgroundColor: vars.colours.intent.primary.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-variant="brand"]:hover, &[data-variant="brand"]:active': {
+            color: vars.colours.intent.brand.background.strong,
+            backgroundColor: vars.colours.intent.brand.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-variant="secondary"]:hover, &[data-variant="secondary"]:active': {
+            color: vars.typography.colour.secondary,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: 'none'
+          },
+          '&[data-variant="danger"]:hover, &[data-variant="danger"]:active': {
+            color: vars.colours.intent.danger.background.strong,
+            backgroundColor: vars.colours.intent.danger.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-variant="information"]:hover, &[data-variant="information"]:active': {
+            color: vars.colours.intent.information.background.strong,
+            backgroundColor: vars.colours.intent.information.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-variant="warning"]:hover, &[data-variant="warning"]:active': {
+            color: vars.colours.intent.warning.background.strong,
+            backgroundColor: vars.colours.intent.warning.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-variant="success"]:hover, &[data-variant="success"]:active': {
+            color: vars.colours.intent.success.background.strong,
+            backgroundColor: vars.colours.intent.success.background.mild,
+            boxShadow: 'none'
+          },
+          '&[data-shape="default"]': {
+            minWidth: '50px'
+          }
+        }
+      }
+    },
+    state: {
+      enabled: {
+        cursor: 'pointer'
+      },
+      disabled: {
+        cursor: 'not-allowed',
+        opacity: '0.3'
+      },
+      loading: {
+        cursor: 'not-allowed'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'medium',
+    shape: 'default',
+    variant: 'primary',
+    appearance: 'default',
+    state: 'enabled'
+  }
+}, "button");
+__vanilla_filescope__.endFileScope();