@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.60

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -89,6 +89,5 @@ RowSizeRadioGroup.propTypes = {
   selectedOption: index.default.string.isRequired,
   tableId: index.default.string.isRequired
 };
-var RowSizeRadioGroup$1 = RowSizeRadioGroup;
 
-exports.default = RowSizeRadioGroup$1;
+exports.default = RowSizeRadioGroup;

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -30,7 +30,7 @@ var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, o
   });
 };
 var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
-  if (isKeyEvent) {
+  {
     dispatch({
       type: COLUMN_RESIZE_START,
       payload: {

package/lib/components/Datagrid/useColumnOrder.js

@@ -13,7 +13,7 @@ var reactTable = require('react-table');
 
 
 
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
 	enumerable: true,
 	get: function () { return reactTable.useColumnOrder; }
 });

package/lib/components/Datagrid/useDefaultStringRenderer.js

@@ -40,6 +40,5 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   };
   hooks.visibleColumns.push(visibleColumns);
 };
-var useDefaultStringRenderer$1 = useDefaultStringRenderer;
 
-exports.default = useDefaultStringRenderer$1;
+exports.default = useDefaultStringRenderer;

package/lib/components/Datagrid/useEditableCell.js

@@ -14,6 +14,5 @@ var useInlineEdit = require('./useInlineEdit.js');
 var useEditableCell = function useEditableCell(hooks) {
   useInlineEdit.default(hooks);
 };
-var useEditableCell$1 = useEditableCell;
 
-exports.default = useEditableCell$1;
+exports.default = useEditableCell;

package/lib/components/Datagrid/useFlexResize.js

@@ -79,6 +79,5 @@ var useFlexResize = function useFlexResize(hooks) {
   });
   hooks.useInstance.push(useInstance);
 };
-var useFlexResize$1 = useFlexResize;
 
-exports.default = useFlexResize$1;
+exports.default = useFlexResize;

package/lib/components/Datagrid/useFloatingScroll.js

@@ -77,6 +77,5 @@ var useFloatingScroll = function useFloatingScroll(hooks) {
   hooks.useInstance.push(useAddScrollListener);
   hooks.useInstance.push(useInstance);
 };
-var useFloatingScroll$1 = useFloatingScroll;
 
-exports.default = useFloatingScroll$1;
+exports.default = useFloatingScroll;

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -119,6 +119,5 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
   hooks.visibleColumns.push(visibleColumns);
   hooks.useInstance.push(useInstance);
 };
-var useNestedRowExpander$1 = useNestedRowExpander;
 
-exports.default = useNestedRowExpander$1;
+exports.default = useNestedRowExpander;

package/lib/components/Datagrid/useParentDimensions.js

@@ -59,6 +59,5 @@ var useParentDimensions = function useParentDimensions(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useParentDimensions$1 = useParentDimensions;
 
-exports.default = useParentDimensions$1;
+exports.default = useParentDimensions;

package/lib/components/Datagrid/useResizeTable.js

@@ -36,6 +36,5 @@ var useResizeTable = function useResizeTable(hooks) {
   };
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
 };
-var useResizeTable$1 = useResizeTable;
 
-exports.default = useResizeTable$1;
+exports.default = useResizeTable;

package/lib/components/Datagrid/useRowExpander.js

@@ -69,6 +69,5 @@ var useRowExpander = function useRowExpander(hooks) {
   hooks.visibleColumns.push(visibleColumns);
   hooks.useInstance.push(useInstance);
 };
-var useRowExpander$1 = useRowExpander;
 
-exports.default = useRowExpander$1;
+exports.default = useRowExpander;

package/lib/components/Datagrid/useRowRenderer.js

@@ -69,6 +69,5 @@ var useRowRenderer = function useRowRenderer(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useRowRenderer$1 = useRowRenderer;
 
-exports.default = useRowRenderer$1;
+exports.default = useRowRenderer;

package/lib/components/Datagrid/useRowSize.js

@@ -55,6 +55,5 @@ var useRowSize = function useRowSize(hooks) {
   };
   hooks.getTableProps.push(getTableProps);
 };
-var useRowSize$1 = useRowSize;
 
-exports.default = useRowSize$1;
+exports.default = useRowSize;

package/lib/components/Datagrid/useSkeletonRows.js

@@ -44,6 +44,5 @@ var useSkeletons = function useSkeletons(hooks) {
   };
   hooks.useInstance.push(useInstance);
 };
-var useSkeletonRows = useSkeletons;
 
-exports.default = useSkeletonRows;
+exports.default = useSkeletons;

package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts

@@ -1,5 +1,6 @@
 /**
  * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
+ * @deprecated This component is deprecated
  */
 export let DecoratorDualButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/DecoratorDualButton/DecoratorDualButton.js

@@ -19,6 +19,7 @@ var componentName = 'DecoratorDualButton';
 
 /**
  * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
+ * @deprecated This component is deprecated
  */
 exports.DecoratorDualButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClick', 'onContextMenu']);
@@ -28,6 +29,10 @@ exports.DecoratorDualButton = /*#__PURE__*/React.forwardRef(function (props, ref
     kind: "dual-button"
   }, devtools.getDevtoolsProps(componentName)));
 });
+exports.DecoratorDualButton.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.DecoratorDualButton = settings.pkg.checkComponentEnabled(exports.DecoratorDualButton, componentName);

package/lib/components/DecoratorLink/DecoratorLink.d.ts

@@ -1,5 +1,6 @@
 /**
  * The DecoratorLink groups a key/value pair to behave like a link.
+ * @deprecated This component is deprecated
  */
 export let DecoratorLink: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/DecoratorLink/DecoratorLink.js

@@ -19,6 +19,7 @@ var componentName = 'DecoratorLink';
 
 /**
  * The DecoratorLink groups a key/value pair to behave like a link.
+ * @deprecated This component is deprecated
  */
 exports.DecoratorLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
@@ -28,6 +29,10 @@ exports.DecoratorLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
     kind: "link"
   }, devtools.getDevtoolsProps(componentName)));
 });
+exports.DecoratorLink.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.DecoratorLink = settings.pkg.checkComponentEnabled(exports.DecoratorLink, componentName);

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts

@@ -1,5 +1,6 @@
 /**
  * The DecoratorSingleButton groups a key/value pair to behave like a button.
+ * @deprecated This component is deprecated
  */
 export let DecoratorSingleButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js

@@ -19,6 +19,7 @@ var componentName = 'DecoratorSingleButton';
 
 /**
  * The DecoratorSingleButton groups a key/value pair to behave like a button.
+ * @deprecated This component is deprecated
  */
 exports.DecoratorSingleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var validProps = propsHelper.prepareProps(props, ['href', 'kind', 'onClickLabel', 'onClickValue', 'onContextMenuLabel', 'onContextMenuValue']);
@@ -28,6 +29,10 @@ exports.DecoratorSingleButton = /*#__PURE__*/React.forwardRef(function (props, r
     kind: "single-button"
   }, devtools.getDevtoolsProps(componentName)));
 });
+exports.DecoratorSingleButton.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.DecoratorSingleButton = settings.pkg.checkComponentEnabled(exports.DecoratorSingleButton, componentName);

package/lib/components/DescriptionList/DescriptionList.d.ts

@@ -1,5 +1,6 @@
 /**
  * Type layouts provide an orderly layout of terms and definitions.
+ * @deprecated This component is deprecated
  */
 export let DescriptionList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/DescriptionList/DescriptionList.js

@@ -41,6 +41,7 @@ var defaults = {
 
 /**
  * Type layouts provide an orderly layout of terms and definitions.
+ * @deprecated This component is deprecated
  */
 exports.DescriptionList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$border = _ref.border,
@@ -60,6 +61,10 @@ exports.DescriptionList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     selection: false
   }, children));
 });
+exports.DescriptionList.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.DescriptionList = settings.pkg.checkComponentEnabled(exports.DescriptionList, componentName);

package/lib/components/EditFullPage/EditFullPage.d.ts

