@atlaskit/status 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/status
 
+## 1.2.3
+
+### Patch Changes
+
+- [`a6900fd8727`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a6900fd8727) - DSP-6671 - Separates icon and border color and adds semantic tokens to status color palette. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+
+## 1.2.2
+
+### Patch Changes
+
+- [`5d2eeac35f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d2eeac35f7) - Fixes a browser specific bug that occurred in android chromium that led to the component losing focus unexpectedly when selected for editing.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/components/Status.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
@@ -33,10 +33,6 @@ var _analytics = require("./analytics");
 
 var _constants = require("./constants");
 
-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; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -54,6 +50,20 @@ var colorToLozengeAppearanceMap = {
 
 var DEFAULT_APPEARANCE = 'default';
 var MAX_WIDTH = 200;
+/**
+ * This is to account for a bug in android chromium and should be removed
+ * when the editor fixes its focus handling with respect to Status.
+ *
+ * See DSP-7701 for additional context.
+ */
+
+var inlineBlockStyles = (0, _react2.css)({
+  '& > *': {
+    display: 'inline-block !important'
+  }
+}); // eg. Version/4.0 Chrome/95.0.4638.50
+
+var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 
 var StatusInternal = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(StatusInternal, _PureComponent);
@@ -109,7 +119,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
 
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react2.jsx)("span", {
+        css: isAndroidChromium ? inlineBlockStyles : undefined,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
@@ -118,7 +129,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-color": color,
         "data-style": style,
         role: role
-      }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      }, (0, _react2.jsx)(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH
       }, text));

package/dist/cjs/components/analytics.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.1";
+var packageVersion = "1.2.3";
 
 var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {

package/dist/cjs/components/internal/color-palette.js

@@ -31,8 +31,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; }
 
-// color value, label, background, borderColor
-var palette = [['neutral', (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.text', colors.N400)], ['purple', (0, _tokens.token)('color.background.discovery', colors.P50), (0, _tokens.token)('color.text.discovery', colors.P400)], ['blue', (0, _tokens.token)('color.background.information', colors.B50), (0, _tokens.token)('color.text.information', colors.B400)], ['red', (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R400)], ['yellow', (0, _tokens.token)('color.background.warning', colors.Y50), (0, _tokens.token)('color.text.warning', colors.Y400)], ['green', (0, _tokens.token)('color.background.success', colors.G50), (0, _tokens.token)('color.text.success', colors.G400)]];
+var palette = [['neutral', (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.border.bold', colors.N400), (0, _tokens.token)('color.icon', colors.N400)], ['purple', (0, _tokens.token)('color.background.discovery', colors.P50), (0, _tokens.token)('color.border.discovery', colors.P400), (0, _tokens.token)('color.icon.discovery', colors.P400)], ['blue', (0, _tokens.token)('color.background.information', colors.B50), (0, _tokens.token)('color.border.information', colors.B400), (0, _tokens.token)('color.icon.information', colors.B400)], ['red', (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.border.danger', colors.R400), (0, _tokens.token)('color.icon.danger', colors.R400)], ['yellow', (0, _tokens.token)('color.background.warning', colors.Y50), (0, _tokens.token)('color.border.warning', colors.Y400), (0, _tokens.token)('color.icon.warning', colors.Y400)], ['green', (0, _tokens.token)('color.background.success', colors.G50), (0, _tokens.token)('color.border.success', colors.G400), (0, _tokens.token)('color.icon.success', colors.G400)]];
 var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 var VK_LEFT = 37; //ArrowLeft
 
@@ -123,16 +122,18 @@ var _default = function _default(_ref) {
       },
       onKeyDown: memoizedHandleKeyDown
     }, palette.map(function (_ref4, i) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
           colorValue = _ref5[0],
           backgroundColor = _ref5[1],
-          borderColor = _ref5[2];
+          borderColor = _ref5[2],
+          iconColor = _ref5[3];
 
       return (0, _react2.jsx)(_color.default, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/cjs/components/internal/color.js

@@ -107,9 +107,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
+          iconColor = _this$props2.iconColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
-      var borderStyle = "1px solid ".concat(borderColor);
       return (0, _react2.jsx)("span", {
         css: buttonWrapperStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
@@ -129,11 +129,11 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
-            border: borderStyle
+            borderColor: borderColor
           },
           ref: setRef
         }, isSelected && (0, _react2.jsx)(_done.default, {
-          primaryColor: borderColor,
+          primaryColor: iconColor,
           label: labels[0]
         }));
       }));

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.3"
 }

package/dist/es2019/components/Status.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
@@ -19,6 +21,20 @@ const colorToLozengeAppearanceMap = {
 
 const DEFAULT_APPEARANCE = 'default';
 const MAX_WIDTH = 200;
+/**
+ * This is to account for a bug in android chromium and should be removed
+ * when the editor fixes its focus handling with respect to Status.
+ *
+ * See DSP-7701 for additional context.
+ */
+
+const inlineBlockStyles = css({
+  '& > *': {
+    display: 'inline-block !important'
+  }
+}); // eg. Version/4.0 Chrome/95.0.4638.50
+
+const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 
 class StatusInternal extends PureComponent {
   constructor(...args) {
@@ -63,7 +79,8 @@ class StatusInternal extends PureComponent {
 
     const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
+      css: isAndroidChromium ? inlineBlockStyles : undefined,
       className: "status-lozenge-span",
       onClick: onClick,
       onMouseEnter: this.handleMouseEnter,
@@ -72,7 +89,7 @@ class StatusInternal extends PureComponent {
       "data-color": color,
       "data-style": style,
       role: role
-    }, /*#__PURE__*/React.createElement(Lozenge, {
+    }, jsx(Lozenge, {
       appearance: appearance,
       maxWidth: MAX_WIDTH
     }, text));

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "1.2.1";
+const packageVersion = "1.2.3";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = { ...payload,
     eventType: 'ui'

package/dist/es2019/components/internal/color-palette.js

@@ -4,9 +4,8 @@ import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import Color from './color'; // color value, label, background, borderColor
-
-const palette = [['neutral', token('color.background.neutral', colors.N40), token('color.text', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.text.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.text.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.text.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.success', colors.G400)]];
+import Color from './color';
+const palette = [['neutral', token('color.background.neutral', colors.N40), token('color.border.bold', colors.N400), token('color.icon', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.border.discovery', colors.P400), token('color.icon.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.border.information', colors.B400), token('color.icon.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.border.danger', colors.R400), token('color.icon.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.border.warning', colors.Y400), token('color.icon.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.border.success', colors.G400), token('color.icon.success', colors.G400)]];
 const colorPaletteWrapperStyles = css`
   margin: ${gridSize()}px ${gridSize()}px 0 ${gridSize()}px;
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
@@ -91,12 +90,13 @@ export default (({
         maxWidth: cols * 32
       },
       onKeyDown: memoizedHandleKeyDown
-    }, palette.map(([colorValue, backgroundColor, borderColor], i) => {
+    }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => {
       return jsx(Color, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/es2019/components/internal/color.js

@@ -76,10 +76,10 @@ export default class Color extends PureComponent {
       backgroundColor,
       isSelected,
       borderColor,
+      iconColor,
       value,
       setRef
     } = this.props;
-    const borderStyle = `1px solid ${borderColor}`;
     return jsx("span", {
       css: buttonWrapperStyles
     }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
@@ -98,11 +98,11 @@ export default class Color extends PureComponent {
       "aria-pressed": isSelected,
       style: {
         backgroundColor: backgroundColor || 'transparent',
-        border: borderStyle
+        borderColor
       },
       ref: setRef
     }, isSelected && jsx(EditorDoneIcon, {
-      primaryColor: borderColor,
+      primaryColor: iconColor,
       label: labels[0]
     }))));
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.3"
 }

package/dist/esm/components/Status.js

@@ -10,8 +10,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
@@ -30,6 +31,20 @@ var colorToLozengeAppearanceMap = {
 
 var DEFAULT_APPEARANCE = 'default';
 var MAX_WIDTH = 200;
+/**
+ * This is to account for a bug in android chromium and should be removed
+ * when the editor fixes its focus handling with respect to Status.
+ *
+ * See DSP-7701 for additional context.
+ */
+
+var inlineBlockStyles = css({
+  '& > *': {
+    display: 'inline-block !important'
+  }
+}); // eg. Version/4.0 Chrome/95.0.4638.50
+
+var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
 
 var StatusInternal = /*#__PURE__*/function (_PureComponent) {
   _inherits(StatusInternal, _PureComponent);
@@ -89,7 +104,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
 
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
+        css: isAndroidChromium ? inlineBlockStyles : undefined,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
@@ -98,7 +114,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-color": color,
         "data-style": style,
         role: role
-      }, /*#__PURE__*/React.createElement(Lozenge, {
+      }, jsx(Lozenge, {
         appearance: appearance,
         maxWidth: MAX_WIDTH
       }, text));

package/dist/esm/components/analytics.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.1";
+var packageVersion = "1.2.3";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/esm/components/internal/color-palette.js

@@ -9,9 +9,8 @@ import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { useEffect, useRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import Color from './color'; // color value, label, background, borderColor
-
-var palette = [['neutral', token('color.background.neutral', colors.N40), token('color.text', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.text.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.text.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.text.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.success', colors.G400)]];
+import Color from './color';
+var palette = [['neutral', token('color.background.neutral', colors.N40), token('color.border.bold', colors.N400), token('color.icon', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.border.discovery', colors.P400), token('color.icon.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.border.information', colors.B400), token('color.icon.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.border.danger', colors.R400), token('color.icon.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y50), token('color.border.warning', colors.Y400), token('color.icon.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.border.success', colors.G400), token('color.icon.success', colors.G400)]];
 var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), gridSize(), gridSize(), gridSize());
 var VK_LEFT = 37; //ArrowLeft
 
@@ -101,16 +100,18 @@ export default (function (_ref) {
       },
       onKeyDown: memoizedHandleKeyDown
     }, palette.map(function (_ref4, i) {
-      var _ref5 = _slicedToArray(_ref4, 3),
+      var _ref5 = _slicedToArray(_ref4, 4),
           colorValue = _ref5[0],
           backgroundColor = _ref5[1],
-          borderColor = _ref5[2];
+          borderColor = _ref5[2],
+          iconColor = _ref5[3];
 
       return jsx(Color, {
         key: colorValue,
         value: colorValue,
         backgroundColor: backgroundColor,
         borderColor: borderColor,
+        iconColor: iconColor,
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,

package/dist/esm/components/internal/color.js

@@ -84,9 +84,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
+          iconColor = _this$props2.iconColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
-      var borderStyle = "1px solid ".concat(borderColor);
       return jsx("span", {
         css: buttonWrapperStyles
       }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
@@ -106,11 +106,11 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
-            border: borderStyle
+            borderColor: borderColor
           },
           ref: setRef
         }, isSelected && jsx(EditorDoneIcon, {
-          primaryColor: borderColor,
+          primaryColor: iconColor,
           label: labels[0]
         }));
       }));

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.3"
 }

package/dist/types/components/Status.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
 export declare type StatusStyle = 'bold' | 'subtle';
@@ -12,4 +12,4 @@ export interface OwnProps {
     role?: string;
 }
 export declare type Props = OwnProps & WithAnalyticsEventsProps;
-export declare const Status: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/components/internal/color.d.ts

@@ -9,6 +9,7 @@ export interface ColorProps {
     onHover?: (value: ColorType) => void;
     backgroundColor: string;
     borderColor: string;
+    iconColor: string;
     setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
 }
 export default class Color extends PureComponent<ColorProps> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/status"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { default as React_2 } from 'react';
@@ -15,7 +20,7 @@ import { WithIntlProps } from 'react-intl-next';
 import { WrappedComponentProps } from 'react-intl-next';
 
 // @public (undocumented)
-export type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+export type Color = 'blue' | 'green' | 'neutral' | 'purple' | 'red' | 'yellow';
 
 // @public (undocumented)
 type ColorType = Color;
@@ -78,3 +83,5 @@ export type StatusStyle = 'bold' | 'subtle';
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->