@atlaskit/navigation-system 0.166.0

package/dist/cjs/ui/page-layout/panel.js

@@ -0,0 +1,195 @@
+/* panel.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = Panel;
+require("./panel.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
+var _skipLinksContext = require("../../context/skip-links/skip-links-context");
+var _constants = require("./constants");
+var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
+var _hoistUtils = require("./hoist-utils");
+var _idUtils = require("./id-utils");
+var _provider = require("./panel-splitter/provider");
+var _elementContext = require("./side-nav/element-context");
+var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var panelSplitterResizingVar = '--n_pnlRsz';
+
+/**
+ * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
+ *
+ * Jira sets the slot's width to `0px` when there is no active content to display in it.
+ *   - This means the min width needs to support `0px`.
+ * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
+ * implementation, which has a maximum width of `50vw`.
+ *   - This means the max width needs to support `50vw`.
+ *
+ * This is not the final implementation and will be updated once Jira's usage has been fixed.
+ * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
+ *
+ * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
+ * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
+ */
+var oldPanelWidthSlotBounds = {
+  min: '0px',
+  max: '50vw'
+};
+var oldPanelWidthResizeBounds = {
+  min: '120px',
+  max: '50vw'
+};
+function getOldResizeBounds() {
+  return oldPanelWidthResizeBounds;
+}
+
+/**
+ * We typically use the `defaultWidth` as the minimum resizing width,
+ * but for large default widths we fallback to a standard value.
+ *
+ * This standard value of `400px` is to align with the Global Preview Panels.
+ */
+var fallbackResizeMinWidth = 400;
+var styles = {
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _14b54rrg _1dhy1c6w _9sns1wug",
+  backgroundColor: "_bfhk1bhr _4ap3vuon",
+  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
+  hidden: "_1e0cglyw",
+  oldMobileWidth: "_1bsb1adv",
+  newMobileWidth: "_1bsb1dxx"
+};
+
+/**
+ * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
+ *
+ * On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
+ *
+ * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
+ */
+function Panel(_ref) {
+  var children = _ref.children,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 365 : _ref$defaultWidth,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Panel' : _ref$label,
+    _ref$skipLinkLabel = _ref.skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    xcss = _ref.xcss,
+    _ref$hasBorder = _ref.hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_default_border') : _ref$hasBorder;
+  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
+  var id = (0, _idUtils.useLayoutId)({
+    providedId: providedId
+  });
+  /**
+   * Don't show the skip link if the slot has 0 width.
+   *
+   * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   */
+  (0, _skipLinksContext.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: defaultWidth === 0
+  });
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(defaultWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
+  var defaultWidthRef = (0, _react.useRef)(defaultWidth);
+
+  /**
+   * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
+   * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
+   * https://jplat.atlassian.net/browse/BLU-3951
+   */
+  (0, _react.useEffect)(function () {
+    if (defaultWidthRef.current === defaultWidth) {
+      return;
+    }
+    defaultWidthRef.current = defaultWidth;
+    setWidth(defaultWidth);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
+    }
+  }, [defaultWidth]);
+  var sideNavRef = (0, _elementContext.useSideNavRef)();
+
+  /**
+   * The minimum width that the panel can be resized to by the user.
+   *
+   * We only use the `defaultWidth` up to a point to avoid huge panels.
+   */
+  var minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);
+  var getNewResizeBounds = (0, _react.useCallback)(function () {
+    var _sideNavRef$current$o, _sideNavRef$current;
+    var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
+    /**
+     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     *
+     * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     */
+    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    return {
+      min: "".concat(minWidth, "px"),
+      max: "".concat(maxWidth, "px")
+    };
+  }, [minWidth, sideNavRef]);
+  var panelWidthSlotBounds = (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? {
+    min: "".concat(minWidth, "px"),
+    // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
+    max: "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+  } : oldPanelWidthSlotBounds;
+  var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
+  (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
+    isEnabled: dangerouslyHoistSlotSizes && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_live_resizing_css_vars'),
+    cssVar: panelSplitterResizingVar,
+    panelId: _constants.panelPanelSplitterId
+  });
+  return /*#__PURE__*/React.createElement("section", {
+    id: id,
+    "data-layout-slot": true,
+    "aria-label": label,
+    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_default_bg_color') && styles.backgroundColor, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
+    "data-testid": testId,
+    ref: ref
+  }, dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
+  // When they aren't needed anymore we can delete them wholesale.
+  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.UNSAFE_panelLayoutVar,
+    value: "0px",
+    mediaQuery: _responsive.media.above.lg,
+    responsiveValue: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_live_resizing_css_vars') ? "var(".concat(panelSplitterResizingVar, ", ").concat(panelVariableWidth, ")") : panelVariableWidth
+  })
+  // ------ END UNSAFE STYLES ------
+  , /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+    panelId: _constants.panelPanelSplitterId,
+    panelRef: ref,
+    panelWidth: width,
+    onCompleteResize: setWidth,
+    getResizeBounds: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? getNewResizeBounds : getOldResizeBounds,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.scrollContainer])
+  }, children)));
+}

package/dist/cjs/ui/page-layout/root.compiled.css

@@ -0,0 +1,8 @@
+._1ciragmp >:not([data-layout-slot]){display:none!important}
+._1e0c11p5{display:grid}
+._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
+._1tke1kxc{min-height:100vh}
+._2z0516ab{grid-template-rows:auto auto 1fr auto}
+._yv0ei47z{grid-template-columns:minmax(0,1fr)}
+@media (min-width:64rem){._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}}

