@atlaskit/panel 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/panel
 
+## 0.9.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.8.1
+
+### Patch Changes
+
+- [`8e64ed34245`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e64ed34245) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/cjs/components/Panel/Panel.js

@@ -1,45 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _PanelStateless = _interopRequireDefault(require("./PanelStateless"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var PanelState = function PanelState(_ref) {
   var _ref$isDefaultExpande = _ref.isDefaultExpanded,
-      isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
-      children = _ref.children,
-      header = _ref.header;
-
+    isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+    children = _ref.children,
+    header = _ref.header;
   var _useState = (0, _react.useState)(isDefaultExpanded),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isExpanded = _useState2[0],
-      setisExpanded = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isExpanded = _useState2[0],
+    setisExpanded = _useState2[1];
   var handleChange = function handleChange() {
     setisExpanded(!isExpanded);
   };
-
   return /*#__PURE__*/_react.default.createElement(_PanelStateless.default, {
     header: header,
     isExpanded: isExpanded,
     onChange: handleChange
   }, children);
 };
-
 var _default = PanelState;
 exports.default = _default;

package/dist/cjs/components/Panel/PanelStateless.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
-
 var _reactIntlNext = require("react-intl-next");
-
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
-
 var styles = _interopRequireWildcard(require("./styledPanel"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var i18n = (0, _reactIntlNext.defineMessages)({
   collapse: {
     id: 'bitbucket.panel-collapse.message',
@@ -39,13 +27,12 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     description: 'Label on the panel to signal that the user can expand the panel.'
   }
 });
-
 var PanelStateless = function PanelStateless(_ref) {
   var children = _ref.children,
-      header = _ref.header,
-      _ref$isExpanded = _ref.isExpanded,
-      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
-      onChange = _ref.onChange;
+    header = _ref.header,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    onChange = _ref.onChange;
   var intl = (0, _reactIntlNext.useIntl)();
   var i18nExpandText = intl.formatMessage(i18n.expand);
   var i18nCollapseText = intl.formatMessage(i18n.collapse);
@@ -71,6 +58,5 @@ var PanelStateless = function PanelStateless(_ref) {
     className: "panel-content"
   }, children));
 };
-
 var _default = PanelStateless;
 exports.default = _default;

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
     return _Panel.default;
   }
 });
-
 var _Panel = _interopRequireDefault(require("./Panel"));
-
 var _PanelStateless = _interopRequireDefault(require("./PanelStateless"));

package/dist/cjs/components/Panel/styledPanel.js

@@ -1,43 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PanelWrapper = exports.PanelHeader = exports.ButtonWrapper = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _reactFocusWithin = require("react-focus-within");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _theme = require("@atlaskit/theme");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var transition = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  transition: all 200ms ease-in-out;\n"])));
-
-var PanelWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", "px;\n"])), (0, _theme.gridSize)() * 2);
-
+var PanelWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.PanelWrapper = PanelWrapper;
-
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  left: 0;\n  line-height: 0;\n  opacity: ", ";\n  position: absolute;\n  ", ";\n\n  /* IE 11 needs these vertical positioning rules - the flexbox\n  behavior for absolute-positioned children is not up to spec.\n  https://googlechrome.github.io/samples/css-flexbox-abspos/ */\n  top: 50%;\n  transform: translateY(-50%);\n\n  button {\n    pointer-events: none;\n  }\n"])), function (_ref) {
   var isHidden = _ref.isHidden;
   return isHidden ? 0 : 1;
 }, transition);
-
 exports.ButtonWrapper = ButtonWrapper;
-var PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", "px;\n  display: flex;\n  left: -", "px;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  padding: 2px 0 2px ", "px;\n  position: relative;\n  ", ";\n  width: 100%;\n\n  ", " {\n    opacity: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n\n    ", " {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  display: flex;\n  left: -", "px;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  padding: ", " ", "\n    ", " ", ";\n  position: relative;\n  ", ";\n  width: 100%;\n\n  ", " {\n    opacity: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n\n    ", " {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.isFocused && _theme.colors.N20;
-}, _theme.borderRadius, (0, _theme.gridSize)() * 3, (0, _theme.gridSize)(), (0, _theme.gridSize)() * 2, (0, _theme.gridSize)() * 3, transition, ButtonWrapper, function (props) {
+}, "var(--ds-radius-100, 3px)", (0, _theme.gridSize)() * 3, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
   return props.isFocused && 1;
 }, _theme.colors.N20, ButtonWrapper));
 exports.PanelHeader = PanelHeader;

