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

package/cjs/internals/styled-system/responsive.js

@@ -0,0 +1,118 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getCSSVariables = exports.breakpointValues = void 0;
+exports.isResponsiveValue = isResponsiveValue;
+exports.processResponsiveValue = processResponsiveValue;
+var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _utils = require("../utils");
+var _constants = require("../constants");
+var _cssAlias = require("./css-alias");
+/**
+ * Breakpoint values in pixels - matching SCSS variables
+ * These values are used for responsive design across the application.
+ * They follow a mobile-first approach where 'xs' is the base breakpoint.
+ */
+const breakpointValues = exports.breakpointValues = {
+  xs: 0,
+  // Base mobile first
+  sm: 576,
+  // $screen-sm
+  md: 768,
+  // $screen-md
+  lg: 992,
+  // $screen-lg
+  xl: 1200,
+  // $screen-xl
+  xxl: 1400,
+  // $screen-xxl
+  '2xl': 1400 // Alias for xxl for compatibility
+};
+
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+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
+
+const transformCSSValue = (value, type) => {
+  if (type === 'number') {
+    return value;
+  }
+  return (0, _utils.getCssValue)(value);
+};
+
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ */
+const getCSSVariables = (props, prefix = `--rs-`) => {
+  const cssVars = {};
+  const cssVar = name => `${prefix}${(0, _kebabCase.default)(name)}`;
+  const getCSSProperty = name => {
+    let cssName = name;
+    let cssProp = _cssAlias.cssSystemPropAlias[name];
+    if (!cssProp) {
+      Object.entries(_cssAlias.cssSystemPropAlias).forEach(([key, prop]) => {
+        if ((0, _camelCase.default)(prop.property) === name) {
+          cssProp = prop;
+          cssName = key;
+        }
+      });
+    }
+    return [cssName, cssProp];
+  };
+  Object.entries(props).forEach(([name, value]) => {
+    if (typeof value === 'undefined') {
+      return;
+    }
+    const [cssName, cssProp] = getCSSProperty(name);
+    const varName = cssVar(cssName);
+    if (cssProp) {
+      const {
+        transformer,
+        type
+      } = cssProp;
+      cssVars[varName] = processResponsiveValue(value, val => {
+        return transformer ? transformer(val) : transformCSSValue(val, type);
+      });
+    } else if ((0, _utils.isCSSProperty)(cssName)) {
+      // For non-predefined CSS properties, directly process with getCssValue
+      cssVars[varName] = processResponsiveValue(value, val => (0, _utils.getCssValue)(val));
+    }
+  });
+  return cssVars;
+};
+exports.getCSSVariables = getCSSVariables;

package/cjs/internals/styled-system/types.d.ts

@@ -0,0 +1,208 @@
+import { CSSProperties as CSS } from 'react';
+import { supportedCSSProperties } from './css-properties';
+import type { WithResponsive, ColorScheme, Size } from '../types';
+export type CSSPropertyValueType = 'string' | 'number' | 'any';
+export type CSSProperty = {
+    /**
+     * CSS Property Type
+     */
+    type: CSSPropertyValueType;
+    /**
+     * CSS Property
+     */
+    property: string;
+    /**
+     * Value Transformer
+     */
+    transformer?: (value: any) => any;
+};
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];
+type MakeResponsive<T> = {
+    [K in keyof T]?: T[K] | WithResponsive<T[K]>;
+};
+export type StandardCSSProps = MakeResponsive<Pick<CSS, SupportedCSSProperty>>;
+/**
+ * CSS Properties type for Box component
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+export interface CSSSystemProps extends StandardCSSProps {
+    /** Shorthand for CSS property `padding` */
+    p?: WithResponsive<CSS['padding']>;
+    /** Shorthand for CSS property `paddingTop` */
+    pt?: WithResponsive<CSS['paddingTop']>;
+    /** Shorthand for CSS property `paddingRight` */
+    pr?: WithResponsive<CSS['paddingRight']>;
+    /** Shorthand for CSS property `paddingBottom` */
+    pb?: WithResponsive<CSS['paddingBottom']>;
+    /** Shorthand for CSS property `paddingLeft` */
+    pl?: WithResponsive<CSS['paddingLeft']>;
+    /** Shorthand for CSS property `paddingInline` */
+    px?: WithResponsive<CSS['paddingInline']>;
+    /** Shorthand for CSS property `paddingBlock` */
+    py?: WithResponsive<CSS['paddingBlock']>;
+    /** Shorthand for CSS property `paddingInlineStart` */
+    ps?: WithResponsive<CSS['paddingInlineStart']>;
+    /** Shorthand for CSS property `paddingInlineEnd` */
+    pe?: WithResponsive<CSS['paddingInlineEnd']>;
+    /** Shorthand for CSS property `margin` */
+    m?: WithResponsive<CSS['margin']>;
+    /** Shorthand for CSS property `marginTop` */
+    mt?: WithResponsive<CSS['marginTop']>;
+    /** Shorthand for CSS property `marginRight` */
+    mr?: WithResponsive<CSS['marginRight']>;
+    /** Shorthand for CSS property `marginBottom` */
+    mb?: WithResponsive<CSS['marginBottom']>;
+    /** Shorthand for CSS property `marginLeft` */
+    ml?: WithResponsive<CSS['marginLeft']>;
+    /** Shorthand for CSS property `marginInline` */
+    mx?: WithResponsive<CSS['marginInline']>;
+    /** Shorthand for CSS property `marginBlock` */
+    my?: WithResponsive<CSS['marginBlock']>;
+    /** Shorthand for CSS property `marginInlineStart` */
+    ms?: WithResponsive<CSS['marginInlineStart']>;
+    /** Shorthand for CSS property `marginInlineEnd` */
+    me?: WithResponsive<CSS['marginInlineEnd']>;
+    /** Shorthand for CSS property `width` */
+    w?: WithResponsive<CSS['width']>;
+    /** Shorthand for CSS property `height` */
+    h?: WithResponsive<CSS['height']>;
+    /** Shorthand for CSS property `minWidth` */
+    minw?: WithResponsive<CSS['minWidth']>;
+    /** Shorthand for CSS property `maxWidth` */
+    maxw?: WithResponsive<CSS['maxWidth']>;
+    /** Shorthand for CSS property `minHeight` */
+    minh?: WithResponsive<CSS['minHeight']>;
+    /** Shorthand for CSS property `maxHeight` */
+    maxh?: WithResponsive<CSS['maxHeight']>;
+    /** Shorthand for CSS property `display` */
+    display?: WithResponsive<CSS['display']>;
+    /** Shorthand for CSS property `position` */
+    pos?: WithResponsive<CSS['position']>;
+    /** Shorthand for CSS property `left` */
+    left?: WithResponsive<CSS['left']>;
+    /** Shorthand for CSS property `top` */
+    top?: WithResponsive<CSS['top']>;
+    /** Shorthand for CSS property `right` */
+    right?: WithResponsive<CSS['right']>;
+    /** Shorthand for CSS property `bottom` */
+    bottom?: WithResponsive<CSS['bottom']>;
+    /** Shorthand for CSS property `inset` */
+    inset?: WithResponsive<CSS['inset']>;
+    /** Shorthand for CSS property `insetInline` */
+    insetx?: WithResponsive<CSS['insetInline']>;
+    /** Shorthand for CSS property `insetBlock` */
+    insety?: WithResponsive<CSS['insetBlock']>;
+    /** Shorthand for CSS property `boxSizing` */
+    bsz?: WithResponsive<CSS['boxSizing']>;
+    /** Shorthand for CSS property `zIndex` */
+    z?: WithResponsive<CSS['zIndex']>;
+    /** Shorthand for CSS property `background` */
+    bg?: WithResponsive<ColorScheme | CSS['background']>;
+    /** Shorthand for CSS property `backgroundColor` */
+    bgc?: WithResponsive<ColorScheme | CSS['backgroundColor']>;
+    /** Shorthand for CSS property `backgroundImage` */
+    bgi?: WithResponsive<CSS['backgroundImage']>;
+    /** Shorthand for CSS property `backgroundAttachment` */
+    bga?: WithResponsive<CSS['backgroundAttachment']>;
+    /** Shorthand for CSS property `backgroundPosition` */
+    bgp?: WithResponsive<CSS['backgroundPosition']>;
+    /** Shorthand for CSS property `backgroundSize` */
+    bgsz?: WithResponsive<CSS['backgroundSize']>;
+    /** Shorthand for CSS property `backgroundRepeat` */
+    bgr?: WithResponsive<CSS['backgroundRepeat']>;
+    /** Shorthand for CSS property `color` */
+    c?: WithResponsive<ColorScheme | CSS['color']>;
+    /** Shorthand for CSS property `fontFamily` */
+    ff?: WithResponsive<CSS['fontFamily']>;
+    /** Shorthand for CSS property `fontSize` */
+    fs?: WithResponsive<CSS['fontSize']>;
+    /** Shorthand for CSS property `fontWeight` */
+    fw?: WithResponsive<CSS['fontWeight']>;
+    /** Shorthand for CSS property `textAlign` */
+    ta?: WithResponsive<CSS['textAlign']>;
+    /** Shorthand for CSS property `textTransform` */
+    tt?: WithResponsive<CSS['textTransform']>;
+    /** Shorthand for CSS property `textDecoration` */
+    td?: WithResponsive<CSS['textDecoration']>;
+    /** Shorthand for CSS property `textDecorationStyle` */
+    tds?: WithResponsive<CSS['textDecorationStyle']>;
+    /** Shorthand for CSS property `textDecorationColor` */
+    tdc?: WithResponsive<ColorScheme | CSS['textDecorationColor']>;
+    /** Shorthand for CSS property `letterSpacing` */
+    lts?: WithResponsive<CSS['letterSpacing']>;
+    /** Shorthand for CSS property `lineHeight` */
+    lh?: WithResponsive<CSS['lineHeight']>;
+    /** Shorthand for CSS property `border` */
+    bd?: WithResponsive<CSS['border']>;
+    /** Shorthand for CSS property `borderStyle` */
+    bs?: WithResponsive<CSS['borderStyle']>;
+    /** Shorthand for CSS property `borderColor` */
+    bc?: WithResponsive<ColorScheme | CSS['borderColor']>;
+    /** Shorthand for CSS property `borderWidth` */
+    bw?: WithResponsive<CSS['borderWidth']>;
+    /** Shorthand for CSS property `borderTop` */
+    bdt?: WithResponsive<CSS['borderTop']>;
+    /** Shorthand for CSS property `borderBottom` */
+    bdb?: WithResponsive<CSS['borderBottom']>;
+    /** Shorthand for CSS property `borderLeft` */
+    bdl?: WithResponsive<CSS['borderLeft']>;
+    /** Shorthand for CSS property `borderRight` */
+    bdr?: WithResponsive<CSS['borderRight']>;
+    /** Shorthand for CSS property `borderTopStyle` */
+    bdts?: WithResponsive<CSS['borderTopStyle']>;
+    /** Shorthand for CSS property `borderBottomStyle` */
+    bdbs?: WithResponsive<CSS['borderBottomStyle']>;
+    /** Shorthand for CSS property `borderLeftStyle` */
+    bdls?: WithResponsive<CSS['borderLeftStyle']>;
+    /** Shorthand for CSS property `borderRightStyle` */
+    bdrs?: WithResponsive<CSS['borderRightStyle']>;
+    /** Shorthand for CSS property `borderTopColor` */
+    bdtc?: WithResponsive<ColorScheme | CSS['borderTopColor']>;
+    /** Shorthand for CSS property `borderBottomColor` */
+    bdbc?: WithResponsive<ColorScheme | CSS['borderBottomColor']>;
+    /** Shorthand for CSS property `borderLeftColor` */
+    bdlc?: WithResponsive<ColorScheme | CSS['borderLeftColor']>;
+    /** Shorthand for CSS property `borderRightColor` */
+    bdrc?: WithResponsive<ColorScheme | CSS['borderRightColor']>;
+    /** Shorthand for CSS property `borderTopWidth` */
+    bdtw?: WithResponsive<CSS['borderTopWidth']>;
+    /** Shorthand for CSS property `borderBottomWidth` */
+    bdbw?: WithResponsive<CSS['borderBottomWidth']>;
+    /** Shorthand for CSS property `borderLeftWidth` */
+    bdlw?: WithResponsive<CSS['borderLeftWidth']>;
+    /** Shorthand for CSS property `borderRightWidth` */
+    bdrw?: WithResponsive<CSS['borderRightWidth']>;
+    /** Shorthand for CSS property `borderRadius` */
+    rounded?: WithResponsive<Size | CSS['borderRadius'] | 'full'>;
+    /** Shorthand for CSS property `boxShadow` */
+    shadow?: WithResponsive<Size | CSS['boxShadow']>;
+    /** CSS property `opacity` */
+    opacity?: WithResponsive<CSS['opacity']>;
+    /** Shorthand for CSS property `gap` */
+    spacing?: WithResponsive<CSS['gap']>;
+    /** CSS property `gap` */
+    gap?: WithResponsive<CSS['gap']>;
+    /** CSS property `rowGap` */
+    rowgap?: WithResponsive<CSS['rowGap']>;
+    /** CSS property `columnGap` */
+    colgap?: WithResponsive<CSS['columnGap']>;
+    /** Shorthand for CSS property `alignItems` */
+    align?: WithResponsive<CSS['alignItems']>;
+    /** Shorthand for CSS property `justifyContent` */
+    justify?: WithResponsive<CSS['justifyContent']>;
+    /** Shorthand for CSS property `alignSelf` */
+    self?: WithResponsive<CSS['alignSelf']>;
+    /** Shorthand for CSS property `flexBasis` */
+    basis?: WithResponsive<CSS['flexBasis']>;
+    /** Shorthand for CSS property `flex` */
+    flex?: WithResponsive<CSS['flex']>;
+    /** Shorthand for CSS property `flexGrow` */
+    grow?: WithResponsive<CSS['flexGrow']>;
+    /** Shorthand for CSS property `order` */
+    order?: WithResponsive<CSS['order']>;
+    /** Shorthand for CSS property `flexShrink` */
+    shrink?: WithResponsive<CSS['flexShrink']>;
+    /** Shorthand for CSS property `flexDirection` */
+    direction?: WithResponsive<CSS['flexDirection']>;
+}
+export {};