package/dist/cjs/ui/page-layout/root.js

@@ -0,0 +1,65 @@
+/* root.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = Root;
+exports.gridRootId = void 0;
+require("./root.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _skipLinksContainer = require("../../components/skip-links/skip-links-container");
+var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
+var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
+var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
+var _elementContext = require("./side-nav/element-context");
+var _toggleButtonProvider = require("./side-nav/toggle-button-provider");
+var _visibilityProvider = require("./side-nav/visibility-provider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
+var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
+var styles = {
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8"
+};
+
+/**
+ * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
+ * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
+ */
+function Root(_ref) {
+  var children = _ref.children,
+    xcss = _ref.xcss,
+    _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
+    UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
+    _ref$skipLinksLabel = _ref.skipLinksLabel,
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    testId = _ref.testId;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (process.env.NODE_ENV !== 'production') {
+      var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
+      if (ref.current) {
+        Array.from(ref.current.children).forEach(function (child) {
+          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
+            // eslint-disable-next-line no-console
+            console.error("Page Layout Error\n\nThis element has been forcibly hidden:\n\n", child, "\n\nAn element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.\n\nThis message will not be displayed in production.\n");
+          }
+        });
+      }
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, null, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
+    value: UNSAFE_dangerouslyHoistSlotSizes
+  }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, null, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
+    label: skipLinksLabel,
+    testId: testId
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: (0, _runtime.ax)([styles.root, xcss]),
+    id: gridRootId,
+    "data-testid": testId
+  }, children))))))));
+}

package/dist/cjs/ui/page-layout/side-nav/element-context.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavElementProvider = SideNavElementProvider;
+exports.useSideNavRef = useSideNavRef;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var SideNavRefContext = /*#__PURE__*/(0, _react.createContext)({
+  current: null
+});
+function SideNavElementProvider(_ref) {
+  var children = _ref.children;
+  var sideNavRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(SideNavRefContext.Provider, {
+    value: sideNavRef
+  }, children);
+}
+
+/**
+ * Returns a ref for the side navigation that is accessible to other Page Layout slots.
+ *
+ * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
+ */
+function useSideNavRef() {
+  return (0, _react.useContext)(SideNavRefContext);
+}

package/dist/cjs/ui/page-layout/side-nav/flyout-close-delay-ms.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sideNavFlyoutCloseDelayMs = void 0;
+// Note: this value has been pulled into a separate file to better
+// support testing with Playwright. Playwright did not like importing
+// an exported value from `sidenav.tsx` which has `@jsxRuntime classic`.
+//
+// Error:
+// > importSource cannot be set when runtime is classic.
+
+/**
+ * How long the flyout should remain open after the users
+ * pointer has left the side nav flyout
+ */
+var sideNavFlyoutCloseDelayMs = exports.sideNavFlyoutCloseDelayMs = 400;

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -0,0 +1,9 @@
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1o9zkb7n{flex-shrink:1}
+._1reo1wug{overflow-x:auto}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._i0dlf1ug{flex-basis:0%}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.js

@@ -0,0 +1,37 @@
+/* side-nav-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavContent = void 0;
+require("./side-nav-content.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * The main content of the side nav, filling up the middle section. It acts as a scroll container.
+ *
+ * It will grow to take up the available space in the side nav — this is used to push the footer to the
+ * bottom of the side nav.
+ */
+var SideNavContent = exports.SideNavContent = /*#__PURE__*/(0, _react.forwardRef)(_SideNavContent);
+
+// Placing this const below the function breaks Compiled!
+var styles = {
+  scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
+  paddingContainer: "_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"
+};
+function _SideNavContent(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.scrollContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.paddingContainer])
+  }, children));
+}

package/dist/cjs/ui/page-layout/side-nav/side-nav-footer.compiled.css

@@ -0,0 +1,7 @@
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1sw7nqa1{border-block-start-style:solid}
+._7myae4h9{border-block-start-width:var(--ds-border-width,1px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._qgnumuej{border-block-start-color:var(--ds-border,#091e4224)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/cjs/ui/page-layout/side-nav/side-nav-footer.js

@@ -0,0 +1,26 @@
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavFooter = void 0;
+require("./side-nav-footer.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _7myae4h9 _1sw7nqa1 _qgnumuej"
+};
+
+/**
+ * The bottom part of the side nav.
+ */
+var SideNavFooter = exports.SideNavFooter = function SideNavFooter(_ref) {
+  var children = _ref.children,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.root, xcss])
+  }, children);
+};

package/dist/cjs/ui/page-layout/side-nav/side-nav-header.compiled.css

@@ -0,0 +1,3 @@
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}

package/dist/cjs/ui/page-layout/side-nav/side-nav-header.js

@@ -0,0 +1,25 @@
+/* side-nav-header.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavHeader = void 0;
+require("./side-nav-header.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_18zrutpp _1q51utpp _85i51b66"
+};
+
+/**
+ * The top part of the side nav.
+ */
+var SideNavHeader = exports.SideNavHeader = function SideNavHeader(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.root])
+  }, children);
+};

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -0,0 +1,20 @@
+
+._nd5l1b6c{grid-area:main/aside/aside/aside}
+._191wglyw{border-inline-start:none}
+._t51zglyw{border-inline-end:none}
+._t51zzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1ego{width:min(90%,20pc)}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1pbycs5v{z-index:2}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
+@media (min-width:64rem){._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}