rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/esm/CheckboxGroup/CheckboxGroup.js

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import remove from 'lodash/remove';
 import Plaintext from "../internals/Plaintext/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
-import { useClassNames, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -33,9 +33,9 @@ const CheckboxGroup = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     inline
   }));
   const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);

package/esm/Col/index.d.ts

@@ -1,4 +1,4 @@
-import Col from './Col';
-export type { ColProps } from './Col';
+import Col from '../Grid/Col';
+export type { ColProps } from '../Grid/Col';
 export { Col };
 export default Col;

package/esm/Col/index.js

@@ -1,5 +1,5 @@
 'use client';
-import Col from "./Col.js";
+import Col from "../Grid/Col.js";
 
 // export types
 

package/esm/Container/Container.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useMemo } from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 export const ContainerContext = /*#__PURE__*/React.createContext({});
 /**
@@ -22,10 +22,10 @@ const Container = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const [hasSidebar, setHasSidebar] = useState(false);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     'has-sidebar': hasSidebar
   }));
   const contextValue = useMemo(() => ({

package/esm/CustomProvider/CustomProvider.d.ts

@@ -122,6 +122,19 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         last: string;
         limit: string;
         total: string;
+        /**
+         * Return the date parsed from string using the given format string.
+         *
+         * Example:
+         *
+         *  import { parse } from 'date-fns/parse';
+         *  import { eo } from 'date-fns/locale/eo'
+         *
+         *  function parseDate(date, formatStr) {
+         *    return parse(date, formatStr, new Date(), { locale: eo });
+         *  }
+         *
+         */
         skip: string;
     } | undefined;
     DateTimeFormats?: {
@@ -143,9 +156,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any; /**
-         * The prefix of the component CSS class
-         */
+        dateLocale: any;
     } | undefined;
     Calendar?: {
         sunday: string;
@@ -166,9 +177,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any; /**
-         * The prefix of the component CSS class
-         */
+        dateLocale: any;
     } | undefined;
     DatePicker?: {
         sunday: string;
@@ -189,9 +198,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any; /**
-         * The prefix of the component CSS class
-         */
+        dateLocale: any;
     } | undefined;
     DateRangePicker?: {
         last7Days: string;
@@ -213,9 +220,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any; /**
-         * The prefix of the component CSS class
-         */
+        dateLocale: any;
     } | undefined;
     Combobox?: {
         noResultsText: string;
@@ -224,6 +229,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         checkAll: string;
     } | undefined;
     InputPicker?: {
+        /**
+         * Right-to-left text direction.
+         */
         newItem: string;
         createOption: string;
         noResultsText: string;
@@ -232,6 +240,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         checkAll: string;
     } | undefined;
     TagPicker?: {
+        /**
+         * Right-to-left text direction.
+         */
         newItem: string;
         createOption: string;
         noResultsText: string;
@@ -256,7 +267,10 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     Toggle?: {
         on: string;
-        off: string;
+        off: string; /**
+         * If true, the ripple effect is disabled.
+         * Affected components include: Button, Nav.Item, Pagination.
+         */
     } | undefined;
 }>>;
 /**

package/esm/CustomProvider/CustomProvider.js

@@ -2,7 +2,7 @@
 import React, { useRef, useMemo } from 'react';
 import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
-import { getClassNamePrefix, prefix } from "../internals/utils/prefix.js";
+import { getClassNamePrefix, prefix } from "../internals/utils/index.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
 import ToastContainer, { toastPlacements, defaultToasterContainer } from "../toaster/ToastContainer.js";
 export const CustomContext = /*#__PURE__*/React.createContext({});

package/esm/CustomProvider/types.d.ts

@@ -53,6 +53,7 @@ import type { InputProps } from '../Input';
 import type { InputGroupProps } from '../InputGroup';
 import type { InputNumberProps } from '../InputNumber';
 import type { InputPickerProps } from '../InputPicker';
+import type { KbdProps } from '../Kbd';
 import type { ImageProps } from '../Image';
 import type { ListProps } from '../List';
 import type { LoaderProps } from '../Loader';
