rsuite 5.76.2 → 6.0.0-canary-20250103

package/cjs/internals/types/index.d.ts

@@ -1,22 +1,29 @@
-import React from 'react';
+import { ReactNode, CSSProperties, ElementType, InputHTMLAttributes, SyntheticEvent, FocusEventHandler } from 'react';
 import { ReplaceProps } from './utils';
+import { Placement } from './placement';
+import { Colours } from './colours';
+export * from './placement';
+export * from './colours';
 export interface StandardProps {
     /** The prefix of the component CSS class */
     classPrefix?: string;
     /** Additional classes */
     className?: string;
     /** Primary content */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Additional style */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
-export interface WithAsProps<As extends React.ElementType | string = React.ElementType> extends StandardProps {
+export interface WithAsProps<As extends ElementType | string = ElementType> extends StandardProps {
     /** You can use a custom element for this component */
     as?: As;
 }
-export interface RsRefForwardingComponent<T extends React.ElementType, P = unknown> {
-    <As extends React.ElementType = T>(props: React.PropsWithChildren<ReplaceProps<As, WithAsProps<As> & P>>, context?: any): React.ReactElement | null;
-    propTypes?: any;
+export interface WithAsPropsWithoutChildren<As extends ElementType | string = ElementType> extends Omit<StandardProps, 'children'> {
+    /** You can use a custom element for this component */
+    as?: As;
+}
+export interface RsRefForwardingComponent<T extends ElementType, P = unknown, ExcludeChildren extends boolean = false> {
+    <As extends ElementType = T>(props: ReplaceProps<As, ExcludeChildren extends true ? WithAsPropsWithoutChildren<As> & P : WithAsProps<As> & P>, context?: any): any;
     contextTypes?: any;
     displayName?: string;
 }
@@ -50,19 +57,19 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /** A picker can show it is currently unable to be interacted with */
     disabled?: boolean;
     /** You can use a custom element for this component */
-    toggleAs?: React.ElementType;
+    toggleAs?: ElementType;
     /** A CSS class to apply to the Menu DOM node. */
     menuClassName?: string;
     /** A style to apply to the Menu DOM node. */
-    menuStyle?: React.CSSProperties;
+    menuStyle?: CSSProperties;
     /** Picker menu auto width */
     menuAutoWidth?: boolean;
     /** Picker menu max Height */
     menuMaxHeight?: number;
     /** Placeholder text */
-    placeholder?: React.ReactNode;
+    placeholder?: ReactNode;
     /** The placement of picker */
-    placement?: TypeAttributes.Placement;
+    placement?: Placement;
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
     /** Open the menu and control it */
@@ -80,13 +87,13 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /**
      * Called when the component is focused.
      */
-    onFocus?: React.FocusEventHandler<any>;
+    onFocus?: FocusEventHandler<any>;
     /**
      * Called when the component is blurred.
      */
-    onBlur?: React.FocusEventHandler<any>;
+    onBlur?: FocusEventHandler<any>;
     /** Custom render extra footer */
-    renderExtraFooter?: () => React.ReactNode;
+    renderExtraFooter?: () => ReactNode;
 }
 export interface DeprecatedPickerProps {
     /**
@@ -98,7 +105,7 @@ export interface DeprecatedPickerProps {
      * Custom menu style
      * @deprecated Use `popupStyle` instead
      */
-    menuStyle?: React.CSSProperties;
+    menuStyle?: CSSProperties;
     /**
      * Picker menu auto width
      *
@@ -109,9 +116,9 @@ export interface DeprecatedPickerProps {
      * Custom render tree
      * @deprecated Use `renderTree` instead
      */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
+    renderMenu?: (menu: ReactNode) => ReactNode;
 }
-export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTMLInputElement>['value']> {
+export interface FormControlBaseProps<ValueType = InputHTMLAttributes<HTMLInputElement>['value']> {
     /** Name of the form field */
     name?: string;
     /** Initial value */
@@ -120,10 +127,10 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     value?: ValueType;
     /**
      * Called after the value has been changed
-     * todo Override event as React.ChangeEvent in components where onChange is delegated
+     * todo Override event as ChangeEvent in components where onChange is delegated
      *      to an underlying <input> element
      */
-    onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
+    onChange?: (value: ValueType, event: SyntheticEvent) => void;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;
     /** Render the control as plain text */
@@ -165,12 +172,8 @@ export interface FormControlPickerProps<T = any, L = any, D = Record<string, any
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
     type Status = 'success' | 'warning' | 'error' | 'info';
-    type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
+    type Color = `${Colours}`;
     type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
-    type Placement4 = 'top' | 'bottom' | 'right' | 'left';
-    type Placement8 = 'bottomStart' | 'bottomEnd' | 'topStart' | 'topEnd' | 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
-    type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
-    type Placement = Placement4 | Placement8 | PlacementAuto;
     type CheckTrigger = 'change' | 'blur' | 'none' | null;
     type DisplayState = 'show' | 'hide' | 'hiding';
 }
@@ -179,7 +182,7 @@ export interface SVGIcon {
     id: string;
 }
 export interface ItemDataType<T = number | string> extends Record<string, any> {
-    label?: string | React.ReactNode;
+    label?: string | ReactNode;
     value?: T;
     groupBy?: string;
     parent?: ItemDataType<T>;
@@ -193,7 +196,7 @@ export interface Offset {
     width: number;
     height: number;
 }
-export type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
+export type OnChangeCallback<T, E = SyntheticEvent> = (value: T, event: E) => void;
 export type CursorPosition = {
     top: number;
     left: number;

package/cjs/internals/types/index.js

@@ -1,4 +1,16 @@
 'use client';
 "use strict";
 
-exports.__esModule = true;
+exports.__esModule = true;
+var _placement = require("./placement");
+Object.keys(_placement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _placement[key]) return;
+  exports[key] = _placement[key];
+});
+var _colours = require("./colours");
+Object.keys(_colours).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colours[key]) return;
+  exports[key] = _colours[key];
+});

