@atlaskit/status 2.0.0 → 3.0.1

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _color = _interopRequireDefault(require("./color"));
@@ -21,8 +20,8 @@ var _templateObject;
 // 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 && {}.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 paletteLegacy = [['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 paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, ".concat(colors.N300, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['blue', "var(--ds-background-information-pressed, ".concat(colors.B300, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['green', "var(--ds-background-success-pressed, ".concat(colors.G300, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['yellow', "var(--ds-background-warning-pressed, ".concat(colors.Y300, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['red', "var(--ds-background-danger-pressed, ".concat(colors.R300, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon, ".concat(colors.R400, ")")], ['purple', "var(--ds-background-discovery-pressed, ".concat(colors.P300, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")]];
+var paletteLegacy = [['neutral', "var(--ds-background-neutral, #091E420F)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery, #F3F0FF)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon-discovery, #8270DB)"], ['blue', "var(--ds-background-information, #E9F2FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon-information, #1D7AFC)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF7D6)", "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)"], ['green', "var(--ds-background-success, #DCFFF1)", "var(--ds-border-success, #22A06B)", "var(--ds-icon-success, #22A06B)"]];
+var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['blue', "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon, #44546F)"], ['green', "var(--ds-background-success-pressed, #7EE2B8)", "var(--ds-border-success, #22A06B)", "var(--ds-icon, #44546F)"], ['yellow', "var(--ds-background-warning-pressed, #F5CD47)", "var(--ds-border-warning, #E56910)", "var(--ds-icon, #44546F)"], ['red', "var(--ds-background-danger-pressed, #FD9891)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery-pressed, #B8ACF6)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon, #44546F)"]];
 var getPalette = function getPalette() {
   return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
 };

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

@@ -14,7 +14,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
-var _colors = require("@atlaskit/theme/colors");
 var _primitives = require("@atlaskit/primitives");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -47,7 +46,7 @@ var buttonStyles = (0, _primitives.xcss)({
 // 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, @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 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, #091E4224)");
 var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
   function Color() {
     var _this;

package/dist/cjs/element.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Status", {
-  enumerable: true,
-  get: function get() {
-    return _Status.Status;
-  }
-});
-var _Status = require("./components/Status");
+exports.Status = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _Status = require("./components/Status");
+var _Status2 = require("./components/compiled/Status");
+var Status = exports.Status = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _Status2.Status, _Status.Status);

package/dist/cjs/index.js

@@ -3,17 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Status", {
-  enumerable: true,
-  get: function get() {
-    return _Status.Status;
-  }
-});
-Object.defineProperty(exports, "StatusPicker", {
-  enumerable: true,
-  get: function get() {
-    return _StatusPicker.StatusPicker;
-  }
-});
+exports.StatusPicker = exports.Status = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _Status = require("./components/Status");
-var _StatusPicker = require("./components/StatusPicker");
+var _Status2 = require("./components/compiled/Status");
+var _StatusPicker = require("./components/StatusPicker");
+var _StatusPicker2 = require("./components/compiled/StatusPicker");
+var Status = exports.Status = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _Status2.Status, _Status.Status);
+var StatusPicker = exports.StatusPicker = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _StatusPicker2.StatusPicker, _StatusPicker.StatusPicker);

package/dist/cjs/picker.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "StatusPicker", {
-  enumerable: true,
-  get: function get() {
-    return _StatusPicker.StatusPicker;
-  }
-});
-var _StatusPicker = require("./components/StatusPicker");
+exports.StatusPicker = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _StatusPicker = require("./components/StatusPicker");
+var _StatusPicker2 = require("./components/compiled/StatusPicker");
+var StatusPicker = exports.StatusPicker = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _StatusPicker2.StatusPicker, _StatusPicker.StatusPicker);

package/dist/es2019/components/StatusPicker.js

