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

package/lib/components/EmptyStates/assets/NotificationsIllustration.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, _path, _path2, _path3, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _stop36, _stop37, _stop38, _stop39, _stop40, _stop41, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var NotificationsIllustration = function NotificationsIllustration(_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,
@@ -332,7 +331,6 @@ NotificationsIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var NotificationsIllustration$1 = NotificationsIllustration;
 
 exports.NotificationsIllustration = NotificationsIllustration;
-exports.default = NotificationsIllustration$1;
+exports.default = NotificationsIllustration;

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.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, _linearGradient, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _stop15, _stop16, _stop17, _stop18, _stop19, _stop20, _stop21, _stop22, _stop23, _stop24, _stop25, _stop26, _stop27, _stop28, _stop29, _stop30, _stop31, _stop32, _stop33, _stop34, _stop35, _path4;
 var _excluded = ["theme", "size", "alt"];
@@ -26,7 +25,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_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",
@@ -306,7 +305,6 @@ UnauthorizedIllustration.propTypes = {
   size: index.default.oneOf(['lg', 'sm']),
   theme: index.default.oneOf(['light', 'dark'])
 };
-var UnauthorizedIllustration$1 = UnauthorizedIllustration;
 
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
-exports.default = UnauthorizedIllustration$1;
+exports.default = UnauthorizedIllustration;

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -13,10 +13,6 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     actionIcons?: ActionIcon[];
-    /**
-     * 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;
     /**
      * Content that shows in the body of the card
      */
@@ -24,6 +20,10 @@ export interface ExpressiveCardProps extends PropsWithChildren {
      * Optional user provided class
      */
     className?: string;
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode | boolean;
     /**
      * Optional header description
      */
@@ -91,7 +91,7 @@ export interface ExpressiveCardProps extends PropsWithChildren {
     /**
      * **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
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode | boolean;
     /**

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -38,10 +38,6 @@ exports.ExpressiveCard.propTypes = {
     iconDescription: index.default.string,
     href: index.default.string
   })),
-  /**
-   * 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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -50,6 +46,10 @@ exports.ExpressiveCard.propTypes = {
    * Optional user provided class
    */
   className: index.default.string,
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */
@@ -120,7 +120,7 @@ exports.ExpressiveCard.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
+   * @deprecated please use the `decorator` prop
    */
   slug: index.default.oneOfType([index.default.node, index.default.bool]),
   /**

package/lib/components/FilterPanel/FilterPanel.d.ts

@@ -1,5 +1,6 @@
 /**
  * The container for filter panel subcomponents.
+ * @deprecated This component is deprecated
  */
 export let FilterPanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanel.js

@@ -22,7 +22,9 @@ var componentName = 'FilterPanel';
 
 /**
  * The container for filter panel subcomponents.
+ * @deprecated This component is deprecated
  */
+
 exports.FilterPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -35,6 +37,10 @@ exports.FilterPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__title")
   }, title), children);
 });
+exports.FilterPanel.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanel = settings.pkg.checkComponentEnabled(exports.FilterPanel, componentName);

package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts

@@ -1,5 +1,6 @@
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelAccordion: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js

@@ -28,6 +28,7 @@ var defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelAccordion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$accordionProps = _ref.accordionProps,
@@ -51,6 +52,10 @@ exports.FilterPanelAccordion = /*#__PURE__*/React.forwardRef(function (_ref, ref
     className: "".concat(blockClass, "__list")
   }), children));
 });
+exports.FilterPanelAccordion.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelAccordion = settings.pkg.checkComponentEnabled(exports.FilterPanelAccordion, componentName);

package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts

@@ -1,5 +1,6 @@
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelAccordionItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js

@@ -29,6 +29,7 @@ var defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelAccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$accordionItemPro = _ref.accordionItemProps,
@@ -58,7 +59,10 @@ exports.FilterPanelAccordionItem = /*#__PURE__*/React.forwardRef(function (_ref,
     }, child);
   })));
 });
