@carbon/react 1.71.0-rc.0 → 1.71.0

package/es/components/Checkbox/Checkbox.d.ts

@@ -16,6 +16,10 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * exposing to the user
      */
     labelText: NonNullable<ReactNode>;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Checkbox` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the underlying input should be checked by default
      */
@@ -45,6 +49,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     invalidText?: ReactNode;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
     slug?: ReactNode;

package/es/components/Checkbox/Checkbox.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -19,6 +20,7 @@ import { Text } from '../Text/Text.js';
 const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
+    decorator,
     helperText,
     id,
     labelText,
@@ -48,15 +50,16 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-wrapper--warning`]: showWarning,
-    [`${prefix}--checkbox-wrapper--slug`]: slug
+    [`${prefix}--checkbox-wrapper--slug`]: slug,
+    [`${prefix}--checkbox-wrapper--decorator`]: decorator
   });
   const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    const size = normalizedDecorator.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -105,7 +108,9 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title: title
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)), /*#__PURE__*/React__default.createElement("div", {
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--checkbox-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -126,6 +131,10 @@ Checkbox.propTypes = {
    * Specify an optional className to be applied to the <label> node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Checkbox` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the underlying input should be checked by default
    */
@@ -176,7 +185,7 @@ Checkbox.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/es/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -8,6 +8,7 @@ import React, { ReactNode } from 'react';
 export interface CheckboxGroupProps {
     children?: ReactNode;
     className?: string;
+    decorator?: ReactNode;
     helperText?: ReactNode;
     invalid?: boolean;
     invalidText?: ReactNode;
@@ -15,6 +16,10 @@ export interface CheckboxGroupProps {
     orientation?: 'horizontal' | 'vertical';
     legendText: ReactNode;
     readOnly?: boolean;
+    /**
+     * * @deprecated please use decorator instead.
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
     slug?: ReactNode;
     warn?: boolean;
     warnText?: ReactNode;

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -17,6 +18,7 @@ const CheckboxGroup = _ref => {
   let {
     children,
     className,
+    decorator,
     helperText,
     invalid,
     invalidText,
@@ -43,13 +45,14 @@ const CheckboxGroup = _ref => {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
-    [`${prefix}--checkbox-group--slug`]: slug
+    [`${prefix}--checkbox-group--slug`]: slug,
+    [`${prefix}--checkbox-group--decorator`]: decorator
   });
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (/*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'mini',
       kind: 'default'
     });
@@ -63,7 +66,9 @@ const CheckboxGroup = _ref => {
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--checkbox-group-inner--decorator`
+  }, normalizedDecorator) : ''), children, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -84,6 +89,10 @@ CheckboxGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+   */
+  decorator: PropTypes.node,
   /**
    * Provide text for the form group for additional help
    */
@@ -116,7 +125,7 @@ CheckboxGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the form group is currently in warning state
    */

package/es/components/ComboBox/ComboBox.d.ts

@@ -147,7 +147,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     placeholder?: string;
     /**
-     * Is the ComboBox readonly?
+     * Whether or not the component is read-only
      */
     readOnly?: boolean;
     /**

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -39,6 +39,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the Modal content should have any inner padding.
      */
@@ -70,6 +74,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     selectorsFloatingMenus?: string[];
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
      */
     slug?: ReactNode;

package/es/components/ComposedModal/ComposedModal.js

@@ -22,6 +22,7 @@ import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } f
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Tab } from '../../internal/keyboard/keys.js';
 
@@ -98,6 +99,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: customClassName,
     containerClassName,
     danger,
+    decorator,
     isFullWidth,
     onClose,
     onKeyDown,
@@ -189,7 +191,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const modalClass = cx(`${prefix}--modal`, {
     'is-visible': isOpen,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, customClassName);
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
@@ -248,10 +251,10 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `sm`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
@@ -277,7 +280,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, normalizedSlug, childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -309,6 +314,10 @@ ComposedModal.propTypes = {
    * Note that this prop is not applied if you render primary/danger button by yourself
    */
   danger: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the Modal content should have any inner padding.
    */
@@ -348,10 +357,7 @@ ComposedModal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
-   */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 
 export { ModalBody, ComposedModal as default };

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -90,6 +90,10 @@ export interface FluidNumberInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidNumberInput: React.FC<FluidNumberInputProps>;
 export default FluidNumberInput;

package/es/components/FluidSelect/FluidSelect.d.ts

@@ -52,6 +52,10 @@ export interface FluidSelectProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidSelect: React.ForwardRefExoticComponent<FluidSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default FluidSelect;

package/es/components/FluidSelect/FluidSelect.js

@@ -77,7 +77,11 @@ FluidSelect.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidSelect as default };

package/es/components/FluidTextArea/FluidTextArea.d.ts

@@ -91,6 +91,10 @@ export interface FluidTextAreaProps {
      *  Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextArea: React.FC<FluidTextAreaProps>;
 export default FluidTextArea;

package/es/components/FluidTextArea/FluidTextArea.js

@@ -115,7 +115,11 @@ FluidTextArea.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTextArea as default };

package/es/components/FluidTextInput/FluidPasswordInput.d.ts

@@ -78,6 +78,10 @@ export interface FluidPasswordInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidPasswordInput: React.FC<FluidPasswordInputProps>;
 export default FluidPasswordInput;

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -83,5 +83,9 @@ import '../TextInput/PasswordInput.js';
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 });

