@traefik-labs/faency 12.3.9 → 13.0.0

package/dist/components/Bubble/Bubble.js

@@ -1,4 +1,21 @@
 import { keyframes, styled } from "../../stitches.config.js";
+// components/Bubble/Bubble.tsx
+var bip = keyframes({
+	"0%": {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		opacity: 1
+	},
+	"100%": {
+		top: -8,
+		right: -8,
+		bottom: -8,
+		left: -8,
+		opacity: 0
+	}
+});
 var Bubble = styled("div", {
 	display: "inline-block",
 	size: "$4",
@@ -6,22 +23,7 @@ var Bubble = styled("div", {
 	borderRadius: "50%",
 	position: "relative",
 	"&::before": {
-		animation: `${keyframes({
-			"0%": {
-				top: 0,
-				right: 0,
-				bottom: 0,
-				left: 0,
-				opacity: 1
-			},
-			"100%": {
-				top: -8,
-				right: -8,
-				bottom: -8,
-				left: -8,
-				opacity: 0
-			}
-		})} 1s ease infinite`,
+		animation: `${bip} 1s ease infinite`,
 		boxSizing: "border-box",
 		content: "\"\"",
 		position: "absolute",
@@ -91,7 +93,6 @@ var Bubble = styled("div", {
 		noAnimation: false
 	}
 });
-//#endregion
 export { Bubble };
 
 //# sourceMappingURL=Bubble.js.map

package/dist/components/Bubble/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","names":[],"sources":["../../../components/Bubble/Bubble.tsx"],"sourcesContent":["import { keyframes, styled } from '../../stitches.config';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nexport const Bubble = styled('div', {\n  display: 'inline-block',\n  size: '$4',\n  bc: '$red8',\n  borderRadius: '50%',\n  position: 'relative',\n\n  '&::before': {\n    animation: `${bip} 1s ease infinite`,\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 5,\n    right: 5,\n    bottom: 5,\n    left: 5,\n    bc: 'rgba(255,255,255,.1)',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    variant: {\n      red: { bc: '$red8', '&::before': { bc: '$red8' } },\n      green: { bc: '$green8', '&::before': { bc: '$green8' } },\n      orange: { bc: '$orange8', '&::before': { bc: '$orange8' } },\n      blue: { bc: '$blue8', '&::before': { bc: '$blue8' } },\n      yellow: { bc: '$neon8', '&::before': { bc: '$neon8' } },\n      purple: { bc: '$purple8', '&::before': { bc: '$purple8' } },\n      gray: { bc: '$slate8', '&::before': { bc: '$slate8' } },\n    },\n    size: {\n      'x-small': { size: '$1' },\n      small: { size: '$2' },\n      medium: { size: '$3' },\n      large: { size: '$4' },\n      'x-large': { size: '$5' },\n    },\n    noAnimation: {\n      true: {\n        '&::before': { content: 'none' },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":";AAmBA,IAAa,SAAS,OAAO,OAAO;CAClC,SAAS;CACT,MAAM;CACN,IAAI;CACJ,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW,GAzBH,UAAU;GACpB,MAAM;IACJ,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;GACX;GACA,QAAQ;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;GACX;EACF,CAUkB,EAAI;EAClB,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACX,cAAc;EACd,eAAe;EACf,QAAQ;CACV;CAEA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,IAAI;EACJ,cAAc;EACd,eAAe;CACjB;CAEA,UAAU;EACR,SAAS;GACP,KAAK;IAAE,IAAI;IAAS,aAAa,EAAE,IAAI,QAAQ;GAAE;GACjD,OAAO;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,UAAU;GAAE;GACvD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,WAAW;GAAE;GAC1D,MAAM;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,SAAS;GAAE;GACpD,QAAQ;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,SAAS;GAAE;GACtD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,WAAW;GAAE;GAC1D,MAAM;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,UAAU;GAAE;EACxD;EACA,MAAM;GACJ,WAAW,EAAE,MAAM,KAAK;GACxB,OAAO,EAAE,MAAM,KAAK;GACpB,QAAQ,EAAE,MAAM,KAAK;GACrB,OAAO,EAAE,MAAM,KAAK;GACpB,WAAW,EAAE,MAAM,KAAK;EAC1B;EACA,aAAa,EACX,MAAM,EACJ,aAAa,EAAE,SAAS,OAAO,EACjC,EACF;CACF;CAEA,iBAAiB;EACf,MAAM;EACN,aAAa;CACf;AACF,CAAC"}
+{"version":3,"file":"Bubble.js","names":[],"sources":["../../../components/Bubble/Bubble.tsx"],"sourcesContent":["import { keyframes, styled } from '../../stitches.config';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nexport const Bubble = styled('div', {\n  display: 'inline-block',\n  size: '$4',\n  bc: '$red8',\n  borderRadius: '50%',\n  position: 'relative',\n\n  '&::before': {\n    animation: `${bip} 1s ease infinite`,\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    top: 5,\n    right: 5,\n    bottom: 5,\n    left: 5,\n    bc: 'rgba(255,255,255,.1)',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    variant: {\n      red: { bc: '$red8', '&::before': { bc: '$red8' } },\n      green: { bc: '$green8', '&::before': { bc: '$green8' } },\n      orange: { bc: '$orange8', '&::before': { bc: '$orange8' } },\n      blue: { bc: '$blue8', '&::before': { bc: '$blue8' } },\n      yellow: { bc: '$neon8', '&::before': { bc: '$neon8' } },\n      purple: { bc: '$purple8', '&::before': { bc: '$purple8' } },\n      gray: { bc: '$slate8', '&::before': { bc: '$slate8' } },\n    },\n    size: {\n      'x-small': { size: '$1' },\n      small: { size: '$2' },\n      medium: { size: '$3' },\n      large: { size: '$4' },\n      'x-large': { size: '$5' },\n    },\n    noAnimation: {\n      true: {\n        '&::before': { content: 'none' },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":";;AAEA,IAAM,MAAM,UAAU;CACpB,MAAM;EACJ,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,QAAQ;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,SAAS;CACX;AACF,CAAC;AAED,IAAa,SAAS,OAAO,OAAO;CAClC,SAAS;CACT,MAAM;CACN,IAAI;CACJ,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW,GAAG,IAAI;EAClB,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACX,cAAc;EACd,eAAe;EACf,QAAQ;CACV;CAEA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,IAAI;EACJ,cAAc;EACd,eAAe;CACjB;CAEA,UAAU;EACR,SAAS;GACP,KAAK;IAAE,IAAI;IAAS,aAAa,EAAE,IAAI,QAAQ;GAAE;GACjD,OAAO;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,UAAU;GAAE;GACvD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,WAAW;GAAE;GAC1D,MAAM;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,SAAS;GAAE;GACpD,QAAQ;IAAE,IAAI;IAAU,aAAa,EAAE,IAAI,SAAS;GAAE;GACtD,QAAQ;IAAE,IAAI;IAAY,aAAa,EAAE,IAAI,WAAW;GAAE;GAC1D,MAAM;IAAE,IAAI;IAAW,aAAa,EAAE,IAAI,UAAU;GAAE;EACxD;EACA,MAAM;GACJ,WAAW,EAAE,MAAM,KAAK;GACxB,OAAO,EAAE,MAAM,KAAK;GACpB,QAAQ,EAAE,MAAM,KAAK;GACrB,OAAO,EAAE,MAAM,KAAK;GACpB,WAAW,EAAE,MAAM,KAAK;EAC1B;EACA,aAAa,EACX,MAAM,EACJ,aAAa,EAAE,SAAS,OAAO,EACjC,EACF;CACF;CAEA,iBAAiB;EACf,MAAM;EACN,aAAa;CACf;AACF,CAAC"}

package/dist/components/Bubble/Bubble.vanilla.cjs

@@ -4,7 +4,7 @@ const require_Bubble_vanilla_css = require("./Bubble.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Bubble/Bubble.vanilla.tsx
+// components/Bubble/Bubble.vanilla.tsx
 var BubbleVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, style, size, variant, noAnimation, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -14,20 +14,20 @@ var BubbleVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, st
 		...style,
 		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
 	};
+	const recipeClass = require_Bubble_vanilla_css.bubbleRecipe({
+		size,
+		variant,
+		noAnimation
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: `${require_Bubble_vanilla_css.bubbleRecipe({
-			size,
-			variant,
-			noAnimation
-		})} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 BubbleVanillaComponentImpl.displayName = "BubbleVanilla";
 var BubbleVanilla = BubbleVanillaComponentImpl;
-//#endregion
 exports.BubbleVanilla = BubbleVanilla;
 
 //# sourceMappingURL=Bubble.vanilla.cjs.map

package/dist/components/Bubble/Bubble.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vanilla.cjs","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,WAAA,EAEF,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;EAAY,CAK5C,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
+{"version":3,"file":"Bubble.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","bubbleRecipe"],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,8BAAA,GAA6BA,MAAAA,WAAAA,EAE/B,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAC1B;CAEA,MAAM,cAAcC,2BAAAA,aAAa;EAAE;EAAM;EAAS;CAAY,CAAC;CAE/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}

package/dist/components/Bubble/Bubble.vanilla.css.cjs

@@ -1,5 +1,5 @@
 ;/* empty css                                    */
-//#region components/Bubble/Bubble.vanilla.css.ts
+// components/Bubble/Bubble.vanilla.css.ts
 var bubbleRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").createRuntimeFn)({
 	defaultClassName: "_1fnlquw2 _1fnlquw1",
 	variantClassNames: {
@@ -27,7 +27,6 @@ var bubbleRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").creat
 	},
 	compoundVariants: []
 });
-//#endregion
 exports.bubbleRecipe = bubbleRecipe;
 
 //# sourceMappingURL=Bubble.vanilla.css.cjs.map

package/dist/components/Bubble/Bubble.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vanilla.css.cjs","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nconst baseBubble = style({\n  display: 'inline-block',\n  width: tokens.sizes['4'],\n  height: tokens.sizes['4'],\n  backgroundColor: tokens.colors.red['8'],\n  borderRadius: '50%',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      animation: `${bip} 1s ease infinite`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 5,\n      right: 5,\n      bottom: 5,\n      left: 5,\n      backgroundColor: 'rgba(255,255,255,.1)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport const bubbleRecipe = recipe({\n  base: baseBubble,\n\n  variants: {\n    variant: {\n      red: {\n        backgroundColor: tokens.colors.red['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.red['8'] },\n        },\n      },\n      green: {\n        backgroundColor: tokens.colors.green['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.green['8'] },\n        },\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.orange['8'] },\n        },\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.blue['8'] },\n        },\n      },\n      yellow: {\n        backgroundColor: tokens.colors.neon['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.neon['8'] },\n        },\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.purple['8'] },\n        },\n      },\n      gray: {\n        backgroundColor: tokens.colors.slate['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.slate['8'] },\n        },\n      },\n    },\n    size: {\n      'x-small': {\n        width: tokens.sizes['1'],\n        height: tokens.sizes['1'],\n      },\n      small: {\n        width: tokens.sizes['2'],\n        height: tokens.sizes['2'],\n      },\n      medium: {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      large: {\n        width: tokens.sizes['4'],\n        height: tokens.sizes['4'],\n      },\n      'x-large': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n    },\n    noAnimation: {\n      true: {\n        selectors: {\n          '&::before': { content: 'none' },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Bubble.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Bubble/Bubble.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nconst baseBubble = style({\n  display: 'inline-block',\n  width: tokens.sizes['4'],\n  height: tokens.sizes['4'],\n  backgroundColor: tokens.colors.red['8'],\n  borderRadius: '50%',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      animation: `${bip} 1s ease infinite`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 5,\n      right: 5,\n      bottom: 5,\n      left: 5,\n      backgroundColor: 'rgba(255,255,255,.1)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport const bubbleRecipe = recipe({\n  base: baseBubble,\n\n  variants: {\n    variant: {\n      red: {\n        backgroundColor: tokens.colors.red['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.red['8'] },\n        },\n      },\n      green: {\n        backgroundColor: tokens.colors.green['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.green['8'] },\n        },\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.orange['8'] },\n        },\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.blue['8'] },\n        },\n      },\n      yellow: {\n        backgroundColor: tokens.colors.neon['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.neon['8'] },\n        },\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.purple['8'] },\n        },\n      },\n      gray: {\n        backgroundColor: tokens.colors.slate['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.slate['8'] },\n        },\n      },\n    },\n    size: {\n      'x-small': {\n        width: tokens.sizes['1'],\n        height: tokens.sizes['1'],\n      },\n      small: {\n        width: tokens.sizes['2'],\n        height: tokens.sizes['2'],\n      },\n      medium: {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      large: {\n        width: tokens.sizes['4'],\n        height: tokens.sizes['4'],\n      },\n      'x-large': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n    },\n    noAnimation: {\n      true: {\n        selectors: {\n          '&::before': { content: 'none' },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":""}

package/dist/components/Bubble/Bubble.vanilla.css.js

@@ -1,6 +1,6 @@
 /* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Bubble/Bubble.vanilla.css.ts
+// components/Bubble/Bubble.vanilla.css.ts
 var bubbleRecipe = createRuntimeFn({
 	defaultClassName: "_1fnlquw2 _1fnlquw1",
 	variantClassNames: {
@@ -28,7 +28,6 @@ var bubbleRecipe = createRuntimeFn({
 	},
 	compoundVariants: []
 });
-//#endregion
 export { bubbleRecipe };
 
 //# sourceMappingURL=Bubble.vanilla.css.js.map

package/dist/components/Bubble/Bubble.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vanilla.css.js","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nconst baseBubble = style({\n  display: 'inline-block',\n  width: tokens.sizes['4'],\n  height: tokens.sizes['4'],\n  backgroundColor: tokens.colors.red['8'],\n  borderRadius: '50%',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      animation: `${bip} 1s ease infinite`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 5,\n      right: 5,\n      bottom: 5,\n      left: 5,\n      backgroundColor: 'rgba(255,255,255,.1)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport const bubbleRecipe = recipe({\n  base: baseBubble,\n\n  variants: {\n    variant: {\n      red: {\n        backgroundColor: tokens.colors.red['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.red['8'] },\n        },\n      },\n      green: {\n        backgroundColor: tokens.colors.green['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.green['8'] },\n        },\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.orange['8'] },\n        },\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.blue['8'] },\n        },\n      },\n      yellow: {\n        backgroundColor: tokens.colors.neon['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.neon['8'] },\n        },\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.purple['8'] },\n        },\n      },\n      gray: {\n        backgroundColor: tokens.colors.slate['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.slate['8'] },\n        },\n      },\n    },\n    size: {\n      'x-small': {\n        width: tokens.sizes['1'],\n        height: tokens.sizes['1'],\n      },\n      small: {\n        width: tokens.sizes['2'],\n        height: tokens.sizes['2'],\n      },\n      medium: {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      large: {\n        width: tokens.sizes['4'],\n        height: tokens.sizes['4'],\n      },\n      'x-large': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n    },\n    noAnimation: {\n      true: {\n        selectors: {\n          '&::before': { content: 'none' },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Bubble.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Bubble/Bubble.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst bip = keyframes({\n  '0%': {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    opacity: 1,\n  },\n  '100%': {\n    top: -8,\n    right: -8,\n    bottom: -8,\n    left: -8,\n    opacity: 0,\n  },\n});\n\nconst baseBubble = style({\n  display: 'inline-block',\n  width: tokens.sizes['4'],\n  height: tokens.sizes['4'],\n  backgroundColor: tokens.colors.red['8'],\n  borderRadius: '50%',\n  position: 'relative',\n\n  selectors: {\n    '&::before': {\n      animation: `${bip} 1s ease infinite`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n    '&::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      top: 5,\n      right: 5,\n      bottom: 5,\n      left: 5,\n      backgroundColor: 'rgba(255,255,255,.1)',\n      borderRadius: '50%',\n      pointerEvents: 'none',\n    },\n  },\n});\n\nexport const bubbleRecipe = recipe({\n  base: baseBubble,\n\n  variants: {\n    variant: {\n      red: {\n        backgroundColor: tokens.colors.red['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.red['8'] },\n        },\n      },\n      green: {\n        backgroundColor: tokens.colors.green['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.green['8'] },\n        },\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.orange['8'] },\n        },\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.blue['8'] },\n        },\n      },\n      yellow: {\n        backgroundColor: tokens.colors.neon['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.neon['8'] },\n        },\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.purple['8'] },\n        },\n      },\n      gray: {\n        backgroundColor: tokens.colors.slate['8'],\n        selectors: {\n          '&::before': { backgroundColor: tokens.colors.slate['8'] },\n        },\n      },\n    },\n    size: {\n      'x-small': {\n        width: tokens.sizes['1'],\n        height: tokens.sizes['1'],\n      },\n      small: {\n        width: tokens.sizes['2'],\n        height: tokens.sizes['2'],\n      },\n      medium: {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      large: {\n        width: tokens.sizes['4'],\n        height: tokens.sizes['4'],\n      },\n      'x-large': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n    },\n    noAnimation: {\n      true: {\n        selectors: {\n          '&::before': { content: 'none' },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: 'small',\n    noAnimation: false,\n  },\n});\n"],"mappings":""}

package/dist/components/Bubble/Bubble.vanilla.js

@@ -4,7 +4,7 @@ import { bubbleRecipe } from "./Bubble.vanilla.css.js";
 import { forwardRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
-//#region components/Bubble/Bubble.vanilla.tsx
+// components/Bubble/Bubble.vanilla.tsx
 var BubbleVanillaComponentImpl = forwardRef(({ as, className, css, style, size, variant, noAnimation, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = useVanillaExtractTheme();
@@ -14,20 +14,20 @@ var BubbleVanillaComponentImpl = forwardRef(({ as, className, css, style, size,
 		...style,
 		...assignInlineVars(vars)
 	};
+	const recipeClass = bubbleRecipe({
+		size,
+		variant,
+		noAnimation
+	});
 	return /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: `${bubbleRecipe({
-			size,
-			variant,
-			noAnimation
-		})} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 BubbleVanillaComponentImpl.displayName = "BubbleVanilla";
 var BubbleVanilla = BubbleVanillaComponentImpl;
-//#endregion
 export { BubbleVanilla };
 
 //# sourceMappingURL=Bubble.vanilla.js.map

package/dist/components/Bubble/Bubble.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.vanilla.js","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;CAIA,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;EAAY,CAK5C,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
+{"version":3,"file":"Bubble.vanilla.js","names":[],"sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,SAC5D,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,IAAI;CAC1B;CAEA,MAAM,cAAc,aAAa;EAAE;EAAM;EAAS;CAAY,CAAC;CAE/D,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}

package/dist/components/Button/Button.cjs

@@ -4,7 +4,7 @@ let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
-//#region components/Button/Button.tsx
+// components/Button/Button.tsx
 var BUTTON_BASE_STYLES = {
 	appearance: "none",
 	userSelect: "none",
@@ -227,13 +227,13 @@ var StyledButton = require_stitches_config.styled("button", BUTTON_BASE_STYLES,
 });
 var StyledButtonSlot = require_stitches_config.styled(_radix_ui_react_slot.Slot, StyledButton);
 var Button = react.default.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, react.useMemo)(() => asChild ? StyledButtonSlot : StyledButton, [asChild]), {
+	const Component = (0, react.useMemo)(() => asChild ? StyledButtonSlot : StyledButton, [asChild]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref: forwardedRef,
 		...props,
 		children
 	});
 });
-//#endregion
 exports.BUTTON_BASE_STYLES = BUTTON_BASE_STYLES;
 exports.Button = Button;
 exports.StyledButton = StyledButton;

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$button',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$button',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$button',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAKA,IAAa,qBAAqB;CAChC,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,yBAAyB;CACzB,cAAc;EACZ,eAAe;EACf,SAAS;CACX;AACF;AAEA,IAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,2BAA2B,UAAiC;CAChE,UAAU,SAAS;CACnB,gBAAgB;CAChB,iBAAiB;;;;;;;CAOjB,WAAW,GAAG,wBAAA,UAAU,EACtB,QAAQ,EAAE,WAAW,uBAAuB,EAC9C,CAAC,EAAE;AACL;AAEA,IAAa,eAAe,wBAAA,OAAO,UAAU,oBAAoB;CAE/D,KAAK;CACL,YAAY;CACZ,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CAGA,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CAGZ,UAAU;CACV,QAAQ;CACR,IAAI;CACJ,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,oBAAoB;CAEpB,mBAAmB;EACjB,WAAW;EACX,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF,EACF;CAEA,YAAY,EACV,aAAa,EACX,iBAAiB,sBACnB,EACF;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,QAAQ;IACN,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;EACF;EACA,SAAS;GACP,SAAS;IACP,IAAI;IACJ,GAAG;IACH,mBAAmB,EACjB,WAAW,mDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,WAAW;IACT,IAAI;IACJ,GAAG;IACH,WAAW;IACX,YAAY,EACV,WAAW,gDACb;IACA,mBAAmB,EACjB,WAAW,qDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,mBAAmB,EACjB,WAAW,2CACb;GACF;EACF;EACA,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,GAAG;IACH,YAAY,EACV,iBAAiB,aACnB;GACF;GACA,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe;IACf,YAAY;KACV,MAAM;KACN,OAAO;KACP,GAAG,wBAAwB,QAAQ;IACrC;GACF;EACF;EACA,OAAO,EACL,MAAM;GACJ,WAAW;GACX,UAAU,EACR,WAAW,EACT,WAAW,OACb,EACF;EACF,EACF;EACA,SAAS,EACP,MAAM,EACJ,cAAc,QAChB,EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AACD,IAAM,mBAAmB,wBAAA,OAAO,qBAAA,MAAM,YAAY;AAUlD,IAAa,SAAS,MAAA,QAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;CAEjD,OACE,iBAAA,GAAA,kBAAA,IAAA,EAAA,GAAA,MAAA,QAAA,OAF+B,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAElF,GAAD;EAAW,KAAK;EAAc,GAAI;EAC/B;CACQ,CAAA;AAEf,CACF"}
+{"version":3,"file":"Button.cjs","names":["keyframes","styled","Slot","React","useMemo"],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$button',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$button',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$button',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAKA,IAAa,qBAAqB;CAChC,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,yBAAyB;CACzB,cAAc;EACZ,eAAe;EACf,SAAS;CACX;AACF;AAEA,IAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,2BAA2B,UAAiC;CAChE,UAAU,SAAS;CACnB,gBAAgB;CAChB,iBAAiB;;;;;;;CAOjB,WAAW,GAAGA,wBAAAA,UAAU,EACtB,QAAQ,EAAE,WAAW,uBAAuB,EAC9C,CAAC,EAAE;AACL;AAEA,IAAa,eAAeC,wBAAAA,OAAO,UAAU,oBAAoB;CAE/D,KAAK;CACL,YAAY;CACZ,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CAGA,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CAGZ,UAAU;CACV,QAAQ;CACR,IAAI;CACJ,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,oBAAoB;CAEpB,mBAAmB;EACjB,WAAW;EACX,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF,EACF;CAEA,YAAY,EACV,aAAa,EACX,iBAAiB,sBACnB,EACF;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,QAAQ;IACN,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;EACF;EACA,SAAS;GACP,SAAS;IACP,IAAI;IACJ,GAAG;IACH,mBAAmB,EACjB,WAAW,mDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,WAAW;IACT,IAAI;IACJ,GAAG;IACH,WAAW;IACX,YAAY,EACV,WAAW,gDACb;IACA,mBAAmB,EACjB,WAAW,qDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,mBAAmB,EACjB,WAAW,2CACb;GACF;EACF;EACA,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,GAAG;IACH,YAAY,EACV,iBAAiB,aACnB;GACF;GACA,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe;IACf,YAAY;KACV,MAAM;KACN,OAAO;KACP,GAAG,wBAAwB,QAAQ;IACrC;GACF;EACF;EACA,OAAO,EACL,MAAM;GACJ,WAAW;GACX,UAAU,EACR,WAAW,EACT,WAAW,OACb,EACF;EACF,EACF;EACA,SAAS,EACP,MAAM,EACJ,cAAc,QAChB,EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AACD,IAAM,mBAAmBA,wBAAAA,OAAOC,qBAAAA,MAAM,YAAY;AAUlD,IAAa,SAASC,MAAAA,QAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;CACjD,MAAM,aAAA,GAAYC,MAAAA,QAAAA,OAAe,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAAC;CACtF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAC/B;CACQ,CAAA;AAEf,CACF"}

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@ import { keyframes, styled } from "../../stitches.config.js";
 import React, { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-//#region components/Button/Button.tsx
+// components/Button/Button.tsx
 var BUTTON_BASE_STYLES = {
 	appearance: "none",
 	userSelect: "none",
@@ -225,13 +225,13 @@ var StyledButton = styled("button", BUTTON_BASE_STYLES, {
 });
 var StyledButtonSlot = styled(Slot, StyledButton);
 var Button = React.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]), {
+	const Component = useMemo(() => asChild ? StyledButtonSlot : StyledButton, [asChild]);
+	return /* @__PURE__ */ jsx(Component, {
 		ref: forwardedRef,
 		...props,
 		children
 	});
 });
-//#endregion
 export { BUTTON_BASE_STYLES, Button, StyledButton };
 
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$button',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$button',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$button',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"mappings":";;;;;AAKA,IAAa,qBAAqB;CAChC,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,yBAAyB;CACzB,cAAc;EACZ,eAAe;EACf,SAAS;CACX;AACF;AAEA,IAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,2BAA2B,UAAiC;CAChE,UAAU,SAAS;CACnB,gBAAgB;CAChB,iBAAiB;;;;;;;CAOjB,WAAW,GAAG,UAAU,EACtB,QAAQ,EAAE,WAAW,uBAAuB,EAC9C,CAAC,EAAE;AACL;AAEA,IAAa,eAAe,OAAO,UAAU,oBAAoB;CAE/D,KAAK;CACL,YAAY;CACZ,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CAGA,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CAGZ,UAAU;CACV,QAAQ;CACR,IAAI;CACJ,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,oBAAoB;CAEpB,mBAAmB;EACjB,WAAW;EACX,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF,EACF;CAEA,YAAY,EACV,aAAa,EACX,iBAAiB,sBACnB,EACF;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,QAAQ;IACN,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;EACF;EACA,SAAS;GACP,SAAS;IACP,IAAI;IACJ,GAAG;IACH,mBAAmB,EACjB,WAAW,mDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,WAAW;IACT,IAAI;IACJ,GAAG;IACH,WAAW;IACX,YAAY,EACV,WAAW,gDACb;IACA,mBAAmB,EACjB,WAAW,qDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,mBAAmB,EACjB,WAAW,2CACb;GACF;EACF;EACA,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,GAAG;IACH,YAAY,EACV,iBAAiB,aACnB;GACF;GACA,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe;IACf,YAAY;KACV,MAAM;KACN,OAAO;KACP,GAAG,wBAAwB,QAAQ;IACrC;GACF;EACF;EACA,OAAO,EACL,MAAM;GACJ,WAAW;GACX,UAAU,EACR,WAAW,EACT,WAAW,OACb,EACF;EACF,EACF;EACA,SAAS,EACP,MAAM,EACJ,cAAc,QAChB,EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AACD,IAAM,mBAAmB,OAAO,MAAM,YAAY;AAUlD,IAAa,SAAS,MAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;CAEjD,OACE,oBAFgB,cAAe,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAElF,GAAD;EAAW,KAAK;EAAc,GAAI;EAC/B;CACQ,CAAA;AAEf,CACF"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$button',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$button',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$button',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n"],"mappings":";;;;;AAKA,IAAa,qBAAqB;CAChC,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,QAAQ;CACR,yBAAyB;CACzB,cAAc;EACZ,eAAe;EACf,SAAS;CACX;AACF;AAEA,IAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,2BAA2B,UAAiC;CAChE,UAAU,SAAS;CACnB,gBAAgB;CAChB,iBAAiB;;;;;;;CAOjB,WAAW,GAAG,UAAU,EACtB,QAAQ,EAAE,WAAW,uBAAuB,EAC9C,CAAC,EAAE;AACL;AAEA,IAAa,eAAe,OAAO,UAAU,oBAAoB;CAE/D,KAAK;CACL,YAAY;CACZ,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;CACT;CAGA,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CAGZ,UAAU;CACV,QAAQ;CACR,IAAI;CACJ,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,oBAAoB;CAEpB,mBAAmB;EACjB,WAAW;EACX,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF;CAEA,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,4BACnB;EACA,YAAY,EACV,SAAS,IACX;CACF,EACF;CAEA,YAAY,EACV,aAAa,EACX,iBAAiB,sBACnB,EACF;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,QAAQ;IACN,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;GACA,OAAO;IACL,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,YAAY;GACd;EACF;EACA,SAAS;GACP,SAAS;IACP,IAAI;IACJ,GAAG;IACH,mBAAmB,EACjB,WAAW,mDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,WAAW;IACT,IAAI;IACJ,GAAG;IACH,WAAW;IACX,YAAY,EACV,WAAW,gDACb;IACA,mBAAmB,EACjB,WAAW,qDACb;IACA,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,mBACnB,EACF,EACF;GACF;GACA,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,mBAAmB,EACjB,WAAW,2CACb;GACF;EACF;EACA,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,GAAG;IACH,YAAY,EACV,iBAAiB,aACnB;GACF;GACA,SAAS;IACP,IAAI;IACJ,WAAW;IACX,GAAG;IACH,UAAU;IACV,eAAe;IACf,YAAY;KACV,MAAM;KACN,OAAO;KACP,GAAG,wBAAwB,QAAQ;IACrC;GACF;EACF;EACA,OAAO,EACL,MAAM;GACJ,WAAW;GACX,UAAU,EACR,WAAW,EACT,WAAW,OACb,EACF;EACF,EACF;EACA,SAAS,EACP,MAAM,EACJ,cAAc,QAChB,EACF;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;GACT;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,iBAAiB;IACjB,OAAO;IACP,WAAW;GACb;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,KAAK;IACH,OAAO;IACP,iBAAiB;IACjB,UAAU,EACR,WAAW;KACT,OAAO;KACP,iBAAiB;IACnB,EACF;GACF;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;EACA;GACE,MAAM;GACN,OAAO;GACP,KAAK,EACH,YAAY,wBAAwB,OAAO,EAC7C;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AACD,IAAM,mBAAmB,OAAO,MAAM,YAAY;AAUlD,IAAa,SAAS,MAAM,YACzB,EAAE,UAAU,SAAS,GAAG,SAAS,iBAAiB;CACjD,MAAM,YAAY,cAAe,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAAC;CACtF,OACE,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAC/B;CACQ,CAAA;AAEf,CACF"}

package/dist/components/Button/Button.themes.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Button/Button.themes.ts
+// components/Button/Button.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -35,7 +35,6 @@ var Theme;
 		buttonRedFocusBg: "$redA11"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/Button/Button.themes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.themes.cjs","names":[],"sources":["../../../components/Button/Button.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    buttonPrimaryBg: Property.Color;\n    buttonPrimaryText: Property.Color;\n    buttonPrimaryFocusBorder: Property.Color;\n    buttonPrimaryGhostHoverText: Property.Color;\n\n    buttonSecondaryBg: Property.Color;\n    buttonSecondaryText: Property.Color;\n    buttonSecondaryBorder: Property.Color;\n    buttonSecondaryFocusBorder: Property.Color;\n\n    buttonRedBg: Property.Color;\n    buttonRedText: Property.Color;\n    buttonRedHoverText: Property.Color;\n    buttonRedFocusBg: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: 'white',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n    buttonPrimaryGhostHoverText: '$deepBlue9',\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n    buttonRedBg: '$red9',\n    buttonRedText: '$loContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA8',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: '$deepBlue2',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n    buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: '$primary',\n\n    buttonRedBg: '$red10',\n    buttonRedText: '$hiContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA11',\n  });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,uBAAA,GAAA,WAAA,QAAA,CAAgC,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,KAAK,CAAC;EAC3E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,6BAAA,GAAA,WAAA,QAAA,CAAsC,aAAa,KAAK,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAErF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,uBAAA,GAAA,WAAA,QAAA,CAAgC,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,KAAK,CAAC;EAC5E,8BAAA,GAAA,WAAA,QAAA,CAAuC,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAEnF,mBAAmB;EACnB,sBAAA,GAAA,WAAA,QAAA,CAA+B,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACnE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Button.themes.cjs","names":["tinycolor"],"sources":["../../../components/Button/Button.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    buttonPrimaryBg: Property.Color;\n    buttonPrimaryText: Property.Color;\n    buttonPrimaryFocusBorder: Property.Color;\n    buttonPrimaryGhostHoverText: Property.Color;\n\n    buttonSecondaryBg: Property.Color;\n    buttonSecondaryText: Property.Color;\n    buttonSecondaryBorder: Property.Color;\n    buttonSecondaryFocusBorder: Property.Color;\n\n    buttonRedBg: Property.Color;\n    buttonRedText: Property.Color;\n    buttonRedHoverText: Property.Color;\n    buttonRedFocusBg: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: 'white',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n    buttonPrimaryGhostHoverText: '$deepBlue9',\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n    buttonRedBg: '$red9',\n    buttonRedText: '$loContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA8',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: '$deepBlue2',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n    buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: '$primary',\n\n    buttonRedBg: '$red10',\n    buttonRedText: '$hiContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA11',\n  });\n}\n"],"mappings":";;;;AAKO,IAAU;CAAV,SAAA,QAAA;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,KAAK,CAAC;EAC3E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,6BAAA,GAA4BA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAErF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,uBAAA,GAAsBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,KAAK,CAAC;EAC5E,8BAAA,GAA6BA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAEnF,mBAAmB;EACnB,sBAAA,GAAqBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACnE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Button/Button.themes.js

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Button/Button.themes.ts
+// components/Button/Button.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -33,7 +33,6 @@ var Theme;
 		buttonRedFocusBg: "$redA11"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 
 //# sourceMappingURL=Button.themes.js.map

package/dist/components/Button/Button.themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.themes.js","names":[],"sources":["../../../components/Button/Button.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    buttonPrimaryBg: Property.Color;\n    buttonPrimaryText: Property.Color;\n    buttonPrimaryFocusBorder: Property.Color;\n    buttonPrimaryGhostHoverText: Property.Color;\n\n    buttonSecondaryBg: Property.Color;\n    buttonSecondaryText: Property.Color;\n    buttonSecondaryBorder: Property.Color;\n    buttonSecondaryFocusBorder: Property.Color;\n\n    buttonRedBg: Property.Color;\n    buttonRedText: Property.Color;\n    buttonRedHoverText: Property.Color;\n    buttonRedFocusBg: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: 'white',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n    buttonPrimaryGhostHoverText: '$deepBlue9',\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n    buttonRedBg: '$red9',\n    buttonRedText: '$loContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA8',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: '$deepBlue2',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n    buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: '$primary',\n\n    buttonRedBg: '$red10',\n    buttonRedText: '$hiContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA11',\n  });\n}\n"],"mappings":";;AAKO,IAAA;;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,KAAK,CAAC;EAC3E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,4BAA4B,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAErF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,KAAK,CAAC;EAC5E,6BAA6B,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAEnF,mBAAmB;EACnB,qBAAqB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACnE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;GACD,UAAA,QAAA,CAAA,EAAD"}
+{"version":3,"file":"Button.themes.js","names":[],"sources":["../../../components/Button/Button.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    buttonPrimaryBg: Property.Color;\n    buttonPrimaryText: Property.Color;\n    buttonPrimaryFocusBorder: Property.Color;\n    buttonPrimaryGhostHoverText: Property.Color;\n\n    buttonSecondaryBg: Property.Color;\n    buttonSecondaryText: Property.Color;\n    buttonSecondaryBorder: Property.Color;\n    buttonSecondaryFocusBorder: Property.Color;\n\n    buttonRedBg: Property.Color;\n    buttonRedText: Property.Color;\n    buttonRedHoverText: Property.Color;\n    buttonRedFocusBg: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: 'white',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(6, { alpha: true }),\n    buttonPrimaryGhostHoverText: '$deepBlue9',\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: 'hsla(0, 0%, 0%, 0.54)',\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: tinycolor(primaryColor.value).setAlpha(0.19).toHslString(),\n\n    buttonRedBg: '$red9',\n    buttonRedText: '$loContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA8',\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    buttonPrimaryBg: '$primary',\n    buttonPrimaryFocusBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n    buttonPrimaryText: '$deepBlue2',\n    buttonPrimaryFocusBorder: primaryColor.helpers.pickScale(12, { alpha: true }),\n    buttonPrimaryGhostHoverText: tinycolor(primaryColor.value).lighten(10).toHslString(),\n\n    buttonSecondaryBg: 'transparent',\n    buttonSecondaryText: tinycolor('white').setAlpha(0.74).toHslString(),\n    buttonSecondaryBorder: '$grayBlue9',\n    buttonSecondaryFocusBorder: '$primary',\n\n    buttonRedBg: '$red10',\n    buttonRedText: '$hiContrast',\n    buttonRedHoverText: '$red10',\n    buttonRedFocusBg: '$redA11',\n  });\n}\n"],"mappings":";;AAKO,IAAU;CAAV,SAAA,QAAA;CAoBQ,OAAA,YAAqB,kBAAkB;EAClD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,GAAG,EAAE,OAAO,KAAK,CAAC;EAC3E,6BAA6B;EAE7B,mBAAmB;EACnB,qBAAqB;EACrB,uBAAuB;EACvB,4BAA4B,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EAErF,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;CAEa,OAAA,WAAoB,kBAAkB;EACjD,iBAAiB;EACjB,sBAAsB,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAC5E,mBAAmB;EACnB,0BAA0B,aAAa,QAAQ,UAAU,IAAI,EAAE,OAAO,KAAK,CAAC;EAC5E,6BAA6B,UAAU,aAAa,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,YAAY;EAEnF,mBAAmB;EACnB,qBAAqB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;EACnE,uBAAuB;EACvB,4BAA4B;EAE5B,aAAa;EACb,eAAe;EACf,oBAAoB;EACpB,kBAAkB;CACpB;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Button/Button.vanilla.cjs

@@ -4,7 +4,7 @@ const require_Button_vanilla_css = require("./Button.vanilla.css.cjs");
 let react = require("react");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Button/Button.vanilla.tsx
+// components/Button/Button.vanilla.tsx
 var ButtonVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, style, size, variant, state, ghost, rounded, ...props }, ref) => {
 	const Component = as || "button";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -14,22 +14,22 @@ var ButtonVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, st
 		...style,
 		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
 	};
+	const recipeClass = require_Button_vanilla_css.buttonRecipe({
+		size,
+		variant,
+		state,
+		ghost,
+		rounded
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: `${require_Button_vanilla_css.buttonRecipe({
-			size,
-			variant,
-			state,
-			ghost,
-			rounded
-		})} ${className || ""}`.trim(),
+		className: `${recipeClass} ${className || ""}`.trim(),
 		style: mergedStyles,
 		...props
 	});
 });
 ButtonVanillaComponentImpl.displayName = "ButtonVanilla";
 var ButtonVanilla = ButtonVanillaComponentImpl;
-//#endregion
 exports.ButtonVanilla = ButtonVanilla;
 
 //# sourceMappingURL=Button.vanilla.cjs.map

package/dist/components/Button/Button.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n  C,\n  ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      size,\n      variant,\n      state,\n      ghost,\n      rounded,\n      ...props\n    }: ButtonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'button';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,WAAA,EAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,iBAAA,CAAoB,IAAI;CAC1B;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;EAAQ,CAKtD,EAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
+{"version":3,"file":"Button.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","buttonRecipe"],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n  C,\n  ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      size,\n      variant,\n      state,\n      ghost,\n      rounded,\n      ...props\n    }: ButtonVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'button';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,8BAAA,GAA6BA,MAAAA,WAAAA,EAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAE1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAE7D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAC1B;CAEA,MAAM,cAAcC,2BAAAA,aAAa;EAAE;EAAM;EAAS;EAAO;EAAO;CAAQ,CAAC;CAEzE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}

package/dist/components/Button/Button.vanilla.css.cjs

@@ -1,5 +1,5 @@
 ;/* empty css                                    */
-//#region components/Button/Button.vanilla.css.ts
+// components/Button/Button.vanilla.css.ts
 var buttonRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").createRuntimeFn)({
 	defaultClassName: "krhgwq4 krhgwq3",
 	variantClassNames: {
@@ -63,7 +63,6 @@ var buttonRecipe = (0, require("@vanilla-extract/recipes/createRuntimeFn").creat
 		}, "krhgwqn"]
 	]
 });
-//#endregion
 exports.buttonRecipe = buttonRecipe;
 
 //# sourceMappingURL=Button.vanilla.css.cjs.map