@atlaskit/page 13.0.0 → 14.0.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/page
 
+## 14.0.1
+
+### Patch Changes
+
+- [#184487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/184487)
+  [`68f58b418f244`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68f58b418f244) -
+  Internal refactoring of visual regression tests.
+
+## 14.0.0
+
+### Major Changes
+
+- [#179127](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179127)
+  [`9375392f70d77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9375392f70d77) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/page`, you will need to ensure that your
+  bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
+  for `.css` imports, so you may not need to do anything. If you are using a different bundler,
+  please refer to the documentation for that bundler to understand how to handle `.css` imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 13.0.0
 
 ### Major Changes

package/dist/cjs/grid-column.compiled.css

@@ -0,0 +1,12 @@
+._16jlkb7n{flex-grow:1}
+._18u0wx3y{margin-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1o9zidpf{flex-shrink:0}
+._1ul9hrtj{min-width:calc(99.9999%/var(--ds-columns-num) - var(--ds-grid-spacing))}
+._2hwxwx3y{margin-right:calc(var(--ds-grid-spacing)/2)}
+._i0dl1osq{flex-basis:100%}
+._i0dl1wug{flex-basis:auto}
+._otyridpf{margin-bottom:0}
+._p12f1ho1{max-width:calc(100% - var(--ds-grid-spacing))}
+._p12fpg3g{max-width:calc((99.9999%/var(--ds-columns-num))*var(--ds-column-span) - var(--ds-grid-spacing))}
+._slp31hna{word-wrap:break-word}

package/dist/cjs/grid-column.js

@@ -1,29 +1,69 @@
+/* grid-column.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GridColumnContext = void 0;
+require("./grid-column.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _constants = require("./constants");
 var _gridContext = require("./grid-context");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Determines the method by which column width is calculated.
  */
 var ColumnVariant = /*#__PURE__*/function (ColumnVariant) {
+  /**
+   * Column occupies available space.
+   *
+   * Used when `medium` is 0 (the default).
+   */
   ColumnVariant["Auto"] = "auto";
+  /**
+   * Column occupies specified space.
+   *
+   * Used when 0 < `medium` < `columns`.
+   */
   ColumnVariant["Bounded"] = "bounded";
+  /**
+   * Column occupies entire row.
+   *
+   * Used when `medium` >= `columns`.
+   *
+   * This case is handled separately because of rounding.
+   */
   ColumnVariant["FullWidth"] = "fullWidth";
   return ColumnVariant;
 }(ColumnVariant || {});
+/**
+ * The spacing (in `px`) between each column.
+ */
+var varGridSpacing = '--ds-grid-spacing';
+
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+var varColumnSpan = '--ds-column-span';
+
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
+var singleColumnWidth = "(99.9999% / var(--ds-columns-num))";
+var styles = {
+  gridColumn: "_19pkidpf _2hwxwx3y _otyridpf _18u0wx3y _1ul9hrtj _16jlkb7n _1o9zidpf _slp31hna"
+};
+var gridColumnWidthMapStyles = {
+  auto: "_p12f1ho1 _i0dl1wug",
+  bounded: "_p12fpg3g _i0dl1osq",
+  fullWidth: "_p12f1ho1 _i0dl1osq"
+};
 var getVariant = function getVariant(_ref) {
   var medium = _ref.medium,
     columns = _ref.columns;
@@ -35,36 +75,6 @@ var getVariant = function getVariant(_ref) {
   return ColumnVariant.FullWidth;
 };
 
-/**
- * IE11 and Edge both have rounding issues for flexbox which is why a width of
- * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
- */
-var availableWidth = '99.9999%';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var singleColumnWidth = "(".concat(availableWidth, " / var(").concat(_constants.varColumnsNum, "))");
-var gridColumnStyles = (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
-  minWidth: "calc(".concat(singleColumnWidth, " - var(").concat(_constants.varGridSpacing, "))"),
-  // 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
-  margin: "0 calc(var(".concat(_constants.varGridSpacing, ") / 2)"),
-  flexGrow: 1,
-  flexShrink: 0,
-  wordWrap: 'break-word'
-});
-var gridColumnWidthStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ColumnVariant.Auto, (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
-  maxWidth: "calc(100% - var(".concat(_constants.varGridSpacing, "))"),
-  flexBasis: "auto"
-})), ColumnVariant.Bounded, (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
-  maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(_constants.varColumnSpan, ") - var(").concat(_constants.varGridSpacing, "))"),
-  flexBasis: "100%"
-})), ColumnVariant.FullWidth, (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
-  maxWidth: "calc(100% - var(".concat(_constants.varGridSpacing, "))"),
-  flexBasis: "100%"
-}));
-
 /**
  * __Grid column context__
  *
@@ -107,14 +117,12 @@ var GridColumn = function GridColumn(_ref2) {
     medium: medium,
     columns: columns
   });
-  return (0, _react2.jsx)(GridColumnContext.Provider, {
+  return /*#__PURE__*/React.createElement(GridColumnContext.Provider, {
     value: contextValue
-  }, (0, _react2.jsx)("div", {
-    css: [gridColumnStyles, gridColumnWidthStyles[variant]]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: (0, _defineProperty2.default)({}, _constants.varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
-    "data-testid": testId
+  }, /*#__PURE__*/React.createElement("div", {
+    style: (0, _defineProperty2.default)({}, varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.gridColumn, gridColumnWidthMapStyles[variant]])
   }, children));
 };
 var _default = exports.default = GridColumn;

