@atlaskit/status 2.0.0 → 3.0.0

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

@@ -0,0 +1,110 @@
+/* StatusPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./StatusPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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';
+import { N80A } from '@atlaskit/theme/colors';
+var fieldTextWrapperStyles = null;
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  function Picker() {
+    var _this;
+    _classCallCheck(this, Picker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Picker, [].concat(args));
+    _defineProperty(_this, "fieldTextWrapperKey", Math.random().toString());
+    _defineProperty(_this, "colorPaletteKey", Math.random().toString());
+    _defineProperty(_this, "onChange", function (evt) {
+      // @ts-ignore
+      _this.props.onTextChanged(evt.target.value);
+    });
+    _defineProperty(_this, "onKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.props.onEnter();
+      }
+    });
+    _defineProperty(_this, "handleInputRef", function (ref) {
+      _this.inputRef = ref;
+      if (ref && _this.props.autoFocus) {
+        _this.focusInput();
+      }
+    });
+    _defineProperty(_this, "focusInput", function () {
+      if (!_this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top
+      _this.autofocusTimeout = setTimeout(function () {
+        var _this$inputRef;
+        (_this$inputRef = _this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
+      });
+    });
+    return _this;
+  }
+  _inherits(Picker, _PureComponent);
+  return _createClass(Picker, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        text = _this$props.text,
+        selectedColor = _this$props.selectedColor,
+        onColorClick = _this$props.onColorClick,
+        onColorHover = _this$props.onColorHover,
+        intl = _this$props.intl;
+
+      // 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 _n6346qow"]),
+        style: {
+          "--_wxcsqj": ix("var(--ds-border-bold, ".concat(N80A, ")"))
+        }
+      }, /*#__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
+      }));
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.inputRef && this.props.autoFocus) {
+        this.focusInput();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.autofocusTimeout !== undefined) {
+        clearTimeout(this.autofocusTimeout);
+      }
+    }
+  }]);
+}(PureComponent);
+_defineProperty(Picker, "defaultProps", {
+  autoFocus: true
+});
+export var StatusPicker = injectIntl(Picker);

package/dist/esm/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/esm/components/compiled/internal/color-palette.js

@@ -0,0 +1,96 @@
+/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./color-palette.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import * as colors from '@atlaskit/theme/colors';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import Color from './color';
+import { fg } from '@atlaskit/platform-feature-flags';
+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 getPalette = function getPalette() {
+  return fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
+};
+var 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
+var colorPaletteWrapperStyles = null;
+var VK_LEFT = 37; //ArrowLeft
+var VK_RIGHT = 39; //ArrowRight
+var VK_UP = 38; //ArrowUp
+var VK_DOWN = 40; //ArrowDown
+var VK_TAB = 9;
+export default (function (_ref) {
+  var _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 7 : _ref$cols,
+    onClick = _ref.onClick,
+    selectedColor = _ref.selectedColor,
+    className = _ref.className,
+    onHover = _ref.onHover;
+  var colorRefs = useRef([]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentFocusedColor = _useState2[0],
+    setCurrentFocusedColor = _useState2[1];
+  useEffect(function () {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  var memoizedHandleKeyDown = useCallback(function (e) {
+    var newColorIndex = null;
+    var nextColor = function nextColor() {
+      return currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
+    };
+    var previousColor = function previousColor() {
+      return 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);
+    var newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === 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(function (_ref2, i) {
+    var _ref3 = _slicedToArray(_ref2, 4),
+      colorValue = _ref3[0],
+      backgroundColor = _ref3[1],
+      borderColor = _ref3[2],
+      iconColor = _ref3[3];
+    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: function setRef(el) {
+        return colorRefs.current[i] = el;
+      }
+    });
+  }));
+});

package/dist/esm/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)}
+._bfw7fovk:hover{border:var(--_9mxir2)}

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

@@ -0,0 +1,113 @@
+/* color.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./color.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import { N50 } from '@atlaskit/theme/colors';
+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';
+var 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.
+var buttonWrapperStyles = null;
+var Color = /*#__PURE__*/function (_PureComponent) {
+  function Color() {
+    var _this;
+    _classCallCheck(this, Color);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Color, [].concat(args));
+    _defineProperty(_this, "hoverStartTime", 0);
+    _defineProperty(_this, "onMouseEnter", function () {
+      _this.hoverStartTime = Date.now();
+    });
+    _defineProperty(_this, "onMouseLeave", function () {
+      var onHover = _this.props.onHover;
+      var delay = Date.now() - _this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover(_this.props.value);
+      }
+      _this.hoverStartTime = 0;
+    });
+    _defineProperty(_this, "onMouseDown", function (e) {
+      e.preventDefault();
+    });
+    _defineProperty(_this, "onClick", function (e) {
+      var _this$props = _this.props,
+        onClick = _this$props.onClick,
+        value = _this$props.value;
+      e.preventDefault();
+      onClick(value);
+    });
+    return _this;
+  }
+  _inherits(Color, _PureComponent);
+  return _createClass(Color, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        tabIndex = _this$props2.tabIndex,
+        backgroundColor = _this$props2.backgroundColor,
+        isSelected = _this$props2.isSelected,
+        borderColor = _this$props2.borderColor,
+        iconColor = _this$props2.iconColor,
+        value = _this$props2.value,
+        setRef = _this$props2.setRef;
+      return /*#__PURE__*/React.createElement("li", {
+        className: ax(["_ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rko12x7 _189et94y _1dqonqa1 _1h6d1j28 _19pkidpf _2hwxv77o _otyridpf _18u0v77o _1e0c1txw _4cvr1h6o _bfw7fovk"]),
+        style: {
+          "--_9mxir2": ix("1px solid ".concat("var(--ds-border, ".concat(N50, ")")))
+        }
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
+        return /*#__PURE__*/React.createElement(Pressable, {
+          xcss: styles.button,
+          onClick: _this2.onClick,
+          onMouseEnter: _this2.onMouseEnter,
+          onMouseLeave: _this2.onMouseLeave,
+          onMouseDown: _this2.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: borderColor
+          },
+          ref: setRef
+        }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+          color: "currentColor",
+          label: labels[0]
+        }));
+      }));
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hoverStartTime = 0;
+    }
+  }]);
+}(PureComponent);
+export { Color as default };

