@autoguru/overdrive 4.43.6-next.0 → 4.43.6-next.10

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

@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import React from 'react';
-import { boxStyles } from "../../Box/newBox/boxStyles.js";
+import { componentStyles } from "../../../styles/index.js";
 import { Text } from "../../Text/Text.js";
 import * as styles from "./HintText.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,17 +14,16 @@ export const HintText = _ref => {
     size = 'medium',
     className = ''
   } = _ref;
-  const style = boxStyles({
-    as: 'p',
-    marginTop: '1'
-  });
   if (!hintText && !reserveHintSpace) return null;
   const showHintText = !disabled && hintText;
   return _jsx(Text, {
     as: "p",
     size: size === 'large' ? '4' : '2',
     colour: "unset",
-    className: clsx(style, styles.hintText, className),
+    className: clsx(componentStyles({
+      as: 'p',
+      mt: '1'
+    }), styles.hintText, className),
     children: showHintText ? hintText : '\u00A0'
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,EAAE,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAEjB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAOpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAC/E,KAAK,gBAAgB,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CACnD,mBAAmB,CAAC,CAAC,CAAC,EACtB,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,CAC5D,CAAC;AAGF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,YAAY;IACpD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAEpC,OAAO,CAAC,IAAI,IAAI,CAAC;CACjB;AAGD,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,YAAY,CACjE,SAAQ,gBAAgB,CAAC,CAAC,CAAC,EAC1B,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,WAAW,CACjE,EACD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,MAAM,MAAM,iBAAiB,CAC5B,aAAa,EACb,CAAC,SAAS,YAAY,IACnB,aAAa,GAChB,0BAA0B,CAAC,CAAC,CAAC,GAC7B,aAAa,CAAC,CAAC,CAAC,GAChB,eAAe,CAAC;AAGjB,MAAM,MAAM,qBAAqB,CAAC,aAAa,EAAE,CAAC,SAAS,YAAY,IAAI;IAC1E,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,IAAI,CACV,0BAA0B,CAAC,CAAC,CAAC,EAC7B,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CACjD,GAAG;QACH,GAAG,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;KAC1D,CAAC;IACF,SAAS,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACnB,GAAG,aAAa,GAChB,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,QAAQ,GAAG,cAAc,GAAG,WAAW,CACvC,CAAC;AAEH,UAAU,oBAAoB,CAAC,SAAS,GAAG,MAAM;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5E;AAED,eAAO,MAAM,iBAAiB,GAC7B,aAAa,SAAS,MAAM,GAAG,EAAE,EACjC,CAAC,SAAS,YAAY,GAAG,gBAAgB,EAEzC,mBAAmB,aAAa,CAAC,qBAAqB,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EACzE,mEAMG,oBAAsE,yHA6PxE,CAAC"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,EAAE,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAEjB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAMpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAC/E,KAAK,gBAAgB,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CACnD,mBAAmB,CAAC,CAAC,CAAC,EACtB,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,CAC5D,CAAC;AAGF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,YAAY;IACpD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAEpC,OAAO,CAAC,IAAI,IAAI,CAAC;CACjB;AAGD,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,YAAY,CACjE,SAAQ,gBAAgB,CAAC,CAAC,CAAC,EAC1B,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,WAAW,CACjE,EACD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,MAAM,MAAM,iBAAiB,CAC5B,aAAa,EACb,CAAC,SAAS,YAAY,IACnB,aAAa,GAChB,0BAA0B,CAAC,CAAC,CAAC,GAC7B,aAAa,CAAC,CAAC,CAAC,GAChB,eAAe,CAAC;AAGjB,MAAM,MAAM,qBAAqB,CAAC,aAAa,EAAE,CAAC,SAAS,YAAY,IAAI;IAC1E,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,IAAI,CACV,0BAA0B,CAAC,CAAC,CAAC,EAC7B,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,CACjD,GAAG;QACH,GAAG,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;KAC1D,CAAC;IACF,SAAS,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACnB,GAAG,aAAa,GAChB,IAAI,CACH,cAAc,CAAC,OAAO,WAAW,CAAC,EAClC,QAAQ,GAAG,cAAc,GAAG,WAAW,CACvC,CAAC;AAEH,UAAU,oBAAoB,CAAC,SAAS,GAAG,MAAM;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5E;AAED,eAAO,MAAM,iBAAiB,GAC7B,aAAa,SAAS,MAAM,GAAG,EAAE,EACjC,CAAC,SAAS,YAAY,GAAG,gBAAgB,EAEzC,mBAAmB,aAAa,CAAC,qBAAqB,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EACzE,mEAMG,oBAAsE,yHA6PxE,CAAC"}

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

@@ -8,9 +8,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { invariant, wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import React, { forwardRef, useCallback, useState } from 'react';
+import { componentStyles, sprinkles } from "../../../styles/index.js";
 import { useInputControlledState } from "../../../utils/index.js";
 import { Box } from "../../Box/Box.js";
-import { useBoxStyles } from "../../Box/useBoxStyles.js";
 import { Icon } from "../../Icon/Icon.js";
 import { ProgressSpinner } from "../../ProgressSpinner/ProgressSpinner.js";
 import { HintText } from "./HintText.js";
@@ -73,8 +73,8 @@ export const withEnhancedInput = function (WrappingComponent) {
         disabled
       }, inputStateStyles);
       const iconSize = size === 'small' ? 'medium' : size;
-      const inputItselfClassName = clsx(useBoxStyles({
-        is: primitiveType === 'textarea' ? 'textarea' : 'input',
+      const inputItselfClassName = clsx(componentStyles({
+        as: primitiveType === 'textarea' ? 'textarea' : 'input',
         backgroundColour,
         width: 'full',
         position: 'relative',
@@ -128,7 +128,7 @@ export const withEnhancedInput = function (WrappingComponent) {
       const onMouseOut = useCallback(() => {
         setIsHovered(false);
       }, []);
-      const iconStyles = useBoxStyles({
+      const iconStyles = sprinkles({
         pointerEvents: 'none',
         position: 'absolute'
       });

package/dist/index.d.ts

@@ -2,6 +2,6 @@ export * from './components';
 export * from './hooks';
 export type { Sprinkles as BaseStyleProps, SprinklesLegacyColours as LegacyColourStyleProps, } from './styles/sprinkles.css';
 export { overdriveTokens as tokens } from './themes/theme.css';
-export { boxStyles as style } from './components/Box/newBox/boxStyles';
+export { sprinkles as style } from './styles/sprinkles.css';
 export { useId, arrayRingLookup } from './utils/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,YAAY,EACX,SAAS,IAAI,cAAc,EAC3B,sBAAsB,IAAI,sBAAsB,GAChD,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,YAAY,EACX,SAAS,IAAI,cAAc,EAC3B,sBAAsB,IAAI,sBAAsB,GAChD,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -3,5 +3,5 @@
 export * from "./components/index.js";
 export * from "./hooks/index.js";
 export { overdriveTokens as tokens } from "./themes/theme.css.js";
-export { boxStyles as style } from "./components/Box/newBox/boxStyles.js";
+export { sprinkles as style } from "./styles/sprinkles.css.js";
 export { useId, arrayRingLookup } from "./utils/index.js";

package/dist/styles/global/fonts.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=fonts.css.d.ts.map

package/dist/styles/global/fonts.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.css.d.ts","sourceRoot":"","sources":["../../../lib/styles/global/fonts.css.ts"],"names":[],"mappings":""}

package/dist/styles/global/fonts.css.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/styles/global/fonts.css.ts", "@autoguru/overdrive");
+import { globalFontFace } from '@vanilla-extract/css';
+globalFontFace('AvertaStandard', {
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontDisplay: 'swap',
+  src: `local('Averta Std Regular'), local('AvertaStd-Regular'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-regular-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-regular-webfont.woff') format('woff')`
+});
+globalFontFace('AvertaStandard', {
+  fontStyle: 'normal',
+  fontWeight: 500,
+  fontDisplay: 'swap',
+  src: `local('Averta Std Semibold'), local('AvertaStd-Semibold'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-semibold-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-semibold-webfont.woff') format('woff')`
+});
+globalFontFace('AvertaStandard', {
+  fontStyle: 'normal',
+  fontWeight: 700,
+  fontDisplay: 'swap',
+  src: `local('Averta Std Bold'), local('AvertaStd-Bold'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-bold-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-bold-webfont.woff') format('woff')`
+});
+__vanilla_filescope__.endFileScope();

package/dist/styles/global/reset.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reset.css.d.ts.map

package/dist/styles/global/reset.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.css.d.ts","sourceRoot":"","sources":["../../../lib/styles/global/reset.css.ts"],"names":[],"mappings":""}

package/dist/styles/global/reset.css.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/styles/global/reset.css.ts", "@autoguru/overdrive");
+import { globalStyle } from '@vanilla-extract/css';
+import { overdriveTokens } from "../../themes/theme.css.js";
+import { cssLayerReset } from "../layers.css.js";
+globalStyle(':where(html)', {
+  '@layer': {
+    [cssLayerReset]: {
+      overflowX: 'hidden'
+    }
+  }
+});
+globalStyle('body', {
+  '@layer': {
+    [cssLayerReset]: {
+      margin: 0,
+      padding: 0,
+      border: 'none'
+    }
+  }
+});
+globalStyle('body, [data-od-base]', {
+  '@layer': {
+    [cssLayerReset]: {
+      fontFamily: overdriveTokens.typography.fontFamily,
+      fontSize: overdriveTokens.typography.size[4].fontSize,
+      fontWeight: overdriveTokens.typography.fontWeight.normal,
+      lineHeight: overdriveTokens.typography.size[4].lineHeight,
+      textRendering: 'optimizeLegibility',
+      textSizeAdjust: 'none',
+      WebkitTapHighlightColor: 'transparent',
+      WebkitTextSizeAdjust: 'none'
+    }
+  }
+});
+globalStyle('*, *::after, *::before', {
+  '@layer': {
+    [cssLayerReset]: {
+      boxSizing: 'border-box'
+    }
+  }
+});
+globalStyle(':where(button, input, select, textarea)', {
+  '@layer': {
+    [cssLayerReset]: {
+      fontFamily: 'inherit',
+      fontSize: 'inherit'
+    }
+  }
+});
+__vanilla_filescope__.endFileScope();

package/dist/styles/index.d.ts

@@ -0,0 +1,5 @@
+export { cssLayerComponent, cssLayerTheme } from './layers.css';
+export { resetVariants, type ResetVariantProps } from './reset.css';
+export { componentStyles, elementResetStyles, resetStyles, } from './resetStyles';
+export { sprinkles, type Sprinkles, type SprinklesLegacyColours, } from './sprinkles.css';
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,WAAW,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EACd,KAAK,sBAAsB,GAC3B,MAAM,iBAAiB,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { cssLayerComponent, cssLayerTheme } from "./layers.css.js";
+export { resetVariants } from "./reset.css.js";
+export { componentStyles, elementResetStyles, resetStyles } from "./resetStyles.js";
+export { sprinkles } from "./sprinkles.css.js";

package/dist/styles/reset.css.d.ts

@@ -3,6 +3,7 @@ export declare const trimmed: {
     margin: number;
     padding: number;
 };
+export declare const borderReset: string;
 export declare const container: string;
 export declare const element: {
     div: string;

package/dist/styles/reset.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reset.css.d.ts","sourceRoot":"","sources":["../../lib/styles/reset.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAUF,eAAO,MAAM,SAAS,QASpB,CAAC;AAsHH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,OAAO,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQxB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAC1C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}
+{"version":3,"file":"reset.css.d.ts","sourceRoot":"","sources":["../../lib/styles/reset.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAUF,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAuHH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,OAAO,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQxB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAC1C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}

package/dist/styles/reset.css.js

@@ -20,6 +20,14 @@ const trimmedElement = style({
     [cssLayerReset]: _objectSpread({}, trimmed)
   }
 }, "trimmedElement");
+export const borderReset = style({
+  '@layer': {
+    [cssLayerReset]: {
+      borderStyle: 'solid',
+      borderWidth: 0
+    }
+  }
+}, "borderReset");
 export const container = style({
   '@layer': {
     [cssLayerReset]: {
@@ -67,7 +75,7 @@ const list = style({
     })
   }
 }, "list");
-const fieldset = [trimmedElement, style({
+const fieldset = [trimmedElement, borderReset, style({
   '@layer': {
     [cssLayerReset]: {
       appearance: 'none'

package/dist/styles/resetStyles.d.ts

@@ -1,4 +1,10 @@
+import type { ElementType, ReactElement } from 'react';
+import { type Sprinkles } from './sprinkles.css';
 export declare const resetStyles: ({ as: _as }: {
     as: string | undefined;
 }) => string;
+export declare const elementResetStyles: (tag: unknown) => string;
+export declare const componentStyles: ({ as, ...styleProps }: {
+    as?: string | ElementType | ReactElement;
+} & Sprinkles) => string;
 //# sourceMappingURL=resetStyles.d.ts.map

package/dist/styles/resetStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resetStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/resetStyles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,GAAI,aAAa;IAAE,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,WAKlE,CAAC"}
+{"version":3,"file":"resetStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/resetStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5D,eAAO,MAAM,WAAW,GAAI,aAAa;IAAE,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,WAKlE,CAAC;AAOF,eAAO,MAAM,kBAAkB,GAAI,KAAK,OAAO,WAG9C,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,uBAG7B;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,CAAA;CAAE,GAAG,SAAS,WACP,CAAC"}

package/dist/styles/resetStyles.js

@@ -1,6 +1,10 @@
 "use strict";
 
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["as"];
+import clsx from 'clsx';
 import { element, resetVariants } from "./reset.css.js";
+import { sprinkles } from "./sprinkles.css.js";
 export const resetStyles = _ref => {
   let {
     as: _as
@@ -10,4 +14,17 @@ export const resetStyles = _ref => {
   return resetVariants({
     as
   });
+};
+export const elementResetStyles = tag => {
+  if (typeof tag === 'string') return resetStyles({
+    as: tag
+  });
+  return '';
+};
+export const componentStyles = _ref2 => {
+  let {
+      as
+    } = _ref2,
+    styleProps = _objectWithoutProperties(_ref2, _excluded);
+  return clsx(elementResetStyles(as), sprinkles(styleProps));
 };

package/dist/styles/sprinkles.css.d.ts

@@ -7,30 +7,6 @@ export declare const valueArrays: {
     intentForegroundColours: SprinklesLegacyColours["colour"][];
     lineHeights: string[];
 };
-export declare const sprinklesLegacyColours: ((props: {
-    backgroundColor?: "white" | "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "transparent" | undefined;
-    borderBottomColor?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderLeftColor?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderRightColor?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderTopColor?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    color?: "link" | "white" | "body" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
-    backgroundColour?: "white" | "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "transparent" | undefined;
-    borderColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourX?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourY?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderBottomColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderLeftColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderRightColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderTopColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourBottom?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourLeft?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourRight?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    borderColourTop?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
-    colour?: "link" | "white" | "body" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
-}) => string) & {
-    properties: Set<"colour" | "backgroundColour" | "color" | "backgroundColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "borderColour" | "borderColourX" | "borderColourY" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "borderColourBottom" | "borderColourLeft" | "borderColourRight" | "borderColourTop">;
-};
-export type SprinklesLegacyColours = Omit<Parameters<typeof sprinklesLegacyColours>[0], 'backgroundColor' | 'borderColor' | 'borderBottomColor' | 'borderLeftColor' | 'borderRightColor' | 'borderTopColor' | 'color'>;
 export declare const sprinklesLegacyText: ((props: {
     color?: "link" | "white" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
     colour?: "link" | "white" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
@@ -55,12 +31,18 @@ export declare const sprinkles: ((props: {
     borderLeftColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
     borderRightColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
     borderTopColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+    borderBottomColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+    borderLeftColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+    borderRightColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+    borderTopColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
     borderLeftStyle?: "none" | "solid" | undefined;
     borderBottomStyle?: "none" | "solid" | undefined;
     borderRightStyle?: "none" | "solid" | undefined;
     borderTopStyle?: "none" | "solid" | undefined;
     color?: "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | undefined;
+    colour?: "link" | "white" | "body" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
     backgroundColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
+    backgroundColour?: "white" | "black900" | "black800" | "black700" | "black600" | "black500" | "black400" | "black300" | "black200" | "black100" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "transparent" | undefined;
     opacity?: number | "1" | "0" | undefined;
     fontSize?: {} | undefined;
     lineHeight?: {} | undefined;
@@ -74,7 +56,16 @@ export declare const sprinkles: ((props: {
     bg?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "transparent" | undefined;
     fg?: "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | undefined;
     borderColor?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+    borderColorX?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+    borderColorY?: "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled" | undefined;
+    borderColour?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+    borderColourX?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
+    borderColourY?: "gray" | "success" | "danger" | "warning" | "light" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information" | "dark" | undefined;
     borderStyle?: "none" | "solid" | undefined;
+    borderStyleBottom?: "none" | "solid" | undefined;
+    borderStyleLeft?: "none" | "solid" | undefined;
+    borderStyleRight?: "none" | "solid" | undefined;
+    borderStyleTop?: "none" | "solid" | undefined;
 } & {
     display?: ("none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | {
         mobile?: "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | undefined;
@@ -106,12 +97,12 @@ export declare const sprinkles: ((props: {
         desktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
         largeDesktop?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "fixed" | "absolute" | "relative" | "static" | "sticky" | null>;
-    textAlign?: ("left" | "right" | "center" | {
-        mobile?: "left" | "right" | "center" | undefined;
-        tablet?: "left" | "right" | "center" | undefined;
-        desktop?: "left" | "right" | "center" | undefined;
-        largeDesktop?: "left" | "right" | "center" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | null>;
+    textAlign?: ("left" | "right" | "center" | "centre" | {
+        mobile?: "left" | "right" | "center" | "centre" | undefined;
+        tablet?: "left" | "right" | "center" | "centre" | undefined;
+        desktop?: "left" | "right" | "center" | "centre" | undefined;
+        largeDesktop?: "left" | "right" | "center" | "centre" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "centre" | null>;
     borderRadius?: ("1" | "none" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "pill" | "full" | {
         mobile?: "1" | "none" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "pill" | "full" | undefined;
         tablet?: "1" | "none" | "min" | "sm" | "md" | "lg" | "xl" | "2xl" | "pill" | "full" | undefined;
@@ -184,36 +175,30 @@ export declare const sprinkles: ((props: {
         desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
     } | undefined);
-    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "flexEnd" | "flexStart" | null>;
-    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | null>;
-    alignContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | null>;
-    alignSelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | null>;
-    justifySelf?: ("center" | "flex-end" | "flex-start" | {
-        mobile?: "center" | "flex-end" | "flex-start" | undefined;
-        tablet?: "center" | "flex-end" | "flex-start" | undefined;
-        desktop?: "center" | "flex-end" | "flex-start" | undefined;
-        largeDesktop?: "center" | "flex-end" | "flex-start" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-end" | "flex-start" | null>;
+    alignContent?: ("space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
+        mobile?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null>;
+    alignItems?: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
+    alignSelf?: ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null>;
+    justifyContent?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null> | ("space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
+        mobile?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
+    } | undefined);
     flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse" | {
         mobile?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         tablet?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -358,12 +343,12 @@ export declare const sprinkles: ((props: {
         desktop?: "1" | "2" | "3" | "none" | undefined;
         largeDesktop?: "1" | "2" | "3" | "none" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "none" | null>;
-    placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "flexEnd" | "flexStart" | null>;
+    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null> | ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined);
     size?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | null> | ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | {
         mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
         tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
@@ -491,7 +476,8 @@ export declare const sprinkles: ((props: {
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
 }) => string) & {
-    properties: Set<"color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textWrap" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "useVar" | "bg" | "fg" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
+    properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textWrap" | "userSelect" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "useVar" | "bg" | "fg" | "borderColorX" | "borderColorY" | "borderColour" | "borderColourX" | "borderColourY" | "borderStyleBottom" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
 };
 export type Sprinkles = Parameters<typeof sprinkles>[0];
+export type SprinklesLegacyColours = Pick<Sprinkles, 'backgroundColour' | 'borderColour' | 'borderBottomColour' | 'borderLeftColour' | 'borderRightColour' | 'borderTopColour' | 'colour'>;
 //# sourceMappingURL=sprinkles.css.d.ts.map

package/dist/styles/sprinkles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AA8FA,eAAO,MAAM,WAAW;;;;;;6BAUlB,sBAAsB,CAAC,QAAQ,CAAC,EAAE;;CAEvC,CAAC;AAyGF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;CAA0C,CAAC;AAE9E,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,EAC1C,iBAAiB,GACjB,aAAa,GACb,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,OAAO,CACT,CAAC;AAeF,eAAO,MAAM,mBAAmB;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,EACzC,OAAO,CACP,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAmIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAqKA,eAAO,MAAM,WAAW;;;;;;6BAUlB,sBAAsB,CAAC,QAAQ,CAAC,EAAE;;CAEvC,CAAC;AA0FF,eAAO,MAAM,mBAAmB;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,EACzC,OAAO,CACP,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAoIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAGxD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC"}