@atlaskit/contextual-survey 3.0.3 → 3.1.0

package/dist/es2019/compiled/SuccessContainer.js

@@ -0,0 +1,21 @@
+/* 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
+}) => /*#__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,
+  color: `var(--ds-icon-success, ${G300})`,
+  LEGACY_margin: "4px 0 0 0"
+})), children));

package/dist/es2019/compiled/SurveyContainer.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._154ipxbi{top:var(--ds-space-200,1pc)}
+._16qsuzq3{box-shadow:var(--ds-shadow-overlay,0 20px 2pc -8px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1bsb1vif{width:440px}
+._1xi2pxbi{right:var(--ds-space-200,1pc)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._kqswstnw{position:absolute}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}

package/dist/es2019/compiled/SurveyContainer.js

@@ -0,0 +1,26 @@
+/* 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, N50A, N60A } from '@atlaskit/theme/colors';
+import { surveyInnerWidth } from '../constants';
+const containerStyles = null;
+const buttonWrapperStyles = null;
+export default (({
+  children,
+  onDismiss
+}) => {
+  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/compiled/SurveyForm.compiled.css

@@ -0,0 +1,2 @@
+._18m915vq{overflow-y:hidden}
+._1reo15vq{overflow-x:hidden}

package/dist/es2019/compiled/SurveyForm.js

@@ -0,0 +1,119 @@
+/* SurveyForm.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./SurveyForm.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useRef, useState } from 'react';
+import { Transition } from 'react-transition-group';
+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/compiled';
+import Textarea from '@atlaskit/textarea';
+import FeedbackScoreButtons from './FeedbackScoreButtons';
+const transitionBaseStyles = null;
+const getExpandedHeight = (ref, state) => {
+  if (!ref.current) {
+    return '0';
+  }
+  switch (state) {
+    case 'entering':
+      return `${ref.current.scrollHeight}px`;
+    case 'entered':
+      // needed for TextField auto height expand
+      return `none`;
+    default:
+      return '0';
+  }
+};
+const transitionDuration = 200;
+export default (({
+  question,
+  statement,
+  textPlaceholder,
+  textLabel,
+  onSubmit
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [canContactDefault, setCanContactDefault] = useState(false);
+  const hasAutoFilledCanContactRef = useRef(false);
+  const expandedAreaRef = useRef(null);
+  const onScoreSelect = useCallback(() => {
+    setExpanded(true);
+  }, [setExpanded]);
+
+  // On the first type the user types some feedback we auto select
+  // the option for allowing feedback. This automatic selection only
+  // happens once. After that it is up to the user to control
+  const onFeedbackChange = useCallback(() => {
+    if (hasAutoFilledCanContactRef.current) {
+      return;
+    }
+    hasAutoFilledCanContactRef.current = true;
+    setCanContactDefault(true);
+  }, []);
+  return /*#__PURE__*/React.createElement("section", {
+    "aria-labelledby": "contextualSurveyQuestion"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.150"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    id: "contextualSurveyQuestion",
+    size: "xsmall"
+  }, question), statement && /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    id: "contextualSurveyStatement"
+  }, statement)), /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onSubmit
+  }, ({
+    formProps,
+    submitting
+  }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Field, {
+    name: "feedbackScore",
+    isDisabled: submitting,
+    isRequired: true
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(FeedbackScoreButtons, _extends({}, fieldProps, {
+    onChange: score => {
+      fieldProps.onChange(score);
+      onScoreSelect();
+    }
+  }))), /*#__PURE__*/React.createElement(Transition, {
+    in: expanded,
+    timeout: transitionDuration,
+    mountOnEnter: true
+  }, state => /*#__PURE__*/React.createElement("div", {
+    style: {
+      transition: `max-height ${transitionDuration}ms ease-in-out`,
+      maxHeight: getExpandedHeight(expandedAreaRef, state)
+    },
+    ref: expandedAreaRef,
+    className: ax(["_1reo15vq _18m915vq"])
+  }, /*#__PURE__*/React.createElement(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+    "aria-label": textLabel,
+    placeholder: textPlaceholder,
+    onChange: event => {
+      fieldProps.onChange(event);
+      onFeedbackChange();
+    }
+  }))), /*#__PURE__*/React.createElement(CheckboxField, {
+    name: "canContact",
+    isDisabled: submitting,
+    defaultIsChecked: canContactDefault
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+    label: "Atlassian can contact me about this feedback"
+  }))), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting
+  }, "Submit")))))));
+});

