@tenphi/tasty 0.0.0-snapshot.b3fbcbb → 0.0.0-snapshot.bae20d4

package/dist/tasty.d.ts

@@ -99,10 +99,12 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 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>;
 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>>;
 declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
-  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
-  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
-  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
-  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
+  clipPath?: StyleValue<csstype.Property.ClipPath | undefined> | StyleValueStateMap<csstype.Property.ClipPath | undefined>;
+  filter?: StyleValue<csstype.Property.Filter | undefined> | StyleValueStateMap<csstype.Property.Filter | undefined>;
+  image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
+  marker?: StyleValue<csstype.Property.Marker | undefined> | StyleValueStateMap<csstype.Property.Marker | undefined>;
+  mask?: StyleValue<csstype.Property.Mask<string | number> | undefined> | StyleValueStateMap<csstype.Property.Mask<string | number> | undefined>;
+  fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   display?: StyleValue<csstype.Property.Display | undefined> | StyleValueStateMap<csstype.Property.Display | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
   preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
@@ -125,16 +127,14 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   paddingInline?: StyleValue<csstype.Property.PaddingInline<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingInline<string | number> | undefined>;
   paddingBlock?: StyleValue<csstype.Property.PaddingBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingBlock<string | number> | undefined>;
   overflow?: StyleValue<csstype.Property.Overflow | undefined> | StyleValueStateMap<csstype.Property.Overflow | undefined>;
-  scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
+  scrollbar?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   textAlign?: StyleValue<csstype.Property.TextAlign | undefined> | StyleValueStateMap<csstype.Property.TextAlign | undefined>;
   border?: StyleValue<boolean | csstype.Property.Border<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Border<string | number> | undefined>;
   radius?: StyleValue<string | true | undefined> | StyleValueStateMap<string | true | undefined>;
   shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
-  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>;
   fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-  image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
   textTransform?: StyleValue<csstype.Property.TextTransform | undefined> | StyleValueStateMap<csstype.Property.TextTransform | undefined>;
   fontWeight?: StyleValue<csstype.Property.FontWeight | undefined> | StyleValueStateMap<csstype.Property.FontWeight | undefined>;
   fontStyle?: StyleValue<csstype.Property.FontStyle | undefined> | StyleValueStateMap<csstype.Property.FontStyle | undefined>;
@@ -151,8 +151,8 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   alignContent?: StyleValue<csstype.Property.AlignContent | undefined> | StyleValueStateMap<csstype.Property.AlignContent | undefined>;
   justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
   justifyContent?: StyleValue<csstype.Property.JustifyContent | undefined> | StyleValueStateMap<csstype.Property.JustifyContent | undefined>;
-  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>;
-  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>;
+  align?: StyleValue<"center" | (string & {}) | "start" | "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<"center" | (string & {}) | "start" | "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>;
+  justify?: StyleValue<"center" | (string & {}) | "left" | "right" | "start" | "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<"center" | (string & {}) | "left" | "right" | "start" | "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>;
   gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
   columnGap?: StyleValue<csstype.Property.ColumnGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.ColumnGap<string | number> | undefined>;
   rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
@@ -160,11 +160,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
   gridTemplate?: StyleValue<csstype.Property.GridTemplate | undefined> | StyleValueStateMap<csstype.Property.GridTemplate | undefined>;
   gridAreas?: StyleValue<csstype.Property.GridTemplateAreas | undefined> | StyleValueStateMap<csstype.Property.GridTemplateAreas | undefined>;
-  content?: StyleValue<csstype.Property.Content | undefined> | StyleValueStateMap<csstype.Property.Content | undefined>;
-  translate?: StyleValue<csstype.Property.Translate<string | number> | undefined> | StyleValueStateMap<csstype.Property.Translate<string | number> | undefined>;
-  background?: StyleValue<csstype.Property.Background<string | number> | undefined> | StyleValueStateMap<csstype.Property.Background<string | number> | undefined>;
-  all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
-  page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
   accentColor?: StyleValue<csstype.Property.AccentColor | undefined> | StyleValueStateMap<csstype.Property.AccentColor | undefined>;
   alignTracks?: StyleValue<csstype.Property.AlignTracks | undefined> | StyleValueStateMap<csstype.Property.AlignTracks | undefined>;
   alignmentBaseline?: StyleValue<csstype.Property.AlignmentBaseline | undefined> | StyleValueStateMap<csstype.Property.AlignmentBaseline | undefined>;
@@ -237,6 +232,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   borderTopRightRadius?: StyleValue<csstype.Property.BorderTopRightRadius<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopRightRadius<string | number> | undefined>;
   borderTopStyle?: StyleValue<csstype.Property.BorderTopStyle | undefined> | StyleValueStateMap<csstype.Property.BorderTopStyle | undefined>;
   borderTopWidth?: StyleValue<csstype.Property.BorderTopWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopWidth<string | number> | undefined>;
+  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
   boxDecorationBreak?: StyleValue<csstype.Property.BoxDecorationBreak | undefined> | StyleValueStateMap<csstype.Property.BoxDecorationBreak | undefined>;
   boxShadow?: StyleValue<csstype.Property.BoxShadow | undefined> | StyleValueStateMap<csstype.Property.BoxShadow | undefined>;
   boxSizing?: StyleValue<csstype.Property.BoxSizing | undefined> | StyleValueStateMap<csstype.Property.BoxSizing | undefined>;
@@ -247,7 +243,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   caretColor?: StyleValue<csstype.Property.CaretColor | undefined> | StyleValueStateMap<csstype.Property.CaretColor | undefined>;
   caretShape?: StyleValue<csstype.Property.CaretShape | undefined> | StyleValueStateMap<csstype.Property.CaretShape | undefined>;
   clear?: StyleValue<csstype.Property.Clear | undefined> | StyleValueStateMap<csstype.Property.Clear | undefined>;
-  clipPath?: StyleValue<csstype.Property.ClipPath | undefined> | StyleValueStateMap<csstype.Property.ClipPath | undefined>;
   clipRule?: StyleValue<csstype.Property.ClipRule | undefined> | StyleValueStateMap<csstype.Property.ClipRule | undefined>;
   colorAdjust?: StyleValue<csstype.Property.PrintColorAdjust | undefined> | StyleValueStateMap<csstype.Property.PrintColorAdjust | undefined>;
   colorInterpolationFilters?: StyleValue<csstype.Property.ColorInterpolationFilters | undefined> | StyleValueStateMap<csstype.Property.ColorInterpolationFilters | undefined>;
@@ -266,6 +261,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   containIntrinsicWidth?: StyleValue<csstype.Property.ContainIntrinsicWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.ContainIntrinsicWidth<string | number> | undefined>;
   containerName?: StyleValue<csstype.Property.ContainerName | undefined> | StyleValueStateMap<csstype.Property.ContainerName | undefined>;
   containerType?: StyleValue<csstype.Property.ContainerType | undefined> | StyleValueStateMap<csstype.Property.ContainerType | undefined>;
+  content?: StyleValue<csstype.Property.Content | undefined> | StyleValueStateMap<csstype.Property.Content | undefined>;
   contentVisibility?: StyleValue<csstype.Property.ContentVisibility | undefined> | StyleValueStateMap<csstype.Property.ContentVisibility | undefined>;
   counterIncrement?: StyleValue<csstype.Property.CounterIncrement | undefined> | StyleValueStateMap<csstype.Property.CounterIncrement | undefined>;
   counterReset?: StyleValue<csstype.Property.CounterReset | undefined> | StyleValueStateMap<csstype.Property.CounterReset | undefined>;
