@carbon/ibm-products 2.17.2 → 2.18.0

package/es/components/Guidebanner/Guidebanner.js

@@ -0,0 +1,221 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "collapsible", "onClose", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "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.
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { blue90, purple70 } from '@carbon/colors';
+import { CaretLeft, CaretRight, Close, Idea } from '@carbon/react/icons';
+import { Button, IconButton } from '@carbon/react';
+import { Carousel } from '../Carousel';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--guidebanner");
+var componentName = 'Guidebanner';
+var defaults = {
+  collapsible: false,
+  // Labels
+  closeIconDescription: 'Close',
+  collapseButtonLabel: 'Read less',
+  expandButtonLabel: 'Read more',
+  nextIconDescription: 'Next',
+  previousIconDescription: 'Back'
+};
+
+/**
+ * The guide banner sits at the top of a page, or page-level tab,
+ * to introduce foundational concepts related to the page's content.
+ */
+export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
+    onClose = _ref.onClose,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _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$nextIconDescript = _ref.nextIconDescription,
+    nextIconDescription = _ref$nextIconDescript === void 0 ? defaults.nextIconDescription : _ref$nextIconDescript,
+    _ref$previousIconDesc = _ref.previousIconDescription,
+    previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var scrollRef = useRef();
+  var toggleRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollPosition = _useState2[0],
+    setScrollPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showNavigation = _useState4[0],
+    setShowNavigation = _useState4[1];
+  var _useState5 = useState(collapsible ? true : false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCollapsed = _useState6[0],
+    setIsCollapsed = _useState6[1];
+  var handleClickToggle = function handleClickToggle() {
+    setIsCollapsed(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "aria-expanded": !isCollapsed,
+    className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null]),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Idea, {
+    size: 20,
+    className: "".concat(blockClass, "__icon-idea")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__title")
+  }, title), /*#__PURE__*/React.createElement(Carousel, {
+    className: "".concat(blockClass, "__carousel")
+    // These colors are to match the Carousel's faded edges
+    // against the Guidebanner's gradient background.
+    ,
+    fadedEdgeColor: {
+      left: blue90,
+      right: purple70
+    },
+    ref: scrollRef,
+    onChangeIsScrollable: function onChangeIsScrollable(value) {
+      setShowNavigation(value);
+    },
+    onScroll: function onScroll(scrollPercent) {
+      setScrollPosition(scrollPercent);
+    }
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: cx([collapsible || showNavigation ? "".concat(blockClass, "__navigation") : null])
+  }, collapsible && /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "md",
+    className: "".concat(blockClass, "__toggle-button"),
+    onClick: handleClickToggle,
+    ref: toggleRef
+  }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    align: "top",
+    disabled: scrollPosition === 0,
+    kind: "ghost",
+    label: previousIconDescription,
+    onClick: function onClick() {
+      scrollRef.current.scrollPrev();
+    },
+    size: "md"
+  }, /*#__PURE__*/React.createElement(CaretLeft, {
+    size: 16
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: cx("".concat(blockClass, "__next-button"), [scrollPosition === 1 ? "".concat(blockClass, "__next-button--disabled") : null])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    align: "top-right",
+    disabled: scrollPosition === 1,
+    kind: "ghost",
+    label: nextIconDescription,
+    onClick: function onClick() {
+      scrollRef.current.scrollNext();
+    },
+    size: "md"
+  }, /*#__PURE__*/React.createElement(CaretRight, {
+    size: 16
+  }))))), onClose && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "__close-button")
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    align: "bottom-right",
+    kind: "ghost",
+    label: closeIconDescription,
+    onClick: onClose,
+    size: "md"
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: 16
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+Guidebanner = pkg.checkComponentEnabled(Guidebanner, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+Guidebanner.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.
+Guidebanner.propTypes = {
+  /**
+   * Provide the contents of the Guidebanner.
+   * One or more GuidebannerElement components are required.
+   */
+  children: function children(props, propName) {
+    var error;
+    var prop = props[propName];
+    if (!prop) {
+      error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
+    }
+    React.Children.forEach(prop, function (child) {
+      if (child.type.displayName !== 'GuidebannerElement') {
+        var _child$type, _child$type2;
+        // If not GuidebannerElement, then show:
+        // React component name(child.type?.name) or
+        // HTML element name(child.type).
+        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
+      }
+    });
+    return error;
+  },
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
+  /**
+   * Text label for the Collapse button.
+   */
+  collapseButtonLabel: PropTypes.string,
+  /**
+   * When true, the Guidebanner will initialize in a collapsed state,
+   * showing the title and the Expand button.
+   *
+   * When expanded, it will show the GuidebannerElement child components and the Collapse button.
+   */
+  collapsible: PropTypes.bool,
+  /**
+   * Text label for the Expand button.
+   */
+  expandButtonLabel: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Next button icon.
+   */
+  nextIconDescription: PropTypes.string,
+  /**
+   * If defined, a Close button will render in the top-right corner and a
+   * callback function will be triggered when button is clicked.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Tooltip text and aria label for the Back button icon.
+   */
+  previousIconDescription: PropTypes.string,
+  /**
+   * Title text.
+   */
+  title: PropTypes.string.isRequired
+};

package/es/components/Guidebanner/GuidebannerElement.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(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.
+ */
+export var GuidebannerElement = function GuidebannerElement(_ref) {
+  var button = _ref.button,
+    className = _ref.className,
+    description = _ref.description,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName)), title && /*#__PURE__*/React.createElement("h2", {
+    className: "".concat(blockClass, "-title")
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "-content")
+  }, description), button && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-buttons")
+  }, button));
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElement = 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.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The description of the element.
+   */
+
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /**
+   * The title of the element.
+   */
+  title: PropTypes.string
+};

