@atlaskit/help 7.1.26 → 7.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/styled.js +2 -3
  3. package/dist/cjs/components/Article/WhatsNewArticle/styled.js +6 -6
  4. package/dist/cjs/components/Article/styled.js +1 -2
  5. package/dist/cjs/components/ArticlesList/ArticlesListItem/styled.js +4 -4
  6. package/dist/cjs/components/ArticlesList/styled.js +1 -2
  7. package/dist/cjs/components/HelpContentButton/styled.js +4 -5
  8. package/dist/cjs/components/RelatedArticles/styled.js +3 -3
  9. package/dist/cjs/components/Search/SearchInput/styled.js +2 -3
  10. package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js +4 -4
  11. package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js +2 -3
  12. package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js +3 -3
  13. package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js +2 -3
  14. package/dist/cjs/components/WhatsNew/WhatsNewResults/styled.js +3 -3
  15. package/dist/cjs/components/styled.js +2 -3
  16. package/dist/cjs/util/styled.js +2 -2
  17. package/dist/cjs/version.json +1 -1
  18. package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/styled.js +2 -3
  19. package/dist/es2019/components/Article/WhatsNewArticle/styled.js +8 -8
  20. package/dist/es2019/components/Article/styled.js +1 -2
  21. package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js +7 -7
  22. package/dist/es2019/components/ArticlesList/styled.js +1 -2
  23. package/dist/es2019/components/HelpContentButton/styled.js +6 -7
  24. package/dist/es2019/components/RelatedArticles/styled.js +5 -5
  25. package/dist/es2019/components/Search/SearchInput/styled.js +8 -9
  26. package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js +4 -5
  27. package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js +2 -3
  28. package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js +5 -4
  29. package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js +2 -4
  30. package/dist/es2019/components/WhatsNew/WhatsNewResults/styled.js +3 -3
  31. package/dist/es2019/components/styled.js +1 -2
  32. package/dist/es2019/util/styled.js +4 -4
  33. package/dist/es2019/version.json +1 -1
  34. package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/styled.js +2 -3
  35. package/dist/esm/components/Article/WhatsNewArticle/styled.js +7 -7
  36. package/dist/esm/components/Article/styled.js +1 -2
  37. package/dist/esm/components/ArticlesList/ArticlesListItem/styled.js +5 -5
  38. package/dist/esm/components/ArticlesList/styled.js +1 -2
  39. package/dist/esm/components/HelpContentButton/styled.js +4 -5
  40. package/dist/esm/components/RelatedArticles/styled.js +4 -4
  41. package/dist/esm/components/Search/SearchInput/styled.js +2 -3
  42. package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js +4 -5
  43. package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js +2 -3
  44. package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js +4 -4
  45. package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js +2 -4
  46. package/dist/esm/components/WhatsNew/WhatsNewResults/styled.js +3 -3
  47. package/dist/esm/components/styled.js +2 -3
  48. package/dist/esm/util/styled.js +2 -2
  49. package/dist/esm/version.json +1 -1
  50. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/help
2
2
 
3
+ ## 7.1.27
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ad5cbfa5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad5cbfa5a71) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
8
+
3
9
  ## 7.1.26
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/Article/HelpArticle/WasHelpfulForm/styled.js CHANGED
@@ -8,14 +8,13 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.ArticleFeedbackText = exports.ArticleFeedbackContainer = exports.ArticleFeedbackAnswerWrapper = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
- var _constants = require("@atlaskit/theme/constants");
12
11
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
12
  var _templateObject, _templateObject2, _templateObject3;
14
13
  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); }
15
14
  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; }
16
15
  var ArticleFeedbackContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
17
16
  exports.ArticleFeedbackContainer = ArticleFeedbackContainer;
18
- var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.75rem;\n font-weight: bold;\n color: ", ";\n line-height: ", "px;\n position: relative;\n display: inline-block;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() * 4);
17
+ var ArticleFeedbackText = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.75rem;\n font-weight: bold;\n color: ", ";\n line-height: ", ";\n position: relative;\n display: inline-block;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-font-lineHeight-500, 32px)");
19
18
  exports.ArticleFeedbackText = ArticleFeedbackText;
20
- var ArticleFeedbackAnswerWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
19
+ var ArticleFeedbackAnswerWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: ", ";\n"])), "var(--ds-space-200, 16px)");
21
20
  exports.ArticleFeedbackAnswerWrapper = ArticleFeedbackAnswerWrapper;
package/dist/cjs/components/Article/WhatsNewArticle/styled.js CHANGED
@@ -13,15 +13,15 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
14
14
  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); }
