@atlaskit/task-decision 17.3.0 → 17.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/task-decision
 
+## 17.4.0
+
+### Minor Changes
+
+- [`785548f317d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/785548f317d) - [ux] Instrumented `@atlaskit/task-decision` 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
+
+- [`7edfc6b2928`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7edfc6b2928) - [ux] Fix for checkbox hover state
+- Updated dependencies
+
+## 17.3.2
+
+### Patch Changes
+
+- [`053b9d1b25e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/053b9d1b25e) - AK-729: an empty label was removed from action item component
+
+## 17.3.1
+
+### Patch Changes
+
+- [`57f3b255fb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/57f3b255fb2) - [ux] AK-608: Action items are keyboard accessible
+
 ## 17.3.0
 
 ### Minor Changes

package/dist/cjs/components/ResourcedTaskItem.js

@@ -186,13 +186,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
           placeholder = _this$props3.placeholder,
           taskId = _this$props3.taskId,
           disabled = _this$props3.disabled,
-          dataAttributes = _this$props3.dataAttributes;
+          dataAttributes = _this$props3.dataAttributes,
+          isRenderer = _this$props3.isRenderer;
       return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
         }
       }, /*#__PURE__*/_react.default.createElement(_TaskItem.default, {
         isDone: isDone,
+        isRenderer: isRenderer,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/cjs/components/TaskItem.js

@@ -82,6 +82,11 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         })(createAnalyticsEvent);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.handleOnChange(event);
+      }
+    });
     _this.checkBoxId = getCheckBoxId(props.taskId);
     return _this;
   }
@@ -99,6 +104,7 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           appearance = _this$props2.appearance,
           isDone = _this$props2.isDone,
+          isRenderer = _this$props2.isRenderer,
           contentRef = _this$props2.contentRef,
           children = _this$props2.children,
           placeholder = _this$props2.placeholder,
@@ -107,7 +113,8 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
           dataAttributes = _this$props2.dataAttributes;
 
       var icon = /*#__PURE__*/_react.default.createElement(_TaskItem.CheckBoxWrapper, {
-        contentEditable: false
+        contentEditable: false,
+        isRenderer: isRenderer
       }, /*#__PURE__*/_react.default.createElement("input", {
         id: this.checkBoxId,
         "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -116,11 +123,9 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         onChange: this.handleOnChange,
         checked: !!isDone,
         disabled: !!disabled,
-        suppressHydrationWarning: true
-      }), /*#__PURE__*/_react.default.createElement("label", {
-        htmlFor: this.checkBoxId,
-        suppressHydrationWarning: true
-      }));
+        suppressHydrationWarning: true,
+        onKeyPress: this.handleOnKeyPress
+      }), /*#__PURE__*/_react.default.createElement("div", null));
 
       return /*#__PURE__*/_react.default.createElement(_Item.default, {
         appearance: appearance,

package/dist/cjs/styled/DecisionItem.js

@@ -17,12 +17,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var EditorIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
-  return props.showPlaceholder ? _colors.N100 : (0, _components.themed)({
-    light: _colors.G400,
-    dark: _colors.G200
+  return props.showPlaceholder ? (0, _tokens.token)('color.icon.subtle', _colors.N100) : (0, _components.themed)({
+    light: (0, _tokens.token)('color.icon.success', _colors.G400),
+    dark: (0, _tokens.token)('color.icon.success', _colors.G200)
   });
 }, (0, _constants.gridSize)() * 1.5);
 

package/dist/cjs/styled/Item.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var ContentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
@@ -28,8 +30,8 @@ var TaskWrapper = _styledComponents.default.div(_templateObject2 || (_templateOb
 exports.TaskWrapper = TaskWrapper;
 
 var DecisionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  margin: ", "px 0 0 0;\n  padding: ", "px;\n  padding-left: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  position: relative;\n\n  .decision-item {\n    cursor: initial;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 1.5, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: _colors.N20A,
-  dark: _colors.DN50
+  light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+  dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
 }));
 
 exports.DecisionWrapper = DecisionWrapper;

package/dist/cjs/styled/Placeholder.js

@@ -13,10 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var Placeholder = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, _colors.N100);
+}, (0, _tokens.token)('color.text.subtlest', _colors.N100));
 
 exports.Placeholder = Placeholder;

package/dist/cjs/styled/TaskItem.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.CheckBoxWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _components = require("@atlaskit/theme/components");
 
@@ -17,17 +19,28 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject;
+var _tokens = require("@atlaskit/tokens");
 
-var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n        border-radius: 0; /* FS-1392 */\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN100
-}), (0, _components.themed)({
-  light: _colors.N90,
-  dark: _colors.DN200
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", ";\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", ";\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", ";\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
+  light: (0, _tokens.token)('color.background.input', _colors.N0),
+  dark: (0, _tokens.token)('color.background.input', _colors.DN100)
 }), (0, _components.themed)({
-  light: _colors.N30,
-  dark: _colors.B75
+  light: (0, _tokens.token)('color.border', _colors.N90),
+  dark: (0, _tokens.token)('color.border', _colors.DN200)
+}), function (props) {
+  return props.isRenderer ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              outline: 2px solid\n                ", ";\n            "])), (0, _components.themed)({
+    light: (0, _tokens.token)('color.border.focused', _colors.B300),
+    dark: (0, _tokens.token)('color.border.focused', _colors.B75)
+  })) : '';
+}, (0, _components.themed)({
+  light: (0, _tokens.token)('color.background.input', _colors.N30),
+  dark: (0, _tokens.token)('color.background.input', _colors.B75)
 }));
 
 exports.CheckBoxWrapper = CheckBoxWrapper;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.0",
+	"version": "17.4.0",
 	"sideEffects": false
 }

package/dist/es2019/components/ResourcedTaskItem.js

@@ -137,7 +137,8 @@ export default class ResourcedTaskItem extends PureComponent {
       placeholder,
       taskId,
       disabled,
-      dataAttributes
+      dataAttributes,
+      isRenderer
     } = this.props;
     return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
       data: {
@@ -145,6 +146,7 @@ export default class ResourcedTaskItem extends PureComponent {
       }
     }, /*#__PURE__*/React.createElement(TaskItem, {
       isDone: isDone,
+      isRenderer: isRenderer,
       taskId: taskId,
       onChange: this.handleOnChange,
       appearance: appearance,

package/dist/es2019/components/TaskItem.js

@@ -40,6 +40,12 @@ export class TaskItem extends PureComponent {
       }
     });
 
+    _defineProperty(this, "handleOnKeyPress", event => {
+      if (event.key === 'Enter') {
+        this.handleOnChange(event);
+      }
+    });
+
     this.checkBoxId = getCheckBoxId(props.taskId);
   }
 
@@ -53,6 +59,7 @@ export class TaskItem extends PureComponent {
     const {
       appearance,
       isDone,
+      isRenderer,
       contentRef,
       children,
       placeholder,
@@ -61,7 +68,8 @@ export class TaskItem extends PureComponent {
       dataAttributes
     } = this.props;
     const icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
-      contentEditable: false
+      contentEditable: false,
+      isRenderer: isRenderer
     }, /*#__PURE__*/React.createElement("input", {
       id: this.checkBoxId,
       "aria-labelledby": `${this.checkBoxId}-wrapper`,
@@ -70,11 +78,9 @@ export class TaskItem extends PureComponent {
       onChange: this.handleOnChange,
       checked: !!isDone,
       disabled: !!disabled,
-      suppressHydrationWarning: true
-    }), /*#__PURE__*/React.createElement("label", {
-      htmlFor: this.checkBoxId,
-      suppressHydrationWarning: true
-    }));
+      suppressHydrationWarning: true,
+      onKeyPress: this.handleOnKeyPress
+    }), /*#__PURE__*/React.createElement("div", null));
     return /*#__PURE__*/React.createElement(Item, {
       appearance: appearance,
       contentRef: contentRef,

package/dist/es2019/styled/DecisionItem.js

@@ -4,13 +4,14 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N100, G400, G200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const EditorIconWrapper = styled.span`
   flex: 0 0 16px;
   height: 16px;
   width: 16px;
-  color: ${props => props.showPlaceholder ? N100 : themed({
-  light: G400,
-  dark: G200
+  color: ${props => props.showPlaceholder ? token('color.icon.subtle', N100) : themed({
+  light: token('color.icon.success', G400),
+  dark: token('color.icon.success', G200)
 })};
   margin: 4px ${gridSize() * 1.5}px 0 0;
 

package/dist/es2019/styled/Item.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N20A, DN50 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const ContentWrapper = styled.div`
   margin: 0;
   word-wrap: break-word;
@@ -24,8 +25,8 @@ export const DecisionWrapper = styled.div`
   padding-left: ${gridSize() * 1.5}px;
   border-radius: ${borderRadius()}px;
   background-color: ${themed({
-  light: N20A,
-  dark: DN50
+  light: token('color.background.neutral', N20A),
+  dark: token('color.background.neutral', DN50)
 })};
   position: relative;
 

package/dist/es2019/styled/Placeholder.js

@@ -2,10 +2,11 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { N100 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const Placeholder = styled.span`
   margin: ${props => `0 0 0 ${props.offset}px;`};
   position: absolute;
-  color: ${N100};
+  color: ${token('color.text.subtlest', N100)};
   pointer-events: none;
   text-overflow: ellipsis;
   overflow: hidden;

package/dist/es2019/styled/TaskItem.js

@@ -1,9 +1,10 @@
-import styled from 'styled-components'; // @ts-ignore: unused variable
+import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N0, DN100, DN200, N30, N90, B75 } from '@atlaskit/theme/colors';
+import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const CheckBoxWrapper = styled.span`
   flex: 0 0 16px;
   width: 16px;
@@ -13,6 +14,10 @@ export const CheckBoxWrapper = styled.span`
   margin: 4px ${gridSize()}px 0 0;
 
   & > input[type='checkbox'] {
+    width: 16px;
+    height: 16px;
+    z-index: 1;
+    cursor: pointer;
     position: absolute;
     outline: none;
     margin: 0;
@@ -21,7 +26,7 @@ export const CheckBoxWrapper = styled.span`
     top: 50%;
     transform: translateY(-50%);
 
-    + label {
+    + div {
       box-sizing: border-box;
       display: block;
       position: relative;
@@ -30,17 +35,17 @@ export const CheckBoxWrapper = styled.span`
 
       &::after {
         background: ${themed({
-  light: N0,
-  dark: DN100
-})}
+  light: token('color.background.input', N0),
+  dark: token('color.background.input', DN100)
+})};
         background-size: 16px;
         border-radius: 3px;
         border-style: solid;
         border-width: 1px;
         border-color: ${themed({
-  light: N90,
-  dark: DN200
-})}
+  light: token('color.border', N90),
+  dark: token('color.border', DN200)
+})};
         box-sizing: border-box;
         content: '';
         height: 16px;
@@ -52,27 +57,35 @@ export const CheckBoxWrapper = styled.span`
         transform: translate(-50%, -50%);
       }
     }
-    &:not([disabled]) + label:hover::after {
+    &:focus-visible + div:after {
+      ${props => props.isRenderer ? css`
+              outline: 2px solid
+                ${themed({
+  light: token('color.border.focused', B300),
+  dark: token('color.border.focused', B75)
+})};
+            ` : ''}
+    }
+    &:not([disabled]):hover + div::after {
       background: ${themed({
-  light: N30,
-  dark: B75
-})}
+  light: token('color.background.input', N30),
+  dark: token('color.background.input', B75)
+})};
       transition: border 0.2s ease-in-out;
     }
-    &[disabled] + label {
+    &[disabled] + div {
       opacity: 0.5;
       cursor: default;
     }
     &:checked {
-      + label::after {
+      + div::after {
         background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)
           no-repeat 0 0;
         background-size: 16px;
         border: 0;
         border-color: transparent;
-        border-radius: 0; /* FS-1392 */
       }
-      &:not([disabled]) + label:hover::after {
+      &:not([disabled]):hover + div::after {
         background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)
           no-repeat 0 0;
         background-size: 16px;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.0",
+	"version": "17.4.0",
 	"sideEffects": false
 }

package/dist/esm/components/ResourcedTaskItem.js

@@ -169,13 +169,15 @@ var ResourcedTaskItem = /*#__PURE__*/function (_PureComponent) {
           placeholder = _this$props3.placeholder,
           taskId = _this$props3.taskId,
           disabled = _this$props3.disabled,
-          dataAttributes = _this$props3.dataAttributes;
+          dataAttributes = _this$props3.dataAttributes,
+          isRenderer = _this$props3.isRenderer;
       return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
         data: {
           objectAri: objectAri
         }
       }, /*#__PURE__*/React.createElement(TaskItem, {
         isDone: isDone,
+        isRenderer: isRenderer,
         taskId: taskId,
         onChange: this.handleOnChange,
         appearance: appearance,

package/dist/esm/components/TaskItem.js

@@ -60,6 +60,12 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleOnKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.handleOnChange(event);
+      }
+    });
+
     _this.checkBoxId = getCheckBoxId(props.taskId);
     return _this;
   }
@@ -77,6 +83,7 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           appearance = _this$props2.appearance,
           isDone = _this$props2.isDone,
+          isRenderer = _this$props2.isRenderer,
           contentRef = _this$props2.contentRef,
           children = _this$props2.children,
           placeholder = _this$props2.placeholder,
@@ -84,7 +91,8 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
           disabled = _this$props2.disabled,
           dataAttributes = _this$props2.dataAttributes;
       var icon = /*#__PURE__*/React.createElement(CheckBoxWrapper, {
-        contentEditable: false
+        contentEditable: false,
+        isRenderer: isRenderer
       }, /*#__PURE__*/React.createElement("input", {
         id: this.checkBoxId,
         "aria-labelledby": "".concat(this.checkBoxId, "-wrapper"),
@@ -93,11 +101,9 @@ export var TaskItem = /*#__PURE__*/function (_PureComponent) {
         onChange: this.handleOnChange,
         checked: !!isDone,
         disabled: !!disabled,
-        suppressHydrationWarning: true
-      }), /*#__PURE__*/React.createElement("label", {
-        htmlFor: this.checkBoxId,
-        suppressHydrationWarning: true
-      }));
+        suppressHydrationWarning: true,
+        onKeyPress: this.handleOnKeyPress
+      }), /*#__PURE__*/React.createElement("div", null));
       return /*#__PURE__*/React.createElement(Item, {
         appearance: appearance,
         contentRef: contentRef,

package/dist/esm/styled/DecisionItem.js

@@ -8,9 +8,10 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N100, G400, G200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var EditorIconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
-  return props.showPlaceholder ? N100 : themed({
-    light: G400,
-    dark: G200
+  return props.showPlaceholder ? token('color.icon.subtle', N100) : themed({
+    light: token('color.icon.success', G400),
+    dark: token('color.icon.success', G200)
   });
 }, gridSize() * 1.5);

package/dist/esm/styled/Item.js

@@ -8,10 +8,11 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N20A, DN50 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
 export var TaskWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 6px 3px;\n  position: relative;\n"])));
 export var DecisionWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin: ", "px 0 0 0;\n  padding: ", "px;\n  padding-left: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  position: relative;\n\n  .decision-item {\n    cursor: initial;\n  }\n"])), gridSize(), gridSize(), gridSize() * 1.5, borderRadius(), themed({
-  light: N20A,
-  dark: DN50
+  light: token('color.background.neutral', N20A),
+  dark: token('color.background.neutral', DN50)
 }));
 export var ParticipantWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: -2px 8px;\n"])));

package/dist/esm/styled/Placeholder.js

@@ -6,6 +6,7 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { N100 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var Placeholder = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\n  position: absolute;\n  color: ", ";\n  pointer-events: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: calc(100% - 50px);\n"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, N100);
+}, token('color.text.subtlest', N100));

package/dist/esm/styled/TaskItem.js

@@ -1,20 +1,26 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import styled from 'styled-components'; // @ts-ignore: unused variable
+import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N0, DN100, DN200, N30, N90, B75 } from '@atlaskit/theme/colors';
-export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + label {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:not([disabled]) + label:hover::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + label {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + label::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n        border-radius: 0; /* FS-1392 */\n      }\n      &:not([disabled]) + label:hover::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
-  light: N0,
-  dark: DN100
+import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", ";\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", ";\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", ";\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
+  light: token('color.background.input', N0),
+  dark: token('color.background.input', DN100)
 }), themed({
-  light: N90,
-  dark: DN200
-}), themed({
-  light: N30,
-  dark: B75
+  light: token('color.border', N90),
+  dark: token('color.border', DN200)
+}), function (props) {
+  return props.isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              outline: 2px solid\n                ", ";\n            "])), themed({
+    light: token('color.border.focused', B300),
+    dark: token('color.border.focused', B75)
+  })) : '';
+}, themed({
+  light: token('color.background.input', N30),
+  dark: token('color.background.input', B75)
 }));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.0",
