@autoguru/overdrive 4.44.5 → 4.45.0-next.1

package/dist/components/Alert/Alert.css.js

@@ -4,7 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/Alert/Alert.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
 export const contained = style({
-  minWidth: '280px',
-  maxWidth: '640px'
+  maxWidth: '640px',
+  minWidth: '280px'
 }, "contained");
 __vanilla_filescope__.endFileScope();

package/dist/components/Anchor/Anchor.d.ts

@@ -1,7 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import { AnchorHTMLAttributes, ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
-import type { TestId } from '../../types';
-export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'as' | 'children' | 'is' | 'style'>, TestId {
+import type { TestIdProp } from '../../types';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'as' | 'children' | 'is' | 'style'>, TestIdProp {
     as?: ElementType | ReactElement;
     disabled?: boolean;
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,IAAI,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,CAClC,EACD,MAAM;IACP,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA6C3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,MAAM,WAAW,KAChB,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,IAAI,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,CAClC,EACD,UAAU;IACX,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CA6C3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -5,83 +5,83 @@ __vanilla_filescope__.setFileScope("lib/components/AutoSuggest/AutoSuggest.css.t
 import { style, styleVariants } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const fullScreenRoot = style({
-  position: 'fixed',
-  zIndex: 1001,
-  top: vars.space['5'],
-  right: vars.space['5'],
   bottom: vars.space['5'],
+  height: 'stretch',
   left: vars.space['5'],
+  maxHeight: '100vh',
+  overflowY: 'auto',
   paddingBottom: vars.space['5'],
   paddingTop: vars.space['2'],
-  overflowY: 'auto',
-  maxHeight: '100vh',
-  height: 'stretch',
+  position: 'fixed',
+  right: vars.space['5'],
+  top: vars.space['5'],
+  zIndex: 1001,
   ':before': {
-    content: '""',
-    position: 'fixed',
-    zIndex: 0,
     backgroundColor: vars.colours.intent.secondary.background.standard,
+    bottom: 0,
+    content: '""',
+    left: 0,
     pointerEvents: 'none',
+    position: 'fixed',
+    right: 0,
     top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
+    zIndex: 0
   }
 }, "fullScreenRoot");
 export const suggestionList = {
   defaults: style({
     display: 'grid',
-    overflowY: 'auto',
-    maxHeight: '384px',
-    overscrollBehavior: 'contain',
     gridAutoFlow: 'row',
     gridGap: 0,
+    maxHeight: '384px',
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
     zIndex: 2
   }, "suggestionList_defaults"),
   blockOptions: style({
     borderRadius: vars.border.radius['md'],
-    overflowY: 'auto',
-    maxHeight: '384px'
+    maxHeight: '384px',
+    overflowY: 'auto'
   }, "suggestionList_blockOptions"),
   inlineOptions: style({
-    overflowY: 'auto',
-    maxHeight: '100%'
+    maxHeight: '100%',
+    overflowY: 'auto'
   }, "suggestionList_inlineOptions"),
   inlineOptionsNoScroll: style({
-    overflowY: 'visible',
-    maxHeight: 'none'
+    maxHeight: 'none',
+    overflowY: 'visible'
   }, "suggestionList_inlineOptionsNoScroll")
 };
 export const inputPrimitive = style({
-  marginTop: `calc(-1 * ${vars.border.width['1']})`,
-  marginBottom: `calc(-1 * ${vars.border.width['1']})`
+  marginBottom: `calc(-1 * ${vars.border.width['1']})`,
+  marginTop: `calc(-1 * ${vars.border.width['1']})`
 }, "inputPrimitive");
 export const input = style({
+  backgroundColor: 'white',
   position: 'sticky',
   top: 0,
-  zIndex: 2,
-  backgroundColor: 'white'
+  zIndex: 2
 }, "input");
 export const fullScreenInput = style({
   width: 'calc(100% - 40px)'
 }, "fullScreenInput");
 export const fullScreenCloseBtn = style({
   position: 'fixed',
-  top: vars.space['5'],
   right: vars.space['2'],
+  top: vars.space['5'],
   zIndex: 3
 }, "fullScreenCloseBtn");
 export const spacer = style({
   height: vars.space['1']
 }, "spacer");
 export const suggestion = style({
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
   display: 'block',
+  outline: 'none',
   padding: `${vars.space['3']} calc(${vars.space['3']} + 1px)`,
-  width: '100%',
-  cursor: 'pointer',
   textAlign: 'left',
-  outline: 'none',
-  backgroundColor: 'transparent'
+  width: '100%'
 }, "suggestion");
 export const suggestionListItem = styleVariants({
   default: {
@@ -92,7 +92,7 @@ export const suggestionListItem = styleVariants({
   }
 }, "suggestionListItem");
 export const suggestionHighlight = style({
-  color: vars.typography.colour.information,
-  backgroundColor: vars.colours.background.light
+  backgroundColor: vars.colours.background.light,
+  color: vars.typography.colour.information
 }, "suggestionHighlight");
 __vanilla_filescope__.endFileScope();

package/dist/components/Badge/Badge.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { TestId } from '../../types';
+import type { TestIdProp } from '../../types';
 import type { StyledBadgeProps } from './Badge.css';
 type Colours = Exclude<StyledBadgeProps['colour'], undefined>;
-export interface BadgeProps extends TestId {
+export interface BadgeProps extends TestIdProp {
     /** The text content */
     label: string;
     /** The color of the badge */

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,MAAM;IACzC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,sBAyBZ,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,KAAK,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC7C,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,mDAOnB,UAAU,sBAyBZ,CAAC"}

package/dist/components/Box/useBox/useBox.d.ts

@@ -1,8 +1,8 @@
 import type { AllHTMLAttributes, ElementType } from 'react';
 import { type ElementStylesProps } from '../../../styles/elementStyles';
-import type { ConsistentComponentProps, DataAttributes, OdComponent } from '../../../types';
+import type { ConsistentComponentProps, DataAttributes, OdComponentProp } from '../../../types';
 type FilteredAttributes = Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'className' | 'color' | 'height' | 'is' | 'size' | 'width'>;
-export interface UseBoxProps extends FilteredAttributes, ConsistentComponentProps, OdComponent, ElementStylesProps, DataAttributes {
+export interface UseBoxProps extends FilteredAttributes, ConsistentComponentProps, OdComponentProp, ElementStylesProps, DataAttributes {
 }
 export declare const useBox: ({ as, className: incomingClassName, odComponent, testId, display, height, maxWidth, minWidth, overflow, overflowX, overflowY, pointerEvents, position, size, userSelect, useVar, width, bg, backgroundColor, backgroundColour, boxShadow, color, colour, fg, opacity, fontSize, fontWeight, lineHeight, text, textAlign, textTransform, textWrap, wordBreak, borderRadius, borderColor, borderColorX, borderColorY, borderStyle, borderWidth, borderWidthX, borderWidthY, borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRightColor, borderRightStyle, borderRightWidth, borderStyleBottom, borderStyleLeft, borderStyleRight, borderStyleTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft, borderColour, borderColourX, borderColourY, borderBottomColour, borderLeftColour, borderRightColour, borderTopColour, alignContent, alignItems, alignSelf, columnGap, flexDirection, flexGrow, flexShrink, flexWrap, gap, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumns, justifyContent, placeItems, rowGap, order, m, mb, ml, mr, mt, mx, my, margin, marginX, marginY, marginBottom, marginLeft, marginRight, marginTop, p, pb, pl, pr, pt, px, py, padding, paddingX, paddingY, paddingBottom, paddingLeft, paddingRight, paddingTop, ...elementProps }: UseBoxProps) => {
     Component: ElementType;

package/dist/components/Box/useBox/useBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/useBox/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EACX,wBAAwB,EACxB,cAAc,EACd,WAAW,EACX,MAAM,gBAAgB,CAAC;AAGxB,KAAK,kBAAkB,GAAG,IAAI,CAC7B,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE,CAAC;AAEF,MAAM,WAAW,WAChB,SAAQ,kBAAkB,EACzB,wBAAwB,EACxB,WAAW,EACX,kBAAkB,EAClB,cAAc;CAAG;AAEnB,eAAO,MAAM,MAAM,GAAI,+0CA8HpB,WAAW;eAqIK,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI7B,CAAC"}
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../../lib/components/Box/useBox/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EACX,wBAAwB,EACxB,cAAc,EACd,eAAe,EACf,MAAM,gBAAgB,CAAC;AAGxB,KAAK,kBAAkB,GAAG,IAAI,CAC7B,iBAAiB,CAAC,WAAW,CAAC,EAC9B,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,CACjE,CAAC;AAEF,MAAM,WAAW,WAChB,SAAQ,kBAAkB,EACzB,wBAAwB,EACxB,eAAe,EACf,kBAAkB,EAClB,cAAc;CAAG;AAEnB,eAAO,MAAM,MAAM,GAAI,+0CA8HpB,WAAW;eAqIK,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI7B,CAAC"}

package/dist/components/BulletList/Bullet.css.js

@@ -5,41 +5,41 @@ __vanilla_filescope__.setFileScope("lib/components/BulletList/Bullet.css.ts", "@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = styleVariants({
+  circle: {
+    '::before': {
+      borderRadius: '50%'
+    }
+  },
   default: {
     display: 'grid',
-    gridTemplateColumns: 'min-content 1fr',
     gridGap: vars.space['4'],
+    gridTemplateColumns: 'min-content 1fr',
     marginBottom: vars.space['2'],
     ':last-of-type': {
       marginBottom: 0
     },
     '::before': {
+      alignSelf: 'flex-start',
+      backgroundColor: vars.typography.colour.dark,
       boxSizing: 'content-box',
+      content: "' '",
       display: 'block',
-      alignSelf: 'flex-start',
-      width: vars.space['2'],
       height: vars.space['2'],
       marginTop: `calc((1.6em - ${vars.space['2']}) / 2)`,
-      content: "' '",
-      backgroundColor: vars.typography.colour.dark
-    }
-  },
-  circle: {
-    '::before': {
-      borderRadius: '50%'
+      width: vars.space['2']
     }
   },
   disc: {
     '::before': {
+      backgroundColor: 'transparent',
       border: `2px solid ${vars.typography.colour.dark}`,
-      borderRadius: '50%',
-      backgroundColor: 'transparent'
+      borderRadius: '50%'
     }
   },
   square: {
     '::before': {
-      border: `2px solid ${vars.typography.colour.dark}`,
-      backgroundColor: 'transparent'
+      backgroundColor: 'transparent',
+      border: `2px solid ${vars.typography.colour.dark}`
     }
   }
 }, "root");

package/dist/components/BulletText/BulletText.css.js

@@ -5,9 +5,9 @@ __vanilla_filescope__.setFileScope("lib/components/BulletText/BulletText.css.ts"
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const bullet = style({
+  height: vars.space['6'],
   lineHeight: vars.typography.size['2'].lineHeight,
-  width: vars.space['6'],
-  height: vars.space['6']
+  width: vars.space['6']
 }, "bullet");
 export const primary = style({
   backgroundColor: vars.colours.intent.primary.background.mild

package/dist/components/BulletText/BulletText.d.ts

@@ -1,8 +1,8 @@
 import React, { type ReactNode } from 'react';
-import { type BoxProps } from '../Box/Box';
-export interface BulletTextProps extends BoxProps {
+import { type FlexInlineComponentProps } from '../Flex/FlexInline';
+export interface BulletTextProps extends Pick<FlexInlineComponentProps, 'as' | 'children'> {
     bullet?: ReactNode;
     variant?: 'primary' | 'secondary';
 }
-export declare const BulletText: ({ as, variant, children, bullet: Bullet, }: BulletTextProps) => React.JSX.Element;
+export declare const BulletText: ({ as: Component, variant, children, bullet: Bullet, }: BulletTextProps) => React.JSX.Element;
 //# sourceMappingURL=BulletText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAMhD,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,4CAKxB,eAAe,sBA8CjB,CAAC"}
+{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAMnE,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,IAAI,GAAG,UAAU,CAAC;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,uDAKxB,eAAe,sBA+CjB,CAAC"}

package/dist/components/BulletText/BulletText.js

@@ -2,21 +2,22 @@
 
 import React, { isValidElement } from 'react';
 import { Box } from "../Box/Box.js";
-import { Inline } from "../Inline/Inline.js";
+import { inline } from "../Flex/flex.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./BulletText.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BulletText = ({
-  as,
+  as: Component = 'div',
   variant = 'primary',
   children,
   bullet: Bullet = '•'
-}) => /*#__PURE__*/_jsxs(Inline, {
-  as: as,
-  noWrap: true,
-  space: "3",
-  alignX: "start",
-  alignY: "center",
+}) => /*#__PURE__*/_jsxs(Component, {
+  className: inline({
+    align: 'start',
+    gap: '3',
+    justify: 'center',
+    noWrap: true
+  }),
   children: [/*#__PURE__*/isValidElement(Bullet) ? /*#__PURE__*/_jsx(Box, {
     position: "relative",
     flexShrink: 0,

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

@@ -1,94 +1,162 @@
 import { RecipeVariants } from '@vanilla-extract/recipes';
-export declare const body: string;
+import { cssLayerComponent } from '../../styles/layers.css';
 export declare const hiddenContent: string;
+export declare const spinnerWrapper: string;
 export declare const spinner: string;
 export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         small: {
-            height: "36px";
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    height: "36px";
+                    padding: `0 var(--${string})`;
+                };
+            };
         };
         medium: {
-            height: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    height: `var(--${string})`;
+                };
+            };
         };
         xsmall: {
-            padding: `2px var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    fontWeight: `var(--${string})`;
+                    padding: `2px var(--${string})`;
+                };
+            };
         };
     };
     shape: {
         default: {};
         rounded: {};
-        iconOnly: {};
+        iconOnly: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    padding: number;
+                };
+            };
+        };
     };
     intent: {
         primary: {
-            color: `var(--${string})`;
-            backgroundColor: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                color: `var(--${string})`;
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                };
             };
         };
         brand: {
-            color: `var(--${string})`;
-            backgroundColor: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
             };
         };
         secondary: {
-            color: `var(--${string})`;
-            backgroundColor: `var(--${string})`;
-            border: `1px solid var(--${string})`;
-            selectors: {
-                "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+            '@layer': {
+                [cssLayerComponent]: {
                     backgroundColor: `var(--${string})`;
-                    borderColor: `var(--${string})`;
+                    border: `1px solid var(--${string})`;
+                    color: `var(--${string})`;
+                    selectors: {
+                        "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                            backgroundColor: `var(--${string})`;
+                            borderColor: `var(--${string})`;
+                        };
+                    };
                 };
             };
         };
         danger: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
             };
         };
         information: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
             };
         };
         warning: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
             };
         };
         success: {
-            backgroundColor: `var(--${string})`;
-            color: `var(--${string})`;
-            "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
-                backgroundColor: `var(--${string})`;
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                    "&:focus-visible, &:not(:disabled):hover, &:not(:disabled):active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
             };
         };
     };
     minimal: {
         true: {
-            color: `var(--${string})`;
-            backgroundColor: "transparent";
-            border: "none";
+            '@layer': {
+                [cssLayerComponent]: {
+                    backgroundColor: "transparent";
+                    borderStyle: "none";
+                    color: `var(--${string})`;
+                };
+            };
         };
         false: never[];
     };
+    rounded: {
+        true: string;
+    };
+    isFullWidth: {
+        true: string;
+    };
+    isLoading: {
+        true: {};
+    };
 }>;
 type ButtonRecipeProps = NonNullable<Required<RecipeVariants<typeof button>>>;
 export type ButtonSize = ButtonRecipeProps['size'];
 export type ButtonShape = ButtonRecipeProps['shape'];
 export type ButtonIntent = ButtonRecipeProps['intent'];
+export type ButtonIsFullWidth = ButtonRecipeProps['isFullWidth'];
+export type ButtonIsLoading = ButtonRecipeProps['isLoading'];
 export type ButtonMinimal = ButtonRecipeProps['minimal'];
+export type ButtonRounded = ButtonRecipeProps['rounded'];
 export interface StyledButtonProps {
     /**
      * Button sizing
@@ -98,10 +166,16 @@ export interface StyledButtonProps {
      * Button intentional colour scheme
      */
     variant?: ButtonIntent;
+    /**
+     * Pill shaped button appearance
+     */
+    rounded?: ButtonRounded;
     /**
      * Present a borderless minimal appearance
      */
     minimal?: ButtonMinimal;
+    isFullWidth?: ButtonIsFullWidth;
+    isLoading?: ButtonIsFullWidth;
 }
 export {};
 //# sourceMappingURL=Button.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAGH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+OjB,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACxB"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAU5D,eAAO,MAAM,aAAa,QAAkC,CAAC;AAC7D,eAAO,MAAM,cAAc,QAKzB,CAAC;AACH,eAAO,MAAM,OAAO,QAA4B,CAAC;AAGjD,eAAO,MAAM,MAAM;;;;gBA+Cd,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;gBAUD,CAAC,iBAAiB,CAAC;;kBAElB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAOlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;;;kBAalB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;;;;;;EAsMJ,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC9B"}