@atlaskit/right-side-panel 2.0.2 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/right-side-panel
 
+## 3.0.0
+
+### Major Changes
+
+- [#142581](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142581)
+  [`94d88942d9b95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94d88942d9b95) -
+  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/right-side-panel`, 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).
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/components/RightSidePanel/constants.js

@@ -3,7 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transitionTimingFunction = exports.transitionDurationMs = exports.panelWidth = void 0;
-var transitionDurationMs = exports.transitionDurationMs = 220;
-var transitionTimingFunction = exports.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-var panelWidth = exports.panelWidth = 368;
+exports.transitionTimingFunction = void 0;
+var transitionTimingFunction = exports.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';

package/dist/cjs/components/RightSidePanel/index.js

@@ -16,29 +16,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _exenv = require("exenv");
 var _reactDom = require("react-dom");
 var _reactTransitionGroup = require("react-transition-group");
-var _constants = require("./constants");
 var _styled = require("./styled");
 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 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var defaultStyle = {
-  transition: "width ".concat(_constants.transitionDurationMs, "ms,\n  flex ").concat(_constants.transitionDurationMs, "ms"),
-  width: "0",
-  flex: "0 0 0"
-};
-var transitionStyles = {
-  entered: {
-    width: "".concat(_constants.panelWidth, "px"),
-    flex: "0 0 ".concat(_constants.panelWidth, "px")
-  },
-  exited: {
-    width: 0,
-    flex: "0 0 0"
-  }
-};
 var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component) {
   function RightSidePanel() {
     var _this;
@@ -82,7 +64,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
         onCloseAnimationFinished = _this$props.onCloseAnimationFinished;
       return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
         in: isOpen,
-        timeout: _constants.transitionDurationMs,
+        timeout: _styled.transitionDurationMs,
         mountOnEnter: mountOnEnter,
         unmountOnExit: unmountOnExit,
         appear: !skipAnimationOnMount,
@@ -92,7 +74,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
         onExited: onCloseAnimationFinished
       }, function (state) {
         return /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawer, {
-          style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+          transitionState: state
         }, /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawerContent, null, children));
       }), Container);
     }

package/dist/cjs/components/RightSidePanel/styled.compiled.css