@@ -16,7 +16,9 @@ export interface EditFullPageProps {
     children: ReactNode;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
  * See usage guidance for further details.
+ * @deprecated
  */
 export declare let EditFullPage: React.ForwardRefExoticComponent<EditFullPageProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditFullPage/EditFullPage.js

@@ -40,8 +40,10 @@ var componentName = 'EditFullPage';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
  * See usage guidance for further details.
+ * @deprecated
  */
 exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -62,6 +64,12 @@ exports.EditFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, devtools.getDevtoolsProps(componentName)), children);
 });
 
+/**@ts-ignore*/
+exports.EditFullPage.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditFullPage = settings.pkg.checkComponentEnabled(exports.EditFullPage, componentName);
 

package/lib/components/EditSidePanel/EditSidePanel.d.ts

@@ -89,6 +89,8 @@ export interface EditSidePanelProps {
     title: string;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use with medium complexity edits if the user needs page context.
+ * @deprecated
  */
 export declare let EditSidePanel: React.ForwardRefExoticComponent<EditSidePanelProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -27,7 +27,9 @@ var componentName = 'EditSidePanel';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
+ * **This component is deprecated.** <br>
  * Use with medium complexity edits if the user needs page context.
+ * @deprecated
  */
 exports.EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -94,6 +96,12 @@ exports.EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children));
 });
 
+/**@ts-ignore*/
+exports.EditSidePanel.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditSidePanel = settings.pkg.checkComponentEnabled(exports.EditSidePanel, componentName);
 

package/lib/components/EditTearsheet/EditTearsheet.d.ts

@@ -81,7 +81,9 @@ interface EditTearsheetProps extends PropsWithChildren {
     verticalPosition?: 'normal' | 'lower';
 }
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -40,7 +40,9 @@ var defaults = {
 // corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
+ * **This component is deprecated.** <br>
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ * @deprecated
  */
 exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cancelButtonText = _ref.cancelButtonText,
@@ -173,6 +175,12 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })))));
 });
 
+/**@ts-ignore*/
+exports.EditTearsheet.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditTearsheet = settings.pkg.checkComponentEnabled(exports.EditTearsheet, componentName);
 

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -16,6 +16,8 @@ export interface EditTearsheetNarrowProps {
     className?: string;
 }
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 export declare let EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -40,7 +40,9 @@ var componentName = 'EditTearsheetNarrow';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
+ * @deprecated
  */
 exports.EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -61,6 +63,12 @@ exports.EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, devtools.getDevtoolsProps(componentName)), children);
 });
 
+/**@ts-ignore*/
+exports.EditTearsheetNarrow.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditTearsheetNarrow = settings.pkg.checkComponentEnabled(exports.EditTearsheetNarrow, componentName);
 

package/lib/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -102,9 +102,11 @@ export interface EditUpdateCardsProps {
     titleSize?: 'default' | 'large';
 }
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 export declare let EditUpdateCards: React.ForwardRefExoticComponent<EditUpdateCardsProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -43,9 +43,11 @@ var componentName = 'EditUpdateCards';
 // };
 
 /**
+ * **This component is deprecated.** <br>
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
+ @deprecated
  */
 exports.EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actionIcons = _ref.actionIcons,
@@ -97,6 +99,12 @@ exports.EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, editMode && conditionalProps), editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
 });
 
+/**@ts-ignore*/
+exports.EditUpdateCards.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated and will be removed in the next major version."
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EditUpdateCards = settings.pkg.checkComponentEnabled(exports.EditUpdateCards, componentName);
 

package/lib/components/EmptyStates/EmptyStateIllustration.js

