@carbon/ibm-products 2.52.0 → 2.53.0-rc.0

package/es/components/ActionBar/ActionBarOverflowItems.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
+import React, { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
 import PropTypes from 'prop-types';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type OverflowItem = {
@@ -33,7 +33,7 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
     tabIndex?: number;
 }
 export declare const ActionBarOverflowItems: {
-    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         /**

package/es/components/AddSelect/AddSelectBody.js

@@ -12,6 +12,14 @@ import cx from 'classnames';
 import { Tag } from '@carbon/react';
 import { Tearsheet } from '../Tearsheet/Tearsheet.js';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
+import '../EmptyStates/EmptyState.js';
+import '../EmptyStates/EmptyStateV2.js';
+import '../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+import '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+import '../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+import { NotFoundEmptyState } from '../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+import '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+import '../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 import { AddSelectSidebar } from './AddSelectSidebar.js';
 import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs.js';
 import { AddSelectList } from './AddSelectList.js';
@@ -23,7 +31,6 @@ import { useItemSort } from './hooks/useItemSort.js';
 import useParentSelect from './hooks/useParentSelect.js';
 import usePath from './hooks/usePath.js';
 import { pkg } from '../../settings.js';
-import { NotFoundEmptyState } from '../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
 
 var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "sortByLabel", "title", "useNormalizedItems"];
 var blockClass = "".concat(pkg.prefix, "--add-select");

package/es/components/AddSelect/AddSelectBreadcrumbs.d.ts

@@ -2,7 +2,7 @@ export function AddSelectBreadcrumbs({ multi, onClick, path }: {
     multi: any;
     onClick: any;
     path: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectBreadcrumbs {
     export namespace propTypes {
         let multi: PropTypes.Requireable<boolean>;
@@ -11,6 +11,7 @@ export namespace AddSelectBreadcrumbs {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectBreadcrumbs";
 export {};

package/es/components/AddSelect/AddSelectColumn.d.ts

@@ -10,7 +10,7 @@ export function AddSelectColumn({ columnInputPlaceholder, filterByLabel, header,
     setMultiSelection: any;
     setPath: any;
     sortByLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectColumn {
     export namespace propTypes {
         let columnInputPlaceholder: PropTypes.Requireable<string>;
@@ -26,6 +26,7 @@ export namespace AddSelectColumn {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectColumn";
 export {};

package/es/components/AddSelect/AddSelectFilter.d.ts

@@ -14,7 +14,7 @@ export function AddSelectFilter({ appliedFilters, clearFiltersText, filterOpts,
     primaryButtonText: any;
     searchTerm: any;
     secondaryButtonText: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectFilter {
     export namespace propTypes {
         let appliedFilters: PropTypes.Requireable<object>;
@@ -35,6 +35,7 @@ export namespace AddSelectFilter {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectFilter";
 export {};

package/es/components/AddSelect/AddSelectFilter.js

@@ -7,7 +7,7 @@
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
-import { Search, Button, Layer, Dropdown, ButtonSet, Tag } from '@carbon/react';
+import { Search, Button, Layer, Dropdown, ButtonSet, DismissibleTag } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from '../../_virtual/index.js';
 import { Filter } from '@carbon/react/icons';
@@ -134,15 +134,15 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "-applied")
   }, Object.keys(appliedFilters).map(function (filterType) {
-    return /*#__PURE__*/React__default.createElement(Tag, {
+    return /*#__PURE__*/React__default.createElement(DismissibleTag, {
       key: filterType,
+      text: "".concat(filterType, ": ").concat(appliedFilters[filterType]),
       type: "gray",
       size: "sm",
       onClose: function onClose() {
         return removeTag(filterType);
-      },
-      filter: true
-    }, "".concat(filterType, ": ").concat(appliedFilters[filterType]));
+      }
+    });
   }), /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",

package/es/components/AddSelect/AddSelectFormControl.d.ts