package/dist/esm/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';
+var Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+export { Status };

package/dist/esm/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';
+var Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+var StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { Status, StatusPicker };

package/dist/esm/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';
+var StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { StatusPicker };

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+export type StatusStyle = 'bold' | 'subtle';
+export interface OwnProps {
+    text: string;
+    color: Color;
+    style?: StatusStyle;
+    localId?: string;
+    onClick?: (event: React.SyntheticEvent<any>) => void;
+    onHover?: () => void;
+    role?: string;
+    isBold?: boolean;
+}
+export type Props = OwnProps & WithAnalyticsEventsProps;
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<OwnProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types/components/compiled/StatusPicker.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type Color } from './Status';
+export type ColorType = Color;
+export interface Props {
+    selectedColor: ColorType;
+    text: string;
+    onEnter: () => void;
+    onColorClick: (value: ColorType) => void;
+    onColorHover?: (value: ColorType) => void;
+    onTextChanged: (value: string) => void;
+    autoFocus?: boolean;
+}
+export declare const StatusPicker: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};

package/dist/types/components/compiled/internal/color-palette.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type Color as ColorType } from '../Status';
+interface ColorPaletteProps {
+    selectedColor?: ColorType;
+    onClick: (value: ColorType) => void;
+    onHover?: (value: ColorType) => void;
+    cols?: number;
+    className?: string;
+}
+declare const _default: ({ cols, onClick, selectedColor, className, onHover }: ColorPaletteProps) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { PureComponent } from 'react';
+import { type Color as ColorType } from '../Status';
+export interface ColorProps {
+    value: ColorType;
+    tabIndex?: number;
+    isSelected?: boolean;
+    onClick: (value: ColorType) => void;
+    onHover?: (value: ColorType) => void;
+    backgroundColor: string;
+    borderColor: string;
+    iconColor: string;
+    setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
+}
+export default class Color extends PureComponent<ColorProps> {
+    private hoverStartTime;
+    render(): JSX.Element;
+    componentWillUnmount(): void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onMouseDown: React.MouseEventHandler<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/types/element.d.ts

@@ -1,2 +1,4 @@
-export { Status } from './components/Status';
+/// <reference types="react" />
+declare const Status: import("react").FC<Omit<Omit<import("./components/compiled/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & Omit<Omit<import("./components/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+export { Status };
 export type { StatusStyle, Props, Color } from './components/Status';

package/dist/types/index.d.ts

@@ -1,4 +1,8 @@
-export { Status } from './components/Status';
+/// <reference types="react" />
+declare const Status: import("react").FC<Omit<Omit<import("./components/compiled/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & Omit<Omit<import("./components/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+declare const StatusPicker: import("react").FC<Omit<import("./components/compiled/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl"> & {
+    forwardedRef?: import("react").Ref<any> | undefined;
+} & Omit<import("./components/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl">>;
+export { Status, StatusPicker };
 export type { StatusStyle, Props, Color } from './components/Status';
-export { StatusPicker } from './components/StatusPicker';
 export type { Props as StatusPickerProps } from './components/StatusPicker';

package/dist/types/picker.d.ts

@@ -1,2 +1,6 @@
-export { StatusPicker } from './components/StatusPicker';
+/// <reference types="react" />
+declare const StatusPicker: import("react").FC<Omit<import("./components/compiled/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl"> & {
+    forwardedRef?: import("react").Ref<any> | undefined;
+} & Omit<import("./components/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl">>;
+export { StatusPicker };
 export type { Props, ColorType } from './components/StatusPicker';

package/dist/types-ts4.5/components/compiled/Status.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+export type StatusStyle = 'bold' | 'subtle';
+export interface OwnProps {
+    text: string;
+    color: Color;
+    style?: StatusStyle;
+    localId?: string;
+    onClick?: (event: React.SyntheticEvent<any>) => void;
+    onHover?: () => void;
+    role?: string;
+    isBold?: boolean;
+}
+export type Props = OwnProps & WithAnalyticsEventsProps;
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<OwnProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/components/compiled/StatusPicker.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
+import { type Color } from './Status';
+export type ColorType = Color;
+export interface Props {
+    selectedColor: ColorType;
+    text: string;
+    onEnter: () => void;
+    onColorClick: (value: ColorType) => void;
+    onColorHover?: (value: ColorType) => void;
+    onTextChanged: (value: string) => void;
+    autoFocus?: boolean;
+}
+export declare const StatusPicker: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+};

package/dist/types-ts4.5/components/compiled/internal/color-palette.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type Color as ColorType } from '../Status';
+interface ColorPaletteProps {
+    selectedColor?: ColorType;
+    onClick: (value: ColorType) => void;
+    onHover?: (value: ColorType) => void;
+    cols?: number;
+    className?: string;
+}
+declare const _default: ({ cols, onClick, selectedColor, className, onHover }: ColorPaletteProps) => JSX.Element;
+export default _default;

package/dist/types-ts4.5/components/compiled/internal/color.d.ts

@@ -0,0 +1,22 @@
+import { PureComponent } from 'react';
+import { type Color as ColorType } from '../Status';
+export interface ColorProps {
+    value: ColorType;
+    tabIndex?: number;
+    isSelected?: boolean;
+    onClick: (value: ColorType) => void;
+    onHover?: (value: ColorType) => void;
+    backgroundColor: string;
+    borderColor: string;
+    iconColor: string;
+    setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
+}
+export default class Color extends PureComponent<ColorProps> {
+    private hoverStartTime;
+    render(): JSX.Element;
+    componentWillUnmount(): void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onMouseDown: React.MouseEventHandler<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+}

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

@@ -1,2 +1,4 @@
-export { Status } from './components/Status';
+/// <reference types="react" />
+declare const Status: import("react").FC<Omit<Omit<import("./components/compiled/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & Omit<Omit<import("./components/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+export { Status };
 export type { StatusStyle, Props, Color } from './components/Status';

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

@@ -1,4 +1,8 @@
-export { Status } from './components/Status';
+/// <reference types="react" />
+declare const Status: import("react").FC<Omit<Omit<import("./components/compiled/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & Omit<Omit<import("./components/Status").OwnProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+declare const StatusPicker: import("react").FC<Omit<import("./components/compiled/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl"> & {
+    forwardedRef?: import("react").Ref<any> | undefined;
+} & Omit<import("./components/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl">>;
+export { Status, StatusPicker };
 export type { StatusStyle, Props, Color } from './components/Status';
-export { StatusPicker } from './components/StatusPicker';
 export type { Props as StatusPickerProps } from './components/StatusPicker';

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

@@ -1,2 +1,6 @@
-export { StatusPicker } from './components/StatusPicker';
+/// <reference types="react" />
+declare const StatusPicker: import("react").FC<Omit<import("./components/compiled/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl"> & {
+    forwardedRef?: import("react").Ref<any> | undefined;
+} & Omit<import("./components/StatusPicker").Props & import("react-intl-next").WrappedComponentProps, "intl">>;
+export { StatusPicker };
 export type { Props, ColorType } from './components/StatusPicker';

package/element/package.json

@@ -3,6 +3,9 @@
   "main": "../dist/cjs/element.js",
   "module": "../dist/esm/element.js",
   "module:es2019": "../dist/es2019/element.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/element.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {