rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

package/cjs/Dropdown/DropdownMenu.js

@@ -16,7 +16,6 @@ var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -54,7 +53,7 @@ const DropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const dropdown = (0, _react.useContext)(_DropdownContext.default);
   const {
     rtl
-  } = (0, _CustomProvider.useCustom)();
+  } = (0, _hooks.useCustom)();
   const handleToggleSubmenu = (0, _react.useCallback)((_, event) => {
     onToggle === null || onToggle === void 0 || onToggle(eventKey, event);
   }, [eventKey, onToggle]);

package/cjs/FlexboxGrid/FlexboxGrid.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _FlexboxGridItem = _interopRequireDefault(require("./FlexboxGridItem"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 const Subcomponents = {
   Item: _FlexboxGridItem.default
 };
@@ -29,7 +28,7 @@ const Subcomponents = {
 const FlexboxGrid = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FlexboxGrid', props);
+  } = (0, _hooks.useCustom)('FlexboxGrid', props);
   const {
     as: Component = 'div',
     className,

package/cjs/Form/Form.js

@@ -21,7 +21,6 @@ var _utils = require("../internals/utils");
 var _schemaTyped = require("schema-typed");
 var _hooks = require("../internals/hooks");
 var _FormContext = require("./FormContext");
-var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultSchema = (0, _schemaTyped.SchemaModel)({});
@@ -49,7 +48,7 @@ const Subcomponents = {
 const Form = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Form', props);
+  } = (0, _hooks.useCustom)('Form', props);
   const {
     checkTrigger = 'change',
     errorFromContext = true,

package/cjs/FormControl/FormControl.js

@@ -16,7 +16,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
-var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -30,7 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const FormControl = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormControl', props);
+  } = (0, _hooks.useCustom)('FormControl', props);
   const {
     readOnly: readOnlyContext,
     plaintext: plaintextContext,

package/cjs/FormControlLabel/FormControlLabel.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _CustomProvider = require("../CustomProvider");
 var _FormGroup = require("../FormGroup");
 /**
  * The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
@@ -18,7 +17,7 @@ var _FormGroup = require("../FormGroup");
 const FormControlLabel = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormControlLabel', props);
+  } = (0, _hooks.useCustom)('FormControlLabel', props);
   const {
     labelId,
     controlId

package/cjs/FormErrorMessage/FormErrorMessage.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The `<Form.ErrorMessage>` component is used to display error messages in the form.
  * @see https://rsuitejs.com/components/form/
@@ -17,7 +16,7 @@ var _CustomProvider = require("../CustomProvider");
 const FormErrorMessage = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormErrorMessage', props);
+  } = (0, _hooks.useCustom)('FormErrorMessage', props);
   const {
     as,
     classPrefix = 'form-error-message',

package/cjs/FormGroup/FormGroup.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const FormGroupContext = /*#__PURE__*/_react.default.createContext({});
@@ -48,7 +47,7 @@ exports.useFormGroup = useFormGroup;
 const FormGroup = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormGroup', props);
+  } = (0, _hooks.useCustom)('FormGroup', props);
   const {
     as,
     classPrefix = 'form-group',

package/cjs/FormHelpText/FormHelpText.js

@@ -13,7 +13,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The `<Form.HelpText>` component is used to display help information in the form.
  * @see https://rsuitejs.com/components/form/
@@ -24,7 +23,7 @@ const FormHelpText = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _FormGroup.useFormGroup)();
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormHelpText', props);
+  } = (0, _hooks.useCustom)('FormHelpText', props);
   const {
     as = 'span',
     classPrefix = 'form-help-text',

package/cjs/FormStack/FormStack.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The `<Form.Stack>` component is a quick layout component through Flexbox,
  * supporting vertical and horizontal stacking, custom spacing and line wrapping.
@@ -18,7 +17,7 @@ var _CustomProvider = require("../CustomProvider");
 const FormStack = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('FormStack', props);
+  } = (0, _hooks.useCustom)('FormStack', props);
   const {
     as,
     classPrefix = 'form-stack',

package/cjs/Grid/Col.js

@@ -11,7 +11,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _constants = require("../internals/constants");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -21,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Col = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Col', props);
+  } = (0, _hooks.useCustom)('Col', props);
   const {
     as,
     classPrefix = 'col',

package/cjs/Grid/Grid.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The Grid component is used to specify the layout of child elements in rows and columns.
  * @see https://rsuitejs.com/components/grid
@@ -17,7 +16,7 @@ var _CustomProvider = require("../CustomProvider");
 const Grid = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Grid', props);
+  } = (0, _hooks.useCustom)('Grid', props);
   const {
     as,
     classPrefix = 'grid-container',

package/cjs/Grid/Row.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
 var _styles = require("./utils/styles");
 /**
@@ -18,7 +17,7 @@ var _styles = require("./utils/styles");
 const Row = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Row', props);
+  } = (0, _hooks.useCustom)('Row', props);
   const {
     as,
     className,

package/cjs/Heading/Heading.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 /**
  *
  * The `Heading` component is used to display a heading.
@@ -19,7 +18,7 @@ var _CustomProvider = require("../CustomProvider");
 const Heading = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Heading', props);
+  } = (0, _hooks.useCustom)('Heading', props);
   const {
     as,
     classPrefix = 'heading',

package/cjs/Highlight/Highlight.js

@@ -7,10 +7,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
+var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _highlightText = require("./utils/highlightText");
-var _utils = require("../internals/utils");
-var _CustomProvider = require("../CustomProvider");
 function defaultRenderMark(match, index) {
   return /*#__PURE__*/_react.default.createElement("mark", {
     key: index,
@@ -27,7 +26,7 @@ function defaultRenderMark(match, index) {
 const Highlight = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Highlight', props);
+  } = (0, _hooks.useCustom)('Highlight', props);
   const {
     as,
     classPrefix = 'highlight',

package/cjs/IconButton/IconButton.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The `IconButton` component is used to specify a button with icon.
  * @see https://rsuitejs.com/components/button
@@ -17,7 +16,7 @@ var _CustomProvider = require("../CustomProvider");
 const IconButton = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('IconButton', props);
+  } = (0, _hooks.useCustom)('IconButton', props);
   const {
     icon,
     placement = 'left',

package/cjs/Image/Image.js

@@ -8,14 +8,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _ImageWrapper = require("./ImageWrapper");
 var _useImage = require("./hooks/useImage");
-var _CustomProvider = require("../CustomProvider");
-var _utils = require("../internals/utils");
 const Image = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Image', props);
+  } = (0, _hooks.useCustom)('Image', props);
   const {
     as = 'img',
     bordered,
@@ -50,19 +49,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     shaded,
     zoomed
   }));
-  const imgProps = {
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
-  };
   const {
     imgSrc,
-    isLoading
+    isLoading,
+    onLoad,
+    onError
   } = (0, _useImage.useImage)({
     src,
-    fallbackSrc,
-    ...imgProps
+    fallbackSrc
   });
   const styles = {
     ...style,
@@ -76,8 +70,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     className: classes,
     style: styles,
     width: width,
-    height: height
-  }, imgProps, rest));
+    height: height,
+    loading: loading,
+    onLoad: onLoad,
+    onError: onError,
+    crossOrigin: crossOrigin,
+    srcSet: srcSet,
+    sizes: sizes
+  }, rest));
   if (zoomed) {
     return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
       w: width,

package/cjs/Image/hooks/useImage.d.ts

@@ -10,5 +10,7 @@ export declare const useImage: (props: UseImageProps) => {
     imgSrc: string | null;
     isLoading: boolean;
     error: boolean;
+    onLoad: () => void;
+    onError: () => void;
 };
 export {};

package/cjs/Image/hooks/useImage.js

@@ -1,65 +1,41 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.useImage = void 0;
 var _react = require("react");
-var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../internals/hooks/useIsomorphicLayoutEffect"));
 const useImage = props => {
   const {
     src,
-    fallbackSrc,
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
+    fallbackSrc
   } = props;
   const [imgSrc, setImgSrc] = (0, _react.useState)(src || fallbackSrc || null);
   const [isLoading, setIsLoading] = (0, _react.useState)(!!src);
   const [error, setError] = (0, _react.useState)(false);
-  const imageRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    setIsLoading(!!src); // true if src exists, false otherwise
-  }, [src]);
-  const flush = () => {
-    if (imageRef.current) {
-      imageRef.current.onload = null;
-      imageRef.current.onerror = null;
+    if (!src) {
+      setIsLoading(false);
+      return;
     }
+    setImgSrc(src);
+    setIsLoading(true);
+    setError(false);
+  }, [src]);
+  const handleLoad = () => {
+    setIsLoading(false);
+    setError(false);
+  };
+  const handleError = () => {
+    setIsLoading(false);
+    setError(true);
+    setImgSrc(fallbackSrc || null);
   };
