@intellihr/blueberry 1.0.0-alpha.7 → 1.0.0-beta.2

package/README.md

@@ -37,7 +37,8 @@ The following props can be used to customize your implementation:
   - `intelliLight` will be used if no theme is specified.
   - The theme object cannot be directly configured or passed through from a consumer.
 - `i18n` takes an object of all the translation strings required for components. Default English translations are located in `_private/BlueberryContext/i18n.ts`
-- `i18nLocale` takes a locale for certain require components that require it. Defaults to `en`.
+- `locale` takes a locale for certain require components that require it. Defaults to `en-AU`.
+- `userCurrency` Takes a 3 letter currency for components that require it. Defaults to `AUD`.
 - `userTimezone` takes a timezone for the Timezone Disclaimer. Defaults to `Brisbane/Australia`.
 - `utcOffset` takes a UTC offset as a number between `-12` and `14` for date components that require it. Defaults to `10`.
 - `anchorOnClick` takes a function that gets called when a user interacts with any `a` element rendered by Blueberry.

package/dist/Avatar/Avatar.css.d.ts

@@ -2,7 +2,7 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const avatar: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     size: {
         small: {
-            fontSize: import("@vanilla-extract/private").CSSVarFunction;
+            fontSize: "0.75rem";
             height: import("@vanilla-extract/private").CSSVarFunction;
             lineHeight: import("@vanilla-extract/private").CSSVarFunction;
             width: import("@vanilla-extract/private").CSSVarFunction;
@@ -19,13 +19,19 @@ export declare const avatar: import("@vanilla-extract/recipes/dist/declarations/
             lineHeight: import("@vanilla-extract/private").CSSVarFunction;
             width: import("@vanilla-extract/private").CSSVarFunction;
         };
+        xLarge: {
+            fontSize: import("@vanilla-extract/private").CSSVarFunction;
+            height: import("@vanilla-extract/private").CSSVarFunction;
+            lineHeight: import("@vanilla-extract/private").CSSVarFunction;
+            width: import("@vanilla-extract/private").CSSVarFunction;
+        };
     };
     placeholder: {
         true: {
             border: `2px dashed var(--${string})` | `2px dashed var(--${string}, ${string})` | `2px dashed var(--${string}, ${number})`;
             color: import("@vanilla-extract/private").CSSVarFunction;
             selectors: {
-                '&:after': {
+                '&::after': {
                     display: "none";
                 };
             };
@@ -38,7 +44,7 @@ export declare const avatar: import("@vanilla-extract/recipes/dist/declarations/
             borderRadius: import("@vanilla-extract/private").CSSVarFunction;
             display: "flex";
             selectors: {
-                '&:after': {
+                '&::after': {
                     display: "none";
                 };
             };

package/dist/Avatar/Avatar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.css.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AA2BjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsHjB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Avatar.css.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HjB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAA"}

package/dist/Avatar/Avatar.d.ts

@@ -14,6 +14,6 @@ interface IAvatar {
     /** Attach a data-cy prop for Cypress to reference */
     id?: string;
 }
-declare const Avatar: React.ForwardRefExoticComponent<IAvatar & React.RefAttributes<HTMLHeadingElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<IAvatar & React.RefAttributes<HTMLDivElement>>;
 export default Avatar;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAU,cAAc,EAAE,MAAM,cAAc,CAAA;AAIrD,UAAU,OAAO;IACf,0BAA0B;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,QAAA,MAAM,MAAM,oFAuBX,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAU,cAAc,EAAE,MAAM,cAAc,CAAA;AAIrD,UAAU,OAAO;IACf,0BAA0B;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AASD,QAAA,MAAM,MAAM,gFAuBX,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/BlueberryProvider/BlueberryProvider.d.ts

@@ -3,9 +3,11 @@ import { IBlueberryContext } from '../_private/BlueberryContext/BlueberryContext
 interface IBlueberryProvider {
     theme?: IBlueberryContext['theme'];
     i18n?: IBlueberryContext['i18n'];
-    i18nLocale?: IBlueberryContext['i18nLocale'];
+    locale?: IBlueberryContext['locale'];
+    userCurrency?: IBlueberryContext['userCurrency'];
     userTimezone?: IBlueberryContext['userTimezone'];
     utcOffset?: IBlueberryContext['utcOffset'];
+    dateFormat?: IBlueberryContext['dateFormat'];
     anchorOnClick?: IBlueberryContext['anchorOnClick'];
     children: React.ReactNode;
 }

package/dist/BlueberryProvider/BlueberryProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlueberryProvider.d.ts","sourceRoot":"","sources":["../../src/BlueberryProvider/BlueberryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EACvB,iBAAiB,EAElB,MAAM,4CAA4C,CAAA;AAMnD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAA;IAC5C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC1C,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAA;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4BnD,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"BlueberryProvider.d.ts","sourceRoot":"","sources":["../../src/BlueberryProvider/BlueberryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EACvB,iBAAiB,EAElB,MAAM,4CAA4C,CAAA;AAMnD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC1C,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAA;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAA;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgCnD,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/Box/Box.d.ts

@@ -15,10 +15,10 @@ declare const Box: import("react").ForwardRefExoticComponent<{
         tablet?: "default" | "sharp" | "smooth" | "round" | "none" | undefined;
         desktop?: "default" | "sharp" | "smooth" | "round" | "none" | undefined;
     }) | undefined;
-    columnGap?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    columnGap?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
     display?: ("none" | "flex" | "block" | "inline" | "inlineBlock" | "inlineFlex" | {
         mobile?: "none" | "flex" | "block" | "inline" | "inlineBlock" | "inlineFlex" | undefined;
@@ -50,89 +50,89 @@ declare const Box: import("react").ForwardRefExoticComponent<{
         tablet?: "center" | "stretch" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
         desktop?: "center" | "stretch" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
     }) | undefined;
-    lineHeight?: ("small" | "xSmall" | "xxSmall" | "default" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "default" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "default" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "default" | undefined;
+    lineHeight?: ("small" | "xxSmall" | "xSmall" | "default" | {
+        mobile?: "small" | "xxSmall" | "xSmall" | "default" | undefined;
+        tablet?: "small" | "xxSmall" | "xSmall" | "default" | undefined;
+        desktop?: "small" | "xxSmall" | "xSmall" | "default" | undefined;
     }) | undefined;
-    marginBottom?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    marginBottom?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    marginLeft?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    marginLeft?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    marginRight?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    marginRight?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    marginTop?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    marginTop?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingBottom?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingBottom?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingLeft?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingLeft?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingRight?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingRight?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingTop?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingTop?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
     position?: ("fixed" | "absolute" | "relative" | {
         mobile?: "fixed" | "absolute" | "relative" | undefined;
         tablet?: "fixed" | "absolute" | "relative" | undefined;
         desktop?: "fixed" | "absolute" | "relative" | undefined;
     }) | undefined;
-    rowGap?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    rowGap?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
     textAlign?: ("left" | "right" | "center" | {
         mobile?: "left" | "right" | "center" | undefined;
         tablet?: "left" | "right" | "center" | undefined;
         desktop?: "left" | "right" | "center" | undefined;
     }) | undefined;
-    padding?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    padding?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingX?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingX?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
-    paddingY?: ("small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | {
-        mobile?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        tablet?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
-        desktop?: "small" | "xSmall" | "xxSmall" | "none" | "xxxSmall" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+    paddingY?: ("small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | {
+        mobile?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        tablet?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
+        desktop?: "small" | "large" | "xLarge" | "xxLarge" | "xxSmall" | "xSmall" | "none" | "xxxSmall" | "medium" | "xxxLarge" | undefined;
     }) | undefined;
 } & {
-    color?: ("surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | {
-        lightMode?: "surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | undefined;
-        darkMode?: "surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | undefined;
+    color?: ("brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | {
+        lightMode?: "brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | undefined;
+        darkMode?: "brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | undefined;
     }) | undefined;
-    background?: ("surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | {
-        lightMode?: "surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | undefined;
-        darkMode?: "surfaceLightSemiTransparent" | "surfaceContrast" | "brandAccent" | "brandAccentHover" | "brandAccentActive" | "brandAccentContrastText" | "brandAccentSoft" | "brandAccentSoftHover" | "brandAccentSoftActive" | "brandAccentSoftContrastText" | "highlight" | "highlightHover" | "highlightActive" | "highlightContrastText" | "highlightSoft" | "highlightSoftHover" | "highlightSoftActive" | "highlightSoftContrastText" | "info" | "infoHover" | "infoActive" | "infoContrastText" | "infoSoft" | "infoSoftHover" | "infoSoftActive" | "infoSoftContrastText" | "positive" | "positiveHover" | "positiveActive" | "positiveContrastText" | "positiveSoft" | "positiveSoftHover" | "positiveSoftActive" | "positiveSoftContrastText" | "caution" | "cautionHover" | "cautionActive" | "cautionContrastText" | "cautionSoft" | "cautionSoftHover" | "cautionSoftActive" | "cautionSoftContrastText" | "critical" | "criticalHover" | "criticalActive" | "criticalContrastText" | "criticalSoft" | "criticalSoftHover" | "criticalSoftActive" | "criticalSoftContrastText" | "neutral" | "neutralHover" | "neutralActive" | "neutralContrastText" | "neutralSoft" | "neutralSoftHover" | "neutralSoftActive" | "neutralSoftContrastText" | "surface" | "surfaceLight" | "surfaceDark" | "surfaceContrastText" | "surfaceContrastTextSubdued" | undefined;
+    background?: ("brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | {
+        lightMode?: "brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | undefined;
+        darkMode?: "brandBg" | "brandBgDark" | "brandBgDarkest" | "brandLight" | "brand" | "brandDark" | "brandText" | "brandContrast" | "highlightBg" | "highlightBgDark" | "highlightBgDarkest" | "highlightLight" | "highlight" | "highlightDark" | "highlightText" | "highlightContrast" | "infoBg" | "infoBgDark" | "infoBgDarkest" | "infoLight" | "info" | "infoDark" | "infoText" | "infoContrast" | "positiveBg" | "positiveBgDark" | "positiveBgDarkest" | "positiveLight" | "positive" | "positiveDark" | "positiveText" | "positiveContrast" | "cautionBg" | "cautionBgDark" | "cautionBgDarkest" | "cautionLight" | "caution" | "cautionDark" | "cautionText" | "cautionContrast" | "criticalBg" | "criticalBgDark" | "criticalBgDarkest" | "criticalLight" | "critical" | "criticalDark" | "criticalText" | "criticalContrast" | "neutralBg" | "neutralBgDark" | "neutralBgDarkest" | "neutralLight" | "neutral" | "neutralDark" | "neutralText" | "neutralContrast" | "surfaceBg" | "surfaceBgDarkest" | "surfaceText" | "surfaceTextLight" | undefined;
     }) | undefined;
 } & {
     __alignItems?: any;

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

@@ -27,21 +27,10 @@ export declare const button: import("@vanilla-extract/recipes/dist/declarations/
                 };
             };
         };
-        subdued: {
-            backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            selectors: {
-                '&:hover, &:focus': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-                '&:active': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-            };
-        };
         tertiary: {
             backgroundColor: "transparent";
             color: import("@vanilla-extract/private").CSSVarFunction;
+            textDecoration: "underline";
             selectors: {
                 '&:hover, &:focus': {
                     backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
@@ -72,6 +61,7 @@ export declare const button: import("@vanilla-extract/recipes/dist/declarations/
             selectors: {
                 '&:hover, &:focus, &:active': {
                     backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
+                    color: import("@vanilla-extract/private").CSSVarFunction;
                 };
             };
         };
@@ -79,6 +69,7 @@ export declare const button: import("@vanilla-extract/recipes/dist/declarations/
     loading: {
         true: {
             cursor: "default";
+            userSelect: "none";
         };
     };
     size: {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../src/Button/Button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiOjB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../src/Button/Button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsNjB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA"}

package/dist/Button/Button.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
-import type { IButtonElement } from '../_private/BaseButton';
 import { ButtonVariants } from './Button.css';
 import { IButtonContent } from '../_private/ButtonContent';
-type IButton = ButtonVariants & IButtonElement & IButtonContent;
-declare const Button: React.ForwardRefExoticComponent<Pick<IButton, "size" | "icon" | "variant" | keyof import("../_private/BaseButton/BaseButton").IBaseButton> & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<{
+    variant?: ButtonVariants['variant'];
+    disabled?: ButtonVariants['disabled'];
+    loading?: ButtonVariants['loading'];
+    size?: ButtonVariants['size'];
+    bleed?: ButtonVariants['bleed'];
+} & import("../_private/BaseButton/BaseButton").IBaseButton & {
+    type?: "button" | "reset" | "submit" | undefined;
+} & IButtonContent & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAU,cAAc,EAAE,MAAM,cAAc,CAAA;AACrD,OAAsB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,KAAK,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,sLAcX,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,cAAc,EAAE,MAAM,cAAc,CAAA;AACrD,OAAsB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAWtE,QAAA,MAAM,MAAM;cARA,cAAc,CAAC,SAAS,CAAC;eACxB,cAAc,CAAC,UAAU,CAAC;cAC3B,cAAc,CAAC,SAAS,CAAC;WAC5B,cAAc,CAAC,MAAM,CAAC;YACrB,cAAc,CAAC,OAAO,CAAC;;;4DAkBhC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/ButtonIcon/ButtonIcon.css.d.ts

@@ -23,17 +23,6 @@ export declare const buttonIcon: import("@vanilla-extract/recipes/dist/declarati
                 };
             };
         };
-        info: {
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            selectors: {
-                '&:hover, &:focus': {
-                    color: import("@vanilla-extract/private").CSSVarFunction;
-                };
-                '&:active': {
-                    backgroundColor: "rgba(0,0,0,0.1)";
-                };
-            };
-        };
     };
     disabled: {
         true: {

package/dist/ButtonIcon/ButtonIcon.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.css.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ErB,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAA"}
+{"version":3,"file":"ButtonIcon.css.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DrB,CAAA;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAA"}

package/dist/ButtonIcon/ButtonIcon.d.ts

@@ -2,14 +2,16 @@ import React from 'react';
 import type { IButtonElement } from '../_private/BaseButton';
 import { ButtonIconVariants } from '../ButtonIcon/ButtonIcon.css';
 import { IIcon } from '../_private/Icon';
-type IButtonIconContent = {
+declare const ButtonIcon: React.ForwardRefExoticComponent<{
     /** Label the button. Set an empty string to remove the tooltip */
     label: string;
     /** Display an icon to the left of the content */
     icon: React.FC<IIcon>;
-    tooltip?: boolean;
-};
-type IButtonIcon = ButtonIconVariants & Omit<IButtonElement, 'children' | 'loading'> & IButtonIconContent;
-declare const ButtonIcon: React.ForwardRefExoticComponent<Pick<IButtonIcon, "disabled" | "className" | "id" | "onClick" | "variant" | "bleed" | keyof IButtonIconContent> & React.RefAttributes<HTMLButtonElement>>;
+    /** Display the label in a tooltip when the button is hovered */
+    tooltip?: boolean | undefined;
+    variant?: ButtonIconVariants['variant'];
+    disabled?: ButtonIconVariants['disabled'];
+    bleed?: ButtonIconVariants['bleed'];
+} & Omit<IButtonElement, "children" | "loading"> & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonIcon;
 //# sourceMappingURL=ButtonIcon.d.ts.map

package/dist/ButtonIcon/ButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAc,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAErC,KAAK,kBAAkB,GAAG;IACxB,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,WAAW,GAAG,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAA;AAEzG,QAAA,MAAM,UAAU,2LA+Bf,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAc,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAcrC,QAAA,MAAM,UAAU;IAXd,kEAAkE;WAC3D,MAAM;IACb,iDAAiD;UAC3C,MAAM,EAAE,CAAC,KAAK,CAAC;IACrB,gEAAgE;;cAEtD,kBAAkB,CAAC,SAAS,CAAC;eAC5B,kBAAkB,CAAC,UAAU,CAAC;YACjC,kBAAkB,CAAC,OAAO,CAAC;0FAkCpC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/ButtonLink/ButtonLink.d.ts

@@ -1,13 +1,18 @@
 import React from 'react';
 import { ButtonVariants } from '../Button/Button.css';
-declare const ButtonLink: React.ForwardRefExoticComponent<ButtonVariants & import("../_private/BaseButton/BaseButton").IBaseButton & {
+import { IButtonContent } from '../_private/ButtonContent';
+declare const ButtonLink: React.ForwardRefExoticComponent<{
+    variant?: ButtonVariants['variant'];
+    disabled?: ButtonVariants['disabled'];
+    loading?: ButtonVariants['loading'];
+    size?: ButtonVariants['size'];
+    bleed?: ButtonVariants['bleed'];
+} & import("../_private/BaseButton/BaseButton").IBaseButton & {
     href: string;
     title?: string | undefined;
     rel?: string | undefined;
     newTab?: boolean | undefined;
     download?: boolean | undefined;
-} & Pick<import("../_private/BaseButton/BaseButton").IBaseButton, "children" | "loading"> & {
-    icon?: React.FC<import("../_private/Icon/Icon").IIcon> | undefined;
-} & React.RefAttributes<HTMLAnchorElement>>;
+} & IButtonContent & React.RefAttributes<HTMLAnchorElement>>;
 export default ButtonLink;
 //# sourceMappingURL=ButtonLink.d.ts.map

package/dist/ButtonLink/ButtonLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAK5D,QAAA,MAAM,UAAU;;;;;;;;2CAcf,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAsB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAWtE,QAAA,MAAM,UAAU;cARJ,cAAc,CAAC,SAAS,CAAC;eACxB,cAAc,CAAC,UAAU,CAAC;cAC3B,cAAc,CAAC,SAAS,CAAC;WAC5B,cAAc,CAAC,MAAM,CAAC;YACrB,cAAc,CAAC,OAAO,CAAC;;;;;;;4DAkBhC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/ButtonLinkIcon/ButtonLinkIcon.d.ts

@@ -1,65 +1,15 @@
 import React from 'react';
 import type { IButtonLinkElement } from '../_private/BaseButton';
 import { IIcon } from '../_private/Icon';
-type IButtonLinkIconContent = {
+import { ButtonIconVariants } from '../ButtonIcon/ButtonIcon.css';
+declare const ButtonLinkIcon: React.ForwardRefExoticComponent<{
     /** Label the button */
     label: string;
     /** Display an icon to the left of the content */
     icon: React.FC<IIcon>;
-};
-declare const ButtonLinkIcon: React.ForwardRefExoticComponent<import("@vanilla-extract/recipes/dist/declarations/src/types").VariantSelection<{
-    variant: {
-        default: {
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            selectors: {
-                '&:hover, &:focus': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-                '&:active': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-            };
-        };
-        destructive: {
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            selectors: {
-                '&:hover, &:focus': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-                '&:active': {
-                    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
-                };
-            };
-        };
-        info: {
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            selectors: {
-                '&:hover, &:focus': {
-                    color: import("@vanilla-extract/private").CSSVarFunction;
-                };
-                '&:active': {
-                    backgroundColor: "rgba(0,0,0,0.1)";
-                };
-            };
-        };
-    };
-    disabled: {
-        true: {
-            color: import("@vanilla-extract/private").CSSVarFunction;
-            cursor: "not-allowed";
-            selectors: {
-                '&:hover, &:focus, &:active': {
-                    backgroundColor: "transparent";
-                };
-            };
-        };
-    };
-    bleed: {
-        true: {
-            marginBottom: string;
-            marginTop: string;
-        };
-    };
-}> & Omit<IButtonLinkElement, "children" | "loading"> & IButtonLinkIconContent & React.RefAttributes<HTMLAnchorElement>>;
+    variant?: ButtonIconVariants['variant'];
+    disabled?: ButtonIconVariants['disabled'];
+    bleed?: ButtonIconVariants['bleed'];
+} & Omit<IButtonLinkElement, "children" | "loading"> & React.RefAttributes<HTMLAnchorElement>>;
 export default ButtonLinkIcon;
 //# sourceMappingURL=ButtonLinkIcon.d.ts.map