package/dist/cjs/grid-wrapper.js

@@ -10,8 +10,7 @@ var _constants = require("./constants");
 var _grid = require("./grid");
 var _gridColumn = require("./grid-column");
 var _gridContext = require("./grid-context");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * __Grid__
  *

package/dist/cjs/grid.compiled.css

@@ -0,0 +1,16 @@
+._18u01un2{margin-left:calc(var(--ds-grid-spacing)*-1)}
+._18u01wug{margin-left:auto}
+._19bvwx3y{padding-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2hwx1un2{margin-right:calc(var(--ds-grid-spacing)*-1)}
+._2hwx1wug{margin-right:auto}
+._4cvr1y6m{align-items:flex-start}
+._ca0qidpf{padding-top:0}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._p12fgkkb{max-width:calc(var(--ds-columns-num)*5pc)}
+._u5f3wx3y{padding-right:calc(var(--ds-grid-spacing)/2)}

package/dist/cjs/grid.js

@@ -1,44 +1,39 @@
+/* grid.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Grid = void 0;
+require("./grid.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _constants = require("./constants");
 var _gridContext = require("./grid-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var defaultGridColumnWidth = 80;
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * The number of available columns in each row.
  */
+var varColumnsNum = '--ds-columns-num';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var gridStyles = (0, _react2.css)({
-  display: 'flex',
-  margin: '0 auto',
-  // 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
-  padding: "0 calc(var(".concat(_constants.varGridSpacing, ") / 2)"),
-  position: 'relative',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-var gridLayoutStyles = {
-  fixed: (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
-    maxWidth: "calc(var(".concat(_constants.varColumnsNum, ") * ").concat(_constants.defaultGridColumnWidth, "px)")
-  }),
-  fluid: (0, _react2.css)({
-    maxWidth: '100%'
-  })
+/**
+ * The spacing (in `px`) between each column.
+ */
+var varGridSpacing = '--ds-grid-spacing';
+var styles = {
+  grid: "_19pkidpf _2hwx1wug _otyridpf _18u01wug _ca0qidpf _u5f3wx3y _n3tdidpf _19bvwx3y _1e0c1txw _kqswh2mm _4cvr1y6m _1n261g80",
+  nestedGrid: "_19pkidpf _2hwx1un2 _otyridpf _18u01un2"
+};
+var gridLayoutMapStyles = {
+  fixed: "_p12fgkkb",
+  fluid: "_p12f1osq"
 };
-var nestedGridStyles = (0, _react2.css)({
-  // 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
-  margin: "0 calc(-1 * var(".concat(_constants.varGridSpacing, "))")
-});
 
 /**
  * __Grid__
@@ -59,11 +54,9 @@ var Grid = exports.Grid = function Grid(_ref) {
     isNested = _useContext.isNested,
     columns = _useContext.columns,
     spacing = _useContext.spacing;
-  return (0, _react2.jsx)("div", {
-    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.varColumnsNum, columns), _constants.varGridSpacing, "".concat(_constants.spacingMapping[spacing], "px")),
-    "data-testid": testId
+  return /*#__PURE__*/React.createElement("div", {
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, varColumnsNum, columns), varGridSpacing, "".concat(_constants.spacingMapping[spacing], "px")),
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.grid, gridLayoutMapStyles[layout], isNested && styles.nestedGrid])
   }, children);
 };

package/dist/cjs/page.compiled.css

@@ -0,0 +1,15 @@
+
+._v564evma{transition:height .25s ease-in-out}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1pby11wp{z-index:3}
+._1pbycs5v{z-index:2}
+._1pbykb7n{z-index:1}
+._1tke1osq{min-height:100%}
+._1ul9idpf{min-width:0}
+._2lx21bp4{flex-direction:column}
+._i0dl1wug{flex-basis:auto}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}

package/dist/cjs/page.js

