@atlaskit/contextual-survey 2.2.13 → 2.2.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/contextual-survey
 
+## 2.2.15
+
+### Patch Changes
+
+- [#84829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84829) [`a6299ec57bc3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6299ec57bc3) - Internal change to replace hardcoded font fallback values with an exported constant. There is no expected visual difference.
+
+## 2.2.14
+
+### Patch Changes
+
+- [#83176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83176) [`5c64e4657ef3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c64e4657ef3) - [ux] Minor changes to replace deprecated font tokens with new tokens. There may be some very slight differences in font size if the previous value was incorrectly applied, and slight differences in line height to match the new typography system.
+- Updated dependencies
+
 ## 2.2.13
 
 ### Patch Changes

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-var _templateObject;
 /** @jsx jsx */
+
+var styles = (0, _react.css)({
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
+  marginTop: 0
+});
 var _default = exports.default = function _default() {
   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)")
+    css: styles
   }, "Thanks for your feedback"));
 };

package/dist/cjs/components/SignUpPrompt.js

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 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 _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _constants = require("@atlaskit/theme/constants");
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-var _templateObject, _templateObject2;
 /** @jsx jsx */
+
+var styles = (0, _react2.css)({
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
+  margin: 0
+});
 var _default = exports.default = function _default(_ref) {
   var onAnswer = _ref.onAnswer;
   var _useState = (0, _react.useState)(null),
@@ -42,11 +45,18 @@ var _default = exports.default = function _default(_ref) {
   }(), [setPending, onAnswer]);
   var isDisabled = Boolean(pending);
   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)")
+    css: styles
   }, "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, _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)")
+    css: (0, _react2.css)({
+      marginTop: "var(--ds-space-400, 32px)",
+      display: 'flex',
+      justifyContent: 'flex-end',
+      '& > * + *': {
+        marginLeft: "var(--ds-space-100, 8px)"
+      }
+    })
   }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     onClick: function onClick() {

package/dist/cjs/components/SignUpSuccess.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-var _templateObject;
 /** @jsx jsx */
+
+var styles = (0, _react.css)({
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
+  margin: 0
+});
 var _default = exports.default = function _default(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
   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)")
+    css: styles
   }, "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/SurveyForm.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 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 _react2 = require("@emotion/react");
@@ -18,10 +17,14 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
 var _constants = require("@atlaskit/theme/constants");
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
-var _templateObject, _templateObject2;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
+var headingStyles = (0, _react2.css)({
+  fontSize: "".concat((0, _constants.fontSize)(), "px"),
+  fontWeight: 600
+});
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
     return '0';
