rsuite 6.0.0-canary-20250622 → 6.0.0-canary-20250702

package/cjs/Stack/StackItem.js

@@ -18,28 +18,22 @@ const StackItem = (0, _utils.forwardRef)((props, ref) => {
   const {
     as,
     classPrefix = 'stack-item',
-    style,
     className,
     alignSelf,
-    flex,
-    grow,
-    shrink,
-    order,
-    basis,
+    self = alignSelf,
     ...rest
   } = props;
   const {
     withPrefix,
-    merge,
-    cssVar
+    merge
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  const styles = (0, _utils.mergeStyles)(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes,
-    style: styles
+    self: self,
+    paddingTop: 0
   }, rest));
 });
 StackItem.displayName = 'StackItem';

package/cjs/Steps/StepItem.js

@@ -41,10 +41,7 @@ const StepItem = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
-    custom: icon,
-    [`status-${status}`]: status
-  }));
+  const classes = merge(className, withPrefix());
   const iconNode = icon ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('icon')
   }, icon) : /*#__PURE__*/_react.default.createElement("span", {
@@ -52,16 +49,18 @@ const StepItem = (0, _utils.forwardRef)((props, ref) => {
       [`icon-${status}`]: status
     })
   }, status ? (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber : stepNumber);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes,
     style: (0, _utils.mergeStyles)({
       width: itemWidth
-    }, style)
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    }, style),
+    "data-status": status,
+    "data-custom-icon": !!icon
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('tail')
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix(['icon-wrapper', icon ? 'custom-icon' : ''])
+    className: prefix('icon-wrapper')
   }, iconNode), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Steps/Steps.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StepItemProps } from './StepItem';
 import { BoxProps } from '../internals/Box';
 export interface StepsProps extends BoxProps {
     /** Vertical display */
@@ -18,6 +19,6 @@ export interface StepsProps extends BoxProps {
  * @see https://rsuitejs.com/components/steps
  */
 declare const Steps: import("../internals/types").InternalRefForwardingComponent<"div", StepsProps, never> & {
-    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StepItem").StepItemProps, never> & Record<string, never>;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", StepItemProps, never> & Record<string, never>;
 };
 export default Steps;

package/cjs/Steps/Steps.js

@@ -5,11 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _StepItem = _interopRequireDefault(require("./StepItem"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Subcomponents = {
   Item: _StepItem.default
 };
@@ -36,46 +37,43 @@ const Steps = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    prefix,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const horizontal = !vertical;
-  const classes = merge(className, withPrefix({
-    small,
-    vertical,
-    horizontal: !vertical
-  }));
-  const count = _utils.rch.count(children);
-  const items = _utils.rch.mapCloneElement(children, (item, index) => {
-    const itemStyles = {
-      flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
-      maxWidth: index === count - 1 ? `${100 / count}%` : undefined
-    };
-    const itemProps = {
-      stepNumber: index + 1,
-      status: 'wait',
-      style: horizontal ? itemStyles : undefined,
-      ...item.props
-    };
+  const classes = merge(className, withPrefix());
+  const items = (0, _react.useMemo)(() => {
+    const count = _utils.rch.count(children);
+    return _utils.rch.mapCloneElement(children, (item, index) => {
+      const itemStyles = {
+        flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
+        maxWidth: index === count - 1 ? `${100 / count}%` : undefined
+      };
+      const itemProps = {
+        stepNumber: index + 1,
+        status: 'wait',
+        style: !vertical ? itemStyles : undefined,
+        ...item.props
+      };
 
-    // fix tail color
-    if (currentStatus === 'error' && index === current - 1) {
-      itemProps.className = prefix('next-error');
-    }
-    if (!item.props.status) {
-      if (index === current) {
-        itemProps.status = currentStatus;
-        itemProps.className = merge(itemProps.className, prefix('item-active'));
-      } else if (index < current) {
-        itemProps.status = 'finish';
+      // fix tail color
+      if (currentStatus === 'error' && index === current - 1) {
+        itemProps['data-next-error'] = true;
+      }
+      if (!item.props.status) {
+        if (index === current) {
+          itemProps.status = currentStatus;
+        } else if (index < current) {
+          itemProps.status = 'finish';
+        }
       }
-    }
-    return itemProps;
-  });
+      return itemProps;
+    });
+  }, [children, current, currentStatus, vertical]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": small ? 'small' : undefined,
+    "data-direction": vertical ? 'vertical' : 'horizontal'
   }, rest), items);
 }, Subcomponents);
 Steps.displayName = 'Steps';

package/cjs/Tabs/Tabs.js

@@ -22,7 +22,7 @@ function getFocusableTabs(tablist) {
 }
 function getFocusedTab(tablist) {
   const tabs = getFocusableTabs(tablist);
-  return tabs.find(tab => tab.getAttribute('aria-selected'));
+  return tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
 }
 function nextItem(tablist) {
   if (!tablist) {

package/cjs/Tag/Tag.js

@@ -43,14 +43,17 @@ const Tag = (0, _utils.forwardRef)((props, ref) => {
     prefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color));
+  const classes = merge(className, withPrefix());
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes,
     style: styles
-  }, rest), /*#__PURE__*/_react.default.createElement("span", {
+  }, rest, {
+    "data-size": size,
+    "data-color": (0, _utils.isPresetColor)(color) ? color : undefined
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix`text`
   }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix`icon-close`,

package/cjs/Toggle/Toggle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '../internals/Box';
 import type { SanitizedInputProps, Color, Size } from '../internals/types';
 import type { ToggleLocale } from '../locales';
-export interface ToggleProps extends BoxProps, SanitizedInputProps {
+export interface ToggleProps extends Omit<BoxProps, 'height' | 'width'>, SanitizedInputProps {
     /**
      * The color of the toggle.
      */

package/cjs/Toggle/Toggle.js

@@ -49,11 +49,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, color, {
-    checked,
-    disabled,
-    loading
-  }));
+  const classes = merge(className, withPrefix({}));
   const inner = checked ? checkedChildren : unCheckedChildren;
   const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
   const labelId = (0, _hooks.useUniqueId)('rs-label');
@@ -77,7 +73,12 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     as: as,
     ref: ref,
     className: classes,
-    "data-placement": labelPlacement
+    "data-placement": labelPlacement,
+    "data-color": color,
+    "data-size": size,
+    "data-checked": checked,
+    "data-loading": loading,
+    "data-disabled": disabled
   }, restProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",

package/cjs/Tree/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BoxProps } from '../internals/Box';
+import type { BaseBoxProps } from '../internals/Box';
 import type { ListProps } from '../internals/Windowing';
 import type { TreeNode } from '../internals/Tree/types';
 /**
@@ -80,7 +80,7 @@ export type WithTreeDragProps<P> = P & TreeDragProps;
 /**
  * Represents the props for the Tree component.
  */
