@carbon/ibm-products 2.15.2 → 2.16.0

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

@@ -52,7 +52,8 @@ var NotFoundEmptyState = exports.NotFoundEmptyState = /*#__PURE__*/_react.defaul
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
     theme: illustrationTheme,
-    size: size
+    size: size,
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,

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

@@ -52,7 +52,8 @@ var NotificationsEmptyState = exports.NotificationsEmptyState = /*#__PURE__*/_re
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,

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

@@ -52,7 +52,8 @@ var UnauthorizedEmptyState = exports.UnauthorizedEmptyState = /*#__PURE__*/_reac
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -35,7 +36,7 @@ var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -213,5 +214,6 @@ var ErrorIllustration = exports.ErrorIllustration = function ErrorIllustration(_
 };
 ErrorIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -35,7 +36,7 @@ var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustratio
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -176,5 +177,6 @@ var NoDataIllustration = exports.NoDataIllustration = function NoDataIllustratio
 };
 NoDataIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -36,7 +37,7 @@ var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustratio
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -483,5 +484,6 @@ var NoTagsIllustration = exports.NoTagsIllustration = function NoTagsIllustratio
 };
 NoTagsIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -35,7 +36,7 @@ var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllus
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -360,5 +361,6 @@ var NotFoundIllustration = exports.NotFoundIllustration = function NotFoundIllus
 };
 NotFoundIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotificationsIllustration = exports.NotificationsIllustration = function NotificationsIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -35,7 +36,7 @@ var NotificationsIllustration = exports.NotificationsIllustration = function Not
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -331,5 +332,6 @@ var NotificationsIllustration = exports.NotificationsIllustration = function Not
 };
 NotificationsIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["theme", "size"];
+var _excluded = ["theme", "title", "size"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -25,6 +25,7 @@ var _excluded = ["theme", "size"];
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var UnauthorizedIllustration = exports.UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   var theme = _ref.theme,
+    title = _ref.title,
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
@@ -36,7 +37,7 @@ var UnauthorizedIllustration = exports.UnauthorizedIllustration = function Unaut
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -304,5 +305,6 @@ var UnauthorizedIllustration = exports.UnauthorizedIllustration = function Unaut
 };
 UnauthorizedIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark'])
+  theme: _propTypes.default.oneOf(['light', 'dark']),
+  title: _propTypes.default.string
 };

package/lib/components/InlineTip/InlineTip.docs-page.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./InlineTip.stories"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      story: stories.inlineTip
+    }, {
+      story: stories.inlineTipNarrow
+    }]
+  });
+};
+var _default = exports.default = DocsPage;

package/lib/components/InlineTip/InlineTip.js