@@ -1,48 +1,24 @@
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./page.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _constants = require("./constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var bannerStyles = (0, _react.css)({
-  width: '100%',
-  position: 'fixed'
-});
-var bannerContainerStyles = (0, _react.css)({
-  width: '100%',
-  position: 'relative',
-  zIndex: 3,
-  flex: '1 0 auto',
-  transition: 'height 0.25s ease-in-out'
-});
-var pageContentStyles = (0, _react.css)({
-  minWidth: 0,
-  position: 'relative',
-  zIndex: 1,
-  flex: '1 1 auto'
-});
-var wrapperStyles = (0, _react.css)({
-  display: 'flex',
-  width: '100%',
-  minHeight: '100%',
-  flexDirection: 'column'
-});
-var mainContainerStyles = (0, _react.css)({
-  display: 'flex',
-  flex: '1 1 auto'
-});
-var navigationStyles = (0, _react.css)({
-  position: 'relative',
-  zIndex: 2
-});
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  banner: "_1bsb1osq _kqsw1n9t",
+  bannerContainer: "_16jlkb7n _1o9zidpf _i0dl1wug _v564evma _1bsb1osq _kqswh2mm _1pby11wp",
+  pageContent: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _kqswh2mm _1pbykb7n",
+  wrapper: "_1e0c1txw _1bsb1osq _1tke1osq _2lx21bp4",
+  mainContainer: "_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw",
+  navigation: "_kqswh2mm _1pbycs5v"
+};
 
 /**
  * __Page__
@@ -63,24 +39,24 @@ var Page = function Page(_ref) {
     navigation = _ref.navigation,
     children = _ref.children,
     testId = _ref.testId;
-  return (0, _react.jsx)("div", {
-    css: wrapperStyles,
-    "data-testid": testId
-  }, banner ? (0, _react.jsx)("div", {
-    css: bannerContainerStyles,
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.wrapper])
+  }, banner ? /*#__PURE__*/React.createElement("div", {
     style: {
       height: isBannerOpen ? "".concat(bannerHeight, "px") : '0'
     },
     "aria-hidden": !isBannerOpen,
-    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined
-  }, (0, _react.jsx)("div", {
-    css: bannerStyles
-  }, banner)) : null, (0, _react.jsx)("div", {
-    css: mainContainerStyles
-  }, (0, _react.jsx)("div", {
-    css: navigationStyles
-  }, navigation), (0, _react.jsx)("div", {
-    css: pageContentStyles
+    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined,
+    className: (0, _runtime.ax)([styles.bannerContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.banner])
+  }, banner)) : null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.mainContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.navigation])
+  }, navigation), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.pageContent])
   }, children)));
 };
 var _default = exports.default = Page;

package/dist/es2019/grid-column.compiled.css