@@ -10,12 +10,11 @@ import { injectIntl } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-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})`
+    borderColor: "var(--ds-border-bold, #758195)"
   }
 });
 class Picker extends PureComponent {

package/dist/es2019/components/analytics.js

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

package/dist/es2019/components/compiled/Status.compiled.css

@@ -0,0 +1,3 @@
+._1frxnkob>*{vertical-align:middle}
+._1k0l7vkz>*{line-height:1pc}
+._d0dzdf4r>*{display:inline-block!important}

package/dist/es2019/components/compiled/Status.js

@@ -0,0 +1,110 @@
+/* Status.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Status.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { PureComponent } from 'react';
+import Lozenge from '@atlaskit/lozenge/compiled';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createStatusAnalyticsAndFire } from '../analytics';
+import { ANALYTICS_HOVER_DELAY } from '../constants';
+const colorToLozengeAppearanceMap = {
+  neutral: 'default',
+  purple: 'new',
+  blue: 'inprogress',
+  red: 'removed',
+  yellow: 'moved',
+  green: 'success'
+};
+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 = null;
+
+// 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) {
+    super(...args);
+    _defineProperty(this, "hoverStartTime", 0);
+    _defineProperty(this, "handleMouseEnter", _e => {
+      this.hoverStartTime = Date.now();
+    });
+    _defineProperty(this, "handleMouseLeave", _e => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover();
+      }
+      this.hoverStartTime = 0;
+    });
+  }
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+  render() {
+    const {
+      text,
+      color,
+      style,
+      role,
+      onClick,
+      isBold
+    } = this.props;
+    if (text.trim().length === 0) {
+      return null;
+    }
+    const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+    // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
+    return /*#__PURE__*/React.createElement("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
+      onClick: onClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      "data-node-type": "status",
+      "data-color": color,
+      "data-style": style,
+      role: role
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: appearance,
+      maxWidth: MAX_WIDTH,
+      isBold: isBold
+    }, text));
+  }
+}
+_defineProperty(StatusInternal, "displayName", 'StatusInternal');
+export const Status = withAnalyticsEvents({
+  onClick: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'clicked',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  },
+  onHover: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'hovered',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  }
+})(StatusInternal);

package/dist/es2019/components/compiled/StatusPicker.compiled.css

@@ -0,0 +1,5 @@
+
+._n6347jlr [data-ds--text-field--container]{border-color:var(--ds-border-bold,#758195)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}

package/dist/es2019/components/compiled/StatusPicker.js

@@ -0,0 +1,86 @@
+/* StatusPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./StatusPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import TextField from '@atlaskit/textfield';
+import React, { PureComponent } from 'react';
+import { injectIntl } from 'react-intl-next';
+import ColorPalette from './internal/color-palette';
+import { messages } from '../i18n';
+const fieldTextWrapperStyles = null;
+class Picker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "fieldTextWrapperKey", Math.random().toString());
+    _defineProperty(this, "colorPaletteKey", Math.random().toString());
+    _defineProperty(this, "onChange", evt => {
+      // @ts-ignore
+      this.props.onTextChanged(evt.target.value);
+    });
+    _defineProperty(this, "onKeyPress", event => {
+      if (event.key === 'Enter') {
+        this.props.onEnter();
+      }
+    });
+    _defineProperty(this, "handleInputRef", ref => {
+      this.inputRef = ref;
+      if (ref && this.props.autoFocus) {
+        this.focusInput();
+      }
+    });
+    _defineProperty(this, "focusInput", () => {
+      if (!this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top
+      this.autofocusTimeout = setTimeout(() => {
+        var _this$inputRef;
+        (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
+      });
+    });
+  }
+  render() {
+    const {
+      text,
+      selectedColor,
+      onColorClick,
+      onColorHover,
+      intl
+    } = this.props;
+
+    // Using <React.Fragment> instead of [] to workaround Enzyme
+    // (https://github.com/airbnb/enzyme/issues/1149)
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      key: this.fieldTextWrapperKey,
+      className: ax(["_19pkidpf _otyridpf _2hwxu2gc _18u0u2gc _n6347jlr"])
+    }, /*#__PURE__*/React.createElement(TextField, {
+      value: text,
+      isCompact: true,
+      ref: this.handleInputRef,
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      spellCheck: false,
+      autoComplete: "off",
+      "aria-label": intl.formatMessage(messages.statusInputLabel)
+    })), /*#__PURE__*/React.createElement(ColorPalette, {
+      key: this.colorPaletteKey,
+      onClick: onColorClick,
+      onHover: onColorHover,
+      selectedColor: selectedColor
+    }));
+  }
+  componentDidUpdate() {
+    if (this.inputRef && this.props.autoFocus) {
+      this.focusInput();
+    }
+  }
+  componentWillUnmount() {
+    if (this.autofocusTimeout !== undefined) {
+      clearTimeout(this.autofocusTimeout);
+    }
+  }
+}
+_defineProperty(Picker, "defaultProps", {
+  autoFocus: true
+});
+export const StatusPicker = injectIntl(Picker);

package/dist/es2019/components/compiled/internal/color-palette.compiled.css

@@ -0,0 +1,7 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bvidpf{padding-left:0}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}

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

@@ -0,0 +1,78 @@
+/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./color-palette.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import Color from './color';
+import { fg } from '@atlaskit/platform-feature-flags';
+const paletteLegacy = [['neutral', "var(--ds-background-neutral, #091E420F)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery, #F3F0FF)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon-discovery, #8270DB)"], ['blue', "var(--ds-background-information, #E9F2FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon-information, #1D7AFC)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF7D6)", "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)"], ['green', "var(--ds-background-success, #DCFFF1)", "var(--ds-border-success, #22A06B)", "var(--ds-icon-success, #22A06B)"]];
+const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['blue', "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon, #44546F)"], ['green', "var(--ds-background-success-pressed, #7EE2B8)", "var(--ds-border-success, #22A06B)", "var(--ds-icon, #44546F)"], ['yellow', "var(--ds-background-warning-pressed, #F5CD47)", "var(--ds-border-warning, #E56910)", "var(--ds-icon, #44546F)"], ['red', "var(--ds-background-danger-pressed, #FD9891)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery-pressed, #B8ACF6)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon, #44546F)"]];
+const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
+const palette = getPalette();
+
+// 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 = null;
+const VK_LEFT = 37; //ArrowLeft
+const VK_RIGHT = 39; //ArrowRight
+const VK_UP = 38; //ArrowUp
+const VK_DOWN = 40; //ArrowDown
+const VK_TAB = 9;
+export default (({
+  cols = 7,
+  onClick,
+  selectedColor,
+  className,
+  onHover
+}) => {
+  const colorRefs = useRef([]);
+  const [currentFocusedColor, setCurrentFocusedColor] = useState(0);
+  useEffect(() => {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  const memoizedHandleKeyDown = useCallback(e => {
+    let newColorIndex = null;
+    const nextColor = () => currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
+    const previousColor = () => currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
+    switch (e.keyCode) {
+      case VK_RIGHT:
+      case VK_DOWN:
+        e.preventDefault();
+        newColorIndex = nextColor();
+        break;
+      case VK_LEFT:
+      case VK_UP:
+        e.preventDefault();
+        newColorIndex = previousColor();
+        break;
+      case VK_TAB:
+        setCurrentFocusedColor(0);
+        break;
+    }
+    if (newColorIndex === null) {
+      return;
+    }
+    setCurrentFocusedColor(newColorIndex);
+    const newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
+  return /*#__PURE__*/React.createElement("ul", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
+    style: {
+      maxWidth: cols * 32
+    },
+    onKeyDown: memoizedHandleKeyDown
+  }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => {
+    return /*#__PURE__*/React.createElement(Color, {
+      key: colorValue,
+      value: colorValue,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      iconColor: iconColor,
+      onClick: onClick,
+      onHover: onHover,
+      isSelected: colorValue === selectedColor,
+      tabIndex: i === 0 ? 0 : -1,
+      setRef: el => colorRefs.current[i] = el
+    });
+  }));
+});

package/dist/es2019/components/compiled/internal/color.compiled.css

@@ -0,0 +1,27 @@
+
+._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._2rko12x7{border-radius:var(--ds-space-075,6px)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189et94y{border-width:1px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._18m915vq{overflow-y:hidden}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bvt94y{padding-left:1px}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkidpf{margin-top:0}
+._1bsb1tcg{width:24px}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1reo15vq{overflow-x:hidden}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qt94y{padding-top:1px}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdt94y{padding-bottom:1px}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyridpf{margin-bottom:0}
+._u5f3t94y{padding-right:1px}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._bfw7zgxb:hover{border:1px solid var(--ds-border,#091e4224)}

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

@@ -0,0 +1,90 @@
+/* color.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./color.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import { PureComponent } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ANALYTICS_HOVER_DELAY } from '../../constants';
+import { messages } from '../../i18n';
+const styles = {
+  button: "_2rkoglpi _19it7r9e _1reo15vq _18m915vq _4t3i1tcg _1bsb1tcg _bfhkm7j4 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1ule"
+};
+
+// We have tried with changing border and padding from 1px to token near version 2px,
+// the pop - up is being expanded to two lines.
+const buttonWrapperStyles = null;
+export default class Color extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "hoverStartTime", 0);
+    _defineProperty(this, "onMouseEnter", () => {
+      this.hoverStartTime = Date.now();
+    });
+    _defineProperty(this, "onMouseLeave", () => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover(this.props.value);
+      }
+      this.hoverStartTime = 0;
+    });
+    _defineProperty(this, "onMouseDown", e => {
+      e.preventDefault();
+    });
+    _defineProperty(this, "onClick", e => {
+      const {
+        onClick,
+        value
+      } = this.props;
+      e.preventDefault();
+      onClick(value);
+    });
+  }
+  render() {
+    const {
+      tabIndex,
+      backgroundColor,
+      isSelected,
+      borderColor,
+      iconColor,
+      value,
+      setRef
+    } = this.props;
+    return /*#__PURE__*/React.createElement("li", {
+      className: ax(["_ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rko12x7 _189et94y _1dqonqa1 _1h6d1j28 _19pkidpf _2hwxv77o _otyridpf _18u0v77o _1e0c1txw _4cvr1h6o _bfw7zgxb"])
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Pressable, {
+      xcss: styles.button,
+      onClick: this.onClick,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onMouseDown: this.onMouseDown,
+      tabIndex: tabIndex,
+      title: labels[0]
+      // button element does not support aria-selected.
+      // For button selected (to be precise pressed) or not
+      //  use aria-pressed as per
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+      ,
+      "aria-pressed": isSelected,
+      style: {
+        backgroundColor: backgroundColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        color: iconColor,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        borderColor
+      },
+      ref: setRef
+    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      color: "currentColor",
+      label: labels[0]
+    }))));
+  }
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+}

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

@@ -2,14 +2,14 @@
  * @jsxRuntime classic
  * @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';
 import { fg } from '@atlaskit/platform-feature-flags';
-const paletteLegacy = [['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})`]];
-const paletteRefreshed = [['neutral', `var(--ds-background-accent-gray-subtler, ${colors.N300})`, `var(--ds-border-bold, ${colors.N400})`, `var(--ds-icon, ${colors.N400})`], ['blue', `var(--ds-background-information-pressed, ${colors.B300})`, `var(--ds-border-information, ${colors.B400})`, `var(--ds-icon, ${colors.N400})`], ['green', `var(--ds-background-success-pressed, ${colors.G300})`, `var(--ds-border-success, ${colors.G400})`, `var(--ds-icon, ${colors.N400})`], ['yellow', `var(--ds-background-warning-pressed, ${colors.Y300})`, `var(--ds-border-warning, ${colors.Y400})`, `var(--ds-icon, ${colors.N400})`], ['red', `var(--ds-background-danger-pressed, ${colors.R300})`, `var(--ds-border-danger, ${colors.R400})`, `var(--ds-icon, ${colors.R400})`], ['purple', `var(--ds-background-discovery-pressed, ${colors.P300})`, `var(--ds-border-discovery, ${colors.P400})`, `var(--ds-icon, ${colors.N400})`]];
+const paletteLegacy = [['neutral', "var(--ds-background-neutral, #091E420F)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery, #F3F0FF)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon-discovery, #8270DB)"], ['blue', "var(--ds-background-information, #E9F2FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon-information, #1D7AFC)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF7D6)", "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)"], ['green', "var(--ds-background-success, #DCFFF1)", "var(--ds-border-success, #22A06B)", "var(--ds-icon-success, #22A06B)"]];
+const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-border-bold, #758195)", "var(--ds-icon, #44546F)"], ['blue', "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-border-information, #1D7AFC)", "var(--ds-icon, #44546F)"], ['green', "var(--ds-background-success-pressed, #7EE2B8)", "var(--ds-border-success, #22A06B)", "var(--ds-icon, #44546F)"], ['yellow', "var(--ds-background-warning-pressed, #F5CD47)", "var(--ds-border-warning, #E56910)", "var(--ds-icon, #44546F)"], ['red', "var(--ds-background-danger-pressed, #FD9891)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #44546F)"], ['purple', "var(--ds-background-discovery-pressed, #B8ACF6)", "var(--ds-border-discovery, #8270DB)", "var(--ds-icon, #44546F)"]];
 const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
 const palette = getPalette();
 

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

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsx jsx
  */
 import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