+	"version": "17.4.0",
 	"sideEffects": false
 }

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

@@ -3,6 +3,7 @@ import { Appearance, ContentRef, TaskDecisionProvider } from '../types';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;

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

@@ -5,6 +5,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
     taskId: string;
     isDone?: boolean;
+    isRenderer?: boolean;
     onChange?: (taskId: string, isChecked: boolean) => void;
     contentRef?: ContentRef;
     children?: any;
@@ -22,7 +23,8 @@ export declare class TaskItem extends PureComponent<Props & WithAnalyticsEventsP
     constructor(props: Props & WithAnalyticsEventsProps);
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     handleOnChange: (_evt: React.SyntheticEvent<HTMLInputElement>) => void;
+    handleOnKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/styled/TaskItem.d.ts

@@ -1,2 +1,6 @@
-import { HTMLAttributes, ComponentClass } from 'react';
-export declare const CheckBoxWrapper: ComponentClass<HTMLAttributes<{}>>;
+import { HTMLAttributes, ClassAttributes } from 'react';
+export declare const CheckBoxWrapper: import("styled-components").StyledComponentClass<ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
+    isRenderer: boolean | undefined;
+}, any, ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
+    isRenderer: boolean | undefined;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.3.0",
+  "version": "17.4.0",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-namespaced-context": "^6.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "uuid": "^3.1.0"
@@ -41,12 +42,12 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.0.0",
+    "@atlaskit/analytics-listeners": "^8.2.0",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^63.0.0",
+    "@atlaskit/editor-common": "^66.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^85.0.0",
+    "@atlaskit/renderer": "^93.0.0",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/url-search-params": "^0.10.0",
@@ -57,12 +58,15 @@
     "jest-fetch-mock": "^3.0.3",
     "react": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "3.9.6",
+    "typescript": "3.9.10",
     "url-search-params": "^0.10.0"
   },
   "techstack": {
     "@atlassian/frontend": {
       "tree-shaking": []
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"