package/dist/es2019/compiled/SurveyMarshal.compiled.css

@@ -0,0 +1,4 @@
+._1xi2ckbl{right:3pc}
+._94n5ckbl{bottom:3pc}
+._k8m01rjc{transition-property:transform,opacity}
+._kqsw1n9t{position:fixed}

package/dist/es2019/compiled/SurveyMarshal.js

@@ -0,0 +1,56 @@
+/* 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';
+const animationDuration = 300;
+const offscreen = {
+  translateX: `${surveyInnerWidth + surveyOffset}px`,
+  opacity: '0'
+};
+const getAnimationProps = state => {
+  switch (state) {
+    case 'entered':
+      {
+        return {
+          translateX: '0',
+          opacity: '1'
+        };
+      }
+    case 'entering':
+    case 'unmounted':
+    case 'exited':
+    case 'exiting':
+      {
+        return offscreen;
+      }
+  }
+};
+const transitionBaseStyles = null;
+export default function SurveyMarshal(props) {
+  const {
+    children,
+    shouldShow
+  } = props;
+  return /*#__PURE__*/React.createElement(Transition, {
+    in: shouldShow,
+    timeout: animationDuration,
+    unmountOnExit: true
+  }, state => {
+    const {
+      translateX,
+      opacity
+    } = getAnimationProps(state);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        opacity: opacity,
+        transition: `all ${animationDuration}ms ease-in-out`,
+        zIndex: layers.flag(),
+        transform: `translateX(${translateX})`
+      },
+      className: ax(["_kqsw1n9t _1xi2ckbl _94n5ckbl _k8m01rjc"])
+    }, children());
+  });
+}

package/dist/es2019/compiled/useEscapeToDismiss.js

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+export const escape = 27;
+function bind(target, eventName, handler, options) {
+  target.addEventListener(eventName, handler, options);
+  return function unbind() {
+    target.removeEventListener(eventName, handler, options);
+  };
+}
+function shouldDismiss(target) {
+  if (!target) {
+    return true;
+  }
+  if (!(target instanceof HTMLElement)) {
+    return true;
+  }
+
+  // Closest doesn't exist for ie11
+  // Because we cannot be sure if in a text area - just don't allow dismissing
+  if (!target.closest) {
+    return false;
+  }
+  const inTextArea = Boolean(target.closest('textarea'));
+
+  // Allow dismissing if not in a textarea
+  return !inTextArea;
+}
+export default function useEscapeToDismiss({
+  onDismiss
+}) {
+  const onDismissRef = useRef(onDismiss);
+
+  // Defensively accounting for consumer passing in a new function
+  // each time. We just want to call the latest one
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  useEffect(() => {
+    let unbind;
+    function onKeyDown(event) {
+      if (event.keyCode !== escape) {
+        return;
+      }
+
+      // Escape pressed
+
+      // We don't want to close if the user is typing in the text area
+      if (!shouldDismiss(event.target)) {
+        return;
+      }
+      if (unbind) {
+        // only want to call dismiss once
+        unbind();
+      }
+      onDismissRef.current();
+    }
+    unbind = bind(window, 'keydown',
+    // @ts-ignore: the typescript for this is lame
+    onKeyDown, {
+      passive: true
+    });
+
+    // double calls to unbind is fine
+    return unbind;
+  }, []);
+}

package/dist/es2019/fg-components.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { default as CompiledContextualSurvey } from './compiled/ContextualSurvey';
+import { default as CompiledSurveyMarshal } from './compiled/SurveyMarshal';
+// exported props for FG check
+import { default as EmotionContextualSurvey } from './components/ContextualSurvey';
+import { default as EmotionSurveyMarshal } from './components/SurveyMarshal';
+export const ContextualSurvey = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+fg('platform_contextual_survey_enable_compiled_fg') ? /*#__PURE__*/React.createElement(CompiledContextualSurvey, props) : /*#__PURE__*/React.createElement(EmotionContextualSurvey, props);
+export const SurveyMarshal = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+fg('platform_contextual_survey_enable_compiled_fg') ? /*#__PURE__*/React.createElement(CompiledSurveyMarshal, props) : /*#__PURE__*/React.createElement(EmotionSurveyMarshal, props);

package/dist/es2019/index.js

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

package/dist/esm/compiled/ContextualSurvey.js