15
15
  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; }
16
- var WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n vertical-align: middle;\n padding-left: ", "px;\n line-height: ", "px;\n white-space: normal;\n overflow-x: hidden;\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 2.5);
16
+ var WhatsNewTypeTitle = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n vertical-align: middle;\n padding-left: ", ";\n line-height: ", ";\n white-space: normal;\n overflow-x: hidden;\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), (0, _constants.fontSize)(), "var(--ds-space-050, 4px)", "var(--ds-font-lineHeight-200, 20px)");
17
17
  exports.WhatsNewTypeTitle = WhatsNewTypeTitle;
18
- var WhatsNewIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n padding-bottom: ", "px;\n"])), (0, _constants.gridSize)());
18
+ var WhatsNewIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n padding-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
19
19
  exports.WhatsNewIconContainer = WhatsNewIconContainer;
20
- var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n white-space: normal;\n overflow-x: hidden;\n padding-bottom: ", "px;\n display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)());
20
+ var WhatsNewTitleText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n white-space: normal;\n overflow-x: hidden;\n padding-bottom: ", ";\n display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), "var(--ds-space-100, 8px)");
21
21
  exports.WhatsNewTitleText = WhatsNewTitleText;
22
- var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n white-space: normal;\n overflow-x: hidden;\n padding-bottom: ", "px;\n display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)());
22
+ var WhatsNewRelatedLinksTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n white-space: normal;\n overflow-x: hidden;\n padding-bottom: ", ";\n display: block;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSizeSmall)(), "var(--ds-space-100, 8px)");
23
23
  exports.WhatsNewRelatedLinksTitleText = WhatsNewRelatedLinksTitleText;
24
- var RelatedLinkContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", "px;\n"])), (0, _constants.gridSize)());
24
+ var RelatedLinkContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n"])), "var(--ds-space-100, 8px)");
25
25
  exports.RelatedLinkContainer = RelatedLinkContainer;
26
- var ExternalLinkIconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2);
26
+ var ExternalLinkIconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
27
27
  exports.ExternalLinkIconContainer = ExternalLinkIconContainer;
package/dist/cjs/components/Article/styled.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.ArticleContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  var _templateObject;
12
- var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px ", "px;\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n background-color: ", ";\n left: 100%;\n flex: 1;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n z-index: 2;\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 3, "var(--ds-surface, #FFFFFF)");
11
+ var ArticleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " ", ";\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n background-color: ", ";\n left: 100%;\n flex: 1;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n z-index: 2;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-surface, #FFFFFF)");
13
12
  exports.ArticleContainer = ArticleContainer;
package/dist/cjs/components/ArticlesList/ArticlesListItem/styled.js CHANGED
@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
16
16
  var ArticlesListItemWrapper = _styled.default.a({
17
17
  position: "relative",
18
18
  boxSizing: "border-box",
19
- padding: "".concat((0, _constants.gridSize)(), "px"),
19
+ padding: "var(--ds-space-100, 8px)",
20
20
  display: "block",
21
21
  textDecoration: "none",
22
22
  cursor: "pointer",
@@ -43,11 +43,11 @@ var ArticlesListItemWrapper = _styled.default.a({
43
43
  exports.ArticlesListItemWrapper = ArticlesListItemWrapper;
44
44
  var ArticlesListItemContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n white-space: nowrap;\n"])));
45
45
  exports.ArticlesListItemContainer = ArticlesListItemContainer;
46
- var ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: bold;\n font-size: 11px;\n line-height: ", "px;\n color: ", ";\n padding-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.gridSize)() / 2);
46
+ var ArticlesListItemTypeTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: bold;\n font-size: 11px;\n line-height: ", ";\n color: ", ";\n padding-bottom: ", ";\n"])), "var(--ds-font-lineHeight-100, 16px)", "var(--ds-text-subtlest, ".concat(colors.N200, ")"), "var(--ds-space-050, 4px)");
47
47
  exports.ArticlesListItemTypeTitle = ArticlesListItemTypeTitle;
48
48
  var ArticlesListItemLinkIcon = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n align-self: auto;\n padding-inline-start: 5px;\n vertical-align: middle;\n"])));
49
49
  exports.ArticlesListItemLinkIcon = ArticlesListItemLinkIcon;
50
- var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n display: inline-block;\n line-height: ", "px;\n white-space: normal;\n overflow-x: hidden;\n margin-bottom: ", "px;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)());
50
+ var ArticlesListItemTitleText = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n display: inline-block;\n line-height: ", ";\n white-space: normal;\n overflow-x: hidden;\n margin-bottom: ", ";\n"])), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-space-100, 8px)");
51
51
  exports.ArticlesListItemTitleText = ArticlesListItemTitleText;