@@ -0,0 +1,224 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTip = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@carbon/react/icons");
+var _react2 = require("@carbon/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("./utils");
+var _SteppedAnimatedMedia = require("../SteppedAnimatedMedia");
+var _devtools = require("../../global/js/utils/devtools");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "action", "title", "media"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 portions of React that are needed.
+// Other standard imports.
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--inline-tip");
+var componentName = 'InlineTip';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  closeIconDescription: 'Close',
+  collapsible: false,
+  collapseButtonLabel: 'Read less',
+  expandButtonLabel: 'Read more',
+  narrow: false,
+  onClick: function onClick() {},
+  onClose: function onClose() {}
+};
+
+/**
+ * Inline tips are messages embedded within other components that
+ * provide an ambient way to deliver learning content without
+ * distracting the user from their flow.
+ */
+var InlineTip = exports.InlineTip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
+    _ref$collapseButtonLa = _ref.collapseButtonLabel,
+    collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
+    _ref$expandButtonLabe = _ref.expandButtonLabel,
+    expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
+    _ref$narrow = _ref.narrow,
+    narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
+    onClick = _ref.onClick,
+    onClose = _ref.onClose,
+    tertiaryButtonLabel = _ref.tertiaryButtonLabel,
+    action = _ref.action,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
+    media = _ref.media,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(collapsible),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var labelId = (0, _react.useRef)((0, _uuidv.default)()).current;
+  var previewText = (0, _react.useMemo)(function () {
+    return (0, _utils.getComponentText)(_react.default.Children.toArray(children));
+  }, [children]);
+  var childrenToRender = children;
+  if (!media && collapsible && isCollapsed) {
+    childrenToRender = /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(blockClass, "__preview-text")
+    }, previewText);
+  }
+
+  // If `collapsible` is changed after initial render...
+  (0, _react.useEffect)(function () {
+    setIsCollapsed(collapsible);
+  }, [collapsible]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    "aria-labelledby": labelId,
+    className: (0, _classnames.default)(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
+    ref: ref,
+    role: "complementary"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__close-icon-wrapper")
+  }, /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    className: "".concat(blockClass, "__close-icon"),
+    kind: "ghost",
+    label: closeIconDescription,
+    onClick: onClose,
+    size: "lg"
+  }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
+    size: 16
+  }))), (!media && narrow || !narrow) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__icon-idea"),
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_icons.Idea, {
+    size: 16
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    id: labelId,
+    className: "".concat(blockClass, "__title")
+  }, title), /*#__PURE__*/_react.default.createElement("section", {
+    className: "".concat(blockClass, "__body")
+  }, childrenToRender, action && (!collapsible || collapsible && !isCollapsed) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__secondary-btn")
+  }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/_react.default.createElement("footer", {
+    className: "".concat(blockClass, "__footer")
+  }, collapsible && !media && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    className: "".concat(blockClass, "__toggle-btn"),
+    kind: "ghost",
+    size: "md",
+    onClick: function onClick() {
+      setIsCollapsed(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, isCollapsed ? expandButtonLabel : collapseButtonLabel), tertiaryButtonLabel && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    className: "".concat(blockClass, "__close-btn"),
+    size: "md",
+    onClick: onClick,
+    kind: "tertiary",
+    renderIcon: function renderIcon() {
+      return /*#__PURE__*/_react.default.createElement(_icons.Crossroads, {
+        size: 16
+      });
+    }
+  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media.render()) : /*#__PURE__*/_react.default.createElement(_SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__media"),
+    filePaths: media.filePaths
+  })));
+});
+exports.InlineTip = InlineTip = _settings.pkg.checkComponentEnabled(InlineTip, componentName);
+InlineTip.displayName = componentName;
+InlineTip.propTypes = {
+  /**
+   * Optional "call to action" ghost button or link that can appear
+   * directly below the content. This component comes with pre-styled
+   * elements available to use: `InlineTipLink` and `InlineTipButton`.
+   */
+  action: _propTypes.default.node,
+  /**
+   * Provide the contents of the InlineTip.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: _propTypes.default.string,
+  /**
+   * The label for the collapse button.
+   * This button is not visible if `media` is specified.
+   */
+  collapseButtonLabel: _propTypes.default.string,
+  /**
+   * If set to `true`, it will truncate the body text to
+   * one line and expose an expand/collapse button toggle.
+   *
+   * This feature is disabled if `media` is specified.
+   */
+  collapsible: _propTypes.default.bool,
+  /**
+   * The label for the expand button.
+   * This button is not visible if `media` is specified.
+   */
+  expandButtonLabel: _propTypes.default.string,
+  /**
+   * The object describing an image in one of two shapes.
+   * - If a single media element is required, use `{render}`.
+   * - If a stepped animation is required, use `{filePaths}`.
+   *
+   * Enabling `media` disables the `collapsible` feature.
+   */
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    render: _propTypes.default.func
+  }), _propTypes.default.shape({
+    filePaths: _propTypes.default.string
+  })]),
+  /**
+   * Set to `true` to arrange the information in a format
+   * that is easier to read in a limited space.
+   */
+  narrow: _propTypes.default.bool,
+  /**
+   * Function to call when the tertiary button is clicked.
+   */
+  onClick: _propTypes.default.func,
+  /**
+   * Function to call when the InlineTip is closed via the "X" button.
+   */
+  onClose: _propTypes.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.
+   */
+  tertiaryButtonLabel: _propTypes.default.string,
+  /**
+   * The title of the InlineTip.
+   */
+  title: _propTypes.default.string.isRequired
+};

package/lib/components/InlineTip/InlineTipButton.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTipButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@carbon/react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 portions of React that are needed.
+// Other standard imports.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--inline-tip__button");
+var componentName = 'InlineTipButton';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is a standard Carbon button, styled specifically for use inside InlineTip.
+ */
+var InlineTipButton = exports.InlineTipButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    size: "md",
+    kind: "ghost"
+  }), children);
+});
+InlineTipButton.propTypes = {
+  /**
+   * Provide the contents of the InlineTipButton.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/InlineTip/InlineTipLink.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTipLink = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icons = require("@carbon/react/icons");
+var _react2 = require("@carbon/react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 portions of React that are needed.
+// Other standard imports.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--inline-tip__link");
+var componentName = 'InlineTipLink';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is a standard Carbon link, styled specifically for use inside InlineTip.
+ */
+var InlineTipLink = exports.InlineTipLink = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    renderIcon: function renderIcon() {
+      return /*#__PURE__*/_react.default.createElement(_icons.Launch, {
+        size: 16
+      });
+    }
+  }), children);
+});
+InlineTipLink.propTypes = {
+  /**
+   * Provide the contents of the InlineTipLink.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/InlineTip/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineTip", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTip;
+  }
+});
+Object.defineProperty(exports, "InlineTipButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTipButton.InlineTipButton;
+  }
+});
+Object.defineProperty(exports, "InlineTipLink", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTipLink.InlineTipLink;
+  }
+});
+var _InlineTip = require("./InlineTip");
+var _InlineTipButton = require("./InlineTipButton");
+var _InlineTipLink = require("./InlineTipLink");