@@ -71,7 +74,7 @@ var _default = exports.default = function _default(_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, (0, _react2.jsx)("h1", {
     id: "contextualSurveyQuestion",
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), (0, _constants.fontSize)())
+    css: headingStyles
   }, question), statement && (0, _react2.jsx)("p", {
     id: "contextualSurveyStatement"
   }, statement), (0, _react2.jsx)(_form.default, {
@@ -97,7 +100,11 @@ var _default = exports.default = function _default(_ref) {
       mountOnEnter: true
     }, function (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)),
+        css: (0, _react2.css)({
+          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          overflow: 'hidden',
+          maxHeight: getExpandedHeight(expandedAreaRef, state)
+        }),
         ref: expandedAreaRef
       }, (0, _react2.jsx)(_form.Field, {
         name: "writtenFeedback",

package/dist/cjs/components/SurveyMarshal.js

@@ -1,17 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SurveyMarshal;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
-var _templateObject;
 /** @jsx jsx */
+
 var animationDuration = 300;
 var offscreen = {
   translateX: "".concat(_constants2.surveyInnerWidth + _constants2.surveyOffset, "px"),
@@ -19,10 +17,6 @@ var offscreen = {
 };
 var getAnimationProps = function getAnimationProps(state) {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -30,6 +24,8 @@ var getAnimationProps = function getAnimationProps(state) {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -49,7 +45,16 @@ function SurveyMarshal(props) {
       translateX = _getAnimationProps.translateX,
       opacity = _getAnimationProps.opacity;
     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)
+      css: (0, _react.css)({
+        position: 'fixed',
+        right: "".concat(_constants2.surveyOffset, "px"),
+        bottom: "".concat(_constants2.surveyOffset, "px"),
+        zIndex: _constants.layers.flag(),
+        transform: "translateX(".concat(translateX, ")"),
+        opacity: opacity,
+        transition: "all ".concat(animationDuration, "ms ease-in-out"),
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/dist/es2019/components/FeedbackAcknowledgement.js

@@ -1,12 +1,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+const styles = css({
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
+  marginTop: 0
+});
 export default (() => jsx(SuccessContainer, null, jsx("h1", {
-  css: css`
-        font-size: ${fontSize()}px;
-        font-weight: 600;
-        margin-top: 0;
-        line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
-      `
+  css: styles
 }, "Thanks for your feedback")));

package/dist/es2019/components/SignUpPrompt.js

@@ -2,8 +2,12 @@
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+const styles = css({
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
+  margin: 0
+});
 export default (({
   onAnswer
 }) => {
@@ -14,24 +18,18 @@ export default (({
   }, [setPending, onAnswer]);
   const isDisabled = Boolean(pending);
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css`
-          font-size: ${fontSize()}px;
-          font-weight: 600;
-          margin: 0;
-          line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
-        `
+    css: styles
   }, "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`
-          margin-top: ${"var(--ds-space-400, 32px)"};
-          display: flex;
-          justify-content: flex-end;
-
-          & > * + * {
-            margin-left: ${"var(--ds-space-100, 8px)"};
-          }
-        `
+    css: css({
+      marginTop: "var(--ds-space-400, 32px)",
+      display: 'flex',
+      justifyContent: 'flex-end',
+      '& > * + *': {
+        marginLeft: "var(--ds-space-100, 8px)"
+      }
+    })
   }, jsx(Button, {
     appearance: "subtle",
     onClick: () => answeredWith(false),

package/dist/es2019/components/SignUpSuccess.js

@@ -1,12 +1,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+const styles = css({
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
+  margin: 0
+});
 export default (({}) => jsx(SuccessContainer, null, jsx("h1", {
-  css: css`
-        font-size: ${fontSize()}px;
-        font-weight: 600;
-        line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
-        margin: 0;
-      `
+  css: styles
 }, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research.")));

package/dist/es2019/components/SurveyForm.js

@@ -9,6 +9,10 @@ import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
 import Textarea from '@atlaskit/textarea';
 import { fontSize } from '@atlaskit/theme/constants';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+const headingStyles = css({
+  fontSize: `${fontSize()}px`,
+  fontWeight: 600
+});
 const getExpandedHeight = (ref, state) => {
   if (!ref.current) {
     return '0';
@@ -53,10 +57,7 @@ export default (({
     "aria-labelledby": "contextualSurveyQuestion"
   }, jsx("h1", {
     id: "contextualSurveyQuestion",
-    css: css`
-          font-size: ${fontSize()}px;
-          font-weight: 600;
-        `
+    css: headingStyles
   }, question), statement && jsx("p", {
     id: "contextualSurveyStatement"
   }, statement), jsx(Form, {
@@ -80,11 +81,11 @@ export default (({
     timeout: transitionDuration,
     mountOnEnter: true
   }, state => jsx("div", {
-    css: css`
-                    transition: max-height ${transitionDuration}ms ease-in-out;
-                    overflow: hidden;
-                    max-height: ${getExpandedHeight(expandedAreaRef, state)};
-                  `,
+    css: css({
+      transition: `max-height ${transitionDuration}ms ease-in-out`,
+      overflow: 'hidden',
+      maxHeight: getExpandedHeight(expandedAreaRef, state)
+    }),
     ref: expandedAreaRef
   }, jsx(Field, {
     name: "writtenFeedback",

package/dist/es2019/components/SurveyMarshal.js

@@ -11,10 +11,6 @@ const offscreen = {
 };
 const getAnimationProps = state => {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -22,6 +18,8 @@ const getAnimationProps = state => {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -44,16 +42,16 @@ export default function SurveyMarshal(props) {
       opacity
     } = getAnimationProps(state);
     return jsx("div", {
-      css: css`
-              position: fixed;
-              right: ${surveyOffset}px;
-              bottom: ${surveyOffset}px;
-              z-index: ${layers.flag()};
-              transform: translateX(${translateX});
-              opacity: ${opacity};
-              transition: all ${animationDuration}ms ease-in-out;
-              transition-property: transform, opacity;
-            `
+      css: css({
+        position: 'fixed',
+        right: `${surveyOffset}px`,
+        bottom: `${surveyOffset}px`,
+        zIndex: layers.flag(),
+        transform: `translateX(${translateX})`,
+        opacity: opacity,
+        transition: `all ${animationDuration}ms ease-in-out`,
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,11 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+var styles = css({
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
+  marginTop: 0
+});
 export default (function () {
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", ";\n      "])), fontSize(), "var(--ds-font-lineHeight-300, 24px)")
+    css: styles
   }, "Thanks for your feedback"));
 });

package/dist/esm/components/SignUpPrompt.js

@@ -1,14 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+var styles = css({
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
+  margin: 0
+});
 export default (function (_ref) {
   var onAnswer = _ref.onAnswer;
   var _useState = useState(null),
@@ -35,11 +37,18 @@ export default (function (_ref) {
   }(), [setPending, onAnswer]);
   var isDisabled = Boolean(pending);
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", ";\n        "])), fontSize(), "var(--ds-font-lineHeight-300, 24px)")
+    css: styles
   }, "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 || (_templateObject2 = _taggedTemplateLiteral(["\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)")
+    css: css({
+      marginTop: "var(--ds-space-400, 32px)",
+      display: 'flex',
+      justifyContent: 'flex-end',
+      '& > * + *': {
+        marginLeft: "var(--ds-space-100, 8px)"
+      }
+    })
   }, jsx(Button, {
     appearance: "subtle",
     onClick: function onClick() {

package/dist/esm/components/SignUpSuccess.js

@@ -1,13 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { fontSize } from '@atlaskit/theme/constants';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
+var styles = css({
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
+  margin: 0
+});
 export default (function (_ref) {
   _objectDestructuringEmpty(_ref);
   return jsx(SuccessContainer, null, jsx("h1", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", ";\n        margin: 0;\n      "])), fontSize(), "var(--ds-font-lineHeight-300, 24px)")
+    css: styles
   }, "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/SurveyForm.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -12,6 +10,10 @@ import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
 import Textarea from '@atlaskit/textarea';
 import { fontSize } from '@atlaskit/theme/constants';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+var headingStyles = css({
+  fontSize: "".concat(fontSize(), "px"),
+  fontWeight: 600
+});
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
     return '0';
@@ -61,7 +63,7 @@ export default (function (_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, jsx("h1", {
     id: "contextualSurveyQuestion",
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), fontSize())
+    css: headingStyles
   }, question), statement && jsx("p", {
     id: "contextualSurveyStatement"
   }, statement), jsx(Form, {
@@ -87,7 +89,11 @@ export default (function (_ref) {
       mountOnEnter: true
     }, function (state) {
       return jsx("div", {
-        css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        css: css({
+          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          overflow: 'hidden',
+          maxHeight: getExpandedHeight(expandedAreaRef, state)
+        }),
         ref: expandedAreaRef
       }, jsx(Field, {
         name: "writtenFeedback",

package/dist/esm/components/SurveyMarshal.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -13,10 +11,6 @@ var offscreen = {
 };
 var getAnimationProps = function getAnimationProps(state) {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -24,6 +18,8 @@ var getAnimationProps = function getAnimationProps(state) {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -43,7 +39,16 @@ export default function SurveyMarshal(props) {
       translateX = _getAnimationProps.translateX,
       opacity = _getAnimationProps.opacity;
     return jsx("div", {
-      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)
+      css: css({
+        position: 'fixed',
+        right: "".concat(surveyOffset, "px"),
+        bottom: "".concat(surveyOffset, "px"),
+        zIndex: layers.flag(),
+        transform: "translateX(".concat(translateX, ")"),
+        opacity: opacity,
+        transition: "all ".concat(animationDuration, "ms ease-in-out"),
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/contextual-survey",
-  "version": "2.2.13",
+  "version": "2.2.15",
   "description": "A React component used to ask the user for feedback",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,12 +35,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/checkbox": "^13.1.0",
-    "@atlaskit/form": "^9.0.3",
+    "@atlaskit/form": "^9.1.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/textarea": "^5.1.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/textarea": "^5.2.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",