npm - @traefik-labs/faency - Versions diffs - 12.3.3 → 12.3.5 - Mend

@traefik-labs/faency 12.3.3 → 12.3.5

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

Files changed (155) hide show

package/dist/styles/cssProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cssProps.js","names":[],"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 button: '8px',\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"],"mappings":"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"}
1	+ {"version":3,"file":"cssProps.js","names":[],"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 button: '8px',\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"],"mappings":"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"}

package/dist/styles/themeContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themeContext.cjs","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,gBAAA,GAAA,MAAA,eAA4D,KAAA,EAAU;AAS5E,SAAgB,4BAA4B,EAC1C,UACA,eAAe,UACf,eAAe,QACf,eACmC;CACnC,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAA+B,aAAa;CACzD,MAAM,CAAC,qBAAqB,oBAAA,GAAA,MAAA,UAA0C,aAAa;CACnF,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,gBAAmD;~~AACrE~~,~~MAAI~~,~~YACF~~,~~QAAO~~;~~AAET~~,~~MAAI~~,OAAO,WAAW,~~YACpB~~,~~QAAO~~,OAAO,WAAW,+BAA+B,CAAC,UAAU,SAAS;~~AAE9E~~,~~SAAO~~;GACP;~~AAEF~~,~~EAAA~~,GAAA,MAAA,iBAAgB;~~AACd~~,~~kBAAgB~~,aAAa;IAC5B,CAAC,aAAa,CAAC;~~AAElB~~,~~EAAA~~,GAAA,MAAA,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,cAAA,aAAa,cAAA;CAE3D,MAAM,iBACJ,kBAAkB,SACd;EACE,SAAS,cAAA,WAAW,GAAG,oBAAoB;EAC3C,WAAW,cAAA,WAAW;EACtB,YAAY;EACZ,YAAY,cAAA,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,cAAA,YAAY,GAAG,oBAAoB;EAC5C,WAAW,cAAA,YAAY;EACvB,YAAY,cAAA,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~~,~~EAAA~~,GAAA,MAAA,uBAAsB;EACpB,MAAM,aAAa,mBAAA,OAAO,eAAe;~~AAEzC~~,~~SAAO~~,OAAO,mBAAA,OAAO,MAAM,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;~~AACjF~~,~~SAAO~~,OAAO,mBAAA,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~~,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAd;EAAuB,OAAO;EAAe;EAAiC,CAAA;;AAGvF,SAAgB,yBAAyB;CACvC,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;~~AACxC~~,~~KAAI~~,YAAY,KAAA,~~EACd~~,~~OAAM~~,IAAI,MAAM,2EAA2E;~~AAE7F~~,~~QAAO~~"}
1	+ {"version":3,"file":"themeContext.cjs","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,gBAAA,GAAA,MAAA,eAA4D,KAAA,EAAU;AAS5E,SAAgB,4BAA4B,EAC1C,UACA,eAAe,UACf,eAAe,QACf,eACmC;CACnC,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAA+B,aAAa;CACzD,MAAM,CAAC,qBAAqB,oBAAA,GAAA,MAAA,UAA0C,aAAa;CACnF,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,gBAAmD;EACrE,IAAI,aACF,OAAO;EAET,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,WAAW,+BAA+B,CAAC,UAAU,SAAS;EAE9E,OAAO;GACP;CAEF,CAAA,GAAA,MAAA,iBAAgB;EACd,gBAAgB,aAAa;IAC5B,CAAC,aAAa,CAAC;CAElB,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,aAAa;GACf,eAAe,YAAY;GAC3B;;EAGF,MAAM,aAAa,OAAO,WAAW,+BAA+B;EACpE,eAAe,WAAW,UAAU,SAAS,QAAQ;EAErD,MAAM,WAAW,MAA2B;GAC1C,eAAe,EAAE,UAAU,SAAS,QAAQ;;EAG9C,WAAW,iBAAiB,UAAU,QAAQ;EAC9C,aAAa,WAAW,oBAAoB,UAAU,QAAQ;IAC7D,CAAC,YAAY,CAAC;CAEjB,MAAM,gBAAkC,gBAAgB,SAAS,WAAW,cAAc;CAE1F,MAAM,aAAa,kBAAkB,SAAS,cAAA,aAAa,cAAA;CAE3D,MAAM,iBACJ,kBAAkB,SACd;EACE,SAAS,cAAA,WAAW,GAAG,oBAAoB;EAC3C,WAAW,cAAA,WAAW;EACtB,YAAY;EACZ,YAAY,cAAA,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,cAAA,YAAY,GAAG,oBAAoB;EAC5C,WAAW,cAAA,YAAY;EACvB,YAAY,cAAA,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;CAGD,CAAA,GAAA,MAAA,uBAAsB;EACpB,MAAM,aAAa,mBAAA,OAAO,eAAe;EAEzC,OAAO,OAAO,mBAAA,OAAO,MAAM,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;EACjF,OAAO,OAAO,mBAAA,OAAO,KAAK,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;EAEhF,SAAS,KAAK,UAAU,IAAI,WAAW;EAEvC,aAAa;GACX,SAAS,KAAK,UAAU,OAAO,WAAW;;IAE3C,CAAC,eAAe,oBAAoB,CAAC;CAExC,MAAM,eAAkC;EACtC;EACA;EACA,cAAc;EACd;EACA;EACA;EACD;CAED,OAAO,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAd;EAAuB,OAAO;EAAe;EAAiC,CAAA;;AAGvF,SAAgB,yBAAyB;CACvC,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;CACxC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,2EAA2E;CAE7F,OAAO"}