package/cjs/internals/styled-system/types.js

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

package/cjs/internals/{hooks → styled-system}/useStyled.d.ts

@@ -1,13 +1,10 @@
 import { CSSProperties } from 'react';
-import type { Breakpoints, ResponsiveValue } from '../types';
-/**
- * Options for the useStyled hook
- */
+import type { Breakpoints, WithResponsive } from '../types';
 interface UseStyledOptions {
     /**
      * CSS variables to apply
      */
-    cssVars?: Record<string, string | number | undefined | ResponsiveValue<string | number>>;
+    cssVars?: Record<string, WithResponsive<string | number | undefined>>;
     /**
      * Base class name to include
      */
@@ -23,7 +20,6 @@ interface UseStyledOptions {
     enabled?: boolean | Breakpoints;
     /**
      * Prefix for the generated class name
-     * @default 'rs'
      */
     prefix?: string;
 }

package/cjs/internals/{hooks → styled-system}/useStyled.js

@@ -5,84 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 exports.useStyled = useStyled;
-var _react = require("react");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _styleManager = require("../utils/style-sheet/style-manager");
-var _constants = require("../constants");
+var _react = require("react");
+var _hooks = require("../hooks");
+var _utils = require("../utils");
 var _CustomContext = require("../Provider/CustomContext");
-// CSS Property Map
-const propertyMap = {
-  // Padding
-  p: 'padding',
-  pt: 'padding-top',
-  pr: 'padding-right',
-  pb: 'padding-bottom',
-  pl: 'padding-left',
-  px: 'padding-inline',
-  py: 'padding-block',
-  // Margin
-  m: 'margin',
-  mt: 'margin-top',
-  mr: 'margin-right',
-  mb: 'margin-bottom',
-  ml: 'margin-left',
-  mx: 'margin-inline',
-  my: 'margin-block',
-  // Size
-  w: 'width',
-  h: 'height',
-  minw: 'min-width',
-  maxw: 'max-width',
-  minh: 'min-height',
-  maxh: 'max-height',
-  // Display
-  display: 'display',
-  // Color and Background
-  c: 'color',
-  bg: 'background',
-  // Border
-  bd: 'border',
-  rounded: 'border-radius',
-  // Shadow
-  shadow: 'box-shadow',
-  // Stack
-  spacing: 'gap',
-  align: 'align-items',
-  justify: 'justify-content'
-};
-
-// Breakpoint values in pixels - matching SCSS variables
-const breakpointValues = {
-  xs: 0,
-  // Base mobile first
-  sm: 576,
-  // $screen-sm
-  md: 768,
-  // $screen-md
-  lg: 992,
-  // $screen-lg
-  xl: 1200,
-  // $screen-xl
-  xxl: 1400 // $screen-xxl
-};
-
-/**
- * Options for the useStyled hook
- */
-
+var _responsive = require("./responsive");
+var _cssAlias = require("./css-alias");
+var _styleManager = require("./style-manager");
 /**
  * Result of the useStyled hook
  */
 
-/**
- * Checks if a value is a responsive value object
- * @param value - Value to check
- * @returns True if the value is a responsive value object
- */
-function isResponsiveValue(value) {
-  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => _constants.BREAKPOINTS.includes(key));
-}
-
 /**
  * Custom hook for managing component styling with scoped CSS variables
  *
@@ -118,7 +52,7 @@ function useStyled(options) {
   const shouldApplyStyles = enabled && !(0, _isEmpty.default)(cssVars);
 
   // Apply CSS variables through StyleManager
-  (0, _react.useLayoutEffect)(() => {
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
     if (!shouldApplyStyles) return;
 
     // Create base CSS rules for the variables
@@ -131,7 +65,7 @@ function useStyled(options) {
     // Process CSS variables, separating responsive from non-responsive
     Object.entries(cssVars).forEach(([key, value]) => {
       if (value !== undefined) {
-        if (isResponsiveValue(value)) {
+        if ((0, _responsive.isResponsiveValue)(value)) {
           // Store responsive values for later processing
           responsiveVars[key] = value;
 
@@ -156,9 +90,11 @@ function useStyled(options) {
       const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
       // Check if the property has a corresponding CSS property mapping
-      const cssProperty = propertyMap[propName];
+      const cssProperty = _cssAlias.cssSystemPropAlias[propName];
       if (cssProperty) {
-        basePropRules += `${cssProperty}: var(${varName}); `;
+        basePropRules += `${cssProperty.property}: var(${varName}); `;
+      } else if ((0, _utils.isCSSProperty)(propName)) {
+        basePropRules += `${propName}: var(${varName}); `;
       }
     });
 
@@ -180,7 +116,8 @@ function useStyled(options) {
         md: '',
         lg: '',
         xl: '',
-        xxl: ''
+        xxl: '',
+        '2xl': ''
       };
       const breakpointPropRules = {
         xs: '',
@@ -188,7 +125,8 @@ function useStyled(options) {
         md: '',
         lg: '',
         xl: '',
-        xxl: ''
+        xxl: '',
+        '2xl': ''
       };
 
       // Group styles by breakpoint
@@ -196,7 +134,6 @@ function useStyled(options) {
         Object.entries(responsiveValue).forEach(([breakpoint, value]) => {
           const bp = breakpoint;
           if (value !== undefined && bp !== 'xs') {
-            // Skip xs as it's already in base styles
             // Add the CSS variable definition for this breakpoint
             breakpointVarRules[bp] += `${varName}: ${value}; `;
 
@@ -204,9 +141,11 @@ function useStyled(options) {
             const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
 
             // Check if the property has a corresponding CSS property mapping
-            const cssProperty = propertyMap[propName];
+            const cssProperty = _cssAlias.cssSystemPropAlias[propName];
             if (cssProperty) {
               breakpointPropRules[bp] += `${cssProperty}: var(${varName}); `;
+            } else if ((0, _utils.isCSSProperty)(propName)) {
+              breakpointPropRules[bp] += `${propName}: var(${varName}); `;
             }
           }
         });
@@ -219,14 +158,15 @@ function useStyled(options) {
         md: breakpointVarRules.md + breakpointPropRules.md,
         lg: breakpointVarRules.lg + breakpointPropRules.lg,
         xl: breakpointVarRules.xl + breakpointPropRules.xl,
-        xxl: breakpointVarRules.xxl + breakpointPropRules.xxl
+        xxl: breakpointVarRules.xxl + breakpointPropRules.xxl,
+        '2xl': breakpointVarRules['2xl'] + breakpointPropRules['2xl']
       };
 
       // Add media queries for each breakpoint with rules (skip xs)
       Object.entries(breakpointRules).forEach(([breakpoint, rules]) => {
         if (rules && breakpoint !== 'xs') {
           const bp = breakpoint;
-          const minWidth = breakpointValues[bp];
+          const minWidth = _responsive.breakpointValues[bp];
           _styleManager.StyleManager.addRule(`@media (min-width: ${minWidth}px)`, `.${componentId} { ${rules} }`, {
             nonce: csp === null || csp === void 0 ? void 0 : csp.nonce
           });
@@ -238,9 +178,9 @@ function useStyled(options) {
       _styleManager.StyleManager.removeRule(`.${componentId}`);
 
       // Clean up media query rules
-      Object.keys(breakpointValues).forEach(breakpoint => {
+      Object.keys(_responsive.breakpointValues).forEach(breakpoint => {
         const bp = breakpoint;
-        const minWidth = breakpointValues[bp];
+        const minWidth = _responsive.breakpointValues[bp];
         _styleManager.StyleManager.removeRule(`@media (min-width: ${minWidth}px)`);
       });
     };

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

@@ -2,20 +2,20 @@ import React from 'react';
 /** React element with optional props and HTML attributes. */
 export type ReactElement<P = any> = React.ReactElement<P & React.HTMLAttributes<any>>;
 /** Removes 'onSelect' property from the given type. */