@@ -280,7 +276,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   fieldSizing?: StyleValue<csstype.Property.FieldSizing | undefined> | StyleValueStateMap<csstype.Property.FieldSizing | undefined>;
   fillOpacity?: StyleValue<csstype.Property.FillOpacity | undefined> | StyleValueStateMap<csstype.Property.FillOpacity | undefined>;
   fillRule?: StyleValue<csstype.Property.FillRule | undefined> | StyleValueStateMap<csstype.Property.FillRule | undefined>;
-  filter?: StyleValue<csstype.Property.Filter | undefined> | StyleValueStateMap<csstype.Property.Filter | undefined>;
   flexDirection?: StyleValue<csstype.Property.FlexDirection | undefined> | StyleValueStateMap<csstype.Property.FlexDirection | undefined>;
   flexWrap?: StyleValue<csstype.Property.FlexWrap | undefined> | StyleValueStateMap<csstype.Property.FlexWrap | undefined>;
   float?: StyleValue<csstype.Property.Float | undefined> | StyleValueStateMap<csstype.Property.Float | undefined>;
@@ -338,6 +333,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   interpolateSize?: StyleValue<csstype.Property.InterpolateSize | undefined> | StyleValueStateMap<csstype.Property.InterpolateSize | undefined>;
   isolation?: StyleValue<csstype.Property.Isolation | undefined> | StyleValueStateMap<csstype.Property.Isolation | undefined>;
   justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
+  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
   lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
   lineBreak?: StyleValue<csstype.Property.LineBreak | undefined> | StyleValueStateMap<csstype.Property.LineBreak | undefined>;
@@ -355,7 +351,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   marginRight?: StyleValue<csstype.Property.MarginRight<string | number> | undefined> | StyleValueStateMap<csstype.Property.MarginRight<string | number> | undefined>;
   marginTop?: StyleValue<csstype.Property.MarginTop<string | number> | undefined> | StyleValueStateMap<csstype.Property.MarginTop<string | number> | undefined>;
   marginTrim?: StyleValue<csstype.Property.MarginTrim | undefined> | StyleValueStateMap<csstype.Property.MarginTrim | undefined>;
-  marker?: StyleValue<csstype.Property.Marker | undefined> | StyleValueStateMap<csstype.Property.Marker | undefined>;
   markerEnd?: StyleValue<csstype.Property.MarkerEnd | undefined> | StyleValueStateMap<csstype.Property.MarkerEnd | undefined>;
   markerMid?: StyleValue<csstype.Property.MarkerMid | undefined> | StyleValueStateMap<csstype.Property.MarkerMid | undefined>;
   markerStart?: StyleValue<csstype.Property.MarkerStart | undefined> | StyleValueStateMap<csstype.Property.MarkerStart | undefined>;
@@ -426,6 +421,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   paddingLeft?: StyleValue<csstype.Property.PaddingLeft<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingLeft<string | number> | undefined>;
   paddingRight?: StyleValue<csstype.Property.PaddingRight<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingRight<string | number> | undefined>;
   paddingTop?: StyleValue<csstype.Property.PaddingTop<string | number> | undefined> | StyleValueStateMap<csstype.Property.PaddingTop<string | number> | undefined>;
+  page?: StyleValue<csstype.Property.Page | undefined> | StyleValueStateMap<csstype.Property.Page | undefined>;
   paintOrder?: StyleValue<csstype.Property.PaintOrder | undefined> | StyleValueStateMap<csstype.Property.PaintOrder | undefined>;
   perspective?: StyleValue<csstype.Property.Perspective<string | number> | undefined> | StyleValueStateMap<csstype.Property.Perspective<string | number> | undefined>;
   perspectiveOrigin?: StyleValue<csstype.Property.PerspectiveOrigin<string | number> | undefined> | StyleValueStateMap<csstype.Property.PerspectiveOrigin<string | number> | undefined>;
@@ -439,6 +435,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   quotes?: StyleValue<csstype.Property.Quotes | undefined> | StyleValueStateMap<csstype.Property.Quotes | undefined>;
   r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
   resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
+  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
   rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
   rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
   rubyMerge?: StyleValue<csstype.Property.RubyMerge | undefined> | StyleValueStateMap<csstype.Property.RubyMerge | undefined>;
@@ -524,6 +521,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
   textWrapStyle?: StyleValue<csstype.Property.TextWrapStyle | undefined> | StyleValueStateMap<csstype.Property.TextWrapStyle | undefined>;
   timelineScope?: StyleValue<csstype.Property.TimelineScope | undefined> | StyleValueStateMap<csstype.Property.TimelineScope | undefined>;
+  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
   touchAction?: StyleValue<csstype.Property.TouchAction | undefined> | StyleValueStateMap<csstype.Property.TouchAction | undefined>;
   transform?: StyleValue<csstype.Property.Transform | undefined> | StyleValueStateMap<csstype.Property.Transform | undefined>;
   transformBox?: StyleValue<csstype.Property.TransformBox | undefined> | StyleValueStateMap<csstype.Property.TransformBox | undefined>;
@@ -534,6 +532,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   transitionDuration?: StyleValue<csstype.Property.TransitionDuration<string & {}> | undefined> | StyleValueStateMap<csstype.Property.TransitionDuration<string & {}> | undefined>;
   transitionProperty?: StyleValue<csstype.Property.TransitionProperty | undefined> | StyleValueStateMap<csstype.Property.TransitionProperty | undefined>;
   transitionTimingFunction?: StyleValue<csstype.Property.TransitionTimingFunction | undefined> | StyleValueStateMap<csstype.Property.TransitionTimingFunction | undefined>;
+  translate?: StyleValue<csstype.Property.Translate<string | number> | undefined> | StyleValueStateMap<csstype.Property.Translate<string | number> | undefined>;
   unicodeBidi?: StyleValue<csstype.Property.UnicodeBidi | undefined> | StyleValueStateMap<csstype.Property.UnicodeBidi | undefined>;
   userSelect?: StyleValue<csstype.Property.UserSelect | undefined> | StyleValueStateMap<csstype.Property.UserSelect | undefined>;
   vectorEffect?: StyleValue<csstype.Property.VectorEffect | undefined> | StyleValueStateMap<csstype.Property.VectorEffect | undefined>;
@@ -554,8 +553,10 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   x?: StyleValue<csstype.Property.X<string | number> | undefined> | StyleValueStateMap<csstype.Property.X<string | number> | undefined>;
   y?: StyleValue<csstype.Property.Y<string | number> | undefined> | StyleValueStateMap<csstype.Property.Y<string | number> | undefined>;
   zoom?: StyleValue<csstype.Property.Zoom | undefined> | StyleValueStateMap<csstype.Property.Zoom | undefined>;
+  all?: StyleValue<csstype.Globals | undefined> | StyleValueStateMap<csstype.Globals | undefined>;
   animation?: StyleValue<csstype.Property.Animation<string & {}> | undefined> | StyleValueStateMap<csstype.Property.Animation<string & {}> | undefined>;
   animationRange?: StyleValue<csstype.Property.AnimationRange<string | number> | undefined> | StyleValueStateMap<csstype.Property.AnimationRange<string | number> | undefined>;
+  background?: StyleValue<csstype.Property.Background<string | number> | undefined> | StyleValueStateMap<csstype.Property.Background<string | number> | undefined>;
   backgroundPosition?: StyleValue<csstype.Property.BackgroundPosition<string | number> | undefined> | StyleValueStateMap<csstype.Property.BackgroundPosition<string | number> | undefined>;
   borderBlock?: StyleValue<csstype.Property.BorderBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderBlock<string | number> | undefined>;
   borderBlockColor?: StyleValue<csstype.Property.BorderBlockColor | undefined> | StyleValueStateMap<csstype.Property.BorderBlockColor | undefined>;
