@traefik-labs/faency 12.2.1 → 12.2.3

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

@@ -1,26 +1,22 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const cardLightTheme = {
-  cardBackground: "white",
-  cardHoverBackground: "rgba(0,0,0,.05)",
-  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
-  // Will be overridden with primary color
-  cardActiveBackground: "rgba(0,0,0,.03)",
-  cardActiveBorder: "hsl(211, 100%, 50%)",
-  // Will be overridden with primary color
-  innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
+//#region components/Card/Card.theme.ts
+var cardLightTheme = {
+	cardBackground: "white",
+	cardHoverBackground: "rgba(0,0,0,.05)",
+	cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+	cardActiveBackground: "rgba(0,0,0,.03)",
+	cardActiveBorder: "hsl(211, 100%, 50%)",
+	innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
 };
-const cardDarkTheme = {
-  cardBackground: "hsl(209, 29%, 14%)",
-  // deepBlue2
-  cardHoverBackground: "rgba(255,255,255,.12)",
-  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
-  // Will be overridden with primary color
-  cardActiveBackground: "rgba(255,255,255,.07)",
-  cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
-  // Will be overridden with primary color
-  innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
+var cardDarkTheme = {
+	cardBackground: "hsl(209, 29%, 14%)",
+	cardHoverBackground: "rgba(255,255,255,.12)",
+	cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+	cardActiveBackground: "rgba(255,255,255,.07)",
+	cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
+	innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
 };
+//#endregion
 exports.cardDarkTheme = cardDarkTheme;
 exports.cardLightTheme = cardLightTheme;
-//# sourceMappingURL=Card.theme.cjs.map
+
+//# sourceMappingURL=Card.theme.cjs.map

package/dist/components/Card/Card.theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.theme.cjs","sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB;AAAA,EAC5B,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;;;"}
+{"version":3,"file":"Card.theme.cjs","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB;AAED,IAAa,gBAAgB;CAC3B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB"}

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

@@ -1,26 +1,21 @@
-const cardLightTheme = {
-  cardBackground: "white",
-  cardHoverBackground: "rgba(0,0,0,.05)",
-  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
-  // Will be overridden with primary color
-  cardActiveBackground: "rgba(0,0,0,.03)",
-  cardActiveBorder: "hsl(211, 100%, 50%)",
-  // Will be overridden with primary color
-  innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
+//#region components/Card/Card.theme.ts
+var cardLightTheme = {
+	cardBackground: "white",
+	cardHoverBackground: "rgba(0,0,0,.05)",
+	cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+	cardActiveBackground: "rgba(0,0,0,.03)",
+	cardActiveBorder: "hsl(211, 100%, 50%)",
+	innerCardBgColor: "hsla(0, 0%, 0%, 0.04)"
 };
-const cardDarkTheme = {
-  cardBackground: "hsl(209, 29%, 14%)",
-  // deepBlue2
-  cardHoverBackground: "rgba(255,255,255,.12)",
-  cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
-  // Will be overridden with primary color
-  cardActiveBackground: "rgba(255,255,255,.07)",
-  cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
-  // Will be overridden with primary color
-  innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
+var cardDarkTheme = {
+	cardBackground: "hsl(209, 29%, 14%)",
+	cardHoverBackground: "rgba(255,255,255,.12)",
+	cardHoverBorder: "hsla(211, 100%, 50%, 0.6)",
+	cardActiveBackground: "rgba(255,255,255,.07)",
+	cardActiveBorder: "hsla(211, 100%, 50%, 0.4)",
+	innerCardBgColor: "hsla(0, 0%, 100%, 0.07)"
 };
-export {
-  cardDarkTheme,
-  cardLightTheme
-};
-//# sourceMappingURL=Card.theme.js.map
+//#endregion
+export { cardDarkTheme, cardLightTheme };
+
+//# sourceMappingURL=Card.theme.js.map

package/dist/components/Card/Card.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.theme.js","sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC5B,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA;AAAA,EAChB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA;AAAA,EACjB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA;AAAA,EAClB,kBAAkB;AACpB;"}
+{"version":3,"file":"Card.theme.js","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n  cardBackground: 'white',\n  cardHoverBackground: 'rgba(0,0,0,.05)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(0,0,0,.03)',\n  cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n  cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n  cardHoverBackground: 'rgba(255,255,255,.12)',\n  cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n  cardActiveBackground: 'rgba(255,255,255,.07)',\n  cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n  innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB;AAED,IAAa,gBAAgB;CAC3B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB"}

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

@@ -1,29 +1,38 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tinycolor = require("tinycolor2");
-exports.Theme = void 0;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    cardBackground: "white",
-    cardBorder: "$deepBlue3",
-    cardShadow: "rgba(0,0,0,.1)",
-    cardHoverBackground: "rgba(0,0,0,.05)",
-    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
-    cardActiveBackground: "rgba(0,0,0,.03)",
-    cardActiveBorder: "$primary",
-    cardGhostBackground: "$deepBlue2",
-    innerCardBgColor: tinycolor("black").setAlpha(0.04).toHslString()
-  });
-  Theme2.getDark = (primaryColor) => ({
-    cardBackground: "$deepBlue2",
-    cardBorder: "$deepBlue3",
-    cardShadow: "transparent",
-    cardHoverBackground: "rgba(255,255,255,.12)",
-    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
-    cardActiveBackground: "rgba(255,255,255,.07)",
-    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),
-    cardGhostBackground: "$deepBlue1",
-    innerCardBgColor: tinycolor("white").setAlpha(0.07).toHslString()
-  });
-})(exports.Theme || (exports.Theme = {}));
-//# sourceMappingURL=Card.themes.cjs.map
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let tinycolor2 = require("tinycolor2");
+tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
+//#region components/Card/Card.themes.ts
+var Theme;
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		cardBackground: "white",
+		cardBorder: "$deepBlue3",
+		cardShadow: "rgba(0,0,0,.1)",
+		cardHoverBackground: "rgba(0,0,0,.05)",
+		cardHoverBorder: (0, tinycolor2.default)(primaryColor.value).setAlpha(.6).toHslString(),
+		cardActiveBackground: "rgba(0,0,0,.03)",
+		cardActiveBorder: "$primary",
+		cardGhostBackground: "$deepBlue2",
+		innerCardBgColor: (0, tinycolor2.default)("black").setAlpha(.04).toHslString()
+	});
+	_Theme.getDark = (primaryColor) => ({
+		cardBackground: "$deepBlue2",
+		cardBorder: "$deepBlue3",
+		cardShadow: "transparent",
+		cardHoverBackground: "rgba(255,255,255,.12)",
+		cardHoverBorder: (0, tinycolor2.default)(primaryColor.value).setAlpha(.6).toHslString(),
+		cardActiveBackground: "rgba(255,255,255,.07)",
+		cardActiveBorder: (0, tinycolor2.default)(primaryColor.value).setAlpha(.4).toHslString(),
+		cardGhostBackground: "$deepBlue1",
+		innerCardBgColor: (0, tinycolor2.default)("white").setAlpha(.07).toHslString()
+	});
+})(Theme || (Theme = {}));
+//#endregion
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function() {
+		return Theme;
+	}
+});
+
+//# sourceMappingURL=Card.themes.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.themes.cjs","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"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGrDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC9D,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAClE,GArCeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}
+{"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;;AAeQ,QAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;AAEY,QAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,mBAAA,GAAA,WAAA,SAA4B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}

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

@@ -1,30 +1,31 @@
 import tinycolor from "tinycolor2";
+//#region components/Card/Card.themes.ts
 var Theme;
-((Theme2) => {
-  Theme2.getLight = (primaryColor) => ({
-    cardBackground: "white",
-    cardBorder: "$deepBlue3",
-    cardShadow: "rgba(0,0,0,.1)",
-    cardHoverBackground: "rgba(0,0,0,.05)",
-    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
-    cardActiveBackground: "rgba(0,0,0,.03)",
-    cardActiveBorder: "$primary",
-    cardGhostBackground: "$deepBlue2",
-    innerCardBgColor: tinycolor("black").setAlpha(0.04).toHslString()
-  });
-  Theme2.getDark = (primaryColor) => ({
-    cardBackground: "$deepBlue2",
-    cardBorder: "$deepBlue3",
-    cardShadow: "transparent",
-    cardHoverBackground: "rgba(255,255,255,.12)",
-    cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),
-    cardActiveBackground: "rgba(255,255,255,.07)",
-    cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),
-    cardGhostBackground: "$deepBlue1",
-    innerCardBgColor: tinycolor("white").setAlpha(0.07).toHslString()
-  });
+(function(_Theme) {
+	_Theme.getLight = (primaryColor) => ({
+		cardBackground: "white",
+		cardBorder: "$deepBlue3",
+		cardShadow: "rgba(0,0,0,.1)",
+		cardHoverBackground: "rgba(0,0,0,.05)",
+		cardHoverBorder: tinycolor(primaryColor.value).setAlpha(.6).toHslString(),
+		cardActiveBackground: "rgba(0,0,0,.03)",
+		cardActiveBorder: "$primary",
+		cardGhostBackground: "$deepBlue2",
+		innerCardBgColor: tinycolor("black").setAlpha(.04).toHslString()
+	});
+	_Theme.getDark = (primaryColor) => ({
+		cardBackground: "$deepBlue2",
+		cardBorder: "$deepBlue3",
+		cardShadow: "transparent",
+		cardHoverBackground: "rgba(255,255,255,.12)",
+		cardHoverBorder: tinycolor(primaryColor.value).setAlpha(.6).toHslString(),
+		cardActiveBackground: "rgba(255,255,255,.07)",
+		cardActiveBorder: tinycolor(primaryColor.value).setAlpha(.4).toHslString(),
+		cardGhostBackground: "$deepBlue1",
+		innerCardBgColor: tinycolor("white").setAlpha(.07).toHslString()
+	});
 })(Theme || (Theme = {}));
-export {
-  Theme
-};
-//# sourceMappingURL=Card.themes.js.map
+//#endregion
+export { Theme };
+
+//# sourceMappingURL=Card.themes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.themes.js","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"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAeQA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAGrDA,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,qBAAqB;AAAA,IACrB,iBAAiB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC7D,sBAAsB;AAAA,IACtB,kBAAkB,UAAU,aAAa,KAAK,EAAE,SAAS,GAAG,EAAE,YAAA;AAAA,IAC9D,qBAAqB;AAAA,IACrB,kBAAkB,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,EAAY;AAClE,GArCe,UAAA,QAAA,CAAA,EAAA;"}
+{"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;;AAeQ,QAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;AAEY,QAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}

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

@@ -1,43 +1,37 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
-const React = require("react");
-const cssProps = require("../../styles/cssProps.cjs");
-const themeContext = require("../../styles/themeContext.cjs");
-const Card_vanilla_css = require("./Card.vanilla.css.cjs");
-const CardVanillaComponentImpl = React.forwardRef(
-  ({
-    as,
-    className,
-    css,
-    style,
-    elevation,
-    variant,
-    active,
-    interactive,
-    ...props
-  }, ref) => {
-    const Component = as || (interactive ? "button" : "div");
-    const { colors } = themeContext.useVanillaExtractTheme();
-    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
-    const mergedStyles = { ...cssStyles, ...style, ...dynamic.assignInlineVars(vars) };
-    const recipe = interactive ? Card_vanilla_css.interactiveCardRecipe : Card_vanilla_css.cardRecipe;
-    const recipeClass = recipe({ elevation, variant, active });
-    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: `${recipeClass} ${className || ""}`.trim(),
-        style: mergedStyles,
-        ...additionalProps,
-        ...props
-      }
-    );
-  }
-);
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_cssProps = require("../../styles/cssProps.cjs");
+const require_themeContext = require("../../styles/themeContext.cjs");
+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
+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();
+	const { style: cssStyles, vars } = require_cssProps.processCSSProp(css, colors);
+	const mergedStyles = {
+		...cssStyles,
+		...style,
+		...(0, _vanilla_extract_dynamic.assignInlineVars)(vars)
+	};
+	const recipeClass = (interactive ? require_Card_vanilla_css.interactiveCardRecipe : require_Card_vanilla_css.cardRecipe)({
+		elevation,
+		variant,
+		active
+	});
+	const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		className: `${recipeClass} ${className || ""}`.trim(),
+		style: mergedStyles,
+		...additionalProps,
+		...props
+	});
+});
 CardVanillaComponentImpl.displayName = "CardVanilla";
