@traefik-labs/faency 12.2.1 → 12.2.2

package/dist/styles/themeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeContext.js","sources":["../../styles/themeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { darkColors, lightColors } from '../colors';\nimport { PrimaryColor, themes } from './themes.css';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\nexport type { PrimaryColor };\n\ninterface ThemeContextValue {\n  mode: ThemeMode;\n  resolvedTheme: 'light' | 'dark';\n  primaryColor: PrimaryColor;\n  colors: typeof lightColors | typeof darkColors;\n  setMode: (mode: ThemeMode) => void;\n  setPrimaryColor: (color: PrimaryColor) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface VanillaExtractThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: ThemeMode;\n  primaryColor?: PrimaryColor;\n  forcedTheme?: 'light' | 'dark';\n}\n\nexport function VanillaExtractThemeProvider({\n  children,\n  defaultTheme = 'system',\n  primaryColor = 'blue',\n  forcedTheme,\n}: VanillaExtractThemeProviderProps) {\n  const [mode, setMode] = useState<ThemeMode>(defaultTheme);\n  const [appliedPrimaryColor, setPrimaryColor] = useState<PrimaryColor>(primaryColor);\n  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => {\n    if (forcedTheme) {\n      return forcedTheme;\n    }\n    if (typeof window !== 'undefined') {\n      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return 'light';\n  });\n\n  useEffect(() => {\n    setPrimaryColor(primaryColor);\n  }, [primaryColor]);\n\n  useEffect(() => {\n    if (forcedTheme) {\n      setSystemTheme(forcedTheme);\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(mediaQuery.matches ? 'dark' : 'light');\n\n    const handler = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? 'dark' : 'light');\n    };\n\n    mediaQuery.addEventListener('change', handler);\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [forcedTheme]);\n\n  const resolvedTheme: 'light' | 'dark' = forcedTheme || (mode === 'system' ? systemTheme : mode);\n\n  const baseColors = resolvedTheme === 'dark' ? darkColors : lightColors;\n\n  const semanticColors =\n    resolvedTheme === 'dark'\n      ? {\n          primary: darkColors[`${appliedPrimaryColor}9`],\n          contentBg: darkColors['00dp'],\n          hiContrast: 'white',\n          loContrast: darkColors.deepBlue2,\n          focusOutline: 'hsl(216, 100%, 64%)',\n          divider: 'hsl(209, 29%, 19%)',\n          background: '#0a0a0a',\n          foreground: '#ffffff',\n          muted: '#1a1a1a',\n          mutedForeground: '#b4b4b4',\n          card: '#1a1a1a',\n          cardForeground: '#ffffff',\n          popover: '#1a1a1a',\n          popoverForeground: '#ffffff',\n          border: '#3a3a3a',\n          input: '#3a3a3a',\n          accent: '#3b82f6',\n          accentForeground: '#ffffff',\n          destructive: '#dc2626',\n          destructiveForeground: '#ffffff',\n          ring: '#60a5fa',\n        }\n      : {\n          primary: lightColors[`${appliedPrimaryColor}9`],\n          contentBg: lightColors['00dp'],\n          hiContrast: lightColors.deepBlue11,\n          loContrast: 'white',\n          focusOutline: 'hsl(216, 100%, 64%)',\n          divider: 'hsl(207, 10%, 82%)',\n          background: '#fcfcfc',\n          foreground: '#1a1a1a',\n          muted: '#f4f4f4',\n          mutedForeground: '#646464',\n          card: '#ffffff',\n          cardForeground: '#1a1a1a',\n          popover: '#ffffff',\n          popoverForeground: '#1a1a1a',\n          border: '#e3e3e3',\n          input: '#e3e3e3',\n          accent: '#60a5fa',\n          accentForeground: '#ffffff',\n          destructive: '#dc2626',\n          destructiveForeground: '#ffffff',\n          ring: '#3b82f6',\n        };\n\n  const colors = {\n    ...baseColors,\n    ...semanticColors,\n  };\n\n  // Use useLayoutEffect to apply theme class synchronously before paint\n  useLayoutEffect(() => {\n    const themeClass = themes[resolvedTheme][appliedPrimaryColor];\n\n    Object.values(themes.light).forEach((cls) => document.body.classList.remove(cls));\n    Object.values(themes.dark).forEach((cls) => document.body.classList.remove(cls));\n\n    document.body.classList.add(themeClass);\n\n    return () => {\n      document.body.classList.remove(themeClass);\n    };\n  }, [resolvedTheme, appliedPrimaryColor]);\n\n  const contextValue: ThemeContextValue = {\n    mode,\n    resolvedTheme,\n    primaryColor: appliedPrimaryColor,\n    colors,\n    setMode,\n    setPrimaryColor,\n  };\n\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;\n}\n\nexport function useVanillaExtractTheme() {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error('useVanillaExtractTheme must be used within a VanillaExtractThemeProvider');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;;;AAiBA,MAAM,eAAe,cAA6C,MAAS;AASpE,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AACF,GAAqC;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAoB,YAAY;AACxD,QAAM,CAAC,qBAAqB,eAAe,IAAI,SAAuB,YAAY;AAClF,QAAM,CAAC,aAAa,cAAc,IAAI,SAA2B,MAAM;AACrE,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AACA,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAAA,IAC9E;AACA,WAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,oBAAgB,YAAY;AAAA,EAC9B,GAAG,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,aAAa;AACf,qBAAe,WAAW;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,mBAAe,WAAW,UAAU,SAAS,OAAO;AAEpD,UAAM,UAAU,CAAC,MAA2B;AAC1C,qBAAe,EAAE,UAAU,SAAS,OAAO;AAAA,IAC7C;AAEA,eAAW,iBAAiB,UAAU,OAAO;AAC7C,WAAO,MAAM,WAAW,oBAAoB,UAAU,OAAO;AAAA,EAC/D,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,gBAAkC,gBAAgB,SAAS,WAAW,cAAc;AAE1F,QAAM,aAAa,kBAAkB,SAAS,aAAa;AAE3D,QAAM,iBACJ,kBAAkB,SACd;AAAA,IACE,SAAS,WAAW,GAAG,mBAAmB,GAAG;AAAA,IAC7C,WAAW,WAAW,MAAM;AAAA,IAC5B,YAAY;AAAA,IACZ,YAAY,WAAW;AAAA,IACvB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,MAAM;AAAA,EAAA,IAER;AAAA,IACE,SAAS,YAAY,GAAG,mBAAmB,GAAG;AAAA,IAC9C,WAAW,YAAY,MAAM;AAAA,IAC7B,YAAY,YAAY;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,MAAM;AAAA,EAAA;AAGd,QAAM,SAAS;AAAA,IACb,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAIL,kBAAgB,MAAM;AACpB,UAAM,aAAa,OAAO,aAAa,EAAE,mBAAmB;AAE5D,WAAO,OAAO,OAAO,KAAK,EAAE,QAAQ,CAAC,QAAQ,SAAS,KAAK,UAAU,OAAO,GAAG,CAAC;AAChF,WAAO,OAAO,OAAO,IAAI,EAAE,QAAQ,CAAC,QAAQ,SAAS,KAAK,UAAU,OAAO,GAAG,CAAC;AAE/E,aAAS,KAAK,UAAU,IAAI,UAAU;AAEtC,WAAO,MAAM;AACX,eAAS,KAAK,UAAU,OAAO,UAAU;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,eAAe,mBAAmB,CAAC;AAEvC,QAAM,eAAkC;AAAA,IACtC;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,6BAAQ,aAAa,UAAb,EAAsB,OAAO,cAAe,UAAS;AAC/D;AAEO,SAAS,yBAAyB;AACvC,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,0EAA0E;AAAA,EAC5F;AACA,SAAO;AACT;"}
+{"version":3,"file":"themeContext.js","names":[],"sources":["../../styles/themeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { darkColors, lightColors } from '../colors';\nimport { PrimaryColor, themes } from './themes.css';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\nexport type { PrimaryColor };\n\ninterface ThemeContextValue {\n  mode: ThemeMode;\n  resolvedTheme: 'light' | 'dark';\n  primaryColor: PrimaryColor;\n  colors: typeof lightColors | typeof darkColors;\n  setMode: (mode: ThemeMode) => void;\n  setPrimaryColor: (color: PrimaryColor) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface VanillaExtractThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: ThemeMode;\n  primaryColor?: PrimaryColor;\n  forcedTheme?: 'light' | 'dark';\n}\n\nexport function VanillaExtractThemeProvider({\n  children,\n  defaultTheme = 'system',\n  primaryColor = 'blue',\n  forcedTheme,\n}: VanillaExtractThemeProviderProps) {\n  const [mode, setMode] = useState<ThemeMode>(defaultTheme);\n  const [appliedPrimaryColor, setPrimaryColor] = useState<PrimaryColor>(primaryColor);\n  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => {\n    if (forcedTheme) {\n      return forcedTheme;\n    }\n    if (typeof window !== 'undefined') {\n      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return 'light';\n  });\n\n  useEffect(() => {\n    setPrimaryColor(primaryColor);\n  }, [primaryColor]);\n\n  useEffect(() => {\n    if (forcedTheme) {\n      setSystemTheme(forcedTheme);\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    setSystemTheme(mediaQuery.matches ? 'dark' : 'light');\n\n    const handler = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? 'dark' : 'light');\n    };\n\n    mediaQuery.addEventListener('change', handler);\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [forcedTheme]);\n\n  const resolvedTheme: 'light' | 'dark' = forcedTheme || (mode === 'system' ? systemTheme : mode);\n\n  const baseColors = resolvedTheme === 'dark' ? darkColors : lightColors;\n\n  const semanticColors =\n    resolvedTheme === 'dark'\n      ? {\n          primary: darkColors[`${appliedPrimaryColor}9`],\n          contentBg: darkColors['00dp'],\n          hiContrast: 'white',\n          loContrast: darkColors.deepBlue2,\n          focusOutline: 'hsl(216, 100%, 64%)',\n          divider: 'hsl(209, 29%, 19%)',\n          background: '#0a0a0a',\n          foreground: '#ffffff',\n          muted: '#1a1a1a',\n          mutedForeground: '#b4b4b4',\n          card: '#1a1a1a',\n          cardForeground: '#ffffff',\n          popover: '#1a1a1a',\n          popoverForeground: '#ffffff',\n          border: '#3a3a3a',\n          input: '#3a3a3a',\n          accent: '#3b82f6',\n          accentForeground: '#ffffff',\n          destructive: '#dc2626',\n          destructiveForeground: '#ffffff',\n          ring: '#60a5fa',\n        }\n      : {\n          primary: lightColors[`${appliedPrimaryColor}9`],\n          contentBg: lightColors['00dp'],\n          hiContrast: lightColors.deepBlue11,\n          loContrast: 'white',\n          focusOutline: 'hsl(216, 100%, 64%)',\n          divider: 'hsl(207, 10%, 82%)',\n          background: '#fcfcfc',\n          foreground: '#1a1a1a',\n          muted: '#f4f4f4',\n          mutedForeground: '#646464',\n          card: '#ffffff',\n          cardForeground: '#1a1a1a',\n          popover: '#ffffff',\n          popoverForeground: '#1a1a1a',\n          border: '#e3e3e3',\n          input: '#e3e3e3',\n          accent: '#60a5fa',\n          accentForeground: '#ffffff',\n          destructive: '#dc2626',\n          destructiveForeground: '#ffffff',\n          ring: '#3b82f6',\n        };\n\n  const colors = {\n    ...baseColors,\n    ...semanticColors,\n  };\n\n  // Use useLayoutEffect to apply theme class synchronously before paint\n  useLayoutEffect(() => {\n    const themeClass = themes[resolvedTheme][appliedPrimaryColor];\n\n    Object.values(themes.light).forEach((cls) => document.body.classList.remove(cls));\n    Object.values(themes.dark).forEach((cls) => document.body.classList.remove(cls));\n\n    document.body.classList.add(themeClass);\n\n    return () => {\n      document.body.classList.remove(themeClass);\n    };\n  }, [resolvedTheme, appliedPrimaryColor]);\n\n  const contextValue: ThemeContextValue = {\n    mode,\n    resolvedTheme,\n    primaryColor: appliedPrimaryColor,\n    colors,\n    setMode,\n    setPrimaryColor,\n  };\n\n  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;\n}\n\nexport function useVanillaExtractTheme() {\n  const context = useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error('useVanillaExtractTheme must be used within a VanillaExtractThemeProvider');\n  }\n  return context;\n}\n"],"mappings":";;;;;AAiBA,IAAM,eAAe,cAA6C,KAAA,EAAU;AAS5E,SAAgB,4BAA4B,EAC1C,UACA,eAAe,UACf,eAAe,QACf,eACmC;CACnC,MAAM,CAAC,MAAM,WAAW,SAAoB,aAAa;CACzD,MAAM,CAAC,qBAAqB,mBAAmB,SAAuB,aAAa;CACnF,MAAM,CAAC,aAAa,kBAAkB,eAAiC;AACrE,MAAI,YACF,QAAO;AAET,MAAI,OAAO,WAAW,YACpB,QAAO,OAAO,WAAW,+BAA+B,CAAC,UAAU,SAAS;AAE9E,SAAO;GACP;AAEF,iBAAgB;AACd,kBAAgB,aAAa;IAC5B,CAAC,aAAa,CAAC;AAElB,iBAAgB;AACd,MAAI,aAAa;AACf,kBAAe,YAAY;AAC3B;;EAGF,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,iBAAe,WAAW,UAAU,SAAS,QAAQ;EAErD,MAAM,WAAW,MAA2B;AAC1C,kBAAe,EAAE,UAAU,SAAS,QAAQ;;AAG9C,aAAW,iBAAiB,UAAU,QAAQ;AAC9C,eAAa,WAAW,oBAAoB,UAAU,QAAQ;IAC7D,CAAC,YAAY,CAAC;CAEjB,MAAM,gBAAkC,gBAAgB,SAAS,WAAW,cAAc;CAE1F,MAAM,aAAa,kBAAkB,SAAS,aAAa;CAE3D,MAAM,iBACJ,kBAAkB,SACd;EACE,SAAS,WAAW,GAAG,oBAAoB;EAC3C,WAAW,WAAW;EACtB,YAAY;EACZ,YAAY,WAAW;EACvB,cAAc;EACd,SAAS;EACT,YAAY;EACZ,YAAY;EACZ,OAAO;EACP,iBAAiB;EACjB,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,MAAM;EACP,GACD;EACE,SAAS,YAAY,GAAG,oBAAoB;EAC5C,WAAW,YAAY;EACvB,YAAY,YAAY;EACxB,YAAY;EACZ,cAAc;EACd,SAAS;EACT,YAAY;EACZ,YAAY;EACZ,OAAO;EACP,iBAAiB;EACjB,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,MAAM;EACP;CAEP,MAAM,SAAS;EACb,GAAG;EACH,GAAG;EACJ;AAGD,uBAAsB;EACpB,MAAM,aAAa,OAAO,eAAe;AAEzC,SAAO,OAAO,OAAO,MAAM,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;AACjF,SAAO,OAAO,OAAO,KAAK,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;AAEhF,WAAS,KAAK,UAAU,IAAI,WAAW;AAEvC,eAAa;AACX,YAAS,KAAK,UAAU,OAAO,WAAW;;IAE3C,CAAC,eAAe,oBAAoB,CAAC;CAExC,MAAM,eAAkC;EACtC;EACA;EACA,cAAc;EACd;EACA;EACA;EACD;AAED,QAAO,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAAe;EAAiC,CAAA;;AAGvF,SAAgB,yBAAyB;CACvC,MAAM,UAAU,WAAW,aAAa;AACxC,KAAI,YAAY,KAAA,EACd,OAAM,IAAI,MAAM,2EAA2E;AAE7F,QAAO"}

package/dist/styles/themes.css.cjs

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                                   */
 ;/* empty css                                                     */
 ;/* empty css                                                                 */
@@ -14,10 +12,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                                         */
 ;/* empty css                            */
 ;/* empty css                            */
-var themes = { light: { neon: "_6oteex1", blue: "_6oteex0", orange: "_6oteex2", red: "_6oteex3", green: "_6oteex4", deepBlue: "_6oteex5", grayBlue: "_6oteex6" }, dark: { neon: "_6oteex8", blue: "_6oteex7", orange: "_6oteex9", red: "_6oteexa", green: "_6oteexb", deepBlue: "_6oteexc", grayBlue: "_6oteexd" } };
+//#region styles/themes.css.ts
+var themes = {
+	light: {
+		neon: "_6oteex1",
+		blue: "_6oteex0",
+		orange: "_6oteex2",
+		red: "_6oteex3",
+		green: "_6oteex4",
+		deepBlue: "_6oteex5",
+		grayBlue: "_6oteex6"
+	},
+	dark: {
+		neon: "_6oteex8",
+		blue: "_6oteex7",
+		orange: "_6oteex9",
+		red: "_6oteexa",
+		green: "_6oteexb",
+		deepBlue: "_6oteexc",
+		grayBlue: "_6oteexd"
+	}
+};
 var lightTheme = "_6oteex0";
 var darkTheme = "_6oteex7";
+//#endregion
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
 exports.themes = themes;
-//# sourceMappingURL=themes.css.cjs.map
+
+//# sourceMappingURL=themes.css.cjs.map

package/dist/styles/themes.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"themes.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"themes.css.cjs","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n  buttonSwitchDarkTheme,\n  buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n  codeBlockDarkTheme,\n  codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n  iconButtonDarkTheme,\n  iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n  fonts: {\n    rubik:\n      'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n  },\n  space: {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '48px',\n    '8': '64px',\n    '9': '80px',\n  },\n  sizes: {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '40px',\n    '8': '48px',\n    '9': '64px',\n    '10': '80px',\n  },\n  fontSizes: {\n    '0': '11px',\n    '1': '12px',\n    '2': '13px',\n    '3': '14px',\n    '4': '16px',\n    '5': '18px',\n    '6': '20px',\n    '7': '22px',\n    '8': '24px',\n    '9': '26px',\n    '10': '28px',\n    '11': '32px',\n    '12': '38px',\n  },\n  fontWeights: {\n    light: '300',\n    regular: '400',\n    medium: '500',\n    semiBold: '600',\n    bold: '700',\n  },\n  radii: {\n    '1': '4px',\n    '2': '6px',\n    '3': '8px',\n    '4': '12px',\n    round: '50%',\n    pill: '9999px',\n  },\n  zIndices: {\n    '1': '100',\n    '2': '200',\n    '3': '300',\n    '4': '400',\n    max: '999',\n  },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n  return {\n    '1': colors[`${colorName}1`],\n    '2': colors[`${colorName}2`],\n    '3': colors[`${colorName}3`],\n    '4': colors[`${colorName}4`],\n    '5': colors[`${colorName}5`],\n    '6': colors[`${colorName}6`],\n    '7': colors[`${colorName}7`],\n    '8': colors[`${colorName}8`],\n    '9': colors[`${colorName}9`],\n    '10': colors[`${colorName}10`],\n    '11': colors[`${colorName}11`],\n    '12': colors[`${colorName}12`],\n    A1: colors[`${colorName}A1`],\n    A2: colors[`${colorName}A2`],\n    A3: colors[`${colorName}A3`],\n    A4: colors[`${colorName}A4`],\n    A5: colors[`${colorName}A5`],\n    A6: colors[`${colorName}A6`],\n    A7: colors[`${colorName}A7`],\n    A8: colors[`${colorName}A8`],\n    A9: colors[`${colorName}A9`],\n    A10: colors[`${colorName}A10`],\n    A11: colors[`${colorName}A11`],\n    A12: colors[`${colorName}A12`],\n  };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n  colorName: string,\n  colors: typeof lightColors | typeof darkColors,\n) {\n  return {\n    '1': colors[`${colorName}1`],\n    '2': colors[`${colorName}2`],\n    '3': colors[`${colorName}3`],\n    '4': colors[`${colorName}4`],\n    '5': colors[`${colorName}5`],\n    '6': colors[`${colorName}6`],\n    '7': colors[`${colorName}7`],\n    '8': colors[`${colorName}8`],\n    '9': colors[`${colorName}9`],\n    '10': colors[`${colorName}10`],\n    '11': colors[`${colorName}11`],\n    '12': colors[`${colorName}12`],\n  };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n  return {\n    neon: extractColorScale('neon', colors),\n    blue: extractColorScale('blue', colors),\n    orange: extractColorScale('orange', colors),\n    red: extractColorScale('red', colors),\n    green: extractColorScale('green', colors),\n    deepBlue: extractColorScale('deepBlue', colors),\n    grayBlue: extractColorScale('grayBlue', colors),\n    gray: extractColorScale('gray', colors),\n    slate: extractColorScale('slate', colors),\n    purple: extractColorScale('purple', colors),\n    whiteA: extractSimpleColorScale('whiteA', colors),\n    blackA: extractSimpleColorScale('blackA', colors),\n\n    // Elevation\n    '00dp': colors['00dp'],\n    '01dp': colors['01dp'],\n    '02dp': colors['02dp'],\n    '03dp': colors['03dp'],\n    '04dp': colors['04dp'],\n    '05dp': colors['05dp'],\n    '06dp': colors['06dp'],\n    '08dp': colors['08dp'],\n    '12dp': colors['12dp'],\n    '16dp': colors['16dp'],\n    '24dp': colors['24dp'],\n  };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n  return {\n    buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n    buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n    buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n    buttonSecondaryBorder: lightColors.grayBlue9,\n    buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n      .setAlpha(0.19)\n      .toHslString(),\n    buttonRedBg: lightColors.red9,\n    buttonRedFocusBg: lightColors.redA8,\n  };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n  return {\n    buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n    buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n    buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n      .lighten(10)\n      .toHslString(),\n    buttonSecondaryBorder: darkColors.grayBlue9,\n    buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n    buttonRedBg: darkColors.red10,\n    buttonRedFocusBg: darkColors.redA11,\n  };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n  return {\n    buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n  };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n  return {\n    buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n  };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n  contentBg: lightColors['00dp'],\n  hiContrast: lightColors.deepBlue11,\n  loContrast: 'white',\n  focusOutline: 'hsl(216, 100%, 64%)',\n  divider: 'hsl(207, 10%, 82%)',\n  background: '#fcfcfc',\n  foreground: '#1a1a1a',\n  muted: '#f4f4f4',\n  mutedForeground: '#646464',\n  card: '#ffffff',\n  cardForeground: '#1a1a1a',\n  popover: '#ffffff',\n  popoverForeground: '#1a1a1a',\n  border: '#e3e3e3',\n  input: '#e3e3e3',\n  accent: '#60a5fa',\n  accentForeground: '#ffffff',\n  destructive: '#dc2626',\n  destructiveForeground: '#ffffff',\n  ring: '#3b82f6',\n  ...badgeLightTheme,\n  ...cardLightTheme,\n  ...codeBlockLightTheme,\n  ...panelLightTheme,\n  ...textLightTheme,\n  textInvalid: lightColors.red9,\n  textRed: lightColors.red10,\n  ...headingLightTheme,\n  ...iconButtonLightTheme,\n  ...inputLightTheme,\n  ...textareaLightTheme,\n  ...buttonLightTheme,\n  buttonPrimaryText: 'white',\n  buttonRedText: 'white',\n  buttonRedHoverText: lightColors.red10,\n  ...buttonSwitchLightTheme,\n  buttonSwitchContainerBg: lightColors['02dp'],\n  buttonSwitchOffColor: lightColors.deepBlue11,\n  iconButtonHoverBorder: lightColors.slate9,\n  iconButtonHoverBackground: lightColors.slateA3,\n  iconButtonFocusBorder: lightColors.slate10,\n  ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.blue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('blue'),\n    ...getButtonSwitchLightColors('blue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n  colors: {\n    primary: lightColors.neon9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('neon'),\n    ...getButtonSwitchLightColors('neon'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n  colors: {\n    primary: lightColors.orange9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('orange'),\n    ...getButtonSwitchLightColors('orange'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n  colors: {\n    primary: lightColors.red9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('red'),\n    ...getButtonSwitchLightColors('red'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n  colors: {\n    primary: lightColors.green9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('green'),\n    ...getButtonSwitchLightColors('green'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.deepBlue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('deepBlue'),\n    ...getButtonSwitchLightColors('deepBlue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.grayBlue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('grayBlue'),\n    ...getButtonSwitchLightColors('grayBlue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n  contentBg: darkColors['00dp'],\n  hiContrast: 'white',\n  loContrast: darkColors.deepBlue2,\n  focusOutline: 'hsl(216, 100%, 64%)',\n  divider: 'hsl(209, 29%, 19%)',\n  background: '#0a0a0a',\n  foreground: '#ffffff',\n  muted: '#1a1a1a',\n  mutedForeground: '#b4b4b4',\n  card: '#1a1a1a',\n  cardForeground: '#ffffff',\n  popover: '#1a1a1a',\n  popoverForeground: '#ffffff',\n  border: '#3a3a3a',\n  input: '#3a3a3a',\n  accent: '#3b82f6',\n  accentForeground: '#ffffff',\n  destructive: '#dc2626',\n  destructiveForeground: '#ffffff',\n  ring: '#60a5fa',\n  ...badgeDarkTheme,\n  ...cardDarkTheme,\n  ...codeBlockDarkTheme,\n  ...panelDarkTheme,\n  ...textDarkTheme,\n  textInvalid: darkColors.red9,\n  textRed: darkColors.red10,\n  ...headingDarkTheme,\n  ...iconButtonDarkTheme,\n  ...inputDarkTheme,\n  ...textareaDarkTheme,\n  ...buttonDarkTheme,\n  buttonPrimaryText: darkColors.deepBlue2,\n  buttonRedText: 'white',\n  buttonRedHoverText: darkColors.red10,\n  ...buttonSwitchDarkTheme,\n  buttonSwitchContainerBg: darkColors['02dp'],\n  buttonSwitchOffColor: 'white',\n  buttonSwitchActiveColor: darkColors.deepBlue2,\n  iconButtonBackground: darkColors.deepBlue2,\n  iconButtonHoverBorder: darkColors.deepBlue6,\n  iconButtonHoverBackground: darkColors.slateA4,\n  iconButtonFocusBorder: darkColors.deepBlue7,\n  ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.blue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('blue'),\n    ...getButtonSwitchDarkColors('blue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n  colors: {\n    primary: darkColors.neon9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('neon'),\n    ...getButtonSwitchDarkColors('neon'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n  colors: {\n    primary: darkColors.orange9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('orange'),\n    ...getButtonSwitchDarkColors('orange'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n  colors: {\n    primary: darkColors.red9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('red'),\n    ...getButtonSwitchDarkColors('red'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n  colors: {\n    primary: darkColors.green9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('green'),\n    ...getButtonSwitchDarkColors('green'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.deepBlue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('deepBlue'),\n    ...getButtonSwitchDarkColors('deepBlue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.grayBlue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('grayBlue'),\n    ...getButtonSwitchDarkColors('grayBlue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n  light: {\n    neon: lightThemeNeon,\n    blue: lightThemeBlue,\n    orange: lightThemeOrange,\n    red: lightThemeRed,\n    green: lightThemeGreen,\n    deepBlue: lightThemeDeepBlue,\n    grayBlue: lightThemeGrayBlue,\n  },\n  dark: {\n    neon: darkThemeNeon,\n    blue: darkThemeBlue,\n    orange: darkThemeOrange,\n    red: darkThemeRed,\n    green: darkThemeGreen,\n    deepBlue: darkThemeDeepBlue,\n    grayBlue: darkThemeGrayBlue,\n  },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}

package/dist/styles/themes.css.js

@@ -12,12 +12,30 @@
 /* empty css                                                       */
 /* empty css                          */
 /* empty css                          */
-var themes = { light: { neon: "_6oteex1", blue: "_6oteex0", orange: "_6oteex2", red: "_6oteex3", green: "_6oteex4", deepBlue: "_6oteex5", grayBlue: "_6oteex6" }, dark: { neon: "_6oteex8", blue: "_6oteex7", orange: "_6oteex9", red: "_6oteexa", green: "_6oteexb", deepBlue: "_6oteexc", grayBlue: "_6oteexd" } };
+//#region styles/themes.css.ts
+var themes = {
+	light: {
+		neon: "_6oteex1",
+		blue: "_6oteex0",
+		orange: "_6oteex2",
+		red: "_6oteex3",
+		green: "_6oteex4",
+		deepBlue: "_6oteex5",
+		grayBlue: "_6oteex6"
+	},
+	dark: {
+		neon: "_6oteex8",
+		blue: "_6oteex7",
+		orange: "_6oteex9",
+		red: "_6oteexa",
+		green: "_6oteexb",
+		deepBlue: "_6oteexc",
+		grayBlue: "_6oteexd"
+	}
+};
 var lightTheme = "_6oteex0";
 var darkTheme = "_6oteex7";
-export {
-  darkTheme,
-  lightTheme,
-  themes
-};
-//# sourceMappingURL=themes.css.js.map
+//#endregion
+export { darkTheme, lightTheme, themes };
+
+//# sourceMappingURL=themes.css.js.map

package/dist/styles/themes.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"themes.css.js","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n  buttonSwitchDarkTheme,\n  buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n  codeBlockDarkTheme,\n  codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n  iconButtonDarkTheme,\n  iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n  fonts: {\n    rubik:\n      'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n  },\n  space: {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '48px',\n    '8': '64px',\n    '9': '80px',\n  },\n  sizes: {\n    '1': '4px',\n    '2': '8px',\n    '3': '16px',\n    '4': '20px',\n    '5': '24px',\n    '6': '32px',\n    '7': '40px',\n    '8': '48px',\n    '9': '64px',\n    '10': '80px',\n  },\n  fontSizes: {\n    '0': '11px',\n    '1': '12px',\n    '2': '13px',\n    '3': '14px',\n    '4': '16px',\n    '5': '18px',\n    '6': '20px',\n    '7': '22px',\n    '8': '24px',\n    '9': '26px',\n    '10': '28px',\n    '11': '32px',\n    '12': '38px',\n  },\n  fontWeights: {\n    light: '300',\n    regular: '400',\n    medium: '500',\n    semiBold: '600',\n    bold: '700',\n  },\n  radii: {\n    '1': '4px',\n    '2': '6px',\n    '3': '8px',\n    '4': '12px',\n    round: '50%',\n    pill: '9999px',\n  },\n  zIndices: {\n    '1': '100',\n    '2': '200',\n    '3': '300',\n    '4': '400',\n    max: '999',\n  },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n  return {\n    '1': colors[`${colorName}1`],\n    '2': colors[`${colorName}2`],\n    '3': colors[`${colorName}3`],\n    '4': colors[`${colorName}4`],\n    '5': colors[`${colorName}5`],\n    '6': colors[`${colorName}6`],\n    '7': colors[`${colorName}7`],\n    '8': colors[`${colorName}8`],\n    '9': colors[`${colorName}9`],\n    '10': colors[`${colorName}10`],\n    '11': colors[`${colorName}11`],\n    '12': colors[`${colorName}12`],\n    A1: colors[`${colorName}A1`],\n    A2: colors[`${colorName}A2`],\n    A3: colors[`${colorName}A3`],\n    A4: colors[`${colorName}A4`],\n    A5: colors[`${colorName}A5`],\n    A6: colors[`${colorName}A6`],\n    A7: colors[`${colorName}A7`],\n    A8: colors[`${colorName}A8`],\n    A9: colors[`${colorName}A9`],\n    A10: colors[`${colorName}A10`],\n    A11: colors[`${colorName}A11`],\n    A12: colors[`${colorName}A12`],\n  };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n  colorName: string,\n  colors: typeof lightColors | typeof darkColors,\n) {\n  return {\n    '1': colors[`${colorName}1`],\n    '2': colors[`${colorName}2`],\n    '3': colors[`${colorName}3`],\n    '4': colors[`${colorName}4`],\n    '5': colors[`${colorName}5`],\n    '6': colors[`${colorName}6`],\n    '7': colors[`${colorName}7`],\n    '8': colors[`${colorName}8`],\n    '9': colors[`${colorName}9`],\n    '10': colors[`${colorName}10`],\n    '11': colors[`${colorName}11`],\n    '12': colors[`${colorName}12`],\n  };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n  return {\n    neon: extractColorScale('neon', colors),\n    blue: extractColorScale('blue', colors),\n    orange: extractColorScale('orange', colors),\n    red: extractColorScale('red', colors),\n    green: extractColorScale('green', colors),\n    deepBlue: extractColorScale('deepBlue', colors),\n    grayBlue: extractColorScale('grayBlue', colors),\n    gray: extractColorScale('gray', colors),\n    slate: extractColorScale('slate', colors),\n    purple: extractColorScale('purple', colors),\n    whiteA: extractSimpleColorScale('whiteA', colors),\n    blackA: extractSimpleColorScale('blackA', colors),\n\n    // Elevation\n    '00dp': colors['00dp'],\n    '01dp': colors['01dp'],\n    '02dp': colors['02dp'],\n    '03dp': colors['03dp'],\n    '04dp': colors['04dp'],\n    '05dp': colors['05dp'],\n    '06dp': colors['06dp'],\n    '08dp': colors['08dp'],\n    '12dp': colors['12dp'],\n    '16dp': colors['16dp'],\n    '24dp': colors['24dp'],\n  };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n  return {\n    buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n    buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n    buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n    buttonSecondaryBorder: lightColors.grayBlue9,\n    buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n      .setAlpha(0.19)\n      .toHslString(),\n    buttonRedBg: lightColors.red9,\n    buttonRedFocusBg: lightColors.redA8,\n  };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n  return {\n    buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n    buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n    buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n      .lighten(10)\n      .toHslString(),\n    buttonSecondaryBorder: darkColors.grayBlue9,\n    buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n    buttonRedBg: darkColors.red10,\n    buttonRedFocusBg: darkColors.redA11,\n  };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n  return {\n    buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n  };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n  return {\n    buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n  };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n  contentBg: lightColors['00dp'],\n  hiContrast: lightColors.deepBlue11,\n  loContrast: 'white',\n  focusOutline: 'hsl(216, 100%, 64%)',\n  divider: 'hsl(207, 10%, 82%)',\n  background: '#fcfcfc',\n  foreground: '#1a1a1a',\n  muted: '#f4f4f4',\n  mutedForeground: '#646464',\n  card: '#ffffff',\n  cardForeground: '#1a1a1a',\n  popover: '#ffffff',\n  popoverForeground: '#1a1a1a',\n  border: '#e3e3e3',\n  input: '#e3e3e3',\n  accent: '#60a5fa',\n  accentForeground: '#ffffff',\n  destructive: '#dc2626',\n  destructiveForeground: '#ffffff',\n  ring: '#3b82f6',\n  ...badgeLightTheme,\n  ...cardLightTheme,\n  ...codeBlockLightTheme,\n  ...panelLightTheme,\n  ...textLightTheme,\n  textInvalid: lightColors.red9,\n  textRed: lightColors.red10,\n  ...headingLightTheme,\n  ...iconButtonLightTheme,\n  ...inputLightTheme,\n  ...textareaLightTheme,\n  ...buttonLightTheme,\n  buttonPrimaryText: 'white',\n  buttonRedText: 'white',\n  buttonRedHoverText: lightColors.red10,\n  ...buttonSwitchLightTheme,\n  buttonSwitchContainerBg: lightColors['02dp'],\n  buttonSwitchOffColor: lightColors.deepBlue11,\n  iconButtonHoverBorder: lightColors.slate9,\n  iconButtonHoverBackground: lightColors.slateA3,\n  iconButtonFocusBorder: lightColors.slate10,\n  ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.blue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('blue'),\n    ...getButtonSwitchLightColors('blue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n  colors: {\n    primary: lightColors.neon9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('neon'),\n    ...getButtonSwitchLightColors('neon'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n  colors: {\n    primary: lightColors.orange9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('orange'),\n    ...getButtonSwitchLightColors('orange'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n  colors: {\n    primary: lightColors.red9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('red'),\n    ...getButtonSwitchLightColors('red'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n  colors: {\n    primary: lightColors.green9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('green'),\n    ...getButtonSwitchLightColors('green'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.deepBlue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('deepBlue'),\n    ...getButtonSwitchLightColors('deepBlue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n  colors: {\n    primary: lightColors.grayBlue9, // Set primary to the actual color value\n    ...lightSemanticColors,\n    ...getButtonLightColors('grayBlue'),\n    ...getButtonSwitchLightColors('grayBlue'),\n    ...createBaseColors(lightColors),\n  },\n  ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n  contentBg: darkColors['00dp'],\n  hiContrast: 'white',\n  loContrast: darkColors.deepBlue2,\n  focusOutline: 'hsl(216, 100%, 64%)',\n  divider: 'hsl(209, 29%, 19%)',\n  background: '#0a0a0a',\n  foreground: '#ffffff',\n  muted: '#1a1a1a',\n  mutedForeground: '#b4b4b4',\n  card: '#1a1a1a',\n  cardForeground: '#ffffff',\n  popover: '#1a1a1a',\n  popoverForeground: '#ffffff',\n  border: '#3a3a3a',\n  input: '#3a3a3a',\n  accent: '#3b82f6',\n  accentForeground: '#ffffff',\n  destructive: '#dc2626',\n  destructiveForeground: '#ffffff',\n  ring: '#60a5fa',\n  ...badgeDarkTheme,\n  ...cardDarkTheme,\n  ...codeBlockDarkTheme,\n  ...panelDarkTheme,\n  ...textDarkTheme,\n  textInvalid: darkColors.red9,\n  textRed: darkColors.red10,\n  ...headingDarkTheme,\n  ...iconButtonDarkTheme,\n  ...inputDarkTheme,\n  ...textareaDarkTheme,\n  ...buttonDarkTheme,\n  buttonPrimaryText: darkColors.deepBlue2,\n  buttonRedText: 'white',\n  buttonRedHoverText: darkColors.red10,\n  ...buttonSwitchDarkTheme,\n  buttonSwitchContainerBg: darkColors['02dp'],\n  buttonSwitchOffColor: 'white',\n  buttonSwitchActiveColor: darkColors.deepBlue2,\n  iconButtonBackground: darkColors.deepBlue2,\n  iconButtonHoverBorder: darkColors.deepBlue6,\n  iconButtonHoverBackground: darkColors.slateA4,\n  iconButtonFocusBorder: darkColors.deepBlue7,\n  ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.blue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('blue'),\n    ...getButtonSwitchDarkColors('blue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n  colors: {\n    primary: darkColors.neon9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('neon'),\n    ...getButtonSwitchDarkColors('neon'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n  colors: {\n    primary: darkColors.orange9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('orange'),\n    ...getButtonSwitchDarkColors('orange'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n  colors: {\n    primary: darkColors.red9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('red'),\n    ...getButtonSwitchDarkColors('red'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n  colors: {\n    primary: darkColors.green9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('green'),\n    ...getButtonSwitchDarkColors('green'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.deepBlue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('deepBlue'),\n    ...getButtonSwitchDarkColors('deepBlue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n  colors: {\n    primary: darkColors.grayBlue9, // Set primary to the actual color value\n    ...darkSemanticColors,\n    ...getButtonDarkColors('grayBlue'),\n    ...getButtonSwitchDarkColors('grayBlue'),\n    ...createBaseColors(darkColors),\n  },\n  ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n  light: {\n    neon: lightThemeNeon,\n    blue: lightThemeBlue,\n    orange: lightThemeOrange,\n    red: lightThemeRed,\n    green: lightThemeGreen,\n    deepBlue: lightThemeDeepBlue,\n    grayBlue: lightThemeGrayBlue,\n  },\n  dark: {\n    neon: darkThemeNeon,\n    blue: darkThemeBlue,\n    orange: darkThemeOrange,\n    red: darkThemeRed,\n    green: darkThemeGreen,\n    deepBlue: darkThemeDeepBlue,\n    grayBlue: darkThemeGrayBlue,\n  },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}

package/dist/utils/deepMerge.cjs

@@ -0,0 +1,25 @@
+//#region utils/deepMerge.ts
+function isPlainObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+/**
+* Recursively merges two plain objects. Source properties win on conflict.
+* Nested plain objects are merged rather than replaced.
+* Arrays and non-plain values are always replaced by the source value.
+*/
+function deepMerge(target, source) {
+	if (!source) return target;
+	const result = { ...target };
+	for (const key of Object.keys(source)) {
+		if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+		const sourceVal = source[key];
+		const targetVal = result[key];
+		if (isPlainObject(sourceVal) && isPlainObject(targetVal)) result[key] = deepMerge(targetVal, sourceVal);
+		else if (sourceVal !== void 0) result[key] = sourceVal;
+	}
+	return result;
+}
+//#endregion
+exports.deepMerge = deepMerge;
+
+//# sourceMappingURL=deepMerge.cjs.map

package/dist/utils/deepMerge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepMerge.cjs","names":[],"sources":["../../utils/deepMerge.ts"],"sourcesContent":["function isPlainObject(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * Recursively merges two plain objects. Source properties win on conflict.\n * Nested plain objects are merged rather than replaced.\n * Arrays and non-plain values are always replaced by the source value.\n */\nexport function deepMerge<T extends Record<string, any>, S extends Record<string, any>>(\n  target: T,\n  source?: S | null,\n): T & S {\n  if (!source) return target as T & S;\n\n  const result: Record<string, any> = { ...target };\n\n  for (const key of Object.keys(source)) {\n    if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;\n    const sourceVal = source[key];\n    const targetVal = result[key];\n\n    if (isPlainObject(sourceVal) && isPlainObject(targetVal)) {\n      result[key] = deepMerge(targetVal, sourceVal);\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal;\n    }\n  }\n\n  return result as T & S;\n}\n"],"mappings":";AAAA,SAAS,cAAc,OAAkD;AACvE,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM;;;;;;;AAQ7E,SAAgB,UACd,QACA,QACO;AACP,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,SAA8B,EAAE,GAAG,QAAQ;AAEjD,MAAK,MAAM,OAAO,OAAO,KAAK,OAAO,EAAE;AACrC,MAAI,QAAQ,eAAe,QAAQ,iBAAiB,QAAQ,YAAa;EACzE,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;AAEzB,MAAI,cAAc,UAAU,IAAI,cAAc,UAAU,CACtD,QAAO,OAAO,UAAU,WAAW,UAAU;WACpC,cAAc,KAAA,EACvB,QAAO,OAAO;;AAIlB,QAAO"}

package/dist/utils/deepMerge.js

@@ -0,0 +1,25 @@
+//#region utils/deepMerge.ts
+function isPlainObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+/**
+* Recursively merges two plain objects. Source properties win on conflict.
+* Nested plain objects are merged rather than replaced.
+* Arrays and non-plain values are always replaced by the source value.
+*/
+function deepMerge(target, source) {
+	if (!source) return target;
+	const result = { ...target };
+	for (const key of Object.keys(source)) {
+		if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+		const sourceVal = source[key];
+		const targetVal = result[key];
+		if (isPlainObject(sourceVal) && isPlainObject(targetVal)) result[key] = deepMerge(targetVal, sourceVal);
+		else if (sourceVal !== void 0) result[key] = sourceVal;
+	}
+	return result;
+}
+//#endregion
+export { deepMerge };
+
+//# sourceMappingURL=deepMerge.js.map

package/dist/utils/deepMerge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepMerge.js","names":[],"sources":["../../utils/deepMerge.ts"],"sourcesContent":["function isPlainObject(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * Recursively merges two plain objects. Source properties win on conflict.\n * Nested plain objects are merged rather than replaced.\n * Arrays and non-plain values are always replaced by the source value.\n */\nexport function deepMerge<T extends Record<string, any>, S extends Record<string, any>>(\n  target: T,\n  source?: S | null,\n): T & S {\n  if (!source) return target as T & S;\n\n  const result: Record<string, any> = { ...target };\n\n  for (const key of Object.keys(source)) {\n    if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;\n    const sourceVal = source[key];\n    const targetVal = result[key];\n\n    if (isPlainObject(sourceVal) && isPlainObject(targetVal)) {\n      result[key] = deepMerge(targetVal, sourceVal);\n    } else if (sourceVal !== undefined) {\n      result[key] = sourceVal;\n    }\n  }\n\n  return result as T & S;\n}\n"],"mappings":";AAAA,SAAS,cAAc,OAAkD;AACvE,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM;;;;;;;AAQ7E,SAAgB,UACd,QACA,QACO;AACP,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,SAA8B,EAAE,GAAG,QAAQ;AAEjD,MAAK,MAAM,OAAO,OAAO,KAAK,OAAO,EAAE;AACrC,MAAI,QAAQ,eAAe,QAAQ,iBAAiB,QAAQ,YAAa;EACzE,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;AAEzB,MAAI,cAAc,UAAU,IAAI,cAAc,UAAU,CACtD,QAAO,OAAO,UAAU,WAAW,UAAU;WACpC,cAAc,KAAA,EACvB,QAAO,OAAO;;AAIlB,QAAO"}

package/dist/utils/getPrimaryColorInfo.cjs

@@ -1,11 +1,11 @@
-"use strict";
-const getPrimaryColorInfo = (primaryColor, colors) => ({
-  name: primaryColor,
-  value: colors[`${primaryColor}9`],
-  token: `$${primaryColor}9`,
-  helpers: {
-    pickScale: (scale, options = { alpha: false }) => `$${primaryColor}${options.alpha ? "A" : ""}${scale}`
-  }
+//#region utils/getPrimaryColorInfo.ts
+var getPrimaryColorInfo = (primaryColor, colors) => ({
+	name: primaryColor,
+	value: colors[`${primaryColor}9`],
+	token: `$${primaryColor}9`,
+	helpers: { pickScale: (scale, options = { alpha: false }) => `$${primaryColor}${options.alpha ? "A" : ""}${scale}` }
 });
-module.exports = getPrimaryColorInfo;
-//# sourceMappingURL=getPrimaryColorInfo.cjs.map
+//#endregion
+exports.default = getPrimaryColorInfo;
+
+//# sourceMappingURL=getPrimaryColorInfo.cjs.map

package/dist/utils/getPrimaryColorInfo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getPrimaryColorInfo.cjs","sources":["../../utils/getPrimaryColorInfo.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorMap } from '../colors';\nimport { PrimaryColor } from '../stitches.config';\n\ntype ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\ntype PickScale = (scale: ColorScale, options?: { alpha: boolean }) => Property.Color;\n\nexport type ColorInfo = {\n  name: PrimaryColor;\n  token: Property.Color;\n  value: string;\n  helpers: {\n    pickScale: PickScale;\n  };\n};\n\nconst getPrimaryColorInfo = (primaryColor: PrimaryColor, colors: ColorMap): ColorInfo => ({\n  name: primaryColor,\n  value: colors[`${primaryColor}9`],\n  token: `$${primaryColor}9`,\n  helpers: {\n    pickScale: (scale, options = { alpha: false }) =>\n      `$${primaryColor}${options.alpha ? 'A' : ''}${scale}`,\n  },\n});\n\nexport default getPrimaryColorInfo;\n"],"names":[],"mappings":";AAkBA,MAAM,sBAAsB,CAAC,cAA4B,YAAiC;AAAA,EACxF,MAAM;AAAA,EACN,OAAO,OAAO,GAAG,YAAY,GAAG;AAAA,EAChC,OAAO,IAAI,YAAY;AAAA,EACvB,SAAS;AAAA,IACP,WAAW,CAAC,OAAO,UAAU,EAAE,OAAO,MAAA,MACpC,IAAI,YAAY,GAAG,QAAQ,QAAQ,MAAM,EAAE,GAAG,KAAK;AAAA,EAAA;AAEzD;;"}
+{"version":3,"file":"getPrimaryColorInfo.cjs","names":[],"sources":["../../utils/getPrimaryColorInfo.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorMap } from '../colors';\nimport { PrimaryColor } from '../stitches.config';\n\ntype ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\ntype PickScale = (scale: ColorScale, options?: { alpha: boolean }) => Property.Color;\n\nexport type ColorInfo = {\n  name: PrimaryColor;\n  token: Property.Color;\n  value: string;\n  helpers: {\n    pickScale: PickScale;\n  };\n};\n\nconst getPrimaryColorInfo = (primaryColor: PrimaryColor, colors: ColorMap): ColorInfo => ({\n  name: primaryColor,\n  value: colors[`${primaryColor}9`],\n  token: `$${primaryColor}9`,\n  helpers: {\n    pickScale: (scale, options = { alpha: false }) =>\n      `$${primaryColor}${options.alpha ? 'A' : ''}${scale}`,\n  },\n});\n\nexport default getPrimaryColorInfo;\n"],"mappings":";AAkBA,IAAM,uBAAuB,cAA4B,YAAiC;CACxF,MAAM;CACN,OAAO,OAAO,GAAG,aAAa;CAC9B,OAAO,IAAI,aAAa;CACxB,SAAS,EACP,YAAY,OAAO,UAAU,EAAE,OAAO,OAAO,KAC3C,IAAI,eAAe,QAAQ,QAAQ,MAAM,KAAK,SACjD;CACF"}

package/dist/utils/getPrimaryColorInfo.js

@@ -1,12 +1,11 @@
-const getPrimaryColorInfo = (primaryColor, colors) => ({
-  name: primaryColor,
-  value: colors[`${primaryColor}9`],
-  token: `$${primaryColor}9`,
-  helpers: {
-    pickScale: (scale, options = { alpha: false }) => `$${primaryColor}${options.alpha ? "A" : ""}${scale}`
-  }
+//#region utils/getPrimaryColorInfo.ts
+var getPrimaryColorInfo = (primaryColor, colors) => ({
+	name: primaryColor,
+	value: colors[`${primaryColor}9`],
+	token: `$${primaryColor}9`,
+	helpers: { pickScale: (scale, options = { alpha: false }) => `$${primaryColor}${options.alpha ? "A" : ""}${scale}` }
 });
-export {
-  getPrimaryColorInfo as default
-};
-//# sourceMappingURL=getPrimaryColorInfo.js.map
+//#endregion
+export { getPrimaryColorInfo as default };
+
+//# sourceMappingURL=getPrimaryColorInfo.js.map

package/dist/utils/getPrimaryColorInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"getPrimaryColorInfo.js","sources":["../../utils/getPrimaryColorInfo.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorMap } from '../colors';\nimport { PrimaryColor } from '../stitches.config';\n\ntype ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\ntype PickScale = (scale: ColorScale, options?: { alpha: boolean }) => Property.Color;\n\nexport type ColorInfo = {\n  name: PrimaryColor;\n  token: Property.Color;\n  value: string;\n  helpers: {\n    pickScale: PickScale;\n  };\n};\n\nconst getPrimaryColorInfo = (primaryColor: PrimaryColor, colors: ColorMap): ColorInfo => ({\n  name: primaryColor,\n  value: colors[`${primaryColor}9`],\n  token: `$${primaryColor}9`,\n  helpers: {\n    pickScale: (scale, options = { alpha: false }) =>\n      `$${primaryColor}${options.alpha ? 'A' : ''}${scale}`,\n  },\n});\n\nexport default getPrimaryColorInfo;\n"],"names":[],"mappings":"AAkBA,MAAM,sBAAsB,CAAC,cAA4B,YAAiC;AAAA,EACxF,MAAM;AAAA,EACN,OAAO,OAAO,GAAG,YAAY,GAAG;AAAA,EAChC,OAAO,IAAI,YAAY;AAAA,EACvB,SAAS;AAAA,IACP,WAAW,CAAC,OAAO,UAAU,EAAE,OAAO,MAAA,MACpC,IAAI,YAAY,GAAG,QAAQ,QAAQ,MAAM,EAAE,GAAG,KAAK;AAAA,EAAA;AAEzD;"}
+{"version":3,"file":"getPrimaryColorInfo.js","names":[],"sources":["../../utils/getPrimaryColorInfo.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorMap } from '../colors';\nimport { PrimaryColor } from '../stitches.config';\n\ntype ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\ntype PickScale = (scale: ColorScale, options?: { alpha: boolean }) => Property.Color;\n\nexport type ColorInfo = {\n  name: PrimaryColor;\n  token: Property.Color;\n  value: string;\n  helpers: {\n    pickScale: PickScale;\n  };\n};\n\nconst getPrimaryColorInfo = (primaryColor: PrimaryColor, colors: ColorMap): ColorInfo => ({\n  name: primaryColor,\n  value: colors[`${primaryColor}9`],\n  token: `$${primaryColor}9`,\n  helpers: {\n    pickScale: (scale, options = { alpha: false }) =>\n      `$${primaryColor}${options.alpha ? 'A' : ''}${scale}`,\n  },\n});\n\nexport default getPrimaryColorInfo;\n"],"mappings":";AAkBA,IAAM,uBAAuB,cAA4B,YAAiC;CACxF,MAAM;CACN,OAAO,OAAO,GAAG,aAAa;CAC9B,OAAO,IAAI,aAAa;CACxB,SAAS,EACP,YAAY,OAAO,UAAU,EAAE,OAAO,OAAO,KAC3C,IAAI,eAAe,QAAQ,QAAQ,MAAM,KAAK,SACjD;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@traefik-labs/faency",
   "description": "Traefik Labs design system",
-  "version": "12.2.1",
+  "version": "12.2.2",
   "license": "Apache-2.0",
   "keywords": [
     "traefiklabs",
@@ -41,7 +41,7 @@
     "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build",
     "test": "jest --watch",
     "test:ci": "jest --ci --silent",
-    "prepare": "husky install",
+    "prepare": "husky",
     "pre-commit": "lint-staged"
   },
   "peerDependencies": {
@@ -49,133 +49,104 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@babel/core": "^7.15.4",
-    "@babel/plugin-transform-react-pure-annotations": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@floating-ui/react": "^0.26.25",
-    "@mdx-js/react": "^2.1.5",
-    "@radix-ui/colors": "^2.1.0",
-    "@radix-ui/react-accessible-icon": "^1.1.2",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-aspect-ratio": "^1.0.1",
-    "@radix-ui/react-avatar": "^1.0.1",
-    "@radix-ui/react-checkbox": "^1.0.1",
-    "@radix-ui/react-context-menu": "^2.0.1",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.1",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-navigation-menu": "^1.2.0",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-portal": "^1.0.1",
-    "@radix-ui/react-progress": "^1.0.1",
-    "@radix-ui/react-radio-group": "^1.1.0",
-    "@radix-ui/react-separator": "^1.0.1",
-    "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-slot": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-tabs": "^1.0.1",
-    "@radix-ui/react-toggle": "^1.0.1",
-    "@radix-ui/react-toggle-group": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "@radix-ui/react-use-layout-effect": "^1.0.0",
-    "@radix-ui/react-visually-hidden": "^1.0.1",
-    "@rehookify/datepicker": "^6.6.7",
-    "@semantic-release/commit-analyzer": "^13.0.1",
-    "@semantic-release/github": "^12.0.6",
-    "@semantic-release/npm": "^13.1.5",
-    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@floating-ui/react": "0.27.19",
+    "@radix-ui/colors": "2.1.0",
+    "@radix-ui/react-accessible-icon": "1.1.8",
+    "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-alert-dialog": "1.1.15",
+    "@radix-ui/react-aspect-ratio": "1.1.8",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-context-menu": "2.2.16",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-icons": "1.3.2",
+    "@radix-ui/react-id": "1.1.1",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-navigation-menu": "1.2.14",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-portal": "1.1.10",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@radix-ui/react-use-layout-effect": "1.1.1",
+    "@radix-ui/react-visually-hidden": "1.2.4",
+    "@rehookify/datepicker": "6.6.8",
     "@stitches/react": "1.2.8",
-    "@storybook/addon-docs": "10.2.10",
-    "@storybook/addon-links": "10.2.10",
-    "@storybook/builder-vite": "10.2.10",
-    "@storybook/react-vite": "10.2.10",
-    "@types/jest": "^27.4.1",
-    "@types/jest-axe": "^3.5.3",
-    "@types/lodash.merge": "^4.6.6",
-    "@types/node": "^24.10.1",
+    "@vanilla-extract/css": "1.20.1",
+    "@vanilla-extract/dynamic": "2.1.5",
+    "@vanilla-extract/recipes": "0.5.7",
+    "date-fns": "4.1.0",
+    "prism-react-renderer": "2.4.1",
+    "prismjs": "1.30.0",
+    "tinycolor2": "1.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.2",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@eslint/js": "9.39.4",
+    "@semantic-release/commit-analyzer": "13.0.1",
+    "@semantic-release/github": "12.0.6",
+    "@semantic-release/npm": "13.1.5",
+    "@semantic-release/release-notes-generator": "14.1.0",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/builder-vite": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/jest": "30.0.0",
+    "@types/jest-axe": "3.5.9",
+    "@types/node": "24.12.2",
     "@types/prismjs": "1.26.6",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
-    "@types/tinycolor2": "^1.4.3",
-    "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/dynamic": "^2.1.5",
-    "@vanilla-extract/recipes": "^0.5.7",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.1.1",
-    "babel-loader": "^8.2.2",
-    "conventional-changelog-conventionalcommits": "^9.2.0",
-    "cross-env": "^7.0.3",
-    "date-fns": "^4.1.0",
-    "husky": "^8.0.0",
+    "@types/tinycolor2": "1.4.6",
+    "@vanilla-extract/vite-plugin": "5.2.2",
+    "@vitejs/plugin-react": "6.0.1",
+    "@vueless/storybook-dark-mode": "10.0.7",
+    "babel-jest": "30.3.0",
+    "conventional-changelog-conventionalcommits": "9.3.1",
+    "cross-env": "10.1.0",
+    "eslint": "9.39.4",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-simple-import-sort": "13.0.0",
+    "eslint-plugin-storybook": "10.3.5",
+    "globals": "17.4.0",
+    "husky": "9.1.7",
+    "jest": "30.3.0",
+    "jest-axe": "10.0.0",
+    "jest-environment-jsdom": "30.3.0",
     "lint-staged": "13.1.0",
-    "lodash.merge": "^4.6.2",
-    "np": "^8.0.4",
-    "patch-package": "^8.0.0",
-    "prettier": "^3.6.2",
-    "prism-react-renderer": "2.4.1",
-    "prismjs": "1.30.0",
+    "np": "11.0.3",
+    "patch-package": "8.0.1",
+    "prettier": "3.8.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "^25.0.3",
-    "storybook": "10.2.10",
-    "tinycolor2": "^1.4.2",
-    "typescript": "^5.8.3",
-    "use-debounce": "9.0.2",
-    "vite": "7.1.11",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "devDependencies": {
-    "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.32.0",
-    "@storybook/addon-docs": "10.2.10",
-    "@storybook/addon-links": "10.2.10",
-    "@storybook/builder-vite": "10.2.10",
-    "@storybook/react-vite": "10.2.10",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@vueless/storybook-dark-mode": "^10.0.3",
-    "babel-jest": "^27.5.1",
-    "eslint": "^9.32.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.3",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "10.2.10",
-    "globals": "^15.8.0",
-    "jest": "^27.5.1",
-    "jest-axe": "^6.0.0",
-    "storybook": "10.2.10",
-    "typescript-eslint": "^8.38.0",
-    "webpack": "5.104.1"
+    "semantic-release": "25.0.3",
+    "storybook": "10.3.5",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.58.1",
+    "vite": "8.0.8",
+    "vite-plugin-dts": "4.5.4"
   },
   "resolutions": {
-    "@typescript-eslint/project-service@^8.56.0": "8.56.0",
-    "@typescript-eslint/scope-manager@^8.56.0": "8.56.0",
-    "@typescript-eslint/tsconfig-utils@^8.56.0": "8.56.0",
-    "@typescript-eslint/types@^8.56.0": "8.56.0",
-    "@typescript-eslint/typescript-estree@^8.56.0": "8.56.0",
-    "@typescript-eslint/utils@^8.56.0": "8.56.0",
-    "@typescript-eslint/visitor-keys@^8.56.0": "8.56.0",
-    "baseline-browser-mapping@^2.9.0": "2.10.8",
-    "browserslist@^4.28.1": "4.28.1",
-    "caniuse-lite@^1.0.30001759": "1.0.30001779",
-    "conventional-changelog-angular@^8.0.0": "8.3.0",
-    "conventional-changelog-conventionalcommits@^9.2.0": "9.2.0",
-    "conventional-commits-parser@^6.0.0": "6.3.0",
-    "electron-to-chromium@^1.5.263": "1.5.313",
-    "minimatch@^10.0.3": "10.2.4",
-    "minimatch@^10.1.1": "10.2.4",
-    "minimatch@^10.2.1": "10.2.4",
-    "minimatch@^10.2.2": "10.2.4",
-    "minimatch@^10.2.4": "10.2.4",
-    "undici@^7.0.0": "7.24.4"
+    "baseline-browser-mapping@^2.10.12": "2.10.17",
+    "electron-to-chromium@^1.5.328": "1.5.334"
   },
   "publishConfig": {
     "access": "public",
@@ -212,7 +183,7 @@
     ]
   },
   "engines": {
-    "node": ">=24.11.0"
+    "node": ">=24.14.1"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.13.0+sha512.5c20ba010c99815433e5c8453112165e673f1c7948d8d2b267f4b5e52097538658388ebc9f9580656d9b75c5cc996f990f611f99304a2197d4c56d21eea370e7"
 }

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}