@tenphi/tasty 0.0.0-snapshot.12940ba → 0.0.0-snapshot.e5c8361

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.
package/dist/config.js CHANGED
@@ -1,8 +1,8 @@
1
- import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, normalizeColorTokenValue, resetGlobalPredefinedTokens, setGlobalPredefinedTokens } from "./utils/styles.js";
2
1
  import { isDevEnv } from "./utils/is-dev-env.js";
2
+ import { setGlobalPredefinedStates } from "./states/index.js";
3
+ import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, normalizeColorTokenValue, resetGlobalPredefinedTokens, setGlobalPredefinedTokens } from "./utils/styles.js";
3
4
  import { normalizeHandlerDefinition, registerHandler, resetHandlers } from "./styles/predefined.js";
4
5
  import { StyleInjector } from "./injector/injector.js";
5
- import { setGlobalPredefinedStates } from "./states/index.js";
6
6
  import { clearPipelineCache, isSelector } from "./pipeline/index.js";
7
7
 
8
8
  //#region src/config.ts
@@ -0,0 +1,31 @@
1
+ import { CacheMetrics, DisposeFunction, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "../injector/types.js";
2
+ import { CSSProperties } from "../utils/css-types.js";
3
+ import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "../parser/types.js";
4
+ import { StyleParser } from "../parser/parser.js";
5
+ import { AtRuleContext, ParsedAdvancedState, StateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "../states/index.js";
6
+ import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "../utils/styles.js";
7
+ import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "../styles/types.js";
8
+ import { RenderResult, StyleResult, isSelector, renderStyles } from "../pipeline/index.js";
9
+ import { SheetManager } from "../injector/sheet-manager.js";
10
+ import { StyleInjector } from "../injector/injector.js";
11
+ import { TastyPlugin, TastyPluginFactory } from "../plugins/types.js";
12
+ import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "../config.js";
13
+ import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
14
+ import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "../chunks/definitions.js";
15
+ import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "../injector/index.js";
16
+ import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "../styles/list.js";
17
+ import { BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "../types.js";
18
+ import { styleHandlers } from "../styles/predefined.js";
19
+ import "../styles/index.js";
20
+ import { filterBaseProps } from "../utils/filter-base-props.js";
21
+ import { color } from "../utils/colors.js";
22
+ import { _modAttrs } from "../utils/mod-attrs.js";
23
+ import { dotize } from "../utils/dotize.js";
24
+ import { mergeStyles } from "../utils/merge-styles.js";
25
+ import { resolveRecipes } from "../utils/resolve-recipes.js";
26
+ import { deprecationWarning, warn } from "../utils/warnings.js";
27
+ import { hslToRgbValues, processTokens, stringifyTokens } from "../utils/process-tokens.js";
28
+ import { TypographyPreset } from "../tokens/typography.js";
29
+ import { generateTypographyTokens } from "../utils/typography.js";
30
+ import { tastyDebug } from "../debug.js";
31
+ export { type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, type CSSProperties, CUSTOM_UNITS, CacheMetrics, type ChunkInfo, type ChunkName, type ColorStyleProps, ComputeModel, type ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, type DimensionStyleProps, DisposeFunction, FLOW_STYLES, type FlowStyleProps, type GlobalStyledProps, INNER_STYLES, InjectResult, type InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_STYLES, type ParsedAdvancedState, ParsedColor, type ParserOptions, type PositionStyleProps, type ProcessedStyle, PropertyDefinition, PropertyOptions, type Props, RawCSSResult, RawStyleHandler, type RecipeStyles, type RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, type Selector, SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, type StyleDetails, type StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, type StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SuffixForSelector, TEXT_STYLES, type TagName, type TastyConfig, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPresetNames, type TastyThemeNames, type TextStyleProps, type TokenValue, type Tokens, TypographyPreset, type UnitHandler, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tastyDebug, warn };
@@ -0,0 +1,25 @@
1
+ import { Bucket } from "../parser/types.js";
2
+ import { StyleParser } from "../parser/parser.js";
3
+ import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
4
+ import { getGlobalPredefinedStates, setGlobalPredefinedStates } from "../states/index.js";
5
+ import { hslToRgbValues, processTokens, stringifyTokens } from "../utils/process-tokens.js";
6
+ import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "../utils/styles.js";
7
+ import { styleHandlers } from "../styles/predefined.js";
8
+ import { SheetManager } from "../injector/sheet-manager.js";
9
+ import { StyleInjector } from "../injector/injector.js";
10
+ import { isSelector, renderStyles } from "../pipeline/index.js";
11
+ import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "../config.js";
12
+ import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "../chunks/definitions.js";
13
+ import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "../styles/list.js";
14
+ import { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "../injector/index.js";
15
+ import { filterBaseProps } from "../utils/filter-base-props.js";
16
+ import { color } from "../utils/colors.js";
17
+ import { _modAttrs } from "../utils/mod-attrs.js";
18
+ import { dotize } from "../utils/dotize.js";
19
+ import { mergeStyles } from "../utils/merge-styles.js";
20
+ import { resolveRecipes } from "../utils/resolve-recipes.js";
21
+ import { deprecationWarning, warn } from "../utils/warnings.js";
22
+ import { generateTypographyTokens } from "../utils/typography.js";
23
+ import { tastyDebug } from "../debug.js";
24
+
25
+ export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tastyDebug, warn };
@@ -5,8 +5,8 @@ import { CHUNK_NAMES, categorizeStyleKeys } from "../chunks/definitions.js";
5
5
  import { generateChunkCacheKey } from "../chunks/cacheKey.js";
6
6
  import { renderStylesForChunk } from "../chunks/renderChunk.js";
7
7
  import { allocateClassName, inject, keyframes, property } from "../injector/index.js";
8
- import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
9
8
  import { resolveRecipes } from "../utils/resolve-recipes.js";
9
+ import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "../keyframes/index.js";
10
10
  import { useInsertionEffect, useMemo, useRef } from "react";
11
11
 
12
12
  //#region src/hooks/useStyles.ts
package/dist/index.d.ts CHANGED
@@ -1,38 +1,38 @@
1
1
  import { CacheMetrics, DisposeFunction, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./injector/types.js";
2
+ import { CSSProperties } from "./utils/css-types.js";
3
+ import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./parser/types.js";
4
+ import { StyleParser } from "./parser/parser.js";
2
5
  import { AtRuleContext, ParsedAdvancedState, StateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
3
6
  import { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
4
7
  import { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames } from "./styles/types.js";
5
8
  import { RenderResult, StyleResult, isSelector, renderStyles } from "./pipeline/index.js";
6
9
  import { SheetManager } from "./injector/sheet-manager.js";
7
10
  import { StyleInjector } from "./injector/injector.js";
11
+ import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
12
+ import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
13
+ import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
14
+ import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
8
15
  import { PropertyOptions, allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
9
16
  import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
10
- import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
17
+ import { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens } from "./types.js";
11
18
  import { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, tasty } from "./tasty.js";
12
19
  import { UseStylesOptions, UseStylesResult, useStyles } from "./hooks/useStyles.js";
13
20
  import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
14
21
  import { useRawCSS } from "./hooks/useRawCSS.js";
15
22
  import { useKeyframes } from "./hooks/useKeyframes.js";
16
23
  import { UsePropertyOptions, useProperty } from "./hooks/useProperty.js";
17
- import "./hooks/index.js";
18
- import { TastyPlugin, TastyPluginFactory } from "./plugins/types.js";
19
- import { TastyConfig, configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
20
- import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
21
- import "./plugins/index.js";
22
- import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
23
- import "./chunks/index.js";
24
+ import { getDisplayName } from "./utils/get-display-name.js";
25
+ import { styleHandlers } from "./styles/predefined.js";
24
26
  import { filterBaseProps } from "./utils/filter-base-props.js";
25
27
  import { color } from "./utils/colors.js";
26
28
  import { _modAttrs } from "./utils/mod-attrs.js";
27
- import { styleHandlers } from "./styles/predefined.js";
28
- import "./styles/index.js";
29
29
  import { dotize } from "./utils/dotize.js";
30
30
  import { mergeStyles } from "./utils/merge-styles.js";
31
31
  import { resolveRecipes } from "./utils/resolve-recipes.js";
32
32
  import { deprecationWarning, warn } from "./utils/warnings.js";
33
- import { getDisplayName } from "./utils/get-display-name.js";
34
33
  import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
35
34
  import { TypographyPreset } from "./tokens/typography.js";
36
35
  import { generateTypographyTokens } from "./utils/typography.js";
37
36
  import { tastyDebug } from "./debug.js";
38
- export { type AllBaseProps, type AllBasePropsWithMods, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CUSTOM_UNITS, CacheMetrics, type ChunkInfo, type ChunkName, type ColorStyleProps, ComputeModel, type ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, type DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, type FlowStyleProps, type GlobalStyledProps, INNER_STYLES, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_STYLES, type ParsedAdvancedState, ParsedColor, type PositionStyleProps, PropertyDefinition, PropertyOptions, type Props, RawCSSResult, RawStyleHandler, type RecipeStyles, type RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, type Selector, SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StylePropValue, type StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, type SuffixForSelector, TEXT_STYLES, type TagName, type TastyConfig, type TastyElementOptions, type TastyElementProps, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPresetNames, type TastyProps, type TastyThemeNames, type TextStyleProps, type TokenValue, type Tokens, TypographyPreset, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
37
+ import "./core/index.js";
38
+ export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorStyleProps, ComputeModel, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
package/dist/index.js CHANGED
@@ -1,30 +1,32 @@
1
+ import { Bucket } from "./parser/types.js";
2
+ import { StyleParser } from "./parser/parser.js";
1
3
  import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
4
+ import { getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
2
5
  import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
3
6
  import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
4
7
  import { styleHandlers } from "./styles/predefined.js";
5
8
  import { SheetManager } from "./injector/sheet-manager.js";
6
9
  import { StyleInjector } from "./injector/injector.js";
7
- import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
8
- import { getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
9
10
  import { isSelector, renderStyles } from "./pipeline/index.js";
11
+ import { configure, getConfig, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
10
12
  import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
13
+ import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
11
14
  import { allocateClassName, cleanup, createInjector, destroy, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
15
+ import { filterBaseProps } from "./utils/filter-base-props.js";
16
+ import { color } from "./utils/colors.js";
17
+ import { _modAttrs } from "./utils/mod-attrs.js";
18
+ import { dotize } from "./utils/dotize.js";
12
19
  import { mergeStyles } from "./utils/merge-styles.js";
13
20
  import { resolveRecipes } from "./utils/resolve-recipes.js";
21
+ import { deprecationWarning, warn } from "./utils/warnings.js";
22
+ import { generateTypographyTokens } from "./utils/typography.js";
23
+ import { tastyDebug } from "./debug.js";
14
24
  import { useStyles } from "./hooks/useStyles.js";
15
- import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
16
25
  import { getDisplayName } from "./utils/get-display-name.js";
17
- import { _modAttrs } from "./utils/mod-attrs.js";
18
26
  import { Element, tasty } from "./tasty.js";
19
27
  import { useGlobalStyles } from "./hooks/useGlobalStyles.js";
20
28
  import { useRawCSS } from "./hooks/useRawCSS.js";
21
29
  import { useKeyframes } from "./hooks/useKeyframes.js";
22
30
  import { useProperty } from "./hooks/useProperty.js";
23
- import { filterBaseProps } from "./utils/filter-base-props.js";
24
- import { color } from "./utils/colors.js";
25
- import { dotize } from "./utils/dotize.js";
26
- import { deprecationWarning, warn } from "./utils/warnings.js";
27
- import { generateTypographyTokens } from "./utils/typography.js";
28
- import { tastyDebug } from "./debug.js";
29
31
 
30
- export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
32
+ export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
@@ -1,6 +1,6 @@
1
+ import { isDevEnv } from "../utils/is-dev-env.js";
1
2
  import { parseStyle } from "../utils/styles.js";
2
3
  import { colorInitialValueToRgb, getEffectiveDefinition, normalizePropertyDefinition } from "../properties/index.js";
3
- import { isDevEnv } from "../utils/is-dev-env.js";
4
4
  import { SheetManager } from "./sheet-manager.js";
5
5
 
6
6
  //#region src/injector/injector.ts
@@ -1,6 +1,6 @@
1
- import { Lru } from "./lru.js";
2
1
  import { Bucket, finalizeGroup, finalizePart, makeEmptyDetails, makeEmptyPart } from "./types.js";
3
2
  import { classify } from "./classify.js";
3
+ import { Lru } from "./lru.js";
4
4
  import { scan } from "./tokenizer.js";
5
5
 
6
6
  //#region src/parser/parser.ts
@@ -1,6 +1,4 @@
1
1
  import { Styles } from "../styles/types.js";
2
- import "./parseStateKey.js";
3
- import "./exclusive.js";
4
2
 
5
3
  //#region src/pipeline/index.d.ts
6
4
  /**
@@ -1,8 +1,8 @@
1
1
  import { Lru } from "../parser/lru.js";
2
+ import { createStateParserContext, extractLocalPredefinedStates } from "../states/index.js";
2
3
  import { stringifyStyles } from "../utils/styles.js";
3
4
  import { createStyle } from "../styles/createStyle.js";
4
5
  import { STYLE_HANDLER_MAP } from "../styles/index.js";
5
- import { createStateParserContext, extractLocalPredefinedStates } from "../states/index.js";
6
6
  import { and, falseCondition, not, or, trueCondition } from "./conditions.js";
7
7
  import { simplifyCondition } from "./simplify.js";
8
8
  import { buildExclusiveConditions, expandExclusiveOrs, expandOrConditions, isValueMapping, parseStyleEntries } from "./exclusive.js";
@@ -1,6 +1,6 @@
1
1
  import { Lru } from "../parser/lru.js";
2
- import { camelToKebab } from "../utils/case-converter.js";
3
2
  import { expandDimensionShorthands, expandTastyUnits, findTopLevelComma, resolvePredefinedState } from "../states/index.js";
3
+ import { camelToKebab } from "../utils/case-converter.js";
4
4
  import { and, createContainerDimensionCondition, createContainerRawCondition, createContainerStyleCondition, createMediaDimensionCondition, createMediaFeatureCondition, createMediaTypeCondition, createModifierCondition, createOwnCondition, createParentCondition, createPseudoCondition, createRootCondition, createStartingCondition, createSupportsCondition, not, or, trueCondition } from "./conditions.js";
5
5
 
6
6
  //#region src/pipeline/parseStateKey.ts
@@ -1,5 +1,3 @@
1
- import "../styles/types.js";
2
-
3
1
  //#region src/states/index.d.ts
4
2
  /**
5
3
  * Parsed advanced state information
@@ -1,2 +1,2 @@
1
- import { styleHandlers } from "./predefined.js";
2
- import "../index.js";
1
+ import "../index.js";
2
+ import { styleHandlers } from "./predefined.js";
@@ -1,4 +1,3 @@
1
- import "../utils/styles.js";
2
1
  import { alignStyle } from "./align.js";
3
2
  import { borderStyle } from "./border.js";
4
3
  import { colorStyle } from "./color.js";
@@ -1,6 +1,6 @@
1
1
  import { KeyframesSteps, PropertyDefinition } from "../injector/types.js";
2
+ import { CSSProperties } from "../utils/css-types.js";
2
3
  import { StyleValue, StyleValueStateMap } from "../utils/styles.js";
3
- import { CSSProperties } from "react";
4
4
 
5
5
  //#region src/styles/types.d.ts
6
6
  /**
package/dist/tasty.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { KeyframesSteps, PropertyDefinition } from "./injector/types.js";
2
2
  import { StyleValue, StyleValueStateMap } from "./utils/styles.js";
3
3
  import { Styles, StylesInterface } from "./styles/types.js";
4
- import "./injector/index.js";
5
4
  import { AllBaseProps, BaseProps, BaseStyleProps, Mods, Props, Tokens } from "./types.js";
6
5
  import * as react from "react";
7
6
  import { AllHTMLAttributes, ComponentType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";
@@ -100,27 +99,73 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
100
99
  declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div'>(options: TastyElementOptions<K, V, E, Tag>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>> & SubElementComponents<E>;
101
100
  declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
102
101
  declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
103
- top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
104
- right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
105
- bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
106
- left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
107
- color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
108
- fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
102
+ display?: StyleValue<csstype.Property.Display | undefined> | StyleValueStateMap<csstype.Property.Display | undefined>;
109
103
  font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
110
- outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
111
- gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
112
- padding?: StyleValue<boolean | csstype.Property.Padding<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Padding<string | number> | undefined>;
104
+ preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
105
+ hide?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
106
+ whiteSpace?: StyleValue<csstype.Property.WhiteSpace | undefined> | StyleValueStateMap<csstype.Property.WhiteSpace | undefined>;
107
+ opacity?: StyleValue<csstype.Property.Opacity | undefined> | StyleValueStateMap<csstype.Property.Opacity | undefined>;
108
+ transition?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
109
+ gridArea?: StyleValue<csstype.Property.GridArea | undefined> | StyleValueStateMap<csstype.Property.GridArea | undefined>;
110
+ order?: StyleValue<csstype.Property.Order | undefined> | StyleValueStateMap<csstype.Property.Order | undefined>;
111
+ gridColumn?: StyleValue<csstype.Property.GridColumn | undefined> | StyleValueStateMap<csstype.Property.GridColumn | undefined>;
112
+ gridRow?: StyleValue<csstype.Property.GridRow | undefined> | StyleValueStateMap<csstype.Property.GridRow | undefined>;
113
+ placeSelf?: StyleValue<csstype.Property.PlaceSelf | undefined> | StyleValueStateMap<csstype.Property.PlaceSelf | undefined>;
114
+ alignSelf?: StyleValue<csstype.Property.AlignSelf | undefined> | StyleValueStateMap<csstype.Property.AlignSelf | undefined>;
115
+ justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
116
+ zIndex?: StyleValue<csstype.Property.ZIndex | undefined> | StyleValueStateMap<csstype.Property.ZIndex | undefined>;
113
117
  margin?: StyleValue<boolean | csstype.Property.Margin<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Margin<string | number> | undefined>;
118
+ inset?: StyleValue<csstype.Property.Inset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Inset<string | number> | undefined>;
119
+ position?: StyleValue<csstype.Property.Position | undefined> | StyleValueStateMap<csstype.Property.Position | undefined>;
120
+ padding?: StyleValue<boolean | csstype.Property.Padding<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Padding<string | number> | undefined>;
121
+ paddingInline?: StyleValue<csstype.Property.PaddingInline<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingInline<string | number> | undefined>;
122
+ paddingBlock?: StyleValue<csstype.Property.PaddingBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingBlock<string | number> | undefined>;
123
+ overflow?: StyleValue<csstype.Property.Overflow | undefined> | StyleValueStateMap<csstype.Property.Overflow | undefined>;
124
+ scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
125
+ textAlign?: StyleValue<csstype.Property.TextAlign | undefined> | StyleValueStateMap<csstype.Property.TextAlign | undefined>;
126
+ border?: StyleValue<boolean | csstype.Property.Border<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Border<string | number> | undefined>;
127
+ radius?: StyleValue<string | true | undefined> | StyleValueStateMap<string | true | undefined>;
128
+ shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
129
+ outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
130
+ color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
131
+ fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.1` | `#${string}.2` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.01` | `#${string}.02` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.71` | `#${string}.72` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.61` | `#${string}.62` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.41` | `#${string}.42` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.31` | `#${string}.32` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.10` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.11` | `#${string}.12` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.21` | `#${string}.22` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.50` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.51` | `#${string}.52` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.81` | `#${string}.82` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.91` | `#${string}.92` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.1` | `#${string}.2` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.01` | `#${string}.02` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.71` | `#${string}.72` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.61` | `#${string}.62` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.41` | `#${string}.42` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.31` | `#${string}.32` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.10` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.11` | `#${string}.12` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.21` | `#${string}.22` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.50` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.51` | `#${string}.52` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.81` | `#${string}.82` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.91` | `#${string}.92` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
132
+ fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
133
+ image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
134
+ textTransform?: StyleValue<csstype.Property.TextTransform | undefined> | StyleValueStateMap<csstype.Property.TextTransform | undefined>;
135
+ fontWeight?: StyleValue<csstype.Property.FontWeight | undefined> | StyleValueStateMap<csstype.Property.FontWeight | undefined>;
136
+ fontStyle?: StyleValue<csstype.Property.FontStyle | undefined> | StyleValueStateMap<csstype.Property.FontStyle | undefined>;
114
137
  width?: StyleValue<boolean | csstype.Property.Width<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Width<string | number> | undefined>;
115
138
  height?: StyleValue<boolean | csstype.Property.Height<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Height<string | number> | undefined>;
116
- border?: StyleValue<boolean | csstype.Property.Border<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Border<string | number> | undefined>;
117
- transition?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
118
- placeContent?: StyleValue<csstype.Property.PlaceContent | undefined> | StyleValueStateMap<csstype.Property.PlaceContent | undefined>;
139
+ flexBasis?: StyleValue<csstype.Property.FlexBasis<string | number> | undefined> | StyleValueStateMap<csstype.Property.FlexBasis<string | number> | undefined>;
140
+ flexGrow?: StyleValue<csstype.Property.FlexGrow | undefined> | StyleValueStateMap<csstype.Property.FlexGrow | undefined>;
141
+ flexShrink?: StyleValue<csstype.Property.FlexShrink | undefined> | StyleValueStateMap<csstype.Property.FlexShrink | undefined>;
142
+ flex?: StyleValue<csstype.Property.Flex<string | number> | undefined> | StyleValueStateMap<csstype.Property.Flex<string | number> | undefined>;
143
+ flow?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
119
144
  placeItems?: StyleValue<csstype.Property.PlaceItems | undefined> | StyleValueStateMap<csstype.Property.PlaceItems | undefined>;
120
- accentColor?: StyleValue<csstype.Property.AccentColor | undefined> | StyleValueStateMap<csstype.Property.AccentColor | undefined>;
121
- alignContent?: StyleValue<csstype.Property.AlignContent | undefined> | StyleValueStateMap<csstype.Property.AlignContent | undefined>;
145
+ placeContent?: StyleValue<csstype.Property.PlaceContent | undefined> | StyleValueStateMap<csstype.Property.PlaceContent | undefined>;
122
146
  alignItems?: StyleValue<csstype.Property.AlignItems | undefined> | StyleValueStateMap<csstype.Property.AlignItems | undefined>;
123
- alignSelf?: StyleValue<csstype.Property.AlignSelf | undefined> | StyleValueStateMap<csstype.Property.AlignSelf | undefined>;
147
+ alignContent?: StyleValue<csstype.Property.AlignContent | undefined> | StyleValueStateMap<csstype.Property.AlignContent | undefined>;
148
+ justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
149
+ justifyContent?: StyleValue<csstype.Property.JustifyContent | undefined> | StyleValueStateMap<csstype.Property.JustifyContent | undefined>;
150
+ align?: StyleValue<"start" | (string & {}) | "center" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined> | StyleValueStateMap<"start" | (string & {}) | "center" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | "space-around" | "space-between" | "space-evenly" | undefined>;
151
+ justify?: StyleValue<"right" | "left" | "start" | (string & {}) | "center" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined> | StyleValueStateMap<"right" | "left" | "start" | (string & {}) | "center" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "stretch" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
152
+ gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
153
+ columnGap?: StyleValue<csstype.Property.ColumnGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.ColumnGap<string | number> | undefined>;
154
+ rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
155
+ gridColumns?: StyleValue<csstype.Property.GridTemplateColumns<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateColumns<string | number> | undefined>;
156
+ gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
157
+ gridTemplate?: StyleValue<csstype.Property.GridTemplate | undefined> | StyleValueStateMap<csstype.Property.GridTemplate | undefined>;
158
+ gridAreas?: StyleValue<csstype.Property.GridTemplateAreas | undefined> | StyleValueStateMap<csstype.Property.GridTemplateAreas | undefined>;
159
+ top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
160
+ right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
161
+ bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
162
+ left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
163
+ content?: StyleValue<csstype.Property.Content | undefined> | StyleValueStateMap<csstype.Property.Content | undefined>;
164
+ translate?: StyleValue<csstype.Property.Translate<string | number> | undefined> | StyleValueStateMap<csstype.Property.Translate<string | number> | undefined>;
165
+ background?: StyleValue<csstype.Property.Background<string | number> | undefined> | StyleValueStateMap<csstype.Property.Background<string | number> | undefined>;
166
+ all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
167
+ page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
168
+ accentColor?: StyleValue<csstype.Property.AccentColor | undefined> | StyleValueStateMap<csstype.Property.AccentColor | undefined>;
124
169
  alignTracks?: StyleValue<csstype.Property.AlignTracks | undefined> | StyleValueStateMap<csstype.Property.AlignTracks | undefined>;
125
170
  alignmentBaseline?: StyleValue<csstype.Property.AlignmentBaseline | undefined> | StyleValueStateMap<csstype.Property.AlignmentBaseline | undefined>;
126
171
  anchorName?: StyleValue<csstype.Property.AnchorName | undefined> | StyleValueStateMap<csstype.Property.AnchorName | undefined>;
@@ -209,7 +254,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
209
254
  colorScheme?: StyleValue<csstype.Property.ColorScheme | undefined> | StyleValueStateMap<csstype.Property.ColorScheme | undefined>;
210
255
  columnCount?: StyleValue<csstype.Property.ColumnCount | undefined> | StyleValueStateMap<csstype.Property.ColumnCount | undefined>;
211
256
  columnFill?: StyleValue<csstype.Property.ColumnFill | undefined> | StyleValueStateMap<csstype.Property.ColumnFill | undefined>;
212
- columnGap?: StyleValue<csstype.Property.ColumnGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.ColumnGap<string | number> | undefined>;
213
257
  columnRuleColor?: StyleValue<csstype.Property.ColumnRuleColor | undefined> | StyleValueStateMap<csstype.Property.ColumnRuleColor | undefined>;
214
258
  columnRuleStyle?: StyleValue<csstype.Property.ColumnRuleStyle | undefined> | StyleValueStateMap<csstype.Property.ColumnRuleStyle | undefined>;
215
259
  columnRuleWidth?: StyleValue<csstype.Property.ColumnRuleWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.ColumnRuleWidth<string | number> | undefined>;
@@ -222,7 +266,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
222
266
  containIntrinsicWidth?: StyleValue<csstype.Property.ContainIntrinsicWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.ContainIntrinsicWidth<string | number> | undefined>;
223
267
  containerName?: StyleValue<csstype.Property.ContainerName | undefined> | StyleValueStateMap<csstype.Property.ContainerName | undefined>;
224
268
  containerType?: StyleValue<csstype.Property.ContainerType | undefined> | StyleValueStateMap<csstype.Property.ContainerType | undefined>;
225
- content?: StyleValue<csstype.Property.Content | undefined> | StyleValueStateMap<csstype.Property.Content | undefined>;
226
269
  contentVisibility?: StyleValue<csstype.Property.ContentVisibility | undefined> | StyleValueStateMap<csstype.Property.ContentVisibility | undefined>;
227
270
  counterIncrement?: StyleValue<csstype.Property.CounterIncrement | undefined> | StyleValueStateMap<csstype.Property.CounterIncrement | undefined>;
228
271
  counterReset?: StyleValue<csstype.Property.CounterReset | undefined> | StyleValueStateMap<csstype.Property.CounterReset | undefined>;
@@ -232,17 +275,13 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
232
275
  cy?: StyleValue<csstype.Property.Cy<string | number> | undefined> | StyleValueStateMap<csstype.Property.Cy<string | number> | undefined>;
233
276
  d?: StyleValue<csstype.Property.D | undefined> | StyleValueStateMap<csstype.Property.D | undefined>;
234
277
  direction?: StyleValue<csstype.Property.Direction | undefined> | StyleValueStateMap<csstype.Property.Direction | undefined>;
235
- display?: StyleValue<csstype.Property.Display | undefined> | StyleValueStateMap<csstype.Property.Display | undefined>;
236
278
  dominantBaseline?: StyleValue<csstype.Property.DominantBaseline | undefined> | StyleValueStateMap<csstype.Property.DominantBaseline | undefined>;
237
279
  emptyCells?: StyleValue<csstype.Property.EmptyCells | undefined> | StyleValueStateMap<csstype.Property.EmptyCells | undefined>;
238
280
  fieldSizing?: StyleValue<csstype.Property.FieldSizing | undefined> | StyleValueStateMap<csstype.Property.FieldSizing | undefined>;
239
281
  fillOpacity?: StyleValue<csstype.Property.FillOpacity | undefined> | StyleValueStateMap<csstype.Property.FillOpacity | undefined>;
240
282
  fillRule?: StyleValue<csstype.Property.FillRule | undefined> | StyleValueStateMap<csstype.Property.FillRule | undefined>;
241
283
  filter?: StyleValue<csstype.Property.Filter | undefined> | StyleValueStateMap<csstype.Property.Filter | undefined>;
242
- flexBasis?: StyleValue<csstype.Property.FlexBasis<string | number> | undefined> | StyleValueStateMap<csstype.Property.FlexBasis<string | number> | undefined>;
243
284
  flexDirection?: StyleValue<csstype.Property.FlexDirection | undefined> | StyleValueStateMap<csstype.Property.FlexDirection | undefined>;
244
- flexGrow?: StyleValue<csstype.Property.FlexGrow | undefined> | StyleValueStateMap<csstype.Property.FlexGrow | undefined>;
245
- flexShrink?: StyleValue<csstype.Property.FlexShrink | undefined> | StyleValueStateMap<csstype.Property.FlexShrink | undefined>;
246
285
  flexWrap?: StyleValue<csstype.Property.FlexWrap | undefined> | StyleValueStateMap<csstype.Property.FlexWrap | undefined>;
247
286
  float?: StyleValue<csstype.Property.Float | undefined> | StyleValueStateMap<csstype.Property.Float | undefined>;
248
287
  floodColor?: StyleValue<csstype.Property.FloodColor | undefined> | StyleValueStateMap<csstype.Property.FloodColor | undefined>;
@@ -256,7 +295,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
256
295
  fontSize?: StyleValue<csstype.Property.FontSize<string | number> | undefined> | StyleValueStateMap<csstype.Property.FontSize<string | number> | undefined>;
257
296
  fontSizeAdjust?: StyleValue<csstype.Property.FontSizeAdjust | undefined> | StyleValueStateMap<csstype.Property.FontSizeAdjust | undefined>;
258
297
  fontSmooth?: StyleValue<csstype.Property.FontSmooth<string | number> | undefined> | StyleValueStateMap<csstype.Property.FontSmooth<string | number> | undefined>;
259
- fontStyle?: StyleValue<csstype.Property.FontStyle | undefined> | StyleValueStateMap<csstype.Property.FontStyle | undefined>;
260
298
  fontSynthesis?: StyleValue<csstype.Property.FontSynthesis | undefined> | StyleValueStateMap<csstype.Property.FontSynthesis | undefined>;
261
299
  fontSynthesisPosition?: StyleValue<csstype.Property.FontSynthesisPosition | undefined> | StyleValueStateMap<csstype.Property.FontSynthesisPosition | undefined>;
262
300
  fontSynthesisSmallCaps?: StyleValue<csstype.Property.FontSynthesisSmallCaps | undefined> | StyleValueStateMap<csstype.Property.FontSynthesisSmallCaps | undefined>;
@@ -271,7 +309,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
271
309
  fontVariantNumeric?: StyleValue<csstype.Property.FontVariantNumeric | undefined> | StyleValueStateMap<csstype.Property.FontVariantNumeric | undefined>;
272
310
  fontVariantPosition?: StyleValue<csstype.Property.FontVariantPosition | undefined> | StyleValueStateMap<csstype.Property.FontVariantPosition | undefined>;
273
311
  fontVariationSettings?: StyleValue<csstype.Property.FontVariationSettings | undefined> | StyleValueStateMap<csstype.Property.FontVariationSettings | undefined>;
274
- fontWeight?: StyleValue<csstype.Property.FontWeight | undefined> | StyleValueStateMap<csstype.Property.FontWeight | undefined>;
275
312
  fontWidth?: StyleValue<csstype.Property.FontWidth | undefined> | StyleValueStateMap<csstype.Property.FontWidth | undefined>;
276
313
  forcedColorAdjust?: StyleValue<csstype.Property.ForcedColorAdjust | undefined> | StyleValueStateMap<csstype.Property.ForcedColorAdjust | undefined>;
277
314
  gridAutoColumns?: StyleValue<csstype.Property.GridAutoColumns<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridAutoColumns<string | number> | undefined>;
@@ -300,9 +337,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
300
337
  insetInlineStart?: StyleValue<csstype.Property.InsetInlineStart<string | number> | undefined> | StyleValueStateMap<csstype.Property.InsetInlineStart<string | number> | undefined>;
301
338
  interpolateSize?: StyleValue<csstype.Property.InterpolateSize | undefined> | StyleValueStateMap<csstype.Property.InterpolateSize | undefined>;
302
339
  isolation?: StyleValue<csstype.Property.Isolation | undefined> | StyleValueStateMap<csstype.Property.Isolation | undefined>;
303
- justifyContent?: StyleValue<csstype.Property.JustifyContent | undefined> | StyleValueStateMap<csstype.Property.JustifyContent | undefined>;
304
- justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
305
- justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
306
340
  justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
307
341
  letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
308
342
  lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
@@ -366,8 +400,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
366
400
  offsetPosition?: StyleValue<csstype.Property.OffsetPosition<string | number> | undefined> | StyleValueStateMap<csstype.Property.OffsetPosition<string | number> | undefined>;
367
401
  offsetRotate?: StyleValue<csstype.Property.OffsetRotate | undefined> | StyleValueStateMap<csstype.Property.OffsetRotate | undefined>;
368
402
  offsetRotation?: StyleValue<csstype.Property.OffsetRotate | undefined> | StyleValueStateMap<csstype.Property.OffsetRotate | undefined>;
369
- opacity?: StyleValue<csstype.Property.Opacity | undefined> | StyleValueStateMap<csstype.Property.Opacity | undefined>;
370
- order?: StyleValue<csstype.Property.Order | undefined> | StyleValueStateMap<csstype.Property.Order | undefined>;
371
403
  orphans?: StyleValue<csstype.Property.Orphans | undefined> | StyleValueStateMap<csstype.Property.Orphans | undefined>;
372
404
  outlineColor?: StyleValue<csstype.Property.OutlineColor | undefined> | StyleValueStateMap<csstype.Property.OutlineColor | undefined>;
373
405
  outlineOffset?: StyleValue<string | number | undefined> | StyleValueStateMap<string | number | undefined>;
@@ -394,12 +426,10 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
394
426
  paddingLeft?: StyleValue<csstype.Property.PaddingLeft<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingLeft<string | number> | undefined>;
395
427
  paddingRight?: StyleValue<csstype.Property.PaddingRight<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingRight<string | number> | undefined>;
396
428
  paddingTop?: StyleValue<csstype.Property.PaddingTop<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingTop<string | number> | undefined>;
397
- page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
398
429
  paintOrder?: StyleValue<csstype.Property.PaintOrder | undefined> | StyleValueStateMap<csstype.Property.PaintOrder | undefined>;
399
430
  perspective?: StyleValue<csstype.Property.Perspective<string | number> | undefined> | StyleValueStateMap<csstype.Property.Perspective<string | number> | undefined>;
400
431
  perspectiveOrigin?: StyleValue<csstype.Property.PerspectiveOrigin<string | number> | undefined> | StyleValueStateMap<csstype.Property.PerspectiveOrigin<string | number> | undefined>;
401
432
  pointerEvents?: StyleValue<csstype.Property.PointerEvents | undefined> | StyleValueStateMap<csstype.Property.PointerEvents | undefined>;
402
- position?: StyleValue<csstype.Property.Position | undefined> | StyleValueStateMap<csstype.Property.Position | undefined>;
403
433
  positionAnchor?: StyleValue<csstype.Property.PositionAnchor | undefined> | StyleValueStateMap<csstype.Property.PositionAnchor | undefined>;
404
434
  positionArea?: StyleValue<csstype.Property.PositionArea | undefined> | StyleValueStateMap<csstype.Property.PositionArea | undefined>;
405
435
  positionTryFallbacks?: StyleValue<csstype.Property.PositionTryFallbacks | undefined> | StyleValueStateMap<csstype.Property.PositionTryFallbacks | undefined>;
@@ -410,7 +440,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
410
440
  r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
411
441
  resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
412
442
  rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
413
- rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
414
443
  rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
415
444
  rubyMerge?: StyleValue<csstype.Property.RubyMerge | undefined> | StyleValueStateMap<csstype.Property.RubyMerge | undefined>;
416
445
  rubyOverhang?: StyleValue<csstype.Property.RubyOverhang | undefined> | StyleValueStateMap<csstype.Property.RubyOverhang | undefined>;
@@ -466,7 +495,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
466
495
  strokeWidth?: StyleValue<csstype.Property.StrokeWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.StrokeWidth<string | number> | undefined>;
467
496
  tabSize?: StyleValue<csstype.Property.TabSize<string | number> | undefined> | StyleValueStateMap<csstype.Property.TabSize<string | number> | undefined>;
468
497
  tableLayout?: StyleValue<csstype.Property.TableLayout | undefined> | StyleValueStateMap<csstype.Property.TableLayout | undefined>;
469
- textAlign?: StyleValue<csstype.Property.TextAlign | undefined> | StyleValueStateMap<csstype.Property.TextAlign | undefined>;
470
498
  textAlignLast?: StyleValue<csstype.Property.TextAlignLast | undefined> | StyleValueStateMap<csstype.Property.TextAlignLast | undefined>;
471
499
  textAnchor?: StyleValue<csstype.Property.TextAnchor | undefined> | StyleValueStateMap<csstype.Property.TextAnchor | undefined>;
472
500
  textAutospace?: StyleValue<csstype.Property.TextAutospace | undefined> | StyleValueStateMap<csstype.Property.TextAutospace | undefined>;
@@ -491,7 +519,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
491
519
  textShadow?: StyleValue<csstype.Property.TextShadow | undefined> | StyleValueStateMap<csstype.Property.TextShadow | undefined>;
492
520
  textSizeAdjust?: StyleValue<csstype.Property.TextSizeAdjust | undefined> | StyleValueStateMap<csstype.Property.TextSizeAdjust | undefined>;
493
521
  textSpacingTrim?: StyleValue<csstype.Property.TextSpacingTrim | undefined> | StyleValueStateMap<csstype.Property.TextSpacingTrim | undefined>;
494
- textTransform?: StyleValue<csstype.Property.TextTransform | undefined> | StyleValueStateMap<csstype.Property.TextTransform | undefined>;
495
522
  textUnderlineOffset?: StyleValue<csstype.Property.TextUnderlineOffset<string | number> | undefined> | StyleValueStateMap<csstype.Property.TextUnderlineOffset<string | number> | undefined>;
496
523
  textUnderlinePosition?: StyleValue<csstype.Property.TextUnderlinePosition | undefined> | StyleValueStateMap<csstype.Property.TextUnderlinePosition | undefined>;
497
524
  textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
@@ -507,7 +534,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
507
534
  transitionDuration?: StyleValue<csstype.Property.TransitionDuration<string & {}> | undefined> | StyleValueStateMap<csstype.Property.TransitionDuration<string & {}> | undefined>;
508
535
  transitionProperty?: StyleValue<csstype.Property.TransitionProperty | undefined> | StyleValueStateMap<csstype.Property.TransitionProperty | undefined>;
509
536
  transitionTimingFunction?: StyleValue<csstype.Property.TransitionTimingFunction | undefined> | StyleValueStateMap<csstype.Property.TransitionTimingFunction | undefined>;
510
- translate?: StyleValue<csstype.Property.Translate<string | number> | undefined> | StyleValueStateMap<csstype.Property.Translate<string | number> | undefined>;
511
537
  unicodeBidi?: StyleValue<csstype.Property.UnicodeBidi | undefined> | StyleValueStateMap<csstype.Property.UnicodeBidi | undefined>;
512
538
  userSelect?: StyleValue<csstype.Property.UserSelect | undefined> | StyleValueStateMap<csstype.Property.UserSelect | undefined>;
513
539
  vectorEffect?: StyleValue<csstype.Property.VectorEffect | undefined> | StyleValueStateMap<csstype.Property.VectorEffect | undefined>;
@@ -518,7 +544,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
518
544
  viewTransitionClass?: StyleValue<csstype.Property.ViewTransitionClass | undefined> | StyleValueStateMap<csstype.Property.ViewTransitionClass | undefined>;
519
545
  viewTransitionName?: StyleValue<csstype.Property.ViewTransitionName | undefined> | StyleValueStateMap<csstype.Property.ViewTransitionName | undefined>;
520
546
  visibility?: StyleValue<csstype.Property.Visibility | undefined> | StyleValueStateMap<csstype.Property.Visibility | undefined>;
521
- whiteSpace?: StyleValue<csstype.Property.WhiteSpace | undefined> | StyleValueStateMap<csstype.Property.WhiteSpace | undefined>;
522
547
  whiteSpaceCollapse?: StyleValue<csstype.Property.WhiteSpaceCollapse | undefined> | StyleValueStateMap<csstype.Property.WhiteSpaceCollapse | undefined>;
523
548
  widows?: StyleValue<csstype.Property.Widows | undefined> | StyleValueStateMap<csstype.Property.Widows | undefined>;
524
549
  willChange?: StyleValue<csstype.Property.WillChange | undefined> | StyleValueStateMap<csstype.Property.WillChange | undefined>;
@@ -528,12 +553,9 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
528
553
  writingMode?: StyleValue<csstype.Property.WritingMode | undefined> | StyleValueStateMap<csstype.Property.WritingMode | undefined>;
529
554
  x?: StyleValue<csstype.Property.X<string | number> | undefined> | StyleValueStateMap<csstype.Property.X<string | number> | undefined>;
530
555
  y?: StyleValue<csstype.Property.Y<string | number> | undefined> | StyleValueStateMap<csstype.Property.Y<string | number> | undefined>;
531
- zIndex?: StyleValue<csstype.Property.ZIndex | undefined> | StyleValueStateMap<csstype.Property.ZIndex | undefined>;
532
556
  zoom?: StyleValue<csstype.Property.Zoom | undefined> | StyleValueStateMap<csstype.Property.Zoom | undefined>;
533
- all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
534
557
  animation?: StyleValue<csstype.Property.Animation<string & {}> | undefined> | StyleValueStateMap<csstype.Property.Animation<string & {}> | undefined>;
535
558
  animationRange?: StyleValue<csstype.Property.AnimationRange<string | number> | undefined> | StyleValueStateMap<csstype.Property.AnimationRange<string | number> | undefined>;
536
- background?: StyleValue<csstype.Property.Background<string | number> | undefined> | StyleValueStateMap<csstype.Property.Background<string | number> | undefined>;
537
559
  backgroundPosition?: StyleValue<csstype.Property.BackgroundPosition<string | number> | undefined> | StyleValueStateMap<csstype.Property.BackgroundPosition<string | number> | undefined>;
538
560
  borderBlock?: StyleValue<csstype.Property.BorderBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderBlock<string | number> | undefined>;
539
561
  borderBlockColor?: StyleValue<csstype.Property.BorderBlockColor | undefined> | StyleValueStateMap<csstype.Property.BorderBlockColor | undefined>;
@@ -561,14 +583,8 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
561
583
  columns?: StyleValue<csstype.Property.Columns<string | number> | undefined> | StyleValueStateMap<csstype.Property.Columns<string | number> | undefined>;
562
584
  containIntrinsicSize?: StyleValue<csstype.Property.ContainIntrinsicSize<string | number> | undefined> | StyleValueStateMap<csstype.Property.ContainIntrinsicSize<string | number> | undefined>;
563
585
  container?: StyleValue<csstype.Property.Container | undefined> | StyleValueStateMap<csstype.Property.Container | undefined>;
564
- flex?: StyleValue<csstype.Property.Flex<string | number> | undefined> | StyleValueStateMap<csstype.Property.Flex<string | number> | undefined>;
565
586
  flexFlow?: StyleValue<csstype.Property.FlexFlow | undefined> | StyleValueStateMap<csstype.Property.FlexFlow | undefined>;
566
587
  grid?: StyleValue<csstype.Property.Grid | undefined> | StyleValueStateMap<csstype.Property.Grid | undefined>;
567
- gridArea?: StyleValue<csstype.Property.GridArea | undefined> | StyleValueStateMap<csstype.Property.GridArea | undefined>;
568
- gridColumn?: StyleValue<csstype.Property.GridColumn | undefined> | StyleValueStateMap<csstype.Property.GridColumn | undefined>;
569
- gridRow?: StyleValue<csstype.Property.GridRow | undefined> | StyleValueStateMap<csstype.Property.GridRow | undefined>;
570
- gridTemplate?: StyleValue<csstype.Property.GridTemplate | undefined> | StyleValueStateMap<csstype.Property.GridTemplate | undefined>;
571
- inset?: StyleValue<csstype.Property.Inset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Inset<string | number> | undefined>;
572
588
  insetBlock?: StyleValue<csstype.Property.InsetBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.InsetBlock<string | number> | undefined>;
573
589
  insetInline?: StyleValue<csstype.Property.InsetInline<string | number> | undefined> | StyleValueStateMap<csstype.Property.InsetInline<string | number> | undefined>;
574
590
  lineClamp?: StyleValue<csstype.Property.LineClamp | undefined> | StyleValueStateMap<csstype.Property.LineClamp | undefined>;
@@ -579,11 +595,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
579
595
  maskBorder?: StyleValue<csstype.Property.MaskBorder | undefined> | StyleValueStateMap<csstype.Property.MaskBorder | undefined>;
580
596
  motion?: StyleValue<csstype.Property.Offset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Offset<string | number> | undefined>;
581
597
  offset?: StyleValue<csstype.Property.Offset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Offset<string | number> | undefined>;
582
- overflow?: StyleValue<csstype.Property.Overflow | undefined> | StyleValueStateMap<csstype.Property.Overflow | undefined>;
583
598
  overscrollBehavior?: StyleValue<csstype.Property.OverscrollBehavior | undefined> | StyleValueStateMap<csstype.Property.OverscrollBehavior | undefined>;
584
- paddingBlock?: StyleValue<csstype.Property.PaddingBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingBlock<string | number> | undefined>;
585
- paddingInline?: StyleValue<csstype.Property.PaddingInline<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingInline<string | number> | undefined>;
586
- placeSelf?: StyleValue<csstype.Property.PlaceSelf | undefined> | StyleValueStateMap<csstype.Property.PlaceSelf | undefined>;
587
599
  positionTry?: StyleValue<csstype.Property.PositionTry | undefined> | StyleValueStateMap<csstype.Property.PositionTry | undefined>;
588
600
  scrollMargin?: StyleValue<csstype.Property.ScrollMargin<string | number> | undefined> | StyleValueStateMap<csstype.Property.ScrollMargin<string | number> | undefined>;
589
601
  scrollMarginBlock?: StyleValue<csstype.Property.ScrollMarginBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.ScrollMarginBlock<string | number> | undefined>;
@@ -957,27 +969,14 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
957
969
  colorInterpolation?: StyleValue<csstype.Property.ColorInterpolation | undefined> | StyleValueStateMap<csstype.Property.ColorInterpolation | undefined>;
958
970
  colorRendering?: StyleValue<csstype.Property.ColorRendering | undefined> | StyleValueStateMap<csstype.Property.ColorRendering | undefined>;
959
971
  glyphOrientationVertical?: StyleValue<csstype.Property.GlyphOrientationVertical | undefined> | StyleValueStateMap<csstype.Property.GlyphOrientationVertical | undefined>;
960
- image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
961
- svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.3` | `#${string}.2` | `#${string}.7` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.03` | `#${string}.02` | `#${string}.07` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.13` | `#${string}.12` | `#${string}.17` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.30` | `#${string}.31` | `#${string}.33` | `#${string}.32` | `#${string}.37` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.20` | `#${string}.21` | `#${string}.23` | `#${string}.22` | `#${string}.27` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.73` | `#${string}.72` | `#${string}.77` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.40` | `#${string}.41` | `#${string}.43` | `#${string}.42` | `#${string}.47` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.53` | `#${string}.52` | `#${string}.57` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.63` | `#${string}.62` | `#${string}.67` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.83` | `#${string}.82` | `#${string}.87` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.93` | `#${string}.92` | `#${string}.97` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
962
- fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
972
+ svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.1` | `#${string}.2` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.01` | `#${string}.02` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.71` | `#${string}.72` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.61` | `#${string}.62` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.41` | `#${string}.42` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.31` | `#${string}.32` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.10` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.11` | `#${string}.12` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.21` | `#${string}.22` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.50` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.51` | `#${string}.52` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.81` | `#${string}.82` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.91` | `#${string}.92` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.1` | `#${string}.2` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.01` | `#${string}.02` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.71` | `#${string}.72` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.61` | `#${string}.62` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.41` | `#${string}.42` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.31` | `#${string}.32` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.10` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.11` | `#${string}.12` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.21` | `#${string}.22` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.50` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.51` | `#${string}.52` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.81` | `#${string}.82` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.91` | `#${string}.92` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
963
973
  styledScrollbar?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
964
- scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
965
974
  boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;
966
- hide?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
967
- shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
968
- radius?: StyleValue<string | true | undefined> | StyleValueStateMap<string | true | undefined>;
969
- flow?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
970
- gridAreas?: StyleValue<csstype.Property.GridTemplateAreas | undefined> | StyleValueStateMap<csstype.Property.GridTemplateAreas | undefined>;
971
- gridColumns?: StyleValue<csstype.Property.GridTemplateColumns<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateColumns<string | number> | undefined>;
972
- gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
973
- preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
974
- align?: StyleValue<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined> | StyleValueStateMap<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined>;
975
- justify?: StyleValue<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
976
975
  place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
977
976
  "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
978
977
  "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
979
978
  recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
980
- } & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "top" | "right" | "bottom" | "left" | "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
979
+ } & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "display" | "font" | "preset" | "hide" | "whiteSpace" | "opacity" | "transition" | "gridArea" | "order" | "gridColumn" | "gridRow" | "placeSelf" | "alignSelf" | "justifySelf" | "zIndex" | "margin" | "inset" | "position" | "padding" | "paddingInline" | "paddingBlock" | "overflow" | "scrollbar" | "textAlign" | "border" | "radius" | "shadow" | "outline" | "color" | "fill" | "fade" | "image" | "textTransform" | "fontWeight" | "fontStyle" | "width" | "height" | "flexBasis" | "flexGrow" | "flexShrink" | "flex" | "flow" | "placeItems" | "placeContent" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "align" | "justify" | "gap" | "columnGap" | "rowGap" | "gridColumns" | "gridRows" | "gridTemplate" | "gridAreas" | "top" | "right" | "bottom" | "left" | "style" | "mods" | "css" | "content" | "translate" | "as" | "background" | "all" | "page" | "qa" | "qaVal" | "accentColor" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexDirection" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "animation" | "animationRange" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "grid" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overscrollBehavior" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "styledScrollbar" | "boldFontWeight" | "place" | "@keyframes" | "@properties" | "recipe" | "element" | "styles" | "breakpoints" | "block" | "inline" | "isHidden" | "isDisabled" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
981
980
  //#endregion
982
981
  export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, tasty };
983
982
  //# sourceMappingURL=tasty.d.ts.map
package/dist/tasty.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
2
+ import { BASE_STYLES } from "./styles/list.js";
3
+ import { _modAttrs } from "./utils/mod-attrs.js";
2
4
  import { mergeStyles } from "./utils/merge-styles.js";
3
5
  import { useStyles } from "./hooks/useStyles.js";
4
- import { BASE_STYLES } from "./styles/list.js";
5
6
  import { getDisplayName } from "./utils/get-display-name.js";
6
- import { _modAttrs } from "./utils/mod-attrs.js";
7
7
  import { createElement, forwardRef, useMemo } from "react";
8
8
  import { isValidElementType } from "react-is";
9
9
 
package/dist/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
+ import { CSSProperties } from "./utils/css-types.js";
1
2
  import { Styles } from "./styles/types.js";
2
- import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
3
- import { AllHTMLAttributes, CSSProperties, ComponentType } from "react";
3
+ import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
4
+ import { AllHTMLAttributes, ComponentType } from "react";
4
5
 
5
6
  //#region src/types.d.ts
6
7
  interface GlobalStyledProps {
@@ -94,6 +95,7 @@ type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
94
95
  type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
95
96
  type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
96
97
  type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
98
+ type InnerStyleProps = Pick<Styles, (typeof INNER_STYLES)[number]>;
97
99
  interface ShortGridStyles {
98
100
  template?: Styles['gridTemplate'];
99
101
  columns?: Styles['gridColumns'];
@@ -178,5 +180,5 @@ interface TastyExtensionConfig {
178
180
  stateDescriptions?: Record<string, string>;
179
181
  }
180
182
  //#endregion
181
- export { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens };
183
+ export { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens };
182
184
  //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1,7 @@
1
+ import { Properties } from "csstype";
2
+
3
+ //#region src/utils/css-types.d.ts
4
+ type CSSProperties = Properties<string | number>;
5
+ //#endregion
6
+ export { CSSProperties };
7
+ //# sourceMappingURL=css-types.d.ts.map
@@ -1,5 +1,5 @@
1
+ import { CSSProperties } from "./css-types.js";
1
2
  import { Tokens } from "../types.js";
2
- import { CSSProperties } from "react";
3
3
 
4
4
  //#region src/utils/process-tokens.d.ts
5
5
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { Tokens, TokenValue } from '../types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n getRgbValuesFromRgbaString,\n hexToRgb,\n normalizeColorTokenValue,\n parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n * hsl(200, 40%, 50%)\n * hsl(200 40% 50%)\n * hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n const match = str.match(/hsla?\\(([^)]+)\\)/i);\n if (!match) return null;\n\n const inner = match[1].trim();\n // Split by slash first (for alpha), then handle color components\n const [colorPart] = inner.split('/');\n // Split by comma or whitespace\n const parts = colorPart\n .trim()\n .split(/[,\\s]+/)\n .filter(Boolean);\n\n if (parts.length < 3) return null;\n\n // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n let h = parseFloat(parts[0]);\n const hueStr = parts[0].toLowerCase();\n if (hueStr.endsWith('turn')) {\n h = parseFloat(hueStr) * 360;\n } else if (hueStr.endsWith('rad')) {\n h = (parseFloat(hueStr) * 180) / Math.PI;\n } else if (hueStr.endsWith('grad')) {\n h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n }\n // deg or unitless are already in degrees\n\n // Normalize hue to 0-360 range\n h = h % 360;\n if (h < 0) h += 360;\n\n // Parse saturation and lightness (percentages)\n const parsePercent = (val: string): number => {\n const num = parseFloat(val);\n return val.includes('%') ? num / 100 : num;\n };\n\n const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n h: number,\n s: number,\n l: number,\n): [number, number, number] {\n const a = s * Math.min(l, 1 - l);\n\n const f = (n: number): number => {\n const k = (n + h / 30) % 12;\n return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n };\n\n // Convert 0-1 range to 0-255\n return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n // If the parsed output references a color variable, use the -rgb variant\n const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n if (varMatch) {\n return `var(--${varMatch[1]}-color-rgb)`;\n }\n\n // For rgb(...) values, extract the triplet\n if (parsedOutput.startsWith('rgb(')) {\n const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n\n // For hsl(...) values, convert to RGB triplet\n if (\n parsedOutput.startsWith('hsl(') ||\n parsedOutput.startsWith('hsla(') ||\n colorValue.startsWith('hsl(') ||\n colorValue.startsWith('hsla(')\n ) {\n // Try parsedOutput first, then original colorValue\n const hslValues =\n parseHslValues(parsedOutput) || parseHslValues(colorValue);\n if (hslValues) {\n const [r, g, b] = hslToRgbValues(\n hslValues[0],\n hslValues[1],\n hslValues[2],\n );\n return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n }\n }\n\n // For okhsl(...) values, convert to RGB triplet\n if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n // Try parsedOutput first, then original colorValue\n const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // For hex values, convert to RGB triplet\n if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n const rgbResult = hexToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // Fallback: return the parsed output (may not be ideal but covers edge cases)\n return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n\n if (typeof value === 'object') {\n if (devMode) {\n console.warn(\n 'CubeUIKit: Object values are not allowed in tokens prop. ' +\n 'Tokens do not support state-based styling. Use a primitive value instead.',\n );\n }\n return false;\n }\n\n return (\n typeof value === 'string' ||\n typeof value === 'number' ||\n typeof value === 'boolean'\n );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n if (typeof value === 'number') {\n // 0 should remain as \"0\", not converted to any unit\n if (value === 0) {\n return '0';\n }\n return parseStyle(String(value)).output;\n }\n return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n tokens: Tokens | undefined,\n): CSSProperties | undefined {\n if (!tokens) {\n return undefined;\n }\n\n const keys = Object.keys(tokens);\n if (keys.length === 0) {\n return undefined;\n }\n\n let result: Record<string, string> | undefined;\n\n for (const key of keys) {\n const value = tokens[key as keyof Tokens];\n\n // Skip undefined/null values\n if (!isValidTokenValue(value)) {\n continue;\n }\n\n if (key.startsWith('$')) {\n // Custom property token: $name -> --name\n const propName = `--${key.slice(1)}`;\n // Boolean true for custom properties converts to empty string (valid CSS value)\n const effectiveValue = value === true ? '' : value;\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[propName] = processedValue;\n } else if (key.startsWith('#')) {\n // Color token: #name -> --name-color and --name-color-rgb\n const colorName = key.slice(1);\n\n // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n const effectiveValue = normalizeColorTokenValue(value);\n // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n if (effectiveValue === null) continue;\n\n const originalValue =\n typeof effectiveValue === 'number'\n ? String(effectiveValue)\n : effectiveValue;\n const lowerValue = originalValue.toLowerCase();\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[`--${colorName}-color`] = processedValue;\n\n // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n // Match only #current or #current.opacity, not #current-theme or #currently-used\n if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n continue;\n }\n\n result[`--${colorName}-color-rgb`] = extractRgbValue(\n originalValue,\n processedValue,\n );\n }\n }\n\n return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n if (!tokens) return '';\n return JSON.stringify(tokens);\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,SAAS,eAAe,KAA8C;CACpE,MAAM,QAAQ,IAAI,MAAM,oBAAoB;AAC5C,KAAI,CAAC,MAAO,QAAO;CAInB,MAAM,CAAC,aAFO,MAAM,GAAG,MAAM,CAEH,MAAM,IAAI;CAEpC,MAAM,QAAQ,UACX,MAAM,CACN,MAAM,SAAS,CACf,OAAO,QAAQ;AAElB,KAAI,MAAM,SAAS,EAAG,QAAO;CAG7B,IAAI,IAAI,WAAW,MAAM,GAAG;CAC5B,MAAM,SAAS,MAAM,GAAG,aAAa;AACrC,KAAI,OAAO,SAAS,OAAO,CACzB,KAAI,WAAW,OAAO,GAAG;UAChB,OAAO,SAAS,MAAM,CAC/B,KAAK,WAAW,OAAO,GAAG,MAAO,KAAK;UAC7B,OAAO,SAAS,OAAO,CAChC,KAAI,WAAW,OAAO,GAAG;AAK3B,KAAI,IAAI;AACR,KAAI,IAAI,EAAG,MAAK;CAGhB,MAAM,gBAAgB,QAAwB;EAC5C,MAAM,MAAM,WAAW,IAAI;AAC3B,SAAO,IAAI,SAAS,IAAI,GAAG,MAAM,MAAM;;CAGzC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAC1D,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;AAE1D,QAAO;EAAC;EAAG;EAAG;EAAE;;;;;;;;;;;;AAalB,SAAgB,eACd,GACA,GACA,GAC0B;CAC1B,MAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE;CAEhC,MAAM,KAAK,MAAsB;EAC/B,MAAM,KAAK,IAAI,IAAI,MAAM;AACzB,SAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;;AAIxD,QAAO;EAAC,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAI;;;;;AAM7C,SAAS,mBAAmB,GAAmB;AAC7C,QAAO,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU;;;;;;;AAQ5C,SAAS,gBAAgB,YAAoB,cAA8B;CAEzE,MAAM,WAAW,aAAa,MAAM,8BAA8B;AAClE,KAAI,SACF,QAAO,SAAS,SAAS,GAAG;AAI9B,KAAI,aAAa,WAAW,OAAO,EAAE;EACnC,MAAM,YAAY,2BAA2B,aAAa;AAC1D,MAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;AAK9B,KACE,aAAa,WAAW,OAAO,IAC/B,aAAa,WAAW,QAAQ,IAChC,WAAW,WAAW,OAAO,IAC7B,WAAW,WAAW,QAAQ,EAC9B;EAEA,MAAM,YACJ,eAAe,aAAa,IAAI,eAAe,WAAW;AAC5D,MAAI,WAAW;GACb,MAAM,CAAC,GAAG,GAAG,KAAK,eAChB,UAAU,IACV,UAAU,IACV,UAAU,GACX;AACD,UAAO,GAAG,mBAAmB,EAAE,CAAC,GAAG,mBAAmB,EAAE,CAAC,GAAG,mBAAmB,EAAE;;;AAKrF,KAAI,aAAa,WAAW,SAAS,IAAI,WAAW,WAAW,SAAS,EAAE;EAExE,MAAM,YAAY,WAAW,aAAa,IAAI,WAAW,WAAW;AACpE,MAAI,WAAW;GACb,MAAM,YAAY,2BAA2B,UAAU;AACvD,OAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;;AAMhC,KAAI,WAAW,WAAW,IAAI,IAAI,sBAAsB,KAAK,WAAW,EAAE;EACxE,MAAM,YAAY,SAAS,WAAW;AACtC,MAAI,WAAW;GACb,MAAM,YAAY,2BAA2B,UAAU;AACvD,OAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;;AAMhC,QAAO;;;;;;AAOT,SAAS,kBACP,OACwD;AACxD,KAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MACrD,QAAO;AAGT,KAAI,OAAO,UAAU,UAAU;AAE3B,UAAQ,KACN,qIAED;AAEH,SAAO;;AAGT,QACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;;;;;;AAQrB,SAAS,kBAAkB,OAAgC;AACzD,KAAI,OAAO,UAAU,UAAU;AAE7B,MAAI,UAAU,EACZ,QAAO;AAET,SAAO,WAAW,OAAO,MAAM,CAAC,CAAC;;AAEnC,QAAO,WAAW,MAAM,CAAC;;;;;;;;;;AAW3B,SAAgB,cACd,QAC2B;AAC3B,KAAI,CAAC,OACH;CAGF,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAClB;CAGF,IAAI;AAEJ,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;AAGrB,MAAI,CAAC,kBAAkB,MAAM,CAC3B;AAGF,MAAI,IAAI,WAAW,IAAI,EAAE;GAEvB,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;GAGlC,MAAM,iBAAiB,kBADA,UAAU,OAAO,KAAK,MACW;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,YAAY;aACV,IAAI,WAAW,IAAI,EAAE;GAE9B,MAAM,YAAY,IAAI,MAAM,EAAE;GAG9B,MAAM,iBAAiB,yBAAyB,MAAM;AAEtD,OAAI,mBAAmB,KAAM;GAE7B,MAAM,gBACJ,OAAO,mBAAmB,WACtB,OAAO,eAAe,GACtB;GACN,MAAM,aAAa,cAAc,aAAa;GAC9C,MAAM,iBAAiB,kBAAkB,eAAe;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,KAAK,UAAU,WAAW;AAIjC,OAAI,qBAAqB,KAAK,WAAW,CACvC;AAGF,UAAO,KAAK,UAAU,eAAe,gBACnC,eACA,eACD;;;AAIL,QAAO;;;;;AAMT,SAAgB,gBAAgB,QAAoC;AAClE,KAAI,CAAC,OAAQ,QAAO;AACpB,QAAO,KAAK,UAAU,OAAO"}
1
+ {"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { Tokens, TokenValue } from '../types';\n\nimport type { CSSProperties } from './css-types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n getRgbValuesFromRgbaString,\n hexToRgb,\n normalizeColorTokenValue,\n parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n * hsl(200, 40%, 50%)\n * hsl(200 40% 50%)\n * hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n const match = str.match(/hsla?\\(([^)]+)\\)/i);\n if (!match) return null;\n\n const inner = match[1].trim();\n // Split by slash first (for alpha), then handle color components\n const [colorPart] = inner.split('/');\n // Split by comma or whitespace\n const parts = colorPart\n .trim()\n .split(/[,\\s]+/)\n .filter(Boolean);\n\n if (parts.length < 3) return null;\n\n // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n let h = parseFloat(parts[0]);\n const hueStr = parts[0].toLowerCase();\n if (hueStr.endsWith('turn')) {\n h = parseFloat(hueStr) * 360;\n } else if (hueStr.endsWith('rad')) {\n h = (parseFloat(hueStr) * 180) / Math.PI;\n } else if (hueStr.endsWith('grad')) {\n h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n }\n // deg or unitless are already in degrees\n\n // Normalize hue to 0-360 range\n h = h % 360;\n if (h < 0) h += 360;\n\n // Parse saturation and lightness (percentages)\n const parsePercent = (val: string): number => {\n const num = parseFloat(val);\n return val.includes('%') ? num / 100 : num;\n };\n\n const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n h: number,\n s: number,\n l: number,\n): [number, number, number] {\n const a = s * Math.min(l, 1 - l);\n\n const f = (n: number): number => {\n const k = (n + h / 30) % 12;\n return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n };\n\n // Convert 0-1 range to 0-255\n return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n // If the parsed output references a color variable, use the -rgb variant\n const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n if (varMatch) {\n return `var(--${varMatch[1]}-color-rgb)`;\n }\n\n // For rgb(...) values, extract the triplet\n if (parsedOutput.startsWith('rgb(')) {\n const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n\n // For hsl(...) values, convert to RGB triplet\n if (\n parsedOutput.startsWith('hsl(') ||\n parsedOutput.startsWith('hsla(') ||\n colorValue.startsWith('hsl(') ||\n colorValue.startsWith('hsla(')\n ) {\n // Try parsedOutput first, then original colorValue\n const hslValues =\n parseHslValues(parsedOutput) || parseHslValues(colorValue);\n if (hslValues) {\n const [r, g, b] = hslToRgbValues(\n hslValues[0],\n hslValues[1],\n hslValues[2],\n );\n return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n }\n }\n\n // For okhsl(...) values, convert to RGB triplet\n if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n // Try parsedOutput first, then original colorValue\n const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // For hex values, convert to RGB triplet\n if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n const rgbResult = hexToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // Fallback: return the parsed output (may not be ideal but covers edge cases)\n return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n\n if (typeof value === 'object') {\n if (devMode) {\n console.warn(\n 'CubeUIKit: Object values are not allowed in tokens prop. ' +\n 'Tokens do not support state-based styling. Use a primitive value instead.',\n );\n }\n return false;\n }\n\n return (\n typeof value === 'string' ||\n typeof value === 'number' ||\n typeof value === 'boolean'\n );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n if (typeof value === 'number') {\n // 0 should remain as \"0\", not converted to any unit\n if (value === 0) {\n return '0';\n }\n return parseStyle(String(value)).output;\n }\n return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n tokens: Tokens | undefined,\n): CSSProperties | undefined {\n if (!tokens) {\n return undefined;\n }\n\n const keys = Object.keys(tokens);\n if (keys.length === 0) {\n return undefined;\n }\n\n let result: Record<string, string> | undefined;\n\n for (const key of keys) {\n const value = tokens[key as keyof Tokens];\n\n // Skip undefined/null values\n if (!isValidTokenValue(value)) {\n continue;\n }\n\n if (key.startsWith('$')) {\n // Custom property token: $name -> --name\n const propName = `--${key.slice(1)}`;\n // Boolean true for custom properties converts to empty string (valid CSS value)\n const effectiveValue = value === true ? '' : value;\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[propName] = processedValue;\n } else if (key.startsWith('#')) {\n // Color token: #name -> --name-color and --name-color-rgb\n const colorName = key.slice(1);\n\n // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n const effectiveValue = normalizeColorTokenValue(value);\n // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n if (effectiveValue === null) continue;\n\n const originalValue =\n typeof effectiveValue === 'number'\n ? String(effectiveValue)\n : effectiveValue;\n const lowerValue = originalValue.toLowerCase();\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[`--${colorName}-color`] = processedValue;\n\n // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n // Match only #current or #current.opacity, not #current-theme or #currently-used\n if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n continue;\n }\n\n result[`--${colorName}-color-rgb`] = extractRgbValue(\n originalValue,\n processedValue,\n );\n }\n }\n\n return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n if (!tokens) return '';\n return JSON.stringify(tokens);\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,SAAS,eAAe,KAA8C;CACpE,MAAM,QAAQ,IAAI,MAAM,oBAAoB;AAC5C,KAAI,CAAC,MAAO,QAAO;CAInB,MAAM,CAAC,aAFO,MAAM,GAAG,MAAM,CAEH,MAAM,IAAI;CAEpC,MAAM,QAAQ,UACX,MAAM,CACN,MAAM,SAAS,CACf,OAAO,QAAQ;AAElB,KAAI,MAAM,SAAS,EAAG,QAAO;CAG7B,IAAI,IAAI,WAAW,MAAM,GAAG;CAC5B,MAAM,SAAS,MAAM,GAAG,aAAa;AACrC,KAAI,OAAO,SAAS,OAAO,CACzB,KAAI,WAAW,OAAO,GAAG;UAChB,OAAO,SAAS,MAAM,CAC/B,KAAK,WAAW,OAAO,GAAG,MAAO,KAAK;UAC7B,OAAO,SAAS,OAAO,CAChC,KAAI,WAAW,OAAO,GAAG;AAK3B,KAAI,IAAI;AACR,KAAI,IAAI,EAAG,MAAK;CAGhB,MAAM,gBAAgB,QAAwB;EAC5C,MAAM,MAAM,WAAW,IAAI;AAC3B,SAAO,IAAI,SAAS,IAAI,GAAG,MAAM,MAAM;;CAGzC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAC1D,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;AAE1D,QAAO;EAAC;EAAG;EAAG;EAAE;;;;;;;;;;;;AAalB,SAAgB,eACd,GACA,GACA,GAC0B;CAC1B,MAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE;CAEhC,MAAM,KAAK,MAAsB;EAC/B,MAAM,KAAK,IAAI,IAAI,MAAM;AACzB,SAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;;AAIxD,QAAO;EAAC,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAI;;;;;AAM7C,SAAS,mBAAmB,GAAmB;AAC7C,QAAO,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,UAAU;;;;;;;AAQ5C,SAAS,gBAAgB,YAAoB,cAA8B;CAEzE,MAAM,WAAW,aAAa,MAAM,8BAA8B;AAClE,KAAI,SACF,QAAO,SAAS,SAAS,GAAG;AAI9B,KAAI,aAAa,WAAW,OAAO,EAAE;EACnC,MAAM,YAAY,2BAA2B,aAAa;AAC1D,MAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;AAK9B,KACE,aAAa,WAAW,OAAO,IAC/B,aAAa,WAAW,QAAQ,IAChC,WAAW,WAAW,OAAO,IAC7B,WAAW,WAAW,QAAQ,EAC9B;EAEA,MAAM,YACJ,eAAe,aAAa,IAAI,eAAe,WAAW;AAC5D,MAAI,WAAW;GACb,MAAM,CAAC,GAAG,GAAG,KAAK,eAChB,UAAU,IACV,UAAU,IACV,UAAU,GACX;AACD,UAAO,GAAG,mBAAmB,EAAE,CAAC,GAAG,mBAAmB,EAAE,CAAC,GAAG,mBAAmB,EAAE;;;AAKrF,KAAI,aAAa,WAAW,SAAS,IAAI,WAAW,WAAW,SAAS,EAAE;EAExE,MAAM,YAAY,WAAW,aAAa,IAAI,WAAW,WAAW;AACpE,MAAI,WAAW;GACb,MAAM,YAAY,2BAA2B,UAAU;AACvD,OAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;;AAMhC,KAAI,WAAW,WAAW,IAAI,IAAI,sBAAsB,KAAK,WAAW,EAAE;EACxE,MAAM,YAAY,SAAS,WAAW;AACtC,MAAI,WAAW;GACb,MAAM,YAAY,2BAA2B,UAAU;AACvD,OAAI,aAAa,UAAU,UAAU,EACnC,QAAO,UAAU,KAAK,IAAI;;;AAMhC,QAAO;;;;;;AAOT,SAAS,kBACP,OACwD;AACxD,KAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MACrD,QAAO;AAGT,KAAI,OAAO,UAAU,UAAU;AAE3B,UAAQ,KACN,qIAED;AAEH,SAAO;;AAGT,QACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;;;;;;AAQrB,SAAS,kBAAkB,OAAgC;AACzD,KAAI,OAAO,UAAU,UAAU;AAE7B,MAAI,UAAU,EACZ,QAAO;AAET,SAAO,WAAW,OAAO,MAAM,CAAC,CAAC;;AAEnC,QAAO,WAAW,MAAM,CAAC;;;;;;;;;;AAW3B,SAAgB,cACd,QAC2B;AAC3B,KAAI,CAAC,OACH;CAGF,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAClB;CAGF,IAAI;AAEJ,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;AAGrB,MAAI,CAAC,kBAAkB,MAAM,CAC3B;AAGF,MAAI,IAAI,WAAW,IAAI,EAAE;GAEvB,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;GAGlC,MAAM,iBAAiB,kBADA,UAAU,OAAO,KAAK,MACW;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,YAAY;aACV,IAAI,WAAW,IAAI,EAAE;GAE9B,MAAM,YAAY,IAAI,MAAM,EAAE;GAG9B,MAAM,iBAAiB,yBAAyB,MAAM;AAEtD,OAAI,mBAAmB,KAAM;GAE7B,MAAM,gBACJ,OAAO,mBAAmB,WACtB,OAAO,eAAe,GACtB;GACN,MAAM,aAAa,cAAc,aAAa;GAC9C,MAAM,iBAAiB,kBAAkB,eAAe;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,KAAK,UAAU,WAAW;AAIjC,OAAI,qBAAqB,KAAK,WAAW,CACvC;AAGF,UAAO,KAAK,UAAU,eAAe,gBACnC,eACA,eACD;;;AAIL,QAAO;;;;;AAMT,SAAgB,gBAAgB,QAAoC;AAClE,KAAI,CAAC,OAAQ,QAAO;AACpB,QAAO,KAAK,UAAU,OAAO"}
@@ -1,6 +1,6 @@
1
1
  import { isDevEnv } from "./is-dev-env.js";
2
- import { getGlobalRecipes } from "../config.js";
3
2
  import { isSelector } from "../pipeline/index.js";
3
+ import { getGlobalRecipes } from "../config.js";
4
4
  import { mergeStyles } from "./merge-styles.js";
5
5
 
6
6
  //#region src/utils/resolve-recipes.ts
@@ -1,10 +1,10 @@
1
1
  import { StyleParser } from "../parser/parser.js";
2
2
  import { okhslFunc } from "../plugins/okhsl-plugin.js";
3
+ import { createStateParserContext, parseAdvancedState } from "../states/index.js";
3
4
  import { cacheWrapper } from "./cache-wrapper.js";
4
5
  import { camelToKebab } from "./case-converter.js";
5
6
  import { okhslToRgb } from "./okhsl-to-rgb.js";
6
7
  import { hslToRgb } from "./hsl-to-rgb.js";
7
- import { createStateParserContext, parseAdvancedState } from "../states/index.js";
8
8
 
9
9
  //#region src/utils/styles.ts
10
10
  /**
@@ -1,4 +1,3 @@
1
- import "../injector/types.js";
2
1
  import { Styles } from "../styles/types.js";
3
2
 
4
3
  //#region src/zero/extractor.d.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenphi/tasty",
3
- "version": "0.0.0-snapshot.12940ba",
3
+ "version": "0.0.0-snapshot.e5c8361",
4
4
  "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
5
5
  "type": "module",
6
6
  "exports": {
@@ -34,10 +34,10 @@
34
34
  "default": "./dist/zero/next.js"
35
35
  }
36
36
  },
37
- "./parser": {
37
+ "./core": {
38
38
  "import": {
39
- "types": "./dist/parser/index.d.ts",
40
- "default": "./dist/parser/index.js"
39
+ "types": "./dist/core/index.d.ts",
40
+ "default": "./dist/core/index.js"
41
41
  }
42
42
  }
43
43
  },
@@ -1 +0,0 @@
1
- import "../styles/types.js";
@@ -1,3 +0,0 @@
1
- import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./definitions.js";
2
- import "./cacheKey.js";
3
- import "./renderChunk.js";
@@ -1,2 +0,0 @@
1
- import "../styles/types.js";
2
- import "../pipeline/index.js";
@@ -1,5 +0,0 @@
1
- import { UseStylesOptions, UseStylesResult, useStyles } from "./useStyles.js";
2
- import { useGlobalStyles } from "./useGlobalStyles.js";
3
- import { useRawCSS } from "./useRawCSS.js";
4
- import { useKeyframes } from "./useKeyframes.js";
5
- import { UsePropertyOptions, useProperty } from "./useProperty.js";
@@ -1,3 +0,0 @@
1
- import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./types.js";
2
- import { StyleParser } from "./parser.js";
3
- export { Bucket, type ParserOptions, type ProcessedStyle, type StyleDetails, type StyleDetailsPart, StyleParser, type UnitHandler };
@@ -1,4 +0,0 @@
1
- import { Bucket } from "./types.js";
2
- import { StyleParser } from "./parser.js";
3
-
4
- export { Bucket, StyleParser };
@@ -1 +0,0 @@
1
- import "../utils/styles.js";
@@ -1 +0,0 @@
1
- import "../states/index.js";
@@ -1,2 +0,0 @@
1
- import { TastyPlugin, TastyPluginFactory } from "./types.js";
2
- import { okhslFunc, okhslPlugin } from "./okhsl-plugin.js";