-export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BoxProps {
+export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BaseBoxProps {
     /**
      * The height of the tree.
      */

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 { BoxProps } from '../internals/Box';
+import { BaseBoxProps } 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 BoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
+export interface UploaderProps extends BaseBoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
     /**
      * Custom ref for Uploader
      */

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

@@ -1,46 +1,12 @@
-import { CSSProperties as CSS } from 'react';
-import type { WithAsProps, Breakpoints, ResponsiveValue, ColorScheme, Size } from '../types';
-export interface BoxProps extends WithAsProps {
+import { CSSSystemProps } from '../styled-system';
+import type { WithAsProps, Breakpoints } from '../types';
+export interface BoxProps extends WithAsProps, CSSSystemProps {
     /** 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'] | ResponsiveValue<CSS['display']>;
-    /** Padding */
-    p?: CSS['padding'] | ResponsiveValue<CSS['padding']>;
-    pt?: CSS['paddingTop'] | ResponsiveValue<CSS['paddingTop']>;
-    pb?: CSS['paddingBottom'] | ResponsiveValue<CSS['paddingBottom']>;
-    pl?: CSS['paddingLeft'] | ResponsiveValue<CSS['paddingLeft']>;
-    pr?: CSS['paddingRight'] | ResponsiveValue<CSS['paddingRight']>;
-    px?: CSS['paddingInline'] | ResponsiveValue<CSS['paddingInline']>;
-    py?: CSS['paddingBlock'] | ResponsiveValue<CSS['paddingBlock']>;
-    /** Margin */
-    m?: CSS['margin'] | ResponsiveValue<CSS['margin']>;
-    mt?: CSS['marginTop'] | ResponsiveValue<CSS['marginTop']>;
-    mb?: CSS['marginBottom'] | ResponsiveValue<CSS['marginBottom']>;
-    ml?: CSS['marginLeft'] | ResponsiveValue<CSS['marginLeft']>;
-    mr?: CSS['marginRight'] | ResponsiveValue<CSS['marginRight']>;
-    mx?: CSS['marginInline'] | ResponsiveValue<CSS['marginInline']>;
-    my?: CSS['marginBlock'] | ResponsiveValue<CSS['marginBlock']>;
-    /** Box size */
-    w?: CSS['width'] | ResponsiveValue<CSS['width']>;
-    h?: CSS['height'] | ResponsiveValue<CSS['height']>;
-    minw?: CSS['minWidth'] | ResponsiveValue<CSS['minWidth']>;
-    maxw?: CSS['maxWidth'] | ResponsiveValue<CSS['maxWidth']>;
-    minh?: CSS['minHeight'] | ResponsiveValue<CSS['minHeight']>;
-    maxh?: CSS['maxHeight'] | ResponsiveValue<CSS['maxHeight']>;
-    /** Box Color */
-    c?: ColorScheme | CSS['color'] | ResponsiveValue<ColorScheme | CSS['color']>;
-    /** Box Border */
-    bd?: CSS['border'] | ResponsiveValue<CSS['border']>;
-    /** Box Background */
-    bg?: ColorScheme | CSS['backgroundColor'] | ResponsiveValue<ColorScheme | CSS['backgroundColor']>;
-    /** Box Border Radius */
-    rounded?: Size | CSS['borderRadius'] | 'full' | ResponsiveValue<Size | CSS['borderRadius'] | 'full'>;
-    /** Box Shadow */
-    shadow?: Size | CSS['boxShadow'] | ResponsiveValue<Size | CSS['boxShadow']>;
 }
+export type BaseBoxProps = Omit<BoxProps, 'color'>;
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.

package/cjs/internals/Box/Box.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _forwardRef = require("../utils/react/forwardRef");
 var _utils = require("./utils");
-var _useStyled = require("../hooks/useStyled");
+var _styledSystem = require("../styled-system");
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.
@@ -28,9 +28,9 @@ const Box = (0, _forwardRef.forwardRef)((props, ref) => {
   } = props;
   const boxProps = (0, _utils.extractBoxProps)(rest);
   const domProps = (0, _utils.omitBoxProps)(rest);
-  const boxCSSVars = (0, _utils.getBoxCSSVariables)(boxProps);
+  const boxCSSVars = (0, _styledSystem.getCSSVariables)(boxProps, '--rs-box-');
   const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;
-  const styled = (0, _useStyled.useStyled)({
+  const styled = (0, _styledSystem.useStyled)({
     cssVars: boxCSSVars,
     className,
     style,

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

@@ -1,4 +1,4 @@
 import Box from './Box';
-export type { BoxProps } from './Box';
+export type { BoxProps, BaseBoxProps } from './Box';
 export { Box };
 export default Box;

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

@@ -1,4 +1,3 @@
-import type { ResponsiveValue } from '../types';
 /**
  * Extract box properties from props
  * @param props Original props object
@@ -11,11 +10,3 @@ export declare const extractBoxProps: (props: Record<string, any>) => Record<str
  * @returns New object without layout properties
  */
 export declare const omitBoxProps: (props: Record<string, any>) => Record<string, any>;
-type CSSVarValue = string | number | undefined | ResponsiveValue<string | number>;
-/**
- * Converts layout properties to CSS variables with abbreviated names
- * @param props Object containing layout properties
- * @returns Object with CSS variables
- */
-export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, CSSVarValue>;
-export {};

package/cjs/internals/Box/utils.js

@@ -1,56 +1,39 @@
 'use client';
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;
+exports.omitBoxProps = exports.extractBoxProps = void 0;
+var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
+var _styledSystem = require("../styled-system");
 var _utils = require("../utils");
-var _constants = require("../constants");
-// Mapping for padding properties to their CSS style equivalents
-const paddingStyleMap = {
-  p: 'padding',
-  pt: 'paddingTop',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  px: 'paddingInline',
-  py: 'paddingBlock'
-};
-
-// Mapping for margin properties to their CSS style equivalents
-const marginStyleMap = {
-  m: 'margin',
-  mt: 'marginTop',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mx: 'marginInline',
-  my: 'marginBlock'
-};
-
-// Mapping for size properties to their CSS style equivalents
-const sizeStyleMap = {
-  w: 'width',
-  h: 'height',
-  minw: 'minWidth',
-  maxw: 'maxWidth',
-  minh: 'minHeight',
-  maxh: 'maxHeight'
+const getUsedPropKeys = () => {
+  const propSet = new Set();
+  Object.entries(_styledSystem.cssSystemPropAlias).forEach(([key, prop]) => {
+    const {
+      property
+    } = prop;
+    const propName = (0, _camelCase.default)(property);
+    propSet.add(key);
+    propSet.add(propName);
+  });
+  return Array.from(propSet);
 };
 
-// Derive box property keys from style mappings
-const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];
-
 /**
  * Extract box properties from props
  * @param props Original props object
  * @returns Object containing only box properties
  */
 const extractBoxProps = props => {
+  const boxPropKeys = getUsedPropKeys();
   const boxProps = {};
 
   // Extract only box related properties
-  boxPropKeys.forEach(key => {
-    if (key in props && props[key] !== undefined) {
+  Object.keys(props).forEach(key => {
+    if (boxPropKeys.includes(key) && props[key] !== undefined) {
+      boxProps[key] = props[key];
+    } else if ((0, _utils.isCSSProperty)(key)) {
       boxProps[key] = props[key];
     }
   });
@@ -64,6 +47,7 @@ const extractBoxProps = props => {
  */
 exports.extractBoxProps = extractBoxProps;
 const omitBoxProps = props => {
+  const boxPropKeys = getUsedPropKeys();
   const filteredProps = {};
 
   // Copy all properties except box related ones
@@ -74,192 +58,4 @@ const omitBoxProps = props => {
   });
   return filteredProps;
 };
-
-/**
- * Checks if a value is a responsive value object
- * @param value - Value to check
- * @returns True if the value is a responsive value object
- */
-exports.omitBoxProps = omitBoxProps;
-function isResponsiveValue(value) {
-  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => _constants.BREAKPOINTS.includes(key));
-}
-
-/**
- * Process a value that might be a responsive value
- * @param value - Value to process
- * @param processor - Function to process non-responsive values
- * @returns Processed value or responsive object with processed values
- */
-function processResponsiveValue(value, processor) {
-  if (value === undefined) {
-    return undefined;
-  }
-  if (isResponsiveValue(value)) {
-    const result = {};
-    Object.entries(value).forEach(([breakpoint, val]) => {
-      if (val !== undefined) {
-        const processed = processor(val);
-        if (processed !== undefined) {
-          result[breakpoint] = processed;
-        }
-      }
-    });
-    return Object.keys(result).length > 0 ? result : undefined;
-  }
-  return processor(value);
-}
-
-// Type for CSS variable values that can be string, number, or responsive values
-
-// Silence ESLint warnings for unused parameters in forEach callbacks
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-/**
- * Converts layout properties to CSS variables with abbreviated names
- * @param props Object containing layout properties
- * @returns Object with CSS variables
- */
-const getBoxCSSVariables = props => {
-  const cssVars = {};
-  const prefix = `--rs-box-`;
-
-  // Process padding properties
-  Object.keys(paddingStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
-    }
-  });
-
-  // Process margin properties
-  Object.keys(marginStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
-    }
-  });
-
-  // Process size properties
-  Object.keys(sizeStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
-    }
-  });
-  if (props.bd !== undefined) {
-    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => (0, _utils.getCssValue)(val));
-  }
-  if (props.display !== undefined) {
-    cssVars[`${prefix}display`] = processResponsiveValue(props.display, val => val);
-  }
-  if (props.c !== undefined) {
-    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => (0, _utils.getColorVar)(val));
-  }
-  if (props.bg !== undefined) {
-    cssVars[`${prefix}bg`] = processResponsiveValue(props.bg, val => (0, _utils.getColorVar)(val));
-  }
-
-  // Handle special cases for rounded and shadow
-  if (props.rounded !== undefined) {
-    const processRounded = val => {
-      const result = (0, _utils.getSizeStyle)(val, 'box', 'rounded');
-      return result ? result : undefined;
-    };
-    if (isResponsiveValue(props.rounded)) {
-      // Handle responsive rounded values
-      const responsiveRounded = {};
-      Object.entries(props.rounded).forEach(([breakpoint, val]) => {
-        if (val !== undefined) {
-          const styleObj = processRounded(val);
-          if (styleObj) {
-            responsiveRounded[breakpoint] = styleObj;
-          }
-        }
-      });
-
-      // For each CSS variable key in the rounded styles, create a responsive value
-      const processedKeys = new Set();
-      Object.entries(responsiveRounded).forEach(([_breakpoint, styleObj]) => {
-        if (styleObj) {
-          Object.entries(styleObj).forEach(([key, _value]) => {
-            processedKeys.add(key);
-          });
-        }
-      });
-      processedKeys.forEach(key => {
-        const responsiveValue = {};
-        Object.entries(responsiveRounded).forEach(([breakpoint, styleObj]) => {
-          if (styleObj && styleObj[key] !== undefined) {
-            // Ensure we're only using string values for CSS variables
-            const value = styleObj[key];
-            if (typeof value === 'string' || typeof value === 'number') {
-              responsiveValue[breakpoint] = value;
-            }
-          }
-        });
-        if (Object.keys(responsiveValue).length > 0) {
-          cssVars[key] = responsiveValue;
-        }
-      });
-    } else {
-      // Handle non-responsive rounded value
-      const styleObj = processRounded(props.rounded);
-      if (styleObj) {
-        Object.entries(styleObj).forEach(([key, value]) => {
-          cssVars[key] = value;
-        });
-      }
-    }
-  }
-  if (props.shadow !== undefined) {
-    const processShadow = val => {
-      const result = (0, _utils.getSizeStyle)(val, 'box', 'shadow');
-      return result ? result : undefined;
-    };
-    if (isResponsiveValue(props.shadow)) {
-      // Handle responsive shadow values
-      const responsiveShadow = {};
-      Object.entries(props.shadow).forEach(([breakpoint, val]) => {
-        if (val !== undefined) {
-          const styleObj = processShadow(val);
-          if (styleObj) {
-            responsiveShadow[breakpoint] = styleObj;
-          }
-        }
-      });
-
-      // For each CSS variable key in the shadow styles, create a responsive value
-      const processedKeys = new Set();
-      Object.entries(responsiveShadow).forEach(([_breakpoint, styleObj]) => {
-        if (styleObj) {
-          Object.entries(styleObj).forEach(([key, _value]) => {
-            processedKeys.add(key);
-          });
-        }
-      });
-      processedKeys.forEach(key => {
-        const responsiveValue = {};
-        Object.entries(responsiveShadow).forEach(([breakpoint, styleObj]) => {
-          if (styleObj && styleObj[key] !== undefined) {
-            // Ensure we're only using string values for CSS variables
-            const value = styleObj[key];
-            if (typeof value === 'string' || typeof value === 'number') {
-              responsiveValue[breakpoint] = value;
-            }
-          }
-        });
-        if (Object.keys(responsiveValue).length > 0) {
-          cssVars[key] = responsiveValue;
-        }
-      });
-    } else {
-      // Handle non-responsive shadow value
-      const styleObj = processShadow(props.shadow);
-      if (styleObj) {
-        Object.entries(styleObj).forEach(([key, value]) => {
-          cssVars[key] = value;
-        });
-      }
-    }
-  }
-  return cssVars;
-};
-exports.getBoxCSSVariables = getBoxCSSVariables;
+exports.omitBoxProps = omitBoxProps;

package/cjs/internals/InputBase/InputBase.d.ts

@@ -5,7 +5,7 @@ import type { PropsWithoutChange, FormControlBaseProps, Size } from '../types';
 export interface InputBaseLocaleType {
     unfilled: string;
 }
-export interface InputBaseCommonProps extends BoxProps, PropsWithoutChange<FormControlBaseProps> {
+export interface InputBaseCommonProps extends Omit<BoxProps, 'height' | 'width'>, PropsWithoutChange<FormControlBaseProps> {
     /** A component can have different sizes */
     size?: Size;
     /** The HTML input id */