@yamada-ui/react 2.0.10-dev-20260301102815 → 2.1.0-dev-20260302130356

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

@@ -1,182 +1,56 @@
-import { Orientation } from "../../core/system/index.types.js";
-import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react64 from "react";
+import * as react59 from "react";
 import { RefObject } from "react";
-import { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelProps, PanelResizeHandleProps } from "react-resizable-panels";
+import { GroupImperativeHandle, GroupProps, LayoutStorage, PanelImperativeHandle, PanelProps, SeparatorProps, useDefaultLayout as useResizableLayout } from "react-resizable-panels";
 
 //#region src/components/resizable/use-resizable.d.ts
-interface ResizableContext extends Omit<UseResizableReturn, "getGroupProps" | "getRootProps"> {}
-declare const ResizableContext: react64.Context<ResizableContext>, useResizableContext: () => ResizableContext;
-interface ResizableStorage extends PanelGroupStorage {}
-interface ResizableGroupControl extends ImperativePanelGroupHandle {}
-interface ResizableItemControl extends ImperativePanelHandle {}
-interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "tagName"> {
-  /**
-   * The HTML element to render.
-   */
-  as?: keyof HTMLElementTagNameMap;
-  /**
-   * Ref of the resizable group callback.
-   */
-  ref?: RefObject<ResizableGroupControl>;
-}
-interface ResizableItemProps extends Omit<PanelProps, "tagName"> {
-  /**
-   * The HTML element to render.
-   */
-  as?: keyof HTMLElementTagNameMap;
-  /**
-   * Ref of the resizable item callback.
-   */
-  ref?: RefObject<ResizableItemControl>;
-}
-interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "tagName">, HTMLRefAttributes {
-  /**
-   * The HTML element to render.
-   */
-  as?: keyof HTMLElementTagNameMap;
-}
-interface UseResizableProps extends HTMLProps {
+interface ResizableContext extends Omit<UseResizableReturn, "getRootProps"> {}
+declare const ResizableContext: react59.Context<ResizableContext>, useResizableContext: () => ResizableContext;
+interface ResizableStorage extends LayoutStorage {}
+interface ResizableRootControl extends GroupImperativeHandle {}
+interface ResizableItemControl extends PanelImperativeHandle {}
+interface UseResizableProps extends HTMLProps, Omit<GroupProps, "color" | "content" | "elementRef" | "groupRef"> {
   /**
    * Ref of the resizable item callback.
    */
-  controlRef?: RefObject<null | ResizableGroupControl>;
-  /**
-   * If `true`, the resizable trigger will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Unit to resize by keyboard operation.
-   *
-   * @default 10
-   */
-  keyboardStep?: number;
-  /**
-   * The orientation of the resizable.
-   *
-   * @default 'horizontal'
-   */
-  orientation?: Orientation;
-  /**
-   * A callback that gets and sets a value in custom storage.
-   */
-  storage?: PanelGroupStorage;
-  /**
-   * Key of value saved in storage.
-   * By default, it is saved to `local storage`.
-   */
-  storageKey?: string;
-  /**
-   * Props for resizable component.
-   */
-  groupProps?: ResizableGroupProps;
-  /**
-   * The callback invoked when resizable items are resized.
-   */
-  onLayout?: PanelGroupOnLayout;
+  controlRef?: RefObject<null | ResizableRootControl>;
 }
 declare const useResizable: ({
-  id,
-  ref,
-  controlRef: controlRefProp,
+  controlRef,
   disabled,
-  keyboardStep,
   orientation,
-  storage,
-  storageKey,
-  groupProps,
-  onLayout,
   ...rest
 }?: UseResizableProps) => {
-  controlRef: RefObject<ResizableGroupControl | null>;
   disabled: boolean | undefined;
-  orientation: Orientation;
-  getGroupProps: PropGetter<ResizableGroupProps, undefined, PanelGroupProps>;
-  getRootProps: PropGetter<"div", undefined, undefined>;
+  groupRef: RefObject<GroupImperativeHandle | null>;
+  orientation: "horizontal" | "vertical";
+  getRootProps: PropGetter<GroupProps, undefined, undefined>;
 };
 type UseResizableReturn = ReturnType<typeof useResizable>;
-interface UseResizableItemProps extends HTMLProps, Pick<ResizableItemProps, "as"> {
-  /**
-   * The collapsed size of the resizable item.
-   */
-  collapsedSize?: number;
-  /**
-   * If `true`, the resizable item can be collapsed.
-   *
-   * @default false
-   */
-  collapsible?: boolean;
+interface UseResizableItemProps extends HTMLProps, Omit<PanelProps, "color" | "content" | "elementRef" | "panelRef"> {
   /**
    * Ref of the resizable item callback.
    */
   controlRef?: RefObject<null | ResizableItemControl>;
-  /**
-   * The initial size of the resizable item.
-   */
-  defaultSize?: number;
-  /**
-   * The maximum allowed value of the resizable item.
-   */
-  maxSize?: number;
-  /**
-   * The minimum allowed value of the resizable item.
-   */
-  minSize?: number;
-  /**
-   * Order for the resizable item.
-   */
-  order?: number;
-  /**
-   * The callback invoked when resizable item are collapsed.
-   */
-  onCollapse?: () => void;
-  /**
-   * The callback invoked when resizable item are expanded.
-   */
-  onExpand?: () => void;
-  /**
-   * The callback invoked when resizable item are resized.
-   */
-  onResize?: (size: number, prevSize: number | undefined) => void;
 }
 declare const useResizableItem: ({
-  id,
-  ref,
-  as,
   controlRef,
-  onCollapse,
-  onExpand,
-  onResize,
   ...rest
 }: UseResizableItemProps) => {
-  getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>;
+  panelRef: RefObject<PanelImperativeHandle | null>;
+  getItemProps: PropGetter<PanelProps, undefined, undefined>;
 };
 type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
-interface UseResizableTriggerProps extends HTMLProps, Pick<ResizableTriggerProps, "as"> {
-  /**
-   * If `true`, the resizable trigger will be disabled.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The callback invoked when resizable trigger are dragged.
-   */
-  onDragging?: (dragging: boolean) => void;
-}
+interface UseResizableTriggerProps extends HTMLProps, Omit<SeparatorProps, "color" | "content" | "elementRef"> {}
 declare const useResizableTrigger: ({
-  id,
-  ref,
-  as,
   disabled,
-  onDragging,
   ...rest
 }: UseResizableTriggerProps) => {
   getIconProps: PropGetter<"div", undefined, undefined>;
-  getTriggerProps: PropGetter<ResizableTriggerProps, undefined, PanelResizeHandleProps>;
+  getTriggerProps: PropGetter<SeparatorProps, undefined, undefined>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 //#endregion
-export { ResizableContext, ResizableGroupControl, ResizableItemControl, ResizableStorage, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };
+export { ResizableContext, ResizableItemControl, ResizableRootControl, ResizableStorage, UseResizableItemProps, UseResizableItemReturn, UseResizableProps, UseResizableReturn, UseResizableTriggerProps, UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger };
 //# sourceMappingURL=use-resizable.d.ts.map

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

@@ -2,11 +2,10 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { RippleStyle } from "./ripple.style.js";
 import { RippleOptions } from "./use-ripple.js";
 import "../../index.js";
-import * as react840 from "react";
+import * as react57 from "react";
 import { Key } from "react";
 
 //#region src/components/ripple/ripple.d.ts
@@ -26,7 +25,7 @@ interface RippleProps extends HTMLMotionProps<"span">, ThemeProps<RippleStyle> {
    */
   disabled?: boolean;
 }
-declare const RipplePropsContext: react840.Context<Partial<RippleProps> | undefined>, useRipplePropsContext: () => Partial<RippleProps> | undefined;
+declare const RipplePropsContext: react57.Context<Partial<RippleProps> | undefined>, useRipplePropsContext: () => Partial<RippleProps> | undefined;
 /**
  * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
  *

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

@@ -1,4 +1,4 @@
-import * as react839 from "react";
+import * as react56 from "react";
 import { Key, MouseEventHandler } from "react";
 
 //#region src/components/ripple/use-ripple.d.ts
@@ -18,7 +18,7 @@ declare const useRipple: <Y = HTMLElement>({
 }?: UseRippleProps<Y>) => {
   ripples: RippleOptions[];
   onClear: (key: Key) => void;
-  onClick: (ev: react839.MouseEvent<Y, MouseEvent>) => void;
+  onClick: (ev: react56.MouseEvent<Y, MouseEvent>) => void;
 };
 type UseRippleReturn = ReturnType<typeof useRipple>;
 //#endregion

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

@@ -2,10 +2,9 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { RotateStyle } from "./rotate.style.js";
 import "../../index.js";
-import * as react44 from "react";
+import * as react58 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/rotate/rotate.d.ts
@@ -63,7 +62,7 @@ interface RotateProps extends Omit<HTMLMotionProps<"button">, "onChange" | "rota
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const RotatePropsContext: react44.Context<Partial<RotateProps> | undefined>, useRotatePropsContext: () => Partial<RotateProps> | undefined;
+declare const RotatePropsContext: react58.Context<Partial<RotateProps> | undefined>, useRotatePropsContext: () => Partial<RotateProps> | undefined;
 /**
  * `Rotate` is an animation component that alternately rotates two elements as they switch.
  *

package/dist/types/components/saturation-slider/saturation-slider.d.ts

@@ -5,7 +5,7 @@ import "../../core/index.js";
 import { SaturationSliderStyle } from "./saturation-slider.style.js";
 import { UseSaturationSliderProps } from "./use-saturation-slider.js";
 import "../../index.js";
-import * as react61 from "react";
+import * as react1018 from "react";
 
 //#region src/components/saturation-slider/saturation-slider.d.ts
 interface SaturationSliderRootProps extends Merge<HTMLStyledProps, UseSaturationSliderProps>, ThemeProps<SaturationSliderStyle> {
@@ -22,7 +22,7 @@ interface SaturationSliderRootProps extends Merge<HTMLStyledProps, UseSaturation
    */
   trackProps?: SaturationSliderTrackProps;
 }
-declare const SaturationSliderPropsContext: react61.Context<Partial<SaturationSliderRootProps> | undefined>, useSaturationSliderPropsContext: () => Partial<SaturationSliderRootProps> | undefined;
+declare const SaturationSliderPropsContext: react1018.Context<Partial<SaturationSliderRootProps> | undefined>, useSaturationSliderPropsContext: () => Partial<SaturationSliderRootProps> | undefined;
 /**
  * `SaturationSlider` is a component used to allow the user to select a color saturation.
  *

package/dist/types/components/saturation-slider/use-saturation-slider.d.ts

@@ -1,8 +1,7 @@
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
-import * as react56 from "react";
+import * as react1016 from "react";
 
 //#region src/components/saturation-slider/use-saturation-slider.d.ts
 interface UseSaturationSliderProps extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref">, HTMLRefAttributes<"input">, FieldProps {
@@ -52,7 +51,7 @@ interface UseSaturationSliderProps extends Omit<HTMLProps, "defaultValue" | "onC
   onChangeStart?: (value: [number, number, number]) => void;
 }
 declare const useSaturationSlider: (props?: UseSaturationSliderProps) => {
-  setValue: react56.Dispatch<react56.SetStateAction<[number, number, number]>>;
+  setValue: react1016.Dispatch<react1016.SetStateAction<[number, number, number]>>;
   value: [number, number, number];
   getInputProps: PropGetter<"input", undefined, undefined>;
   getRootProps: PropGetter<"div", undefined, undefined>;

package/dist/types/components/scroll-area/scroll-area.d.ts

@@ -4,11 +4,11 @@ import "../../core/index.js";
 import { ScrollAreaStyle } from "./scroll-area.style.js";
 import { UseScrollAreaProps } from "./use-scroll-area.js";
 import "../../index.js";
-import * as react42 from "react";
+import * as react1014 from "react";
 
 //#region src/components/scroll-area/scroll-area.d.ts
 interface ScrollAreaProps extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}
-declare const ScrollAreaPropsContext: react42.Context<Partial<ScrollAreaProps> | undefined>, useScrollAreaPropsContext: () => Partial<ScrollAreaProps> | undefined;
+declare const ScrollAreaPropsContext: react1014.Context<Partial<ScrollAreaProps> | undefined>, useScrollAreaPropsContext: () => Partial<ScrollAreaProps> | undefined;
 /**
  * `ScrollArea` is a component that displays a customized scrollbar.
  *

package/dist/types/components/segmented-control/segmented-control.d.ts

@@ -2,10 +2,9 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { SegmentedControlStyle } from "./segmented-control.style.js";
 import { UseSegmentedControlItemProps, UseSegmentedControlProps } from "./use-segmented-control.js";
-import * as react41 from "react";
+import * as react1013 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/segmented-control/segmented-control.d.ts
@@ -28,7 +27,7 @@ interface SegmentedControlRootProps<Y extends string = string> extends Omit<HTML
    */
   itemProps?: SegmentedControlItemProps;
 }
-declare const SegmentedControlPropsContext: react41.Context<Partial<SegmentedControlRootProps<string>> | undefined>, useSegmentedControlPropsContext: () => Partial<SegmentedControlRootProps<string>> | undefined;
+declare const SegmentedControlPropsContext: react1013.Context<Partial<SegmentedControlRootProps<string>> | undefined>, useSegmentedControlPropsContext: () => Partial<SegmentedControlRootProps<string>> | undefined;
 /**
  * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
  *

package/dist/types/components/segmented-control/segmented-control.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js"
 import "../../index.js";
 
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
+declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "root", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -115,7 +115,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"indicator" | "item" | "root">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

package/dist/types/components/segmented-control/use-segmented-control.d.ts

@@ -2,15 +2,14 @@ import { Orientation } from "../../core/system/index.types.js";
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react32 from "react";
+import * as react1004 from "react";
 
 //#region src/components/segmented-control/use-segmented-control.d.ts
 interface SegmentedControlContext extends Omit<UseSegmentedControlReturn, "descendants" | "getRootProps"> {}
-declare const SegmentedControlContext: react32.Context<SegmentedControlContext>, useSegmentedControlContext: () => SegmentedControlContext;
-declare const SegmentedControlDescendantsContext: react32.Context<{
+declare const SegmentedControlContext: react1004.Context<SegmentedControlContext>, useSegmentedControlContext: () => SegmentedControlContext;
+declare const SegmentedControlDescendantsContext: react1004.Context<{
     active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
     destroy: () => void;
@@ -29,7 +28,7 @@ declare const SegmentedControlDescendantsContext: react32.Context<{
     prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
-    } | undefined) => react32.RefCallback<HTMLInputElement>;
+    } | undefined) => react1004.RefCallback<HTMLInputElement>;
     unregister: (node?: HTMLInputElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
     values: () => Descendant<HTMLInputElement, {}>[];
@@ -55,12 +54,12 @@ declare const SegmentedControlDescendantsContext: react32.Context<{
       prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
-      } | undefined) => react32.RefCallback<HTMLInputElement>;
+      } | undefined) => react1004.RefCallback<HTMLInputElement>;
       unregister: (node?: HTMLInputElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
       values: () => Descendant<HTMLInputElement, {}>[];
     };
-    register: react32.RefCallback<HTMLInputElement>;
+    register: react1004.RefCallback<HTMLInputElement>;
   }, useSegmentedControlDescendants: () => {
     active: (target?: HTMLInputElement | Descendant<HTMLInputElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
@@ -80,7 +79,7 @@ declare const SegmentedControlDescendantsContext: react32.Context<{
     prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
-    } | undefined) => react32.RefCallback<HTMLInputElement>;
+    } | undefined) => react1004.RefCallback<HTMLInputElement>;
     unregister: (node?: HTMLInputElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
     values: () => Descendant<HTMLInputElement, {}>[];
@@ -153,7 +152,7 @@ declare const useSegmentedControl: <Y extends string = string>({
     prevValue: (indexOrNode: number | HTMLInputElement | Descendant<HTMLInputElement, {}> | null, loop?: boolean) => Descendant<HTMLInputElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLInputElement) => boolean) | undefined;
-    } | undefined) => react32.RefCallback<HTMLInputElement>;
+    } | undefined) => react1004.RefCallback<HTMLInputElement>;
     unregister: (node?: HTMLInputElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLInputElement | null) => Descendant<HTMLInputElement, {}> | undefined;
     values: () => Descendant<HTMLInputElement, {}>[];
@@ -161,7 +160,7 @@ declare const useSegmentedControl: <Y extends string = string>({
   disabled: boolean | undefined;
   orientation: Orientation;
   readOnly: boolean | undefined;
-  setValue: react32.Dispatch<react32.SetStateAction<Y>>;
+  setValue: react1004.Dispatch<react1004.SetStateAction<Y>>;
   value: Y;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -2,16 +2,14 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverContentProps, PopupAnimationProps } from "../popover/popover.js";
-import "../popover/index.js";
 import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
-import "../input/index.js";
 import { SelectStyle } from "./select.style.js";
 import { UseSelectOptionProps, UseSelectProps } from "./use-select.js";
 import "../../index.js";
-import * as react30 from "react";
+import * as react1003 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/select/select.d.ts
@@ -59,7 +57,7 @@ interface SelectRootProps<Multiple extends boolean = false> extends Omit<HTMLSty
    */
   rootProps?: InputGroupRootProps;
 }
