@atlaskit/flag 14.6.4 → 14.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/flag
 
+## 14.7.0
+
+### Minor Changes
+
+- [`d176305ad56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d176305ad56) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.6.4
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 packageName = "@atlaskit/flag";
-var packageVersion = "14.6.4";
+var packageVersion = "14.7.0";
 var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/cjs/flag-actions.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -23,22 +23,22 @@ var _theme = require("./theme");
 var gridSize = (0, _constants.gridSize)();
 var separatorWidth = gridSize * 2;
 var defaultAppearanceTranslate = gridSize / 4;
-var separatorStyles = (0, _core.css)({
+var separatorStyles = (0, _react.css)({
   display: 'inline-block',
   width: separatorWidth,
   textAlign: 'center'
 });
-var actionContainerStyles = (0, _core.css)({
+var actionContainerStyles = (0, _react.css)({
   display: 'flex',
   paddingTop: gridSize,
   alignItems: 'center',
   flexWrap: 'wrap',
   transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
 });
-var boldActionContainerStyles = (0, _core.css)({
+var boldActionContainerStyles = (0, _react.css)({
   transform: 0
 });
-var buttonStyles = (0, _core.css)({
+var buttonStyles = (0, _react.css)({
   '&&, a&&': {
     marginLeft: 0,
     padding: "0 ".concat(gridSize, "px !important"),
@@ -53,12 +53,12 @@ var buttonStyles = (0, _core.css)({
     textDecoration: 'underline'
   }
 });
-var appeanceNormalButtonStyles = (0, _core.css)({
+var appeanceNormalButtonStyles = (0, _react.css)({
   '&&, a&&': {
     padding: '0 !important'
   }
 });
-var isBoldButtonStyles = (0, _core.css)({
+var isBoldButtonStyles = (0, _react.css)({
   '&&, a&&': {
     marginRight: gridSize
   }
@@ -78,14 +78,14 @@ var FlagActions = function FlagActions(props) {
   }
 
   var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
-    return [index && !isBold ? (0, _core.jsx)("div", {
+    return [index && !isBold ? (0, _react.jsx)("div", {
       css: separatorStyles,
       key: index + 0.5
-    }, "\xB7") : '', (0, _core.jsx)(_customThemeButton.default, {
+    }, "\xB7") : '', (0, _react.jsx)(_customThemeButton.default, {
       onClick: action.onClick,
       href: action.href,
       target: action.target,

package/dist/cjs/flag-group.js

@@ -14,7 +14,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -49,7 +49,7 @@ function useFlagGroup() {
 // that causes a broken transition
 
 
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react2.css)({
   width: flagWidth,
   position: 'absolute',
   bottom: 0,
@@ -77,14 +77,14 @@ var baseStyles = (0, _core.css)({
 }); // Transform needed to push up while 1st flag is leaving
 // Exiting time should match the exiting time of motion so is halved
 
-var dismissAllowedStyles = (0, _core.css)({
+var dismissAllowedStyles = (0, _react2.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&& + *': {
     transform: "translate(0, 0)",
     transitionDuration: "".concat(flagAnimationTime / 2, "ms")
   }
 });
-var flagGroupContainerStyles = (0, _core.css)({
+var flagGroupContainerStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: _constants.layers.flag(),
   bottom: flagBottom,
@@ -123,7 +123,7 @@ var FlagGroup = function FlagGroup(props) {
   var renderChildren = function renderChildren() {
     return children && (0, _typeof2.default)(children) === 'object' ? _react.Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
-      return (0, _core.jsx)(_motion.SlideIn, {
+      return (0, _react2.jsx)(_motion.SlideIn, {
         enterFrom: "left",
         fade: "inout",
         duration: flagAnimationTime,
@@ -131,9 +131,9 @@ var FlagGroup = function FlagGroup(props) {
           return _motion.easeIn;
         }
       }, function (props) {
-        return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+        return (0, _react2.jsx)("div", (0, _extends2.default)({}, props, {
           css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
-        }), (0, _core.jsx)(FlagGroupContext.Provider, {
+        }), (0, _react2.jsx)(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
         }, flag));
@@ -141,12 +141,12 @@ var FlagGroup = function FlagGroup(props) {
     }) : false;
   };
 
-  return (0, _core.jsx)(_portal.default, {
+  return (0, _react2.jsx)(_portal.default, {
     zIndex: _constants.layers.flag()
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     id: id,
     css: flagGroupContainerStyles
-  }, hasFlags ? (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)(LabelTag, null, label)) : null, (0, _core.jsx)(_motion.ExitingPersistence, {
+  }, hasFlags ? (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(LabelTag, null, label)) : null, (0, _react2.jsx)(_motion.ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };

package/dist/cjs/flag.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -44,27 +44,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.4"
+  packageVersion: "14.7.0"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
-var titleGroupStyles = (0, _core.css)({
+var titleGroupStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'start'
 });
-var iconTitleStyles = (0, _core.css)({
+var iconTitleStyles = (0, _react2.css)({
   display: 'flex',
   paddingTop: "".concat(gridSize / 2, "px"),
   alignItems: 'start',
   flex: 1
 });
-var flagHeaderStyles = (0, _core.css)({
+var flagHeaderStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   width: '100%',
   padding: doubleGridSize,
   borderRadius: (0, _constants.borderRadius)()
 });
-var flagContainerStyles = (0, _core.css)({
+var flagContainerStyles = (0, _react2.css)({
   width: '100%',
   zIndex: _constants.layers.flag(),
   borderRadius: (0, _constants.borderRadius)(),
@@ -168,7 +168,7 @@ var Flag = function Flag(props) {
   var textColor = (0, _theme.getFlagTextColor)(appearance, mode);
   var iconColor = (0, _theme.getFlagIconColor)(appearance, mode);
   var isDismissable = isBold || isDismissAllowed;
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     style: {
       color: textColor,
       backgroundColor: (0, _theme.getFlagBackgroundColor)(appearance, mode),
@@ -177,33 +177,33 @@ var Flag = function Flag(props) {
     css: flagContainerStyles,
     role: "alert",
     "data-testid": testId
-  }, autoDismissProps), (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("div", {
+  }, autoDismissProps), (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("div", {
     css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     style: {
       color: iconColor
     },
     css: titleGroupStyles
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: iconTitleStyles
-  }, icon, (0, _core.jsx)(_internal.Title, {
+  }, icon, (0, _react2.jsx)(_internal.Title, {
     color: textColor
-  }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _core.jsx)(_internal.DismissButton, {
+  }, title)), isDismissable ? !(isBold && !description && !actions.length) && (0, _react2.jsx)(_internal.DismissButton, {
     testId: testId,
     appearance: appearance,
     isBold: isBold,
     isExpanded: isExpanded,
     onClick: isBold ? toggleExpand : buttonActionCallback
-  }) : null), (0, _core.jsx)(_internal.Expander, {
+  }) : null), (0, _react2.jsx)(_internal.Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && (0, _core.jsx)(_internal.Description, {
+  }, description && (0, _react2.jsx)(_internal.Description, {
     testId: testId && "".concat(testId, "-description"),
     color: textColor,
     isBold: isBold
-  }, description), (0, _core.jsx)(_flagActions.default, {
+  }, description), (0, _react2.jsx)(_flagActions.default, {
     actions: actions,
     appearance: appearance,
     linkComponent: linkComponent,

package/dist/cjs/internal/description.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var descriptionStyles = (0, _core.css)({
+var descriptionStyles = (0, _react.css)({
   maxHeight: 100,
   // height is defined as 5 lines maximum by design
   overflow: 'auto',
@@ -20,7 +20,7 @@ var Description = function Description(_ref) {
       testId = _ref.testId,
       children = _ref.children,
       isBold = _ref.isBold;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     style: {
       color: color
     },

package/dist/cjs/internal/dismiss-button.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
@@ -28,7 +28,7 @@ var _theme = require("../theme");
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
-var dismissButtonStyles = (0, _core.css)({
+var dismissButtonStyles = (0, _react2.css)({
   marginLeft: gridSize,
   padding: 0,
   flex: '0 0 auto',
@@ -40,7 +40,7 @@ var dismissButtonStyles = (0, _core.css)({
   lineHeight: '1',
   whiteSpace: 'nowrap'
 });
-var crossIconStyles = (0, _core.css)({
+var crossIconStyles = (0, _react2.css)({
   paddingTop: "".concat(gridSize, "px")
 });
 
@@ -66,7 +66,7 @@ var DismissButton = function DismissButton(_ref) {
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
 
-  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", {
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", {
     style: {
       color: (0, _theme.getFlagTextColor)(appearance, mode)
     },
@@ -75,7 +75,7 @@ var DismissButton = function DismissButton(_ref) {
     "data-testid": buttonTestId,
     type: "button",
     "aria-expanded": isBold ? isExpanded : undefined
-  }, (0, _core.jsx)(ButtonIcon, {
+  }, (0, _react2.jsx)(ButtonIcon, {
     label: buttonLabel,
     size: size
   })));

package/dist/cjs/internal/expander.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -14,7 +14,7 @@ var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var paddingLeft = gridSize * 5;
-var expanderStyles = (0, _core.css)({
+var expanderStyles = (0, _react.css)({
   display: 'flex',
   minWidth: 0,
   maxHeight: 0,
@@ -24,7 +24,7 @@ var expanderStyles = (0, _core.css)({
   flexDirection: 'column',
   transition: "max-height 0.3s"
 });
-var expandedStyles = (0, _core.css)({
+var expandedStyles = (0, _react.css)({
   maxHeight: 150
 });
 
@@ -35,14 +35,14 @@ var Expander = function Expander(_ref) {
   // Need to always render the ExpanderInternal otherwise the
   // reveal transition doesn't happen. We can't use CSS animation for
   // the the reveal because we don't know the height of the content.
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "aria-hidden": !isExpanded,
     css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && "".concat(testId, "-expander")
-  }, (0, _core.jsx)(_motion.ExitingPersistence, {
+  }, (0, _react.jsx)(_motion.ExitingPersistence, {
     appear: true
-  }, isExpanded && (0, _core.jsx)(_motion.FadeIn, null, function (props) {
-    return (0, _core.jsx)("div", props, children);
+  }, isExpanded && (0, _react.jsx)(_motion.FadeIn, null, function (props) {
+    return (0, _react.jsx)("div", props, children);
   })));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/internal/title.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var titleStyles = (0, _core.css)({
+var titleStyles = (0, _react.css)({
   padding: "2px 0 6px 16px",
   flex: 1,
   fontWeight: 600
@@ -17,7 +17,7 @@ var titleStyles = (0, _core.css)({
 var Title = function Title(_ref) {
   var color = _ref.color,
       children = _ref.children;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     style: {
       color: color
     },

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.6.4",
+	"version": "14.7.0",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.6.4";
+const packageVersion = "14.7.0";
 export const AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/es2019/flag-actions.js

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE } from './constants';

package/dist/es2019/flag-group.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';

package/dist/es2019/flag.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
@@ -16,7 +16,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.4"
+  packageVersion: "14.7.0"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;

package/dist/es2019/internal/description.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 const descriptionStyles = css({
   maxHeight: 100,
   // height is defined as 5 lines maximum by design

package/dist/es2019/internal/dismiss-button.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';

package/dist/es2019/internal/expander.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();

package/dist/es2019/internal/title.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 const titleStyles = css({
   padding: `2px 0 6px 16px`,
   flex: 1,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.6.4",
+	"version": "14.7.0",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.6.4";
+var packageVersion = "14.7.0";
 export var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/esm/flag-actions.js

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE } from './constants';

package/dist/esm/flag-group.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';

package/dist/esm/flag.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
@@ -22,7 +22,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.6.4"
+  packageVersion: "14.7.0"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;

package/dist/esm/internal/description.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 var descriptionStyles = css({
   maxHeight: 100,
   // height is defined as 5 lines maximum by design

package/dist/esm/internal/dismiss-button.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';

package/dist/esm/internal/expander.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();

package/dist/esm/internal/title.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 var titleStyles = css({
   padding: "2px 0 6px 16px",
   flex: 1,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.6.4",
+	"version": "14.7.0",
 	"sideEffects": false
 }

package/dist/types/flag-actions.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import type { ComponentType } from 'react';
+import { jsx } from '@emotion/react';
 import type { CustomThemeButtonProps } from '@atlaskit/button/types';
 import type { ThemeModes } from '@atlaskit/theme/types';
 import type { ActionsType, AppearanceTypes } from './types';
@@ -10,5 +11,5 @@ declare type FlagActionsProps = {
     mode: ThemeModes;
     testId?: string;
 };
-declare const FlagActions: (props: FlagActionsProps) => JSX.Element | null;
+declare const FlagActions: (props: FlagActionsProps) => jsx.JSX.Element | null;
 export default FlagActions;

package/dist/types/flag-group.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 declare type FlagGroupProps = {
     /**
@@ -40,5 +41,5 @@ export declare function useFlagGroup(): FlagGroupAPI;
  * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
  * - [Code](https://atlassian.design/components/flag/flag-group/code)
  */
-declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
+declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
 export default FlagGroup;

package/dist/types/flag.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import type { FlagProps } from './types';
 /**
  * __Flag__
@@ -10,5 +10,5 @@ import type { FlagProps } from './types';
  * - [Code](https://atlassian.design/components/flag/code)
  * - [Usage](https://atlassian.design/components/flag/usage)
  */
-declare const Flag: (props: FlagProps) => JSX.Element;
+declare const Flag: (props: FlagProps) => jsx.JSX.Element;
 export default Flag;

package/dist/types/internal/dismiss-button.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { AppearanceTypes } from '../types';
 interface DismissButtonProps {
     appearance: AppearanceTypes;
@@ -7,5 +8,5 @@ interface DismissButtonProps {
     isBold: boolean;
     testId?: string;
 }
-declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => jsx.JSX.Element>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.6.4",
+  "version": "14.7.0",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,27 +41,27 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/visually-hidden": "^1.0.0",
+    "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/radio": "^5.2.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/radio": "^5.4.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/jest": "^11.8.0",
     "@testing-library/react": "^8.0.1",
-    "jest-emotion": "^10.0.32",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
     "typescript": "4.3.5"