package/dist/styles/themeContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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~~"}
1	+ {"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;EACrE,IAAI,aACF,OAAO;EAET,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,WAAW,+BAA+B,CAAC,UAAU,SAAS;EAE9E,OAAO;GACP;CAEF,gBAAgB;EACd,gBAAgB,aAAa;IAC5B,CAAC,aAAa,CAAC;CAElB,gBAAgB;EACd,IAAI,aAAa;GACf,eAAe,YAAY;GAC3B;;EAGF,MAAM,aAAa,OAAO,WAAW,+BAA+B;EACpE,eAAe,WAAW,UAAU,SAAS,QAAQ;EAErD,MAAM,WAAW,MAA2B;GAC1C,eAAe,EAAE,UAAU,SAAS,QAAQ;;EAG9C,WAAW,iBAAiB,UAAU,QAAQ;EAC9C,aAAa,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;CAGD,sBAAsB;EACpB,MAAM,aAAa,OAAO,eAAe;EAEzC,OAAO,OAAO,OAAO,MAAM,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;EACjF,OAAO,OAAO,OAAO,KAAK,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,IAAI,CAAC;EAEhF,SAAS,KAAK,UAAU,IAAI,WAAW;EAEvC,aAAa;GACX,SAAS,KAAK,UAAU,OAAO,WAAW;;IAE3C,CAAC,eAAe,oBAAoB,CAAC;CAExC,MAAM,eAAkC;EACtC;EACA;EACA,cAAc;EACd;EACA;EACA;EACD;CAED,OAAO,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAAe;EAAiC,CAAA;;AAGvF,SAAgB,yBAAyB;CACvC,MAAM,UAAU,WAAW,aAAa;CACxC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,2EAA2E;CAE7F,OAAO"}

package/dist/utils/deepMerge.cjs.map CHANGED Viewed

	@@ -1 +1 @@
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~~"}
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;CACvE,OAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM;;;;;;;AAQ7E,SAAgB,UACd,QACA,QACO;CACP,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,SAA8B,EAAE,GAAG,QAAQ;CAEjD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,EAAE;EACrC,IAAI,QAAQ,eAAe,QAAQ,iBAAiB,QAAQ,aAAa;EACzE,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;EAEzB,IAAI,cAAc,UAAU,IAAI,cAAc,UAAU,EACtD,OAAO,OAAO,UAAU,WAAW,UAAU;OACxC,IAAI,cAAc,KAAA,GACvB,OAAO,OAAO;;CAIlB,OAAO"}

package/dist/utils/deepMerge.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~"}
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;CACvE,OAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM;;;;;;;AAQ7E,SAAgB,UACd,QACA,QACO;CACP,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,SAA8B,EAAE,GAAG,QAAQ;CAEjD,KAAK,MAAM,OAAO,OAAO,KAAK,OAAO,EAAE;EACrC,IAAI,QAAQ,eAAe,QAAQ,iBAAiB,QAAQ,aAAa;EACzE,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;EAEzB,IAAI,cAAc,UAAU,IAAI,cAAc,UAAU,EACtD,OAAO,OAAO,UAAU,WAAW,UAAU;OACxC,IAAI,cAAc,KAAA,GACvB,OAAO,OAAO;;CAIlB,OAAO"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@traefik-labs/faency",
   "description": "Traefik Labs design system",
-  "version": "12.3.3",
+  "version": "12.3.5",
   "license": "Apache-2.0",
   "keywords": [
     "traefiklabs",
@@ -86,39 +86,39 @@
     "@vanilla-extract/css": "1.20.1",
     "@vanilla-extract/dynamic": "2.1.5",
     "@vanilla-extract/recipes": "0.5.7",
-    "date-fns": "4.1.0",
+    "date-fns": "4.2.1",
     "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-env": "7.29.5",
     "@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/github": "12.0.8",
     "@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",
+    "@semantic-release/release-notes-generator": "14.1.1",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-links": "10.4.0",
+    "@storybook/builder-vite": "10.4.0",
+    "@storybook/react-vite": "10.4.0",
     "@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/node": "24.12.4",
     "@types/prismjs": "1.26.6",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.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",
+    "@vitejs/plugin-react": "6.0.2",
+    "@vueless/storybook-dark-mode": "10.0.8",
+    "babel-jest": "30.4.1",
     "conventional-changelog-conventionalcommits": "9.3.1",
     "cross-env": "10.1.0",
     "eslint": "9.39.4",
@@ -128,23 +128,23 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-simple-import-sort": "13.0.0",
-    "eslint-plugin-storybook": "10.3.5",
-    "globals": "17.5.0",
+    "eslint-plugin-storybook": "10.4.0",
+    "globals": "17.6.0",
     "husky": "9.1.7",
-    "jest": "30.3.0",
+    "jest": "30.4.2",
     "jest-axe": "10.0.0",
-    "jest-environment-jsdom": "30.3.0",
-    "lint-staged": "16.4.0",
-    "np": "11.2.0",
+    "jest-environment-jsdom": "30.4.1",
+    "lint-staged": "17.0.5",
+    "np": "11.2.1",
     "patch-package": "8.0.1",
     "prettier": "3.8.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "semantic-release": "25.0.3",
-    "storybook": "10.3.5",
+    "storybook": "10.4.0",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.59.0",
-    "vite": "8.0.10",
+    "typescript-eslint": "8.59.4",
+    "vite": "8.0.12",
     "vite-plugin-dts": "4.5.4"
   },
   "resolutions": {