-import { N50 } from '@atlaskit/theme/colors';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -37,7 +36,7 @@ const buttonWrapperStyles = css`
 	padding: 1px;
 	border-radius: ${"var(--ds-space-075, 6px)"};
 	&:hover {
-		border: 1px solid ${`var(--ds-border, ${N50})`};
+		border: 1px solid ${"var(--ds-border, #091E4224)"};
 	}
 `;
 export default class Color extends PureComponent {

package/dist/es2019/element.js

@@ -1 +1,5 @@
-export { Status } from './components/Status';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { Status as EmotionStatus } from './components/Status';
+import { Status as CompiledStatus } from './components/compiled/Status';
+const Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+export { Status };

package/dist/es2019/index.js

@@ -1,2 +1,8 @@
-export { Status } from './components/Status';
-export { StatusPicker } from './components/StatusPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { Status as EmotionStatus } from './components/Status';
+import { Status as CompiledStatus } from './components/compiled/Status';
+import { StatusPicker as EmotionStatusPicker } from './components/StatusPicker';
+import { StatusPicker as CompiledStatusPicker } from './components/compiled/StatusPicker';
+const Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+const StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { Status, StatusPicker };

package/dist/es2019/picker.js

@@ -1 +1,5 @@
-export { StatusPicker } from './components/StatusPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { StatusPicker as EmotionStatusPicker } from './components/StatusPicker';
+import { StatusPicker as CompiledStatusPicker } from './components/compiled/StatusPicker';
+const StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { StatusPicker };

package/dist/esm/components/StatusPicker.js

@@ -17,12 +17,11 @@ import { injectIntl } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
-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, ")")
+    borderColor: "var(--ds-border-bold, #758195)"
   }
 });
 var Picker = /*#__PURE__*/function (_PureComponent) {