rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/cjs/Uploader/Uploader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ErrorStatus } from './utils/ajaxUpload';
 import { UploadTriggerProps } from './UploadTrigger';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import type { UploaderLocale } from '../locales';
 export interface FileType {
     /** File Name */
@@ -21,7 +21,7 @@ export interface UploaderInstance {
     root: HTMLElement;
     start: (file?: FileType) => void;
 }
-export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
+export interface UploaderProps extends BoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
     /**
      * Custom ref for Uploader
      */
@@ -33,7 +33,7 @@ export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'on
     /** Automatically upload files after selecting them */
     autoUpload?: boolean;
     /** Primary content */
-    children?: React.ReactNode;
+    children?: React.ReactElement;
     /** List of uploaded files */
     defaultFileList?: FileType[];
     /** List of uploaded files （Controlled） */

package/cjs/Uploader/Uploader.js

@@ -11,6 +11,7 @@ var _UploadFileItem = _interopRequireDefault(require("./UploadFileItem"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _ajaxUpload = _interopRequireDefault(require("./utils/ajaxUpload"));
 var _UploadTrigger = _interopRequireDefault(require("./UploadTrigger"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -98,7 +99,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Uploader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'uploader',
     className,
     listType = 'text',
@@ -388,7 +389,8 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   if (listType === 'picture') {
     renderList.reverse();
   }
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: rootRef,
     className: classes,
     style: style

package/cjs/VisuallyHidden/VisuallyHidden.d.ts

@@ -6,8 +6,5 @@ export type VisuallyHiddenProps = ComponentProps;
  * @version 5.52.0
  * @see https://rsuitejs.com/components/visually-hidden/
  */
-declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<{
-    name: string;
-    componentAs: "span";
-}>, never> & Record<string, never>;
+declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<ComponentProps>, never> & Record<string, never>;
 export default VisuallyHidden;

package/cjs/internals/Box/Box.d.ts

@@ -1,12 +1,10 @@
 import { CSSProperties as CSS } from 'react';
 import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
 export interface BoxProps extends WithAsProps {
-    /** Override the 'as' prop when Box is used as a base component */
-    componentAs?: WithAsProps['as'];
-    /** Display element */
-    visible?: Breakpoints;
-    /** Hide element */
-    hidden?: Breakpoints;
+    /** Breakpoint below which the component is shown with `display: block` */
+    showFrom?: Breakpoints;
+    /** Breakpoint above which the component is hidden with `display: none` */
+    hideFrom?: Breakpoints;
     /** Display property */
     display?: CSS['display'];
     /** Padding */
@@ -29,15 +27,21 @@ export interface BoxProps extends WithAsProps {
     w?: CSS['width'];
     h?: CSS['height'];
     /** Box Color */
-    color?: ColorScheme | CSS['color'];
+    c?: ColorScheme | CSS['color'];
+    /** Box Border */
+    bd?: CSS['border'];
     /** Box Background */
     bg?: ColorScheme | CSS['backgroundColor'];
     /** Box Border Radius */
     rounded?: Size | CSS['borderRadius'] | 'full';
-    /** Box Border */
-    border?: CSS['border'];
     /** Box Shadow */
     shadow?: Size | CSS['boxShadow'];
 }
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
 declare const Box: import("../types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>;
 export default Box;

package/cjs/internals/Box/Box.js

@@ -6,37 +6,37 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _utils = require("../utils");
-var _hooks = require("../hooks");
+var _forwardRef = require("../utils/forwardRef");
 var _utils2 = require("./utils");
-const Box = (0, _utils.forwardRef)((props, ref) => {
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
+const Box = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
     as: Component = 'div',
-    classPrefix = 'box',
     className,
     children,
-    componentAs,
-    visible,
-    hidden,
+    showFrom,
+    hideFrom,
     style,
     ...rest
   } = props;
   const boxProps = (0, _utils2.extractBoxProps)(rest);
   const domProps = (0, _utils2.omitBoxProps)(rest);
-  const {
-    merge,
-    withPrefix
-  } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
-    [`visible-${visible}`]: visible,
-    [`hidden-${hidden}`]: hidden
-  }));
   const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
   const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
-  const FinalComponent = componentAs || Component;
-  return /*#__PURE__*/_react.default.createElement(FinalComponent, (0, _extends2.default)({
+  const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: classes,
+    "data-rs": isBox ? 'box' : undefined,
+    "data-visible-from": showFrom,
+    "data-hidden-from": hideFrom,
+    className: className,
     style: boxStyle
   }, domProps), children);
 });

package/cjs/internals/Box/utils.js

@@ -33,7 +33,7 @@ const sizeStyleMap = {
 };
 
 // Derive box property keys from style mappings
-const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'rounded', 'border', 'shadow', 'display', 'color', 'bg'];
+const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];
 
 /**
  * Extract box properties from props
@@ -99,14 +99,14 @@ const getBoxCSSVariables = props => {
       cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
     }
   });
-  if (props.border !== undefined) {
-    cssVars['--rs-box-border'] = (0, _utils.getCssValue)(props.border);
+  if (props.bd !== undefined) {
+    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);
   }
   if (props.display !== undefined) {
     cssVars['--rs-box-display'] = props.display;
   }
-  if (props.color !== undefined) {
-    cssVars['--rs-box-color'] = (0, _utils.getColorVar)(props.color);
+  if (props.c !== undefined) {
+    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);
   }
   if (props.bg !== undefined) {
     cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);

package/cjs/internals/Menu/useRenderMenuItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function useRenderMenuItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => React.JSX.Element;
+export declare function useRenderMenuItem(as: React.ElementType): (props: any, overrideAs?: React.ElementType) => React.JSX.Element;

package/cjs/internals/Menu/useRenderMenuItem.js

@@ -1,23 +1,32 @@
 'use client';
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.useRenderMenuItem = useRenderMenuItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../Box"));
 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; }
-function useRenderMenuItem(Component) {
-  return (0, _react.useCallback)((props, OverrideComponent) => {
-    if (Component === 'li') {
-      if (OverrideComponent) {
+function useRenderMenuItem(as) {
+  return (0, _react.useCallback)((props, overrideAs) => {
+    if (as === 'li') {
+      if (overrideAs) {
         return /*#__PURE__*/_react.default.createElement("li", {
           role: "none presentation"
-        }, /*#__PURE__*/_react.default.createElement(OverrideComponent, props));
+        }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+          as: overrideAs
+        }, props)));
       }