package/cjs/internals/types/placement.d.ts

@@ -0,0 +1,5 @@
+export type PlacementCardinal = 'top' | 'bottom' | 'right' | 'left';
+export type PlacementCornersPolyfill = 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
+export type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | PlacementCornersPolyfill;
+export type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
+export type Placement = PlacementCardinal | PlacementCorners | PlacementAuto;

package/cjs/internals/types/placement.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/internals/utils/BrowserDetection.d.ts

@@ -1,12 +1,2 @@
 export declare const isIE: () => boolean;
-export declare const isIE10: () => boolean;
-export declare const isIE11: () => boolean;
-export declare const isEdge: () => boolean;
 export declare const isAndroid: () => boolean;
-export declare const getChromeVersion: () => number | false;
-export declare const getSafariVersion: () => number | false;
-/**
- * flexbox-gap compatibility
- * @see https://caniuse.com/flexbox-gap
- */
-export declare const isSupportFlexGap: () => boolean;

package/cjs/internals/utils/BrowserDetection.js

@@ -3,68 +3,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.isSupportFlexGap = exports.isIE11 = exports.isIE10 = exports.isIE = exports.isEdge = exports.isAndroid = exports.getSafariVersion = exports.getChromeVersion = void 0;
+exports.isIE = exports.isAndroid = void 0;
 var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
 // from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
 
 // Internet Explorer 6-11
