@atlaskit/page-layout 3.3.2 → 3.4.0

package/dist/esm/components/slots/internal/left-sidebar-outer.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef, useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
@@ -10,15 +15,18 @@ import { useIsSidebarDragging } from '../../../common/hooks';
 import { getPageLayoutSlotSelector } from '../../../common/utils';
 import { SidebarResizeContext } from '../../../controllers';
 import SlotFocusRing from './slot-focus-ring';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var mobileStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
   cursor: 'pointer',
   opacity: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
   '&::after': {
     display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
     content: "''"
   }
@@ -27,11 +35,14 @@ var mobileFlyoutStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
   cursor: 'revert'
 }));
 var outerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: LEFT_SIDEBAR_WIDTH,
   position: 'relative',
   zIndex: 1,
   marginInlineStart: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     '--ds--resize-button--opacity': 1
   }
@@ -48,16 +59,20 @@ var draggingStyles = css({
  * so the pseudo element forces it to take up the necessary width.
  */
 var fixedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '::after': {
     display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(LEFT_SIDEBAR_WIDTH),
     content: "''"
   }
 });
 var flyoutStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: LEFT_SIDEBAR_FLYOUT_WIDTH
 });
 var flyoutFixedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = getPageLayoutSlotSelector('left-sidebar');

package/dist/esm/components/slots/internal/resizable-children-wrapper.js

@@ -1,10 +1,14 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 
 /**
@@ -16,6 +20,7 @@ var prefersReducedMotionStyles = css(prefersReducedMotion());
 var hideLeftSidebarContentsStyles = css({
   opacity: 0,
   transition: "opacity 0ms linear, visibility 0ms linear",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "".concat(TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
 });

package/dist/esm/components/slots/internal/slot-focus-ring.js

@@ -1,11 +1,16 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'
@@ -18,9 +23,10 @@ var focusStyles = css({
  * so the nested selector needs to target an extra level deeper.
  */
 var sidebarFocusStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'

package/dist/esm/components/slots/left-panel.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -9,14 +14,16 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 var leftPanelStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridArea: LEFT_PANEL
 });
 var leftPanelFixedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: LEFT_PANEL_WIDTH,
   position: 'fixed',
-  top: 0,
-  bottom: 0,
-  left: 0
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
 
 /**

package/dist/esm/components/slots/left-sidebar-without-resize.js

@@ -1,6 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { resolveDimension } from '../../common/utils';

package/dist/esm/components/slots/left-sidebar.js

@@ -2,8 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
@@ -26,6 +31,7 @@ var openBackdropStyles = css({
 });
 var hiddenBackdropStyles = css({
   opacity: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "opacity ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });
 

package/dist/esm/components/slots/main.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion/accessibility';
 import { easeOut } from '@atlaskit/motion/curves';
@@ -10,12 +15,13 @@ import { getPageLayoutSlotSelector } from '../../common/utils';
 import { SidebarResizeContext, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var mainStyles = css({
   minWidth: 0,
   flexGrow: 1,
   marginInlineStart: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "margin-left ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });
 var draggingStyles = css({
@@ -30,7 +36,7 @@ var draggingStyles = css({
  * while main remains in place.
  */
 var flyoutStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   marginInlineStart: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

package/dist/esm/components/slots/page-layout.js

@@ -1,25 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
 import { SkipLinkWrapper } from '../skip-links';
 var pageLayoutSelector = _defineProperty({}, PAGE_LAYOUT_CONTAINER_SELECTOR, true);
