@yamada-ui/react 2.1.8-dev-20260407030626 → 2.1.8-dev-20260407054700

package/dist/types/components/link-box/link-box.d.ts

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { LinkBoxStyle } from "./link-box.style.js";
 import "../../index.js";
-import * as react821 from "react";
+import * as react877 from "react";
 
 //#region src/components/link-box/link-box.d.ts
 interface LinkBoxRootProps extends HTMLStyledProps, ThemeProps<LinkBoxStyle> {}
-declare const LinkBoxPropsContext: react821.Context<Partial<LinkBoxRootProps> | undefined>, useLinkBoxPropsContext: () => Partial<LinkBoxRootProps> | undefined;
+declare const LinkBoxPropsContext: react877.Context<Partial<LinkBoxRootProps> | undefined>, useLinkBoxPropsContext: () => Partial<LinkBoxRootProps> | undefined;
 /**
  * `LinkBox` is a component that allows elements such as articles or cards to function as a single link.
  *

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

@@ -4,7 +4,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { ListStyle } from "./list.style.js";
 import "../../index.js";
-import * as react819 from "react";
+import * as react882 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/list/list.d.ts
@@ -23,7 +23,7 @@ interface ListRootProps extends HTMLStyledProps<"ul">, Omit<ThemeProps<ListStyle
    */
   styleType?: CSSProps["listStyleType"];
 }
-declare const ListPropsContext: react819.Context<Partial<ListRootProps> | undefined>, useListPropsContext: () => Partial<ListRootProps> | undefined;
+declare const ListPropsContext: react882.Context<Partial<ListRootProps> | undefined>, useListPropsContext: () => Partial<ListRootProps> | undefined;
 /**
  * `List` is a component for displaying lists. By default, it renders a `ul` element.
  *

package/dist/types/components/loading/loading-provider.d.ts

@@ -1,6 +1,6 @@
 import { LoadingScheme, ThemeConfig } from "../../core/system/index.types.js";
 import "../../core/index.js";
-import * as react818 from "react";
+import * as react876 from "react";
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/loading/loading-provider.d.ts
@@ -53,7 +53,7 @@ interface LoadingContext {
    */
   screen: LoadingMethods;
 }
-declare const LoadingContext: react818.Context<LoadingContext>;
+declare const LoadingContext: react876.Context<LoadingContext>;
 interface LoadingProviderProps extends PropsWithChildren<ThemeConfig["loading"]> {}
 declare const LoadingProvider: FC<LoadingProviderProps>;
 interface LoadingSharedProps {

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

@@ -4,9 +4,10 @@ import { As, Component } from "../../core/components/index.types.js";
 import { ComponentWithContextOptions, InitialProps, SuperWithoutThemeProps } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { IconProps } from "../icon/icon.js";
+import "../icon/index.js";
 import { LoadingStyle } from "./loading.style.js";
 import "../../index.js";
-import * as react815 from "react";
+import * as react873 from "react";
 
 //#region src/components/loading/loading.d.ts
 interface LoadingProps extends WithoutThemeProps<IconProps>, ThemeProps<LoadingStyle> {
@@ -19,13 +20,13 @@ interface LoadingProps extends WithoutThemeProps<IconProps>, ThemeProps<LoadingS
    */
   secondaryColor?: CSSProps["color"];
 }
-declare const LoadingPropsContext: react815.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | react815.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+declare const LoadingPropsContext: react873.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | react873.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,
     transferProps,
     ...options
-  }?: ComponentWithContextOptions<R>) => (initialProps?: InitialProps<H>, ...superProps: SuperWithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>[]) => D extends "fragment" ? react815.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>;
+  }?: ComponentWithContextOptions<R>) => (initialProps?: InitialProps<H>, ...superProps: SuperWithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>[]) => D extends "fragment" ? react873.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>;
 //#endregion
 export { LoadingProps, LoadingPropsContext, useLoadingPropsContext };
 //# sourceMappingURL=loading.d.ts.map

package/dist/types/components/loading/use-loading-component.d.ts

@@ -2,6 +2,7 @@ import { LoadingScheme } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { LoadingProps } from "./loading.js";
+import "./index.js";
 
 //#region src/components/loading/use-loading-component.d.ts
 declare const useLoadingComponent: (scheme: LoadingScheme) => Component<"svg", LoadingProps>;

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

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { MarkStyle } from "./mark.style.js";
 import "../../index.js";
