npm - @traefik-labs/faency - Versions diffs - 12.3.8 → 13.0.0 - Mend

@traefik-labs/faency 12.3.8 → 13.0.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cssProps.cjs","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.cjs","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/cssProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region styles/cssProps.ts
+// styles/cssProps.ts
 function processToken(value) {
 	return value.startsWith("$") ? value.slice(1) : value;
 }
@@ -251,31 +251,29 @@ function processCSSProp(css = {}, colors) {
 			case "us":
 				style.userSelect = value;
 				break;
-			default:
-				if (typeof value === "string" && value.startsWith("$")) {
-					const tokenValue = processToken(value);
-					const spaceValue = getSpaceValue(tokenValue);
-					if (spaceValue !== "0px") {
-						style[key] = spaceValue;
-						break;
-					}
-					const sizeValue = getSizeValue(tokenValue);
-					if (sizeValue !== tokenValue) {
-						style[key] = sizeValue;
-						break;
-					}
-					const radiiValue = getRadiiValue(tokenValue);
-					if (radiiValue !== "0px") {
-						style[key] = radiiValue;
-						break;
-					}
-					if (colors && tokenValue in colors) {
-						style[key] = colors[tokenValue];
-						break;
-					}
-					style[key] = value;
-				} else style[key] = value;
-				break;
+			default: if (typeof value === "string" && value.startsWith("$")) {
+				const tokenValue = processToken(value);
+				const spaceValue = getSpaceValue(tokenValue);
+				if (spaceValue !== "0px") {
+					style[key] = spaceValue;
+					break;
+				}
+				const sizeValue = getSizeValue(tokenValue);
+				if (sizeValue !== tokenValue) {
+					style[key] = sizeValue;
+					break;
+				}
+				const radiiValue = getRadiiValue(tokenValue);
+				if (radiiValue !== "0px") {
+					style[key] = radiiValue;
+					break;
+				}
+				if (colors && tokenValue in colors) {
+					style[key] = colors[tokenValue];
+					break;
+				}
+				style[key] = value;
+			} else style[key] = value;
 		}
 	});
 	return {
@@ -283,7 +281,6 @@ function processCSSProp(css = {}, colors) {
 		vars
 	};
 }
-//#endregion
 export { processCSSProp };
 //# sourceMappingURL=cssProps.js.map

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 CHANGED Viewed

