rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/cjs/CascadeTree/types.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { ItemDataType, DataProps, WithAsProps, ToArray } from '../internals/types';
+import { Option, DataProps, WithAsProps, ToArray } from '../internals/types';
 export interface SelectNode<T> {
-    itemData: ItemDataType<T>;
-    cascadePaths: ItemDataType<T>[];
+    itemData: Option<T>;
+    cascadePaths: Option<T>[];
     isLeafNode: boolean;
 }
 export interface CascadeColumn<T> {
-    items: readonly ItemDataType<T>[];
-    parentItem?: ItemDataType<T>;
+    items: readonly Option<T>[];
+    parentItem?: Option<T>;
     layer?: number;
 }
-export interface CascadeTreeProps<T = any, V = T, L = any> extends WithAsProps, DataProps<ItemDataType<T>> {
+export interface CascadeTreeProps<T = any, V = T, L = any> extends WithAsProps, DataProps<Option<T>> {
     /**
      * Initial value
      */
@@ -46,15 +46,15 @@ export interface CascadeTreeProps<T = any, V = T, L = any> extends WithAsProps,
     /**
      * Custom render tree node
      */
-    renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
+    renderTreeNode?: (node: React.ReactNode, itemData: Option<T>) => React.ReactNode;
     /**
      * Custom render search items
      */
-    renderSearchItem?: (node: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
+    renderSearchItem?: (node: React.ReactNode, items: Option<T>[]) => React.ReactNode;
     /**
      * Called when the option is selected
      */
-    onSelect?: (value: ItemDataType<T>, selectedPaths: ItemDataType<T>[], event: React.SyntheticEvent) => void;
+    onSelect?: (value: Option<T>, selectedPaths: Option<T>[], event: React.SyntheticEvent) => void;
     /**
      * Called after the value has been changed
      */
@@ -66,5 +66,5 @@ export interface CascadeTreeProps<T = any, V = T, L = any> extends WithAsProps,
     /**
      * Asynchronously load the children of the tree node.
      */
-    getChildren?: (childNodes: ItemDataType<T>) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
+    getChildren?: (childNodes: Option<T>) => Option<T>[] | Promise<Option<T>[]>;
 }

package/cjs/Cascader/Cascader.d.ts

@@ -2,68 +2,31 @@ import React from 'react';
 import type { CascadeTreeProps } from '../CascadeTree/types';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
-import { ItemDataType, DataItemValue, FormControlPickerProps } from '../internals/types';
-export interface CascaderProps<T = DataItemValue> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, CascadeTreeProps<T, T, PickerLocale>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
+import { Option, OptionValue, FormControlPickerProps, DeprecatedMenuProps } from '../internals/types';
+interface DeprecatedProps extends DeprecatedMenuProps {
     /**
      * The panel is displayed directly when the component is initialized
      * @deprecated Use CascadeTree instead
      * @see CascadeTree https://rsuitejs.com/components/cascade-tree
      */
     inline?: boolean;
+}
+export interface CascaderProps<T = OptionValue> extends FormControlPickerProps<T, PickerLocale, Option<T>>, CascadeTreeProps<T, T, PickerLocale>, DeprecatedProps, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
     /**
      * When true, make the parent node selectable
      */
     parentSelectable?: boolean;
-    /**
-     * Custom popup style
-     */
-    popupClassName?: string;
-    /**
-     * Custom popup style
-     */
-    popupStyle?: React.CSSProperties;
-    /**
-     * Custom menu class name
-     * @deprecated Use popupClassName instead
-     */
-    menuClassName?: string;
-    /**
-     * Custom menu style
-     * @deprecated Use popupStyle instead
-     */
-    menuStyle?: React.CSSProperties;
-    /**
-     * Sets the width of the menu.
-     *
-     * @deprecated Use columnWidth instead
-     */
-    menuWidth?: number;
-    /**
-     * Sets the height of the menu
-     * @deprecated Use columnHeight instead
-     */
-    menuHeight?: number | string;
-    /**
-     * Custom render menu
-     * @deprecated Use renderColumn instead
-     */
-    renderMenu?: (items: readonly ItemDataType<T>[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
-    /**
-     * Custom render menu item
-     * @deprecated Use renderTreeNode instead
-     */
-    renderMenuItem?: (node: React.ReactNode, item: ItemDataType<T>) => React.ReactNode;
     /**
      * Custom render selected items
      */
-    renderValue?: (value: T, selectedPaths: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
+    renderValue?: (value: T, selectedPaths: Option<T>[], selectedElement: React.ReactNode) => React.ReactNode;
     /**
      * Called when clean
      */
     onClean?: (event: React.SyntheticEvent) => void;
 }
 export interface CascaderComponent {
-    <T>(props: CascaderProps<T>): JSX.Element | null;
+    <T>(props: CascaderProps<T>): React.ReactElement | null;
     displayName?: string;
 }
 /**

package/cjs/Cascader/Cascader.js

@@ -69,12 +69,6 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
     onSelect,
     onSearch,
     getChildren,
-    menuClassName: DEPRECATED_menuClassName,
-    menuStyle: DEPRECATED_menuStyle,
-    menuWidth: DEPRECATED_menuWidth,
-    menuHeight: DEPRECATED_menuHeight,
-    renderMenuItem: DEPRECATED_renderMenuItem,
-    renderMenu: DEPRECATED_renderMenu,
     ...rest
   } = propsWithDefaults;
   const {
@@ -168,7 +162,7 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks2.useClassNames)(classPrefix);
+  } = (0, _hooks2.useStyles)(classPrefix);
   const onFocusItemCallback = (0, _react.useCallback)(value => {
     setActiveItem(flattenedData.find(item => item[valueKey] === value));
   }, [flattenedData, setActiveItem, valueKey]);
@@ -278,42 +272,26 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
     onChange === null || onChange === void 0 || onChange(nextValue, event);
   });
   const renderCascadeColumn = (childNodes, column) => {
-    const {
-      items,
-      parentItem,
-      layer
-    } = column;
     if (typeof renderColumn === 'function') {
       return renderColumn(childNodes, column);
-    } else if (typeof DEPRECATED_renderMenu === 'function') {
-      return DEPRECATED_renderMenu(items, childNodes, parentItem, layer);
     }
     return childNodes;
   };
   const renderCascadeTreeNode = (node, itemData) => {
-    const render = typeof renderTreeNode === 'function' ? renderTreeNode : DEPRECATED_renderMenuItem;
-    if (typeof render === 'function') {
-      return render(node, itemData);
+    if (typeof renderTreeNode === 'function') {
+      return renderTreeNode(node, itemData);
     }
     return node;
   };
   const renderTreeView = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps || {};
-    const styles = {
-      ...DEPRECATED_menuStyle,
-      ...popupStyle,
-      left,
-      top
-    };
-    const classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('popup-cascader'));
+    const classes = merge(className, popupClassName, prefix('popup-cascader'));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       className: classes,
-      style: styles,
+      style: popupStyle,
       target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {
@@ -330,8 +308,8 @@ const Cascader = (0, _utils3.forwardRef)((props, ref) => {
       onSelect: handleSearchRowSelect,
       onSearch: handleSearch
     }), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
-      columnWidth: columnWidth !== null && columnWidth !== void 0 ? columnWidth : DEPRECATED_menuWidth,
-      columnHeight: columnHeight !== null && columnHeight !== void 0 ? columnHeight : DEPRECATED_menuHeight,
+      columnWidth: columnWidth,
+      columnHeight: columnHeight,
       disabledItemValues: disabledItemValues,
       loadingItemsSet: loadingItemsSet,
       valueKey: valueKey,

package/cjs/Cascader/useActive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface UseActiveProps {
-    target: React.RefObject<HTMLElement>;
+    target: React.RefObject<HTMLElement | null>;
     onOpen?: () => void;
     onClose?: () => void;
     onEntered?: (node: HTMLElement) => void;

package/cjs/Center/Center.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../internals/Box';
+export interface CenterProps extends BoxProps {
+    inline?: boolean;
+}
+declare const Center: import("../internals/types").InternalRefForwardingComponent<"div", CenterProps, never> & Record<string, never>;
+export default Center;

package/cjs/Center/Center.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+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");
+const Center = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    as,
+    classPrefix = 'center',
+    className,
+    children,
+    inline,
+    ...rest
+  } = props;
+  const {
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    ref: ref,
+    "data-inline": inline,
+    className: classes
+  }, rest), children);
+});
+Center.displayName = 'Center';
+var _default = exports.default = Center;

package/cjs/Center/index.d.ts

@@ -0,0 +1,4 @@
+import Center from './Center';
+export type { CenterProps } from './Center';
+export { Center };
+export default Center;

package/cjs/Center/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Center = _interopRequireDefault(require("./Center"));
+exports.Center = _Center.default;
+// export types
+// export components
+var _default = exports.default = _Center.default;

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,17 +1,19 @@
-/// <reference types="react" />
+import React from 'react';
 import { PickerToggleProps } from '../internals/Picker';
 import type { PickerLocale } from '../locales';
-import type { ItemDataType, FormControlPickerProps } from '../internals/types';
-import type { MultipleSelectProps } from '../SelectPicker';
+import type { Option, FormControlPickerProps } from '../internals/types';
+import type { SelectProps } from '../SelectPicker';
 export type ValueType = (number | string)[];
-export interface CheckPickerProps<T = any> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
+export interface CheckPickerProps<T = any> extends FormControlPickerProps<T[], PickerLocale, Option<T>>, Omit<SelectProps<T>, 'renderValue'>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */
     countable?: boolean;
+    /** Custom render selected items */
+    renderValue?: (value: T[], item: Option<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
 export interface CheckPickerComponent {
-    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    <T>(props: CheckPickerProps<T>): React.ReactElement | null;
     displayName?: string;
 }
 /**

package/cjs/CheckPicker/CheckPicker.js

@@ -42,10 +42,10 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     virtualized,
     cleanable = true,
     placement = 'bottomStart',
-    menuAutoWidth = true,
-    menuMaxHeight = 320,
-    menuClassName,
-    menuStyle,
+    popupAutoWidth = true,
+    listboxMaxHeight = 320,
+    popupClassName,
+    popupStyle,
     locale,
     placeholder,
     disabled,
@@ -59,11 +59,11 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     id,
     sort,
     searchBy,
-    renderMenuItem,
-    renderMenuGroup,
+    renderOption,
+    renderOptionGroup,
+    renderListbox,
     renderValue,
     renderExtraFooter,
-    renderMenu,
     onGroupTitleClick,
     onSearch,
     onEnter,
@@ -204,7 +204,7 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
   const {
     prefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   let selectedElement = placeholder;
   if (selectedItems.length > 0) {
     selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {
@@ -224,16 +224,9 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
   }
   const renderPopup = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = merge(className, menuClassName, prefix('check-menu'));
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
+    const classes = merge(className, popupClassName, prefix('check-menu'));
     let items = filteredData;
     let filteredStickyItems = [];
     if (stickyItems) {
@@ -249,15 +242,15 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    const menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
+    const listbox = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
-      renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderMenuItem,
-      maxHeight: menuMaxHeight,
+      renderOptionGroup: renderOptionGroup,
+      renderOption: renderOption,
+      maxHeight: listboxMaxHeight,
       classPrefix: 'picker-check-menu',
       listItemAs: _Picker.ListCheckItem,
       activeItemValues: value,
@@ -273,9 +266,9 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: styles,
+      style: popupStyle,
       onKeyDown: onPickerKeyDown,
       target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
@@ -283,7 +276,7 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
       onChange: handleSearch,
       value: searchKeyword,
       inputRef: searchInput
-    }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
+    }), renderListbox ? renderListbox(listbox) : listbox, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   const [classes, usedClassNamePropKeys] = (0, _Picker.usePickerClassName)({
     ...props,

package/cjs/CheckTree/CheckTreeNode.js

@@ -50,8 +50,8 @@ const CheckTreeNode = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const labelStr = (0, _react.useMemo)(() => (0, _utils.stringifyReactNode)(label), [label]);
   const handleExpand = (0, _hooks.useEventCallback)(event => {
     var _event$nativeEvent, _event$nativeEvent$st;
@@ -73,7 +73,7 @@ const CheckTreeNode = (0, _utils.forwardRef)((props, ref) => {
     };
     onSelect === null || onSelect === void 0 || onSelect(nextNodeData, event);
   });
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     disabled,
     'all-uncheckable': !!allUncheckable,
     'text-muted': disabled,

package/cjs/CheckTree/CheckTreeView.d.ts

@@ -17,7 +17,7 @@ export interface CheckTreeViewProps<V = (string | number)[]> extends TreeViewBas
     /**
      * Searchbox input ref object.
      */
-    searchInputRef?: React.RefObject<HTMLInputElement>;
+    searchInputRef?: React.RefObject<HTMLInputElement | null>;
     /**
      * Whether display search input box.
      */

package/cjs/CheckTree/CheckTreeView.js

@@ -78,8 +78,8 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     getCheckedValues
   } = (0, _useTreeCheckState.default)({
@@ -258,7 +258,7 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
       ref: ref => saveTreeNodeRef(ref, refKey)
     }, treeNodeProps));
   };
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     'without-children': !(0, _utils3.hasGrandchild)(data, childrenKey),
     virtualized
   }));

