@accelint/design-toolkit 9.4.1 → 9.6.0

package/dist/components/drawer/back.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime114 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/drawer/back.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime114 from "react/jsx-runtime";
  * </DrawerView>
  * ```
  */
-declare function DrawerBack(): react_jsx_runtime114.JSX.Element | null;
+declare function DrawerBack(): react_jsx_runtime21.JSX.Element | null;
 //#endregion
 export { DrawerBack };
 //# sourceMappingURL=back.d.ts.map

package/dist/components/drawer/close.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerCloseProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime124 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/drawer/close.d.ts
 
@@ -34,7 +34,7 @@ import * as react_jsx_runtime124 from "react/jsx-runtime";
  * </DrawerHeader>
  * ```
  */
-declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime124.JSX.Element;
+declare function DrawerClose(props: DrawerCloseProps): react_jsx_runtime23.JSX.Element;
 declare namespace DrawerClose {
   var displayName: string;
 }

package/dist/components/drawer/content.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime122 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/components/drawer/content.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime122 from "react/jsx-runtime";
 declare function DrawerContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime122.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { DrawerContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/drawer/context.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerContextValue, DrawerEvent } from "./types.js";
 import "client-only";
-import * as react33 from "react";
+import * as react7 from "react";
 import { Broadcast } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
 
@@ -25,7 +25,7 @@ import { UniqueId } from "@accelint/core";
  * const { register, unregister, placement } = useContext(DrawerContext);
  * ```
  */
-declare const DrawerContext: react33.Context<DrawerContextValue>;
+declare const DrawerContext: react7.Context<DrawerContextValue>;
 /**
  * Event bus instance for drawer-related events.
  *

package/dist/components/drawer/footer.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/drawer/footer.d.ts
 
@@ -39,7 +39,7 @@ import * as react_jsx_runtime35 from "react/jsx-runtime";
 declare function DrawerFooter({
   className,
   ...rest
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime35.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { DrawerFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/drawer/header-title.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerTitleProps } from "./types.js";
-import * as react_jsx_runtime67 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/drawer/header-title.d.ts
 
@@ -41,7 +41,7 @@ declare function DrawerHeaderTitle({
   className,
   level,
   ...rest
-}: DrawerTitleProps): react_jsx_runtime67.JSX.Element;
+}: DrawerTitleProps): react_jsx_runtime29.JSX.Element;
 //#endregion
 export { DrawerHeaderTitle };
 //# sourceMappingURL=header-title.d.ts.map

package/dist/components/drawer/header.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime68 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/drawer/header.d.ts
 
@@ -52,7 +52,7 @@ declare function DrawerHeader({
   title,
   children,
   ...rest
-}: ComponentPropsWithRef<'header'>): react_jsx_runtime68.JSX.Element;
+}: ComponentPropsWithRef<'header'>): react_jsx_runtime31.JSX.Element;
 //#endregion
 export { DrawerHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/drawer/header.js

@@ -24,8 +24,8 @@ import { useContext } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Header } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.css";
 import { Cancel } from "@accelint/icons";
+import styles from "./styles.module.css";
 
 //#region src/components/drawer/header.tsx
 /**

package/dist/components/drawer/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/components/drawer/index.d.ts
 
@@ -63,7 +63,7 @@ declare function Drawer({
   size,
   onChange,
   ...rest
-}: DrawerProps): react_jsx_runtime70.JSX.Element;
+}: DrawerProps): react_jsx_runtime33.JSX.Element;
 //#endregion
 export { Drawer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/layout-main.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime72 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout-main.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime72 from "react/jsx-runtime";
 declare function DrawerLayoutMain({
   className,
   ...rest
-}: ComponentPropsWithRef<'main'>): react_jsx_runtime72.JSX.Element;
+}: ComponentPropsWithRef<'main'>): react_jsx_runtime28.JSX.Element;
 //#endregion
 export { DrawerLayoutMain };
 //# sourceMappingURL=layout-main.d.ts.map

package/dist/components/drawer/layout.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DrawerLayoutProps } from "./types.js";
-import * as react_jsx_runtime110 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/drawer/layout.d.ts
 
@@ -42,7 +42,7 @@ declare function DrawerLayout({
   extend,
   push,
   ...rest
-}: DrawerLayoutProps): react_jsx_runtime110.JSX.Element;
+}: DrawerLayoutProps): react_jsx_runtime30.JSX.Element;
 //#endregion
 export { DrawerLayout };
 //# sourceMappingURL=layout.d.ts.map

package/dist/components/drawer/menu-item.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerMenuItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime74 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu-item.d.ts
 
@@ -45,7 +45,7 @@ declare function DrawerMenuItem({
   toggle,
   textValue,
   ...rest
-}: DrawerMenuItemProps): react_jsx_runtime74.JSX.Element | null;
+}: DrawerMenuItemProps): react_jsx_runtime32.JSX.Element | null;
 //#endregion
 export { DrawerMenuItem };
 //# sourceMappingURL=menu-item.d.ts.map

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

@@ -11,7 +11,7 @@
  */
 
 import { DrawerMenuProps } from "./types.js";
-import * as react_jsx_runtime75 from "react/jsx-runtime";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/drawer/menu.d.ts
 
@@ -39,7 +39,7 @@ declare function DrawerMenu({
   position,
   children,
   ...rest
-}: DrawerMenuProps): react_jsx_runtime75.JSX.Element;
+}: DrawerMenuProps): react_jsx_runtime34.JSX.Element;
 //#endregion
 export { DrawerMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/drawer/panel.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime76 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 
 //#region src/components/drawer/panel.d.ts
 
@@ -36,7 +36,7 @@ import * as react_jsx_runtime76 from "react/jsx-runtime";
 declare function DrawerPanel({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime76.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime35.JSX.Element;
 //#endregion
 export { DrawerPanel };
 //# sourceMappingURL=panel.d.ts.map

package/dist/components/drawer/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { DrawerTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime77 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/drawer/trigger.d.ts
 
@@ -47,7 +47,7 @@ import * as react_jsx_runtime77 from "react/jsx-runtime";
 declare function DrawerTrigger({
   for: events,
   ...rest
-}: DrawerTriggerProps): react_jsx_runtime77.JSX.Element;
+}: DrawerTriggerProps): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { DrawerTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/drawer/view.d.ts

@@ -13,7 +13,7 @@
 import { ViewStackViewProps } from "../view-stack/types.js";
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime78 from "react/jsx-runtime";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
 
 //#region src/components/drawer/view.d.ts
 
@@ -44,7 +44,7 @@ declare function DrawerView({
   children,
   className,
   ...rest
-}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime78.JSX.Element;
+}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime36.JSX.Element;
 //#endregion
 export { DrawerView };
 //# sourceMappingURL=view.d.ts.map

package/dist/components/flashcard/index.d.ts

@@ -12,14 +12,14 @@
 
 import { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps } from "./types.js";
 import "client-only";
-import * as react21 from "react";
-import * as react_jsx_runtime84 from "react/jsx-runtime";
+import * as react9 from "react";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 
 //#region src/components/flashcard/index.d.ts
 /**
  * Context for sharing Flashcard state across child components.
  */
-declare const FlashcardContext: react21.Context<FlashcardProps>;
+declare const FlashcardContext: react9.Context<FlashcardProps>;
 /**
  * Flashcard - A quick visual identifier for map entity data.
  *
@@ -46,7 +46,7 @@ declare const FlashcardContext: react21.Context<FlashcardProps>;
  * </Flashcard>
  * ```
  */
