@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

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 react81 from "react";
+import * as react36 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: react81.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: react36.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

@@ -6,7 +6,7 @@ import "../motion/index.js";
 import { RippleStyle } from "./ripple.style.js";
 import { RippleOptions } from "./use-ripple.js";
 import "../../index.js";
-import * as react80 from "react";
+import * as react35 from "react";
 import { Key } from "react";
 
 //#region src/components/ripple/ripple.d.ts
@@ -26,7 +26,7 @@ interface RippleProps extends HTMLMotionProps<"span">, ThemeProps<RippleStyle> {
    */
   disabled?: boolean;
 }
-declare const RipplePropsContext: react80.Context<Partial<RippleProps> | undefined>, useRipplePropsContext: () => Partial<RippleProps> | undefined;
+declare const RipplePropsContext: react35.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 react79 from "react";
+import * as react34 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: react79.MouseEvent<Y, MouseEvent>) => void;
+  onClick: (ev: react34.MouseEvent<Y, MouseEvent>) => void;
 };
 type UseRippleReturn = ReturnType<typeof useRipple>;
 //#endregion

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

@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { RotateStyle } from "./rotate.style.js";
 import "../../index.js";
-import * as react78 from "react";
+import * as react33 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/rotate/rotate.d.ts
@@ -63,7 +63,7 @@ interface RotateProps extends Omit<HTMLMotionProps<"button">, "onChange" | "rota
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const RotatePropsContext: react78.Context<Partial<RotateProps> | undefined>, useRotatePropsContext: () => Partial<RotateProps> | undefined;
+declare const RotatePropsContext: react33.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 react77 from "react";
+import * as react1044 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: react77.Context<Partial<SaturationSliderRootProps> | undefined>, useSaturationSliderPropsContext: () => Partial<SaturationSliderRootProps> | undefined;
+declare const SaturationSliderPropsContext: react1044.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

@@ -2,7 +2,7 @@ import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
 import "../field/index.js";
-import * as react75 from "react";
+import * as react1046 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 +52,7 @@ interface UseSaturationSliderProps extends Omit<HTMLProps, "defaultValue" | "onC
   onChangeStart?: (value: [number, number, number]) => void;
 }
 declare const useSaturationSlider: (props?: UseSaturationSliderProps) => {
-  setValue: react75.Dispatch<react75.SetStateAction<[number, number, number]>>;
+  setValue: react1046.Dispatch<react1046.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 react73 from "react";
+import * as react32 from "react";
 
 //#region src/components/scroll-area/scroll-area.d.ts
 interface ScrollAreaProps extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}
-declare const ScrollAreaPropsContext: react73.Context<Partial<ScrollAreaProps> | undefined>, useScrollAreaPropsContext: () => Partial<ScrollAreaProps> | undefined;
+declare const ScrollAreaPropsContext: react32.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

@@ -5,7 +5,7 @@ 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 react72 from "react";
+import * as react1045 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/segmented-control/segmented-control.d.ts
@@ -28,7 +28,7 @@ interface SegmentedControlRootProps<Y extends string = string> extends Omit<HTML
    */
   itemProps?: SegmentedControlItemProps;
 }
-declare const SegmentedControlPropsContext: react72.Context<Partial<SegmentedControlRootProps<string>> | undefined>, useSegmentedControlPropsContext: () => Partial<SegmentedControlRootProps<string>> | undefined;
+declare const SegmentedControlPropsContext: react1045.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" | "item" | "indicator", {
+declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -115,7 +115,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indic
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

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

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

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

@@ -11,7 +11,7 @@ import "../input/index.js";
 import { SelectStyle } from "./select.style.js";
 import { UseSelectOptionProps, UseSelectProps } from "./use-select.js";
 import "../../index.js";
-import * as react62 from "react";
+import * as react31 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/select/select.d.ts
@@ -59,7 +59,7 @@ interface SelectRootProps<Multiple extends boolean = false> extends Omit<HTMLSty
    */
   rootProps?: InputGroupRootProps;
 }
-declare const SelectPropsContext: react62.Context<Partial<SelectRootProps<false>> | undefined>, useSelectPropsContext: () => Partial<SelectRootProps<false>> | undefined;
+declare const SelectPropsContext: react31.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" | "icon" | "separator" | "group" | "root" | "indicator" | "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

@@ -7,7 +7,7 @@ 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 react58 from "react";
+import * as react27 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/select/use-select.d.ts
@@ -21,7 +21,7 @@ interface SelectItemRender {
   (props: SelectRenderProps): ReactNode;
 }
 interface SelectContext extends Pick<UseSelectReturn, "max" | "value"> {}
