@carbon/react 1.45.0-rc.0 → 1.45.0

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -47,7 +47,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/ComboBox/ComboBox.js

@@ -257,7 +257,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -130,7 +130,7 @@ class ContentSwitcher extends React__default.Component {
       className: classes,
       role: "tablist",
       onChange: undefined
-    }), children && React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    }), children && React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
       index,
       onClick: composeEventHandlers([this.handleChildChange, child.props.onClick]),
       onKeyDown: this.handleChildChange,

package/es/components/DatePickerInput/DatePickerInput.js

@@ -98,7 +98,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Dropdown/Dropdown.js

@@ -228,7 +228,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -193,7 +193,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/MultiSelect/MultiSelect.js

@@ -237,6 +237,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -298,7 +301,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/NumberInput/NumberInput.js

@@ -172,7 +172,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -180,7 +180,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   useEffect(() => {

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -51,6 +51,10 @@ function ProgressIndicator(_ref) {
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     className: className
   }, rest), React__default.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) {
+      return null;
+    }
+
     // only setup click handlers if onChange event is passed
     const onClick = onChange ? () => onChange(index) : undefined;
     if (index === currentIndex) {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -104,7 +104,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/Select/Select.js

@@ -128,7 +128,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Slug/index.js

@@ -125,6 +125,7 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     className: `${prefix}--slug__additional-text`
   }, aiTextLabel)), children));
 });
+Slug.displayName = 'Slug';
 Slug.propTypes = {
   /**
    * Specify the correct translation of the AI text

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 declare const TYPES: {
@@ -23,7 +23,7 @@ declare const TYPES: {
 };
 export interface TagBaseProps {
     /**
-     * Provide content to be rendered inside of a <Tag>
+     * Provide content to be rendered inside of a `Tag`
      */
     children?: React.ReactNode;
     /**
@@ -31,11 +31,11 @@ export interface TagBaseProps {
      */
     className?: string;
     /**
-     * Specify if the <Tag> is disabled
+     * Specify if the `Tag` is disabled
      */
     disabled?: boolean;
     /**
-     * Determine if <Tag> is a filter/chip
+     * Determine if `Tag` is a filter/chip
      */
     filter?: boolean;
     /**
@@ -56,18 +56,22 @@ export interface TagBaseProps {
      * 'md' (default) sizes.
      */
     size?: 'sm' | 'md';
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Text to show on clear filters
      */
     title?: string;
     /**
-     * Specify the type of the <Tag>
+     * Specify the type of the `Tag`
      */
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
 declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): JSX.Element;
     propTypes: {
         /**
          * Provide an alternative tag or component to use instead of the default
@@ -75,7 +79,7 @@ declare const Tag: {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * Provide content to be rendered inside of a <Tag>
+         * Provide content to be rendered inside of a `Tag`
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
@@ -83,11 +87,11 @@ declare const Tag: {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Specify if the <Tag> is disabled
+         * Specify if the `Tag` is disabled
          */
         disabled: PropTypes.Requireable<boolean>;
         /**
-         * Determine if <Tag> is a filter/chip
+         * Determine if `Tag` is a filter/chip
          */
         filter: PropTypes.Requireable<boolean>;
         /**
@@ -108,12 +112,16 @@ declare const Tag: {
          * 'md' (default) sizes.
          */
         size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Text to show on clear filters
          */
         title: PropTypes.Requireable<string>;
         /**
-         * Specify the type of the <Tag>
+         * Specify the type of the `Tag`
          */
         type: PropTypes.Requireable<string>;
     };

package/es/components/Tag/Tag.js

@@ -44,6 +44,7 @@ const Tag = _ref => {
     onClose,
     size,
     as: BaseComponent,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -64,15 +65,26 @@ const Tag = _ref => {
       onClose(event);
     }
   };
+
+  // Slug is always size `md` and `inline`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
   if (filter) {
     const ComponentTag = BaseComponent ?? 'div';
     return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
-    }, other), /*#__PURE__*/React__default.createElement(Text, {
+    }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tag__custom-icon`
+    }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--tag__label`,
       title: typeof children === 'string' ? children : undefined
-    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default.createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -90,7 +102,7 @@ const Tag = _ref => {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
     title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText));
