npm - @traefik-labs/faency - Versions diffs - 12.3.9 → 13.0.0 - Mend

@traefik-labs/faency 12.3.9 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (501) hide show

package/dist/components/Button/Button.vanilla.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.vanilla.css.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
1	+ {"version":3,"file":"Button.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}

package/dist/components/Button/Button.vanilla.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Button/Button.vanilla.css.ts
+// components/Button/Button.vanilla.css.ts
 var buttonRecipe = createRuntimeFn({
 	defaultClassName: "krhgwq4 krhgwq3",
 	variantClassNames: {
@@ -64,7 +64,6 @@ var buttonRecipe = createRuntimeFn({
 		}, "krhgwqn"]
 	]
 });
-//#endregion
 export { buttonRecipe };
 //# sourceMappingURL=Button.vanilla.css.js.map

package/dist/components/Button/Button.vanilla.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.vanilla.css.js","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
1	+ {"version":3,"file":"Button.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\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 '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}

package/dist/components/Button/Button.vanilla.js CHANGED Viewed

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

package/dist/components/Button/Button.vanilla.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.vanilla.js","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,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;GAAO;GAAO;EAAQ~~,~~CAKtD,EAAY,~~GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;CACL,CAAA;AAEL,CACF;AAEA,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
1	+ {"version":3,"file":"Button.vanilla.js","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,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,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;EAAO;EAAO;CAAQ,CAAC;CAEzE,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/ButtonSwitch/ButtonSwitch.cjs CHANGED Viewed

@@ -2,7 +2,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_stitches_config = require("../../stitches.config.cjs");
 let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
 _radix_ui_react_toggle_group = require_runtime.__toESM(_radix_ui_react_toggle_group, 1);
-//#region components/ButtonSwitch/ButtonSwitch.tsx
+// components/ButtonSwitch/ButtonSwitch.tsx
 var ButtonSwitchContainer = require_stitches_config.styled(_radix_ui_react_toggle_group.Root, {
 	display: "inline-flex",
 	bc: "$buttonSwitchContainerBg",
@@ -50,7 +50,6 @@ var ButtonSwitchItem = require_stitches_config.styled(_radix_ui_react_toggle_gro
 		borderRadius: "$3"
 	}
 });
-//#endregion
 exports.ButtonSwitchContainer = ButtonSwitchContainer;
 exports.ButtonSwitchItem = ButtonSwitchItem;

package/dist/components/ButtonSwitch/ButtonSwitch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonSwitch.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\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 '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;;;AAIA,IAAa,~~wBAAwB~~,~~wBAAA~~,~~OAAO~~,6BAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;AACP,CAAC;AAED,IAAa,~~mBAAmB~~,~~wBAAA~~,~~OAAO~~,6BAAqB,MAAM;CAChE,SAAS;CACT,IAAI;CACJ,GAAG;CACH,GAAG;CACH,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CAEA,mBAAmB;EACjB,cAAc;EACd,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,oBAAoB;EAClB,IAAI;EACJ,GAAG;EACH,cAAc;CAChB;AACF,CAAC"}
1	+ {"version":3,"file":"ButtonSwitch.cjs","names":["styled","ToggleGroupPrimitive"],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\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 '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;;;AAIA,IAAa,wBAAwBA,wBAAAA,OAAOC,6BAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;AACP,CAAC;AAED,IAAa,mBAAmBD,wBAAAA,OAAOC,6BAAqB,MAAM;CAChE,SAAS;CACT,IAAI;CACJ,GAAG;CACH,GAAG;CACH,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CAEA,mBAAmB;EACjB,cAAc;EACd,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,oBAAoB;EAClB,IAAI;EACJ,GAAG;EACH,cAAc;CAChB;AACF,CAAC"}

package/dist/components/ButtonSwitch/ButtonSwitch.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { styled } from "../../stitches.config.js";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-//#region components/ButtonSwitch/ButtonSwitch.tsx
+// components/ButtonSwitch/ButtonSwitch.tsx
 var ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {
 	display: "inline-flex",
 	bc: "$buttonSwitchContainerBg",
@@ -48,7 +48,6 @@ var ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {
 		borderRadius: "$3"
 	}
 });
-//#endregion
 export { ButtonSwitchContainer, ButtonSwitchItem };
 //# sourceMappingURL=ButtonSwitch.js.map

package/dist/components/ButtonSwitch/ButtonSwitch.themes.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region components/ButtonSwitch/ButtonSwitch.themes.ts
+// components/ButtonSwitch/ButtonSwitch.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({
@@ -16,7 +16,6 @@ var Theme;
 		buttonSwitchActiveColor: "$deepBlue2"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/ButtonSwitch/ButtonSwitch.themes.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,~~IAAA;;~~CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;CAEa,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;CAEa,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/ButtonSwitch/ButtonSwitch.themes.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region components/ButtonSwitch/ButtonSwitch.themes.ts
+// components/ButtonSwitch/ButtonSwitch.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({
@@ -16,7 +16,6 @@ var Theme;
 		buttonSwitchActiveColor: "$deepBlue2"
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 //# sourceMappingURL=ButtonSwitch.themes.js.map

package/dist/components/ButtonSwitch/ButtonSwitch.themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,~~IAAA;;~~CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;CAEa,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAU;CAAV,SAAA,QAAA;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;CAEa,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;CAC3B;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs CHANGED Viewed

@@ -7,7 +7,7 @@ let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
 _radix_ui_react_toggle_group = require_runtime.__toESM(_radix_ui_react_toggle_group, 1);
-//#region components/ButtonSwitch/ButtonSwitch.vanilla.tsx
+// components/ButtonSwitch/ButtonSwitch.vanilla.tsx
 var ButtonSwitchContainerVanillaImpl = (0, react.forwardRef)(({ as, className, css, style, children, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -62,7 +62,6 @@ var ButtonSwitchItemVanillaImpl = (0, react.forwardRef)(({ as, className, css, s
 });
 ButtonSwitchItemVanillaImpl.displayName = "ButtonSwitchItemVanilla";
 var ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
-//#endregion
 exports.ButtonSwitchContainerVanilla = ButtonSwitchContainerVanilla;
 exports.ButtonSwitchItemVanilla = ButtonSwitchItemVanilla;

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonSwitch.vanilla.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' \| 'multiple';\n value?: string \| string[];\n defaultValue?: string \| string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' \| 'vertical';\n dir?: 'ltr' \| 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as \|\| 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as \|\| 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,~~GAAA~~,~~MAAA~~,~~WAAA~~,~~EAEF~~,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,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;CAEA,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,~~GAAG~~,~~iCAAA~~,sBAAsB,GAAG,aAAa,KAAK,KAAK;EAC9D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;CACQ,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,~~CAAC~~,6BAAqB,MAAtB;EACO;EACL,WAAW,~~GAAG~~,~~iCAAA~~,sBAAsB,GAAG,aAAa,KAAK,KAAK;EAC9D,OAAO;EACP,GAAK;EAEJ;CACwB,CAAA;AAE/B,CACF;AAEA,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,+BAAA,~~GAAA~~,~~MAAA~~,~~WAAA~~,~~EAEF~~,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,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;CAEA,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,~~GAAG~~,~~iCAAA~~,iBAAiB,GAAG,aAAa,KAAK,KAAK;EACzD,OAAO;EACP,MAAK;EACL,GAAI;EAEH;CACQ,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,~~CAAC~~,6BAAqB,MAAtB;EACO;EACL,WAAW,~~GAAG~~,~~iCAAA~~,iBAAiB,GAAG,aAAa,KAAK,KAAK;EACzD,OAAO;EACP,GAAK;EAEJ;CACwB,CAAA;AAE/B,CACF;AAEA,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}
1	+ {"version":3,"file":"ButtonSwitch.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","buttonSwitchContainer","ToggleGroupPrimitive","buttonSwitchItem"],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\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 { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' \| 'multiple';\n value?: string \| string[];\n defaultValue?: string \| string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' \| 'vertical';\n dir?: 'ltr' \| 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as \|\| 'div') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as \|\| 'button') as any;\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 if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,GAAmCA,MAAAA,WAAAA,EAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,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,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAGC,iCAAAA,sBAAsB,GAAG,aAAa,KAAK,KAAK;EAC9D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;CACQ,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAGD,iCAAAA,sBAAsB,GAAG,aAAa,KAAK,KAAK;EAC9D,OAAO;EACP,GAAK;EAEJ;CACwB,CAAA;AAE/B,CACF;AAEA,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,+BAAA,GAA8BJ,MAAAA,WAAAA,EAEhC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,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,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAGG,iCAAAA,iBAAiB,GAAG,aAAa,KAAK,KAAK;EACzD,OAAO;EACP,MAAK;EACL,GAAI;EAEH;CACQ,CAAA;CAIf,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAGC,iCAAAA,iBAAiB,GAAG,aAAa,KAAK,KAAK;EACzD,OAAO;EACP,GAAK;EAEJ;CACwB,CAAA;AAE/B,CACF;AAEA,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.css.cjs CHANGED Viewed

@@ -1,8 +1,7 @@
 ;/* empty css                                          */
-//#region components/ButtonSwitch/ButtonSwitch.vanilla.css.ts
+// components/ButtonSwitch/ButtonSwitch.vanilla.css.ts
 var buttonSwitchContainer = "_1mwvsf70";
 var buttonSwitchItem = "_1mwvsf71";
-//#endregion
 exports.buttonSwitchContainer = buttonSwitchContainer;
 exports.buttonSwitchItem = buttonSwitchItem;

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.css.js CHANGED Viewed

@@ -1,8 +1,7 @@
 /* empty css                                        */
-//#region components/ButtonSwitch/ButtonSwitch.vanilla.css.ts
+// components/ButtonSwitch/ButtonSwitch.vanilla.css.ts
 var buttonSwitchContainer = "_1mwvsf70";
 var buttonSwitchItem = "_1mwvsf71";
-//#endregion
 export { buttonSwitchContainer, buttonSwitchItem };
 //# sourceMappingURL=ButtonSwitch.vanilla.css.js.map

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-//#region components/ButtonSwitch/ButtonSwitch.vanilla.tsx
+// components/ButtonSwitch/ButtonSwitch.vanilla.tsx
 var ButtonSwitchContainerVanillaImpl = forwardRef(({ as, className, css, style, children, ...props }, ref) => {
 	const Component = as || "div";
 	const { colors } = useVanillaExtractTheme();
@@ -60,7 +60,6 @@ var ButtonSwitchItemVanillaImpl = forwardRef(({ as, className, css, style, child
 });
 ButtonSwitchItemVanillaImpl.displayName = "ButtonSwitchItemVanilla";
 var ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
-//#endregion
 export { ButtonSwitchContainerVanilla, ButtonSwitchItemVanilla };
 //# sourceMappingURL=ButtonSwitch.vanilla.js.map

package/dist/components/Card/Card.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const require_Elevation = require("../Elevation/Elevation.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region components/Card/Card.tsx
+// components/Card/Card.tsx
 var StyledCard = require_stitches_config.styled("div", {
 	appearance: "none",
 	border: "none",
@@ -74,7 +74,6 @@ var Card = react.default.forwardRef(({ interactive, ...props }, forwardedRef) =>
 		...props
 	});
 });
-//#endregion
 exports.Card = Card;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps \| InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,~~aAAa~~,~~wBAAA~~,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;CACjB;CAEA,UAAU;EACR,~~WAAW~~,~~kBAAA~~;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,oBACnB;GACA,OAAO;IACL,iBAAiB;IACjB,WAAW;GACb;EACF;EACA,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;EACnB,EACF,EACF;CACF;CACA,iBAAiB,EACf,WAAW,EACb;AACF,CAAC;AAED,IAAM,~~wBAAwB~~,~~wBAAA~~,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;EACnB;CACF,EACF;CACA,WAAW,EACT,SAAS,qBACX;CACA,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;CACnB,EACF;AACF,CAAC;AAYD,IAAa,~~OAAO~~,~~MAAA~~,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;CACN,CAAA;CAGL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;EACE,KAAK;EACL,GAAK;CACN,CAAA;AAEL,CACF"}
1	+ {"version":3,"file":"Card.cjs","names":["styled","elevationVariants","React"],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps \| InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,aAAaA,wBAAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;CACjB;CAEA,UAAU;EACR,WAAWC,kBAAAA;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,oBACnB;GACA,OAAO;IACL,iBAAiB;IACjB,WAAW;GACb;EACF;EACA,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;EACnB,EACF,EACF;CACF;CACA,iBAAiB,EACf,WAAW,EACb;AACF,CAAC;AAED,IAAM,wBAAwBD,wBAAAA,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;EACnB;CACF,EACF;CACA,WAAW,EACT,SAAS,qBACX;CACA,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;CACnB,EACF;AACF,CAAC;AAYD,IAAa,OAAOE,MAAAA,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;CACN,CAAA;CAGL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;EACE,KAAK;EACL,GAAK;CACN,CAAA;AAEL,CACF"}

package/dist/components/Card/Card.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { styled } from "../../stitches.config.js";
 import { elevationVariants } from "../Elevation/Elevation.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region components/Card/Card.tsx
+// components/Card/Card.tsx
 var StyledCard = styled("div", {
 	appearance: "none",
 	border: "none",
@@ -72,7 +72,6 @@ var Card = React.forwardRef(({ interactive, ...props }, forwardedRef) => {
 		...props
 	});
 });
-//#endregion
 export { Card };
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.theme.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region components/Card/Card.theme.ts
+// components/Card/Card.theme.ts
 var cardLightTheme = {
 	cardBackground: "white",
 	cardHoverBackground: "rgba(0,0,0,.05)",
@@ -15,7 +15,6 @@ var cardDarkTheme = {
 	cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
 	innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
 };
-//#endregion
 exports.cardDarkTheme = cardDarkTheme;
 exports.cardLightTheme = cardLightTheme;

package/dist/components/Card/Card.theme.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region components/Card/Card.theme.ts
+// components/Card/Card.theme.ts
 var cardLightTheme = {
 	cardBackground: "white",
 	cardHoverBackground: "rgba(0,0,0,.05)",
@@ -15,7 +15,6 @@ var cardDarkTheme = {
 	cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
 	innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
 };
-//#endregion
 export { cardDarkTheme, cardLightTheme };
 //# sourceMappingURL=Card.theme.js.map

package/dist/components/Card/Card.themes.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Card/Card.themes.ts
+// components/Card/Card.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -27,7 +27,6 @@ var Theme;
 		innerCardBgColor: (0, tinycolor2.default)("white").setAlpha(.07).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {

package/dist/components/Card/Card.themes.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.themes.cjs","names":[],"sources":["../../../components/Card/Card.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 cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,~~IAAA;;~~CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA2B~~,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,mBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA4B~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;CAEa,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA2B~~,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,mBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA4B~~,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC1E,qBAAqB;EACrB,mBAAA,~~GAAA~~,~~WAAA~~,~~QAAA~~,~~CAA4B~~,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"Card.themes.cjs","names":["tinycolor"],"sources":["../../../components/Card/Card.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 cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;CAEa,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAiBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC1E,qBAAqB;EACrB,mBAAA,GAAkBA,WAAAA,QAAAA,CAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Card/Card.themes.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import tinycolor from "tinycolor2";
-//#region components/Card/Card.themes.ts
+// components/Card/Card.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = (primaryColor) => ({
@@ -25,7 +25,6 @@ var Theme;
 		innerCardBgColor: tinycolor("white").setAlpha(.07).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 export { Theme };
 //# sourceMappingURL=Card.themes.js.map

package/dist/components/Card/Card.themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.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 cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,~~IAAA;;~~CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;CAEa,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC1E,qBAAqB;EACrB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;~~GACD~~,UAAA,QAAA,CAAA,EAAD"}
1	+ {"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.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 cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAU;CAAV,SAAA,QAAA;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;CAEa,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EACzE,sBAAsB;EACtB,kBAAkB,UAAU,aAAa,KAAK,CAAC,CAAC,SAAS,EAAG,CAAC,CAAC,YAAY;EAC1E,qBAAqB;EACrB,kBAAkB,UAAU,OAAO,CAAC,CAAC,SAAS,GAAI,CAAC,CAAC,YAAY;CAClE;AACD,EAAA,CAAA,UAAA,QAAA,CAAA,EAAD"}

package/dist/components/Card/Card.vanilla.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ const require_Card_vanilla_css = require("./Card.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/Card/Card.vanilla.tsx
+// components/Card/Card.vanilla.tsx
 var CardVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
 	const Component = as || (interactive ? "button" : "div");
 	const { colors } = require_themeContext.useVanillaExtractTheme();
@@ -30,7 +30,6 @@ var CardVanillaComponentImpl = (0, react.forwardRef)(({ as, className, css, styl
 });
 CardVanillaComponentImpl.displayName = "CardVanilla";
 var CardVanilla = CardVanillaComponentImpl;
-//#endregion
 exports.CardVanilla = CardVanilla;
 //# sourceMappingURL=Card.vanilla.cjs.map

package/dist/components/Card/Card.vanilla.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.vanilla.cjs","names":[],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,4BAAA,~~GAAA~~,~~MAAA~~,~~WAAA~~,~~EAEF~~,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,~~WAAW~~,~~qBAAA~~,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,~~SAAS~~,~~iBAAA~~,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,~~GAAA~~,~~yBAAA~~,~~iBAAA~~,~~CAAoB~~,IAAI;CAAE;CAGzE,MAAM,eADS,~~cAAc~~,~~yBAAA~~,~~wBAAwB~~,~~yBAAA~~,~~WAAA~~,CAC1B;EAAE;EAAW;EAAS;CAAO,CAAC;CAEzD,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;EACJ,GAAI;CACL,CAAA;AAEL,CACF;AAEA,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}
1	+ {"version":3,"file":"Card.vanilla.cjs","names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","interactiveCardRecipe","cardRecipe"],"sources":["../../../components/Card/Card.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 { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as \|\| (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className \|\| ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,4BAAA,GAA2BA,MAAAA,WAAAA,EAE7B,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAWC,qBAAAA,uBAAuB;CAC1C,MAAM,EAAE,OAAO,WAAW,SAASC,iBAAAA,eAAe,KAAK,MAAM;CAC7D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAGC,yBAAAA,iBAAAA,CAAiB,IAAI;CAAE;CAGzE,MAAM,eADS,cAAcC,yBAAAA,wBAAwBC,yBAAAA,WAAAA,CAC1B;EAAE;EAAW;EAAS;CAAO,CAAC;CAEzD,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,KAAK;EACpD,OAAO;EACP,GAAI;EACJ,GAAI;CACL,CAAA;AAEL,CACF;AAEA,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}

package/dist/components/Card/Card.vanilla.css.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 ;/* empty css                                  */
 let _vanilla_extract_recipes_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-//#region components/Card/Card.vanilla.css.ts
+// components/Card/Card.vanilla.css.ts
 var cardRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
 	defaultClassName: "kc9sar1 kc9sar0",
 	variantClassNames: {
@@ -41,7 +41,6 @@ var interactiveCardRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createR
 	defaultVariants: { elevation: 1 },
 	compoundVariants: []
 });
-//#endregion
 exports.cardRecipe = cardRecipe;
 exports.interactiveCardRecipe = interactiveCardRecipe;

package/dist/components/Card/Card.vanilla.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.vanilla.css.cjs","names":[],"sources":["../../../components/Card/Card.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Elevation variants matching Elevation component\nconst elevationVariants = {\n 0: {\n boxShadow: 'none',\n },\n 1: {\n backgroundColor: tokens.colors['01dp'],\n boxShadow:\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 2: {\n backgroundColor: tokens.colors['02dp'],\n boxShadow:\n '0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 10px 0 hsla(0, 0%, 0%, 0.12), 0 4px 5px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 3: {\n backgroundColor: tokens.colors['03dp'],\n boxShadow:\n '0 3px 5px -1px hsla(0, 0%, 0%, 0.2), 0 1px 18px 0 hsla(0, 0%, 0%, 0.12), 0 6px 10px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 4: {\n backgroundColor: tokens.colors['04dp'],\n boxShadow:\n '0 7px 8px -4px hsla(0, 0%, 0%, 0.2), 0 5px 22px 4px hsla(0, 0%, 0%, 0.12), 0 12px 17px 2px hsla(0, 0%, 0%, 0.14)',\n },\n 5: {\n backgroundColor: tokens.colors['05dp'],\n boxShadow:\n '0 11px 15px -7px hsla(0, 0%, 0%, 0.2), 0 9px 46px 8px hsla(0, 0%, 0%, 0.12), 0 24px 38px 3px hsla(0, 0%, 0%, 0.14)',\n },\n} as const;\n\n// Base card styles\nconst cardBase = style({\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: tokens.space['3'],\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n backgroundColor: tokens.colors.cardBackground,\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: tokens.radii['3'],\n position: 'relative',\n\n '::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: tokens.radii['3'],\n pointerEvents: 'none',\n },\n});\n\nexport const cardRecipe = recipe({\n base: cardBase,\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: tokens.colors.innerCardBgColor,\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n },\n\n defaultVariants: {\n elevation: 1,\n },\n});\n\n// Interactive card styles (for button element)\nconst interactiveCardBase = style([\n cardBase,\n {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n outline: `1px solid ${tokens.colors.cardHoverBorder}`,\n backgroundColor: tokens.colors.cardHoverBackground,\n },\n },\n },\n },\n selectors: {\n '&:focus': {\n outline: `2px solid ${tokens.colors.primary}`,\n },\n '&:active::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n]);\n\nexport const interactiveCardRecipe = recipe({\n base: interactiveCardBase,\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: tokens.colors.innerCardBgColor,\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n },\n\n defaultVariants: {\n elevation: 1,\n },\n});\n"],"mappings":""}
1	+ {"version":3,"file":"Card.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Card/Card.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { breakpoints } from '../../styles/breakpoints.css';\nimport { tokens } from '../../styles/tokens.css';\n\n// Elevation variants matching Elevation component\nconst elevationVariants = {\n 0: {\n boxShadow: 'none',\n },\n 1: {\n backgroundColor: tokens.colors['01dp'],\n boxShadow:\n '0 1px 5px 0 hsla(0, 0%, 0%, 0.2), 0 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 2: {\n backgroundColor: tokens.colors['02dp'],\n boxShadow:\n '0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 10px 0 hsla(0, 0%, 0%, 0.12), 0 4px 5px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 3: {\n backgroundColor: tokens.colors['03dp'],\n boxShadow:\n '0 3px 5px -1px hsla(0, 0%, 0%, 0.2), 0 1px 18px 0 hsla(0, 0%, 0%, 0.12), 0 6px 10px 0 hsla(0, 0%, 0%, 0.14)',\n },\n 4: {\n backgroundColor: tokens.colors['04dp'],\n boxShadow:\n '0 7px 8px -4px hsla(0, 0%, 0%, 0.2), 0 5px 22px 4px hsla(0, 0%, 0%, 0.12), 0 12px 17px 2px hsla(0, 0%, 0%, 0.14)',\n },\n 5: {\n backgroundColor: tokens.colors['05dp'],\n boxShadow:\n '0 11px 15px -7px hsla(0, 0%, 0%, 0.2), 0 9px 46px 8px hsla(0, 0%, 0%, 0.12), 0 24px 38px 3px hsla(0, 0%, 0%, 0.14)',\n },\n} as const;\n\n// Base card styles\nconst cardBase = style({\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: tokens.space['3'],\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n backgroundColor: tokens.colors.cardBackground,\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: tokens.radii['3'],\n position: 'relative',\n\n '::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: tokens.radii['3'],\n pointerEvents: 'none',\n },\n});\n\nexport const cardRecipe = recipe({\n base: cardBase,\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: tokens.colors.innerCardBgColor,\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n },\n\n defaultVariants: {\n elevation: 1,\n },\n});\n\n// Interactive card styles (for button element)\nconst interactiveCardBase = style([\n cardBase,\n {\n '@media': {\n [breakpoints.hover]: {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n outline: `1px solid ${tokens.colors.cardHoverBorder}`,\n backgroundColor: tokens.colors.cardHoverBackground,\n },\n },\n },\n },\n selectors: {\n '&:focus': {\n outline: `2px solid ${tokens.colors.primary}`,\n },\n '&:active::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n]);\n\nexport const interactiveCardRecipe = recipe({\n base: interactiveCardBase,\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: tokens.colors.innerCardBgColor,\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '::before': {\n outline: `1px solid ${tokens.colors.cardActiveBorder}`,\n backgroundColor: tokens.colors.cardActiveBackground,\n },\n },\n },\n },\n\n defaultVariants: {\n elevation: 1,\n },\n});\n"],"mappings":""}