-export type PropsWithoutSelect<T> = Omit<T, 'onSelect'>;
+export type PropsWithoutSelect<T> = Omit<T, 'onSelect' | 'color'>;
 /** Removes 'onChange' property from the given type. */
-export type PropsWithoutChange<T> = Omit<T, 'onChange'>;
+export type PropsWithoutChange<T> = Omit<T, 'onChange' | 'color'>;
 export type PropsWithout<T, K extends keyof T> = Omit<T, K>;
 /** HTML props excluding 'onSelect' attribute. */
 export type HTMLPropsWithoutSelect<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutSelect<P>;
 /** HTML props excluding 'onChange' attribute. */
 export type HTMLPropsWithoutChange<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithoutChange<P>;
 /** Input props with 'onChange' and 'size' attributes removed. */
-export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>;
+export type SanitizedInputProps = PropsWithout<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'color'>;
 /** Textarea props with 'onChange' attribute removed. */
-export type SanitizedTextareaProps = PropsWithout<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>;
+export type SanitizedTextareaProps = PropsWithout<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'color'>;
 /** HTML props excluding 'title', 'onToggle', and 'onSelect' attributes. */
-export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect'>;
-export type WithoutChildren<T> = Omit<T, 'children'>;
+export type SanitizedHTMListProps<T extends HTMLElement = HTMLElement, P extends Record<string, any> = React.HTMLAttributes<T>> = PropsWithout<P, 'title' | 'onToggle' | 'onSelect' | 'color'>;
+export type WithoutChildren<T> = Omit<T, 'children' | 'color'>;
 export type CSSVariables = Partial<Record<`--${string}`, string | number | undefined>>;
 export type StyleProperties = React.CSSProperties | CSSVariables;

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