@@ -166,6 +167,7 @@ export interface ReactSuiteComponents {
     InputNumber: ComponentProps<InputNumberProps>;
     InputPicker: ComponentProps<InputPickerProps>;
     Image: ComponentProps<ImageProps>;
+    Kbd: ComponentProps<KbdProps>;
     List: ComponentProps<ListProps>;
     Loader: ComponentProps<LoaderProps>;
     MaskedInput: ComponentProps<MaskedInputProps>;

package/esm/DateInput/DateField.d.ts

@@ -29,128 +29,8 @@ interface Action {
     value: any;
 }
 export declare const useDateField: (format: string, localize: Locale['localize'], date?: Date | null) => {
-    dateField: {
-        year: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        month: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        day: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        hour: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        minute: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        second: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    };
-    dispatch: import("react").Dispatch<Action>;
+    dateField: DateField;
+    dispatch: import("react").ActionDispatch<[action: Action]>;
     toDate: (type?: string, value?: number | null) => Date | null;
     toDateString: () => string;
     isEmptyValue: (type?: string, value?: number | null) => boolean | undefined;

package/esm/DateInput/DateInput.js

@@ -39,7 +39,7 @@ const DateInput = forwardRef((props, ref) => {
     onPaste,
     ...rest
   } = propsWithDefaults;
-  const inputRef = useRef();
+  const inputRef = useRef(null);
   const {
     selectedState,
     setSelectedState

package/esm/DateInput/hooks/useDateInputState.d.ts

@@ -6,127 +6,7 @@ interface DateInputState {
     isControlledDate?: boolean;
 }
 export declare function useDateInputState({ formatStr, locale, date, isControlledDate }: DateInputState): {
-    dateField: {
-        year: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        month: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        day: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        hour: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        hour: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        minute: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        minute: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        second: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    } | {
-        second: any;
-        format: string;
-        patternArray: {
-            pattern: string;
-            key: string;
-        }[];
-        year: number | null;
-        month: number | null;
-        day: number | null;
-        hour: number | null;
-        minute: number | null;
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
-        should: Chai.Assertion;
-    };
+    dateField: import("../DateField").DateField;
     setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date | null) => void) | undefined) => void;
     setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date | null) => void) | undefined) => void;
     setNewDate: (value: Date | null) => void;

package/esm/DatePicker/DatePicker.js