-declare const SelectPropsContext: react30.Context<Partial<SelectRootProps<false>> | undefined>, useSelectPropsContext: () => Partial<SelectRootProps<false>> | undefined;
+declare const SelectPropsContext: react1003.Context<Partial<SelectRootProps<false>> | undefined>, useSelectPropsContext: () => Partial<SelectRootProps<false>> | undefined;
 /**
  * `Select` is a component used for allowing a user to choose one option from a list.
  *

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

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 
 //#region src/components/select/select.style.d.ts
-declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText", {
+declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText", {
   /**
    * If `true`, wrap the value text.
    *
@@ -393,6 +393,12 @@ declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "
       border?: "1px solid transparent" | undefined;
       focusRingColor?: "{focus-border-color}" | undefined;
       focusVisibleRing?: "inside" | undefined;
+      _container?: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[] | undefined;
       _invalid?: {
         borderColor: "{error-border-color}";
         focusRingColor: "{error-border-color}";
@@ -464,6 +470,12 @@ declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "
       border?: "1px solid {colors.border}" | undefined;
       focusRingColor?: "{focus-border-color}" | undefined;
       focusVisibleRing?: "inside" | undefined;
+      _container?: {
+        css: {
+          bg: "bg";
+        };
+        style: string;
+      }[] | undefined;
       _invalid?: {
         borderColor: "{error-border-color}";
         focusRingColor: "{error-border-color}";

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

@@ -1,13 +1,11 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
-import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { UsePopoverProps } from "../popover/use-popover.js";
-import "../popover/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react26 from "react";
+import * as react999 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/select/use-select.d.ts
@@ -21,7 +19,7 @@ interface SelectItemRender {
   (props: SelectRenderProps): ReactNode;
 }
 interface SelectContext extends Pick<UseSelectReturn, "max" | "value"> {}
-declare const SelectContext: react26.Context<SelectContext>, useSelectContext: () => SelectContext;
+declare const SelectContext: react999.Context<SelectContext>, useSelectContext: () => SelectContext;
 interface UseSelectProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "value">, FieldProps {
   /**
    * The initial value of the select.
@@ -104,7 +102,7 @@ declare const useSelect: <Multiple extends boolean = false>(props?: UseSelectPro
     lastValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react26.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react999.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -115,7 +113,7 @@ declare const useSelect: <Multiple extends boolean = false>(props?: UseSelectPro
   max: number | undefined;
   open: boolean;
   placeholder: string | undefined;
-  setValue: react26.Dispatch<react26.SetStateAction<Multiple extends true ? string[] : string>>;
+  setValue: react999.Dispatch<react999.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

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

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { SeparatorStyle } from "./separator.style.js";
 import "../../index.js";
-import * as react31 from "react";
+import * as react998 from "react";
 
 //#region src/components/separator/separator.d.ts
 interface SeparatorProps extends HTMLStyledProps<"hr">, ThemeProps<SeparatorStyle> {}
-declare const SeparatorPropsContext: react31.Context<Partial<SeparatorProps> | undefined>, useSeparatorPropsContext: () => Partial<SeparatorProps> | undefined;
+declare const SeparatorPropsContext: react998.Context<Partial<SeparatorProps> | undefined>, useSeparatorPropsContext: () => Partial<SeparatorProps> | undefined;
 /**
  * `Separator` is a component that represents a division between elements.
  *

package/dist/types/components/simple-grid/simple-grid.d.ts

@@ -3,10 +3,9 @@ import { CSSProps, StyleValue } from "../../core/css/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { GridProps } from "../grid/grid.js";
-import "../grid/index.js";
 import { SimpleGridStyle } from "./simple-grid.style.js";
 import "../../index.js";
-import * as react1019 from "react";
+import * as react997 from "react";
 
 //#region src/components/simple-grid/simple-grid.d.ts
 interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, "columns">, ThemeProps<SimpleGridStyle> {
@@ -20,7 +19,7 @@ interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridSt
    */
   minChildWidth?: CSSProps["minWidth"];
 }
