@atlaskit/task-decision 17.6.1 → 17.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/task-decision
 
+## 17.6.3
+
+### Patch Changes
+
+- [`9369cc38a68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9369cc38a68) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 17.6.2
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 17.6.1
 
 ### Patch Changes

package/constants/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/constants.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/constants.d.ts"
+        "../dist/types-ts4.5/constants.d.ts"
       ]
     }
   }

package/dist/cjs/components/DecisionItem.js

@@ -10,7 +10,6 @@ var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/deci
 var _Item = _interopRequireDefault(require("./Item"));
 var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
 var iconStyles = function iconStyles(showPlaceholder) {
@@ -19,7 +18,7 @@ var iconStyles = function iconStyles(showPlaceholder) {
       flex: '0 0 16px',
       height: '16px',
       width: '16px',
-      margin: "4px ".concat((0, _constants.gridSize)() * 1.5, "px 0 0"),
+      margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
       color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(_colors.N100, ")") : (0, _components.themed)({
         light: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
         dark: "var(--ds-icon-success, ".concat(_colors.G200, ")")

package/dist/cjs/components/Item.js

@@ -18,7 +18,7 @@ var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { 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; } } /** @jsx jsx */
+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; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var contentStyle = (0, _react2.css)({
   margin: 0,
   wordWrap: 'break-word',
@@ -35,9 +35,9 @@ var decisionStyles = function decisionStyles(theme) {
   return (0, _react2.css)({
     display: 'flex',
     flexDirection: 'row',
-    margin: "".concat((0, _constants.gridSize)(), "px 0 0 0"),
-    padding: "".concat((0, _constants.gridSize)(), "px"),
-    paddingLeft: "".concat((0, _constants.gridSize)() * 1.5, "px"),
+    margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
+    padding: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-150, 12px)",
     borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
     backgroundColor: (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
@@ -81,6 +81,9 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       if (!showPlaceholder || !placeholder || children) {
         return null;
       }
+
+      // TODO: Migrate away from gridSize
+      // Recommendation: Replace gridSize with 8
       var offset = (0, _constants.gridSize)() * (itemType === 'TASK' ? 3 : 3.5);
       return (0, _react2.jsx)("span", {
         "data-component": "placeholder",

package/dist/cjs/components/TaskItem.js

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _Item = _interopRequireDefault(require("./Item"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../analytics");
-var _constants = require("@atlaskit/theme/constants");
 var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
@@ -25,7 +24,7 @@ var getCheckBoxId = function getCheckBoxId(localId) {
 };
 var checkboxStyles = function checkboxStyles(isRenderer) {
   return function (theme) {
-    return (0, _react2.css)(_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: inline;\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      ", "\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)({
+    return (0, _react2.css)(_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: ", " ", " 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: inline;\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      ", "\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  "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", (0, _components.themed)({
       light: "var(--ds-background-input, ".concat(_colors.N0, ")"),
       dark: "var(--ds-background-input, ".concat(_colors.DN100, ")")
     })({

package/dist/cjs/version.json

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

package/dist/es2019/components/DecisionItem.js

@@ -5,13 +5,12 @@ import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import Item from './Item';
 import { G200, G400, N100 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { gridSize } from '@atlaskit/theme/constants';
 const iconStyles = showPlaceholder => theme => {
   return css({
     flex: '0 0 16px',
     height: '16px',
     width: '16px',
-    margin: `4px ${gridSize() * 1.5}px 0 0`,
+    margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"} 0 0`,
     color: showPlaceholder ? `var(--ds-icon-subtle, ${N100})` : themed({
       light: `var(--ds-icon-success, ${G400})`,
       dark: `var(--ds-icon-success, ${G200})`

package/dist/es2019/components/Item.js

@@ -6,6 +6,7 @@ import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N200, N20A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 const contentStyle = css({
   margin: 0,
@@ -22,9 +23,9 @@ const taskStyles = css({
 const decisionStyles = theme => css({
   display: 'flex',
   flexDirection: 'row',
-  margin: `${gridSize()}px 0 0 0`,
-  padding: `${gridSize()}px`,
-  paddingLeft: `${gridSize() * 1.5}px`,
+  margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
+  padding: "var(--ds-space-100, 8px)",
+  paddingLeft: `${"var(--ds-space-150, 12px)"}`,
   borderRadius: `${borderRadius()}px`,
   backgroundColor: themed({
     light: `var(--ds-background-neutral, ${N20A})`,
@@ -58,6 +59,9 @@ export default class Item extends PureComponent {
     if (!showPlaceholder || !placeholder || children) {
       return null;
     }
+
+    // TODO: Migrate away from gridSize
+    // Recommendation: Replace gridSize with 8
     const offset = gridSize() * (itemType === 'TASK' ? 3 : 3.5);
     return jsx("span", {
       "data-component": "placeholder",

package/dist/es2019/components/TaskItem.js

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/react';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
-import { gridSize } from '@atlaskit/theme/constants';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
 let taskCount = 0;
@@ -15,7 +14,7 @@ const checkboxStyles = isRenderer => theme => css`
     height: 16px;
     position: relative;
     align-self: start;
-    margin: 4px ${gridSize()}px 0 0;
+    margin: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} 0 0;
 
     & > input[type='checkbox'] {
       width: 16px;

package/dist/es2019/version.json

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

package/dist/esm/components/DecisionItem.js

@@ -5,14 +5,13 @@ import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import Item from './Item';
 import { G200, G400, N100 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { gridSize } from '@atlaskit/theme/constants';
 var iconStyles = function iconStyles(showPlaceholder) {
   return function (theme) {
     return css({
       flex: '0 0 16px',
       height: '16px',
       width: '16px',
-      margin: "4px ".concat(gridSize() * 1.5, "px 0 0"),
+      margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
       color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(N100, ")") : themed({
         light: "var(--ds-icon-success, ".concat(G400, ")"),
         dark: "var(--ds-icon-success, ".concat(G200, ")")

package/dist/esm/components/Item.js

@@ -13,6 +13,7 @@ import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N200, N20A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 var contentStyle = css({
   margin: 0,
@@ -30,9 +31,9 @@ var decisionStyles = function decisionStyles(theme) {
   return css({
     display: 'flex',
     flexDirection: 'row',
-    margin: "".concat(gridSize(), "px 0 0 0"),
-    padding: "".concat(gridSize(), "px"),
-    paddingLeft: "".concat(gridSize() * 1.5, "px"),
+    margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
+    padding: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-150, 12px)",
     borderRadius: "".concat(borderRadius(), "px"),
     backgroundColor: themed({
       light: "var(--ds-background-neutral, ".concat(N20A, ")"),
@@ -76,6 +77,9 @@ var Item = /*#__PURE__*/function (_PureComponent) {
       if (!showPlaceholder || !placeholder || children) {
         return null;
       }
+
+      // TODO: Migrate away from gridSize
+      // Recommendation: Replace gridSize with 8
       var offset = gridSize() * (itemType === 'TASK' ? 3 : 3.5);
       return jsx("span", {
         "data-component": "placeholder",

package/dist/esm/components/TaskItem.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/react';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
-import { gridSize } from '@atlaskit/theme/constants';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
 var taskCount = 0;
@@ -15,7 +14,7 @@ var getCheckBoxId = function getCheckBoxId(localId) {
 };
 var checkboxStyles = function checkboxStyles(isRenderer) {
   return function (theme) {
-    return css(_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: inline;\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      ", "\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({
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex: 0 0 16px;\n    width: 16px;\n    height: 16px;\n    position: relative;\n    align-self: start;\n    margin: ", " ", " 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: inline;\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      ", "\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  "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", themed({
       light: "var(--ds-background-input, ".concat(N0, ")"),
       dark: "var(--ds-background-input, ".concat(DN100, ")")
     })({

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ServiceConfig } from '@atlaskit/util-service-support';
-export declare type DecisionState = 'DECIDED';
-export declare type DecisionStatus = 'CREATED';
-export declare type TaskState = 'TODO' | 'DONE';
-export declare type Cursor = string;
-export declare type DecisionType = 'DECISION';
-export declare type TaskType = 'TASK';
+export type DecisionState = 'DECIDED';
+export type DecisionStatus = 'CREATED';
+export type TaskState = 'TODO' | 'DONE';
+export type Cursor = string;
+export type DecisionType = 'DECISION';
+export type TaskType = 'TASK';
 export interface ContentRef {
     (ref: HTMLElement | null): void;
 }
@@ -38,7 +38,7 @@ export interface ServiceDecisionResponse {
     decisions: ServiceDecision[];
     meta: Meta;
 }
-export declare type ServiceItem = ServiceDecision | ServiceTask;
+export type ServiceItem = ServiceDecision | ServiceTask;
 export interface ServiceTaskState {
     lastUpdateDate: string;
     localId: string;
@@ -54,8 +54,8 @@ export interface Decision extends BaseItem<DecisionState> {
     status: DecisionStatus;
     type: DecisionType;
 }
-export declare type Item = Decision | Task;
-export declare type UserId = string;
+export type Item = Decision | Task;
+export type UserId = string;
 export interface ServiceTask {
     creationDate?: string;
     creatorId?: UserId;
@@ -79,8 +79,8 @@ export interface Task extends BaseItem<TaskState> {
     position?: number;
     type: TaskType;
 }
-export declare type Handler = (state: TaskState | DecisionState) => void;
-export declare type RecentUpdatesId = string;
+export type Handler = (state: TaskState | DecisionState) => void;
+export type RecentUpdatesId = string;
 export interface RecentUpdateContext {
     objectAri: string;
     localId?: string;
@@ -138,12 +138,12 @@ export interface RenderDocument {
 export interface OnUpdate<T> {
     (allDecisions: T[], newDecisions: T[]): void;
 }
-export declare type Appearance = 'inline';
+export type Appearance = 'inline';
 /**
  * Same as PubSub client types (don't want a direct dep though)
  */
-export declare type ARI = string;
-export declare type AVI = string;
+export type ARI = string;
+export type AVI = string;
 export interface PubSubOnEvent<T = any> {
     (event: string, data: T): void;
 }

package/dist/{types-ts4.0 → types-ts4.5}/types.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ServiceConfig } from '@atlaskit/util-service-support';
-export declare type DecisionState = 'DECIDED';
-export declare type DecisionStatus = 'CREATED';
-export declare type TaskState = 'TODO' | 'DONE';
-export declare type Cursor = string;
-export declare type DecisionType = 'DECISION';
-export declare type TaskType = 'TASK';
+export type DecisionState = 'DECIDED';
+export type DecisionStatus = 'CREATED';
+export type TaskState = 'TODO' | 'DONE';
+export type Cursor = string;
+export type DecisionType = 'DECISION';
+export type TaskType = 'TASK';
 export interface ContentRef {
     (ref: HTMLElement | null): void;
 }
@@ -38,7 +38,7 @@ export interface ServiceDecisionResponse {
     decisions: ServiceDecision[];
     meta: Meta;
 }
-export declare type ServiceItem = ServiceDecision | ServiceTask;
+export type ServiceItem = ServiceDecision | ServiceTask;
 export interface ServiceTaskState {
     lastUpdateDate: string;
     localId: string;
@@ -54,8 +54,8 @@ export interface Decision extends BaseItem<DecisionState> {
     status: DecisionStatus;
     type: DecisionType;
 }
-export declare type Item = Decision | Task;
-export declare type UserId = string;
+export type Item = Decision | Task;
+export type UserId = string;
 export interface ServiceTask {
     creationDate?: string;
     creatorId?: UserId;
@@ -79,8 +79,8 @@ export interface Task extends BaseItem<TaskState> {
     position?: number;
     type: TaskType;
 }
-export declare type Handler = (state: TaskState | DecisionState) => void;
-export declare type RecentUpdatesId = string;
+export type Handler = (state: TaskState | DecisionState) => void;
+export type RecentUpdatesId = string;
 export interface RecentUpdateContext {
     objectAri: string;
     localId?: string;
@@ -138,12 +138,12 @@ export interface RenderDocument {
 export interface OnUpdate<T> {
     (allDecisions: T[], newDecisions: T[]): void;
 }
-export declare type Appearance = 'inline';
+export type Appearance = 'inline';
 /**
  * Same as PubSub client types (don't want a direct dep though)
  */
-export declare type ARI = string;
-export declare type AVI = string;
+export type ARI = string;
+export type AVI = string;
 export interface PubSubOnEvent<T = any> {
     (event: string, data: T): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.6.1",
+  "version": "17.6.3",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -30,7 +38,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -45,9 +53,9 @@
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^74.0.0",
+    "@atlaskit/editor-common": "^74.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^108.0.0",
+    "@atlaskit/renderer": "^108.1.0",
     "@atlaskit/util-data-test": "^17.8.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/jest": "^11.8.0",
@@ -58,7 +66,7 @@
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "url-search-params": "^0.10.0"
   },
   "techstack": {

package/type-helpers/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/type-helpers.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/type-helpers.d.ts"
+        "../dist/types-ts4.5/type-helpers.d.ts"
       ]
     }
   }

package/types/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/types.d.ts"
+        "../dist/types-ts4.5/types.d.ts"
       ]
     }
   }