@atlaskit/page-layout 3.3.3 → 3.4.0

package/__perf__/utils/product-integration/side-navigation.tsx

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 
 import DropboxIcon from '@atlaskit/icon/glyph/dropbox';
@@ -10,117 +14,104 @@ import QueueIcon from '@atlaskit/icon/glyph/queues';
 import SettingsIcon from '@atlaskit/icon/glyph/settings';
 import LanguageIcon from '@atlaskit/icon/glyph/world';
 import {
-  ButtonItem,
-  LinkItem,
-  NavigationFooter,
-  NavigationHeader,
-  NestableNavigationContent,
-  NestingItem,
-  Section,
-  SideNavigation,
+	ButtonItem,
+	LinkItem,
+	NavigationFooter,
+	NavigationHeader,
+	NestableNavigationContent,
+	NestingItem,
+	Section,
+	SideNavigation,
 } from '@atlaskit/side-navigation';
 
 import SampleFooter from './sample-footer';
 import SampleHeader from './sample-header';
 
 const LanguageSettings = () => {
-  return (
-    <NestingItem
-      iconBefore={<LanguageIcon label="" />}
-      id="3-1"
-      title="Language settings"
-    >
-      <ButtonItem>Customize</ButtonItem>
+	return (
+		<NestingItem iconBefore={<LanguageIcon label="" />} id="3-1" title="Language settings">
+			<ButtonItem>Customize</ButtonItem>
 
-      <NestingItem id="3-1-1" title="German Settings">
-        <ButtonItem>Hallo Welt!</ButtonItem>
-      </NestingItem>
-      <NestingItem id="3-1-2" title="English Settings">
-        <ButtonItem>Hello World!</ButtonItem>
-      </NestingItem>
-    </NestingItem>
-  );
+			<NestingItem id="3-1-1" title="German Settings">
+				<ButtonItem>Hallo Welt!</ButtonItem>
+			</NestingItem>
+			<NestingItem id="3-1-2" title="English Settings">
+				<ButtonItem>Hello World!</ButtonItem>
+			</NestingItem>
+		</NestingItem>
+	);
 };
 
 const PerfExample = () => {
-  return (
-    <SideNavigation label="project" testId="side-navigation">
-      <NavigationHeader>
-        <SampleHeader />
-      </NavigationHeader>
-      <NestableNavigationContent initialStack={[]}>
-        <Section>
-          <ButtonItem iconBefore={<WorkIcon label="" />}>Your work</ButtonItem>
-          <LinkItem
-            href="https://www.atlassian.com/customers"
-            iconBefore={<CustomerIcon label="" />}
-          >
-            Your customers
-          </LinkItem>
-          <NestingItem
-            id="1"
-            isSelected
-            title="Queues view"
-            testId="nav-side-queues"
-            iconBefore={<QueueIcon label="" />}
-          >
-            <Section title="Queues">
-              <ButtonItem>Untriaged</ButtonItem>
-              <ButtonItem>My feature work</ButtonItem>
-              <ButtonItem>My bugfix work</ButtonItem>
-              <ButtonItem>Signals</ButtonItem>
-              <ButtonItem>Assigned to me</ButtonItem>
-            </Section>
-            <Section hasSeparator>
-              <ButtonItem>New queue</ButtonItem>
-            </Section>
-          </NestingItem>
-          <NestingItem
-            id="2"
-            testId="filter-nesting-item"
-            title="Filters"
-            iconBefore={<FilterIcon label="" />}
-          >
-            <Section>
-              <ButtonItem>Search issues</ButtonItem>
-            </Section>
-            <Section title="Starred">
-              <ButtonItem>Everything me</ButtonItem>
-              <ButtonItem>My open issues</ButtonItem>
-              <ButtonItem>Reported by me</ButtonItem>
-            </Section>
-            <Section hasSeparator title="Other">
-              <ButtonItem>All issues</ButtonItem>
-              <ButtonItem>Open issues</ButtonItem>
-              <ButtonItem>Created recently</ButtonItem>
-              <ButtonItem>Resolved recently</ButtonItem>
-            </Section>
-            <Section hasSeparator>
-              <ButtonItem>View all filters</ButtonItem>
-            </Section>
-          </NestingItem>
-          <NestingItem
-            id="3"
-            iconBefore={<SettingsIcon label="" />}
-            title="Settings"
-          >
-            <LanguageSettings />
-          </NestingItem>
-          <NestingItem
-            id="4"
-            iconBefore={<DropboxIcon label="" />}
-            title="Dropbox"
-            isDisabled
-          >
-            <span />
-          </NestingItem>
-        </Section>
-      </NestableNavigationContent>
-      <NavigationFooter>
-        <SampleFooter />
-      </NavigationFooter>
-    </SideNavigation>
-  );
+	return (
+		<SideNavigation label="project" testId="side-navigation">
+			<NavigationHeader>
+				<SampleHeader />
+			</NavigationHeader>
+			<NestableNavigationContent initialStack={[]}>
+				<Section>
+					<ButtonItem iconBefore={<WorkIcon label="" />}>Your work</ButtonItem>
+					<LinkItem
+						href="https://www.atlassian.com/customers"
+						iconBefore={<CustomerIcon label="" />}
+					>
+						Your customers
+					</LinkItem>
+					<NestingItem
+						id="1"
+						isSelected
+						title="Queues view"
+						testId="nav-side-queues"
+						iconBefore={<QueueIcon label="" />}
+					>
+						<Section title="Queues">
+							<ButtonItem>Untriaged</ButtonItem>
+							<ButtonItem>My feature work</ButtonItem>
+							<ButtonItem>My bugfix work</ButtonItem>
+							<ButtonItem>Signals</ButtonItem>
+							<ButtonItem>Assigned to me</ButtonItem>
+						</Section>
+						<Section hasSeparator>
+							<ButtonItem>New queue</ButtonItem>
+						</Section>
+					</NestingItem>
+					<NestingItem
+						id="2"
+						testId="filter-nesting-item"
+						title="Filters"
+						iconBefore={<FilterIcon label="" />}
+					>
+						<Section>
+							<ButtonItem>Search issues</ButtonItem>
+						</Section>
+						<Section title="Starred">
+							<ButtonItem>Everything me</ButtonItem>
+							<ButtonItem>My open issues</ButtonItem>
+							<ButtonItem>Reported by me</ButtonItem>
+						</Section>
+						<Section hasSeparator title="Other">
+							<ButtonItem>All issues</ButtonItem>
+							<ButtonItem>Open issues</ButtonItem>
+							<ButtonItem>Created recently</ButtonItem>
+							<ButtonItem>Resolved recently</ButtonItem>
+						</Section>
+						<Section hasSeparator>
+							<ButtonItem>View all filters</ButtonItem>
+						</Section>
+					</NestingItem>
+					<NestingItem id="3" iconBefore={<SettingsIcon label="" />} title="Settings">
+						<LanguageSettings />
+					</NestingItem>
+					<NestingItem id="4" iconBefore={<DropboxIcon label="" />} title="Dropbox" isDisabled>
+						<span />
+					</NestingItem>
+				</Section>
+			</NestableNavigationContent>
+			<NavigationFooter>
+				<SampleFooter />
+			</NavigationFooter>
+		</SideNavigation>
+	);
 };
 
 export default PerfExample;

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

