@atlaskit/contextual-survey 2.2.7 → 2.2.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/contextual-survey
 
+## 2.2.9
+
+### Patch Changes
+
+- [#57124](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57124) [`7ee324f9de67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ee324f9de67) - Upgrade Emotion v10 (@emotion/core) to Emotion v11 (@emotion/react). No behaviour change expected.
+
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.7
 
 ### Patch Changes

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 var _templateObject;
 /** @jsx jsx */
 var _default = exports.default = function _default() {
-  return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", ";\n      "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
+  return (0, _react.jsx)(_SuccessContainer.default, null, (0, _react.jsx)("h1", {
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", ";\n      "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
   }, "Thanks for your feedback"));
 };

package/dist/cjs/components/FeedbackScoreButtons.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -16,18 +16,18 @@ var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neu
 var _default = exports.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 || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", ";\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "])), "var(--ds-space-100, 8px)")
+  return (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", ";\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "])), "var(--ds-space-100, 8px)")
   }, Array.from({
     length: 7
   }, function (_, i) {
     var score = i + 1;
     var isSelected = value === score;
-    return (0, _core.jsx)(_tooltip.default, {
+    return (0, _react.jsx)(_tooltip.default, {
       content: tooltipMessage[i],
       key: score,
       hideTooltipOnClick: true
-    }, (0, _core.jsx)(_customThemeButton.default, {
+    }, (0, _react.jsx)(_customThemeButton.default, {
       onClick: function onClick() {
         return onChange(score);
       },
@@ -37,12 +37,12 @@ var _default = exports.default = function _default(_ref) {
       "aria-label": tooltipMessage[i],
       shouldFitContainer: true
     }, score));
-  })), (0, _core.jsx)("div", {
-    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: ", ";\n        margin-bottom: ", ";\n\n        & > span {\n          width: ", ";\n        }\n      "])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-1000, 80px)"),
+  })), (0, _react.jsx)("div", {
+    css: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", ";\n        margin-bottom: ", ";\n\n        & > span {\n          width: ", ";\n        }\n      "])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-1000, 80px)"),
     "aria-hidden": true
-  }, (0, _core.jsx)("span", null, "Strongly disagree"), (0, _core.jsx)("span", {
-    css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", ";\n        "])), "var(--ds-space-600, 48px)")
-  }, "Neutral"), (0, _core.jsx)("span", {
-    css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: right;\n        "])))
+  }, (0, _react.jsx)("span", null, "Strongly disagree"), (0, _react.jsx)("span", {
+    css: (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", ";\n        "])), "var(--ds-space-600, 48px)")
+  }, "Neutral"), (0, _react.jsx)("span", {
+    css: (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: right;\n        "])))
   }, "Strongly agree")));
 };

package/dist/cjs/components/SignUpPrompt.js

@@ -10,7 +10,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _constants = require("@atlaskit/theme/constants");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
@@ -41,20 +41,20 @@ var _default = exports.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 || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", ";\n        "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
-  }, "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", {
+  return (0, _react2.jsx)(_SuccessContainer.default, null, (0, _react2.jsx)("h1", {
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", ";\n        "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
+  }, "Thanks for your feedback"), (0, _react2.jsx)("p", null, "Are you interested in participating in our research?"), (0, _react2.jsx)("p", null, "Sign up for the", ' ', (0, _react2.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 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          margin-top: ", ";\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", ";\n          }\n        "])), "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)")
-  }, (0, _core.jsx)(_customThemeButton.default, {
+  }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."), (0, _react2.jsx)("div", {
+    css: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          margin-top: ", ";\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", ";\n          }\n        "])), "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)")
+  }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     onClick: function onClick() {
       return answeredWith(false);
     },
     isDisabled: isDisabled,
     isLoading: pending === 'no'