package/es/components/Guidebanner/GuidebannerElementButton.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button } from '@carbon/react';
+import { Crossroads } from '@carbon/react/icons';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--guidebanner__element-button");
+var componentName = 'GuidebannerElementButton';
+
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+export var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    type = _ref.type,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (type === 'primary') {
+    return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+      className: cx(blockClass, className),
+      iconDescription: 'Crossroads',
+      kind: "tertiary",
+      renderIcon: function renderIcon() {
+        return /*#__PURE__*/React.createElement(Crossroads, {
+          size: 16
+        });
+      },
+      role: "button",
+      size: "md"
+    }, getDevtoolsProps(componentName)), children);
+  }
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    className: cx(blockClass, className),
+    kind: "ghost",
+    role: "button",
+    size: "md"
+  }, getDevtoolsProps(componentName)), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElementButton = 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.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * If type is "primary", then return a tertiary button with the "crossroads" icon,
+   * else return a ghost button.
+   */
+  type: PropTypes.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/es/components/Guidebanner/GuidebannerElementLink.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link } from '@carbon/react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--guidebanner__element-link");
+var componentName = 'GuidebannerElementLink';
+
+/**
+ * A link styled specifically for the GuidebannerElement.
+ */
+export var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+    className: cx(blockClass, className),
+    kind: "ghost",
+    role: "link",
+    size: "md"
+  }, getDevtoolsProps(componentName)), children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElementLink = 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.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};

package/es/components/Guidebanner/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+export { Guidebanner } from './Guidebanner';
+export { GuidebannerElement } from './GuidebannerElement';
+export { GuidebannerElementButton } from './GuidebannerElementButton';
+export { GuidebannerElementLink } from './GuidebannerElementLink';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
+import * as stories from './NonLinearReading.stories';
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/React.createElement(StoryDocsPage, {
+    blocks: [{
+      story: stories.singleLevel
+    }, {
+      story: stories.multipleLevel
+    }, {
+      story: stories.withGradientBackground
+    }]
+  });
+};
+export default DocsPage;

package/es/components/NonLinearReading/NonLinearReading.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ChevronDown } from '@carbon/react/icons';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import uuidv4 from '../../global/js/utils/uuidv4';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(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.
+ */
+export var NonLinearReading = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var contentId = useRef(uuidv4()).current;
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), ' ', /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-controls": contentId,
+    "aria-expanded": isOpen,
+    className: cx("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
+    onClick: handleToggle
+  }, children, /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 16
+  })), ' ', /*#__PURE__*/React.createElement("span", {
+    id: contentId,
+    className: "".concat(blockClass, "__body"),
+    hidden: !isOpen
+  }, isOpen && definition), ' ');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+NonLinearReading = pkg.checkComponentEnabled(NonLinearReading, componentName);
+NonLinearReading.displayName = componentName;
+NonLinearReading.propTypes = {
+  /**
+   * The keyword of the component appears as a pill.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The content that appears when the keyword is toggled open.
+   */
+  definition: PropTypes.node.isRequired,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: PropTypes.oneOf(['light', 'dark'])
+};

package/es/components/NonLinearReading/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export { NonLinearReading } from './NonLinearReading';

package/es/components/SidePanel/SidePanel.js

@@ -329,9 +329,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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]);
@@ -345,14 +345,15 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   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(moderate02) : null;
-        pageContentElement.style.marginRight = SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineEnd = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : null;
+        pageContentElement.style.marginInlineEnd = SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
-        pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(moderate02) : null;
-        pageContentElement.style.marginLeft = SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineStart = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(moderate02) : null;
+        pageContentElement.style.marginInlineStart = SIDE_PANEL_SIZES[size];
       }
     }
   }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);