-var gridTemplateAreasMobile = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, "\"\n ");
-var gridTemplateAreas = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, " ").concat(RIGHT_PANEL, "\"\n ");
+var gridTemplateAreasMobile = "\n".concat("\n  \"", LEFT_PANEL, " ").concat(BANNER, "\"\n  ", "\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, "\"\n  ", "\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, "\"\n ");
+var gridTemplateAreas = "\n".concat("\n  \"", LEFT_PANEL, " ").concat(BANNER, " ").concat(RIGHT_PANEL, "\"\n  ", "\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, " ").concat(RIGHT_PANEL, "\"\n", "\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, " ").concat(RIGHT_PANEL, "\"\n ");
 var gridStyles = css({
   display: 'grid',
   height: '100%',
   gridTemplateAreas: gridTemplateAreas,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(RIGHT_PANEL_WIDTH),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
 var gridStylesMobileStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
   gridTemplateAreas: gridTemplateAreasMobile,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridTemplateColumns: "".concat(LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 }));
 

package/dist/esm/components/slots/right-panel.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { DEFAULT_RIGHT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -9,14 +14,16 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 var baseStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridArea: RIGHT_PANEL
 });
 var fixedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: RIGHT_PANEL_WIDTH,
   position: 'fixed',
-  top: 0,
-  right: 0,
-  bottom: 0
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineEnd: 0
 });
 
 /**

package/dist/esm/components/slots/right-sidebar.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -16,21 +21,20 @@ import SlotDimensions from './slot-dimensions';
  * out of its flex container and Main would stretch to occupy all the space.
  */
 var fixedInnerStyles = css({
-  /**
-   * This width on the inner wrapper is required when it is using fixed
-   * positioning. Otherwise its width is slightly off.
-   */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: "calc(".concat(RIGHT_PANEL_WIDTH, ")"),
-  bottom: 0
+  insetBlockEnd: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  insetBlockStart: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  insetInlineEnd: "calc(".concat(RIGHT_PANEL_WIDTH, ")")
 });
 var staticInnerStyles = css({
   height: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var outerStyles = css({
   width: RIGHT_SIDEBAR_WIDTH
 });
@@ -43,6 +47,7 @@ var outerStyles = css({
 var fixedOuterStyles = css({
   '&::after': {
     display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: RIGHT_SIDEBAR_WIDTH,
     content: "''"
   }

package/dist/esm/components/slots/slot-dimensions.js

@@ -4,5 +4,9 @@ export default (function (_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
+    React.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
+  );
 });

package/dist/esm/components/slots/top-navigation.js

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_TOP_NAVIGATION_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -9,18 +14,20 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 var topNavigationStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: TOP_NAVIGATION_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gridArea: TOP_NAVIGATION
 });
 var fixedStyles = css({
   position: 'fixed',
   zIndex: 2,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: BANNER_HEIGHT,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: RIGHT_PANEL_WIDTH,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: LEFT_PANEL_WIDTH
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  insetBlockStart: BANNER_HEIGHT,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  insetInlineEnd: RIGHT_PANEL_WIDTH,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  insetInlineStart: LEFT_PANEL_WIDTH
 });
 
 /**

package/dist/types/components/resize-control/grab-area.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/components/resize-control/shadow.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 declare const Shadow: ({ testId }: {

package/dist/types/components/skip-links/skip-link-components.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/components/slots/content.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/components/slots/internal/left-sidebar-inner.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/components/slots/internal/left-sidebar-outer.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type MouseEventHandler, type ReactNode } from 'react';
 type LeftSidebarOuterProps = {

package/dist/types/components/slots/internal/resizable-children-wrapper.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/components/slots/internal/slot-focus-ring.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
 export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './controllers';
-export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';
+export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState } from './common/types';

package/dist/types-ts4.5/components/resize-control/grab-area.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/components/resize-control/shadow.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 declare const Shadow: ({ testId }: {

package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/components/slots/content.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/components/slots/internal/left-sidebar-inner.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/components/slots/internal/left-sidebar-outer.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type MouseEventHandler, type ReactNode } from 'react';
 type LeftSidebarOuterProps = {

package/dist/types-ts4.5/components/slots/internal/resizable-children-wrapper.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/components/slots/internal/slot-focus-ring.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
 export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
 export { usePageLayoutResize, useLeftSidebarFlyoutLock, UNSAFE_useSetLeftSidebarState, } from './controllers';
-export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, } from './common/types';
+export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState } from './common/types';