@@ -0,0 +1,14 @@
+
+._kkes1j74{flex:var(--_14jqjno)}
+._1kl75djz{border-left:var(--_1na4za0)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bsb1xdr{width:var(--_h7eijm)}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._i0dlf1ug{flex-basis:0%}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/components/RightSidePanel/styled.js

@@ -1,43 +1,54 @@
+/* styled.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.RightSidePanelDrawerContent = exports.RightSidePanelDrawer = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _constants = require("./constants");
-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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var RightSidePanelDrawer = exports.RightSidePanelDrawer = _styled.default.div({
-  // 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.panelWidth, "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
-  flex: "0 0 ".concat(_constants.panelWidth, "px"),
-  position: 'relative',
-  overflow: 'hidden'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var RightSidePanelDrawerContent = exports.RightSidePanelDrawerContent = _styled.default.div({
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  boxSizing: 'border-box',
-  flex: 1,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderLeft: "3px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")),
-  overflow: 'hidden',
-  flexDirection: 'column',
-  // 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.panelWidth, "px"),
-  height: '100%',
-  position: 'fixed'
-});
+exports.transitionDurationMs = exports.RightSidePanelDrawerContent = exports.RightSidePanelDrawer = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+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; }
+var PANEL_WIDTH = 368;
+var transitionDurationMs = exports.transitionDurationMs = 220;
+var rightSidePanelDrawerStyles = null;
+var rightSidePanelDrawerTransitionStyles = {
+  entered: {
+    width: "".concat(PANEL_WIDTH, "px"),
+    flex: "0 0 ".concat(PANEL_WIDTH, "px")
+  },
+  exited: {
+    width: 0,
+    flex: "0 0 0"
+  }
+};
+var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
+  var transitionState = _ref.transitionState,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kkes1j74 _1reo15vq _18m915vq _1bsb1xdr _kqswh2mm"]),
+    style: _objectSpread(_objectSpread({
+      transition: "width ".concat(transitionDurationMs, "ms, flex ").concat(transitionDurationMs, "ms"),
+      width: "0",
+      flex: "0 0 0"
+    }, rightSidePanelDrawerTransitionStyles[transitionState]), {}, {
+      "--_h7eijm": (0, _runtime.ix)("".concat(PANEL_WIDTH, "px")),
+      "--_14jqjno": (0, _runtime.ix)("0 0 ".concat(PANEL_WIDTH, "px"))
+    })
+  }, children);
+};
+var rightSidePanelDrawerContentStyles = null;
+var RightSidePanelDrawerContent = exports.RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
+    style: {
+      "--_1na4za0": (0, _runtime.ix)("3px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))),
+      "--_h7eijm": (0, _runtime.ix)("".concat(PANEL_WIDTH, "px"))
+    }
+  }, children);
+};

package/dist/cjs/components/styled.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}

package/dist/cjs/components/styled.js

@@ -1,3 +1,4 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FlexContainer = exports.ContentWrapper = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var FlexContainer = exports.FlexContainer = _styled.default.div({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ContentWrapper = exports.ContentWrapper = _styled.default.div({
-  position: 'relative',
-  minWidth: 0,
-  flex: '1 1 auto',
-  overflowX: 'hidden'
-});
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var flexContainerStyles = null;
+var FlexContainer = exports.FlexContainer = function FlexContainer(_ref) {
+  var id = _ref.id,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }, children);
+};
+var contentWrapperStyles = null;
+var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _kqswh2mm _1ul9idpf _1reo15vq"])
+  }, children);
+};

package/dist/es2019/components/RightSidePanel/constants.js

@@ -1,3 +1 @@
-export const transitionDurationMs = 220;
-export const transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-export const panelWidth = 368;
+export const transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';

package/dist/es2019/components/RightSidePanel/index.js

@@ -4,24 +4,7 @@ import { Component } from 'react';
 import { canUseDOM } from 'exenv';
 import { createPortal } from 'react-dom';
 import { Transition } from 'react-transition-group';
-import { transitionDurationMs, panelWidth } from './constants';
-import { RightSidePanelDrawer, RightSidePanelDrawerContent } from './styled';
-const defaultStyle = {
-  transition: `width ${transitionDurationMs}ms,
-  flex ${transitionDurationMs}ms`,
-  width: `0`,
-  flex: `0 0 0`
-};
-const transitionStyles = {
-  entered: {
-    width: `${panelWidth}px`,
-    flex: `0 0 ${panelWidth}px`
-  },
-  exited: {
-    width: 0,
-    flex: `0 0 0`
-  }
-};
+import { RightSidePanelDrawer, RightSidePanelDrawerContent, transitionDurationMs } from './styled';
 export class RightSidePanel extends Component {
   constructor(...args) {
     super(...args);
@@ -59,12 +42,7 @@ export class RightSidePanel extends Component {
       onEntered: onOpenAnimationFinished,
       onExited: onCloseAnimationFinished
     }, state => /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
-      style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ...defaultStyle,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ...transitionStyles[state]
-      }
+      transitionState: state
     }, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, null, children))), Container);
   }
   render() {

package/dist/es2019/components/RightSidePanel/styled.compiled.css

@@ -0,0 +1,16 @@
+
+._1kl71osx{border-left:3px solid var(--ds-border,#ebecf0)}._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bsb1feq{width:23pc}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._i0dlf1ug{flex-basis:0%}
+._i0dlorbt{flex-basis:368px}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/components/RightSidePanel/styled.js

@@ -1,33 +1,37 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import * as colors from '@atlaskit/theme/colors';
-import { panelWidth } from './constants';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const RightSidePanelDrawer = styled.div({
-  // 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: `${panelWidth}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
-  flex: `0 0 ${panelWidth}px`,
-  position: 'relative',
-  overflow: 'hidden'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const RightSidePanelDrawerContent = styled.div({
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  boxSizing: 'border-box',
-  flex: 1,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderLeft: `3px solid ${`var(--ds-border, ${colors.N30})`}`,
-  overflow: 'hidden',
-  flexDirection: 'column',
-  // 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: `${panelWidth}px`,
-  height: '100%',
-  position: 'fixed'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { N30 } from '@atlaskit/theme/colors';
+const PANEL_WIDTH = 368;
+export const transitionDurationMs = 220;
+const rightSidePanelDrawerStyles = null;
+const rightSidePanelDrawerTransitionStyles = {
+  entered: {
+    width: `${PANEL_WIDTH}px`,
+    flex: `0 0 ${PANEL_WIDTH}px`
+  },
+  exited: {
+    width: 0,
+    flex: `0 0 0`
+  }
+};
+export const RightSidePanelDrawer = ({
+  transitionState,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    transition: `width ${transitionDurationMs}ms, flex ${transitionDurationMs}ms`,
+    width: `0`,
+    flex: `0 0 0`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ...rightSidePanelDrawerTransitionStyles[transitionState]
+  },
+  className: ax(["_16jlidpf _1o9zidpf _i0dlorbt _1reo15vq _18m915vq _1bsb1feq _kqswh2mm"])
+}, children);
+const rightSidePanelDrawerContentStyles = null;
+export const RightSidePanelDrawerContent = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71osx _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1feq _4t3i1osq _kqsw1n9t"])
+}, children);

package/dist/es2019/components/styled.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}

package/dist/es2019/components/styled.js

@@ -1,19 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const FlexContainer = styled.div({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ContentWrapper = styled.div({
-  position: 'relative',
-  minWidth: 0,
-  flex: '1 1 auto',
-  overflowX: 'hidden'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const flexContainerStyles = null;
+export const FlexContainer = ({
+  id,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: ax(["_1e0c1txw"])
+}, children);
+const contentWrapperStyles = null;
+export const ContentWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _kqswh2mm _1ul9idpf _1reo15vq"])
+}, children);

package/dist/esm/components/RightSidePanel/constants.js

@@ -1,3 +1 @@
-export var transitionDurationMs = 220;
-export var transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-export var panelWidth = 368;
+export var transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';

package/dist/esm/components/RightSidePanel/index.js

@@ -4,8 +4,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
@@ -13,23 +11,7 @@ import { Component } from 'react';
 import { canUseDOM } from 'exenv';
 import { createPortal } from 'react-dom';
 import { Transition } from 'react-transition-group';
-import { transitionDurationMs, panelWidth } from './constants';
-import { RightSidePanelDrawer, RightSidePanelDrawerContent } from './styled';
-var defaultStyle = {
-  transition: "width ".concat(transitionDurationMs, "ms,\n  flex ").concat(transitionDurationMs, "ms"),
-  width: "0",
-  flex: "0 0 0"
-};
-var transitionStyles = {
-  entered: {
-    width: "".concat(panelWidth, "px"),
-    flex: "0 0 ".concat(panelWidth, "px")
-  },
-  exited: {
-    width: 0,
-    flex: "0 0 0"
-  }
-};
+import { RightSidePanelDrawer, RightSidePanelDrawerContent, transitionDurationMs } from './styled';
 export var RightSidePanel = /*#__PURE__*/function (_Component) {
   function RightSidePanel() {
     var _this;
@@ -83,7 +65,7 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
         onExited: onCloseAnimationFinished
       }, function (state) {
         return /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
-          style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+          transitionState: state
         }, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, null, children));
       }), Container);
     }

