@yamada-ui/react 2.0.10-dev-20260226095744 → 2.0.10-dev-20260227000634

package/dist/types/components/tag/tag.style.d.ts

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 
 //#region src/components/tag/tag.style.d.ts
-declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "root" | "endIcon" | "startIcon" | "closeButton", {
+declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "root" | "closeButton" | "endIcon" | "startIcon", {
   /**
    * If `true`, the tag is full rounded. Else, it'll be slightly round.
    *

package/dist/types/components/text/text.d.ts

@@ -4,7 +4,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { TextStyle } from "./text.style.js";
 import "../../index.js";
-import * as react113 from "react";
+import * as react186 from "react";
 
 //#region src/components/text/text.d.ts
 interface TextProps extends HTMLStyledProps<"p">, ThemeProps<TextStyle> {
@@ -21,7 +21,7 @@ interface TextProps extends HTMLStyledProps<"p">, ThemeProps<TextStyle> {
    */
   decoration?: CSSProps["textDecoration"];
 }
-declare const TextPropsContext: react113.Context<Partial<TextProps> | undefined>, useTextPropsContext: () => Partial<TextProps> | undefined;
+declare const TextPropsContext: react186.Context<Partial<TextProps> | undefined>, useTextPropsContext: () => Partial<TextProps> | undefined;
 /**
  * `Text` is a component that represents a paragraph of text. By default, it renders a `p` element.
  *

package/dist/types/components/textarea/textarea.d.ts

@@ -2,15 +2,17 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
+import "../field/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
+import "../input/index.js";
 import { TextareaStyle } from "./textarea.style.js";
 import { UseTextareaProps } from "./use-textarea.js";
 import "../../index.js";
-import * as react110 from "react";
+import * as react176 from "react";
 
 //#region src/components/textarea/textarea.d.ts
 interface TextareaProps extends HTMLStyledProps<"textarea">, ThemeProps<TextareaStyle>, UseInputBorderProps, FieldProps, UseTextareaProps {}
-declare const TextareaPropsContext: react110.Context<Partial<TextareaProps> | undefined>, useTextareaPropsContext: () => Partial<TextareaProps> | undefined;
+declare const TextareaPropsContext: react176.Context<Partial<TextareaProps> | undefined>, useTextareaPropsContext: () => Partial<TextareaProps> | undefined;
 /**
  * `Textarea` is a component used to obtain multi-line text input.
  *

package/dist/types/components/textarea/use-autosize.d.ts

@@ -1,6 +1,6 @@
 import { PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react111 from "react";
+import * as react177 from "react";
 
 //#region src/components/textarea/use-autosize.d.ts
 interface UseAutosizeProps {
@@ -28,7 +28,7 @@ declare const useAutosize: ({
   maxRows,
   minRows
 }?: UseAutosizeProps) => {
-  ref: react111.RefObject<HTMLTextAreaElement | null>;
+  ref: react177.RefObject<HTMLTextAreaElement | null>;
   getTextareaProps: PropGetter<"textarea", undefined, undefined>;
   onResizeTextarea: () => void;
 };

package/dist/types/components/timeline/timeline.d.ts

@@ -4,8 +4,8 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { TimelineStyle } from "./timeline.style.js";
 import "../../index.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-import * as react81 from "react";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react175 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/timeline/timeline.d.ts
@@ -59,7 +59,7 @@ interface TimelineRootProps extends HTMLStyledProps<"ul">, ThemeProps<TimelineSt
    */
   separatorWidth?: CSSProps["width"];
 }
-declare const TimelinePropsContext: react81.Context<Partial<TimelineRootProps> | undefined>, useTimelinePropsContext: () => Partial<TimelineRootProps> | undefined;
+declare const TimelinePropsContext: react175.Context<Partial<TimelineRootProps> | undefined>, useTimelinePropsContext: () => Partial<TimelineRootProps> | undefined;
 /**
  * `Timeline` is a component that is used to display a list of events in chronological order.
  *
@@ -70,7 +70,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector", {
   align: {
     center: {
       content: {
@@ -221,7 +221,7 @@ declare const TimelineRoot: Component<({
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector">>>, keyof TimelineRootProps>) => react_jsx_runtime5.JSX.Element, TimelineRootProps>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector">>>, keyof TimelineRootProps>) => react_jsx_runtime9.JSX.Element, TimelineRootProps>;
 interface TimelineItemProps extends HTMLStyledProps<"li"> {
   /**
    * The index of the timeline item.

package/dist/types/components/timeline/timeline.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js"
 import "../../index.js";
 
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector", {
   /**
    * The alignment of the timeline.
    *
@@ -169,7 +169,7 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "item" | "
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector">>>;
 type TimelineStyle = typeof timelineStyle;
 //#endregion
 export { TimelineStyle, timelineStyle };

package/dist/types/components/toggle/toggle-group.d.ts

@@ -2,12 +2,12 @@ import { ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js"
 import { GenericsComponent } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { GroupProps } from "../group/group.js";
+import "../group/index.js";
 import { ToggleStyle } from "./toggle.style.js";
 import { UseToggleGroupProps } from "./use-toggle-group.js";
 import { ReactElement } from "react";
 
 //#region src/components/toggle/toggle-group.d.ts
-
 /**
  * `ToggleGroup` is a set of two-state buttons that can be toggled on or off.
  *

package/dist/types/components/toggle/toggle.d.ts

@@ -4,17 +4,19 @@ import { As, Component, GenericsComponent } from "../../core/components/index.ty
 import { ComponentOptions, ComponentSlot, ComponentSlotName, SuperProps, UseComponentPropsOptions } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
+import "../input/index.js";
 import { IconButtonProps } from "../button/icon-button.js";
+import "../button/index.js";
 import { ToggleStyle } from "./toggle.style.js";
 import { UseToggleProps } from "./use-toggle.js";
 import "../../index.js";
-import * as react96 from "react";
+import * as react168 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils1 from "@yamada-ui/utils";
+import * as _yamada_ui_utils11 from "@yamada-ui/utils";
 
 //#region src/components/toggle/toggle.d.ts
 interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils1.Dict = _yamada_ui_utils1.Dict<any>>(el: H | react96.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils11.Dict = _yamada_ui_utils11.Dict<any>>(el: H | react168.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {
@@ -173,7 +175,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react96.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, TogglePropsContext: react96.Context<Partial<ToggleProps<string>> | undefined>, useTogglePropsContext: () => Partial<ToggleProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils1.Dict = _yamada_ui_utils1.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+  }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => H extends "fragment" ? react168.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, TogglePropsContext: react168.Context<Partial<ToggleProps<string>> | undefined>, useTogglePropsContext: () => Partial<ToggleProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils11.Dict = _yamada_ui_utils11.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {
@@ -332,7 +334,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils1.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils11.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {

package/dist/types/components/toggle/use-toggle-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react101 from "react";
+import * as react173 from "react";
 import { RefObject } from "react";
 
 //#region src/components/toggle/use-toggle-group.d.ts
@@ -11,7 +11,7 @@ interface ToggleGroupContext {
   value?: string | string[];
   onChange?: <Y extends string = string>(value: undefined | Y) => void;
 }
-declare const ToggleGroupContext: react101.Context<ToggleGroupContext | undefined>, useToggleGroupContext: () => ToggleGroupContext | undefined;
+declare const ToggleGroupContext: react173.Context<ToggleGroupContext | undefined>, useToggleGroupContext: () => ToggleGroupContext | undefined;
 interface UseToggleGroupProps<Y extends string | string[] = string> extends Omit<HTMLProps, "defaultValue" | "onChange" | "value"> {
   /**
    * The initial value of the toggle button group.

package/dist/types/components/toggle/use-toggle.d.ts

@@ -2,7 +2,8 @@ import { Merge } from "../../utils/index.js";
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import * as react99 from "react";
+import "../field/index.js";
+import * as react171 from "react";
 
 //#region src/components/toggle/use-toggle.d.ts
 interface UseToggleProps<Y extends string = string> extends FieldProps, HTMLRefAttributes<"input">, Omit<HTMLProps<"button">, "onChange" | "ref" | "value"> {
@@ -33,7 +34,7 @@ interface UseToggleProps<Y extends string = string> extends FieldProps, HTMLRefA
 }
 declare const useToggle: <Y extends string = string>(props?: UseToggleProps<Y>) => {
   checked: boolean;
-  setChecked: react99.Dispatch<react99.SetStateAction<boolean>>;
+  setChecked: react171.Dispatch<react171.SetStateAction<boolean>>;
   getButtonProps: PropGetter<"button", undefined, Merge<HTMLProps<"button">, {
     "aria-label": string;
   }>>;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,11 +1,13 @@
 import { ThemeProps } from "../../core/system/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { PortalProps } from "../portal/portal.js";
 import { PopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { TooltipStyle } from "./tooltip.style.js";
 import { UseTooltipProps } from "./use-tooltip.js";
-import * as react105 from "react";
+import * as react174 from "react";
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/tooltip/tooltip.d.ts
@@ -29,7 +31,7 @@ interface TooltipProps extends UseTooltipProps, PropsWithChildren, PopupAnimatio
    */
   portalProps?: Omit<PortalProps, "children">;
 }