@@ -0,0 +1,221 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import FeedbackAcknowledgement from './FeedbackAcknowledgement';
+import SignUpPrompt from './SignUpPrompt';
+import SignUpSuccess from './SignUpSuccess';
+import SurveyContainer from './SurveyContainer';
+import SurveyForm from './SurveyForm';
+import useEscapeToDismiss from './useEscapeToDismiss';
+export var DismissTrigger = /*#__PURE__*/function (DismissTrigger) {
+  DismissTrigger["AutoDismiss"] = "AUTO_DISMISS";
+  DismissTrigger["Manual"] = "MANUAL";
+  DismissTrigger["Finished"] = "FINISHED";
+  DismissTrigger["Unmount"] = "UNMOUNT";
+  return DismissTrigger;
+}({});
+export var AUTO_DISAPPEAR_DURATION = 8000;
+export default (function (_ref) {
+  var question = _ref.question,
+    statement = _ref.statement,
+    onDismiss = _ref.onDismiss,
+    onSubmit = _ref.onSubmit,
+    onMailingListAnswer = _ref.onMailingListAnswer,
+    getUserHasAnsweredMailingList = _ref.getUserHasAnsweredMailingList,
+    _ref$textLabel = _ref.textLabel,
+    textLabel = _ref$textLabel === void 0 ? 'Why did you give that rating' : _ref$textLabel,
+    _ref$textPlaceholder = _ref.textPlaceholder,
+    textPlaceholder = _ref$textPlaceholder === void 0 ? 'Tell us why' : _ref$textPlaceholder;
+  var autoDisappearTimeoutRef = useRef(null);
+
+  // only allow a single dismiss for a component
+  var isDismissedRef = useRef(false);
+  var tryDismiss = useCallback(function (trigger) {
+    // Already called dismiss once
+    if (isDismissedRef.current) {
+      return;
+    }
+    isDismissedRef.current = true;
+    onDismissRef.current({
+      trigger: trigger
+    });
+  }, []);
+  var _useState = useState('SURVEY'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentStep = _useState2[0],
+    setCurrentStep = _useState2[1];
+  var trySetCurrentStep = useCallback(function (step) {
+    // Already dismissed - cannot update the step
+    if (isDismissedRef.current) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.log("not setting step \"".concat(step, "\" as survey is already dismissed"));
+      }
+      return;
+    }
+    setCurrentStep(step);
+  }, [setCurrentStep]);
+
+  // using a ref so that we don't break all of our caches if a consumer is using an arrow function
+  var onDismissRef = useRef(onDismiss);
+  useEffect(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  // reset isDismissedRef.current on mount to be compatible with double render in react18 strict mode
+  useEffect(function () {
+    isDismissedRef.current = false;
+  }, []);
+  var tryClearTimeout = useCallback(function () {
+    var id = autoDisappearTimeoutRef.current;
+    if (id) {
+      clearTimeout(id);
+      autoDisappearTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Cleanup any auto dismiss after dismiss
+  useEffect(function () {
+    return function unmount() {
+      tryClearTimeout();
+      tryDismiss(DismissTrigger.Unmount);
+    };
+  }, [tryClearTimeout, tryDismiss]);
+  var onSurveySubmit = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formValues, form) {
+      var callback,
+        userHasAnswered,
+        _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            callback = _args.length > 2 && _args[2] !== undefined ? _args[2] : function () {};
+            _context.next = 3;
+            return onSubmit(formValues);
+          case 3:
+            if (!isDismissedRef.current) {
+              _context.next = 6;
+              break;
+            }
+            callback();
+            return _context.abrupt("return");
+          case 6:
+            if (formValues.canContact) {
+              _context.next = 10;
+              break;
+            }
+            callback();
+            trySetCurrentStep('POST_SURVEY_NO_CONSENT');
+            return _context.abrupt("return");
+          case 10:
+            _context.next = 12;
+            return getUserHasAnsweredMailingList();
+          case 12:
+            userHasAnswered = _context.sent;
+            callback();
+
+            // Not entering phase 2: user has already answered this question
+            if (!userHasAnswered) {
+              _context.next = 17;
+              break;
+            }
+            trySetCurrentStep('POST_SURVEY_HAS_SIGN_UP');
+            return _context.abrupt("return");
+          case 17:
+            // Enter phase 2
+            trySetCurrentStep('SIGN_UP_PROMPT');
+          case 18:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [getUserHasAnsweredMailingList, onSubmit, trySetCurrentStep]);
+  var onMailingListResponse = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(answer) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return onMailingListAnswer(answer);
+          case 2:
+            if (!answer) {
+              _context2.next = 5;
+              break;
+            }
+            trySetCurrentStep('SIGN_UP_SUCCESS');
+            return _context2.abrupt("return");
+          case 5:
+            // We have already thanked to user, we can simply close
+            tryDismiss(DismissTrigger.Finished);
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [tryDismiss, trySetCurrentStep]);
+
+  // Start the auto disappear when we are finished
+  useEffect(function () {
+    // Already dismissed
+    if (isDismissedRef.current) {
+      return;
+    }
+
+    // Timeout already scheduled
+    if (autoDisappearTimeoutRef.current) {
+      return;
+    }
+    if (['SIGN_UP_SUCCESS', 'POST_SURVEY_NO_CONSENT', 'POST_SURVEY_HAS_SIGN_UP'].includes(currentStep)) {
+      autoDisappearTimeoutRef.current = window.setTimeout(function () {
+        return tryDismiss(DismissTrigger.AutoDismiss);
+      }, AUTO_DISAPPEAR_DURATION);
+    }
+  }, [currentStep, tryDismiss]);
+  useEscapeToDismiss({
+    onDismiss: function onDismiss() {
+      return tryDismiss(DismissTrigger.Manual);
+    }
+  });
+  var content = function () {
+    if (currentStep === 'SURVEY') {
+      return /*#__PURE__*/React.createElement(SurveyForm, {
+        question: question,
+        statement: statement,
+        textLabel: textLabel,
+        textPlaceholder: textPlaceholder,
+        onSubmit: onSurveySubmit
+      });
+    }
+    if (currentStep === 'SIGN_UP_PROMPT') {
+      return /*#__PURE__*/React.createElement(SignUpPrompt, {
+        onAnswer: onMailingListResponse
+      });
+    }
+    if (currentStep === 'SIGN_UP_SUCCESS') {
+      return /*#__PURE__*/React.createElement(SignUpSuccess, null);
+    }
+    if (currentStep === 'POST_SURVEY_NO_CONSENT' || currentStep === 'POST_SURVEY_HAS_SIGN_UP') {
+      return /*#__PURE__*/React.createElement(FeedbackAcknowledgement, null);
+    }
+    return null;
+  }();
+  var manualDismiss = useCallback(function () {
+    // clear any pending timers
+    tryClearTimeout();
+    tryDismiss(DismissTrigger.Manual);
+  }, [tryDismiss, tryClearTimeout]);
+  return /*#__PURE__*/React.createElement(SurveyContainer, {
+    onDismiss: manualDismiss
+  }, content);
+});

package/dist/esm/compiled/FeedbackAcknowledgement.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import SuccessContainer from './SuccessContainer';
+export default (function () {
+  return /*#__PURE__*/React.createElement(SuccessContainer, null, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, "Thanks for your feedback"));
+});

