@atlaskit/contextual-survey 2.0.9 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/contextual-survey
 
+## 2.1.0
+
+### Minor Changes
+
+- [`d943a822f6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d943a822f6a) - [ux] Instrumented `@atlaskit/contextual-survey` 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.
+
+## 2.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.9
 
 ### Patch Changes

package/build/tsconfig.json

@@ -5,6 +5,13 @@
     "target": "es5",
     "paths": {}
   },
-  "include": ["../src/**/*.ts", "../src/**/*.tsx"],
-  "exclude": ["../src/**/__tests__/*"]
-}
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/components/ContextualSurvey.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.AUTO_DISAPPEAR_DURATION = exports.DismissTrigger = void 0;
+exports.default = exports.DismissTrigger = exports.AUTO_DISAPPEAR_DURATION = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -29,6 +29,10 @@ var _SurveyForm = _interopRequireDefault(require("./SurveyForm"));
 
 var _useEscapeToDismiss = _interopRequireDefault(require("./useEscapeToDismiss"));
 
+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 DismissTrigger;
 exports.DismissTrigger = DismissTrigger;
 

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -15,19 +15,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 var _default = function _default() {
   return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
-    css: (0, _core.css)(_templateObject(), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
   }, "Thanks for your feedback"));
 };
 

package/dist/cjs/components/FeedbackScoreButtons.js

@@ -17,47 +17,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          text-align: right;\n        "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+var _tokens = require("@atlaskit/tokens");
 
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", "px;\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 
@@ -65,7 +29,7 @@ var _default = function _default(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value;
   return (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject(), (0, _constants.gridSize)())
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", "px;\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "])), (0, _constants.gridSize)())
   }, Array.from({
     length: 7
   }, function (_, i) {
@@ -86,12 +50,12 @@ var _default = function _default(_ref) {
       shouldFitContainer: true
     }, score));
   })), (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2(), _colors.N200, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 10),
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 10),
     "aria-hidden": true
   }, (0, _core.jsx)("span", null, "Strongly disagree"), (0, _core.jsx)("span", {
-    css: (0, _core.css)(_templateObject3(), (0, _constants.gridSize)() * 6)
+    css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), (0, _constants.gridSize)() * 6)
   }, "Neutral"), (0, _core.jsx)("span", {
-    css: (0, _core.css)(_templateObject4())
+    css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: right;\n        "])))
   }, "Strongly agree")));
 };
 

package/dist/cjs/components/SignUpPrompt.js

@@ -25,25 +25,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 var _default = function _default(_ref) {
   var onAnswer = _ref.onAnswer;
@@ -77,11 +59,11 @@ var _default = function _default(_ref) {
   }(), [setPending, onAnswer]);
   var isDisabled = Boolean(pending);
   return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
-    css: (0, _core.css)(_templateObject(), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
   }, "Thanks for your feedback"), (0, _core.jsx)("p", null, "Are you interested in participating in our research?"), (0, _core.jsx)("p", null, "Sign up for the", ' ', (0, _core.jsx)("a", {
     href: "https://www.atlassian.com/research-group"
   }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."), (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2(), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)())
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "])), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)())
   }, (0, _core.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     onClick: function onClick() {

package/dist/cjs/components/SignUpSuccess.js

@@ -17,20 +17,12 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 var _default = function _default(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
   return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
-    css: (0, _core.css)(_templateObject(), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
   }, "Thanks for signing up"), (0, _core.jsx)("p", null, "We may reach out to you in the future to participate in additional research."));
 };
 

package/dist/cjs/components/SuccessContainer.js

@@ -17,36 +17,20 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "]);
+var _tokens = require("@atlaskit/tokens");
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: ", "px;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 var _default = function _default(_ref) {
   var children = _ref.children;
   return (0, _core.jsx)("section", {
-    css: (0, _core.css)(_templateObject(), (0, _constants.gridSize)() * 5)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: ", "px;\n    "])), (0, _constants.gridSize)() * 5)
   }, (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3)
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3)
   }, (0, _core.jsx)(_checkCircle.default, {
     label: "",
     "aria-hidden": true,
-    primaryColor: _colors.G300
+    primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
   })), children);
 };
 

package/dist/cjs/components/SurveyContainer.js

@@ -19,29 +19,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
+var _tokens = require("@atlaskit/tokens");
 
 var _constants2 = require("../constants");
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 var padding = (0, _constants.gridSize)() * 3;
 
@@ -49,13 +31,13 @@ var _default = function _default(_ref) {
   var children = _ref.children,
       onDismiss = _ref.onDismiss;
   return (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject(), _colors.N0, (0, _constants.borderRadius)(), padding, (0, _elevation.e500)(), _constants2.surveyInnerWidth)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        box-shadow: ", ";\n        width: ", "px;\n      "])), (0, _tokens.token)('elevation.surface.overlay', _colors.N0), (0, _constants.borderRadius)(), padding, (0, _tokens.token)('elevation.shadow.overlay', "0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)), _constants2.surveyInnerWidth)
   }, (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2(), padding - (0, _constants.gridSize)(), padding - (0, _constants.gridSize)())
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - (0, _constants.gridSize)(), padding - (0, _constants.gridSize)())
   }, (0, _core.jsx)(_customThemeButton.default, {
     iconBefore: (0, _core.jsx)(_cross.default, {
       label: "",
-      primaryColor: _colors.N50
+      primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/cjs/components/SurveyForm.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,25 +33,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "]);
+var _templateObject, _templateObject2;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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); }
 
-  return data;
-}
+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 getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
@@ -110,7 +96,7 @@ var _default = function _default(_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, (0, _core.jsx)("h1", {
     id: "contextualSurveyQuestion",
-    css: (0, _core.css)(_templateObject(), (0, _constants.fontSize)())
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), (0, _constants.fontSize)())
   }, question), statement && (0, _core.jsx)("p", {
     id: "contextualSurveyStatement"
   }, statement), (0, _core.jsx)(_form.default, {
@@ -136,7 +122,7 @@ var _default = function _default(_ref) {
       mountOnEnter: true
     }, function (state) {
       return (0, _core.jsx)("div", {
-        css: (0, _core.css)(_templateObject2(), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
         ref: expandedAreaRef
       }, (0, _core.jsx)(_form.Field, {
         name: "writtenFeedback",

package/dist/cjs/components/SurveyMarshal.js

@@ -17,15 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _constants2 = require("../constants");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n              position: fixed;\n              right: ", "px;\n              bottom: ", "px;\n              z-index: ", ";\n              transform: translateX(", ");\n              opacity: ", ";\n              transition: all ", "ms ease-in-out;\n              transition-property: transform, opacity;\n            "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 var animationDuration = 300;
 var offscreen = {
@@ -69,7 +61,7 @@ function SurveyMarshal(props) {
         opacity = _getAnimationProps.opacity;
 
     return (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject(), _constants2.surveyOffset, _constants2.surveyOffset, _constants.layers.flag(), translateX, opacity, animationDuration)
+      css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              position: fixed;\n              right: ", "px;\n              bottom: ", "px;\n              z-index: ", ";\n              transform: translateX(", ");\n              opacity: ", ";\n              transition: all ", "ms ease-in-out;\n              transition-property: transform, opacity;\n            "])), _constants2.surveyOffset, _constants2.surveyOffset, _constants.layers.flag(), translateX, opacity, animationDuration)
     }, children());
   });
 }

package/dist/cjs/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28,4 +28,8 @@ Object.defineProperty(exports, "SurveyMarshal", {
 
 var _ContextualSurvey = _interopRequireWildcard(require("./components/ContextualSurvey"));
 
-var _SurveyMarshal = _interopRequireDefault(require("./components/SurveyMarshal"));
+var _SurveyMarshal = _interopRequireDefault(require("./components/SurveyMarshal"));
+
+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; }

package/dist/cjs/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "2.0.9",
+	"version": "2.1.0",
 	"sideEffects": false
 }

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 const tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (({
@@ -46,7 +47,7 @@ export default (({
   css: css`
         font-size: 12px;
         font-weight: 600;
-        color: ${N200};
+        color: ${token('color.text.subtlest', N200)};
         display: flex;
         margin-top: ${gridSize()}px;
         margin-bottom: ${gridSize() * 3}px;

package/dist/es2019/components/SuccessContainer.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { G300 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export default (({
   children
 }) => jsx("section", {
@@ -18,5 +19,5 @@ export default (({
 }, jsx(CheckCircleIcon, {
   label: "",
   "aria-hidden": true,
-  primaryColor: G300
+  primaryColor: token('color.icon.success', G300)
 })), children));

package/dist/es2019/components/SurveyContainer.js

@@ -2,9 +2,9 @@
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import { N0, N50 } from '@atlaskit/theme/colors';
+import { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { e500 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { surveyInnerWidth } from '../constants';
 const padding = gridSize() * 3;
 export default (({
@@ -13,10 +13,10 @@ export default (({
 }) => {
   return jsx("div", {
     css: css`
-        background-color: ${N0};
+        background-color: ${token('elevation.surface.overlay', N0)};
         border-radius: ${borderRadius()}px;
         padding: ${padding}px;
-        ${e500()}
+        box-shadow: ${token('elevation.shadow.overlay', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`)};
         width: ${surveyInnerWidth}px;
       `
   }, jsx("div", {
@@ -28,7 +28,7 @@ export default (({
   }, jsx(Button, {
     iconBefore: jsx(CrossIcon, {
       label: "",
-      primaryColor: N50
+      primaryColor: token('color.icon.subtle', N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "2.0.9",
+	"version": "2.1.0",
 	"sideEffects": false
 }

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,14 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -16,6 +8,6 @@ import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';
 export default (function () {
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject(), fontSize(), gridSize() * 3)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "])), fontSize(), gridSize() * 3)
   }, "Thanks for your feedback"));
 });

package/dist/esm/components/FeedbackScoreButtons.js

@@ -1,57 +1,20 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n          text-align: right;\n        "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", "px;\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (function (_ref) {
   var onChange = _ref.onChange,
       value = _ref.value;
   return jsx("div", null, jsx("div", {
-    css: css(_templateObject(), gridSize())
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", "px;\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "])), gridSize())
   }, Array.from({
     length: 7
   }, function (_, i) {
@@ -72,11 +35,11 @@ export default (function (_ref) {
       shouldFitContainer: true
     }, score));
   })), jsx("div", {
-    css: css(_templateObject2(), N200, gridSize(), gridSize() * 3, gridSize() * 10),
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), token('color.text.subtlest', N200), gridSize(), gridSize() * 3, gridSize() * 10),
     "aria-hidden": true
   }, jsx("span", null, "Strongly disagree"), jsx("span", {
-    css: css(_templateObject3(), gridSize() * 6)
+    css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), gridSize() * 6)
   }, "Neutral"), jsx("span", {
-    css: css(_templateObject4())
+    css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          text-align: right;\n        "])))
   }, "Strongly agree")));
 });

package/dist/esm/components/SignUpPrompt.js

@@ -3,25 +3,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
@@ -61,11 +43,11 @@ export default (function (_ref) {
   }(), [setPending, onAnswer]);
   var isDisabled = Boolean(pending);
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject(), fontSize(), gridSize() * 3)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "])), fontSize(), gridSize() * 3)
   }, "Thanks for your feedback"), jsx("p", null, "Are you interested in participating in our research?"), jsx("p", null, "Sign up for the", ' ', jsx("a", {
     href: "https://www.atlassian.com/research-group"
   }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."), jsx("div", {
-    css: css(_templateObject2(), gridSize() * 4, gridSize())
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "])), gridSize() * 4, gridSize())
   }, jsx(Button, {
     appearance: "subtle",
     onClick: function onClick() {

package/dist/esm/components/SignUpSuccess.js

@@ -1,15 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -19,6 +11,6 @@ export default (function (_ref) {
   _objectDestructuringEmpty(_ref);
 
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject(), fontSize(), gridSize() * 3)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "])), fontSize(), gridSize() * 3)
   }, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research."));
 });

package/dist/esm/components/SuccessContainer.js

@@ -1,39 +1,22 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      margin-left: ", "px;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { G300 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export default (function (_ref) {
   var children = _ref.children;
   return jsx("section", {
-    css: css(_templateObject(), gridSize() * 5)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-left: ", "px;\n    "])), gridSize() * 5)
   }, jsx("div", {
-    css: css(_templateObject2(), gridSize() * 3, gridSize() * 3)
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "])), gridSize() * 3, gridSize() * 3)
   }, jsx(CheckCircleIcon, {
     label: "",
     "aria-hidden": true,
-    primaryColor: G300
+    primaryColor: token('color.icon.success', G300)
   })), children);
 });

package/dist/esm/components/SurveyContainer.js

@@ -1,45 +1,27 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import { N0, N50 } from '@atlaskit/theme/colors';
+import { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { e500 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { surveyInnerWidth } from '../constants';
 var padding = gridSize() * 3;
 export default (function (_ref) {
   var children = _ref.children,
       onDismiss = _ref.onDismiss;
   return jsx("div", {
-    css: css(_templateObject(), N0, borderRadius(), padding, e500(), surveyInnerWidth)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        box-shadow: ", ";\n        width: ", "px;\n      "])), token('elevation.surface.overlay', N0), borderRadius(), padding, token('elevation.shadow.overlay', "0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A)), surveyInnerWidth)
   }, jsx("div", {
-    css: css(_templateObject2(), padding - gridSize(), padding - gridSize())
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - gridSize(), padding - gridSize())
   }, jsx(Button, {
     iconBefore: jsx(CrossIcon, {
       label: "",
-      primaryColor: N50
+      primaryColor: token('color.icon.subtle', N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/esm/components/SurveyForm.js

@@ -2,25 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n        "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import { useCallback, useRef, useState } from 'react';
@@ -89,7 +71,7 @@ export default (function (_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, jsx("h1", {
     id: "contextualSurveyQuestion",
-    css: css(_templateObject(), fontSize())
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), fontSize())
   }, question), statement && jsx("p", {
     id: "contextualSurveyStatement"
   }, statement), jsx(Form, {
@@ -115,7 +97,7 @@ export default (function (_ref) {
       mountOnEnter: true
     }, function (state) {
       return jsx("div", {
-        css: css(_templateObject2(), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
         ref: expandedAreaRef
       }, jsx(Field, {
         name: "writtenFeedback",

package/dist/esm/components/SurveyMarshal.js

@@ -1,14 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n              position: fixed;\n              right: ", "px;\n              bottom: ", "px;\n              z-index: ", ";\n              transform: translateX(", ");\n              opacity: ", ";\n              transition: all ", "ms ease-in-out;\n              transition-property: transform, opacity;\n            "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
@@ -57,7 +49,7 @@ export default function SurveyMarshal(props) {
         opacity = _getAnimationProps.opacity;
 
     return jsx("div", {
-      css: css(_templateObject(), surveyOffset, surveyOffset, layers.flag(), translateX, opacity, animationDuration)
+      css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              position: fixed;\n              right: ", "px;\n              bottom: ", "px;\n              z-index: ", ";\n              transform: translateX(", ");\n              opacity: ", ";\n              transition: all ", "ms ease-in-out;\n              transition-property: transform, opacity;\n            "])), surveyOffset, surveyOffset, layers.flag(), translateX, opacity, animationDuration)
     }, children());
   });
 }

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "2.0.9",
+	"version": "2.1.0",
 	"sideEffects": false
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormValues } from '../types';
 export declare enum DismissTrigger {
     AutoDismiss = "AUTO_DISMISS",

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     onChange: (value: number) => void;
     value: number | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
 }
 declare const _default: ({}: Props) => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OnSubmitHandler } from '@atlaskit/form';
 import { FormValues } from '../types';
 interface Props {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/contextual-survey",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "A React component used to ask the user for feedback",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,13 +23,14 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/checkbox": "^12.1.0",
-    "@atlaskit/form": "^8.0.0",
-    "@atlaskit/icon": "^21.1.0",
-    "@atlaskit/textarea": "^4.0.0",
-    "@atlaskit/theme": "^11.0.0",
-    "@atlaskit/tooltip": "^17.0.0",
+    "@atlaskit/form": "^8.5.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/textarea": "^4.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.8.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-transition-group": "^4.4.1"
@@ -40,6 +41,7 @@
   "devDependencies": {
     "@atlaskit/checkbox": "^12.1.0",
     "@atlaskit/docs": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
     "typescript": "3.9.6"
   },
@@ -51,6 +53,10 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
-  }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }