@atlaskit/contextual-survey 2.2.19 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/contextual-survey
 
+## 2.3.0
+
+### Minor Changes
+
+- [#129844](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129844)
+  [`654f46d9b38cc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/654f46d9b38cc) -
+  Typography migration (https://product-fabric.atlassian.net/browse/PYX-881) for engagement-platform
+  package
+
+## 2.2.20
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.19
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -27,9 +27,15 @@
         {
             "path": "../../../design-system/form/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/heading/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/textarea/afm-cc/tsconfig.json"
         },

package/afm-post-office/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../../../tsconfig.entry-points.post-office.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__contextual-survey/app",
+    "composite": true,
+    "rootDir": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../design-system/button/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/checkbox/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/form/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/icon/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/textarea/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/theme/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tooltip/afm-post-office/tsconfig.json"
+    }
+  ]
+}

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -6,18 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _typography = require("@atlaskit/theme/typography");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  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: styles
+  return (0, _react.jsx)(_SuccessContainer.default, null, (0, _react.jsx)(_heading.default, {
+    size: "xsmall"
   }, "Thanks for your feedback"));
 };

package/dist/cjs/components/FeedbackScoreButtons.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _colors = require("@atlaskit/theme/colors");
+var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var styles = (0, _react.css)({
-  textAlign: 'right'
-});
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 var _default = exports.default = function _default(_ref) {
   var onChange = _ref.onChange,
@@ -59,26 +59,30 @@ var _default = exports.default = function _default(_ref) {
   })), (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: (0, _react.css)({
-      fontSize: '12px',
-      fontWeight: 600,
-      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
       display: 'flex',
       marginTop: "var(--ds-space-100, 8px)",
       marginBottom: "var(--ds-space-300, 24px)",
+      justifyContent: 'space-between',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '& > span': {
         width: "var(--ds-space-1000, 80px)"
       }
     }),
     "aria-hidden": true
-  }, (0, _react.jsx)("span", null, "Strongly disagree"), (0, _react.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: (0, _react.css)({
-      textAlign: 'center',
-      margin: '0 auto',
-      padding: "0 ".concat("var(--ds-space-600, 48px)")
-    })
-  }, "Neutral"), (0, _react.jsx)("span", {
-    css: styles
+  }, (0, _react.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "start"
+  }, "Strongly disagree"), (0, _react.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "center"
+  }, "Neutral"), (0, _react.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "end"
   }, "Strongly agree")));
 };

package/dist/cjs/components/SignUpPrompt.js

@@ -11,17 +11,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _typography = require("@atlaskit/theme/typography");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-/** @jsx jsx */
-
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  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),
@@ -47,11 +44,19 @@ 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: 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", {
+  return (0, _react2.jsx)(_SuccessContainer.default, null, (0, _react2.jsx)(_heading.default, {
+    size: "xsmall"
+  }, "Thanks for your feedback"), (0, _react2.jsx)(_primitives.Box, {
+    paddingBlockStart: "space.150"
+  }, (0, _react2.jsx)(_primitives.Stack, {
+    space: "space.150"
+  }, (0, _react2.jsx)(_primitives.Text, {
+    as: "p"
+  }, "Are you interested in participating in our research?"), (0, _react2.jsx)(_primitives.Text, {
+    as: "p"
+  }, "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", {
+  }, "Atlassian Research Group"), " and we may contact you in the future with research opportunities."))), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: (0, _react2.css)({
       marginTop: "var(--ds-space-400, 32px)",

package/dist/cjs/components/SignUpSuccess.js

@@ -7,19 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
-var _typography = require("@atlaskit/theme/typography");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  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: styles
-  }, "Thanks for signing up"), (0, _react.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)(_primitives.Stack, {
+    space: "space.150"
+  }, (0, _react.jsx)(_heading.default, {
+    size: "xsmall"
+  }, "Thanks for signing up"), (0, _react.jsx)(_primitives.Text, {
+    as: "p"
+  }, "We may reach out to you in the future to participate in additional research.")));
 };

package/dist/cjs/components/SuccessContainer.js

@@ -8,7 +8,10 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var _default = exports.default = function _default(_ref) {
   var children = _ref.children;

package/dist/cjs/components/SurveyContainer.js

@@ -11,7 +11,10 @@ var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var _default = exports.default = function _default(_ref) {
   var children = _ref.children,

package/dist/cjs/components/SurveyForm.js

@@ -14,19 +14,19 @@ var _reactTransitionGroup = require("react-transition-group");
 var _button = require("@atlaskit/button");
 var _checkbox = require("@atlaskit/checkbox");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
-var _constants = require("@atlaskit/theme/constants");
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
 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 */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var headingStyles = (0, _react2.css)({
-  fontSize: "".concat((0, _constants.fontSize)(), "px"),
-  fontWeight: 600
-});
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
     return '0';
@@ -74,12 +74,15 @@ var _default = exports.default = function _default(_ref) {
   }, []);
   return (0, _react2.jsx)("section", {
     "aria-labelledby": "contextualSurveyQuestion"
-  }, (0, _react2.jsx)("h1", {
+  }, (0, _react2.jsx)(_primitives.Stack, {
+    space: "space.150"
+  }, (0, _react2.jsx)(_heading.default, {
     id: "contextualSurveyQuestion",
-    css: headingStyles
-  }, question), statement && (0, _react2.jsx)("p", {
+    size: "xsmall"
+  }, question), statement && (0, _react2.jsx)(_primitives.Text, {
+    as: "p",
     id: "contextualSurveyStatement"
-  }, statement), (0, _react2.jsx)(_form.default, {
+  }, statement)), (0, _react2.jsx)(_form.default, {
     onSubmit: onSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps,

package/dist/cjs/components/SurveyMarshal.js

@@ -8,7 +8,10 @@ var _react = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/es2019/components/FeedbackAcknowledgement.js

@@ -1,13 +1,11 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { jsx } from '@emotion/react';
+import Heading from '@atlaskit/heading';
 import SuccessContainer from './SuccessContainer';
-const styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
-  marginTop: 0
-});
-export default (() => jsx(SuccessContainer, null, jsx("h1", {
-  css: styles
+export default (() => jsx(SuccessContainer, null, jsx(Heading, {
+  size: "xsmall"
 }, "Thanks for your feedback")));

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { N200 } from '@atlaskit/theme/colors';
+import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
-const styles = css({
-  textAlign: 'right'
-});
 const tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (({
   onChange,
@@ -49,25 +49,29 @@ export default (({
 })), jsx("div", {
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css: css({
-    fontSize: '12px',
-    fontWeight: 600,
-    color: `var(--ds-text-subtlest, ${N200})`,
     display: 'flex',
     marginTop: "var(--ds-space-100, 8px)",
     marginBottom: "var(--ds-space-300, 24px)",
+    justifyContent: 'space-between',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& > span': {
       width: "var(--ds-space-1000, 80px)"
     }
   }),
   "aria-hidden": true
-}, jsx("span", null, "Strongly disagree"), jsx("span", {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  css: css({
-    textAlign: 'center',
-    margin: '0 auto',
-    padding: `0 ${"var(--ds-space-600, 48px)"}`
-  })
-}, "Neutral"), jsx("span", {
-  css: styles
+}, jsx(Text, {
+  color: "color.text.subtlest",
+  size: "UNSAFE_small",
+  weight: "semibold",
+  align: "start"
+}, "Strongly disagree"), jsx(Text, {
+  color: "color.text.subtlest",
+  size: "UNSAFE_small",
+  weight: "semibold",
+  align: "center"
+}, "Neutral"), jsx(Text, {
+  color: "color.text.subtlest",
+  size: "UNSAFE_small",
+  weight: "semibold",
+  align: "end"
 }, "Strongly agree"))));

package/dist/es2019/components/SignUpPrompt.js

@@ -1,16 +1,15 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { fontFallback } from '@atlaskit/theme/typography';
+import Heading from '@atlaskit/heading';
+import { Box, Stack, Text } from '@atlaskit/primitives';
 import SuccessContainer from './SuccessContainer';
-const styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
-  margin: 0
-});
 export default (({
   onAnswer
 }) => {
@@ -20,11 +19,19 @@ export default (({
     await onAnswer(answer);
   }, [setPending, onAnswer]);
   const isDisabled = Boolean(pending);
-  return jsx(SuccessContainer, null, jsx("h1", {
-    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", {
+  return jsx(SuccessContainer, null, jsx(Heading, {
+    size: "xsmall"
+  }, "Thanks for your feedback"), jsx(Box, {
+    paddingBlockStart: "space.150"
+  }, jsx(Stack, {
+    space: "space.150"
+  }, jsx(Text, {
+    as: "p"
+  }, "Are you interested in participating in our research?"), jsx(Text, {
+    as: "p"
+  }, "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", {
+  }, "Atlassian Research Group"), " and we may contact you in the future with research opportunities."))), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: css({
       marginTop: "var(--ds-space-400, 32px)",

package/dist/es2019/components/SignUpSuccess.js

@@ -1,13 +1,16 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { jsx } from '@emotion/react';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 import SuccessContainer from './SuccessContainer';
-const styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
-  margin: 0
-});
-export default (({}) => jsx(SuccessContainer, null, jsx("h1", {
-  css: styles
-}, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research.")));
+export default (({}) => jsx(SuccessContainer, null, jsx(Stack, {
+  space: "space.150"
+}, jsx(Heading, {
+  size: "xsmall"
+}, "Thanks for signing up"), jsx(Text, {
+  as: "p"
+}, "We may reach out to you in the future to participate in additional research."))));

package/dist/es2019/components/SuccessContainer.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';

package/dist/es2019/components/SurveyContainer.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/components/SurveyForm.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -8,13 +11,10 @@ import { Transition } from 'react-transition-group';
 import { LoadingButton as Button } from '@atlaskit/button';
 import { Checkbox } from '@atlaskit/checkbox';
 import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 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';
@@ -57,12 +57,15 @@ export default (({
   }, []);
   return jsx("section", {
     "aria-labelledby": "contextualSurveyQuestion"
-  }, jsx("h1", {
+  }, jsx(Stack, {
+    space: "space.150"
+  }, jsx(Heading, {
     id: "contextualSurveyQuestion",
-    css: headingStyles
-  }, question), statement && jsx("p", {
+    size: "xsmall"
+  }, question), statement && jsx(Text, {
+    as: "p",
     id: "contextualSurveyStatement"
-  }, statement), jsx(Form, {
+  }, statement)), jsx(Form, {
     onSubmit: onSubmit
   }, ({
     formProps,

package/dist/es2019/components/SurveyMarshal.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,15 +1,13 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { jsx } from '@emotion/react';
+import Heading from '@atlaskit/heading';
 import SuccessContainer from './SuccessContainer';
-var styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
-  marginTop: 0
-});
 export default (function () {
-  return jsx(SuccessContainer, null, jsx("h1", {
-    css: styles
+  return jsx(SuccessContainer, null, jsx(Heading, {
+    size: "xsmall"
   }, "Thanks for your feedback"));
 });

package/dist/esm/components/FeedbackScoreButtons.js

@@ -1,12 +1,12 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { N200 } from '@atlaskit/theme/colors';
+import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
-var styles = css({
-  textAlign: 'right'
-});
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (function (_ref) {
   var onChange = _ref.onChange,
@@ -51,26 +51,30 @@ export default (function (_ref) {
   })), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: css({
-      fontSize: '12px',
-      fontWeight: 600,
-      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
       display: 'flex',
       marginTop: "var(--ds-space-100, 8px)",
       marginBottom: "var(--ds-space-300, 24px)",
+      justifyContent: 'space-between',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '& > span': {
         width: "var(--ds-space-1000, 80px)"
       }
     }),
     "aria-hidden": true
-  }, jsx("span", null, "Strongly disagree"), jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: css({
-      textAlign: 'center',
-      margin: '0 auto',
-      padding: "0 ".concat("var(--ds-space-600, 48px)")
-    })
-  }, "Neutral"), jsx("span", {
-    css: styles
+  }, jsx(Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "start"
+  }, "Strongly disagree"), jsx(Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "center"
+  }, "Neutral"), jsx(Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "end"
   }, "Strongly agree")));
 });

package/dist/esm/components/SignUpPrompt.js

@@ -1,19 +1,18 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { fontFallback } from '@atlaskit/theme/typography';
+import Heading from '@atlaskit/heading';
+import { Box, Stack, Text } from '@atlaskit/primitives';
 import SuccessContainer from './SuccessContainer';
-var styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
-  margin: 0
-});
 export default (function (_ref) {
   var onAnswer = _ref.onAnswer;
   var _useState = useState(null),
@@ -39,11 +38,19 @@ export default (function (_ref) {
     };
   }(), [setPending, onAnswer]);
   var isDisabled = Boolean(pending);
-  return jsx(SuccessContainer, null, jsx("h1", {
-    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", {
+  return jsx(SuccessContainer, null, jsx(Heading, {
+    size: "xsmall"
+  }, "Thanks for your feedback"), jsx(Box, {
+    paddingBlockStart: "space.150"
+  }, jsx(Stack, {
+    space: "space.150"
+  }, jsx(Text, {
+    as: "p"
+  }, "Are you interested in participating in our research?"), jsx(Text, {
+    as: "p"
+  }, "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", {
+  }, "Atlassian Research Group"), " and we may contact you in the future with research opportunities."))), jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: css({
       marginTop: "var(--ds-space-400, 32px)",

package/dist/esm/components/SignUpSuccess.js

@@ -1,17 +1,20 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fontFallback } from '@atlaskit/theme/typography';
+import { jsx } from '@emotion/react';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 import SuccessContainer from './SuccessContainer';
-var styles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  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: styles
-  }, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research."));
+  return jsx(SuccessContainer, null, jsx(Stack, {
+    space: "space.150"
+  }, jsx(Heading, {
+    size: "xsmall"
+  }, "Thanks for signing up"), jsx(Text, {
+    as: "p"
+  }, "We may reach out to you in the future to participate in additional research.")));
 });

package/dist/esm/components/SuccessContainer.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';

package/dist/esm/components/SurveyContainer.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/components/SurveyForm.js

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -9,13 +12,10 @@ import { Transition } from 'react-transition-group';
 import { LoadingButton as Button } from '@atlaskit/button';
 import { Checkbox } from '@atlaskit/checkbox';
 import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
+import Heading from '@atlaskit/heading';
+import { Stack, Text } from '@atlaskit/primitives';
 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';
@@ -63,12 +63,15 @@ export default (function (_ref) {
   }, []);
   return jsx("section", {
     "aria-labelledby": "contextualSurveyQuestion"
-  }, jsx("h1", {
+  }, jsx(Stack, {
+    space: "space.150"
+  }, jsx(Heading, {
     id: "contextualSurveyQuestion",
-    css: headingStyles
-  }, question), statement && jsx("p", {
+    size: "xsmall"
+  }, question), statement && jsx(Text, {
+    as: "p",
     id: "contextualSurveyStatement"
-  }, statement), jsx(Form, {
+  }, statement)), jsx(Form, {
     onSubmit: onSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps,

package/dist/esm/components/SurveyMarshal.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 declare const _default: () => jsx.JSX.Element;
 export default _default;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     onChange: (value: number) => void;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
 }

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type Props = {

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @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,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     onChange: (value: number) => void;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
 }

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 interface Props {
     children: React.ReactNode;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type Props = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "2.2.19",
+	"version": "2.3.0",
 	"description": "A React component used to ask the user for feedback",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,14 +35,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^19.0.0",
-		"@atlaskit/checkbox": "^13.5.0",
-		"@atlaskit/form": "^10.4.0",
-		"@atlaskit/icon": "^22.6.0",
-		"@atlaskit/textarea": "^5.5.0",
-		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/checkbox": "^13.7.0",
+		"@atlaskit/form": "^10.5.0",
+		"@atlaskit/heading": "^2.4.0",
+		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/primitives": "^12.0.1",
+		"@atlaskit/textarea": "^5.6.0",
+		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-transition-group": "^4.4.1"