package/dist/esm/compiled/FeedbackScoreButtons.compiled.css

@@ -0,0 +1,10 @@
+._13lsf1ug>*{flex-basis:0%}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1o0a1h6o>*>button{justify-content:center}
+._nbgx1epz>span{width:var(--ds-space-1000,5pc)}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
+._pof3u2gc>*+*{margin-left:var(--ds-space-100,8px)}
+._v5ynkb7n>*{flex-shrink:1}
+._zdxokb7n>*{flex-grow:1}

package/dist/esm/compiled/FeedbackScoreButtons.js

@@ -0,0 +1,54 @@
+/* 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 /*#__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 /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipMessage[i],
+      key: score,
+      hideTooltipOnClick: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        return onChange(score);
+      },
+      isSelected: isSelected,
+      "aria-pressed": isSelected,
+      "aria-describedby": "contextualSurveyStatement",
+      "aria-label": tooltipMessage[i],
+      shouldFitContainer: true
+    }, score));
+  })), /*#__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"), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "center"
+  }, "Neutral"), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest",
+    size: "UNSAFE_small",
+    weight: "semibold",
+    align: "end"
+  }, "Strongly agree")));
+});

package/dist/esm/compiled/SignUpPrompt.compiled.css

@@ -0,0 +1,4 @@
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._pof3u2gc>*+*{margin-left:var(--ds-space-100,8px)}