freemium-survey-components 0.10.21 → 0.10.25

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 (12) hide show
  1. package/lib/index.cjs.js +1 -1
  2. package/lib/index.esm.js +1 -1
  3. package/lib/types/App.d.ts +1 -1
  4. package/lib/types/components/checkbox/index.d.ts +2 -1
  5. package/lib/types/components/icons/index.d.ts +3 -0
  6. package/lib/types/components/radio-button/index.d.ts +2 -1
  7. package/lib/types/components/text-input/index.d.ts +12 -10
  8. package/lib/types/mock.d.ts +40 -162
  9. package/lib/types/survey/index.d.ts +4 -4
  10. package/lib/types/survey/question.d.ts +7 -1
  11. package/lib/types/types.d.ts +132 -0
  12. package/package.json +1 -1
package/lib/index.cjs.js CHANGED
@@ -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),o=e(require("react-dom"));function r(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}r(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 52px;\n gap: 52px;\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 margin-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 .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}\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, color 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}\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 color: #000;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice.active,\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus,\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n color: #fff;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1).active {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2).active {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3).active {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4).active {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5).active {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6).active {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7).active {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8).active {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9).active {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10).active {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11).active {\n background: #1ebf31;\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 a=e=>{const{type_info:{linear_scale:{button_style:o="highlighted",button_shape:r="rounded"}={},score_presets:{start:a="Very unlikely",end:s="Very likely"}={},validation:{min:i},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===i?1:0)},((e,n)=>n+i)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${r} ${o}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text",role:"note"},`${i} - ${a}`),t.createElement("span",{className:"positive-text",role:"note"},`${l.current[l.current.length-1]} - ${s}`),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))},s=(e,n)=>(e.defaultProps=n,e);r('.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 .end-max-length {\n padding: 0 8px;\n font-size: 0.85rem;\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 i={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},c=n.forwardRef(((e,o)=>{const r=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{r.current?.focus()}),E+350)}),[e.autoFocusInput]);const{inputStyle:a,style:s,className:i,showCount:c,isErrored:u,startLabel:l,isRequired:d,errorText:p,endLabel:m,maxLength:f,autoFocusInput:h,...v}=e;return t.createElement("div",{className:"input-container",style:s},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":""}${i||""}`},t.createElement("input",Object.assign({type:"text",autoComplete:"off",ref:r,style:a},v)),c&&f>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),m&&t.createElement("div",{className:"end-label"},m)),u&&p&&t.createElement("span",{className:"input-error"},e.errorText))})),u=n.forwardRef(((e,o)=>{const r=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{r.current?.focus()}),E+350)}),[e.autoFocusInput]);const{inputStyle:a,style:s,className:i,showCount:c,maxLength:u,isErrored:l,startLabel:d,isRequired:p,autoFocusInput:m,...f}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:s},e.label&&t.createElement("label",{className:"input-label "+(p?"required":"")},e.label),d&&t.createElement("div",{className:"start-label"},d),t.createElement("div",{className:`input-basic ${l?"error":""} ${i||""}`},t.createElement("textarea",Object.assign({autoComplete:"off",ref:r,style:a},f)),c&&u&&u>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)),e.isErrored&&e.errorText&&t.createElement("span",{className:"input-error"},e.errorText))})),l=s(c,i),d=s(u,i);r('.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 p=()=>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"})),m=({values:e=[],options:o,autoFocusGroup:r,onChangeHandler:a,othersOption:s,othersRequired:i})=>{const c=(()=>{let n=-1;return e.map(((e,t)=>{const r=o.find((n=>n.value===e));return r||(n=t),r})),n})(),[u,d]=n.useState(!1),p=n.useRef(null);return n.useEffect((()=>{r&&setTimeout((()=>{p.current?.focus()}),E+350)}),[r]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:p,className:"autofocus-button","aria-hidden":!0}),o?.map(((n,o)=>t.createElement(f,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,o)=>{if(o)a([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),a([...e])}}},n.value))),s&&t.createElement(f,{key:"others",checked:u,name:"others",id:"others",onChange:(e,n)=>{d(n)}},"Others"),u&&t.createElement(t.Fragment,null,t.createElement(l,{placeholder:"Enter your comment",value:e[c],onChange:n=>{-1!==c?(e[c]=n.target.value,a(e)):a(e.concat(n.target.value))},label:""})))},f=s((e=>{const o=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),E+20)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:o,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(p,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});r('.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 h=({name:e,options:o,value:r,autoFocusGroup:a,onChangeHandler:s,othersOption:i,othersRequired:c})=>{const[u,d]=n.useState(""),[p,m]=n.useState(""),f=n.useRef(null);return n.useEffect((()=>{a&&setTimeout((()=>{f.current?.focus()}),E+350)}),[a]),n.useEffect((()=>{r||(m(""),d(""))}),[r]),n.useEffect((()=>{p&&o.find((e=>e.value===p))&&s(p)}),[p]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),o?.map(((n,o)=>t.createElement(v,{key:n.value,value:n.value,name:e,onChange:e=>{m(e.currentTarget.value)},checked:p===n.value},n.value))),i&&t.createElement(v,{key:"others",value:"others",name:e,onChange:e=>{m("others")},checked:"others"===p},"Others"),"others"===p&&t.createElement(t.Fragment,null,t.createElement(l,{value:u,onChange:e=>d(e.target.value),placeholder:"Enter your comment",label:""}),u!==r&&t.createElement(y,{inline:!0,disabled:c&&0===u.length,onClick:()=>s(u)},"Next")))},v=s((e=>{const o=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),E+20)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:o,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});r(".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 x=e=>{const{totalSteps:n,completedSteps:o}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(o>0?100/n:0)+"%",transform:`scaleX(${o})`}}))};r(".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: 500;\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,"..."),y=e=>{const{inline:n=!1,children:o,disabled:r,className:a="",htmlType:s,type:i="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:r,className:`action-button ${a} ${l}`,type:s,onClick:c},p),d?t.createElement(b,null):o)},g=({question:e,formValues:n,onChangeHandler:o,autoFocusInput:r})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(a,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(m,{autoFocusGroup:r,values:n[e.name],options:e.type_info.choices,onChangeHandler:o,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired});case"RADIO":case"DROPDOWN":return t.createElement(h,{autoFocusGroup:r,name:e.name,onChangeHandler:o,options:e.type_info.choices,value:n[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(l,{autoFocusInput:r,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(d,{autoFocusInput:r,label:"",maxLength:300,showCount:!0,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(d,{autoFocusInput:r,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}},w=(e,n,t)=>{if(e){let o={"{{nps.score}}":t};n&&(o={...o,...n});const r=new RegExp(Object.keys(o).join("|"),"gi");e=e.replace(r,(function(e){return o[e.toLowerCase()]}))}return e};r(":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-step-navigation {\n padding: 0 2px;\n box-shadow: 0px 0px 6px #eee;\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 #d9d9d9;\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 .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 28px 20px 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 .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components .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 .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n}\n@-webkit-keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.freemium-survey-components .question-footer {\n display: flex;\n justify-content: flex-end;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n font-weight: 400;\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}\n.freemium-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n}\n.freemium-survey-components .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 .submit {\n max-width: 700px;\n margin: 0 auto;\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 .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 .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components .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 .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components .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 .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components .message-container:empty {\n display: none;\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,\ndiv.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}\ndiv.widget-survey-components .questions,\ndiv.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 560px;\n max-height: var(--compact-widget-max-height);\n}\ndiv.widget-survey-components .question-text,\ndiv.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock,\ndiv.card-survey-style .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container,\ndiv.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: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer,\ndiv.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit,\ndiv.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer,\ndiv.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices,\ndiv.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group,\ndiv.card-survey-style .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group,\ndiv.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: 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 k=["RANGE","NPS","RADIO","DROPDOWN"],E=200,q=({thankYouQuestion:e,preview:o,placeholders:r,npsValue:a})=>(n.useEffect((()=>{o||e.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=e.type_info.meta?.redirectUrl}),1e4)}),[]),t.createElement("div",{className:"question-container thankyou"},t.createElement("div",{className:"heading"},"Thank you!"),t.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:w(e.text,r,a)}}),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 10 seconds.",t.createElement("br",null)),t.createElement("a",{className:"link",href:e.type_info.meta?.redirectUrl},e?.type_info.meta?.redirectUrl)))),C=()=>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"})),_=()=>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"})),N=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:o,blocks:r,setHorizontalScrollUnits:a,preventQuestionAnimation:s})=>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=r.findIndex((e=>e.name===o[n.current].name)),s.current=!1,a(n.current)}},t.createElement(_,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=o.length-1,onClick:()=>{s.current=!1,n.current=Math.min(n.current+1,o.length-1),e.current=r.findIndex((e=>e.name===o[n.current].name)),a(n.current)}},t.createElement(C,null))),z=({widget:e,widgetStyle:n,surveyStyle:o,formValues:r,blocksWithQns:a,blocks:s,thankYouQuestion:i,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:u,currentEditingBlock:l,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:m,setHorizontalScrollUnits:f,handleFormValues:h,skipBlock:v,setIsSubmitting:x,onSubmit:b,setIsSurveyCompleted:g,preventQuestionAnimation:w,preview:E,...q})=>{const C=q.blockIndex??c.current,_=q.question??a[C].question,z=()=>_.name===l.current.question.name&&!k.includes(_.type_info.question_type)&&!m(),S=()=>"RANGE"!==_.type_info.question_type&&!_.required&&_.name===l.current.question.name&&!m(),I=()=>"DROPDOWN"===_.type_info.question_type&&_.name!==l.current.question.name&&!_.required&&null!=r[_.name],R=()=>m()&&(e||"standard"!==o)&&_.name===l.current.question.name;return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===o||0===C&&!r[_.name]||"compact"===n)&&t.createElement(N,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:a,blocks:s,setHorizontalScrollUnits:f,preventQuestionAnimation:w}),(z()||I()||S()||R())&&t.createElement("div",{className:"action-buttons"},z()&&t.createElement(y,{onClick:()=>{h(a[C],null,!0)},disabled:!r[l.current.question.name]||Array.isArray(r[l.current.question.name])&&0===r[l.current.question.name].length,className:"next-button"},"Next"),S()&&t.createElement("button",{className:"skip-button",onClick:()=>v(_)},"Skip"),I()&&t.createElement("button",{className:"skip-button",onClick:()=>{l.current=a[C],u.current=s.findIndex((e=>e.name===a[C].name)),v(_)}},"Clear selection"),R()&&t.createElement("div",{className:"submit"},t.createElement(y,{disabled:(l.current.question.required||l.current.question.type_info.pivot_question)&&void 0===r[l.current.question.name]||d,onClick:()=>{x(!0),b(r,(()=>{i?.type_info.meta?.skipThankYouPage&&(window.location.href=i?.type_info.meta?.redirectUrl),i?.type_info.meta?.skipThankYouPage||g(!0)}))}},d?"Submitting":"Submit Survey"))))},S=({survey:e,surveyStyle:r="standard",placeholders:a,onSubmit:s,widget:i,npsValue:c,widgetStyle:u,widgetNavigatorQuerySelector:l,preview:d,mobilePreview:p})=>{const{meta:{blocks:m},question_details:{questions:f}}=e,[h,v]=n.useState(null),[b,C]=n.useState({}),[_,S]=n.useState(!1),[I,R]=n.useState([]),[B,O]=n.useState(0),[T,L]=n.useState(!1),[$,F]=n.useState(null),A=n.useRef(null),Q=n.useRef(null),H=n.useRef(-1),V=n.useRef(null),j=n.useRef(0),P=n.useRef(0),U=n.useRef(!1),Y=n.useRef([]),D=t.useRef(!!c&&"card"===r),W=n.useRef(null),G=n.useRef([]);n.useEffect((()=>{m&&(W.current=m.find((e=>"TY"===e.name)),v(m.filter((e=>"TY"!==e.name))))}),[m]),n.useEffect((()=>{if(h)if(Q.current=f.find((e=>e.pivot_question))??f.find((e=>"RANGE"===e.type_info.question_type))??f[0],null!=c){H.current=c;const e=f.find((e=>e.name===h[0].question_names[0]));A.current={...h[0],question:e},Y.current=[...Y.current,{...h[0],question:e}],R(Y.current),C({Q_1:c})}else if(!A.current&&h.length>0)return A.current=h[0],void K(h[0])}),[h,c]),t.useEffect((()=>{I.length&&(Y.current=I,P.current=I.length-1),i||"standard"!==r?(V.current&&(V.current.style.maxHeight="unset"),G.current[j.current]=V.current?.scrollHeight||G.current[j.current]||0,V.current&&(V.current.style.maxHeight="100%")):V.current?.scrollIntoView({block:"center",behavior:"smooth"}),O(I.length-1)}),[I]),n.useEffect((()=>{Object.keys(b).length>0&&A.current.question&&(k.includes(A.current.question.type_info.question_type)||U.current)&&!M()&&X()}),[b]),n.useEffect((()=>{if(null!=b?.[Q.current?.name])if(W.current?.is_based_on_score){const e=Q.current?.type_info?.choices[b?.[Q.current?.name]]?.dependent_question_names,n=W.current?.question_names.find((n=>e?.includes(n))),t=f.find((e=>e.name===n));F(t)}else{const e=f.find((e=>e.name==W.current?.question_names[0]));F(e)}}),[b?.[Q.current?.name]]);const M=()=>j.current===h.length-1||"end"===A.current.branchOption,K=e=>{let n={};if(e.is_based_on_score){const t=Q.current?.type_info?.choices[b?.[Q.current?.name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=f.find((e=>e.name===o))}else n=f.find((n=>n.name===e.question_names[0]));A.current.question=n;Y.current.find((e=>e.question.name===n.name))?(O(B+1),P.current+=1):R([...Y.current,{...e,question:n}])},X=()=>{if(M())S(!0);else{if(A.current.nextBlock)j.current=h.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=b[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 S(!0);j.current=h.findIndex((e=>e.name===t.nextBlock))}else j.current+=1}else j.current+=1;A.current=h[j.current],K(h[j.current])}},Z=e=>{U.current=!0,delete b[e.name],C({...b})},J=(e,n,t)=>{if(D.current=!1,t){if(U.current=!0,null!=b[e.question.name]&&e.name!==I[I.length-1].name){const[t,o]=(e=>{const n=I.findIndex((n=>n.name===e.name)),t=I.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=b[n.question.name],e)),{});return j.current=h.findIndex((n=>n.name===e.name)),[t,o]})(e);C({...o,...null!=n&&{[e.question.name]:n}}),Y.current=t}else C({...b,...null!=n&&{[e.question.name]:n}});Q?.current?.name==e?.question?.name&&(H.current=n)}else C({...b,...null!=n&&{[e.question.name]:n}})};return A.current&&A.current.question?_?t.createElement("div",{className:`freemium-survey-components ${i?"widget-survey-components":""} ${u}-style ${p?"mobile-preview":""} ${r}-survey-style`,id:"freemium-survey"},t.createElement(q,{thankYouQuestion:$,preview:d,placeholders:a,npsValue:H.current})):t.createElement("div",{className:`freemium-survey-components ${i?"widget-survey-components":""} ${u}-style ${p?"mobile-preview":""} ${r}-survey-style`,id:"freemium-survey"},t.createElement(x,{totalSteps:h.length,completedSteps:j.current}),i&&"compact"===u&&document.querySelector(l)&&t.createElement(t.Fragment,null,o.createPortal(t.createElement("div",null,t.createElement(N,{currentBlockIndex:j,currentBlockIndexOfBlocksWithQns:P,blocksWithQns:I,blocks:h,setHorizontalScrollUnits:O,preventQuestionAnimation:D})),document.querySelector(l))),t.createElement("div",{style:i||"card"===r?{transform:`translateX(calc(-${B} * 100%))`,height:`${G.current[j.current]}px`,transition:D.current||I?.length<=1?"none":`all ${E}ms ease-out 0ms`}:{},className:"questions"},I.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:V,className:"question-container "+(!i&&"card"!==r||P.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:w(e.question.text,a,H.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!i&&"standard"===r,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(g,{question:e.question,formValues:b,autoFocusInput:P.current===n,onChangeHandler:n=>{U.current=!1,j.current=h.findIndex((n=>n.name===e.name)),A.current=e,J(e,n,k.includes(e.question.type_info.question_type)&&!M())}}),t.createElement("button",{disabled:!i&&"standard"===r,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),"standard"===r||i?t.createElement(z,{question:e.question,blockIndex:n,widget:i,widgetStyle:u,surveyStyle:r,formValues:b,blocksWithQns:I,blocks:h,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:P,currentBlockIndexOfBlocks:j,currentEditingBlock:A,isSubmitting:T,isValuesCommitted:U,isCurrentBlockFinal:M,setHorizontalScrollUnits:O,handleFormValues:J,skipBlock:Z,setIsSubmitting:L,onSubmit:s,setIsSurveyCompleted:S,preventQuestionAnimation:D,preview:d}):t.createElement(t.Fragment,null,n===P.current&&o.createPortal(t.createElement(t.Fragment,null,t.createElement(z,{widget:i,widgetStyle:u,surveyStyle:r,formValues:b,blocksWithQns:I,blocks:h,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:P,currentBlockIndexOfBlocks:j,currentEditingBlock:A,isSubmitting:T,isValuesCommitted:U,isCurrentBlockFinal:M,setHorizontalScrollUnits:O,handleFormValues:J,skipBlock:Z,setIsSubmitting:L,onSubmit:s,setIsSurveyCompleted:S,preventQuestionAnimation:D})),document.getElementById("freemium-survey")??document.body))))),!i&&"card"!==r&&M()&&t.createElement("div",{className:"submit"},t.createElement(y,{disabled:A.current.question.required&&void 0===b[A.current.question.name]||T,onClick:()=>{L(!0),s(b,(()=>{d||$?.type_info.meta?.skipThankYouPage&&(window.location.href=$?.type_info.meta?.redirectUrl),$?.type_info.meta?.skipThankYouPage||S(!0)}))}},T?"Submitting Survey":"Submit Survey")))):null};exports.ACTIVE_FOCUS_LOCK_GROUP="active-focus-lock-1",exports.AUTO_REDIRECT_DELAY=1e4,exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=y,exports.CheckboxGroup=m,exports.Input=l,exports.NPS=a,exports.ProgressBar=x,exports.Radio=v,exports.RadioGroup=h,exports.Survey=e=>{const{survey:o}=e,r=n.useMemo((()=>{const e=JSON.parse(JSON.stringify(o)),n=[],{question_details:{questions:t}}=e;return t.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}}}),[o]);return t.createElement(S,Object.assign({},e,{survey:r}))},exports.TRANSITION_DELAY=E,exports.TextArea=d;
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),o=e(require("react-dom"));function r(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}r(".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, color 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: #E43E3D;\n color: #fff;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1), .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2) {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3), .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4) {\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 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 a=e=>{const{type_info:{linear_scale:{button_style:o="highlighted",button_shape:r="rounded"}={},score_presets:{start:a="Very unlikely",end:i="Very likely"}={},validation:{min:s},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===s?1:0)},((e,n)=>n+s)));return t.createElement("div",{className:"nps-container","data-test-input":"nps"},t.createElement("div",{className:`nps-scale ${r} ${o}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text",role:"note"},`${s} - ${a}`),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))},i=(e,n)=>(e.defaultProps=n,e);r('.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 .end-max-length {\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 s={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},c=n.forwardRef(((e,o)=>{const r=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{r.current?.focus()}),C+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:a,style:i,className:s,showCount:c,isErrored:u,startLabel:l,isRequired:d,errorText:p,endLabel:m,maxLength:f=300,onChange:x,autoFocusInput:v,...y}=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":""}${s||""}`},t.createElement("input",Object.assign({},y,{type:"text",autoComplete:"off",ref:r,style:a,onChange:e=>{e.target.value?.length>=f||x?.(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))})),u=n.forwardRef(((e,o)=>{const r=n.useRef(null);n.useEffect((()=>{e.autoFocusInput&&setTimeout((()=>{r.current?.focus()}),C+e.autoFocusDelay)}),[e.autoFocusInput]);const{inputStyle:a,style:i,className:s,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 ${s||""}`},t.createElement("textarea",Object.assign({},f,{autoComplete:"off",ref:r,style:a,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)))})),l=i(c,s),d=i(u,s);r('.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 p=()=>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"})),m=({values:e=[],options:o,autoFocusGroup:r,autoFocusDelay:a,onChangeHandler:i,othersOption:s,othersRequired:c})=>{const u=(()=>{let n=-1;return e.map(((e,t)=>{const r=o.find((n=>n.value===e));return r||(n=t),r})),n})(),[d,p]=n.useState(!1),m=n.useRef(null);return n.useEffect((()=>{r&&setTimeout((()=>{m.current?.focus()}),C+a)}),[r]),t.createElement("div",{className:"checkbox-group"},t.createElement("button",{ref:m,className:"autofocus-button","aria-hidden":!0}),o?.map(((n,o)=>t.createElement(f,{key:n.id,checked:e?.includes(n.value),name:n.value,id:n.id,onChange:(t,o)=>{if(o)i([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),i([...e])}}},n.value))),s&&t.createElement(f,{key:"others",checked:d,name:"others",id:"others",onChange:(n,t)=>{p(t),t?c&&i([...e,""]):(e.splice(u,1),i(e))}},"Others"),d&&t.createElement(t.Fragment,null,t.createElement(l,{placeholder:"Enter your comment",value:e[u],onChange:n=>{-1!==u?(""!==n.target.value||c?e[u]=n.target.value:(c&&i([...e,""]),e.splice(u,1)),i(e)):i(e.concat(n.target.value))},autoFocusDelay:10,label:""})))},f=i((e=>{const o=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),C+20)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:o,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(p,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});r('.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 x=({name:e,options:o,value:r,autoFocusGroup:a,autoFocusDelay:i,onChangeHandler:s,othersOption:c,othersRequired:u})=>{const[d,p]=n.useState(""),[m,f]=n.useState(""),x=n.useRef(null);return n.useEffect((()=>{a&&setTimeout((()=>{x.current?.focus()}),C+i)}),[a]),n.useEffect((()=>{r||(f(""),p(""))}),[r]),n.useEffect((()=>{m&&o.find((e=>e.value===m))&&s(m)}),[m]),t.createElement("div",{className:"radio-group",role:"radiogroup"},t.createElement("button",{ref:x,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),o?.map(((n,o)=>t.createElement(v,{key:n.value,value:n.value,name:e,onChange:e=>{f(e.currentTarget.value)},checked:m===n.value},n.value))),c&&t.createElement(v,{key:"others",value:"others",name:e,onChange:e=>{f("others")},checked:"others"===m},"Others"),"others"===m&&t.createElement(t.Fragment,null,t.createElement(l,{value:d,onChange:e=>p(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),d!==r&&t.createElement(b,{inline:!0,disabled:u&&0===d.length,onClick:()=>s(d)},"Next")))},v=i((e=>{const o=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),C+20)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:o,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});r(".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 y=e=>{const{totalSteps:n,completedSteps:o}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(o>0?100/n:0)+"%",transform:`scaleX(${o})`}}))};r(".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: 500;\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 h=()=>t.createElement(t.Fragment,null,"..."),b=e=>{const{inline:n=!1,children:o,disabled:r,className:a="",htmlType:i,type:s="primary",onClick:c,size:u,overrideStyleClassName:l="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:r,className:`action-button ${a} ${l}`,type:i,onClick:c},p),d?t.createElement(h,null):o)},g=()=>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"})),w=()=>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"})),k=({question:e,formValues:n,onChangeHandler:o,autoFocus:r,autoFocusDelay:i})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(a,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"MULTI_SELECT":return t.createElement(m,{autoFocusGroup:r,values:n[e.name],options:e.type_info.choices,onChangeHandler:o,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired,autoFocusDelay:i});case"RADIO":case"DROPDOWN":return t.createElement(x,{autoFocusGroup:r,autoFocusDelay:i,name:e.name,onChangeHandler:o,options:e.type_info.choices,value:n[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(l,{autoFocusInput:r,autoFocusDelay:i,label:"",isRequired:e.is_required,value:n[e.name]||"",placeholder:e.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),t.createElement(d,{autoFocusInput:r,autoFocusDelay:i,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(d,{autoFocusInput:r,autoFocusDelay:i,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=(e,n,t)=>{if(e){let o={"{{nps.score}}":t};n&&(o={...o,...n});const r=new RegExp(Object.keys(o).join("|"),"gi");e=e.replace(r,(function(e){return o[e.toLowerCase()]}))}return e};r(":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-step-navigation {\n padding: 0 2px;\n box-shadow: 0px 0px 6px #eee;\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 #d9d9d9;\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 .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 .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components .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 .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@-webkit-keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.freemium-survey-components .question-footer {\n display: flex;\n justify-content: flex-end;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n font-weight: 400;\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}\n.freemium-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n}\n.freemium-survey-components .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 .submit {\n max-width: 700px;\n margin: 0 auto;\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 .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 .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components .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 .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components .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 .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components .message-container:empty {\n display: none;\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,\ndiv.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}\ndiv.widget-survey-components .questions,\ndiv.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 560px;\n max-height: var(--compact-widget-max-height);\n}\ndiv.widget-survey-components .question-text,\ndiv.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock,\ndiv.card-survey-style .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container,\ndiv.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: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer,\ndiv.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit,\ndiv.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer,\ndiv.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices,\ndiv.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group,\ndiv.card-survey-style .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group,\ndiv.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: 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 q=["RANGE","NPS","RADIO","DROPDOWN"],C=200,_=({thankYouQuestion:e,preview:o,placeholders:r,npsValue:a})=>(n.useEffect((()=>{o||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(e.text,r,a)}}),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)))),N=({currentBlockIndex:e,currentBlockIndexOfBlocksWithQns:n,blocksWithQns:o,blocks:r,setHorizontalScrollUnits:a,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=r.findIndex((e=>e.name===o[n.current].name)),i.current=!1,a(n.current)}},t.createElement(w,null)),t.createElement("button",{className:"navigation-button",disabled:n.current>=o.length-1,onClick:()=>{i.current=!1,n.current=Math.min(n.current+1,o.length-1),e.current=r.findIndex((e=>e.name===o[n.current].name)),a(n.current)}},t.createElement(g,null))),z=({widget:e,widgetStyle:n,surveyStyle:o,formValues:r,blocksWithQns:a,blocks:i,thankYouQuestion:s,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:u,currentEditingBlock:l,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:m,setHorizontalScrollUnits:f,handleFormValues:x,skipBlock:v,setIsSubmitting:y,onSubmit:h,setIsSurveyCompleted:g,preventQuestionAnimation:w,preview:k,closePreview:E,...C})=>{const _=C.blockIndex??c.current,z=C.question??a[_].question,S=()=>z.name===l.current.question.name&&!q.includes(z.type_info.question_type)&&!m(),R=()=>"RANGE"!==z.type_info.question_type&&!z.required&&z.name===l.current.question.name&&!m(),I=()=>"DROPDOWN"===z.type_info.question_type&&z.name!==l.current.question.name&&!z.required&&null!=r[z.name],B=()=>m()&&(e||"standard"!==o)&&z.name===l.current.question.name,O="MULTI_SELECT"===l.current.question.type_info.question_type&&r[l.current.question.name]?.includes("");return t.createElement("div",{className:"question-footer"},!(!e&&"standard"===o||0===_&&!r[z.name]||"compact"===n)&&t.createElement(N,{currentBlockIndex:u,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:a,blocks:i,setHorizontalScrollUnits:f,preventQuestionAnimation:w}),(S()||I()||R()||B())&&t.createElement("div",{className:"action-buttons"},S()&&t.createElement(b,{onClick:()=>{x(a[_],null,!0)},disabled:l.current.question.required&&(!r[l.current.question.name]||Array.isArray(r[l.current.question.name])&&0===r[l.current.question.name].length)||l.current.question.type_info.meta?.othersRequired&&O,className:"next-button"},"Next"),R()&&t.createElement("button",{className:"skip-button",onClick:()=>v(z)},"Skip"),I()&&t.createElement("button",{className:"skip-button",onClick:()=>{l.current=a[_],u.current=i.findIndex((e=>e.name===a[_].name)),v(z)}},"Clear selection"),B()&&t.createElement("div",{className:"submit"},t.createElement(b,{disabled:(l.current.question.required||l.current.question.type_info.pivot_question)&&(null==r[l.current.question.name]||0===r[l.current.question.name]?.length)||l.current.question.type_info.meta?.othersRequired&&O||d,onClick:()=>{y(!0),h(r,(()=>{s?.type_info.meta?.skipThankYouPage?k?setTimeout((()=>{E?.()}),300):window.location.href=s?.type_info.meta?.redirectUrl:g(!0)}))}},d?"Submitting":"Submit Survey"))))},S=({survey:e,surveyStyle:r="standard",placeholders:a,onSubmit:i,widget:s,npsValue:c,widgetStyle:u,widgetNavigatorQuerySelector:l,preview:d,mobilePreview:p,closePreview:m})=>{const f=e.question_details?.questions||[],x=e.meta?.blocks||[],[v,h]=n.useState(null),[g,w]=n.useState({}),[S,R]=n.useState(!1),[I,B]=n.useState([]),[O,F]=n.useState(0),[T,L]=n.useState(!1),[$,A]=n.useState(null),D=n.useRef(null),Q=n.useRef(null),H=n.useRef(-1),P=n.useRef(null),U=n.useRef(0),V=n.useRef(0),j=n.useRef(!1),W=n.useRef([]),G=t.useRef(!!c&&"card"===r),M=n.useRef(null),Y=n.useRef([]);n.useEffect((()=>{x&&(M.current=x.find((e=>"TY"===e.name)),h(x.filter((e=>"TY"!==e.name))))}),[x]),n.useEffect((()=>{if(v)if(Q.current=f.find((e=>e.type_info?.pivot_question))??f.find((e=>"RANGE"===e.type_info?.question_type))??f[0],null!=c){H.current=c;const e=f.find((e=>e.name===v[0].question_names[0]));D.current={...v[0],question:e},W.current=[...W.current,{...v[0],question:e}],B(W.current),w({Q_1:c})}else if(!D.current&&v.length>0)return D.current=v[0],void X(v[0])}),[v,c]),t.useEffect((()=>{I.length&&(W.current=I,V.current=I.length-1),s||"standard"!==r?(P.current&&(P.current.style.maxHeight="unset"),Y.current[U.current]=P.current?.scrollHeight||Y.current[U.current]||0,P.current&&(P.current.style.maxHeight="100%")):P.current?.scrollIntoView({block:"center",behavior:"smooth"}),F(I.length-1)}),[I]),n.useEffect((()=>{Object.keys(g).length>0&&D.current.question&&(q.includes(D.current.question.type_info.question_type)||j.current)&&!K()&&Z()}),[g]),n.useEffect((()=>{if(null!=g?.[Q.current?.name])if(M.current?.is_based_on_score){const e=Q.current?.type_info?.choices[g?.[Q.current?.name]]?.dependent_question_names,n=M.current?.question_names.find((n=>e?.includes(n))),t=f.find((e=>e.name===n));A(t)}else{const e=f.find((e=>e.name==M.current?.question_names[0]));A(e)}}),[g?.[Q.current?.name]]);const K=()=>U.current===v.length-1||"end"===D.current.branchOption,X=e=>{let n={};if(e.is_based_on_score){const t=Q.current?.type_info?.choices[g?.[Q.current?.name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=f.find((e=>e.name===o))}else n=f.find((n=>n.name===e.question_names[0]));D.current.question=n;W.current.find((e=>e.question.name===n.name))?(F(O+1),V.current+=1):B([...W.current,{...e,question:n}])},Z=()=>{if(K())R(!0);else{if(D.current.nextBlock)U.current=v.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=g[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 R(!0);U.current=v.findIndex((e=>e.name===t.nextBlock))}else U.current+=1}else U.current+=1;D.current=v[U.current],X(v[U.current])}},J=e=>{j.current=!0,delete g[e.name],w({...g})},ee=(e,n,t)=>{if(G.current=!1,t){if(j.current=!0,null!=g[e.question.name]&&e.name!==I[I.length-1].name){const[t,o]=(e=>{const n=I.findIndex((n=>n.name===e.name)),t=I.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=g[n.question.name],e)),{});return U.current=v.findIndex((n=>n.name===e.name)),[t,o]})(e);w({...o,...null!=n&&{[e.question.name]:n}}),W.current=t}else w({...g,...null!=n&&{[e.question.name]:n}});Q?.current?.name==e?.question?.name&&(H.current=n)}else w({...g,...null!=n&&{[e.question.name]:n}})};return D.current&&D.current.question?S?t.createElement("div",{className:`freemium-survey-components ${s?"widget-survey-components":""} ${u}-style ${p?"mobile-preview":""} ${r}-survey-style`,id:"freemium-survey"},t.createElement(_,{thankYouQuestion:$,preview:d,placeholders:a,npsValue:H.current})):t.createElement("div",{className:`freemium-survey-components ${s?"widget-survey-components":""} ${u}-style ${p?"mobile-preview":""} ${r}-survey-style`,id:"freemium-survey"},t.createElement(y,{totalSteps:v.length,completedSteps:U.current}),s&&"compact"===u&&document.querySelector(l)&&t.createElement(t.Fragment,null,o.createPortal(t.createElement("div",null,t.createElement(N,{currentBlockIndex:U,currentBlockIndexOfBlocksWithQns:V,blocksWithQns:I,blocks:v,setHorizontalScrollUnits:F,preventQuestionAnimation:G})),document.querySelector(l))),t.createElement("div",{style:s||"card"===r?{transform:`translateX(calc(-${O} * 100%))`,height:`${Y.current[U.current]}px`,transition:G.current||I?.length<=1?"none":`all ${C}ms ease-out 0ms`}:{},className:"questions"},I.map(((e,n)=>t.createElement("div",{key:e.question.name,ref:P,className:"question-container "+(!s&&"card"!==r||V.current===n?"":"hide-question-container")},t.createElement("div",{className:"question-text "+(0===n?"nps":""),dangerouslySetInnerHTML:{__html:E(e.question.text,a,H.current)},title:`question-${n}`,role:"heading","aria-level":1}),t.createElement("button",{disabled:!s&&"standard"===r,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),t.createElement(k,{question:e.question,formValues:g,autoFocus:V.current===n,autoFocusDelay:"standard"===r?350:20,onChangeHandler:n=>{j.current=!1,U.current=v.findIndex((n=>n.name===e.name)),D.current=e,ee(e,n,q.includes(e.question.type_info.question_type)&&!K())}}),t.createElement("button",{disabled:!s&&"standard"===r,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),"standard"===r||s?t.createElement(z,{question:e.question,blockIndex:n,widget:s,widgetStyle:u,surveyStyle:r,formValues:g,blocksWithQns:I,blocks:v,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:V,currentBlockIndexOfBlocks:U,currentEditingBlock:D,isSubmitting:T,isValuesCommitted:j,isCurrentBlockFinal:K,setHorizontalScrollUnits:F,handleFormValues:ee,skipBlock:J,setIsSubmitting:L,onSubmit:i,setIsSurveyCompleted:R,preventQuestionAnimation:G,preview:d,closePreview:m}):t.createElement(t.Fragment,null,n===V.current&&o.createPortal(t.createElement(t.Fragment,null,t.createElement(z,{widget:s,widgetStyle:u,surveyStyle:r,formValues:g,blocksWithQns:I,blocks:v,thankYouQuestion:$,currentBlockIndexOfBlocksWithQns:V,currentBlockIndexOfBlocks:U,currentEditingBlock:D,isSubmitting:T,isValuesCommitted:j,isCurrentBlockFinal:K,setHorizontalScrollUnits:F,handleFormValues:ee,skipBlock:J,setIsSubmitting:L,onSubmit:i,setIsSurveyCompleted:R,preventQuestionAnimation:G,closePreview:m,preview:d})),document.getElementById("freemium-survey")??document.body))))),!s&&"card"!==r&&K()&&t.createElement("div",{className:"submit"},t.createElement(b,{disabled:(D.current.question.required||D.current.question.type_info.pivot_question)&&(null==g[D.current.question.name]||0===g[D.current.question.name]?.length)||D.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===D.current.question.type_info.question_type&&g[D.current.question.name]?.includes("")||T,onClick:()=>{L(!0),i(g,(()=>{$?.type_info.meta?.skipThankYouPage?d?setTimeout((()=>{m?.()}),300):window.location.href=$?.type_info.meta?.redirectUrl:R(!0)}))}},T?"Submitting":"Submit Survey")))):null};exports.ACTIVE_FOCUS_LOCK_GROUP="active-focus-lock-1",exports.AUTO_REDIRECT_DELAY=1e4,exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=b,exports.CheckboxGroup=m,exports.Input=l,exports.NPS=a,exports.ProgressBar=y,exports.Radio=v,exports.RadioGroup=x,exports.Survey=e=>{const{survey:o}=e,r=n.useMemo((()=>{const e=JSON.parse(JSON.stringify(o)),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}}}),[o]);return t.createElement(S,Object.assign({},e,{survey:r}))},exports.TRANSITION_DURATION=C,exports.TextArea=d;
package/lib/index.esm.js CHANGED
@@ -1 +1 @@
1
- import e,{useRef as n,forwardRef as t,useEffect as o,useState as r,useMemo as a}from"react";import i from"react-dom";function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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: 52px;\n gap: 52px;\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 margin-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 .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}\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, color 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}\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 color: #000;\n background: var(--default-background-color);\n background: var(--background-color, var(--default-background-color));\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice.active,\n.freemium-survey-components .nps-container .nps-scale.standard .choice:focus,\n.freemium-survey-components .nps-container .nps-scale.standard .choice:hover {\n color: #fff;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(1).active {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(2).active {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(3).active {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(4).active {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(5).active {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(6).active {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(7).active {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(8).active {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(9).active {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(10).active {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11):hover, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11):focus, .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-child(11).active {\n background: #1ebf31;\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 c=t=>{const{type_info:{linear_scale:{button_style:o="highlighted",button_shape:r="rounded"}={},score_presets:{start:a="Very unlikely",end:i="Very likely"}={},validation:{min:s},footer_text:c}}=t,l=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},u=n(Array.from({length:10+(0===s?1:0)},((e,n)=>n+s)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${r} ${o}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text",role:"note"},`${s} - ${a}`),e.createElement("span",{className:"positive-text",role:"note"},`${u.current[u.current.length-1]} - ${i}`),e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},u.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 ${l(n)} ${t.npsValue===n&&"active"}`},n)))))),e.createElement("div",{className:"footer",role:"note"},c))},l=(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 .end-max-length {\n padding: 0 8px;\n font-size: 0.85rem;\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 u={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},d=t(((t,r)=>{const a=n(null);o((()=>{t.autoFocusInput&&setTimeout((()=>{a.current?.focus()}),N+350)}),[t.autoFocusInput]);const{inputStyle:i,style:s,className:c,showCount:l,isErrored:u,startLabel:d,isRequired:p,errorText:m,endLabel:f,maxLength:h,autoFocusInput:v,...x}=t;return e.createElement("div",{className:"input-container",style:s},t.label&&e.createElement("label",{className:"input-label "+(p?"required":"")},t.label),e.createElement("div",null,d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${u?"error":""}${c||""}`},e.createElement("input",Object.assign({type:"text",autoComplete:"off",ref:a,style:i},x)),l&&h>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${t.maxLength}`)),f&&e.createElement("div",{className:"end-label"},f)),u&&m&&e.createElement("span",{className:"input-error"},t.errorText))})),p=t(((t,r)=>{const a=n(null);o((()=>{t.autoFocusInput&&setTimeout((()=>{a.current?.focus()}),N+350)}),[t.autoFocusInput]);const{inputStyle:i,style:s,className:c,showCount:l,maxLength:u,isErrored:d,startLabel:p,isRequired:m,autoFocusInput:f,...h}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:s},t.label&&e.createElement("label",{className:"input-label "+(m?"required":"")},t.label),p&&e.createElement("div",{className:"start-label"},p),e.createElement("div",{className:`input-basic ${d?"error":""} ${c||""}`},e.createElement("textarea",Object.assign({autoComplete:"off",ref:a,style:i},h)),l&&u&&u>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${t.maxLength}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)),t.isErrored&&t.errorText&&e.createElement("span",{className:"input-error"},t.errorText))})),m=l(d,u),f=l(p,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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 h=()=>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"})),v=({values:t=[],options:a,autoFocusGroup:i,onChangeHandler:s,othersOption:c,othersRequired:l})=>{const u=(()=>{let e=-1;return t.map(((n,t)=>{const o=a.find((e=>e.value===n));return o||(e=t),o})),e})(),[d,p]=r(!1),f=n(null);return o((()=>{i&&setTimeout((()=>{f.current?.focus()}),N+350)}),[i]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:f,className:"autofocus-button","aria-hidden":!0}),a?.map(((n,o)=>e.createElement(x,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,o)=>{if(o)s([...t||[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),s([...t])}}},n.value))),c&&e.createElement(x,{key:"others",checked:d,name:"others",id:"others",onChange:(e,n)=>{p(n)}},"Others"),d&&e.createElement(e.Fragment,null,e.createElement(m,{placeholder:"Enter your comment",value:t[u],onChange:e=>{-1!==u?(t[u]=e.target.value,s(t)):s(t.concat(e.target.value))},label:""})))},x=l((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),N+20)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:r,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(h,null)," ")),e.createElement("div",null,t.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 b=({name:t,options:a,value:i,autoFocusGroup:s,onChangeHandler:c,othersOption:l,othersRequired:u})=>{const[d,p]=r(""),[f,h]=r(""),v=n(null);return o((()=>{s&&setTimeout((()=>{v.current?.focus()}),N+350)}),[s]),o((()=>{i||(h(""),p(""))}),[i]),o((()=>{f&&a.find((e=>e.value===f))&&c(f)}),[f]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:v,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),a?.map(((n,o)=>e.createElement(y,{key:n.value,value:n.value,name:t,onChange:e=>{h(e.currentTarget.value)},checked:f===n.value},n.value))),l&&e.createElement(y,{key:"others",value:"others",name:t,onChange:e=>{h("others")},checked:"others"===f},"Others"),"others"===f&&e.createElement(e.Fragment,null,e.createElement(m,{value:d,onChange:e=>p(e.target.value),placeholder:"Enter your comment",label:""}),d!==i&&e.createElement(E,{inline:!0,disabled:u&&0===d.length,onClick:()=>c(d)},"Next")))},y=l((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),N+20)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:r,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});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 g=n=>{const{totalSteps:t,completedSteps:o}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(o>0?100/t:0)+"%",transform:`scaleX(${o})`}}))};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: 500;\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 w=()=>e.createElement(e.Fragment,null,"..."),k={LARGE:"large",MINI:"mini",NORMAL:"normal"},E=n=>{const{inline:t=!1,children:o,disabled:r,className:a="",htmlType:i,type:s="primary",onClick:c,size:l,overrideStyleClassName:u="",loading:d=!1,...p}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:r,className:`action-button ${a} ${u}`,type:i,onClick:c},p),d?e.createElement(w,null):o)},q=({question:n,formValues:t,onChangeHandler:o,autoFocusInput:r})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(c,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(v,{autoFocusGroup:r,values:t[n.name],options:n.type_info.choices,onChangeHandler:o,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired});case"RADIO":case"DROPDOWN":return e.createElement(b,{autoFocusGroup:r,name:n.name,onChangeHandler:o,options:n.type_info.choices,value:t[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(m,{autoFocusInput:r,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]||"",placeholder:n.type_info?.meta?.placeholder??"",onChange:e=>o(e.target.value)}),e.createElement(f,{autoFocusInput:r,label:"",maxLength:300,showCount:!0,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(f,{autoFocusInput:r,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}},C=(e,n,t)=>{if(e){let o={"{{nps.score}}":t};n&&(o={...o,...n});const r=new RegExp(Object.keys(o).join("|"),"gi");e=e.replace(r,(function(e){return o[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-step-navigation {\n padding: 0 2px;\n box-shadow: 0px 0px 6px #eee;\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 #d9d9d9;\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 .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 28px 20px 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 .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components .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 .autofocus-button {\n border: none;\n width: 0;\n height: 0;\n opacity: 0;\n margin-top: -12px;\n margin-left: -12px;\n}\n@-webkit-keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.freemium-survey-components .question-footer {\n display: flex;\n justify-content: flex-end;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n font-weight: 400;\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}\n.freemium-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n}\n.freemium-survey-components .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 .submit {\n max-width: 700px;\n margin: 0 auto;\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 .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 .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components .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 .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components .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 .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components .message-container:empty {\n display: none;\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,\ndiv.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}\ndiv.widget-survey-components .questions,\ndiv.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 560px;\n max-height: var(--compact-widget-max-height);\n}\ndiv.widget-survey-components .question-text,\ndiv.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock,\ndiv.card-survey-style .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container,\ndiv.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: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer,\ndiv.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit,\ndiv.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer,\ndiv.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices,\ndiv.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group,\ndiv.card-survey-style .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group,\ndiv.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: 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 _=["RANGE","NPS","RADIO","DROPDOWN"],N=200,z=1e4,S="active-focus-lock-1",I=({thankYouQuestion:n,preview:t,placeholders:r,npsValue:a})=>(o((()=>{t||n.type_info.meta?.redirectUrl&&setTimeout((()=>{window.location.href=n.type_info.meta?.redirectUrl}),1e4)}),[]),e.createElement("div",{className:"question-container thankyou"},e.createElement("div",{className:"heading"},"Thank you!"),e.createElement("div",{className:"text",dangerouslySetInnerHTML:{__html:C(n.text,r,a)}}),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 10 seconds.",e.createElement("br",null)),e.createElement("a",{className:"link",href:n.type_info.meta?.redirectUrl},n?.type_info.meta?.redirectUrl)))),B=()=>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"})),O=()=>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"})),$=({currentBlockIndex:n,currentBlockIndexOfBlocksWithQns:t,blocksWithQns:o,blocks:r,setHorizontalScrollUnits:a,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=r.findIndex((e=>e.name===o[t.current].name)),i.current=!1,a(t.current)}},e.createElement(O,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=o.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,o.length-1),n.current=r.findIndex((e=>e.name===o[t.current].name)),a(t.current)}},e.createElement(B,null))),L=({widget:n,widgetStyle:t,surveyStyle:o,formValues:r,blocksWithQns:a,blocks:i,thankYouQuestion:s,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:u,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:m,setHorizontalScrollUnits:f,handleFormValues:h,skipBlock:v,setIsSubmitting:x,onSubmit:b,setIsSurveyCompleted:y,preventQuestionAnimation:g,preview:w,...k})=>{const q=k.blockIndex??c.current,C=k.question??a[q].question,N=()=>C.name===u.current.question.name&&!_.includes(C.type_info.question_type)&&!m(),z=()=>"RANGE"!==C.type_info.question_type&&!C.required&&C.name===u.current.question.name&&!m(),S=()=>"DROPDOWN"===C.type_info.question_type&&C.name!==u.current.question.name&&!C.required&&null!=r[C.name],I=()=>m()&&(n||"standard"!==o)&&C.name===u.current.question.name;return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===o||0===q&&!r[C.name]||"compact"===t)&&e.createElement($,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:a,blocks:i,setHorizontalScrollUnits:f,preventQuestionAnimation:g}),(N()||S()||z()||I())&&e.createElement("div",{className:"action-buttons"},N()&&e.createElement(E,{onClick:()=>{h(a[q],null,!0)},disabled:!r[u.current.question.name]||Array.isArray(r[u.current.question.name])&&0===r[u.current.question.name].length,className:"next-button"},"Next"),z()&&e.createElement("button",{className:"skip-button",onClick:()=>v(C)},"Skip"),S()&&e.createElement("button",{className:"skip-button",onClick:()=>{u.current=a[q],l.current=i.findIndex((e=>e.name===a[q].name)),v(C)}},"Clear selection"),I()&&e.createElement("div",{className:"submit"},e.createElement(E,{disabled:(u.current.question.required||u.current.question.type_info.pivot_question)&&void 0===r[u.current.question.name]||d,onClick:()=>{x(!0),b(r,(()=>{s?.type_info.meta?.skipThankYouPage&&(window.location.href=s?.type_info.meta?.redirectUrl),s?.type_info.meta?.skipThankYouPage||y(!0)}))}},d?"Submitting":"Submit Survey"))))},T=({survey:t,surveyStyle:a="standard",placeholders:s,onSubmit:c,widget:l,npsValue:u,widgetStyle:d,widgetNavigatorQuerySelector:p,preview:m,mobilePreview:f})=>{const{meta:{blocks:h},question_details:{questions:v}}=t,[x,b]=r(null),[y,w]=r({}),[k,z]=r(!1),[S,B]=r([]),[O,T]=r(0),[F,R]=r(!1),[Q,H]=r(null),A=n(null),V=n(null),j=n(-1),P=n(null),U=n(0),W=n(0),Y=n(!1),D=n([]),G=e.useRef(!!u&&"card"===a),M=n(null),X=n([]);o((()=>{h&&(M.current=h.find((e=>"TY"===e.name)),b(h.filter((e=>"TY"!==e.name))))}),[h]),o((()=>{if(x)if(V.current=v.find((e=>e.pivot_question))??v.find((e=>"RANGE"===e.type_info.question_type))??v[0],null!=u){j.current=u;const e=v.find((e=>e.name===x[0].question_names[0]));A.current={...x[0],question:e},D.current=[...D.current,{...x[0],question:e}],B(D.current),w({Q_1:u})}else if(!A.current&&x.length>0)return A.current=x[0],void Z(x[0])}),[x,u]),e.useEffect((()=>{S.length&&(D.current=S,W.current=S.length-1),l||"standard"!==a?(P.current&&(P.current.style.maxHeight="unset"),X.current[U.current]=P.current?.scrollHeight||X.current[U.current]||0,P.current&&(P.current.style.maxHeight="100%")):P.current?.scrollIntoView({block:"center",behavior:"smooth"}),T(S.length-1)}),[S]),o((()=>{Object.keys(y).length>0&&A.current.question&&(_.includes(A.current.question.type_info.question_type)||Y.current)&&!K()&&J()}),[y]),o((()=>{if(null!=y?.[V.current?.name])if(M.current?.is_based_on_score){const e=V.current?.type_info?.choices[y?.[V.current?.name]]?.dependent_question_names,n=M.current?.question_names.find((n=>e?.includes(n))),t=v.find((e=>e.name===n));H(t)}else{const e=v.find((e=>e.name==M.current?.question_names[0]));H(e)}}),[y?.[V.current?.name]]);const K=()=>U.current===x.length-1||"end"===A.current.branchOption,Z=e=>{let n={};if(e.is_based_on_score){const t=V.current?.type_info?.choices[y?.[V.current?.name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=v.find((e=>e.name===o))}else n=v.find((n=>n.name===e.question_names[0]));A.current.question=n;D.current.find((e=>e.question.name===n.name))?(T(O+1),W.current+=1):B([...D.current,{...e,question:n}])},J=()=>{if(K())z(!0);else{if(A.current.nextBlock)U.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=y[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);U.current=x.findIndex((e=>e.name===t.nextBlock))}else U.current+=1}else U.current+=1;A.current=x[U.current],Z(x[U.current])}},ee=e=>{Y.current=!0,delete y[e.name],w({...y})},ne=(e,n,t)=>{if(G.current=!1,t){if(Y.current=!0,null!=y[e.question.name]&&e.name!==S[S.length-1].name){const[t,o]=(e=>{const n=S.findIndex((n=>n.name===e.name)),t=S.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=y[n.question.name],e)),{});return U.current=x.findIndex((n=>n.name===e.name)),[t,o]})(e);w({...o,...null!=n&&{[e.question.name]:n}}),D.current=t}else w({...y,...null!=n&&{[e.question.name]:n}});V?.current?.name==e?.question?.name&&(j.current=n)}else w({...y,...null!=n&&{[e.question.name]:n}})};return A.current&&A.current.question?k?e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${a}-survey-style`,id:"freemium-survey"},e.createElement(I,{thankYouQuestion:Q,preview:m,placeholders:s,npsValue:j.current})):e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${a}-survey-style`,id:"freemium-survey"},e.createElement(g,{totalSteps:x.length,completedSteps:U.current}),l&&"compact"===d&&document.querySelector(p)&&e.createElement(e.Fragment,null,i.createPortal(e.createElement("div",null,e.createElement($,{currentBlockIndex:U,currentBlockIndexOfBlocksWithQns:W,blocksWithQns:S,blocks:x,setHorizontalScrollUnits:T,preventQuestionAnimation:G})),document.querySelector(p))),e.createElement("div",{style:l||"card"===a?{transform:`translateX(calc(-${O} * 100%))`,height:`${X.current[U.current]}px`,transition:G.current||S?.length<=1?"none":`all ${N}ms ease-out 0ms`}:{},className:"questions"},S.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:P,className:"question-container "+(!l&&"card"!==a||W.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:C(n.question.text,s,j.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!l&&"standard"===a,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(q,{question:n.question,formValues:y,autoFocusInput:W.current===t,onChangeHandler:e=>{Y.current=!1,U.current=x.findIndex((e=>e.name===n.name)),A.current=n,ne(n,e,_.includes(n.question.type_info.question_type)&&!K())}}),e.createElement("button",{disabled:!l&&"standard"===a,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),"standard"===a||l?e.createElement(L,{question:n.question,blockIndex:t,widget:l,widgetStyle:d,surveyStyle:a,formValues:y,blocksWithQns:S,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:W,currentBlockIndexOfBlocks:U,currentEditingBlock:A,isSubmitting:F,isValuesCommitted:Y,isCurrentBlockFinal:K,setHorizontalScrollUnits:T,handleFormValues:ne,skipBlock:ee,setIsSubmitting:R,onSubmit:c,setIsSurveyCompleted:z,preventQuestionAnimation:G,preview:m}):e.createElement(e.Fragment,null,t===W.current&&i.createPortal(e.createElement(e.Fragment,null,e.createElement(L,{widget:l,widgetStyle:d,surveyStyle:a,formValues:y,blocksWithQns:S,blocks:x,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:W,currentBlockIndexOfBlocks:U,currentEditingBlock:A,isSubmitting:F,isValuesCommitted:Y,isCurrentBlockFinal:K,setHorizontalScrollUnits:T,handleFormValues:ne,skipBlock:ee,setIsSubmitting:R,onSubmit:c,setIsSurveyCompleted:z,preventQuestionAnimation:G})),document.getElementById("freemium-survey")??document.body))))),!l&&"card"!==a&&K()&&e.createElement("div",{className:"submit"},e.createElement(E,{disabled:A.current.question.required&&void 0===y[A.current.question.name]||F,onClick:()=>{R(!0),c(y,(()=>{m||Q?.type_info.meta?.skipThankYouPage&&(window.location.href=Q?.type_info.meta?.redirectUrl),Q?.type_info.meta?.skipThankYouPage||z(!0)}))}},F?"Submitting Survey":"Submit Survey")))):null},F=n=>{const{survey:t}=n,o=a((()=>{const e=JSON.parse(JSON.stringify(t)),n=[],{question_details:{questions:o}}=e;return o.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(T,Object.assign({},n,{survey:o}))};export{S as ACTIVE_FOCUS_LOCK_GROUP,z as AUTO_REDIRECT_DELAY,k as BUTTON_SIZE_VARIANTS,E as Button,v as CheckboxGroup,m as Input,c as NPS,g as ProgressBar,y as Radio,b as RadioGroup,F as Survey,N as TRANSITION_DELAY,f as TextArea};
1
+ import e,{useRef as n,forwardRef as t,useEffect as o,useState as r,useMemo as a}from"react";import i from"react-dom";function s(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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, color 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: #E43E3D;\n color: #fff;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(1), .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(2) {\n background: #00AF50;\n}\n.freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(3), .freemium-survey-components .nps-container .nps-scale.standard .choice:nth-last-child(4) {\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 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 c=t=>{const{type_info:{linear_scale:{button_style:o="highlighted",button_shape:r="rounded"}={},score_presets:{start:a="Very unlikely",end:i="Very likely"}={},validation:{min:s},footer_text:c}}=t,l=e=>{switch(e){case e<=6:return"detractor";case e<=8:return"passive";default:return"promoter"}},u=n(Array.from({length:10+(0===s?1:0)},((e,n)=>n+s)));return e.createElement("div",{className:"nps-container","data-test-input":"nps"},e.createElement("div",{className:`nps-scale ${r} ${o}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text",role:"note"},`${s} - ${a}`),e.createElement("span",{className:"positive-text",role:"note"},`${u.current[u.current.length-1]} - ${i}`),e.createElement("div",{className:"choices",role:"radiogroup","aria-required":!0},u.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 ${l(n)} ${t.npsValue===n&&"active"}`},n)))))),e.createElement("div",{className:"footer",role:"note"},c))},l=(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 .end-max-length {\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 u={isRequired:!1,showCount:!0,isErrored:!1,inline:!1,spellCheck:!1,autoFocusInput:!0},d=t(((t,r)=>{const a=n(null);o((()=>{t.autoFocusInput&&setTimeout((()=>{a.current?.focus()}),S+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:s,className:c,showCount:l,isErrored:u,startLabel:d,isRequired:p,errorText:m,endLabel:f,maxLength:v=300,onChange:x,autoFocusInput:y,...h}=t;return e.createElement("div",{className:"input-container",style:s},t.label&&e.createElement("label",{className:"input-label "+(p?"required":"")},t.label),e.createElement("div",null,d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${u?"error":""}${c||""}`},e.createElement("input",Object.assign({},h,{type:"text",autoComplete:"off",ref:a,style:i,onChange:e=>{e.target.value?.length>=v||x?.(e)}})),l&&v>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${v}`)),f&&e.createElement("div",{className:"end-label"},f)),u&&m&&e.createElement("span",{className:"input-error"},t.errorText))})),p=t(((t,r)=>{const a=n(null);o((()=>{t.autoFocusInput&&setTimeout((()=>{a.current?.focus()}),S+t.autoFocusDelay)}),[t.autoFocusInput]);const{inputStyle:i,style:s,className:c,showCount:l,maxLength:u=1500,startLabel:d,isRequired:p,autoFocusInput:m,onChange:f,...v}=t;return e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:s},t.label&&e.createElement("label",{className:"input-label "+(p?"required":"")},t.label),d&&e.createElement("div",{className:"start-label"},d),e.createElement("div",{className:`input-basic ${c||""}`},e.createElement("textarea",Object.assign({},v,{autoComplete:"off",ref:a,style:i,onChange:e=>{e.target.value?.length>=u||f?.(e)}})),l&&u&&u>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${u}`)),t.endLabel&&e.createElement("div",{className:"end-label"},t.endLabel)))})),m=l(d,u),f=l(p,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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 v=()=>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"})),x=({values:t=[],options:a,autoFocusGroup:i,autoFocusDelay:s,onChangeHandler:c,othersOption:l,othersRequired:u})=>{const d=(()=>{let e=-1;return t.map(((n,t)=>{const o=a.find((e=>e.value===n));return o||(e=t),o})),e})(),[p,f]=r(!1),v=n(null);return o((()=>{i&&setTimeout((()=>{v.current?.focus()}),S+s)}),[i]),e.createElement("div",{className:"checkbox-group"},e.createElement("button",{ref:v,className:"autofocus-button","aria-hidden":!0}),a?.map(((n,o)=>e.createElement(y,{key:n.id,checked:t?.includes(n.value),name:n.value,id:n.id,onChange:(e,o)=>{if(o)c([...t||[],n.value]);else{const e=t.indexOf(n.value);e>-1&&t.splice(e,1),c([...t])}}},n.value))),l&&e.createElement(y,{key:"others",checked:p,name:"others",id:"others",onChange:(e,n)=>{f(n),n?u&&c([...t,""]):(t.splice(d,1),c(t))}},"Others"),p&&e.createElement(e.Fragment,null,e.createElement(m,{placeholder:"Enter your comment",value:t[d],onChange:e=>{-1!==d?(""!==e.target.value||u?t[d]=e.target.value:(u&&c([...t,""]),t.splice(d,1)),c(t)):c(t.concat(e.target.value))},autoFocusDelay:10,label:""})))},y=l((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),S+20)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:r,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(v,null)," ")),e.createElement("div",null,t.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 box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);\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 h=({name:t,options:a,value:i,autoFocusGroup:s,autoFocusDelay:c,onChangeHandler:l,othersOption:u,othersRequired:d})=>{const[p,f]=r(""),[v,x]=r(""),y=n(null);return o((()=>{s&&setTimeout((()=>{y.current?.focus()}),S+c)}),[s]),o((()=>{i||(x(""),f(""))}),[i]),o((()=>{v&&a.find((e=>e.value===v))&&l(v)}),[v]),e.createElement("div",{className:"radio-group",role:"radiogroup"},e.createElement("button",{ref:y,className:"autofocus-button","aria-hidden":!0,tabIndex:-1}),a?.map(((n,o)=>e.createElement(g,{key:n.value,value:n.value,name:t,onChange:e=>{x(e.currentTarget.value)},checked:v===n.value},n.value))),u&&e.createElement(g,{key:"others",value:"others",name:t,onChange:e=>{x("others")},checked:"others"===v},"Others"),"others"===v&&e.createElement(e.Fragment,null,e.createElement(m,{value:p,onChange:e=>f(e.target.value),placeholder:"Enter your comment",label:"",autoFocusDelay:10}),p!==i&&e.createElement(q,{inline:!0,disabled:d&&0===p.length,onClick:()=>l(p)},"Next")))},g=l((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),S+20)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:r,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});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 b=n=>{const{totalSteps:t,completedSteps:o}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(o>0?100/t:0)+"%",transform:`scaleX(${o})`}}))};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: 500;\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 w=()=>e.createElement(e.Fragment,null,"..."),k={LARGE:"large",MINI:"mini",NORMAL:"normal"},q=n=>{const{inline:t=!1,children:o,disabled:r,className:a="",htmlType:i,type:s="primary",onClick:c,size:l,overrideStyleClassName:u="",loading:d=!1,...p}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:r,className:`action-button ${a} ${u}`,type:i,onClick:c},p),d?e.createElement(w,null):o)},E=()=>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"})),C=()=>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"})),_=({question:n,formValues:t,onChangeHandler:o,autoFocus:r,autoFocusDelay:a})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(c,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":case"MULTI_SELECT":return e.createElement(x,{autoFocusGroup:r,values:t[n.name],options:n.type_info.choices,onChangeHandler:o,othersOption:n.type_info.meta?.othersOption,othersRequired:n.type_info.meta?.othersRequired,autoFocusDelay:a});case"RADIO":case"DROPDOWN":return e.createElement(h,{autoFocusGroup:r,autoFocusDelay:a,name:n.name,onChangeHandler:o,options:n.type_info.choices,value:t[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(m,{autoFocusInput:r,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(f,{autoFocusInput:r,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(f,{autoFocusInput:r,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}},N=(e,n,t)=>{if(e){let o={"{{nps.score}}":t};n&&(o={...o,...n});const r=new RegExp(Object.keys(o).join("|"),"gi");e=e.replace(r,(function(e){return o[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-step-navigation {\n padding: 0 2px;\n box-shadow: 0px 0px 6px #eee;\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 #d9d9d9;\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 .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 .hide-question-container {\n opacity: 0;\n}\n.freemium-survey-components .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 .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@-webkit-keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes opac {\n 0%, 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.freemium-survey-components .question-footer {\n display: flex;\n justify-content: flex-end;\n grid-gap: 40px;\n gap: 40px;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .question-footer:empty {\n display: none;\n}\n.freemium-survey-components .action-buttons {\n display: flex;\n grid-gap: 20px;\n gap: 20px;\n flex-direction: row-reverse;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n font-weight: 400;\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}\n.freemium-survey-components .skip-button:hover {\n background-color: #f3f3f3;\n}\n.freemium-survey-components .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 .submit {\n max-width: 700px;\n margin: 0 auto;\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 .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 .thankyou .heading {\n font-weight: 600;\n font-size: 28px;\n}\n.freemium-survey-components .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 .thankyou .redirection-text {\n color: #929292;\n margin-bottom: 12px;\n font-weight: 300;\n}\n.freemium-survey-components .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 .responsive-text-field {\n width: 100%;\n}\n.freemium-survey-components .responsive-text-field .textarea-container {\n display: none;\n}\n.freemium-survey-components .message-container:empty {\n display: none;\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,\ndiv.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}\ndiv.widget-survey-components .questions,\ndiv.card-survey-style .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n position: relative;\n max-height: 560px;\n max-height: var(--compact-widget-max-height);\n}\ndiv.widget-survey-components .question-text,\ndiv.card-survey-style .question-text {\n width: 100%;\n text-align: left;\n}\ndiv.widget-survey-components .focus-lock,\ndiv.card-survey-style .focus-lock {\n width: 100%;\n}\ndiv.widget-survey-components .question-container,\ndiv.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: 16px 28px;\n grid-gap: 16px;\n gap: 16px;\n flex-grow: 1;\n}\ndiv.widget-survey-components .question-footer,\ndiv.card-survey-style .question-footer {\n margin: 0px auto;\n justify-content: space-between;\n bottom: 0;\n padding-bottom: 20px;\n}\ndiv.widget-survey-components .submit,\ndiv.card-survey-style .submit {\n padding-bottom: 0;\n margin: unset;\n}\ndiv.widget-survey-components .nps-container .footer,\ndiv.card-survey-style .nps-container .footer {\n padding-top: 12px;\n}\ndiv.widget-survey-components .nps-container .widget .choices,\ndiv.card-survey-style .nps-container .widget .choices {\n grid-gap: 8px;\n gap: 8px;\n}\ndiv.widget-survey-components .radio-group,\ndiv.card-survey-style .radio-group {\n width: 100%;\n}\ndiv.widget-survey-components .checkbox-group,\ndiv.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: 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 z=["RANGE","NPS","RADIO","DROPDOWN"],S=200,I=1e4,B="active-focus-lock-1",F=({thankYouQuestion:n,preview:t,placeholders:r,npsValue:a})=>(o((()=>{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:N(n.text,r,a)}}),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:o,blocks:r,setHorizontalScrollUnits:a,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=r.findIndex((e=>e.name===o[t.current].name)),i.current=!1,a(t.current)}},e.createElement(C,null)),e.createElement("button",{className:"navigation-button",disabled:t.current>=o.length-1,onClick:()=>{i.current=!1,t.current=Math.min(t.current+1,o.length-1),n.current=r.findIndex((e=>e.name===o[t.current].name)),a(t.current)}},e.createElement(E,null))),$=({widget:n,widgetStyle:t,surveyStyle:o,formValues:r,blocksWithQns:a,blocks:i,thankYouQuestion:s,currentBlockIndexOfBlocksWithQns:c,currentBlockIndexOfBlocks:l,currentEditingBlock:u,isSubmitting:d,isValuesCommitted:p,isCurrentBlockFinal:m,setHorizontalScrollUnits:f,handleFormValues:v,skipBlock:x,setIsSubmitting:y,onSubmit:h,setIsSurveyCompleted:g,preventQuestionAnimation:b,preview:w,closePreview:k,...E})=>{const C=E.blockIndex??c.current,_=E.question??a[C].question,N=()=>_.name===u.current.question.name&&!z.includes(_.type_info.question_type)&&!m(),S=()=>"RANGE"!==_.type_info.question_type&&!_.required&&_.name===u.current.question.name&&!m(),I=()=>"DROPDOWN"===_.type_info.question_type&&_.name!==u.current.question.name&&!_.required&&null!=r[_.name],B=()=>m()&&(n||"standard"!==o)&&_.name===u.current.question.name,F="MULTI_SELECT"===u.current.question.type_info.question_type&&r[u.current.question.name]?.includes("");return e.createElement("div",{className:"question-footer"},!(!n&&"standard"===o||0===C&&!r[_.name]||"compact"===t)&&e.createElement(O,{currentBlockIndex:l,currentBlockIndexOfBlocksWithQns:c,blocksWithQns:a,blocks:i,setHorizontalScrollUnits:f,preventQuestionAnimation:b}),(N()||I()||S()||B())&&e.createElement("div",{className:"action-buttons"},N()&&e.createElement(q,{onClick:()=>{v(a[C],null,!0)},disabled:u.current.question.required&&(!r[u.current.question.name]||Array.isArray(r[u.current.question.name])&&0===r[u.current.question.name].length)||u.current.question.type_info.meta?.othersRequired&&F,className:"next-button"},"Next"),S()&&e.createElement("button",{className:"skip-button",onClick:()=>x(_)},"Skip"),I()&&e.createElement("button",{className:"skip-button",onClick:()=>{u.current=a[C],l.current=i.findIndex((e=>e.name===a[C].name)),x(_)}},"Clear selection"),B()&&e.createElement("div",{className:"submit"},e.createElement(q,{disabled:(u.current.question.required||u.current.question.type_info.pivot_question)&&(null==r[u.current.question.name]||0===r[u.current.question.name]?.length)||u.current.question.type_info.meta?.othersRequired&&F||d,onClick:()=>{y(!0),h(r,(()=>{s?.type_info.meta?.skipThankYouPage?w?setTimeout((()=>{k?.()}),300):window.location.href=s?.type_info.meta?.redirectUrl:g(!0)}))}},d?"Submitting":"Submit Survey"))))},L=({survey:t,surveyStyle:a="standard",placeholders:s,onSubmit:c,widget:l,npsValue:u,widgetStyle:d,widgetNavigatorQuerySelector:p,preview:m,mobilePreview:f,closePreview:v})=>{const x=t.question_details?.questions||[],y=t.meta?.blocks||[],[h,g]=r(null),[w,k]=r({}),[E,C]=r(!1),[I,B]=r([]),[L,T]=r(0),[R,D]=r(!1),[Q,A]=r(null),H=n(null),V=n(null),j=n(-1),P=n(null),U=n(0),W=n(0),Y=n(!1),M=n([]),G=e.useRef(!!u&&"card"===a),X=n(null),K=n([]);o((()=>{y&&(X.current=y.find((e=>"TY"===e.name)),g(y.filter((e=>"TY"!==e.name))))}),[y]),o((()=>{if(h)if(V.current=x.find((e=>e.type_info?.pivot_question))??x.find((e=>"RANGE"===e.type_info?.question_type))??x[0],null!=u){j.current=u;const e=x.find((e=>e.name===h[0].question_names[0]));H.current={...h[0],question:e},M.current=[...M.current,{...h[0],question:e}],B(M.current),k({Q_1:u})}else if(!H.current&&h.length>0)return H.current=h[0],void J(h[0])}),[h,u]),e.useEffect((()=>{I.length&&(M.current=I,W.current=I.length-1),l||"standard"!==a?(P.current&&(P.current.style.maxHeight="unset"),K.current[U.current]=P.current?.scrollHeight||K.current[U.current]||0,P.current&&(P.current.style.maxHeight="100%")):P.current?.scrollIntoView({block:"center",behavior:"smooth"}),T(I.length-1)}),[I]),o((()=>{Object.keys(w).length>0&&H.current.question&&(z.includes(H.current.question.type_info.question_type)||Y.current)&&!Z()&&ee()}),[w]),o((()=>{if(null!=w?.[V.current?.name])if(X.current?.is_based_on_score){const e=V.current?.type_info?.choices[w?.[V.current?.name]]?.dependent_question_names,n=X.current?.question_names.find((n=>e?.includes(n))),t=x.find((e=>e.name===n));A(t)}else{const e=x.find((e=>e.name==X.current?.question_names[0]));A(e)}}),[w?.[V.current?.name]]);const Z=()=>U.current===h.length-1||"end"===H.current.branchOption,J=e=>{let n={};if(e.is_based_on_score){const t=V.current?.type_info?.choices[w?.[V.current?.name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=x.find((e=>e.name===o))}else n=x.find((n=>n.name===e.question_names[0]));H.current.question=n;M.current.find((e=>e.question.name===n.name))?(T(L+1),W.current+=1):B([...M.current,{...e,question:n}])},ee=()=>{if(Z())C(!0);else{if(H.current.nextBlock)U.current=h.findIndex((e=>e.name===H.current.nextBlock));else if(H.current.question.type_info?.meta?.branches){const e=H.current.question.type_info?.meta?.branches,n=w[H.current.question.name];let t;if(t="RANGE"===H.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);U.current=h.findIndex((e=>e.name===t.nextBlock))}else U.current+=1}else U.current+=1;H.current=h[U.current],J(h[U.current])}},ne=e=>{Y.current=!0,delete w[e.name],k({...w})},te=(e,n,t)=>{if(G.current=!1,t){if(Y.current=!0,null!=w[e.question.name]&&e.name!==I[I.length-1].name){const[t,o]=(e=>{const n=I.findIndex((n=>n.name===e.name)),t=I.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=w[n.question.name],e)),{});return U.current=h.findIndex((n=>n.name===e.name)),[t,o]})(e);k({...o,...null!=n&&{[e.question.name]:n}}),M.current=t}else k({...w,...null!=n&&{[e.question.name]:n}});V?.current?.name==e?.question?.name&&(j.current=n)}else k({...w,...null!=n&&{[e.question.name]:n}})};return H.current&&H.current.question?E?e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${a}-survey-style`,id:"freemium-survey"},e.createElement(F,{thankYouQuestion:Q,preview:m,placeholders:s,npsValue:j.current})):e.createElement("div",{className:`freemium-survey-components ${l?"widget-survey-components":""} ${d}-style ${f?"mobile-preview":""} ${a}-survey-style`,id:"freemium-survey"},e.createElement(b,{totalSteps:h.length,completedSteps:U.current}),l&&"compact"===d&&document.querySelector(p)&&e.createElement(e.Fragment,null,i.createPortal(e.createElement("div",null,e.createElement(O,{currentBlockIndex:U,currentBlockIndexOfBlocksWithQns:W,blocksWithQns:I,blocks:h,setHorizontalScrollUnits:T,preventQuestionAnimation:G})),document.querySelector(p))),e.createElement("div",{style:l||"card"===a?{transform:`translateX(calc(-${L} * 100%))`,height:`${K.current[U.current]}px`,transition:G.current||I?.length<=1?"none":`all ${S}ms ease-out 0ms`}:{},className:"questions"},I.map(((n,t)=>e.createElement("div",{key:n.question.name,ref:P,className:"question-container "+(!l&&"card"!==a||W.current===t?"":"hide-question-container")},e.createElement("div",{className:"question-text "+(0===t?"nps":""),dangerouslySetInnerHTML:{__html:N(n.question.text,s,j.current)},title:`question-${t}`,role:"heading","aria-level":1}),e.createElement("button",{disabled:!l&&"standard"===a,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),e.createElement(_,{question:n.question,formValues:w,autoFocus:W.current===t,autoFocusDelay:"standard"===a?350:20,onChangeHandler:e=>{Y.current=!1,U.current=h.findIndex((e=>e.name===n.name)),H.current=n,te(n,e,z.includes(n.question.type_info.question_type)&&!Z())}}),e.createElement("button",{disabled:!l&&"standard"===a,className:"autofocus-button",onKeyDown:e=>{"Tab"===e.key&&(e.stopPropagation(),e.preventDefault())}}),"standard"===a||l?e.createElement($,{question:n.question,blockIndex:t,widget:l,widgetStyle:d,surveyStyle:a,formValues:w,blocksWithQns:I,blocks:h,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:W,currentBlockIndexOfBlocks:U,currentEditingBlock:H,isSubmitting:R,isValuesCommitted:Y,isCurrentBlockFinal:Z,setHorizontalScrollUnits:T,handleFormValues:te,skipBlock:ne,setIsSubmitting:D,onSubmit:c,setIsSurveyCompleted:C,preventQuestionAnimation:G,preview:m,closePreview:v}):e.createElement(e.Fragment,null,t===W.current&&i.createPortal(e.createElement(e.Fragment,null,e.createElement($,{widget:l,widgetStyle:d,surveyStyle:a,formValues:w,blocksWithQns:I,blocks:h,thankYouQuestion:Q,currentBlockIndexOfBlocksWithQns:W,currentBlockIndexOfBlocks:U,currentEditingBlock:H,isSubmitting:R,isValuesCommitted:Y,isCurrentBlockFinal:Z,setHorizontalScrollUnits:T,handleFormValues:te,skipBlock:ne,setIsSubmitting:D,onSubmit:c,setIsSurveyCompleted:C,preventQuestionAnimation:G,closePreview:v,preview:m})),document.getElementById("freemium-survey")??document.body))))),!l&&"card"!==a&&Z()&&e.createElement("div",{className:"submit"},e.createElement(q,{disabled:(H.current.question.required||H.current.question.type_info.pivot_question)&&(null==w[H.current.question.name]||0===w[H.current.question.name]?.length)||H.current.question.type_info.meta?.othersRequired&&"MULTI_SELECT"===H.current.question.type_info.question_type&&w[H.current.question.name]?.includes("")||R,onClick:()=>{D(!0),c(w,(()=>{Q?.type_info.meta?.skipThankYouPage?m?setTimeout((()=>{v?.()}),300):window.location.href=Q?.type_info.meta?.redirectUrl:C(!0)}))}},R?"Submitting":"Submit Survey")))):null},T=n=>{const{survey:t}=n,o=a((()=>{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(L,Object.assign({},n,{survey:o}))};export{B as ACTIVE_FOCUS_LOCK_GROUP,I as AUTO_REDIRECT_DELAY,k as BUTTON_SIZE_VARIANTS,q as Button,x as CheckboxGroup,m as Input,c as NPS,b as ProgressBar,g as Radio,h as RadioGroup,T as Survey,S as TRANSITION_DURATION,f as TextArea};
package/lib/types/App.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export default function App(): JSX.Element;
2
+ export default function App(): JSX.Element
package/lib/types/components/checkbox/index.d.ts CHANGED
@@ -10,8 +10,9 @@ interface CheckboxGroupInterface {
10
10
  values: string[];
11
11
  onChangeHandler: (newValues: string[]) => void;
12
12
  autoFocusGroup: boolean;
13
+ autoFocusDelay: number;
13
14
  othersOption?: boolean;
14
15
  othersRequired?: boolean;
15
16
  }
16
- declare const CheckboxGroup: ({ values, options, autoFocusGroup, onChangeHandler, othersOption, othersRequired, }: CheckboxGroupInterface) => JSX.Element;
17
+ declare const CheckboxGroup: ({ values, options, autoFocusGroup, autoFocusDelay, onChangeHandler, othersOption, othersRequired, }: CheckboxGroupInterface) => JSX.Element;
17
18
  export { CheckboxGroup };
package/lib/types/components/icons/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const NextArrow: () => JSX.Element;
3
+ export declare const PreviousArrow: () => JSX.Element;
package/lib/types/components/radio-button/index.d.ts CHANGED
@@ -19,11 +19,12 @@ interface RadioGroupInterface {
19
19
  value: string;
20
20
  name: string;
21
21
  autoFocusGroup: boolean;
22
+ autoFocusDelay: number;
22
23
  onChangeHandler: (newValue: string) => void;
23
24
  othersOption?: boolean;
24
25
  othersRequired?: boolean;
25
26
  }
26
- declare const RadioGroup: ({ name, options, value, autoFocusGroup, onChangeHandler, othersOption, othersRequired, }: RadioGroupInterface) => JSX.Element;
27
+ declare const RadioGroup: ({ name, options, value, autoFocusGroup, autoFocusDelay, onChangeHandler, othersOption, othersRequired, }: RadioGroupInterface) => JSX.Element;
27
28
  declare const Radio: React.ComponentType<Partial<{
28
29
  checked: boolean;
29
30
  autoFocus: boolean;
package/lib/types/components/text-input/index.d.ts CHANGED
@@ -7,24 +7,25 @@ interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
7
7
  maxLength?: any;
8
8
  type?: string;
9
9
  label: string;
10
- style?: any;
11
- value?: any;
12
- inputStyle?: any;
10
+ style?: object;
11
+ value?: string;
12
+ inputStyle?: object;
13
13
  className?: string;
14
- startLabel?: React.ReactNode | any;
15
- endLabel?: React.ReactNode | any;
14
+ startLabel?: React.ReactNode | string;
15
+ endLabel?: React.ReactNode | string;
16
16
  isRequired?: boolean;
17
17
  inline?: boolean;
18
18
  autoFocusInput?: boolean;
19
+ autoFocusDelay: number;
19
20
  }
20
21
  interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
21
22
  isErrored: boolean;
22
23
  showCount?: boolean;
23
24
  maxLength?: any;
24
25
  errorText?: string;
25
- style?: any;
26
- value?: any;
27
- inputStyle?: any;
26
+ style?: object;
27
+ value?: string;
28
+ inputStyle?: object;
28
29
  className?: string;
29
30
  label: string;
30
31
  startLabel?: React.ReactNode | any;
@@ -34,6 +35,7 @@ interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
34
35
  isRequired?: boolean;
35
36
  inline?: boolean;
36
37
  autoFocusInput?: boolean;
38
+ autoFocusDelay: number;
37
39
  }
38
40
  declare const Input: React.ComponentType<Partial<{
39
41
  isRequired: boolean;
@@ -42,7 +44,7 @@ declare const Input: React.ComponentType<Partial<{
42
44
  inline: boolean;
43
45
  spellCheck: boolean;
44
46
  autoFocusInput: boolean;
45
- }> & Pick<InputProps & React.RefAttributes<HTMLInputElement>, "ref" | "errorText" | "maxLength" | "type" | "label" | "style" | "value" | "inputStyle" | "className" | "startLabel" | "endLabel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key">>;
47
+ }> & Pick<InputProps & React.RefAttributes<HTMLInputElement>, "ref" | "errorText" | "maxLength" | "type" | "label" | "style" | "value" | "inputStyle" | "className" | "startLabel" | "endLabel" | "autoFocusDelay" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key">>;
46
48
  declare const TextArea: React.ComponentType<Partial<{
47
49
  isRequired: boolean;
48
50
  showCount: boolean;
@@ -50,5 +52,5 @@ declare const TextArea: React.ComponentType<Partial<{
50
52
  inline: boolean;
51
53
  spellCheck: boolean;
52
54
  autoFocusInput: boolean;
53
- }> & Pick<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>, "ref" | "errorText" | "maxLength" | "label" | "style" | "value" | "inputStyle" | "className" | "startLabel" | "endLabel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startAdornment" | "endAdornment" | "key">>;
55
+ }> & Pick<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>, "ref" | "errorText" | "maxLength" | "label" | "style" | "value" | "inputStyle" | "className" | "startLabel" | "endLabel" | "autoFocusDelay" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "startAdornment" | "endAdornment" | "key">>;
54
56
  export { Input, TextArea };
package/lib/types/mock.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const newSurvey: {
2
- id: string;
2
+ id: null;
3
3
  name: string;
4
4
  desc: string;
5
5
  type: string;
@@ -8,7 +8,6 @@ export declare const newSurvey: {
8
8
  is_template: boolean;
9
9
  question_details: {
10
10
  questions: ({
11
- id: string;
12
11
  text: string;
13
12
  name: string;
14
13
  position: number;
@@ -20,8 +19,6 @@ export declare const newSurvey: {
20
19
  max: number;
21
20
  };
22
21
  linear_scale: {
23
- point_scale: null;
24
- scale_order: null;
25
22
  button_style: string;
26
23
  button_shape: string;
27
24
  };
@@ -41,7 +38,6 @@ export declare const newSurvey: {
41
38
  title: string;
42
39
  is_based_on_score: boolean;
43
40
  question_names?: undefined;
44
- branchOption?: undefined;
45
41
  };
46
42
  branches: {
47
43
  min: number;
@@ -49,14 +45,13 @@ export declare const newSurvey: {
49
45
  id: string;
50
46
  }[];
51
47
  branchType: string;
52
- placeholder?: undefined;
53
- othersOption?: undefined;
54
- othersRequired?: undefined;
55
48
  };
56
49
  pivot_question: boolean;
50
+ text?: undefined;
51
+ type_info?: undefined;
57
52
  };
53
+ title: string;
58
54
  } | {
59
- id: string;
60
55
  text: string;
61
56
  name: string;
62
57
  position: number;
@@ -66,11 +61,7 @@ export declare const newSurvey: {
66
61
  validation: null;
67
62
  linear_scale: null;
68
63
  score_presets: null;
69
- choices: {
70
- id: string;
71
- position: string;
72
- value: string;
73
- }[];
64
+ choices: null;
74
65
  footer_text: null;
75
66
  meta: {
76
67
  block: {
@@ -78,61 +69,16 @@ export declare const newSurvey: {
78
69
  title: string;
79
70
  is_based_on_score: boolean;
80
71
  question_names: string[];
81
- branchOption: string;
82
72
  };
83
- branches: ({
84
- position: string;
85
- value: string;
86
- nextBlock: string;
87
- } | {
88
- position: string;
89
- value: string;
90
- nextBlock?: undefined;
91
- })[];
92
- branchType?: undefined;
93
- placeholder?: undefined;
94
- othersOption?: undefined;
95
- othersRequired?: undefined;
96
- };
97
- pivot_question: boolean;
98
- };
99
- } | {
100
- id: string;
101
- text: string;
102
- name: string;
103
- position: number;
104
- required: boolean;
105
- type_info: {
106
- question_type: string;
107
- validation: null;
108
- linear_scale: null;
109
- score_presets: null;
110
- choices: {
111
- id: string;
112
- position: string;
113
- value: string;
114
- }[];
115
- footer_text: null;
116
- meta: {
117
- branches: ({
118
- position: string;
119
- value: string;
120
- nextBlock: string;
121
- } | {
122
- position: string;
123
- value: string;
124
- nextBlock?: undefined;
125
- })[];
126
- block?: undefined;
73
+ branches?: undefined;
127
74
  branchType?: undefined;
128
- placeholder?: undefined;
129
- othersOption?: undefined;
130
- othersRequired?: undefined;
131
75
  };
132
76
  pivot_question: boolean;
77
+ text?: undefined;
78
+ type_info?: undefined;
133
79
  };
80
+ title: string;
134
81
  } | {
135
- id: string;
136
82
  text: string;
137
83
  name: string;
138
84
  position: number;
@@ -144,24 +90,13 @@ export declare const newSurvey: {
144
90
  score_presets: null;
145
91
  choices: null;
146
92
  footer_text: null;
147
- meta: {
148
- block: {
149
- name: string;
150
- title: string;
151
- is_based_on_score: boolean;
152
- branchOption: string;
153
- question_names?: undefined;
154
- };
155
- placeholder: string;
156
- branches?: undefined;
157
- branchType?: undefined;
158
- othersOption?: undefined;
159
- othersRequired?: undefined;
160
- };
93
+ meta: null;
161
94
  pivot_question: boolean;
95
+ text?: undefined;
96
+ type_info?: undefined;
162
97
  };
98
+ title?: undefined;
163
99
  } | {
164
- id: string;
165
100
  text: string;
166
101
  name: string;
167
102
  position: number;
@@ -179,98 +114,45 @@ export declare const newSurvey: {
179
114
  title: string;
180
115
  is_based_on_score: boolean;
181
116
  question_names?: undefined;
182
- branchOption?: undefined;
183
117
  };
184
118
  branches?: undefined;
185
119
  branchType?: undefined;
186
- placeholder?: undefined;
187
- othersOption?: undefined;
188
- othersRequired?: undefined;
189
120
  };
190
121
  pivot_question: boolean;
122
+ text?: undefined;
123
+ type_info?: undefined;
191
124
  };
125
+ title: string;
192
126
  } | {
193
- id: string;
194
- text: string;
195
127
  name: string;
196
128
  position: number;
197
- required: boolean;
198
- type_info: {
199
- question_type: string;
200
- validation: null;
201
- linear_scale: {
202
- point_scale: null;
203
- scale_order: null;
204
- button_style: null;
205
- button_shape: null;
206
- };
207
- score_presets: {
208
- start: null;
209
- end: null;
210
- };
211
- choices: {
212
- id: string;
213
- position: string;
214
- value: string;
215
- }[];
216
- footer_text: null;
217
- meta: {
218
- block: {
219
- name: string;
220
- title: string;
221
- is_based_on_score: boolean;
222
- branchOption: string;
223
- question_names?: undefined;
224
- };
225
- branches?: undefined;
226
- branchType?: undefined;
227
- placeholder?: undefined;
228
- othersOption?: undefined;
229
- othersRequired?: undefined;
230
- };
231
- pivot_question: boolean;
232
- };
233
- } | {
234
- id: string;
235
129
  text: string;
236
- name: string;
237
- position: number;
238
- required: boolean;
239
130
  type_info: {
240
- question_type: string;
241
- validation: null;
242
- linear_scale: {
243
- point_scale: null;
244
- scale_order: null;
245
- button_style: null;
246
- button_shape: null;
131
+ text: string;
132
+ type_info: {
133
+ pivot_question: boolean;
134
+ question_type: string;
247
135
  };
248
- score_presets: {
249
- start: null;
250
- end: null;
251
- };
252
- choices: {
253
- id: string;
254
- position: string;
255
- value: string;
256
- }[];
257
- footer_text: null;
136
+ question_type: string;
258
137
  meta: {
259
138
  block: {
260
139
  name: string;
261
140
  title: string;
262
141
  is_based_on_score: boolean;
263
- branchOption: string;
264
142
  question_names?: undefined;
265
143
  };
266
- othersOption: boolean;
267
- othersRequired: boolean;
268
144
  branches?: undefined;
269
145
  branchType?: undefined;
270
- placeholder?: undefined;
271
146
  };
272
- pivot_question: boolean;
147
+ validation?: undefined;
148
+ linear_scale?: undefined;
149
+ score_presets?: undefined;
150
+ choices?: undefined;
151
+ footer_text?: undefined;
152
+ pivot_question?: undefined;
273
153
  };
154
+ title: string;
155
+ required?: undefined;
274
156
  })[];
275
157
  };
276
158
  created_at: string;
@@ -281,32 +163,28 @@ export declare const newSurvey: {
281
163
  name: null;
282
164
  };
283
165
  ui_theme: {
284
- body_background_color: null;
285
- primary_font: null;
286
- secondary_font: null;
287
- primary_background_color: null;
288
- secondary_background_color: null;
289
- primary_button_color: null;
290
- secondary_button_color: null;
291
- brand_color: string;
292
- primary_button_text_color: string;
293
- button_style: null;
166
+ background_color: string;
294
167
  secondary_button_text_color: string;
168
+ button_text_color: string;
295
169
  question_background_color: string;
296
170
  question_text_color: string;
297
- css_url: null;
298
171
  };
299
172
  meta: {
173
+ template: {
174
+ theme: string;
175
+ createdOn: string;
176
+ createdBy: string;
177
+ };
300
178
  survey_layout: string;
301
179
  created_by: string;
302
180
  };
303
- channels: null;
181
+ channels: never[];
304
182
  template: boolean;
305
183
  header_message: string;
306
- contact_info: null;
307
- schedule_info: null;
184
+ contact_info: {};
185
+ schedule_info: {};
308
186
  throttle_info: null;
309
187
  channel_info: null;
310
- product_client_id: string;
188
+ product_client_id: null;
311
189
  is_recurring: boolean;
312
190
  };
package/lib/types/survey/index.d.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import './style.scss';
3
- export declare const TRANSITION_DELAY: number;
3
+ import { SurveyType } from '../types';
4
+ export declare const TRANSITION_DURATION: number;
4
5
  export declare const AUTO_REDIRECT_DELAY: number;
5
6
  export declare const ACTIVE_FOCUS_LOCK_GROUP = "active-focus-lock-1";
6
7
  interface SurveyProps {
7
- survey: {
8
- [key: string]: any;
9
- };
8
+ survey: SurveyType;
10
9
  surveyStyle?: 'standard' | 'card';
11
10
  placeholders?: any;
12
11
  npsValue?: number;
@@ -18,6 +17,7 @@ interface SurveyProps {
18
17
  widgetStyle?: 'default' | 'cozy' | 'compact';
19
18
  preview?: boolean;
20
19
  mobilePreview?: boolean;
20
+ closePreview?: () => void;
21
21
  }
22
22
  declare const Survey: (props: SurveyProps) => JSX.Element;
23
23
  export { Survey };
package/lib/types/survey/question.d.ts CHANGED
@@ -1,3 +1,9 @@
1
1
  /// <reference types="react" />
2
- declare const Question: ({ question, formValues, onChangeHandler, autoFocusInput }: any) => JSX.Element | null;
2
+ declare const Question: ({ question, formValues, onChangeHandler, autoFocus, autoFocusDelay, }: {
3
+ question: any;
4
+ formValues: any;
5
+ onChangeHandler: any;
6
+ autoFocus: boolean;
7
+ autoFocusDelay: number;
8
+ }) => JSX.Element | null;
3
9
  export default Question;
package/lib/types/types.d.ts ADDED
@@ -0,0 +1,132 @@
1
+ export declare type BlockType = {
2
+ name?: string;
3
+ title?: string;
4
+ order?: number;
5
+ question_names?: string[];
6
+ type?: string;
7
+ required?: boolean;
8
+ is_based_on_score?: boolean;
9
+ is_same_for_all?: boolean;
10
+ };
11
+ export declare type SurveyMetaType = {
12
+ survey_layout?: string;
13
+ template?: {
14
+ theme?: string;
15
+ created_on?: string;
16
+ created_by?: string;
17
+ };
18
+ created_by?: {
19
+ email?: string;
20
+ phone?: string;
21
+ mobile?: string;
22
+ status?: string;
23
+ active?: boolean;
24
+ display_id?: string;
25
+ freshid_user_id?: string;
26
+ freshid_organisation_id?: string;
27
+ first_name?: string;
28
+ last_name?: string;
29
+ job_title?: string;
30
+ company_name?: string;
31
+ activated_at?: string;
32
+ weekly_report?: boolean;
33
+ monthly_report?: boolean;
34
+ created_at?: string;
35
+ updated_at?: string;
36
+ last_login?: string;
37
+ };
38
+ blocks?: BlockType[];
39
+ };
40
+ export declare type UiThemeType = {
41
+ body_background_color?: string | null;
42
+ primary_font?: string | null;
43
+ secondary_font?: string | null;
44
+ primary_button_color?: string | null;
45
+ secondary_button_color?: string | null;
46
+ brand_color?: string | null;
47
+ primary_button_text_color?: string | null;
48
+ button_style?: string | null;
49
+ primary_background_color?: string | null;
50
+ secondary_background_color?: string | null;
51
+ secondary_button_text_color?: string | null;
52
+ question_background_color?: string | null;
53
+ question_text_color?: string | null;
54
+ css_url?: string | null;
55
+ };
56
+ export declare type UiBrandingType = {
57
+ logo_url: string | null;
58
+ name: string | null;
59
+ };
60
+ export declare type QuestionType = 'TEXT' | 'NUMBER' | 'PARAGRAPH' | 'BOOLEAN' | 'DATE' | 'RANGE' | 'DROPDOWN' | 'CHECKBOX' | 'RADIO' | 'MULTI_SELECT' | 'MULTI_SELECT_LOOKUP' | 'MESSAGE';
61
+ export declare type QuestionChoiceType = {
62
+ id?: string | null;
63
+ value?: string | null;
64
+ position?: number | null;
65
+ dependent_question_names?: string[] | null;
66
+ meta?: any | null;
67
+ };
68
+ export declare type LinearScaleType = {
69
+ point_scale?: string | null;
70
+ scale_order?: string | null;
71
+ button_style?: string | null;
72
+ button_shape?: 'rounded' | 'square' | 'curved';
73
+ };
74
+ export declare type QuestionScorePresetType = {
75
+ start?: string | null;
76
+ end?: string | null;
77
+ };
78
+ export declare type QuestionValidationType = {
79
+ min?: number | null;
80
+ max?: number | null;
81
+ };
82
+ export declare type QuestionTypeInfo = {
83
+ question_type: QuestionType | null;
84
+ validation?: QuestionValidationType | null;
85
+ linear_scale?: LinearScaleType | null;
86
+ score_presets?: QuestionScorePresetType | null;
87
+ choices?: QuestionChoiceType[] | null;
88
+ footer_text?: string | null;
89
+ meta?: any | null;
90
+ pivot_question?: boolean | null;
91
+ };
92
+ export declare type QuestionsType = {
93
+ id?: string | null;
94
+ text?: string | null;
95
+ name?: string | null;
96
+ position?: number | null;
97
+ type_info?: QuestionTypeInfo;
98
+ required?: boolean | null;
99
+ };
100
+ export declare type QuestionDetailsType = {
101
+ id?: string | null;
102
+ questions?: QuestionsType[] | null;
103
+ };
104
+ export declare type SurveyTypes = 'NPS' | 'CES' | 'CSAT';
105
+ export declare type SurveyStateTypes = 'DRAFT' | 'ACTIVE' | 'PAUSE';
106
+ export declare type SurveyType = {
107
+ id?: string | null;
108
+ display_id?: string | null;
109
+ survey_id?: string | null;
110
+ name?: string | null;
111
+ desc?: string | null;
112
+ type?: SurveyTypes | null;
113
+ header_message?: string | null;
114
+ gratitude_message?: string | null;
115
+ state?: SurveyStateTypes | null;
116
+ question_details?: QuestionDetailsType | null;
117
+ contact_info?: any | null;
118
+ schedule_info?: any | null;
119
+ throttle_info?: any | null;
120
+ ui_branding?: UiBrandingType;
121
+ ui_theme?: UiThemeType | null;
122
+ is_template?: boolean | null;
123
+ meta?: SurveyMetaType;
124
+ created_at?: string | null;
125
+ updated_at?: string | null;
126
+ is_active?: boolean | null;
127
+ channels?: string[] | null;
128
+ channel_info?: any | null;
129
+ template?: boolean | null;
130
+ product_client_id?: string | null;
131
+ is_recurring?: boolean | null;
132
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "freemium-survey-components",
3
- "version": "0.10.21",
3
+ "version": "0.10.25",
4
4
  "description": "React Survey Ui Components",
5
5
  "main": "lib/index.cjs.js",
6
6
  "module": "lib/index.esm.js",