-const CardVanilla = CardVanillaComponentImpl;
+var CardVanilla = CardVanillaComponentImpl;
+//#endregion
 exports.CardVanilla = CardVanilla;
-//# sourceMappingURL=Card.vanilla.cjs.map
+
+//# sourceMappingURL=Card.vanilla.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.cjs","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"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","interactiveCardRecipe","cardRecipe","jsx"],"mappings":";;;;;;;;AA6BA,MAAM,2BAA2BA,MAAAA;AAAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,OAAO,cAAc,WAAW;AAClD,UAAM,EAAE,OAAA,IAAWC,oCAAA;AACnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAC7D,UAAM,eAAe,EAAE,GAAG,WAAW,GAAG,OAAO,GAAGC,QAAAA,iBAAiB,IAAI,EAAA;AAEvE,UAAM,SAAS,cAAcC,iBAAAA,wBAAwBC,iBAAAA;AACrD,UAAM,cAAc,OAAO,EAAE,WAAW,SAAS,QAAQ;AAEzD,UAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAA,IAAM,CAAA;AAE/D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,yBAAyB,cAAc;AAEhC,MAAM,cAAc;;"}
+{"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,aAEF,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,yBAAA,wBAAwB,yBAAA,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;AAEjE,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,GAAI;EACJ,CAAA;EAGP;AAED,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}

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

@@ -1,10 +1,49 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                            */
+require("../../_virtual/_rolldown/runtime.cjs");
 ;/* empty css                                  */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var cardRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
-var interactiveCardRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+let _vanilla_extract_recipes_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+//#region components/Card/Card.vanilla.css.ts
+var cardRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
+	defaultClassName: "kc9sar1 kc9sar0",
+	variantClassNames: {
+		elevation: {
+			"0": "kc9sar2",
+			"1": "kc9sar3",
+			"2": "kc9sar4",
+			"3": "kc9sar5",
+			"4": "kc9sar6",
+			"5": "kc9sar7"
+		},
+		variant: {
+			inner: "kc9sar8",
+			ghost: "kc9sar9"
+		},
+		active: { true: "kc9sara" }
+	},
+	defaultVariants: { elevation: 1 },
+	compoundVariants: []
+});
+var interactiveCardRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
+	defaultClassName: "kc9sarc kc9sarb kc9sar0",
+	variantClassNames: {
+		elevation: {
+			"0": "kc9sard",
+			"1": "kc9sare",
+			"2": "kc9sarf",
+			"3": "kc9sarg",
+			"4": "kc9sarh",
+			"5": "kc9sari"
+		},
+		variant: {
+			inner: "kc9sarj",
+			ghost: "kc9sark"
+		},
+		active: { true: "kc9sarl" }
+	},
+	defaultVariants: { elevation: 1 },
+	compoundVariants: []
+});
+//#endregion
 exports.cardRecipe = cardRecipe;
 exports.interactiveCardRecipe = interactiveCardRecipe;
