npm - @plumile/ui - Versions diffs - 0.1.130 → 0.1.132 - Mend

@plumile/ui 0.1.130 → 0.1.132

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 (126) hide show

package/README.md CHANGED Viewed

@@ -48,6 +48,7 @@ flat mental model.
 ### Theme and styling
 - `ThemeProvider`
+- `BackofficeThemeProvider`
 - `useTheme`
 - theme contracts, tokens, and accessibility helpers
 - `sprinkles`, `stateSprinkles`, and shared style recipes such as `focusRing`,
@@ -107,6 +108,11 @@ export function ExampleScreen(): JSX.Element {
 }
 ```
+`ThemeProvider` stores the public shell preference in `plumile-theme-mode`.
+`BackofficeThemeProvider` stores the backoffice preference separately in
+`plumile-backoffice-theme-mode`, so a backoffice can resolve light, dark, or
+system mode independently inside a public page.
 ## Package Layout
 - `theme/*`

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* empty css                                          */
 /* empty css                                   */
 /* empty css                                        */
-/* empty css                                       */
+/* empty css                                            */
 /* empty css                                  */
 /* empty css                            */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";

package/lib/esm/admin/organisms/admin_topbar/adminTopbar.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* empty css                                          */
 /* empty css                                   */
 /* empty css                                        */
-/* empty css                                       */
+/* empty css                                            */
 /* empty css                                  */
 /* empty css                           */
 //#region src/admin/organisms/admin_topbar/adminTopbar.css.ts

package/lib/esm/admin/theme/BackofficeThemeProvider.js ADDED Viewed

@@ -0,0 +1,43 @@
+import "../../theme/accessibility.css.js";
+import "../../theme/global.css.js";
+import { backofficeDarkThemeClass as e, backofficeLightThemeClass as t } from "../../theme/theme.css.js";
+import { cx as n } from "../../theme/tools.js";
+import { adminDensityCompactClass as r } from "./adminDensity.css.js";
+import { useEffect as i, useMemo as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/admin/theme/BackofficeThemeProvider.tsx
+var c = "plumile-backoffice-theme-mode", l = () => typeof window > "u" || typeof window.matchMedia != "function" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", u = (e, t) => e === "system" ? t : e, d = (e) => e === "system" || e === "light" || e === "dark", f = (e) => {
+	if (typeof window > "u") return e;
+	let t = window.localStorage.getItem(c);
+	return d(t) ? t : e;
+}, p = ({ children: d, defaultMode: p = "system" }) => {
+	let [m] = o(() => f(p)), [h, g] = o(() => l()), _ = u(m, h);
+	return i(() => {
+		if (m === "system" && typeof window < "u" && typeof window.matchMedia == "function") {
+			let e = window.matchMedia("(prefers-color-scheme: dark)"), t = (t) => {
+				if (t?.matches ?? e.matches) {
+					g("dark");
+					return;
+				}
+				g("light");
+			};
+			return t(e), e.addEventListener("change", t), () => {
+				e.removeEventListener("change", t);
+			};
+		}
+	}, [m]), i(() => {
+		typeof window > "u" || window.localStorage.setItem(c, m);
+	}, [m]), /* @__PURE__ */ s("div", {
+		className: n(a(() => _ === "dark" ? e : t, [_]), r),
+		children: d
+	});
+}, m = {
+	getSystemTheme: l,
+	isThemeMode: d,
+	resolveTheme: u,
+	readStoredMode: f
+};
+//#endregion
+export { c as BACKOFFICE_THEME_MODE_KEY, p as BackofficeThemeProvider, p as default, m as __backofficeThemeTest };
+//# sourceMappingURL=BackofficeThemeProvider.js.map

package/lib/esm/admin/theme/BackofficeThemeProvider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BackofficeThemeProvider.js","names":[],"sources":["../../../../src/admin/theme/BackofficeThemeProvider.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useMemo, useState } from 'react';\n\nimport '../../theme/accessibility.css.js';\nimport '../../theme/global.css.js';\n\nimport { adminDensityCompactClass } from './adminDensity.css.js';\nimport {\n backofficeDarkThemeClass,\n backofficeLightThemeClass,\n} from '../../theme/theme.css.js';\nimport { cx } from '../../theme/tools.js';\nimport type { ResolvedTheme, ThemeMode } from '../../theme/ThemeProvider.js';\n\nexport type BackofficeThemeProviderProps = {\n children: ReactNode;\n defaultMode?: ThemeMode;\n};\n\nexport const BACKOFFICE_THEME_MODE_KEY = 'plumile-backoffice-theme-mode';\n\nconst getSystemTheme = (): ResolvedTheme => {\n if (\n typeof window === 'undefined' ||\n typeof window.matchMedia !== 'function'\n ) {\n return 'light';\n }\n\n if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n\n return 'light';\n};\n\nconst resolveTheme = (\n mode: ThemeMode,\n systemTheme: ResolvedTheme,\n): ResolvedTheme => {\n if (mode === 'system') {\n return systemTheme;\n }\n\n return mode;\n};\n\nconst isThemeMode = (value: string | null): value is ThemeMode => {\n return value === 'system' || value === 'light' || value === 'dark';\n};\n\nconst readStoredMode = (defaultMode: ThemeMode): ThemeMode => {\n if (typeof window === 'undefined') {\n return defaultMode;\n }\n\n const storage = window.localStorage;\n const savedMode = storage.getItem(BACKOFFICE_THEME_MODE_KEY);\n\n if (isThemeMode(savedMode)) {\n return savedMode;\n }\n\n return defaultMode;\n};\n\nexport const BackofficeThemeProvider = ({\n children,\n defaultMode = 'system',\n}: BackofficeThemeProviderProps): JSX.Element => {\n const [mode] = useState<ThemeMode>(() => {\n return readStoredMode(defaultMode);\n });\n const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => {\n return getSystemTheme();\n });\n const resolvedTheme = resolveTheme(mode, systemTheme);\n\n useEffect(() => {\n if (\n mode === 'system' &&\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function'\n ) {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n const updateSystemTheme = (\n event?: MediaQueryList | MediaQueryListEvent,\n ): void => {\n const matchesDarkTheme = event?.matches ?? mediaQuery.matches;\n\n if (matchesDarkTheme) {\n setSystemTheme('dark');\n return;\n }\n\n setSystemTheme('light');\n };\n\n updateSystemTheme(mediaQuery);\n mediaQuery.addEventListener('change', updateSystemTheme);\n\n return () => {\n mediaQuery.removeEventListener('change', updateSystemTheme);\n };\n }\n\n return undefined;\n }, [mode]);\n\n useEffect(() => {\n if (typeof window === 'undefined') {\n return undefined;\n }\n\n const storage = window.localStorage;\n storage.setItem(BACKOFFICE_THEME_MODE_KEY, mode);\n return undefined;\n }, [mode]);\n\n const themeClass = useMemo(() => {\n if (resolvedTheme === 'dark') {\n return backofficeDarkThemeClass;\n }\n\n return backofficeLightThemeClass;\n }, [resolvedTheme]);\n\n return (\n <div className={cx(themeClass, adminDensityCompactClass)}>{children}</div>\n );\n};\n\nexport const __backofficeThemeTest = {\n getSystemTheme,\n isThemeMode,\n resolveTheme,\n readStoredMode,\n} as const;\n\nexport default BackofficeThemeProvider;\n"],"mappings":";;;;;;;;AAkBA,IAAa,IAA4B,iCAEnC,UAEF,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,aAEtB,UAGL,OAAO,WAAW,+BAA+B,CAAC,UAC7C,SAGF,SAGH,KACJ,GACA,MAEI,MAAS,WACJ,IAGF,GAGH,KAAe,MACZ,MAAU,YAAY,MAAU,WAAW,MAAU,QAGxD,KAAkB,MAAsC;CAC5D,IAAI,OAAO,SAAW,KACpB,OAAO;CAIT,IAAM,IADU,OAAO,aACG,QAAQ,EAA0B;CAM5D,OAJI,EAAY,EAAU,GACjB,IAGF;GAGI,KAA2B,EACtC,aACA,iBAAc,eACiC;CAC/C,IAAM,CAAC,KAAQ,QACN,EAAe,EAAY,CAClC,EACI,CAAC,GAAa,KAAkB,QAC7B,GAAgB,CACvB,EACI,IAAgB,EAAa,GAAM,EAAY;CAoDrD,OAlDA,QAAgB;EACd,IACE,MAAS,YACT,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,YAC7B;GACA,IAAM,IAAa,OAAO,WAAW,+BAA+B,EAE9D,KACJ,MACS;IAGT,IAFyB,GAAO,WAAW,EAAW,SAEhC;KACpB,EAAe,OAAO;KACtB;;IAGF,EAAe,QAAQ;;GAMzB,OAHA,EAAkB,EAAW,EAC7B,EAAW,iBAAiB,UAAU,EAAkB,QAE3C;IACX,EAAW,oBAAoB,UAAU,EAAkB;;;IAK9D,CAAC,EAAK,CAAC,EAEV,QAAgB;EACV,OAAO,SAAW,OAKtB,OADuB,aACf,QAAQ,GAA2B,EAAK;IAE/C,CAAC,EAAK,CAAC,EAWR,kBAAC,OAAD;EAAK,WAAW,EATC,QACb,MAAkB,SACb,IAGF,GACN,CAAC,EAAc,CAGG,EAAY,EAAyB;EAAG;EAAe,CAAA;GAIjE,IAAwB;CACnC;CACA;CACA;CACA;CACD"}

package/lib/esm/admin/theme/adminDensity.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* empty css                                       */
 /* empty css                                */
 /* empty css                                     */
-/* empty css                                    */
+/* empty css                                         */
 /* empty css                               */
 /* empty css                            */
 //#region src/admin/theme/adminDensity.css.ts

package/lib/esm/admin/theme/adminSurface.css.js CHANGED Viewed

@@ -2,10 +2,11 @@
 /* empty css                                       */
 /* empty css                                */
 /* empty css                                     */
-/* empty css                                    */
+/* empty css                                         */
 /* empty css                               */
 /* empty css                            */
 /* empty css                            */
+/* empty css                                       */
 /* empty css                                      */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/theme/adminSurface.css.ts

package/lib/esm/atomic/atoms/badge/badge.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.css.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/badge.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseSprinkles = sprinkles({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n paddingY: 2,\n paddingX: 3,\n borderRadius: 'md',\n fontSize: 'xs',\n fontWeight: 'medium',\n gap: 1,\n});\n\nconst baseTypography = sprinkles({\n lineHeight: 1,\n});\n\nconst shimmerAnimation = keyframes({\n '0%': {\n transform: 'translateX(-120%)',\n },\n '50%': {\n transform: 'translateX(0%)',\n },\n '100%': {\n transform: 'translateX(120%)',\n },\n});\n\nconst loadingBase = style({\n position: 'relative',\n overflow: 'hidden',\n selectors: {\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n background: `linear-gradient(\n 100deg,\n ${vars.colors.transparent} 0%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 25%,\n color-mix(in srgb, ${vars.colors.white} 90%, transparent) 50%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 75%,\n ${vars.colors.transparent} 100%\n )`,\n transform: 'translateX(-120%)',\n animation: `${shimmerAnimation} 1.1s ease-in-out infinite`,\n opacity: 0.9,\n pointerEvents: 'none',\n willChange: 'transform',\n },\n },\n});\n\nexport const badge = recipe({\n base: [baseSprinkles, baseTypography],\n variants: {\n tone: {\n neutral: sprinkles({\n backgroundColor: 'brandLightGray',\n color: 'brandDarkGray',\n }),\n info: sprinkles({\n backgroundColor: 'primaryLight',\n color: 'brandPrimaryRed',\n }),\n success: sprinkles({ backgroundColor: 'green-100', color: 'green-700' }),\n warning: sprinkles({ backgroundColor: 'amber-100', color: 'amber-700' }),\n danger: sprinkles({ backgroundColor: 'red-100', color: 'red-700' }),\n accent: sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n }),\n },\n loading: {\n on: loadingBase,\n off: '',\n },\n },\n defaultVariants: {\n tone: 'neutral',\n loading: 'off',\n },\n compoundVariants: [],\n});\n\nexport type BadgeVariants = RecipeVariants<typeof badge>;\n"],"mappings":""}
1	+ {"version":3,"file":"badge.css.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/badge.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst baseSprinkles = sprinkles({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n paddingY: 2,\n paddingX: 3,\n borderRadius: 'md',\n fontSize: 'xs',\n fontWeight: 'medium',\n gap: 1,\n});\n\nconst baseTypography = sprinkles({\n lineHeight: 1,\n});\n\nconst shimmerAnimation = keyframes({\n '0%': {\n transform: 'translateX(-120%)',\n },\n '50%': {\n transform: 'translateX(0%)',\n },\n '100%': {\n transform: 'translateX(120%)',\n },\n});\n\nconst loadingBase = style({\n position: 'relative',\n overflow: 'hidden',\n selectors: {\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n background: `linear-gradient(\n 100deg,\n ${vars.colors.transparent} 0%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 25%,\n color-mix(in srgb, ${vars.colors.white} 90%, transparent) 50%,\n color-mix(in srgb, ${vars.colors.white} 20%, transparent) 75%,\n ${vars.colors.transparent} 100%\n )`,\n transform: 'translateX(-120%)',\n animation: `${shimmerAnimation} 1.1s ease-in-out infinite`,\n opacity: 0.9,\n pointerEvents: 'none',\n willChange: 'transform',\n },\n },\n});\n\nexport const badge = recipe({\n base: [baseSprinkles, baseTypography],\n variants: {\n tone: {\n neutral: sprinkles({\n backgroundColor: 'brandLightGray',\n color: 'brandDarkGray',\n }),\n info: sprinkles({\n backgroundColor: 'primaryLight',\n color: 'brandPrimaryRed',\n }),\n success: sprinkles({ backgroundColor: 'green-100', color: 'green-700' }),\n warning: sprinkles({ backgroundColor: 'amber-100', color: 'amber-700' }),\n danger: sprinkles({ backgroundColor: 'red-100', color: 'red-700' }),\n accent: sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n }),\n },\n loading: {\n on: loadingBase,\n off: '',\n },\n },\n defaultVariants: {\n tone: 'neutral',\n loading: 'off',\n },\n compoundVariants: [],\n});\n\nexport type BadgeVariants = RecipeVariants<typeof badge>;\n"],"mappings":""}

