@atlaskit/status 1.4.9 → 1.4.10

package/afm-cc/tsconfig.json

@@ -27,6 +27,9 @@
         {
             "path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/textfield/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "../../../../tsconfig.products.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__status/app",
+    "composite": true,
+    "rootDir": "../",
+    "baseUrl": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/icon/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/lozenge/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/textfield/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/theme/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+    }
+  ]
+}

package/dist/cjs/components/Status.js

@@ -19,7 +19,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("./analytics");
 var _constants = require("./constants");
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // Disabling linting for nextline since these values are used as text reference, but not used as part of the CSS
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
 
@@ -44,7 +44,9 @@ var MAX_WIDTH = 200;
  * See DSP-7701 for additional context.
  */
 var inlineBlockStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     display: 'inline-block !important',
     lineHeight: '16px',
     verticalAlign: 'middle'
@@ -97,7 +99,9 @@ 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 (0, _react2.jsx)("span", {
-        css: isAndroidChromium ? inlineBlockStyles : undefined,
+        css: isAndroidChromium ? inlineBlockStyles : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,

package/dist/cjs/components/StatusPicker.js

@@ -13,20 +13,24 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 var _i18n = require("./i18n");
-var _templateObject;
-/** @jsx jsx */
+var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var fieldTextWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", ";\n"])), "var(--ds-space-100, 8px)");
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var fieldTextWrapperStyles = (0, _react2.css)({
+  margin: "0 ".concat("var(--ds-space-100, 8px)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& [data-ds--text-field--container]': {
+    borderColor: "var(--ds-border-bold, ".concat(_colors.N80A, ")")
+  }
+});
 var Picker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Picker, _PureComponent);
   var _super = _createSuper(Picker);

package/dist/cjs/components/analytics.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.4.9";
+var packageVersion = "1.4.10";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -14,10 +14,13 @@ var _react2 = require("@emotion/react");
 var _color = _interopRequireDefault(require("./color"));
 var _templateObject;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var palette = [['neutral', "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['purple', "var(--ds-background-discovery, ".concat(colors.P50, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon-discovery, ".concat(colors.P400, ")")], ['blue', "var(--ds-background-information, ".concat(colors.B50, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon-information, ".concat(colors.B400, ")")], ['red', "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon-danger, ".concat(colors.R400, ")")], ['yellow', "var(--ds-background-warning, ".concat(colors.Y50, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon-warning, ".concat(colors.Y400, ")")], ['green', "var(--ds-background-success, ".concat(colors.G50, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon-success, ".concat(colors.G400, ")")]];
-var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 0px;\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tpadding-left: 0px;\n\tmargin: ", " ", " 0 ", ";\n\t/* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n\tdisplay: flex;\n\tflex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 var VK_LEFT = 37; //ArrowLeft
 var VK_RIGHT = 39; //ArrowRight
 var VK_UP = 38; //ArrowUp
@@ -70,14 +73,16 @@ var _default = exports.default = function _default(_ref) {
   }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
-      We need to disable below eslint rule becuase of role "radiogroup". This role was added
-      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
-      When we migrated to emotion from styled component, we started getting this error.
-      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-     */
+        We need to disable below eslint rule becuase of role "radiogroup". This role was added
+        in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+        When we migrated to emotion from styled component, we started getting this error.
+        Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+       */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     (0, _react2.jsx)("ul", {
-      css: colorPaletteWrapperStyles,
+      css: colorPaletteWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       style: {
         maxWidth: cols * 32

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

@@ -16,23 +16,36 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _colors = require("@atlaskit/theme/colors");
+var _primitives = require("@atlaskit/primitives");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _constants = require("../constants");
 var _i18n = require("../i18n");
-var _templateObject, _templateObject2;
+var _templateObject;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var buttonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), "var(--ds-background-neutral, ".concat(_colors.N900, ")"), "var(--ds-border, ".concat(_colors.N0, ")"));
+var buttonStyles = (0, _primitives.xcss)({
+  height: '24px',
+  width: '24px',
+  background: 'color.background.neutral',
+  padding: 'space.0',
+  borderRadius: 'border.radius',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  display: 'block',
+  overflow: 'hidden'
+});
 
 // We have tried with changing border and padding from 1px to token near version 2px,
 // the pop - up is being expanded to two lines.
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-var buttonWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 0 ", ";\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: ", ";\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", "var(--ds-border, ".concat(_colors.N50, ")"));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var buttonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid transparent;\n\tmargin: 0 ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 1px;\n\tborder-radius: ", ";\n\t&:hover {\n\t\tborder: 1px solid ", ";\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", "var(--ds-border, ".concat(_colors.N50, ")"));
 var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Color, _PureComponent);
   var _super = _createSuper(Color);
@@ -82,14 +95,13 @@ var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
       return (0, _react2.jsx)("li", {
         css: buttonWrapperStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
-        return (0, _react2.jsx)("button", {
-          css: buttonStyles,
+        return (0, _react2.jsx)(_primitives.Pressable, {
+          xcss: buttonStyles,
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
-          className: "".concat(isSelected ? 'selected' : ''),
           title: labels[0]
           // button element does not support aria-selected.
           // For button selected (to be precise pressed) or not
@@ -99,6 +111,7 @@ var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             borderColor: borderColor
           },
           ref: setRef

package/dist/es2019/components/Status.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { PureComponent } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -31,7 +32,9 @@ const MAX_WIDTH = 200;
  * See DSP-7701 for additional context.
  */
 const inlineBlockStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     display: 'inline-block !important',
     lineHeight: '16px',
     verticalAlign: 'middle'
@@ -75,7 +78,9 @@ class StatusInternal extends PureComponent {
     const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
     // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
     return jsx("span", {
-      css: isAndroidChromium ? inlineBlockStyles : undefined,
+      css: isAndroidChromium ? inlineBlockStyles : undefined
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "status-lozenge-span",
       onClick: onClick,
       onMouseEnter: this.handleMouseEnter,

package/dist/es2019/components/StatusPicker.js

@@ -3,12 +3,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import TextField from '@atlaskit/textfield';
 import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-const fieldTextWrapperStyles = css`
-  margin: 0 ${"var(--ds-space-100, 8px)"};
-`;
+import { N80A } from '@atlaskit/theme/colors';
+const fieldTextWrapperStyles = css({
+  margin: `0 ${"var(--ds-space-100, 8px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& [data-ds--text-field--container]': {
+    borderColor: `var(--ds-border-bold, ${N80A})`
+  }
+});
 class Picker extends PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "1.4.9";
+const packageVersion = "1.4.10";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

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

@@ -1,16 +1,18 @@
 /** @jsx jsx */
 import * as colors from '@atlaskit/theme/colors';
 import React, { useEffect, useRef, useCallback, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Color from './color';
 const palette = [['neutral', `var(--ds-background-neutral, ${colors.N40})`, `var(--ds-border-bold, ${colors.N400})`, `var(--ds-icon, ${colors.N400})`], ['purple', `var(--ds-background-discovery, ${colors.P50})`, `var(--ds-border-discovery, ${colors.P400})`, `var(--ds-icon-discovery, ${colors.P400})`], ['blue', `var(--ds-background-information, ${colors.B50})`, `var(--ds-border-information, ${colors.B400})`, `var(--ds-icon-information, ${colors.B400})`], ['red', `var(--ds-background-danger, ${colors.R50})`, `var(--ds-border-danger, ${colors.R400})`, `var(--ds-icon-danger, ${colors.R400})`], ['yellow', `var(--ds-background-warning, ${colors.Y50})`, `var(--ds-border-warning, ${colors.Y400})`, `var(--ds-icon-warning, ${colors.Y400})`], ['green', `var(--ds-background-success, ${colors.G50})`, `var(--ds-border-success, ${colors.G400})`, `var(--ds-icon-success, ${colors.G400})`]];
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 const colorPaletteWrapperStyles = css`
-  padding-left: 0px;
-  margin: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0
-    ${"var(--ds-space-100, 8px)"};
-  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
-  display: flex;
-  flex-wrap: wrap;
+	padding-left: 0px;
+	margin: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0 ${"var(--ds-space-100, 8px)"};
+	/* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
+	display: flex;
+	flex-wrap: wrap;
 `;
 const VK_LEFT = 37; //ArrowLeft
 const VK_RIGHT = 39; //ArrowRight
@@ -57,14 +59,16 @@ export default (({
   }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
-      We need to disable below eslint rule becuase of role "radiogroup". This role was added
-      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
-      When we migrated to emotion from styled component, we started getting this error.
-      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-     */
+        We need to disable below eslint rule becuase of role "radiogroup". This role was added
+        in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+        When we migrated to emotion from styled component, we started getting this error.
+        Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+       */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     jsx("ul", {
-      css: colorPaletteWrapperStyles,
+      css: colorPaletteWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       style: {
         maxWidth: cols * 32

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

@@ -1,39 +1,41 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-import { N900, N0, N50 } from '@atlaskit/theme/colors';
+import { N50 } from '@atlaskit/theme/colors';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-const buttonStyles = css`
-  height: 24px;
-  width: 24px;
-  background: ${`var(--ds-background-neutral, ${N900})`};
-  padding: 0;
-  border-radius: 4px;
-  border: 1px solid ${`var(--ds-border, ${N0})`};
-  cursor: pointer;
-  display: block;
-  box-sizing: border-box;
-  overflow: hidden;
-`;
+const buttonStyles = xcss({
+  height: '24px',
+  width: '24px',
+  background: 'color.background.neutral',
+  padding: 'space.0',
+  borderRadius: 'border.radius',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  display: 'block',
+  overflow: 'hidden'
+});
 
 // We have tried with changing border and padding from 1px to token near version 2px,
 // the pop - up is being expanded to two lines.
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 const buttonWrapperStyles = css`
-  border: 1px solid transparent;
-  margin: 0 ${"var(--ds-space-025, 2px)"};
-  font-size: 0;
-  display: flex;
-  align-items: center;
-  padding: 1px;
-  border-radius: ${"var(--ds-space-075, 6px)"};
-  &:hover {
-    border: 1px solid ${`var(--ds-border, ${N50})`};
-  }
+	border: 1px solid transparent;
+	margin: 0 ${"var(--ds-space-025, 2px)"};
+	font-size: 0;
+	display: flex;
+	align-items: center;
+	padding: 1px;
+	border-radius: ${"var(--ds-space-075, 6px)"};
+	&:hover {
+		border: 1px solid ${`var(--ds-border, ${N50})`};
+	}
 `;
 export default class Color extends PureComponent {
   constructor(...args) {
@@ -76,14 +78,13 @@ export default class Color extends PureComponent {
     } = this.props;
     return jsx("li", {
       css: buttonWrapperStyles
-    }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
-      css: buttonStyles,
+    }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx(Pressable, {
+      xcss: buttonStyles,
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
-      className: `${isSelected ? 'selected' : ''}`,
       title: labels[0]
       // button element does not support aria-selected.
       // For button selected (to be precise pressed) or not
@@ -93,6 +94,7 @@ export default class Color extends PureComponent {
       "aria-pressed": isSelected,
       style: {
         backgroundColor: backgroundColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         borderColor
       },
       ref: setRef

package/dist/esm/components/Status.js

@@ -9,6 +9,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import { PureComponent } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -39,7 +40,9 @@ var MAX_WIDTH = 200;
  * See DSP-7701 for additional context.
  */
 var inlineBlockStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     display: 'inline-block !important',
     lineHeight: '16px',
     verticalAlign: 'middle'
@@ -92,7 +95,9 @@ 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 jsx("span", {
-        css: isAndroidChromium ? inlineBlockStyles : undefined,
+        css: isAndroidChromium ? inlineBlockStyles : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,

package/dist/esm/components/StatusPicker.js

@@ -5,18 +5,24 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import TextField from '@atlaskit/textfield';
 import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-var fieldTextWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n"])), "var(--ds-space-100, 8px)");
+import { N80A } from '@atlaskit/theme/colors';
+var fieldTextWrapperStyles = css({
+  margin: "0 ".concat("var(--ds-space-100, 8px)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& [data-ds--text-field--container]': {
+    borderColor: "var(--ds-border-bold, ".concat(N80A, ")")
+  }
+});
 var Picker = /*#__PURE__*/function (_PureComponent) {
   _inherits(Picker, _PureComponent);
   var _super = _createSuper(Picker);

package/dist/esm/components/analytics.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.4.9";
+var packageVersion = "1.4.10";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -4,10 +4,13 @@ var _templateObject;
 /** @jsx jsx */
 import * as colors from '@atlaskit/theme/colors';
 import React, { useEffect, useRef, useCallback, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Color from './color';
 var palette = [['neutral', "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['purple', "var(--ds-background-discovery, ".concat(colors.P50, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon-discovery, ".concat(colors.P400, ")")], ['blue', "var(--ds-background-information, ".concat(colors.B50, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon-information, ".concat(colors.B400, ")")], ['red', "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon-danger, ".concat(colors.R400, ")")], ['yellow', "var(--ds-background-warning, ".concat(colors.Y50, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon-warning, ".concat(colors.Y400, ")")], ['green', "var(--ds-background-success, ".concat(colors.G50, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon-success, ".concat(colors.G400, ")")]];
-var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: 0px;\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tpadding-left: 0px;\n\tmargin: ", " ", " 0 ", ";\n\t/* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n\tdisplay: flex;\n\tflex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 var VK_LEFT = 37; //ArrowLeft
 var VK_RIGHT = 39; //ArrowRight
 var VK_UP = 38; //ArrowUp
@@ -60,14 +63,16 @@ export default (function (_ref) {
   }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
-      We need to disable below eslint rule becuase of role "radiogroup". This role was added
-      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
-      When we migrated to emotion from styled component, we started getting this error.
-      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
-     */
+        We need to disable below eslint rule becuase of role "radiogroup". This role was added
+        in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+        When we migrated to emotion from styled component, we started getting this error.
+        Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+       */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     jsx("ul", {
-      css: colorPaletteWrapperStyles,
+      css: colorPaletteWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       style: {
         maxWidth: cols * 32

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

@@ -6,23 +6,36 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-import { N900, N0, N50 } from '@atlaskit/theme/colors';
+import { N50 } from '@atlaskit/theme/colors';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), "var(--ds-background-neutral, ".concat(N900, ")"), "var(--ds-border, ".concat(N0, ")"));
+var buttonStyles = xcss({
+  height: '24px',
+  width: '24px',
+  background: 'color.background.neutral',
+  padding: 'space.0',
+  borderRadius: 'border.radius',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  display: 'block',
+  overflow: 'hidden'
+});
 
 // We have tried with changing border and padding from 1px to token near version 2px,
 // the pop - up is being expanded to two lines.
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-var buttonWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 0 ", ";\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: ", ";\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", "var(--ds-border, ".concat(N50, ")"));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var buttonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tborder: 1px solid transparent;\n\tmargin: 0 ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 1px;\n\tborder-radius: ", ";\n\t&:hover {\n\t\tborder: 1px solid ", ";\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", "var(--ds-border, ".concat(N50, ")"));
 var Color = /*#__PURE__*/function (_PureComponent) {
   _inherits(Color, _PureComponent);
   var _super = _createSuper(Color);
@@ -72,14 +85,13 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       return jsx("li", {
         css: buttonWrapperStyles
       }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
-        return jsx("button", {
-          css: buttonStyles,
+        return jsx(Pressable, {
+          xcss: buttonStyles,
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
-          className: "".concat(isSelected ? 'selected' : ''),
           title: labels[0]
           // button element does not support aria-selected.
           // For button selected (to be precise pressed) or not
@@ -89,6 +101,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             borderColor: borderColor
           },
           ref: setRef