@@ -0,0 +1,12 @@
+._16jlkb7n{flex-grow:1}
+._18u0wx3y{margin-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1o9zidpf{flex-shrink:0}
+._1ul9hrtj{min-width:calc(99.9999%/var(--ds-columns-num) - var(--ds-grid-spacing))}
+._2hwxwx3y{margin-right:calc(var(--ds-grid-spacing)/2)}
+._i0dl1osq{flex-basis:100%}
+._i0dl1wug{flex-basis:auto}
+._otyridpf{margin-bottom:0}
+._p12f1ho1{max-width:calc(100% - var(--ds-grid-spacing))}
+._p12fpg3g{max-width:calc((99.9999%/var(--ds-columns-num))*var(--ds-column-span) - var(--ds-grid-spacing))}
+._slp31hna{word-wrap:break-word}

package/dist/es2019/grid-column.js

@@ -1,22 +1,59 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* grid-column.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./grid-column.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { createContext, useContext, useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { defaultMedium, varColumnsNum, varColumnSpan, varGridSpacing } from './constants';
+import { defaultMedium } from './constants';
 import { GridContext } from './grid-context';
 /**
  * Determines the method by which column width is calculated.
  */
 var ColumnVariant = /*#__PURE__*/function (ColumnVariant) {
+  /**
+   * Column occupies available space.
+   *
+   * Used when `medium` is 0 (the default).
+   */
   ColumnVariant["Auto"] = "auto";
+  /**
+   * Column occupies specified space.
+   *
+   * Used when 0 < `medium` < `columns`.
+   */
   ColumnVariant["Bounded"] = "bounded";
+  /**
+   * Column occupies entire row.
+   *
+   * Used when `medium` >= `columns`.
+   *
+   * This case is handled separately because of rounding.
+   */
   ColumnVariant["FullWidth"] = "fullWidth";
   return ColumnVariant;
 }(ColumnVariant || {});
+/**
+ * The spacing (in `px`) between each column.
+ */
+const varGridSpacing = '--ds-grid-spacing';
+
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+const varColumnSpan = '--ds-column-span';
+
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
+const singleColumnWidth = `(99.9999% / var(--ds-columns-num))`;
+const styles = {
+  gridColumn: "_19pkidpf _2hwxwx3y _otyridpf _18u0wx3y _1ul9hrtj _16jlkb7n _1o9zidpf _slp31hna"
+};
+const gridColumnWidthMapStyles = {
+  auto: "_p12f1ho1 _i0dl1wug",
+  bounded: "_p12fpg3g _i0dl1osq",
+  fullWidth: "_p12f1ho1 _i0dl1osq"
+};
 const getVariant = ({
   medium,
   columns
@@ -29,40 +66,6 @@ const getVariant = ({
   return ColumnVariant.FullWidth;
 };
 
-/**
- * IE11 and Edge both have rounding issues for flexbox which is why a width of
- * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
- */
-const availableWidth = '99.9999%';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-const singleColumnWidth = `(${availableWidth} / var(${varColumnsNum}))`;
-const gridColumnStyles = 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
-  minWidth: `calc(${singleColumnWidth} - var(${varGridSpacing}))`,
-  // 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
-  margin: `0 calc(var(${varGridSpacing}) / 2)`,
-  flexGrow: 1,
-  flexShrink: 0,
-  wordWrap: 'break-word'
-});
-const gridColumnWidthStyles = {
-  [ColumnVariant.Auto]: 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
-    maxWidth: `calc(100% - var(${varGridSpacing}))`,
-    flexBasis: `auto`
-  }),
-  [ColumnVariant.Bounded]: 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
-    maxWidth: `calc(${singleColumnWidth} *  var(${varColumnSpan}) - var(${varGridSpacing}))`,
-    flexBasis: `100%`
-  }),
-  [ColumnVariant.FullWidth]: 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
-    maxWidth: `calc(100% - var(${varGridSpacing}))`,
-    flexBasis: `100%`
-  })
-};
-
 /**
  * __Grid column context__
  *
@@ -104,21 +107,18 @@ const GridColumn = ({
     medium,
     columns
   });
-  return jsx(GridColumnContext.Provider, {
+  return /*#__PURE__*/React.createElement(GridColumnContext.Provider, {
     value: contextValue
-  }, jsx("div", {
-    css: [gridColumnStyles, gridColumnWidthStyles[variant]]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       /**
        * The 'auto' value here isn't actually consumed anywhere and is
        * just to better reflect what is happening when inspecting CSS.
        */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       [varColumnSpan]: variant === ColumnVariant.Auto ? 'auto' : colSpan
     },
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax([styles.gridColumn, gridColumnWidthMapStyles[variant]])
   }, children));
 };
 export default GridColumn;

package/dist/es2019/grid.compiled.css

@@ -0,0 +1,16 @@
+._18u01un2{margin-left:calc(var(--ds-grid-spacing)*-1)}
+._18u01wug{margin-left:auto}
+._19bvwx3y{padding-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2hwx1un2{margin-right:calc(var(--ds-grid-spacing)*-1)}
+._2hwx1wug{margin-right:auto}
+._4cvr1y6m{align-items:flex-start}
+._ca0qidpf{padding-top:0}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._p12fgkkb{max-width:calc(var(--ds-columns-num)*5pc)}
+._u5f3wx3y{padding-right:calc(var(--ds-grid-spacing)/2)}

package/dist/es2019/grid.js

@@ -1,35 +1,29 @@
+/* grid.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./grid.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext } from 'react';
+import { defaultLayout, spacingMapping } from './constants';
+import { GridContext } from './grid-context';
+const defaultGridColumnWidth = 80;
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * The number of available columns in each row.
  */
-import { useContext } from 'react';
+const varColumnsNum = '--ds-columns-num';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum, varGridSpacing } from './constants';
-import { GridContext } from './grid-context';
-const gridStyles = css({
-  display: 'flex',
-  margin: '0 auto',
-  // 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
-  padding: `0 calc(var(${varGridSpacing}) / 2)`,
-  position: 'relative',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-const gridLayoutStyles = {
-  fixed: 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
-    maxWidth: `calc(var(${varColumnsNum}) * ${defaultGridColumnWidth}px)`
-  }),
-  fluid: css({
-    maxWidth: '100%'
-  })
+/**
+ * The spacing (in `px`) between each column.
+ */
+const varGridSpacing = '--ds-grid-spacing';
+const styles = {
+  grid: "_19pkidpf _2hwx1wug _otyridpf _18u01wug _ca0qidpf _u5f3wx3y _n3tdidpf _19bvwx3y _1e0c1txw _kqswh2mm _4cvr1y6m _1n261g80",
+  nestedGrid: "_19pkidpf _2hwx1un2 _otyridpf _18u01un2"
+};
+const gridLayoutMapStyles = {
+  fixed: "_p12fgkkb",
+  fluid: "_p12f1osq"
 };
-const nestedGridStyles = css({
-  // 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
-  margin: `0 calc(-1 * var(${varGridSpacing}))`
-});
 
 /**
  * __Grid__
@@ -51,16 +45,13 @@ export const Grid = ({
     columns,
     spacing
   } = useContext(GridContext);
-  return jsx("div", {
-    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+  return /*#__PURE__*/React.createElement("div", {
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       [varColumnsNum]: columns,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       [varGridSpacing]: `${spacingMapping[spacing]}px`
     },
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax([styles.grid, gridLayoutMapStyles[layout], isNested && styles.nestedGrid])
   }, children);
 };