@@ -90,7 +90,7 @@ export interface DataProps<TData> {
      */
     childrenKey?: string;
 }
-export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends PopupProps, Omit<BoxProps, 'height'>, AnimationEventProps {
     id?: string;
     /**
      * Custom Ref for the picker
@@ -139,7 +139,7 @@ export interface PickerBaseProps<L = any> extends PopupProps, BoxProps, Animatio
     /** Custom render extra footer */
     renderExtraFooter?: () => ReactNode;
 }
-export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
+export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends DataProps<D>, PickerBaseProps<L>, FormControlBaseProps<T> {
     /**
      * Disabled items
      */

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

@@ -21,7 +21,8 @@ export type Size = `${SizeEnum}`;
 /** Basic size type (xs, sm, md, lg) */
 export type BasicSize = Exclude<Size, 'xl'>;
 export type TextSize = `${TypographySizeEnum}`;
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '2xl';
 export type ResponsiveValue<T> = {
     [key in Breakpoints]?: T;
 };
+export type WithResponsive<T> = T | ResponsiveValue<T>;

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

@@ -5,7 +5,7 @@ import { Color } from '../types/colours';
  * @param color The color value to check
  * @returns The CSS variable if it's a valid color type, or the original value
  */
-export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
+export declare const getColorValue: (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, name?: string | undefined, prop?: string) => {
     [x: string]: string | (string & {}) | undefined;

package/cjs/internals/utils/colours.js

@@ -2,7 +2,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.getColorVar = exports.getColorStyle = exports.expandHexColor = exports.createColorVariables = void 0;
+exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.getColorValue = exports.getColorStyle = exports.expandHexColor = exports.createColorVariables = void 0;
 var _colours = require("../types/colours");
 var _styleSheet = require("./style-sheet");
 /**
@@ -11,7 +11,7 @@ var _styleSheet = require("./style-sheet");
  * @param color The color value to check
  * @returns The CSS variable if it's a valid color type, or the original value
  */
-const getColorVar = color => {
+const getColorValue = color => {
   if (!color) return undefined;
 
   // Check if color is a base color (e.g., 'red', 'blue')
@@ -31,7 +31,7 @@ const getColorVar = color => {
   // Return the original value if it's not a recognized color pattern
   return color;
 };
-exports.getColorVar = getColorVar;
+exports.getColorValue = getColorValue;
 const isPresetColor = color => {
   if (!color) {
     return false;
@@ -46,7 +46,7 @@ const colorConfig = {
   prop: 'color',
   useGlobalVar: true,
   presetChecker: isPresetColor,
-  valueTransformer: getColorVar
+  valueTransformer: getColorValue
 };
 const getColorStyle = exports.getColorStyle = (0, _styleSheet.createStyleGetter)(colorConfig);
 

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

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