-declare const SimpleGridPropsContext: react1019.Context<Partial<SimpleGridProps> | undefined>, useSimpleGridPropsContext: () => Partial<SimpleGridProps> | undefined;
+declare const SimpleGridPropsContext: react997.Context<Partial<SimpleGridProps> | undefined>, useSimpleGridPropsContext: () => Partial<SimpleGridProps> | undefined;
 /**
  * `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.
  *

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

@@ -4,7 +4,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { SkeletonStyle } from "./skeleton.style.js";
 import "../../index.js";
-import * as react1020 from "react";
+import * as react67 from "react";
 
 //#region src/components/skeleton/skeleton.d.ts
 interface SkeletonProps extends HTMLStyledProps, ThemeProps<SkeletonStyle> {
@@ -31,7 +31,7 @@ interface SkeletonProps extends HTMLStyledProps, ThemeProps<SkeletonStyle> {
    */
   startColor?: CSSProps["color"];
 }
-declare const SkeletonPropsContext: react1020.Context<Partial<SkeletonProps> | undefined>, useSkeletonPropsContext: () => Partial<SkeletonProps> | undefined;
+declare const SkeletonPropsContext: react67.Context<Partial<SkeletonProps> | undefined>, useSkeletonPropsContext: () => Partial<SkeletonProps> | undefined;
 /**
  * `Skeleton` is a component that acts as a placeholder until content is loaded.
  *

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

@@ -2,16 +2,15 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { SlideStyle } from "./slide.style.js";
 import "../../index.js";
-import * as react1018 from "react";
+import * as react1015 from "react";
 import { Variants } from "motion/react";
 
 //#region src/components/slide/slide.d.ts
 declare const slideVariants: Variants;
 interface SlideProps extends WithTransitionProps<HTMLMotionProps$1>, ThemeProps<SlideStyle> {}
-declare const SlidePropsContext: react1018.Context<Partial<SlideProps> | undefined>, useSlidePropsContext: () => Partial<SlideProps> | undefined;
+declare const SlidePropsContext: react1015.Context<Partial<SlideProps> | undefined>, useSlidePropsContext: () => Partial<SlideProps> | undefined;
 /**
  * `Slide` is a component that shows or hides an element from the corners of the page.
  *

package/dist/types/components/slide-fade/slide-fade.d.ts

@@ -2,10 +2,9 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { SlideFadeStyle } from "./slide-fade.style.js";
 import "../../index.js";
-import * as react43 from "react";
+import * as react996 from "react";
 import { Variants } from "motion/react";
 
 //#region src/components/slide-fade/slide-fade.d.ts
@@ -30,7 +29,7 @@ interface SlideFadeProps extends WithTransitionProps<HTMLMotionProps$1>, ThemePr
    */
   reverse?: boolean;
 }
-declare const SlideFadePropsContext: react43.Context<Partial<SlideFadeProps> | undefined>, useSlideFadePropsContext: () => Partial<SlideFadeProps> | undefined;
+declare const SlideFadePropsContext: react996.Context<Partial<SlideFadeProps> | undefined>, useSlideFadePropsContext: () => Partial<SlideFadeProps> | undefined;
 /**
  * `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.
  *