@atlaskit/page-layout 3.3.2 → 3.4.0

package/dist/es2019/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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 /**
@@ -16,6 +20,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 const 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: `${TRANSITION_DURATION - 100}ms`,
   visibility: 'hidden'
 });

package/dist/es2019/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';
 const 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 ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'
@@ -18,9 +23,10 @@ const focusStyles = css({
  * so the nested selector needs to target an extra level deeper.
  */
 const 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 ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -8,14 +13,16 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 const 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
 });
 const 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/es2019/components/slots/left-sidebar-without-resize.js

@@ -1,5 +1,10 @@
+/**
+ * @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/es2019/components/slots/left-sidebar.js

@@ -1,6 +1,11 @@
 /* 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';
@@ -23,6 +28,7 @@ const openBackdropStyles = css({
 });
 const 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 ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });
 

package/dist/es2019/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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const 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 ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });
 const draggingStyles = css({
@@ -30,7 +36,7 @@ const draggingStyles = css({
  * while main remains in place.
  */
 const 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(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
 });
 

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -10,27 +15,36 @@ const pageLayoutSelector = {
   [PAGE_LAYOUT_CONTAINER_SELECTOR]: true
 };
 const gridTemplateAreasMobile = `
+${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${BANNER}"
+  ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${TOP_NAVIGATION}"
+  ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${CONTENT}"
  `;
 const gridTemplateAreas = `
+${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${BANNER} ${RIGHT_PANEL}"
+  ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${TOP_NAVIGATION} ${RIGHT_PANEL}"
+${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766 */''}
   "${LEFT_PANEL} ${CONTENT} ${RIGHT_PANEL}"
  `;
 const gridStyles = css({
   display: 'grid',
   height: '100%',
   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: `${LEFT_PANEL_WIDTH} minmax(0, 1fr) ${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: `${BANNER_HEIGHT} ${TOP_NAVIGATION_HEIGHT} auto`,
   outline: 'none'
 });
 const gridStylesMobileStyles = css({
-  // 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-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   [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: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`
   }
 });

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -8,14 +13,16 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 const 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
 });
 const 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/es2019/components/slots/right-sidebar.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -15,21 +20,20 @@ import SlotDimensions from './slot-dimensions';
  * out of its flex container and Main would stretch to occupy all the space.
  */
 const 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(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: `calc(${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(${BANNER_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
+  insetInlineEnd: `calc(${RIGHT_PANEL_WIDTH})`
 });
 const 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
 const outerStyles = css({
   width: RIGHT_SIDEBAR_WIDTH
 });
@@ -42,6 +46,7 @@ const outerStyles = css({
 const 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/es2019/components/slots/slot-dimensions.js

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

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -8,18 +13,20 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 const 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
 });
 const 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/esm/components/resize-control/grab-area.js

@@ -3,8 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
 /* eslint-disable react/react-in-jsx-scope */
+/**
+ * @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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
@@ -22,6 +26,7 @@ var grabAreaStyles = css({
   backgroundColor: 'transparent',
   border: 0,
   cursor: 'ew-resize',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&::-moz-focus-inner': {
     border: 0
   },
@@ -76,7 +81,9 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,

package/dist/esm/components/resize-control/index.js

@@ -3,8 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
@@ -31,10 +36,11 @@ var showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = css({
-  // 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
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     cursor: 'ew-resize !important',
     // Blocking selection while resizing
     // Notes:
@@ -42,12 +48,14 @@ var globalResizingStyles = css({
     // - Safari + Firefox → all good
     // - Chrome → This will undo the current selection while resizing (not ideal)
     //   - The current selection will resume after resizing
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     userSelect: 'none !important'
   },
-  // 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
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     pointerEvents: 'none !important'
   }
   // Note: We _could_ also disable `pointer-events` on all elements during resizing.

package/dist/esm/components/resize-control/resize-button.js

@@ -2,8 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+/**
+ * @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 ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
@@ -48,11 +52,13 @@ var resizeIconButtonStyles = css({
   outline: 0,
   transform: 'translateX(-50%)',
   transition: "\n    background-color ".concat(smallDurationMs, "ms linear,\n    color ").concat(smallDurationMs, "ms linear,\n    opacity ").concat(mediumDurationMs, "ms ").concat(easeOut, "\n  "),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     backgroundColor: "var(--ds-background-selected-bold, ".concat(B100, ")"),
     color: "var(--ds-text-inverse, ".concat(N0, ")"),
     opacity: 1
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':active, :focus': {
     backgroundColor: "var(--ds-background-selected-bold-hovered, ".concat(B200, ")"),
     color: "var(--ds-text-inverse, ".concat(N0, ")"),

package/dist/esm/components/resize-control/shadow.js

@@ -1,5 +1,9 @@
+/**
+ * @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 { easeOut } from '@atlaskit/motion';
 import { useIsSidebarDragging } from '../../common/hooks';
@@ -9,11 +13,10 @@ var transitionDuration = '0.22s';
 var shadowStyles = css({
   width: 3,
   position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: -1,
   background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: -1,
   opacity: 0.5,
   pointerEvents: 'none',
   transitionDuration: transitionDuration,
@@ -22,8 +25,8 @@ var shadowStyles = css({
 });
 var draggingStyles = css({
   width: 6,
-  left: "var(--ds-space-negative-075, -6px)",
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  insetInlineStart: "var(--ds-space-negative-075, -6px)",
   opacity: 0.8
 });
 var Shadow = function Shadow(_ref) {

package/dist/esm/components/skip-links/skip-link-components.js

@@ -3,15 +3,19 @@ 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 */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Link from '@atlaskit/link';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
 import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
 import { useSkipLinks } from '../../controllers';
-// 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 skipLinkStyles = css({
   margin: "var(--ds-space-250, 10px)",

package/dist/esm/components/skip-links/use-custom-skip-link.js

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { useSkipLinks } from '../../controllers';

package/dist/esm/components/slots/banner-slot.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, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -9,17 +14,19 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 var bannerStyles = 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: BANNER_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: BANNER
 });
 var bannerFixedStyles = css({
   position: 'fixed',
   zIndex: 2,
-  top: 0,
-  // 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
+  insetBlockStart: 0,
+  // 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/esm/components/slots/content.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 { css, jsx } from '@emotion/react';
 import { CONTENT } from '../../common/constants';
 var contentStyles = css({
   display: 'flex',
   height: '100%',
   position: 'relative',
+  // 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: CONTENT
 });
 

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

@@ -1,24 +1,35 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @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 { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } 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());
 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: "".concat(MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"),
   position: 'fixed',
   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
   insetInlineStart: "".concat(LEFT_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
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 }));
 var mobileInnerFlyoutStyles = 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: "min(90vw, ".concat(MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH, "px)"),
+  // 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,
+  // 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, box-shadow ").concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 }));
 
@@ -29,14 +40,19 @@ var mobileInnerFlyoutStyles = css(_defineProperty({}, UNSAFE_media.below.sm, {
  * out of its flex container and Main would stretch to occupy all the space.
  */
 var fixedInnerStyles = 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: "".concat(LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
   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
   insetInlineStart: "".concat(LEFT_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
   transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });
 var fixedInnerFlyoutStyles = 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
 });