-import * as react939 from "react";
+import * as react871 from "react";
 
 //#region src/components/mark/mark.d.ts
 interface MarkProps extends HTMLStyledProps<"mark">, ThemeProps<MarkStyle> {}
-declare const MarkPropsContext: react939.Context<Partial<MarkProps> | undefined>, useMarkPropsContext: () => Partial<MarkProps> | undefined;
+declare const MarkPropsContext: react871.Context<Partial<MarkProps> | undefined>, useMarkPropsContext: () => Partial<MarkProps> | undefined;
 /**
  * `Mark` is a component that emphasizes a specific part of the text.
  *

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

@@ -2,10 +2,11 @@ import { Direction, ThemeProps, WithoutThemeProps } from "../../core/system/inde
 import { Component, GenericsComponent, HTMLProps, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverAnchorProps, PopoverContentProps, PopoverRootProps, PopoverTriggerProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { MenuStyle } from "./menu.style.js";
 import { MenuOptionGroupType, MenuOptionGroupValue, UseMenuGroupProps, UseMenuItemProps, UseMenuOptionGroupProps, UseMenuOptionItemProps, UseMenuProps } from "./use-menu.js";
 import "../../index.js";
-import * as react832 from "react";
+import * as react870 from "react";
 import { FC, ReactElement, ReactNode } from "react";
 
 //#region src/components/menu/menu.d.ts
@@ -41,7 +42,7 @@ interface MenuRootProps extends UseMenuProps, Omit<WithoutThemeProps<PopoverRoot
    */
   placement?: Direction;
 }
-declare const MenuPropsContext: react832.Context<Partial<MenuRootProps> | undefined>, useMenuPropsContext: () => Partial<MenuRootProps> | undefined;
+declare const MenuPropsContext: react870.Context<Partial<MenuRootProps> | undefined>, useMenuPropsContext: () => Partial<MenuRootProps> | undefined;
 /**
  * `Menu` is a component that displays a common dropdown menu.
  *

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

@@ -3,7 +3,7 @@ import "../../core/index.js";
 import { Descendant, DescendantProps, Descendants } from "../../hooks/use-descendants/index.js";
 import { UseDisclosureProps } from "../../hooks/use-disclosure/use-disclosure.js";
 import "../../index.js";
-import * as react822 from "react";
+import * as react860 from "react";
 import { RefObject } from "react";
 
 //#region src/components/menu/use-menu.d.ts
@@ -12,7 +12,7 @@ interface MenuDescendantProps {
   id: string;
 }
 type MenuDescendant = Descendant<HTMLDivElement, MenuDescendantProps>;
-declare const MenuDescendantsContext: react822.Context<{
+declare const MenuDescendantsContext: react860.Context<{
     active: (target?: HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<MenuDescendantProps> | undefined) => number;
     destroy: () => void;
@@ -29,7 +29,7 @@ declare const MenuDescendantsContext: react822.Context<{
     lastValue: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react822.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react860.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     values: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps>[];
@@ -51,12 +51,12 @@ declare const MenuDescendantsContext: react822.Context<{
       lastValue: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
       nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
       prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
-      register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react822.RefCallback<HTMLDivElement>;
+      register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react860.RefCallback<HTMLDivElement>;
       unregister: (node?: HTMLDivElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
       values: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps>[];
     };
-    register: react822.RefCallback<HTMLDivElement>;
+    register: react860.RefCallback<HTMLDivElement>;
   }, useMenuDescendants: () => {
     active: (target?: HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<MenuDescendantProps> | undefined) => number;
@@ -74,15 +74,15 @@ declare const MenuDescendantsContext: react822.Context<{
     lastValue: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react822.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react860.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     values: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps>[];
   };
 interface MenuContext extends Pick<UseMenuReturn, "onActiveDescendant" | "onClose" | "onCloseSubMenu" | "onOpen" | "onSelect" | "subMenu" | "subMenuDirection"> {}
-declare const MenuContext: react822.Context<MenuContext>, useMenuContext: () => MenuContext;
+declare const MenuContext: react860.Context<MenuContext>, useMenuContext: () => MenuContext;
 interface MenuGroupContext extends Pick<UseMenuGroupReturn, "getLabelProps"> {}
-declare const MenuGroupContext: react822.Context<MenuGroupContext>, useMenuGroupContext: () => MenuGroupContext;
+declare const MenuGroupContext: react860.Context<MenuGroupContext>, useMenuGroupContext: () => MenuGroupContext;
 interface MainMenuContext {
   descendants: Descendants<HTMLDivElement, MenuDescendantProps>;
   onActiveDescendant: (descendant?: MenuDescendant) => void;
@@ -90,13 +90,13 @@ interface MainMenuContext {
   onSelect: (value?: string, closeOnSelect?: boolean) => void;
   closeOnSelect?: boolean;
 }
-declare const MainMenuContext: react822.Context<MainMenuContext | undefined>, useMainMenuContext: () => MainMenuContext | undefined;
+declare const MainMenuContext: react860.Context<MainMenuContext | undefined>, useMainMenuContext: () => MainMenuContext | undefined;
 interface MenuOptionGroupContext {
   type: "checkbox" | "radio";
   value: string | string[];
   onChange?: (value: string) => void;
 }
-declare const MenuOptionGroupContext: react822.Context<MenuOptionGroupContext>, useMenuOptionGroupContext: () => MenuOptionGroupContext;
+declare const MenuOptionGroupContext: react860.Context<MenuOptionGroupContext>, useMenuOptionGroupContext: () => MenuOptionGroupContext;
 interface UseMenuProps extends Omit<UseDisclosureProps, "timing"> {
   /**
    * If `true`, the menu item will be closed when selected.
@@ -149,7 +149,7 @@ declare const useMenu: ({
     lastValue: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, MenuDescendantProps> | null, loop?: boolean, props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react822.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, MenuDescendantProps> | undefined) => react860.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, MenuDescendantProps> | undefined;
     values: (props?: Partial<MenuDescendantProps> | undefined) => Descendant<HTMLDivElement, MenuDescendantProps>[];

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

@@ -2,15 +2,19 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/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 { ButtonProps } from "../button/button.js";
+import "../button/index.js";
 import { CloseButtonProps } from "../close-button/close-button.js";
+import "../close-button/index.js";
 import { FocusLockProps } from "../focus-lock/focus-lock.js";
 import { ModalStyle } from "./modal.style.js";
 import { UseModalProps } from "./use-modal.js";
 import "../../index.js";
-import * as react811 from "react";
+import * as react859 from "react";
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/modal/modal.d.ts
@@ -52,7 +56,7 @@ interface ModalRootProps extends ThemeProps<ModalStyle>, Omit<UseModalProps, "ti
    */
   onCloseComplete?: () => void;
 }