@@ -17,7 +17,7 @@ import useCustomizedInput from "./hooks/useCustomizedInput.js";
 import { useCalendarDate } from "../Calendar/hooks/index.js";
 import { isEveryDateInMonth } from "../Calendar/utils/index.js";
 import { forwardRef, mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
-import { useClassNames, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { isValid, copyTime, disableTime, DateMode, useDateMode, calendarOnlyProps } from "../internals/utils/date/index.js";
 import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger.js";
@@ -54,16 +54,15 @@ const DatePicker = forwardRef((props, ref) => {
     locale,
     loading,
     label,
-    menuClassName,
-    menuStyle,
+    popupClassName,
+    popupStyle,
     appearance = 'default',
     placement = 'bottomStart',
     oneTap,
     placeholder = '',
     ranges,
     value: valueProp,
-    showMeridian: DEPRECATED_showMeridian,
-    showMeridiem = DEPRECATED_showMeridian,
+    showMeridiem,
     showWeekNumbers,
     style,
     size,
@@ -86,10 +85,6 @@ const DatePicker = forwardRef((props, ref) => {
     onShortcutClick,
     renderCell,
     renderValue,
-    disabledDate: DEPRECATED_disabledDate,
-    disabledHours: DEPRECATED_disabledHours,
-    disabledMinutes: DEPRECATED_disabledMinutes,
-    disabledSeconds: DEPRECATED_disabledSeconds,
     ...restProps
   } = propsWithDefaults;
   const id = useUniqueId('rs-', idProp);
@@ -103,7 +98,7 @@ const DatePicker = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const [value, setValue] = useControlled(valueProp, defaultValue);
   const {
     calendarDate,
@@ -141,9 +136,6 @@ const DatePicker = forwardRef((props, ref) => {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
     }
-    if (typeof DEPRECATED_disabledDate === 'function') {
-      return DEPRECATED_disabledDate(date);
-    }
     return false;
   };
 
@@ -357,27 +349,20 @@ const DatePicker = forwardRef((props, ref) => {
   } = splitRanges(ranges);
   const renderCalendarOverlay = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = merge(menuClassName, className, prefix('popup-date'));
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
+    const classes = merge(popupClassName, className, prefix('popup-date'));
     return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? `${id}-label` : undefined,
       tabIndex: -1,
       className: classes,
       ref: mergeRefs(overlay, speakerRef),
-      style: styles,
+      style: popupStyle,
       target: trigger,
       onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
-      alignItems: "flex-start"
+      align: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
       direction: "column",
       spacing: 0,
@@ -393,9 +378,9 @@ const DatePicker = forwardRef((props, ref) => {
       showWeekNumbers: showWeekNumbers,
       showMeridiem: showMeridiem,
       disabledDate: isDateDisabled,
-      disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
-      disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
-      disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
+      disabledHours: shouldDisableHour,
+      disabledMinutes: shouldDisableMinute,
+      disabledSeconds: shouldDisableSecond,
       limitEndYear: limitEndYear,
       limitStartYear: limitStartYear,
       format: formatStr,
@@ -425,6 +410,7 @@ const DatePicker = forwardRef((props, ref) => {
   const hasValue = isValid(value);
   const [classes, usedClassNamePropKeys] = usePickerClassName({
     ...props,
+    className,
     classPrefix,
     name: 'date',
     appearance,
@@ -477,7 +463,7 @@ const DatePicker = forwardRef((props, ref) => {
     onExit: createChainedFunction(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
-    className: merge(className, classes, {
+    className: merge(classes, {
       [prefix('error')]: invalidValue
     }),
     style: style,
@@ -510,6 +496,7 @@ const DatePicker = forwardRef((props, ref) => {
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
+    size: size,
     loading: loading,
     caretAs: caretAs,
     onClose: handleClean,

package/esm/DatePicker/PredefinedRanges.d.ts

@@ -4,7 +4,7 @@ import type { InnerRange } from './types';
 import type { CalendarLocale } from '../locales';
 import type { DateOptionPreset } from '../internals/types';
 export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps {
-    ranges?: DateOptionPreset<Shortcut>[];
+    ranges?: DateOptionPreset<Shortcut | null>[];
     calendarDate: T;
     locale?: CalendarLocale;
     disableShortcut?: (value: T) => boolean;

package/esm/DatePicker/PredefinedRanges.js

@@ -29,7 +29,7 @@ const PredefinedRanges = /*#__PURE__*/React.forwardRef(function PredefinedRanges
   return /*#__PURE__*/React.createElement(Stack, _extends({
     className: className,
     ref: ref,
-    alignItems: "flex-start",
+    align: "flex-start",
     spacing: 4
   }, rest), ranges.map((range, index) => {
     const {

package/esm/DatePicker/Toolbar.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Button from "../Button/index.js";
 import PredefinedRanges from "./PredefinedRanges.js";
 import Stack from "../Stack/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const OkButton = _ref => {
   let {
     disableOkBtn,
@@ -41,17 +41,17 @@ const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   if (hideOkBtn && (ranges === null || ranges === void 0 ? void 0 : ranges.length) === 0) {
     return null;
   }
-  const classes = merge(className, withClassPrefix());
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Stack, _extends({
     ref: ref,
     className: classes,
-    justifyContent: "space-between",
-    alignItems: "flex-start"
+    justify: "space-between",
+    align: "flex-start"
   }, rest), /*#__PURE__*/React.createElement(PredefinedRanges, {
     wrap: true,
     className: prefix('ranges'),

package/esm/DatePicker/hooks/useFocus.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 interface UseFocusProps {
-    target: RefObject<HTMLElement>;
+    target: RefObject<HTMLElement | null>;
     showMonth: boolean;
     id: string;
     locale: any;

package/esm/DatePicker/utils.d.ts

@@ -9,7 +9,7 @@ export declare function getDefaultRanges<T extends Date | DateRange>(value: T):
  * @param ranges
  * @param calendarDate
  */
-export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
+export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T | null>[];
 export declare function splitRanges(ranges?: DateOptionPreset<Date>[]): {
     sideRanges: DateOptionPreset<Date>[];
     bottomRanges: DateOptionPreset<Date>[];

package/esm/DateRangeInput/DateRangeInput.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useRef, useMemo } from 'react';
 import Input from "../Input/index.js";
 import { isValid } from "../internals/utils/date/index.js";
-import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import { validateDateTime, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused, useSelectedState, useFieldCursor } from "../DateInput/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -39,11 +39,11 @@ const DateRangeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
-  const inputRef = useRef();
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const inputRef = useRef(null);
   const {
     selectedState,
     setSelectedState