-      return /*#__PURE__*/_react.default.createElement(Component, props);
+      return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+        as: as
+      }, props));
     }
     return /*#__PURE__*/_react.default.createElement("li", {
       role: "none presentation"
-    }, /*#__PURE__*/_react.default.createElement(Component, props));
-  }, [Component]);
+    }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as
+    }, props)));
+  }, [as]);
 }

package/cjs/internals/Overlay/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsPropsWithoutChildren, AnimationEventProps } from '../types';
-export interface BaseModalProps extends WithAsPropsWithoutChildren, AnimationEventProps {
+import { BoxProps } from '../Box';
+import type { AnimationEventProps } from '../types';
+export interface BaseModalProps extends Omit<BoxProps, 'children'>, AnimationEventProps {
     /** Animation-related properties */
     animationProps?: any;
     /** Primary content */

package/cjs/internals/Overlay/Modal.js

@@ -11,6 +11,7 @@ var _contains = _interopRequireDefault(require("dom-lib/contains"));
 var _on = _interopRequireDefault(require("dom-lib/on"));
 var _ModalManager = _interopRequireDefault(require("./ModalManager"));
 var _Fade = _interopRequireDefault(require("../../Animation/Fade"));
+var _Box = _interopRequireDefault(require("../Box"));
 var _OverlayProvider = require("./OverlayProvider");
 var _constants = require("../constants");
 var _hooks = require("../hooks");
@@ -46,7 +47,7 @@ const useModalManager = () => {
 };
 const Modal = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     children,
     transition: Transition,
     dialogTransitionTimeout,
@@ -215,7 +216,9 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
   }), children) : children;
   return /*#__PURE__*/_react.default.createElement(_OverlayProvider.OverlayProvider, {
     overlayContainer: overlayContainer
-  }, /*#__PURE__*/_react.default.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: (0, _utils.mergeRefs)(modal.setDialogRef, ref),
     style: style,
     className: className,

package/cjs/internals/Picker/PickerToggle.d.ts

@@ -31,5 +31,5 @@ export interface PickerToggleProps<T = OptionValue> extends ToggleButtonProps {
     focusItemValue?: T | null;
     onClean?: (event: React.MouseEvent) => void;
 }
-declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<import("../..").ButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<OptionValue>, never> & Record<string, never>;
+declare const PickerToggle: import("../types").InternalRefForwardingComponent<React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLDivElement>>, PickerToggleProps<OptionValue>, never> & Record<string, never>;
 export default PickerToggle;

package/cjs/internals/Picker/ToggleButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonProps } from '../../Button';
-export type ToggleButtonProps = ButtonProps;
-declare const ToggleButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLDivElement>>;
+export type ToggleButtonProps = Omit<ButtonProps, 'color'>;
+declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLDivElement>>;
 export default ToggleButton;