package/dist/es2019/page.compiled.css

@@ -0,0 +1,15 @@
+
+._v564evma{transition:height .25s ease-in-out}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1pby11wp{z-index:3}
+._1pbycs5v{z-index:2}
+._1pbykb7n{z-index:1}
+._1tke1osq{min-height:100%}
+._1ul9idpf{min-width:0}
+._2lx21bp4{flex-direction:column}
+._i0dl1wug{flex-basis:auto}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}

package/dist/es2019/page.js

@@ -1,41 +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';
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./page.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { defaultBannerHeight } from './constants';
-const bannerStyles = css({
-  width: '100%',
-  position: 'fixed'
-});
-const bannerContainerStyles = css({
-  width: '100%',
-  position: 'relative',
-  zIndex: 3,
-  flex: '1 0 auto',
-  transition: 'height 0.25s ease-in-out'
-});
-const pageContentStyles = css({
-  minWidth: 0,
-  position: 'relative',
-  zIndex: 1,
-  flex: '1 1 auto'
-});
-const wrapperStyles = css({
-  display: 'flex',
-  width: '100%',
-  minHeight: '100%',
-  flexDirection: 'column'
-});
-const mainContainerStyles = css({
-  display: 'flex',
-  flex: '1 1 auto'
-});
-const navigationStyles = css({
-  position: 'relative',
-  zIndex: 2
-});
+const styles = {
+  banner: "_1bsb1osq _kqsw1n9t",
+  bannerContainer: "_16jlkb7n _1o9zidpf _i0dl1wug _v564evma _1bsb1osq _kqswh2mm _1pby11wp",
+  pageContent: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _kqswh2mm _1pbykb7n",
+  wrapper: "_1e0c1txw _1bsb1osq _1tke1osq _2lx21bp4",
+  mainContainer: "_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw",
+  navigation: "_kqswh2mm _1pbycs5v"
+};
 
 /**
  * __Page__
@@ -55,24 +30,24 @@ const Page = ({
   children,
   testId
 }) => {
-  return jsx("div", {
-    css: wrapperStyles,
-    "data-testid": testId
-  }, banner ? jsx("div", {
-    css: bannerContainerStyles,
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([styles.wrapper])
+  }, banner ? /*#__PURE__*/React.createElement("div", {
     style: {
       height: isBannerOpen ? `${bannerHeight}px` : '0'
     },
     "aria-hidden": !isBannerOpen,
-    "data-testid": testId ? `${testId}--banner-container` : undefined
-  }, jsx("div", {
-    css: bannerStyles
-  }, banner)) : null, jsx("div", {
-    css: mainContainerStyles
-  }, jsx("div", {
-    css: navigationStyles
-  }, navigation), jsx("div", {
-    css: pageContentStyles
+    "data-testid": testId ? `${testId}--banner-container` : undefined,
+    className: ax([styles.bannerContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.banner])
+  }, banner)) : null, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.mainContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.navigation])
+  }, navigation), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.pageContent])
   }, children)));
 };
 export default Page;

package/dist/esm/grid-column.compiled.css