package/cjs/CheckTreePicker/CheckTreePicker.d.ts

@@ -3,22 +3,14 @@ import { type CheckTreeViewProps } from '../CheckTree/CheckTreeView';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import type { TreeNode } from '../internals/Tree/types';
-import type { FormControlPickerProps, ItemDataType, DeprecatedPickerProps } from '../internals/types';
+import type { FormControlPickerProps, Option, DeprecatedMenuProps } from '../internals/types';
 import type { TreeExtraProps } from '../Tree/types';
 export type ValueType = (string | number)[];
-export interface CheckTreePickerProps<V = ValueType> extends Omit<CheckTreeViewProps<V>, 'value' | 'onChange' | 'data'>, TreeExtraProps, DeprecatedPickerProps, FormControlPickerProps<V, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface CheckTreePickerProps<V = ValueType> extends Omit<CheckTreeViewProps<V>, 'value' | 'onChange' | 'data'>, TreeExtraProps, DeprecatedMenuProps, FormControlPickerProps<V, PickerLocale, Option>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /**
      * A picker that can be counted
      */
     countable?: boolean;
-    /**
-     * Custom popup style
-     */
-    popupClassName?: string;
-    /**
-     * Custom popup style
-     */
-    popupStyle?: React.CSSProperties;
     /**
      * The height of the tree
      */

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -57,9 +57,6 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     placement = 'bottomStart',
     treeHeight = 320,
     toggleAs,
-    menuAutoWidth = popupAutoWidth,
-    menuClassName: DEPRECATED_menuClassName,
-    menuStyle: DEPRECATED_menuStyle,
     style,
     searchBy,
     searchKeyword,
@@ -84,8 +81,7 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     onScroll,
     onExpand,
     renderValue,
-    renderMenu: DEPRECATED_renderMenu,
-    renderTree = DEPRECATED_renderMenu,
+    renderTree,
     renderTreeIcon,
     renderTreeNode,
     ...rest
@@ -101,7 +97,7 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _Picker.usePickerRef)(ref);
   const {
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const [value, setValue] = (0, _useTreeValue.default)(controlledValue, {
     defaultValue,
     uncheckableItemValues
@@ -223,22 +219,14 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
   }));
   const renderTreeView = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = (0, _classnames.default)(className, popupClassName, DEPRECATED_menuClassName, prefix('check-tree-menu'));
-    const mergedMenuStyle = {
-      ...popupStyle,
-      ...DEPRECATED_menuStyle,
-      left,
-      top
-    };
+    const classes = (0, _classnames.default)(className, popupClassName, prefix('check-tree-menu'));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
-      autoWidth: menuAutoWidth,
+      autoWidth: popupAutoWidth,
       className: classes,
-      style: mergedMenuStyle,
+      style: popupStyle,
       onKeyDown: onPickerKeydown,
       target: trigger
     }, renderTree ? renderTree(checkTreeView) : checkTreeView, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());