-declare const ModalPropsContext: react811.Context<Partial<ModalRootProps> | undefined>, useModalPropsContext: () => Partial<ModalRootProps> | undefined;
+declare const ModalPropsContext: react859.Context<Partial<ModalRootProps> | undefined>, useModalPropsContext: () => Partial<ModalRootProps> | undefined;
 /**
  * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
  *

package/dist/types/components/native-accordion/native-accordion.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { NativeAccordionStyle } from "./native-accordion.style.js";
 import { UseNativeAccordionItemProps, UseNativeAccordionProps } from "./use-native-accordion.js";
 import "../../index.js";
-import * as react814 from "react";
+import * as react858 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/native-accordion/native-accordion.d.ts
@@ -25,7 +25,7 @@ interface NativeAccordionRootProps extends Omit<HTMLStyledProps, "onChange">, Th
    */
   items?: NativeAccordionItem[];
 }
-declare const NativeAccordionPropsContext: react814.Context<Partial<NativeAccordionRootProps> | undefined>, useNativeAccordionPropsContext: () => Partial<NativeAccordionRootProps> | undefined;
+declare const NativeAccordionPropsContext: react858.Context<Partial<NativeAccordionRootProps> | undefined>, useNativeAccordionPropsContext: () => Partial<NativeAccordionRootProps> | undefined;
 /**
  * `NativeAccordion` is a component for a list that displays information in an expandable or collapsible manner using the native HTML details element.
  *

package/dist/types/components/native-accordion/use-native-accordion.d.ts

@@ -1,10 +1,10 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react813 from "react";
+import * as react857 from "react";
 
 //#region src/components/native-accordion/use-native-accordion.d.ts
 interface NativeAccordionContext extends Pick<UseNativeAccordionReturn, "name"> {}
-declare const NativeAccordionContext: react813.Context<NativeAccordionContext>, useNativeAccordionContext: () => NativeAccordionContext;
+declare const NativeAccordionContext: react857.Context<NativeAccordionContext>, useNativeAccordionContext: () => NativeAccordionContext;
 interface UseNativeAccordionProps extends HTMLProps {
   /**
    * If `true`, multiple accordion items can be expanded at once.

package/dist/types/components/native-popover/native-popover.d.ts

@@ -4,12 +4,12 @@ import "../../core/index.js";
 import { NativePopoverStyle } from "./native-popover.style.js";
 import { UseNativePopoverProps } from "./use-native-popover.js";
 import "../../index.js";
-import * as react812 from "react";
+import * as react856 from "react";
 import { FC, PropsWithChildren } from "react";
 
 //#region src/components/native-popover/native-popover.d.ts
 interface NativePopoverRootProps extends UseNativePopoverProps, ThemeProps<NativePopoverStyle>, PropsWithChildren {}
-declare const NativePopoverPropsContext: react812.Context<Partial<NativePopoverRootProps> | undefined>, useNativePopoverPropsContext: () => Partial<NativePopoverRootProps> | undefined;
+declare const NativePopoverPropsContext: react856.Context<Partial<NativePopoverRootProps> | undefined>, useNativePopoverPropsContext: () => Partial<NativePopoverRootProps> | undefined;
 /**
  * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.
  *

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

@@ -2,13 +2,15 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLProps, 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 { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
+import "../input/index.js";
 import { NativeSelectStyle } from "./native-select.style.js";
 import { UseNativeSelectProps } from "./use-native-select.js";
 import "../../index.js";
-import * as react810 from "react";
+import * as react853 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/native-select/native-select.d.ts
@@ -30,7 +32,7 @@ interface NativeSelectRootProps extends Omit<HTMLStyledProps<"select">, "size">,
    */
   rootProps?: InputGroupRootProps;
 }