-
+exports.FilterPanelAccordionItem.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelAccordionItem = settings.pkg.checkComponentEnabled(exports.FilterPanelAccordionItem, componentName);
 exports.FilterPanelAccordionItem.displayName = componentName;

package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts

@@ -5,6 +5,7 @@
  *
  * All of Carbon Checkbox's props are directly available
  * through "...rest", including id, onClick, etc.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js

@@ -29,6 +29,7 @@ var componentName = 'FilterPanelCheckbox';
  *
  * All of Carbon Checkbox's props are directly available
  * through "...rest", including id, onClick, etc.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelCheckbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -48,6 +49,10 @@ exports.FilterPanelCheckbox = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     ref: ref
   }, devtools.getDevtoolsProps(componentName)));
 });
+exports.FilterPanelCheckbox.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelCheckbox = settings.pkg.checkComponentEnabled(exports.FilterPanelCheckbox, componentName);

package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts

@@ -5,6 +5,7 @@
  * just like FilterPanelCheckbox.
  *
  * Use `overflowMenuProps` for properties specific to the OverflowMenu.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckboxWithOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

@@ -32,6 +32,7 @@ var defaults = {
  * just like FilterPanelCheckbox.
  *
  * Use `overflowMenuProps` for properties specific to the OverflowMenu.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelCheckboxWithOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -117,6 +118,10 @@ exports.FilterPanelCheckboxWithOverflow = /*#__PURE__*/React.forwardRef(function
     }, other), children))
   );
 });
+exports.FilterPanelCheckboxWithOverflow.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelCheckboxWithOverflow = settings.pkg.checkComponentEnabled(exports.FilterPanelCheckboxWithOverflow, componentName);

package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts

@@ -1,5 +1,6 @@
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js

@@ -23,6 +23,7 @@ var componentName = 'FilterPanelGroup';
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -44,6 +45,10 @@ exports.FilterPanelGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content")
   }, children));
 });
+exports.FilterPanelGroup.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelGroup = settings.pkg.checkComponentEnabled(exports.FilterPanelGroup, componentName);

package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts

@@ -1,5 +1,6 @@
 /**
  * An input field and container to show search results.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelSearch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js

@@ -26,6 +26,7 @@ var defaults = {
 
 /**
  * An input field and container to show search results.
+ * @deprecated This component is deprecated
  */
 exports.FilterPanelSearch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -69,7 +70,10 @@ exports.FilterPanelSearch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__results")
   }, children));
 });
-
+exports.FilterPanelSearch.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelSearch = settings.pkg.checkComponentEnabled(exports.FilterPanelSearch, componentName);
 exports.FilterPanelSearch.displayName = componentName;

package/lib/components/FullPageError/FullPageError.js

@@ -18,6 +18,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
+var _span;
 var _excluded = ["children", "className", "description", "label", "kind", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -44,20 +45,17 @@ exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var errorData = {
     403: {
       svg: /*#__PURE__*/React.createElement(Error403SVG.Error403SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__403")
       })
     },
     404: {
       svg: /*#__PURE__*/React.createElement(Error404SVG.Error404SVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__404")
       })
     },
     custom: {
       svg: /*#__PURE__*/React.createElement(ErrorGenericSVG.ErrorGenericSVG, {
-        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom"),
-        title: title
+        className: "".concat(blockClass, "__svg ").concat(blockClass, "__custom")
       })
     }
   };
@@ -78,7 +76,9 @@ exports.FullPageError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__title")
   }, /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__label")
-  }, "\u21B3 ", label), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("p", {
+  }, _span || (_span = /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, "\u21B3 ")), label), /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")