package/dist/esm/components/RightSidePanel/styled.compiled.css

@@ -0,0 +1,14 @@
+
+._kkes1j74{flex:var(--_14jqjno)}
+._1kl75djz{border-left:var(--_1na4za0)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bsb1xdr{width:var(--_h7eijm)}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._i0dlf1ug{flex-basis:0%}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/components/RightSidePanel/styled.js

@@ -1,33 +1,47 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import * as colors from '@atlaskit/theme/colors';
-import { panelWidth } from './constants';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var RightSidePanelDrawer = styled.div({
-  // 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(panelWidth, "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
-  flex: "0 0 ".concat(panelWidth, "px"),
-  position: 'relative',
-  overflow: 'hidden'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var RightSidePanelDrawerContent = styled.div({
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  boxSizing: 'border-box',
-  flex: 1,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderLeft: "3px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")),
-  overflow: 'hidden',
-  flexDirection: 'column',
-  // 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(panelWidth, "px"),
-  height: '100%',
-  position: 'fixed'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { N30 } from '@atlaskit/theme/colors';
+var PANEL_WIDTH = 368;
+export var transitionDurationMs = 220;
+var rightSidePanelDrawerStyles = null;
+var rightSidePanelDrawerTransitionStyles = {
+  entered: {
+    width: "".concat(PANEL_WIDTH, "px"),
+    flex: "0 0 ".concat(PANEL_WIDTH, "px")
+  },
+  exited: {
+    width: 0,
+    flex: "0 0 0"
+  }
+};
+export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
+  var transitionState = _ref.transitionState,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kkes1j74 _1reo15vq _18m915vq _1bsb1xdr _kqswh2mm"]),
+    style: _objectSpread(_objectSpread({
+      transition: "width ".concat(transitionDurationMs, "ms, flex ").concat(transitionDurationMs, "ms"),
+      width: "0",
+      flex: "0 0 0"
+    }, rightSidePanelDrawerTransitionStyles[transitionState]), {}, {
+      "--_h7eijm": ix("".concat(PANEL_WIDTH, "px")),
+      "--_14jqjno": ix("0 0 ".concat(PANEL_WIDTH, "px"))
+    })
+  }, children);
+};
+var rightSidePanelDrawerContentStyles = null;
+export var RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
+    style: {
+      "--_1na4za0": ix("3px solid ".concat("var(--ds-border, ".concat(N30, ")"))),
+      "--_h7eijm": ix("".concat(PANEL_WIDTH, "px"))
+    }
+  }, children);
+};

package/dist/esm/components/styled.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}

package/dist/esm/components/styled.js

@@ -1,19 +1,20 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var FlexContainer = styled.div({
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ContentWrapper = styled.div({
-  position: 'relative',
-  minWidth: 0,
-  flex: '1 1 auto',
-  overflowX: 'hidden'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var flexContainerStyles = null;
+export var FlexContainer = function FlexContainer(_ref) {
+  var id = _ref.id,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: ax(["_1e0c1txw"])
+  }, children);
+};
+var contentWrapperStyles = null;
+export var ContentWrapper = function ContentWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _kqswh2mm _1ul9idpf _1reo15vq"])
+  }, children);
+};

package/dist/types/components/RightSidePanel/constants.d.ts

@@ -1,3 +1 @@
-export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction = "cubic-bezier(0.2, 0, 0, 1)";
-export declare const panelWidth = 368;

package/dist/types/components/RightSidePanel/styled.d.ts

@@ -1,9 +1,14 @@
-/// <reference types="react" />
-export declare const RightSidePanelDrawer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const RightSidePanelDrawerContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { TransitionStatus } from '.';
+export declare const transitionDurationMs = 220;
+export declare const RightSidePanelDrawer: ({ transitionState, children, }: {
+    transitionState: TransitionStatus;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const RightSidePanelDrawerContent: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types/components/styled.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
-export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export declare const FlexContainer: ({ id, children }: {
+    id: string;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const ContentWrapper: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types-ts4.5/components/RightSidePanel/constants.d.ts

@@ -1,3 +1 @@
-export declare const transitionDurationMs = 220;
 export declare const transitionTimingFunction = "cubic-bezier(0.2, 0, 0, 1)";
-export declare const panelWidth = 368;

package/dist/types-ts4.5/components/RightSidePanel/styled.d.ts

@@ -1,9 +1,14 @@
-/// <reference types="react" />
-export declare const RightSidePanelDrawer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const RightSidePanelDrawerContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { TransitionStatus } from '.';
+export declare const transitionDurationMs = 220;
+export declare const RightSidePanelDrawer: ({ transitionState, children, }: {
+    transitionState: TransitionStatus;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const RightSidePanelDrawerContent: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types-ts4.5/components/styled.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
-export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export declare const FlexContainer: ({ id, children }: {
+    id: string;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const ContentWrapper: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/right-side-panel",
-	"version": "2.0.2",
+	"version": "3.0.0",
 	"description": "A cross-product right-side-panel component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
 		}
 	},
 	"sideEffects": [
-		"*.compiled.css"
+		"**/*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
@@ -36,9 +36,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/styled": "^11.0.0",
+		"@compiled/react": "^0.18.3",
 		"exenv": "^1.2.2",
 		"react-transition-group": "^4.4.1"
 	},
@@ -69,6 +69,9 @@
 			"design-tokens": [
 				"color",
 				"spacing"
+			],
+			"styling": [
+				"compiled"
 			]
 		}
 	}