@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/subot.js

@@ -1,56 +1,60 @@
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, forwardRef, memo, useImperativeHandle } from 'react';
-import { d as NodeType, c as NodePosition, f as NodeActionType, e as NodeFinalTypes, g as NodeMultipleOptions, E as ELEMENT_CONTROL_INPUT_TYPE, N as NodeIntentType, L as LOCALE, F as FULL_KEY_ADDRESS } from './index-877eed06.js';
-import { a as __awaiter, _ as __rest } from './tslib.es6-efad16cf.js';
-import { M as MAP_DOMAIN_BY_LOCALE, e as basePath, G as GA_TOKEN_COOKIE, h as DATE_FNS_DATE_FORMAT, A as API_DATE_FORMAT, f as SSO_URL } from './index-ef96fd13.js';
+import { d as NodeType, c as NodePosition, f as NodeActionType, e as NodeFinalTypes, g as NodeMultipleOptions, E as ELEMENT_CONTROL_INPUT_TYPE, N as NodeIntentType, L as LOCALE, F as FULL_KEY_ADDRESS } from './index-e3787b20.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-761239c7.js';
+import { M as MAP_DOMAIN_BY_LOCALE, e as basePath, G as GA_TOKEN_COOKIE, h as DATE_FNS_DATE_FORMAT, A as API_DATE_FORMAT, f as SSO_URL } from './index-bef3c9bd.js';
 import Cookies from 'js-cookie';
 import fd from 'fastdom';
 import fastdomPromised from 'fastdom/extensions/fastdom-promised';
+import { G as GlobalData, c as callApi, t as locale, T as TogetherComponentGlobalContext } from './utils-d5a0b58f.js';
 import formatString from 'string-format';
-import { G as GlobalData, h as callApi, x as locale, T as TogetherComponentGlobalContext, L as LEAD_TOKEN_COOKIE, s as setDefaultClass } from './defaultClassWrapper-fcdfc7a3.js';
-import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, T as TIME_RESET_RESEND_OTP, s as ssoIntents, i as getHhgIdFromCookie } from './index-272d3d01.js';
-export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, g as getHelloSitesUrl, i as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, s as ssoIntents } from './index-272d3d01.js';
+import { a as getUserIdFromCookie, b as getSubotCookieId, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, e as checkUntilFinished, g as getHelloSitesUrl, f as checkMobile, h as clickAndOpenInNewTab, T as TIME_RESET_RESEND_OTP, s as ssoIntents, i as getHhgIdFromCookie } from './index-9f1899f2.js';
+export { T as TIME_RESET_RESEND_OTP, f as checkMobile, e as checkUntilFinished, h as clickAndOpenInNewTab, g as getHelloSitesUrl, i as getHhgIdFromCookie, b as getSubotCookieId, a as getUserIdFromCookie, c as getUserInfoFromCookie, d as getWindowId, o as overrideParamsByQuery, s as ssoIntents } from './index-9f1899f2.js';
 import hexRgb from 'hex-rgb';
 import cn from 'classnames';
-import { C as Container$w } from './index-931414db.js';
-import { D as DatePicker, L as Loading } from './index-49d819b7.js';
+import { C as Container$w } from './index-782fed08.js';
+import { L as Loading } from './index-29d04985.js';
 import { motion } from 'framer-motion';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-0d590d5e.js';
-import { B as Button, S as Select } from './index-e2d856fc.js';
+import { M as MediaQueries } from './utils-f8761b9d.js';
+import { B as Button } from './index-2b9213cf.js';
 import { Remarkable } from 'remarkable';
 import { ArrowRight } from '@hhgtech/icons/other';
 import { useInView } from 'react-intersection-observer';
 import { Box, Textarea } from '@mantine/core';
-import { C as CommonGAssets } from './index-92fd8661.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
 import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import { d as LEAD_TOKEN_COOKIE } from './constants-71d9f33b.js';
 import { v4 } from 'uuid';
-import { T as Text } from './index-b2eed677.js';
-import { t as theme } from './theme-eb1b39f6.js';
-import { i as isProduction } from './isProduction-d39b7ab2.js';
+import { T as Text } from './index-c200bff6.js';
+import { t as theme } from './theme-f18c2351.js';
+import { i as isProduction } from './isProduction-5684a28c.js';
+import { S as Select } from './index-21eac858.js';
 import '@mantine/dates';