@@ -14,7 +14,11 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 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
 /**
  * Determines the color of the grab line.
  *
@@ -28,6 +32,7 @@ var grabAreaStyles = (0, _react.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
   },
@@ -82,7 +87,9 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, (0, _platformFeatureFlags.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
+    (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,

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

@@ -20,7 +20,10 @@ var _grabArea = _interopRequireDefault(require("./grab-area"));
 var _resizeButton = _interopRequireDefault(require("./resize-button"));
 var _shadow = _interopRequireDefault(require("./shadow"));
 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; } /** @jsx jsx */ /* import useUpdateCssVar from '../../controllers/use-update-css-vars'; */
+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; } /**
+ * @jsxRuntime classic
+ */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/* import useUpdateCssVar from '../../controllers/use-update-css-vars'; */
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
 var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
@@ -35,10 +38,11 @@ var showResizeButtonStyles = (0, _react2.css)({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = (0, _react2.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:
@@ -46,12 +50,14 @@ var globalResizingStyles = (0, _react2.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/cjs/components/resize-control/resize-button.js

@@ -17,7 +17,11 @@ var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
   insetBlockEnd: "var(--ds-space-negative-100, -8px)",
@@ -54,11 +58,13 @@ var resizeIconButtonStyles = (0, _react.css)({
   outline: 0,
   transform: 'translateX(-50%)',
   transition: "\n    background-color ".concat(_durations.smallDurationMs, "ms linear,\n    color ").concat(_durations.smallDurationMs, "ms linear,\n    opacity ").concat(_durations.mediumDurationMs, "ms ").concat(_curves.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(_colors.B100, ")"),
     color: "var(--ds-text-inverse, ".concat(_colors.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(_colors.B200, ")"),
     color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),

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

@@ -7,19 +7,23 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _hooks = require("../../common/hooks");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
 var direction = 'to left';
 var transitionDuration = '0.22s';
 var shadowStyles = (0, _react.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,
@@ -28,8 +32,8 @@ var shadowStyles = (0, _react.css)({
 });
 var draggingStyles = (0, _react.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/cjs/components/skip-links/skip-link-components.js

@@ -14,8 +14,10 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _controllers = require("../../controllers");
 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 */
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+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
+// 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, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
   margin: "var(--ds-space-250, 10px)",

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

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCustomSkipLink = void 0;
 var _react = require("react");
 var _controllers = require("../../controllers");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
 var useCustomSkipLink = exports.useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {

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

@@ -14,20 +14,27 @@ 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 bannerStyles = (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.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: _constants.BANNER
 });
 var bannerFixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
-  top: 0,
-  // 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
+  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: _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/cjs/components/slots/content.js

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _constants = require("../../common/constants");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var contentStyles = (0, _react.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: _constants.CONTENT
 });
 

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

@@ -11,21 +11,33 @@ var _motion = require("@atlaskit/motion");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
+/**
+ * @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, _react.css)((0, _motion.prefersReducedMotion)());
 var mobileStyles = (0, _react.css)((0, _defineProperty2.default)({}, _responsive.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(_constants.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(_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
   insetInlineStart: "".concat(_constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 }));
 var mobileInnerFlyoutStyles = (0, _react.css)((0, _defineProperty2.default)({}, _responsive.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(_constants.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: _constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s, box-shadow ").concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 }));
 
@@ -36,14 +48,19 @@ var mobileInnerFlyoutStyles = (0, _react.css)((0, _defineProperty2.default)({},
  * out of its flex container and Main would stretch to occupy all the space.
  */
 var fixedInnerStyles = (0, _react.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(_constants.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(_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
   insetInlineStart: "".concat(_constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });
 var fixedInnerFlyoutStyles = (0, _react.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_SIDEBAR_FLYOUT_WIDTH
 });
 

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

@@ -16,17 +16,25 @@ var _hooks = require("../../../common/hooks");
 var _utils = require("../../../common/utils");
 var _controllers = require("../../../controllers");
 var _slotFocusRing = _interopRequireDefault(require("./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, _motion.prefersReducedMotion)());
 var mobileStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.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: _constants.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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.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: _constants.MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,
     content: "''"
   }
@@ -35,11 +43,14 @@ var mobileFlyoutStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _res
   cursor: 'revert'
 }));
 var outerStyles = (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_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(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     '--ds--resize-button--opacity': 1
   }
@@ -56,16 +67,20 @@ var draggingStyles = (0, _react2.css)({
  * so the pseudo element forces it to take up the necessary width.
  */
 var fixedStyles = (0, _react2.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(_constants.LEFT_SIDEBAR_WIDTH),
     content: "''"
   }
 });
 var flyoutStyles = (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_SIDEBAR_FLYOUT_WIDTH
 });
 var flyoutFixedStyles = (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.COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = (0, _utils.getPageLayoutSlotSelector)('left-sidebar');

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

@@ -8,9 +8,14 @@ var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _constants = require("../../../common/constants");
 var _hooks = require("../../../common/hooks");
+/**
+ * @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, _react.css)((0, _motion.prefersReducedMotion)());
 
 /**
@@ -22,6 +27,7 @@ var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotio
 var hideLeftSidebarContentsStyles = (0, _react.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(_constants.TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
 });

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

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var focusStyles = (0, _react.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(_colors.B100, ")")),
       outline: 'none'
@@ -24,9 +30,10 @@ var focusStyles = (0, _react.css)({
  * so the nested selector needs to target an extra level deeper.
  */
 var sidebarFocusStyles = (0, _react.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(_colors.B100, ")")),
       outline: 'none'