-declare const TooltipPropsContext: react105.Context<Partial<TooltipProps> | undefined>, useTooltipPropsContext: () => Partial<TooltipProps> | undefined;
+declare const TooltipPropsContext: react174.Context<Partial<TooltipProps> | undefined>, useTooltipPropsContext: () => Partial<TooltipProps> | undefined;
 /**
  * `Tooltip` is a component that displays short information, such as supplementary details for an element.
  *

package/dist/types/components/visually-hidden/visually-hidden.d.ts

@@ -1,11 +1,11 @@
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react93 from "react";
+import * as react167 from "react";
 
 //#region src/components/visually-hidden/visually-hidden.d.ts
 interface VisuallyHiddenProps extends HTMLStyledProps<"span"> {}
-declare const VisuallyHiddenPropsContext: react93.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
+declare const VisuallyHiddenPropsContext: react167.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
 /**
  * `VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
  *

package/dist/types/components/wrap/wrap.d.ts

@@ -2,13 +2,14 @@ import { ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js"
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FlexProps } from "../flex/flex.js";
+import "../flex/index.js";
 import { WrapStyle } from "./wrap.style.js";
 import "../../index.js";
-import * as react95 from "react";
+import * as react166 from "react";
 
 //#region src/components/wrap/wrap.d.ts
 interface WrapProps extends WithoutThemeProps<FlexProps, WrapStyle>, ThemeProps<WrapStyle> {}
-declare const WrapPropsContext: react95.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
+declare const WrapPropsContext: react166.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
 /**
  * `Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`.
  *

package/dist/types/core/components/create-component.d.ts

@@ -1,11 +1,9 @@
 import { AnyString, Dict, Merge } from "../../utils/index.js";
 import { ComponentSlotStyle, ComponentStyle, System, WithoutThemeProps } from "../system/index.types.js";
 import { StyledOptions } from "../system/styled.js";
-import "../system/index.js";
 import { CSSObject, CSSSlotObject } from "../css/index.types.js";
-import "../css/index.js";
 import { As, Component as Component$1, HTMLStyledProps } from "./index.types.js";
-import * as react26 from "react";
+import * as react154 from "react";
 import { FC, FunctionComponent } from "react";
 
 //#region src/core/components/create-component.d.ts
@@ -36,8 +34,8 @@ declare function createComponent<Y extends object = {}, M extends ComponentStyle
     className,
     ...options
   }?: ComponentOptions) => (...superProps: SuperProps<H>[]) => Component<D_1, H>;
-  ComponentContext: react26.Context<D>;
-  PropsContext: react26.Context<Partial<Y> | undefined>;
+  ComponentContext: react154.Context<D>;
+  PropsContext: react154.Context<Partial<Y> | undefined>;
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   withContext: <D_1 extends AsWithFragment = "div", H extends Y = Y, R extends keyof H = keyof H>(el: D_1 | FC<WithoutThemeProps<H, M, R>>, {
@@ -59,16 +57,16 @@ declare function createSlotComponent<Y extends object = {}, M extends ComponentS
     className,
     ...options
   }?: ComponentOptions) => (...superProps: SuperProps<R>[]) => Component<H, R>;
-  ComponentContext: react26.Context<D>;
-  PropsContext: react26.Context<Partial<Y> | undefined>;
-  StyleContext: react26.Context<CSSSlotObject<ComponentSlotName<M>>>;
+  ComponentContext: react154.Context<D>;
+  PropsContext: react154.Context<Partial<Y> | undefined>;
+  StyleContext: react154.Context<CSSSlotObject<ComponentSlotName<M>>>;
   useClassNames: () => {
     [key: string]: string;
   };
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   useStyleContext: () => CSSSlotObject<ComponentSlotName<M>>;
-  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react26.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
+  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react154.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
     name,
     className,
     withContext,

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

@@ -1,6 +1,5 @@
 import { Merge } from "../../utils/index.js";
 import { CSSProps } from "../css/index.types.js";
-import "../css/index.js";
 import * as React from "react";
 
 //#region src/core/components/index.types.d.ts

package/dist/types/core/components/use-component-style.d.ts

@@ -1,8 +1,6 @@
 import { Dict } from "../../utils/index.js";
 import { ComponentSlotStyle, ComponentStyle, WithoutThemeProps } from "../system/index.types.js";
-import "../system/index.js";
 import { CSSObject, CSSSlotObject } from "../css/index.types.js";
-import "../css/index.js";
 import { ComponentSlot, ComponentSlotName } from "./create-component.js";
 
 //#region src/core/components/use-component-style.d.ts

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

@@ -1,5 +1,4 @@
 import { System } from "../system/index.types.js";
-import "../system/index.js";
 
 //#region src/core/components/utils.d.ts
 declare function getDisplayName(name: string, fallback?: string): string;

package/dist/types/core/constant.d.ts

@@ -1,5 +1,4 @@
 import { LayersConfig } from "./system/index.types.js";
-import "./system/index.js";
 
 //#region src/core/constant.d.ts
 declare const COLOR_MODE_STORAGE_KEY = "color-mode";

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

@@ -1,5 +1,4 @@
 import { ThemeToken } from "../system/create-system.js";
-import "../system/index.js";
 import { Transform } from "./utils.js";
 
 //#region src/core/css/calc.d.ts

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

@@ -1,5 +1,4 @@
 import { ThemeToken } from "../system/create-system.js";
-import "../system/index.js";
 import { display } from "./display.js";
 import { colorScheme } from "./color-scheme.js";
 import { CSSProperties } from "./index.types.js";

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

@@ -1,6 +1,5 @@
 import { Dict } from "../../utils/index.js";
 import { System, UsageTheme } from "../system/index.types.js";
-import "../system/index.js";
 import { CSSObjectOrFunction } from "./index.types.js";
 import { StyleConfig } from "./config.js";
 

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

@@ -1,6 +1,5 @@
 import { AnyString } from "../../utils/index.js";
 import { Breakpoint, KeyframeIdent, System, ThemePath, ThemeTokens } from "../system/index.types.js";
-import "../system/index.js";
 import { AnySelector, ConditionProperty, ConditionProps } from "./conditions.js";
 import { StyleProps } from "./styles.js";
 import * as CSS from "csstype";

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

@@ -1,6 +1,5 @@
 import { AnyString } from "../../utils/index.js";
 import { ColorScheme, ThemeTokens } from "../system/index.types.js";
-import "../system/index.js";
 import { display } from "./display.js";
 import { colorScheme } from "./color-scheme.js";
 import { CSSObject, StyleValueWithCondition } from "./index.types.js";
@@ -584,6 +583,7 @@ declare const standardStyles: {
     readonly transform: Transform;
   };
   readonly floodOpacity: true;
+  readonly flowTolerance: true;
   readonly focusRing: {
     readonly transform: Transform;
   };
@@ -3009,6 +3009,7 @@ declare const styles: {
     readonly transform: Transform;
   };
   readonly floodOpacity: true;
+  readonly flowTolerance: true;
   readonly focusRing: {
     readonly transform: Transform;
   };
@@ -4582,7 +4583,7 @@ interface StyleProps {
    *
    * @baseline `Limited available`
    *
-   * @see https://drafts.csswg.org/css-inline/#baseline-shift-property
+   * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/baseline-shift
    */
   baselineShift?: StyleValueWithCondition<CSS.Property.BaselineShift>;
   /**
@@ -7106,6 +7107,16 @@ interface StyleProps {
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flood-opacity
    */
   floodOpacity?: StyleValueWithCondition<CSS.Property.FloodOpacity>;