-import './useMantineLocale-bcfdeb0c.js';
-import './translationsContext-dfb42bf8.js';
+import './useMantineLocale-4fb67342.js';
+import './translationsContext-f3d1a7bd.js';
 import '@mantine/hooks';
 import isEmpty from 'lodash/isEmpty';
 import { Controller, useForm } from 'react-hook-form';
 import PhoneInputBase, { getCountryCallingCode, isPossiblePhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
 import { LoadScript } from '@react-google-maps/api';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-837f491d.js';
-import { D as Dropdown } from './index-741ce3ab.js';
-import { B as Button$1 } from './index-2a4e676a.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY, a as GOOGLE_API_LANGUAGE } from './usePlacesAutocomplete-fe2e4cbe.js';
+import { s as setDefaultClass } from './defaultClassWrapper-31caf23b.js';
+import { D as DatePicker } from './index-cf6beac8.js';
+import { D as Dropdown } from './index-cdac57da.js';
+import { B as Button$1 } from './index-1da2ca0b.js';
 import 'date-fns/locale';
-import './index-40fc06d9.js';
-import './cookieHelper-9c963e09.js';
+import './index-3078acec.js';
+import './cookieHelper-73ce3871.js';
 import 'slugify';
-import './index-ecb46439.js';
-import './Instagram-98c713bc.js';
-import './useTranslations-b8c49c9b.js';
-import 'date-fns';
-import 'react-day-picker/DayPickerInput';
+import './index-69248434.js';
+import './WhatsApp-7d3732e2.js';
+import './useTranslations-fbf6a6ab.js';
 import '@mantine/carousel';
-import './useUniqueId-d5f7586b.js';
+import './useUniqueId-c23213b6.js';
 import '@hhgtech/icons/core';
+import 'date-fns';
+import 'react-day-picker/DayPickerInput';
 
 // extend fastdom
 const fastdom = fd.extend(fastdomPromised);

package/build/esm/surveyOrPremiumBanner.js

@@ -0,0 +1,45 @@
+import 'react';
+import '@mantine/core';
+export { S as SurveyOrPremiumBanner } from './index-88ad2ca3.js';
+import './utils-d5a0b58f.js';
+import './useTranslations-fbf6a6ab.js';
+import './index-78255d6c.js';
+import './index-bef3c9bd.js';
+import 'date-fns/locale';
+import './index-e3787b20.js';
+import './isProduction-5684a28c.js';
+import './tslib.es6-761239c7.js';
+import './index-21eac858.js';
+import '@hhgtech/icons/other';
+import '@mantine/hooks';
+import './utils-f8761b9d.js';
+import '@emotion/styled';
+import '@mantine/carousel';
+import './index-c200bff6.js';
+import './theme-f18c2351.js';
+import './useMantineLocale-4fb67342.js';
+import 'dayjs';
+import './index-2b9213cf.js';
+import 'classnames';
+import './useUniqueId-c23213b6.js';
+import '@hhgtech/icons/core';
+import './routing-bebdc8b7.js';
+import '@mantine/form';
+import '@mantine/dates';
+import './translationsContext-f3d1a7bd.js';
+import 'string-format';
+import './index-73301602.js';
+import './useHealthToolCache-d97dfa00.js';
+import './getDynamicHealthTool-7681e43a.js';
+import './normalizeLink-d6f57223.js';
+import './core-c72e0ff5.js';
+import './index-69248434.js';
+import './WhatsApp-7d3732e2.js';
+import './index-d218b94e.js';
+import 'js-cookie';
+import 'lodash/flatten';
+import 'lodash/uniqBy';
+import './index-3078acec.js';
+import './cookieHelper-73ce3871.js';
+import 'slugify';
+import './constants-71d9f33b.js';

package/build/esm/surveyQuestionCard.js

@@ -0,0 +1,13 @@
+export { S as SurveyQuestionCard, a as SurveyThankyouCard } from './surveyThankyouCard-bf6080eb.js';
+import 'react';
+import './index-1da2ca0b.js';
+import './tslib.es6-761239c7.js';
+import './index-2b9213cf.js';
+import '@mantine/core';
+import './index-c200bff6.js';
+import './utils-f8761b9d.js';
+import './index-73301602.js';
+import './index-16514f4d.js';
+import '@emotion/styled';
+import './theme-f18c2351.js';
+import './index-d6201fa4.js';

package/build/esm/surveyThankyouCard-bf6080eb.js

@@ -0,0 +1,446 @@
+import React__default, { useState, useEffect, useRef } from 'react';
+import { B as Button } from './index-1da2ca0b.js';
+import { T as Text } from './index-c200bff6.js';
+import { H as Heading } from './index-73301602.js';
+import { I as Input } from './index-16514f4d.js';
+import { T as TextArea } from './index-d6201fa4.js';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+
+const StyledSurveyQuestionCard = styled.div `
+  padding: 1rem;
+  background: ${theme.colors.neutral100};
+  .survey-inner-wrapper {
+    padding: 1.25rem 1rem 1.5rem;
+    background: ${theme.colors.white};
+    border-radius: ${theme.borderRadius};
+    .survey-header {
+      border-bottom: 1px solid #dbdfe5;
+      margin-bottom: 12px;
+      .survey-header-text {
+        color: ${theme.colors.gray500};
+      }
+    }
+
+    .survey-contact-submit {
+      width: 100%;
+      margin-bottom: 1.5rem;
+    }
+    .term-policy-container {
+      width: 70%;
+      min-width: 210px;
+      max-width: 100%;
+      margin: 0 auto 1.5rem;
+      text-align: center;
+    }
+
+    .survey-progress-wrapper {
+      width: calc(100% + 2rem);
+      height: 4px;
+      margin-bottom: 1rem;
+      margin-left: -1rem;
+      background: #e4e8ec;
+      .survey-progress {
+        width: 100%;
+        height: 100%;
+        background: #00b16a;
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform ease-in-out 0.3s;
+      }
+    }
+
+    .survey-button-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      button {
+        justify-content: center;
+        &[data-has-icon='true'] {
+          svg {
+            width: 10px;
+            height: 10px;
+            margin-right: 10px;
+            vertical-align: unset;
+          }
+        }
+        &.survey-next-button {
+          &[data-has-icon='true'] {
+            svg {
+              margin-right: 0;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+      &[data-center='true'] {
+        justify-content: center;
+        button:only-child {
+          width: 200px;
+          max-width: 80%;
+        }
+      }
+      .survey-prev-button {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+`;
+const StyledSurveyRadio = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  input {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    border: solid 1px ${theme.colors.gray500};
+    margin-right: 8px;
+    border-radius: 100%;
+    cursor: inherit;
+    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
+
+    &:hover,
+    &:active {
+      border-color: ${theme.colors.primaryBase};
+      box-shadow: 0 0 2px 2px ${theme.colors.primary600};
+    }
+
+    &:checked {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-color: ${theme.colors.primaryBase};
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 14px;
+        height: 14px;
+        //left: 3px;
+        //position: absolute;
+        //top: 4px;
+        background-color: ${theme.colors.primaryBase};
+        border-radius: 50%;
+        content: '';
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  label {
+    width: calc(100% - 24px);
+    cursor: inherit;
+    font-weight: ${theme.sizes.fwRegular};
+  }
+
+  &[data-disabled='true'] {
+    color: ${theme.colors.gray300};
+    cursor: not-allowed;
+    input {
+      border-color: ${theme.colors.gray300};
+
+      &:hover {
+        border-color: ${theme.colors.gray300};
+        box-shadow: none;
+      }
+    }
+  }
+
+  padding: 16px 20px;
+  border: 0.5px solid transparent;
+  background: #fafafa;
+  border-radius: ${theme.borderRadius};
+  &[data-checked='true'] {
+    border: 0.5px solid #2d87f3;
+    background: #f7f9fc;
+  }
+  input {
+    border: solid 2px #737373;
+    margin-right: 0;
+    background: white;
+    &[type='checkbox'] {
+      &:checked {
+        border: 0;
+        background: ${theme.colors.primaryBase}
+          url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232D87F3' stroke='%232D87F3' stroke-width='2'/%3E%3Cpath d='M15.5714 8L9.67857 14L7 11.2727' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
+          no-repeat center center;
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &[data-has-image='true'] {
+    position: relative;
+    display: block;
+    padding: 12px;
+    input {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+    .choice-image-wrapper {
+      position: relative;
+      padding-top: 56.25%;
+      margin-bottom: 0.75rem;
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.borderRadius};
+        object-fit: cover;
+      }
+    }
+  }
+`;
+const StyledSurveyThankyouCard = styled.div `
+  position: relative;
+  width: 100%;
+  padding-top: min(400px, 100%);
+  .survey-thankyou-wrapper-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .survey-thankyou-icon {
+      width: 36%;
+      max-height: 50%;
+      margin-bottom: 1.5rem;
+    }
+    .survey-thankyou-title {
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+    .survey-thankyou-subtitle {
+      text-align: center;
+      > * {
+        text-align: center;
+      }
+    }
+  }
+`;
+const StyledSurveyQuestionContent = styled.div `
+  .survey-question-text-wrapper {
+    margin-bottom: 24px;
+    .survey-question-title {
+      margin-bottom: 4px;
+    }
+    .survey-question-subtitle,
+    .survey-question-description {
+      color: ${theme.colors.gray500};
+    }
+  }
+  .survey-question-image {
+    width: 100%;
+    margin-bottom: 12px;
+    border-radius: ${theme.borderRadius};
+  }
+
+  .survey-question-answer-wrapper {
+    margin-bottom: 1.5rem;
+    .survey-question-options-wrapper {
+      display: grid;
+      grid-gap: 0.5rem;
+      grid-template-columns: 1fr;
+      &[data-has-image='true'] {
+        grid-gap: 0.8rem;
+        grid-template-columns: 1fr 1fr;
+      }
+      .survey-question-option-item {
+        label {
+          color: #262626;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: normal;
+          line-height: 24px;
+        }
+      }
+    }
+    .survey-contact-input {
+      margin-bottom: 1rem;
+      &:first-child {
+        margin-top: 1rem;
+      }
+      label {
+        font-weight: 700;
+      }
+      input {
+        margin-top: 6px;
+      }
+    }
+  }
+`;
+
+const SurveyRadio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, hasImage, inputType, image, }) => {
+    return (React__default.createElement(StyledSurveyRadio, { "data-disabled": isDisabled, className: className, "data-size": size, "data-checked": checked, onClick: () => {
+            onChange(value);
+        }, "data-has-image": hasImage },
+        hasImage && (React__default.createElement("div", { className: "choice-image-wrapper" }, image && React__default.createElement("img", { src: image, loading: "lazy" }))),
+        React__default.createElement("label", { onClick: (e) => {
+                e.preventDefault();
+            }, htmlFor: `${name}-${value}` }, label),
+        React__default.createElement("input", { type: inputType, checked: checked, name: name, id: `${name}-${value}`, value: value, readOnly: true })));
+};
+
+const SurveyQuestionContent = ({ question, description, onOptionsChange, onTextOptionsChange, style, className, }) => {
+    const { type, title, subtitle, image, textOptions: textOptionsProps, options, name, is_multi_select, } = question;
+    const optionHasImage = !!(options === null || options === void 0 ? void 0 : options.some((o) => o.image));
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [textOptions, setTextOptions] = useState(() => (textOptionsProps === null || textOptionsProps === void 0 ? void 0 : textOptionsProps.slice()) || []);
+    useEffect(() => {
+        onOptionsChange && onOptionsChange(selectedOptions.slice());
+    }, [!!onOptionsChange, selectedOptions]);
+    useEffect(() => {
+        onTextOptionsChange && onTextOptionsChange(textOptions);
+    }, [!!onTextOptionsChange, textOptions]);
+    return (React__default.createElement(StyledSurveyQuestionContent, { className: className, style: style },
+        React__default.createElement("div", { className: "survey-question-text-wrapper" },
+            title && (React__default.createElement(Heading, { "data-nosubtitle": !subtitle, className: "survey-question-title", tag: "h4" }, title)),
+            subtitle && (React__default.createElement(Text, { className: "survey-question-subtitle", size: "p2" }, subtitle)),
+            description && (React__default.createElement(Text, { className: "survey-question-description", size: "p2" }, description))),
+        image && (React__default.createElement("img", { src: image, className: "survey-question-image", loading: "lazy" })),
+        React__default.createElement("div", { className: "survey-question-answer-wrapper" },
+            type === 'radio' && (React__default.createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => {
+                var _a;
+                return (React__default.createElement(SurveyRadio, { inputType: "radio", label: option.label, name: name, key: `${name}-${option.value}`, checked: ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) === option.value, value: option.value, onChange: (v) => {
+                        setSelectedOptions([options.find((o) => o.value === v)]);
+                    }, className: "survey-question-option-item", image: option.image, hasImage: optionHasImage }));
+            }))),
+            type === 'checkbox' && (React__default.createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => (React__default.createElement(SurveyRadio, { inputType: "checkbox", label: option.label, name: name, key: `${name}-${option.value}`, checked: !!selectedOptions.find((o) => o.value === option.value), value: option.value, onChange: () => {
+                    const foundIndex = selectedOptions.findIndex((o) => o.value === option.value);
+                    if (foundIndex >= 0) {
+                        setSelectedOptions((_old) => {
+                            _old.splice(foundIndex, 1);
+                            return _old.slice();
+                        });
+                    }
+                    else {
+                        if (!is_multi_select) {
+                            setSelectedOptions([option]);
+                        }
+                        else {
+                            setSelectedOptions((_old) => _old.concat(option).slice());
+                        }
+                    }
+                }, className: "survey-question-option-item survey-option-radio", image: option.image, hasImage: optionHasImage }))))),
+            type === 'textbox' &&
+                textOptions.map((option, index) => option.isTextArea ? (React__default.createElement(TextArea, { key: index, placeholder: option.placeholder, height: '150px', value: option.value, onChange: (t) => setTextOptions((_o) => {
+                        _o[index].value = t;
+                        return _o.slice();
+                    }) })) : (React__default.createElement(Input, { key: index, value: option.value, name: option.name, size: "md", className: "survey-contact-input", label: option.label, placeholder: option.placeholder, onChange: (v) => {
+                        setTextOptions((_o) => {
+                            _o[index].value = v;
+                            return _o.slice();
+                        });
+                    }, type: option.type }))))));
+};
+
+var NodeMultipleOptions;
+(function (NodeMultipleOptions) {
+    NodeMultipleOptions[NodeMultipleOptions["UNLIMITED"] = 0] = "UNLIMITED";
+    NodeMultipleOptions[NodeMultipleOptions["EXACT_NUMBER"] = 1] = "EXACT_NUMBER";
+    NodeMultipleOptions[NodeMultipleOptions["RANGE"] = 2] = "RANGE";
+})(NodeMultipleOptions || (NodeMultipleOptions = {}));
+const SurveyQuestionCard = ({ className, headerText, style, question, termAndPolicyText, prevText, nextText, isContactForm, isDisableNext, isDisablePrev, onPrevClick, onNextClick, isSubmitButton, isButtonCenter, progress, descriptionText, }) => {
+    var _a, _b, _c;
+    // const [currentQuestionIndex, setQuestionIndex] = useState(0)
+    const [answer, setAnswer] = useState([]);
+    const { is_multi_select, multi_select_option, from, to } = question;
+    // const currentQuestion = questions[currentQuestionIndex]
+    // const currentAnswer = answers[currentQuestionIndex]
+    const currentType = question === null || question === void 0 ? void 0 : question.type;
+    const submitDisabled = (currentType === 'checkbox' &&
+        ((_a = question.options) === null || _a === void 0 ? void 0 : _a.length) &&
+        (!answer ||
+            answer.length === 0 ||
+            (is_multi_select &&
+                multi_select_option === NodeMultipleOptions.RANGE &&
+                (answer.length < from || answer.length > to)) ||
+            (is_multi_select &&
+                multi_select_option === NodeMultipleOptions.EXACT_NUMBER &&
+                answer.length !== from))) ||
+        (currentType === 'radio' &&
+            ((_b = question.options) === null || _b === void 0 ? void 0 : _b.length) &&
+            (!answer || answer.length === 0)) ||
+        (currentType === 'textbox' &&
+            ((_c = question.textOptions) === null || _c === void 0 ? void 0 : _c.length) &&
+            (answer.length < question.textOptions.length ||
+                answer.some((a) => !a.value)));
+    const normalizedProgress = typeof progress === 'number'
+        ? progress > 1
+            ? 1
+            : progress < 0
+                ? 0
+                : Number(progress.toFixed(2))
+        : -1;
+    const formRef = useRef(null);
+    const reportValidity = () => {
+        if (currentType === 'textbox') {
+            // report validity for input elements
+            return formRef.current.reportValidity();
+        }
+        return true;
+    };
+    return (React__default.createElement(StyledSurveyQuestionCard, { className: className, style: style },
+        React__default.createElement("div", { className: "survey-inner-wrapper" },
+            headerText && (React__default.createElement("div", { className: "survey-header" },
+                React__default.createElement(Text, { className: "survey-header-text", size: "c2" }, headerText))),
+            React__default.createElement("form", { ref: formRef, onSubmit: (e) => e.preventDefault() },
+                React__default.createElement(SurveyQuestionContent, { question: question, description: descriptionText, onOptionsChange: (options) => {
+                        setAnswer(options);
+                    }, onTextOptionsChange: (text) => {
+                        setAnswer(text);
+                    } })),
+            isContactForm && nextText && (React__default.createElement(Button, { className: "survey-contact-submit", size: "lg", isDisabled: isDisableNext || submitDisabled, onClick: () => reportValidity() && onNextClick && onNextClick(answer) }, nextText)),
+            termAndPolicyText && (React__default.createElement("div", { className: "term-policy-container" }, termAndPolicyText)),
+            typeof progress === 'number' && (React__default.createElement("div", { className: "survey-progress-wrapper" },
+                React__default.createElement("div", { className: "survey-progress", style: {
+                        transform: `scaleX(${normalizedProgress})`,
+                    } }))),
+            (prevText || nextText) && (React__default.createElement("div", { "data-center": isButtonCenter, className: "survey-button-wrapper" },
+                prevText && (React__default.createElement(Button, { className: "survey-prev-button", size: "lg", color: isDisablePrev ? 'primary' : 'secondary', isDisabled: isDisablePrev, icon: React__default.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
+                        React__default.createElement("path", { d: "M2.44677 4.99999L5.31252 2.13424C5.62302 1.82374 5.62302 1.31974 5.31252 1.00924C5.00202 0.698742 4.49802 0.698742 4.18752 1.00924L0.727018 4.46974C0.433768 4.76299 0.433768 5.23774 0.727018 5.53024L4.18752 8.99074C4.49802 9.30124 5.00202 9.30124 5.31252 8.99074C5.62302 8.68024 5.62302 8.17624 5.31252 7.86574L2.44677 4.99999Z", fill: isDisablePrev ? '#fff' : '#2D87F3' })), onClick: onPrevClick }, prevText)),
+                !isContactForm && nextText && (React__default.createElement(Button, { onClick: () => reportValidity() && onNextClick && onNextClick(answer), className: "survey-next-button", size: "lg", isDisabled: isDisableNext || submitDisabled },
+                    nextText,
+                    ' ',
+                    isSubmitButton ? undefined : (React__default.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
+                        React__default.createElement("path", { d: "M3.80322 5.19994L0.937465 2.33419C0.626965 2.02369 0.626965 1.51969 0.937465 1.20919C1.24796 0.898693 1.75196 0.898693 2.06246 1.20919L5.52297 4.66969C5.81622 4.96294 5.81622 5.43769 5.52297 5.73019L2.06246 9.19069C1.75196 9.50119 1.24796 9.50119 0.937465 9.19069C0.626965 8.88019 0.626965 8.37619 0.937465 8.06569L3.80322 5.19994Z", fill: "#ffffff" }))))))))));
+};
+
+const SurveyThankyouCard = ({ thankyou, thankyouSubtitle, className, style, }) => {
+    return (React__default.createElement(StyledSurveyQuestionCard, { className: className, style: style },
+        React__default.createElement("div", { className: "survey-inner-wrapper" },
+            React__default.createElement(StyledSurveyThankyouCard, null,
+                React__default.createElement("div", { className: "survey-thankyou-wrapper-inner" },
+                    React__default.createElement("svg", { 
+                        // width="122"
+                        // height="122"
+                        viewBox: "0 0 122 122", fill: "none", className: "survey-thankyou-icon" },
+                        React__default.createElement("path", { d: "M61.5 122c33.137 0 60-26.863 60-60S94.637 2 61.5 2s-60 26.863-60 60 26.863 60 60 60Z", fill: theme.colors.primary50 }),
+                        React__default.createElement("ellipse", { cx: "61.5", cy: "110.36", rx: "48", ry: "3.36", fill: "#91CAFF" }),
+                        React__default.createElement("path", { d: "M82.905 72.666H101.5L87.597 40H35.403L21.5 72.666h18.595V91H83.08l-.174-18.334Z", fill: "#2C74DF" }),
+                        React__default.createElement("path", { d: "M74.4 15H39.863a5.364 5.364 0 0 0-5.363 5.363v52.214a5.364 5.364 0 0 0 5.363 5.363h43.273a5.364 5.364 0 0 0 5.363-5.363V21a6 6 0 0 0-6-6H74.4Z", fill: "#fff" }),
+                        React__default.createElement("path", { d: "M88.853 80.108H34.147a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074h54.706a4.055 4.055 0 0 1 4.087 4.074v10.65c0 2.27-1.81 4.074-4.087 4.074Z", fill: "#E4E8EC" }),
+                        React__default.createElement("path", { d: "M90.838 85.451H32.162a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074H90.78a4.055 4.055 0 0 1 4.087 4.074v10.65c.058 2.27-1.81 4.074-4.029 4.074Z", fill: "#fff" }),
+                        React__default.createElement("path", { d: "M103.748 75.492v30.263c0 1.92-1.576 3.492-3.503 3.492H23.003c-1.927 0-3.503-1.572-3.503-3.492V75.492c0-1.92 1.576-3.492 3.503-3.492h19.384c1.926 0 3.503 1.571 3.503 3.492v5.354c0 .35.233.582.584.582h30.3c.351 0 .585-.233.585-.582v-5.354c0-1.92 1.576-3.492 3.503-3.492h19.383c1.927 0 3.503 1.571 3.503 3.492Z", fill: "#45A4FF" }),
+                        React__default.createElement("path", { stroke: "#2C74DF", d: "M51.954 91.377v3.084c0 1.63 1.285 2.91 2.92 2.91h12.844c1.635 0 2.92-1.28 2.92-2.91v-3.084" }),
+                        React__default.createElement("path", { d: "M120.5 38.025c-2-.246-3.25 1.352-2.375 3.195l.25.737c.75 1.844-.375 3.441-2.375 3.195l-.75-.123c-2-.245-3.25 1.352-2.375 3.195l.375.738c.75 1.843-.375 3.44-2.375 3.195l-.75-.123c-1.5-.123-2.625.737-2.625 1.966", stroke: "#FE921D" }),
+                        React__default.createElement("path", { d: "M1.533 62c-.269 1.413 1.142 2.337 2.82 1.848l.672-.218c1.678-.543 3.089.38 2.82 1.848l-.134.544c-.269 1.413 1.141 2.337 2.82 1.848l.671-.218c1.68-.543 3.09.38 2.82 1.848l-.134.543c-.201 1.087.538 1.848 1.612 1.957M118 92a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM82 3.187l1.188 4.348 4.347-1.188L86.347 2 82 3.187Z", stroke: "#00B16A" }),
+                        React__default.createElement("path", { stroke: "#FE921D", d: "M17 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" }),
+                        React__default.createElement("path", { d: "M61.5 26.667c-7.364 0-13.333 5.97-13.333 13.333 0 7.364 5.969 13.333 13.333 13.333S74.833 47.364 74.833 40 68.864 26.667 61.5 26.667Zm7.61 10.276-9.334 9.333a1.33 1.33 0 0 1-1.885 0l-4-4a1.332 1.332 0 1 1 1.885-1.885l3.057 3.057 8.391-8.39a1.332 1.332 0 1 1 1.885 1.885Z", fill: "#00CB8A" })),
+                    thankyou && (React__default.createElement(Heading, { className: "survey-thankyou-title", tag: "h3" }, thankyou)),
+                    thankyouSubtitle && (React__default.createElement(Text, { className: "survey-thankyou-subtitle", size: "p3" }, thankyouSubtitle)))))));
+};
+
+export { SurveyQuestionCard as S, SurveyThankyouCard as a };