@carbon/react 1.71.0-rc.0 → 1.71.0

package/es/components/RadioButton/RadioButton.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
@@ -18,6 +19,7 @@ import { Text } from '../Text/Text.js';
 const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     className,
+    decorator,
     disabled,
     hideLabel,
     id,
@@ -41,13 +43,14 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   });
   const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
     [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
-    [`${prefix}--radio-button-wrapper--slug`]: slug
+    [`${prefix}--radio-button-wrapper--slug`]: slug,
+    [`${prefix}--radio-button-wrapper--decorator`]: decorator
   });
   const inputRef = useRef(null);
-  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
     });
   }
@@ -70,7 +73,9 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)));
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--radio-button-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -82,6 +87,10 @@ RadioButton.propTypes = {
    * Provide an optional className to be applied to the containing node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the `<RadioButton>` should be checked by default
    */
@@ -128,7 +137,7 @@ RadioButton.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` 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 the value of the `<RadioButton>`
    */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -17,6 +17,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional className to be applied to the container node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the `<RadioButton>` to be selected by default
      */
@@ -64,6 +68,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      */
     readOnly?: boolean;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
     slug?: ReactNode;

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { Legend } from '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import deprecate from '../../prop-types/deprecate.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { useId } from '../../internal/useId.js';
 
@@ -19,6 +20,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   const {
     children,
     className,
+    decorator,
     defaultSelected,
     disabled,
     helperText,
@@ -87,7 +89,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     [`${prefix}--radio-button-group--readonly`]: readOnly,
     [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
     [`${prefix}--radio-button-group--warning`]: showWarning,
-    [`${prefix}--radio-button-group--slug`]: slug
+    [`${prefix}--radio-button-group--slug`]: slug,
+    [`${prefix}--radio-button-group--decorator`]: decorator
   });
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -99,10 +102,10 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
   }, helperText) : null;
   const divRef = useRef(null);
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is 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'
     });
@@ -117,7 +120,9 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: `${prefix}--label`
-  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--radio-button-group-inner--decorator`
+  }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -138,6 +143,10 @@ RadioButtonGroup.propTypes = {
    * Provide an optional className to be applied to the container node
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `RadioButtonGroup` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify the `<RadioButton>` to be selected by default
    */
@@ -191,7 +200,7 @@ RadioButtonGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` 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 the value that is currently selected in the group
    */

package/es/components/RadioTile/RadioTile.d.ts

@@ -18,6 +18,10 @@ export interface RadioTileProps {
      * Provide an optional `className` to be applied to the underlying `<label>`.
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+     */
+    decorator?: React.ReactNode;
     /**
      * Specify whether the `RadioTile` should be disabled.
      */
@@ -48,6 +52,7 @@ export interface RadioTileProps {
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: React.ReactNode;

package/es/components/RadioTile/RadioTile.js

@@ -25,6 +25,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
   let {
     children,
     className: customClassName,
+    decorator,
     disabled,
     light,
     checked,
@@ -45,7 +46,9 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled,
     [`${prefix}--tile--slug`]: slug,
-    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    [`${prefix}--tile--decorator`]: decorator,
+    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -69,10 +72,10 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     }
   }
 
-  // Slug is always size `xs`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `xs`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'xs'
     });
   }
@@ -96,7 +99,9 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tile-content`
-  }, children), normalizedSlug));
+  }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : ''));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -112,6 +117,10 @@ RadioTile.propTypes = {
    * Provide an optional `className` to be applied to the underlying `<label>`.
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `RadioTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the `RadioTile` should be disabled.
    */
@@ -144,9 +153,9 @@ RadioTile.propTypes = {
    */
   required: PropTypes.bool,
   /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `RadioTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Tag/DismissibleTag.d.ts

@@ -13,6 +13,10 @@ export interface DismissibleTagBaseProps {
      * Provide a custom className that is applied to the containing <span>
      */
     className?: string;
+    /**
+     * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify if the `DismissibleTag` is disabled
      */
@@ -36,6 +40,7 @@ export interface DismissibleTagBaseProps {
      */
     size?: keyof typeof SIZES;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
     slug?: ReactNode;
@@ -58,12 +63,16 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+         */
+        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Specify if the `DismissibleTag` is disabled
          */
@@ -89,7 +98,7 @@ declare const DismissibleTag: {
         /**
          * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
          */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        slug: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Provide text to be rendered inside of a the tag.
          */

package/es/components/Tag/DismissibleTag.js

@@ -11,6 +11,7 @@ import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 import Tag, { SIZES, TYPES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
 import '../Tooltip/DefinitionTooltip.js';
@@ -23,6 +24,7 @@ var _Close;
 const DismissibleTag = _ref => {
   let {
     className,
+    decorator,
     disabled,
     id,
     renderIcon,
@@ -50,9 +52,9 @@ const DismissibleTag = _ref => {
       onClose(event);
     }
   };
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  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',
       kind: 'inline'
     });
@@ -79,7 +81,9 @@ const DismissibleTag = _ref => {
   }, /*#__PURE__*/React__default.createElement(Text, {
     title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
-  }, text), normalizedSlug, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, text), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement(Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
     align: "bottom",
     className: tooltipClasses,
@@ -98,6 +102,10 @@ DismissibleTag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes.string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify if the `DismissibleTag` is disabled
    */
@@ -123,7 +131,7 @@ DismissibleTag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` 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.'),
   /**
    * Provide text to be rendered inside of a the tag.
    */

package/es/components/Tag/Tag.d.ts

@@ -34,6 +34,10 @@ export interface TagBaseProps {
      * Provide a custom className that is applied to the containing <span>
      */
     className?: string;
+    /**
+     * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify if the `Tag` is disabled
      */
@@ -61,6 +65,7 @@ export interface TagBaseProps {
      */
     size?: keyof typeof SIZES;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
     slug?: ReactNode;

package/es/components/Tag/Tag.js

@@ -44,6 +44,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   let {
     children,
     className,
+    decorator,
     id,
     type,
     filter,
@@ -87,10 +88,10 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     }
   };
 
-  // Slug is always size `md` and `inline`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `sm` and `inline`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel' && !isInteractiveTag) {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm',
       kind: 'inline'
     });
@@ -105,7 +106,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
       title: typeof children === 'string' ? children : undefined,
       className: `${prefix}--tag__label`
-    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedDecorator, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -136,7 +137,9 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default.createElement(Text, {
     title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, children !== null && children !== undefined ? children : typeText), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tag__decorator`
+  }, normalizedDecorator) : '');
 });
 Tag.propTypes = {
   /**
@@ -152,6 +155,10 @@ Tag.propTypes = {
    * Provide a custom className that is applied to the containing <span>
    */
   className: PropTypes.string,
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify if the `Tag` is disabled
    */
@@ -181,7 +188,7 @@ Tag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` 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.'),
   /**
    * Text to show on clear filters
    */

package/es/components/Tile/Tile.d.ts

@@ -2,6 +2,10 @@ import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAt
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -10,7 +14,8 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
      */
     hasRoundedCorners?: boolean;
     /**
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     * @deprecated please use `decorator` instead.
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
      */
     slug?: ReactNode;
 }
@@ -18,6 +23,10 @@ export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.Ref
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+     */
+    decorator?: boolean | ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -56,6 +65,7 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      */
     rel?: string;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Specify if a `Slug` icon should be rendered inside the `ClickableTile`
      */
     slug?: boolean;
@@ -64,6 +74,10 @@ export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTil
 export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -101,6 +115,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     selected?: boolean;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
     slug?: ReactNode;
@@ -122,6 +137,10 @@ export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableT
 export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+     */
+    decorator?: ReactNode;
     /** @deprecated */
     light?: boolean;
     /**
@@ -146,6 +165,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      */
     onKeyUp?(event: KeyboardEvent): void;
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
      */
     slug?: ReactNode;