package/lib/esm/atomic/atoms/button/button.css.js CHANGED Viewed

@@ -10,7 +10,7 @@ var t = e({
 			secondary: "qmnfou11 qmnfou6 qmnfou4 txvbqb1933 txvbqb19bj txvbqb1w1 txvbqb2et txvbqb11p qmnfou5 txvbqb1adm",
 			text: "qmnfou12 qmnfou7 txvbqb1933 txvbqb19bj",
 			success: "qmnfou13 qmnfoua qmnfou8 txvbqb197f txvbqb19c9 qmnfou9 txvbqb1c6i",
-			danger: "qmnfou14 qmnfoud qmnfoub txvbqb1975 txvbqb19c9 qmnfouc txvbqb1c6i",
+			danger: "qmnfou14 qmnfoud qmnfoub txvbqb1975 txvbqb198p qmnfouc txvbqb1c6i",
 			brand: "qmnfou15 qmnfoug qmnfoue txvbqb19dj txvbqbfd0 txvbqb190t txvbqb1uy txvbqb2et txvbqbik txvbqbckm qmnfouf txvbqb1c6q qbwcue6 txvbqb1d2y txvbqb1d37",
 			brandGhost: "qmnfou16 qmnfouj qmnfouh txvbqb197t txvbqb19dj txvbqb1d9 txvbqb1w1 txvbqb2et txvbqb7h txvbqb75 txvbqb7t qmnfoui txvbqb1c6q",
 			tab: "qmnfou17 qmnfouq qmnfoun txvbqbyov txvbqbzmg txvbqb10jb txvbqbvve txvbqb1933 txvbqb19cb txvbqbv txvbqb7h txvbqb76 txvbqb7t txvbqb1g5 txvbqb2et txvbqb8af txvbqb4hx txvbqb9j txvbqbfcn txvbqb6 qmnfouo txvbqb1bsa qbwcue0 txvbqb1cb0 txvbqb1cws qmnfoup txvbqb1c08 txvbqb1c9c",
@@ -53,7 +53,7 @@ var t = e({
 			secondary: "qmnfou1j qmnfou6 qmnfou4 txvbqb1933 txvbqb19bj txvbqb1w1 txvbqb2et txvbqb11p qmnfou5 txvbqb1adm",
 			text: "qmnfou1k qmnfou7 txvbqb1933 txvbqb19bj",
 			success: "qmnfou1l qmnfoua qmnfou8 txvbqb197f txvbqb19c9 qmnfou9 txvbqb1c6i",
-			danger: "qmnfou1m qmnfoud qmnfoub txvbqb1975 txvbqb19c9 qmnfouc txvbqb1c6i",
+			danger: "qmnfou1m qmnfoud qmnfoub txvbqb1975 txvbqb198p qmnfouc txvbqb1c6i",
 			brand: "qmnfou1n qmnfoug qmnfoue txvbqb19dj txvbqbfd0 txvbqb190t txvbqb1uy txvbqb2et txvbqbik txvbqbckm qmnfouf txvbqb1c6q qbwcue6 txvbqb1d2y txvbqb1d37",
 			brandGhost: "qmnfou1o qmnfouj qmnfouh txvbqb197t txvbqb19dj txvbqb1d9 txvbqb1w1 txvbqb2et txvbqb7h txvbqb75 txvbqb7t qmnfoui txvbqb1c6q",
 			tab: "qmnfou1p qmnfou1e txvbqb19bj txvbqb1g5 txvbqb2et txvbqb8af txvbqb512 txvbqbfd0",

package/lib/esm/atomic/atoms/button/button.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.css.js","names":[],"sources":["../../../../../src/atomic/atoms/button/button.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n disabledControl,\n focusRing,\n liftOnHover,\n pressInteraction,\n} from '../../../theme/styleRecipes.css.js';\n\nconst baseLayout = sprinkles({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontWeight: 'medium',\n cursor: 'pointer',\n});\n\nconst baseInteraction = style([\n sprinkles({\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n borderWidth: 0,\n borderStyle: 'none',\n }),\n pressInteraction,\n focusRing,\n disabledControl,\n]);\n\nconst primaryVariant = sprinkles({\n backgroundColor: 'brandPrimaryRed',\n color: 'brandWhite',\n fontWeight: 'semibold',\n});\n\nconst secondaryVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'primary',\n }),\n stateSprinkles({\n backgroundColor: { hoverNotDisabled: 'primaryLight' },\n }),\n]);\n\nconst textVariant = sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n});\n\nconst successVariant = style([\n sprinkles({\n backgroundColor: 'success',\n color: 'text',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness90' } }),\n]);\n\nconst dangerVariant = style([\n sprinkles({\n backgroundColor: 'error',\n color: '~~text~~',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness90' } }),\n]);\n\nconst brandVariant = style([\n sprinkles({\n color: 'brandWhite',\n fontWeight: 'semibold',\n backgroundImage: 'brandDiagonal125',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'transparent',\n boxShadow: 'xl',\n }),\n stateSprinkles({\n filter: { hoverNotDisabled: 'brightness97' },\n }),\n liftOnHover,\n]);\n\nconst brandGhostVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderColor: 'brandSecondaryOrange',\n borderWidth: 'px',\n borderStyle: 'solid',\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness97' } }),\n]);\n\nconst iconVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderRadius: 'full',\n padding: 0,\n }),\n stateSprinkles({\n backgroundColor: { hoverNotDisabled: 'primaryLight' },\n }),\n focusRing,\n]);\n\nconst tabVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'textSecondary',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'transparent',\n paddingY: 2,\n paddingX: 4,\n fontSize: 'sm',\n fontWeight: 'medium',\n appearance: 'none',\n }),\n stateSprinkles({\n color: { hoverNotDisabled: 'text' },\n }),\n focusRing,\n stateSprinkles({\n cursor: { disabled: 'default' },\n opacity: { disabled: 60 },\n }),\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 4,\n fontSize: 'xs',\n borderRadius: 'xl',\n height: 8,\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 6,\n fontSize: 'sm',\n borderRadius: 'xl',\n height: 10,\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 8,\n fontSize: 'base',\n borderRadius: 'lg',\n height: 12,\n});\n\nconst iconSizeSmall = sprinkles({\n width: 8,\n height: 8,\n minWidth: 8,\n minHeight: 8,\n});\n\nconst iconSizeMedium = sprinkles({\n width: 10,\n height: 10,\n minWidth: 10,\n minHeight: 10,\n});\n\nconst iconSizeLarge = sprinkles({\n width: 12,\n height: 12,\n minWidth: 12,\n minHeight: 12,\n});\n\nexport const button = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabVariant,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport const tabButtonActive = sprinkles({\n color: 'primary',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'primary',\n fontWeight: 'semibold',\n});\n\nexport const activeButton = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabButtonActive,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nconst inlineFlexCenter = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n});\n\nconst spin = keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n});\n\nexport const content = inlineFlexCenter;\n\nexport const loadingIndicator = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n gap: 2,\n});\n\nexport const spinnerIcon = style([\n sprinkles({\n width: 5,\n height: 5,\n flexShrink: 0,\n }),\n {\n animation: `${spin} 1s linear infinite`,\n },\n]);\n\nexport const iconLeft = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginRight: 2,\n});\n\nexport const iconRight = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginLeft: 2,\n});\n\nexport const iconOnlyContent = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n justifyContent: 'center',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"button.css.js","names":[],"sources":["../../../../../src/atomic/atoms/button/button.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n disabledControl,\n focusRing,\n liftOnHover,\n pressInteraction,\n} from '../../../theme/styleRecipes.css.js';\n\nconst baseLayout = sprinkles({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontWeight: 'medium',\n cursor: 'pointer',\n});\n\nconst baseInteraction = style([\n sprinkles({\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n borderWidth: 0,\n borderStyle: 'none',\n }),\n pressInteraction,\n focusRing,\n disabledControl,\n]);\n\nconst primaryVariant = sprinkles({\n backgroundColor: 'brandPrimaryRed',\n color: 'brandWhite',\n fontWeight: 'semibold',\n});\n\nconst secondaryVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'primary',\n }),\n stateSprinkles({\n backgroundColor: { hoverNotDisabled: 'primaryLight' },\n }),\n]);\n\nconst textVariant = sprinkles({\n backgroundColor: 'transparent',\n color: 'primary',\n});\n\nconst successVariant = style([\n sprinkles({\n backgroundColor: 'success',\n color: 'text',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness90' } }),\n]);\n\nconst dangerVariant = style([\n sprinkles({\n backgroundColor: 'error',\n color: 'white',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness90' } }),\n]);\n\nconst brandVariant = style([\n sprinkles({\n color: 'brandWhite',\n fontWeight: 'semibold',\n backgroundImage: 'brandDiagonal125',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'transparent',\n boxShadow: 'xl',\n }),\n stateSprinkles({\n filter: { hoverNotDisabled: 'brightness97' },\n }),\n liftOnHover,\n]);\n\nconst brandGhostVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderColor: 'brandSecondaryOrange',\n borderWidth: 'px',\n borderStyle: 'solid',\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n }),\n stateSprinkles({ filter: { hoverNotDisabled: 'brightness97' } }),\n]);\n\nconst iconVariant = style([\n sprinkles({\n backgroundColor: 'brandSecondaryOrange',\n color: 'brandWhite',\n borderRadius: 'full',\n padding: 0,\n }),\n stateSprinkles({\n backgroundColor: { hoverNotDisabled: 'primaryLight' },\n }),\n focusRing,\n]);\n\nconst tabVariant = style([\n sprinkles({\n backgroundColor: 'transparent',\n color: 'textSecondary',\n cursor: 'pointer',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'transparent',\n paddingY: 2,\n paddingX: 4,\n fontSize: 'sm',\n fontWeight: 'medium',\n appearance: 'none',\n }),\n stateSprinkles({\n color: { hoverNotDisabled: 'text' },\n }),\n focusRing,\n stateSprinkles({\n cursor: { disabled: 'default' },\n opacity: { disabled: 60 },\n }),\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 4,\n fontSize: 'xs',\n borderRadius: 'xl',\n height: 8,\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 6,\n fontSize: 'sm',\n borderRadius: 'xl',\n height: 10,\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 8,\n fontSize: 'base',\n borderRadius: 'lg',\n height: 12,\n});\n\nconst iconSizeSmall = sprinkles({\n width: 8,\n height: 8,\n minWidth: 8,\n minHeight: 8,\n});\n\nconst iconSizeMedium = sprinkles({\n width: 10,\n height: 10,\n minWidth: 10,\n minHeight: 10,\n});\n\nconst iconSizeLarge = sprinkles({\n width: 12,\n height: 12,\n minWidth: 12,\n minHeight: 12,\n});\n\nexport const button = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabVariant,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport const tabButtonActive = sprinkles({\n color: 'primary',\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 2,\n borderBottomColor: 'primary',\n fontWeight: 'semibold',\n});\n\nexport const activeButton = recipe({\n base: [baseLayout, baseInteraction],\n variants: {\n variant: {\n primary: primaryVariant,\n secondary: secondaryVariant,\n text: textVariant,\n success: successVariant,\n danger: dangerVariant,\n brand: brandVariant,\n brandGhost: brandGhostVariant,\n tab: tabButtonActive,\n icon: iconVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n width: {\n auto: sprinkles({ width: 'auto' }),\n full: sprinkles({ width: 'full' }),\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n width: 'auto',\n },\n compoundVariants: [\n {\n variants: { variant: 'icon', size: 'small' },\n style: iconSizeSmall,\n },\n {\n variants: { variant: 'icon', size: 'medium' },\n style: iconSizeMedium,\n },\n {\n variants: { variant: 'icon', size: 'large' },\n style: iconSizeLarge,\n },\n ],\n});\n\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nconst inlineFlexCenter = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n});\n\nconst spin = keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n});\n\nexport const content = inlineFlexCenter;\n\nexport const loadingIndicator = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n gap: 2,\n});\n\nexport const spinnerIcon = style([\n sprinkles({\n width: 5,\n height: 5,\n flexShrink: 0,\n }),\n {\n animation: `${spin} 1s linear infinite`,\n },\n]);\n\nexport const iconLeft = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginRight: 2,\n});\n\nexport const iconRight = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n marginLeft: 2,\n});\n\nexport const iconOnlyContent = sprinkles({\n display: INLINE_FLEX,\n alignItems: 'center',\n justifyContent: 'center',\n});\n"],"mappings":""}

package/lib/esm/atomic/atoms/checkbox/checkbox.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../../../src/atomic/atoms/checkbox/checkbox.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const checkboxContainer = sprinkles({\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n});\n\nexport const checkboxInput = sprinkles({\n position: 'absolute',\n cursor: 'pointer',\n opacity: 0,\n height: 0,\n width: 0,\n});\n\nexport const checkboxLabel = sprinkles({\n fontSize: 'sm',\n color: 'textSecondary',\n paddingLeft: 2,\n cursor: 'pointer',\n});\n\nconst checkboxBase = style([\n sprinkles({\n display: 'inline-block',\n width: 5,\n height: 5,\n backgroundColor: 'white',\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n borderRadius: 'md',\n cursor: 'pointer',\n position: 'relative',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n }),\n {\n selectors: {\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n display: 'none',\n left: '6px',\n top: '2px',\n width: '6px',\n height: '11px',\n border: `solid ${vars.colors.white}`,\n borderWidth: '0 2px 2px 0',\n transform: 'rotate(45deg)',\n },\n },\n },\n]);\n\nconst checkedVariant = style([\n sprinkles({ backgroundColor: 'primary', borderColor: 'primary' }),\n {\n selectors: {\n '&:after': {\n display: 'block',\n },\n },\n },\n]);\n\nconst uncheckedVariant = style([\n sprinkles({\n backgroundColor: 'white',\n }),\n stateSprinkles({ borderColor: { hover: 'primary' } }),\n]);\n\nconst indeterminateVariant = style([\n sprinkles({ backgroundColor: 'primary', borderColor: 'primary' }),\n {\n selectors: {\n '&:after': {\n display: 'block',\n left: '4px',\n top: '8px',\n width: '10px',\n height: '0',\n borderWidth: '0 0 2px 0',\n transform: 'none',\n },\n },\n },\n]);\n\nconst disabledVariant = sprinkles({\n opacity: 50,\n cursor: 'not-allowed',\n});\n\nconst enabledVariant = sprinkles({});\n\nexport const customCheckbox = recipe({\n base: checkboxBase,\n variants: {\n checked: {\n true: checkedVariant,\n false: uncheckedVariant,\n },\n indeterminate: {\n true: indeterminateVariant,\n false: enabledVariant,\n },\n disabled: {\n true: disabledVariant,\n false: enabledVariant,\n },\n },\n defaultVariants: {\n checked: false,\n indeterminate: false,\n disabled: false,\n },\n});\n\nexport type CheckboxVariants = RecipeVariants<typeof customCheckbox>;\n"],"mappings":""}
1	+ {"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../../../src/atomic/atoms/checkbox/checkbox.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const checkboxContainer = sprinkles({\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n});\n\nexport const checkboxInput = sprinkles({\n position: 'absolute',\n cursor: 'pointer',\n opacity: 0,\n height: 0,\n width: 0,\n});\n\nexport const checkboxLabel = sprinkles({\n fontSize: 'sm',\n color: 'textSecondary',\n paddingLeft: 2,\n cursor: 'pointer',\n});\n\nconst checkboxBase = style([\n sprinkles({\n display: 'inline-block',\n width: 5,\n height: 5,\n backgroundColor: 'white',\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n borderRadius: 'md',\n cursor: 'pointer',\n position: 'relative',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n }),\n {\n selectors: {\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n display: 'none',\n left: '6px',\n top: '2px',\n width: '6px',\n height: '11px',\n border: `solid ${vars.colors.white}`,\n borderWidth: '0 2px 2px 0',\n transform: 'rotate(45deg)',\n },\n },\n },\n]);\n\nconst checkedVariant = style([\n sprinkles({ backgroundColor: 'primary', borderColor: 'primary' }),\n {\n selectors: {\n '&:after': {\n display: 'block',\n },\n },\n },\n]);\n\nconst uncheckedVariant = style([\n sprinkles({\n backgroundColor: 'white',\n }),\n stateSprinkles({ borderColor: { hover: 'primary' } }),\n]);\n\nconst indeterminateVariant = style([\n sprinkles({ backgroundColor: 'primary', borderColor: 'primary' }),\n {\n selectors: {\n '&:after': {\n display: 'block',\n left: '4px',\n top: '8px',\n width: '10px',\n height: '0',\n borderWidth: '0 0 2px 0',\n transform: 'none',\n },\n },\n },\n]);\n\nconst disabledVariant = sprinkles({\n opacity: 50,\n cursor: 'not-allowed',\n});\n\nconst enabledVariant = sprinkles({});\n\nexport const customCheckbox = recipe({\n base: checkboxBase,\n variants: {\n checked: {\n true: checkedVariant,\n false: uncheckedVariant,\n },\n indeterminate: {\n true: indeterminateVariant,\n false: enabledVariant,\n },\n disabled: {\n true: disabledVariant,\n false: enabledVariant,\n },\n },\n defaultVariants: {\n checked: false,\n indeterminate: false,\n disabled: false,\n },\n});\n\nexport type CheckboxVariants = RecipeVariants<typeof customCheckbox>;\n"],"mappings":""}

package/lib/esm/atomic/atoms/input/input.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.css.js","names":[],"sources":["../../../../../src/atomic/atoms/input/input.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n controlFocusRing,\n errorControlFocusRing,\n} from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n position: 'relative',\n width: 'auto',\n display: 'inline-block',\n});\n\nexport const containerFullWidth = sprinkles({\n width: 'full',\n});\n\nconst iconBase = sprinkles({\n position: 'absolute',\n top: '1/2',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'none',\n transform: 'centerY',\n});\n\nexport const leftIcon = style([iconBase, sprinkles({ left: 2.5 })]);\n\nexport const rightIcon = style([iconBase, sprinkles({ right: 2.5 })]);\n\nexport const rightIconInteractive = sprinkles({\n pointerEvents: 'auto',\n});\n\nexport const inputWithLeftIcon = sprinkles({\n paddingLeft: 9,\n});\n\nexport const inputWithRightIcon = sprinkles({\n paddingRight: 9,\n});\n\nexport const inputWithInteractiveRightIcon = sprinkles({\n paddingRight: 24,\n});\n\nconst baseInput = style([\n sprinkles({\n paddingY: 1,\n paddingX: 3,\n borderRadius: 'lg',\n fontSize: 'base',\n width: 'full',\n outline: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n }),\n {\n '::placeholder': {\n color: vars.colors.textSecondary,\n opacity: '0.7',\n },\n },\n]);\n\nconst defaultVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n controlFocusRing,\n]);\n\nconst errorVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 4,\n fontSize: 'base',\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 6,\n fontSize: 'lg',\n});\n\nexport const input = recipe({\n base: baseInput,\n variants: {\n variant: {\n default: defaultVariant,\n error: errorVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n fullWidth: true,\n },\n});\n\nexport type InputVariants = RecipeVariants<typeof input>;\n"],"mappings":""}
1	+ {"version":3,"file":"input.css.js","names":[],"sources":["../../../../../src/atomic/atoms/input/input.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n controlFocusRing,\n errorControlFocusRing,\n} from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n position: 'relative',\n width: 'auto',\n display: 'inline-block',\n});\n\nexport const containerFullWidth = sprinkles({\n width: 'full',\n});\n\nconst iconBase = sprinkles({\n position: 'absolute',\n top: '1/2',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'none',\n transform: 'centerY',\n});\n\nexport const leftIcon = style([iconBase, sprinkles({ left: 2.5 })]);\n\nexport const rightIcon = style([iconBase, sprinkles({ right: 2.5 })]);\n\nexport const rightIconInteractive = sprinkles({\n pointerEvents: 'auto',\n});\n\nexport const inputWithLeftIcon = sprinkles({\n paddingLeft: 9,\n});\n\nexport const inputWithRightIcon = sprinkles({\n paddingRight: 9,\n});\n\nexport const inputWithInteractiveRightIcon = sprinkles({\n paddingRight: 24,\n});\n\nconst baseInput = style([\n sprinkles({\n paddingY: 1,\n paddingX: 3,\n borderRadius: 'lg',\n fontSize: 'base',\n width: 'full',\n outline: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n }),\n {\n '::placeholder': {\n color: vars.colors.textSecondary,\n opacity: '0.7',\n },\n },\n]);\n\nconst defaultVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n controlFocusRing,\n]);\n\nconst errorVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 4,\n fontSize: 'base',\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 6,\n fontSize: 'lg',\n});\n\nexport const input = recipe({\n base: baseInput,\n variants: {\n variant: {\n default: defaultVariant,\n error: errorVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n fullWidth: true,\n },\n});\n\nexport type InputVariants = RecipeVariants<typeof input>;\n"],"mappings":""}

package/lib/esm/atomic/atoms/textarea/textarea.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.css.js","names":[],"sources":["../../../../../src/atomic/atoms/textarea/textarea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n controlFocusRing,\n errorControlFocusRing,\n} from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseTextarea = style([\n sprinkles({\n paddingY: 2,\n paddingX: 4,\n borderRadius: 'md',\n fontSize: 'base',\n width: 'full',\n outline: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n minHeight: 24,\n resize: 'vertical',\n lineHeight: 1.5,\n }),\n {\n '::placeholder': {\n color: vars.colors.textSecondary,\n opacity: '0.7',\n },\n },\n]);\n\nconst defaultVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n controlFocusRing,\n]);\n\nconst errorVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n minHeight: 18,\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 4,\n fontSize: 'base',\n minHeight: 24,\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 6,\n fontSize: 'lg',\n minHeight: 32,\n});\n\nexport const textarea = recipe({\n base: baseTextarea,\n variants: {\n variant: {\n default: defaultVariant,\n error: errorVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n fullWidth: true,\n },\n});\n\nexport type TextareaVariants = RecipeVariants<typeof textarea>;\n"],"mappings":""}
1	+ {"version":3,"file":"textarea.css.js","names":[],"sources":["../../../../../src/atomic/atoms/textarea/textarea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport {\n controlFocusRing,\n errorControlFocusRing,\n} from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst baseTextarea = style([\n sprinkles({\n paddingY: 2,\n paddingX: 4,\n borderRadius: 'md',\n fontSize: 'base',\n width: 'full',\n outline: 'none',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'default',\n minHeight: 24,\n resize: 'vertical',\n lineHeight: 1.5,\n }),\n {\n '::placeholder': {\n color: vars.colors.textSecondary,\n opacity: '0.7',\n },\n },\n]);\n\nconst defaultVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'border',\n backgroundColor: 'white',\n color: 'text',\n }),\n controlFocusRing,\n]);\n\nconst errorVariant = style([\n sprinkles({\n borderWidth: 'px',\n borderStyle: 'solid',\n borderColor: 'error',\n backgroundColor: 'white',\n color: 'text',\n }),\n errorControlFocusRing,\n]);\n\nconst smallSize = sprinkles({\n paddingY: 1,\n paddingX: 2,\n fontSize: 'sm',\n minHeight: 18,\n});\n\nconst mediumSize = sprinkles({\n paddingY: 2,\n paddingX: 4,\n fontSize: 'base',\n minHeight: 24,\n});\n\nconst largeSize = sprinkles({\n paddingY: 4,\n paddingX: 6,\n fontSize: 'lg',\n minHeight: 32,\n});\n\nexport const textarea = recipe({\n base: baseTextarea,\n variants: {\n variant: {\n default: defaultVariant,\n error: errorVariant,\n },\n size: {\n small: smallSize,\n medium: mediumSize,\n large: largeSize,\n },\n fullWidth: {\n true: sprinkles({ width: 'full' }),\n false: sprinkles({ width: 'auto' }),\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'medium',\n fullWidth: true,\n },\n});\n\nexport type TextareaVariants = RecipeVariants<typeof textarea>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbNavigation.css.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nconst displayInlineFlex = 'inline-flex';\n\nexport const breadcrumb = sprinkles({\n display: 'flex',\n alignItems: 'center',\n});\n\nexport const breadcrumbList = sprinkles({\n display: 'flex',\n alignItems: 'center',\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n gap: 3,\n});\n\nexport const breadcrumbItem = sprinkles({\n display: 'flex',\n alignItems: 'center',\n});\n\nexport const breadcrumbSection = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 1,\n});\n\nexport const breadcrumbLabel = sprinkles({\n fontSize: '2xs',\n fontWeight: 'semibold',\n textTransform: 'uppercase',\n letterSpacing: 'caps',\n color: 'textMuted',\n lineHeight: 1,\n});\n\nexport const breadcrumbNameRow = sprinkles({\n display: displayInlineFlex,\n alignItems: 'center',\n gap: 2,\n});\n\nexport const breadcrumbChevron = sprinkles({\n color: 'current',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const breadcrumbChevronOpen = sprinkles({\n rotate: 180,\n color: 'text',\n});\n\nexport const breadcrumbLink = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n display: displayInlineFlex,\n alignItems: 'center',\n fontSize: 'base',\n fontWeight: 'semibold',\n color: 'text',\n textDecoration: 'none',\n lineHeight: 1.2,\n }),\n {\n ':hover': {\n color: vars.colors.primary,\n textDecoration: 'none',\n },\n ':focus': {\n outline: 'none',\n color: vars.colors.primary,\n },\n },\n]);\n\nexport const breadcrumbSeparator = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'textMuted',\n fontSize: 'sm',\n fontWeight: 'bold',\n});\n\nexport const breadcrumbChevronButton = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 6,\n height: 6,\n minWidth: 6,\n minHeight: 6,\n borderRadius: 'md',\n borderWidth: 0,\n borderStyle: 'none',\n backgroundColor: 'backgroundSecondary',\n color: 'text',\n cursor: 'pointer',\n padding: 0,\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: vars.colors.backgroundTertiary,\n color: vars.colors.text,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const homeLink = sprinkles({\n display: displayInlineFlex,\n alignItems: 'center',\n justifyContent: 'center',\n height: 8,\n borderRadius: 'sm',\n color: 'text',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const homeIcon = sprinkles({\n color: 'current',\n});\n\nconst popoverIn = keyframes({\n '0%': {\n opacity: 0,\n transform: 'translateY(-6px) scale(0.98)',\n },\n '100%': {\n opacity: 1,\n transform: 'translateY(0) scale(1)',\n },\n});\n\nexport const popoverPanel = style([\n sprinkles({\n padding: 2,\n minWidth: 64,\n maxWidth: '26rem',\n boxShadow: 'inkGlow',\n transformOrigin: 'topLeft',\n }),\n {\n animation: `${popoverIn} 160ms ease`,\n },\n]);\n\nexport const popoverContent = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n});\n\nexport const popoverHeader = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n});\n\nexport const popoverTitle = sprinkles({\n fontSize: 'xs',\n fontWeight: 'semibold',\n textTransform: 'uppercase',\n letterSpacing: 'caps',\n color: 'textMuted',\n});\n\nexport const popoverSearch = sprinkles({\n display: 'flex',\n});\n\nexport const popoverList = sprinkles({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n maxHeight: 64,\n overflowY: 'auto',\n});\n\nexport const popoverItem = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n paddingRight: 3,\n paddingLeft: 3,\n paddingTop: 2,\n paddingBottom: 2,\n borderRadius: 'md',\n textDecoration: 'none',\n color: 'text',\n }),\n {\n ':hover': {\n backgroundColor: vars.colors.backgroundSecondary,\n color: vars.colors.text,\n },\n ':focus': {\n outline: `2px solid ${vars.colors.primaryLight}`,\n outlineOffset: 2,\n },\n },\n]);\n\nexport const popoverItemActive = sprinkles({\n backgroundColor: 'primaryLight',\n color: 'primary',\n});\n\nexport const popoverItemName = sprinkles({\n fontSize: 'sm',\n fontWeight: 'semibold',\n});\n\nexport const popoverItemDescription = sprinkles({\n fontSize: 'xs',\n color: 'textSecondary',\n});\n\nexport const popoverEmpty = sprinkles({\n padding: 2,\n fontSize: 'sm',\n color: 'textSecondary',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"breadcrumbNavigation.css.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nconst displayInlineFlex = 'inline-flex';\n\nexport const breadcrumb = sprinkles({\n display: 'flex',\n alignItems: 'center',\n});\n\nexport const breadcrumbList = sprinkles({\n display: 'flex',\n alignItems: 'center',\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n gap: 3,\n});\n\nexport const breadcrumbItem = sprinkles({\n display: 'flex',\n alignItems: 'center',\n});\n\nexport const breadcrumbSection = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 1,\n});\n\nexport const breadcrumbLabel = sprinkles({\n fontSize: '2xs',\n fontWeight: 'semibold',\n textTransform: 'uppercase',\n letterSpacing: 'caps',\n color: 'textMuted',\n lineHeight: 1,\n});\n\nexport const breadcrumbNameRow = sprinkles({\n display: displayInlineFlex,\n alignItems: 'center',\n gap: 2,\n});\n\nexport const breadcrumbChevron = sprinkles({\n color: 'current',\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const breadcrumbChevronOpen = sprinkles({\n rotate: 180,\n color: 'text',\n});\n\nexport const breadcrumbLink = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n display: displayInlineFlex,\n alignItems: 'center',\n fontSize: 'base',\n fontWeight: 'semibold',\n color: 'text',\n textDecoration: 'none',\n lineHeight: 1.2,\n }),\n {\n ':hover': {\n color: vars.colors.primary,\n textDecoration: 'none',\n },\n ':focus': {\n outline: 'none',\n color: vars.colors.primary,\n },\n },\n]);\n\nexport const breadcrumbSeparator = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'textMuted',\n fontSize: 'sm',\n fontWeight: 'bold',\n});\n\nexport const breadcrumbChevronButton = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 6,\n height: 6,\n minWidth: 6,\n minHeight: 6,\n borderRadius: 'md',\n borderWidth: 0,\n borderStyle: 'none',\n backgroundColor: 'backgroundSecondary',\n color: 'text',\n cursor: 'pointer',\n padding: 0,\n }),\n {\n selectors: {\n '&:hover:not(:disabled)': {\n backgroundColor: vars.colors.backgroundTertiary,\n color: vars.colors.text,\n },\n '&:focus-visible': {\n outline: `2px solid ${vars.colors.primary}`,\n outlineOffset: '2px',\n },\n },\n },\n]);\n\nexport const homeLink = sprinkles({\n display: displayInlineFlex,\n alignItems: 'center',\n justifyContent: 'center',\n height: 8,\n borderRadius: 'sm',\n color: 'text',\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n});\n\nexport const homeIcon = sprinkles({\n color: 'current',\n});\n\nconst popoverIn = keyframes({\n '0%': {\n opacity: 0,\n transform: 'translateY(-6px) scale(0.98)',\n },\n '100%': {\n opacity: 1,\n transform: 'translateY(0) scale(1)',\n },\n});\n\nexport const popoverPanel = style([\n sprinkles({\n padding: 2,\n minWidth: 64,\n maxWidth: '26rem',\n boxShadow: 'inkGlow',\n transformOrigin: 'topLeft',\n }),\n {\n animation: `${popoverIn} 160ms ease`,\n },\n]);\n\nexport const popoverContent = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 3,\n});\n\nexport const popoverHeader = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n});\n\nexport const popoverTitle = sprinkles({\n fontSize: 'xs',\n fontWeight: 'semibold',\n textTransform: 'uppercase',\n letterSpacing: 'caps',\n color: 'textMuted',\n});\n\nexport const popoverSearch = sprinkles({\n display: 'flex',\n});\n\nexport const popoverList = sprinkles({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n maxHeight: 64,\n overflowY: 'auto',\n});\n\nexport const popoverItem = style([\n sprinkles({\n transitionProperty: 'colors',\n transitionDuration: 120,\n transitionTimingFunction: 'ease',\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n paddingRight: 3,\n paddingLeft: 3,\n paddingTop: 2,\n paddingBottom: 2,\n borderRadius: 'md',\n textDecoration: 'none',\n color: 'text',\n }),\n {\n ':hover': {\n backgroundColor: vars.colors.backgroundSecondary,\n color: vars.colors.text,\n },\n ':focus': {\n outline: `2px solid ${vars.colors.primaryLight}`,\n outlineOffset: 2,\n },\n },\n]);\n\nexport const popoverItemActive = sprinkles({\n backgroundColor: 'primaryLight',\n color: 'primary',\n});\n\nexport const popoverItemName = sprinkles({\n fontSize: 'sm',\n fontWeight: 'semibold',\n});\n\nexport const popoverItemDescription = sprinkles({\n fontSize: 'xs',\n color: 'textSecondary',\n});\n\nexport const popoverEmpty = sprinkles({\n padding: 2,\n fontSize: 'sm',\n color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/checkbox_field/checkboxField.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkboxField.css.js","names":[],"sources":["../../../../../src/atomic/molecules/checkbox_field/checkboxField.css.ts"],"sourcesContent":["import { style, createVar, fallbackVar } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const checkboxFieldMarginBottomVar = createVar();\nexport const checkboxLabelMarginLeftVar = createVar();\n\nexport const checkboxField = style([\n sprinkles({\n display: 'flex',\n alignItems: 'flex-start',\n }),\n {\n marginBottom: fallbackVar(checkboxFieldMarginBottomVar, vars.spacing[4]),\n },\n]);\n\nexport const checkboxWrapper = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 2,\n});\n\nexport const labelWrapper = style({\n marginLeft: fallbackVar(checkboxLabelMarginLeftVar, vars.spacing[1]),\n});\n\nexport const helperText = sprinkles({\n fontSize: 'xs',\n color: 'textSecondary',\n marginTop: 0.5,\n});\n"],"mappings":""}
1	+ {"version":3,"file":"checkboxField.css.js","names":[],"sources":["../../../../../src/atomic/molecules/checkbox_field/checkboxField.css.ts"],"sourcesContent":["import { style, createVar, fallbackVar } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const checkboxFieldMarginBottomVar = createVar();\nexport const checkboxLabelMarginLeftVar = createVar();\n\nexport const checkboxField = style([\n sprinkles({\n display: 'flex',\n alignItems: 'flex-start',\n }),\n {\n marginBottom: fallbackVar(checkboxFieldMarginBottomVar, vars.spacing[4]),\n },\n]);\n\nexport const checkboxWrapper = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 2,\n});\n\nexport const labelWrapper = style({\n marginLeft: fallbackVar(checkboxLabelMarginLeftVar, vars.spacing[1]),\n});\n\nexport const helperText = sprinkles({\n fontSize: 'xs',\n color: 'textSecondary',\n marginTop: 0.5,\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/form/formStyles.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"formStyles.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form/formStyles.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.js';\nimport {\n checkboxFieldMarginBottomVar,\n checkboxLabelMarginLeftVar,\n} from '../checkbox_field/checkboxField.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const form = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 6,\n});\n\nexport const createProjectTheme = style({\n vars: {\n [vars.colors.primary]: vars.colors.brandPrimaryRed,\n [vars.colors.primaryLight]:\n `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 12%, transparent)`,\n },\n});\n\nexport const formGroup = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n});\n\nexport const input = style([\n sprinkles({\n backgroundColor: 'background',\n borderColor: 'border',\n borderRadius: 'xl',\n borderStyle: 'solid',\n borderWidth: 'default',\n color: 'text',\n fontSize: 'sm',\n padding: 4,\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n ':focus': {\n outline: 'none',\n borderColor: vars.colors.primary,\n boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n },\n '::placeholder': {\n color: vars.colors.textMuted,\n },\n ':disabled': {\n backgroundColor: vars.colors.backgroundModifier,\n cursor: 'not-allowed',\n },\n },\n]);\n\nexport const errorMessage = sprinkles({\n color: 'error',\n fontSize: 'xs',\n marginTop: 1,\n});\n\nexport const formActions = sprinkles({\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 3,\n marginTop: 2,\n});\n\nexport const button = style([\n sprinkles({\n borderRadius: 'md',\n cursor: 'pointer',\n fontSize: 'sm',\n fontWeight: 'medium',\n paddingY: 2,\n paddingX: 6,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n ':disabled': {\n opacity: 0.7,\n cursor: 'not-allowed',\n },\n },\n]);\n\nconst spin = keyframes({\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n});\n\nexport const spinnerContainer = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n});\n\nexport const spinner = style([\n sprinkles({\n display: 'inline-block',\n width: 4,\n height: 4,\n border: 'spinner',\n borderRadius: '1/2',\n borderTopColor: 'white',\n }),\n {\n animation: `${spin} 0.8s linear infinite`,\n },\n]);\n\nexport const checkboxSection = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n }),\n {\n vars: {\n [checkboxFieldMarginBottomVar]: '0px',\n [checkboxLabelMarginLeftVar]: vars.spacing[2],\n },\n },\n]);\n\nexport const checkboxItem = style([\n sprinkles({\n paddingY: 3,\n paddingX: 0,\n }),\n {\n selectors: {\n '&:not(:last-child)': {\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'border',\n },\n },\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"formStyles.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form/formStyles.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.css.js';\nimport {\n checkboxFieldMarginBottomVar,\n checkboxLabelMarginLeftVar,\n} from '../checkbox_field/checkboxField.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const form = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 6,\n});\n\nexport const createProjectTheme = style({\n vars: {\n [vars.colors.primary]: vars.colors.brandPrimaryRed,\n [vars.colors.primaryLight]:\n `color-mix(in srgb, ${vars.colors.brandPrimaryRed} 12%, transparent)`,\n },\n});\n\nexport const formGroup = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n});\n\nexport const input = style([\n sprinkles({\n backgroundColor: 'background',\n borderColor: 'border',\n borderRadius: 'xl',\n borderStyle: 'solid',\n borderWidth: 'default',\n color: 'text',\n fontSize: 'sm',\n padding: 4,\n transitionProperty: 'default',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n ':focus': {\n outline: 'none',\n borderColor: vars.colors.primary,\n boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n },\n '::placeholder': {\n color: vars.colors.textMuted,\n },\n ':disabled': {\n backgroundColor: vars.colors.backgroundModifier,\n cursor: 'not-allowed',\n },\n },\n]);\n\nexport const errorMessage = sprinkles({\n color: 'error',\n fontSize: 'xs',\n marginTop: 1,\n});\n\nexport const formActions = sprinkles({\n display: 'flex',\n justifyContent: 'flex-end',\n gap: 3,\n marginTop: 2,\n});\n\nexport const button = style([\n sprinkles({\n borderRadius: 'md',\n cursor: 'pointer',\n fontSize: 'sm',\n fontWeight: 'medium',\n paddingY: 2,\n paddingX: 6,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease',\n }),\n {\n ':disabled': {\n opacity: 0.7,\n cursor: 'not-allowed',\n },\n },\n]);\n\nconst spin = keyframes({\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n});\n\nexport const spinnerContainer = sprinkles({\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n});\n\nexport const spinner = style([\n sprinkles({\n display: 'inline-block',\n width: 4,\n height: 4,\n border: 'spinner',\n borderRadius: '1/2',\n borderTopColor: 'white',\n }),\n {\n animation: `${spin} 0.8s linear infinite`,\n },\n]);\n\nexport const checkboxSection = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n }),\n {\n vars: {\n [checkboxFieldMarginBottomVar]: '0px',\n [checkboxLabelMarginLeftVar]: vars.spacing[2],\n },\n },\n]);\n\nexport const checkboxItem = style([\n sprinkles({\n paddingY: 3,\n paddingX: 0,\n }),\n {\n selectors: {\n '&:not(:last-child)': {\n borderWidth: 0,\n borderStyle: 'solid',\n borderBottomWidth: 'default',\n borderBottomColor: 'border',\n },\n },\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/LazyMarkdownRenderer.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* empty css                                          */
 /* empty css                                   */
 /* empty css                                        */
-/* empty css                                       */
+/* empty css                                            */
 /* empty css                                  */
 /* empty css                                    */
 //#region src/atomic/molecules/markdown/LazyMarkdownRenderer.css.ts

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownArticleContainer.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const container = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownArticleContainer.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const container = style([\n sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownCodeCopyButton.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownCodeCopyButton.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\n\nexport const copyButton = style([\n sprinkles({\n alignItems: 'center',\n backgroundColor: 'brandLightGray',\n borderRadius: 'sm',\n borderStyle: 'none',\n borderWidth: 0,\n color: 'brandDarkGray',\n cursor: 'pointer',\n display: 'inline-flex',\n gap: 1,\n paddingX: 2,\n paddingY: 1,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease-in-out',\n }),\n {\n selectors: {\n '&:hover': {\n backgroundColor: vars.colors.primaryLight,\n },\n '&:focus-visible': {\n outline: `${vars.borderWidth.default} solid ${vars.colors.brandPrimaryRed}`,\n outlineOffset: vars.spacing[0.5],\n },\n '&:disabled': {\n cursor: 'default',\n opacity: 0.6,\n },\n },\n },\n]);\n\nexport const label = sprinkles({\n fontSize: 'xs',\n fontWeight: 'medium',\n});\n\nexport const icon = sprinkles({\n height: 4,\n width: 4,\n});\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownCodeCopyButton.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\n\nexport const copyButton = style([\n sprinkles({\n alignItems: 'center',\n backgroundColor: 'brandLightGray',\n borderRadius: 'sm',\n borderStyle: 'none',\n borderWidth: 0,\n color: 'brandDarkGray',\n cursor: 'pointer',\n display: 'inline-flex',\n gap: 1,\n paddingX: 2,\n paddingY: 1,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease-in-out',\n }),\n {\n selectors: {\n '&:hover': {\n backgroundColor: vars.colors.primaryLight,\n },\n '&:focus-visible': {\n outline: `${vars.borderWidth.default} solid ${vars.colors.brandPrimaryRed}`,\n outlineOffset: vars.spacing[0.5],\n },\n '&:disabled': {\n cursor: 'default',\n opacity: 0.6,\n },\n },\n },\n]);\n\nexport const label = sprinkles({\n fontSize: 'xs',\n fontWeight: 'medium',\n});\n\nexport const icon = sprinkles({\n height: 4,\n width: 4,\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownDelete.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownDelete.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownDelete.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const deleted = style([\n sprinkles({\n textDecoration: 'line-through',\n textDecorationThickness: 2,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownDelete.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownDelete.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const deleted = style([\n sprinkles({\n textDecoration: 'line-through',\n textDecorationThickness: 2,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownEmphasis.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownEmphasis.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownEmphasis.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const emphasis = style([\n sprinkles({\n fontStyle: 'italic',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownEmphasis.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownEmphasis.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const emphasis = style([\n sprinkles({\n fontStyle: 'italic',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownFootnoteReference.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownLinkColorVar } from '../markdownVars.css.js';\n\nexport const footnoteReference = style([\n sprinkles({\n fontSize: 'xs',\n display: 'inline-flex',\n fontWeight: 'semibold',\n verticalAlign: 'super',\n }),\n {\n color: fallbackVar(markdownLinkColorVar, vars.colors.brandPrimaryRed),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownFootnoteReference.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownLinkColorVar } from '../markdownVars.css.js';\n\nexport const footnoteReference = style([\n sprinkles({\n fontSize: 'xs',\n display: 'inline-flex',\n fontWeight: 'semibold',\n verticalAlign: 'super',\n }),\n {\n color: fallbackVar(markdownLinkColorVar, vars.colors.brandPrimaryRed),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownHeading.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownHeading.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownHeading.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nconst baseHeading = style([\n sprinkles({\n fontWeight: 'semibold',\n lineHeight: 1.3,\n marginBottom: 2,\n scrollMarginTop: 16,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:first-child': {\n marginTop: 0,\n },\n },\n },\n]);\n\nexport const headingRecipe = recipe({\n base: baseHeading,\n variants: {\n level: {\n 1: sprinkles({\n fontSize: '3xl',\n marginTop: 6,\n }),\n 2: sprinkles({\n fontSize: '2xl',\n marginTop: 2,\n }),\n 3: sprinkles({\n fontSize: 'xl',\n marginTop: 2,\n }),\n 4: sprinkles({\n fontSize: 'lg',\n marginTop: 4,\n }),\n 5: sprinkles({\n fontSize: 'base',\n marginTop: 4,\n }),\n 6: sprinkles({\n fontSize: 'sm',\n marginTop: 3,\n }),\n },\n },\n defaultVariants: {\n level: 2,\n },\n});\n\nexport type HeadingRecipeVariants = RecipeVariants<typeof headingRecipe>;\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownHeading.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownHeading.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nconst baseHeading = style([\n sprinkles({\n fontWeight: 'semibold',\n lineHeight: 1.3,\n marginBottom: 2,\n scrollMarginTop: 16,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:first-child': {\n marginTop: 0,\n },\n },\n },\n]);\n\nexport const headingRecipe = recipe({\n base: baseHeading,\n variants: {\n level: {\n 1: sprinkles({\n fontSize: '3xl',\n marginTop: 6,\n }),\n 2: sprinkles({\n fontSize: '2xl',\n marginTop: 2,\n }),\n 3: sprinkles({\n fontSize: 'xl',\n marginTop: 2,\n }),\n 4: sprinkles({\n fontSize: 'lg',\n marginTop: 4,\n }),\n 5: sprinkles({\n fontSize: 'base',\n marginTop: 4,\n }),\n 6: sprinkles({\n fontSize: 'sm',\n marginTop: 3,\n }),\n },\n },\n defaultVariants: {\n level: 2,\n },\n});\n\nexport type HeadingRecipeVariants = RecipeVariants<typeof headingRecipe>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownInlineCode.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownInlineCode.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownInlineCode.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownFontSizeVar } from '../markdownVars.css.js';\n\nexport const inlineCode = style([\n sprinkles({\n borderRadius: 'sm',\n fontFamily: 'mono',\n maxWidth: 'full',\n overflowWrap: 'anywhere',\n paddingX: 1.5,\n paddingY: 1,\n whiteSpace: 'pre-wrap',\n wordBreak: 'break-all',\n }),\n {\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.sm),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownInlineCode.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownInlineCode.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownFontSizeVar } from '../markdownVars.css.js';\n\nexport const inlineCode = style([\n sprinkles({\n borderRadius: 'sm',\n fontFamily: 'mono',\n maxWidth: 'full',\n overflowWrap: 'anywhere',\n paddingX: 1.5,\n paddingY: 1,\n whiteSpace: 'pre-wrap',\n wordBreak: 'break-all',\n }),\n {\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.sm),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownLink.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownLink.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownLink.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport {\n markdownLinkColorVar,\n markdownLinkDisabledColorVar,\n markdownLinkHoverColorVar,\n markdownLinkIconColorVar,\n} from '../markdownVars.css.js';\n\nexport const baseLink = style([\n sprinkles({\n textDecoration: 'underline',\n textUnderlineOffset: 2,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease-in-out',\n wordBreak: 'break-word',\n }),\n {\n color: fallbackVar(markdownLinkColorVar, vars.colors.brandPrimaryRed),\n selectors: {\n '&:hover': {\n color: fallbackVar(\n markdownLinkHoverColorVar,\n vars.colors.brandSecondaryOrange,\n ),\n },\n '&:focus-visible': {\n outline: `${vars.borderWidth.default} solid ${fallbackVar(\n markdownLinkColorVar,\n vars.colors.brandPrimaryRed,\n )}`,\n outlineOffset: vars.spacing[0.5],\n },\n },\n },\n]);\n\nexport const externalLink = style([\n baseLink,\n sprinkles({\n alignItems: 'center',\n display: 'inline-flex',\n gap: 1,\n }),\n]);\n\nexport const icon = style([\n sprinkles({\n display: 'inline-flex',\n }),\n {\n color: fallbackVar(\n markdownLinkIconColorVar,\n vars.colors.brandSecondaryOrange,\n ),\n },\n]);\n\nexport const disabledLink = style([\n sprinkles({\n cursor: 'default',\n textDecoration: 'none',\n }),\n {\n color: fallbackVar(markdownLinkDisabledColorVar, vars.colors.textSecondary),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownLink.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownLink.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport {\n markdownLinkColorVar,\n markdownLinkDisabledColorVar,\n markdownLinkHoverColorVar,\n markdownLinkIconColorVar,\n} from '../markdownVars.css.js';\n\nexport const baseLink = style([\n sprinkles({\n textDecoration: 'underline',\n textUnderlineOffset: 2,\n transitionProperty: 'colors',\n transitionDuration: 150,\n transitionTimingFunction: 'ease-in-out',\n wordBreak: 'break-word',\n }),\n {\n color: fallbackVar(markdownLinkColorVar, vars.colors.brandPrimaryRed),\n selectors: {\n '&:hover': {\n color: fallbackVar(\n markdownLinkHoverColorVar,\n vars.colors.brandSecondaryOrange,\n ),\n },\n '&:focus-visible': {\n outline: `${vars.borderWidth.default} solid ${fallbackVar(\n markdownLinkColorVar,\n vars.colors.brandPrimaryRed,\n )}`,\n outlineOffset: vars.spacing[0.5],\n },\n },\n },\n]);\n\nexport const externalLink = style([\n baseLink,\n sprinkles({\n alignItems: 'center',\n display: 'inline-flex',\n gap: 1,\n }),\n]);\n\nexport const icon = style([\n sprinkles({\n display: 'inline-flex',\n }),\n {\n color: fallbackVar(\n markdownLinkIconColorVar,\n vars.colors.brandSecondaryOrange,\n ),\n },\n]);\n\nexport const disabledLink = style([\n sprinkles({\n cursor: 'default',\n textDecoration: 'none',\n }),\n {\n color: fallbackVar(markdownLinkDisabledColorVar, vars.colors.textSecondary),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownList.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownList.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownList.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nconst baseList = style([\n sprinkles({\n marginBottom: 4,\n paddingLeft: 6,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n lineHeight: '1.7',\n },\n]);\n\nexport const listRecipe = recipe({\n base: baseList,\n variants: {\n kind: {\n ordered: {\n listStyleType: 'decimal',\n },\n unordered: {\n listStyleType: 'disc',\n },\n },\n },\n defaultVariants: {\n kind: 'unordered',\n },\n});\n\nexport type ListRecipeVariants = RecipeVariants<typeof listRecipe>;\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownList.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownList.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nconst baseList = style([\n sprinkles({\n marginBottom: 4,\n paddingLeft: 6,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n lineHeight: '1.7',\n },\n]);\n\nexport const listRecipe = recipe({\n base: baseList,\n variants: {\n kind: {\n ordered: {\n listStyleType: 'decimal',\n },\n unordered: {\n listStyleType: 'disc',\n },\n },\n },\n defaultVariants: {\n kind: 'unordered',\n },\n});\n\nexport type ListRecipeVariants = RecipeVariants<typeof listRecipe>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownListItem.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownListItem.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownListItem.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const listItem = style([\n sprinkles({\n marginBottom: 0.5,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownListItem.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownListItem.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const listItem = style([\n sprinkles({\n marginBottom: 0.5,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownMark.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownMark.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownMark.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const mark = style([\n sprinkles({\n borderRadius: 'sm',\n paddingY: 0.5,\n paddingX: 1,\n }),\n {\n backgroundColor: 'yellow',\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownMark.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownMark.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const mark = style([\n sprinkles({\n borderRadius: 'sm',\n paddingY: 0.5,\n paddingX: 1,\n }),\n {\n backgroundColor: 'yellow',\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownMermaidBlock.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { vars as e } from "../../../../theme/themeContract.js";
+import { vars as e } from "../../../../theme/themeContract.css.js";
 import { colors as t } from "../../../../theme/colors.js";
 import { useUiTranslation as n } from "../../../../i18n/useUiTranslation.js";
 import { HighlightCode as r } from "../../highlight/HighlightCode.js";

package/lib/esm/atomic/molecules/markdown/components/MarkdownMermaidBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownMermaidBlock.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownMermaidBlock.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState, type JSX } from 'react';\nimport type { Mermaid, MermaidConfig, RenderResult } from 'mermaid';\n\nimport { HighlightCode } from '../../highlight/HighlightCode.js';\nimport { colors } from '../../../../theme/colors.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { useUiTranslation } from '../../../../i18n/useUiTranslation.js';\n\nimport * as styles from './MarkdownMermaidBlock.css.js';\n\ntype Props = {\n code: string;\n};\n\nconst cssVarPattern = /^var\$(--[^,)+]+)(?:,[^)]+)?\$$/;\n\nconst resolveCssValue = (\n value: string,\n fallback?: string,\n): string \| undefined => {\n const trimmed = value.trim();\n const match = cssVarPattern.exec(trimmed);\n if (match == null) {\n if (trimmed !== '') {\n return trimmed;\n }\n return fallback;\n }\n const varName = match[1];\n if (varName == null \|\| varName === '') {\n return fallback;\n }\n if (typeof window === 'undefined') {\n return fallback;\n }\n const resolved = getComputedStyle(document.documentElement)\n .getPropertyValue(varName)\n .trim();\n if (resolved === '') {\n return fallback;\n }\n return resolved;\n};\n\nconst buildMermaidConfig = (): MermaidConfig => {\n const themeVariables = {\n background: 'transparent',\n fontFamily: resolveCssValue(vars.fontFamily.sans),\n lineColor: resolveCssValue(vars.colors.brandDarkGray, colors.brandDarkGray),\n primaryBorderColor: resolveCssValue(\n vars.colors.primaryLight,\n colors.primaryLight,\n ),\n primaryColor: resolveCssValue(\n vars.colors.primaryLight,\n colors.primaryLight,\n ),\n primaryTextColor: resolveCssValue(\n vars.colors.brandDarkGray,\n colors.brandDarkGray,\n ),\n };\n\n return {\n startOnLoad: false,\n securityLevel: 'strict',\n suppressErrorRendering: true,\n theme: 'base',\n themeVariables: Object.fromEntries(\n Object.entries(themeVariables).filter(([, value]) => {\n return value != null && value !== '';\n }),\n ),\n };\n};\n\nlet mermaidPromise: Promise<Mermaid> \| null = null;\nlet mermaidInitialized = false;\n\nconst getMermaid = async (): Promise<Mermaid> => {\n mermaidPromise ??= import('mermaid').then((module) => {\n return module.default;\n });\n const mermaid = await mermaidPromise;\n if (!mermaidInitialized) {\n mermaid.initialize(buildMermaidConfig());\n mermaidInitialized = true;\n }\n return mermaid;\n};\n\nconst svgTagPattern = /<svg\\b([^>])>/i;\nconst svgClassAttrPattern = /\\bclass=\"([^\"])\"/i;\n\nconst withSvgClass = (svg: string, className: string): string => {\n return svg.replace(svgTagPattern, (_fullMatch, attrs) => {\n const attributes = String(attrs ?? '');\n if (svgClassAttrPattern.test(attributes)) {\n return `<svg${attributes.replace(\n svgClassAttrPattern,\n (_match, existingClasses) => {\n return ` class=\"${existingClasses} ${className}\"`;\n },\n )}>`;\n }\n return `<svg class=\"${className}\"${attributes}>`;\n });\n};\n\nexport const MarkdownMermaidBlock = ({ code }: Props): JSX.Element => {\n const { t } = useUiTranslation();\n const reactId = useId();\n const diagramId = useMemo(() => {\n return `mermaid-${reactId.replace(/:/g, '')}`;\n }, [reactId]);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const bindFunctionsRef = useRef<RenderResult['bindFunctions'] \| null>(null);\n const [svg, setSvg] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n let cancelled = false;\n bindFunctionsRef.current = null;\n setSvg(null);\n setError(null);\n setIsLoading(true);\n\n if (code.trim() === '') {\n setError(t('markdown.mermaid.empty'));\n setIsLoading(false);\n return () => {\n cancelled = true;\n };\n }\n\n const renderDiagram = async (): Promise<void> => {\n try {\n const mermaid = await getMermaid();\n const result = await mermaid.render(diagramId, code);\n if (cancelled) {\n return;\n }\n bindFunctionsRef.current = result.bindFunctions ?? null;\n setSvg(withSvgClass(result.svg, styles.diagramSvg));\n } catch {\n if (!cancelled) {\n setError(t('markdown.mermaid.renderFailed'));\n }\n } finally {\n if (!cancelled) {\n setIsLoading(false);\n }\n }\n };\n\n renderDiagram().catch(() => {\n if (!cancelled) {\n setError(t('markdown.mermaid.renderFailed'));\n setIsLoading(false);\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, diagramId, t]);\n\n useEffect(() => {\n const container = containerRef.current;\n const bindFunctions = bindFunctionsRef.current;\n if (container == null \|\| bindFunctions == null) {\n return;\n }\n bindFunctions(container);\n }, [svg]);\n\n let placeholderText: string \| null = null;\n if (isLoading) {\n placeholderText = t('markdown.mermaid.rendering');\n }\n\n let highlighted: JSX.Element \| null = null;\n if (svg != null) {\n highlighted = (\n <div\n className={styles.diagram}\n ref={containerRef}\n role=\"img\"\n aria-label={t('markdown.mermaid.diagramLabel')}\n dangerouslySetInnerHTML={{ __html: svg }}\n />\n );\n } else if (error != null) {\n highlighted = (\n <div className={styles.error}>\n <p className={styles.errorTitle}>{error}</p>\n <pre className={styles.errorCode}>{code}</pre>\n </div>\n );\n }\n\n return (\n <HighlightCode\n badgeLabel=\"MERMAID\"\n copyCode={code}\n highlighted={highlighted}\n fallbackCodeText={code}\n placeholderText={placeholderText}\n />\n );\n};\n\nexport default MarkdownMermaidBlock;\n"],"mappings":"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"}
1	+ {"version":3,"file":"MarkdownMermaidBlock.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownMermaidBlock.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState, type JSX } from 'react';\nimport type { Mermaid, MermaidConfig, RenderResult } from 'mermaid';\n\nimport { HighlightCode } from '../../highlight/HighlightCode.js';\nimport { colors } from '../../../../theme/colors.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { useUiTranslation } from '../../../../i18n/useUiTranslation.js';\n\nimport * as styles from './MarkdownMermaidBlock.css.js';\n\ntype Props = {\n code: string;\n};\n\nconst cssVarPattern = /^var\$(--[^,)+]+)(?:,[^)]+)?\$$/;\n\nconst resolveCssValue = (\n value: string,\n fallback?: string,\n): string \| undefined => {\n const trimmed = value.trim();\n const match = cssVarPattern.exec(trimmed);\n if (match == null) {\n if (trimmed !== '') {\n return trimmed;\n }\n return fallback;\n }\n const varName = match[1];\n if (varName == null \|\| varName === '') {\n return fallback;\n }\n if (typeof window === 'undefined') {\n return fallback;\n }\n const resolved = getComputedStyle(document.documentElement)\n .getPropertyValue(varName)\n .trim();\n if (resolved === '') {\n return fallback;\n }\n return resolved;\n};\n\nconst buildMermaidConfig = (): MermaidConfig => {\n const themeVariables = {\n background: 'transparent',\n fontFamily: resolveCssValue(vars.fontFamily.sans),\n lineColor: resolveCssValue(vars.colors.brandDarkGray, colors.brandDarkGray),\n primaryBorderColor: resolveCssValue(\n vars.colors.primaryLight,\n colors.primaryLight,\n ),\n primaryColor: resolveCssValue(\n vars.colors.primaryLight,\n colors.primaryLight,\n ),\n primaryTextColor: resolveCssValue(\n vars.colors.brandDarkGray,\n colors.brandDarkGray,\n ),\n };\n\n return {\n startOnLoad: false,\n securityLevel: 'strict',\n suppressErrorRendering: true,\n theme: 'base',\n themeVariables: Object.fromEntries(\n Object.entries(themeVariables).filter(([, value]) => {\n return value != null && value !== '';\n }),\n ),\n };\n};\n\nlet mermaidPromise: Promise<Mermaid> \| null = null;\nlet mermaidInitialized = false;\n\nconst getMermaid = async (): Promise<Mermaid> => {\n mermaidPromise ??= import('mermaid').then((module) => {\n return module.default;\n });\n const mermaid = await mermaidPromise;\n if (!mermaidInitialized) {\n mermaid.initialize(buildMermaidConfig());\n mermaidInitialized = true;\n }\n return mermaid;\n};\n\nconst svgTagPattern = /<svg\\b([^>])>/i;\nconst svgClassAttrPattern = /\\bclass=\"([^\"])\"/i;\n\nconst withSvgClass = (svg: string, className: string): string => {\n return svg.replace(svgTagPattern, (_fullMatch, attrs) => {\n const attributes = String(attrs ?? '');\n if (svgClassAttrPattern.test(attributes)) {\n return `<svg${attributes.replace(\n svgClassAttrPattern,\n (_match, existingClasses) => {\n return ` class=\"${existingClasses} ${className}\"`;\n },\n )}>`;\n }\n return `<svg class=\"${className}\"${attributes}>`;\n });\n};\n\nexport const MarkdownMermaidBlock = ({ code }: Props): JSX.Element => {\n const { t } = useUiTranslation();\n const reactId = useId();\n const diagramId = useMemo(() => {\n return `mermaid-${reactId.replace(/:/g, '')}`;\n }, [reactId]);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const bindFunctionsRef = useRef<RenderResult['bindFunctions'] \| null>(null);\n const [svg, setSvg] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n let cancelled = false;\n bindFunctionsRef.current = null;\n setSvg(null);\n setError(null);\n setIsLoading(true);\n\n if (code.trim() === '') {\n setError(t('markdown.mermaid.empty'));\n setIsLoading(false);\n return () => {\n cancelled = true;\n };\n }\n\n const renderDiagram = async (): Promise<void> => {\n try {\n const mermaid = await getMermaid();\n const result = await mermaid.render(diagramId, code);\n if (cancelled) {\n return;\n }\n bindFunctionsRef.current = result.bindFunctions ?? null;\n setSvg(withSvgClass(result.svg, styles.diagramSvg));\n } catch {\n if (!cancelled) {\n setError(t('markdown.mermaid.renderFailed'));\n }\n } finally {\n if (!cancelled) {\n setIsLoading(false);\n }\n }\n };\n\n renderDiagram().catch(() => {\n if (!cancelled) {\n setError(t('markdown.mermaid.renderFailed'));\n setIsLoading(false);\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [code, diagramId, t]);\n\n useEffect(() => {\n const container = containerRef.current;\n const bindFunctions = bindFunctionsRef.current;\n if (container == null \|\| bindFunctions == null) {\n return;\n }\n bindFunctions(container);\n }, [svg]);\n\n let placeholderText: string \| null = null;\n if (isLoading) {\n placeholderText = t('markdown.mermaid.rendering');\n }\n\n let highlighted: JSX.Element \| null = null;\n if (svg != null) {\n highlighted = (\n <div\n className={styles.diagram}\n ref={containerRef}\n role=\"img\"\n aria-label={t('markdown.mermaid.diagramLabel')}\n dangerouslySetInnerHTML={{ __html: svg }}\n />\n );\n } else if (error != null) {\n highlighted = (\n <div className={styles.error}>\n <p className={styles.errorTitle}>{error}</p>\n <pre className={styles.errorCode}>{code}</pre>\n </div>\n );\n }\n\n return (\n <HighlightCode\n badgeLabel=\"MERMAID\"\n copyCode={code}\n highlighted={highlighted}\n fallbackCodeText={code}\n placeholderText={placeholderText}\n />\n );\n};\n\nexport default MarkdownMermaidBlock;\n"],"mappings":"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"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownParagraph.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownParagraph.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownParagraph.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport {\n markdownFontSizeVar,\n markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const paragraph = style([\n sprinkles({\n marginBottom: 3,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.base),\n lineHeight: '1.7',\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownParagraph.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownParagraph.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport {\n markdownFontSizeVar,\n markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const paragraph = style([\n sprinkles({\n marginBottom: 3,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.base),\n lineHeight: '1.7',\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownStrong.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownStrong.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownStrong.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const strong = style([\n sprinkles({\n fontWeight: 'semibold',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownStrong.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownStrong.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const strong = style([\n sprinkles({\n fontWeight: 'semibold',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownSubscript.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownSubscript.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownSubscript.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const subscript = style([\n sprinkles({\n fontSize: 'xs',\n verticalAlign: 'sub',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownSubscript.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownSubscript.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const subscript = style([\n sprinkles({\n fontSize: 'xs',\n verticalAlign: 'sub',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownSuperscript.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownSuperscript.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownSuperscript.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const superscript = style([\n sprinkles({\n fontSize: 'xs',\n verticalAlign: 'super',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownSuperscript.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownSuperscript.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const superscript = style([\n sprinkles({\n fontSize: 'xs',\n verticalAlign: 'super',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownTable.css.js CHANGED Viewed

@@ -1,5 +1,6 @@
 /* empty css                                         */
 /* empty css                             */
+/* empty css                             */
 //#region src/atomic/molecules/markdown/components/MarkdownTable.css.ts
 var e = "tr18yy0 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbn8h txvbqbusr txvbqbuvn", t = "tr18yy2 tr18yy1 txvbqbbl8 txvbqbana txvbqbtqh txvbqb17w0";
 //#endregion

package/lib/esm/atomic/molecules/markdown/components/MarkdownTable.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownTable.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTable.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport {\n markdownFontSizeVar,\n markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const tableWrapper = sprinkles({\n backgroundColor: 'surface',\n borderColor: 'border',\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n marginBottom: 4,\n overflow: 'hidden',\n overflowX: 'auto',\n});\n\nexport const table = style([\n sprinkles({\n borderCollapse: 'separate',\n borderSpacing: 0,\n minWidth: 'full',\n width: 'full',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.sm),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownTable.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTable.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport {\n markdownFontSizeVar,\n markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const tableWrapper = sprinkles({\n backgroundColor: 'surface',\n borderColor: 'border',\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderWidth: 'default',\n marginBottom: 4,\n overflow: 'hidden',\n overflowX: 'auto',\n});\n\nexport const table = style([\n sprinkles({\n borderCollapse: 'separate',\n borderSpacing: 0,\n minWidth: 'full',\n width: 'full',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.sm),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownTableCaption.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownTableCaption.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableCaption.css.ts"],"sourcesContent":["import { sprinkles } from '../../../../theme/sprinkles.css.js';\n// import { vars } from '../../../../theme/themeContract.js';\n\nexport const tableCaption = sprinkles({\n color: 'textSecondary',\n fontSize: 'sm',\n marginTop: 2,\n textAlign: 'left',\n});\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownTableCaption.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableCaption.css.ts"],"sourcesContent":["import { sprinkles } from '../../../../theme/sprinkles.css.js';\n// import { vars } from '../../../../theme/themeContract.css.js';\n\nexport const tableCaption = sprinkles({\n color: 'textSecondary',\n fontSize: 'sm',\n marginTop: 2,\n textAlign: 'left',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownTableCell.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownTableCell.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableCell.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const tableCell = style([\n sprinkles({\n borderBottomColor: 'borderLight',\n borderBottomWidth: 'default',\n borderStyle: 'solid',\n paddingX: 3,\n paddingY: 3,\n verticalAlign: 'top',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownTableCell.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableCell.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const tableCell = style([\n sprinkles({\n borderBottomColor: 'borderLight',\n borderBottomWidth: 'default',\n borderStyle: 'solid',\n paddingX: 3,\n paddingY: 3,\n verticalAlign: 'top',\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownTableRow.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownTableRow.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableRow.css.ts"],"sourcesContent":["import { sprinkles } from '../../../../theme/sprinkles.css.js';\n\n// import { vars } from '../../../../theme/themeContract.js';\n\nexport const tableRow = sprinkles({\n // borderBottom: `${vars.borderWidth.default} solid ${vars.colors['slate-200']}`,\n});\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownTableRow.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTableRow.css.ts"],"sourcesContent":["import { sprinkles } from '../../../../theme/sprinkles.css.js';\n\n// import { vars } from '../../../../theme/themeContract.css.js';\n\nexport const tableRow = sprinkles({\n // borderBottom: `${vars.borderWidth.default} solid ${vars.colors['slate-200']}`,\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/components/MarkdownTaskListItem.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownTaskListItem.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTaskListItem.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const taskItem = style([\n sprinkles({\n cursor: 'default',\n listStyleType: 'none',\n marginBottom: 2,\n paddingLeft: 1,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n\nexport const taskContent = sprinkles({\n alignItems: 'flex-start',\n display: 'flex',\n gap: 2,\n});\n\nexport const icon = sprinkles({\n flexShrink: 0,\n height: 4,\n marginTop: 0.5,\n width: 4,\n});\n"],"mappings":""}
1	+ {"version":3,"file":"MarkdownTaskListItem.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownTaskListItem.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport { markdownTextColorVar } from '../markdownVars.css.js';\n\nexport const taskItem = style([\n sprinkles({\n cursor: 'default',\n listStyleType: 'none',\n marginBottom: 2,\n paddingLeft: 1,\n }),\n {\n color: fallbackVar(markdownTextColorVar, vars.colors.text),\n selectors: {\n '&:last-child': {\n marginBottom: 0,\n },\n },\n },\n]);\n\nexport const taskContent = sprinkles({\n alignItems: 'flex-start',\n display: 'flex',\n gap: 2,\n});\n\nexport const icon = sprinkles({\n flexShrink: 0,\n height: 4,\n marginTop: 0.5,\n width: 4,\n});\n"],"mappings":""}