@@ -61,6 +61,5 @@ var EmptyStateIllustration = function EmptyStateIllustration(_ref) {
 EmptyStateIllustration.propTypes = {
   kind: index.default.string
 };
-var EmptyStateIllustration$1 = EmptyStateIllustration;
 
-exports.default = EmptyStateIllustration$1;
+exports.default = EmptyStateIllustration;

package/lib/components/EmptyStates/EmptyStateV2.d.ts

@@ -62,5 +62,6 @@ export interface EmptyStateV2Props {
 /**
  * This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
  * In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
+ * @deprecated
  */
 export declare let EmptyStateV2: React.ForwardRefExoticComponent<EmptyStateV2Props & React.RefAttributes<HTMLDivElement>>;

package/lib/components/EmptyStates/EmptyStateV2.js

@@ -23,6 +23,7 @@ var componentName = 'EmptyStateV2';
 /**
  * This is the V2 version of the `EmptyState` component. To use you must pass the `v2` prop to the V1 version of the component `EmptyState` and use the props below.
  * In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
+ * @deprecated
  */
 
 exports.EmptyStateV2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -67,6 +68,12 @@ exports.EmptyStateV2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), link.text)));
 });
 
+/**@ts-ignore*/
+exports.EmptyStateV2.deprecated = {
+  level: 'warn',
+  details: 'For more information, please refer to the Carbon docs https://carbondesignsystem.com/patterns/empty-states-pattern/'
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.EmptyStateV2 = settings.pkg.checkComponentEnabled(exports.EmptyStateV2, componentName);
 exports.EmptyStateV2.propTypes = {

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -41,7 +41,7 @@ exports.ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--error")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration.ErrorIllustration, {
     theme: illustrationTheme,
     size: size,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -42,7 +42,7 @@ exports.NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--noData")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration.NoDataIllustration, {
     theme: illustrationTheme,
     size: size,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -41,7 +41,7 @@ exports.NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--noTags")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration.NoTagsIllustration, {
     theme: illustrationTheme,
     size: size,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -41,7 +41,7 @@ exports.NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--notFound")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration.NotFoundIllustration, {
     theme: illustrationTheme,
     size: size,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -41,7 +41,7 @@ exports.NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref,
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--notifications")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration.NotificationsIllustration, {
     size: size,
     theme: illustrationTheme,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -42,7 +42,7 @@ exports.UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, r
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition), "".concat(blockClass, "-type--unauthorized")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration.default, {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
     theme: illustrationTheme,
     alt: illustrationDescription || title

package/lib/components/EmptyStates/assets/ErrorIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _path, _path2, _path3, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,
@@ -215,7 +214,6 @@ ErrorIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var ErrorIllustration$1 = ErrorIllustration;
 
 exports.ErrorIllustration = ErrorIllustration;
-exports.default = ErrorIllustration$1;
+exports.default = ErrorIllustration;

package/lib/components/EmptyStates/assets/NoDataIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _path, _path2, _path3, _path4, _path5, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _path6, _path7, _path8;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,
@@ -178,7 +177,6 @@ NoDataIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var NoDataIllustration$1 = NoDataIllustration;
 
 exports.NoDataIllustration = NoDataIllustration;
-exports.default = NoDataIllustration$1;
+exports.default = NoDataIllustration;

package/lib/components/EmptyStates/assets/NoTagsIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _path, _path2, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _stop42, _stop43, _stop44, _stop45, _stop46, _stop47, _stop48, _stop49, _stop50, _stop51, _stop52, _stop53, _stop54, _stop55, _stop56, _stop57, _stop58, _stop59, _stop60, _stop61, _stop62, _stop63, _stop64, _stop65, _stop66, _path3;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -485,7 +484,6 @@ NoTagsIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var NoTagsIllustration$1 = NoTagsIllustration;
 
 exports.NoTagsIllustration = NoTagsIllustration;
-exports.default = NoTagsIllustration$1;
+exports.default = NoTagsIllustration;

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -14,7 +14,6 @@ var React = require('react');
 var index = require('../../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../../settings.js');
-var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _path, _path2, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _stop42, _stop43, _stop44, _stop45, _stop46, _stop47, _stop48, _path3;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     size = _ref.size,
     alt = _ref.alt,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var svgId = uuidv4.default();
+  var svgId = React.useId();
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,
@@ -362,7 +361,6 @@ NotFoundIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var NotFoundIllustration$1 = NotFoundIllustration;
 
 exports.NotFoundIllustration = NotFoundIllustration;
-exports.default = NotFoundIllustration$1;
+exports.default = NotFoundIllustration;