freemium-survey-components 0.8.7 → 0.8.11

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 (6) hide show
  1. package/lib/index.cjs.js +1 -1
  2. package/lib/index.esm.js +1 -1
  3. package/lib/types/components/checkbox/index.d.ts +3 -1
  4. package/lib/types/mock.d.ts +41 -13
  5. package/package.json +1 -1
  6. package/lib/my-custom-file-name.css +0 -705
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),r=e(require("react-dom"));function o(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}o(".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 display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n.freemium-survey-components .nps-container .widget {\n position: relative;\n}\n.freemium-survey-components .nps-container .widget .button-container {\n display: flex;\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 .widget .positive-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .widget .negative-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .widget span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .widget 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 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 .widget button:hover {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .widget.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .widget.highlighted button:hover, .freemium-survey-components .nps-container .widget.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 .widget .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .widget.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .widget.standard .choice {\n color: #fff;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(1) {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(2) {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(3) {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(4) {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(5) {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(6) {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(7) {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(8) {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(9) {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(10) {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(11) {\n background: #1ebf31;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .widget .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .widget .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:i,end:a},validation:{min:s},footer_text:c}}=e,l=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},u=n.useRef(Array.from({length:10+(0===s?1:0)},((e,n)=>n+s)));return t.createElement("div",{className:"nps-container"},t.createElement("div",{className:`widget ${r} ${o}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text"},i),t.createElement("div",{className:"choices"},u.current.map((n=>t.createElement("button",{key:n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${l(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("span",{className:"positive-text"},a))),t.createElement("div",{className:"footer"},c))},a=(e,n)=>(e.defaultProps=n,e);o('.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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n border-radius: var(--border-radius, var(--default-border-radius));\n border: 1px solid var(--default-input-border-color);\n border: 1px solid var(--input-border-color, var(--default-input-border-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 var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\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-input-hover-border-color);\n border-color: var(--input-hover-border-color, var(--default-input-hover-border-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-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components input[type=text] {\n padding: 4px 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: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 4px 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: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea::placeholder {\n color: var(--input-placeholder-color);\n}');const s={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!0},c=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),q+20)}),[e.autoFocus]);const{inputStyle:i,style:a,className:s,showCount:c,isErrored:l,startLabel:u,isRequired:d,errorText:p,endLabel:m,maxLength:h,autoFocus:f,...g}=e;return t.createElement("div",{className:"input-container",style:a},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),t.createElement("div",null,u&&t.createElement("div",{className:"start-label"},u),t.createElement("div",{className:`input-basic ${l?"error":""}${s||""}`},t.createElement("input",Object.assign({type:"text",autoComplete:"off",ref:o,style:i},g)),c&&h>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),m&&t.createElement("div",{className:"end-label"},m)),l&&p&&t.createElement("span",{className:"input-error"},e.errorText))})),l=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{console.log("props.autoFocus...",e.autoFocus),e.autoFocus&&setTimeout((()=>{o.current?.focus()}),q+20)}),[]);const{inputStyle:i,style:a,className:s,showCount:c,maxLength:l,isErrored:u,startLabel:d,isRequired:p,autoFocus:m,...h}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:a},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 ${u?"error":""} ${s||""}`},t.createElement("textarea",Object.assign({autoComplete:"off",ref:o,style:i},h)),c&&l&&l>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))})),u=a(c,s),d=a(l,s);o('.freemium-survey-components .checkbox-group {\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-input-highlight-color) 0px 0px 0px 2px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n opacity: 1;\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.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-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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:n,onChangeHandler:r,autoFocus:o})=>t.createElement("div",{className:"checkbox-group"},n.map(((n,i)=>t.createElement(h,{key:n.value,checked:e?.includes(n.value),name:n.value,id:n.value,autoFocus:0===i&&o,onChange:(t,o)=>{if(o)r([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),r([...e])}}},n.value)))),h=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),q+20)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(p,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});o('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-input-border-color);\n border-color: var(--input-border-color, var(--default-input-border-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: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\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-input-highlight-color) 0px 0px 0px 3px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .radio-container:hover .radio {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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 f=({name:e,options:r,value:o,autoFocus:i,onChangeHandler:a,othersOption:s,othersRequired:c})=>{const[l,d]=n.useState(""),[p,m]=n.useState("");return n.useEffect((()=>{o||(m(""),d(""))}),[o]),n.useEffect((()=>{p&&r.find((e=>e.value===p))&&a(p)}),[p]),t.createElement("div",{className:"radio-group"},r.map(((n,r)=>t.createElement(g,{key:n.value,value:n.value,name:e,onChange:e=>{m(e.currentTarget.value)},autoFocus:0===r&&i,checked:p===n.value},n.value))),s&&t.createElement(g,{key:"others",value:"others",name:e,onChange:e=>{m("others")},checked:"others"===p},"others"),"others"===p&&t.createElement(t.Fragment,null,t.createElement(u,{placeholder:"",value:l,onChange:e=>d(e.target.value),label:""}),l!==o&&t.createElement(b,{disabled:c&&0===l.length,onClick:()=>a(l)},"Next")))},g=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),q+20)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});o(".progressbar-container {\n width: 100%;\n height: 6px;\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:r}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};o(".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: #fff;\n background: var(--default-primary-button-color);\n background: var(--primary-button-color, var(--default-primary-button-color));\n border: 1px solid var(--default-primary-button-color);\n border: 1px solid var(--primary-button-color, var(--default-primary-button-color));\n border-radius: 4px;\n min-width: 200px;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n background: var(--default-primary-button-hover-color);\n background: var(--primary-button-hover-color, var(--primary-button-color, var(--default-primary-button-hover-color)));\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}");const v=()=>t.createElement(t.Fragment,null,"..."),b=e=>{const{inline:n=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:c,size:l,overrideStyleClassName:u="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${i} ${u}`,type:a,onClick:c},p),d?t.createElement(v,null):r)},y=({question:e,formValues:n,onChangeHandler:r,autoFocus:o})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:r,npsValue:n[e.name]});case"CHECKBOX":return t.createElement(m,{autoFocus:o,values:n[e.name],options:e.type_info.choices,onChangeHandler:r});case"RADIO":case"DROPDOWN":return t.createElement(f,{autoFocus:o,name:e.name,onChangeHandler:r,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(u,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}),t.createElement(d,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return t.createElement(d,{autoFocus:o,label:"",isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};o(":root {\n --widget-container-width: 350px;\n --default-primary-button-color: #d72d30;\n --default-primary-button-hover-color: #f1171b;\n --default-brand-color: #264966;\n --default-input-highlight-color: #2c5cc5;\n --default-input-border-color: #92a2b1;\n --default-input-hover-border-color: #264966;\n --default-input-placeholder-color: #92a2b1;\n --default-border-radius: 4px;\n --default-background-color: #ebeff3;\n --default-error-highlight-color: #d72d30;\n}\n\n.freemium-survey-components .question-container {\n display: flex;\n flex-direction: column;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n align-items: center;\n background: #ffffff;\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);\n margin-bottom: 52px;\n padding: 28px;\n grid-gap: 36px;\n gap: 36px;\n position: relative;\n}\n.freemium-survey-components .question-text {\n font-size: 1rem;\n line-height: 1.5;\n}\n.freemium-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.freemium-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 1.2rem;\n line-height: 2;\n color: #12344d;\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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n position: absolute;\n right: 12px;\n font-weight: 300;\n font-size: 0.9rem;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 12px;\n border-radius: 4px;\n}\n.freemium-survey-components .skip-button:hover {\n text-decoration: underline;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .prev-button {\n display: none;\n}\n.freemium-survey-components .submit {\n padding-bottom: 40px;\n display: flex;\n justify-content: center;\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-components .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-components .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.widget-survey-components {\n display: flex;\n height: 100%;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n align-items: end;\n}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\n.widget-survey-components .question-container {\n box-shadow: none;\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n border-radius: 0;\n}\n.widget-survey-components .prev-button {\n border: none;\n background: transparent;\n position: absolute;\n left: 12px;\n display: inline;\n display: initial;\n cursor: pointer;\n padding: 12px;\n}\n.widget-survey-components .prev-button:hover {\n text-decoration: underline;\n}\n.widget-survey-components .submit {\n padding-bottom: 0;\n}\n\n.widget-survey-components.default-style .question-container {\n grid-gap: 12px;\n gap: 12px;\n padding: 0px 28px;\n}\n.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n}\n\n.widget-survey-components.cozy-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n padding: 16px 28px;\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 .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 overflow: auto;\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 overflow: auto;\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: 84px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n}");const 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:"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"})),k=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=["RANGE","NPS","RADIO","DROPDOWN"],q=200,C=({thankYouQuestion:e,preview:r})=>(n.useEffect((()=>{r||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:"text"},e.text),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))));exports.AUTO_REDIRECT_DELAY=1e4,exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=b,exports.CheckboxGroup=m,exports.Input=u,exports.NPS=i,exports.ProgressBar=x,exports.Radio=g,exports.RadioGroup=f,exports.Survey=({survey:e,onSubmit:o,widget:i,surveyContainerWidth:a="0px",npsValue:s,widgetStyle:c,widgetNavigatorQuerySelector:l,preview:u})=>{const{meta:{blocks:d},question_details:{questions:p}}=e,[m,h]=n.useState({}),[f,g]=n.useState(!1),[v,N]=n.useState([]),[_,z]=n.useState(0),[R,S]=n.useState(!1),[L,T]=n.useState(null),$=n.useRef(null),O=n.useRef(null),F=n.useRef(null),A=n.useRef(0),B=n.useRef(!1),I=n.useRef([]);n.useEffect((()=>{if(d)if(O.current=p.find((e=>e.pivot_question))??p.find((e=>"RANGE"===e.type_info.question_type))??p[0],s){const e=p.find((e=>e.name===d[0].question_names[0]));$.current=d[0],I.current=[...I.current,{...d[0],question:e}],N(I.current),h({Q_1:s})}else if(!$.current&&d.length>0)return $.current=d[0],void P(d[0])}),[d,s]),n.useEffect((()=>{i||F.current?.scrollIntoView({block:"center",behavior:"smooth"}),v.length&&(I.current=v),z(v.length-1)}),[v]),n.useEffect((()=>{Object.keys(m).length>0&&$.current.question&&(E.includes($.current.question.type_info.question_type)||B.current)&&!j()&&H()}),[m]),n.useEffect((()=>{const e=d.find((e=>"T_1"===e.name));if(m?.[O.current?.name])if(e.is_based_on_score){const n=O.current?.type_info?.choices[m?.[O.current?.name]]?.dependent_question_names,t=e.question_names.find((e=>n?.includes(e))),r=p.find((e=>e.name===t));T(r)}else{const n=p.find((n=>n.name===e.question_names[0]));T(n)}}),[m?.[O.current?.name]]);const j=()=>A.current===d.filter((e=>"T_1"!==e.name)).length-1||"end"===$.current.branchOption,P=e=>{let n={};if(e.is_based_on_score){const t=O.current?.type_info?.choices[m?.[O.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));$.current.question=n;const t=I.current.find((e=>e.question.name===n.name));N(t?[...I.current]:[...I.current,{...e,question:n}])},H=()=>{if(j())g(!0);else{if($.current.nextBlock)A.current=d.findIndex((e=>e.name===$.current.nextBlock));else if($.current.question.type_info?.meta?.branches){const e=$.current.question.type_info?.meta?.branches,n=m[$.current.question.name];let t;t="RANGE"===$.current.type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock?A.current=d.findIndex((e=>e.name===t.nextBlock)):A.current+=1}else A.current+=1;$.current=d[A.current],P(d[A.current])}},D=(e,n)=>{B.current=!0,delete m[n.name],h({...m})},U=(e,n,t)=>{if(t)if(B.current=!0,null!=m[e.question.name]&&e.name!==v[v.length-1].name){const[t,r]=(e=>{const n=v.findIndex((n=>n.name===e.name)),t=v.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=m[n.question.name],e)),{});return A.current=d.findIndex((n=>n.name===e.name)),[t,r]})(e);h({...r,...null!=n&&{[e.question.name]:n}}),I.current=t}else h({...m,...null!=n&&{[e.question.name]:n}});else h({...m,...null!=n&&{[e.question.name]:n}})};return $.current&&$.current.question?f?t.createElement("div",{className:"freemium-survey-components "+(i?"widget-survey-components":"")},t.createElement(C,{thankYouQuestion:L,preview:u})):t.createElement("div",{className:`freemium-survey-components ${i?"widget-survey-components":""} ${c}-style`,style:{"--widget-container-width":a}},!i&&t.createElement(x,{totalSteps:d.length,completedSteps:A.current}),i&&document.querySelector(l)&&t.createElement(t.Fragment,null,r.createPortal(t.createElement("div",{className:"navigation","data-navigation-element":"1"},t.createElement("button",{style:0==A.current?{visibility:"hidden"}:{},className:"navigate-button",onClick:()=>{A.current=Math.max(A.current-1,0),z(A.current)}},t.createElement(k,null)),t.createElement("span",{className:"navigation-text"}," Question ",A.current+1," of"," ",v.length," ")," ",t.createElement("button",{className:"navigate-button",style:A.current>=v.length-1?{visibility:"hidden"}:{},onClick:()=>{A.current=Math.min(A.current+1,v.length-1),z(A.current)}},t.createElement(w,null))),document.querySelector(l))),t.createElement("div",{style:i?{transform:`translateX(calc(-${_} * ${a}))`,transition:`transform ${q}ms linear,height ${q}ms linear`}:{},className:"questions"},v.map(((e,n)=>{return t.createElement("div",{className:"question-container",ref:F,id:e.title,key:e.title},t.createElement("div",{className:"question-text"},e.question.text),t.createElement(y,{question:e.question,formValues:m,autoFocus:$.current.name===e.name,onChangeHandler:n=>{B.current=!1,A.current=d.findIndex((n=>n.name===e.name)),$.current=e,U(e,n,E.includes(e.question.type_info.question_type)&&!j())}}),t.createElement("div",{className:"action-buttons",style:i?{margin:"0 auto"}:{}},(r=e.question,r.name===$.current.question.name&&!E.includes(r.type_info.question_type)&&!j()&&t.createElement(b,{onClick:()=>{B.current?(A.current=Math.min(A.current+1,v.length-1),$.current=v[n+1],z(A.current)):U(e,null,!0)},disabled:!m[$.current.question.name]||Array.isArray(m[$.current.question.name])&&0===m[$.current.question.name].length,className:"next-button"},"Next")),((e,n)=>"RANGE"!==n.type_info.question_type&&!n.required&&n.name===$.current.question.name&&!j())(0,e.question)&&t.createElement("button",{className:"skip-button",onClick:()=>D(0,e.question)},"Skip"),((e,n)=>!("DROPDOWN"!==n.type_info.question_type||n.name===$.current.question.name||n.required||!m[n.name]))(0,e.question)&&t.createElement("button",{className:"skip-button",onClick:()=>{$.current=e,A.current=d.findIndex((n=>n.name===e.name)),D(0,e.question)}},"Clear selection"),i&&(e=>j()&&e.name===$.current.question.name)(e.question)&&t.createElement("div",{className:"submit",style:{margin:"0 auto"}},t.createElement(b,{disabled:$.current.question.required&&void 0===m[$.current.question.name]||R,onClick:()=>{S(!0),o(m,(()=>{L?.type_info.meta.skipThankYouPage||g(!0)}))}},R?"Submitting":"Submit Survey"))));var r})),!i&&j()&&t.createElement("div",{className:"submit"},t.createElement(b,{disabled:$.current.question.required&&void 0===m[$.current.question.name]||R,onClick:()=>{S(!0),o(m,(()=>{u||L?.type_info.meta.skipThankYouPage&&(window.location.href=L?.type_info.meta.redirectUrl)})),L?.type_info.meta.skipThankYouPage||g(!0)}},R?"Submitting":"Submit Survey")))):null},exports.TRANSITION_DELAY=q,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),r=e(require("react-dom"));function o(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}o(".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 display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n.freemium-survey-components .nps-container .widget {\n position: relative;\n}\n.freemium-survey-components .nps-container .widget .button-container {\n display: flex;\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 .widget .positive-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .widget .negative-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .widget span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .widget 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 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 .widget button:hover {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .widget.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .widget.highlighted button:hover, .freemium-survey-components .nps-container .widget.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 .widget .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .widget.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .widget.standard .choice {\n color: #fff;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(1) {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(2) {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(3) {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(4) {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(5) {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(6) {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(7) {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(8) {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(9) {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(10) {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(11) {\n background: #1ebf31;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .widget .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .widget .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n}");const i=e=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:i,end:a},validation:{min:s},footer_text:c}}=e,l=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},u=n.useRef(Array.from({length:10+(0===s?1:0)},((e,n)=>n+s)));return t.createElement("div",{className:"nps-container"},t.createElement("div",{className:`widget ${r} ${o}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text"},i),t.createElement("div",{className:"choices"},u.current.map((n=>t.createElement("button",{key:n,onClick:t=>{e.onChangeHandler(n)},className:`choice ${l(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("span",{className:"positive-text"},a))),t.createElement("div",{className:"footer"},c))},a=(e,n)=>(e.defaultProps=n,e);o('.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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n border-radius: var(--border-radius, var(--default-border-radius));\n border: 1px solid var(--default-input-border-color);\n border: 1px solid var(--input-border-color, var(--default-input-border-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 var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\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-input-hover-border-color);\n border-color: var(--input-hover-border-color, var(--default-input-hover-border-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-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components input[type=text] {\n padding: 4px 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: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 4px 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: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea::placeholder {\n color: var(--input-placeholder-color);\n}');const s={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!0},c=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{o.current?.focus()}),q+20)}),[e.autoFocus]);const{inputStyle:i,style:a,className:s,showCount:c,isErrored:l,startLabel:u,isRequired:d,errorText:p,endLabel:m,maxLength:h,autoFocus:f,...g}=e;return t.createElement("div",{className:"input-container",style:a},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.label),t.createElement("div",null,u&&t.createElement("div",{className:"start-label"},u),t.createElement("div",{className:`input-basic ${l?"error":""}${s||""}`},t.createElement("input",Object.assign({type:"text",autoComplete:"off",ref:o,style:i},g)),c&&h>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),m&&t.createElement("div",{className:"end-label"},m)),l&&p&&t.createElement("span",{className:"input-error"},e.errorText))})),l=n.forwardRef(((e,r)=>{const o=n.useRef(null);n.useEffect((()=>{console.log("props.autoFocus...",e.autoFocus),e.autoFocus&&setTimeout((()=>{o.current?.focus()}),q+20)}),[]);const{inputStyle:i,style:a,className:s,showCount:c,maxLength:l,isErrored:u,startLabel:d,isRequired:p,autoFocus:m,...h}=e;return t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:a},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 ${u?"error":""} ${s||""}`},t.createElement("textarea",Object.assign({autoComplete:"off",ref:o,style:i},h)),c&&l&&l>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))})),u=a(c,s),d=a(l,s);o('.freemium-survey-components .checkbox-group {\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-input-highlight-color) 0px 0px 0px 2px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n opacity: 1;\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.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-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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:r,autoFocus:o,onChangeHandler:i,othersOption:a,othersRequired:s})=>{const c=(()=>{let n=-1;return e.map(((e,t)=>{const o=r.find((n=>n.value===e));return o||(n=t),o})),n})(),[l,d]=n.useState(!1);return t.createElement("div",{className:"checkbox-group"},r.map(((n,r)=>t.createElement(h,{key:n.value,checked:e?.includes(n.value),name:n.value,id:n.value,autoFocus:0===r&&o,onChange:(t,r)=>{if(r)i([...e||[],n.value]);else{const t=e.indexOf(n.value);t>-1&&e.splice(t,1),i([...e])}}},n.value))),a&&t.createElement(h,{key:"others",checked:l,name:"others",id:"others",onChange:(e,n)=>{d(n)}},"Others"),l&&t.createElement(t.Fragment,null,t.createElement(u,{placeholder:"",value:e[c],onChange:n=>{-1!==c?(e[c]=n.target.value,i(e)):i(e.concat(n.target.value))},label:""})))},h=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),q+20)}),[]),t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:r,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,checked:e.checked,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(p,null)," ")),t.createElement("div",null,e.children))}),{checked:!1});o('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-input-border-color);\n border-color: var(--input-border-color, var(--default-input-border-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: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\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-input-highlight-color) 0px 0px 0px 3px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .radio-container:hover .radio {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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 f=({name:e,options:r,value:o,autoFocus:i,onChangeHandler:a,othersOption:s,othersRequired:c})=>{const[l,d]=n.useState(""),[p,m]=n.useState("");return n.useEffect((()=>{o||(m(""),d(""))}),[o]),n.useEffect((()=>{p&&r.find((e=>e.value===p))&&a(p)}),[p]),t.createElement("div",{className:"radio-group"},r.map(((n,r)=>t.createElement(g,{key:n.value,value:n.value,name:e,onChange:e=>{m(e.currentTarget.value)},autoFocus:0===r&&i,checked:p===n.value},n.value))),s&&t.createElement(g,{key:"others",value:"others",name:e,onChange:e=>{m("others")},checked:"others"===p},"others"),"others"===p&&t.createElement(t.Fragment,null,t.createElement(u,{placeholder:"",value:l,onChange:e=>d(e.target.value),label:""}),l!==o&&t.createElement(b,{disabled:c&&0===l.length,onClick:()=>a(l)},"Next")))},g=a((e=>{const r=n.useRef(null);return n.useEffect((()=>{e.autoFocus&&setTimeout((()=>{r.current?.focus()}),q+20)}),[]),t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:r,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children))}),{checked:!1,autoFocus:!1});o(".progressbar-container {\n width: 100%;\n height: 6px;\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:r}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};o(".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: #fff;\n background: var(--default-primary-button-color);\n background: var(--primary-button-color, var(--default-primary-button-color));\n border: 1px solid var(--default-primary-button-color);\n border: 1px solid var(--primary-button-color, var(--default-primary-button-color));\n border-radius: 4px;\n min-width: 200px;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n background: var(--default-primary-button-hover-color);\n background: var(--primary-button-hover-color, var(--primary-button-color, var(--default-primary-button-hover-color)));\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}");const v=()=>t.createElement(t.Fragment,null,"..."),b=e=>{const{inline:n=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:c,size:l,overrideStyleClassName:u="",loading:d=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${i} ${u}`,type:a,onClick:c},p),d?t.createElement(v,null):r)},y=({question:e,formValues:n,onChangeHandler:r,autoFocus:o})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(i,{type_info:e.type_info,onChangeHandler:r,npsValue:n[e.name]});case"CHECKBOX":return t.createElement(m,{autoFocus:o,values:n[e.name],options:e.type_info.choices,onChangeHandler:r,othersOption:e.type_info.meta?.othersOption,othersRequired:e.type_info.meta?.othersRequired});case"RADIO":case"DROPDOWN":return t.createElement(f,{autoFocus:o,name:e.name,onChangeHandler:r,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(u,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}),t.createElement(d,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return t.createElement(d,{autoFocus:o,label:"",isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};o(":root {\n --widget-container-width: 350px;\n --default-primary-button-color: #d72d30;\n --default-primary-button-hover-color: #f1171b;\n --default-brand-color: #264966;\n --default-input-highlight-color: #2c5cc5;\n --default-input-border-color: #92a2b1;\n --default-input-hover-border-color: #264966;\n --default-input-placeholder-color: #92a2b1;\n --default-border-radius: 4px;\n --default-background-color: #ebeff3;\n --default-error-highlight-color: #d72d30;\n}\n\n.freemium-survey-components .question-container {\n display: flex;\n flex-direction: column;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n align-items: center;\n background: #ffffff;\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);\n margin-bottom: 52px;\n padding: 28px;\n grid-gap: 36px;\n gap: 36px;\n position: relative;\n}\n.freemium-survey-components .question-text {\n font-size: 1rem;\n line-height: 1.5;\n}\n.freemium-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.freemium-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 1.2rem;\n line-height: 2;\n color: #12344d;\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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n position: absolute;\n right: 12px;\n font-weight: 300;\n font-size: 0.9rem;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 12px;\n border-radius: 4px;\n}\n.freemium-survey-components .skip-button:hover {\n text-decoration: underline;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .prev-button {\n display: none;\n}\n.freemium-survey-components .submit {\n padding-bottom: 40px;\n display: flex;\n justify-content: center;\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-components .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-components .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.widget-survey-components {\n display: flex;\n flex-grow: 1;\n height: 100%;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\n.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n align-items: end;\n}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n width: 100%;\n text-align: left;\n margin-bottom: 16px;\n}\n.widget-survey-components .question-container {\n box-shadow: none;\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n border-radius: 0;\n padding: 12px 16px;\n grid-gap: 0px;\n gap: 0px;\n}\n.widget-survey-components .prev-button {\n border: none;\n background: transparent;\n position: absolute;\n left: 12px;\n display: inline;\n display: initial;\n cursor: pointer;\n padding: 12px;\n}\n.widget-survey-components .prev-button:hover {\n text-decoration: underline;\n}\n.widget-survey-components .action-buttons {\n margin: 0px auto;\n margin-top: 16px;\n}\n.widget-survey-components .submit {\n padding-bottom: 0;\n}\n.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px !important;\n gap: 8px !important;\n}\n.widget-survey-components .radio-group {\n overflow: auto;\n}\n.widget-survey-components .checkbox-group {\n overflow: auto;\n flex-wrap: nowrap;\n}\n\n.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.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 .question-container {\n padding: 12px 28px;\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 .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 overflow: auto;\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 overflow: auto;\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}");const 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:"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"})),k=()=>t.createElement("svg",{style:{display:"block"},width:"9",height:"14",viewBox:"0 0 10 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("path",{d:"M0.256667 7.83755C0.0925257 7.67361 0.000204227 7.4512 0 7.21921V6.77588C0.00268801 6.5444 0.0946357 6.32289 0.256667 6.15755L6.25333 0.172549C6.30756 0.117874 6.37208 0.0744776 6.44316 0.0448625C6.51425 0.0152474 6.59049 0 6.6675 0C6.74451 0 6.82075 0.0152474 6.89184 0.0448625C6.96292 0.0744776 7.02744 0.117874 7.08167 0.172549L7.91 1.00088C7.96432 1.05411 8.00748 1.11764 8.03694 1.18776C8.06641 1.25787 8.08158 1.33316 8.08158 1.40922C8.08158 1.48527 8.06641 1.56056 8.03694 1.63067C8.00748 1.70079 7.96432 1.76432 7.91 1.81755L2.71833 6.99755L7.91 12.1775C7.96467 12.2318 8.00807 12.2963 8.03769 12.3674C8.0673 12.4385 8.08255 12.5147 8.08255 12.5917C8.08255 12.6687 8.0673 12.745 8.03769 12.8161C8.00807 12.8871 7.96467 12.9517 7.91 13.0059L7.08167 13.8225C7.02744 13.8772 6.96292 13.9206 6.89184 13.9502C6.82075 13.9799 6.74451 13.9951 6.6675 13.9951C6.59049 13.9951 6.51425 13.9799 6.44316 13.9502C6.37208 13.9206 6.30756 13.8772 6.25333 13.8225L0.256667 7.83755Z",fill:"#6B6B6B"})),E=["RANGE","NPS","RADIO","DROPDOWN"],q=200,C=({thankYouQuestion:e,preview:r})=>(n.useEffect((()=>{r||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:"text"},e.text),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))));exports.AUTO_REDIRECT_DELAY=1e4,exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=b,exports.CheckboxGroup=m,exports.Input=u,exports.NPS=i,exports.ProgressBar=x,exports.Radio=g,exports.RadioGroup=f,exports.Survey=({survey:e,onSubmit:o,widget:i,surveyContainerWidth:a="0px",npsValue:s,widgetStyle:c,widgetNavigatorQuerySelector:l,preview:u})=>{const{meta:{blocks:d},question_details:{questions:p}}=e,[m,h]=n.useState({}),[f,g]=n.useState(!1),[v,N]=n.useState([]),[_,R]=n.useState(0),[z,S]=n.useState(!1),[L,O]=n.useState(null),T=n.useRef(null),$=n.useRef(null),F=n.useRef(null),A=n.useRef(0),B=n.useRef(!1),I=n.useRef([]);n.useEffect((()=>{if(d)if($.current=p.find((e=>e.pivot_question))??p.find((e=>"RANGE"===e.type_info.question_type))??p[0],null!=s){const e=p.find((e=>e.name===d[0].question_names[0]));T.current={...d[0],question:e},I.current=[...I.current,{...d[0],question:e}],N(I.current),h({Q_1:s})}else if(!T.current&&d.length>0)return T.current=d[0],void P(d[0])}),[d,s]),n.useEffect((()=>{i||F.current?.scrollIntoView({block:"center",behavior:"smooth"}),v.length&&(I.current=v),R(v.length-1)}),[v]),n.useEffect((()=>{Object.keys(m).length>0&&T.current.question&&(E.includes(T.current.question.type_info.question_type)||B.current)&&!j()&&H()}),[m]),n.useEffect((()=>{const e=d.find((e=>"T_1"===e.name));if(null!=m?.[$.current?.name])if(e.is_based_on_score){const n=$.current?.type_info?.choices[m?.[$.current?.name]]?.dependent_question_names,t=e.question_names.find((e=>n?.includes(e))),r=p.find((e=>e.name===t));O(r)}else{const e=p.find((e=>"T_3"==e.name));O(e)}}),[m?.[$.current?.name]]);const j=()=>A.current===d.filter((e=>"T_1"!==e.name)).length-1||"end"===T.current.branchOption,P=e=>{let n={};if(e.is_based_on_score){const t=$.current?.type_info?.choices[m?.[$.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=p.find((e=>e.name===r))}else n=p.find((n=>n.name===e.question_names[0]));T.current.question=n;const t=I.current.find((e=>e.question.name===n.name));N(t?[...I.current]:[...I.current,{...e,question:n}])},H=()=>{if(j())g(!0);else{if(T.current.nextBlock)A.current=d.findIndex((e=>e.name===T.current.nextBlock));else if(T.current.question.type_info?.meta?.branches){const e=T.current.question.type_info?.meta?.branches,n=m[T.current.question.name];let t;t="RANGE"===T.current.type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock?A.current=d.findIndex((e=>e.name===t.nextBlock)):A.current+=1}else A.current+=1;T.current=d[A.current],P(d[A.current])}},D=(e,n)=>{B.current=!0,delete m[n.name],h({...m})},U=(e,n,t)=>{if(t)if(B.current=!0,null!=m[e.question.name]&&e.name!==v[v.length-1].name){const[t,r]=(e=>{const n=v.findIndex((n=>n.name===e.name)),t=v.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=m[n.question.name],e)),{});return A.current=d.findIndex((n=>n.name===e.name)),[t,r]})(e);h({...r,...null!=n&&{[e.question.name]:n}}),I.current=t}else h({...m,...null!=n&&{[e.question.name]:n}});else h({...m,...null!=n&&{[e.question.name]:n}})};return T.current&&T.current.question?f?t.createElement("div",{className:"freemium-survey-components "+(i?"widget-survey-components":"")},t.createElement(C,{thankYouQuestion:L,preview:u})):t.createElement("div",{className:`freemium-survey-components ${i?"widget-survey-components":""} ${c}-style`,style:{"--widget-container-width":a}},!i&&t.createElement(x,{totalSteps:d.length,completedSteps:A.current}),i&&document.querySelector(l)&&t.createElement(t.Fragment,null,r.createPortal(t.createElement("div",{className:"navigation","data-navigation-element":"1"},t.createElement("button",{style:0==A.current?{visibility:"hidden"}:{},className:"navigate-button",onClick:()=>{A.current=Math.max(A.current-1,0),R(A.current)}},t.createElement(k,null)),t.createElement("span",{className:"navigation-text"}," Question ",A.current+1," of"," ",v.length," ")," ",t.createElement("button",{className:"navigate-button",style:A.current>=v.length-1?{visibility:"hidden"}:{},onClick:()=>{A.current=Math.min(A.current+1,v.length-1),R(A.current)}},t.createElement(w,null))),document.querySelector(l))),t.createElement("div",{style:i?{transform:`translateX(calc(-${_} * ${a}))`,height:0===A.current?"324px":"424px",transition:`transform ${q}ms linear,height ${q}ms linear`}:{},className:"questions"},v.map(((e,n)=>{return t.createElement("div",{className:"question-container",ref:F,id:e.title,key:e.title},t.createElement("div",{className:"question-text"},e.question.text),t.createElement(y,{question:e.question,formValues:m,autoFocus:T.current.name===e.name,onChangeHandler:n=>{B.current=!1,A.current=d.findIndex((n=>n.name===e.name)),T.current=e,U(e,n,E.includes(e.question.type_info.question_type)&&!j())}}),t.createElement("div",{className:"action-buttons"},(r=e.question,r.name===T.current.question.name&&!E.includes(r.type_info.question_type)&&!j()&&t.createElement(b,{onClick:()=>{B.current?(A.current=Math.min(A.current+1,v.length-1),T.current=v[n+1],R(A.current)):U(e,null,!0)},disabled:!m[T.current.question.name]||Array.isArray(m[T.current.question.name])&&0===m[T.current.question.name].length,className:"next-button"},"Next")),((e,n)=>"RANGE"!==n.type_info.question_type&&!n.required&&n.name===T.current.question.name&&!j())(0,e.question)&&t.createElement("button",{className:"skip-button",onClick:()=>D(0,e.question)},"Skip"),((e,n)=>"DROPDOWN"===n.type_info.question_type&&n.name!==T.current.question.name&&!n.required&&null!=m[n.name])(0,e.question)&&t.createElement("button",{className:"skip-button",onClick:()=>{T.current=e,A.current=d.findIndex((n=>n.name===e.name)),D(0,e.question)}},"Clear selection"),i&&(e=>j()&&e.name===T.current.question.name)(e.question)&&t.createElement("div",{className:"submit",style:{margin:"0 auto"}},t.createElement(b,{disabled:T.current.question.required&&void 0===m[T.current.question.name]||z,onClick:()=>{S(!0),o(m,(()=>{L?.type_info.meta?.skipThankYouPage||g(!0)}))}},z?"Submitting":"Submit Survey"))));var r})),!i&&j()&&t.createElement("div",{className:"submit"},t.createElement(b,{disabled:T.current.question.required&&void 0===m[T.current.question.name]||z,onClick:()=>{S(!0),o(m,(()=>{u||L?.type_info.meta?.skipThankYouPage&&(window.location.href=L?.type_info.meta?.redirectUrl)})),L?.type_info.meta?.skipThankYouPage||g(!0)}},z?"Submitting":"Submit Survey")))):null},exports.TRANSITION_DELAY=q,exports.TextArea=d;
package/lib/index.esm.js CHANGED
@@ -1 +1 @@
1
- import e,{useRef as n,forwardRef as t,useEffect as r,useState as o}from"react";import i from"react-dom";function a(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}a(".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 display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n.freemium-survey-components .nps-container .widget {\n position: relative;\n}\n.freemium-survey-components .nps-container .widget .button-container {\n display: flex;\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 .widget .positive-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .widget .negative-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .widget span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .widget 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 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 .widget button:hover {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .widget.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .widget.highlighted button:hover, .freemium-survey-components .nps-container .widget.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 .widget .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .widget.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .widget.standard .choice {\n color: #fff;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(1) {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(2) {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(3) {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(4) {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(5) {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(6) {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(7) {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(8) {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(9) {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(10) {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(11) {\n background: #1ebf31;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .widget .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .widget .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n}");const s=t=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:i,end:a},validation:{min:s},footer_text:c}}=t,l=e=>{switch(e){case e<4:return"detractor";case e<7: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"},e.createElement("div",{className:`widget ${r} ${o}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text"},i),e.createElement("div",{className:"choices"},u.current.map((n=>e.createElement("button",{key:n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${l(n)} ${t.npsValue===n&&"active"}`},n)))),e.createElement("span",{className:"positive-text"},a))),e.createElement("div",{className:"footer"},c))},c=(e,n)=>(e.defaultProps=n,e);a('.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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n border-radius: var(--border-radius, var(--default-border-radius));\n border: 1px solid var(--default-input-border-color);\n border: 1px solid var(--input-border-color, var(--default-input-border-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 var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\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-input-hover-border-color);\n border-color: var(--input-hover-border-color, var(--default-input-hover-border-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-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components input[type=text] {\n padding: 4px 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: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 4px 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: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea::placeholder {\n color: var(--input-placeholder-color);\n}');const l={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!0},u=t(((t,o)=>{const i=n(null);r((()=>{t.autoFocus&&setTimeout((()=>{i.current?.focus()}),_+20)}),[t.autoFocus]);const{inputStyle:a,style:s,className:c,showCount:l,isErrored:u,startLabel:d,isRequired:p,errorText:m,endLabel:h,maxLength:g,autoFocus:f,...v}=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:i,style:a},v)),l&&g>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${t.maxLength}`)),h&&e.createElement("div",{className:"end-label"},h)),u&&m&&e.createElement("span",{className:"input-error"},t.errorText))})),d=t(((t,o)=>{const i=n(null);r((()=>{console.log("props.autoFocus...",t.autoFocus),t.autoFocus&&setTimeout((()=>{i.current?.focus()}),_+20)}),[]);const{inputStyle:a,style:s,className:c,showCount:l,maxLength:u,isErrored:d,startLabel:p,isRequired:m,autoFocus:h,...g}=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:i,style:a},g)),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))})),p=c(u,l),m=c(d,l);a('.freemium-survey-components .checkbox-group {\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-input-highlight-color) 0px 0px 0px 2px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n opacity: 1;\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.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-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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"})),g=({values:n,options:t,onChangeHandler:r,autoFocus:o})=>e.createElement("div",{className:"checkbox-group"},t.map(((t,i)=>e.createElement(f,{key:t.value,checked:n?.includes(t.value),name:t.value,id:t.value,autoFocus:0===i&&o,onChange:(e,o)=>{if(o)r([...n||[],t.value]);else{const e=n.indexOf(t.value);e>-1&&n.splice(e,1),r([...n])}}},t.value)))),f=c((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),_+20)}),[]),e.createElement("label",{className:`checkbox-label ${t.disabled&&"disabled"}`},e.createElement("input",{ref:o,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("div",{className:"icon-container"},e.createElement(h,null)," ")),e.createElement("div",null,t.children))}),{checked:!1});a('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-input-border-color);\n border-color: var(--input-border-color, var(--default-input-border-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: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\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-input-highlight-color) 0px 0px 0px 3px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .radio-container:hover .radio {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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 v=({name:n,options:t,value:i,autoFocus:a,onChangeHandler:s,othersOption:c,othersRequired:l})=>{const[u,d]=o(""),[m,h]=o("");return r((()=>{i||(h(""),d(""))}),[i]),r((()=>{m&&t.find((e=>e.value===m))&&s(m)}),[m]),e.createElement("div",{className:"radio-group"},t.map(((t,r)=>e.createElement(x,{key:t.value,value:t.value,name:n,onChange:e=>{h(e.currentTarget.value)},autoFocus:0===r&&a,checked:m===t.value},t.value))),c&&e.createElement(x,{key:"others",value:"others",name:n,onChange:e=>{h("others")},checked:"others"===m},"others"),"others"===m&&e.createElement(e.Fragment,null,e.createElement(p,{placeholder:"",value:u,onChange:e=>d(e.target.value),label:""}),u!==i&&e.createElement(k,{disabled:l&&0===u.length,onClick:()=>s(u)},"Next")))},x=c((t=>{const o=n(null);return r((()=>{t.autoFocus&&setTimeout((()=>{o.current?.focus()}),_+20)}),[]),e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:o,type:"radio",name:t.name,value:t.value,checked:t.checked,onChange:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))}),{checked:!1,autoFocus:!1});a(".progressbar-container {\n width: 100%;\n height: 6px;\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:r}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(r>0?100/t:0)+"%",transform:`scaleX(${r})`}}))};a(".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: #fff;\n background: var(--default-primary-button-color);\n background: var(--primary-button-color, var(--default-primary-button-color));\n border: 1px solid var(--default-primary-button-color);\n border: 1px solid var(--primary-button-color, var(--default-primary-button-color));\n border-radius: 4px;\n min-width: 200px;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n background: var(--default-primary-button-hover-color);\n background: var(--primary-button-hover-color, var(--primary-button-color, var(--default-primary-button-hover-color)));\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}");const y=()=>e.createElement(e.Fragment,null,"..."),w={LARGE:"large",MINI:"mini",NORMAL:"normal"},k=n=>{const{inline:t=!1,children:r,disabled:o,className:i="",htmlType:a,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:o,className:`action-button ${i} ${u}`,type:a,onClick:c},p),d?e.createElement(y,null):r)},E=({question:n,formValues:t,onChangeHandler:r,autoFocus:o})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(s,{type_info:n.type_info,onChangeHandler:r,npsValue:t[n.name]});case"CHECKBOX":return e.createElement(g,{autoFocus:o,values:t[n.name],options:n.type_info.choices,onChangeHandler:r});case"RADIO":case"DROPDOWN":return e.createElement(v,{autoFocus:o,name:n.name,onChangeHandler:r,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(p,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]||"",onChange:e=>r(e.target.value)}),e.createElement(m,{autoFocus:o,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]||"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return e.createElement(m,{autoFocus:o,label:"",isRequired:n.is_required,value:t[n.name]||"",onChange:e=>r(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}};a(":root {\n --widget-container-width: 350px;\n --default-primary-button-color: #d72d30;\n --default-primary-button-hover-color: #f1171b;\n --default-brand-color: #264966;\n --default-input-highlight-color: #2c5cc5;\n --default-input-border-color: #92a2b1;\n --default-input-hover-border-color: #264966;\n --default-input-placeholder-color: #92a2b1;\n --default-border-radius: 4px;\n --default-background-color: #ebeff3;\n --default-error-highlight-color: #d72d30;\n}\n\n.freemium-survey-components .question-container {\n display: flex;\n flex-direction: column;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n align-items: center;\n background: #ffffff;\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);\n margin-bottom: 52px;\n padding: 28px;\n grid-gap: 36px;\n gap: 36px;\n position: relative;\n}\n.freemium-survey-components .question-text {\n font-size: 1rem;\n line-height: 1.5;\n}\n.freemium-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.freemium-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 1.2rem;\n line-height: 2;\n color: #12344d;\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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n position: absolute;\n right: 12px;\n font-weight: 300;\n font-size: 0.9rem;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 12px;\n border-radius: 4px;\n}\n.freemium-survey-components .skip-button:hover {\n text-decoration: underline;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .prev-button {\n display: none;\n}\n.freemium-survey-components .submit {\n padding-bottom: 40px;\n display: flex;\n justify-content: center;\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-components .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-components .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.widget-survey-components {\n display: flex;\n height: 100%;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n align-items: end;\n}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\n.widget-survey-components .question-container {\n box-shadow: none;\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n border-radius: 0;\n}\n.widget-survey-components .prev-button {\n border: none;\n background: transparent;\n position: absolute;\n left: 12px;\n display: inline;\n display: initial;\n cursor: pointer;\n padding: 12px;\n}\n.widget-survey-components .prev-button:hover {\n text-decoration: underline;\n}\n.widget-survey-components .submit {\n padding-bottom: 0;\n}\n\n.widget-survey-components.default-style .question-container {\n grid-gap: 12px;\n gap: 12px;\n padding: 0px 28px;\n}\n.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.widget-survey-components.default-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n}\n\n.widget-survey-components.cozy-style .question-container {\n grid-gap: 20px;\n gap: 20px;\n padding: 16px 28px;\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 .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 overflow: auto;\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 overflow: auto;\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: 84px;\n}\n.widget-survey-components.cozy-style .end-max-length {\n font-size: 0.8rem;\n font-weight: 300;\n}");const q=()=>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"})),N=["RANGE","NPS","RADIO","DROPDOWN"],_=200,z=1e4,L=({thankYouQuestion:n,preview:t})=>(r((()=>{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:"text"},n.text),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)))),$=({survey:t,onSubmit:a,widget:s,surveyContainerWidth:c="0px",npsValue:l,widgetStyle:u,widgetNavigatorQuerySelector:d,preview:p})=>{const{meta:{blocks:m},question_details:{questions:h}}=t,[g,f]=o({}),[v,x]=o(!1),[y,w]=o([]),[z,$]=o(0),[F,R]=o(!1),[O,S]=o(null),T=n(null),A=n(null),B=n(null),j=n(0),H=n(!1),I=n([]);r((()=>{if(m)if(A.current=h.find((e=>e.pivot_question))??h.find((e=>"RANGE"===e.type_info.question_type))??h[0],l){const e=h.find((e=>e.name===m[0].question_names[0]));T.current=m[0],I.current=[...I.current,{...m[0],question:e}],w(I.current),f({Q_1:l})}else if(!T.current&&m.length>0)return T.current=m[0],void D(m[0])}),[m,l]),r((()=>{s||B.current?.scrollIntoView({block:"center",behavior:"smooth"}),y.length&&(I.current=y),$(y.length-1)}),[y]),r((()=>{Object.keys(g).length>0&&T.current.question&&(N.includes(T.current.question.type_info.question_type)||H.current)&&!P()&&M()}),[g]),r((()=>{const e=m.find((e=>"T_1"===e.name));if(g?.[A.current?.name])if(e.is_based_on_score){const n=A.current?.type_info?.choices[g?.[A.current?.name]]?.dependent_question_names,t=e.question_names.find((e=>n?.includes(e))),r=h.find((e=>e.name===t));S(r)}else{const n=h.find((n=>n.name===e.question_names[0]));S(n)}}),[g?.[A.current?.name]]);const P=()=>j.current===m.filter((e=>"T_1"!==e.name)).length-1||"end"===T.current.branchOption,D=e=>{let n={};if(e.is_based_on_score){const t=A.current?.type_info?.choices[g?.[A.current?.name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===r))}else n=h.find((n=>n.name===e.question_names[0]));T.current.question=n;const t=I.current.find((e=>e.question.name===n.name));w(t?[...I.current]:[...I.current,{...e,question:n}])},M=()=>{if(P())x(!0);else{if(T.current.nextBlock)j.current=m.findIndex((e=>e.name===T.current.nextBlock));else if(T.current.question.type_info?.meta?.branches){const e=T.current.question.type_info?.meta?.branches,n=g[T.current.question.name];let t;t="RANGE"===T.current.type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock?j.current=m.findIndex((e=>e.name===t.nextBlock)):j.current+=1}else j.current+=1;T.current=m[j.current],D(m[j.current])}},U=(e,n)=>{H.current=!0,delete g[n.name],f({...g})},G=(e,n,t)=>{if(t)if(H.current=!0,null!=g[e.question.name]&&e.name!==y[y.length-1].name){const[t,r]=(e=>{const n=y.findIndex((n=>n.name===e.name)),t=y.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=g[n.question.name],e)),{});return j.current=m.findIndex((n=>n.name===e.name)),[t,r]})(e);f({...r,...null!=n&&{[e.question.name]:n}}),I.current=t}else f({...g,...null!=n&&{[e.question.name]:n}});else f({...g,...null!=n&&{[e.question.name]:n}})};return T.current&&T.current.question?v?e.createElement("div",{className:"freemium-survey-components "+(s?"widget-survey-components":"")},e.createElement(L,{thankYouQuestion:O,preview:p})):e.createElement("div",{className:`freemium-survey-components ${s?"widget-survey-components":""} ${u}-style`,style:{"--widget-container-width":c}},!s&&e.createElement(b,{totalSteps:m.length,completedSteps:j.current}),s&&document.querySelector(d)&&e.createElement(e.Fragment,null,i.createPortal(e.createElement("div",{className:"navigation","data-navigation-element":"1"},e.createElement("button",{style:0==j.current?{visibility:"hidden"}:{},className:"navigate-button",onClick:()=>{j.current=Math.max(j.current-1,0),$(j.current)}},e.createElement(C,null)),e.createElement("span",{className:"navigation-text"}," Question ",j.current+1," of"," ",y.length," ")," ",e.createElement("button",{className:"navigate-button",style:j.current>=y.length-1?{visibility:"hidden"}:{},onClick:()=>{j.current=Math.min(j.current+1,y.length-1),$(j.current)}},e.createElement(q,null))),document.querySelector(d))),e.createElement("div",{style:s?{transform:`translateX(calc(-${z} * ${c}))`,transition:`transform ${_}ms linear,height ${_}ms linear`}:{},className:"questions"},y.map(((n,t)=>{return e.createElement("div",{className:"question-container",ref:B,id:n.title,key:n.title},e.createElement("div",{className:"question-text"},n.question.text),e.createElement(E,{question:n.question,formValues:g,autoFocus:T.current.name===n.name,onChangeHandler:e=>{H.current=!1,j.current=m.findIndex((e=>e.name===n.name)),T.current=n,G(n,e,N.includes(n.question.type_info.question_type)&&!P())}}),e.createElement("div",{className:"action-buttons",style:s?{margin:"0 auto"}:{}},(r=n.question,r.name===T.current.question.name&&!N.includes(r.type_info.question_type)&&!P()&&e.createElement(k,{onClick:()=>{H.current?(j.current=Math.min(j.current+1,y.length-1),T.current=y[t+1],$(j.current)):G(n,null,!0)},disabled:!g[T.current.question.name]||Array.isArray(g[T.current.question.name])&&0===g[T.current.question.name].length,className:"next-button"},"Next")),((e,n)=>"RANGE"!==n.type_info.question_type&&!n.required&&n.name===T.current.question.name&&!P())(0,n.question)&&e.createElement("button",{className:"skip-button",onClick:()=>U(0,n.question)},"Skip"),((e,n)=>!("DROPDOWN"!==n.type_info.question_type||n.name===T.current.question.name||n.required||!g[n.name]))(0,n.question)&&e.createElement("button",{className:"skip-button",onClick:()=>{T.current=n,j.current=m.findIndex((e=>e.name===n.name)),U(0,n.question)}},"Clear selection"),s&&(e=>P()&&e.name===T.current.question.name)(n.question)&&e.createElement("div",{className:"submit",style:{margin:"0 auto"}},e.createElement(k,{disabled:T.current.question.required&&void 0===g[T.current.question.name]||F,onClick:()=>{R(!0),a(g,(()=>{O?.type_info.meta.skipThankYouPage||x(!0)}))}},F?"Submitting":"Submit Survey"))));var r})),!s&&P()&&e.createElement("div",{className:"submit"},e.createElement(k,{disabled:T.current.question.required&&void 0===g[T.current.question.name]||F,onClick:()=>{R(!0),a(g,(()=>{p||O?.type_info.meta.skipThankYouPage&&(window.location.href=O?.type_info.meta.redirectUrl)})),O?.type_info.meta.skipThankYouPage||x(!0)}},F?"Submitting":"Submit Survey")))):null};export{z as AUTO_REDIRECT_DELAY,w as BUTTON_SIZE_VARIANTS,k as Button,g as CheckboxGroup,p as Input,s as NPS,b as ProgressBar,x as Radio,v as RadioGroup,$ as Survey,_ as TRANSITION_DELAY,m as TextArea};
1
+ import e,{useRef as n,forwardRef as t,useEffect as o,useState as r}from"react";import i from"react-dom";function a(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))}}a(".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 display: flex;\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n.freemium-survey-components .nps-container .widget {\n position: relative;\n}\n.freemium-survey-components .nps-container .widget .button-container {\n display: flex;\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 .widget .positive-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n right: 0px;\n text-align: right;\n}\n.freemium-survey-components .nps-container .widget .negative-text {\n position: absolute;\n color: var(--color-elephant-500);\n bottom: -28px;\n left: 0;\n text-align: left;\n}\n.freemium-survey-components .nps-container .widget span {\n color: #aaa;\n font-size: 0.75rem;\n}\n.freemium-survey-components .nps-container .widget 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 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 .widget button:hover {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.2);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.square button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .widget.curved button {\n border-radius: 3px;\n}\n.freemium-survey-components .nps-container .widget.highlighted button:hover, .freemium-survey-components .nps-container .widget.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 .widget .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .widget.standard .button-container {\n background-color: transparent;\n}\n.freemium-survey-components .nps-container .widget.standard .choice {\n color: #fff;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(1) {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(2) {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(3) {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(4) {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(5) {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(6) {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(7) {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(8) {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(9) {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(10) {\n background: #37c248;\n}\n.freemium-survey-components .nps-container .widget.standard .choice:nth-child(11) {\n background: #1ebf31;\n}\n\n@media (max-width: 550px) {\n .freemium-survey-components .nps-container .widget .button-container {\n background: transparent;\n }\n .freemium-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n }\n}\n.widget-survey-components .nps-container .widget .button-container {\n background: transparent;\n}\n.widget-survey-components .nps-container .widget .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 .widget button {\n border-radius: 50%;\n background: #ebeff3;\n}");const s=t=>{const{type_info:{linear_scale:{button_shape:o,button_style:r},score_presets:{start:i,end:a},validation:{min:s},footer_text:c}}=t,l=e=>{switch(e){case e<4:return"detractor";case e<7: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"},e.createElement("div",{className:`widget ${o} ${r}`},e.createElement("div",{className:"button-container"},e.createElement("span",{className:"negative-text"},i),e.createElement("div",{className:"choices"},u.current.map((n=>e.createElement("button",{key:n,onClick:e=>{t.onChangeHandler(n)},className:`choice ${l(n)} ${t.npsValue===n&&"active"}`},n)))),e.createElement("span",{className:"positive-text"},a))),e.createElement("div",{className:"footer"},c))},c=(e,n)=>(e.defaultProps=n,e);a('.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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic {\n width: 100%;\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n border-radius: var(--border-radius, var(--default-border-radius));\n border: 1px solid var(--default-input-border-color);\n border: 1px solid var(--input-border-color, var(--default-input-border-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 var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components .input-basic.error:hover {\n border: 1px solid var(--default-error-highlight-color);\n border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));\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-input-hover-border-color);\n border-color: var(--input-hover-border-color, var(--default-input-hover-border-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-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .input-basic:focus-within {\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px var(--default-input-highlight-color);\n box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-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: var(--default-error-highlight-color);\n color: var(--error-highlight-color, var(--default-error-highlight-color));\n}\n.freemium-survey-components input[type=text] {\n padding: 4px 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: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]:-ms-input-placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components input[type=text]::placeholder {\n color: var(--default-input-placeholder-color);\n color: var(--input-placeholder-color, var(--default-input-placeholder-color));\n}\n.freemium-survey-components textarea {\n min-height: 116px;\n padding: 4px 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: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea:-ms-input-placeholder {\n color: var(--input-placeholder-color);\n}\n.freemium-survey-components textarea::placeholder {\n color: var(--input-placeholder-color);\n}');const l={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!0},u=t(((t,r)=>{const i=n(null);o((()=>{t.autoFocus&&setTimeout((()=>{i.current?.focus()}),_+20)}),[t.autoFocus]);const{inputStyle:a,style:s,className:c,showCount:l,isErrored:u,startLabel:d,isRequired:p,errorText:m,endLabel:h,maxLength:g,autoFocus:f,...v}=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:i,style:a},v)),l&&g>0&&e.createElement("div",{className:"end-max-length"},`${t.value&&t.value.length||0}/${t.maxLength}`)),h&&e.createElement("div",{className:"end-label"},h)),u&&m&&e.createElement("span",{className:"input-error"},t.errorText))})),d=t(((t,r)=>{const i=n(null);o((()=>{console.log("props.autoFocus...",t.autoFocus),t.autoFocus&&setTimeout((()=>{i.current?.focus()}),_+20)}),[]);const{inputStyle:a,style:s,className:c,showCount:l,maxLength:u,isErrored:d,startLabel:p,isRequired:m,autoFocus:h,...g}=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:i,style:a},g)),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))})),p=c(u,l),m=c(d,l);a('.freemium-survey-components .checkbox-group {\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-input-highlight-color) 0px 0px 0px 2px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 2px;\n border-color: transparent;\n}\n.freemium-survey-components .checkbox-label {\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n opacity: 1;\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.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-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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"})),g=({values:n=[],options:t,autoFocus:o,onChangeHandler:i,othersOption:a,othersRequired:s})=>{const c=(()=>{let e=-1;return n.map(((n,o)=>{const r=t.find((e=>e.value===n));return r||(e=o),r})),e})(),[l,u]=r(!1);return e.createElement("div",{className:"checkbox-group"},t.map(((t,r)=>e.createElement(f,{key:t.value,checked:n?.includes(t.value),name:t.value,id:t.value,autoFocus:0===r&&o,onChange:(e,o)=>{if(o)i([...n||[],t.value]);else{const e=n.indexOf(t.value);e>-1&&n.splice(e,1),i([...n])}}},t.value))),a&&e.createElement(f,{key:"others",checked:l,name:"others",id:"others",onChange:(e,n)=>{u(n)}},"Others"),l&&e.createElement(e.Fragment,null,e.createElement(p,{placeholder:"",value:n[c],onChange:e=>{-1!==c?(n[c]=e.target.value,i(n)):i(n.concat(e.target.value))},label:""})))},f=c((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),_+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});a('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n}\n.freemium-survey-components .radio {\n background-color: #fff;\n border: 1px solid;\n border-color: var(--default-input-border-color);\n border-color: var(--input-border-color, var(--default-input-border-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: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\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-input-highlight-color) 0px 0px 0px 3px;\n box-shadow: var(--input-highlight-color, var(--default-input-highlight-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-input-highlight-color);\n background-color: var(--input-highlight-color, var(--default-input-highlight-color));\n}\n.freemium-survey-components .radio-container:hover .radio {\n border-color: var(--default-input-highlight-color);\n border-color: var(--input-highlight-color, var(--default-input-highlight-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 v=({name:n,options:t,value:i,autoFocus:a,onChangeHandler:s,othersOption:c,othersRequired:l})=>{const[u,d]=r(""),[m,h]=r("");return o((()=>{i||(h(""),d(""))}),[i]),o((()=>{m&&t.find((e=>e.value===m))&&s(m)}),[m]),e.createElement("div",{className:"radio-group"},t.map(((t,o)=>e.createElement(x,{key:t.value,value:t.value,name:n,onChange:e=>{h(e.currentTarget.value)},autoFocus:0===o&&a,checked:m===t.value},t.value))),c&&e.createElement(x,{key:"others",value:"others",name:n,onChange:e=>{h("others")},checked:"others"===m},"others"),"others"===m&&e.createElement(e.Fragment,null,e.createElement(p,{placeholder:"",value:u,onChange:e=>d(e.target.value),label:""}),u!==i&&e.createElement(k,{disabled:l&&0===u.length,onClick:()=>s(u)},"Next")))},x=c((t=>{const r=n(null);return o((()=>{t.autoFocus&&setTimeout((()=>{r.current?.focus()}),_+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});a(".progressbar-container {\n width: 100%;\n height: 6px;\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})`}}))};a(".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: #fff;\n background: var(--default-primary-button-color);\n background: var(--primary-button-color, var(--default-primary-button-color));\n border: 1px solid var(--default-primary-button-color);\n border: 1px solid var(--primary-button-color, var(--default-primary-button-color));\n border-radius: 4px;\n min-width: 200px;\n}\n.freemium-survey-components .action-button:not([disabled]):hover {\n background: var(--default-primary-button-hover-color);\n background: var(--primary-button-hover-color, var(--primary-button-color, var(--default-primary-button-hover-color)));\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}");const y=()=>e.createElement(e.Fragment,null,"..."),w={LARGE:"large",MINI:"mini",NORMAL:"normal"},k=n=>{const{inline:t=!1,children:o,disabled:r,className:i="",htmlType:a,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 ${i} ${u}`,type:a,onClick:c},p),d?e.createElement(y,null):o)},E=({question:n,formValues:t,onChangeHandler:o,autoFocus:r})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(s,{type_info:n.type_info,onChangeHandler:o,npsValue:t[n.name]});case"CHECKBOX":return e.createElement(g,{autoFocus: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(v,{autoFocus: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(p,{autoFocus:r,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]||"",onChange:e=>o(e.target.value)}),e.createElement(m,{autoFocus:r,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(m,{autoFocus:r,label:"",isRequired:n.is_required,value:t[n.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${n.type_info.question_type} not found`),null}};a(":root {\n --widget-container-width: 350px;\n --default-primary-button-color: #d72d30;\n --default-primary-button-hover-color: #f1171b;\n --default-brand-color: #264966;\n --default-input-highlight-color: #2c5cc5;\n --default-input-border-color: #92a2b1;\n --default-input-hover-border-color: #264966;\n --default-input-placeholder-color: #92a2b1;\n --default-border-radius: 4px;\n --default-background-color: #ebeff3;\n --default-error-highlight-color: #d72d30;\n}\n\n.freemium-survey-components .question-container {\n display: flex;\n flex-direction: column;\n text-align: center;\n max-width: 700px;\n margin: 0 auto;\n align-items: center;\n background: #ffffff;\n border-radius: 4px;\n transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;\n box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);\n margin-bottom: 52px;\n padding: 28px;\n grid-gap: 36px;\n gap: 36px;\n position: relative;\n}\n.freemium-survey-components .question-text {\n font-size: 1rem;\n line-height: 1.5;\n}\n.freemium-survey-components .thankyou {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.freemium-survey-components .thankyou .text {\n white-space: pre-wrap;\n font-weight: 500;\n font-size: 1.2rem;\n line-height: 2;\n color: #12344d;\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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .action-buttons:empty {\n display: none;\n}\n.freemium-survey-components .skip-button {\n position: absolute;\n right: 12px;\n font-weight: 300;\n font-size: 0.9rem;\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 12px;\n border-radius: 4px;\n}\n.freemium-survey-components .skip-button:hover {\n text-decoration: underline;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .prev-button {\n display: none;\n}\n.freemium-survey-components .submit {\n padding-bottom: 40px;\n display: flex;\n justify-content: center;\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-components .responsive-text-field .input-container {\n display: none;\n }\n .freemium-survey-components .responsive-text-field .textarea-container {\n display: flex;\n }\n}\n.widget-survey-components {\n display: flex;\n flex-grow: 1;\n height: 100%;\n font-size: 0.875rem;\n overflow: hidden;\n}\n.widget-survey-components .textarea-container .end-max-length {\n padding: 4px;\n}\n.widget-survey-components .responsive-text-field .input-container {\n display: none;\n}\n.widget-survey-components .responsive-text-field .textarea-container {\n display: flex;\n}\n.widget-survey-components .questions {\n min-width: 100%;\n max-width: 100%;\n display: flex;\n height: 100%;\n align-items: end;\n}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n width: 100%;\n text-align: left;\n margin-bottom: 16px;\n}\n.widget-survey-components .question-container {\n box-shadow: none;\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n margin-bottom: 0;\n border-radius: 0;\n padding: 12px 16px;\n grid-gap: 0px;\n gap: 0px;\n}\n.widget-survey-components .prev-button {\n border: none;\n background: transparent;\n position: absolute;\n left: 12px;\n display: inline;\n display: initial;\n cursor: pointer;\n padding: 12px;\n}\n.widget-survey-components .prev-button:hover {\n text-decoration: underline;\n}\n.widget-survey-components .action-buttons {\n margin: 0px auto;\n margin-top: 16px;\n}\n.widget-survey-components .submit {\n padding-bottom: 0;\n}\n.widget-survey-components .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components .nps-container .widget .choices {\n grid-gap: 8px !important;\n gap: 8px !important;\n}\n.widget-survey-components .radio-group {\n overflow: auto;\n}\n.widget-survey-components .checkbox-group {\n overflow: auto;\n flex-wrap: nowrap;\n}\n\n.widget-survey-components.default-style .question-container {\n padding: 12px 28px;\n}\n.widget-survey-components.default-style .nps-container .footer {\n padding-top: 12px;\n}\n.widget-survey-components.default-style .action-button {\n line-height: 1.2;\n}\n.widget-survey-components.default-style .radio-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .radio-group .radio-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style .checkbox-group {\n flex-direction: row;\n flex-wrap: wrap;\n overflow: auto;\n}\n.widget-survey-components.default-style .checkbox-group .checkbox-label {\n padding: 12px 16px;\n min-width: 160px;\n font-size: 0.9rem;\n}\n.widget-survey-components.default-style textarea {\n min-height: 84px;\n}\n.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 .question-container {\n padding: 12px 28px;\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 .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 overflow: auto;\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 overflow: auto;\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}");const q=()=>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"})),N=["RANGE","NPS","RADIO","DROPDOWN"],_=200,z=1e4,L=({thankYouQuestion:n,preview:t})=>(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:"text"},n.text),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)))),R=({survey:t,onSubmit:a,widget:s,surveyContainerWidth:c="0px",npsValue:l,widgetStyle:u,widgetNavigatorQuerySelector:d,preview:p})=>{const{meta:{blocks:m},question_details:{questions:h}}=t,[g,f]=r({}),[v,x]=r(!1),[y,w]=r([]),[z,R]=r(0),[$,F]=r(!1),[O,S]=r(null),T=n(null),A=n(null),B=n(null),j=n(0),H=n(!1),I=n([]);o((()=>{if(m)if(A.current=h.find((e=>e.pivot_question))??h.find((e=>"RANGE"===e.type_info.question_type))??h[0],null!=l){const e=h.find((e=>e.name===m[0].question_names[0]));T.current={...m[0],question:e},I.current=[...I.current,{...m[0],question:e}],w(I.current),f({Q_1:l})}else if(!T.current&&m.length>0)return T.current=m[0],void D(m[0])}),[m,l]),o((()=>{s||B.current?.scrollIntoView({block:"center",behavior:"smooth"}),y.length&&(I.current=y),R(y.length-1)}),[y]),o((()=>{Object.keys(g).length>0&&T.current.question&&(N.includes(T.current.question.type_info.question_type)||H.current)&&!P()&&M()}),[g]),o((()=>{const e=m.find((e=>"T_1"===e.name));if(null!=g?.[A.current?.name])if(e.is_based_on_score){const n=A.current?.type_info?.choices[g?.[A.current?.name]]?.dependent_question_names,t=e.question_names.find((e=>n?.includes(e))),o=h.find((e=>e.name===t));S(o)}else{const e=h.find((e=>"T_3"==e.name));S(e)}}),[g?.[A.current?.name]]);const P=()=>j.current===m.filter((e=>"T_1"!==e.name)).length-1||"end"===T.current.branchOption,D=e=>{let n={};if(e.is_based_on_score){const t=A.current?.type_info?.choices[g?.[A.current?.name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=h.find((e=>e.name===o))}else n=h.find((n=>n.name===e.question_names[0]));T.current.question=n;const t=I.current.find((e=>e.question.name===n.name));w(t?[...I.current]:[...I.current,{...e,question:n}])},M=()=>{if(P())x(!0);else{if(T.current.nextBlock)j.current=m.findIndex((e=>e.name===T.current.nextBlock));else if(T.current.question.type_info?.meta?.branches){const e=T.current.question.type_info?.meta?.branches,n=g[T.current.question.name];let t;t="RANGE"===T.current.type?e.find((e=>n>=e.min&&n<=e.max)):e.find((e=>n===e.value)),t?.nextBlock?j.current=m.findIndex((e=>e.name===t.nextBlock)):j.current+=1}else j.current+=1;T.current=m[j.current],D(m[j.current])}},U=(e,n)=>{H.current=!0,delete g[n.name],f({...g})},G=(e,n,t)=>{if(t)if(H.current=!0,null!=g[e.question.name]&&e.name!==y[y.length-1].name){const[t,o]=(e=>{const n=y.findIndex((n=>n.name===e.name)),t=y.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=g[n.question.name],e)),{});return j.current=m.findIndex((n=>n.name===e.name)),[t,o]})(e);f({...o,...null!=n&&{[e.question.name]:n}}),I.current=t}else f({...g,...null!=n&&{[e.question.name]:n}});else f({...g,...null!=n&&{[e.question.name]:n}})};return T.current&&T.current.question?v?e.createElement("div",{className:"freemium-survey-components "+(s?"widget-survey-components":"")},e.createElement(L,{thankYouQuestion:O,preview:p})):e.createElement("div",{className:`freemium-survey-components ${s?"widget-survey-components":""} ${u}-style`,style:{"--widget-container-width":c}},!s&&e.createElement(b,{totalSteps:m.length,completedSteps:j.current}),s&&document.querySelector(d)&&e.createElement(e.Fragment,null,i.createPortal(e.createElement("div",{className:"navigation","data-navigation-element":"1"},e.createElement("button",{style:0==j.current?{visibility:"hidden"}:{},className:"navigate-button",onClick:()=>{j.current=Math.max(j.current-1,0),R(j.current)}},e.createElement(C,null)),e.createElement("span",{className:"navigation-text"}," Question ",j.current+1," of"," ",y.length," ")," ",e.createElement("button",{className:"navigate-button",style:j.current>=y.length-1?{visibility:"hidden"}:{},onClick:()=>{j.current=Math.min(j.current+1,y.length-1),R(j.current)}},e.createElement(q,null))),document.querySelector(d))),e.createElement("div",{style:s?{transform:`translateX(calc(-${z} * ${c}))`,height:0===j.current?"324px":"424px",transition:`transform ${_}ms linear,height ${_}ms linear`}:{},className:"questions"},y.map(((n,t)=>{return e.createElement("div",{className:"question-container",ref:B,id:n.title,key:n.title},e.createElement("div",{className:"question-text"},n.question.text),e.createElement(E,{question:n.question,formValues:g,autoFocus:T.current.name===n.name,onChangeHandler:e=>{H.current=!1,j.current=m.findIndex((e=>e.name===n.name)),T.current=n,G(n,e,N.includes(n.question.type_info.question_type)&&!P())}}),e.createElement("div",{className:"action-buttons"},(o=n.question,o.name===T.current.question.name&&!N.includes(o.type_info.question_type)&&!P()&&e.createElement(k,{onClick:()=>{H.current?(j.current=Math.min(j.current+1,y.length-1),T.current=y[t+1],R(j.current)):G(n,null,!0)},disabled:!g[T.current.question.name]||Array.isArray(g[T.current.question.name])&&0===g[T.current.question.name].length,className:"next-button"},"Next")),((e,n)=>"RANGE"!==n.type_info.question_type&&!n.required&&n.name===T.current.question.name&&!P())(0,n.question)&&e.createElement("button",{className:"skip-button",onClick:()=>U(0,n.question)},"Skip"),((e,n)=>"DROPDOWN"===n.type_info.question_type&&n.name!==T.current.question.name&&!n.required&&null!=g[n.name])(0,n.question)&&e.createElement("button",{className:"skip-button",onClick:()=>{T.current=n,j.current=m.findIndex((e=>e.name===n.name)),U(0,n.question)}},"Clear selection"),s&&(e=>P()&&e.name===T.current.question.name)(n.question)&&e.createElement("div",{className:"submit",style:{margin:"0 auto"}},e.createElement(k,{disabled:T.current.question.required&&void 0===g[T.current.question.name]||$,onClick:()=>{F(!0),a(g,(()=>{O?.type_info.meta?.skipThankYouPage||x(!0)}))}},$?"Submitting":"Submit Survey"))));var o})),!s&&P()&&e.createElement("div",{className:"submit"},e.createElement(k,{disabled:T.current.question.required&&void 0===g[T.current.question.name]||$,onClick:()=>{F(!0),a(g,(()=>{p||O?.type_info.meta?.skipThankYouPage&&(window.location.href=O?.type_info.meta?.redirectUrl)})),O?.type_info.meta?.skipThankYouPage||x(!0)}},$?"Submitting":"Submit Survey")))):null};export{z as AUTO_REDIRECT_DELAY,w as BUTTON_SIZE_VARIANTS,k as Button,g as CheckboxGroup,p as Input,s as NPS,b as ProgressBar,x as Radio,v as RadioGroup,R as Survey,_ as TRANSITION_DELAY,m as TextArea};
package/lib/types/components/checkbox/index.d.ts CHANGED
@@ -9,6 +9,8 @@ interface CheckboxGroupInterface {
9
9
  values: string[];
10
10
  onChangeHandler: (newValues: string[]) => void;
11
11
  autoFocus: boolean;
12
+ othersOption?: boolean;
13
+ othersRequired?: boolean;
12
14
  }
13
- declare const CheckboxGroup: ({ values, options, onChangeHandler, autoFocus, }: CheckboxGroupInterface) => JSX.Element;
15
+ declare const CheckboxGroup: ({ values, options, autoFocus, onChangeHandler, othersOption, othersRequired, }: CheckboxGroupInterface) => JSX.Element;
14
16
  export { CheckboxGroup };
package/lib/types/mock.d.ts CHANGED
@@ -51,10 +51,23 @@ declare const _default: {
51
51
  value: string;
52
52
  }[];
53
53
  footer_text: null;
54
+ meta: null;
55
+ pivot_question: boolean;
56
+ };
57
+ required: boolean;
58
+ } | {
59
+ id: string;
60
+ text: string;
61
+ name: string;
62
+ position: number;
63
+ type_info: {
64
+ question_type: string;
65
+ validation: null;
66
+ linear_scale: null;
67
+ score_presets: null;
68
+ choices: null;
69
+ footer_text: null;
54
70
  meta: {
55
- placeholder: string;
56
- othersOption: boolean;
57
- othersRequired: boolean;
58
71
  readOnly?: undefined;
59
72
  };
60
73
  pivot_question: boolean;
@@ -74,9 +87,6 @@ declare const _default: {
74
87
  footer_text: null;
75
88
  meta: {
76
89
  readOnly: boolean;
77
- placeholder?: undefined;
78
- othersOption?: undefined;
79
- othersRequired?: undefined;
80
90
  };
81
91
  pivot_question: boolean;
82
92
  };
@@ -86,11 +96,15 @@ declare const _default: {
86
96
  created_at: string;
87
97
  updated_at: string;
88
98
  gratitude_message: string;
89
- schedule_info: null;
99
+ schedule_info: {
100
+ start_date: string;
101
+ };
90
102
  throttle_info: null;
91
- contact_info: null;
103
+ contact_info: {
104
+ list_id: string;
105
+ };
92
106
  ui_branding: {
93
- logo_url: null;
107
+ logo_url: string;
94
108
  footer_html: string;
95
109
  };
96
110
  ui_theme: {
@@ -101,7 +115,7 @@ declare const _default: {
101
115
  secondary_background_color: null;
102
116
  primary_button_color: null;
103
117
  secondary_button_color: null;
104
- brand_color: null;
118
+ brand_color: string;
105
119
  primary_button_text_color: null;
106
120
  button_style: null;
107
121
  secondary_button_text_color: null;
@@ -110,7 +124,7 @@ declare const _default: {
110
124
  css_url: null;
111
125
  };
112
126
  meta: {
113
- blocks: {
127
+ blocks: ({
114
128
  name: string;
115
129
  title: string;
116
130
  order: number;
@@ -119,8 +133,22 @@ declare const _default: {
119
133
  required: boolean;
120
134
  is_based_on_score: boolean;
121
135
  is_same_for_all: boolean;
122
- jump_logic: null;
123
- }[];
136
+ question_score_category?: undefined;
137
+ } | {
138
+ name: string;
139
+ order: number;
140
+ type: string;
141
+ title: string;
142
+ question_names: string[];
143
+ question_score_category: {
144
+ promoter: string;
145
+ passive: string;
146
+ detractor: string;
147
+ };
148
+ required: boolean;
149
+ is_based_on_score: boolean;
150
+ is_same_for_all: boolean;
151
+ })[];
124
152
  };
125
153
  channels: string[];
126
154
  channel_info: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "freemium-survey-components",
3
- "version": "0.8.7",
3
+ "version": "0.8.11",
4
4
  "description": "React Survey Ui Components",
5
5
  "main": "lib/index.cjs.js",
6
6
  "module": "lib/index.esm.js",
package/lib/my-custom-file-name.css DELETED
@@ -1,705 +0,0 @@
1
- .freemium-survey-components .nps-container {
2
- margin: 0 auto;
3
- width: 100%;
4
- display: flex;
5
- flex-direction: column;
6
- grid-gap: 52px;
7
- gap: 52px;
8
- }
9
- .freemium-survey-components .nps-container .footer {
10
- border-top: 1px solid var(--default-background-color);
11
- border-top: 1px solid var(--background-color, var(--default-background-color));
12
- padding-top: 20px;
13
- display: flex;
14
- justify-content: center;
15
- font-size: 0.875rem;
16
- line-height: 1.5;
17
- }
18
- .freemium-survey-components .nps-container .widget {
19
- position: relative;
20
- }
21
- .freemium-survey-components .nps-container .widget .button-container {
22
- display: flex;
23
- justify-content: space-between;
24
- background: var(--default-background-color);
25
- background: var(--background-color, var(--default-background-color));
26
- }
27
- .freemium-survey-components .nps-container .widget .positive-text {
28
- position: absolute;
29
- color: var(--color-elephant-500);
30
- bottom: -28px;
31
- right: 0px;
32
- text-align: right;
33
- }
34
- .freemium-survey-components .nps-container .widget .negative-text {
35
- position: absolute;
36
- color: var(--color-elephant-500);
37
- bottom: -28px;
38
- left: 0;
39
- text-align: left;
40
- }
41
- .freemium-survey-components .nps-container .widget span {
42
- color: #aaa;
43
- font-size: 0.75rem;
44
- }
45
- .freemium-survey-components .nps-container .widget button {
46
- display: inline-block;
47
- font-size: 1rem;
48
- white-space: nowrap;
49
- vertical-align: middle;
50
- background: none;
51
- border: none;
52
- box-shadow: none;
53
- cursor: pointer;
54
- text-align: center;
55
- font-weight: 400;
56
- border-radius: 4px;
57
- margin: 0;
58
- outline: none;
59
- margin-left: -1px;
60
- width: 40px;
61
- height: 40px;
62
- transform: scale(1);
63
- 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);
64
- }
65
- .freemium-survey-components .nps-container .widget button:hover {
66
- color: white;
67
- transform: scale(1.15);
68
- z-index: 2;
69
- position: relative;
70
- }
71
- .freemium-survey-components .nps-container .widget button.active {
72
- color: white;
73
- transform: scale(1.15);
74
- z-index: 2;
75
- position: relative;
76
- }
77
- .freemium-survey-components .nps-container .widget.highlighted button:hover, .freemium-survey-components .nps-container .widget.highlighted button.active {
78
- background: var(--default-brand-color) !important;
79
- background: var(--brand-color, var(--default-brand-color)) !important;
80
- }
81
- .freemium-survey-components .nps-container .widget.rounded button {
82
- border-radius: 50%;
83
- }
84
- .freemium-survey-components .nps-container .widget.rounded.boxed button {
85
- border-radius: 0;
86
- }
87
- .freemium-survey-components .nps-container .choices {
88
- width: 100%;
89
- display: flex;
90
- justify-content: space-between;
91
- }
92
- .freemium-survey-components .nps-container .choice:nth-child(1).active, .freemium-survey-components .nps-container .choice:nth-child(1):hover {
93
- background: #eb5b56;
94
- }
95
- .freemium-survey-components .nps-container .choice:nth-child(2).active, .freemium-survey-components .nps-container .choice:nth-child(2):hover {
96
- background: #fb8774;
97
- }
98
- .freemium-survey-components .nps-container .choice:nth-child(3).active, .freemium-survey-components .nps-container .choice:nth-child(3):hover {
99
- background: #f58f6b;
100
- }
101
- .freemium-survey-components .nps-container .choice:nth-child(4).active, .freemium-survey-components .nps-container .choice:nth-child(4):hover {
102
- background: #f6996a;
103
- }
104
- .freemium-survey-components .nps-container .choice:nth-child(5).active, .freemium-survey-components .nps-container .choice:nth-child(5):hover {
105
- background: #eab268;
106
- }
107
- .freemium-survey-components .nps-container .choice:nth-child(6).active, .freemium-survey-components .nps-container .choice:nth-child(6):hover {
108
- background: #cebb69;
109
- }
110
- .freemium-survey-components .nps-container .choice:nth-child(7).active, .freemium-survey-components .nps-container .choice:nth-child(7):hover {
111
- background: #bdc46c;
112
- }
113
- .freemium-survey-components .nps-container .choice:nth-child(8).active, .freemium-survey-components .nps-container .choice:nth-child(8):hover {
114
- background: #a4cd72;
115
- }
116
- .freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {
117
- background: #77c955;
118
- }
119
- .freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {
120
- background: #37c248;
121
- }
122
-
123
- @media (max-width: 550px) {
124
- .freemium-survey-components .nps-container .widget .button-container {
125
- background: transparent;
126
- }
127
- .freemium-survey-components .nps-container .widget .choices {
128
- flex-wrap: wrap;
129
- justify-content: center;
130
- grid-gap: 16px;
131
- gap: 16px;
132
- background: transparent;
133
- }
134
- .freemium-survey-components .nps-container .widget button {
135
- border-radius: 50%;
136
- background: #ebeff3;
137
- }
138
- }
139
- .widget-survey-components .nps-container .widget .button-container {
140
- background: transparent;
141
- }
142
- .widget-survey-components .nps-container .widget .choices {
143
- flex-wrap: wrap;
144
- justify-content: center;
145
- grid-gap: 16px;
146
- gap: 16px;
147
- background: transparent;
148
- }
149
- .widget-survey-components .nps-container .widget button {
150
- border-radius: 50%;
151
- background: #ebeff3;
152
- }
153
- .freemium-survey-components .input-container,
154
- .freemium-survey-components .textarea-container {
155
- display: flex;
156
- flex-direction: column;
157
- width: 100%;
158
- border-radius: 4px;
159
- position: relative;
160
- }
161
- .freemium-survey-components label.input-label {
162
- display: inline-block;
163
- padding-bottom: 8px;
164
- padding-left: 2px;
165
- font-size: 0.75rem;
166
- font-weight: 400;
167
- }
168
- .freemium-survey-components label.required::after {
169
- content: "*";
170
- position: relative;
171
- top: 2px;
172
- font-weight: 500;
173
- font-size: 0.85rem;
174
- padding-left: 3px;
175
- color: var(--default-error-highlight-color);
176
- color: var(--error-highlight-color, var(--default-error-highlight-color));
177
- }
178
- .freemium-survey-components .input-basic {
179
- width: 100%;
180
- display: flex;
181
- align-items: center;
182
- border-radius: var(--default-border-radius);
183
- border-radius: var(--border-radius, var(--default-border-radius));
184
- border: 1px solid var(--default-input-border-color);
185
- border: 1px solid var(--input-border-color, var(--default-input-border-color));
186
- transition: border-color 0.2s linear;
187
- background: #fff;
188
- }
189
- .freemium-survey-components .textarea-container .input-basic {
190
- flex-direction: column;
191
- align-items: unset;
192
- }
193
- .freemium-survey-components .input-basic.error {
194
- border: 1px solid var(--default-error-highlight-color);
195
- border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));
196
- }
197
- .freemium-survey-components .input-basic.error:hover {
198
- border: 1px solid var(--default-error-highlight-color);
199
- border: 1px solid var(--error-highlight-color, var(--default-error-highlight-color));
200
- }
201
- .freemium-survey-components .input-basic.error[focus-within] {
202
- box-shadow: none;
203
- }
204
- .freemium-survey-components .input-basic.error:focus-within {
205
- box-shadow: none;
206
- }
207
- .freemium-survey-components .input-basic:hover {
208
- border-color: var(--default-input-hover-border-color);
209
- border-color: var(--input-hover-border-color, var(--default-input-hover-border-color));
210
- transition: 0.2s linear;
211
- }
212
- .freemium-survey-components .input-basic[focus-within] {
213
- border: 1px solid transparent;
214
- box-shadow: 0 0 0 2px var(--default-input-highlight-color);
215
- box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));
216
- }
217
- .freemium-survey-components .input-basic:focus-within {
218
- border: 1px solid transparent;
219
- box-shadow: 0 0 0 2px var(--default-input-highlight-color);
220
- box-shadow: 0 0 0 2px var(--input-highlight-color, var(--default-input-highlight-color));
221
- }
222
- .freemium-survey-components .end-max-length {
223
- padding: 0 8px;
224
- font-size: 0.85rem;
225
- }
226
- .freemium-survey-components .textarea-container .end-max-length {
227
- padding: 8px;
228
- align-self: flex-end;
229
- }
230
- .freemium-survey-components span.input-error {
231
- display: block;
232
- padding-left: 2px;
233
- padding-top: 4px;
234
- font-size: 0.9rem;
235
- color: var(--default-error-highlight-color);
236
- color: var(--error-highlight-color, var(--default-error-highlight-color));
237
- }
238
- .freemium-survey-components input[type=text] {
239
- padding: 4px 12px;
240
- flex: 1;
241
- border: unset;
242
- height: 32px;
243
- font-size: 1rem;
244
- /* line-height: ${typography.input.text.lineHeight}; */
245
- border-radius: 4px;
246
- }
247
- .freemium-survey-components input[type=text],
248
- .freemium-survey-components textarea {
249
- outline: none;
250
- border: none;
251
- }
252
- .freemium-survey-components input[type=text]::-moz-placeholder {
253
- color: var(--default-input-placeholder-color);
254
- color: var(--input-placeholder-color, var(--default-input-placeholder-color));
255
- }
256
- .freemium-survey-components input[type=text]:-ms-input-placeholder {
257
- color: var(--default-input-placeholder-color);
258
- color: var(--input-placeholder-color, var(--default-input-placeholder-color));
259
- }
260
- .freemium-survey-components input[type=text]::placeholder {
261
- color: var(--default-input-placeholder-color);
262
- color: var(--input-placeholder-color, var(--default-input-placeholder-color));
263
- }
264
- .freemium-survey-components textarea {
265
- min-height: 116px;
266
- padding: 4px 12px;
267
- flex: 1;
268
- border: unset;
269
- resize: none;
270
- font-size: 1rem;
271
- /* line-height: ${typography.input.text.lineHeight}; */
272
- border-radius: 4px;
273
- }
274
- .freemium-survey-components textarea::-moz-placeholder {
275
- color: var(--input-placeholder-color);
276
- }
277
- .freemium-survey-components textarea:-ms-input-placeholder {
278
- color: var(--input-placeholder-color);
279
- }
280
- .freemium-survey-components textarea::placeholder {
281
- color: var(--input-placeholder-color);
282
- }
283
- .freemium-survey-components .checkbox-group {
284
- display: flex;
285
- grid-gap: 12px;
286
- gap: 12px;
287
- flex-direction: column;
288
- white-space: nowrap;
289
- flex-wrap: wrap;
290
- }
291
- .freemium-survey-components .icon-container {
292
- display: inline-block;
293
- flex: 0 0 12px;
294
- width: 12px;
295
- height: 12px;
296
- min-width: 12px;
297
- min-height: 12px;
298
- color: inherit;
299
- position: absolute;
300
- left: 1px;
301
- top: 2px;
302
- }
303
- .freemium-survey-components .tick-icon {
304
- position: absolute;
305
- top: 0;
306
- right: 0;
307
- bottom: 0;
308
- left: 0;
309
- height: 100%;
310
- width: 100%;
311
- color: inherit;
312
- fill: currentColor;
313
- }
314
- .freemium-survey-components input[type=checkbox] {
315
- position: absolute;
316
- clip: rect(0px 0px 0px 0px);
317
- width: 0px;
318
- height: 0px;
319
- }
320
- .freemium-survey-components input[type=checkbox]:focus ~ .checkbox {
321
- /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */
322
- box-shadow: var(--default-input-highlight-color) 0px 0px 0px 2px;
323
- box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 2px;
324
- border-color: transparent;
325
- }
326
- .freemium-survey-components .checkbox-label {
327
- display: flex;
328
- align-items: center;
329
- -webkit-user-select: none;
330
- -moz-user-select: none;
331
- -ms-user-select: none;
332
- user-select: none;
333
- opacity: 1;
334
- cursor: pointer;
335
- font-size: 1rem;
336
- padding: 16px 24px;
337
- min-width: 200px;
338
- border: 1px solid #ebeff3;
339
- box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);
340
- border-radius: 4px;
341
- white-space: pre-wrap;
342
- }
343
- .freemium-survey-components .checkbox-label.disabled {
344
- opacity: 0.5;
345
- cursor: "not-allowed";
346
- }
347
- .freemium-survey-components .checkbox {
348
- transition: background-color ease-in 0.2s;
349
- min-width: 14px;
350
- min-height: 14px;
351
- min-height: 14px;
352
- max-height: 14px;
353
- border-radius: 2px;
354
- position: relative;
355
- margin-right: 16px;
356
- background-color: #fff;
357
- border: 1px solid;
358
- text-align: left;
359
- border-color: var(--default-input-highlight-color);
360
- border-color: var(--input-highlight-color, var(--default-input-highlight-color));
361
- }
362
- .freemium-survey-components .checkbox:hover {
363
- border-color: var(--default-input-highlight-color);
364
- border-color: var(--input-highlight-color, var(--default-input-highlight-color));
365
- box-shadow: var(--default-background-color) 0px 0px 0px 5px;
366
- box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;
367
- }
368
- .freemium-survey-components input[type=checkbox]:checked ~ .checkbox {
369
- background-color: var(--default-input-highlight-color);
370
- background-color: var(--input-highlight-color, var(--default-input-highlight-color));
371
- border-color: var(--default-input-highlight-color);
372
- border-color: var(--input-highlight-color, var(--default-input-highlight-color));
373
- }
374
- .freemium-survey-components input[type=checkbox]:checked ~ .checkbox:hover {
375
- border-color: var(--default-input-highlight-color);
376
- border-color: var(--input-highlight-color, var(--default-input-highlight-color));
377
- }
378
- .freemium-survey-components input[type=checkbox]:disabled ~ .checkbox:hover {
379
- box-shadow: unset;
380
- border-color: unset;
381
- }
382
- .freemium-survey-components .radio-group {
383
- display: flex;
384
- grid-gap: 12px;
385
- gap: 12px;
386
- white-space: nowrap;
387
- flex-direction: column;
388
- }
389
- .freemium-survey-components .radio {
390
- background-color: #fff;
391
- border: 1px solid;
392
- border-color: var(--default-input-border-color);
393
- border-color: var(--input-border-color, var(--default-input-border-color));
394
- transition: background-color ease-in 0.2s;
395
- min-width: 18px;
396
- max-width: 18px;
397
- min-height: 18px;
398
- max-height: 18px;
399
- border-radius: 50%;
400
- position: relative;
401
- margin-right: 16px;
402
- text-align: left;
403
- }
404
- .freemium-survey-components .radio:before {
405
- left: 3px;
406
- top: 3px;
407
- content: "";
408
- position: absolute;
409
- width: 10px;
410
- height: 10px;
411
- border-radius: 50%;
412
- transition: all ease-in 0.2s;
413
- background-color: #fff;
414
- }
415
- .freemium-survey-components .radio-label {
416
- display: flex;
417
- align-items: center;
418
- -webkit-user-select: none;
419
- -moz-user-select: none;
420
- -ms-user-select: none;
421
- user-select: none;
422
- cursor: pointer;
423
- font-size: 1rem;
424
- font-weight: 400;
425
- padding: 16px 24px;
426
- min-width: 200px;
427
- border: 1px solid #ebeff3;
428
- box-shadow: 0px 2px 5px rgba(18, 52, 77, 0.06);
429
- border-radius: 4px;
430
- white-space: pre-wrap;
431
- }
432
- .freemium-survey-components input[type=radio] {
433
- position: absolute;
434
- clip: rect(0, 0, 0, 0);
435
- width: 0px;
436
- height: 0px;
437
- }
438
- .freemium-survey-components input[type=radio]:focus ~ .radio {
439
- /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */
440
- box-shadow: var(--default-input-highlight-color) 0px 0px 0px 3px;
441
- box-shadow: var(--input-highlight-color, var(--default-input-highlight-color)) 0px 0px 0px 3px;
442
- border-color: transparent;
443
- }
444
- .freemium-survey-components input[type=radio]:checked ~ .radio:before {
445
- background-color: var(--default-input-highlight-color);
446
- background-color: var(--input-highlight-color, var(--default-input-highlight-color));
447
- }
448
- .freemium-survey-components .radio-container:hover .radio {
449
- border-color: var(--default-input-highlight-color);
450
- border-color: var(--input-highlight-color, var(--default-input-highlight-color));
451
- box-shadow: var(--default-background-color) 0px 0px 0px 5px;
452
- box-shadow: var(--background-color, var(--default-background-color)) 0px 0px 0px 5px;
453
- }
454
- .progressbar-container {
455
- width: 100%;
456
- height: 6px;
457
- position: fixed;
458
- top: 0;
459
- left: 0;
460
- z-index: 1;
461
- text-align: left;
462
- }
463
-
464
- .progressbar {
465
- transition: transform 0.25s linear;
466
- transform-origin: left;
467
- height: 100%;
468
- background-color: var(--default-brand-color);
469
- background-color: var(--brand-color, var(--default-brand-color));
470
- }
471
- .freemium-survey-components .action-button {
472
- width: auto;
473
- display: block;
474
- padding: 8px 16px;
475
- cursor: pointer;
476
- line-height: 1.5;
477
- text-align: center;
478
- font-weight: 500;
479
- letter-spacing: 0.3px;
480
- border-radius: 4px;
481
- white-space: nowrap;
482
- -webkit-user-select: none;
483
- -moz-user-select: none;
484
- -ms-user-select: none;
485
- user-select: none;
486
- color: #fff;
487
- background: var(--default-primary-button-color);
488
- background: var(--primary-button-color, var(--default-primary-button-color));
489
- border: 1px solid var(--default-primary-button-color);
490
- border: 1px solid var(--primary-button-color, var(--default-primary-button-color));
491
- border-radius: 4px;
492
- min-width: 200px;
493
- }
494
- .freemium-survey-components .action-button:not([disabled]):hover {
495
- background: var(--default-primary-button-hover-color);
496
- background: var(--primary-button-hover-color, var(--primary-button-color, var(--default-primary-button-hover-color)));
497
- }
498
- .freemium-survey-components .action-button[disabled] {
499
- cursor: not-allowed;
500
- opacity: 0.6;
501
- }
502
- .freemium-survey-components button:focus:not(:active) {
503
- /* box-shadow: 0 0 0 2px ${pseudo.focus}; */
504
- }
505
-
506
- @media (max-width: 550px) {
507
- .freemium-survey-components .action-button {
508
- min-width: 120px;
509
- }
510
- }
511
- .widget-survey-components .action-button {
512
- min-width: 120px;
513
- }
514
- :root {
515
- --widget-container-width: 350px;
516
- --default-primary-button-color: #d72d30;
517
- --default-primary-button-hover-color: #f1171b;
518
- --default-brand-color: #264966;
519
- --default-input-highlight-color: #2c5cc5;
520
- --default-input-border-color: #92a2b1;
521
- --default-input-hover-border-color: #264966;
522
- --default-input-placeholder-color: #92a2b1;
523
- --default-border-radius: 4px;
524
- --default-background-color: #ebeff3;
525
- --default-error-highlight-color: #d72d30;
526
- }
527
-
528
- .freemium-survey-components .question-container {
529
- display: flex;
530
- flex-direction: column;
531
- text-align: center;
532
- max-width: 700px;
533
- margin: 0 auto;
534
- align-items: center;
535
- background: #ffffff;
536
- border-radius: 4px;
537
- transition: transform 500ms ease 0ms, opacity 200ms ease 0ms;
538
- box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.1);
539
- margin-bottom: 52px;
540
- padding: 28px;
541
- grid-gap: 36px;
542
- gap: 36px;
543
- position: relative;
544
- }
545
- .freemium-survey-components .question-text {
546
- font-size: 1rem;
547
- line-height: 1.5;
548
- }
549
- .freemium-survey-components .thankyou .text {
550
- white-space: pre-wrap;
551
- font-weight: 500;
552
- font-size: 1.2rem;
553
- line-height: 2;
554
- color: #12344d;
555
- }
556
- .freemium-survey-components .thankyou .redirection-text {
557
- color: #929292;
558
- margin-bottom: 12px;
559
- font-weight: 300;
560
- }
561
- .freemium-survey-components .thankyou .link {
562
- width: 100%;
563
- display: inline-block;
564
- overflow: hidden;
565
- text-overflow: ellipsis;
566
- white-space: nowrap;
567
- color: #666;
568
- font-weight: 500;
569
- text-decoration: underline;
570
- }
571
- .freemium-survey-components .action-buttons {
572
- display: flex;
573
- justify-content: center;
574
- width: 100%;
575
- align-items: center;
576
- }
577
- .freemium-survey-components .action-buttons:empty {
578
- display: none;
579
- }
580
- .freemium-survey-components .skip-button {
581
- position: absolute;
582
- right: 12px;
583
- font-weight: 300;
584
- font-size: 0.9rem;
585
- cursor: pointer;
586
- background: transparent;
587
- border: none;
588
- min-width: 40px;
589
- padding: 12px;
590
- border-radius: 4px;
591
- }
592
- .freemium-survey-components .skip-button:hover {
593
- text-decoration: underline;
594
- }
595
- .freemium-survey-components .next-button {
596
- margin: 0 auto;
597
- }
598
- .freemium-survey-components .prev-button {
599
- display: none;
600
- }
601
- .freemium-survey-components .submit {
602
- padding-bottom: 40px;
603
- display: flex;
604
- justify-content: center;
605
- }
606
- .freemium-survey-components .responsive-text-field {
607
- width: 100%;
608
- }
609
- .freemium-survey-components .responsive-text-field .textarea-container {
610
- display: none;
611
- }
612
- .freemium-survey-components .message-container:empty {
613
- display: none;
614
- }
615
-
616
- @media (max-width: 550px) {
617
- .freemium-survey-components .responsive-text-field .input-container {
618
- display: none;
619
- }
620
- .freemium-survey-components .responsive-text-field .textarea-container {
621
- display: flex;
622
- }
623
- }
624
- .widget-survey-components {
625
- display: flex;
626
- height: 100%;
627
- font-size: 0.875rem;
628
- overflow: hidden;
629
- }
630
- .widget-survey-components .responsive-text-field .input-container {
631
- display: none;
632
- }
633
- .widget-survey-components .responsive-text-field .textarea-container {
634
- display: flex;
635
- }
636
- .widget-survey-components .questions {
637
- min-width: 100%;
638
- max-width: 100%;
639
- display: flex;
640
- height: 100%;
641
- align-items: end;
642
- }
643
- .widget-survey-components .question-text {
644
- font-size: 0.875rem;
645
- }
646
- .widget-survey-components .question-container {
647
- box-shadow: none;
648
- height: 100%;
649
- min-width: 100%;
650
- max-width: 100%;
651
- margin-bottom: 0;
652
- border-radius: 0;
653
- }
654
- .widget-survey-components .prev-button {
655
- border: none;
656
- background: transparent;
657
- position: absolute;
658
- left: 12px;
659
- display: inline;
660
- display: initial;
661
- cursor: pointer;
662
- padding: 12px;
663
- }
664
- .widget-survey-components .prev-button:hover {
665
- text-decoration: underline;
666
- }
667
- .widget-survey-components .submit {
668
- padding-bottom: 0;
669
- }
670
-
671
- .widget-survey-components.default-style .question-container {
672
- grid-gap: 24px;
673
- gap: 24px;
674
- padding: 16px 28px;
675
- }
676
- .widget-survey-components.default-style .action-button {
677
- line-height: 1.2;
678
- }
679
- .widget-survey-components.default-style .radio-group {
680
- flex-direction: row;
681
- flex-wrap: wrap;
682
- overflow: auto;
683
- }
684
- .widget-survey-components.default-style .radio-group .radio-label {
685
- padding: 12px 16px;
686
- min-width: 160px;
687
- font-size: 0.9rem;
688
- }
689
- .widget-survey-components.default-style .checkbox-group {
690
- flex-direction: row;
691
- flex-wrap: wrap;
692
- overflow: auto;
693
- }
694
- .widget-survey-components.default-style .checkbox-group .checkbox-label {
695
- padding: 12px 16px;
696
- min-width: 160px;
697
- font-size: 0.9rem;
698
- }
699
- .widget-survey-components.default-style textarea {
700
- min-height: 84px;
701
- }
702
- .widget-survey-components.default-style .end-max-length {
703
- font-size: 0.8rem;
704
- font-weight: 300;
705
- }