@yamada-ui/react 2.0.10-dev-20260224132828 → 2.0.10-dev-20260226033228

package/dist/types/core/css/styles.d.ts

@@ -3847,21 +3847,216 @@ type ZIndexProperty = (typeof zIndexProperties)[number];
 declare const zIndexProperties: readonly ["zIndex", "z"];
 interface StyleProps {
   /**
-   * Apply other styles defined in `theme.styles`.
+   * ### container
+   *
+   * Container size queries with the <code>@container</code> at-rule apply styles to an element based on the dimensions of its container.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2025-08-14
+   * @newly_available_date 2023-02-14
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@container
    */
-  apply?: StyleValueWithCondition<AnyString, "apply">;
+  _container?: {
+    [key: string]: any;
+    aspectRatio?: CSS.Property.AspectRatio;
+    blockSize?: CSS.Property.BlockSize | number | ThemeTokens["sizes"];
+    css?: CSSObject;
+    h?: CSS.Property.Height | number | ThemeTokens["sizes"];
+    height?: CSS.Property.Height | number | ThemeTokens["sizes"];
+    inlineSize?: CSS.Property.InlineSize | number | ThemeTokens["sizes"];
+    maxAspectRatio?: CSS.Property.AspectRatio;
+    maxBlockSize?: CSS.Property.MaxBlockSize | number | ThemeTokens["sizes"];
+    maxH?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
+    maxHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
+    maxInlineSize?: CSS.Property.MaxInlineSize | number | ThemeTokens["sizes"];
+    maxW?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
+    maxWidth?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
+    minAspectRatio?: CSS.Property.AspectRatio;
+    minBlockSize?: CSS.Property.MinBlockSize | number | ThemeTokens["sizes"];
+    minH?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
+    minHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
+    minInlineSize?: CSS.Property.MinInlineSize | number | ThemeTokens["sizes"];
+    minW?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
+    minWidth?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
+    name?: AnyString;
+    orientation?: "landscape" | "portrait" | AnyString;
+    query?: AnyString;
+    w?: CSS.Property.Width | number | ThemeTokens["sizes"];
+    width?: CSS.Property.Width | number | ThemeTokens["sizes"];
+  }[];
   /**
-   * Apply layer styles defined in `theme.layerStyles`.
+   * ### keyframes
+   *
+   * The <code>animation</code> CSS property animates an element's style over time, using keyframes described in <code>@keyframes</code> rules.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-03-30
+   * @newly_available_date 2015-09-30
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@keyframes
    */
-  layerStyle?: StyleValueWithCondition<AnyString, "layerStyles">;
+  _keyframes?: StyleValueWithCondition<AnyString | {
+    [key: string]: CSSObject;
+  }, "keyframes">;
   /**
-   * Apply text styles defined in `theme.textStyles`.
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
    */
-  textStyle?: StyleValueWithCondition<AnyString, "textStyles">;
+  _landscape?: StyleValueWithCondition<CSSObject>;
   /**
-   * Set color scheme variables.
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
    */
-  colorScheme?: StyleValueWithCondition<AnyString | ColorScheme>;
+  _media?: {
+    [key: string]: any;
+    anyHover?: "hover" | "none" | AnyString;
+    anyPointer?: "coarse" | "fine" | "none" | AnyString;
+    aspectRatio?: CSS.Property.AspectRatio;
+    color?: AnyString | number;
+    colorGamut?: "p3" | "rec2020" | "srgb" | AnyString;
+    colorIndex?: AnyString | number;
+    css?: CSSObject;
+    deviceAspectRatio?: CSS.Property.AspectRatio;
+    deviceHeight?: CSS.Property.Height | number | ThemeTokens["sizes"];
+    deviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
+    displayMode?: "browser" | "fullscreen" | "minimal-ui" | "picture-in-picture" | "standalone" | "window-controls-overlay" | AnyString;
+    dynamicRange?: "high" | "standard" | AnyString;
+    forcedColors?: "active" | "none" | AnyString;
+    grid?: 0 | 1 | "AnyString";
+    h?: CSS.Property.Height | number | ThemeTokens["sizes"];
+    height?: CSS.Property.Height | number | ThemeTokens["sizes"];
+    hover?: "hover" | "none" | AnyString;
+    invertedColors?: "inverted" | "none" | AnyString;
+    maxColor?: AnyString | number;
+    maxColorIndex?: AnyString | number;
+    maxDeviceAspectRatio?: CSS.Property.AspectRatio;
+    maxDeviceHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
+    maxH?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
+    maxHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
+    maxMonochrome?: AnyString | number;
+    maxResolution?: AnyString;
+    maxW?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
+    maxWidth?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
+    mazDeviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
+    minColor?: AnyString | number;
+    minColorIndex?: AnyString | number;
+    minDeviceAspectRatio?: CSS.Property.AspectRatio;
+    minDeviceHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
+    minDeviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
+    minH?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
+    minHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
+    minMonochrome?: AnyString | number;
+    minResolution?: AnyString;
+    minW?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
+    minWidth?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
+    monochrome?: AnyString | number;
+    orientation?: "landscape" | "portrait" | AnyString;
+    overflowBlock?: "none" | "optional-paged" | "paged" | "scroll" | AnyString;
+    overflowInline?: "none" | "scroll" | AnyString;
+    pointer?: "coarse" | "fine" | "none" | AnyString;
+    prefersColorScheme?: "dark" | "light" | AnyString;
+    prefersContrast?: "custom" | "high" | "low" | "no-preference" | AnyString;
+    prefersReducedMotion?: "no-preference" | "reduce" | AnyString;
+    query?: AnyString;
+    resolution?: AnyString;
+    scan?: "interlace" | "progressive" | AnyString;
+    scripting?: "enabled" | "initial-only" | "none" | AnyString;
+    type?: "all" | "print" | "screen" | "speech" | AnyString;
+    update?: "fast" | "none" | "slow" | AnyString;
+    videoDynamicRange?: "high" | "standard" | AnyString;
+    w?: CSS.Property.Width | number | ThemeTokens["sizes"];
+    width?: CSS.Property.Width | number | ThemeTokens["sizes"];
+  }[];
+  /**
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
+   */
+  _mediaDark?: StyleValueWithCondition<CSSObject>;
+  /**
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
+   */
+  _mediaLight?: StyleValueWithCondition<CSSObject>;
+  /**
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
+   */
+  _mediaReduceMotion?: StyleValueWithCondition<CSSObject>;
+  /**
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
+   */
+  _portrait?: StyleValueWithCondition<CSSObject>;
+  /**
+   * ### media
+   *
+   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-01-29
+   * @newly_available_date 2015-07-29
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
+   */
+  _print?: StyleValueWithCondition<CSSObject>;
+  /**
+   * ### supports
+   *
+   * The <code>@supports</code> at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
+   *
+   * @baseline `Widely available`
+   * @widely_available_date 2018-03-30
+   * @newly_available_date 2015-09-30
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@supports
+   */
+  _supports?: {
+    css?: CSSObject;
+    query?: AnyString;
+  }[];
   /**
    * ### accent-color
    *
@@ -4142,6 +4337,10 @@ interface StyleProps {
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/appearance
    */
   appearance?: StyleValueWithCondition<CSS.Property.Appearance>;
+  /**
+   * Apply other styles defined in `theme.styles`.
+   */
+  apply?: StyleValueWithCondition<AnyString, "apply">;
   /**
    * ### aspect-ratio
    *
@@ -6097,6 +6296,10 @@ interface StyleProps {
    * @deprecated
    */
   colorRendering?: StyleValueWithCondition<CSS.Property.ColorRendering>;
+  /**
+   * Set color scheme variables.
+   */
+  colorScheme?: StyleValueWithCondition<AnyString | ColorScheme>;
   /**
    * ### column-count
    *
@@ -7927,6 +8130,10 @@ interface StyleProps {
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/justify-self
    */
   justifySelf?: StyleValueWithCondition<CSS.Property.JustifySelf>;
+  /**
+   * Apply layer styles defined in `theme.layerStyles`.
+   */
+  layerStyle?: StyleValueWithCondition<AnyString, "layerStyles">;
   /**
    * ### line-height
    *
@@ -11402,6 +11609,10 @@ interface StyleProps {
    * @experimental
    */
   textSpacingTrim?: StyleValueWithCondition<CSS.Property.TextSpacingTrim>;
+  /**
+   * Apply text styles defined in `theme.textStyles`.
+   */
+  textStyle?: StyleValueWithCondition<AnyString, "textStyles">;
   /**
    * ### text-transform
    *
@@ -11994,217 +12205,6 @@ interface StyleProps {
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/zoom
    */
   zoom?: StyleValueWithCondition<CSS.Property.Zoom>;
-  /**
-   * ### container
-   *
-   * Container size queries with the <code>@container</code> at-rule apply styles to an element based on the dimensions of its container.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2025-08-14
-   * @newly_available_date 2023-02-14
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@container
-   */
-  _container?: {
-    name?: AnyString;
-    css?: CSSObject;
-    [key: string]: any;
-    aspectRatio?: CSS.Property.AspectRatio;
-    blockSize?: CSS.Property.BlockSize | number | ThemeTokens["sizes"];
-    h?: CSS.Property.Height | number | ThemeTokens["sizes"];
-    height?: CSS.Property.Height | number | ThemeTokens["sizes"];
-    inlineSize?: CSS.Property.InlineSize | number | ThemeTokens["sizes"];
-    maxAspectRatio?: CSS.Property.AspectRatio;
-    maxBlockSize?: CSS.Property.MaxBlockSize | number | ThemeTokens["sizes"];
-    maxH?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
-    maxHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
-    maxInlineSize?: CSS.Property.MaxInlineSize | number | ThemeTokens["sizes"];
-    maxW?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
-    maxWidth?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
-    minAspectRatio?: CSS.Property.AspectRatio;
-    minBlockSize?: CSS.Property.MinBlockSize | number | ThemeTokens["sizes"];
-    minH?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
-    minHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
-    minInlineSize?: CSS.Property.MinInlineSize | number | ThemeTokens["sizes"];
-    minW?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
-    minWidth?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
-    orientation?: "landscape" | "portrait" | AnyString;
-    query?: AnyString;
-    w?: CSS.Property.Width | number | ThemeTokens["sizes"];
-    width?: CSS.Property.Width | number | ThemeTokens["sizes"];
-  }[];
-  /**
-   * ### keyframes
-   *
-   * The <code>animation</code> CSS property animates an element's style over time, using keyframes described in <code>@keyframes</code> rules.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-03-30
-   * @newly_available_date 2015-09-30
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@keyframes
-   */
-  _keyframes?: StyleValueWithCondition<AnyString | {
-    [key: string]: CSSObject;
-  }, "keyframes">;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _landscape?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _media?: {
-    type?: "all" | "print" | "screen" | "speech" | AnyString;
-    css?: CSSObject;
-    [key: string]: any;
-    anyHover?: "hover" | "none" | AnyString;
-    anyPointer?: "coarse" | "fine" | "none" | AnyString;
-    aspectRatio?: CSS.Property.AspectRatio;
-    color?: AnyString | number;
-    colorGamut?: "p3" | "rec2020" | "srgb" | AnyString;
-    colorIndex?: AnyString | number;
-    deviceAspectRatio?: CSS.Property.AspectRatio;
-    deviceHeight?: CSS.Property.Height | number | ThemeTokens["sizes"];
-    deviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
-    displayMode?: "browser" | "fullscreen" | "minimal-ui" | "picture-in-picture" | "standalone" | "window-controls-overlay" | AnyString;
-    dynamicRange?: "high" | "standard" | AnyString;
-    forcedColors?: "active" | "none" | AnyString;
-    grid?: 0 | 1 | "AnyString";
-    h?: CSS.Property.Height | number | ThemeTokens["sizes"];
-    height?: CSS.Property.Height | number | ThemeTokens["sizes"];
-    hover?: "hover" | "none" | AnyString;
-    invertedColors?: "inverted" | "none" | AnyString;
-    maxColor?: AnyString | number;
-    maxColorIndex?: AnyString | number;
-    maxDeviceAspectRatio?: CSS.Property.AspectRatio;
-    maxDeviceHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
-    maxH?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
-    maxHeight?: CSS.Property.MaxHeight | number | ThemeTokens["sizes"];
-    maxMonochrome?: AnyString | number;
-    maxResolution?: AnyString;
-    maxW?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
-    maxWidth?: CSS.Property.MaxWidth | number | ThemeTokens["sizes"];
-    mazDeviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
-    minColor?: AnyString | number;
-    minColorIndex?: AnyString | number;
-    minDeviceAspectRatio?: CSS.Property.AspectRatio;
-    minDeviceHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
-    minDeviceWidth?: CSS.Property.Width | number | ThemeTokens["sizes"];
-    minH?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
-    minHeight?: CSS.Property.MinHeight | number | ThemeTokens["sizes"];
-    minMonochrome?: AnyString | number;
-    minResolution?: AnyString;
-    minW?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
-    minWidth?: CSS.Property.MinWidth | number | ThemeTokens["sizes"];
-    monochrome?: AnyString | number;
-    orientation?: "landscape" | "portrait" | AnyString;
-    overflowBlock?: "none" | "optional-paged" | "paged" | "scroll" | AnyString;
-    overflowInline?: "none" | "scroll" | AnyString;
-    pointer?: "coarse" | "fine" | "none" | AnyString;
-    prefersColorScheme?: "dark" | "light" | AnyString;
-    prefersContrast?: "custom" | "high" | "low" | "no-preference" | AnyString;
-    prefersReducedMotion?: "no-preference" | "reduce" | AnyString;
-    query?: AnyString;
-    resolution?: AnyString;
-    scan?: "interlace" | "progressive" | AnyString;
-    scripting?: "enabled" | "initial-only" | "none" | AnyString;
-    update?: "fast" | "none" | "slow" | AnyString;
-    videoDynamicRange?: "high" | "standard" | AnyString;
-    w?: CSS.Property.Width | number | ThemeTokens["sizes"];
-    width?: CSS.Property.Width | number | ThemeTokens["sizes"];
-  }[];
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _mediaDark?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _mediaLight?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _mediaReduceMotion?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _portrait?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### media
-   *
-   * The <code>@media</code> CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-01-29
-   * @newly_available_date 2015-07-29
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@media
-   */
-  _print?: StyleValueWithCondition<CSSObject>;
-  /**
-   * ### supports
-   *
-   * The <code>@supports</code> at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
-   *
-   * @baseline `Widely available`
-   * @widely_available_date 2018-03-30
-   * @newly_available_date 2015-09-30
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@supports
-   */
-  _supports?: {
-    css?: CSSObject;
-    query?: AnyString;
-  }[];
 }
 //#endregion
 export { AnimationProperty, AspectRatioProperty, AtRuleStyleProperty, BlurProperty, BorderProperty, ColorProperty, DurationProperty, EasingProperty, FontProperty, GradientProperty, KeyframeProperty, PseudoStyleProperty, RadiusProperty, ShadowProperty, ShorthandStyleProperty, SizeProperty, SpaceProperty, StandardStyleProperty, StyleProperty, StyleProps, StyledStyleProperty, Styles, VariableLengthProperty, ZIndexProperty, animationProperties, aspectRatioProperties, atRuleStyles, blurProperties, borderProperties, colorProperties, durationProperties, easingProperties, fontProperties, gradientProperties, keyframeProperties, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styledStyles, styles, variableLengthProperties, zIndexProperties };

