@atlaskit/page-layout 3.3.3 → 3.4.1

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

@@ -14,17 +14,24 @@ var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var leftPanelStyles = (0, _react2.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: _constants.LEFT_PANEL
 });
 var leftPanelFixedStyles = (0, _react2.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: _constants.LEFT_PANEL_WIDTH,
   position: 'fixed',
-  top: 0,
-  bottom: 0,
-  left: 0
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
 
 /**

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

@@ -14,8 +14,13 @@ var _controllers = require("../../controllers");
 var _leftSidebarInner = _interopRequireDefault(require("./internal/left-sidebar-inner"));
 var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-outer"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * __Left sidebar without resize__
  *

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

@@ -21,7 +21,9 @@ var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-
 var _resizableChildrenWrapper = _interopRequireDefault(require("./internal/resizable-children-wrapper"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 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) { (0, _defineProperty2.default)(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 */ /** @jsx jsx */
+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) { (0, _defineProperty2.default)(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
 var openBackdropStyles = (0, _react2.css)({
   width: '100%',
   height: '100%',
@@ -31,6 +33,7 @@ var openBackdropStyles = (0, _react2.css)({
 });
 var hiddenBackdropStyles = (0, _react2.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });
 

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

@@ -15,14 +15,20 @@ var _hooks = require("../../common/hooks");
 var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// 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 = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
 var mainStyles = (0, _react2.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(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
 });
 var draggingStyles = (0, _react2.css)({
@@ -37,7 +43,7 @@ var draggingStyles = (0, _react2.css)({
  * while main remains in place.
  */
 var flyoutStyles = (0, _react2.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(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 

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

@@ -13,21 +13,29 @@ var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
 var _skipLinks = require("../skip-links");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
-var gridTemplateAreasMobile = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, "\"\n ");
-var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
+var gridTemplateAreasMobile = "\n".concat("\n  \"", _constants.LEFT_PANEL, " ").concat(_constants.BANNER, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, "\"\n ");
+var gridTemplateAreas = "\n".concat("\n  \"", _constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
 var gridStyles = (0, _react2.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(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(_constants.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(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
 var gridStylesMobileStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.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(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
 }));
 

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

@@ -14,17 +14,24 @@ var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var baseStyles = (0, _react2.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: _constants.RIGHT_PANEL
 });
 var fixedStyles = (0, _react2.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: _constants.RIGHT_PANEL_WIDTH,
   position: 'fixed',
-  top: 0,
-  right: 0,
-  bottom: 0
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineEnd: 0
 });
 
 /**

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

@@ -14,8 +14,13 @@ var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -23,21 +28,20 @@ var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
  * out of its flex container and Main would stretch to occupy all the space.
  */
 var fixedInnerStyles = (0, _react2.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: _constants.RIGHT_SIDEBAR_WIDTH,
   position: 'fixed',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: "calc(".concat(_constants.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(_constants.BANNER_HEIGHT, " + ").concat(_constants.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(_constants.RIGHT_PANEL_WIDTH, ")")
 });
 var staticInnerStyles = (0, _react2.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 = (0, _react2.css)({
   width: _constants.RIGHT_SIDEBAR_WIDTH
 });
@@ -50,6 +54,7 @@ var outerStyles = (0, _react2.css)({
 var fixedOuterStyles = (0, _react2.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: _constants.RIGHT_SIDEBAR_WIDTH,
     content: "''"
   }

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

@@ -11,5 +11,9 @@ var _default = exports.default = function _default(_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
-  return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(_responsive.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.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"))
+  );
 };

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

@@ -14,21 +14,28 @@ var _utils = require("../../common/utils");
 var _controllers = require("../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var topNavigationStyles = (0, _react2.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: _constants.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: _constants.TOP_NAVIGATION
 });
 var fixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: _constants.BANNER_HEIGHT,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: _constants.RIGHT_PANEL_WIDTH,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: _constants.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: _constants.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: _constants.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: _constants.LEFT_PANEL_WIDTH
 });
 
 /**

package/dist/es2019/components/resize-control/grab-area.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* 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';
@@ -19,6 +23,7 @@ const 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
   },
@@ -78,7 +83,9 @@ const GrabArea = ({
   // 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/es2019/components/resize-control/index.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -29,10 +34,11 @@ const showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 const 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:
@@ -40,12 +46,14 @@ const 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/es2019/components/resize-control/resize-button.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -21,7 +25,7 @@ const furtherIncreasedHitAreasStyles = css({
   insetBlockStart: `${"var(--ds-space-negative-300, -24px)"}`
 });
 const mobileStyles = 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]: {
     opacity: 1
   }
@@ -52,11 +56,13 @@ const resizeIconButtonStyles = css({
     color ${smallDurationMs}ms linear,
     opacity ${mediumDurationMs}ms ${easeOut}
   `,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     backgroundColor: `var(--ds-background-selected-bold, ${B100})`,
     color: `var(--ds-text-inverse, ${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, ${B200})`,
     color: `var(--ds-text-inverse, ${N0})`,

package/dist/es2019/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';
@@ -14,11 +18,10 @@ const transitionDuration = '0.22s';
 const 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, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: -1,
   opacity: 0.5,
   pointerEvents: 'none',
   transitionDuration: transitionDuration,
@@ -27,8 +30,8 @@ const shadowStyles = css({
 });
 const draggingStyles = css({
   width: 6,
-  left: "var(--ds-space-negative-075, -6px)",
   background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
+  insetInlineStart: "var(--ds-space-negative-075, -6px)",
   opacity: 0.8
 });
 const Shadow = ({

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

@@ -1,13 +1,17 @@
 /* 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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const skipLinkStyles = css({
   margin: "var(--ds-space-250, 10px)",

package/dist/es2019/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/es2019/components/slots/banner-slot.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, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
@@ -8,17 +13,19 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
 const 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
 });
 const 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/es2019/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';
 const 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/es2019/components/slots/internal/left-sidebar-inner.js

@@ -1,28 +1,39 @@
+/**
+ * @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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const mobileStyles = 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]: {
+    // 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}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(${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
     insetInlineStart: `${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 ${TRANSITION_DURATION}ms ${easeOut} 0s`
   }
 });
 const mobileInnerFlyoutStyles = 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]: {
+    // 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, ${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 ${TRANSITION_DURATION}ms ${easeOut} 0s, box-shadow ${TRANSITION_DURATION}ms ${easeOut} 0s`
   }
 });
@@ -34,14 +45,19 @@ const mobileInnerFlyoutStyles = css({
  * out of its flex container and Main would stretch to occupy all the space.
  */
 const 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: `${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(${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
   insetInlineStart: `${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 ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });
 const 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
 });
 

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
@@ -9,34 +14,40 @@ 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
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const mobileStyles = 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]: {
+    // 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 ${TRANSITION_DURATION}ms ${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: "''"
     }
   }
 });
 const mobileFlyoutStyles = 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]: {
     cursor: 'revert'
   }
 });
 const 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 ${TRANSITION_DURATION}ms ${easeOut} 0s`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     '--ds--resize-button--opacity': 1
   }
@@ -53,16 +64,20 @@ const draggingStyles = css({
  * so the pseudo element forces it to take up the necessary width.
  */
 const 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: `${LEFT_SIDEBAR_WIDTH}`,
     content: "''"
   }
 });
 const 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
 });
 const 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
 });
 const selector = getPageLayoutSlotSelector('left-sidebar');