@carbon/react 1.70.0 → 1.71.0

package/es/components/Tile/Tile.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
+import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
 import Link from '../Link/Link.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
@@ -24,11 +24,12 @@ import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _rect, _path, _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
+var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
   let {
     children,
     className,
+    decorator,
     light = false,
     slug,
     hasRoundedCorners = false,
@@ -38,12 +39,16 @@ const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
   const tileClasses = cx(`${prefix}--tile`, {
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: tileClasses,
     ref: ref
-  }, rest), children, slug);
+  }, rest), children, slug, decorator && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator));
 });
 Tile.displayName = 'Tile';
 Tile.propTypes = {
@@ -55,6 +60,10 @@ Tile.propTypes = {
    * The CSS class names.
    */
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
+   */
+  decorator: PropTypes.node,
   /**
    * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
    * when `slug` prop is present
@@ -70,13 +79,14 @@ Tile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
    */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
 };
 const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTile(_ref2, ref) {
   let {
     children,
     className,
     clicked = false,
+    decorator,
     disabled,
     href,
     light,
@@ -92,7 +102,9 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     [`${prefix}--tile--is-clicked`]: clicked,
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
@@ -107,25 +119,6 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     }
     onKeyDown(evt);
   }
-
-  // To Do: Replace with an an icon from `@carbon/react`
-  // since the hollow slug in `ClickableTile` is not interactive
-  const hollowSlugIcon = /*#__PURE__*/React__default.createElement("svg", {
-    className: `${prefix}--tile--slug-icon`,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, _rect || (_rect = /*#__PURE__*/React__default.createElement("rect", {
-    x: "0.5",
-    y: "0.5",
-    width: "23",
-    height: "23"
-  })), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-    d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
-    fill: "#161616"
-  })));
   const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -147,9 +140,14 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
-  }, rest), slug ? /*#__PURE__*/React__default.createElement("div", {
+  }, rest), slug || decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tile-content`
-  }, children) : children, slug && hollowSlugIcon, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React__default.createElement(AiLabel, {
+    size: "24",
+    className: `${prefix}--tile--ai-label-icon`
+  }), /*#__PURE__*/React__default.isValidElement(decorator) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, decorator), Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses,
     "aria-hidden": "true"
   }));
@@ -168,6 +166,10 @@ ClickableTile.propTypes = {
    * Boolean for whether a tile has been clicked.
    */
   clicked: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
+   */
+  decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   /**
    * Specify whether the ClickableTile should be disabled
    */
@@ -209,6 +211,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   let {
     children,
     className,
+    decorator,
     disabled,
     id,
     light,
@@ -232,14 +235,16 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     [`${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
   }, className);
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
       return;
     }
     setIsSelected(!isSelected);
@@ -266,13 +271,13 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     setPrevSelected(selected);
   }
 
-  // Slug is always size `xs`
-  const slugRef = useRef(null);
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel is always size `xs`
+  const decoratorRef = useRef(null);
+  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',
-      ref: slugRef
+      ref: decoratorRef
     });
   }
   return (
@@ -297,12 +302,18 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
       as: "label",
       htmlFor: id,
       className: `${prefix}--tile-content`
-    }, children), normalizedSlug)
+    }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tile--inner-decorator`
+    }, normalizedDecorator) : '')
   );
 });
 SelectableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the SelectableTile should be disabled
    */
@@ -325,7 +336,7 @@ SelectableTile.propTypes = {
    * The `name` of the `<input>`.
    * @deprecated
    */
-  name: PropTypes.string,
+  name: deprecate(PropTypes.string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
   /**
    * The empty handler of the `<input>`.
    */
@@ -345,7 +356,7 @@ SelectableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `SelectableTile` 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 wrapper element
    */
@@ -358,13 +369,14 @@ SelectableTile.propTypes = {
    * The value of the `<input>`.
    * @deprecated
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
 };
 const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function ExpandableTile(_ref4, forwardRef) {
   let {
     tabIndex = 0,
     className,
     children,
+    decorator,
     expanded = false,
     tileMaxHeight = 0,
     // eslint-disable-line
@@ -439,7 +451,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light,
     [`${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
   }, className);
   const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
@@ -466,10 +480,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 
     // Interactive elements or elements that are given a role should be treated
     // the same because elements with a role can not be rendered inside a `button`
-    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !slug) {
+    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
       setInteractive(false);
     }
-  }, [slug]);
+  }, [slug, decorator]);
   useIsomorphicEffect(() => {
     if (!tile.current) {
       return;
@@ -493,10 +507,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   }, []);
   const belowTheFoldId = useId('expandable-tile-interactive');
 
-  // 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'
     });
   }
@@ -506,7 +520,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     ref: tileContent
-  }, normalizedSlug, /*#__PURE__*/React__default.createElement("div", {
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--tile--inner-decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: aboveTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("button", {
@@ -549,6 +565,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 ExpandableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
+   */
+  decorator: PropTypes.node,
   /**
    * `true` if the tile is expanded.
    */
@@ -578,7 +598,7 @@ ExpandableTile.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(PropTypes.node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
   /**
    * The `tabindex` attribute.
    */

package/es/components/UIShell/SideNavMenuItem.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 React, { ComponentProps } from 'react';
+import React, { ElementType, ComponentProps } from 'react';
 import Link from './Link';
 interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
@@ -25,6 +25,10 @@ interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Optional component to render instead of default Link
+     */
+    as?: ElementType;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<Omit<SideNavMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -18,6 +18,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   const {
     children,
     className: customClassName,
+    as: Component = Link,
     isActive,
     ...rest
   } = props;
@@ -28,7 +29,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Component, _extends({}, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
@@ -52,7 +53,11 @@ SideNavMenuItem.propTypes = {
    * has an href that is the same as the current page. Can also pass in
    * `aria-current="page"`, as well.
    */
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType
 };
 
 export { SideNavMenuItem as default };

package/lib/components/AILabel/index.js

@@ -41,8 +41,8 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
     item.type?.displayName === 'AILabelActions';
   });
   const aiLabelContentClasses = cx__default["default"](className, {
-    [`${prefix}--slug-content`]: true,
-    [`${prefix}--slug-content--with-actions`]: hasAILabelActions
+    [`${prefix}--ai-label-content`]: true,
+    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
     className: aiLabelContentClasses
@@ -51,11 +51,11 @@ const AILabelContent = /*#__PURE__*/React__default["default"].forwardRef(functio
 AILabelContent.displayName = 'AILabelContent';
 AILabelContent.propTypes = {
   /**
-   * Specify the content you want rendered inside the slug ToggleTip
+   * Specify the content you want rendered inside the AILabel ToggleTip
    */
   children: PropTypes__default["default"].node,
   /**
-   * Specify an optional className to be added to the AI slug callout
+   * Specify an optional className to be added to the AILabel callout
    */
   className: PropTypes__default["default"].string
 };
@@ -67,7 +67,7 @@ const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(functio
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const aiLabelActionsClasses = cx__default["default"](className, {
-    [`${prefix}--slug-actions`]: true
+    [`${prefix}--ai-label-actions`]: true
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipActions, {
     className: aiLabelActionsClasses
@@ -76,11 +76,11 @@ const AILabelActions = /*#__PURE__*/React__default["default"].forwardRef(functio
 AILabelActions.displayName = 'AILabelActions';
 AILabelActions.propTypes = {
   /**
-   * Specify the content you want rendered inside the slug callout toolbar
+   * Specify the content you want rendered inside the AILabel callout toolbar
    */
   children: PropTypes__default["default"].node,
   /**
-   * Specify an optional className to be added to the AI slug toolbar
+   * Specify an optional className to be added to the AILabel toolbar
    */
   className: PropTypes__default["default"].string
 };
@@ -114,14 +114,14 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
   const prefix = usePrefix.usePrefix();
   const id = useId.useId('AILabel');
   const aiLabelClasses = cx__default["default"](className, {
-    [`${prefix}--slug`]: true,
-    [`${prefix}--slug--revert`]: revertActive
+    [`${prefix}--ai-label`]: true,
+    [`${prefix}--ai-label--revert`]: revertActive
   });
   const aiLabelButtonClasses = cx__default["default"]({
-    [`${prefix}--slug__button`]: true,
-    [`${prefix}--slug__button--${size}`]: size,
-    [`${prefix}--slug__button--${kind}`]: kind,
-    [`${prefix}--slug__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
+    [`${prefix}--ai-label__button`]: true,
+    [`${prefix}--ai-label__button--${size}`]: size,
+    [`${prefix}--ai-label__button--${kind}`]: kind,
+    [`${prefix}--ai-label__button--inline-with-content`]: kind === 'inline' && (aiTextLabel || textLabel)
   });
   const handleOnRevertClick = evt => {
     if (onRevertClick) {
@@ -145,9 +145,9 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
     className: aiLabelButtonClasses,
     label: ariaLabelText
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--slug__text`
+    className: `${prefix}--ai-label__text`
   }, aiText), kind === 'inline' && (aiTextLabel || textLabel) && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--slug__additional-text`
+    className: `${prefix}--ai-label__additional-text`
   }, aiTextLabel || textLabel)), children));
 });
 AILabel.displayName = 'AILabel';

package/lib/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/lib/components/Checkbox/Checkbox.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
@@ -29,6 +30,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className,
+    decorator,
     helperText,
     id,
     labelText,
@@ -58,15 +60,16 @@ const Checkbox = /*#__PURE__*/React__default["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__default["default"](`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  let normalizedSlug;
-  if (slug && /*#__PURE__*/React__default["default"].isValidElement(slug)) {
-    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  let normalizedDecorator = /*#__PURE__*/React__default["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["default"].cloneElement(normalizedDecorator, {
       size
     });
   }
@@ -115,7 +118,9 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     title: title
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
-  }, labelText, normalizedSlug)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--checkbox-wrapper-inner--decorator`
+  }, normalizedDecorator) : '')), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -136,6 +141,10 @@ Checkbox.propTypes = {
    * Specify an optional className to be applied to the <label> node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Checkbox` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify whether the underlying input should be checked by default
    */
@@ -186,7 +195,7 @@ Checkbox.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].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/lib/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/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
+var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
@@ -27,6 +28,7 @@ const CheckboxGroup = _ref => {
   let {
     children,
     className,
+    decorator,
     helperText,
     invalid,
     invalidText,
@@ -53,13 +55,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["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini',
       kind: 'default'
     });
@@ -73,7 +76,9 @@ const CheckboxGroup = _ref => {
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, legendText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--checkbox-group-inner--decorator`
+  }, normalizedDecorator) : ''), children, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -94,6 +99,10 @@ CheckboxGroup.propTypes = {
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `CheckboxGroup` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Provide text for the form group for additional help
    */
@@ -126,7 +135,7 @@ CheckboxGroup.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].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/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -6,11 +6,14 @@
  */
 import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
+export type DeprecatedCodeSnippetAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewCodeSnippetAlignmnet = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignmnet;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: CodeSnippetAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */
@@ -106,7 +109,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string>;
+        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node