package/lib/components/FullPageError/assets/Error403SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error403SVG({ className, title }: {
+export function Error403SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error403SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/Error403SVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var Error403SVG = function Error403SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 570",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_0_2401)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -712,8 +711,7 @@ var Error403SVG = function Error403SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error403SVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.Error403SVG = Error403SVG;

package/lib/components/FullPageError/assets/Error404SVG.d.ts

@@ -1,11 +1,9 @@
-export function Error404SVG({ className, title }: {
+export function Error404SVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace Error404SVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/Error404SVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var Error404SVG = function Error404SVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 751 549",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_0_2285)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -621,8 +620,7 @@ var Error404SVG = function Error404SVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 Error404SVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.Error404SVG = Error404SVG;

package/lib/components/FullPageError/assets/ErrorGenericSVG.d.ts

@@ -1,11 +1,9 @@
-export function ErrorGenericSVG({ className, title }: {
+export function ErrorGenericSVG({ className }: {
     className: any;
-    title: any;
 }): React.JSX.Element;
 export namespace ErrorGenericSVG {
     namespace propTypes {
         export { string as className };
-        export { string as title };
     }
 }
 import React from 'react';

package/lib/components/FullPageError/assets/ErrorGenericSVG.js

@@ -12,14 +12,13 @@ var index = require('../../../_virtual/index.js');
 
 var _g, _defs;
 var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
-  var className = _ref.className,
-    title = _ref.title;
+  var className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 750 506",
     fill: "none",
     className: className,
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": title
+    "aria-hidden": "true",
+    xmlns: "http://www.w3.org/2000/svg"
   }, _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#clip0_203_144)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -712,8 +711,7 @@ var ErrorGenericSVG = function ErrorGenericSVG(_ref) {
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 ErrorGenericSVG.propTypes = {
-  className: index.propTypesExports.string,
-  title: index.propTypesExports.string
+  className: index.propTypesExports.string
 };
 
 exports.ErrorGenericSVG = ErrorGenericSVG;

package/lib/components/InlineTip/InlineTip.d.ts

@@ -51,8 +51,13 @@ export interface InlineTipProps {
      * - If a stepped animation is required, use `{filePaths}`.
      *
      * Enabling `media` disables the `collapsible` feature.
+     * @deprecated please use the `renderMedia` prop
      */
     media?: MediaType;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: () => ReactNode;
     /**
      * Set to `true` to arrange the information in a format
      * that is easier to read in a limited space.

package/lib/components/InlineTip/InlineTip.js

@@ -20,7 +20,7 @@ var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--inline-tip");
@@ -58,6 +58,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -68,6 +69,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = React.useState(collapsible),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -77,7 +79,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return utils.getComponentText(React.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -89,7 +91,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -102,7 +104,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
@@ -118,7 +120,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React.createElement(react.Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React.createElement(react.Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -137,12 +139,14 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 exports.InlineTip = settings.pkg.checkComponentEnabled(exports.InlineTip, componentName);
 exports.InlineTip.displayName = componentName;
@@ -188,6 +192,7 @@ exports.InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -208,6 +213,10 @@ exports.InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: index.default.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * Defining the label will show a the tertiary button with the crossroads icon.
    * You will still need to define the `onClose` method to trigger a callback.

package/lib/components/Nav/Nav.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated This component is deprecated
+ */
 export let Nav: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default Nav;
 import React from 'react';

package/lib/components/Nav/Nav.js

@@ -19,6 +19,10 @@ var settings = require('../../settings.js');
 var _excluded = ["activeHref", "className", "children", "heading", "label"];
 var componentName = 'Nav';
 var blockClass = "".concat(settings.pkg.prefix, "--nav");
+
+/**
+ * @deprecated This component is deprecated
+ */
 exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var activeHref = _ref.activeHref,
     className = _ref.className,
@@ -123,6 +127,10 @@ exports.Nav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.default.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
+exports.Nav.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 exports.Nav.propTypes = {
   /**
    * Hypertext reference for active page.

package/lib/components/Nav/NavItemLink.js

@@ -29,6 +29,5 @@ NavItemLink.propTypes = {
 NavItemLink.defaultProps = {
   element: 'a'
 };
-var NavItemLink$1 = NavItemLink;
 
-exports.default = NavItemLink$1;
+exports.default = NavItemLink;