@atlaskit/flag 15.2.5 → 15.2.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/flag
 
+## 15.2.7
+
+### Patch Changes
+
+- [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update how certain background colors are referenced by name. Internal changes only.
+- Updated dependencies
+
+## 15.2.6
+
+### Patch Changes
+
+- [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+
 ## 15.2.5
 
 ### Patch Changes

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

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 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 packageName = "@atlaskit/flag";
-var packageVersion = "15.2.5";
+var packageVersion = "15.2.7";
 var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-group.js

@@ -9,7 +9,6 @@ exports.useFlagGroup = useFlagGroup;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _motion = require("@atlaskit/motion");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -24,8 +23,6 @@ var flagWidth = gridSize * 50;
 exports.flagWidth = flagWidth;
 var flagAnimationTime = 400;
 exports.flagAnimationTime = flagAnimationTime;
-var flagBottom = gridSize * 6;
-var flagLeft = gridSize * 10;
 var defaultFlagGroupContext = {
   onDismissed: _noop.default,
   isDismissAllowed: false
@@ -44,7 +41,7 @@ function useFlagGroup() {
 // that causes a broken transition
 var baseStyles = (0, _react2.css)({
   width: flagWidth,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  position: 'absolute',
   bottom: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   '@media (max-width: 560px)': {
@@ -79,15 +76,12 @@ var dismissAllowedStyles = (0, _react2.css)({
   }
 });
 var flagGroupContainerStyles = (0, _react2.css)({
-  zIndex: _constants.layers.flag(),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  bottom: flagBottom,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  left: flagLeft,
+  position: 'fixed',
+  zIndex: 'flag',
+  bottom: "var(--ds-space-600, 48px)",
+  left: "var(--ds-space-1000, 80px)",
   '@media (max-width: 560px)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     bottom: 0,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: 0
   }
 });
@@ -129,9 +123,7 @@ var FlagGroup = function FlagGroup(props) {
       }, function (_ref) {
         var className = _ref.className,
           ref = _ref.ref;
-        return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-          display: "block",
-          position: "absolute",
+        return (0, _react2.jsx)("div", {
           css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
           className: className,
           ref: ref
@@ -145,9 +137,7 @@ var FlagGroup = function FlagGroup(props) {
   };
   return (0, _react2.jsx)(_portal.default, {
     zIndex: _constants.layers.flag()
-  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-    display: "block",
-    position: "fixed",
+  }, (0, _react2.jsx)("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(LabelTag, null, label)) : null, (0, _react2.jsx)(_motion.ExitingPersistence, {

package/dist/cjs/flag.js

@@ -11,8 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
-var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
+var _primitives = require("@atlaskit/primitives");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
@@ -23,10 +22,28 @@ var _flagGroup = require("./flag-group");
 var _internal = require("./internal");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+var iconWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'start',
+  flexShrink: 0,
+  color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
+});
+var flagStyles = (0, _primitives.xcss)({
+  boxShadow: 'elevation.shadow.overlay',
+  borderRadius: 'border.radius.100',
+  overflow: 'hidden',
+  zIndex: 'flag',
+  width: '100%',
+  transition: 'background-color 200ms'
+});
+var flagWrapperStyles = (0, _react2.css)({
+  width: '100%'
+});
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.5"
+  packageVersion: "15.2.7"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,
@@ -116,41 +133,30 @@ var Flag = function Flag(props) {
   var iconColor = _theme.flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
-  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-    display: "block",
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("div", (0, _extends2.default)({
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    role: "alert",
+    css: flagWrapperStyles,
+    "data-testid": testId
+  }, autoDismissProps), (0, _react2.jsx)(_primitives.Box, {
     backgroundColor: _theme.flagBackgroundColor[appearance],
-    shadow: "overlay",
     padding: "space.200",
-    borderRadius: "normal",
-    overflow: "hidden",
-    layer: "flag",
-    UNSAFE_style: {
-      width: '100%',
-      transition: 'background-color 200ms'
-    },
-    role: "alert",
-    tabIndex: 0,
-    testId: testId
-  }, autoDismissProps), (0, _react2.jsx)(_inline.default, {
+    xcss: flagStyles
+  }, (0, _react2.jsx)(_primitives.Inline, {
     space: "space.200"
-  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-    alignItems: "start",
-    UNSAFE_style: {
-      color: iconColor,
-      flexShrink: 0
-    }
+  }, (0, _react2.jsx)("div", {
+    css: iconWrapperStyles,
+    style: (0, _defineProperty2.default)({}, CSS_VAR_ICON_COLOR, iconColor)
   }, icon), (0, _react2.jsx)("span", {
     css: transitionStyles
-  }, (0, _react2.jsx)(_stack.default, {
+  }, (0, _react2.jsx)(_primitives.Stack, {
     space: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-  }, (0, _react2.jsx)(_inline.default, {
+  }, (0, _react2.jsx)(_primitives.Inline, {
     space: "space.100",
     spread: "space-between"
-  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-    display: "block",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-025, 2px)"
-    }
+  }, (0, _react2.jsx)(_primitives.Box, {
+    paddingBlockStart: "space.025"
   }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Text, {
     color: textColor,
     fontWeight: "semibold",
@@ -182,7 +188,7 @@ var Flag = function Flag(props) {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  })))))));
+  }))))))));
 };
 var _default = Flag;
 exports.default = _default;

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
@@ -15,6 +14,19 @@ var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _theme = require("../theme");
 /** @jsx jsx */
 
