@carbon/ibm-products 2.17.1 → 2.18.0

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElement = 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 _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["button", "className", "description", "title"];
+/**
+ * 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.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--guidebanner__element");
+var componentName = 'GuidebannerElement';
+
+/**
+ * The GuidebannerElement is a required child component of the Guidebanner,
+ * and acts as a container for a CarouselItem.
+ */
+var GuidebannerElement = exports.GuidebannerElement = function GuidebannerElement(_ref) {
+  var button = _ref.button,
+    className = _ref.className,
+    description = _ref.description,
+    title = _ref.title,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className)
+  }, (0, _devtools.getDevtoolsProps)(componentName)), title && /*#__PURE__*/_react.default.createElement("h2", {
+    className: "".concat(blockClass, "-title")
+  }, title), description && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "-content")
+  }, description), button && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-buttons")
+  }, button));
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElement = GuidebannerElement = _settings.pkg.checkComponentEnabled(GuidebannerElement, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElement.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+GuidebannerElement.propTypes = {
+  /**
+   * An optional button can be rendered below the description.
+   * This can be a link, button, Coachmark button, etc.
+   */
+  button: _propTypes.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The description of the element.
+   */
+
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  /**
+   * The title of the element.
+   */
+  title: _propTypes.default.string
+};

package/lib/components/Guidebanner/GuidebannerElementButton.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElementButton = 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 _icons = require("@carbon/react/icons");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "type"];
+/**
+ * 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.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--guidebanner__element-button");
+var componentName = 'GuidebannerElementButton';
+
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+var GuidebannerElementButton = exports.GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    type = _ref.type,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (type === 'primary') {
+    return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+      className: (0, _classnames.default)(blockClass, className),
+      iconDescription: 'Crossroads',
+      kind: "tertiary",
+      renderIcon: function renderIcon() {
+        return /*#__PURE__*/_react.default.createElement(_icons.Crossroads, {
+          size: 16
+        });
+      },
+      role: "button",
+      size: "md"
+    }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    kind: "ghost",
+    role: "button",
+    size: "md"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElementButton = GuidebannerElementButton = _settings.pkg.checkComponentEnabled(GuidebannerElementButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementButton.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+GuidebannerElementButton.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementButton.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * If type is "primary", then return a tertiary button with the "crossroads" icon,
+   * else return a ghost button.
+   */
+  type: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/Guidebanner/GuidebannerElementLink.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElementLink = 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.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--guidebanner__element-link");
+var componentName = 'GuidebannerElementLink';
+
+/**
+ * A link styled specifically for the GuidebannerElement.
+ */
+var GuidebannerElementLink = exports.GuidebannerElementLink = function GuidebannerElementLink(_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),
+    kind: "ghost",
+    role: "link",
+    size: "md"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.GuidebannerElementLink = GuidebannerElementLink = _settings.pkg.checkComponentEnabled(GuidebannerElementLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementLink.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+GuidebannerElementLink.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementLink.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+};

package/lib/components/Guidebanner/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Guidebanner", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.Guidebanner;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElement.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementButton.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementLink.GuidebannerElementLink;
+  }
+});
+var _Guidebanner = require("./Guidebanner");
+var _GuidebannerElement = require("./GuidebannerElement");
+var _GuidebannerElementButton = require("./GuidebannerElementButton");
+var _GuidebannerElementLink = require("./GuidebannerElementLink");

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

@@ -0,0 +1,25 @@
+"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("./NonLinearReading.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.singleLevel
+    }, {
+      story: stories.multipleLevel
+    }, {
+      story: stories.withGradientBackground
+    }]
+  });
+};
+var _default = exports.default = DocsPage;