@@ -0,0 +1,12 @@
+._16jlkb7n{flex-grow:1}
+._18u0wx3y{margin-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1o9zidpf{flex-shrink:0}
+._1ul9hrtj{min-width:calc(99.9999%/var(--ds-columns-num) - var(--ds-grid-spacing))}
+._2hwxwx3y{margin-right:calc(var(--ds-grid-spacing)/2)}
+._i0dl1osq{flex-basis:100%}
+._i0dl1wug{flex-basis:auto}
+._otyridpf{margin-bottom:0}
+._p12f1ho1{max-width:calc(100% - var(--ds-grid-spacing))}
+._p12fpg3g{max-width:calc((99.9999%/var(--ds-columns-num))*var(--ds-column-span) - var(--ds-grid-spacing))}
+._slp31hna{word-wrap:break-word}

package/dist/esm/grid-column.js

@@ -1,23 +1,60 @@
+/* grid-column.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./grid-column.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { createContext, useContext, useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { defaultMedium, varColumnsNum, varColumnSpan, varGridSpacing } from './constants';
+import { defaultMedium } from './constants';
 import { GridContext } from './grid-context';
 /**
  * Determines the method by which column width is calculated.
  */
 var ColumnVariant = /*#__PURE__*/function (ColumnVariant) {
+  /**
+   * Column occupies available space.
+   *
+   * Used when `medium` is 0 (the default).
+   */
   ColumnVariant["Auto"] = "auto";
+  /**
+   * Column occupies specified space.
+   *
+   * Used when 0 < `medium` < `columns`.
+   */
   ColumnVariant["Bounded"] = "bounded";
+  /**
+   * Column occupies entire row.
+   *
+   * Used when `medium` >= `columns`.
+   *
+   * This case is handled separately because of rounding.
+   */
   ColumnVariant["FullWidth"] = "fullWidth";
   return ColumnVariant;
 }(ColumnVariant || {});
+/**
+ * The spacing (in `px`) between each column.
+ */
+var varGridSpacing = '--ds-grid-spacing';
+
+/**
+ * The number of columns that a `GridColumn` covers.
+ */
+var varColumnSpan = '--ds-column-span';
+
+/**
+ * IE11 and Edge both have rounding issues for flexbox which is why a width of
+ * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
+ */
+var singleColumnWidth = "(99.9999% / var(--ds-columns-num))";
+var styles = {
+  gridColumn: "_19pkidpf _2hwxwx3y _otyridpf _18u0wx3y _1ul9hrtj _16jlkb7n _1o9zidpf _slp31hna"
+};
+var gridColumnWidthMapStyles = {
+  auto: "_p12f1ho1 _i0dl1wug",
+  bounded: "_p12fpg3g _i0dl1osq",
+  fullWidth: "_p12f1ho1 _i0dl1osq"
+};
 var getVariant = function getVariant(_ref) {
   var medium = _ref.medium,
     columns = _ref.columns;
@@ -29,36 +66,6 @@ var getVariant = function getVariant(_ref) {
   return ColumnVariant.FullWidth;
 };
 
-/**
- * IE11 and Edge both have rounding issues for flexbox which is why a width of
- * 99.9999% is used. Using 100% here causes columns to wrap prematurely.
- */
-var availableWidth = '99.9999%';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var singleColumnWidth = "(".concat(availableWidth, " / var(").concat(varColumnsNum, "))");
-var gridColumnStyles = 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
-  minWidth: "calc(".concat(singleColumnWidth, " - var(").concat(varGridSpacing, "))"),
-  // 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
-  margin: "0 calc(var(".concat(varGridSpacing, ") / 2)"),
-  flexGrow: 1,
-  flexShrink: 0,
-  wordWrap: 'break-word'
-});
-var gridColumnWidthStyles = _defineProperty(_defineProperty(_defineProperty({}, ColumnVariant.Auto, 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
-  maxWidth: "calc(100% - var(".concat(varGridSpacing, "))"),
-  flexBasis: "auto"
-})), ColumnVariant.Bounded, 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
-  maxWidth: "calc(".concat(singleColumnWidth, " *  var(").concat(varColumnSpan, ") - var(").concat(varGridSpacing, "))"),
-  flexBasis: "100%"
-})), ColumnVariant.FullWidth, 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
-  maxWidth: "calc(100% - var(".concat(varGridSpacing, "))"),
-  flexBasis: "100%"
-}));
-
 /**
  * __Grid column context__
  *
@@ -101,14 +108,12 @@ var GridColumn = function GridColumn(_ref2) {
     medium: medium,
     columns: columns
   });
-  return jsx(GridColumnContext.Provider, {
+  return /*#__PURE__*/React.createElement(GridColumnContext.Provider, {
     value: contextValue
-  }, jsx("div", {
-    css: [gridColumnStyles, gridColumnWidthStyles[variant]]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+  }, /*#__PURE__*/React.createElement("div", {
     style: _defineProperty({}, varColumnSpan, variant === ColumnVariant.Auto ? 'auto' : colSpan),
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax([styles.gridColumn, gridColumnWidthMapStyles[variant]])
   }, children));
 };
 export default GridColumn;

package/dist/esm/grid.compiled.css

@@ -0,0 +1,16 @@
+._18u01un2{margin-left:calc(var(--ds-grid-spacing)*-1)}
+._18u01wug{margin-left:auto}
+._19bvwx3y{padding-left:calc(var(--ds-grid-spacing)/2)}
+._19pkidpf{margin-top:0}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2hwx1un2{margin-right:calc(var(--ds-grid-spacing)*-1)}
+._2hwx1wug{margin-right:auto}
+._4cvr1y6m{align-items:flex-start}
+._ca0qidpf{padding-top:0}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._p12fgkkb{max-width:calc(var(--ds-columns-num)*5pc)}
+._u5f3wx3y{padding-right:calc(var(--ds-grid-spacing)/2)}

