@traefik-labs/faency 12.0.7

package/dist/styles/cssProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssProps.js","sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n  css?: {\n    p?: SpacingToken;\n    pt?: SpacingToken;\n    pr?: SpacingToken;\n    pb?: SpacingToken;\n    pl?: SpacingToken;\n    px?: SpacingToken;\n    py?: SpacingToken;\n\n    m?: SpacingToken;\n    mt?: SpacingToken;\n    mr?: SpacingToken;\n    mb?: SpacingToken;\n    ml?: SpacingToken;\n    mx?: SpacingToken;\n    my?: SpacingToken;\n\n    ta?: 'left' | 'center' | 'right' | 'justify';\n    fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n    fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n    ai?: FlexAlign;\n    ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n    jc?: FlexJustify;\n    as?: 'auto' | FlexAlign;\n    fg?: 0 | 1;\n    fs?: 0 | 1;\n    fb?: SizeToken;\n\n    bc?: string;\n    br?: string;\n    btrr?: string;\n    bbrr?: string;\n    bblr?: string;\n    btlr?: string;\n    bs?: string;\n    c?: string;\n\n    width?: SizeToken;\n    height?: SizeToken;\n    size?: SizeToken;\n\n    ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n    oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n    pe?: 'auto' | 'none' | 'all';\n    us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n    fontSize?: string;\n    fontWeight?: string;\n    lh?: string | number;\n\n    [key: string]: any;\n  };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n  return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n  const spaceMap: Record<string, string> = {\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  return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n  const sizeMap: Record<string, string> = {\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  return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n  const radiiMap: Record<string, string> = {\n    '1': '4px',\n    '2': '6px',\n    '3': '8px',\n    '4': '12px',\n    round: '50%',\n    pill: '9999px',\n  };\n  return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n  const fontSizeMap: Record<string, string> = {\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  return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n  const fontWeightMap: Record<string, string> = {\n    light: '300',\n    regular: '400',\n    medium: '500',\n    semiBold: '600',\n    bold: '700',\n  };\n  return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const spaceValue = getSpaceValue(tokenValue);\n    if (spaceValue !== '0px') {\n      (style as any)[property] = spaceValue;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applyRadii(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const radiiValue = getRadiiValue(tokenValue);\n    if (radiiValue !== '0px') {\n      (style as any)[property] = radiiValue;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applyColor(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n  colors?: Record<string, any>,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const colorToken = value.slice(1);\n    if (colors && colorToken in colors) {\n      (style as any)[property] = colors[colorToken];\n    } else {\n      (style as any)[property] = value;\n    }\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\nfunction applySize(\n  style: React.CSSProperties,\n  property: keyof React.CSSProperties,\n  value: string,\n): void {\n  if (typeof value === 'string' && value.startsWith('$')) {\n    const tokenValue = processToken(value);\n    const sizeValue = getSizeValue(tokenValue);\n    (style as any)[property] = sizeValue;\n  } else {\n    (style as any)[property] = value;\n  }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n  css: CSSProps['css'] = {},\n  colors?: Record<string, any>,\n): {\n  style: React.CSSProperties;\n  vars: Record<string, string>;\n} {\n  const style: React.CSSProperties = {};\n  const vars: Record<string, string> = {};\n\n  Object.entries(css).forEach(([key, value]) => {\n    switch (key) {\n      case 'p':\n      case 'padding':\n        applySpacing(style, 'padding', value);\n        break;\n      case 'pt':\n      case 'paddingTop':\n        applySpacing(style, 'paddingTop', value);\n        break;\n      case 'pr':\n      case 'paddingRight':\n        applySpacing(style, 'paddingRight', value);\n        break;\n      case 'pb':\n      case 'paddingBottom':\n        applySpacing(style, 'paddingBottom', value);\n        break;\n      case 'pl':\n      case 'paddingLeft':\n        applySpacing(style, 'paddingLeft', value);\n        break;\n      case 'px':\n        applySpacing(style, 'paddingLeft', value);\n        applySpacing(style, 'paddingRight', value);\n        break;\n      case 'py':\n        applySpacing(style, 'paddingTop', value);\n        applySpacing(style, 'paddingBottom', value);\n        break;\n\n      case 'm':\n      case 'margin':\n        applySpacing(style, 'margin', value);\n        break;\n      case 'mt':\n      case 'marginTop':\n        applySpacing(style, 'marginTop', value);\n        break;\n      case 'mr':\n      case 'marginRight':\n        applySpacing(style, 'marginRight', value);\n        break;\n      case 'mb':\n      case 'marginBottom':\n        applySpacing(style, 'marginBottom', value);\n        break;\n      case 'ml':\n      case 'marginLeft':\n        applySpacing(style, 'marginLeft', value);\n        break;\n      case 'mx':\n        applySpacing(style, 'marginLeft', value);\n        applySpacing(style, 'marginRight', value);\n        break;\n      case 'my':\n        applySpacing(style, 'marginTop', value);\n        applySpacing(style, 'marginBottom', value);\n        break;\n\n      case 'ta':\n        style.textAlign = value as React.CSSProperties['textAlign'];\n        break;\n      case 'fd':\n        style.flexDirection = value as React.CSSProperties['flexDirection'];\n        break;\n      case 'fw':\n        style.flexWrap = value as React.CSSProperties['flexWrap'];\n        break;\n      case 'ai':\n        style.alignItems = value as React.CSSProperties['alignItems'];\n        break;\n      case 'ac':\n        style.alignContent = value as React.CSSProperties['alignContent'];\n        break;\n      case 'jc':\n        style.justifyContent = value as React.CSSProperties['justifyContent'];\n        break;\n      case 'as':\n        style.alignSelf = value as React.CSSProperties['alignSelf'];\n        break;\n      case 'fg':\n        style.flexGrow = value;\n        break;\n      case 'fs':\n        style.flexShrink = value;\n        break;\n      case 'fb':\n        applySize(style, 'flexBasis', value);\n        break;\n\n      case 'bc':\n      case 'backgroundColor':\n        applyColor(style, 'backgroundColor', value, colors);\n        break;\n      case 'br':\n      case 'borderRadius':\n        applyRadii(style, 'borderRadius', value);\n        break;\n      case 'btrr':\n      case 'borderTopRightRadius':\n        applyRadii(style, 'borderTopRightRadius', value);\n        break;\n      case 'bbrr':\n      case 'borderBottomRightRadius':\n        applyRadii(style, 'borderBottomRightRadius', value);\n        break;\n      case 'bblr':\n      case 'borderBottomLeftRadius':\n        applyRadii(style, 'borderBottomLeftRadius', value);\n        break;\n      case 'btlr':\n      case 'borderTopLeftRadius':\n        applyRadii(style, 'borderTopLeftRadius', value);\n        break;\n      case 'bs':\n      case 'boxShadow':\n        style.boxShadow = value;\n        break;\n      case 'c':\n      case 'color':\n        applyColor(style, 'color', value, colors);\n        break;\n\n      case 'fontSize':\n        if (typeof value === 'string') {\n          const fontSizeValue = getFontSizeValue(value);\n          if (fontSizeValue !== '16px') {\n            style.fontSize = fontSizeValue;\n          }\n        }\n        break;\n      case 'fontWeight':\n        if (typeof value === 'string') {\n          const fontWeightValue = getFontWeightValue(value);\n          if (fontWeightValue !== '400') {\n            style.fontWeight = fontWeightValue;\n          }\n        }\n        break;\n      case 'lh':\n        style.lineHeight = value;\n        break;\n\n      case 'width':\n      case 'w':\n        applySize(style, 'width', value);\n        break;\n      case 'height':\n      case 'h':\n        applySize(style, 'height', value);\n        break;\n\n      case 'size':\n        applySize(style, 'width', value);\n        applySize(style, 'height', value);\n        break;\n\n      case 'ox':\n        style.overflowX = value as React.CSSProperties['overflowX'];\n        break;\n      case 'oy':\n        style.overflowY = value as React.CSSProperties['overflowY'];\n        break;\n\n      case 'pe':\n        style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n        break;\n      case 'us':\n        style.userSelect = value as React.CSSProperties['userSelect'];\n        break;\n\n      default:\n        // Handle token syntax for any property that falls through to default\n        if (typeof value === 'string' && value.startsWith('$')) {\n          const tokenValue = processToken(value);\n\n          // Try spacing tokens first (most common for gap, etc)\n          const spaceValue = getSpaceValue(tokenValue);\n          if (spaceValue !== '0px') {\n            (style as any)[key] = spaceValue;\n            break;\n          }\n\n          // Try size tokens\n          const sizeValue = getSizeValue(tokenValue);\n          if (sizeValue !== tokenValue) {\n            (style as any)[key] = sizeValue;\n            break;\n          }\n\n          // Try radii tokens\n          const radiiValue = getRadiiValue(tokenValue);\n          if (radiiValue !== '0px') {\n            (style as any)[key] = radiiValue;\n            break;\n          }\n\n          // Try color tokens\n          if (colors && tokenValue in colors) {\n            (style as any)[key] = colors[tokenValue];\n            break;\n          }\n\n          // If no token matches, pass through as-is\n          (style as any)[key] = value;\n        } else {\n          (style as any)[key] = value;\n        }\n        break;\n    }\n  });\n\n  return { style, vars };\n}\n"],"names":[],"mappings":"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"}

package/dist/styles/themeContext.cjs

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const index = require("../colors/index.cjs");
+const themes_css = require("./themes.css.cjs");
+const ThemeContext = React.createContext(void 0);
+function VanillaExtractThemeProvider({
+  children,
+  defaultTheme = "system",
+  primaryColor = "blue",
+  forcedTheme
+}) {
+  const [mode, setMode] = React.useState(defaultTheme);
+  const [appliedPrimaryColor, setPrimaryColor] = React.useState(primaryColor);
+  const [systemTheme, setSystemTheme] = React.useState(() => {
+    if (forcedTheme) {
+      return forcedTheme;
+    }
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  });
+  React.useEffect(() => {
+    setPrimaryColor(primaryColor);
+  }, [primaryColor]);
+  React.useEffect(() => {
+    if (forcedTheme) {
+      setSystemTheme(forcedTheme);
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    const handler = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [forcedTheme]);
+  const resolvedTheme = forcedTheme || (mode === "system" ? systemTheme : mode);
+  const baseColors = resolvedTheme === "dark" ? index.darkColors : index.lightColors;
+  const semanticColors = resolvedTheme === "dark" ? {
+    primary: index.darkColors[`${appliedPrimaryColor}9`],
+    contentBg: index.darkColors["00dp"],
+    hiContrast: "white",
+    loContrast: index.darkColors.deepBlue2,
+    focusOutline: "hsl(216, 100%, 64%)",
+    divider: "hsl(209, 29%, 19%)",
+    background: "#0a0a0a",
+    foreground: "#ffffff",
+    muted: "#1a1a1a",
+    mutedForeground: "#b4b4b4",
+    card: "#1a1a1a",
+    cardForeground: "#ffffff",
+    popover: "#1a1a1a",
+    popoverForeground: "#ffffff",
+    border: "#3a3a3a",
+    input: "#3a3a3a",
+    accent: "#3b82f6",
+    accentForeground: "#ffffff",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    ring: "#60a5fa"
+  } : {
+    primary: index.lightColors[`${appliedPrimaryColor}9`],
+    contentBg: index.lightColors["00dp"],
+    hiContrast: index.lightColors.deepBlue11,
+    loContrast: "white",
+    focusOutline: "hsl(216, 100%, 64%)",
+    divider: "hsl(207, 10%, 82%)",
+    background: "#fcfcfc",
+    foreground: "#1a1a1a",
+    muted: "#f4f4f4",
+    mutedForeground: "#646464",
+    card: "#ffffff",
+    cardForeground: "#1a1a1a",
+    popover: "#ffffff",
+    popoverForeground: "#1a1a1a",
+    border: "#e3e3e3",
+    input: "#e3e3e3",
+    accent: "#60a5fa",
+    accentForeground: "#ffffff",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    ring: "#3b82f6"
+  };
+  const colors = {
+    ...baseColors,
+    ...semanticColors
+  };
+  React.useLayoutEffect(() => {
+    const themeClass = themes_css.themes[resolvedTheme][appliedPrimaryColor];
+    Object.values(themes_css.themes.light).forEach((cls) => document.body.classList.remove(cls));
+    Object.values(themes_css.themes.dark).forEach((cls) => document.body.classList.remove(cls));
+    document.body.classList.add(themeClass);
+    return () => {
+      document.body.classList.remove(themeClass);
+    };
+  }, [resolvedTheme, appliedPrimaryColor]);
+  const contextValue = {
+    mode,
+    resolvedTheme,
+    primaryColor: appliedPrimaryColor,
+    colors,
+    setMode,
+    setPrimaryColor
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function useVanillaExtractTheme() {
+  const context = React.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useVanillaExtractTheme must be used within a VanillaExtractThemeProvider");
+  }
+  return context;
+}
+exports.VanillaExtractThemeProvider = VanillaExtractThemeProvider;
+exports.useVanillaExtractTheme = useVanillaExtractTheme;
+//# sourceMappingURL=themeContext.cjs.map

package/dist/styles/themeContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeContext.cjs","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":["createContext","useState","useEffect","darkColors","lightColors","useLayoutEffect","themes","useContext"],"mappings":"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"}

package/dist/styles/themeContext.js

@@ -0,0 +1,120 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext, useState, useEffect, useLayoutEffect } from "react";
+import { darkColors, lightColors } from "../colors/index.js";
+import { themes } from "./themes.css.js";
+const ThemeContext = createContext(void 0);
+function VanillaExtractThemeProvider({
+  children,
+  defaultTheme = "system",
+  primaryColor = "blue",
+  forcedTheme
+}) {
+  const [mode, setMode] = useState(defaultTheme);
+  const [appliedPrimaryColor, setPrimaryColor] = useState(primaryColor);
+  const [systemTheme, setSystemTheme] = useState(() => {
+    if (forcedTheme) {
+      return forcedTheme;
+    }
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  });
+  useEffect(() => {
+    setPrimaryColor(primaryColor);
+  }, [primaryColor]);
+  useEffect(() => {
+    if (forcedTheme) {
+      setSystemTheme(forcedTheme);
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    const handler = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [forcedTheme]);
+  const resolvedTheme = forcedTheme || (mode === "system" ? systemTheme : mode);
+  const baseColors = resolvedTheme === "dark" ? darkColors : lightColors;
+  const semanticColors = resolvedTheme === "dark" ? {
+    primary: darkColors[`${appliedPrimaryColor}9`],
+    contentBg: darkColors["00dp"],
+    hiContrast: "white",
+    loContrast: darkColors.deepBlue2,
+    focusOutline: "hsl(216, 100%, 64%)",
+    divider: "hsl(209, 29%, 19%)",
+    background: "#0a0a0a",
+    foreground: "#ffffff",
+    muted: "#1a1a1a",
+    mutedForeground: "#b4b4b4",
+    card: "#1a1a1a",
+    cardForeground: "#ffffff",
+    popover: "#1a1a1a",
+    popoverForeground: "#ffffff",
+    border: "#3a3a3a",
+    input: "#3a3a3a",
+    accent: "#3b82f6",
+    accentForeground: "#ffffff",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    ring: "#60a5fa"
+  } : {
+    primary: lightColors[`${appliedPrimaryColor}9`],
+    contentBg: lightColors["00dp"],
+    hiContrast: lightColors.deepBlue11,
+    loContrast: "white",
+    focusOutline: "hsl(216, 100%, 64%)",
+    divider: "hsl(207, 10%, 82%)",
+    background: "#fcfcfc",
+    foreground: "#1a1a1a",
+    muted: "#f4f4f4",
+    mutedForeground: "#646464",
+    card: "#ffffff",
+    cardForeground: "#1a1a1a",
+    popover: "#ffffff",
+    popoverForeground: "#1a1a1a",
+    border: "#e3e3e3",
+    input: "#e3e3e3",
+    accent: "#60a5fa",
+    accentForeground: "#ffffff",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    ring: "#3b82f6"
+  };
+  const colors = {
+    ...baseColors,
+    ...semanticColors
+  };
+  useLayoutEffect(() => {
+    const themeClass = themes[resolvedTheme][appliedPrimaryColor];
+    Object.values(themes.light).forEach((cls) => document.body.classList.remove(cls));
+    Object.values(themes.dark).forEach((cls) => document.body.classList.remove(cls));
+    document.body.classList.add(themeClass);
+    return () => {
+      document.body.classList.remove(themeClass);
+    };
+  }, [resolvedTheme, appliedPrimaryColor]);
+  const contextValue = {
+    mode,
+    resolvedTheme,
+    primaryColor: appliedPrimaryColor,
+    colors,
+    setMode,
+    setPrimaryColor
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function useVanillaExtractTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useVanillaExtractTheme must be used within a VanillaExtractThemeProvider");
+  }
+  return context;
+}
+export {
+  VanillaExtractThemeProvider,
+  useVanillaExtractTheme
+};
+//# sourceMappingURL=themeContext.js.map

package/dist/styles/themeContext.js.map

@@ -0,0 +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":"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"}

package/dist/styles/themes.css.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                                   */
+;/* empty css                                                     */
+;/* empty css                                                                 */
+;/* empty css                                                 */
+;/* empty css                                                       */
+;/* empty css                                                             */
+;/* empty css                                                   */
+;/* empty css                                                   */
+;/* empty css                                                 */
+;/* 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" } };
+var lightTheme = "_6oteex0";
+var darkTheme = "_6oteex7";
+exports.darkTheme = darkTheme;
+exports.lightTheme = lightTheme;
+exports.themes = themes;
+//# sourceMappingURL=themes.css.cjs.map

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

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

package/dist/styles/themes.css.js

@@ -0,0 +1,21 @@
+/* empty css                                                 */
+/* empty css                                                   */
+/* empty css                                                               */
+/* empty css                                               */
+/* empty css                                                     */
+/* empty css                                                           */
+/* empty css                                                 */
+/* empty css                                                 */
+/* empty css                                               */
+/* 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" } };
+var lightTheme = "_6oteex0";
+var darkTheme = "_6oteex7";
+export {
+  darkTheme,
+  lightTheme,
+  themes
+};
+//# sourceMappingURL=themes.css.js.map

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

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

package/dist/utils/getPrimaryColorInfo.cjs

@@ -0,0 +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}`
+  }
+});
+module.exports = getPrimaryColorInfo;
+//# sourceMappingURL=getPrimaryColorInfo.cjs.map

package/dist/utils/getPrimaryColorInfo.cjs.map

@@ -0,0 +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;;"}

package/dist/utils/getPrimaryColorInfo.js

@@ -0,0 +1,12 @@
+const 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

package/dist/utils/getPrimaryColorInfo.js.map

@@ -0,0 +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;"}

package/package.json

@@ -0,0 +1,184 @@
+{
+  "name": "@traefik-labs/faency",
+  "description": "Traefik Labs design system",
+  "version": "12.0.7",
+  "license": "Apache-2.0",
+  "keywords": [
+    "traefiklabs",
+    "ui",
+    "design system",
+    "react",
+    "radix-ui",
+    "a11y"
+  ],
+  "main": "dist/index.js",
+  "type": "module",
+  "modulesDir": "dist",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "types": "dist/index.d.ts",
+  "homepage": "https://traefik.github.io/faency/",
+  "repository": "https://github.com/traefik/faency",
+  "bugs": {
+    "url": "https://github.com/traefik/faency/issues"
+  },
+  "scripts": {
+    "prettier": "prettier --write .",
+    "build": "vite build",
+    "lint": "eslint \"./components/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint --fix \"./components/**/*.{ts,tsx}\"",
+    "release": "yarn build && np",
+    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006 -h localhost",
+    "storybook-docs": "storybook dev --docs",
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build",
+    "test": "jest --watch",
+    "test:ci": "jest --ci --silent",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "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": "^9.0.2",
+    "@semantic-release/github": "^8.0.2",
+    "@semantic-release/npm": "^9.0.0",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@stitches/react": "1.2.8",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/builder-vite": "10.0.8",
+    "@storybook/react-vite": "10.0.8",
+    "@types/jest": "^27.4.1",
+    "@types/jest-axe": "^3.5.3",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/node": "^24.10.1",
+    "@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",
+    "@vueless/storybook-dark-mode": "^10.0.3",
+    "babel-loader": "^8.2.2",
+    "conventional-changelog-conventionalcommits": "^4.6.3",
+    "cross-env": "^7.0.3",
+    "date-fns": "^4.1.0",
+    "husky": "^8.0.0",
+    "lint-staged": "13.1.0",
+    "lodash.merge": "^4.6.2",
+    "np": "^8.0.4",
+    "patch-package": "^8.0.0",
+    "prettier": "^3.6.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "semantic-release": "^19.0.2",
+    "storybook": "10.0.8",
+    "tinycolor2": "^1.4.2",
+    "typescript": "^5.8.3",
+    "use-debounce": "9.0.2",
+    "vite": "7.1.3",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.1",
+    "@eslint/js": "^9.32.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "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.0.8",
+    "globals": "^15.8.0",
+    "jest": "^27.5.1",
+    "jest-axe": "^6.0.0",
+    "typescript-eslint": "^8.38.0",
+    "webpack": "^5.94.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
+  },
+  "release": {
+    "branches": [
+      "master",
+      "next"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
+        {
+          "preset": "conventionalcommits"
+        }
+      ],
+      [
+        "@semantic-release/release-notes-generator",
+        {
+          "preset": "conventionalcommits"
+        }
+      ],
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
+  },
+  "engines": {
+    "node": ">=24.11.0"
+  },
+  "packageManager": "yarn@4.9.1"
+}