52
- var ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n line-height: ", "px;\n color: ", ";\n margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text-subtle, ".concat(colors.N400, ")"));
52
+ var ArticlesListItemDescription = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n line-height: ", ";\n color: ", ";\n margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text-subtle, ".concat(colors.N400, ")"));
53
53
  exports.ArticlesListItemDescription = ArticlesListItemDescription;
package/dist/cjs/components/ArticlesList/styled.js CHANGED
@@ -8,7 +8,6 @@ exports.truncate = exports.ToggleShowMoreArticlesContainer = exports.ArticlesLis
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _core = require("@emotion/core");
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
- var _constants = require("@atlaskit/theme/constants");
12
11
  var _templateObject, _templateObject2, _templateObject3;
13
12
  var truncate = function truncate() {
14
13
  var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
@@ -17,5 +16,5 @@ var truncate = function truncate() {
17
16
  exports.truncate = truncate;
18
17
  var ArticlesListContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
19
18
  exports.ArticlesListContainer = ArticlesListContainer;
20
- var ToggleShowMoreArticlesContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0;\n span {\n margin: 0;\n }\n"])), (0, _constants.gridSize)());
19
+ var ToggleShowMoreArticlesContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " 0;\n span {\n margin: 0;\n }\n"])), "var(--ds-space-100, 8px)");
21
20
  exports.ToggleShowMoreArticlesContainer = ToggleShowMoreArticlesContainer;
package/dist/cjs/components/HelpContentButton/styled.js CHANGED
@@ -9,17 +9,16 @@ exports.HelpContentButtonText = exports.HelpContentButtonIcon = exports.HelpCont
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
12
- var _constants = require("@atlaskit/theme/constants");
13
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
14
13
  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); }
15
14
  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; }
16
- var HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n cursor: pointer;\n width: calc(100% - ", "px);\n color: ", ";\n padding: ", "px;\n border-radius: 3px;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none;\n outline: none;\n outline-offset: none;\n color: ", ";\n }\n\n &:focus {\n box-shadow: ", " 0 0 0 2px inset;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), (0, _constants.gridSize)() * 2, "var(--ds-text-subtle, ".concat(colors.N600, ")"), _constants.gridSize, "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
15
+ var HelpContentButtonContainer = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n cursor: pointer;\n width: calc(100% - ", ");\n color: ", ";\n padding: ", ";\n border-radius: 3px;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none;\n outline: none;\n outline-offset: none;\n color: ", ";\n }\n\n &:focus {\n box-shadow: ", " 0 0 0 2px inset;\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
17
16
  exports.HelpContentButtonContainer = HelpContentButtonContainer;
18
17
  var HelpContentButtonIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n position: relative;\n\n & span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])));
19
18
  exports.HelpContentButtonIcon = HelpContentButtonIcon;
20
- var HelpContentButtonText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n display: inline-block;\n vertical-align: middle;\n padding: 0 ", "px;\n box-sizing: border-box;\n"])), _constants.gridSize);
19
+ var HelpContentButtonText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n display: inline-block;\n vertical-align: middle;\n padding: 0 ", ";\n box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");
21
20
  exports.HelpContentButtonText = HelpContentButtonText;
22
- var HelpContentButtonExternalLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2);
21
+ var HelpContentButtonExternalLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n padding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
23
22
  exports.HelpContentButtonExternalLinkIcon = HelpContentButtonExternalLinkIcon;
24
- var HelpContentButtonExternalNotificationIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n margin-top: -", "px;\n padding-left: ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
23
+ var HelpContentButtonExternalNotificationIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n margin-top: calc(-1 * ", ");\n padding-left: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
25
24
  exports.HelpContentButtonExternalNotificationIcon = HelpContentButtonExternalNotificationIcon;
package/dist/cjs/components/RelatedArticles/styled.js CHANGED
@@ -22,15 +22,15 @@ var truncate = function truncate() {
22
22
  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: ", ";\n"])), width);
23
23
  };
24
24
  exports.truncate = truncate;
25
- var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.006em;\n padding: ", "px 0;\n"])), baseHeading(16, 20), "var(--ds-text, ".concat(colors.N800, ")"), (0, _constants.gridSize)() * 2);
25
+ var RelatedArticlesTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n color: ", ";\n font-weight: 600;\n letter-spacing: -0.006em;\n padding: ", " 0;\n"])), baseHeading(16, 20), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-200, 16px)");
26
26
 
27
27
  /**
28
28
  * Loading styled-components
29
29
  */
