npm - freemium-survey-components - Versions diffs - 0.10.36 → 0.10.37 - Mend

freemium-survey-components 0.10.36 → 0.10.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/lib/index.cjs.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-transition-group"),o=e(require("react-dom"));function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head\|\|document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}s(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid var(--default-background-color);\n border-top: 1px solid var(--background-color, var(--default-background-color));\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n display: flex;\n border-radius: 4px;\n justify-content: space-between;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n position: relative;\n margin-bottom: 40px;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #EBEFF3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #E43E3D;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #F8C43E;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .button-container,\n.card-survey-style .nps-container .nps-scale .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:c}}=e,u=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n.useRef(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${o} ${r}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),t.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`),t.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>t.createElement("button",{role:"radio","aria-checked":e.npsValue===n,key:n,"data-test-nps-choice":n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${u(n)} ${e.npsValue===n&&"active"}`},n)))))),t.createElement("div",{className:"footer",role:"note"},c))},a=(e,n)=>(e.defaultProps=n,e);s('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const c=["RANGE","NPS","RADIO","DROPDOWN"],u={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},l=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:c,isErrored:u,startLabel:l,isRequired:d,errorText:p,endLabel:m,maxLength:f=300,onChange:y,autoFocusInput:v,...g}=e;return t.createElement("div",{className:"input-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),t.createElement("div",null,l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${u?"error":""}${a\|\|""}`},t.createElement("input",Object.assign({},g,{type:"text",autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>f\|\|y?.(e)}})),c&&f>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${f}`)),m&&t.createElement("div",{className:"end-label"},m)),u&&p&&t.createElement("span",{className:"input-error"},e.errorText))})),d=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:c,maxLength:u=1500,startLabel:l,isRequired:d,autoFocusInput:p,onChange:m,...f}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${a\|\|""}`},t.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>u\|\|m?.(e)}})),c&&u&&u>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${u}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)))})),p=a(l,u),m=a(d,u);s('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 2px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover .checkbox {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const f=()=>t.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},t.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),y=({values:e=[],othersValue:r="",options:o,name:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:c,saveOthersValue:u,othersOption:l,othersRequired:d})=>{const[m,f]=n.useState(!1),y=n.useRef(null);return n.useEffect((()=>{i&&setTimeout((()=>{y.current?.focus()}),300+a)}),[i]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:y,className:"autofocus-button","aria-hidden":!0}),o?.map(((n,r)=>t.createElement(v,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,r)=>{if(r)c([...e\|\|[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),c([...e])}}},n.value))),l&&t.createElement(v,{key:"others",checked:m,name:"others",id:"others",onChange:(n,t)=>{if(f(t),t)c([...e,"others"]);else{const n=e.findIndex((e=>"others"===e));e.splice(n,1),c(e)}}},"Others"),m&&t.createElement(t.Fragment,null,t.createElement(p,{placeholder:"Enter your comment",value:r[s],onChange:e=>{u(s,e.target.value)},autoFocusDelay:10,label:""})))},v=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(f,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});s('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 3px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover .radio {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}');const g=({name:e,options:r,value:o,autoFocusGroup:s,autoFocusDelay:i,onChangeHandler:a,saveOthersValue:c,othersOption:u,othersRequired:l,othersValue:d})=>{const[m,f]=n.useState(d??""),[y,v]=n.useState(o),g=n.useRef(null);return n.useEffect((()=>{s&&setTimeout((()=>{g.current?.focus()}),300+i)}),[s]),n.useEffect((()=>{o\|\|(f(""),v(null))}),[o]),n.useEffect((()=>{y&&r.find((e=>e.value===y))&&y!==o&&a(y)}),[y]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:g,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),r?.map(((n,r)=>t.createElement(x,{key:n.value,value:n.value,name:e,onChange:e=>{v(e.currentTarget.value)},checked:y===n.value},n.value))),u&&t.createElement(x,{key:"others",value:"others",name:e,onChange:e=>{v("others")},checked:"others"===y},"Others"),"others"===y&&t.createElement(t.Fragment,null,t.createElement(p,{value:m,onChange:e=>f(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),m!==o&&t.createElement(w,{inline:!0,disabled:l&&0===m.length,onClick:()=>{a("others"),c(e,m)}},"Next")))},x=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});s(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const h=e=>{const{totalSteps:n,completedSteps:r}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};s(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n / box-shadow: 0 0 0 2px ${pseudo.focus}; /\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const b=()=>t.createElement(t.Fragment,null,"..."),w=e=>{const{inline:n=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:c},p),d?t.createElement(b,null):r)},k=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),q=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=({question:e,formValues:n,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:a,autoFocusDelay:c})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(y,{name:e.name,autoFocusGroup:a,values:n[e.name],othersValue:r[e.name],options:e.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,autoFocusDelay:c});case"RADIO":case"DROPDOWN":return t.createElement(g,{autoFocusGroup:a,autoFocusDelay:c,name:e.name,onChangeHandler:o,saveOthersValue:s,options:e.type_info.choices,value:n[e.name],othersValue:r[e.name],othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired});case"INPUT":case"TEXT":return e.type_info?.meta?.readOnly?t.createElement("div",{className:"message-container"},e.type_info?.meta?.value):t.createElement("div",{className:"responsive-text-field"},t.createElement(p,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,value:n[e.name]\|\|"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(m,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return t.createElement(m,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]\|\|"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}},_=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("\|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .radio-group,\n.freemium-survey-components.card-survey-style .checkbox-group {\n max-height: 420px;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 300ms, transform 300ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\n.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\n.widget-survey-components,\n.card-survey-style {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .questions,\n.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n position: relative;\n}\n.widget-survey-components .question-text,\n.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\n.widget-survey-components .focus-lock,\n.card-survey-style .focus-lock {\n width: 100%;\n}\n.widget-survey-components .question-container,\n.card-survey-style .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n}\n.widget-survey-components .question-footer,\n.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n}\n.widget-survey-components .submit,\n.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\n.widget-survey-components .nps-container .footer,\n.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices,\n.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.widget-survey-components .radio-group,\n.card-survey-style .radio-group {\n width: 100%;\n}\n.widget-survey-components .checkbox-group,\n.card-survey-style .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 400px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const C=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r\|\|e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),e.type_info.meta?.redirectDelay??1e4)}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:_(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),z=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setReverse:c,reverse:u})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{u?n.current=Math.max(n.current-1,0):a.current=Math.max(n.current-1,0),i.current=!1,c(!0),s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,u?a.current=Math.min(n.current+1,r.length-1):n.current=Math.min(n.current+1,r.length-1),c(!1),s(n.current)}},t.createElement(k,null))),N=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:l,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:m,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:g,setIsSubmitting:x,onSubmit:h,setIsSurveyCompleted:b,preventQuestionAnimation:k,preview:q,closePreview:E,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:C,question:N,reverse:S,othersMeta:B,...I})=>{const R=I.blockIndex??u.current,O=()=>!c.includes(N.type_info.question_type)&&!f(),T=()=>"RANGE"!==N.type_info.question_type&&!N.required&&!f(),F=()=>"DROPDOWN"===N.type_info.question_type&&!N.required&&null!=o[N.name],L=()=>f()&&(e\|\|"standard"!==r),Q="MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("others")&&(!B[d.current.question.name]\|\|""===B[d.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r\|\|0===R&&void 0===o[N.name]\|\|"compact"===n\|\|0===u.current&&!S)&&t.createElement(z,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:k,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:C,reverse:S}),(O()\|\|F()\|\|T()\|\|L())&&t.createElement("div",{className:"action-buttons"},O()&&t.createElement(w,{onClick:()=>{_(!1),v(s[R],null,!0)},disabled:d.current.question.required&&(!o[d.current.question.name]\|\|Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)\|\|d.current.question.type_info.meta?.othersRequired&&Q,className:"next-button"},"Next"),T()&&t.createElement("button",{className:"skip-button",onClick:()=>{_(!1),g(N)}},"Skip"),L()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(d.current.question.required\|\|d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]\|\|0===o[d.current.question.name]?.length)\|\|d.current.question.type_info.meta?.othersRequired&&Q\|\|p,onClick:()=>{x(!0),h({...o,others_meta:B},(()=>{a?.type_info.meta?.skipThankYouPage?q?setTimeout((()=>{E?.()}),300):window.location.href=a?.type_info.meta?.redirectUrl:b(!0)}))}},p?"Submitting":"Submit survey")),F()&&t.createElement("button",{className:"skip-button",onClick:()=>{_(!1),d.current=s[R],l.current=i.findIndex((e=>e.name===s[R].name)),g(N)}},"Clear selection")))},S=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:u,widgetStyle:l,widgetNavigatorQuerySelector:d,preview:p,mobilePreview:m,closePreview:f})=>{const y=e.question_details?.questions\|\|[],v=e.meta?.blocks\|\|[],[g,x]=n.useState(null),[b,w]=n.useState({}),[k,q]=n.useState(!1),[z,S]=n.useState([]),[B,I]=n.useState(0),[R,O]=n.useState(!1),[T,F]=n.useState(null),[L,Q]=n.useState({}),V=n.useRef(null),Y=n.useRef(null),$=n.useRef(-1),A=n.useRef(null),D=n.useRef(0),j=n.useRef(0),U=n.useRef(!1),H=n.useRef([]),M=t.useRef(!!u&&"card"===o),P=n.useRef(null),W=n.useRef(0),[G,X]=n.useState(!1);n.useEffect((()=>{v&&(P.current=v.find((e=>"TY"===e.name)),x(v.filter((e=>"TY"!==e.name))))}),[v]),n.useEffect((()=>{j.current=W.current,g&&z&&(D.current=g.findIndex((e=>e.name===z[W.current].name))),I(B+1)}),[G]),n.useEffect((()=>{if(g)if(Y.current=y.find((e=>e.type_info?.pivot_question))??y.find((e=>"RANGE"===e.type_info?.question_type))??y[0],null!=u){$.current=u;const e=y.find((e=>e.name===g[0].question_names[0]));V.current={...g[0],question:e},H.current=[...H.current,{...g[0],question:e}],S(H.current),w({Q_1:u})}else if(!V.current&&g.length>0)return V.current=g[0],void K(g[0])}),[g,u]),t.useEffect((()=>{z.length&&(H.current=z,j.current=z.length-1),I(z.length-1)}),[z]),n.useEffect((()=>{Object.keys(b).length>0&&V.current.question&&(c.includes(V.current.question.type_info.question_type)\|\|U.current)&&!Z()&&(u&&1==z.length?setTimeout((()=>{J()}),1500):J())}),[b]),n.useEffect((()=>{if(null!=b?.[Y.current?.name])if(P.current?.is_based_on_rating){const e=Y.current?.type_info?.choices[b?.[Y.current?.name]]?.dependent_question_names,n=P.current?.question_names.find((n=>e?.includes(n))),t=y.find((e=>e.name===n));F(t)}else{const e=y.find((e=>e.name==P.current?.question_names[0]));F(e)}}),[b?.[Y.current?.name]]);const Z=()=>(D.current===g.length-1\|\|"end"===V.current.branchOption)&&j.current===z.length-1,K=e=>{let n={};if(e.is_based_on_rating){const t=Y.current?.type_info?.choices[b?.[Y.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=y.find((e=>e.name===r))}else n=y.find((n=>n.name===e.question_names[0]));V.current.question=n;H.current.find((e=>e.question.name===n.name))?(I(B+1),j.current+=1):S([...H.current,{...e,question:n}])},J=()=>{if(Z())q(!0);else{if(V.current.nextBlock)D.current=g.findIndex((e=>e.name===V.current.nextBlock));else if(V.current.question.type_info?.meta?.branches){const e=V.current.question.type_info?.meta?.branches,n=b[V.current.question.name];let t;if(t="RANGE"===V.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void q(!0);D.current=g.findIndex((e=>e.name===t.nextBlock))}else D.current+=1}else D.current+=1;V.current=g[D.current],K(g[D.current])}},ee=(e,n,t)=>{if(M.current=!1,t){if(U.current=!0,null!=b[e.question.name]&&e.name!==z[z.length-1].name){const[t,r]=(e=>{const n=z.findIndex((n=>n.name===e.name)),t=z.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return D.current=g.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),H.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});Y?.current?.name==e?.question?.name&&($.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})};if(!V.current\|\|!V.current.question)return null;const ne=z[j.current];return t.createElement("div",{className:`freemium-survey-components ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},t.createElement(h,{totalSteps:g.length,completedSteps:D.current+(k?1:0)}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:j.current+String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:G?"fade-reverse":"fade"},t.createElement("div",{className:"questions"},k?t.createElement(C,{thankYouQuestion:T,preview:p,placeholders:s,npsValue:$.current}):t.createElement("div",{ref:A,id:`${ne.question.name}`,className:`question-container ${a\|\|"card"===o}`},t.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:_(ne.question.text,s,$.current)},title:`question-${j.current}`,role:"heading","aria-level":1}),t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},t.createElement(E,{question:ne.question,formValues:b,othersMeta:L,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{Q({...L,[e]:n})},onChangeHandler:e=>{U.current=!1,D.current=g.findIndex((e=>e.name===ne.name)),V.current=ne,X(!1),ee(ne,e,c.includes(ne.question.type_info.question_type)&&!Z())}})),t.createElement(N,{question:ne.question,widget:a,widgetStyle:l,surveyStyle:o,formValues:b,othersMeta:L,blocksWithQns:z,blocks:g,thankYouQuestion:T,currentBlockIndexOfBlocksWithQns:j,reverse:G,setReverse:X,currentBlockIndexOfBlocks:D,currentEditingBlock:V,isSubmitting:R,isValuesCommitted:U,isCurrentBlockFinal:Z,setHorizontalScrollUnits:I,handleFormValues:ee,skipBlock:e=>{U.current=!0,delete b[e.name],w({...b})},setIsSubmitting:O,onSubmit:i,setIsSurveyCompleted:q,preventQuestionAnimation:M,preview:p,closePreview:f,tempCurrentBlockIndexOfBlocksWithQns:W}))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container,\n.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container,\n.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n}\ndiv.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\ndiv.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\ndiv.widget-survey-components {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\ndiv.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 480px;\n max-height: var(--compact-widget-max-height);\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n}\ndiv.widget-survey-components .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 460px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const B=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r\|\|e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3(e.type_info.meta?.redirectDelay??1e4))}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:_(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),I=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name)),i.current=!1,s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name)),s(n.current)}},t.createElement(k,null))),R=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:u,currentBlockIndexOfBlocksWithQns:l,currentBlockIndexOfBlocks:d,currentEditingBlock:p,isSubmitting:m,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:g,skipBlock:x,setIsSubmitting:h,onSubmit:b,setIsSurveyCompleted:k,preventQuestionAnimation:q,preview:E,closePreview:_,...C})=>{const z=C.blockIndex??l.current,N=C.question??i[z].question,S=()=>N.name===p.current.question.name&&!c.includes(N.type_info.question_type)&&!y(),B=()=>"RANGE"!==N.type_info.question_type&&!N.required&&N.name===p.current.question.name&&!y(),R=()=>"DROPDOWN"===N.type_info.question_type&&N.name!==p.current.question.name&&!N.required&&null!=o[N.name],O=()=>y()&&(e\|\|"standard"!==r)&&N.name===p.current.question.name,T="MULTI_SELECT"===p.current.question.type_info.question_type&&o[p.current.question.name]?.includes("others")&&(!s[p.current.question.name]\|\|""===s[p.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r\|\|0===z&&!o[N.name]\|\|"compact"===n)&&t.createElement(I,{currentBlockIndex:d,currentBlockIndexOfBlocksWithQns:l,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:q}),(S()\|\|R()\|\|B()\|\|O())&&t.createElement("div",{className:"action-buttons"},S()&&t.createElement(w,{onClick:()=>{g(i[z],null,!0)},disabled:p.current.question.required&&(!o[p.current.question.name]\|\|Array.isArray(o[p.current.question.name])&&0===o[p.current.question.name].length)\|\|p.current.question.type_info.meta?.othersRequired&&T,className:"next-button"},"Next"),B()&&t.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),R()&&t.createElement("button",{className:"skip-button",onClick:()=>{p.current=i[z],d.current=a.findIndex((e=>e.name===i[z].name)),x(N)}},"Clear selection"),O()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(p.current.question.required\|\|p.current.question.type_info.pivot_question)&&(null==o[p.current.question.name]\|\|0===o[p.current.question.name]?.length)\|\|p.current.question.type_info.meta?.othersRequired&&T\|\|m,onClick:()=>{h(!0),b({...o,others_meta:s},(()=>{u?.type_info.meta?.skipThankYouPage?E?setTimeout((()=>{_?.()}),300):window.location.href=u?.type_info.meta?.redirectUrl:k(!0)}))}},m?"Submitting":"Submit survey"))))},O=({survey:e,surveyStyle:s="standard",placeholders:i,onSubmit:a,widget:u,npsValue:l,widgetStyle:d,widgetNavigatorQuerySelector:p,preview:m,mobilePreview:f,closePreview:y})=>{const v=e.question_details?.questions\|\|[],g=e.meta?.blocks\|\|[],[x,b]=n.useState(null),[k,q]=n.useState({}),[C,z]=n.useState(!1),[N,S]=n.useState([]),[O,T]=n.useState(0),[F,L]=n.useState(!1),[Q,V]=n.useState(null),[Y,$]=n.useState({}),A=n.useRef(null),D=n.useRef(null),j=n.useRef(-1),U=n.useRef(null),H=n.useRef(0),M=n.useRef(0),P=n.useRef(!1),W=n.useRef([]),G=n.useRef(!!l&&"card"===s),X=n.useRef(null),Z=n.useRef([]);n.useEffect((()=>{g&&(X.current=g.find((e=>"TY"===e.name)),b(g.filter((e=>"TY"!==e.name))))}),[g]),n.useEffect((()=>{if(x)if(D.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=l){j.current=l;const e=v.find((e=>e.name===x[0].question_names[0]));A.current={...x[0],question:e},W.current=[...W.current,{...x[0],question:e}],S(W.current),q({Q_1:l})}else if(!A.current&&x.length>0)return A.current=x[0],void J(x[0])}),[x,l]),n.useEffect((()=>{N.length&&(W.current=N,M.current=N.length-1),u\|\|"standard"!==s?(U.current&&(U.current.style.maxHeight="unset"),Z.current[H.current]=U.current?.scrollHeight\|\|Z.current[H.current]\|\|0,U.current&&(U.current.style.maxHeight="100%")):U.current?.scrollIntoView({block:"start",behavior:"smooth"}),T(N.length-1)}),[N]),n.useEffect((()=>{Object.keys(k).length>0&&A.current.question&&(c.includes(A.current.question.type_info.question_type)\|\|P.current)&&!K()&&ee()}),[k]),n.useEffect((()=>{if(null!=k?.[D.current?.name])if(X.current?.is_based_on_rating){const e=D.current?.type_info?.choices[k?.[D.current?.name]]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));V(t)}else{const e=v.find((e=>e.name==X.current?.question_names[0]));V(e)}}),[k?.[D.current?.name]]);const K=()=>H.current===x.length-1\|\|"end"===A.current.branchOption,J=e=>{let n={};if(e.is_based_on_rating){const t=D.current?.type_info?.choices[k?.[D.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));A.current.question=n;W.current.find((e=>e.question.name===n.name))?(T(O+1),M.current+=1):S([...W.current,{...e,question:n}])},ee=()=>{if(K())z(!0);else{if(A.current.nextBlock)H.current=x.findIndex((e=>e.name===A.current.nextBlock));else if(A.current.question.type_info?.meta?.branches){const e=A.current.question.type_info?.meta?.branches,n=k[A.current.question.name];let t;if(t="RANGE"===A.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void z(!0);H.current=x.findIndex((e=>e.name===t.nextBlock))}else H.current+=1}else H.current+=1;A.current=x[H.current],J(x[H.current])}},ne=e=>{P.current=!0,delete k[e.name],q({...k})},te=(e,n,t)=>{if(G.current=!1,t){if(P.current=!0,null!=k[e.question.name]&&e.name!==N[N.length-1].name){const[t,r]=(e=>{const n=N.findIndex((n=>n.name===e.name)),t=N.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return H.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);q({...r,...null!=n&&{[e.question.name]:n}}),W.current=t}else q({...k,...null!=n&&{[e.question.name]:n}});D?.current?.name==e?.question?.name&&(j.current=n)}else q({...k,...null!=n&&{[e.question.name]:n}})},re=(e,n)=>{$({...Y,[e]:n})};return A.current&&A.current.question?t.createElement("div",{className:`freemium-survey-components ${u?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},u&&"compact"===d&&document.querySelector(p)&&t.createElement(t.Fragment,null,o.createPortal(t.createElement("div",null,t.createElement(I,{currentBlockIndex:H,currentBlockIndexOfBlocksWithQns:M,blocksWithQns:N,blocks:x,setHorizontalScrollUnits:T,preventQuestionAnimation:G})),document.querySelector(p))),C?null:t.createElement(h,{totalSteps:x.length,completedSteps:H.current}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:String(C),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:u?"":"fade"},t.createElement("div",null,C?t.createElement(B,{thankYouQuestion:Q,preview:m,placeholders:i,npsValue:j.current}):t.createElement(t.Fragment,null,t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:u\|\|"card"===s?{transform:`translateX(calc(-${O} * 100%))`,height:`${Z.current[H.current]}px`,transition:G.current\|\|N?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},N.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:U,className:"question-container "+(!u&&"card"!==s\|\|M.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:_(e.question.text,i,j.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!u&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(E,{question:e.question,formValues:k,othersMeta:Y,autoFocus:M.current===n,autoFocusDelay:"standard"===s?350:20,saveOthersValue:re,onChangeHandler:n=>{P.current=!1,H.current=x.findIndex((n=>n.name===e.name)),A.current=e,te(e,n,c.includes(e.question.type_info.question_type)&&!K())}}),t.createElement("button",{disabled:!u&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(R,{question:e.question,blockIndex:n,widget:u,widgetStyle:d,surveyStyle:s,formValues:k,othersMeta:Y,blocksWithQns:N,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:M,currentBlockIndexOfBlocks:H,currentEditingBlock:A,isSubmitting:F,isValuesCommitted:P,isCurrentBlockFinal:K,setHorizontalScrollUnits:T,handleFormValues:te,skipBlock:ne,setIsSubmitting:L,onSubmit:a,setIsSurveyCompleted:z,preventQuestionAnimation:G,preview:m,closePreview:y})))),!u&&"card"!==s&&K()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(A.current.question.required\|\|A.current.question.type_info.pivot_question)&&(null==k[A.current.question.name]\|\|0===k[A.current.question.name]?.length)\|\|A.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===A.current.question.type_info.question_type&&k[A.current.question.name]?.includes("")\|\|F,onClick:()=>{L(!0),a({...k,others_meta:Y},(()=>{Q?.type_info.meta?.skipThankYouPage?m?setTimeout((()=>{y?.()}),300):window.location.href=Q?.type_info.meta?.redirectUrl:z(!0)}))}},F?"Submitting":"Submit survey")))))))):null};exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=w,exports.CheckboxGroup=y,exports.Input=p,exports.NPS=i,exports.ProgressBar=h,exports.Radio=x,exports.RadioGroup=g,exports.Survey=e=>{const{survey:r}=e,o=n.useMemo((()=>{const e=JSON.parse(JSON.stringify(r)),n=[];return(e.question_details?.questions\|\|[]).forEach((e=>{const t=e.type_info?.meta?.block;t&&(t.question_names\|\|(t.question_names=[e.name]),n.push(t))})),{...e,meta:{...e.meta,blocks:n}}}),[r]);return t.createElement(t.Fragment,null,"standard"===e.surveyStyle\|\|e.widget?t.createElement(O,Object.assign({},e,{survey:o})):t.createElement(S,Object.assign({},e,{survey:o})))},exports.TextArea=m;
1	+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-transition-group"),o=e(require("react-dom"));function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head\|\|document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}s(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid var(--default-background-color);\n border-top: 1px solid var(--background-color, var(--default-background-color));\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n display: flex;\n border-radius: 4px;\n justify-content: space-between;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n position: relative;\n margin-bottom: 40px;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #EBEFF3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #E43E3D;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #F8C43E;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .button-container,\n.card-survey-style .nps-container .nps-scale .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:c}}=e,u=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n.useRef(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${o} ${r}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),t.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`),t.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>t.createElement("button",{role:"radio","aria-checked":e.npsValue===n,key:n,"data-test-nps-choice":n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${u(n)} ${e.npsValue===n&&"active"}`},n)))))),t.createElement("div",{className:"footer",role:"note"},c))},a=(e,n)=>(e.defaultProps=n,e);s('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const c=["RANGE","NPS","RADIO","DROPDOWN"],u={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},l=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:c,isErrored:u,startLabel:l,isRequired:d,errorText:p,endLabel:m,maxLength:f=300,onChange:y,autoFocusInput:v,...g}=e;return t.createElement("div",{className:"input-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),t.createElement("div",null,l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${u?"error":""}${a\|\|""}`},t.createElement("input",Object.assign({},g,{type:"text",autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>f\|\|y?.(e)}})),c&&f>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${f}`)),m&&t.createElement("div",{className:"end-label"},m)),u&&p&&t.createElement("span",{className:"input-error"},e.errorText))})),d=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{o.current?.focus()}),300+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:s,style:i,className:a,showCount:c,maxLength:u=1500,startLabel:l,isRequired:d,autoFocusInput:p,onChange:m,...f}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:i},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${a\|\|""}`},t.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:o,style:s,onChange:e=>{e.target.value?.length>u\|\|m?.(e)}})),c&&u&&u>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${u}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)))})),p=a(l,u),m=a(d,u);s('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 2px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover .checkbox {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const f=()=>t.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},t.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),y=({values:e=[],othersValue:r="",options:o,name:s,autoFocusGroup:i,autoFocusDelay:a,onChangeHandler:c,saveOthersValue:u,othersOption:l,othersRequired:d})=>{const[m,f]=n.useState(!1),y=n.useRef(null);return n.useEffect((()=>{i&&setTimeout((()=>{y.current?.focus()}),300+a)}),[i]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:y,className:"autofocus-button","aria-hidden":!0}),o?.map(((n,r)=>t.createElement(v,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,r)=>{if(r)c([...e\|\|[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),c([...e])}}},n.value))),l&&t.createElement(v,{key:"others",checked:m,name:"others",id:"others",onChange:(n,t)=>{if(f(t),t)c([...e,"others"]);else{const n=e.findIndex((e=>"others"===e));e.splice(n,1),c(e)}}},"Others"),m&&t.createElement(t.Fragment,null,t.createElement(p,{placeholder:"Enter your comment",value:r[s],onChange:e=>{u(s,e.target.value)},autoFocusDelay:10,label:""})))},v=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(f,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});s('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 3px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover .radio {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}');const g=({name:e,options:r,value:o,autoFocusGroup:s,autoFocusDelay:i,onChangeHandler:a,saveOthersValue:c,othersOption:u,othersRequired:l,othersValue:d})=>{const[m,f]=n.useState(d??""),[y,v]=n.useState(o),g=n.useRef(null);return n.useEffect((()=>{s&&setTimeout((()=>{g.current?.focus()}),300+i)}),[s]),n.useEffect((()=>{o\|\|(f(""),v(null))}),[o]),n.useEffect((()=>{y&&r.find((e=>e.value===y))&&y!==o&&a(y)}),[y]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:g,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),r?.map(((n,r)=>t.createElement(x,{key:n.value,value:n.value,name:e,onChange:e=>{v(e.currentTarget.value)},checked:y===n.value},n.value))),u&&t.createElement(x,{key:"others",value:"others",name:e,onChange:e=>{v("others")},checked:"others"===y},"Others"),"others"===y&&t.createElement(t.Fragment,null,t.createElement(p,{value:m,onChange:e=>f(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),m!==o&&t.createElement(w,{inline:!0,disabled:l&&0===m.length,onClick:()=>{a("others"),c(e,m)}},"Next")))},x=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),320)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});s(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const h=e=>{const{totalSteps:n,completedSteps:r}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};s(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n / box-shadow: 0 0 0 2px ${pseudo.focus}; /\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const b=()=>t.createElement(t.Fragment,null,"..."),w=e=>{const{inline:n=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:c},p),d?t.createElement(b,null):r)},k=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),q=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=({question:e,formValues:n,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:a,autoFocusDelay:c})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(y,{name:e.name,autoFocusGroup:a,values:n[e.name],othersValue:r[e.name],options:e.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,autoFocusDelay:c});case"RADIO":case"DROPDOWN":return t.createElement(g,{autoFocusGroup:a,autoFocusDelay:c,name:e.name,onChangeHandler:o,saveOthersValue:s,options:e.type_info.choices,value:n[e.name],othersValue:r[e.name],othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired});case"INPUT":case"TEXT":return e.type_info?.meta?.readOnly?t.createElement("div",{className:"message-container"},e.type_info?.meta?.value):t.createElement("div",{className:"responsive-text-field"},t.createElement(p,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,value:n[e.name]\|\|"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(m,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return t.createElement(m,{autoFocusInput:a,autoFocusDelay:c,label:"",isRequired:e.is_required,placeholder:e.type_info?.meta?.placeholder??"",value:n[e.name]\|\|"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}},_=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("\|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .radio-group,\n.freemium-survey-components.card-survey-style .checkbox-group {\n max-height: 420px;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 300ms, transform 300ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\n.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\n.widget-survey-components,\n.card-survey-style {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .questions,\n.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n position: relative;\n}\n.widget-survey-components .question-text,\n.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\n.widget-survey-components .focus-lock,\n.card-survey-style .focus-lock {\n width: 100%;\n}\n.widget-survey-components .question-container,\n.card-survey-style .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n}\n.widget-survey-components .question-footer,\n.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n}\n.widget-survey-components .submit,\n.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\n.widget-survey-components .nps-container .footer,\n.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices,\n.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.widget-survey-components .radio-group,\n.card-survey-style .radio-group {\n width: 100%;\n}\n.widget-survey-components .checkbox-group,\n.card-survey-style .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 400px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const C=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r\|\|e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),e.type_info.meta?.redirectDelay??1e4)}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:_(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),z=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setReverse:c,reverse:u})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{u?n.current=Math.max(n.current-1,0):a.current=Math.max(n.current-1,0),i.current=!1,c(!0),s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,u?a.current=Math.min(n.current+1,r.length-1):n.current=Math.min(n.current+1,r.length-1),c(!1),s(n.current)}},t.createElement(k,null))),N=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:l,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:m,isCurrentBlockFinal:f,setHorizontalScrollUnits:y,handleFormValues:v,skipBlock:g,setIsSubmitting:x,onSubmit:h,setIsSurveyCompleted:b,preventQuestionAnimation:k,preview:q,closePreview:E,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:C,question:N,reverse:S,othersMeta:B,...I})=>{const R=I.blockIndex??u.current,O=()=>!c.includes(N.type_info.question_type)&&!f(),T=()=>"RANGE"!==N.type_info.question_type&&!N.required&&!f(),F=()=>("DROPDOWN"===N.type_info.question_type&&!N.required&&o[N.name],!1),L=()=>f()&&(e\|\|"standard"!==r),Q="MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("others")&&(!B[d.current.question.name]\|\|""===B[d.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r\|\|0===R&&void 0===o[N.name]\|\|"compact"===n\|\|0===u.current&&!S)&&t.createElement(z,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:y,preventQuestionAnimation:k,setReverse:_,tempCurrentBlockIndexOfBlocksWithQns:C,reverse:S}),(O()\|\|F()\|\|T()\|\|L())&&t.createElement("div",{className:"action-buttons"},O()&&t.createElement(w,{onClick:()=>{_(!1),v(s[R],null,!0)},disabled:d.current.question.required&&(!o[d.current.question.name]\|\|Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)\|\|d.current.question.type_info.meta?.othersRequired&&Q,className:"next-button"},"Next"),T()&&t.createElement("button",{className:"skip-button",onClick:()=>{_(!1),g(N)}},"Skip"),L()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(d.current.question.required\|\|d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]\|\|0===o[d.current.question.name]?.length)\|\|d.current.question.type_info.meta?.othersRequired&&Q\|\|p,onClick:()=>{x(!0),h({...o,others_meta:B},(()=>{a?.type_info.meta?.skipThankYouPage?q?setTimeout((()=>{E?.()}),300):window.location.href=a?.type_info.meta?.redirectUrl:b(!0)}))}},p?"Submitting":"Submit survey")),F()&&t.createElement("button",{className:"skip-button",onClick:()=>{_(!1),d.current=s[R],l.current=i.findIndex((e=>e.name===s[R].name)),g(N)}},"Clear selection")))},S=({survey:e,surveyStyle:o="standard",placeholders:s,onSubmit:i,widget:a,npsValue:u,widgetStyle:l,widgetNavigatorQuerySelector:d,preview:p,mobilePreview:m,closePreview:f})=>{const y=e.question_details?.questions\|\|[],v=e.meta?.blocks\|\|[],[g,x]=n.useState(null),[b,w]=n.useState({}),[k,q]=n.useState(!1),[z,S]=n.useState([]),[B,I]=n.useState(0),[R,O]=n.useState(!1),[T,F]=n.useState(null),[L,Q]=n.useState({}),V=n.useRef(null),Y=n.useRef(null),$=n.useRef(-1),A=n.useRef(null),D=n.useRef(0),j=n.useRef(0),U=n.useRef(!1),H=n.useRef([]),M=t.useRef(!!u&&"card"===o),P=n.useRef(null),W=n.useRef(0),[G,X]=n.useState(!1);n.useEffect((()=>{v&&(P.current=v.find((e=>"TY"===e.name)),x(v.filter((e=>"TY"!==e.name))))}),[v]),n.useEffect((()=>{j.current=W.current,g&&z&&(D.current=g.findIndex((e=>e.name===z[W.current].name))),I(B+1)}),[G]),n.useEffect((()=>{if(g)if(Y.current=y.find((e=>e.type_info?.pivot_question))??y.find((e=>"RANGE"===e.type_info?.question_type))??y[0],null!=u){$.current=u;const e=y.find((e=>e.name===g[0].question_names[0]));V.current={...g[0],question:e},H.current=[...H.current,{...g[0],question:e}],S(H.current),w({Q_1:u})}else if(!V.current&&g.length>0)return V.current=g[0],void K(g[0])}),[g,u]),t.useEffect((()=>{z.length&&(H.current=z,j.current=z.length-1),I(z.length-1)}),[z]),n.useEffect((()=>{Object.keys(b).length>0&&V.current.question&&(c.includes(V.current.question.type_info.question_type)\|\|U.current)&&!Z()&&(u&&1==z.length?setTimeout((()=>{J()}),1500):J())}),[b]),n.useEffect((()=>{if(null!=b?.[Y.current?.name])if(P.current?.is_based_on_rating){const e=Y.current?.type_info?.choices[b?.[Y.current?.name]]?.dependent_question_names,n=P.current?.question_names.find((n=>e?.includes(n))),t=y.find((e=>e.name===n));F(t)}else{const e=y.find((e=>e.name==P.current?.question_names[0]));F(e)}}),[b?.[Y.current?.name]]);const Z=()=>(D.current===g.length-1\|\|"end"===V.current.branchOption)&&j.current===z.length-1,K=e=>{let n={};if(e.is_based_on_rating){const t=Y.current?.type_info?.choices[b?.[Y.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=y.find((e=>e.name===r))}else n=y.find((n=>n.name===e.question_names[0]));V.current.question=n;H.current.find((e=>e.question.name===n.name))?(I(B+1),j.current+=1):S([...H.current,{...e,question:n}])},J=()=>{if(Z())q(!0);else{if(V.current.nextBlock)D.current=g.findIndex((e=>e.name===V.current.nextBlock));else if(V.current.question.type_info?.meta?.branches){const e=V.current.question.type_info?.meta?.branches,n=b[V.current.question.name];let t;if(t="RANGE"===V.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void q(!0);D.current=g.findIndex((e=>e.name===t.nextBlock))}else D.current+=1}else D.current+=1;V.current=g[D.current],K(g[D.current])}},ee=(e,n,t)=>{if(M.current=!1,t){if(U.current=!0,null!=b[e.question.name]&&e.name!==z[z.length-1].name){const[t,r]=(e=>{const n=z.findIndex((n=>n.name===e.name)),t=z.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return D.current=g.findIndex((n=>n.name===e.name)),[t,r]})(e);w({...r,...null!=n&&{[e.question.name]:n}}),H.current=t}else w({...b,...null!=n&&{[e.question.name]:n}});Y?.current?.name==e?.question?.name&&($.current=n)}else w({...b,...null!=n&&{[e.question.name]:n}})};if(!V.current\|\|!V.current.question)return null;const ne=z[j.current];return t.createElement("div",{className:`freemium-survey-components ${m?"mobile-preview":""} ${o}-survey-style`,id:"freemium-survey"},t.createElement(h,{totalSteps:g.length,completedSteps:D.current+(k?1:0)}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:j.current+String(k),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:G?"fade-reverse":"fade"},t.createElement("div",{className:"questions"},k?t.createElement(C,{thankYouQuestion:T,preview:p,placeholders:s,npsValue:$.current}):t.createElement("div",{ref:A,id:`${ne.question.name}`,className:`question-container ${a\|\|"card"===o}`},t.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:_(ne.question.text,s,$.current)},title:`question-${j.current}`,role:"heading","aria-level":1}),t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},t.createElement(E,{question:ne.question,formValues:b,othersMeta:L,autoFocus:!0,autoFocusDelay:"standard"===o?350:0,saveOthersValue:(e,n)=>{Q({...L,[e]:n})},onChangeHandler:e=>{U.current=!1,D.current=g.findIndex((e=>e.name===ne.name)),V.current=ne,X(!1),ee(ne,e,c.includes(ne.question.type_info.question_type)&&!Z())}})),t.createElement(N,{question:ne.question,widget:a,widgetStyle:l,surveyStyle:o,formValues:b,othersMeta:L,blocksWithQns:z,blocks:g,thankYouQuestion:T,currentBlockIndexOfBlocksWithQns:j,reverse:G,setReverse:X,currentBlockIndexOfBlocks:D,currentEditingBlock:V,isSubmitting:R,isValuesCommitted:U,isCurrentBlockFinal:Z,setHorizontalScrollUnits:I,handleFormValues:ee,skipBlock:e=>{U.current=!0,delete b[e.name],w({...b})},setIsSubmitting:O,onSubmit:i,setIsSurveyCompleted:q,preventQuestionAnimation:M,preview:p,closePreview:f,tempCurrentBlockIndexOfBlocksWithQns:W}))))))};s(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container,\n.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container,\n.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n}\ndiv.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\ndiv.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\ndiv.widget-survey-components {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\ndiv.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 480px;\n max-height: var(--compact-widget-max-height);\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n}\ndiv.widget-survey-components .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 460px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const B=({thankYouQuestion:e,preview:r,placeholders:o,npsValue:s})=>(n.useEffect((()=>{r\|\|e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e3(e.type_info.meta?.redirectDelay??1e4))}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:_(e.text,o,s)}}),e.type_info.meta?.redirectUrl&&t.createElement("div",{style:{width:"100%"}},t.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",e.type_info.meta?.redirectDelay," seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),I=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>t.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},t.createElement("button",{disabled:0==n.current,className:"navigation-button",onClick:()=>{n.current=Math.max(n.current-1,0),e.current=o.findIndex((e=>e.name===r[n.current].name)),i.current=!1,s(n.current)}},t.createElement(q,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=r.length-1,onClick:()=>{i.current=!1,n.current=Math.min(n.current+1,r.length-1),e.current=o.findIndex((e=>e.name===r[n.current].name)),s(n.current)}},t.createElement(k,null))),R=({widget:e,widgetStyle:n,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:u,currentBlockIndexOfBlocksWithQns:l,currentBlockIndexOfBlocks:d,currentEditingBlock:p,isSubmitting:m,isValuesCommitted:f,isCurrentBlockFinal:y,setHorizontalScrollUnits:v,handleFormValues:g,skipBlock:x,setIsSubmitting:h,onSubmit:b,setIsSurveyCompleted:k,preventQuestionAnimation:q,preview:E,closePreview:_,...C})=>{const z=C.blockIndex??l.current,N=C.question??i[z].question,S=()=>N.name===p.current.question.name&&!c.includes(N.type_info.question_type)&&!y(),B=()=>"RANGE"!==N.type_info.question_type&&!N.required&&N.name===p.current.question.name&&!y(),R=()=>("DROPDOWN"===N.type_info.question_type&&N.name!==p.current.question.name&&!N.required&&o[N.name],!1),O=()=>y()&&(e\|\|"standard"!==r)&&N.name===p.current.question.name,T="MULTI_SELECT"===p.current.question.type_info.question_type&&o[p.current.question.name]?.includes("others")&&(!s[p.current.question.name]\|\|""===s[p.current.question.name]);return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===r\|\|0===z&&!o[N.name]\|\|"compact"===n)&&t.createElement(I,{currentBlockIndex:d,currentBlockIndexOfBlocksWithQns:l,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:q}),(S()\|\|R()\|\|B()\|\|O())&&t.createElement("div",{className:"action-buttons"},S()&&t.createElement(w,{onClick:()=>{g(i[z],null,!0)},disabled:p.current.question.required&&(!o[p.current.question.name]\|\|Array.isArray(o[p.current.question.name])&&0===o[p.current.question.name].length)\|\|p.current.question.type_info.meta?.othersRequired&&T,className:"next-button"},"Next"),B()&&t.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),R()&&t.createElement("button",{className:"skip-button",onClick:()=>{p.current=i[z],d.current=a.findIndex((e=>e.name===i[z].name)),x(N)}},"Clear selection"),O()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(p.current.question.required\|\|p.current.question.type_info.pivot_question)&&(null==o[p.current.question.name]\|\|0===o[p.current.question.name]?.length)\|\|p.current.question.type_info.meta?.othersRequired&&T\|\|m,onClick:()=>{h(!0),b({...o,others_meta:s},(()=>{u?.type_info.meta?.skipThankYouPage?E?setTimeout((()=>{_?.()}),300):window.location.href=u?.type_info.meta?.redirectUrl:k(!0)}))}},m?"Submitting":"Submit survey"))))},O=({survey:e,surveyStyle:s="standard",placeholders:i,onSubmit:a,widget:u,npsValue:l,widgetStyle:d,widgetNavigatorQuerySelector:p,preview:m,mobilePreview:f,closePreview:y})=>{const v=e.question_details?.questions\|\|[],g=e.meta?.blocks\|\|[],[x,b]=n.useState(null),[k,q]=n.useState({}),[C,z]=n.useState(!1),[N,S]=n.useState([]),[O,T]=n.useState(0),[F,L]=n.useState(!1),[Q,V]=n.useState(null),[Y,$]=n.useState({}),A=n.useRef(null),D=n.useRef(null),j=n.useRef(-1),U=n.useRef(null),H=n.useRef(0),M=n.useRef(0),P=n.useRef(!1),W=n.useRef([]),G=n.useRef(!!l&&"card"===s),X=n.useRef(null),Z=n.useRef([]);n.useEffect((()=>{g&&(X.current=g.find((e=>"TY"===e.name)),b(g.filter((e=>"TY"!==e.name))))}),[g]),n.useEffect((()=>{if(x)if(D.current=v.find((e=>e.type_info?.pivot_question))??v.find((e=>"RANGE"===e.type_info?.question_type))??v[0],null!=l){j.current=l;const e=v.find((e=>e.name===x[0].question_names[0]));A.current={...x[0],question:e},W.current=[...W.current,{...x[0],question:e}],S(W.current),q({Q_1:l})}else if(!A.current&&x.length>0)return A.current=x[0],void J(x[0])}),[x,l]),n.useEffect((()=>{N.length&&(W.current=N,M.current=N.length-1),u\|\|"standard"!==s?(U.current&&(U.current.style.maxHeight="unset"),Z.current[H.current]=U.current?.scrollHeight\|\|Z.current[H.current]\|\|0,U.current&&(U.current.style.maxHeight="100%")):U.current?.scrollIntoView({block:"start",behavior:"smooth"}),T(N.length-1)}),[N]),n.useEffect((()=>{Object.keys(k).length>0&&A.current.question&&(c.includes(A.current.question.type_info.question_type)\|\|P.current)&&!K()&&ee()}),[k]),n.useEffect((()=>{if(null!=k?.[D.current?.name])if(X.current?.is_based_on_rating){const e=D.current?.type_info?.choices[k?.[D.current?.name]]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));V(t)}else{const e=v.find((e=>e.name==X.current?.question_names[0]));V(e)}}),[k?.[D.current?.name]]);const K=()=>H.current===x.length-1\|\|"end"===A.current.branchOption,J=e=>{let n={};if(e.is_based_on_rating){const t=D.current?.type_info?.choices[k?.[D.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===r))}else n=v.find((n=>n.name===e.question_names[0]));A.current.question=n;W.current.find((e=>e.question.name===n.name))?(T(O+1),M.current+=1):S([...W.current,{...e,question:n}])},ee=()=>{if(K())z(!0);else{if(A.current.nextBlock)H.current=x.findIndex((e=>e.name===A.current.nextBlock));else if(A.current.question.type_info?.meta?.branches){const e=A.current.question.type_info?.meta?.branches,n=k[A.current.question.name];let t;if(t="RANGE"===A.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void z(!0);H.current=x.findIndex((e=>e.name===t.nextBlock))}else H.current+=1}else H.current+=1;A.current=x[H.current],J(x[H.current])}},ne=e=>{P.current=!0,delete k[e.name],q({...k})},te=(e,n,t)=>{if(G.current=!1,t){if(P.current=!0,null!=k[e.question.name]&&e.name!==N[N.length-1].name){const[t,r]=(e=>{const n=N.findIndex((n=>n.name===e.name)),t=N.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return H.current=x.findIndex((n=>n.name===e.name)),[t,r]})(e);q({...r,...null!=n&&{[e.question.name]:n}}),W.current=t}else q({...k,...null!=n&&{[e.question.name]:n}});D?.current?.name==e?.question?.name&&(j.current=n)}else q({...k,...null!=n&&{[e.question.name]:n}})},re=(e,n)=>{$({...Y,[e]:n})};return A.current&&A.current.question?t.createElement("div",{className:`freemium-survey-components ${u?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},u&&"compact"===d&&document.querySelector(p)&&t.createElement(t.Fragment,null,o.createPortal(t.createElement("div",null,t.createElement(I,{currentBlockIndex:H,currentBlockIndexOfBlocksWithQns:M,blocksWithQns:N,blocks:x,setHorizontalScrollUnits:T,preventQuestionAnimation:G})),document.querySelector(p))),C?null:t.createElement(h,{totalSteps:x.length,completedSteps:H.current}),t.createElement(r.SwitchTransition,{mode:"out-in"},t.createElement(r.CSSTransition,{key:String(C),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:u?"":"fade"},t.createElement("div",null,C?t.createElement(B,{thankYouQuestion:Q,preview:m,placeholders:i,npsValue:j.current}):t.createElement(t.Fragment,null,t.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:u\|\|"card"===s?{transform:`translateX(calc(-${O} * 100%))`,height:`${Z.current[H.current]}px`,transition:G.current\|\|N?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},N.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:U,className:"question-container "+(!u&&"card"!==s\|\|M.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:_(e.question.text,i,j.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!u&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(E,{question:e.question,formValues:k,othersMeta:Y,autoFocus:M.current===n,autoFocusDelay:"standard"===s?350:20,saveOthersValue:re,onChangeHandler:n=>{P.current=!1,H.current=x.findIndex((n=>n.name===e.name)),A.current=e,te(e,n,c.includes(e.question.type_info.question_type)&&!K())}}),t.createElement("button",{disabled:!u&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(R,{question:e.question,blockIndex:n,widget:u,widgetStyle:d,surveyStyle:s,formValues:k,othersMeta:Y,blocksWithQns:N,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:M,currentBlockIndexOfBlocks:H,currentEditingBlock:A,isSubmitting:F,isValuesCommitted:P,isCurrentBlockFinal:K,setHorizontalScrollUnits:T,handleFormValues:te,skipBlock:ne,setIsSubmitting:L,onSubmit:a,setIsSurveyCompleted:z,preventQuestionAnimation:G,preview:m,closePreview:y})))),!u&&"card"!==s&&K()&&t.createElement("div",{className:"submit"},t.createElement(w,{disabled:(A.current.question.required\|\|A.current.question.type_info.pivot_question)&&(null==k[A.current.question.name]\|\|0===k[A.current.question.name]?.length)\|\|A.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===A.current.question.type_info.question_type&&k[A.current.question.name]?.includes("")\|\|F,onClick:()=>{L(!0),a({...k,others_meta:Y},(()=>{Q?.type_info.meta?.skipThankYouPage?m?setTimeout((()=>{y?.()}),300):window.location.href=Q?.type_info.meta?.redirectUrl:z(!0)}))}},F?"Submitting":"Submit survey")))))))):null};exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=w,exports.CheckboxGroup=y,exports.Input=p,exports.NPS=i,exports.ProgressBar=h,exports.Radio=x,exports.RadioGroup=g,exports.Survey=e=>{const{survey:r}=e,o=n.useMemo((()=>{const e=JSON.parse(JSON.stringify(r)),n=[];return(e.question_details?.questions\|\|[]).forEach((e=>{const t=e.type_info?.meta?.block;t&&(t.question_names\|\|(t.question_names=[e.name]),n.push(t))})),{...e,meta:{...e.meta,blocks:n}}}),[r]);return t.createElement(t.Fragment,null,"standard"===e.surveyStyle\|\|e.widget?t.createElement(O,Object.assign({},e,{survey:o})):t.createElement(S,Object.assign({},e,{survey:o})))},exports.TextArea=m;

package/lib/index.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import e,{useRef as n,forwardRef as t,useEffect as r,useState as o,useMemo as s}from"react";import{SwitchTransition as i,CSSTransition as a}from"react-transition-group";import c from"react-dom";function u(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head\|\|document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}u(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid var(--default-background-color);\n border-top: 1px solid var(--background-color, var(--default-background-color));\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n display: flex;\n border-radius: 4px;\n justify-content: space-between;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n position: relative;\n margin-bottom: 40px;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #EBEFF3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #E43E3D;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #F8C43E;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .button-container,\n.card-survey-style .nps-container .nps-scale .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const l=t=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:c}}=t,u=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${o} ${r}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),e.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`),e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>e.createElement("button",{role:"radio","aria-checked":t.npsValue===n,key:n,"data-test-nps-choice":n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${u(n)} ${t.npsValue===n&&"active"}`},n)))))),e.createElement("div",{className:"footer",role:"note"},c))},d=(e,n)=>(e.defaultProps=n,e);u('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const m=["RANGE","NPS","RADIO","DROPDOWN"],p={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},y=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:c,showCount:u,isErrored:l,startLabel:d,isRequired:m,errorText:p,endLabel:y,maxLength:f=300,onChange:v,autoFocusInput:g,...x}=t;return e.createElement("div",{className:"input-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(m?"required":"")},t.label),e.createElement("div",null,d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${l?"error":""}${c\|\|""}`},e.createElement("input",Object.assign({},x,{type:"text",autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>f\|\|v?.(e)}})),u&&f>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length\|\|0}/${f}`)),y&&e.createElement("div",{className:"end-label"},y)),l&&p&&e.createElement("span",{className:"input-error"},t.errorText))})),f=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:c,showCount:u,maxLength:l=1500,startLabel:d,isRequired:m,autoFocusInput:p,onChange:y,...f}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(m?"required":"")},t.label),d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${c\|\|""}`},e.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>l\|\|y?.(e)}})),u&&l&&l>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length\|\|0}/${l}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)))})),v=d(y,p),g=d(f,p);u('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 2px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover .checkbox {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const x=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),h=({values:t=[],othersValue:s="",options:i,name:a,autoFocusGroup:c,autoFocusDelay:u,onChangeHandler:l,saveOthersValue:d,othersOption:m,othersRequired:p})=>{const[y,f]=o(!1),g=n(null);return r((()=>{c&&setTimeout((()=>{g.current?.focus()}),300+u)}),[c]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:g,className:"autofocus-button","aria-hidden":!0}),i?.map(((n,r)=>e.createElement(b,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,r)=>{if(r)l([...t\|\|[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),l([...t])}}},n.value))),m&&e.createElement(b,{key:"others",checked:y,name:"others",id:"others",onChange:(e,n)=>{if(f(n),n)l([...t,"others"]);else{const e=t.findIndex((e=>"others"===e));t.splice(e,1),l(t)}}},"Others"),y&&e.createElement(e.Fragment,null,e.createElement(v,{placeholder:"Enter your comment",value:s[a],onChange:e=>{d(a,e.target.value)},autoFocusDelay:10,label:""})))},b=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:o,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("div",{className:"icon-container"},e.createElement(x,null)," ")),e.createElement("div",null,t.children))}),{checked:!1});u('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 3px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover .radio {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}');const w=({name:t,options:s,value:i,autoFocusGroup:a,autoFocusDelay:c,onChangeHandler:u,saveOthersValue:l,othersOption:d,othersRequired:m,othersValue:p})=>{const[y,f]=o(p??""),[g,x]=o(i),h=n(null);return r((()=>{a&&setTimeout((()=>{h.current?.focus()}),300+c)}),[a]),r((()=>{i\|\|(f(""),x(null))}),[i]),r((()=>{g&&s.find((e=>e.value===g))&&g!==i&&u(g)}),[g]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:h,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),s?.map(((n,r)=>e.createElement(k,{key:n.value,value:n.value,name:t,onChange:e=>{x(e.currentTarget.value)},checked:g===n.value},n.value))),d&&e.createElement(k,{key:"others",value:"others",name:t,onChange:e=>{x("others")},checked:"others"===g},"Others"),"others"===g&&e.createElement(e.Fragment,null,e.createElement(v,{value:y,onChange:e=>f(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),y!==i&&e.createElement(C,{inline:!0,disabled:m&&0===y.length,onClick:()=>{u("others"),l(t,y)}},"Next")))},k=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:o,type:"radio",name:t.name,value:t.value,checked:t.checked,onChange:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))}),{checked:!1,autoFocus:!1});u(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const q=n=>{const{totalSteps:t,completedSteps:r}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(r>0?100/t:0)+"%",transform:`scaleX(${r})`}}))};u(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n / box-shadow: 0 0 0 2px ${pseudo.focus}; /\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const E=()=>e.createElement(e.Fragment,null,"..."),_={LARGE:"large",MINI:"mini",NORMAL:"normal"},C=n=>{const{inline:t=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...m}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:c},m),d?e.createElement(E,null):r)},z=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),N=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),S=({question:n,formValues:t,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:i,autoFocusDelay:a})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(l,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(h,{name:n.name,autoFocusGroup:i,values:t[n.name],othersValue:r[n.name],options:n.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,autoFocusDelay:a});case"RADIO":case"DROPDOWN":return e.createElement(w,{autoFocusGroup:i,autoFocusDelay:a,name:n.name,onChangeHandler:o,saveOthersValue:s,options:n.type_info.choices,value:t[n.name],othersValue:r[n.name],othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired});case"INPUT":case"TEXT":return n.type_info?.meta?.readOnly?e.createElement("div",{className:"message-container"},n.type_info?.meta?.value):e.createElement("div",{className:"responsive-text-field"},e.createElement(v,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,value:t[n.name]\|\|"",placeholder:n.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]\|\|"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}},B=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("\|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e};u(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .radio-group,\n.freemium-survey-components.card-survey-style .checkbox-group {\n max-height: 420px;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 300ms, transform 300ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\n.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\n.widget-survey-components,\n.card-survey-style {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .questions,\n.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n position: relative;\n}\n.widget-survey-components .question-text,\n.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\n.widget-survey-components .focus-lock,\n.card-survey-style .focus-lock {\n width: 100%;\n}\n.widget-survey-components .question-container,\n.card-survey-style .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n}\n.widget-survey-components .question-footer,\n.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n}\n.widget-survey-components .submit,\n.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\n.widget-survey-components .nps-container .footer,\n.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices,\n.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.widget-survey-components .radio-group,\n.card-survey-style .radio-group {\n width: 100%;\n}\n.widget-survey-components .checkbox-group,\n.card-survey-style .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 400px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const I=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t\|\|n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),n.type_info.meta?.redirectDelay??1e4)}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:B(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),O=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setReverse:c,reverse:u})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{u?t.current=Math.max(t.current-1,0):a.current=Math.max(t.current-1,0),i.current=!1,c(!0),s(t.current)}},e.createElement(N,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,u?a.current=Math.min(t.current+1,r.length-1):t.current=Math.min(t.current+1,r.length-1),c(!1),s(t.current)}},e.createElement(z,null))),F=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:u,currentEditingBlock:l,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:y,setHorizontalScrollUnits:f,handleFormValues:v,skipBlock:g,setIsSubmitting:x,onSubmit:h,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:k,closePreview:q,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:_,question:z,reverse:N,othersMeta:S,...B})=>{const I=B.blockIndex??c.current,F=()=>!m.includes(z.type_info.question_type)&&!y(),T=()=>"RANGE"!==z.type_info.question_type&&!z.required&&!y(),L=()=>"DROPDOWN"===z.type_info.question_type&&!z.required&&null!=o[z.name],Q=()=>y()&&(n\|\|"standard"!==r),R="MULTI_SELECT"===l.current.question.type_info.question_type&&o[l.current.question.name]?.includes("others")&&(!S[l.current.question.name]\|\|""===S[l.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r\|\|0===I&&void 0===o[z.name]\|\|"compact"===t\|\|0===c.current&&!N)&&e.createElement(O,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:f,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:_,reverse:N}),(F()\|\|L()\|\|T()\|\|Q())&&e.createElement("div",{className:"action-buttons"},F()&&e.createElement(C,{onClick:()=>{E(!1),v(s[I],null,!0)},disabled:l.current.question.required&&(!o[l.current.question.name]\|\|Array.isArray(o[l.current.question.name])&&0===o[l.current.question.name].length)\|\|l.current.question.type_info.meta?.othersRequired&&R,className:"next-button"},"Next"),T()&&e.createElement("button",{className:"skip-button",onClick:()=>{E(!1),g(z)}},"Skip"),Q()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(l.current.question.required\|\|l.current.question.type_info.pivot_question)&&(null==o[l.current.question.name]\|\|0===o[l.current.question.name]?.length)\|\|l.current.question.type_info.meta?.othersRequired&&R\|\|d,onClick:()=>{x(!0),h({...o,others_meta:S},(()=>{a?.type_info.meta?.skipThankYouPage?k?setTimeout((()=>{q?.()}),300):window.location.href=a?.type_info.meta?.redirectUrl:b(!0)}))}},d?"Submitting":"Submit survey")),L()&&e.createElement("button",{className:"skip-button",onClick:()=>{E(!1),l.current=s[I],u.current=i.findIndex((e=>e.name===s[I].name)),g(z)}},"Clear selection")))},T=({survey:t,surveyStyle:s="standard",placeholders:c,onSubmit:u,widget:l,npsValue:d,widgetStyle:p,widgetNavigatorQuerySelector:y,preview:f,mobilePreview:v,closePreview:g})=>{const x=t.question_details?.questions\|\|[],h=t.meta?.blocks\|\|[],[b,w]=o(null),[k,E]=o({}),[_,C]=o(!1),[z,N]=o([]),[O,T]=o(0),[L,Q]=o(!1),[R,V]=o(null),[Y,$]=o({}),D=n(null),A=n(null),H=n(-1),U=n(null),j=n(0),M=n(0),W=n(!1),P=n([]),G=e.useRef(!!d&&"card"===s),X=n(null),K=n(0),[Z,J]=o(!1);r((()=>{h&&(X.current=h.find((e=>"TY"===e.name)),w(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{M.current=K.current,b&&z&&(j.current=b.findIndex((e=>e.name===z[K.current].name))),T(O+1)}),[Z]),r((()=>{if(b)if(A.current=x.find((e=>e.type_info?.pivot_question))??x.find((e=>"RANGE"===e.type_info?.question_type))??x[0],null!=d){H.current=d;const e=x.find((e=>e.name===b[0].question_names[0]));D.current={...b[0],question:e},P.current=[...P.current,{...b[0],question:e}],N(P.current),E({Q_1:d})}else if(!D.current&&b.length>0)return D.current=b[0],void ne(b[0])}),[b,d]),e.useEffect((()=>{z.length&&(P.current=z,M.current=z.length-1),T(z.length-1)}),[z]),r((()=>{Object.keys(k).length>0&&D.current.question&&(m.includes(D.current.question.type_info.question_type)\|\|W.current)&&!ee()&&(d&&1==z.length?setTimeout((()=>{te()}),1500):te())}),[k]),r((()=>{if(null!=k?.[A.current?.name])if(X.current?.is_based_on_rating){const e=A.current?.type_info?.choices[k?.[A.current?.name]]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=x.find((e=>e.name===n));V(t)}else{const e=x.find((e=>e.name==X.current?.question_names[0]));V(e)}}),[k?.[A.current?.name]]);const ee=()=>(j.current===b.length-1\|\|"end"===D.current.branchOption)&&M.current===z.length-1,ne=e=>{let n={};if(e.is_based_on_rating){const t=A.current?.type_info?.choices[k?.[A.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=x.find((e=>e.name===r))}else n=x.find((n=>n.name===e.question_names[0]));D.current.question=n;P.current.find((e=>e.question.name===n.name))?(T(O+1),M.current+=1):N([...P.current,{...e,question:n}])},te=()=>{if(ee())C(!0);else{if(D.current.nextBlock)j.current=b.findIndex((e=>e.name===D.current.nextBlock));else if(D.current.question.type_info?.meta?.branches){const e=D.current.question.type_info?.meta?.branches,n=k[D.current.question.name];let t;if(t="RANGE"===D.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void C(!0);j.current=b.findIndex((e=>e.name===t.nextBlock))}else j.current+=1}else j.current+=1;D.current=b[j.current],ne(b[j.current])}},re=(e,n,t)=>{if(G.current=!1,t){if(W.current=!0,null!=k[e.question.name]&&e.name!==z[z.length-1].name){const[t,r]=(e=>{const n=z.findIndex((n=>n.name===e.name)),t=z.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return j.current=b.findIndex((n=>n.name===e.name)),[t,r]})(e);E({...r,...null!=n&&{[e.question.name]:n}}),P.current=t}else E({...k,...null!=n&&{[e.question.name]:n}});A?.current?.name==e?.question?.name&&(H.current=n)}else E({...k,...null!=n&&{[e.question.name]:n}})};if(!D.current\|\|!D.current.question)return null;const oe=z[M.current];return e.createElement("div",{className:`freemium-survey-components ${v?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},e.createElement(q,{totalSteps:b.length,completedSteps:j.current+(_?1:0)}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:M.current+String(_),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:Z?"fade-reverse":"fade"},e.createElement("div",{className:"questions"},_?e.createElement(I,{thankYouQuestion:R,preview:f,placeholders:c,npsValue:H.current}):e.createElement("div",{ref:U,id:`${oe.question.name}`,className:`question-container ${l\|\|"card"===s}`},e.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:B(oe.question.text,c,H.current)},title:`question-${M.current}`,role:"heading","aria-level":1}),e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},e.createElement(S,{question:oe.question,formValues:k,othersMeta:Y,autoFocus:!0,autoFocusDelay:"standard"===s?350:0,saveOthersValue:(e,n)=>{$({...Y,[e]:n})},onChangeHandler:e=>{W.current=!1,j.current=b.findIndex((e=>e.name===oe.name)),D.current=oe,J(!1),re(oe,e,m.includes(oe.question.type_info.question_type)&&!ee())}})),e.createElement(F,{question:oe.question,widget:l,widgetStyle:p,surveyStyle:s,formValues:k,othersMeta:Y,blocksWithQns:z,blocks:b,thankYouQuestion:R,currentBlockIndexOfBlocksWithQns:M,reverse:Z,setReverse:J,currentBlockIndexOfBlocks:j,currentEditingBlock:D,isSubmitting:L,isValuesCommitted:W,isCurrentBlockFinal:ee,setHorizontalScrollUnits:T,handleFormValues:re,skipBlock:e=>{W.current=!0,delete k[e.name],E({...k})},setIsSubmitting:Q,onSubmit:u,setIsSurveyCompleted:C,preventQuestionAnimation:G,preview:f,closePreview:g,tempCurrentBlockIndexOfBlocksWithQns:K}))))))};u(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container,\n.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container,\n.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n}\ndiv.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\ndiv.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\ndiv.widget-survey-components {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\ndiv.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 480px;\n max-height: var(--compact-widget-max-height);\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n}\ndiv.widget-survey-components .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 460px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const L=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t\|\|n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3(n.type_info.meta?.redirectDelay??1e4))}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:B(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),Q=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name)),i.current=!1,s(t.current)}},e.createElement(N,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name)),s(t.current)}},e.createElement(z,null))),R=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:c,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:l,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:y,isCurrentBlockFinal:f,setHorizontalScrollUnits:v,handleFormValues:g,skipBlock:x,setIsSubmitting:h,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:k,preview:q,closePreview:E,..._})=>{const z=_.blockIndex??u.current,N=_.question??i[z].question,S=()=>N.name===d.current.question.name&&!m.includes(N.type_info.question_type)&&!f(),B=()=>"RANGE"!==N.type_info.question_type&&!N.required&&N.name===d.current.question.name&&!f(),I=()=>"DROPDOWN"===N.type_info.question_type&&N.name!==d.current.question.name&&!N.required&&null!=o[N.name],O=()=>f()&&(n\|\|"standard"!==r)&&N.name===d.current.question.name,F="MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("others")&&(!s[d.current.question.name]\|\|""===s[d.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r\|\|0===z&&!o[N.name]\|\|"compact"===t)&&e.createElement(Q,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:k}),(S()\|\|I()\|\|B()\|\|O())&&e.createElement("div",{className:"action-buttons"},S()&&e.createElement(C,{onClick:()=>{g(i[z],null,!0)},disabled:d.current.question.required&&(!o[d.current.question.name]\|\|Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)\|\|d.current.question.type_info.meta?.othersRequired&&F,className:"next-button"},"Next"),B()&&e.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),I()&&e.createElement("button",{className:"skip-button",onClick:()=>{d.current=i[z],l.current=a.findIndex((e=>e.name===i[z].name)),x(N)}},"Clear selection"),O()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(d.current.question.required\|\|d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]\|\|0===o[d.current.question.name]?.length)\|\|d.current.question.type_info.meta?.othersRequired&&F\|\|p,onClick:()=>{h(!0),b({...o,others_meta:s},(()=>{c?.type_info.meta?.skipThankYouPage?q?setTimeout((()=>{E?.()}),300):window.location.href=c?.type_info.meta?.redirectUrl:w(!0)}))}},p?"Submitting":"Submit survey"))))},V=({survey:t,surveyStyle:s="standard",placeholders:u,onSubmit:l,widget:d,npsValue:p,widgetStyle:y,widgetNavigatorQuerySelector:f,preview:v,mobilePreview:g,closePreview:x})=>{const h=t.question_details?.questions\|\|[],b=t.meta?.blocks\|\|[],[w,k]=o(null),[E,_]=o({}),[z,N]=o(!1),[I,O]=o([]),[F,T]=o(0),[V,Y]=o(!1),[$,D]=o(null),[A,H]=o({}),U=n(null),j=n(null),M=n(-1),W=n(null),P=n(0),G=n(0),X=n(!1),K=n([]),Z=n(!!p&&"card"===s),J=n(null),ee=n([]);r((()=>{b&&(J.current=b.find((e=>"TY"===e.name)),k(b.filter((e=>"TY"!==e.name))))}),[b]),r((()=>{if(w)if(j.current=h.find((e=>e.type_info?.pivot_question))??h.find((e=>"RANGE"===e.type_info?.question_type))??h[0],null!=p){M.current=p;const e=h.find((e=>e.name===w[0].question_names[0]));U.current={...w[0],question:e},K.current=[...K.current,{...w[0],question:e}],O(K.current),_({Q_1:p})}else if(!U.current&&w.length>0)return U.current=w[0],void te(w[0])}),[w,p]),r((()=>{I.length&&(K.current=I,G.current=I.length-1),d\|\|"standard"!==s?(W.current&&(W.current.style.maxHeight="unset"),ee.current[P.current]=W.current?.scrollHeight\|\|ee.current[P.current]\|\|0,W.current&&(W.current.style.maxHeight="100%")):W.current?.scrollIntoView({block:"start",behavior:"smooth"}),T(I.length-1)}),[I]),r((()=>{Object.keys(E).length>0&&U.current.question&&(m.includes(U.current.question.type_info.question_type)\|\|X.current)&&!ne()&&re()}),[E]),r((()=>{if(null!=E?.[j.current?.name])if(J.current?.is_based_on_rating){const e=j.current?.type_info?.choices[E?.[j.current?.name]]?.dependent_question_names,n=J.current?.question_names.find((n=>e?.includes(n))),t=h.find((e=>e.name===n));D(t)}else{const e=h.find((e=>e.name==J.current?.question_names[0]));D(e)}}),[E?.[j.current?.name]]);const ne=()=>P.current===w.length-1\|\|"end"===U.current.branchOption,te=e=>{let n={};if(e.is_based_on_rating){const t=j.current?.type_info?.choices[E?.[j.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===r))}else n=h.find((n=>n.name===e.question_names[0]));U.current.question=n;K.current.find((e=>e.question.name===n.name))?(T(F+1),G.current+=1):O([...K.current,{...e,question:n}])},re=()=>{if(ne())N(!0);else{if(U.current.nextBlock)P.current=w.findIndex((e=>e.name===U.current.nextBlock));else if(U.current.question.type_info?.meta?.branches){const e=U.current.question.type_info?.meta?.branches,n=E[U.current.question.name];let t;if(t="RANGE"===U.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void N(!0);P.current=w.findIndex((e=>e.name===t.nextBlock))}else P.current+=1}else P.current+=1;U.current=w[P.current],te(w[P.current])}},oe=e=>{X.current=!0,delete E[e.name],_({...E})},se=(e,n,t)=>{if(Z.current=!1,t){if(X.current=!0,null!=E[e.question.name]&&e.name!==I[I.length-1].name){const[t,r]=(e=>{const n=I.findIndex((n=>n.name===e.name)),t=I.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=E[n.question.name],e)),{});return P.current=w.findIndex((n=>n.name===e.name)),[t,r]})(e);_({...r,...null!=n&&{[e.question.name]:n}}),K.current=t}else _({...E,...null!=n&&{[e.question.name]:n}});j?.current?.name==e?.question?.name&&(M.current=n)}else _({...E,...null!=n&&{[e.question.name]:n}})},ie=(e,n)=>{H({...A,[e]:n})};return U.current&&U.current.question?e.createElement("div",{className:`freemium-survey-components ${d?"widget-survey-components":""} ${y}-style ${g?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},d&&"compact"===y&&document.querySelector(f)&&e.createElement(e.Fragment,null,c.createPortal(e.createElement("div",null,e.createElement(Q,{currentBlockIndex:P,currentBlockIndexOfBlocksWithQns:G,blocksWithQns:I,blocks:w,setHorizontalScrollUnits:T,preventQuestionAnimation:Z})),document.querySelector(f))),z?null:e.createElement(q,{totalSteps:w.length,completedSteps:P.current}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:String(z),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:d?"":"fade"},e.createElement("div",null,z?e.createElement(L,{thankYouQuestion:$,preview:v,placeholders:u,npsValue:M.current}):e.createElement(e.Fragment,null,e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:d\|\|"card"===s?{transform:`translateX(calc(-${F} * 100%))`,height:`${ee.current[P.current]}px`,transition:Z.current\|\|I?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},I.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:W,className:"question-container "+(!d&&"card"!==s\|\|G.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:B(n.question.text,u,M.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!d&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(S,{question:n.question,formValues:E,othersMeta:A,autoFocus:G.current===t,autoFocusDelay:"standard"===s?350:20,saveOthersValue:ie,onChangeHandler:e=>{X.current=!1,P.current=w.findIndex((e=>e.name===n.name)),U.current=n,se(n,e,m.includes(n.question.type_info.question_type)&&!ne())}}),e.createElement("button",{disabled:!d&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(R,{question:n.question,blockIndex:t,widget:d,widgetStyle:y,surveyStyle:s,formValues:E,othersMeta:A,blocksWithQns:I,blocks:w,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:G,currentBlockIndexOfBlocks:P,currentEditingBlock:U,isSubmitting:V,isValuesCommitted:X,isCurrentBlockFinal:ne,setHorizontalScrollUnits:T,handleFormValues:se,skipBlock:oe,setIsSubmitting:Y,onSubmit:l,setIsSurveyCompleted:N,preventQuestionAnimation:Z,preview:v,closePreview:x})))),!d&&"card"!==s&&ne()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(U.current.question.required\|\|U.current.question.type_info.pivot_question)&&(null==E[U.current.question.name]\|\|0===E[U.current.question.name]?.length)\|\|U.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===U.current.question.type_info.question_type&&E[U.current.question.name]?.includes("")\|\|V,onClick:()=>{Y(!0),l({...E,others_meta:A},(()=>{$?.type_info.meta?.skipThankYouPage?v?setTimeout((()=>{x?.()}),300):window.location.href=$?.type_info.meta?.redirectUrl:N(!0)}))}},V?"Submitting":"Submit survey")))))))):null},Y=n=>{const{survey:t}=n,r=s((()=>{const e=JSON.parse(JSON.stringify(t)),n=[];return(e.question_details?.questions\|\|[]).forEach((e=>{const t=e.type_info?.meta?.block;t&&(t.question_names\|\|(t.question_names=[e.name]),n.push(t))})),{...e,meta:{...e.meta,blocks:n}}}),[t]);return e.createElement(e.Fragment,null,"standard"===n.surveyStyle\|\|n.widget?e.createElement(V,Object.assign({},n,{survey:r})):e.createElement(T,Object.assign({},n,{survey:r})))};export{_ as BUTTON_SIZE_VARIANTS,C as Button,h as CheckboxGroup,v as Input,l as NPS,q as ProgressBar,k as Radio,w as RadioGroup,Y as Survey,g as TextArea};
1	+ import e,{useRef as n,forwardRef as t,useEffect as r,useState as o,useMemo as s}from"react";import{SwitchTransition as i,CSSTransition as a}from"react-transition-group";import c from"react-dom";function u(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head\|\|document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}u(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid var(--default-background-color);\n border-top: 1px solid var(--background-color, var(--default-background-color));\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n color: #666;\n}\n.freemium-survey-components .nps-container .footer:empty {\n display: none;\n}\n.freemium-survey-components .nps-container .nps-scale {\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale .button-container {\n display: flex;\n border-radius: 4px;\n justify-content: space-between;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n position: relative;\n margin-bottom: 40px;\n}\n.freemium-survey-components .nps-container .nps-scale .positive-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .nps-scale .negative-text {\n position: absolute;\n color: #475867;\n bottom: -40px;\n font-size: 12px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .nps-scale span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .nps-scale button {\n display: inline-block;\n font-size: 1rem;\n white-space: nowrap;\n vertical-align: middle;\n background: none;\n border: none;\n box-shadow: none;\n cursor: pointer;\n text-align: center;\n font-weight: 400;\n border-radius: 4px;\n margin: 0;\n outline: none;\n margin-left: -1px;\n width: 40px;\n height: 40px;\n transform: scale(1);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover {\n transition: background 0.2s ease-in, border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.freemium-survey-components .nps-container .nps-scale button:hover, .freemium-survey-components .nps-container .nps-scale button:focus {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .nps-scale.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .nps-scale.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .nps-scale.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .nps-scale.highlighted button:hover, .freemium-survey-components .nps-container .nps-scale.highlighted button:focus, .freemium-survey-components .nps-container .nps-scale.highlighted button.active {\n background: var(--default-brand-color) !important;\n background: var(--brand-color, var(--default-brand-color)) !important;\n}\n.freemium-survey-components .nps-container .nps-scale .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n font-weight: 500;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice {\n background: #EBEFF3;\n color: #000;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active, .freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n background: #E43E3D;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2).active, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2):hover {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4):hover {\n background: #F8C43E;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:focus, .freemium-survey-components .nps-container .nps-scale.standard .choice.active {\n color: #fff;\n transform: scale(1.2);\n}\n\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.freemium-survey-components.mobile-preview .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .nps-scale .button-container,\n.card-survey-style .nps-container .nps-scale .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale .choices,\n.card-survey-style .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n }\n .freemium-survey-components .nps-container .nps-scale button,\n.card-survey-style .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .nps-scale .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale .choices {\n flex-wrap: wrap;\n justify-content: center;\n grid-gap: 16px;\n gap: 16px;\n background: transparent;\n}\n.widget-survey-components .nps-container .nps-scale button {\n border-radius: 50%;\n background: #ebeff3;\n}");const l=t=>{const{type_info:{linear_scale:{button_style:r="highlighted",button_shape:o="rounded"}={},rating_presets:{start:s="Very unlikely",end:i="Very likely"}={},validation:{min:a},footer_text:c}}=t,u=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},l=n(Array.from({length:10+(0===a?1:0)},((e,n)=>n+a)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${o} ${r}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text",role:"note"},`${a} - ${s}`),e.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${i}`),e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},l.current.map((n=>e.createElement("button",{role:"radio","aria-checked":t.npsValue===n,key:n,"data-test-nps-choice":n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${u(n)} ${t.npsValue===n&&"active"}`},n)))))),e.createElement("div",{className:"footer",role:"note"},c))},d=(e,n)=>(e.defaultProps=n,e);u('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: #d72d30;\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n transition: border-color 0.2s linear;\n background: #fff;\n}\n.freemium-survey-components .textarea-container .input-basic {\n flex-direction: column;\n align-items: unset;\n}\n.freemium-survey-components .input-basic.error {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid #d72d30;\n}\n.freemium-survey-components .input-basic.error[focus-within] {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic.error:focus-within {\n box-shadow: none;\n}\n.freemium-survey-components .input-basic:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: 0.2s linear;\n}\n.freemium-survey-components .input-basic[focus-within] {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-brand-color);\n box-shadow: 0 0 0 2px var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .input-basic[focus-within] .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .input-basic:focus-within .end-max-length {\n opacity: 1;\n}\n.freemium-survey-components .end-max-length {\n transition: opacity ease 0.2s;\n opacity: 0;\n padding: 0 8px;\n font-size: 0.75rem;\n color: #264966;\n}\n.freemium-survey-components .textarea-container .end-max-length {\n padding: 8px;\n align-self: flex-end;\n}\n.freemium-survey-components span.input-error {\n display: block;\n padding-left: 2px;\n padding-top: 4px;\n font-size: 0.9rem;\n color: #d72d30;\n}\n.freemium-survey-components input[type=text] {\n padding: 6px 12px;\n flex: 1;\n border: unset;\n height: 32px;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components input[type=text],\n.freemium-survey-components textarea {\n outline: none;\n border: none;\n}\n.freemium-survey-components input[type=text]::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 12px;\n flex: 1;\n border: unset;\n resize: none;\n font-size: 1rem;\n / line-height: ${typography.input.text.lineHeight}; /\n border-radius: 4px;\n}\n.freemium-survey-components textarea::-moz-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}\n.freemium-survey-components textarea::placeholder {\n color: #92a2b2;\n font-weight: 400;\n font-size: 0.85rem;\n}');const m=["RANGE","NPS","RADIO","DROPDOWN"],p={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},y=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:c,showCount:u,isErrored:l,startLabel:d,isRequired:m,errorText:p,endLabel:y,maxLength:f=300,onChange:v,autoFocusInput:g,...x}=t;return e.createElement("div",{className:"input-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(m?"required":"")},t.label),e.createElement("div",null,d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${l?"error":""}${c\|\|""}`},e.createElement("input",Object.assign({},x,{type:"text",autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>f\|\|v?.(e)}})),u&&f>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length\|\|0}/${f}`)),y&&e.createElement("div",{className:"end-label"},y)),l&&p&&e.createElement("span",{className:"input-error"},t.errorText))})),f=t(((t,o)=>{const s=n(null);r((()=>{t.autoFocusInput&&setTimeout((()=>{s.current?.focus()}),300+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:a,className:c,showCount:u,maxLength:l=1500,startLabel:d,isRequired:m,autoFocusInput:p,onChange:y,...f}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:a},t.label&&e.createElement("label",{className:"input-label "+(m?"required":"")},t.label),d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${c\|\|""}`},e.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:s,style:i,onChange:e=>{e.target.value?.length>l\|\|y?.(e)}})),u&&l&&l>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length\|\|0}/${l}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)))})),v=d(y,p),g=d(f,p);u('.freemium-survey-components .checkbox-group {\n width: 100%;\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n flex-direction: column;\n white-space: nowrap;\n flex-wrap: wrap;\n}\n.freemium-survey-components .icon-container {\n display: inline-block;\n flex: 0 0 12px;\n width: 12px;\n height: 12px;\n min-width: 12px;\n min-height: 12px;\n color: inherit;\n position: absolute;\n left: 1px;\n top: 2px;\n}\n.freemium-survey-components .tick-icon {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n color: inherit;\n fill: currentColor;\n}\n.freemium-survey-components input[type=checkbox] {\n position: absolute;\n clip: rect(0px 0px 0px 0px);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=checkbox]:focus ~ .checkbox {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 2px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 2px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n opacity: 1;\n line-height: 1.2;\n cursor: pointer;\n font-size: 1rem;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components .checkbox-label:hover .checkbox {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components .checkbox-label.disabled {\n opacity: 0.5;\n cursor: "not-allowed";\n}\n.freemium-survey-components .checkbox {\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n min-height: 14px;\n max-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 16px;\n background-color: #fff;\n border: 1px solid;\n text-align: left;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {\n box-shadow: unset;\n border-color: unset;\n}');const x=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),h=({values:t=[],othersValue:s="",options:i,name:a,autoFocusGroup:c,autoFocusDelay:u,onChangeHandler:l,saveOthersValue:d,othersOption:m,othersRequired:p})=>{const[y,f]=o(!1),g=n(null);return r((()=>{c&&setTimeout((()=>{g.current?.focus()}),300+u)}),[c]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:g,className:"autofocus-button","aria-hidden":!0}),i?.map(((n,r)=>e.createElement(b,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,r)=>{if(r)l([...t\|\|[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),l([...t])}}},n.value))),m&&e.createElement(b,{key:"others",checked:y,name:"others",id:"others",onChange:(e,n)=>{if(f(n),n)l([...t,"others"]);else{const e=t.findIndex((e=>"others"===e));t.splice(e,1),l(t)}}},"Others"),y&&e.createElement(e.Fragment,null,e.createElement(v,{placeholder:"Enter your comment",value:s[a],onChange:e=>{d(a,e.target.value)},autoFocusDelay:10,label:""})))},b=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:o,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("div",{className:"icon-container"},e.createElement(x,null)," ")),e.createElement("div",null,t.children))}),{checked:!1});u('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n transition: background-color ease-in 0.2s;\n min-width: 18px;\n max-width: 18px;\n min-height: 18px;\n max-height: 18px;\n border-radius: 50%;\n position: relative;\n margin-right: 16px;\n text-align: left;\n}\n.freemium-survey-components .radio:before {\n left: 3px;\n top: 3px;\n content: "";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n transition: all ease-in 0.2s;\n background-color: #fff;\n}\n.freemium-survey-components .radio-label {\n display: flex;\n align-items: baseline;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n cursor: pointer;\n line-height: 1.2;\n font-size: 1rem;\n font-weight: 400;\n padding: 16px 24px;\n min-width: 200px;\n border: 1px solid #ebeff3;\n border-radius: 4px;\n white-space: pre-wrap;\n}\n.freemium-survey-components input[type=radio] {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n width: 0px;\n height: 0px;\n}\n.freemium-survey-components input[type=radio]:focus ~ .radio {\n / box-shadow: ${pseudo.focus} 0px 0px 0px 3px; /\n box-shadow: var(--default-brand-color) 0px 0px 0px 3px;\n box-shadow: var(--brand-color, var(--default-brand-color)) 0px 0px 0px 3px;\n border-color: transparent;\n}\n.freemium-survey-components input[type=radio]:checked ~ .radio:before {\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}\n.freemium-survey-components .radio-label:hover .radio {\n border-color: var(--default-brand-color);\n border-color: var(--brand-color, var(--default-brand-color));\n box-shadow: var(--default-background-color) 0px 0px 0px 5px;\n box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;\n}');const w=({name:t,options:s,value:i,autoFocusGroup:a,autoFocusDelay:c,onChangeHandler:u,saveOthersValue:l,othersOption:d,othersRequired:m,othersValue:p})=>{const[y,f]=o(p??""),[g,x]=o(i),h=n(null);return r((()=>{a&&setTimeout((()=>{h.current?.focus()}),300+c)}),[a]),r((()=>{i\|\|(f(""),x(null))}),[i]),r((()=>{g&&s.find((e=>e.value===g))&&g!==i&&u(g)}),[g]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:h,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),s?.map(((n,r)=>e.createElement(k,{key:n.value,value:n.value,name:t,onChange:e=>{x(e.currentTarget.value)},checked:g===n.value},n.value))),d&&e.createElement(k,{key:"others",value:"others",name:t,onChange:e=>{x("others")},checked:"others"===g},"Others"),"others"===g&&e.createElement(e.Fragment,null,e.createElement(v,{value:y,onChange:e=>f(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),y!==i&&e.createElement(C,{inline:!0,disabled:m&&0===y.length,onClick:()=>{u("others"),l(t,y)}},"Next")))},k=d((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),320)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:o,type:"radio",name:t.name,value:t.value,checked:t.checked,onChange:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))}),{checked:!1,autoFocus:!1});u(".progressbar-container {\n width: 100%;\n height: 4px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n text-align: left;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const q=n=>{const{totalSteps:t,completedSteps:r}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(r>0?100/t:0)+"%",transform:`scaleX(${r})`}}))};u(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n padding: 8px 16px;\n cursor: pointer;\n line-height: 1.5;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.3px;\n border-radius: 4px;\n white-space: nowrap;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n color: --default-button-text-color;\n color: var(--button-text-color, --default-button-text-color);\n background: var(--default-brand-color);\n background: var(--brand-color, var(--default-brand-color));\n border: 1px solid var(--default-brand-color);\n border: 1px solid var(--brand-color, var(--default-brand-color));\n border-radius: 4px;\n min-width: 200px;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n transform: translateY(-4px);\n}\n.freemium-survey-components .action-button[disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n}\n.freemium-survey-components button:focus:not(:active) {\n / box-shadow: 0 0 0 2px ${pseudo.focus}; /\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\n}\n.widget-survey-components .action-button {\n min-width: 120px;\n}\n\n.freemium-survey-components.mobile-preview .action-button {\n min-width: 120px;\n}");const E=()=>e.createElement(e.Fragment,null,"..."),_={LARGE:"large",MINI:"mini",NORMAL:"normal"},C=n=>{const{inline:t=!1,children:r,disabled:o,className:s="",htmlType:i,type:a="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...m}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:o,className:`action-button ${s} ${l}`,type:i,onClick:c},m),d?e.createElement(E,null):r)},z=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M7.82585 6.15754C7.98999 6.32147 8.08232 6.54389 8.08252 6.77587L8.08252 7.2192C8.07983 7.45069 7.98788 7.6722 7.82585 7.83754L1.82919 13.8225C1.77496 13.8772 1.71044 13.9206 1.63936 13.9502C1.56827 13.9798 1.49203 13.9951 1.41502 13.9951C1.33801 13.9951 1.26177 13.9798 1.19068 13.9502C1.1196 13.9206 1.05508 13.8772 1.00085 13.8225L0.172521 12.9942C0.118197 12.941 0.0750381 12.8774 0.0455752 12.8073C0.0161124 12.7372 0.000937578 12.6619 0.000937585 12.5859C0.000937592 12.5098 0.0161125 12.4345 0.0455753 12.3644C0.0750381 12.2943 0.118197 12.2308 0.172521 12.1775L5.36419 6.99754L0.172522 1.81754C0.117847 1.76331 0.0744506 1.69879 0.0448352 1.62771C0.0152208 1.55662 -2.75162e-05 1.48038 -2.75094e-05 1.40337C-2.75027e-05 1.32636 0.0152208 1.25012 0.0448353 1.17904C0.0744507 1.10795 0.117847 1.04343 0.172522 0.989205L1.00086 0.172537C1.05508 0.117862 1.1196 0.0744661 1.19069 0.0448507C1.26177 0.0152353 1.33801 -1.20337e-05 1.41502 -1.2027e-05C1.49203 -1.20203e-05 1.56827 0.0152353 1.63936 0.0448507C1.71044 0.0744661 1.77496 0.117862 1.82919 0.172537L7.82585 6.15754Z",fill:"#6B6B6B"})),N=()=>e.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),S=({question:n,formValues:t,othersMeta:r,onChangeHandler:o,saveOthersValue:s,autoFocus:i,autoFocusDelay:a})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(l,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(h,{name:n.name,autoFocusGroup:i,values:t[n.name],othersValue:r[n.name],options:n.type_info.choices,onChangeHandler:o,saveOthersValue:s,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,autoFocusDelay:a});case"RADIO":case"DROPDOWN":return e.createElement(w,{autoFocusGroup:i,autoFocusDelay:a,name:n.name,onChangeHandler:o,saveOthersValue:s,options:n.type_info.choices,value:t[n.name],othersValue:r[n.name],othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired});case"INPUT":case"TEXT":return n.type_info?.meta?.readOnly?e.createElement("div",{className:"message-container"},n.type_info?.meta?.value):e.createElement("div",{className:"responsive-text-field"},e.createElement(v,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,value:t[n.name]\|\|"",placeholder:n.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(g,{autoFocusInput:i,autoFocusDelay:a,label:"",isRequired:n.is_required,placeholder:n.type_info?.meta?.placeholder??"",value:t[n.name]\|\|"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}},B=(e,n,t)=>{if(e){let r={"{{nps.rating}}":t};n&&(r={...r,...n});const o=new RegExp(Object.keys(r).join("\|"),"gi");e=e.replace(o,(function(e){return r[e.toLowerCase()]}))}return e};u(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 560px;\n --default-widget-max-height: 400px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n white-space: nowrap;\n border-radius: 3px;\n border: 1px solid #efefef;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button svg {\n transform: rotate(90deg);\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n.freemium-survey-components.card-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n transition: opacity 50ms ease-out;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components.card-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.card-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.card-survey-style .radio-group,\n.freemium-survey-components.card-survey-style .checkbox-group {\n max-height: 420px;\n overflow: auto;\n}\n.freemium-survey-components.card-survey-style .fade-enter .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter .question-container {\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit .question-container {\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.card-survey-style .fade-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-exit-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-enter-active .question-container,\n.freemium-survey-components.card-survey-style .fade-reverse-exit-active .question-container {\n transition: opacity 300ms, transform 300ms;\n}\n.freemium-survey-components.card-survey-style .question-footer {\n display: flex;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.card-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .question-footer:only-child {\n margin-left: auto;\n}\n.freemium-survey-components.card-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.card-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.card-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.card-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .submit {\n max-width: 700px;\n text-align: left;\n background: transparent;\n box-shadow: none;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.card-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.card-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.card-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.card-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.card-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.card-survey-style .message-container:empty {\n display: none;\n}\n\n@media (max-width: 550px) {\n div.freemium-survey-components.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n div.freemium-survey-components.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n div.freemium-survey-components.card-survey-style .question-footer {\n flex-direction: column-reverse;\n grid-gap: 20px;\n gap: 20px;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation {\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .freemium-survey-step-navigation .navigation-button {\n width: 50%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n div.freemium-survey-components.card-survey-style .action-buttons button {\n max-width: unset;\n }\n div.freemium-survey-components.card-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\n.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\n.widget-survey-components,\n.card-survey-style {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .questions,\n.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n position: relative;\n}\n.widget-survey-components .question-text,\n.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\n.widget-survey-components .focus-lock,\n.card-survey-style .focus-lock {\n width: 100%;\n}\n.widget-survey-components .question-container,\n.card-survey-style .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n}\n.widget-survey-components .question-footer,\n.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n position: -webkit-sticky;\n position: sticky;\n bottom: 0;\n}\n.widget-survey-components .submit,\n.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\n.widget-survey-components .nps-container .footer,\n.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices,\n.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\n.widget-survey-components .radio-group,\n.card-survey-style .radio-group {\n width: 100%;\n}\n.widget-survey-components .checkbox-group,\n.card-survey-style .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 400px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const I=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t\|\|n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),n.type_info.meta?.redirectDelay??1e4)}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:B(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),O=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i,tempCurrentBlockIndexOfBlocksWithQns:a,setReverse:c,reverse:u})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{u?t.current=Math.max(t.current-1,0):a.current=Math.max(t.current-1,0),i.current=!1,c(!0),s(t.current)}},e.createElement(N,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,u?a.current=Math.min(t.current+1,r.length-1):t.current=Math.min(t.current+1,r.length-1),c(!1),s(t.current)}},e.createElement(z,null))),F=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,blocksWithQns:s,blocks:i,thankYouQuestion:a,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:u,currentEditingBlock:l,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:y,setHorizontalScrollUnits:f,handleFormValues:v,skipBlock:g,setIsSubmitting:x,onSubmit:h,setIsSurveyCompleted:b,preventQuestionAnimation:w,preview:k,closePreview:q,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:_,question:z,reverse:N,othersMeta:S,...B})=>{const I=B.blockIndex??c.current,F=()=>!m.includes(z.type_info.question_type)&&!y(),T=()=>"RANGE"!==z.type_info.question_type&&!z.required&&!y(),L=()=>("DROPDOWN"===z.type_info.question_type&&!z.required&&o[z.name],!1),Q=()=>y()&&(n\|\|"standard"!==r),R="MULTI_SELECT"===l.current.question.type_info.question_type&&o[l.current.question.name]?.includes("others")&&(!S[l.current.question.name]\|\|""===S[l.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r\|\|0===I&&void 0===o[z.name]\|\|"compact"===t\|\|0===c.current&&!N)&&e.createElement(O,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:s,blocks:i,setHorizontalScrollUnits:f,preventQuestionAnimation:w,setReverse:E,tempCurrentBlockIndexOfBlocksWithQns:_,reverse:N}),(F()\|\|L()\|\|T()\|\|Q())&&e.createElement("div",{className:"action-buttons"},F()&&e.createElement(C,{onClick:()=>{E(!1),v(s[I],null,!0)},disabled:l.current.question.required&&(!o[l.current.question.name]\|\|Array.isArray(o[l.current.question.name])&&0===o[l.current.question.name].length)\|\|l.current.question.type_info.meta?.othersRequired&&R,className:"next-button"},"Next"),T()&&e.createElement("button",{className:"skip-button",onClick:()=>{E(!1),g(z)}},"Skip"),Q()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(l.current.question.required\|\|l.current.question.type_info.pivot_question)&&(null==o[l.current.question.name]\|\|0===o[l.current.question.name]?.length)\|\|l.current.question.type_info.meta?.othersRequired&&R\|\|d,onClick:()=>{x(!0),h({...o,others_meta:S},(()=>{a?.type_info.meta?.skipThankYouPage?k?setTimeout((()=>{q?.()}),300):window.location.href=a?.type_info.meta?.redirectUrl:b(!0)}))}},d?"Submitting":"Submit survey")),L()&&e.createElement("button",{className:"skip-button",onClick:()=>{E(!1),l.current=s[I],u.current=i.findIndex((e=>e.name===s[I].name)),g(z)}},"Clear selection")))},T=({survey:t,surveyStyle:s="standard",placeholders:c,onSubmit:u,widget:l,npsValue:d,widgetStyle:p,widgetNavigatorQuerySelector:y,preview:f,mobilePreview:v,closePreview:g})=>{const x=t.question_details?.questions\|\|[],h=t.meta?.blocks\|\|[],[b,w]=o(null),[k,E]=o({}),[_,C]=o(!1),[z,N]=o([]),[O,T]=o(0),[L,Q]=o(!1),[R,V]=o(null),[Y,$]=o({}),D=n(null),A=n(null),H=n(-1),U=n(null),j=n(0),M=n(0),W=n(!1),P=n([]),G=e.useRef(!!d&&"card"===s),X=n(null),K=n(0),[Z,J]=o(!1);r((()=>{h&&(X.current=h.find((e=>"TY"===e.name)),w(h.filter((e=>"TY"!==e.name))))}),[h]),r((()=>{M.current=K.current,b&&z&&(j.current=b.findIndex((e=>e.name===z[K.current].name))),T(O+1)}),[Z]),r((()=>{if(b)if(A.current=x.find((e=>e.type_info?.pivot_question))??x.find((e=>"RANGE"===e.type_info?.question_type))??x[0],null!=d){H.current=d;const e=x.find((e=>e.name===b[0].question_names[0]));D.current={...b[0],question:e},P.current=[...P.current,{...b[0],question:e}],N(P.current),E({Q_1:d})}else if(!D.current&&b.length>0)return D.current=b[0],void ne(b[0])}),[b,d]),e.useEffect((()=>{z.length&&(P.current=z,M.current=z.length-1),T(z.length-1)}),[z]),r((()=>{Object.keys(k).length>0&&D.current.question&&(m.includes(D.current.question.type_info.question_type)\|\|W.current)&&!ee()&&(d&&1==z.length?setTimeout((()=>{te()}),1500):te())}),[k]),r((()=>{if(null!=k?.[A.current?.name])if(X.current?.is_based_on_rating){const e=A.current?.type_info?.choices[k?.[A.current?.name]]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=x.find((e=>e.name===n));V(t)}else{const e=x.find((e=>e.name==X.current?.question_names[0]));V(e)}}),[k?.[A.current?.name]]);const ee=()=>(j.current===b.length-1\|\|"end"===D.current.branchOption)&&M.current===z.length-1,ne=e=>{let n={};if(e.is_based_on_rating){const t=A.current?.type_info?.choices[k?.[A.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=x.find((e=>e.name===r))}else n=x.find((n=>n.name===e.question_names[0]));D.current.question=n;P.current.find((e=>e.question.name===n.name))?(T(O+1),M.current+=1):N([...P.current,{...e,question:n}])},te=()=>{if(ee())C(!0);else{if(D.current.nextBlock)j.current=b.findIndex((e=>e.name===D.current.nextBlock));else if(D.current.question.type_info?.meta?.branches){const e=D.current.question.type_info?.meta?.branches,n=k[D.current.question.name];let t;if(t="RANGE"===D.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void C(!0);j.current=b.findIndex((e=>e.name===t.nextBlock))}else j.current+=1}else j.current+=1;D.current=b[j.current],ne(b[j.current])}},re=(e,n,t)=>{if(G.current=!1,t){if(W.current=!0,null!=k[e.question.name]&&e.name!==z[z.length-1].name){const[t,r]=(e=>{const n=z.findIndex((n=>n.name===e.name)),t=z.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=k[n.question.name],e)),{});return j.current=b.findIndex((n=>n.name===e.name)),[t,r]})(e);E({...r,...null!=n&&{[e.question.name]:n}}),P.current=t}else E({...k,...null!=n&&{[e.question.name]:n}});A?.current?.name==e?.question?.name&&(H.current=n)}else E({...k,...null!=n&&{[e.question.name]:n}})};if(!D.current\|\|!D.current.question)return null;const oe=z[M.current];return e.createElement("div",{className:`freemium-survey-components ${v?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},e.createElement(q,{totalSteps:b.length,completedSteps:j.current+(_?1:0)}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:M.current+String(_),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:Z?"fade-reverse":"fade"},e.createElement("div",{className:"questions"},_?e.createElement(I,{thankYouQuestion:R,preview:f,placeholders:c,npsValue:H.current}):e.createElement("div",{ref:U,id:`${oe.question.name}`,className:`question-container ${l\|\|"card"===s}`},e.createElement("div",{className:"question-text",dangerouslySetInnerHTML:{__html:B(oe.question.text,c,H.current)},title:`question-${M.current}`,role:"heading","aria-level":1}),e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:{width:"100%"}},e.createElement(S,{question:oe.question,formValues:k,othersMeta:Y,autoFocus:!0,autoFocusDelay:"standard"===s?350:0,saveOthersValue:(e,n)=>{$({...Y,[e]:n})},onChangeHandler:e=>{W.current=!1,j.current=b.findIndex((e=>e.name===oe.name)),D.current=oe,J(!1),re(oe,e,m.includes(oe.question.type_info.question_type)&&!ee())}})),e.createElement(F,{question:oe.question,widget:l,widgetStyle:p,surveyStyle:s,formValues:k,othersMeta:Y,blocksWithQns:z,blocks:b,thankYouQuestion:R,currentBlockIndexOfBlocksWithQns:M,reverse:Z,setReverse:J,currentBlockIndexOfBlocks:j,currentEditingBlock:D,isSubmitting:L,isValuesCommitted:W,isCurrentBlockFinal:ee,setHorizontalScrollUnits:T,handleFormValues:re,skipBlock:e=>{W.current=!0,delete k[e.name],E({...k})},setIsSubmitting:Q,onSubmit:u,setIsSurveyCompleted:C,preventQuestionAnimation:G,preview:f,closePreview:g,tempCurrentBlockIndexOfBlocksWithQns:K}))))))};u(":root {\n --default-brand-color: #264966;\n --default-question-text-color: #000;\n --default-question-background-color: #fff;\n --default-background-color: #f8f8f8;\n --default-button-text-color: #fff;\n --default-secondary-button-text-color: #000;\n --default-input-placeholder-color: #92a2b1;\n --compact-widget-max-height: 480px;\n --default-widget-max-height: 460px;\n --cozy-widget-max-height: 380px;\n}\n\n.freemium-survey-step-navigation {\n border-radius: 3px;\n border: 1px solid #efefef;\n white-space: nowrap;\n}\n.freemium-survey-step-navigation .navigation-button {\n width: 38px;\n text-align: -webkit-center;\n height: 38px;\n background-color: #fff;\n border: none;\n cursor: pointer;\n border-radius: 0 3px 3px 0;\n}\n.freemium-survey-step-navigation .navigation-button:first-of-type {\n border-right: 1px solid #efefef;\n border-radius: 3px 0 0 3px;\n}\n.freemium-survey-step-navigation .navigation-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.freemium-survey-step-navigation .navigation-button:focus {\n position: relative;\n z-index: 1;\n}\n\n.freemium-survey-components.standard-survey-style .question-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 800ms ease 0ms;\n box-shadow: 0px 12px 15px rgba(18, 52, 77, 0.03);\n margin-bottom: 28px;\n padding: 28px;\n grid-gap: 28px;\n gap: 28px;\n position: relative;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n overflow: auto;\n opacity: 1;\n}\n.freemium-survey-components.standard-survey-style .hide-question-container {\n pointer-events: none;\n opacity: 0;\n}\n.freemium-survey-components.standard-survey-style .question-text {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.8;\n width: 100%;\n text-align: left;\n color: var(--default-question-text-color);\n color: var(--question-text-color, var(--default-question-text-color));\n}\n.freemium-survey-components.standard-survey-style .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n position: absolute;\n}\n.freemium-survey-components.standard-survey-style .question-footer {\n display: flex;\n justify-content: flex-start;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components.standard-survey-style .question-footer:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components.standard-survey-style .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .skip-button {\n font-weight: 500;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 8px 16px;\n border-radius: 4px;\n color: var(--default-secondary-button-text-color);\n color: var(--secondary-button-text-color, var(--default-secondary-button-text-color));\n letter-spacing: 0.05rem;\n line-height: 1.5;\n border: 1px solid transparent;\n transform: translateY(0px);\n transition: transform ease 0.2s;\n}\n.freemium-survey-components.standard-survey-style .skip-button:hover {\n background-color: #f3f3f3;\n transform: translateY(-4px);\n}\n.freemium-survey-components.standard-survey-style .next-button {\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .submit {\n max-width: 700px;\n margin: 0 auto;\n text-align: left;\n background: transparent;\n box-shadow: none;\n padding-bottom: 40px;\n color: var(--default-button-text-color);\n color: var(--button-text-color, var(--default-button-text-color));\n}\n.freemium-survey-components.standard-survey-style .fade-enter {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(40px);\n}\n.freemium-survey-components.standard-survey-style .fade-enter-active {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit {\n transition: all ease 400ms;\n opacity: 1;\n transform: translateY(0);\n}\n.freemium-survey-components.standard-survey-style .fade-exit-active {\n transition: all ease 400ms;\n opacity: 0;\n transform: translateY(-40px);\n}\n.freemium-survey-components.standard-survey-style .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-gap: 20px;\n gap: 20px;\n min-height: 180px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components.standard-survey-style .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.6;\n color: #12344d;\n width: 75%;\n}\n.freemium-survey-components.standard-survey-style .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components.standard-survey-style .thankyou .link {\n width: 100%;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #666;\n font-weight: 500;\n text-decoration: underline;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components.standard-survey-style .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components.standard-survey-style .message-container:empty {\n display: none;\n}\n@media (max-width: 550px) {\n .freemium-survey-components.standard-survey-style .action-buttons {\n flex-direction: column;\n width: 100%;\n }\n .freemium-survey-components.standard-survey-style .action-buttons button {\n max-width: unset;\n }\n .freemium-survey-components.standard-survey-style .action-button {\n max-width: unset;\n width: 100%;\n }\n}\n\n@media (max-width: 550px) {\n .freemium-survey-component .responsive-text-field .input-container,\n.card-survey-style .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-component .responsive-text-field .textarea-container,\n.card-survey-style .responsive-text-field .textarea-container {\n display: flex;\n }\n}\ndiv.widget-survey-components.compact-style .freemium-survey-step-navigation {\n padding: 0 2px;\n margin-left: 4px;\n box-shadow: 0px 0px 6px #eee;\n margin-top: 4px;\n}\ndiv.widget-survey-components.compact-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.compact-style .nps-container .choices {\n grid-gap: 12px;\n gap: 12px;\n}\n\ndiv.widget-survey-components {\n display: flex;\n flex-direction: column;\n grid-gap: 28px;\n gap: 28px;\n flex-grow: 1;\n font-size: 0.875rem;\n overflow: hidden;\n}\ndiv.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 480px;\n max-height: var(--compact-widget-max-height);\n background: var(--default-question-background-color);\n background: var(--question-background-color, var(--default-question-background-color));\n}\ndiv.widget-survey-components .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n padding: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group {\n width: 100%;\n flex-wrap: nowrap;\n}\n\ndiv.widget-survey-components .question-container {\n box-shadow: none;\n border-radius: 0;\n}\ndiv.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\ndiv.widget-survey-components .progressbar-container {\n position: absolute;\n}\ndiv.widget-survey-components .progressbar-container .progressbar {\n border-radius: 3px 0 0 0;\n}\ndiv.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\ndiv.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\ndiv.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\ndiv.widget-survey-components div.thankyou {\n min-height: unset;\n}\ndiv.widget-survey-components div.thankyou .text {\n width: 85%;\n}\ndiv.widget-survey-components div.thankyou svg {\n width: 140px;\n height: 120px;\n}\n\ndiv.widget-survey-components.default-style .freemium-survey-step-navigation {\n margin: 0;\n}\ndiv.widget-survey-components.default-style .questions {\n max-height: 460px;\n max-height: var(--default-widget-max-height);\n}\ndiv.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\ndiv.widget-survey-components.default-style .question-footer {\n justify-content: space-between;\n}\ndiv.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components.default-style .nps-container .choices {\n flex-wrap: unset;\n grid-gap: 12px;\n gap: 12px;\n}\ndiv.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\ndiv.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\ndiv.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\ndiv.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\ndiv.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.widget-survey-components.cozy-style .freemium-survey-step-navigation {\n margin: 0;\n}\n.widget-survey-components.cozy-style .questions {\n max-height: 380px;\n max-height: var(--cozy-widget-max-height);\n}\n.widget-survey-components.cozy-style .question-text {\n font-size: 1rem;\n}\n.widget-survey-components.cozy-style .question-text.nps {\n text-align: center;\n width: 60%;\n min-width: 600px;\n margin: auto;\n}\n.widget-survey-components.cozy-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.cozy-style .question-footer {\n justify-content: space-between;\n}\n.widget-survey-components.cozy-style .nps-container {\n grid-gap: 44px;\n gap: 44px;\n}\n.widget-survey-components.cozy-style .nps-container .widget {\n display: flex;\n justify-content: center;\n}\n.widget-survey-components.cozy-style .nps-container .button-container {\n width: 60%;\n min-width: 600px;\n margin: 0 auto;\n}\n.widget-survey-components.cozy-style .nps-container .button-container .choices {\n justify-content: space-around;\n}\n.widget-survey-components.cozy-style .nps-container .footer {\n padding-top: 8px;\n}\n.widget-survey-components.cozy-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.cozy-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n}\n.widget-survey-components.cozy-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.cozy-style textarea {\n min-height: 60px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n padding: 4px;\n}\n\n.freemium-survey-components.mobile-preview .thankyou .text {\n width: unset;\n}");const L=({thankYouQuestion:n,preview:t,placeholders:o,npsValue:s})=>(r((()=>{t\|\|n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e3(n.type_info.meta?.redirectDelay??1e4))}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:B(n.text,o,s)}}),n.type_info.meta?.redirectUrl&&e.createElement("div",{style:{width:"100%"}},e.createElement("div",{className:"redirection-text"},"You will be redirected to the below URL automatically in"," ",n.type_info.meta?.redirectDelay," seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),Q=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:r,blocks:o,setHorizontalScrollUnits:s,preventQuestionAnimation:i})=>e.createElement("div",{className:"freemium-survey-step-navigation","data-navigation-element":"1"},e.createElement("button",{disabled:0==t.current,className:"navigation-button",onClick:()=>{t.current=Math.max(t.current-1,0),n.current=o.findIndex((e=>e.name===r[t.current].name)),i.current=!1,s(t.current)}},e.createElement(N,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=r.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,r.length-1),n.current=o.findIndex((e=>e.name===r[t.current].name)),s(t.current)}},e.createElement(z,null))),R=({widget:n,widgetStyle:t,surveyStyle:r,formValues:o,othersMeta:s,blocksWithQns:i,blocks:a,thankYouQuestion:c,currentBlockIndexOfBlocksWithQns:u,currentBlockIndexOfBlocks:l,currentEditingBlock:d,isSubmitting:p,isValuesCommitted:y,isCurrentBlockFinal:f,setHorizontalScrollUnits:v,handleFormValues:g,skipBlock:x,setIsSubmitting:h,onSubmit:b,setIsSurveyCompleted:w,preventQuestionAnimation:k,preview:q,closePreview:E,..._})=>{const z=_.blockIndex??u.current,N=_.question??i[z].question,S=()=>N.name===d.current.question.name&&!m.includes(N.type_info.question_type)&&!f(),B=()=>"RANGE"!==N.type_info.question_type&&!N.required&&N.name===d.current.question.name&&!f(),I=()=>("DROPDOWN"===N.type_info.question_type&&N.name!==d.current.question.name&&!N.required&&o[N.name],!1),O=()=>f()&&(n\|\|"standard"!==r)&&N.name===d.current.question.name,F="MULTI_SELECT"===d.current.question.type_info.question_type&&o[d.current.question.name]?.includes("others")&&(!s[d.current.question.name]\|\|""===s[d.current.question.name]);return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===r\|\|0===z&&!o[N.name]\|\|"compact"===t)&&e.createElement(Q,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:u,blocksWithQns:i,blocks:a,setHorizontalScrollUnits:v,preventQuestionAnimation:k}),(S()\|\|I()\|\|B()\|\|O())&&e.createElement("div",{className:"action-buttons"},S()&&e.createElement(C,{onClick:()=>{g(i[z],null,!0)},disabled:d.current.question.required&&(!o[d.current.question.name]\|\|Array.isArray(o[d.current.question.name])&&0===o[d.current.question.name].length)\|\|d.current.question.type_info.meta?.othersRequired&&F,className:"next-button"},"Next"),B()&&e.createElement("button",{className:"skip-button",onClick:()=>x(N)},"Skip"),I()&&e.createElement("button",{className:"skip-button",onClick:()=>{d.current=i[z],l.current=a.findIndex((e=>e.name===i[z].name)),x(N)}},"Clear selection"),O()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(d.current.question.required\|\|d.current.question.type_info.pivot_question)&&(null==o[d.current.question.name]\|\|0===o[d.current.question.name]?.length)\|\|d.current.question.type_info.meta?.othersRequired&&F\|\|p,onClick:()=>{h(!0),b({...o,others_meta:s},(()=>{c?.type_info.meta?.skipThankYouPage?q?setTimeout((()=>{E?.()}),300):window.location.href=c?.type_info.meta?.redirectUrl:w(!0)}))}},p?"Submitting":"Submit survey"))))},V=({survey:t,surveyStyle:s="standard",placeholders:u,onSubmit:l,widget:d,npsValue:p,widgetStyle:y,widgetNavigatorQuerySelector:f,preview:v,mobilePreview:g,closePreview:x})=>{const h=t.question_details?.questions\|\|[],b=t.meta?.blocks\|\|[],[w,k]=o(null),[E,_]=o({}),[z,N]=o(!1),[I,O]=o([]),[F,T]=o(0),[V,Y]=o(!1),[$,D]=o(null),[A,H]=o({}),U=n(null),j=n(null),M=n(-1),W=n(null),P=n(0),G=n(0),X=n(!1),K=n([]),Z=n(!!p&&"card"===s),J=n(null),ee=n([]);r((()=>{b&&(J.current=b.find((e=>"TY"===e.name)),k(b.filter((e=>"TY"!==e.name))))}),[b]),r((()=>{if(w)if(j.current=h.find((e=>e.type_info?.pivot_question))??h.find((e=>"RANGE"===e.type_info?.question_type))??h[0],null!=p){M.current=p;const e=h.find((e=>e.name===w[0].question_names[0]));U.current={...w[0],question:e},K.current=[...K.current,{...w[0],question:e}],O(K.current),_({Q_1:p})}else if(!U.current&&w.length>0)return U.current=w[0],void te(w[0])}),[w,p]),r((()=>{I.length&&(K.current=I,G.current=I.length-1),d\|\|"standard"!==s?(W.current&&(W.current.style.maxHeight="unset"),ee.current[P.current]=W.current?.scrollHeight\|\|ee.current[P.current]\|\|0,W.current&&(W.current.style.maxHeight="100%")):W.current?.scrollIntoView({block:"start",behavior:"smooth"}),T(I.length-1)}),[I]),r((()=>{Object.keys(E).length>0&&U.current.question&&(m.includes(U.current.question.type_info.question_type)\|\|X.current)&&!ne()&&re()}),[E]),r((()=>{if(null!=E?.[j.current?.name])if(J.current?.is_based_on_rating){const e=j.current?.type_info?.choices[E?.[j.current?.name]]?.dependent_question_names,n=J.current?.question_names.find((n=>e?.includes(n))),t=h.find((e=>e.name===n));D(t)}else{const e=h.find((e=>e.name==J.current?.question_names[0]));D(e)}}),[E?.[j.current?.name]]);const ne=()=>P.current===w.length-1\|\|"end"===U.current.branchOption,te=e=>{let n={};if(e.is_based_on_rating){const t=j.current?.type_info?.choices[E?.[j.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===r))}else n=h.find((n=>n.name===e.question_names[0]));U.current.question=n;K.current.find((e=>e.question.name===n.name))?(T(F+1),G.current+=1):O([...K.current,{...e,question:n}])},re=()=>{if(ne())N(!0);else{if(U.current.nextBlock)P.current=w.findIndex((e=>e.name===U.current.nextBlock));else if(U.current.question.type_info?.meta?.branches){const e=U.current.question.type_info?.meta?.branches,n=E[U.current.question.name];let t;if(t="RANGE"===U.current.question.type_info.question_type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock){if("TY"===t.nextBlock)return void N(!0);P.current=w.findIndex((e=>e.name===t.nextBlock))}else P.current+=1}else P.current+=1;U.current=w[P.current],te(w[P.current])}},oe=e=>{X.current=!0,delete E[e.name],_({...E})},se=(e,n,t)=>{if(Z.current=!1,t){if(X.current=!0,null!=E[e.question.name]&&e.name!==I[I.length-1].name){const[t,r]=(e=>{const n=I.findIndex((n=>n.name===e.name)),t=I.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=E[n.question.name],e)),{});return P.current=w.findIndex((n=>n.name===e.name)),[t,r]})(e);_({...r,...null!=n&&{[e.question.name]:n}}),K.current=t}else _({...E,...null!=n&&{[e.question.name]:n}});j?.current?.name==e?.question?.name&&(M.current=n)}else _({...E,...null!=n&&{[e.question.name]:n}})},ie=(e,n)=>{H({...A,[e]:n})};return U.current&&U.current.question?e.createElement("div",{className:`freemium-survey-components ${d?"widget-survey-components":""} ${y}-style ${g?"mobile-preview":""} ${s}-survey-style`,id:"freemium-survey"},d&&"compact"===y&&document.querySelector(f)&&e.createElement(e.Fragment,null,c.createPortal(e.createElement("div",null,e.createElement(Q,{currentBlockIndex:P,currentBlockIndexOfBlocksWithQns:G,blocksWithQns:I,blocks:w,setHorizontalScrollUnits:T,preventQuestionAnimation:Z})),document.querySelector(f))),z?null:e.createElement(q,{totalSteps:w.length,completedSteps:P.current}),e.createElement(i,{mode:"out-in"},e.createElement(a,{key:String(z),addEndListener:(e,n)=>{e.addEventListener("transitionend",n,!1)},classNames:d?"":"fade"},e.createElement("div",null,z?e.createElement(L,{thankYouQuestion:$,preview:v,placeholders:u,npsValue:M.current}):e.createElement(e.Fragment,null,e.createElement("div",{onTransitionEndCapture:e=>e.stopPropagation(),style:d\|\|"card"===s?{transform:`translateX(calc(-${F} * 100%))`,height:`${ee.current[P.current]}px`,transition:Z.current\|\|I?.length<=1?"none":"all 300ms ease-out 0ms"}:{},className:"questions"},I.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:W,className:"question-container "+(!d&&"card"!==s\|\|G.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:B(n.question.text,u,M.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!d&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(S,{question:n.question,formValues:E,othersMeta:A,autoFocus:G.current===t,autoFocusDelay:"standard"===s?350:20,saveOthersValue:ie,onChangeHandler:e=>{X.current=!1,P.current=w.findIndex((e=>e.name===n.name)),U.current=n,se(n,e,m.includes(n.question.type_info.question_type)&&!ne())}}),e.createElement("button",{disabled:!d&&"standard"===s,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(R,{question:n.question,blockIndex:t,widget:d,widgetStyle:y,surveyStyle:s,formValues:E,othersMeta:A,blocksWithQns:I,blocks:w,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:G,currentBlockIndexOfBlocks:P,currentEditingBlock:U,isSubmitting:V,isValuesCommitted:X,isCurrentBlockFinal:ne,setHorizontalScrollUnits:T,handleFormValues:se,skipBlock:oe,setIsSubmitting:Y,onSubmit:l,setIsSurveyCompleted:N,preventQuestionAnimation:Z,preview:v,closePreview:x})))),!d&&"card"!==s&&ne()&&e.createElement("div",{className:"submit"},e.createElement(C,{disabled:(U.current.question.required\|\|U.current.question.type_info.pivot_question)&&(null==E[U.current.question.name]\|\|0===E[U.current.question.name]?.length)\|\|U.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===U.current.question.type_info.question_type&&E[U.current.question.name]?.includes("")\|\|V,onClick:()=>{Y(!0),l({...E,others_meta:A},(()=>{$?.type_info.meta?.skipThankYouPage?v?setTimeout((()=>{x?.()}),300):window.location.href=$?.type_info.meta?.redirectUrl:N(!0)}))}},V?"Submitting":"Submit survey")))))))):null},Y=n=>{const{survey:t}=n,r=s((()=>{const e=JSON.parse(JSON.stringify(t)),n=[];return(e.question_details?.questions\|\|[]).forEach((e=>{const t=e.type_info?.meta?.block;t&&(t.question_names\|\|(t.question_names=[e.name]),n.push(t))})),{...e,meta:{...e.meta,blocks:n}}}),[t]);return e.createElement(e.Fragment,null,"standard"===n.surveyStyle\|\|n.widget?e.createElement(V,Object.assign({},n,{survey:r})):e.createElement(T,Object.assign({},n,{survey:r})))};export{_ as BUTTON_SIZE_VARIANTS,C as Button,h as CheckboxGroup,v as Input,l as NPS,q as ProgressBar,k as Radio,w as RadioGroup,Y as Survey,g as TextArea};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "freemium-survey-components",
-  "version": "0.10.36",
+  "version": "0.10.37",
   "description": "React Survey Ui Components",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",