@atlaskit/contextual-survey 2.2.20 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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/dist/cjs/components/FeedbackAcknowledgement.js

@@ -6,21 +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"));
 /**
  * @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,7 +7,7 @@ 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"));
 /**
  * @jsxRuntime classic
@@ -15,9 +15,6 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
  */
 // 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,
@@ -62,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,20 +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"));
 /**
  * @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),
@@ -50,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,22 +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"));
 /**
  * @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/SurveyForm.js

@@ -14,8 +14,9 @@ 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; }
@@ -26,10 +27,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // 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';
@@ -77,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/es2019/components/FeedbackAcknowledgement.js

@@ -3,14 +3,9 @@
  * @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

@@ -5,11 +5,8 @@
 // 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,
@@ -52,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

@@ -7,13 +7,9 @@ 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
 }) => {
@@ -23,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

@@ -3,14 +3,14 @@
  * @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/SurveyForm.js

@@ -11,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';
@@ -60,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/esm/components/FeedbackAcknowledgement.js

@@ -3,16 +3,11 @@
  * @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

@@ -5,11 +5,8 @@
 // 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,
@@ -54,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

@@ -10,13 +10,9 @@ 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),
@@ -42,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

@@ -4,17 +4,17 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
  * @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/SurveyForm.js

@@ -12,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';
@@ -66,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "2.2.20",
+	"version": "2.3.0",
 	"description": "A React component used to ask the user for feedback",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,9 @@
 		"@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",