@@ -3,7 +3,7 @@ export function AddSelectFormControl({ item, onClick, selected, type }: {
     onClick: any;
     selected: any;
     type: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectFormControl {
     export namespace propTypes {
         let item: PropTypes.Requireable<object>;
@@ -13,6 +13,7 @@ export namespace AddSelectFormControl {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectFormControl";
 export {};

package/es/components/AddSelect/AddSelectList.d.ts

@@ -2,7 +2,7 @@ export function AddSelectList({ filteredItems, multi, ...rest }: {
     [x: string]: any;
     filteredItems: any;
     multi: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectList {
     export namespace propTypes {
         let filteredItems: PropTypes.Requireable<any[]>;
@@ -11,6 +11,7 @@ export namespace AddSelectList {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectList";
 export {};

package/es/components/AddSelect/AddSelectMetaPanel.d.ts

@@ -3,7 +3,7 @@ export function AddSelectMetaPanel({ closeIconDescription, meta, setDisplayMetaP
     meta: any;
     setDisplayMetaPanel: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectMetaPanel {
     export namespace propTypes {
         let closeIconDescription: PropTypes.Validator<string>;
@@ -17,6 +17,7 @@ export namespace AddSelectMetaPanel {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectMetaPanel";
 export {};

package/es/components/AddSelect/AddSelectRow.d.ts

@@ -19,7 +19,7 @@ export function AddSelectRow({ appliedModifiers, displayMetalPanel, index, focus
     setSingleSelection: any;
     setSize: any;
     singleSelection: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectRow {
     export namespace propTypes {
         let appliedModifiers: PropTypes.Requireable<any[]>;
@@ -46,6 +46,7 @@ export namespace AddSelectRow {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectList";
 export {};

package/es/components/AddSelect/AddSelectSidebar.d.ts

@@ -11,7 +11,7 @@ export function AddSelectSidebar({ appliedModifiers, closeIconDescription, displ
     noSelectionDescription: any;
     noSelectionTitle: any;
     setDisplayMetaPanel: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace AddSelectSidebar {
     export namespace propTypes {
         let appliedModifiers: PropTypes.Requireable<any[]>;
@@ -29,6 +29,7 @@ export namespace AddSelectSidebar {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "AddSelectSidebar";
 export {};

package/es/components/AddSelect/AddSelectSidebar.js

@@ -9,9 +9,9 @@ import { objectWithoutProperties as _objectWithoutProperties } from '../../_virt
 import React__default from 'react';
 import { Tag, Accordion, AccordionItem } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
+import { NoDataEmptyState } from '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
 import { pkg } from '../../settings.js';
 import { AddSelectMetaPanel } from './AddSelectMetaPanel.js';
-import { NoDataEmptyState } from '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
 
 var _excluded = ["meta", "icon", "avatar"];
 var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");

package/es/components/AddSelect/AddSelectSort.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 export interface AddSelectSortProps {
     setSortAttribute?: (attribute: any) => void;
@@ -6,7 +7,7 @@ export interface AddSelectSortProps {
     sortByLabel?: string;
 }
 export declare const AddSelectSort: {
-    ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): import("react/jsx-runtime").JSX.Element;
+    ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): React.JSX.Element;
     propTypes: {
         setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
         setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -6,7 +6,7 @@ export function BreadcrumbWithOverflow({ breadcrumbs, className, maxVisible, noT
     noTrailingSlash: any;
     overflowAriaLabel: any;
     overflowTooltipAlign: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace BreadcrumbWithOverflow {
     export namespace propTypes {
         let breadcrumbs: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -43,6 +43,7 @@ export namespace BreadcrumbWithOverflow {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "BreadcrumbWithOverflow";
 export {};

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.d.ts

@@ -5,7 +5,7 @@ export function ButtonSetWithOverflow({ buttons, className, onWidthChange, butto
     buttonSetOverflowLabel: any;
     menuOptionsClass: any;
     rightAlign: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace ButtonSetWithOverflow {
     export namespace propTypes {
         let buttonSetOverflowLabel: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
@@ -17,6 +17,7 @@ export namespace ButtonSetWithOverflow {
     }
     export { componentName as displayName };
 }
+import React from 'react';
 import PropTypes from 'prop-types';
 declare const componentName: "ButtonSetWithOverflow";
 export {};

package/es/components/Card/Card.d.ts

@@ -57,10 +57,14 @@ interface CardProp extends PropsWithChildren {
     sequence?: number;
     iconDescription?: string;
     /**
-     * **Experimental?** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode | boolean;
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
     status?: 'complete' | 'incomplete';
     title?: ReactNode;
     titleSize?: 'default' | 'large';

package/es/components/Card/Card.js

@@ -16,7 +16,7 @@ import { CardFooter } from './CardFooter.js';
 import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
-var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
+var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -25,6 +25,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
+    aiLabel = _ref.aiLabel,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -166,7 +167,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-ai-label"), !!aiLabel), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -182,6 +183,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
+      aiLabel: aiLabel,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -265,6 +267,10 @@ Card.propTypes = {
     href: PropTypes.string
   })),
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   children: PropTypes.node,
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
@@ -316,6 +322,7 @@ Card.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   * @deprecated please use the `aiLabel` prop
    */
   slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   status: PropTypes.oneOf(['complete', 'incomplete']),

package/es/components/Card/CardFooter.d.ts

@@ -23,7 +23,7 @@ interface CardFooterProps {
     secondaryButtonText?: string;
 }
 export declare const CardFooter: {
-    ({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: CardFooterProps): React.JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;

package/es/components/Card/CardHeader.d.ts

@@ -1,7 +1,11 @@
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 interface CardHeaderProps {
-    actions?: ReactNode[] | ReactNode;
+    actions?: ReactNode;
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode | boolean;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -25,16 +29,21 @@ interface CardHeaderProps {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        /**
+         * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+         */
+        aiLabel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -58,6 +67,7 @@ export declare const CardHeader: {
         /**
          * **Experimental:** For all cases a `Slug` component can be provided.
          * Clickable tiles only accept a boolean value of true and display a hollow slug.
+         * @deprecated please use the `aiLabel` prop
          */
         slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;

package/es/components/Card/CardHeader.js

@@ -20,6 +20,7 @@ var defaults = {
 };
 var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
     onSecondaryButtonClick = _ref.onSecondaryButtonClick,
@@ -47,8 +48,9 @@ var CardHeader = function CardHeader(_ref) {
   var headerClasses = cx(headerClass, _defineProperty(_defineProperty(_defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
   var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
   var actionGhostButtonClass = cx(actionGhostButton, _defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowSlugIcon = /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon"),
+  var hollowAiIcon = /*#__PURE__*/React__default.createElement("svg", {
+    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon") // NOTE: We cannot change this to ai-label until carbon changes their classnames on their end
+    ,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -63,12 +65,13 @@ var CardHeader = function CardHeader(_ref) {
     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"
   })));
-  var normalizedSlug = null;
-  if (slug) {
-    if (inClickableCard || typeof slug === 'boolean') {
-      normalizedSlug = hollowSlugIcon;
+  var normalizedAiLabel = null;
+  if (aiLabel || slug) {
+    if (inClickableCard || typeof aiLabel === 'boolean' || typeof slug === 'boolean') {
+      normalizedAiLabel = hollowAiIcon;
     } else {
-      normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      var element = aiLabel || slug;
+      normalizedAiLabel = /*#__PURE__*/React__default.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
     }
@@ -76,7 +79,7 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-ai-label"), !!aiLabel), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__title-container")
   }, label && /*#__PURE__*/React__default.createElement("p", {
@@ -102,11 +105,15 @@ var CardHeader = function CardHeader(_ref) {
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)), normalizedSlug));
+  }, primaryButtonText)), normalizedAiLabel));
 };
 /**@ts-ignore */
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   hasActions: PropTypes.bool,
   /**
@@ -130,6 +137,7 @@ CardHeader.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   * @deprecated please use the `aiLabel` prop
    */
   slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),

package/es/components/Carousel/Carousel.js

@@ -12,6 +12,7 @@ import { CarouselItem } from './CarouselItem.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -54,6 +55,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var carouselRef = useRef(null);
   var scrollRef = useRef(null);
+  var leftFadedEdgeRef = useRef(null);
+  var rightFadedEdgeRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
   var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
@@ -264,6 +267,16 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
     };
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
+  useIsomorphicEffect(function () {
+    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+    }
+  }, [leftFadedEdgeRef, leftFadedEdgeColor]);
+  useIsomorphicEffect(function () {
+    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+    }
+  }, [rightFadedEdgeRef, rightFadedEdgeColor]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
@@ -281,15 +294,11 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
     }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scrolled"),
-    style: {
-      background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
-    }
+    ref: leftFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scrolled")
   }), rightFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scroll-max"),
-    style: {
-      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
-    }
+    ref: rightFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scroll-max")
   })));
 });
 Carousel.displayName = componentName;

package/es/components/Checklist/ChecklistChart.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, createForOfIteratorHelper as _createForOfIteratorHelper, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import clamp from 'lodash/clamp';
@@ -38,12 +38,28 @@ function (_ref, ref) {
   var numDegrees = clamp(value * 360, 0, 360);
   var circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
   var progressColor = purple50;
+  useEffect(function () {
+    var ele = document.getElementsByClassName("".concat(blockClass));
+    setTimeout(function () {
+      var _iterator = _createForOfIteratorHelper(ele),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var el = _step.value;
+          if (el instanceof HTMLElement) {
+            el.style.setProperty('background-image', "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"));
+            el.style.setProperty('border-radius', '50%');
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }, 0);
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
-    style: {
-      backgroundImage: "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"),
-      borderRadius: '50%'
-    },
     ref: ref,
     role: "img"
   }, getDevtoolsProps(componentName)));