-  const loadImage = (0, _react.useCallback)(() => {
-    if (!src) return;
-    flush();
-    const image = new Image();
-    image.src = src;
-    if (crossOrigin) image.crossOrigin = crossOrigin;
-    if (srcSet) image.srcset = srcSet;
-    if (sizes) image.sizes = sizes;
-    if (loading) image.loading = loading;
-    image.onload = () => {
-      flush();
-      setImgSrc(src);
-      setIsLoading(false);
-    };
-    image.onerror = () => {
-      flush();
-      setError(true);
-      setImgSrc(fallbackSrc || null);
-      setIsLoading(false);
-    };
-    imageRef.current = image;
-  }, [crossOrigin, fallbackSrc, loading, sizes, src, srcSet]);
-  (0, _useIsomorphicLayoutEffect.default)(() => {
-    loadImage();
-    return () => {
-      flush();
-    };
-  }, [loadImage]);
   return {
     imgSrc,
     isLoading,
-    error
+    error,
+    onLoad: handleLoad,
+    onError: handleError
   };
 };
 exports.useImage = useImage;

package/cjs/InlineEdit/InlineEdit.js

@@ -13,11 +13,10 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _renderChildren = require("./renderChildren");
-var _CustomProvider = require("../CustomProvider");
 const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('InlineEdit', props);
