@atlaskit/task-decision 17.5.6 → 17.5.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/task-decision
 
+## 17.5.8
+
+### Patch Changes
+
+- [`67dc5df7db3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/67dc5df7db3) - [ux] Fix behaviour where safari could get stuck inside a decision item when trying to use the up-arrow key.
+
+## 17.5.7
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 17.5.6
 
 ### Patch Changes

package/dist/cjs/components/DecisionItem.js

@@ -13,8 +13,6 @@ var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/deci
 
 var _Item = _interopRequireDefault(require("./Item"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
@@ -29,9 +27,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
       height: '16px',
       width: '16px',
       margin: "4px ".concat((0, _constants.gridSize)() * 1.5, "px 0 0"),
-      color: 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)
+      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, ")")
       })({
         theme: theme
       }),
@@ -51,6 +49,7 @@ var DecisionItem = function DecisionItem(_ref) {
       dataAttributes = _ref.dataAttributes;
   var theme = (0, _components.useGlobalTheme)();
   var icon = (0, _react.jsx)("span", {
+    contentEditable: false,
     css: iconStyles(showPlaceholder)(theme)
   }, (0, _react.jsx)(_decision.default, {
     label: "Decision",

package/dist/cjs/components/Item.js

@@ -27,8 +27,6 @@ var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -59,8 +57,8 @@ var decisionStyles = function decisionStyles(theme) {
     paddingLeft: "".concat((0, _constants.gridSize)() * 1.5, "px"),
     borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
     backgroundColor: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
-      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+      light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
+      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
     })({
       theme: theme
     }),
@@ -75,7 +73,7 @@ var placeHolderStyles = function placeHolderStyles(offset) {
   return (0, _react2.css)({
     margin: "0 0 0 ".concat(offset, "px"),
     position: 'absolute',
-    color: (0, _tokens.token)('color.text.subtlest', _colors.N100),
+    color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
     pointerEvents: 'none',
     textOverflow: 'ellipsis',
     overflow: 'hidden',

package/dist/cjs/components/TaskItem.js

@@ -25,8 +25,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject, _templateObject2;
@@ -44,23 +42,23 @@ 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)({
-      light: (0, _tokens.token)('color.background.input', _colors.N0),
-      dark: (0, _tokens.token)('color.background.input', _colors.DN100)
+      light: "var(--ds-background-input, ".concat(_colors.N0, ")"),
+      dark: "var(--ds-background-input, ".concat(_colors.DN100, ")")
     })({
       theme: theme
     }), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _colors.N90),
-      dark: (0, _tokens.token)('color.border', _colors.DN200)
+      light: "var(--ds-border, ".concat(_colors.N90, ")"),
+      dark: "var(--ds-border, ".concat(_colors.DN200, ")")
     })({
       theme: theme
     }), isRenderer ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n            &:focus-visible + div:after {\n              outline: 2px solid\n                ", ";\n            }\n          "])), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border.focused', _colors.B300),
-      dark: (0, _tokens.token)('color.border.focused', _colors.B75)
+      light: "var(--ds-border-focused, ".concat(_colors.B300, ")"),
+      dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
     })({
       theme: theme
     })) : '', (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.input', _colors.N30),
-      dark: (0, _tokens.token)('color.background.input', _colors.B75)
+      light: "var(--ds-background-input, ".concat(_colors.N30, ")"),
+      dark: "var(--ds-background-input, ".concat(_colors.B75, ")")
     })({
       theme: theme
     }));

package/dist/cjs/version.json

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

package/dist/es2019/components/DecisionItem.js

@@ -2,7 +2,6 @@
 import { css, jsx } from '@emotion/react';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import Item from './Item';
-import { token } from '@atlaskit/tokens';
 import { G200, G400, N100 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -13,9 +12,9 @@ const iconStyles = showPlaceholder => theme => {
     height: '16px',
     width: '16px',
     margin: `4px ${gridSize() * 1.5}px 0 0`,
-    color: showPlaceholder ? token('color.icon.subtle', N100) : themed({
-      light: token('color.icon.success', G400),
-      dark: token('color.icon.success', G200)
+    color: showPlaceholder ? `var(--ds-icon-subtle, ${N100})` : themed({
+      light: `var(--ds-icon-success, ${G400})`,
+      dark: `var(--ds-icon-success, ${G200})`
     })({
       theme
     }),
@@ -35,6 +34,7 @@ const DecisionItem = ({
 }) => {
   const theme = useGlobalTheme();
   const icon = jsx("span", {
+    contentEditable: false,
     css: iconStyles(showPlaceholder)(theme)
   }, jsx(DecisionIcon, {
     label: "Decision",

package/dist/es2019/components/Item.js

@@ -5,7 +5,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import { DN50, N100, N20A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 const contentStyle = css({
@@ -29,8 +28,8 @@ const decisionStyles = theme => css({
   paddingLeft: `${gridSize() * 1.5}px`,
   borderRadius: `${borderRadius()}px`,
   backgroundColor: themed({
-    light: token('color.background.neutral', N20A),
-    dark: token('color.background.neutral', DN50)
+    light: `var(--ds-background-neutral, ${N20A})`,
+    dark: `var(--ds-background-neutral, ${DN50})`
   })({
     theme
   }),
@@ -43,7 +42,7 @@ const decisionStyles = theme => css({
 const placeHolderStyles = offset => css({
   margin: `0 0 0 ${offset}px`,
   position: 'absolute',
-  color: token('color.text.subtlest', N100),
+  color: `var(--ds-text-subtlest, ${N100})`,
   pointerEvents: 'none',
   textOverflow: 'ellipsis',
   overflow: 'hidden',

package/dist/es2019/components/TaskItem.js

@@ -6,7 +6,6 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
 import { gridSize } from '@atlaskit/theme/constants';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
 let taskCount = 0;
 
@@ -41,8 +40,8 @@ const checkboxStyles = isRenderer => theme => css`
 
         &::after {
           background: ${themed({
-  light: token('color.background.input', N0),
-  dark: token('color.background.input', DN100)
+  light: `var(--ds-background-input, ${N0})`,
+  dark: `var(--ds-background-input, ${DN100})`
 })({
   theme
 })};
@@ -51,8 +50,8 @@ const checkboxStyles = isRenderer => theme => css`
           border-style: solid;
           border-width: 1px;
           border-color: ${themed({
-  light: token('color.border', N90),
-  dark: token('color.border', DN200)
+  light: `var(--ds-border, ${N90})`,
+  dark: `var(--ds-border, ${DN200})`
 })({
   theme
 })};
@@ -71,8 +70,8 @@ const checkboxStyles = isRenderer => theme => css`
             &:focus-visible + div:after {
               outline: 2px solid
                 ${themed({
-  light: token('color.border.focused', B300),
-  dark: token('color.border.focused', B75)
+  light: `var(--ds-border-focused, ${B300})`,
+  dark: `var(--ds-border-focused, ${B75})`
 })({
   theme
 })};
@@ -81,8 +80,8 @@ const checkboxStyles = isRenderer => theme => css`
 
       &:not([disabled]):hover + div::after {
         background: ${themed({
-  light: token('color.background.input', N30),
-  dark: token('color.background.input', B75)
+  light: `var(--ds-background-input, ${N30})`,
+  dark: `var(--ds-background-input, ${B75})`
 })({
   theme
 })};

package/dist/es2019/version.json

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

package/dist/esm/components/DecisionItem.js

@@ -2,7 +2,6 @@
 import { css, jsx } from '@emotion/react';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import Item from './Item';
-import { token } from '@atlaskit/tokens';
 import { G200, G400, N100 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -14,9 +13,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
       height: '16px',
       width: '16px',
       margin: "4px ".concat(gridSize() * 1.5, "px 0 0"),
-      color: showPlaceholder ? token('color.icon.subtle', N100) : themed({
-        light: token('color.icon.success', G400),
-        dark: token('color.icon.success', G200)
+      color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(N100, ")") : themed({
+        light: "var(--ds-icon-success, ".concat(G400, ")"),
+        dark: "var(--ds-icon-success, ".concat(G200, ")")
       })({
         theme: theme
       }),
@@ -36,6 +35,7 @@ var DecisionItem = function DecisionItem(_ref) {
       dataAttributes = _ref.dataAttributes;
   var theme = useGlobalTheme();
   var icon = jsx("span", {
+    contentEditable: false,
     css: iconStyles(showPlaceholder)(theme)
   }, jsx(DecisionIcon, {
     label: "Decision",

package/dist/esm/components/Item.js

@@ -14,7 +14,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import { DN50, N100, N20A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 var contentStyle = css({
@@ -39,8 +38,8 @@ var decisionStyles = function decisionStyles(theme) {
     paddingLeft: "".concat(gridSize() * 1.5, "px"),
     borderRadius: "".concat(borderRadius(), "px"),
     backgroundColor: themed({
-      light: token('color.background.neutral', N20A),
-      dark: token('color.background.neutral', DN50)
+      light: "var(--ds-background-neutral, ".concat(N20A, ")"),
+      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
     })({
       theme: theme
     }),
@@ -55,7 +54,7 @@ var placeHolderStyles = function placeHolderStyles(offset) {
   return css({
     margin: "0 0 0 ".concat(offset, "px"),
     position: 'absolute',
-    color: token('color.text.subtlest', N100),
+    color: "var(--ds-text-subtlest, ".concat(N100, ")"),
     pointerEvents: 'none',
     textOverflow: 'ellipsis',
     overflow: 'hidden',

package/dist/esm/components/TaskItem.js

@@ -10,7 +10,6 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
 import { gridSize } from '@atlaskit/theme/constants';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
 var taskCount = 0;
 
@@ -21,23 +20,23 @@ 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({
-      light: token('color.background.input', N0),
-      dark: token('color.background.input', DN100)
+      light: "var(--ds-background-input, ".concat(N0, ")"),
+      dark: "var(--ds-background-input, ".concat(DN100, ")")
     })({
       theme: theme
     }), themed({
-      light: token('color.border', N90),
-      dark: token('color.border', DN200)
+      light: "var(--ds-border, ".concat(N90, ")"),
+      dark: "var(--ds-border, ".concat(DN200, ")")
     })({
       theme: theme
     }), isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            &:focus-visible + div:after {\n              outline: 2px solid\n                ", ";\n            }\n          "])), themed({
-      light: token('color.border.focused', B300),
-      dark: token('color.border.focused', B75)
+      light: "var(--ds-border-focused, ".concat(B300, ")"),
+      dark: "var(--ds-border-focused, ".concat(B75, ")")
     })({
       theme: theme
     })) : '', themed({
-      light: token('color.background.input', N30),
-      dark: token('color.background.input', B75)
+      light: "var(--ds-background-input, ".concat(N30, ")"),
+      dark: "var(--ds-background-input, ".concat(B75, ")")
     })({
       theme: theme
     }));

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.5.6",
+  "version": "17.5.8",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-namespaced-context": "^6.5.0",
+    "@atlaskit/analytics-namespaced-context": "^6.6.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
@@ -42,12 +42,12 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.3.0",
+    "@atlaskit/analytics-listeners": "^8.5.0",
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^72.0.0",
+    "@atlaskit/editor-common": "^72.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^105.0.0",
+    "@atlaskit/renderer": "^105.1.0",
     "@atlaskit/util-data-test": "^17.6.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/jest": "^11.8.0",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -457,3 +458,17 @@ export type UserId = string;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "url-search-params": "^0.10.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->