-//# sourceMappingURL=Card.vanilla.css.cjs.map
+
+//# sourceMappingURL=Card.vanilla.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"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":""}

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

@@ -1,10 +1,47 @@
-/* empty css                                          */
 /* empty css                                */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var cardRecipe = createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
-var interactiveCardRecipe = createRuntimeFn({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
-export {
-  cardRecipe,
-  interactiveCardRecipe
-};
-//# sourceMappingURL=Card.vanilla.css.js.map
+//#region components/Card/Card.vanilla.css.ts
+var cardRecipe = createRuntimeFn({
+	defaultClassName: "kc9sar1 kc9sar0",
+	variantClassNames: {
+		elevation: {
+			"0": "kc9sar2",
+			"1": "kc9sar3",
+			"2": "kc9sar4",
+			"3": "kc9sar5",
+			"4": "kc9sar6",
+			"5": "kc9sar7"
+		},
+		variant: {
+			inner: "kc9sar8",
+			ghost: "kc9sar9"
+		},
+		active: { true: "kc9sara" }
+	},
+	defaultVariants: { elevation: 1 },
+	compoundVariants: []
+});
+var interactiveCardRecipe = createRuntimeFn({
+	defaultClassName: "kc9sarc kc9sarb kc9sar0",
+	variantClassNames: {
+		elevation: {
+			"0": "kc9sard",
+			"1": "kc9sare",
+			"2": "kc9sarf",
+			"3": "kc9sarg",
+			"4": "kc9sarh",
+			"5": "kc9sari"
+		},
+		variant: {
+			inner: "kc9sarj",
+			ghost: "kc9sark"
+		},
+		active: { true: "kc9sarl" }
+	},
+	defaultVariants: { elevation: 1 },
+	compoundVariants: []
+});
+//#endregion
+export { cardRecipe, interactiveCardRecipe };
+
+//# sourceMappingURL=Card.vanilla.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"Card.vanilla.css.js","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":""}

package/dist/components/Card/Card.vanilla.js

@@ -1,43 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
-import { interactiveCardRecipe, cardRecipe } from "./Card.vanilla.css.js";
-const CardVanillaComponentImpl = forwardRef(
-  ({
-    as,
-    className,
-    css,
-    style,
-    elevation,
-    variant,
-    active,
-    interactive,
-    ...props
-  }, ref) => {
-    const Component = as || (interactive ? "button" : "div");
-    const { colors } = useVanillaExtractTheme();
-    const { style: cssStyles, vars } = processCSSProp(css, colors);
-    const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };
-    const recipe = interactive ? interactiveCardRecipe : cardRecipe;
-    const recipeClass = recipe({ elevation, variant, active });
-    const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: `${recipeClass} ${className || ""}`.trim(),
-        style: mergedStyles,
-        ...additionalProps,
-        ...props
-      }
-    );
-  }
-);
+import { cardRecipe, interactiveCardRecipe } from "./Card.vanilla.css.js";
+import { forwardRef } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx } from "react/jsx-runtime";
+//#region components/Card/Card.vanilla.tsx
+var CardVanillaComponentImpl = forwardRef(({ as, className, css, style, elevation, variant, active, interactive, ...props }, ref) => {
+	const Component = as || (interactive ? "button" : "div");
+	const { colors } = useVanillaExtractTheme();
+	const { style: cssStyles, vars } = processCSSProp(css, colors);
+	const mergedStyles = {
+		...cssStyles,
+		...style,
+		...assignInlineVars(vars)
+	};
+	const recipeClass = (interactive ? interactiveCardRecipe : cardRecipe)({
+		elevation,
+		variant,
+		active
+	});
+	const additionalProps = interactive && !as ? { tabIndex: 0 } : {};
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: `${recipeClass} ${className || ""}`.trim(),
+		style: mergedStyles,
+		...additionalProps,
+		...props
+	});
+});
 CardVanillaComponentImpl.displayName = "CardVanilla";
-const CardVanilla = CardVanillaComponentImpl;
-export {
-  CardVanilla
-};
-//# sourceMappingURL=Card.vanilla.js.map
+var CardVanilla = CardVanillaComponentImpl;
+//#endregion
+export { CardVanilla };
+
+//# sourceMappingURL=Card.vanilla.js.map