+  } = (0, _hooks.useCustom)('InlineEdit', props);
   const {
     as,
     children = _renderChildren.defaultRenderInput,
@@ -43,6 +42,7 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     onChange,
     onKeyDown,
     onClick,
+    onFocus,
     htmlProps
   } = (0, _useEditState.default)({
     ...rest,
@@ -75,7 +75,8 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
       disabled
     })),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onFocus: onFocus
   }, htmlProps), (0, _renderChildren.renderChildren)(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/_react.default.createElement(_EditableControls.default, {
     className: prefix('controls'),
     onSave: onSave,

package/cjs/InlineEdit/useEditState.d.ts

@@ -8,12 +8,14 @@ interface EditStateProps {
     onCancel?: (event?: React.MouseEvent) => void;
     onSave?: (event?: React.MouseEvent) => void;
     onClick?: (event: React.SyntheticEvent) => void;
+    onFocus?: (event?: React.FocusEvent) => void;
 }
 declare const useEditState: (props: EditStateProps) => {
     isEditing: boolean;
     value: any;
     onClick: (...args: any[]) => any;
     onChange: (...args: any[]) => any;
+    onFocus: (...args: any[]) => any;
     onCancel: (...args: any[]) => any;
     onSave: (...args: any[]) => any;
     onKeyDown: (...args: any[]) => any;

package/cjs/InlineEdit/useEditState.js

@@ -15,6 +15,7 @@ const useEditState = props => {
     onCancel,
     onSave,
     onClick,
+    onFocus,
     ...htmlProps
   } = props;
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
@@ -31,6 +32,12 @@ const useEditState = props => {
     setIsEditing(true);
     setResetValue(value);
   });
+  const handleFocus = (0, _hooks.useEventCallback)(event => {
+    if (disabled) return;
+    onFocus === null || onFocus === void 0 || onFocus(event);
+    setIsEditing(true);
+    setResetValue(value);
+  });
   const handleChange = (0, _hooks.useEventCallback)((value, event) => {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value, event);
@@ -68,6 +75,7 @@ const useEditState = props => {
     value,
     onClick: handleClick,
     onChange: handleChange,
+    onFocus: handleFocus,
     onCancel: handleCancel,
     onSave: handleSave,
     onKeyDown: handleKeyDown,

package/cjs/Input/Input.d.ts

@@ -1,19 +1,10 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { InputBaseCommonProps } from '../internals/InputBase';
 import { PrependParameters } from '../internals/types/utils';
-import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, Size } from '../internals/types';
-export interface LocaleType {
-    unfilled: string;
-}
-export interface InputProps extends BoxProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
+import type { SanitizedInputProps, PropsWithoutChange, FormControlBaseProps } from '../internals/types';
+export interface InputProps extends InputBaseCommonProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
-    /** The HTML input id */
-    id?: string;
-    /** A component can have different sizes */
-    size?: Size;
-    /** Ref of input element */
-    inputRef?: React.Ref<any>;
     /**
      * The htmlSize attribute defines the width of the <input> element.
      *