30
30
  exports.RelatedArticlesTitle = RelatedArticlesTitle;
31
- var LoadignRelatedArticleSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", "px;\n"])), (0, _constants.gridSize)());
31
+ var LoadignRelatedArticleSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
32
32
  exports.LoadignRelatedArticleSection = LoadignRelatedArticleSection;
33
33
  var LoadignRelatedArticleList = _styled.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n"])));
34
34
  exports.LoadignRelatedArticleList = LoadignRelatedArticleList;
35
- var LoadignRelatedArticleListItem = _styled.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: 100%;\n padding: ", "px;\n margin-bottom: ", "px;\n box-sizing: border-box;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
35
+ var LoadignRelatedArticleListItem = _styled.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
36
36
  exports.LoadignRelatedArticleListItem = LoadignRelatedArticleListItem;
package/dist/cjs/components/Search/SearchInput/styled.js CHANGED
@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.SearchInputContainer = exports.SearchIconContainer = exports.CloseButtonAndSpinnerContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  var _templateObject, _templateObject2, _templateObject3;
12
11
  var SearchInputContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n order: 0;\n flex: 0 1 auto;\n align-self: auto;\n width: 100%;\n box-sizing: border-box;\n"])));
13
12
  exports.SearchInputContainer = SearchInputContainer;
14
- var SearchIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n height: ", "px;\n padding-left: ", "px;\n\n & > span {\n padding-left: ", "px;\n height: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
13
+ var SearchIconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n padding-left: ", ";\n\n & > span {\n padding-left: ", ";\n height: ", ";\n width: ", ";\n box-sizing: border-box;\n }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
15
14
  exports.SearchIconContainer = SearchIconContainer;
16
- var CloseButtonAndSpinnerContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0;\n padding-right: ", "px;\n position: relative;\n white-space: nowrap;\n\n & > span {\n padding-right: ", "px;\n }\n\n & > button,\n & > span {\n display: inline-block;\n vertical-align: middle;\n }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() / 2);
15
+ var CloseButtonAndSpinnerContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0;\n padding-right: ", ";\n position: relative;\n white-space: nowrap;\n\n & > span {\n padding-right: ", ";\n }\n\n & > button,\n & > span {\n display: inline-block;\n vertical-align: middle;\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
17
16
  exports.CloseButtonAndSpinnerContainer = CloseButtonAndSpinnerContainer;
package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js CHANGED
@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
16
16
  var WhatsNewResultListItemWrapper = _styled.default.a({
17
17
  position: "relative",
18
18
  boxSizing: "border-box",
19
- padding: "".concat((0, _constants.gridSize)(), "px"),
19
+ padding: "var(--ds-space-100, 8px)",
20
20
  display: "block",
21
21
  textDecoration: "none",
22
22
  cursor: "pointer",
@@ -41,9 +41,9 @@ var WhatsNewResultListItemWrapper = _styled.default.a({
41
41
  return props.styles;
42
42
  });
43
43
  exports.WhatsNewResultListItemWrapper = WhatsNewResultListItemWrapper;
44
- var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n white-space: nowrap;\n margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() / 2);
44
+ var WhatsNewResultListItemTitleContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n white-space: nowrap;\n margin-bottom: ", ";\n"])), "var(--ds-space-050, 4px)");
45
45
  exports.WhatsNewResultListItemTitleContainer = WhatsNewResultListItemTitleContainer;
46
- var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: ", "px;\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n padding-left: ", "px;\n white-space: normal;\n overflow-x: hidden;\n"])), (0, _constants.fontSizeSmall)(), (0, _constants.fontSize)(), (0, _constants.gridSize)() / 2);
46
+ var WhatsNewResultListItemTitleText = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: ", "px;\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n padding-left: ", ";\n white-space: normal;\n overflow-x: hidden;\n"])), (0, _constants.fontSizeSmall)(), (0, _constants.fontSize)(), "var(--ds-space-050, 4px)");
47
47
  exports.WhatsNewResultListItemTitleText = WhatsNewResultListItemTitleText;
48
- var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n line-height: ", "px;\n color: ", ";\n margin: 0;\n"])), (0, _constants.gridSize)() * 2.5, "var(--ds-text, ".concat(colors.N800, ")"));
48
+ var WhatsNewResultListItemDescription = _styled.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n line-height: ", ";\n color: ", ";\n margin: 0;\n"])), "var(--ds-font-lineHeight-200, 20px)", "var(--ds-text, ".concat(colors.N800, ")"));
49
49
  exports.WhatsNewResultListItemDescription = WhatsNewResultListItemDescription;
package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js CHANGED
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
- var _constants = require("@atlaskit/theme/constants");
12
11
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
12
  var _toDate = _interopRequireDefault(require("date-fns/toDate"));
14
13
  var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
@@ -54,8 +53,8 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
54
53
  return /*#__PURE__*/_react.default.createElement(_WhatsNewResultItem.default, {
55
54
  styles: {
56
55
  border: style === 'secondary' ? "2px solid ".concat("var(--ds-border, ".concat(colors.N30, ")")) : 0,
57
- padding: style === 'secondary' ? "".concat((0, _constants.gridSize)(), "px ").concat((0, _constants.gridSize)() * 2, "px") : "".concat((0, _constants.gridSize)(), "px"),
58
- marginBottom: style === 'secondary' ? "".concat((0, _constants.gridSize)() * 1.5, "px") : 0
56
+ padding: style === 'secondary' ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-200, 16px)") : "var(--ds-space-100, 8px)",
57
+ marginBottom: style === 'secondary' ? "var(--ds-space-150, 12px)" : 0
59
58
  },
60
59
  id: whatsNewArticle.id,
61
60
  onClick: function onClick(event, analyticsEvent) {
package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js CHANGED
@@ -21,9 +21,9 @@ var truncate = function truncate() {
21
21
  exports.truncate = truncate;
22
22
  var WhatsNewResultsListContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
23
23
  exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
24
- var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0 ", "px 0;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
24
+ var WhatsNewResultsListGroupWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " 0 ", " 0;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
25
25
  exports.WhatsNewResultsListGroupWrapper = WhatsNewResultsListGroupWrapper;
26
- var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n font-size: ", "px;\n font-weight: bold;\n padding: 0 ", "px ", "px ", "px;\n text-transform: uppercase;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.fontSizeSmall)(), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
26
+ var WhatsNewResultsListGroupTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n font-size: ", "px;\n font-weight: bold;\n padding: 0 ", " ", "\n ", ";\n text-transform: uppercase;\n"])), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _constants.fontSizeSmall)(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
27
27
  exports.WhatsNewResultsListGroupTitle = WhatsNewResultsListGroupTitle;
28
- var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0;\n span {\n margin: 0;\n }\n"])), (0, _constants.gridSize)());
28
+ var ToggleShowWhatsNewResultsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " 0;\n span {\n margin: 0;\n }\n"])), "var(--ds-space-100, 8px)");
29
29
  exports.ToggleShowWhatsNewResultsContainer = ToggleShowWhatsNewResultsContainer;