+  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -99,7 +111,7 @@ Tag.propTypes = {
    */
   as: PropTypes.elementType,
   /**
-   * Provide content to be rendered inside of a <Tag>
+   * Provide content to be rendered inside of a `Tag`
    */
   children: PropTypes.node,
   /**
@@ -107,11 +119,11 @@ Tag.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify if the <Tag> is disabled
+   * Specify if the `Tag` is disabled
    */
   disabled: PropTypes.bool,
   /**
-   * Determine if <Tag> is a filter/chip
+   * Determine if `Tag` is a filter/chip
    */
   filter: PropTypes.bool,
   /**
@@ -132,12 +144,16 @@ Tag.propTypes = {
    * 'md' (default) sizes.
    */
   size: PropTypes.oneOf(['sm', 'md']),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+   */
+  slug: PropTypes.node,
   /**
    * Text to show on clear filters
    */
   title: PropTypes.string,
   /**
-   * Specify the type of the <Tag>
+   * Specify the type of the `Tag`
    */
   type: PropTypes.oneOf(Object.keys(TYPES))
 };

package/es/components/TextArea/TextArea.js

@@ -226,7 +226,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/TextInput/TextInput.js

@@ -157,7 +157,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Tile/Tile.js

@@ -269,7 +269,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   // Slug is always size `xs`
   const slugRef = useRef(null);
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs',
       ref: slugRef
@@ -494,7 +494,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs'
     });

package/es/components/UIShell/Switcher.js

@@ -60,7 +60,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       switcherItem.focus();
     }
   };
-  const childrenWithProps = React__default.Children.map(children, (child, index) => {
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
     if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -57,7 +57,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/ComboBox/ComboBox.js

@@ -268,7 +268,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -140,7 +140,7 @@ class ContentSwitcher extends React__default["default"].Component {
       className: classes,
       role: "tablist",
       onChange: undefined
-    }), children && React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), children && React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
       index,
       onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
       onKeyDown: this.handleChildChange,

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -108,7 +108,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/Dropdown/Dropdown.js

@@ -238,7 +238,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -205,7 +205,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/MultiSelect/MultiSelect.js

@@ -248,6 +248,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -309,7 +312,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/NumberInput/NumberInput.js

@@ -182,7 +182,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -190,7 +190,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   React.useEffect(() => {

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -61,6 +61,10 @@ function ProgressIndicator(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), React__default["default"].Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React__default["default"].isValidElement(child)) {
+      return null;
+    }
+
     // only setup click handlers if onChange event is passed
     const onClick = onChange ? () => onChange(index) : undefined;
     if (index === currentIndex) {

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -114,7 +114,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/Select/Select.js

@@ -138,7 +138,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });

package/lib/components/Slug/index.js

@@ -135,6 +135,7 @@ const Slug = /*#__PURE__*/React__default["default"].forwardRef(function Slug(_re
     className: `${prefix}--slug__additional-text`
   }, aiTextLabel)), children));
 });
+Slug.displayName = 'Slug';
 Slug.propTypes = {
   /**
    * Specify the correct translation of the AI text

package/lib/components/Tag/Tag.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 declare const TYPES: {
@@ -23,7 +23,7 @@ declare const TYPES: {
 };
 export interface TagBaseProps {
     /**
-     * Provide content to be rendered inside of a <Tag>
+     * Provide content to be rendered inside of a `Tag`
      */
     children?: React.ReactNode;
     /**
@@ -31,11 +31,11 @@ export interface TagBaseProps {
      */
     className?: string;
     /**
-     * Specify if the <Tag> is disabled
+     * Specify if the `Tag` is disabled
      */
     disabled?: boolean;
     /**
-     * Determine if <Tag> is a filter/chip
+     * Determine if `Tag` is a filter/chip
      */
     filter?: boolean;
     /**
@@ -56,18 +56,22 @@ export interface TagBaseProps {
      * 'md' (default) sizes.
      */
     size?: 'sm' | 'md';
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Text to show on clear filters
      */
     title?: string;
     /**
-     * Specify the type of the <Tag>
+     * Specify the type of the `Tag`
      */
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
 declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): JSX.Element;
     propTypes: {
         /**
          * Provide an alternative tag or component to use instead of the default
@@ -75,7 +79,7 @@ declare const Tag: {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * Provide content to be rendered inside of a <Tag>
+         * Provide content to be rendered inside of a `Tag`
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
@@ -83,11 +87,11 @@ declare const Tag: {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Specify if the <Tag> is disabled
+         * Specify if the `Tag` is disabled
          */
         disabled: PropTypes.Requireable<boolean>;
         /**
-         * Determine if <Tag> is a filter/chip
+         * Determine if `Tag` is a filter/chip
          */
         filter: PropTypes.Requireable<boolean>;
         /**
@@ -108,12 +112,16 @@ declare const Tag: {
          * 'md' (default) sizes.
          */
         size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Text to show on clear filters
          */
         title: PropTypes.Requireable<string>;
         /**
-         * Specify the type of the <Tag>
+         * Specify the type of the `Tag`
          */
         type: PropTypes.Requireable<string>;
     };