package/dist/esm/grid.js

@@ -1,36 +1,30 @@
+/* grid.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./grid.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext } from 'react';
+import { defaultLayout, spacingMapping } from './constants';
+import { GridContext } from './grid-context';
+var defaultGridColumnWidth = 80;
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * The number of available columns in each row.
  */
-import { useContext } from 'react';
+var varColumnsNum = '--ds-columns-num';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { defaultGridColumnWidth, defaultLayout, spacingMapping, varColumnsNum, varGridSpacing } from './constants';
-import { GridContext } from './grid-context';
-var gridStyles = css({
-  display: 'flex',
-  margin: '0 auto',
-  // 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
-  padding: "0 calc(var(".concat(varGridSpacing, ") / 2)"),
-  position: 'relative',
-  alignItems: 'flex-start',
-  flexWrap: 'wrap'
-});
-var gridLayoutStyles = {
-  fixed: 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
-    maxWidth: "calc(var(".concat(varColumnsNum, ") * ").concat(defaultGridColumnWidth, "px)")
-  }),
-  fluid: css({
-    maxWidth: '100%'
-  })
+/**
+ * The spacing (in `px`) between each column.
+ */
+var varGridSpacing = '--ds-grid-spacing';
+var styles = {
+  grid: "_19pkidpf _2hwx1wug _otyridpf _18u01wug _ca0qidpf _u5f3wx3y _n3tdidpf _19bvwx3y _1e0c1txw _kqswh2mm _4cvr1y6m _1n261g80",
+  nestedGrid: "_19pkidpf _2hwx1un2 _otyridpf _18u01un2"
+};
+var gridLayoutMapStyles = {
+  fixed: "_p12fgkkb",
+  fluid: "_p12f1osq"
 };
-var nestedGridStyles = css({
-  // 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
-  margin: "0 calc(-1 * var(".concat(varGridSpacing, "))")
-});
 
 /**
  * __Grid__
@@ -51,11 +45,9 @@ export var Grid = function Grid(_ref) {
     isNested = _useContext.isNested,
     columns = _useContext.columns,
     spacing = _useContext.spacing;
-  return jsx("div", {
-    css: [gridStyles, gridLayoutStyles[layout], isNested && nestedGridStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+  return /*#__PURE__*/React.createElement("div", {
     style: _defineProperty(_defineProperty({}, varColumnsNum, columns), varGridSpacing, "".concat(spacingMapping[spacing], "px")),
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax([styles.grid, gridLayoutMapStyles[layout], isNested && styles.nestedGrid])
   }, children);
 };

package/dist/esm/page.compiled.css

@@ -0,0 +1,15 @@
+
+._v564evma{transition:height .25s ease-in-out}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1pby11wp{z-index:3}
+._1pbycs5v{z-index:2}
+._1pbykb7n{z-index:1}
+._1tke1osq{min-height:100%}
+._1ul9idpf{min-width:0}
+._2lx21bp4{flex-direction:column}
+._i0dl1wug{flex-basis:auto}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}

package/dist/esm/page.js

@@ -1,41 +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';
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./page.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { defaultBannerHeight } from './constants';
-var bannerStyles = css({
-  width: '100%',
-  position: 'fixed'
-});
-var bannerContainerStyles = css({
-  width: '100%',
-  position: 'relative',
-  zIndex: 3,
-  flex: '1 0 auto',
-  transition: 'height 0.25s ease-in-out'
-});
-var pageContentStyles = css({
-  minWidth: 0,
-  position: 'relative',
-  zIndex: 1,
-  flex: '1 1 auto'
-});
-var wrapperStyles = css({
-  display: 'flex',
-  width: '100%',
-  minHeight: '100%',
-  flexDirection: 'column'
-});
-var mainContainerStyles = css({
-  display: 'flex',
-  flex: '1 1 auto'
-});
-var navigationStyles = css({
-  position: 'relative',
-  zIndex: 2
-});
+var styles = {
+  banner: "_1bsb1osq _kqsw1n9t",
+  bannerContainer: "_16jlkb7n _1o9zidpf _i0dl1wug _v564evma _1bsb1osq _kqswh2mm _1pby11wp",
+  pageContent: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _kqswh2mm _1pbykb7n",
+  wrapper: "_1e0c1txw _1bsb1osq _1tke1osq _2lx21bp4",
+  mainContainer: "_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw",
+  navigation: "_kqswh2mm _1pbycs5v"
+};
 
 /**
  * __Page__
@@ -56,24 +31,24 @@ var Page = function Page(_ref) {
     navigation = _ref.navigation,
     children = _ref.children,
     testId = _ref.testId;
-  return jsx("div", {
-    css: wrapperStyles,
-    "data-testid": testId
-  }, banner ? jsx("div", {
-    css: bannerContainerStyles,
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([styles.wrapper])
+  }, banner ? /*#__PURE__*/React.createElement("div", {
     style: {
       height: isBannerOpen ? "".concat(bannerHeight, "px") : '0'
     },
     "aria-hidden": !isBannerOpen,
-    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined
-  }, jsx("div", {
-    css: bannerStyles
-  }, banner)) : null, jsx("div", {
-    css: mainContainerStyles
-  }, jsx("div", {
-    css: navigationStyles
-  }, navigation), jsx("div", {
-    css: pageContentStyles
+    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined,
+    className: ax([styles.bannerContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.banner])
+  }, banner)) : null, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.mainContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.navigation])
+  }, navigation), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.pageContent])
   }, children)));
 };
 export default Page;