+  /**
+   * ### flow-tolerance
+   *
+   * The CSS `flow-tolerance` property.
+   *
+   * @see https://drafts.csswg.org/css-grid-3/#propdef-flow-tolerance
+   *
+   * @experimental
+   */
+  flowTolerance?: StyleValueWithCondition<AnyString>;
   /**
    * The focus ring is used to identify the currently focused element.
    */
@@ -11656,7 +11667,7 @@ interface StyleProps {
    * The <code>text-wrap</code> CSS property sets how lines break in text that overflows the container. It is a shorthand for <code>text-wrap-style</code> and <code>text-wrap-mode</code>.
    *
    * @baseline `Newly available`
-   * @newly_available_date 2024-03-19
+   * @newly_available_date 2024-10-17
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap
    */
@@ -11664,7 +11675,7 @@ interface StyleProps {
   /**
    * ### text-wrap-mode
    *
-   * The <code>text-wrap-mode</code> CSS property sets whether lines may wrap with the values <code>wrap</code> and <code>nowrap</code>. It is a longhand property for both <code>white-space</code> and <code>text-wrap</code>.
+   * The <code>text-wrap</code> CSS property sets how lines break in text that overflows the container. It is a shorthand for <code>text-wrap-style</code> and <code>text-wrap-mode</code>.
    *
    * @baseline `Newly available`
    * @newly_available_date 2024-10-17
@@ -11675,9 +11686,10 @@ interface StyleProps {
   /**
    * ### text-wrap-style
    *
-   * The <code>text-wrap-style</code> CSS property sets how lines break in text that overflows the container. It can also be set with the <code>text-wrap</code> shorthand.
+   * The <code>text-wrap</code> CSS property sets how lines break in text that overflows the container. It is a shorthand for <code>text-wrap-style</code> and <code>text-wrap-mode</code>.
    *
-   * @baseline `Limited available`
+   * @baseline `Newly available`
+   * @newly_available_date 2024-10-17
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap-style
    */

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

@@ -1,5 +1,4 @@
 import { ThemeToken } from "../system/create-system.js";
-import "../system/index.js";
 import { Transform } from "./utils.js";
 
 //#region src/core/css/token.d.ts

package/dist/types/core/css/use-css.d.ts

@@ -1,5 +1,4 @@
 import { StyledTheme, System, UsageTheme } from "../system/index.types.js";
-import "../system/index.js";
 import { CSSObject, CSSObjectOrFunction } from "./index.types.js";
 
 //#region src/core/css/use-css.d.ts

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

@@ -1,9 +1,7 @@
 import { Dict } from "../../utils/index.js";
 import { System, UsageTheme } from "../system/index.types.js";
 import { ThemeToken } from "../system/create-system.js";
-import "../system/index.js";
 import { CSSProperties } from "./index.types.js";
-import "./config.js";
 import { CSSFunction } from "./css.js";
 
 //#region src/core/css/utils.d.ts

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

@@ -1,5 +1,4 @@
 import { UsageThemeTokens } from "./system/index.types.js";
-import "./system/index.js";
 
 //#region src/core/generated-theme-tokens.types.d.ts
 interface GeneratedThemeTokens extends UsageThemeTokens {

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

@@ -15,7 +15,6 @@ import { GlobalStyles, ThemeProvider, ThemeProviderProps, getPreventTransition,
 import { getColorModeValue, useColorModeValue } from "./system/use-color-mode-value.js";
 import { UseSystemColorModeProps, useSystemColorMode } from "./system/use-system-color-mode.js";
 import { CreateVars, createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr } from "./system/var.js";
-import "./system/index.js";
 import { AnySelector, AttributeProperty, AttributeProps, Attributes, ConditionProperty, ConditionProps, ConditionSelector, Conditions, GroupAttributeProperty, GroupAttributeProps, GroupAttributes, PeerAttributeProperty, PeerAttributeProps, PeerAttributes, PseudoClassProperty, PseudoClassProps, PseudoClasses, PseudoElementProperty, PseudoElementProps, PseudoElements, attributeProperties, attributeSelectors, attributes, conditionProperties, conditionSelectors, conditions, getCondition, groupAttributeProperties, groupAttributeSelectors, groupAttributes, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements } from "./css/conditions.js";
 import { display } from "./css/display.js";
 import { 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 } from "./css/styles.js";
@@ -30,7 +29,6 @@ import { animation, injectKeyframes, keyframes } from "./css/animation.js";
 import { mergeCSS } from "./css/merge-css.js";
 import { getCSS, useCSS } from "./css/use-css.js";
 import { useInjectVarsIntoCss, useInjectVarsIntoProps } from "./css/use-inject-vars.js";
-import "./css/index.js";
 import { As, Component, ComponentArgs, DOMElement, GenericsComponent, HTMLElementProps, HTMLProps, HTMLRefAttributes, HTMLStyledProps, HTMLStyledPropsWithoutAs, HTMLStyledPropsWithoutRef, OmitProps, PropGetter, RequiredPropGetter, StyledComponent, StyledProps, WithoutAs, WithoutRef } from "./components/index.types.js";
 import { ComponentOptions, ComponentSlot, ComponentSlotName, ComponentWithContextOptions, InitialProps, SuperProps, SuperWithoutThemeProps, UseComponentPropsOptions, createComponent, createSlotComponent } from "./components/create-component.js";
 import { UseComponentSlotStyleOptions, UseComponentStyleOptions, getSlotClassName, mergeSlotCSS, useComponentSlotStyle, useComponentStyle } from "./components/use-component-style.js";

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

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

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

@@ -1,6 +1,5 @@
 import { ComponentSlotStyle, ComponentStyle, DefineThemeAnimationTokens, DefineThemeBreakpointTokens, DefineThemeColorSchemeSemanticTokens, DefineThemeColorSemanticTokens, DefineThemeKeyframeTokens, DefineThemeSchemeTokens, DefineThemeTokens, ThemeConfig, UsageTheme } from "./index.types.js";
 import { CSSAnimationObject, CSSModifierObject, CSSObject, CSSPropObject, CSSSlotObject } from "../css/index.types.js";
-import "../css/index.js";
 
 //#region src/core/system/config.d.ts
 interface DefineConfig {

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

@@ -1,7 +1,6 @@
 import { ComponentStyle, ThemeProps } from "./index.types.js";
 import { StyledOptions } from "./styled.js";
 import { CSSModifierObject, CSSPropObject } from "../css/index.types.js";
-import "../css/index.js";
 import { As, DOMElement, StyledComponent } from "../components/index.types.js";
 import "../components/index.js";
 import { FC } from "react";

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

@@ -4,7 +4,6 @@ import { GeneratedThemeTokens } from "../generated-theme-tokens.types.js";
 import { Layers } from "./layer.js";
 import { Breakpoints } from "./breakpoint.js";
 import { CSSAnimationObject, CSSModifierObject, CSSObject, CSSPropObject, CSSSlotObject, StyleValue, StyleValueWithCondition } from "../css/index.types.js";
-import "../css/index.js";
 import { RefObject } from "react";
 
 //#region src/core/system/index.types.d.ts

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

@@ -1,6 +1,6 @@
 import { ColorModeWithSystem, ThemeScheme } from "./index.types.js";
 import { Storage } from "./storage-manager.js";
-import * as react_jsx_runtime2 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> {
@@ -17,11 +17,11 @@ declare function getStorageScript<Y extends string>(type: "colorMode" | "themeSc
 declare function ColorModeScript({
   nonce,
   ...rest
-}: StorageScriptProps<ColorModeWithSystem>): react_jsx_runtime2.JSX.Element;
+}: StorageScriptProps<ColorModeWithSystem>): react_jsx_runtime7.JSX.Element;
 declare function ThemeSchemeScript({
   nonce,
   ...rest
-}: StorageScriptProps<ThemeScheme>): react_jsx_runtime2.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

@@ -1,13 +1,12 @@
 import { ColorScheme, ComponentStyle, System } from "./index.types.js";
 import { CSSModifierObject, CSSPropObject } from "../css/index.types.js";
-import "../css/index.js";
 import { As, StyledComponent } from "../components/index.types.js";
 import { ShouldForwardProp } from "../components/props.js";
 import "../components/index.js";
-import * as react35 from "react";
+import * as react161 from "react";
 
 //#region src/core/system/styled.d.ts
-declare const ColorSchemeContext: react35.Context<ColorScheme | undefined>, useColorSchemeContext: () => ColorScheme | undefined;
+declare const ColorSchemeContext: react161.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"> {
   className?: ((system: System) => string) | string;
   displayName?: string;

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

@@ -1,10 +1,10 @@
 import { System, ThemeConfig, UsageTheme } from "./index.types.js";
-import * as react36 from "react";
+import * as react162 from "react";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/core/system/system-provider.d.ts
 interface SystemContext extends System {}
-declare const SystemContext: react36.Context<SystemContext>;
+declare const SystemContext: react162.Context<SystemContext>;
 interface SystemProviderProps extends PropsWithChildren {
   /**
    * The config of the yamada ui.