package/lib/components/NonLinearReading/NonLinearReading.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NonLinearReading = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icons = require("@carbon/react/icons");
+var _devtools = require("../../global/js/utils/devtools");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "definition", "theme"];
+/**
+ * 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.
+ */
+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, "--non-linear-reading");
+var componentName = 'NonLinearReading';
+
+// Default values for props
+var defaults = {
+  theme: 'light'
+};
+
+/**
+ * Use non-linear reading when space is limited to share a
+ * brief, at-a-glance, summary of a concept that may require
+ * more explanation for some users.
+ */
+var NonLinearReading = exports.NonLinearReading = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    definition = _ref.definition,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var contentId = (0, _react.useRef)((0, _uuidv.default)()).current;
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "__").concat(theme), className),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), ' ', /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-controls": contentId,
+    "aria-expanded": isOpen,
+    className: (0, _classnames.default)("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
+    onClick: handleToggle
+  }, children, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
+    size: 16
+  })), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    id: contentId,
+    className: "".concat(blockClass, "__body"),
+    hidden: !isOpen
+  }, isOpen && definition), ' ');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.NonLinearReading = NonLinearReading = _settings.pkg.checkComponentEnabled(NonLinearReading, componentName);
+NonLinearReading.displayName = componentName;
+NonLinearReading.propTypes = {
+  /**
+   * The keyword of the component appears as a pill.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The content that appears when the keyword is toggled open.
+   */
+  definition: _propTypes.default.node.isRequired,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark'])
+};

package/lib/components/NonLinearReading/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NonLinearReading", {
+  enumerable: true,
+  get: function get() {
+    return _NonLinearReading.NonLinearReading;
+  }
+});
+var _NonLinearReading = require("./NonLinearReading");

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _ActionSet = require("../ActionSet");
 var _variants = require("./motion/variants");
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
+var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -72,6 +72,8 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
     labelText = _ref.labelText,
     _ref$navigationBackIc = _ref.navigationBackIconDescription,
@@ -88,6 +90,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
     slideIn = _ref.slideIn,
+    slug = _ref.slug,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -112,6 +115,10 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
+  var getActionsContainerElement = (0, _react.useCallback)(function () {
+    var sidePanelOuter = document.querySelector("#".concat(id));
+    return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
+  }, [id]);
 
   // scroll panel to top going between steps
   (0, _react.useEffect)(function () {
@@ -119,7 +126,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     if (panelRef && panelRef.current) {
       var _document$querySelect;
       var scrollableSection = panelRef.current.querySelector(".".concat(blockClass, "__inner-content"));
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
       var initialTitleHeight = (_document$querySelect = document.querySelector(".".concat(blockClass, "__title-container"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.offsetHeight;
       scrollableSection.scrollTop = 0;
       // The size of the panel has changed while it is still opened
@@ -131,7 +138,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
         sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style = sidePanelOuter.style) === null || _sidePanelOuter$style === void 0 || _sidePanelOuter$style.setProperty("--".concat(blockClass, "--title-container-height"), "".concat(Number(initialTitleHeight), "px"));
       }
     }
-  }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size]);
+  }, [currentStep, ref, size, previousState === null || previousState === void 0 ? void 0 : previousState.size, id]);
 
   // set initial focus when side panel opens
   (0, _react.useEffect)(function () {
@@ -155,13 +162,13 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && actions && actions.length && animationComplete) {
       var _sidePanelOuter$style2;
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
       var actionsContainer = getActionsContainerElement();
       var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
       actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
       sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style2 = sidePanelOuter.style) === null || _sidePanelOuter$style2 === void 0 || _sidePanelOuter$style2.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
     }
-  }, [actions, condensedActions, open, animationComplete]);
+  }, [actions, condensedActions, open, animationComplete, id, getActionsContainerElement]);
 
   // Add console warning if labelText is provided without a title.
   // This combination is not allowed.
@@ -176,23 +183,19 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     var _sidePanelOuter$style3;
     var height = _ref2.height;
     setPanelHeight(height);
-    var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+    var sidePanelOuter = document.querySelector("#".concat(id));
     var actionsContainer = getActionsContainerElement();
     var actionsHeight = (actionsContainer === null || actionsContainer === void 0 ? void 0 : actionsContainer.offsetHeight) + 16; // add additional 1rem spacing to bottom padding
     actionsHeight = "".concat(Math.round(actionsHeight / 16), "rem");
     sidePanelOuter === null || sidePanelOuter === void 0 || (_sidePanelOuter$style3 = sidePanelOuter.style) === null || _sidePanelOuter$style3 === void 0 || _sidePanelOuter$style3.setProperty("--".concat(blockClass, "--content-bottom-padding"), actionsHeight);
   };