-declare const NativeSelectPropsContext: react810.Context<Partial<NativeSelectRootProps> | undefined>, useNativeSelectPropsContext: () => Partial<NativeSelectRootProps> | undefined;
+declare const NativeSelectPropsContext: react853.Context<Partial<NativeSelectRootProps> | undefined>, useNativeSelectPropsContext: () => Partial<NativeSelectRootProps> | undefined;
 /**
  * `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).
  *

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

@@ -7,7 +7,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
   xs: {
     field: {
       fontSize: "1em";
-      "&:has(+ [data-input-element])"?: {
+      "&:has(~ [data-input-element])"?: {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -18,16 +18,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       } | undefined;
       "--height"?: string | undefined;
-      "[data-input-element] + &"?: {
+      "[data-input-element]:has(~ &)"?: {
+        minW: string | undefined;
+      } | undefined;
+      "[data-input-element] ~ &"?: {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       } | undefined;
-      "[data-input-element]:has(~ &)"?: {
-        minW: string | undefined;
-      } | undefined;
       minH?: string | undefined;
       "--space-x"?: "spaces.2" | undefined;
       "--space-y"?: "spaces.1.5" | undefined;
@@ -35,7 +35,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
     };
     root: {
       fontSize: "xs" | undefined;
-      "&:has(+ [data-input-element])": {
+      "&:has(~ [data-input-element])": {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -46,23 +46,23 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       };
       "--height": string | undefined;
-      "[data-input-element] + &": {
+      "[data-input-element]:has(~ &)": {
+        minW: string | undefined;
+      };
+      "[data-input-element] ~ &": {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       };
-      "[data-input-element]:has(~ &)": {
-        minW: string | undefined;
-      };
       minH: string | undefined;
     };
   };
   sm: {
     field: {
       fontSize: "1em";
-      "&:has(+ [data-input-element])"?: {
+      "&:has(~ [data-input-element])"?: {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -73,16 +73,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       } | undefined;
       "--height"?: string | undefined;
-      "[data-input-element] + &"?: {
+      "[data-input-element]:has(~ &)"?: {
+        minW: string | undefined;
+      } | undefined;
+      "[data-input-element] ~ &"?: {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       } | undefined;
-      "[data-input-element]:has(~ &)"?: {
-        minW: string | undefined;
-      } | undefined;
       minH?: string | undefined;
       "--space-x"?: "spaces.2.5" | undefined;
       "--space-y"?: "spaces.2" | undefined;
@@ -90,7 +90,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
     };
     root: {
       fontSize: "sm" | undefined;
-      "&:has(+ [data-input-element])": {
+      "&:has(~ [data-input-element])": {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -101,23 +101,23 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       };
       "--height": string | undefined;
-      "[data-input-element] + &": {
+      "[data-input-element]:has(~ &)": {
+        minW: string | undefined;
+      };
+      "[data-input-element] ~ &": {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       };
-      "[data-input-element]:has(~ &)": {
-        minW: string | undefined;
-      };
       minH: string | undefined;
     };
   };
   md: {
     field: {
       fontSize: "1em";
-      "&:has(+ [data-input-element])"?: {
+      "&:has(~ [data-input-element])"?: {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -128,16 +128,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       } | undefined;
       "--height"?: string | undefined;
-      "[data-input-element] + &"?: {
+      "[data-input-element]:has(~ &)"?: {
+        minW: string | undefined;
+      } | undefined;
+      "[data-input-element] ~ &"?: {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       } | undefined;
-      "[data-input-element]:has(~ &)"?: {
-        minW: string | undefined;
-      } | undefined;
       minH?: string | undefined;
       "--space-x"?: "spaces.3" | undefined;
       "--space-y"?: "spaces.2" | undefined;
@@ -145,7 +145,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
     };
     root: {
       fontSize: "md" | undefined;
-      "&:has(+ [data-input-element])": {
+      "&:has(~ [data-input-element])": {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -156,23 +156,23 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       };
       "--height": string | undefined;
-      "[data-input-element] + &": {
+      "[data-input-element]:has(~ &)": {
+        minW: string | undefined;
+      };
+      "[data-input-element] ~ &": {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       };
-      "[data-input-element]:has(~ &)": {
-        minW: string | undefined;
-      };
       minH: string | undefined;
     };
   };
   lg: {
     field: {
       fontSize: "1em";
-      "&:has(+ [data-input-element])"?: {
+      "&:has(~ [data-input-element])"?: {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -183,16 +183,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       } | undefined;
       "--height"?: string | undefined;
-      "[data-input-element] + &"?: {
+      "[data-input-element]:has(~ &)"?: {
+        minW: string | undefined;
+      } | undefined;
+      "[data-input-element] ~ &"?: {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       } | undefined;
-      "[data-input-element]:has(~ &)"?: {
-        minW: string | undefined;
-      } | undefined;
       minH?: string | undefined;
       "--space-x"?: "spaces.3.5" | undefined;
       "--space-y"?: "spaces.2.5" | undefined;
@@ -200,7 +200,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
     };
     root: {
       fontSize: "lg" | undefined;
-      "&:has(+ [data-input-element])": {
+      "&:has(~ [data-input-element])": {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -211,23 +211,23 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       };
       "--height": string | undefined;
-      "[data-input-element] + &": {
+      "[data-input-element]:has(~ &)": {
+        minW: string | undefined;
+      };
+      "[data-input-element] ~ &": {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       };
-      "[data-input-element]:has(~ &)": {
-        minW: string | undefined;
-      };
       minH: string | undefined;
     };
   };
   xl: {
     field: {
       fontSize: "1em";
-      "&:has(+ [data-input-element])"?: {
+      "&:has(~ [data-input-element])"?: {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -238,16 +238,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       } | undefined;
       "--height"?: string | undefined;
-      "[data-input-element] + &"?: {
+      "[data-input-element]:has(~ &)"?: {
+        minW: string | undefined;
+      } | undefined;
+      "[data-input-element] ~ &"?: {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       } | undefined;
-      "[data-input-element]:has(~ &)"?: {
-        minW: string | undefined;
-      } | undefined;
       minH?: string | undefined;
       "--space-x"?: "spaces.4" | undefined;
       "--space-y"?: "spaces.3" | undefined;
@@ -255,7 +255,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
     };
     root: {
       fontSize: "xl" | undefined;
-      "&:has(+ [data-input-element])": {
+      "&:has(~ [data-input-element])": {
         pe: string | undefined;
       } | {
         [x: string]: {
@@ -266,16 +266,16 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
         minW: string | undefined;
       };
       "--height": string | undefined;
-      "[data-input-element] + &": {
+      "[data-input-element]:has(~ &)": {
+        minW: string | undefined;
+      };
+      "[data-input-element] ~ &": {
         ps: string | undefined;
       } | {
         [x: string]: {
           ps: string | undefined;
         };
       };
-      "[data-input-element]:has(~ &)": {
-        minW: string | undefined;
-      };
       minH: string | undefined;
     };
   };
@@ -317,7 +317,7 @@ declare const nativeSelectStyle: ComponentSlotStyle<"icon" | "root" | "field", C
       };
     } | undefined;
     root: {
-      "&:not([data-input-element] + &)": {
+      "&:not([data-input-element] ~ &)": {
         ps: "0px";
       } | {
         [x: string]: {

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

@@ -1,6 +1,7 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
+import "../field/index.js";
 
 //#region src/components/native-select/use-native-select.d.ts
 interface NativeSelectSharedItem extends Omit<HTMLProps<"option">, "children" | "label" | "value"> {