-  }, "No, thanks"), (0, _core.jsx)(_customThemeButton.default, {
+  }, "No, thanks"), (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "primary",
     onClick: function onClick() {
       return answeredWith(true);

package/dist/cjs/components/SignUpSuccess.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 var _templateObject;
 /** @jsx jsx */
 var _default = exports.default = function _default(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
-  return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", ";\n        margin: 0;\n      "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
-  }, "Thanks for signing up"), (0, _core.jsx)("p", null, "We may reach out to you in the future to participate in additional research."));
+  return (0, _react.jsx)(_SuccessContainer.default, null, (0, _react.jsx)("h1", {
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", ";\n        margin: 0;\n      "])), (0, _constants.fontSize)(), "var(--ds-font-lineHeight-300, 24px)")
+  }, "Thanks for signing up"), (0, _react.jsx)("p", null, "We may reach out to you in the future to participate in additional research."));
 };

package/dist/cjs/components/SuccessContainer.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 var _default = exports.default = function _default(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("section", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: ", ";\n    "])), "var(--ds-space-500, 40px)")
-  }, (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        position: absolute;\n        top: ", ";\n        left: ", ";\n      "])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)")
-  }, (0, _core.jsx)(_checkCircle.default, {
+  return (0, _react.jsx)("section", {
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: ", ";\n    "])), "var(--ds-space-500, 40px)")
+  }, (0, _react.jsx)("div", {
+    css: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        position: absolute;\n        top: ", ";\n        left: ", ";\n      "])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)")
+  }, (0, _react.jsx)(_checkCircle.default, {
     label: "",
     "aria-hidden": true,
     primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")")

package/dist/cjs/components/SurveyContainer.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _colors = require("@atlaskit/theme/colors");
@@ -17,12 +17,12 @@ var _templateObject, _templateObject2;
 var _default = exports.default = function _default(_ref) {
   var children = _ref.children,
     onDismiss = _ref.onDismiss;
-  return (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", ";\n        box-shadow: ", ";\n        width: ", "px;\n      "])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-space-300, 24px)", "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), _constants2.surveyInnerWidth)
-  }, (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", ";\n          right: ", ";\n        "])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)")
-  }, (0, _core.jsx)(_customThemeButton.default, {
-    iconBefore: (0, _core.jsx)(_cross.default, {
+  return (0, _react.jsx)("div", {
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", ";\n        box-shadow: ", ";\n        width: ", "px;\n      "])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), (0, _constants.borderRadius)(), "var(--ds-space-300, 24px)", "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), _constants2.surveyInnerWidth)
+  }, (0, _react.jsx)("div", {
+    css: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", ";\n          right: ", ";\n        "])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)")
+  }, (0, _react.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _react.jsx)(_cross.default, {
       label: "",
       primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N50, ")")
     }),

package/dist/cjs/components/SurveyForm.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _checkbox = require("@atlaskit/checkbox");
@@ -67,45 +67,45 @@ var _default = exports.default = function _default(_ref) {
     hasAutoFilledCanContactRef.current = true;
     setCanContactDefault(true);
   }, []);
-  return (0, _core.jsx)("section", {
+  return (0, _react2.jsx)("section", {
     "aria-labelledby": "contextualSurveyQuestion"
-  }, (0, _core.jsx)("h1", {
+  }, (0, _react2.jsx)("h1", {
     id: "contextualSurveyQuestion",
-    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", {
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), (0, _constants.fontSize)())
+  }, question), statement && (0, _react2.jsx)("p", {
     id: "contextualSurveyStatement"
-  }, statement), (0, _core.jsx)(_form.default, {
+  }, statement), (0, _react2.jsx)(_form.default, {
     onSubmit: onSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps,
       submitting = _ref2.submitting;
-    return (0, _core.jsx)("form", formProps, (0, _core.jsx)(_form.Field, {
+    return (0, _react2.jsx)("form", formProps, (0, _react2.jsx)(_form.Field, {
       name: "feedbackScore",
       isDisabled: submitting,
       isRequired: true
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;
-      return (0, _core.jsx)(_FeedbackScoreButtons.default, (0, _extends2.default)({}, fieldProps, {
+      return (0, _react2.jsx)(_FeedbackScoreButtons.default, (0, _extends2.default)({}, fieldProps, {
         onChange: function onChange(score) {
           fieldProps.onChange(score);
           onScoreSelect();
         }
       }));
-    }), (0, _core.jsx)(_reactTransitionGroup.Transition, {
+    }), (0, _react2.jsx)(_reactTransitionGroup.Transition, {
       in: expanded,
       timeout: transitionDuration,
       mountOnEnter: true
     }, function (state) {
-      return (0, _core.jsx)("div", {
-        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)),
+      return (0, _react2.jsx)("div", {
+        css: (0, _react2.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, {
+      }, (0, _react2.jsx)(_form.Field, {
         name: "writtenFeedback",
         defaultValue: "",
         isDisabled: submitting
       }, function (_ref4) {
         var fieldProps = _ref4.fieldProps;
-        return (0, _core.jsx)(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+        return (0, _react2.jsx)(_textarea.default, (0, _extends2.default)({}, fieldProps, {
           "aria-label": textLabel,
           placeholder: textPlaceholder,
           onChange: function onChange(event) {
@@ -113,16 +113,16 @@ var _default = exports.default = function _default(_ref) {
             onFeedbackChange();
           }
         }));
-      }), (0, _core.jsx)(_form.CheckboxField, {
+      }), (0, _react2.jsx)(_form.CheckboxField, {
         name: "canContact",
         isDisabled: submitting,
         defaultIsChecked: canContactDefault
       }, function (_ref5) {
         var fieldProps = _ref5.fieldProps;
-        return (0, _core.jsx)(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
+        return (0, _react2.jsx)(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
           label: "Atlassian can contact me about this feedback"
         }));
-      }), (0, _core.jsx)(_form.FormFooter, null, (0, _core.jsx)(_customThemeButton.default, {
+      }), (0, _react2.jsx)(_form.FormFooter, null, (0, _react2.jsx)(_customThemeButton.default, {
         type: "submit",
         appearance: "primary",
         isLoading: submitting

package/dist/cjs/components/SurveyMarshal.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = SurveyMarshal;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
@@ -40,7 +40,7 @@ var getAnimationProps = function getAnimationProps(state) {
 function SurveyMarshal(props) {
   var children = props.children,
     shouldShow = props.shouldShow;
-  return (0, _core.jsx)(_reactTransitionGroup.Transition, {
+  return (0, _react.jsx)(_reactTransitionGroup.Transition, {
     in: shouldShow,
     timeout: animationDuration,
     unmountOnExit: true
@@ -48,8 +48,8 @@ function SurveyMarshal(props) {
     var _getAnimationProps = getAnimationProps(state),
       translateX = _getAnimationProps.translateX,
       opacity = _getAnimationProps.opacity;
-    return (0, _core.jsx)("div", {
-      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)
+    return (0, _react.jsx)("div", {
+      css: (0, _react.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/es2019/components/FeedbackAcknowledgement.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';
 export default (() => jsx(SuccessContainer, null, jsx("h1", {

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/components/SignUpPrompt.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';

package/dist/es2019/components/SignUpSuccess.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';
 export default (({}) => jsx(SuccessContainer, null, jsx("h1", {

package/dist/es2019/components/SuccessContainer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { G300 } from '@atlaskit/theme/colors';
 export default (({

package/dist/es2019/components/SurveyContainer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';

package/dist/es2019/components/SurveyForm.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Transition } from 'react-transition-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Checkbox } from '@atlaskit/checkbox';

package/dist/es2019/components/SurveyMarshal.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Transition } from 'react-transition-group';
 import { layers } from '@atlaskit/theme/constants';
 import { surveyInnerWidth, surveyOffset } from '../constants';

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';
 export default (function () {

package/dist/esm/components/FeedbackScoreButtons.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/dist/esm/components/SignUpPrompt.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';

package/dist/esm/components/SignUpSuccess.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 var _templateObject;
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import SuccessContainer from './SuccessContainer';
 export default (function (_ref) {

package/dist/esm/components/SuccessContainer.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { G300 } from '@atlaskit/theme/colors';
 export default (function (_ref) {

package/dist/esm/components/SurveyContainer.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';

package/dist/esm/components/SurveyForm.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Transition } from 'react-transition-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Checkbox } from '@atlaskit/checkbox';

package/dist/esm/components/SurveyMarshal.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Transition } from 'react-transition-group';
 import { layers } from '@atlaskit/theme/constants';
 import { surveyInnerWidth, surveyOffset } from '../constants';

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

@@ -1,3 +1,4 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const _default: () => jsx.JSX.Element;
 export default _default;

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

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     onChange: (value: number) => void;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value }: Props) => JSX.Element;
+declare const _default: ({ onChange, value }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
 }
-declare const _default: ({}: Props) => JSX.Element;
+declare const _default: ({}: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { OnSubmitHandler } from '@atlaskit/form';
 import { FormValues } from '../types';
 interface Props {
@@ -8,5 +8,5 @@ interface Props {
     textLabel: string;
     onSubmit: OnSubmitHandler<FormValues>;
 }
-declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     /** Whether the form should be rendered */
     shouldShow: boolean;
@@ -9,5 +10,5 @@ type Props = {
      */
     children: () => ReactNode;
 };
-export default function SurveyMarshal(props: Props): JSX.Element;
+export default function SurveyMarshal(props: Props): jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/components/FeedbackAcknowledgement.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const _default: () => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/FeedbackScoreButtons.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     onChange: (value: number) => void;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value }: Props) => JSX.Element;
+declare const _default: ({ onChange, value }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SignUpPrompt.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SignUpSuccess.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
 }
-declare const _default: ({}: Props) => JSX.Element;
+declare const _default: ({}: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SuccessContainer.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyContainer.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyForm.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { OnSubmitHandler } from '@atlaskit/form';
 import { FormValues } from '../types';
 interface Props {
@@ -8,5 +8,5 @@ interface Props {
     textLabel: string;
     onSubmit: OnSubmitHandler<FormValues>;
 }
-declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => jsx.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyMarshal.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     /** Whether the form should be rendered */
     shouldShow: boolean;
@@ -9,5 +10,5 @@ type Props = {
      */
     children: () => ReactNode;
 };
-export default function SurveyMarshal(props: Props): JSX.Element;
+export default function SurveyMarshal(props: Props): jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/contextual-survey",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "description": "A React component used to ask the user for feedback",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,16 +31,16 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/form": "^9.0.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/textarea": "^5.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {

package/tmp/api-report-tmp.d.ts

@@ -1,61 +0,0 @@
-## API Report File for "@atlaskit/contextual-survey"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { ReactNode } from 'react';
-
-// @public (undocumented)
-export const ContextualSurvey: ({ question, statement, onDismiss, onSubmit, onMailingListAnswer, getUserHasAnsweredMailingList, textLabel, textPlaceholder, }: Props) => JSX.Element;
-
-// @public (undocumented)
-export enum DismissTrigger {
-    // (undocumented)
-    AutoDismiss = "AUTO_DISMISS",
-    // (undocumented)
-    Finished = "FINISHED",
-    // (undocumented)
-    Manual = "MANUAL",
-    // (undocumented)
-    Unmount = "UNMOUNT"
-}
-
-// @public (undocumented)
-type FormValues = {
-    feedbackScore: number;
-    canContact: boolean;
-    writtenFeedback: string;
-};
-
-// @public (undocumented)
-export type OnDismissArgs = {
-    trigger: DismissTrigger;
-};
-
-// @public (undocumented)
-interface Props {
-    getUserHasAnsweredMailingList: () => Promise<boolean>;
-    onDismiss: (args: OnDismissArgs) => void;
-    onMailingListAnswer: (answer: boolean) => Promise<void>;
-    onSubmit: (formValues: FormValues) => Promise<void>;
-    question: string;
-    statement?: string;
-    textLabel?: string;
-    textPlaceholder?: string;
-}
-
-// @public (undocumented)
-type Props_2 = {
-    shouldShow: boolean;
-    children: () => ReactNode;
-};
-
-// @public (undocumented)
-export function SurveyMarshal(props: Props_2): JSX.Element;
-
-// (No @packageDocumentation comment for this package)
-
-```