-  var getActionsContainerElement = function getActionsContainerElement() {
-    var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
-    return sidePanelOuter && sidePanelOuter.querySelector(".".concat(blockClass, "__actions-container"));
-  };
 
   // Title and subtitle scroll animation
   (0, _react.useEffect)(function () {
     if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
       var _document$querySelect2, _document$querySelect3, _document$querySelect4;
-      var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
-      var sidePanelScrollArea = document.querySelector("#".concat(blockClass, "-outer .").concat(blockClass, "__inner-content"));
+      var sidePanelOuter = document.querySelector("#".concat(id));
+      var sidePanelScrollArea = document.querySelector("#".concat(id, " .").concat(blockClass, "__inner-content"));
       var sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-text"));
       var sidePanelCollapsedTitleElement = document.querySelector(".".concat(blockClass, "__collapsed-title-text"));
       var sidePanelSubtitleElement = document.querySelector(".".concat("".concat(blockClass, "__subtitle-text")));
@@ -267,7 +270,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       });
     }
     if (open && !animateTitle) {
-      var _sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
+      var _sidePanelOuter = document.querySelector("#".concat(id));
       var _sidePanelTitleElement = document.querySelector(".".concat(blockClass, "__title-container .").concat(blockClass, "__title-text"));
       var _sidePanelSubtitleElement = document.querySelector(".".concat(blockClass, "__subtitle-text"));
       var actionToolbarElement = document.querySelector(".".concat(blockClass, "__action-toolbar"));
@@ -281,7 +284,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 || _sidePanelOuter.style.setProperty("--".concat(blockClass, "--label-text-height"), "".concat(labelHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches]);
+  }, [open, animateTitle, animationComplete, panelHeight, title, size, reducedMotion.matches, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   (0, _react.useEffect)(function () {
@@ -333,9 +336,9 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     if (!open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginRight = 0;
+        pageContentElement.style.marginInlineEnd = 0;
       } else if (pageContentElement) {
-        pageContentElement.style.marginLeft = 0;
+        pageContentElement.style.marginInlineStart = 0;
       }
     }
   }, [open, placement, selectorPageContent, slideIn]);
@@ -349,14 +352,15 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
+      pageContentElement.style.inlineSize = 'auto';
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginRight = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginRight = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineEnd = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(_motion.moderate02) : null;
+        pageContentElement.style.marginInlineEnd = _constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
-        pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineStart = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(_motion.moderate02) : null;
+        pageContentElement.style.marginInlineStart = _constants.SIDE_PANEL_SIZES[size];
       }
     }
   }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
@@ -378,9 +382,16 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     }
   };
   var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
+  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
   var renderHeader = function renderHeader() {
     var _cx, _cx2;
+    var normalizedSlug;
+    if (slug) {
+      normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
+        // slug size is sm unless actions and size > md
+        size: actions.length && /l/.test(size) ? 'md' : 'sm'
+      });
+    }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
     }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
@@ -398,7 +409,9 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       onClick: onNavigationBack
     }), title && title.length && labelText && labelText.length && /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "__label-text")
-    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    }, labelText), title && title.length && renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__slug-and-close")
+    }, normalizedSlug, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
       size: "sm",
@@ -411,7 +424,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
       className: "".concat(blockClass, "__close-button"),
       onClick: onRequestClose,
       ref: sidePanelCloseRef
-    }), subtitle && /*#__PURE__*/_react.default.createElement("p", {
+    })), subtitle && /*#__PURE__*/_react.default.createElement("p", {
       className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__action-toolbar"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
@@ -455,7 +468,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   var contentRef = ref || sidePanelRef;
   (0, _useResizeObserver.useResizeObserver)(contentRef, handleResize);
   return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
-    id: "".concat(blockClass, "-outer"),
+    id: id,
     className: mainPanelClassNames,
     onBlur: handleBlur,
     ref: contentRef,
@@ -563,6 +576,10 @@ SidePanel.propTypes = {
    * Sets the current step of the side panel
    */
   currentStep: _propTypes.default.number,
+  /**
+   * Unique identifier
+   */
+  id: _propTypes.default.string,
   /**
    * Determines whether the side panel should render with an overlay
    */
@@ -622,6 +639,10 @@ SidePanel.propTypes = {
    * Determines if this panel slides in
    */
   slideIn: _propTypes.default.bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: _propTypes.default.node,
   /**
    * Sets the subtitle text
    */