@atlaskit/status 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/status
 
+## 1.1.0
+
+### Minor Changes
+
+- [`af2dcdc462f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af2dcdc462f) - [ux] Instrumented `@atlaskit/status` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`fb47a6a79ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb47a6a79ef) - ED-14672 Removed styled-component from status, replaced by emotion.
+- Updated dependencies
+
+## 1.0.2
+
+### Patch Changes
+
+- [`56cf7af34be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56cf7af34be) - AK-832 implementation navigation arrows for status color palette
+
+## 1.0.1
+
+### Patch Changes
+
+- [`b5375cd4f66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5375cd4f66) - AK-316: add aria-label for the status picker input field
+- [`85c4e5a71ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c4e5a71ee) - [AK-837] added role prop for Status component
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/components/Status.js

@@ -41,6 +41,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorToLozengeAppearanceMap = {
   neutral: 'default',
   purple: 'new',
@@ -49,6 +50,8 @@ var colorToLozengeAppearanceMap = {
   yellow: 'moved',
   green: 'success'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 var DEFAULT_APPEARANCE = 'default';
 var MAX_WIDTH = 200;
 
@@ -97,7 +100,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
-          localId = _this$props.localId,
+          role = _this$props.role,
           onClick = _this$props.onClick;
 
       if (text.trim().length === 0) {
@@ -114,7 +117,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-node-type": "status",
         "data-color": color,
         "data-style": style,
-        id: localId
+        role: role
       }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/cjs/components/StatusPicker.js

@@ -31,10 +31,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
+
+var _react2 = require("@emotion/react");
 
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 
+var _i18n = require("./i18n");
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -45,17 +49,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var FieldTextWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
+var fieldTextWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
 
-var StatusPicker = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(StatusPicker, _PureComponent);
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Picker, _PureComponent);
 
-  var _super = _createSuper(StatusPicker);
+  var _super = _createSuper(Picker);
 
-  function StatusPicker() {
+  function Picker() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, StatusPicker);
+    (0, _classCallCheck2.default)(this, Picker);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -84,20 +88,21 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  (0, _createClass2.default)(StatusPicker, [{
+  (0, _createClass2.default)(Picker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
-          localId = _this$props.localId,
           onColorClick = _this$props.onColorClick,
-          onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
+          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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldTextWrapper, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+        css: fieldTextWrapperStyles,
         key: this.fieldTextWrapperKey
-      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+      }, (0, _react2.jsx)(_textfield.default, {
         value: text,
         isCompact: true,
         ref: this.handleInputRef,
@@ -105,8 +110,8 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
         onKeyPress: this.onKeyPress,
         spellCheck: false,
         autoComplete: "off",
-        "aria-labelledby": localId
-      })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
+        "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
+      })), (0, _react2.jsx)(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
         onHover: onColorHover,
@@ -114,10 +119,11 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-  return StatusPicker;
+  return Picker;
 }(_react.PureComponent);
 
-exports.StatusPicker = StatusPicker;
-(0, _defineProperty2.default)(StatusPicker, "defaultProps", {
+(0, _defineProperty2.default)(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+var StatusPicker = (0, _reactIntlNext.injectIntl)(Picker);
+exports.StatusPicker = StatusPicker;

package/dist/cjs/components/analytics.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _version = require("../version.json");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;

package/dist/cjs/components/i18n.js

@@ -37,6 +37,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.status.color.green',
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
+  },
+  statusInputLabel: {
+    id: 'fabric.status.input.label',
+    defaultMessage: 'Set a status',
+    description: 'Aria label text for the status input field'
   }
 });
 exports.messages = messages;

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

@@ -17,9 +17,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _react = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _color = _interopRequireDefault(require("./color"));
 
@@ -30,9 +32,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // color value, label, background, borderColor
-var palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
+var palette = [['neutral', (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.text', colors.N400)], ['purple', (0, _tokens.token)('color.background.discovery', colors.P50), (0, _tokens.token)('color.text.discovery', colors.P400)], ['blue', (0, _tokens.token)('color.background.information', colors.B50), (0, _tokens.token)('color.text.information', colors.B400)], ['red', (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R400)], ['yellow', (0, _tokens.token)('color.background.warning', colors.Y75), (0, _tokens.token)('color.text.warning', colors.Y400)], ['green', (0, _tokens.token)('color.background.success', colors.G50), (0, _tokens.token)('color.text.success', colors.G400)]];
+var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var VK_LEFT = 37; //ArrowLeft
+
+var VK_RIGHT = 39; //ArrowRight
 
-var ColorPaletteWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+var VK_UP = 38; //ArrowUp
+
+var VK_DOWN = 40; //ArrowDown
 
 var _default = function _default(_ref) {
   var _ref$cols = _ref.cols,
@@ -41,27 +49,79 @@ var _default = function _default(_ref) {
       selectedColor = _ref.selectedColor,
       className = _ref.className,
       onHover = _ref.onHover;
-  return /*#__PURE__*/_react.default.createElement(ColorPaletteWrapper, {
-    className: className,
-    style: {
-      maxWidth: cols * 32
-    }
-  }, palette.map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 3),
-        colorValue = _ref3[0],
-        backgroundColor = _ref3[1],
-        borderColor = _ref3[2];
-
-    return /*#__PURE__*/_react.default.createElement(_color.default, {
-      key: colorValue,
-      value: colorValue,
-      backgroundColor: backgroundColor,
-      borderColor: borderColor,
-      onClick: onClick,
-      onHover: onHover,
-      isSelected: colorValue === selectedColor
+  var colorRefs = (0, _react.useRef)([]);
+  (0, _react.useEffect)(function () {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  var memoizedHandleKeyDown = (0, _react.useCallback)(function (e) {
+    var colorIndex = palette.findIndex(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+          colorValue = _ref3[0];
+
+      return colorValue === selectedColor;
     });
-  }));
+    var newColorIndex = null;
+
+    switch (e.keyCode) {
+      case VK_RIGHT:
+      case VK_DOWN:
+        e.preventDefault();
+        newColorIndex = colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
+        break;
+
+      case VK_LEFT:
+      case VK_UP:
+        e.preventDefault();
+        newColorIndex = colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 1;
+        break;
+    }
+
+    if (newColorIndex === null) {
+      return;
+    }
+
+    var newColorValue = palette[newColorIndex][0];
+    var newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    onClick(newColorValue);
+  }, [selectedColor, onClick, 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.
+     */
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    (0, _react2.jsx)("div", {
+      css: colorPaletteWrapperStyles,
+      className: className,
+      role: "radiogroup",
+      style: {
+        maxWidth: cols * 32
+      },
+      onKeyDown: memoizedHandleKeyDown
+    }, palette.map(function (_ref4, i) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
+          colorValue = _ref5[0],
+          backgroundColor = _ref5[1],
+          borderColor = _ref5[2];
+
+      return (0, _react2.jsx)(_color.default, {
+        key: colorValue,
+        value: colorValue,
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+        onClick: onClick,
+        onHover: onHover,
+        isSelected: colorValue === selectedColor,
+        tabIndex: colorValue === selectedColor ? 0 : -1,
+        setRef: function setRef(el) {
+          return colorRefs.current[i] = el;
+        }
+      });
+    }))
+  );
 };
 
 exports.default = _default;

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

@@ -29,11 +29,13 @@ var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _constants = require("../constants");
 
@@ -49,9 +51,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var Button = _styledComponents.default.button(_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"])), _colors.N900, _colors.N0);
-
-var ButtonWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), _colors.N50);
+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"])), (0, _tokens.token)('color.background.neutral', _colors.N900), (0, _tokens.token)('color.border', _colors.N0));
+var buttonWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), (0, _tokens.token)('color.border', _colors.N50));
 
 var Color = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Color, _PureComponent);
@@ -106,22 +107,32 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
-          value = _this$props2.value;
+          value = _this$props2.value,
+          setRef = _this$props2.setRef;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
-        return /*#__PURE__*/_react.default.createElement(Button, {
+      return (0, _react2.jsx)("span", {
+        css: buttonWrapperStyles
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
+        return (0, _react2.jsx)("button", {
+          css: buttonStyles,
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: labels[0],
+          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',
             border: borderStyle
-          }
-        }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
+          },
+          ref: setRef
+        }, isSelected && (0, _react2.jsx)(_done.default, {
           primaryColor: borderColor,
           label: labels[0]
         }));

package/dist/cjs/i18n/cs.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Czech
+//Czech
 var _default = {
   'fabric.status.color.blue': 'Modrá',
   'fabric.status.color.green': 'Zelená',
   'fabric.status.color.grey': 'Šedá',
   'fabric.status.color.purple': 'Fialová',
   'fabric.status.color.red': 'Červená',
-  'fabric.status.color.yellow': 'Žlutá'
+  'fabric.status.color.yellow': 'Žlutá',
+  'fabric.status.input.label': 'Nastavit stav'
 };
 exports.default = _default;

package/dist/cjs/i18n/da.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Danish
+//Danish (Denmark)
 var _default = {
   'fabric.status.color.blue': 'Blå',
   'fabric.status.color.green': 'Grøn',
   'fabric.status.color.grey': 'Grå',
   'fabric.status.color.purple': 'Lilla',
   'fabric.status.color.red': 'Rød',
-  'fabric.status.color.yellow': 'Gul'
+  'fabric.status.color.yellow': 'Gul',
+  'fabric.status.input.label': 'Angiv en status'
 };
 exports.default = _default;

package/dist/cjs/i18n/de.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// German
+//German (Germany)
 var _default = {
   'fabric.status.color.blue': 'Blau',
   'fabric.status.color.green': 'Grün',
   'fabric.status.color.grey': 'Grau',
   'fabric.status.color.purple': 'Violett',
   'fabric.status.color.red': 'Rot',
-  'fabric.status.color.yellow': 'Gelb'
+  'fabric.status.color.yellow': 'Gelb',
+  'fabric.status.input.label': 'Status festlegen'
 };
 exports.default = _default;

package/dist/cjs/i18n/en_ZZ.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+var _default = {
+  'fabric.status.color.blue': '⁣⁢Blue‍⁠‌‌⁠‍⁠؜‍⁠؜؜⁣⁤',
+  'fabric.status.color.green': '⁣⁢Green⁡⁡⁡⁠‌‌⁡‌‌⁣⁤',
+  'fabric.status.color.grey': '⁣⁢Grey⁠‌؜؜⁠‍⁡⁡⁡⁠‌؜⁡⁡⁣⁤',
+  'fabric.status.color.purple': '⁣⁢Purple⁡؜‍⁡⁠؜؜؜⁡⁣⁤',
+  'fabric.status.color.red': '⁣⁢Red⁡‌‌‌‌⁠‍‌؜؜⁡‍⁣⁤',
+  'fabric.status.color.yellow': '⁣⁢Yellow‍⁡‍⁣⁤',
+  'fabric.status.input.label': '⁣⁢Set a status‍‌؜‌⁡‍‍؜‍؜‍⁠⁣⁤'
+};
+exports.default = _default;

package/dist/cjs/i18n/es.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Spanish
+//Spanish (International)
 var _default = {
   'fabric.status.color.blue': 'Azul',
   'fabric.status.color.green': 'Verde',
   'fabric.status.color.grey': 'Gris',
   'fabric.status.color.purple': 'Morado',
   'fabric.status.color.red': 'Rojo',
-  'fabric.status.color.yellow': 'Amarillo'
+  'fabric.status.color.yellow': 'Amarillo',
+  'fabric.status.input.label': 'Establecer un estado'
 };
 exports.default = _default;

package/dist/cjs/i18n/et.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Estonian
+//Estonian
 var _default = {
   'fabric.status.color.blue': 'Sinine',
   'fabric.status.color.green': 'Roheline',

package/dist/cjs/i18n/fi.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Finnish
+//Finnish
 var _default = {
   'fabric.status.color.blue': 'Sininen',
   'fabric.status.color.green': 'Vihreä',
   'fabric.status.color.grey': 'Harmaa',
   'fabric.status.color.purple': 'Violetti',
   'fabric.status.color.red': 'Punainen',
-  'fabric.status.color.yellow': 'Keltainen'
+  'fabric.status.color.yellow': 'Keltainen',
+  'fabric.status.input.label': 'Aseta tila'
 };
 exports.default = _default;

package/dist/cjs/i18n/fr.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// French
+//French (France)
 var _default = {
   'fabric.status.color.blue': 'Bleu',
   'fabric.status.color.green': 'Vert',
   'fabric.status.color.grey': 'Gris',
   'fabric.status.color.purple': 'Violet',
   'fabric.status.color.red': 'Rouge',
-  'fabric.status.color.yellow': 'Jaune'
+  'fabric.status.color.yellow': 'Jaune',
+  'fabric.status.input.label': 'Définir un état'
 };
 exports.default = _default;

package/dist/cjs/i18n/hu.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Hungarian
+//Hungarian
 var _default = {
   'fabric.status.color.blue': 'Kék',
   'fabric.status.color.green': 'Zöld',
   'fabric.status.color.grey': 'Szürke',
   'fabric.status.color.purple': 'Lila',
   'fabric.status.color.red': 'Piros',
-  'fabric.status.color.yellow': 'Sárga'
+  'fabric.status.color.yellow': 'Sárga',
+  'fabric.status.input.label': 'Állapot beállítása'
 };
 exports.default = _default;

package/dist/cjs/i18n/it.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Italian
+//Italian (Italy)
 var _default = {
   'fabric.status.color.blue': 'Blu',
   'fabric.status.color.green': 'Verde',
   'fabric.status.color.grey': 'Grigio',
   'fabric.status.color.purple': 'Viola',
   'fabric.status.color.red': 'Rosso',
-  'fabric.status.color.yellow': 'Giallo'
+  'fabric.status.color.yellow': 'Giallo',
+  'fabric.status.input.label': 'Imposta uno stato'
 };
 exports.default = _default;

package/dist/cjs/i18n/ja.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Japanese
+//Japanese
 var _default = {
   'fabric.status.color.blue': '青',
   'fabric.status.color.green': '緑',
   'fabric.status.color.grey': '灰色',
   'fabric.status.color.purple': '紫',
   'fabric.status.color.red': '赤',
-  'fabric.status.color.yellow': '黄'
+  'fabric.status.color.yellow': '黄',
+  'fabric.status.input.label': 'ステータスを設定'
 };
 exports.default = _default;

package/dist/cjs/i18n/ko.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Korean
+//Korean
 var _default = {
   'fabric.status.color.blue': '파란색',
   'fabric.status.color.green': '녹색',
   'fabric.status.color.grey': '회색',
   'fabric.status.color.purple': '보라색',
   'fabric.status.color.red': '빨강색',
-  'fabric.status.color.yellow': '노란색'
+  'fabric.status.color.yellow': '노란색',
+  'fabric.status.input.label': '상태 설정'
 };
 exports.default = _default;