@@ -591,7 +592,6 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   listStyle?: StyleValue<csstype.Property.ListStyle | undefined> | StyleValueStateMap<csstype.Property.ListStyle | undefined>;
   marginBlock?: StyleValue<csstype.Property.MarginBlock<string | number> | undefined> | StyleValueStateMap<csstype.Property.MarginBlock<string | number> | undefined>;
   marginInline?: StyleValue<csstype.Property.MarginInline<string | number> | undefined> | StyleValueStateMap<csstype.Property.MarginInline<string | number> | undefined>;
-  mask?: StyleValue<csstype.Property.Mask<string | number> | undefined> | StyleValueStateMap<csstype.Property.Mask<string | number> | undefined>;
   maskBorder?: StyleValue<csstype.Property.MaskBorder | undefined> | StyleValueStateMap<csstype.Property.MaskBorder | undefined>;
   motion?: StyleValue<csstype.Property.Offset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Offset<string | number> | undefined>;
   offset?: StyleValue<csstype.Property.Offset<string | number> | undefined> | StyleValueStateMap<csstype.Property.Offset<string | number> | undefined>;
@@ -969,14 +969,13 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   colorInterpolation?: StyleValue<csstype.Property.ColorInterpolation | undefined> | StyleValueStateMap<csstype.Property.ColorInterpolation | undefined>;
   colorRendering?: StyleValue<csstype.Property.ColorRendering | undefined> | StyleValueStateMap<csstype.Property.ColorRendering | undefined>;
   glyphOrientationVertical?: StyleValue<csstype.Property.GlyphOrientationVertical | undefined> | StyleValueStateMap<csstype.Property.GlyphOrientationVertical | undefined>;
-  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>;
-  styledScrollbar?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
+  svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.6` | `#${string}.4` | `#${string}.3` | `#${string}.5` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.06` | `#${string}.04` | `#${string}.03` | `#${string}.05` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.16` | `#${string}.14` | `#${string}.13` | `#${string}.15` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.26` | `#${string}.24` | `#${string}.23` | `#${string}.25` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.76` | `#${string}.74` | `#${string}.73` | `#${string}.75` | `#${string}.78` | `#${string}.79` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.66` | `#${string}.64` | `#${string}.63` | `#${string}.65` | `#${string}.68` | `#${string}.69` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.46` | `#${string}.44` | `#${string}.43` | `#${string}.45` | `#${string}.48` | `#${string}.49` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.36` | `#${string}.34` | `#${string}.33` | `#${string}.35` | `#${string}.38` | `#${string}.39` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.56` | `#${string}.54` | `#${string}.53` | `#${string}.55` | `#${string}.58` | `#${string}.59` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.86` | `#${string}.84` | `#${string}.83` | `#${string}.85` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.96` | `#${string}.94` | `#${string}.93` | `#${string}.95` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;
   place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
   "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
   recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-} & 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" | "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" | "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>>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "style" | "clipPath" | "filter" | "image" | "marker" | "mask" | "fill" | "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" | "fade" | "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" | "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" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "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" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "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" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "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" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "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" | "flexFlow" | "grid" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "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" | "boldFontWeight" | "place" | "@keyframes" | "@properties" | "recipe" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
 export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/dist/tasty.js

@@ -1,12 +1,13 @@
-import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
 import { isSelector } from "./pipeline/index.js";
 import { BASE_STYLES } from "./styles/list.js";
 import { _modAttrs } from "./utils/mod-attrs.js";
 import { mergeStyles } from "./utils/merge-styles.js";
+import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { hasKeys } from "./utils/has-keys.js";
 import { useStyles } from "./hooks/useStyles.js";
 import { getDisplayName } from "./utils/get-display-name.js";
 import { isValidElementType } from "./utils/is-valid-element-type.js";
-import { createElement, forwardRef, useMemo } from "react";
+import { createElement, forwardRef, useMemo, useRef } from "react";
 
 //#region src/tasty.tsx
 /**
@@ -126,30 +127,42 @@ function tastyElement(tastyOptions) {
 		if (!variantStylesMap["default"]) variantStylesMap["default"] = defaultStyles;
 	}
 	const { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
+	const propsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
 	const _TastyComponent = forwardRef((allProps, ref) => {
 		const { as, styles: rawStyles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
 		let styles = rawStyles;
 		let propStyles = null;
-		const propsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
+		let propStylesKey = "";
 		for (const prop of propsToCheck) {
 			const key = prop;
-			if (!propStyles) propStyles = {};
 			if (key in otherProps) {
-				propStyles[key] = otherProps[key];
+				if (!propStyles) propStyles = {};
+				const value = otherProps[key];
+				propStyles[key] = value;
 				delete otherProps[key];
+				propStylesKey += key + "\0" + value + "\0";
 			}
 		}
-		if (!styles || styles && Object.keys(styles).length === 0) styles = void 0;
+		if (!styles || styles && !hasKeys(styles)) styles = void 0;
+		const propStylesRef = useRef({
+			key: "",
+			styles: null
+		});
+		if (propStylesRef.current.key !== propStylesKey) propStylesRef.current = {
+			key: propStylesKey,
+			styles: propStyles
+		};
 		const baseStyles = variantStylesMap ? variantStylesMap[variant || "default"] ?? variantStylesMap["default"] : defaultStyles;
 		const { className: stylesClassName } = useStyles(useMemo(() => {
-			const hasStyles = styles && Object.keys(styles).length > 0;
-			const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;
-			if (!hasStyles && !hasPropStyles) return baseStyles;
-			return mergeStyles(baseStyles, styles, propStyles);
+			const currentPropStyles = propStylesRef.current.styles;
+			const hasStyleProps = styles && hasKeys(styles);
+			const hasPropStyles = currentPropStyles && hasKeys(currentPropStyles);
+			if (!hasStyleProps && !hasPropStyles) return baseStyles;
+			return mergeStyles(baseStyles, styles, currentPropStyles);
 		}, [
 			baseStyles,
 			styles,
-			propStyles
+			propStylesKey
 		]));
 		const mergedTokens = useMemo(() => {
 			if (!defaultTokens && !tokens) return void 0;

package/dist/tasty.js.map

@@ -1 +1 @@
-{"version":3,"file":"tasty.js","names":["modAttrs"],"sources":["../src/tasty.tsx"],"sourcesContent":["import type {\n  AllHTMLAttributes,\n  ComponentType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from 'react';\nimport { createElement, forwardRef, useMemo } from 'react';\nimport { useStyles } from './hooks/useStyles';\nimport { BASE_STYLES } from './styles/list';\nimport type { Styles, StylesInterface } from './styles/types';\nimport type {\n  AllBaseProps,\n  BaseProps,\n  BaseStyleProps,\n  Mods,\n  Props,\n  Tokens,\n} from './types';\nimport { getDisplayName } from './utils/get-display-name';\nimport { isValidElementType } from './utils/is-valid-element-type';\nimport { mergeStyles } from './utils/merge-styles';\nimport { isSelector } from './pipeline';\nimport { modAttrs } from './utils/mod-attrs';\nimport { processTokens, stringifyTokens } from './utils/process-tokens';\n\nimport type { StyleValue, StyleValueStateMap } from './utils/styles';\n\n/**\n * Mapping of is* properties to their corresponding HTML attributes\n */\nconst IS_PROPERTIES_MAP = {\n  isDisabled: 'disabled',\n  isHidden: 'hidden',\n  isChecked: 'checked',\n} as const;\n\n/**\n * Precalculated entries for performance optimization\n */\nconst IS_PROPERTIES_ENTRIES = Object.entries(IS_PROPERTIES_MAP);\n\n/**\n * Helper function to handle is* properties consistently\n * Transforms is* props to HTML attributes and adds corresponding data-* attributes\n */\nfunction handleIsProperties(props: Record<string, unknown>) {\n  for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {\n    if (isProperty in props) {\n      props[targetAttribute] = props[isProperty];\n      delete props[isProperty];\n    }\n\n    // Add data-* attribute if target attribute is truthy and doesn't already exist\n    const dataAttribute = `data-${targetAttribute}`;\n    if (!(dataAttribute in props) && props[targetAttribute]) {\n      props[dataAttribute] = '';\n    }\n  }\n}\n\n/**\n * Creates a sub-element component for compound component patterns.\n * Sub-elements are lightweight components with data-element attribute for CSS targeting.\n */\nfunction createSubElement<Tag extends keyof JSX.IntrinsicElements>(\n  elementName: string,\n  definition: SubElementDefinition<Tag>,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n> {\n  // Normalize definition to object form\n  const config =\n    typeof definition === 'string'\n      ? { as: definition as Tag }\n      : (definition as { as?: Tag; qa?: string; qaVal?: string | number });\n\n  const tag = config.as ?? ('div' as Tag);\n  const defaultQa = config.qa;\n  const defaultQaVal = config.qaVal;\n\n  const SubElement = forwardRef<unknown, SubElementProps<Tag>>((props, ref) => {\n    const {\n      qa,\n      qaVal,\n      mods,\n      tokens,\n      isDisabled,\n      isHidden,\n      isChecked,\n      className,\n      style,\n      ...htmlProps\n    } = props as SubElementProps<Tag> & {\n      className?: string;\n      style?: Record<string, unknown>;\n    };\n\n    // Build mod attributes\n    let modProps: Record<string, unknown> | undefined;\n    if (mods) {\n      modProps = modAttrs(mods as Mods) as Record<string, unknown>;\n    }\n\n    // Process tokens into inline style properties\n    const tokenStyle = tokens\n      ? (processTokens(tokens) as Record<string, unknown>)\n      : undefined;\n\n    // Merge token styles with explicit style prop (style has priority)\n    let mergedStyle: Record<string, unknown> | undefined;\n    if (tokenStyle || style) {\n      mergedStyle =\n        tokenStyle && style\n          ? { ...tokenStyle, ...style }\n          : ((tokenStyle ?? style) as Record<string, unknown>);\n    }\n\n    const elementProps = {\n      'data-element': elementName,\n      'data-qa': qa ?? defaultQa,\n      'data-qaval': qaVal ?? defaultQaVal,\n      ...(modProps || {}),\n      ...htmlProps,\n      className,\n      style: mergedStyle,\n      isDisabled,\n      isHidden,\n      isChecked,\n      ref,\n    } as Record<string, unknown>;\n\n    // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)\n    handleIsProperties(elementProps);\n\n    // Clean up undefined data attributes\n    if (elementProps['data-qa'] === undefined) delete elementProps['data-qa'];\n    if (elementProps['data-qaval'] === undefined)\n      delete elementProps['data-qaval'];\n\n    return createElement(tag, elementProps);\n  });\n\n  SubElement.displayName = `SubElement(${elementName})`;\n\n  return SubElement as ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n  >;\n}\n\ntype StyleList = readonly (keyof {\n  [key in keyof StylesInterface]: StylesInterface[key];\n})[];\n\nexport type PropsWithStyles = {\n  styles?: Styles;\n} & Omit<Props, 'styles'>;\n\nexport type VariantMap = Record<string, Styles>;\n\nexport interface WithVariant<V extends VariantMap> {\n  variant?: keyof V;\n}\n\n// ============================================================================\n// Sub-element types for compound components\n// ============================================================================\n\n/**\n * Definition for a sub-element. Can be either:\n * - A tag name string (e.g., 'div', 'span')\n * - An object with configuration options\n */\nexport type SubElementDefinition<\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> =\n  | Tag\n  | {\n      as?: Tag;\n      qa?: string;\n      qaVal?: string | number;\n    };\n\n/**\n * Map of sub-element definitions.\n * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)\n */\nexport type ElementsDefinition = Record<\n  string,\n  SubElementDefinition<keyof JSX.IntrinsicElements>\n>;\n\n/**\n * Resolves the tag from a SubElementDefinition\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ResolveElementTag<T extends SubElementDefinition<any>> = T extends string\n  ? T\n  : T extends { as?: infer Tag }\n    ? Tag extends keyof JSX.IntrinsicElements\n      ? Tag\n      : 'div'\n    : 'div';\n\n/**\n * Props for sub-element components.\n * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)\n */\nexport type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> =\n  Omit<\n    JSX.IntrinsicElements[Tag],\n    'ref' | 'color' | 'content' | 'translate'\n  > & {\n    qa?: string;\n    qaVal?: string | number;\n    mods?: Mods;\n    tokens?: Tokens;\n    isDisabled?: boolean;\n    isHidden?: boolean;\n    isChecked?: boolean;\n  };\n\n/**\n * Generates the sub-element component types from an ElementsDefinition\n */\ntype SubElementComponents<E extends ElementsDefinition> = {\n  [K in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> &\n      RefAttributes<\n        ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[ResolveElementTag<E[K]>]\n          : Element\n      >\n  >;\n};\n\n/**\n * Base type containing common properties shared between TastyProps and TastyElementOptions.\n * Separated to avoid code duplication while allowing different type constraints.\n */\ntype TastyBaseProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n> = {\n  /** Default styles of the element. */\n  styles?: Styles;\n  /** The list of styles that can be provided by props */\n  styleProps?: K;\n  element?: BaseProps['element'];\n  variants?: V;\n  /** Default tokens for inline CSS custom properties */\n  tokens?: Tokens;\n  /** Sub-element definitions for compound components */\n  elements?: E;\n} & Pick<BaseProps, 'qa' | 'qaVal'> &\n  WithVariant<V>;\n\nexport type TastyProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  DefaultProps = Props,\n> = TastyBaseProps<K, V, E> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: string | ComponentType<any>;\n} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'tokens'>>;\n\n/**\n * TastyElementOptions is used for the element-creation overload of tasty().\n * It includes a Tag generic that allows TypeScript to infer the correct\n * HTML element type from the `as` prop.\n *\n * Note: Uses a separate index signature with `unknown` instead of inheriting\n * from Props (which has `any`) to ensure strict type checking for styles.\n */\nexport type TastyElementOptions<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> = TastyBaseProps<K, V, E> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: Tag | ComponentType<any>;\n} & Record<string, unknown>;\n\nexport type AllBasePropsWithMods<K extends StyleList> = AllBaseProps & {\n  [key in K[number]]?:\n    | StyleValue<StylesInterface[key]>\n    | StyleValueStateMap<StylesInterface[key]>;\n} & BaseStyleProps;\n\n/**\n * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.\n * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.\n */\ntype TastySpecificKeys =\n  | 'as'\n  | 'qa'\n  | 'qaVal'\n  | 'element'\n  | 'styles'\n  | 'breakpoints'\n  | 'block'\n  | 'inline'\n  | 'mods'\n  | 'isHidden'\n  | 'isDisabled'\n  | 'css'\n  | 'style'\n  | 'theme'\n  | 'tokens'\n  | 'ref'\n  | 'color';\n\n/**\n * Props type for tasty elements that combines:\n * - AllBasePropsWithMods for style props with strict tokens type\n * - HTML attributes for flexibility (properly typed based on tag)\n * - Variant support\n *\n * Uses AllHTMLAttributes as base for common attributes (like disabled),\n * but overrides event handlers with tag-specific types from JSX.IntrinsicElements.\n */\nexport type TastyElementProps<\n  K extends StyleList,\n  V extends VariantMap,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> = AllBasePropsWithMods<K> &\n  WithVariant<V> &\n  Omit<\n    Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> &\n      JSX.IntrinsicElements[Tag],\n    TastySpecificKeys | K[number]\n  >;\n\ntype TastyComponentPropsWithDefaults<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props>,\n> = keyof DefaultProps extends never\n  ? Props\n  : {\n      [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];\n    } & {\n      [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];\n    };\n\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n>(\n  options: TastyElementOptions<K, V, E, Tag>,\n  secondArg?: never,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>\n> &\n  SubElementComponents<E>;\nexport function tasty<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props> = Partial<Props>,\n>(\n  Component: ComponentType<Props>,\n  options?: TastyProps<never, never, Record<string, never>, Props>,\n): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Implementation\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  _C = Record<string, unknown>,\n>(Component: any, options?: any) {\n  if (isValidElementType(Component)) {\n    return tastyWrap(Component as ComponentType<any>, options);\n  }\n\n  return tastyElement(Component as TastyProps<K, V>);\n}\n\nfunction tastyWrap<\n  P extends PropsWithStyles,\n  DefaultProps extends Partial<P> = Partial<P>,\n>(\n  Component: ComponentType<P>,\n  options?: TastyProps<never, never, P>,\n): ComponentType<TastyComponentPropsWithDefaults<P, DefaultProps>> {\n  const {\n    as: extendTag,\n    element: extendElement,\n    ...defaultProps\n  } = (options ?? {}) as TastyProps<never, never, P>;\n\n  const propsWithStyles = ['styles'].concat(\n    Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')),\n  );\n\n  const _WrappedComponent = forwardRef<any, any>((props, ref) => {\n    const { as, element, ...restProps } = props as Record<string, unknown>;\n    const propsWithStylesValues = propsWithStyles.map(\n      (prop) => (props as any)[prop],\n    );\n\n    const mergedStylesMap: Styles | undefined = useMemo(() => {\n      return propsWithStyles.reduce((map, prop) => {\n        const restValue = (restProps as any)[prop];\n        const defaultValue = (defaultProps as any)[prop];\n\n        if (restValue != null && defaultValue != null) {\n          (map as any)[prop] = mergeStyles(defaultValue, restValue);\n        } else {\n          (map as any)[prop] = restValue ?? defaultValue;\n        }\n\n        return map;\n      }, {} as Styles);\n    }, [propsWithStylesValues]);\n\n    const elementProps = {\n      ...(defaultProps as unknown as Record<string, unknown>),\n      ...(restProps as unknown as Record<string, unknown>),\n      ...(mergedStylesMap as unknown as Record<string, unknown>),\n      as: (as as string | undefined) ?? extendTag,\n      element: (element as string | undefined) || extendElement,\n      ref,\n    } as unknown as P;\n\n    return createElement(Component as ComponentType<P>, elementProps);\n  });\n\n  _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(\n    Component,\n    (defaultProps as any).qa ?? (extendTag as any) ?? 'Anonymous',\n  )})`;\n\n  return _WrappedComponent as unknown as ComponentType<\n    TastyComponentPropsWithDefaults<P, DefaultProps>\n  >;\n}\n\nfunction tastyElement<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition,\n>(tastyOptions: TastyProps<K, V, E>) {\n  const {\n    as: originalAs = 'div',\n    element: defaultElement,\n    styles: defaultStyles,\n    styleProps,\n    variants,\n    tokens: defaultTokens,\n    elements,\n    ...defaultProps\n  } = tastyOptions;\n\n  // Pre-compute merged styles for each variant (if variants are defined)\n  // This avoids creating separate component instances per variant\n  let variantStylesMap: Record<string, Styles | undefined> | undefined;\n  if (variants) {\n    // Split defaultStyles: extend-mode state maps (no '' key, non-selector)\n    // are pulled out and applied AFTER variant merge so they survive\n    // replace-mode maps in variants.\n    let baseStyles = defaultStyles;\n    let extensionStyles: Styles | undefined;\n\n    if (defaultStyles) {\n      for (const key of Object.keys(defaultStyles)) {\n        if (isSelector(key)) continue;\n\n        const value = (defaultStyles as Record<string, unknown>)[key];\n\n        if (\n          typeof value === 'object' &&\n          value !== null &&\n          !Array.isArray(value) &&\n          !('' in value)\n        ) {\n          if (!extensionStyles) {\n            baseStyles = { ...defaultStyles } as Styles;\n            extensionStyles = {} as Styles;\n          }\n          (extensionStyles as Record<string, unknown>)[key] = value;\n          delete (baseStyles as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    const variantEntries = Object.entries(variants) as [string, Styles][];\n    variantStylesMap = variantEntries.reduce(\n      (map, [variant, variantStyles]) => {\n        map[variant] = extensionStyles\n          ? mergeStyles(baseStyles, variantStyles, extensionStyles)\n          : mergeStyles(baseStyles, variantStyles);\n        return map;\n      },\n      {} as Record<string, Styles | undefined>,\n    );\n    // Ensure 'default' variant always exists\n    if (!variantStylesMap['default']) {\n      variantStylesMap['default'] = defaultStyles;\n    }\n  }\n\n  const {\n    qa: defaultQa,\n    qaVal: defaultQaVal,\n    ...otherDefaultProps\n  } = defaultProps ?? {};\n\n  const _TastyComponent = forwardRef<\n    unknown,\n    AllBasePropsWithMods<K> & WithVariant<V>\n  >((allProps, ref) => {\n    const {\n      as,\n      styles: rawStyles,\n      variant,\n      mods,\n      element,\n      qa,\n      qaVal,\n      className: userClassName,\n      tokens,\n      style,\n      ...otherProps\n    } = allProps as Record<string, unknown> as AllBasePropsWithMods<K> &\n      WithVariant<V> & {\n        className?: string;\n        tokens?: Tokens;\n        style?: Record<string, unknown>;\n      };\n\n    let styles = rawStyles;\n\n    // Optimize propStyles extraction - avoid creating empty objects\n    let propStyles: Styles | null = null;\n    const propsToCheck = styleProps\n      ? (styleProps as StyleList).concat(BASE_STYLES)\n      : BASE_STYLES;\n\n    for (const prop of propsToCheck) {\n      const key = prop as unknown as string;\n\n      if (!propStyles) propStyles = {};\n\n      if (key in otherProps) {\n        (propStyles as any)[key] = (otherProps as any)[key];\n        delete (otherProps as any)[key];\n      }\n    }\n\n    if (\n      !styles ||\n      (styles && Object.keys(styles as Record<string, unknown>).length === 0)\n    ) {\n      styles = undefined as unknown as Styles;\n    }\n\n    // Determine base styles: use variant styles if available, otherwise default styles\n    const baseStyles = variantStylesMap\n      ? (variantStylesMap[(variant as string) || 'default'] ??\n        variantStylesMap['default'])\n      : defaultStyles;\n\n    // Merge base styles with instance styles and prop styles\n    const allStyles = useMemo(() => {\n      const hasStyles =\n        styles && Object.keys(styles as Record<string, unknown>).length > 0;\n      const hasPropStyles = propStyles && Object.keys(propStyles).length > 0;\n\n      if (!hasStyles && !hasPropStyles) {\n        return baseStyles;\n      }\n\n      return mergeStyles(baseStyles, styles as Styles, propStyles as Styles);\n    }, [baseStyles, styles, propStyles]);\n\n    // Use the useStyles hook for style generation and injection\n    const { className: stylesClassName } = useStyles(allStyles);\n\n    // Merge default tokens with instance tokens (instance overrides defaults)\n    const tokensKey = stringifyTokens(tokens as Tokens | undefined);\n    const mergedTokens = useMemo(() => {\n      if (!defaultTokens && !tokens) return undefined;\n      if (!defaultTokens) return tokens as Tokens;\n      if (!tokens) return defaultTokens;\n      return { ...defaultTokens, ...tokens } as Tokens;\n    }, [tokensKey]);\n\n    // Process merged tokens into inline style properties\n    const processedTokenStyle = useMemo(() => {\n      return processTokens(mergedTokens);\n    }, [mergedTokens]);\n\n    // Merge processed tokens with explicit style prop (style has priority)\n    const mergedStyle = useMemo(() => {\n      if (!processedTokenStyle && !style) return undefined;\n      if (!processedTokenStyle) return style;\n      if (!style) return processedTokenStyle;\n      return { ...processedTokenStyle, ...style };\n    }, [processedTokenStyle, style]);\n\n    let modProps: Record<string, unknown> | undefined;\n    if (mods) {\n      const modsObject = mods as unknown as Record<string, unknown>;\n      modProps = modAttrs(modsObject as any) as Record<string, unknown>;\n    }\n\n    // Merge user className with generated className\n    const finalClassName = [(userClassName as string) || '', stylesClassName]\n      .filter(Boolean)\n      .join(' ');\n\n    const elementProps = {\n      'data-element': (element as string | undefined) || defaultElement,\n      'data-qa': (qa as string | undefined) || defaultQa,\n      'data-qaval': (qaVal as string | undefined) || defaultQaVal,\n      ...(otherDefaultProps as unknown as Record<string, unknown>),\n      ...(modProps || {}),\n      ...(otherProps as unknown as Record<string, unknown>),\n      className: finalClassName,\n      style: mergedStyle,\n      ref,\n    } as Record<string, unknown>;\n\n    // Apply the helper to handle is* properties\n    handleIsProperties(elementProps);\n\n    const renderedElement = createElement(\n      (as as string | 'div') ?? originalAs,\n      elementProps,\n    );\n\n    return renderedElement;\n  });\n\n  _TastyComponent.displayName = `TastyComponent(${\n    (defaultProps as any).qa || originalAs\n  })`;\n\n  // Attach sub-element components if elements are defined\n  if (elements) {\n    const subElements = Object.entries(elements).reduce(\n      (acc, [name, definition]) => {\n        acc[name] = createSubElement(\n          name,\n          definition as SubElementDefinition<keyof JSX.IntrinsicElements>,\n        );\n        return acc;\n      },\n      {} as Record<string, ForwardRefExoticComponent<any>>,\n    );\n\n    return Object.assign(_TastyComponent, subElements);\n  }\n\n  return _TastyComponent;\n}\n\nexport const Element = tasty({});\n"],"mappings":"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"}
+{"version":3,"file":"tasty.js","names":["modAttrs"],"sources":["../src/tasty.tsx"],"sourcesContent":["import type {\n  AllHTMLAttributes,\n  ComponentType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from 'react';\nimport { createElement, forwardRef, useMemo, useRef } from 'react';\nimport { useStyles } from './hooks/useStyles';\nimport { BASE_STYLES } from './styles/list';\nimport type { Styles, StylesInterface } from './styles/types';\nimport type {\n  AllBaseProps,\n  BaseProps,\n  BaseStyleProps,\n  Mods,\n  Props,\n  Tokens,\n} from './types';\nimport { getDisplayName } from './utils/get-display-name';\nimport { isValidElementType } from './utils/is-valid-element-type';\nimport { mergeStyles } from './utils/merge-styles';\nimport { isSelector } from './pipeline';\nimport { hasKeys } from './utils/has-keys';\nimport { modAttrs } from './utils/mod-attrs';\nimport { processTokens, stringifyTokens } from './utils/process-tokens';\n\nimport type { StyleValue, StyleValueStateMap } from './utils/styles';\n\n/**\n * Mapping of is* properties to their corresponding HTML attributes\n */\nconst IS_PROPERTIES_MAP = {\n  isDisabled: 'disabled',\n  isHidden: 'hidden',\n  isChecked: 'checked',\n} as const;\n\n/**\n * Precalculated entries for performance optimization\n */\nconst IS_PROPERTIES_ENTRIES = Object.entries(IS_PROPERTIES_MAP);\n\n/**\n * Helper function to handle is* properties consistently\n * Transforms is* props to HTML attributes and adds corresponding data-* attributes\n */\nfunction handleIsProperties(props: Record<string, unknown>) {\n  for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {\n    if (isProperty in props) {\n      props[targetAttribute] = props[isProperty];\n      delete props[isProperty];\n    }\n\n    // Add data-* attribute if target attribute is truthy and doesn't already exist\n    const dataAttribute = `data-${targetAttribute}`;\n    if (!(dataAttribute in props) && props[targetAttribute]) {\n      props[dataAttribute] = '';\n    }\n  }\n}\n\n/**\n * Creates a sub-element component for compound component patterns.\n * Sub-elements are lightweight components with data-element attribute for CSS targeting.\n */\nfunction createSubElement<Tag extends keyof JSX.IntrinsicElements>(\n  elementName: string,\n  definition: SubElementDefinition<Tag>,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n> {\n  // Normalize definition to object form\n  const config =\n    typeof definition === 'string'\n      ? { as: definition as Tag }\n      : (definition as { as?: Tag; qa?: string; qaVal?: string | number });\n\n  const tag = config.as ?? ('div' as Tag);\n  const defaultQa = config.qa;\n  const defaultQaVal = config.qaVal;\n\n  const SubElement = forwardRef<unknown, SubElementProps<Tag>>((props, ref) => {\n    const {\n      qa,\n      qaVal,\n      mods,\n      tokens,\n      isDisabled,\n      isHidden,\n      isChecked,\n      className,\n      style,\n      ...htmlProps\n    } = props as SubElementProps<Tag> & {\n      className?: string;\n      style?: Record<string, unknown>;\n    };\n\n    // Build mod attributes\n    let modProps: Record<string, unknown> | undefined;\n    if (mods) {\n      modProps = modAttrs(mods as Mods) as Record<string, unknown>;\n    }\n\n    // Process tokens into inline style properties\n    const tokenStyle = tokens\n      ? (processTokens(tokens) as Record<string, unknown>)\n      : undefined;\n\n    // Merge token styles with explicit style prop (style has priority)\n    let mergedStyle: Record<string, unknown> | undefined;\n    if (tokenStyle || style) {\n      mergedStyle =\n        tokenStyle && style\n          ? { ...tokenStyle, ...style }\n          : ((tokenStyle ?? style) as Record<string, unknown>);\n    }\n\n    const elementProps = {\n      'data-element': elementName,\n      'data-qa': qa ?? defaultQa,\n      'data-qaval': qaVal ?? defaultQaVal,\n      ...(modProps || {}),\n      ...htmlProps,\n      className,\n      style: mergedStyle,\n      isDisabled,\n      isHidden,\n      isChecked,\n      ref,\n    } as Record<string, unknown>;\n\n    // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)\n    handleIsProperties(elementProps);\n\n    // Clean up undefined data attributes\n    if (elementProps['data-qa'] === undefined) delete elementProps['data-qa'];\n    if (elementProps['data-qaval'] === undefined)\n      delete elementProps['data-qaval'];\n\n    return createElement(tag, elementProps);\n  });\n\n  SubElement.displayName = `SubElement(${elementName})`;\n\n  return SubElement as ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n  >;\n}\n\ntype StyleList = readonly (keyof {\n  [key in keyof StylesInterface]: StylesInterface[key];\n})[];\n\nexport type PropsWithStyles = {\n  styles?: Styles;\n} & Omit<Props, 'styles'>;\n\nexport type VariantMap = Record<string, Styles>;\n\nexport interface WithVariant<V extends VariantMap> {\n  variant?: keyof V;\n}\n\n// ============================================================================\n// Sub-element types for compound components\n// ============================================================================\n\n/**\n * Definition for a sub-element. Can be either:\n * - A tag name string (e.g., 'div', 'span')\n * - An object with configuration options\n */\nexport type SubElementDefinition<\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> =\n  | Tag\n  | {\n      as?: Tag;\n      qa?: string;\n      qaVal?: string | number;\n    };\n\n/**\n * Map of sub-element definitions.\n * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)\n */\nexport type ElementsDefinition = Record<\n  string,\n  SubElementDefinition<keyof JSX.IntrinsicElements>\n>;\n\n/**\n * Resolves the tag from a SubElementDefinition\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ResolveElementTag<T extends SubElementDefinition<any>> = T extends string\n  ? T\n  : T extends { as?: infer Tag }\n    ? Tag extends keyof JSX.IntrinsicElements\n      ? Tag\n      : 'div'\n    : 'div';\n\n/**\n * Props for sub-element components.\n * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)\n */\nexport type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> =\n  Omit<\n    JSX.IntrinsicElements[Tag],\n    'ref' | 'color' | 'content' | 'translate'\n  > & {\n    qa?: string;\n    qaVal?: string | number;\n    mods?: Mods;\n    tokens?: Tokens;\n    isDisabled?: boolean;\n    isHidden?: boolean;\n    isChecked?: boolean;\n  };\n\n/**\n * Generates the sub-element component types from an ElementsDefinition\n */\ntype SubElementComponents<E extends ElementsDefinition> = {\n  [K in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> &\n      RefAttributes<\n        ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[ResolveElementTag<E[K]>]\n          : Element\n      >\n  >;\n};\n\n/**\n * Base type containing common properties shared between TastyProps and TastyElementOptions.\n * Separated to avoid code duplication while allowing different type constraints.\n */\ntype TastyBaseProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n> = {\n  /** Default styles of the element. */\n  styles?: Styles;\n  /** The list of styles that can be provided by props */\n  styleProps?: K;\n  element?: BaseProps['element'];\n  variants?: V;\n  /** Default tokens for inline CSS custom properties */\n  tokens?: Tokens;\n  /** Sub-element definitions for compound components */\n  elements?: E;\n} & Pick<BaseProps, 'qa' | 'qaVal'> &\n  WithVariant<V>;\n\nexport type TastyProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  DefaultProps = Props,\n> = TastyBaseProps<K, V, E> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: string | ComponentType<any>;\n} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'tokens'>>;\n\n/**\n * TastyElementOptions is used for the element-creation overload of tasty().\n * It includes a Tag generic that allows TypeScript to infer the correct\n * HTML element type from the `as` prop.\n *\n * Note: Uses a separate index signature with `unknown` instead of inheriting\n * from Props (which has `any`) to ensure strict type checking for styles.\n */\nexport type TastyElementOptions<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> = TastyBaseProps<K, V, E> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: Tag | ComponentType<any>;\n} & Record<string, unknown>;\n\nexport type AllBasePropsWithMods<K extends StyleList> = AllBaseProps & {\n  [key in K[number]]?:\n    | StyleValue<StylesInterface[key]>\n    | StyleValueStateMap<StylesInterface[key]>;\n} & BaseStyleProps;\n\n/**\n * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.\n * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.\n */\ntype TastySpecificKeys =\n  | 'as'\n  | 'qa'\n  | 'qaVal'\n  | 'element'\n  | 'styles'\n  | 'breakpoints'\n  | 'block'\n  | 'inline'\n  | 'mods'\n  | 'isHidden'\n  | 'isDisabled'\n  | 'css'\n  | 'style'\n  | 'theme'\n  | 'tokens'\n  | 'ref'\n  | 'color';\n\n/**\n * Props type for tasty elements that combines:\n * - AllBasePropsWithMods for style props with strict tokens type\n * - HTML attributes for flexibility (properly typed based on tag)\n * - Variant support\n *\n * Uses AllHTMLAttributes as base for common attributes (like disabled),\n * but overrides event handlers with tag-specific types from JSX.IntrinsicElements.\n */\nexport type TastyElementProps<\n  K extends StyleList,\n  V extends VariantMap,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> = AllBasePropsWithMods<K> &\n  WithVariant<V> &\n  Omit<\n    Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> &\n      JSX.IntrinsicElements[Tag],\n    TastySpecificKeys | K[number]\n  >;\n\ntype TastyComponentPropsWithDefaults<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props>,\n> = keyof DefaultProps extends never\n  ? Props\n  : {\n      [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];\n    } & {\n      [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];\n    };\n\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n>(\n  options: TastyElementOptions<K, V, E, Tag>,\n  secondArg?: never,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>\n> &\n  SubElementComponents<E>;\nexport function tasty<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props> = Partial<Props>,\n>(\n  Component: ComponentType<Props>,\n  options?: TastyProps<never, never, Record<string, never>, Props>,\n): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Implementation\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  _C = Record<string, unknown>,\n>(Component: any, options?: any) {\n  if (isValidElementType(Component)) {\n    return tastyWrap(Component as ComponentType<any>, options);\n  }\n\n  return tastyElement(Component as TastyProps<K, V>);\n}\n\nfunction tastyWrap<\n  P extends PropsWithStyles,\n  DefaultProps extends Partial<P> = Partial<P>,\n>(\n  Component: ComponentType<P>,\n  options?: TastyProps<never, never, P>,\n): ComponentType<TastyComponentPropsWithDefaults<P, DefaultProps>> {\n  const {\n    as: extendTag,\n    element: extendElement,\n    ...defaultProps\n  } = (options ?? {}) as TastyProps<never, never, P>;\n\n  const propsWithStyles = ['styles'].concat(\n    Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')),\n  );\n\n  const _WrappedComponent = forwardRef<any, any>((props, ref) => {\n    const { as, element, ...restProps } = props as Record<string, unknown>;\n    const propsWithStylesValues = propsWithStyles.map(\n      (prop) => (props as any)[prop],\n    );\n\n    const mergedStylesMap: Styles | undefined = useMemo(() => {\n      return propsWithStyles.reduce((map, prop) => {\n        const restValue = (restProps as any)[prop];\n        const defaultValue = (defaultProps as any)[prop];\n\n        if (restValue != null && defaultValue != null) {\n          (map as any)[prop] = mergeStyles(defaultValue, restValue);\n        } else {\n          (map as any)[prop] = restValue ?? defaultValue;\n        }\n\n        return map;\n      }, {} as Styles);\n    }, [propsWithStylesValues]);\n\n    const elementProps = {\n      ...(defaultProps as unknown as Record<string, unknown>),\n      ...(restProps as unknown as Record<string, unknown>),\n      ...(mergedStylesMap as unknown as Record<string, unknown>),\n      as: (as as string | undefined) ?? extendTag,\n      element: (element as string | undefined) || extendElement,\n      ref,\n    } as unknown as P;\n\n    return createElement(Component as ComponentType<P>, elementProps);\n  });\n\n  _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(\n    Component,\n    (defaultProps as any).qa ?? (extendTag as any) ?? 'Anonymous',\n  )})`;\n\n  return _WrappedComponent as unknown as ComponentType<\n    TastyComponentPropsWithDefaults<P, DefaultProps>\n  >;\n}\n\nfunction tastyElement<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition,\n>(tastyOptions: TastyProps<K, V, E>) {\n  const {\n    as: originalAs = 'div',\n    element: defaultElement,\n    styles: defaultStyles,\n    styleProps,\n    variants,\n    tokens: defaultTokens,\n    elements,\n    ...defaultProps\n  } = tastyOptions;\n\n  // Pre-compute merged styles for each variant (if variants are defined)\n  // This avoids creating separate component instances per variant\n  let variantStylesMap: Record<string, Styles | undefined> | undefined;\n  if (variants) {\n    // Split defaultStyles: extend-mode state maps (no '' key, non-selector)\n    // are pulled out and applied AFTER variant merge so they survive\n    // replace-mode maps in variants.\n    let baseStyles = defaultStyles;\n    let extensionStyles: Styles | undefined;\n\n    if (defaultStyles) {\n      for (const key of Object.keys(defaultStyles)) {\n        if (isSelector(key)) continue;\n\n        const value = (defaultStyles as Record<string, unknown>)[key];\n\n        if (\n          typeof value === 'object' &&\n          value !== null &&\n          !Array.isArray(value) &&\n          !('' in value)\n        ) {\n          if (!extensionStyles) {\n            baseStyles = { ...defaultStyles } as Styles;\n            extensionStyles = {} as Styles;\n          }\n          (extensionStyles as Record<string, unknown>)[key] = value;\n          delete (baseStyles as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    const variantEntries = Object.entries(variants) as [string, Styles][];\n    variantStylesMap = variantEntries.reduce(\n      (map, [variant, variantStyles]) => {\n        map[variant] = extensionStyles\n          ? mergeStyles(baseStyles, variantStyles, extensionStyles)\n          : mergeStyles(baseStyles, variantStyles);\n        return map;\n      },\n      {} as Record<string, Styles | undefined>,\n    );\n    // Ensure 'default' variant always exists\n    if (!variantStylesMap['default']) {\n      variantStylesMap['default'] = defaultStyles;\n    }\n  }\n\n  const {\n    qa: defaultQa,\n    qaVal: defaultQaVal,\n    ...otherDefaultProps\n  } = defaultProps ?? {};\n\n  const propsToCheck = styleProps\n    ? (styleProps as StyleList).concat(BASE_STYLES)\n    : BASE_STYLES;\n\n  const _TastyComponent = forwardRef<\n    unknown,\n    AllBasePropsWithMods<K> & WithVariant<V>\n  >((allProps, ref) => {\n    const {\n      as,\n      styles: rawStyles,\n      variant,\n      mods,\n      element,\n      qa,\n      qaVal,\n      className: userClassName,\n      tokens,\n      style,\n      ...otherProps\n    } = allProps as Record<string, unknown> as AllBasePropsWithMods<K> &\n      WithVariant<V> & {\n        className?: string;\n        tokens?: Tokens;\n        style?: Record<string, unknown>;\n      };\n\n    let styles = rawStyles;\n\n    let propStyles: Styles | null = null;\n    let propStylesKey = '';\n\n    for (const prop of propsToCheck) {\n      const key = prop as unknown as string;\n\n      if (key in otherProps) {\n        if (!propStyles) propStyles = {};\n        const value = (otherProps as any)[key];\n        (propStyles as any)[key] = value;\n        delete (otherProps as any)[key];\n        propStylesKey += key + '\\0' + value + '\\0';\n      }\n    }\n\n    if (!styles || (styles && !hasKeys(styles as Record<string, unknown>))) {\n      styles = undefined as unknown as Styles;\n    }\n\n    // Stabilize propStyles reference: only update when content actually changes\n    const propStylesRef = useRef<{ key: string; styles: Styles | null }>({\n      key: '',\n      styles: null,\n    });\n    if (propStylesRef.current.key !== propStylesKey) {\n      propStylesRef.current = { key: propStylesKey, styles: propStyles };\n    }\n\n    // Determine base styles: use variant styles if available, otherwise default styles\n    const baseStyles = variantStylesMap\n      ? (variantStylesMap[(variant as string) || 'default'] ??\n        variantStylesMap['default'])\n      : defaultStyles;\n\n    // Merge base styles with instance styles and prop styles\n    const allStyles = useMemo(() => {\n      const currentPropStyles = propStylesRef.current.styles;\n      const hasStyleProps =\n        styles && hasKeys(styles as Record<string, unknown>);\n      const hasPropStyles = currentPropStyles && hasKeys(currentPropStyles);\n\n      if (!hasStyleProps && !hasPropStyles) {\n        return baseStyles;\n      }\n\n      return mergeStyles(\n        baseStyles,\n        styles as Styles,\n        currentPropStyles as Styles,\n      );\n    }, [baseStyles, styles, propStylesKey]);\n\n    // Use the useStyles hook for style generation and injection\n    const { className: stylesClassName } = useStyles(allStyles);\n\n    // Merge default tokens with instance tokens (instance overrides defaults)\n    const tokensKey = stringifyTokens(tokens as Tokens | undefined);\n    const mergedTokens = useMemo(() => {\n      if (!defaultTokens && !tokens) return undefined;\n      if (!defaultTokens) return tokens as Tokens;\n      if (!tokens) return defaultTokens;\n      return { ...defaultTokens, ...tokens } as Tokens;\n    }, [tokensKey]);\n\n    // Process merged tokens into inline style properties\n    const processedTokenStyle = useMemo(() => {\n      return processTokens(mergedTokens);\n    }, [mergedTokens]);\n\n    // Merge processed tokens with explicit style prop (style has priority)\n    const mergedStyle = useMemo(() => {\n      if (!processedTokenStyle && !style) return undefined;\n      if (!processedTokenStyle) return style;\n      if (!style) return processedTokenStyle;\n      return { ...processedTokenStyle, ...style };\n    }, [processedTokenStyle, style]);\n\n    let modProps: Record<string, unknown> | undefined;\n    if (mods) {\n      const modsObject = mods as unknown as Record<string, unknown>;\n      modProps = modAttrs(modsObject as any) as Record<string, unknown>;\n    }\n\n    // Merge user className with generated className\n    const finalClassName = [(userClassName as string) || '', stylesClassName]\n      .filter(Boolean)\n      .join(' ');\n\n    const elementProps = {\n      'data-element': (element as string | undefined) || defaultElement,\n      'data-qa': (qa as string | undefined) || defaultQa,\n      'data-qaval': (qaVal as string | undefined) || defaultQaVal,\n      ...(otherDefaultProps as unknown as Record<string, unknown>),\n      ...(modProps || {}),\n      ...(otherProps as unknown as Record<string, unknown>),\n      className: finalClassName,\n      style: mergedStyle,\n      ref,\n    } as Record<string, unknown>;\n\n    // Apply the helper to handle is* properties\n    handleIsProperties(elementProps);\n\n    const renderedElement = createElement(\n      (as as string | 'div') ?? originalAs,\n      elementProps,\n    );\n\n    return renderedElement;\n  });\n\n  _TastyComponent.displayName = `TastyComponent(${\n    (defaultProps as any).qa || originalAs\n  })`;\n\n  // Attach sub-element components if elements are defined\n  if (elements) {\n    const subElements = Object.entries(elements).reduce(\n      (acc, [name, definition]) => {\n        acc[name] = createSubElement(\n          name,\n          definition as SubElementDefinition<keyof JSX.IntrinsicElements>,\n        );\n        return acc;\n      },\n      {} as Record<string, ForwardRefExoticComponent<any>>,\n    );\n\n    return Object.assign(_TastyComponent, subElements);\n  }\n\n  return _TastyComponent;\n}\n\nexport const Element = tasty({});\n"],"mappings":"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"}

package/dist/types.d.ts

@@ -46,7 +46,7 @@ type TokenValue = string | number | boolean | undefined | null;
 /**
  * Tokens definition for inline CSS custom properties.
  * - `$name` keys become `--name` CSS properties
- * - `#name` keys become `--name-color` and `--name-color-rgb` CSS properties
+ * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` CSS properties
  */
 type Tokens = Record<`$${string}` | `#${string}`, TokenValue>;
 type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

package/dist/utils/cache-wrapper.js

@@ -1,19 +1,15 @@
+import { Lru } from "../parser/lru.js";
+
 //#region src/utils/cache-wrapper.ts
 /**
-* Create a function that caches the result up to the limit.
+* Create a function that caches the result with LRU eviction.
 */
 function cacheWrapper(handler, limit = 1e3) {
-	const cache = /* @__PURE__ */ new Map();
-	let count = 0;
+	const cache = new Lru(limit);
 	return (firstArg, secondArg) => {
 		const key = typeof firstArg === "string" && secondArg == null ? firstArg : JSON.stringify([firstArg, secondArg]);
 		let result = cache.get(key);
 		if (result === void 0) {
-			if (count > limit) {
-				cache.clear();
-				count = 0;
-			}
-			count++;
 			result = secondArg == null ? handler(firstArg) : handler(firstArg, secondArg);
 			cache.set(key, result);
 		}