package/dist/types/grid-column.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { GridColumnProps } from './types';
 /**
  * __Grid column context__
@@ -16,5 +15,5 @@ export declare const GridColumnContext: import("react").Context<{
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
  */
-declare const GridColumn: ({ medium, children, testId }: GridColumnProps) => jsx.JSX.Element;
+declare const GridColumn: ({ medium, children, testId }: GridColumnProps) => JSX.Element;
 export default GridColumn;

package/dist/types/grid.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { GridProps } from './types';
 /**
  * __Grid__
@@ -10,4 +10,4 @@ import type { GridProps } from './types';
  *
  * @internal
  */
-export declare const Grid: ({ layout, testId, children }: GridProps) => jsx.JSX.Element;
+export declare const Grid: ({ layout, testId, children }: GridProps) => JSX.Element;

package/dist/types/page.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { PageProps } from './types';
 /**
  * __Page__
@@ -14,5 +10,5 @@ import type { PageProps } from './types';
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
  */
-declare const Page: ({ isBannerOpen, bannerHeight, banner, navigation, children, testId, }: PageProps) => jsx.JSX.Element;
+declare const Page: ({ isBannerOpen, bannerHeight, banner, navigation, children, testId, }: PageProps) => JSX.Element;
 export default Page;

package/dist/types-ts4.5/grid-column.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { GridColumnProps } from './types';
 /**
  * __Grid column context__
@@ -16,5 +15,5 @@ export declare const GridColumnContext: import("react").Context<{
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
  */
-declare const GridColumn: ({ medium, children, testId }: GridColumnProps) => jsx.JSX.Element;
+declare const GridColumn: ({ medium, children, testId }: GridColumnProps) => JSX.Element;
 export default GridColumn;

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { GridProps } from './types';
 /**
  * __Grid__
@@ -10,4 +10,4 @@ import type { GridProps } from './types';
  *
  * @internal
  */
-export declare const Grid: ({ layout, testId, children }: GridProps) => jsx.JSX.Element;
+export declare const Grid: ({ layout, testId, children }: GridProps) => JSX.Element;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { PageProps } from './types';
 /**
  * __Page__
@@ -14,5 +10,5 @@ import type { PageProps } from './types';
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
  */
-declare const Page: ({ isBannerOpen, bannerHeight, banner, navigation, children, testId, }: PageProps) => jsx.JSX.Element;
+declare const Page: ({ isBannerOpen, bannerHeight, banner, navigation, children, testId, }: PageProps) => JSX.Element;
 export default Page;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page",
-	"version": "13.0.0",
+	"version": "14.0.1",
 	"description": "A page layout organizes sections on a page using a grid and grid columns.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,8 +40,7 @@
 					}
 				]
 			}
-		},
-		"runReact18": true
+		}
 	},
 	"af:exports": {
 		"./types": "./src/types.tsx",
@@ -52,25 +51,25 @@
 	},
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "*",
-		"@af/integration-testing": "*",
-		"@atlaskit/banner": "^13.0.0",
-		"@atlaskit/code": "^16.0.0",
-		"@atlaskit/docs": "*",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/banner": "^14.0.0",
+		"@atlaskit/code": "^17.2.0",
+		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^24.0.0",
-		"@atlaskit/link": "^3.0.0",
-		"@atlaskit/primitives": "^14.0.0",
-		"@atlaskit/section-message": "*",
-		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^4.0.0",
-		"@atlaskit/visual-regression": "*",
+		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/section-message": "^8.2.0",
+		"@atlaskit/tokens": "^5.5.0",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
@@ -93,7 +92,7 @@
 			"analytics": "analytics-next",
 			"styling": [
 				"static",
-				"emotion"
+				"compiled"
 			],
 			"deprecation": "no-deprecated-imports",
 			"design-system": "v1"