@atlaskit/media-avatar-picker 24.3.21 → 24.3.22

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/media-avatar-picker
 
+## 24.3.22
+
+### Patch Changes
+
+- [#71706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71706) [`9f5b710e6a66`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f5b710e6a66) - [ux] fix dialog header style
+
 ## 24.3.21
 
 ### Patch Changes

package/dist/cjs/avatar-picker-dialog/styles.js

@@ -7,9 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.modalHeaderStyles = exports.formStyles = exports.croppingWrapperStyles = exports.avatarPickerViewWrapperStyles = exports.avatarPickerErrorStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var avatarPickerErrorStyles = exports.avatarPickerErrorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 var formStyles = exports.formStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  text-align: center;\n  min-height: 339px;\n"])));
-var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  font-weight: 500;\n  font-size: 20px;\n"])), "var(--ds-space-200, 16px)");
-var croppingWrapperStyles = exports.croppingWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
+var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)({
+  // Using `&` twice to increase specificity
+  '&&': {
+    margin: "var(--ds-space-200, 16px)",
+    fontWeight: 500,
+    fontSize: '20px'
+  }
+});
+var croppingWrapperStyles = exports.croppingWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));

package/dist/es2019/avatar-picker-dialog/styles.js

@@ -12,11 +12,14 @@ export const avatarPickerViewWrapperStyles = css`
   text-align: center;
   min-height: 339px;
 `;
-export const modalHeaderStyles = css`
-  margin: ${"var(--ds-space-200, 16px)"};
-  font-weight: 500;
-  font-size: 20px;
-`;
+export const modalHeaderStyles = css({
+  // Using `&` twice to increase specificity
+  '&&': {
+    margin: "var(--ds-space-200, 16px)",
+    fontWeight: 500,
+    fontSize: '20px'
+  }
+});
 export const croppingWrapperStyles = css`
   display: inline-block;
   user-select: none;

package/dist/esm/avatar-picker-dialog/styles.js

@@ -1,8 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 export var avatarPickerErrorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", " ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 export var formStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
 export var avatarPickerViewWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  text-align: center;\n  min-height: 339px;\n"])));
-export var modalHeaderStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", ";\n  font-weight: 500;\n  font-size: 20px;\n"])), "var(--ds-space-200, 16px)");
-export var croppingWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
+export var modalHeaderStyles = css({
+  // Using `&` twice to increase specificity
+  '&&': {
+    margin: "var(--ds-space-200, 16px)",
+    fontWeight: 500,
+    fontSize: '20px'
+  }
+});
+export var croppingWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-avatar-picker",
-  "version": "24.3.21",
+  "version": "24.3.22",
   "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/button": "^17.3.0",
     "@atlaskit/flag": "^15.2.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-ui": "^25.0.0",
@@ -42,7 +42,7 @@
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "exenv": "^1.2.2"