+var buttonStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '24px',
+  height: '24px',
+  padding: "var(--ds-space-0, 0px)",
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 auto',
+  background: 'none',
+  borderStyle: 'none',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap'
+});
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
     onClick = _ref.onClick,
@@ -31,25 +43,12 @@ var DismissButton = function DismissButton(_ref) {
     size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
-  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-    as: "button",
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)("button", {
     type: "button",
-    justifyContent: "center",
-    alignItems: "center",
-    borderStyle: "none",
-    borderRadius: "normal",
-    padding: "space.0",
-    width: "size.200",
-    height: "size.200",
+    css: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    UNSAFE_style: {
-      flex: '0 0 auto',
-      background: 'none',
-      cursor: 'pointer',
-      whiteSpace: 'nowrap'
-    },
-    testId: buttonTestId
+    "data-testid": buttonTestId
   }, (0, _react2.jsx)(ButtonIcon, {
     label: buttonLabel,
     size: size,

package/dist/cjs/internal/expander.js

@@ -7,9 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _dsExplorations = require("@atlaskit/ds-explorations");
-var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
+var _primitives = require("@atlaskit/primitives");
 var _motion = require("@atlaskit/motion");
+var expanderStyles = (0, _primitives.xcss)({
+  width: '100%'
+});
+var containerStyles = (0, _primitives.xcss)({
+  transition: "max-height 0.3s"
+});
 var Expander = function Expander(_ref) {
   var children = _ref.children,
     isExpanded = _ref.isExpanded,
@@ -18,24 +23,21 @@ var Expander = function Expander(_ref) {
   // 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 /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
-    UNSAFE_style: {
-      minWidth: 0,
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: containerStyles,
+    style: {
       maxHeight: isExpanded ? 150 : 0,
       flex: '1 1 100%',
-      transition: "max-height 0.3s"
+      minWidth: 0
     },
     "aria-hidden": !isExpanded,
     testId: testId && "".concat(testId, "-expander")
   }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
     appear: true
   }, isExpanded && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, null, function (props) {
-    return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-      display: "block",
-      UNSAFE_style: {
-        width: '100%'
-      }
-    }, props), /*#__PURE__*/_react.default.createElement(_stack.default, {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+      xcss: expanderStyles
+    }, props), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
       space: "space.100"
     }, children));
   })));

package/dist/cjs/theme.js

@@ -8,11 +8,11 @@ var _colors = require("@atlaskit/theme/colors");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var flagBackgroundColor = {
-  error: 'danger.bold',
-  info: 'neutral.bold',
+  error: 'color.background.danger.bold',
+  info: 'color.background.neutral.bold',
   normal: 'elevation.surface.overlay',
-  success: 'success.bold',
-  warning: 'warning.bold'
+  success: 'color.background.success.bold',
+  warning: 'color.background.warning.bold'
 };
 exports.flagBackgroundColor = flagBackgroundColor;
 var flagIconColor = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.2.5",
+	"version": "15.2.7",
 	"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 = "15.2.5";
+const packageVersion = "15.2.7";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-group.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
@@ -11,8 +11,6 @@ import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 export const flagWidth = gridSize * 50;
 export const flagAnimationTime = 400;
-const flagBottom = gridSize * 6;
-const flagLeft = gridSize * 10;
 const defaultFlagGroupContext = {
   onDismissed: noop,
   isDismissAllowed: false
@@ -30,7 +28,7 @@ export function useFlagGroup() {
 // that causes a broken transition
 const baseStyles = css({
   width: flagWidth,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  position: 'absolute',
   bottom: 0,
   transition: `transform ${flagAnimationTime}ms ease-in-out`,
   '@media (max-width: 560px)': {
@@ -65,15 +63,12 @@ const dismissAllowedStyles = css({
   }
 });
 const flagGroupContainerStyles = css({
-  zIndex: layers.flag(),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  bottom: flagBottom,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  left: flagLeft,
+  position: 'fixed',
+  zIndex: 'flag',
+  bottom: "var(--ds-space-600, 48px)",
+  left: "var(--ds-space-1000, 80px)",
   '@media (max-width: 560px)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     bottom: 0,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: 0
   }
 });
@@ -110,9 +105,7 @@ const FlagGroup = props => {
       }, ({
         className,
         ref
-      }) => jsx(Box, {
-        display: "block",
-        position: "absolute",
+      }) => jsx("div", {
         css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
         className: className,
         ref: ref
@@ -125,9 +118,7 @@ const FlagGroup = props => {
   };
   return jsx(Portal, {
     zIndex: layers.flag()
-  }, jsx(Box, {
-    display: "block",
-    position: "fixed",
+  }, jsx("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {

package/dist/es2019/flag.js

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
@@ -13,10 +12,28 @@ import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
+const CSS_VAR_ICON_COLOR = '--flag-icon-color';
+const iconWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'start',
+  flexShrink: 0,
+  color: `var(${CSS_VAR_ICON_COLOR})`
+});
+const flagStyles = xcss({
+  boxShadow: 'elevation.shadow.overlay',
+  borderRadius: 'border.radius.100',
+  overflow: 'hidden',
+  zIndex: 'flag',
+  width: '100%',
+  transition: 'background-color 200ms'
+});
+const flagWrapperStyles = css({
+  width: '100%'
+});
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.5"
+  packageVersion: "15.2.7"
 };
 const transitionStyles = css({
   flexGrow: 1,
@@ -102,28 +119,22 @@ const Flag = props => {
   const iconColor = flagIconColor[appearance];
   const isDismissable = isBold || isDismissAllowed;
   const shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
-  return jsx(FocusRing, null, jsx(Box, _extends({
-    display: "block",
+  return jsx(FocusRing, null, jsx("div", _extends({
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    role: "alert",
+    css: flagWrapperStyles,
+    "data-testid": testId
+  }, autoDismissProps), jsx(Box, {
     backgroundColor: flagBackgroundColor[appearance],
-    shadow: "overlay",
     padding: "space.200",
-    borderRadius: "normal",
-    overflow: "hidden",
-    layer: "flag",
-    UNSAFE_style: {
-      width: '100%',
-      transition: 'background-color 200ms'
-    },
-    role: "alert",
-    tabIndex: 0,
-    testId: testId
-  }, autoDismissProps), jsx(Inline, {
+    xcss: flagStyles
+  }, jsx(Inline, {
     space: "space.200"
-  }, jsx(Box, {
-    alignItems: "start",
-    UNSAFE_style: {
-      color: iconColor,
-      flexShrink: 0
+  }, jsx("div", {
+    css: iconWrapperStyles,
+    style: {
+      [CSS_VAR_ICON_COLOR]: iconColor
     }
   }, icon), jsx("span", {
     css: transitionStyles
@@ -133,10 +144,7 @@ const Flag = props => {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    display: "block",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-025, 2px)"
-    }
+    paddingBlockStart: "space.025"
   }, jsx(Text, {
     color: textColor,
     fontWeight: "semibold",
@@ -168,6 +176,6 @@ const Flag = props => {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  })))))));
+  }))))))));
 };
 export default Flag;

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

@@ -1,12 +1,24 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { flagTextColorToken } from '../theme';
+const buttonStyles = css({
+  display: 'flex',
+  width: '24px',
+  height: '24px',
+  padding: "var(--ds-space-0, 0px)",
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 auto',
+  background: 'none',
+  borderStyle: 'none',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap'
+});
 const DismissButton = ({
   appearance,
   onClick,
@@ -24,25 +36,12 @@ const DismissButton = ({
     size = 'medium';
     buttonTestId = testId && `${testId}-toggle`;
   }
-  return jsx(FocusRing, null, jsx(Box, {
-    as: "button",
+  return jsx(FocusRing, null, jsx("button", {
     type: "button",
-    justifyContent: "center",
-    alignItems: "center",
-    borderStyle: "none",
-    borderRadius: "normal",
-    padding: "space.0",
-    width: "size.200",
-    height: "size.200",
+    css: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    UNSAFE_style: {
-      flex: '0 0 auto',
-      background: 'none',
-      cursor: 'pointer',
-      whiteSpace: 'nowrap'
-    },
-    testId: buttonTestId
+    "data-testid": buttonTestId
   }, jsx(ButtonIcon, {
     label: buttonLabel,
     size: size,

package/dist/es2019/internal/expander.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import Stack from '@atlaskit/primitives/stack';
+import { xcss, Stack, Box } from '@atlaskit/primitives';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+const expanderStyles = xcss({
+  width: '100%'
+});
+const containerStyles = xcss({
+  transition: `max-height 0.3s`
+});
 const Expander = ({
   children,
   isExpanded,
@@ -13,21 +18,18 @@ const Expander = ({
   // the the reveal because we don't know the height of the content.
 
   return /*#__PURE__*/React.createElement(Box, {
-    UNSAFE_style: {
-      minWidth: 0,
+    xcss: containerStyles,
+    style: {
       maxHeight: isExpanded ? 150 : 0,
       flex: '1 1 100%',
-      transition: `max-height 0.3s`
+      minWidth: 0
     },
     "aria-hidden": !isExpanded,
     testId: testId && `${testId}-expander`
   }, /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
   }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, props => /*#__PURE__*/React.createElement(Box, _extends({
-    display: "block",
-    UNSAFE_style: {
-      width: '100%'
-    }
+    xcss: expanderStyles
   }, props), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100"
   }, children)))));

package/dist/es2019/theme.js

@@ -2,11 +2,11 @@
 
 import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
 export const flagBackgroundColor = {
-  error: 'danger.bold',
-  info: 'neutral.bold',
+  error: 'color.background.danger.bold',
+  info: 'color.background.neutral.bold',
   normal: 'elevation.surface.overlay',
-  success: 'success.bold',
-  warning: 'warning.bold'
+  success: 'color.background.success.bold',
+  warning: 'color.background.warning.bold'
 };
 export const flagIconColor = {
   error: `var(--ds-icon-inverse, ${N0})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.2.5",
+	"version": "15.2.7",
 	"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 = "15.2.5";
+var packageVersion = "15.2.7";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-group.js

@@ -1,8 +1,8 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 /** @jsx jsx */
+
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
@@ -12,8 +12,6 @@ import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 export var flagWidth = gridSize * 50;
 export var flagAnimationTime = 400;
-var flagBottom = gridSize * 6;
-var flagLeft = gridSize * 10;
 var defaultFlagGroupContext = {
   onDismissed: noop,
   isDismissAllowed: false
@@ -31,7 +29,7 @@ export function useFlagGroup() {
 // that causes a broken transition
 var baseStyles = css({
   width: flagWidth,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  position: 'absolute',
   bottom: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   '@media (max-width: 560px)': {
@@ -66,15 +64,12 @@ var dismissAllowedStyles = css({
   }
 });
 var flagGroupContainerStyles = css({
-  zIndex: layers.flag(),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  bottom: flagBottom,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  left: flagLeft,
+  position: 'fixed',
+  zIndex: 'flag',
+  bottom: "var(--ds-space-600, 48px)",
+  left: "var(--ds-space-1000, 80px)",
   '@media (max-width: 560px)': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     bottom: 0,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: 0
   }
 });
@@ -116,9 +111,7 @@ var FlagGroup = function FlagGroup(props) {
       }, function (_ref) {
         var className = _ref.className,
           ref = _ref.ref;
-        return jsx(Box, {
-          display: "block",
-          position: "absolute",
+        return jsx("div", {
           css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
           className: className,
           ref: ref
@@ -132,9 +125,7 @@ var FlagGroup = function FlagGroup(props) {
   };
   return jsx(Portal, {
     zIndex: layers.flag()
-  }, jsx(Box, {
-    display: "block",
-    position: "fixed",
+  }, jsx("div", {
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {

package/dist/esm/flag.js

@@ -6,9 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Inline, Stack, Box, xcss } from '@atlaskit/primitives';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
@@ -17,10 +16,28 @@ import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
 import { Expander, DismissButton } from './internal';
+var CSS_VAR_ICON_COLOR = '--flag-icon-color';
+var iconWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'start',
+  flexShrink: 0,
+  color: "var(".concat(CSS_VAR_ICON_COLOR, ")")
+});
+var flagStyles = xcss({
+  boxShadow: 'elevation.shadow.overlay',
+  borderRadius: 'border.radius.100',
+  overflow: 'hidden',
+  zIndex: 'flag',
+  width: '100%',
+  transition: 'background-color 200ms'
+});
+var flagWrapperStyles = css({
+  width: '100%'
+});
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.5"
+  packageVersion: "15.2.7"
 };
 var transitionStyles = css({
   flexGrow: 1,
@@ -110,29 +127,21 @@ var Flag = function Flag(props) {
   var iconColor = flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
   var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
-  return jsx(FocusRing, null, jsx(Box, _extends({
-    display: "block",
+  return jsx(FocusRing, null, jsx("div", _extends({
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    role: "alert",
+    css: flagWrapperStyles,
+    "data-testid": testId
+  }, autoDismissProps), jsx(Box, {
     backgroundColor: flagBackgroundColor[appearance],
-    shadow: "overlay",
     padding: "space.200",
-    borderRadius: "normal",
-    overflow: "hidden",
-    layer: "flag",
-    UNSAFE_style: {
-      width: '100%',
-      transition: 'background-color 200ms'
-    },
-    role: "alert",
-    tabIndex: 0,
-    testId: testId
-  }, autoDismissProps), jsx(Inline, {
+    xcss: flagStyles
+  }, jsx(Inline, {
     space: "space.200"
-  }, jsx(Box, {
-    alignItems: "start",
-    UNSAFE_style: {
-      color: iconColor,
-      flexShrink: 0
-    }
+  }, jsx("div", {
+    css: iconWrapperStyles,
+    style: _defineProperty({}, CSS_VAR_ICON_COLOR, iconColor)
   }, icon), jsx("span", {
     css: transitionStyles
   }, jsx(Stack, {
@@ -141,10 +150,7 @@ var Flag = function Flag(props) {
     space: "space.100",
     spread: "space-between"
   }, jsx(Box, {
-    display: "block",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-025, 2px)"
-    }
+    paddingBlockStart: "space.025"
   }, jsx(Text, {
     color: textColor,
     fontWeight: "semibold",
@@ -176,6 +182,6 @@ var Flag = function Flag(props) {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  })))))));
+  }))))))));
 };
 export default Flag;

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

@@ -1,12 +1,24 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { flagTextColorToken } from '../theme';
+var buttonStyles = css({
+  display: 'flex',
+  width: '24px',
+  height: '24px',
+  padding: "var(--ds-space-0, 0px)",
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 auto',
+  background: 'none',
+  borderStyle: 'none',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap'
+});
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
     onClick = _ref.onClick,
@@ -23,25 +35,12 @@ var DismissButton = function DismissButton(_ref) {
     size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
-  return jsx(FocusRing, null, jsx(Box, {
-    as: "button",
+  return jsx(FocusRing, null, jsx("button", {
     type: "button",
-    justifyContent: "center",
-    alignItems: "center",
-    borderStyle: "none",
-    borderRadius: "normal",
-    padding: "space.0",
-    width: "size.200",
-    height: "size.200",
+    css: buttonStyles,
     onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    UNSAFE_style: {
-      flex: '0 0 auto',
-      background: 'none',
-      cursor: 'pointer',
-      whiteSpace: 'nowrap'
-    },
-    testId: buttonTestId
+    "data-testid": buttonTestId
   }, jsx(ButtonIcon, {
     label: buttonLabel,
     size: size,

package/dist/esm/internal/expander.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import Stack from '@atlaskit/primitives/stack';
+import { xcss, Stack, Box } from '@atlaskit/primitives';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+var expanderStyles = xcss({
+  width: '100%'
+});
+var containerStyles = xcss({
+  transition: "max-height 0.3s"
+});
 var Expander = function Expander(_ref) {
   var children = _ref.children,
     isExpanded = _ref.isExpanded,
@@ -12,11 +17,11 @@ var Expander = function Expander(_ref) {
   // the the reveal because we don't know the height of the content.
 
   return /*#__PURE__*/React.createElement(Box, {
-    UNSAFE_style: {
-      minWidth: 0,
+    xcss: containerStyles,
+    style: {
       maxHeight: isExpanded ? 150 : 0,
       flex: '1 1 100%',
-      transition: "max-height 0.3s"
+      minWidth: 0
     },
     "aria-hidden": !isExpanded,
     testId: testId && "".concat(testId, "-expander")
@@ -24,10 +29,7 @@ var Expander = function Expander(_ref) {
     appear: true
   }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, function (props) {
     return /*#__PURE__*/React.createElement(Box, _extends({
-      display: "block",
-      UNSAFE_style: {
-        width: '100%'
-      }
+      xcss: expanderStyles
     }, props), /*#__PURE__*/React.createElement(Stack, {
       space: "space.100"
     }, children));

package/dist/esm/theme.js

@@ -2,11 +2,11 @@
 
 import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
 export var flagBackgroundColor = {
-  error: 'danger.bold',
-  info: 'neutral.bold',
+  error: 'color.background.danger.bold',
+  info: 'color.background.neutral.bold',
   normal: 'elevation.surface.overlay',
-  success: 'success.bold',
-  warning: 'warning.bold'
+  success: 'color.background.success.bold',
+  warning: 'color.background.warning.bold'
 };
 export var flagIconColor = {
   error: "var(--ds-icon-inverse, ".concat(N0, ")"),

package/dist/esm/version.json

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

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';

package/dist/types/theme.d.ts

@@ -1,4 +1,5 @@
-import { UNSAFE_BoxProps as BoxProps, UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
+import { UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
+import { BoxProps } from '@atlaskit/primitives';
 import { AppearanceTypes } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BoxProps['backgroundColor']>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';

package/dist/types-ts4.5/theme.d.ts

@@ -1,4 +1,5 @@
-import { UNSAFE_BoxProps as BoxProps, UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
+import { UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
+import { BoxProps } from '@atlaskit/primitives';
 import { AppearanceTypes } from './types';
 export declare const flagBackgroundColor: Record<AppearanceTypes, BoxProps['backgroundColor']>;
 export declare const flagIconColor: Record<AppearanceTypes, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.2.5",
+  "version": "15.2.7",
   "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/"
@@ -50,7 +50,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/portal": "^4.3.0",
-    "@atlaskit/primitives": "^0.10.0",
+    "@atlaskit/primitives": "*",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/visually-hidden": "^1.2.0",