package/es/components/FluidTextInput/FluidTextInput.d.ts

@@ -65,6 +65,10 @@ export interface FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextInput: React.ForwardRefExoticComponent<FluidTextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTextInput;

package/es/components/FluidTextInput/FluidTextInput.js

@@ -97,7 +97,11 @@ FluidTextInput.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTextInput as default };

package/es/components/FluidTimePicker/FluidTimePicker.d.ts

@@ -40,6 +40,10 @@ export interface FluidTimePickerProps extends FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Specify if the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTimePicker: React.ForwardRefExoticComponent<FluidTimePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTimePicker;

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -24,6 +24,7 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
     invalidText,
     warn,
     warnText,
+    readOnly,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -43,6 +44,19 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
     }
   };
   const error = invalid || warn;
+  const childrenWithProps = () => {
+    if (disabled) {
+      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+        disabled: true
+      }));
+    }
+    if (readOnly) {
+      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+        readOnly: true
+      }));
+    }
+    return children;
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -50,12 +64,10 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React__default.createElement(FluidTextInput, _extends({
-    ref: ref
-  }, other))), disabled ? React__default.Children.toArray(children).map(child => {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      disabled
-    });
-  }) : children), error && /*#__PURE__*/React__default.createElement("hr", {
+    ref: ref,
+    readOnly: readOnly,
+    disabled: disabled
+  }, other))), childrenWithProps()), error && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--time-picker__divider`
   }), error && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`
@@ -98,7 +110,11 @@ FluidTimePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTimePicker as default };

package/es/components/Modal/Modal.d.ts

@@ -39,6 +39,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the modal contains scrolling content
      */
@@ -151,6 +155,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      */
     size?: ModalSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
      */
     slug?: ReactNode;

package/es/components/Modal/Modal.js

@@ -27,6 +27,7 @@ import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
@@ -37,6 +38,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     'aria-label': ariaLabelProp,
     children,
     className,
+    decorator,
     modalHeading = '',
     modalLabel = '',
     modalAriaLabel,
@@ -143,7 +145,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -227,10 +230,10 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
   }, []);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `sm`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
@@ -267,7 +270,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
+  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -348,6 +353,10 @@ Modal.propTypes = {
    * Specify whether the Modal is for dangerous actions
    */
   danger: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the modal contains scrolling content
    */
@@ -478,10 +487,7 @@ Modal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes.oneOf(ModalSizes),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
-   */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.')
 };
 
 export { ModalSizes, Modal as default };

package/es/components/PaginationNav/PaginationNav.js

@@ -183,8 +183,20 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   } = _ref4;
   const smMediaQuery = `(max-width: ${breakpoints.sm.width})`;
   const isSm = useMatchMedia(smMediaQuery);
+  let numberOfPages;
+  switch (size) {
+    case 'md':
+      numberOfPages = itemsShown === 4 ? itemsShown : 5;
+      break;
+    case 'sm':
+      numberOfPages = Math.max(4, Math.min(itemsShown, 7));
+      break;
+    default:
+      numberOfPages = 4;
+      break;
+  }
   const [currentPage, setCurrentPage] = useState(page);
-  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(itemsShown >= 4 && !isSm ? itemsShown : 4);
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = useState(itemsShown >= 4 && !isSm ? itemsShown : numberOfPages);
   const [cuts, setCuts] = useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
@@ -229,10 +241,10 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   useEffect(() => {
-    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : 4;
+    const itemsToBeShown = itemsShown >= 4 && !isSm ? itemsShown : numberOfPages;
     setItemsDisplayedOnPage(Math.max(itemsToBeShown, 4));
     setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsToBeShown, 4)));
-  }, [totalItems, itemsShown, isSm]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [totalItems, itemsShown, isSm, size]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   useEffect(() => {

package/es/components/RadioButton/RadioButton.d.ts

@@ -15,6 +15,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional className to be applied to the containing node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioButton` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the `<RadioButton>` should be checked by default
      */
@@ -55,6 +59,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
     slug?: ReactNode;