package/cjs/CheckTreePicker/hooks/useFocusState.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface FocusStateProps {
-    target: React.RefObject<HTMLElement>;
+    target: React.RefObject<HTMLElement | null>;
     onEnter?: (node: HTMLElement) => void;
     onExit?: (node: HTMLElement) => void;
 }

package/cjs/Checkbox/Checkbox.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { WithAsProps, ColorType } from '../internals/types';
-export interface CheckboxProps<V = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import { WithAsProps, Color, HTMLPropsWithoutChange } from '../internals/types';
+export interface CheckboxProps<V = string | number> extends WithAsProps, HTMLPropsWithoutChange<HTMLDivElement> {
     /**
      * The color of the checkbox when checked or indeterminate
      *
      * @version 5.56.0
      */
-    color?: ColorType;
+    color?: Color;
     /**
      * Whether to show checkbox
      *

package/cjs/Checkbox/Checkbox.js

@@ -70,9 +70,9 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(color, {
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(color, {
     inline,
     indeterminate,
     disabled,

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -40,9 +40,9 @@ const CheckboxGroup = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     inline
   }));
   const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, defaultValue);

package/cjs/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/cjs/Col/index.js

@@ -4,7 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _Col = _interopRequireDefault(require("./Col"));
+var _Col = _interopRequireDefault(require("../Grid/Col"));
 exports.Col = _Col.default;
 // export types
 // export components

package/cjs/Container/Container.js

@@ -29,10 +29,10 @@ const Container = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const [hasSidebar, setHasSidebar] = (0, _react.useState)(false);
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     'has-sidebar': hasSidebar
   }));
   const contextValue = (0, _react.useMemo)(() => ({