package/cjs/internals/Picker/hooks/useCombobox.d.ts

@@ -1,6 +1,6 @@
 declare function useCombobox(): {
     id: string | undefined;
-    popupType: "dialog" | "menu" | "listbox" | "grid" | "tree" | undefined;
+    popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
     multiple: boolean | undefined;
     placement: import("../../types").Placement | undefined;
     labelId: string | undefined;

package/cjs/internals/Plaintext/Plaintext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
+import { BoxProps } from '../Box';
 type LocaleKey = 'unfilled' | 'notSelected' | 'notUploaded';
-export interface PlaintextProps extends WithAsProps {
+export interface PlaintextProps extends BoxProps {
     placeholder?: React.ReactNode;
     localeKey?: LocaleKey;
 }

package/cjs/internals/Plaintext/Plaintext.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../Box"));
 var _utils = require("../utils");
 var _hooks = require("../hooks");
 var _CustomProvider = require("../../CustomProvider");
@@ -18,7 +19,7 @@ const Plaintext = (0, _utils.forwardRef)((props, ref) => {
     getLocale
   } = (0, _CustomProvider.useCustom)();
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'plaintext',
     className,
     children,
@@ -33,7 +34,8 @@ const Plaintext = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     empty: !children
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "text"
   }, rest, {
     ref: ref,

package/cjs/internals/Tree/TreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-interface TreeViewProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
+import { BoxProps } from '../Box';
+interface TreeViewProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
     treeRootClassName: string;
     multiselectable?: boolean;
     height?: number;

package/cjs/internals/Tree/TreeView.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _useCombobox = _interopRequireDefault(require("../Picker/hooks/useCombobox"));
 var _ScrollView = _interopRequireDefault(require("../ScrollView"));
+var _Box = _interopRequireDefault(require("../Box"));
 var _TreeProvider = require("./TreeProvider");
 var _utils = require("../utils");
 const ScrollShadowView = (0, _utils.forwardRef)((props, ref) => {
@@ -37,14 +38,15 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _useCombobox.default)();
 
   // If the tree is virtualized, the scroll shadow is not needed.
-  const Component = scrollShadow && !virtualized ? ScrollShadowView : as;
+  const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;
 
   // If the tree is virtualized, the height is not needed.
   const viewStyles = {
     height: virtualized ? undefined : height,
     ...style
   };
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: treeAs,
     role: "tree",
     style: viewStyles,
     id: id ? `${id}-${popupType}` : undefined,

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

@@ -3,7 +3,7 @@ import type { Placement } from './placement';
 import type { ToArray } from './utils';
 import type { FormControlBaseProps } from './form';
 import type { AnimationEventProps } from './animation';
-import type { WithAsProps } from './shared';
+import type { BoxProps } from '../Box';
 import type { Size } from './sizes';
 import type { PickerHandle } from '../Picker/types';
 export interface Option<T = number | string> extends Record<string, any> {
@@ -90,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends PopupProps, WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker

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

@@ -7,7 +7,7 @@ import { Color } from '../types/colours';
  */
 export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
 export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
-export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, component?: string | undefined, prop?: string) => {
+export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | (string & {}) | undefined;
 } | undefined;
 /**

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../types';
-export type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
+import Box, { BoxProps } from '../Box/Box';
+export type ComponentProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;
 interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     componentAs?: T;
@@ -8,6 +8,7 @@ interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDi
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
+ * By default, the component is based on Box component and inherits all Box props.
  */
-export declare function createComponent<T extends React.ElementType = 'div', P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
+export declare function createComponent<T extends React.ElementType = typeof Box, P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
 export default createComponent;

package/cjs/internals/utils/createComponent.js

@@ -8,11 +8,13 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _Box = _interopRequireDefault(require("../Box/Box"));
 var _hooks = require("../hooks");
-var _ = require("./");
+var _forwardRef = require("./forwardRef");
 var _CustomProvider = require("../../CustomProvider");
 /**
  * Create a component with `classPrefix` and `as` attributes.
+ * By default, the component is based on Box component and inherits all Box props.
  */
 function createComponent(_ref) {
   let {
@@ -21,12 +23,12 @@ function createComponent(_ref) {
     componentClassPrefix,
     ...defaultProps
   } = _ref;
-  const Component = (0, _.forwardRef)((props, ref) => {
+  const Component = (0, _forwardRef.forwardRef)((props, ref) => {
     const {
       propsWithDefaults
     } = (0, _CustomProvider.useCustom)(name, props);
     const {
-      as: Component = componentAs || 'div',
+      as,
       classPrefix = componentClassPrefix || (0, _kebabCase.default)(name),
       className,
       role,
@@ -37,10 +39,11 @@ function createComponent(_ref) {
       merge
     } = (0, _hooks.useStyles)(classPrefix);
     const classes = merge(className, withPrefix());
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, defaultProps, rest, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({}, defaultProps, rest, {
       role: role,
       ref: ref,
-      className: classes
+      className: classes,
+      as: as || componentAs || 'div'
     }));
   });
   Component.displayName = name;

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

@@ -1,5 +1,8 @@
 import { SizeEnum } from '../types';
 export declare const isPresetSize: (size?: SizeEnum | number | string | null) => boolean;
-export declare const getSizeStyle: (value?: string | number | undefined, component?: string | undefined, prop?: string) => {
+export declare const getSizeStyle: (value?: string | number | undefined, name?: string | undefined, prop?: string) => {
+    [x: string]: string | number | undefined;
+} | undefined;
+export declare const getLineHeightStyle: (value?: string | number | undefined, name?: string | undefined, prop?: string) => {
     [x: string]: string | number | undefined;
 } | undefined;

package/cjs/internals/utils/sizes.js

@@ -2,14 +2,14 @@
 "use strict";
 
 exports.__esModule = true;
-exports.isPresetSize = exports.getSizeStyle = void 0;
+exports.isPresetSize = exports.getSizeStyle = exports.getLineHeightStyle = void 0;
 var _types = require("../types");
 var _styleSheet = require("./style-sheet");
 const isPresetSize = size => {
   if (!size) {
     return false;
   }
-  const presetSizes = [...Object.values(_types.SizeEnum), 'full'];
+  const presetSizes = [...Object.values(_types.SizeEnum), ...Object.values(_types.TypographySizeEnum), 'full'];
   return presetSizes.includes(size);
 };
 exports.isPresetSize = isPresetSize;
@@ -18,4 +18,10 @@ const sizeConfig = {
   presetChecker: isPresetSize,
   valueTransformer: _styleSheet.getCssValue
 };
-const getSizeStyle = exports.getSizeStyle = (0, _styleSheet.createStyleGetter)(sizeConfig);
+const getSizeStyle = exports.getSizeStyle = (0, _styleSheet.createStyleGetter)(sizeConfig);
+const lineHeightConfig = {
+  prop: 'line-height',
+  presetChecker: isPresetSize,
+  valueTransformer: value => isPresetSize(value) ? value : null
+};
+const getLineHeightStyle = exports.getLineHeightStyle = (0, _styleSheet.createStyleGetter)(lineHeightConfig);

package/cjs/internals/utils/style-sheet/css.d.ts

@@ -7,7 +7,7 @@ export declare function getCssValue(value?: number | string | null, unit?: strin
 /**
  * Merge multiple style objects, filtering out undefined values
  */
-export declare function mergeStyles(...styles: (StyleProperties | undefined | null)[]): React.CSSProperties;
+export declare function mergeStyles(...styles: (StyleProperties | undefined | null)[]): React.CSSProperties | undefined;
 /**
  * Create CSS variables for offset positioning
  */

package/cjs/internals/utils/style-sheet/css.js

@@ -1,10 +1,12 @@
 'use client';
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.createOffsetStyles = createOffsetStyles;
 exports.getCssValue = getCssValue;
 exports.mergeStyles = mergeStyles;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
@@ -37,13 +39,14 @@ function mergeStyles() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  return styles.filter(Boolean).reduce((acc, style) => {
+  const mergedStyles = styles === null || styles === void 0 ? void 0 : styles.filter(Boolean).reduce((acc, style) => {
     if (!style) return acc;
     return {
       ...acc,
       ...style
     };
   }, {});
+  return (0, _isEmpty.default)(mergedStyles) ? undefined : mergedStyles;
 }
 
 /**

package/cjs/internals/utils/style-sheet/styles.d.ts

@@ -9,8 +9,8 @@ interface StylePropConfig<T = StyleValue> {
     presetChecker?: PresetChecker<T>;
     valueTransformer?: ValueTransformer<T>;
 }
-export declare const createStyleValueSetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => string | T | undefined;
-export declare const createStyleGetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => {
+export declare const createStyleValueSetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, name?: string, prop?: string) => string | T | undefined;
+export declare const createStyleGetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, name?: string, prop?: string) => {
     [x: string]: string | T | undefined;
 } | undefined;
 export {};

package/cjs/internals/utils/style-sheet/styles.js

@@ -9,15 +9,15 @@ const createStyleValueSetter = config => {
     presetChecker,
     useGlobalVar
   } = config;
-  return function (value, component, prop) {
+  return function (value, name, prop) {
     if (prop === void 0) {
       prop = config.prop;
     }
-    if (typeof value === 'undefined' || !component) {
+    if (typeof value === 'undefined' || !name) {
       return;
     }
     if (presetChecker !== null && presetChecker !== void 0 && presetChecker(value)) {
-      return useGlobalVar ? `var(--rs-${prop}-${value})` : `var(--rs-${component}-${prop}-${value})`;
+      return useGlobalVar ? `var(--rs-${prop}-${value})` : `var(--rs-${name}-${prop}-${value})`;
     } else if (Array.isArray(value)) {
       // If value is an array, join it with spaces,
       // .eg, gap=[10, 20] -> '10px 20px'
@@ -29,15 +29,15 @@ const createStyleValueSetter = config => {
 exports.createStyleValueSetter = createStyleValueSetter;
 const createStyleGetter = config => {
   const setValue = createStyleValueSetter(config);
-  return function (value, component, prop) {
+  return function (value, name, prop) {
     if (prop === void 0) {
       prop = config.prop;
     }
-    if (typeof value === 'undefined' || !component) {
+    if (typeof value === 'undefined' || !name) {
       return;
     }
     return {
-      [`--rs-${component}-${prop}`]: setValue(value, component, prop)
+      [`--rs-${name}-${prop}`]: setValue(value, name, prop)
     };
   };
 };