-declare function Flashcard(props: FlashcardProps): react_jsx_runtime84.JSX.Element;
+declare function Flashcard(props: FlashcardProps): react_jsx_runtime40.JSX.Element;
 declare namespace Flashcard {
   var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Flashcard {
  * </Flashcard>
  * ```
  */
-declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime84.JSX.Element;
+declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime40.JSX.Element;
 declare namespace FlashcardHero {
   var displayName: string;
 }
@@ -92,7 +92,7 @@ declare namespace FlashcardHero {
  * </Flashcard>
  * ```
  */
-declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime84.JSX.Element | null;
+declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime40.JSX.Element | null;
 declare namespace FlashcardAdditionalData {
   var displayName: string;
 }
@@ -119,7 +119,7 @@ declare namespace FlashcardAdditionalData {
  * </Flashcard>
  * ```
  */
-declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime84.JSX.Element;
+declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime40.JSX.Element;
 declare namespace FlashcardDetailsList {
   var displayName: string;
 }
@@ -141,7 +141,7 @@ declare namespace FlashcardDetailsList {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime84.JSX.Element;
+declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime40.JSX.Element;
 declare namespace FlashcardDetailsLabel {
   var displayName: string;
 }
@@ -163,7 +163,7 @@ declare namespace FlashcardDetailsLabel {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime84.JSX.Element;
+declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime40.JSX.Element;
 declare namespace FlashcardDetailsValue {
   var displayName: string;
 }

package/dist/components/hero/context.d.ts

@@ -12,14 +12,14 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react39 from "react";
+import * as react8 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/hero/context.d.ts
 /**
  * Context for sharing Hero props across component tree.
  */
-declare const HeroContext: react39.Context<ContextValue<HeroProps, HTMLElement>>;
+declare const HeroContext: react8.Context<ContextValue<HeroProps, HTMLElement>>;
 //#endregion
 export { HeroContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/hero/index.d.ts

@@ -12,7 +12,7 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime99 from "react/jsx-runtime";
+import * as react_jsx_runtime156 from "react/jsx-runtime";
 
 //#region src/components/hero/index.d.ts
 
@@ -56,7 +56,7 @@ import * as react_jsx_runtime99 from "react/jsx-runtime";
 declare function Hero({
   ref,
   ...props
-}: HeroProps): react_jsx_runtime99.JSX.Element;
+}: HeroProps): react_jsx_runtime156.JSX.Element;
 //#endregion
 export { Hero };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/hero/subtitle.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react28 from "react";
+import * as react33 from "react";
 import * as react_aria_components0 from "react-aria-components";
 
 //#region src/components/hero/subtitle.d.ts
@@ -30,7 +30,7 @@ import * as react_aria_components0 from "react-aria-components";
  * </Hero>
  * ```
  */
-declare const HeroSubtitle: react28.ForwardRefExoticComponent<react_aria_components0.TextProps & react28.RefAttributes<HTMLElement>>;
+declare const HeroSubtitle: react33.ForwardRefExoticComponent<react_aria_components0.TextProps & react33.RefAttributes<HTMLElement>>;
 //#endregion
 export { HeroSubtitle };
 //# sourceMappingURL=subtitle.d.ts.map

package/dist/components/hero/title.d.ts

@@ -11,8 +11,8 @@
  */
 
 import "client-only";
-import * as react31 from "react";
-import * as react_aria_components1 from "react-aria-components";
+import * as react25 from "react";
+import * as react_aria_components0 from "react-aria-components";
 
 //#region src/components/hero/title.d.ts
 /**
@@ -28,7 +28,7 @@ import * as react_aria_components1 from "react-aria-components";
  * </Hero>
  * ```
  */
-declare const HeroTitle: react31.ForwardRefExoticComponent<react_aria_components1.HeadingProps & react31.RefAttributes<HTMLHeadingElement>>;
+declare const HeroTitle: react25.ForwardRefExoticComponent<react_aria_components0.HeadingProps & react25.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { HeroTitle };
 //# sourceMappingURL=title.d.ts.map

package/dist/components/hotkey/context.d.ts

@@ -15,7 +15,7 @@ import { HotkeyProps } from "./types.js";
 import "client-only";
 import * as react27 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime106 from "react/jsx-runtime";
+import * as react_jsx_runtime98 from "react/jsx-runtime";
 
 //#region src/components/hotkey/context.d.ts
 /**
@@ -42,7 +42,7 @@ declare const HotkeyContext: react27.Context<ContextValue<HotkeyProps, HTMLEleme
 declare function HotkeyProvider({
   children,
   ...props
-}: ProviderProps<HotkeyProps>): react_jsx_runtime106.JSX.Element;
+}: ProviderProps<HotkeyProps>): react_jsx_runtime98.JSX.Element;
 //#endregion
 export { HotkeyContext, HotkeyProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/hotkey/index.d.ts

@@ -12,7 +12,7 @@
 
 import { HotkeyProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime101 from "react/jsx-runtime";
+import * as react_jsx_runtime99 from "react/jsx-runtime";
 
 //#region src/components/hotkey/index.d.ts
 
@@ -66,7 +66,7 @@ declare function Hotkey({
   ref,
   children,
   ...props
-}: HotkeyProps): react_jsx_runtime101.JSX.Element;
+}: HotkeyProps): react_jsx_runtime99.JSX.Element;
 //#endregion
 export { Hotkey };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/hotkey/set.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as react_jsx_runtime100 from "react/jsx-runtime";
 
 //#region src/components/hotkey/set.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime102 from "react/jsx-runtime";
 declare function HotkeySet({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime102.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime100.JSX.Element;
 //#endregion
 export { HotkeySet };
 //# sourceMappingURL=set.d.ts.map

package/dist/components/icon/context.d.ts

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { IconProps } from "./types.js";
 import "client-only";
-import * as react25 from "react";
+import * as react28 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime103 from "react/jsx-runtime";
+import * as react_jsx_runtime101 from "react/jsx-runtime";
 
 //#region src/components/icon/context.d.ts
 /**
  * Context for sharing Icon props across component tree.
  */
-declare const IconContext: react25.Context<ContextValue<IconProps, HTMLSpanElement>>;
+declare const IconContext: react28.Context<ContextValue<IconProps, HTMLSpanElement>>;
 /**
  * IconProvider - Context provider for setting default Icon props.
  *
@@ -42,7 +42,7 @@ declare const IconContext: react25.Context<ContextValue<IconProps, HTMLSpanEleme
 declare function IconProvider({
   children,
   ...props
-}: ProviderProps<IconProps>): react_jsx_runtime103.JSX.Element;
+}: ProviderProps<IconProps>): react_jsx_runtime101.JSX.Element;
 //#endregion
 export { IconContext, IconProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/icon/index.d.ts

@@ -12,7 +12,7 @@
 
 import { IconProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime104 from "react/jsx-runtime";
+import * as react_jsx_runtime112 from "react/jsx-runtime";
 
 //#region src/components/icon/index.d.ts
 
@@ -61,7 +61,7 @@ import * as react_jsx_runtime104 from "react/jsx-runtime";
 declare function Icon({
   ref,
   ...props
-}: IconProps): react_jsx_runtime104.JSX.Element;
+}: IconProps): react_jsx_runtime112.JSX.Element;
 //#endregion
 export { Icon };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/input/context.d.ts

@@ -12,7 +12,7 @@
 
 import { InputProps as InputProps$1 } from "./types.js";
 import "client-only";
-import * as react34 from "react";
+import * as react30 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/input/context.d.ts
@@ -20,7 +20,7 @@ import { ContextValue } from "react-aria-components";
  * Context for sharing Input props across component tree.
  * Used internally by field components to pass props to Input.
  */
-declare const InputContext: react34.Context<ContextValue<InputProps$1, HTMLInputElement>>;
+declare const InputContext: react30.Context<ContextValue<InputProps$1, HTMLInputElement>>;
 //#endregion
 export { InputContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/input/index.d.ts

@@ -12,7 +12,7 @@
 
 import { InputProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime107 from "react/jsx-runtime";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
 
 //#region src/components/input/index.d.ts
 
@@ -52,7 +52,7 @@ import * as react_jsx_runtime107 from "react/jsx-runtime";
 declare function Input({
   ref,
   ...props
-}: InputProps): react_jsx_runtime107.JSX.Element;
+}: InputProps): react_jsx_runtime114.JSX.Element;
 //#endregion
 export { Input };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.js

@@ -14,14 +14,13 @@
 'use client';
 
 import { IconProvider } from "../icon/context.js";
-import { Icon } from "../icon/index.js";
-import { Button as Button$1 } from "../button/index.js";
+import { ClearButton } from "../button/__internal__/clear.js";
 import { InputContext as InputContext$1 } from "./context.js";
 import "client-only";
+import { useCallback } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Input as Input$1, InputContext, composeRenderProps, useContextProps } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import CancelFill from "@accelint/icons/cancel-fill";
 import { useControlledState } from "@react-stately/utils";
 import styles from "./styles.module.css";
 
@@ -78,10 +77,14 @@ function Input({ ref = null, ...props }) {
 	const suffix = !!suffixProp && styles.hasSuffix;
 	const clear = isClearable && styles.isClearable;
 	const isEmpty = value == null || value === "";
-	function handleChange(event) {
+	const handleChange = useCallback((event) => {
 		onChange?.(event);
 		if (!event.defaultPrevented) setValue(event.target.value);
-	}
+	}, [onChange, setValue]);
+	const handleClearButtonPress = useCallback(() => {
+		handleChange(clearInputEvent);
+		ref?.current?.focus();
+	}, [handleChange, ref]);
 	return /* @__PURE__ */ jsx(IconProvider, {
 		size: "small",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -123,17 +126,10 @@ function Input({ ref = null, ...props }) {
 					className: clsx(styles.suffix, prefix, suffix, clear, classNames?.suffix),
 					children: suffixProp
 				}),
-				!readOnly && isClearable && /* @__PURE__ */ jsx(Button$1, {
+				!readOnly && isClearable && /* @__PURE__ */ jsx(ClearButton, {
 					className: composeRenderProps(classNames?.clear, (className) => clsx(styles.clear, prefix, suffix, clear, className)),
-					excludeFromTabOrder: true,
-					size: "small",
-					variant: "icon",
 					isDisabled: disabled,
-					onPress: () => {
-						handleChange(clearInputEvent);
-						ref?.current?.focus();
-					},
-					children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CancelFill, {}) })
+					onPress: handleClearButtonPress
 				})
 			]
 		})