-declare const SelectContext: react58.Context<SelectContext>, useSelectContext: () => SelectContext;
+declare const SelectContext: react27.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 +104,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) => react58.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react27.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -115,7 +115,7 @@ declare const useSelect: <Multiple extends boolean = false>(props?: UseSelectPro
   max: number | undefined;
   open: boolean;
   placeholder: string | undefined;
-  setValue: react58.Dispatch<react58.SetStateAction<Multiple extends true ? string[] : string>>;
+  setValue: react27.Dispatch<react27.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 react57 from "react";
+import * as react26 from "react";
 
 //#region src/components/separator/separator.d.ts
 interface SeparatorProps extends HTMLStyledProps<"hr">, ThemeProps<SeparatorStyle> {}
-declare const SeparatorPropsContext: react57.Context<Partial<SeparatorProps> | undefined>, useSeparatorPropsContext: () => Partial<SeparatorProps> | undefined;
+declare const SeparatorPropsContext: react26.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

@@ -6,7 +6,7 @@ import { GridProps } from "../grid/grid.js";
 import "../grid/index.js";
 import { SimpleGridStyle } from "./simple-grid.style.js";
 import "../../index.js";
-import * as react56 from "react";
+import * as react886 from "react";
 
 //#region src/components/simple-grid/simple-grid.d.ts
 interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, "columns">, ThemeProps<SimpleGridStyle> {
@@ -20,7 +20,7 @@ interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridSt
    */
   minChildWidth?: CSSProps["minWidth"];
 }
-declare const SimpleGridPropsContext: react56.Context<Partial<SimpleGridProps> | undefined>, useSimpleGridPropsContext: () => Partial<SimpleGridProps> | undefined;
+declare const SimpleGridPropsContext: react886.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 react55 from "react";
+import * as react956 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: react55.Context<Partial<SkeletonProps> | undefined>, useSkeletonPropsContext: () => Partial<SkeletonProps> | undefined;
+declare const SkeletonPropsContext: react956.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

@@ -5,13 +5,13 @@ import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../mo
 import "../motion/index.js";
 import { SlideStyle } from "./slide.style.js";
 import "../../index.js";
-import * as react50 from "react";
+import * as react955 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: react50.Context<Partial<SlideProps> | undefined>, useSlidePropsContext: () => Partial<SlideProps> | undefined;
+declare const SlidePropsContext: react955.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

@@ -5,7 +5,7 @@ import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../mo
 import "../motion/index.js";
 import { SlideFadeStyle } from "./slide-fade.style.js";
 import "../../index.js";
-import * as react48 from "react";
+import * as react954 from "react";
 import { Variants } from "motion/react";
 
 //#region src/components/slide-fade/slide-fade.d.ts
@@ -30,7 +30,7 @@ interface SlideFadeProps extends WithTransitionProps<HTMLMotionProps$1>, ThemePr
    */
   reverse?: boolean;
 }
-declare const SlideFadePropsContext: react48.Context<Partial<SlideFadeProps> | undefined>, useSlideFadePropsContext: () => Partial<SlideFadeProps> | undefined;
+declare const SlideFadePropsContext: react954.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.
  *

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

@@ -5,7 +5,7 @@ import "../../core/index.js";
 import { SliderStyle } from "./slider.style.js";
 import { UseSliderProps } from "./use-slider.js";
 import "../../index.js";
-import * as react1023 from "react";
+import * as react953 from "react";
 import { FC, ReactElement, ReactNode } from "react";
 
 //#region src/components/slider/slider.d.ts
@@ -75,7 +75,7 @@ interface SliderRootProps<Y extends [number, number] | number = number> extends
    */
   trackProps?: SliderTrackProps;
 }
-declare const SliderPropsContext: react1023.Context<Partial<SliderRootProps<number>> | undefined>, useSliderPropsContext: () => Partial<SliderRootProps<number>> | undefined;
+declare const SliderPropsContext: react953.Context<Partial<SliderRootProps<number>> | undefined>, useSliderPropsContext: () => Partial<SliderRootProps<number>> | undefined;
 /**
  * `Slider` is a component used for allowing users to select a value from a range.
  *

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

@@ -149,6 +149,16 @@ declare const sliderStyle: ComponentSlotStyle<"mark" | "track" | "range" | "root
     };
   };
 }, {
+  base: {
+    root: {
+      _container: {
+        css: {
+          "--track-fill": "colors.bg";
+        };
+        style: string;
+      }[];
+    };
+  };
   outline: {
     root: {
       "--indicator-fill": "colorScheme.solid";