package/dist/types/core/css/utils.d.ts

@@ -6,11 +6,11 @@ import { CSSFunction } from "./css.js";
 
 //#region src/core/css/utils.d.ts
 interface TransformOptions {
+  system: System;
   css?: CSSFunction;
   fallback?: any;
   prev?: Dict;
   properties?: CSSProperties[];
-  system: System;
   theme?: UsageTheme;
 }
 interface Transform {

package/dist/types/core/generated-theme-tokens.types.d.ts

@@ -2,8 +2,8 @@ import { UsageThemeTokens } from "./system/index.types.js";
 
 //#region src/core/generated-theme-tokens.types.d.ts
 interface GeneratedThemeTokens extends UsageThemeTokens {
-  apply: never;
   animations: never;
+  apply: never;
   aspectRatios: "bronze" | "golden" | "landscape" | "portrait" | "silver" | "square" | "ultrawide" | "wide";
   blurs: "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl";
   borders: "lg" | "md" | "sm" | "xl" | "xs";

package/dist/types/core/system/breakpoint.d.ts

@@ -11,14 +11,14 @@ interface BreakpointQuery {
   query: string | undefined;
 }
 interface Breakpoints {
-  getQuery: (key: string) => string | undefined;
-  isResponsive: (obj: any, strict?: boolean) => boolean;
-  isResponsiveKey: (key: string) => boolean;
   keys: Breakpoint[];
   queries: BreakpointQuery[];
   queriesObj: {
     [key: string]: BreakpointQuery;
   };
+  getQuery: (key: string) => string | undefined;
+  isResponsive: (obj: any, strict?: boolean) => boolean;
+  isResponsiveKey: (key: string) => boolean;
 }
 declare function createBreakpoints(breakpoints?: DefineThemeBreakpointTokens, config?: BreakpointConfig): Breakpoints;
 //#endregion

package/dist/types/core/system/color-mode-provider.d.ts

@@ -1,17 +1,17 @@
 import { ColorMode, ColorModeWithSystem, ThemeConfig } from "./index.types.js";
 import { Storage } from "./storage-manager.js";
-import * as react894 from "react";
+import * as react242 from "react";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/core/system/color-mode-provider.d.ts
 interface ColorModeContext {
-  changeColorMode: (colorMode: ColorModeWithSystem) => void;
   colorMode: ColorMode;
-  forced?: boolean;
   internalColorMode: ColorModeWithSystem;
+  changeColorMode: (colorMode: ColorModeWithSystem) => void;
   toggleColorMode: () => void;
+  forced?: boolean;
 }
-declare const ColorModeContext: react894.Context<ColorModeContext>;
+declare const ColorModeContext: react242.Context<ColorModeContext>;
 interface ColorModeProviderProps extends PropsWithChildren {
   /**
    * The forced color mode.

package/dist/types/core/system/index.types.d.ts

@@ -167,6 +167,10 @@ interface LoadingConfig {
   loadingScheme?: LoadingScheme;
 }
 interface ThemeConfig {
+  /**
+   * The config of breakpoint.
+   */
+  breakpoint?: BreakpointConfig;
   /**
    * The config of the CSS.
    */
@@ -186,10 +190,6 @@ interface ThemeConfig {
      */
     varPrefix?: string;
   };
-  /**
-   * The config of breakpoint.
-   */
-  breakpoint?: BreakpointConfig;
   /**
    * The default color mode.
    * If `system`, the system will apply the color mode.
@@ -283,8 +283,8 @@ interface DefineThemeColorSchemeSemanticTokens {
 }
 type DefineThemeColorSemanticValue = [AnyString | ThemeTokens["colors"], AnyString | ThemeTokens["colors"]] | AnyString | ThemeTokens["colors"];
 interface DefineThemeColorSemanticToken {
-  base?: DefineThemeColorSemanticValue;
   [key: string]: any;
+  base?: DefineThemeColorSemanticValue;
   bg?: DefineThemeColorSemanticValue;
   contrast?: DefineThemeColorSemanticValue;
   default?: DefineThemeColorSemanticValue;
@@ -396,9 +396,9 @@ type ComponentCompound<Y$1 extends CSSObject | CSSSlotObject = CSSObject, M$1 ex
 }) & (string extends keyof H ? {} : {
   variant?: (keyof H)[] | keyof H | RegExp;
 }) & (string extends keyof M$1 ? {} : { [key in keyof M$1]?: Booleanish<keyof M$1[key]> | Booleanish<keyof M$1[key]>[] | RegExp }) & {
+  [key: string]: any;
   css: Y$1;
   colorScheme?: RegExp | ThemeTokens["colorSchemes"] | ThemeTokens["colorSchemes"][];
-  [key: string]: any;
   layer?: LayerScheme;
 };
 interface ComponentStyle<Y$1 extends CSSPropObject = CSSPropObject, M$1 extends CSSModifierObject = CSSModifierObject, D$1 extends CSSModifierObject = CSSModifierObject> extends ComponentSharedStyle<Y$1, M$1, D$1> {

package/dist/types/core/system/layer.d.ts

@@ -4,9 +4,9 @@ import { LayerScheme, LayersConfig } from "./index.types.js";
 //#region src/core/system/layer.d.ts
 interface Layers {
   atRule: string | undefined;
-  getAtRule?: (name: LayerScheme) => string;
   names: string[];
   wrap: (name: LayerScheme, style?: (() => Dict) | Dict) => Dict;
+  getAtRule?: (name: LayerScheme) => string;
 }
 declare const defaultLayers: Layers;
 declare function createLayers(layers?: false | LayersConfig): Layers;

package/dist/types/core/system/storage-script.d.ts

@@ -1,13 +1,13 @@
 import { ColorModeWithSystem, ThemeScheme } from "./index.types.js";
 import { Storage } from "./storage-manager.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/core/system/storage-script.d.ts
 interface StorageScriptProps<Y extends string> {
-  key?: string;
-  type?: Storage;
   defaultValue?: Y;
+  key?: string;
   nonce?: string;
+  type?: Storage;
 }
 declare function getStorageScript<Y extends string>(type: "colorMode" | "themeScheme", defaultKey: string): ({
   key,
@@ -17,11 +17,11 @@ declare function getStorageScript<Y extends string>(type: "colorMode" | "themeSc
 declare function ColorModeScript({
   nonce,
   ...rest
-}: StorageScriptProps<ColorModeWithSystem>): react_jsx_runtime5.JSX.Element;
+}: StorageScriptProps<ColorModeWithSystem>): react_jsx_runtime7.JSX.Element;
 declare function ThemeSchemeScript({
   nonce,
   ...rest
-}: StorageScriptProps<ThemeScheme>): react_jsx_runtime5.JSX.Element;
+}: StorageScriptProps<ThemeScheme>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { ColorModeScript, StorageScriptProps, ThemeSchemeScript, getStorageScript };
 //# sourceMappingURL=storage-script.d.ts.map

package/dist/types/core/system/styled.d.ts

@@ -3,17 +3,17 @@ import { CSSModifierObject, CSSPropObject } from "../css/index.types.js";
 import { As, StyledComponent } from "../components/index.types.js";
 import { ShouldForwardProp } from "../components/props.js";
 import "../components/index.js";
-import * as react895 from "react";
+import * as react243 from "react";
 
 //#region src/core/system/styled.d.ts
-declare const ColorSchemeContext: react895.Context<ColorScheme | undefined>, useColorSchemeContext: () => ColorScheme | undefined;
+declare const ColorSchemeContext: react243.Context<ColorScheme | undefined>, useColorSchemeContext: () => ColorScheme | undefined;
 interface StyledOptions<Y extends CSSPropObject = CSSPropObject, M extends CSSModifierObject = CSSModifierObject, D extends CSSModifierObject = CSSModifierObject, H extends number | string | symbol = string> extends Omit<ComponentStyle<Y, M, D>, "className"> {
-  name?: string;
-  target?: string;
   className?: ((system: System) => string) | string;
   displayName?: string;
   forwardAsChild?: boolean;
+  name?: string;
   shouldForwardProp?: boolean | ShouldForwardProp;
+  target?: string;
   forwardProps?: string[];
   transferProps?: H[];
 }