package/dist/cjs/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js CHANGED
@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.LoadignWhatsNewResultsListItem = exports.LoadignWhatsNewResultsList = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  var _templateObject, _templateObject2;
12
11
  /**
13
12
  * Loading styled-components
14
13
  */
15
- var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
14
+ var LoadignWhatsNewResultsList = _styled.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
16
15
  exports.LoadignWhatsNewResultsList = LoadignWhatsNewResultsList;
17
- var LoadignWhatsNewResultsListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: 100%;\n padding: ", "px;\n margin: 0;\n box-sizing: border-box;\n"])), (0, _constants.gridSize)());
16
+ var LoadignWhatsNewResultsListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: 100%;\n padding: ", ";\n margin: 0;\n box-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");
18
17
  exports.LoadignWhatsNewResultsListItem = LoadignWhatsNewResultsListItem;
package/dist/cjs/components/WhatsNew/WhatsNewResults/styled.js CHANGED
@@ -9,11 +9,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _constants = require("@atlaskit/theme/constants");
11
11
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
12
- var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n background-color: ", ";\n flex: 1;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n z-index: 1;\n padding: ", "px;\n"])), "var(--ds-surface, #FFFFFF)", 2 * (0, _constants.gridSize)());
12
+ var WhatsNewResultsContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n background-color: ", ";\n flex: 1;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: hidden;\n overflow-y: auto;\n z-index: 1;\n padding: ", ";\n"])), "var(--ds-surface, #FFFFFF)", "var(--ds-space-200, 16px)");
13
13
  exports.WhatsNewResultsContainer = WhatsNewResultsContainer;
14
14
  var SelectContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n"])), 19 * (0, _constants.gridSize)());
15
15
  exports.SelectContainer = SelectContainer;
16
- var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: ", "px;\n"])), (0, _constants.gridSize)());
16
+ var WhatsNewResultsListContainer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: ", ";\n"])), "var(--ds-space-100, 8px)");
17
17
  exports.WhatsNewResultsListContainer = WhatsNewResultsListContainer;
18
- var WhatsNewResultsListTitleContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 ", "px;\n"])), (0, _constants.gridSize)());
18
+ var WhatsNewResultsListTitleContainer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 ", ";\n"])), "var(--ds-space-100, 8px)");
19
19
  exports.WhatsNewResultsListTitleContainer = WhatsNewResultsListTitleContainer;
package/dist/cjs/components/styled.js CHANGED
@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.Home = exports.HelpBodyContainer = exports.HelpBody = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  var _templateObject, _templateObject2, _templateObject3;
12
11
  var HelpBodyContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n min-height: 0;\n position: relative;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-content: stretch;\n align-items: flex-start;\n"])));
13
12
  exports.HelpBodyContainer = HelpBodyContainer;
14
13
  var HelpBody = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n box-sizing: border-box;\n order: 0;\n flex: 1 1 auto;\n align-self: auto;\n position: relative;\n overflow-x: hidden;\n overflow-y: auto;\n"])));
15
14
  exports.HelpBody = HelpBody;
16
- var Home = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: ", ";\n height: 100%;\n overflow: ", ";\n padding: ", "px;\n box-sizing: border-box;\n"])), function (props) {
15
+ var Home = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: ", ";\n height: 100%;\n overflow: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), function (props) {
17
16
  return props.isOverlayFullyVisible ? 'none' : 'block';
18
17
  }, function (props) {
19
18
  return props.isOverlayVisible ? 'hidden' : 'auto';
20
- }, (0, _constants.gridSize)() * 2);
19
+ }, "var(--ds-space-200, 16px)");
21
20
  exports.Home = Home;