-var isIE = exports.isIE = function isIE() {
-  return _canUseDOM.default && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
-};
-var isIE10 = exports.isIE10 = function isIE10() {
-  return _canUseDOM.default && !!window.navigator.userAgent.match(/MSIE 10.0/);
-};
-var isIE11 = exports.isIE11 = function isIE11() {
-  return _canUseDOM.default && window.navigator.userAgent.indexOf('Trident') > -1 && window.navigator.userAgent.indexOf('rv:11.0') > -1;
-};
-
-// Edge 20+
-var isEdge = exports.isEdge = function isEdge() {
-  return _canUseDOM.default && !isIE() && 'styleMedia' in window;
-};
-var isAndroid = exports.isAndroid = function isAndroid() {
-  return _canUseDOM.default && /Android/i.test(navigator.userAgent);
-};
-var getChromeVersion = exports.getChromeVersion = function getChromeVersion() {
-  if (_canUseDOM.default) {
-    var match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
-    return match ? parseFloat(match[2]) : false;
-  }
-  return false;
-};
-var getSafariVersion = exports.getSafariVersion = function getSafariVersion() {
-  if (_canUseDOM.default) {
-    var match = window.navigator.userAgent.match(/Version\/([\d\.]+).*Safari/);
-    return match ? parseFloat(match[1]) : false;
-  }
-  return false;
-};
-
-/**
- * flexbox-gap compatibility
- * @see https://caniuse.com/flexbox-gap
- */
-var isSupportFlexGap = exports.isSupportFlexGap = function isSupportFlexGap() {
-  // Check if the browser supports the `gap` property
-  if (typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined') {
-    return CSS.supports('(gap: 1px)');
-  }
-
-  // IE does not support flex-gap
-  if (isIE()) {
-    return false;
-  }
-  var chromeVersion = getChromeVersion();
-  var safariVersion = getSafariVersion();
-
-  // edge consider as chrome
-  if (chromeVersion) {
-    // flex-gap is support in Chrome 84+
-    return chromeVersion >= 84;
-  }
-  if (safariVersion) {
-    // flex-gap is support in Safari 14.1+
-    return safariVersion >= 14.1;
-  }
-  return true;
-};
+const isIE = () => _canUseDOM.default && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+exports.isIE = isIE;
+const isAndroid = () => _canUseDOM.default && /Android/i.test(navigator.userAgent);
+exports.isAndroid = isAndroid;

package/cjs/internals/utils/ReactChildren.js

@@ -11,7 +11,6 @@ exports.forEach = forEach;
 exports.isFragment = isFragment;
 exports.map = map;
 exports.mapCloneElement = mapCloneElement;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 /**
  * Returns the type of the given object.
@@ -39,7 +38,7 @@ function isFragment(children) {
  * @returns The flattened array of children.
  */
 function flatChildren(children) {
-  return _react.default.Children.toArray(_react.default.Children.map(children, function (child) {
+  return _react.default.Children.toArray(_react.default.Children.map(children, child => {
     if (isFragment(child)) {
       var _child$props;
       return _react.default.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);
@@ -56,9 +55,9 @@ function flatChildren(children) {
  * @returns The first child that satisfies the condition, or undefined if no child is found.
  */
 function find(children, func, context) {
-  var index = 0;
-  var result;
-  _react.default.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  let result;
+  _react.default.Children.forEach(flatChildren(children), child => {
     if (result) {
       return;
     }
@@ -78,12 +77,12 @@ function find(children, func, context) {
  * @returns An array of the results of applying the function to each child.
  */
 function map(children, func, context) {
-  var index = 0;
-  return _react.default.Children.map(flatChildren(children), function (child) {
+  let index = 0;
+  return _react.default.Children.map(flatChildren(children), child => {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return child;
     }
-    var handle = func.call(context, child, index);
+    const handle = func.call(context, child, index);
     index += 1;
     return handle;
   });
@@ -97,11 +96,10 @@ function map(children, func, context) {
  * @returns An array of the cloned and modified child elements.
  */
 function mapCloneElement(children, func, context) {
-  return map(children, function (child, index) {
-    return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({
-      key: index
-    }, func(child, index)));
-  }, context);
+  return map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+    key: index,
+    ...func(child, index)
+  }), context);
 }
 
 /**
@@ -111,8 +109,8 @@ function mapCloneElement(children, func, context) {
  * @param context
  */
 function forEach(children, func, context) {
-  var index = 0;
-  _react.default.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  _react.default.Children.forEach(flatChildren(children), child => {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return;
     }
@@ -138,17 +136,15 @@ function count(children) {
  * @returns True if any child satisfies the condition, false otherwise.
  */
 function some(children, func, context) {
-  var index = 0;
-  var result = false;
-  _react.default.Children.forEach(flatChildren(children), function (child) {
+  let index = 0;
+  let result = false;
+  _react.default.Children.forEach(flatChildren(children), child => {
     if (result) {
       return;
     }
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return;
     }
-
-    /* eslint-disable */
     if (func.call(context, child, index += 1)) {
       result = true;
     }
@@ -159,30 +155,30 @@ function some(children, func, context) {
 /**
  * Utility functions for working with React children.
  */
-var ReactChildren = exports.ReactChildren = {
+const ReactChildren = exports.ReactChildren = {
   /**
    * Maps over the children and clones each child element with the provided props.
    */
-  mapCloneElement: mapCloneElement,
+  mapCloneElement,
   /**
    * Returns the number of children.
    */
-  count: count,
+  count,
   /**
    * Checks if any child satisfies the given condition.
    */
-  some: some,
+  some,
   /**
    * Maps over the children and applies the given function to each child.
    */
-  map: map,
+  map,
   /**
    * Iterates over children that are in flat array form.
    */
-  forEach: forEach,
+  forEach,
   /**
    * Finds the first child that satisfies the given condition.
    */
-  find: find
+  find
 };
 var _default = exports.default = ReactChildren;

package/cjs/internals/utils/colours.d.ts

@@ -0,0 +1,21 @@
+import { Color } from '../types/colours';
+export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+export declare const expandHexColor: (color: string) => string;
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+export declare const getLuminance: (color: string) => number;
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+export declare const getContrastText: (bgColor: string) => string;
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+export declare const createColorVariables: (color?: Color | React.CSSProperties['color'], bgFieldName?: string, textFieldName?: string) => React.CSSProperties | undefined;

package/cjs/internals/utils/colours.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.expandHexColor = exports.createColorVariables = void 0;
+var _colours = require("../types/colours");
+const isPresetColor = color => {
+  if (!color) {
+    return false;
+  }
+  if (color === 'default') {
+    return true;
+  }
+  return Object.values(_colours.Colours).includes(color);
+};
+
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+exports.isPresetColor = isPresetColor;
+const expandHexColor = color => {
+  const hex = color.toLowerCase().replace('#', '');
+  if (hex.length === 3) {
+    return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+  return `#${hex}`;
+};
+
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+exports.expandHexColor = expandHexColor;
+const getLuminance = color => {
+  // Convert hex to rgb
+  const fullHex = expandHexColor(color);
+  const hex = fullHex.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+  // Convert rgb to relative luminance
+  const rs = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+  const gs = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+  const bs = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+exports.getLuminance = getLuminance;
+const getContrastText = bgColor => {
+  // For non-hex colors, return default dark text
+  if (!bgColor.startsWith('#')) {
+    return 'var(--rs-text-primary)';
+  }
+  const luminance = getLuminance(bgColor);
+  return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+exports.getContrastText = getContrastText;
+const createColorVariables = function (color, bgFieldName, textFieldName) {
+  if (bgFieldName === void 0) {
+    bgFieldName = '--rs-color-bg';
+  }
+  if (color && !isPresetColor(color)) {
+    const colorStr = color.toString();
+    // Only convert to hex if it's a hex color
+    const bgColor = colorStr.startsWith('#') ? expandHexColor(colorStr) : colorStr;
+    const styles = {
+      [bgFieldName]: bgColor
+    };
+    if (textFieldName) {
+      styles[textFieldName] = getContrastText(bgColor);
+    }
+    return styles;
+  }
+  return undefined;
+};
+exports.createColorVariables = createColorVariables;

package/cjs/internals/utils/composeFunctions.js

@@ -22,10 +22,6 @@ function composeFunctions() {
   for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     fns[_key] = arguments[_key];
   }
-  return function (first) {
-    return fns.reduce(function (previousValue, fn) {
-      return fn(previousValue);
-    }, first);
-  };
+  return first => fns.reduce((previousValue, fn) => fn(previousValue), first);
 }
 var _default = exports.default = composeFunctions;

package/cjs/internals/utils/createChainedFunction.js

@@ -22,9 +22,7 @@ function createChainedFunction() {
   for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
     funcs[_key] = arguments[_key];
   }
-  return funcs.filter(function (f) {
-    return f !== null && typeof f !== 'undefined';
-  }).reduce(function (acc, f) {
+  return funcs.filter(f => f !== null && typeof f !== 'undefined').reduce((acc, f) => {
     if (typeof f !== 'function') {
       throw new Error('Invalid Argument Type, must only provide functions, undefined, or null.');
     }

package/cjs/internals/utils/createComponent.d.ts

@@ -9,5 +9,5 @@ interface Props<TElement extends React.ElementType> extends React.HTMLAttributes
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
-export declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
+export declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps, false>;
 export default createComponent;

package/cjs/internals/utils/createComponent.js

@@ -6,36 +6,36 @@ exports.__esModule = true;
 exports.createComponent = createComponent;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../hooks");
 var _CustomProvider = require("../../CustomProvider");
-var _excluded = ["name", "componentAs", "componentClassPrefix"],
-  _excluded2 = ["as", "classPrefix", "className", "role"];
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
 function createComponent(_ref) {
-  var name = _ref.name,
-    componentAs = _ref.componentAs,
-    componentClassPrefix = _ref.componentClassPrefix,
-    defaultProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  var Component = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-    var _useCustom = (0, _CustomProvider.useCustom)(name, props),
-      propsWithDefaults = _useCustom.propsWithDefaults;
-    var _propsWithDefaults$as = propsWithDefaults.as,
-      Component = _propsWithDefaults$as === void 0 ? componentAs || 'div' : _propsWithDefaults$as,
-      _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-      classPrefix = _propsWithDefaults$cl === void 0 ? componentClassPrefix || (0, _kebabCase.default)(name) : _propsWithDefaults$cl,
-      className = propsWithDefaults.className,
-      role = propsWithDefaults.role,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded2);
-    var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-    var classes = merge(className, withClassPrefix());
+  let {
+    name,
+    componentAs,
+    componentClassPrefix,
+    ...defaultProps
+  } = _ref;
+  const Component = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+    const {
+      propsWithDefaults
+    } = (0, _CustomProvider.useCustom)(name, props);
+    const {
+      as: Component = componentAs || 'div',
+      classPrefix = componentClassPrefix || (0, _kebabCase.default)(name),
+      className,
+      role,
+      ...rest
+    } = propsWithDefaults;
+    const {
+      withClassPrefix,
+      merge
+    } = (0, _hooks.useClassNames)(classPrefix);
+    const classes = merge(className, withClassPrefix());
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, defaultProps, rest, {
       role: role,
       ref: ref,
@@ -43,12 +43,6 @@ function createComponent(_ref) {
     }));
   });
   Component.displayName = name;
-  Component.propTypes = {
-    as: _propTypes.default.elementType,
-    className: _propTypes.default.string,
-    classPrefix: _propTypes.default.string,
-    children: _propTypes.default.node
-  };
   return Component;
 }
 var _default = exports.default = createComponent;

package/cjs/internals/utils/css.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * Processes and returns a value suitable for CSS (with a unit).
+ */
+export declare function getCssValue(value?: number | string | null, unit?: string): string;
+type CSSVariables = Partial<Record<`--${string}`, string>>;
+type StyleProperties = React.CSSProperties & CSSVariables;
+/**
+ * Merge multiple style objects, filtering out undefined values
+ */
+export declare function mergeStyles(...styles: (React.CSSProperties | undefined | null)[]): StyleProperties;
+/**
+ * Create CSS variables for offset positioning
+ */
+export declare function createOffsetStyles(offset?: [number | string, number | string], prefix?: string): React.CSSProperties | undefined;
+export {};