package/dist/cjs/i18n/cs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/da.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/de.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/en.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/en_GB.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/en_ZZ.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/es.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/fi.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/fr.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//French (France)
+var _default = {
+  'bitbucket.panel-collapse.message': 'réduire',
+  'bitbucket.panel-expand.message': 'développer'
+};
+exports.default = _default;

package/dist/cjs/i18n/hu.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/it.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/ja.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/ko.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/nb.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/nl.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -14,6 +14,6 @@ exports.default = void 0;
 //Dutch (Netherlands)
 var _default = {
   'bitbucket.panel-collapse.message': 'inklappen',
-  'bitbucket.panel-expand.message': 'uitklappen'
+  'bitbucket.panel-expand.message': 'Uitvouwen'
 };
 exports.default = _default;

package/dist/cjs/i18n/pl.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/pt_BR.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/ru.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/sv.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/th.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/tr.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Turkish (Turkey)
+var _default = {
+  'bitbucket.panel-collapse.message': 'daralt',
+  'bitbucket.panel-expand.message': 'genişlet'
+};
+exports.default = _default;

package/dist/cjs/i18n/uk.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Ukrainian (Ukraine)
+var _default = {
+  'bitbucket.panel-collapse.message': 'згорнути',
+  'bitbucket.panel-expand.message': 'розгорнути'
+};
+exports.default = _default;

package/dist/cjs/i18n/vi.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/zh.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/i18n/zh_TW.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +16,6 @@ Object.defineProperty(exports, "default", {
     return _Panel.default;
   }
 });
-
 var _Panel = _interopRequireWildcard(require("./components/Panel"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/panel",
-	"version": "0.8.0"
+	"version": "0.9.0"
 }

package/dist/es2019/components/Panel/Panel.js

@@ -1,22 +1,18 @@
 import React, { useState } from 'react';
 import PanelStateless from './PanelStateless';
-
 const PanelState = ({
   isDefaultExpanded = false,
   children,
   header
 }) => {
   const [isExpanded, setisExpanded] = useState(isDefaultExpanded);
-
   const handleChange = () => {
     setisExpanded(!isExpanded);
   };
-
   return /*#__PURE__*/React.createElement(PanelStateless, {
     header: header,
     isExpanded: isExpanded,
     onChange: handleChange
   }, children);
 };
-
 export default PanelState;

package/dist/es2019/components/Panel/PanelStateless.js

@@ -17,7 +17,6 @@ const i18n = defineMessages({
     description: 'Label on the panel to signal that the user can expand the panel.'
   }
 });
-
 const PanelStateless = ({
   children,
   header,
@@ -47,5 +46,4 @@ const PanelStateless = ({
     className: "panel-content"
   }, children));
 };
-
 export default PanelStateless;

package/dist/es2019/components/Panel/styledPanel.js

@@ -1,13 +1,14 @@
 import { withFocusWithin } from 'react-focus-within';
-import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import styled, { css } from 'styled-components';
 
-import { borderRadius, colors, gridSize } from '@atlaskit/theme';
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { colors, gridSize } from '@atlaskit/theme';
 const transition = css`
   transition: all 200ms ease-in-out;
 `;
 export const PanelWrapper = styled.div`
-  margin: 0 auto ${gridSize() * 2}px;
+  margin: 0 auto ${"var(--ds-space-200, 16px)"};
 `;
 export const ButtonWrapper = styled.div`
   left: 0;
@@ -31,12 +32,13 @@ export const ButtonWrapper = styled.div`
 export const PanelHeader = withFocusWithin(styled.div`
   align-items: center;
   background-color: ${props => props.isFocused && colors.N20};
-  border-radius: ${borderRadius}px;
+  border-radius: ${"var(--ds-radius-100, 3px)"};
   display: flex;
   left: -${gridSize() * 3}px;
-  margin-bottom: ${gridSize()}px;
-  margin-top: ${gridSize() * 2}px;
-  padding: 2px 0 2px ${gridSize() * 3}px;
+  margin-bottom: ${"var(--ds-space-100, 8px)"};
+  margin-top: ${"var(--ds-space-200, 16px)"};
+  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-0, 0px)"}
+    ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-300, 24px)"};
   position: relative;
   ${transition};
   width: 100%;

package/dist/es2019/i18n/cs.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/da.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/de.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/en.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/en_GB.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/en_ZZ.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/es.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *

package/dist/es2019/i18n/fi.js

@@ -1,3 +1,4 @@
+/* prettier-ignore */
 /**
  * NOTE:
  *