@atlaskit/contextual-survey 3.1.2 → 4.0.0

package/dist/es2019/components/FeedbackAcknowledgement.js

@@ -1,11 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import Heading from '@atlaskit/heading';
 import SuccessContainer from './SuccessContainer';
-export default (() => jsx(SuccessContainer, null, jsx(Heading, {
+export default (() => /*#__PURE__*/React.createElement(SuccessContainer, null, /*#__PURE__*/React.createElement(Heading, {
   size: "xsmall"
 }, "Thanks for your feedback")));

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -1,44 +1,28 @@
-/**
- * @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 { Text } from '@atlaskit/primitives';
+/* FeedbackScoreButtons.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./FeedbackScoreButtons.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Button from '@atlaskit/button/new';
+import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 const tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
+const buttonWrapperStyles = null;
+const descriptionWrapperStyles = null;
 export default (({
   onChange,
   value
-}) => jsx("div", null, 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({
-    display: 'flex',
-    justifyContent: 'space-between',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > * + *': {
-      marginLeft: "var(--ds-space-100, 8px)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > *': {
-      flex: 1,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > button': {
-        justifyContent: 'center'
-      }
-    }
-  })
+}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _1bah1yb4 _zdxokb7n _v5ynkb7n _13lsf1ug _1o0a1h6o _pof3u2gc"])
 }, Array.from({
   length: 7
 }, (_, i) => {
   const score = i + 1;
   const isSelected = value === score;
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage[i],
     key: score,
     hideTooltipOnClick: true
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: () => onChange(score),
     isSelected: isSelected,
     "aria-pressed": isSelected,
@@ -46,30 +30,20 @@ export default (({
     "aria-label": tooltipMessage[i],
     shouldFitContainer: true
   }, score));
-})), 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({
-    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(Text, {
+})), /*#__PURE__*/React.createElement("div", {
+  "aria-hidden": true,
+  className: ax(["_1e0c1txw _19pku2gc _otyr1ejb _1bah1yb4 _nbgx1epz"])
+}, /*#__PURE__*/React.createElement(Text, {
   color: "color.text.subtlest",
   size: "UNSAFE_small",
   weight: "semibold",
   align: "start"
-}, "Strongly disagree"), jsx(Text, {
+}, "Strongly disagree"), /*#__PURE__*/React.createElement(Text, {
   color: "color.text.subtlest",
   size: "UNSAFE_small",
   weight: "semibold",
   align: "center"
-}, "Neutral"), jsx(Text, {
+}, "Neutral"), /*#__PURE__*/React.createElement(Text, {
   color: "color.text.subtlest",
   size: "UNSAFE_small",
   weight: "semibold",

package/dist/es2019/components/SignUpPrompt.js

@@ -1,15 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* SignUpPrompt.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SignUpPrompt.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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 Button from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
-import { Box, Stack, Text } from '@atlaskit/primitives';
+import Link from '@atlaskit/link';
+import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
 import SuccessContainer from './SuccessContainer';
+const buttonContainerStyles = null;
 export default (({
   onAnswer
 }) => {
@@ -19,35 +18,27 @@ export default (({
     await onAnswer(answer);
   }, [setPending, onAnswer]);
   const isDisabled = Boolean(pending);
-  return jsx(SuccessContainer, null, jsx(Heading, {
+  return /*#__PURE__*/React.createElement(SuccessContainer, null, /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall"
-  }, "Thanks for your feedback"), jsx(Box, {
+  }, "Thanks for your feedback"), /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "space.150"
-  }, jsx(Stack, {
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
-  }, jsx(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     as: "p"
-  }, "Are you interested in participating in our research?"), jsx(Text, {
+  }, "Are you interested in participating in our research?"), /*#__PURE__*/React.createElement(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", {
-    // 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)",
-      display: 'flex',
-      justifyContent: 'flex-end',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > * + *': {
-        marginLeft: "var(--ds-space-100, 8px)"
-      }
-    })
-  }, jsx(Button, {
+  }, "Sign up for the", ' ', /*#__PURE__*/React.createElement(Link, {
+    href: "https://www.atlassian.com/research-group",
+    target: "_blank"
+  }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."))), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_19pkxy5q _1e0c1txw _1bahesu3 _pof3u2gc"])
+  }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: () => answeredWith(false),
     isDisabled: isDisabled,
     isLoading: pending === 'no'
-  }, "No, thanks"), jsx(Button, {
+  }, "No, thanks"), /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     onClick: () => answeredWith(true),
     isDisabled: isDisabled,

package/dist/es2019/components/SignUpSuccess.js

@@ -1,16 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import Heading from '@atlaskit/heading';
-import { Stack, Text } from '@atlaskit/primitives';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
 import SuccessContainer from './SuccessContainer';
-export default (({}) => jsx(SuccessContainer, null, jsx(Stack, {
+export default (({}) => /*#__PURE__*/React.createElement(SuccessContainer, null, /*#__PURE__*/React.createElement(Stack, {
   space: "space.150"
-}, jsx(Heading, {
+}, /*#__PURE__*/React.createElement(Heading, {
   size: "xsmall"
-}, "Thanks for signing up"), jsx(Text, {
+}, "Thanks for signing up"), /*#__PURE__*/React.createElement(Text, {
   as: "p"
 }, "We may reach out to you in the future to participate in additional research."))));

package/dist/es2019/components/SuccessContainer.js

@@ -1,26 +1,18 @@
-/**
- * @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';
+/* SuccessContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SuccessContainer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
 import { G300 } from '@atlaskit/theme/colors';
+const sectionStyles = null;
+const iconContainerStyles = null;
 export default (({
   children
-}) => jsx("section", {
-  // 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({
-    marginLeft: "var(--ds-space-500, 40px)"
-  })
-}, 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({
-    position: 'absolute',
-    top: "var(--ds-space-250, 20px)",
-    left: "var(--ds-space-300, 24px)"
-  })
-}, jsx(CheckCircleIcon, {
+}) => /*#__PURE__*/React.createElement("section", {
+  className: ax(["_18u01jfw"])
+}, /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _154iv47k _1ltv1ejb"])
+}, /*#__PURE__*/React.createElement(CheckCircleIcon, {
   spacing: "spacious",
   label: "",
   "aria-hidden": true,

package/dist/es2019/components/SurveyContainer.js

@@ -1,42 +1,25 @@
-/**
- * @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';
+/* SurveyContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SurveyContainer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { IconButton as Button } from '@atlaskit/button/new';
 import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
-import { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { surveyInnerWidth } from '../constants';
+const containerStyles = null;
+const buttonWrapperStyles = null;
 export default (({
   children,
   onDismiss
 }) => {
-  return 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({
-      backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      borderRadius: `${borderRadius()}px`,
-      padding: "var(--ds-space-300, 24px)",
-      boxShadow: `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      width: `${surveyInnerWidth}px`
-    })
-  }, 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({
-      position: 'absolute',
-      top: "var(--ds-space-200, 16px)",
-      right: "var(--ds-space-200, 16px)"
-    })
-  }, jsx(Button, {
-    iconBefore: jsx(CrossIcon, {
-      label: "",
-      color: `var(--ds-icon-subtle, ${N50})`
-    }),
-    "aria-label": "Dismiss",
+  return /*#__PURE__*/React.createElement("div", {
+    style: {},
+    className: ax(["_2rko1sit _bfhk1bhr _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _16qsuzq3 _1bsb1vif"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154ipxbi _1xi2pxbi"])
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: CrossIcon,
+    label: "Dismiss",
     appearance: "subtle",
     onClick: onDismiss
   })), children);

package/dist/es2019/components/SurveyForm.js

@@ -1,20 +1,18 @@
+/* SurveyForm.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./SurveyForm.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef, 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 { Transition } from 'react-transition-group';
-import { LoadingButton as Button } from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
 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 { Stack, Text } from '@atlaskit/primitives/compiled';
 import Textarea from '@atlaskit/textarea';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+const transitionBaseStyles = null;
 const getExpandedHeight = (ref, state) => {
   if (!ref.current) {
     return '0';
@@ -55,67 +53,65 @@ export default (({
     hasAutoFilledCanContactRef.current = true;
     setCanContactDefault(true);
   }, []);
-  return jsx("section", {
+  return /*#__PURE__*/React.createElement("section", {
     "aria-labelledby": "contextualSurveyQuestion"
-  }, jsx(Stack, {
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
-  }, jsx(Heading, {
+  }, /*#__PURE__*/React.createElement(Heading, {
     id: "contextualSurveyQuestion",
     size: "xsmall"
-  }, question), statement && jsx(Text, {
+  }, question), statement && /*#__PURE__*/React.createElement(Text, {
     as: "p",
     id: "contextualSurveyStatement"
-  }, statement)), jsx(Form, {
+  }, statement)), /*#__PURE__*/React.createElement(Form, {
     onSubmit: onSubmit
   }, ({
     formProps,
     submitting
-  }) => jsx("form", formProps, jsx(Field, {
+  }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Field, {
     name: "feedbackScore",
     isDisabled: submitting,
     isRequired: true
   }, ({
     fieldProps
-  }) => jsx(FeedbackScoreButtons, _extends({}, fieldProps, {
+  }) => /*#__PURE__*/React.createElement(FeedbackScoreButtons, _extends({}, fieldProps, {
     onChange: score => {
       fieldProps.onChange(score);
       onScoreSelect();
     }
-  }))), jsx(Transition, {
+  }))), /*#__PURE__*/React.createElement(Transition, {
     in: expanded,
     timeout: transitionDuration,
     mountOnEnter: true
-  }, state => 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({
+  }, state => /*#__PURE__*/React.createElement("div", {
+    style: {
       transition: `max-height ${transitionDuration}ms ease-in-out`,
-      overflow: 'hidden',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       maxHeight: getExpandedHeight(expandedAreaRef, state)
-    }),
-    ref: expandedAreaRef
-  }, jsx(Field, {
+    },
+    ref: expandedAreaRef,
+    className: ax(["_1reo15vq _18m915vq"])
+  }, /*#__PURE__*/React.createElement(Field, {
     name: "writtenFeedback",
     defaultValue: "",
     isDisabled: submitting
   }, ({
     fieldProps
-  }) => jsx(Textarea, _extends({}, fieldProps, {
+  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
     "aria-label": textLabel,
     placeholder: textPlaceholder,
     onChange: event => {
       fieldProps.onChange(event);
       onFeedbackChange();
     }
-  }))), jsx(CheckboxField, {
+  }))), /*#__PURE__*/React.createElement(CheckboxField, {
     name: "canContact",
     isDisabled: submitting,
     defaultIsChecked: canContactDefault
   }, ({
     fieldProps
-  }) => jsx(Checkbox, _extends({}, fieldProps, {
+  }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
     label: "Atlassian can contact me about this feedback"
-  }))), jsx(FormFooter, null, jsx(Button, {
+  }))), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     appearance: "primary",
     isLoading: submitting

package/dist/es2019/components/SurveyMarshal.js

@@ -1,10 +1,7 @@
-/**
- * @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';
+/* SurveyMarshal.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SurveyMarshal.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Transition } from 'react-transition-group';
 import { layers } from '@atlaskit/theme/constants';
 import { surveyInnerWidth, surveyOffset } from '../constants';
@@ -31,12 +28,13 @@ const getAnimationProps = state => {
       }
   }
 };
+const transitionBaseStyles = null;
 export default function SurveyMarshal(props) {
   const {
     children,
     shouldShow
   } = props;
-  return jsx(Transition, {
+  return /*#__PURE__*/React.createElement(Transition, {
     in: shouldShow,
     timeout: animationDuration,
     unmountOnExit: true
@@ -45,22 +43,14 @@ export default function SurveyMarshal(props) {
       translateX,
       opacity
     } = getAnimationProps(state);
-    return 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({
-        position: 'fixed',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        right: `${surveyOffset}px`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        bottom: `${surveyOffset}px`,
-        zIndex: layers.flag(),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        transform: `translateX(${translateX})`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
         opacity: opacity,
         transition: `all ${animationDuration}ms ease-in-out`,
-        transitionProperty: 'transform, opacity'
-      })
+        zIndex: layers.flag(),
+        transform: `translateX(${translateX})`
+      },
+      className: ax(["_kqsw1n9t _1xi2ckbl _94n5ckbl _k8m01rjc"])
     }, children());
   });
 }

package/dist/es2019/index.js

@@ -1,3 +1,2 @@
-export { DismissTrigger } from './components/ContextualSurvey';
-export { ContextualSurvey } from './fg-components';
-export { SurveyMarshal } from './fg-components';
+export { default as ContextualSurvey, DismissTrigger } from './components/ContextualSurvey';
+export { default as SurveyMarshal } from './components/SurveyMarshal';

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,13 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import Heading from '@atlaskit/heading';
 import SuccessContainer from './SuccessContainer';
 export default (function () {
-  return jsx(SuccessContainer, null, jsx(Heading, {
+  return /*#__PURE__*/React.createElement(SuccessContainer, null, /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall"
   }, "Thanks for your feedback"));
 });

package/dist/esm/components/FeedbackScoreButtons.js

@@ -1,44 +1,28 @@
-/**
- * @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 { Text } from '@atlaskit/primitives';
+/* FeedbackScoreButtons.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./FeedbackScoreButtons.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Button from '@atlaskit/button/new';
+import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
+var buttonWrapperStyles = null;
+var descriptionWrapperStyles = null;
 export default (function (_ref) {
   var onChange = _ref.onChange,
     value = _ref.value;
-  return jsx("div", null, 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({
-      display: 'flex',
-      justifyContent: 'space-between',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > * + *': {
-        marginLeft: "var(--ds-space-100, 8px)"
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '& > *': {
-        flex: 1,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-        '& > button': {
-          justifyContent: 'center'
-        }
-      }
-    })
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _1bah1yb4 _zdxokb7n _v5ynkb7n _13lsf1ug _1o0a1h6o _pof3u2gc"])
   }, Array.from({
     length: 7
   }, function (_, i) {
     var score = i + 1;
     var isSelected = value === score;
-    return jsx(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipMessage[i],
       key: score,
       hideTooltipOnClick: true
-    }, jsx(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick() {
         return onChange(score);
       },
@@ -48,30 +32,20 @@ export default (function (_ref) {
       "aria-label": tooltipMessage[i],
       shouldFitContainer: true
     }, score));
-  })), 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({
-      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(Text, {
+  })), /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true,
+    className: ax(["_1e0c1txw _19pku2gc _otyr1ejb _1bah1yb4 _nbgx1epz"])
+  }, /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtlest",
     size: "UNSAFE_small",
     weight: "semibold",
     align: "start"
-  }, "Strongly disagree"), jsx(Text, {
+  }, "Strongly disagree"), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtlest",
     size: "UNSAFE_small",
     weight: "semibold",
     align: "center"
-  }, "Neutral"), jsx(Text, {
+  }, "Neutral"), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtlest",
     size: "UNSAFE_small",
     weight: "semibold",