package/dist/cjs/util/styled.js CHANGED
@@ -15,7 +15,7 @@ var _WhatsNew = require("../model/WhatsNew");
15
15
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
16
16
  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); }
17
17
  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; }
18
- var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
18
+ var DividerLine = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", ";\n margin-top: ", ";\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
19
19
 
20
20
  /**
21
21
  * Loading container
@@ -46,7 +46,7 @@ var LoadingCircle = _styled.default.div(_templateObject4 || (_templateObject4 =
46
46
  * What's new icon
47
47
  */
48
48
  exports.LoadingCircle = LoadingCircle;
49
- var WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n position: relative;\n height: ", "px;\n width: ", "px;\n border-radius: 2px;\n background-color: ", ";\n\n & > img {\n width: calc(100% - ", "px);\n height: calc(100% - ", "px);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n & > svg {\n height: 100%;\n width: 100%;\n }\n }\n"])), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, function (_ref) {
49
+ var WhatsNewTypeIcon = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n vertical-align: middle;\n position: relative;\n height: ", ";\n width: ", ";\n border-radius: 2px;\n background-color: ", ";\n\n & > img {\n width: calc(100% - ", "px);\n height: calc(100% - ", "px);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n & > svg {\n height: 100%;\n width: 100%;\n }\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", function (_ref) {
50
50
  var type = _ref.type;
51
51
  switch (type) {
52
52
  case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help",
3
- "version": "7.1.26",
3
+ "version": "7.1.27",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/styled.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import styled from '@emotion/styled';
4
- import { gridSize } from '@atlaskit/theme/constants';
5
4
  import * as colors from '@atlaskit/theme/colors';
6
5
  export const ArticleFeedbackContainer = styled.div`
7
6
  position: relative;
@@ -10,10 +9,10 @@ export const ArticleFeedbackText = styled.div`
10
9
  font-size: 0.75rem;
11
10
  font-weight: bold;
12
11
  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
13
- line-height: ${gridSize() * 4}px;
12
+ line-height: ${"var(--ds-font-lineHeight-500, 32px)"};
14
13
  position: relative;
15
14
  display: inline-block;
16
15
  `;
17
16
  export const ArticleFeedbackAnswerWrapper = styled.div`
18
- padding-top: ${gridSize() * 2}px;
17
+ padding-top: ${"var(--ds-space-200, 16px)"};
19
18
  `;
package/dist/es2019/components/Article/WhatsNewArticle/styled.js CHANGED
@@ -1,20 +1,20 @@
1
1
  /** @jsx jsx */
2
2
  import styled from '@emotion/styled';
3
- import { fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
3
+ import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
4
4
  import * as colors from '@atlaskit/theme/colors';
5
5
  export const WhatsNewTypeTitle = styled.span`
6
6
  text-decoration: none;
7
7
  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
8
8
  font-size: ${fontSize()}px;
9
9
  vertical-align: middle;
10
- padding-left: ${gridSize() / 2}px;
11
- line-height: ${gridSize() * 2.5}px;
10
+ padding-left: ${"var(--ds-space-050, 4px)"};
11
+ line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
12
12
  white-space: normal;
13
13
  overflow-x: hidden;
14
14
  `;
15
15
  export const WhatsNewIconContainer = styled.div`
16
16
  display: block;
17
- padding-bottom: ${gridSize()}px;
17
+ padding-bottom: ${"var(--ds-space-100, 8px)"};
18
18
  `;
19
19
  export const WhatsNewTitleText = styled.span`
20
20
  text-decoration: none;
@@ -23,7 +23,7 @@ export const WhatsNewTitleText = styled.span`
23
23
  font-weight: 600;
24
24
  white-space: normal;
25
25
  overflow-x: hidden;
26
- padding-bottom: ${gridSize()}px;
26
+ padding-bottom: ${"var(--ds-space-100, 8px)"};
27
27
  display: block;
28
28
  `;
29
29
  export const WhatsNewRelatedLinksTitleText = styled.span`
@@ -33,14 +33,14 @@ export const WhatsNewRelatedLinksTitleText = styled.span`
33
33
  font-weight: 600;
34
34
  white-space: normal;
35
35
  overflow-x: hidden;
36
- padding-bottom: ${gridSize()}px;
36
+ padding-bottom: ${"var(--ds-space-100, 8px)"};
37
37
  display: block;
38
38
  `;
39
39
  export const RelatedLinkContainer = styled.div`
40
- margin-bottom: ${gridSize()}px;
40
+ margin-bottom: ${"var(--ds-space-100, 8px)"};
41
41
  `;
42
42
  export const ExternalLinkIconContainer = styled.div`
43
43
  display: inline-block;
44
44
  vertical-align: middle;
45
- padding-left: ${gridSize() / 2}px;
45
+ padding-left: ${"var(--ds-space-050, 4px)"};
46
46
  `;
package/dist/es2019/components/Article/styled.js CHANGED
@@ -1,9 +1,8 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import styled from '@emotion/styled';
4
- import { gridSize } from '@atlaskit/theme/constants';
5
4
  export const ArticleContainer = styled.div`
6
- padding: ${gridSize() * 2}px ${gridSize() * 3}px;
5
+ padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"};
7
6
  position: absolute;
8
7
  height: 100%;
9
8
  width: 100%;
package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js CHANGED
@@ -1,11 +1,11 @@
1
1
  /** @jsx jsx */
2
2
  import styled from '@emotion/styled';
3
- import { fontSize, gridSize } from '@atlaskit/theme/constants';
3
+ import { fontSize } from '@atlaskit/theme/constants';
4
4
  import * as colors from '@atlaskit/theme/colors';
5
5
  export const ArticlesListItemWrapper = styled.a({
6
6
  position: `relative`,
7
7
  boxSizing: `border-box`,
8
- padding: `${gridSize()}px`,
8
+ padding: "var(--ds-space-100, 8px)",
9
9
  display: `block`,
10
10
  textDecoration: `none`,
11
11
  cursor: `pointer`,
@@ -34,9 +34,9 @@ export const ArticlesListItemContainer = styled.div`
34
34
  export const ArticlesListItemTypeTitle = styled.div`
35
35
  font-weight: bold;
36
36
  font-size: 11px;
37
- line-height: ${gridSize() * 2}px;
37
+ line-height: ${"var(--ds-font-lineHeight-100, 16px)"};
38
38
  color: ${`var(--ds-text-subtlest, ${colors.N200})`};
39
- padding-bottom: ${gridSize() / 2}px;
39
+ padding-bottom: ${"var(--ds-space-050, 4px)"};
40
40
  `;
41
41
  export const ArticlesListItemLinkIcon = styled.span`
42
42
  align-self: auto;
@@ -49,14 +49,14 @@ export const ArticlesListItemTitleText = styled.span`
49
49
  font-size: ${fontSize()}px;
50
50
  font-weight: 600;
51
51
  display: inline-block;
52
- line-height: ${gridSize() * 2.5}px;
52
+ line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
53
53
  white-space: normal;
54
54
  overflow-x: hidden;
55
- margin-bottom: ${gridSize()}px;
55
+ margin-bottom: ${"var(--ds-space-100, 8px)"};
56
56
  `;
57
57
  export const ArticlesListItemDescription = styled.p`
58
58
  display: block;
59
- line-height: ${gridSize() * 2.5}px;
59
+ line-height: ${"var(--ds-font-lineHeight-200, 20px)"};
60
60
  color: ${`var(--ds-text-subtle, ${colors.N400})`};
61
61
  margin: 0;
62
62
  `;
package/dist/es2019/components/ArticlesList/styled.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { css } from '@emotion/core';
4
4
  import styled from '@emotion/styled';
5
- import { gridSize } from '@atlaskit/theme/constants';
6
5
  export const truncate = (width = '100%') => css`
7
6
  overflow-x: hidden;
8
7
  text-overflow: ellipsis;
@@ -13,7 +12,7 @@ export const ArticlesListContainer = styled.div`
13
12
  position: relative;
14
13
  `;
15
14
  export const ToggleShowMoreArticlesContainer = styled.div`
16
- padding: ${gridSize()}px 0;
15
+ padding: ${"var(--ds-space-100, 8px)"} 0;
17
16
  span {
18
17
  margin: 0;
19
18
  }
package/dist/es2019/components/HelpContentButton/styled.js CHANGED
@@ -2,13 +2,12 @@
2
2
 
3
3
  import styled from 'styled-components';
4
4
  import * as colors from '@atlaskit/theme/colors';
5
- import { gridSize } from '@atlaskit/theme/constants';
6
5
  export const HelpContentButtonContainer = styled.a`
7
6
  display: block;
8
7
  cursor: pointer;
9
- width: calc(100% - ${gridSize() * 2}px);
8
+ width: calc(100% - ${"var(--ds-space-200, 16px)"});
10
9
  color: ${`var(--ds-text-subtle, ${colors.N600})`};
11
- padding: ${gridSize}px;
10
+ padding: ${"var(--ds-space-100, 8px)"};
12
11
  border-radius: 3px;
13
12
 
14
13
  &:hover,
@@ -52,17 +51,17 @@ export const HelpContentButtonText = styled.div`
52
51
  width: calc(100% - 20px);
53
52
  display: inline-block;
54
53
  vertical-align: middle;
55
- padding: 0 ${gridSize}px;
54
+ padding: 0 ${"var(--ds-space-100, 8px)"};
56
55
  box-sizing: border-box;
57
56
  `;
58
57
  export const HelpContentButtonExternalLinkIcon = styled.div`
59
58
  display: inline-block;
60
59
  vertical-align: middle;
61
- padding-left: ${gridSize() / 2}px;
60
+ padding-left: ${"var(--ds-space-050, 4px)"};
62
61
  `;
63
62
  export const HelpContentButtonExternalNotificationIcon = styled.div`
64
63
  display: inline-block;
65
64
  vertical-align: middle;
66
- margin-top: -${gridSize() / 2}px;
67
- padding-left: ${gridSize() / 2}px;
65
+ margin-top: calc(-1 * ${"var(--ds-space-050, 4px)"});
66
+ padding-left: ${"var(--ds-space-050, 4px)"};
68
67
  `;
package/dist/es2019/components/RelatedArticles/styled.js CHANGED
@@ -3,7 +3,7 @@
3
3
  import { css } from '@emotion/core';
4
4
  import styled from '@emotion/styled';
5
5
  import * as colors from '@atlaskit/theme/colors';
6
- import { gridSize, fontSize } from '@atlaskit/theme/constants';
6
+ import { fontSize } from '@atlaskit/theme/constants';
7
7
  const baseHeading = (size, lineHeight) => `
8
8
  font-size: ${size / fontSize()}em;
9
9
  font-style: inherit;
@@ -20,14 +20,14 @@ export const RelatedArticlesTitle = styled.div`
20
20
  color: ${`var(--ds-text, ${colors.N800})`};
21
21
  font-weight: 600;
22
22
  letter-spacing: -0.006em;
23
- padding: ${gridSize() * 2}px 0;
23
+ padding: ${"var(--ds-space-200, 16px)"} 0;
24
24
  `;
25
25
 
26
26
  /**
27
27
  * Loading styled-components
28
28
  */
29
29
  export const LoadignRelatedArticleSection = styled.div`
30
- margin-top: ${gridSize()}px;
30
+ margin-top: ${"var(--ds-space-100, 8px)"};
31
31
  `;
32
32
  export const LoadignRelatedArticleList = styled.ul`
33
33
  width: 100%;
@@ -38,7 +38,7 @@ export const LoadignRelatedArticleList = styled.ul`
38
38
  export const LoadignRelatedArticleListItem = styled.li`
39
39
  display: block;
40
40
  width: 100%;
41
- padding: ${gridSize()}px;
42
- margin-bottom: ${gridSize() * 2}px;
41
+ padding: ${"var(--ds-space-100, 8px)"};
42
+ margin-bottom: ${"var(--ds-space-200, 16px)"};
43
43
  box-sizing: border-box;
44
44
  `;