@@ -4,7 +4,7 @@ const require_themes_css = require("./themes.css.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region styles/themeContext.tsx
+// styles/themeContext.tsx
 var ThemeContext = (0, react.createContext)(void 0);
 function VanillaExtractThemeProvider({ children, defaultTheme = "system", primaryColor = "blue", forcedTheme }) {
 	const [mode, setMode] = (0, react.useState)(defaultTheme);
@@ -108,7 +108,6 @@ function useVanillaExtractTheme() {
 	if (context === void 0) throw new Error("useVanillaExtractTheme must be used within a VanillaExtractThemeProvider");
 	return context;
 }
-//#endregion
 exports.VanillaExtractThemeProvider = VanillaExtractThemeProvider;
 exports.useVanillaExtractTheme = useVanillaExtractTheme;

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~~,~~cAAA~~,~~CAA4D~~,KAAA,CAAS;AAS3E,SAAgB,4BAA4B,EAC1C,UACA,eAAe,UACf,eAAe,QACf,eACmC;CACnC,MAAM,CAAC,MAAM,YAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAA+B~~,YAAY;CACxD,MAAM,CAAC,qBAAqB,oBAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAA0C~~,YAAY;CAClF,MAAM,CAAC,aAAa,mBAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~OAAmD~~;EACrE,IAAI,aACF,OAAO;EAET,IAAI,OAAO,WAAW,aACpB,OAAO,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;EAE9E,OAAO;CACT,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB,YAAY;CAC9B,GAAG,CAAC,YAAY,CAAC;CAEjB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,aAAa;GACf,eAAe,WAAW;GAC1B;EACF;EAEA,MAAM,aAAa,OAAO,WAAW,8BAA8B;EACnE,eAAe,WAAW,UAAU,SAAS,OAAO;EAEpD,MAAM,WAAW,MAA2B;GAC1C,eAAe,EAAE,UAAU,SAAS,OAAO;EAC7C;EAEA,WAAW,iBAAiB,UAAU,OAAO;EAC7C,aAAa,WAAW,oBAAoB,UAAU,OAAO;CAC/D,GAAG,CAAC,WAAW,CAAC;CAEhB,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;CACR,IACA;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;CACR;CAEN,MAAM,SAAS;EACb,GAAG;EACH,GAAG;CACL;CAGA,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,MAAM,~~aAAa~~,~~mBAAA~~,OAAO,cAAc,CAAC;EAEzC,OAAO,~~OAAO~~,~~mBAAA~~,OAAO,KAAK,CAAC,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,GAAG,CAAC;EAChF,OAAO,~~OAAO~~,~~mBAAA~~,OAAO,IAAI,CAAC,CAAC,SAAS,QAAQ,SAAS,KAAK,UAAU,OAAO,GAAG,CAAC;EAE/E,SAAS,KAAK,UAAU,IAAI,UAAU;EAEtC,aAAa;GACX,SAAS,KAAK,UAAU,OAAO,UAAU;EAC3C;CACF,GAAG,CAAC,eAAe,mBAAmB,CAAC;CAEvC,MAAM,eAAkC;EACtC;EACA;EACA,cAAc;EACd;EACA;EACA;CACF;CAEA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAa,UAAd;EAAuB,OAAO;EAAe;CAAgC,CAAA;AACtF;AAEA,SAAgB,yBAAyB;CACvC,MAAM,WAAA,~~GAAA~~,~~MAAA~~,~~WAAA~~,~~CAAqB~~,YAAY;CACvC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,0EAA0E;CAE5F,OAAO;AACT"}
1	+ {"version":3,"file":"themeContext.cjs","names":["createContext","useState","darkColors","lightColors","themes","useContext"],"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":"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"}

package/dist/styles/themeContext.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { darkColors, lightColors } from "../colors/index.js";
 import { themes } from "./themes.css.js";
 import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region styles/themeContext.tsx
+// styles/themeContext.tsx
 var ThemeContext = createContext(void 0);
 function VanillaExtractThemeProvider({ children, defaultTheme = "system", primaryColor = "blue", forcedTheme }) {
 	const [mode, setMode] = useState(defaultTheme);
@@ -106,7 +106,6 @@ function useVanillaExtractTheme() {
 	if (context === void 0) throw new Error("useVanillaExtractTheme must be used within a VanillaExtractThemeProvider");
 	return context;
 }
-//#endregion
 export { VanillaExtractThemeProvider, useVanillaExtractTheme };
 //# sourceMappingURL=themeContext.js.map

package/dist/styles/themes.css.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 ;/* empty css                            */
-//#region styles/themes.css.ts
+// styles/themes.css.ts
 var themes = {
 	light: {
 		neon: "_6oteex1",
@@ -22,7 +22,6 @@ var themes = {
 };
 var lightTheme = "_6oteex0";
 var darkTheme = "_6oteex7";
-//#endregion
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
 exports.themes = themes;

package/dist/styles/themes.css.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /* empty css                          */
-//#region styles/themes.css.ts
+// styles/themes.css.ts
 var themes = {
 	light: {
 		neon: "_6oteex1",
@@ -22,7 +22,6 @@ var themes = {
 };
 var lightTheme = "_6oteex0";
 var darkTheme = "_6oteex7";
-//#endregion
 export { darkTheme, lightTheme, themes };
 //# sourceMappingURL=themes.css.js.map

package/dist/utils/deepMerge.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region utils/deepMerge.ts
+// utils/deepMerge.ts
 function isPlainObject(value) {
 	return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -19,7 +19,6 @@ function deepMerge(target, source) {
 	}
 	return result;
 }
-//#endregion
 exports.deepMerge = deepMerge;
 //# sourceMappingURL=deepMerge.cjs.map

package/dist/utils/deepMerge.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region utils/deepMerge.ts
+// utils/deepMerge.ts
 function isPlainObject(value) {
 	return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -19,7 +19,6 @@ function deepMerge(target, source) {
 	}
 	return result;
 }
-//#endregion
 export { deepMerge };
 //# sourceMappingURL=deepMerge.js.map

package/dist/utils/getPrimaryColorInfo.cjs CHANGED Viewed

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

package/dist/utils/getPrimaryColorInfo.js CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@traefik-labs/faency",
   "description": "Traefik Labs design system",
-  "version": "12.3.8",
+  "version": "13.0.0",
   "license": "Apache-2.0",
   "keywords": [
     "traefiklabs",
@@ -38,7 +38,6 @@
     "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",
@@ -52,38 +51,38 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.19",
+    "@floating-ui/react": "0.27.20",
     "@radix-ui/colors": "2.1.0",
-    "@radix-ui/react-accessible-icon": "1.1.11",
-    "@radix-ui/react-accordion": "1.2.16",
-    "@radix-ui/react-alert-dialog": "1.1.19",
-    "@radix-ui/react-aspect-ratio": "1.1.11",
-    "@radix-ui/react-avatar": "1.2.2",
-    "@radix-ui/react-checkbox": "1.3.7",
-    "@radix-ui/react-context-menu": "2.3.3",
-    "@radix-ui/react-dialog": "1.1.19",
-    "@radix-ui/react-dropdown-menu": "2.1.20",
+    "@radix-ui/react-accessible-icon": "1.2.0",
+    "@radix-ui/react-accordion": "1.3.1",
+    "@radix-ui/react-alert-dialog": "1.2.1",
+    "@radix-ui/react-aspect-ratio": "1.2.0",
+    "@radix-ui/react-avatar": "1.3.1",
+    "@radix-ui/react-checkbox": "1.4.1",
+    "@radix-ui/react-context-menu": "2.4.1",
+    "@radix-ui/react-dialog": "1.3.1",
+    "@radix-ui/react-dropdown-menu": "2.2.1",
     "@radix-ui/react-icons": "1.3.2",
-    "@radix-ui/react-id": "1.1.2",
-    "@radix-ui/react-label": "2.1.11",
-    "@radix-ui/react-navigation-menu": "1.2.18",
-    "@radix-ui/react-popover": "1.1.19",
-    "@radix-ui/react-portal": "1.1.13",
-    "@radix-ui/react-progress": "1.1.12",
-    "@radix-ui/react-radio-group": "1.4.3",
-    "@radix-ui/react-separator": "1.1.11",
-    "@radix-ui/react-slider": "1.4.3",
-    "@radix-ui/react-slot": "1.3.0",
-    "@radix-ui/react-switch": "1.3.3",
-    "@radix-ui/react-tabs": "1.1.17",
-    "@radix-ui/react-toggle": "1.1.14",
-    "@radix-ui/react-toggle-group": "1.1.15",
-    "@radix-ui/react-tooltip": "1.2.12",
-    "@radix-ui/react-use-layout-effect": "1.1.2",
-    "@radix-ui/react-visually-hidden": "1.2.7",
+    "@radix-ui/react-id": "1.1.4",
+    "@radix-ui/react-label": "2.1.17",
+    "@radix-ui/react-navigation-menu": "1.4.1",
+    "@radix-ui/react-popover": "1.3.1",
+    "@radix-ui/react-portal": "1.2.0",
+    "@radix-ui/react-progress": "1.2.1",
+    "@radix-ui/react-radio-group": "1.5.1",
+    "@radix-ui/react-separator": "1.2.0",
+    "@radix-ui/react-slider": "1.6.1",
+    "@radix-ui/react-slot": "1.5.0",
+    "@radix-ui/react-switch": "1.4.1",
+    "@radix-ui/react-tabs": "1.2.1",
+    "@radix-ui/react-toggle": "1.2.1",
+    "@radix-ui/react-toggle-group": "1.2.1",
+    "@radix-ui/react-tooltip": "1.4.1",
+    "@radix-ui/react-use-layout-effect": "1.1.4",
+    "@radix-ui/react-visually-hidden": "1.2.13",
     "@rehookify/datepicker": "6.6.8",
     "@stitches/react": "1.2.8",
-    "@vanilla-extract/css": "1.21.1",
+    "@vanilla-extract/css": "1.21.3",
     "@vanilla-extract/dynamic": "2.1.5",
     "@vanilla-extract/recipes": "0.5.7",
     "date-fns": "4.4.0",
@@ -96,59 +95,62 @@
     "@babel/preset-env": "7.29.7",
     "@babel/preset-react": "7.29.7",
     "@babel/preset-typescript": "7.29.7",
-    "@eslint/js": "9.39.4",
+    "@eslint-react/eslint-plugin": "4.2.3",
+    "@eslint/js": "10.0.1",
     "@semantic-release/commit-analyzer": "13.0.1",
-    "@semantic-release/github": "12.0.9",
-    "@semantic-release/npm": "13.1.5",
+    "@semantic-release/github": "12.0.10",
+    "@semantic-release/npm": "13.2.0",
     "@semantic-release/release-notes-generator": "14.1.1",
-    "@storybook/addon-docs": "10.5.0",
-    "@storybook/addon-links": "10.5.0",
-    "@storybook/builder-vite": "10.5.0",
-    "@storybook/react-vite": "10.5.0",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.2",
+    "@storybook/addon-docs": "10.6.3",
+    "@storybook/addon-links": "10.6.3",
+    "@storybook/builder-vite": "10.6.3",
+    "@storybook/react-vite": "10.6.3",
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
     "@types/jest": "30.0.0",
     "@types/jest-axe": "3.5.9",
-    "@types/node": "24.13.3",
+    "@types/node": "24.19.2",
     "@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.4",
-    "@vitejs/plugin-react": "6.0.3",
+    "@vanilla-extract/vite-plugin": "5.2.6",
+    "@vitejs/plugin-react": "6.1.2",
     "@vueless/storybook-dark-mode": "10.0.8",
-    "babel-jest": "30.4.1",
+    "babel-jest": "30.5.2",
     "conventional-changelog-conventionalcommits": "9.3.1",
     "cross-env": "10.1.0",
-    "eslint": "9.39.4",
+    "eslint": "10.13.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.5.6",
-    "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.5.0",
-    "globals": "17.7.0",
+    "eslint-plugin-prettier": "5.5.7",
+    "eslint-plugin-simple-import-sort": "14.0.0",
+    "eslint-plugin-storybook": "10.6.3",
+    "globals": "17.13.0",
     "husky": "9.1.7",
-    "jest": "30.4.2",
-    "jest-axe": "10.0.0",
-    "jest-environment-jsdom": "30.4.1",
-    "lint-staged": "17.0.8",
-    "np": "11.2.2",
+    "jest": "30.5.2",
+    "jest-axe": "11.0.0",
+    "jest-environment-jsdom": "30.5.2",
+    "lint-staged": "17.6.0",
     "patch-package": "8.0.1",
-    "prettier": "3.9.5",
+    "prettier": "3.9.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "semantic-release": "25.0.5",
-    "storybook": "10.5.0",
+    "semantic-release": "25.0.9",
+    "storybook": "10.6.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.63.0",
-    "vite": "8.1.4",
+    "typescript-eslint": "8.72.0",
+    "vite": "8.3.5",
     "vite-plugin-dts": "4.5.4"
   },
   "resolutions": {
-    "js-yaml@4.1.0": "4.1.1"
+    "@typescript-eslint/tsconfig-utils": "8.72.0",
+    "@typescript-eslint/types": "8.72.0",
+    "bundle-name": "4.1.1",
+    "magic-string@^1.1.0": "1.4.4",
+    "postcss": "8.5.31"
   },
   "publishConfig": {
     "access": "public",
@@ -187,5 +189,5 @@
   "engines": {
     "node": ">=24.14.1"
   },
-  "packageManager": "yarn@4.17.1+sha512.ccbfabf7d7b6b32075088be9386fb9a2e00bb6887ef07fa56effabc890a56d53da1ccc4128d62db245fcbd3961b236d75335bdf7d5320ed6eafb7588b7ad4697"
+  "packageManager": "yarn@4.18.1+sha512.b2e1e7524f654f2749d32b4ebcb4622473cb5bcbc485df2007e12a154e50162a4d795526768bc5f5b8f81717bfd79deb2472813d86fb5ae2eb551fa9c872b08f"
 }