npm - freemium-survey-components - Versions diffs - 0.6.2 → 0.7.0 - Mend

freemium-survey-components 0.6.2 → 0.7.0

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 (4) hide show

package/lib/index.cjs.js +1 -1
package/lib/index.esm.js +1 -1
package/lib/types/survey/index.d.ts +3 -1
package/package.json +1 -1

package/lib/index.cjs.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),r=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function o(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head\|\|document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.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.75rem;\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}\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.15);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.15);\n z-index: 2;\n position: relative;\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.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.rounded.boxed button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .choice:nth-child(1).active, .freemium-survey-components .nps-container .choice:nth-child(1):hover {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .choice:nth-child(2).active, .freemium-survey-components .nps-container .choice:nth-child(2):hover {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .choice:nth-child(3).active, .freemium-survey-components .nps-container .choice:nth-child(3):hover {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .choice:nth-child(4).active, .freemium-survey-components .nps-container .choice:nth-child(4):hover {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .choice:nth-child(5).active, .freemium-survey-components .nps-container .choice:nth-child(5):hover {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .choice:nth-child(6).active, .freemium-survey-components .nps-container .choice:nth-child(6):hover {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .choice:nth-child(7).active, .freemium-survey-components .nps-container .choice:nth-child(7):hover {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .choice:nth-child(8).active, .freemium-survey-components .nps-container .choice:nth-child(8):hover {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #37c248;\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}");const t=e=>{const{type_info:{linear_scale:{button_shape:o,button_style:t},score_presets:{start:i,end:a},validation:{min:c},footer_text:l}}=e,s=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},u=n.useRef(Array.from({length:10},((e,n)=>n+c)));return r.createElement("div",{className:"nps-container"},r.createElement("div",{className:`widget ${o} ${t}`},r.createElement("div",{className:"button-container"},r.createElement("span",{className:"negative-text"},i),r.createElement("div",{className:"choices"},u.current.map((n=>r.createElement("button",{key:n,onClick:r=>{e.onChangeHandler(n)},className:`choice ${s(n)} ${e.npsValue===n&&"active"}`},n)))),r.createElement("span",{className:"positive-text"},a))),r.createElement("div",{className:"footer"},l))},i=(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 a={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!1},c=n.forwardRef(((e,n)=>{const{inputStyle:o,style:t,className:i,showCount:a,isErrored:c,startLabel:l,isRequired:s,errorText:u,endLabel:p,maxLength:d,...m}=e;return console.log(e.value),r.createElement("div",{className:"input-container",style:t},e.label&&r.createElement("label",{className:"input-label "+(s?"required":"")},e.label),r.createElement("div",null,l&&r.createElement("div",{className:"start-label"},l),r.createElement("div",{className:`input-basic ${c?"error":""}${i\|\|""}`},r.createElement("input",Object.assign({type:"text",autoComplete:"off"},m,{ref:n,style:o})),a&&d>0&&r.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${e.maxLength}`)),p&&r.createElement("div",{className:"end-label"},p)),c&&u&&r.createElement("span",{className:"input-error"},e.errorText))})),l=n.forwardRef(((e,n)=>{const{inputStyle:o,style:t,className:i,showCount:a,maxLength:c,isErrored:l,startLabel:s,isRequired:u,...p}=e;return console.log(e.value),r.createElement(r.Fragment,null,r.createElement("div",{className:"textarea-container",style:t},e.label&&r.createElement("label",{className:"input-label "+(u?"required":"")},e.label),s&&r.createElement("div",{className:"start-label"},s),r.createElement("div",{className:`input-basic ${l?"error":""} ${i\|\|""}`},r.createElement("textarea",Object.assign({autoComplete:"off"},p,{ref:n,style:o})),a&&c&&c>0&&r.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${e.maxLength}`)),e.endLabel&&r.createElement("div",{className:"end-label"},e.endLabel)),e.isErrored&&e.errorText&&r.createElement("span",{className:"input-error"},e.errorText))})),s=i(c,a),u=i(l,a);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: 10px;\n background-color: #fff;\n border: 1px solid;\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=()=>r.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},r.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"})),d=({values:e,options:n,onChangeHandler:o})=>r.createElement("div",{className:"checkbox-group"},n.map(((n,t)=>r.createElement(m,{key:n.id,checked:e?.includes(n.id),name:n.name??n.id,id:n.id,autoFocus:0===t,onChange:(r,t)=>{if(t)o([...e\|\|[],n.id]);else{const r=e.indexOf(n.id);r>-1&&e.splice(r,1),o([...e])}}},n.label)))),m=i(n.forwardRef(((e,n)=>r.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},r.createElement("input",{ref:n,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,autoFocus:e.autoFocus,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),r.createElement("div",{className:"checkbox"},e.checked&&r.createElement("div",{className:"icon-container"},r.createElement(p,null)," ")),r.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: 12px;\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 h=({name:e,options:n,value:o,onChangeHandler:t})=>r.createElement("div",{className:"radio-group"},n.map(((n,i)=>r.createElement(f,{key:n.id,value:n.id,name:e,onChange:e=>{t(e.currentTarget.value)},autoFocus:0===i,checked:o===n.id},n.label)))),f=i(n.forwardRef(((e,n)=>r.createElement("label",{className:"radio-label"},r.createElement("input",{ref:n,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange,autoFocus:e.autoFocus}),r.createElement("div",{className:"radio"}),r.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}\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=e=>{const{totalSteps:n,completedSteps:o}=e;return r.createElement("div",{className:"progressbar-container"},r.createElement("div",{className:"progressbar",style:{width:(o>0?100/n:0)+"%",transform:`scaleX(${o})`}}))};o(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n margin: 0;\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@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\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}\n.freemium-survey-components button:focus:not(:active) {\n border: 1px solid transparent;\n / box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}");const v=()=>r.createElement(r.Fragment,null,"..."),x=e=>{const{inline:n=!1,children:o,disabled:t,className:i="",htmlType:a,type:c="primary",onClick:l,size:s,overrideStyleClassName:u="",loading:p=!1,...d}=e;return r.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:t,className:`action-button ${i} ${u}`,type:a,onClick:l},d),p?r.createElement(v,null):o)},g=({question:e,formValues:n,onChangeHandler:o})=>{switch(e.type_info.question_type){case"RANGE":return r.createElement(t,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":case"DROPDOWN":return r.createElement(d,{values:n[e.name],options:e.type_info.choices,onChangeHandler:o});case"RADIO":case"MULTICHOICE":return r.createElement(h,{name:e.name,onChangeHandler:o,options:e.type_info.choices,value:n[e.name]});case"INPUT":return r.createElement("div",{className:"responsive-text-field"},r.createElement(s,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>o(e.target.value)}),r.createElement(u,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return r.createElement(u,{autoFocus:!0,label:"",isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>o(e.target.value)});case"MESSAGE":return r.createElement("div",{className:"message-container"},e.type_info?.meta?.value);default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};o(":root {\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 400ms 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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .skip-button {\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 4px 12px;\n border-radius: 4px;\n position: absolute;\n right: 20px;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\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\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}");const y=["RANGE","NPS","RADIO"],w=()=>r.createElement("div",{className:"question-container",style:{gap:"16px"}},r.createElement("h4",null,"Thank you for taking our survey!."),r.createElement("p",null," Your response is very important to us."));exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=x,exports.CheckboxGroup=d,exports.Input=s,exports.NPS=t,exports.ProgressBar=b,exports.Radio=f,exports.RadioGroup=h,exports.Survey=({survey:e,onSubmit:o})=>{const{meta:{blocks:t},question_details:{questions:i}}=e,[a,c]=n.useState({}),[l,s]=n.useState(!1),[u,p]=n.useState([]),d=n.useRef(null),m=n.useRef(null),h=n.useRef(null),f=n.useRef(0),v=n.useRef(!1),k=n.useRef([]);n.useEffect((()=>{t&&!d.current&&t.length>0&&N(t[0])}),[t]),n.useEffect((()=>{h.current?.scrollIntoView({block:"center",behavior:"smooth"}),k.current=u}),[u]),n.useEffect((()=>{Object.keys(a).length>0&&m.current&&(y.includes(m.current.type_info.question_type)\|\|v.current)&&!E()&&C()}),[a]);const E=()=>f.current===t.length-1\|\|"end"===d.current.branchOption,N=e=>{let n={};if(e.is_based_on_score){const r=i[0].type_info.choices[a?.[i[0].name]]?.dependent_question_names,o=e.question_names.find((e=>r?.includes(e)));n=i.find((e=>e.name===o))}else n=i.find((n=>n.name===e.question_names[0]));d.current=e,m.current=n;k.current.find((e=>e.question.name===n.name))\|\|p([...k.current,{...e,question:n}])},q=(e,n,r)=>{if(r)if(null!=a[e.question.name]&&e.name!==u[u.length-1].name){const[r,o]=(e=>{const n=u.findIndex((n=>n.name===e.name)),r=u.slice(0,n+1),o=r.reduce(((e,n)=>(e[n.question.name]=a[n.question.name],e)),{});return f.current=t.findIndex((n=>n.name===e.name)),[r,o]})(e);c({...o,...null!=n&&{[e.question.name]:n}}),k.current=r}else c({...a,...null!=n&&{[e.question.name]:n}});else c({...a,...null!=n&&{[e.question.name]:n}})},C=()=>{E()?s(!0):(d.current.nextBlock?f.current=t.findIndex((e=>e.name===d.current.nextBlock)):f.current+=1,N(t[f.current]))},_=e=>{const n=u.findIndex((n=>n.name===e.name)),r=[...u];r.splice(n,1),k.current=r,C()},R=(e,n)=>n.name===m.current.name&&!y.includes(n.type_info.question_type)&&!E(),S=(e,n)=>!e.required&&n.name===m.current.name;return d.current&&m.current?l?r.createElement("div",{className:"freemium-survey-components"},r.createElement(w,null)):r.createElement("div",{className:"freemium-survey-components"},r.createElement(b,{totalSteps:t.length,completedSteps:f.current}),u.map(((e,n)=>r.createElement("div",{className:"question-container",ref:h,id:e.title,key:e.title},r.createElement("div",{className:"question-text"},e.question.text),r.createElement(g,{question:e.question,formValues:a,onChangeHandler:n=>{v.current=!1,f.current=t.findIndex((n=>n.name===e.name)),d.current=e,m.current=e.question,q(e,n,y.includes(e.question.type_info.question_type)&&!E())}}),R(0,e.question)\|\|S(e,e.question)?r.createElement("div",{className:"action-buttons"},R(0,e.question)&&r.createElement(x,{onClick:()=>{v.current=!0,q(e,null,!0)},className:"next-button"},"Next"),S(e,e.question)&&r.createElement("button",{className:"skip-button",onClick:_},"Skip")):null))),E()&&r.createElement("div",{className:"submit"},r.createElement(x,{onClick:()=>{s(!0),o(a)}},"Submit Survey"))):null},exports.TextArea=u;
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function r(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))}}r(".freemium-survey-components .nps-container {\n margin: 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n grid-gap: 52px;\n gap: 52px;\n}\n.freemium-survey-components .nps-container .footer {\n border-top: 1px solid var(--default-background-color);\n border-top: 1px solid var(--background-color, var(--default-background-color));\n padding-top: 20px;\n display: flex;\n justify-content: center;\n font-size: 0.75rem;\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}\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.15);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.15);\n z-index: 2;\n position: relative;\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.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.rounded.boxed button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .choice:nth-child(1).active, .freemium-survey-components .nps-container .choice:nth-child(1):hover {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .choice:nth-child(2).active, .freemium-survey-components .nps-container .choice:nth-child(2):hover {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .choice:nth-child(3).active, .freemium-survey-components .nps-container .choice:nth-child(3):hover {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .choice:nth-child(4).active, .freemium-survey-components .nps-container .choice:nth-child(4):hover {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .choice:nth-child(5).active, .freemium-survey-components .nps-container .choice:nth-child(5):hover {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .choice:nth-child(6).active, .freemium-survey-components .nps-container .choice:nth-child(6):hover {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .choice:nth-child(7).active, .freemium-survey-components .nps-container .choice:nth-child(7):hover {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .choice:nth-child(8).active, .freemium-survey-components .nps-container .choice:nth-child(8):hover {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #37c248;\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 o=e=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:i,end:a},validation:{min:c},footer_text:s}}=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},((e,n)=>n+c)));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"},s))},i=(e,n)=>(e.defaultProps=n,e);r('.freemium-survey-components .input-container,\n.freemium-survey-components .textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n.freemium-survey-components label.input-label {\n display: inline-block;\n padding-bottom: 8px;\n padding-left: 2px;\n font-size: 0.75rem;\n font-weight: 400;\n}\n.freemium-survey-components label.required::after {\n content: "";\n position: relative;\n top: 2px;\n font-weight: 500;\n font-size: 0.85rem;\n padding-left: 3px;\n color: 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 a={isRequired:!1,showCount:!1,isErrored:!1,inline:!1,spellCheck:!1,autoFocus:!1},c=n.forwardRef(((e,n)=>{const{inputStyle:r,style:o,className:i,showCount:a,isErrored:c,startLabel:s,isRequired:l,errorText:u,endLabel:p,maxLength:d,...m}=e;return console.log(e.value),t.createElement("div",{className:"input-container",style:o},e.label&&t.createElement("label",{className:"input-label "+(l?"required":"")},e.label),t.createElement("div",null,s&&t.createElement("div",{className:"start-label"},s),t.createElement("div",{className:`input-basic ${c?"error":""}${i\|\|""}`},t.createElement("input",Object.assign({type:"text",autoComplete:"off"},m,{ref:n,style:r})),a&&d>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${e.maxLength}`)),p&&t.createElement("div",{className:"end-label"},p)),c&&u&&t.createElement("span",{className:"input-error"},e.errorText))})),s=n.forwardRef(((e,n)=>{const{inputStyle:r,style:o,className:i,showCount:a,maxLength:c,isErrored:s,startLabel:l,isRequired:u,...p}=e;return console.log(e.value),t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:o},e.label&&t.createElement("label",{className:"input-label "+(u?"required":"")},e.label),l&&t.createElement("div",{className:"start-label"},l),t.createElement("div",{className:`input-basic ${s?"error":""} ${i\|\|""}`},t.createElement("textarea",Object.assign({autoComplete:"off"},p,{ref:n,style:r})),a&&c&&c>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length\|\|0}/${e.maxLength}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)),e.isErrored&&e.errorText&&t.createElement("span",{className:"input-error"},e.errorText))})),l=i(c,a),u=i(s,a);r('.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: 10px;\n background-color: #fff;\n border: 1px solid;\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"})),d=({values:e,options:n,onChangeHandler:r})=>t.createElement("div",{className:"checkbox-group"},n.map(((n,o)=>t.createElement(m,{key:n.id,checked:e?.includes(n.id),name:n.name??n.id,id:n.id,autoFocus:0===o,onChange:(t,o)=>{if(o)r([...e\|\|[],n.id]);else{const t=e.indexOf(n.id);t>-1&&e.splice(t,1),r([...e])}}},n.label)))),m=i(n.forwardRef(((e,n)=>t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:n,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,autoFocus:e.autoFocus,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(p,null)," ")),t.createElement("div",null,e.children)))),{checked:!1});r('.freemium-survey-components .radio-group {\n display: flex;\n grid-gap: 12px;\n gap: 12px;\n white-space: nowrap;\n flex-direction: column;\n}\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: 12px;\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 h=({name:e,options:n,value:r,onChangeHandler:o})=>t.createElement("div",{className:"radio-group"},n.map(((n,i)=>t.createElement(f,{key:n.id,value:n.id,name:e,onChange:e=>{o(e.currentTarget.value)},autoFocus:0===i,checked:r===n.id},n.label)))),f=i(n.forwardRef(((e,n)=>t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:n,type:"radio",name:e.name,value:e.value,checked:e.checked,onChange:e.onChange,autoFocus:e.autoFocus}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children)))),{checked:!1,autoFocus:!1});r(".progressbar-container {\n width: 100%;\n height: 6px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const g=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})`}}))};r(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n margin: 0;\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}\n.freemium-survey-components button:focus:not(:active) {\n border: 1px solid transparent;\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:c="primary",onClick:s,size:l,overrideStyleClassName:u="",loading:p=!1,...d}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${i} ${u}`,type:a,onClick:s},d),p?t.createElement(v,null):r)},x=({question:e,formValues:n,onChangeHandler:r})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(o,{type_info:e.type_info,onChangeHandler:r,npsValue:n[e.name]});case"CHECKBOX":case"DROPDOWN":return t.createElement(d,{values:n[e.name],options:e.type_info.choices,onChangeHandler:r});case"RADIO":case"MULTICHOICE":return t.createElement(h,{name:e.name,onChangeHandler:r,options:e.type_info.choices,value:n[e.name]});case"INPUT":return t.createElement("div",{className:"responsive-text-field"},t.createElement(l,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>r(e.target.value)}),t.createElement(u,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return t.createElement(u,{autoFocus:!0,label:"",isRequired:e.is_required,value:n[e.name]\|\|"",onChange:e=>r(e.target.value)});case"MESSAGE":return t.createElement("div",{className:"message-container"},e.type_info?.meta?.value);default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};r(":root {\n --widget-container-width: 350px;\n --widget-container-height: 400px;\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 400ms 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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .skip-button {\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 4px 12px;\n border-radius: 4px;\n position: absolute;\n right: 20px;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .submit.within {\n display: none;\n}\n.freemium-survey-components .submit.external {\n display: flex;\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\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 width: 350px;\n width: var(--widget-container-width);\n height: 400px;\n height: var(--widget-container-height);\n font-size: 0.875rem;\n border: 1px solid green;\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}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\n.widget-survey-components .question-container {\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.widget-survey-components .submit.within {\n display: flex;\n}\n.widget-survey-components .submit.external {\n display: none;\n}");const y=["RANGE","NPS","RADIO"],w=()=>t.createElement("div",{className:"question-container",style:{gap:"16px"}},t.createElement("h4",null,"Thank you for taking our survey!."),t.createElement("p",null," Your response is very important to us."));exports.BUTTON_SIZE_VARIANTS={LARGE:"large",MINI:"mini",NORMAL:"normal"},exports.Button=b,exports.CheckboxGroup=d,exports.Input=l,exports.NPS=o,exports.ProgressBar=g,exports.Radio=f,exports.RadioGroup=h,exports.Survey=({survey:e,onSubmit:r,widget:o,surveyContainerWidth:i=0})=>{const{meta:{blocks:a},question_details:{questions:c}}=e,[s,l]=n.useState({}),[u,p]=n.useState(!1),[d,m]=n.useState([]),h=n.useRef(null),f=n.useRef(null),v=n.useRef(null),k=n.useRef(0),E=n.useRef(!1),N=n.useRef([]);n.useEffect((()=>{a&&!h.current&&a.length>0&&C(a[0])}),[a]),n.useEffect((()=>{v.current?.scrollIntoView({block:"center",behavior:"smooth"}),N.current=d}),[d]),n.useEffect((()=>{Object.keys(s).length>0&&f.current&&(y.includes(f.current.type_info.question_type)\|\|E.current)&&!q()&&R()}),[s]);const q=()=>k.current===a.length-1\|\|"end"===h.current.branchOption,C=e=>{let n={};if(e.is_based_on_score){const t=c[0].type_info.choices[s?.[c[0].name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=c.find((e=>e.name===r))}else n=c.find((n=>n.name===e.question_names[0]));h.current=e,f.current=n;N.current.find((e=>e.question.name===n.name))\|\|m([...N.current,{...e,question:n}])},_=(e,n,t)=>{if(t)if(null!=s[e.question.name]&&e.name!==d[d.length-1].name){const[t,r]=(e=>{const n=d.findIndex((n=>n.name===e.name)),t=d.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=s[n.question.name],e)),{});return k.current=a.findIndex((n=>n.name===e.name)),[t,r]})(e);l({...r,...null!=n&&{[e.question.name]:n}}),N.current=t}else l({...s,...null!=n&&{[e.question.name]:n}});else l({...s,...null!=n&&{[e.question.name]:n}})},R=()=>{q()?p(!0):(h.current.nextBlock?k.current=a.findIndex((e=>e.name===h.current.nextBlock)):k.current+=1,C(a[k.current]))},S=e=>{const n=d.findIndex((n=>n.name===e.name)),t=[...d];t.splice(n,1),N.current=t,R()},z=(e,n)=>n.name===f.current.name&&!y.includes(n.type_info.question_type)&&!q(),$=(e,n)=>!e.required&&n.name===f.current.name;return h.current&&f.current?u?t.createElement("div",{className:"freemium-survey-components "+(o?"widget-survey-components":"")},t.createElement(w,null)):t.createElement("div",{className:"freemium-survey-components "+(o?"widget-survey-components":"")},t.createElement(g,{totalSteps:a.length,completedSteps:k.current}),t.createElement("div",{style:o?{transform:`translateX(-${k.currenti}px)`}:{},className:"questions"},d.map(((e,n)=>t.createElement("div",{className:"question-container",id:e.title,key:e.title},t.createElement("div",{className:"question-text"},e.question.text),t.createElement(x,{question:e.question,formValues:s,onChangeHandler:n=>{E.current=!1,k.current=a.findIndex((n=>n.name===e.name)),h.current=e,f.current=e.question,_(e,n,y.includes(e.question.type_info.question_type)&&!q())}}),z(0,e.question)\|\|$(e,e.question)?t.createElement("div",{className:"action-buttons"},z(0,e.question)&&t.createElement(b,{onClick:()=>{E.current=!0,_(e,null,!0)},className:"next-button"},"Next"),$(e,e.question)&&t.createElement("button",{className:"skip-button",onClick:S},"Skip")):null,q()&&t.createElement("div",{className:"submit within"},t.createElement(b,{onClick:()=>{p(!0),r(s)}},"Submit Survey"))))),q()&&t.createElement("div",{className:"submit external"},t.createElement(b,{onClick:()=>{p(!0),r(s)}},"Submit Survey")))):null},exports.TextArea=u;

package/lib/index.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import e,{useRef as n,forwardRef as r,useState as o,useEffect as t}from"react";function i(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head\|\|document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}i(".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.75rem;\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}\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.15);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.15);\n z-index: 2;\n position: relative;\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.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.rounded.boxed button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .choice:nth-child(1).active, .freemium-survey-components .nps-container .choice:nth-child(1):hover {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .choice:nth-child(2).active, .freemium-survey-components .nps-container .choice:nth-child(2):hover {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .choice:nth-child(3).active, .freemium-survey-components .nps-container .choice:nth-child(3):hover {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .choice:nth-child(4).active, .freemium-survey-components .nps-container .choice:nth-child(4):hover {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .choice:nth-child(5).active, .freemium-survey-components .nps-container .choice:nth-child(5):hover {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .choice:nth-child(6).active, .freemium-survey-components .nps-container .choice:nth-child(6):hover {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .choice:nth-child(7).active, .freemium-survey-components .nps-container .choice:nth-child(7):hover {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .choice:nth-child(8).active, .freemium-survey-components .nps-container .choice:nth-child(8):hover {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #37c248;\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}");const a=r=>{const{type_info:{linear_scale:{button_shape:o,button_style:t},score_presets:{start:i,end:a},validation:{min:c},footer_text:l}}=r,s=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},u=n(Array.from({length:10},((e,n)=>n+c)));return e.createElement("div",{className:"nps-container"},e.createElement("div",{className:`widget ${o} ${t}`},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=>{r.onChangeHandler(n)},className:`choice ${s(n)} ${r.npsValue===n&&"active"}`},n)))),e.createElement("span",{className:"positive-text"},a))),e.createElement("div",{className:"footer"},l))},c=(e,n)=>(e.defaultProps=n,e);i('.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:!1},s=r(((n,r)=>{const{inputStyle:o,style:t,className:i,showCount:a,isErrored:c,startLabel:l,isRequired:s,errorText:u,endLabel:p,maxLength:d,...m}=n;return console.log(n.value),e.createElement("div",{className:"input-container",style:t},n.label&&e.createElement("label",{className:"input-label "+(s?"required":"")},n.label),e.createElement("div",null,l&&e.createElement("div",{className:"start-label"},l),e.createElement("div",{className:`input-basic ${c?"error":""}${i\|\|""}`},e.createElement("input",Object.assign({type:"text",autoComplete:"off"},m,{ref:r,style:o})),a&&d>0&&e.createElement("div",{className:"end-max-length"},`${n.value&&n.value.length\|\|0}/${n.maxLength}`)),p&&e.createElement("div",{className:"end-label"},p)),c&&u&&e.createElement("span",{className:"input-error"},n.errorText))})),u=r(((n,r)=>{const{inputStyle:o,style:t,className:i,showCount:a,maxLength:c,isErrored:l,startLabel:s,isRequired:u,...p}=n;return console.log(n.value),e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:t},n.label&&e.createElement("label",{className:"input-label "+(u?"required":"")},n.label),s&&e.createElement("div",{className:"start-label"},s),e.createElement("div",{className:`input-basic ${l?"error":""} ${i\|\|""}`},e.createElement("textarea",Object.assign({autoComplete:"off"},p,{ref:r,style:o})),a&&c&&c>0&&e.createElement("div",{className:"end-max-length"},`${n.value&&n.value.length\|\|0}/${n.maxLength}`)),n.endLabel&&e.createElement("div",{className:"end-label"},n.endLabel)),n.isErrored&&n.errorText&&e.createElement("span",{className:"input-error"},n.errorText))})),p=c(s,l),d=c(u,l);i('.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: 10px;\n background-color: #fff;\n border: 1px solid;\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 m=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),h=({values:n,options:r,onChangeHandler:o})=>e.createElement("div",{className:"checkbox-group"},r.map(((r,t)=>e.createElement(f,{key:r.id,checked:n?.includes(r.id),name:r.name??r.id,id:r.id,autoFocus:0===t,onChange:(e,t)=>{if(t)o([...n\|\|[],r.id]);else{const e=n.indexOf(r.id);e>-1&&n.splice(e,1),o([...n])}}},r.label)))),f=c(r(((n,r)=>e.createElement("label",{className:`checkbox-label ${n.disabled&&"disabled"}`},e.createElement("input",{ref:r,id:n.id,type:"checkbox",name:n.name,readOnly:n.readOnly,disabled:n.disabled,"aria-disabled":n.disabled,value:n.value,checked:n.checked,autoFocus:n.autoFocus,onChange:n.readOnly?()=>{}:e=>n.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},n.checked&&e.createElement("div",{className:"icon-container"},e.createElement(m,null)," ")),e.createElement("div",null,n.children)))),{checked:!1});i('.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: 12px;\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 b=({name:n,options:r,value:o,onChangeHandler:t})=>e.createElement("div",{className:"radio-group"},r.map(((r,i)=>e.createElement(v,{key:r.id,value:r.id,name:n,onChange:e=>{t(e.currentTarget.value)},autoFocus:0===i,checked:o===r.id},r.label)))),v=c(r(((n,r)=>e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:r,type:"radio",name:n.name,value:n.value,checked:n.checked,onChange:n.onChange,autoFocus:n.autoFocus}),e.createElement("div",{className:"radio"}),e.createElement("div",null,n.children)))),{checked:!1,autoFocus:!1});i(".progressbar-container {\n width: 100%;\n height: 6px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.progressbar {\n transition: transform 0.25s linear;\n transform-origin: left;\n height: 100%;\n background-color: var(--default-brand-color);\n background-color: var(--brand-color, var(--default-brand-color));\n}");const g=n=>{const{totalSteps:r,completedSteps:o}=n;return e.createElement("div",{className:"progressbar-container"},e.createElement("div",{className:"progressbar",style:{width:(o>0?100/r:0)+"%",transform:`scaleX(${o})`}}))};i(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n margin: 0;\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@media (max-width: 550px) {\n .freemium-survey-components .action-button {\n min-width: 120px;\n }\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}\n.freemium-survey-components button:focus:not(:active) {\n border: 1px solid transparent;\n / box-shadow: 0 0 0 2px ${pseudo.focus}; */\n}");const x=()=>e.createElement(e.Fragment,null,"..."),y={LARGE:"large",MINI:"mini",NORMAL:"normal"},k=n=>{const{inline:r=!1,children:o,disabled:t,className:i="",htmlType:a,type:c="primary",onClick:l,size:s,overrideStyleClassName:u="",loading:p=!1,...d}=n;return e.createElement("button",Object.assign({style:r?{display:"inline-block"}:{},disabled:t,className:`action-button ${i} ${u}`,type:a,onClick:l},d),p?e.createElement(x,null):o)},w=({question:n,formValues:r,onChangeHandler:o})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(a,{type_info:n.type_info,onChangeHandler:o,npsValue:r[n.name]});case"CHECKBOX":case"DROPDOWN":return e.createElement(h,{values:r[n.name],options:n.type_info.choices,onChangeHandler:o});case"RADIO":case"MULTICHOICE":return e.createElement(b,{name:n.name,onChangeHandler:o,options:n.type_info.choices,value:r[n.name]});case"INPUT":return e.createElement("div",{className:"responsive-text-field"},e.createElement(p,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:r[n.name]\|\|"",onChange:e=>o(e.target.value)}),e.createElement(d,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:r[n.name]\|\|"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return e.createElement(d,{autoFocus:!0,label:"",isRequired:n.is_required,value:r[n.name]\|\|"",onChange:e=>o(e.target.value)});case"MESSAGE":return e.createElement("div",{className:"message-container"},n.type_info?.meta?.value);default:return console.error(`Question type ${n.type_info.question_type} not found`),null}};i(":root {\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 400ms 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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .skip-button {\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 4px 12px;\n border-radius: 4px;\n position: absolute;\n right: 20px;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\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\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}");const E=["RANGE","NPS","RADIO"],N=()=>e.createElement("div",{className:"question-container",style:{gap:"16px"}},e.createElement("h4",null,"Thank you for taking our survey!."),e.createElement("p",null," Your response is very important to us.")),q=({survey:r,onSubmit:i})=>{const{meta:{blocks:a},question_details:{questions:c}}=r,[l,s]=o({}),[u,p]=o(!1),[d,m]=o([]),h=n(null),f=n(null),b=n(null),v=n(0),x=n(!1),y=n([]);t((()=>{a&&!h.current&&a.length>0&&C(a[0])}),[a]),t((()=>{b.current?.scrollIntoView({block:"center",behavior:"smooth"}),y.current=d}),[d]),t((()=>{Object.keys(l).length>0&&f.current&&(E.includes(f.current.type_info.question_type)\|\|x.current)&&!q()&&z()}),[l]);const q=()=>v.current===a.length-1\|\|"end"===h.current.branchOption,C=e=>{let n={};if(e.is_based_on_score){const r=c[0].type_info.choices[l?.[c[0].name]]?.dependent_question_names,o=e.question_names.find((e=>r?.includes(e)));n=c.find((e=>e.name===o))}else n=c.find((n=>n.name===e.question_names[0]));h.current=e,f.current=n;y.current.find((e=>e.question.name===n.name))\|\|m([...y.current,{...e,question:n}])},_=(e,n,r)=>{if(r)if(null!=l[e.question.name]&&e.name!==d[d.length-1].name){const[r,o]=(e=>{const n=d.findIndex((n=>n.name===e.name)),r=d.slice(0,n+1),o=r.reduce(((e,n)=>(e[n.question.name]=l[n.question.name],e)),{});return v.current=a.findIndex((n=>n.name===e.name)),[r,o]})(e);s({...o,...null!=n&&{[e.question.name]:n}}),y.current=r}else s({...l,...null!=n&&{[e.question.name]:n}});else s({...l,...null!=n&&{[e.question.name]:n}})},z=()=>{q()?p(!0):(h.current.nextBlock?v.current=a.findIndex((e=>e.name===h.current.nextBlock)):v.current+=1,C(a[v.current]))},$=e=>{const n=d.findIndex((n=>n.name===e.name)),r=[...d];r.splice(n,1),y.current=r,z()},L=(e,n)=>n.name===f.current.name&&!E.includes(n.type_info.question_type)&&!q(),S=(e,n)=>!e.required&&n.name===f.current.name;return h.current&&f.current?u?e.createElement("div",{className:"freemium-survey-components"},e.createElement(N,null)):e.createElement("div",{className:"freemium-survey-components"},e.createElement(g,{totalSteps:a.length,completedSteps:v.current}),d.map(((n,r)=>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(w,{question:n.question,formValues:l,onChangeHandler:e=>{x.current=!1,v.current=a.findIndex((e=>e.name===n.name)),h.current=n,f.current=n.question,_(n,e,E.includes(n.question.type_info.question_type)&&!q())}}),L(0,n.question)\|\|S(n,n.question)?e.createElement("div",{className:"action-buttons"},L(0,n.question)&&e.createElement(k,{onClick:()=>{x.current=!0,_(n,null,!0)},className:"next-button"},"Next"),S(n,n.question)&&e.createElement("button",{className:"skip-button",onClick:$},"Skip")):null))),q()&&e.createElement("div",{className:"submit"},e.createElement(k,{onClick:()=>{p(!0),i(l)}},"Submit Survey"))):null};export{y as BUTTON_SIZE_VARIANTS,k as Button,h as CheckboxGroup,p as Input,a as NPS,g as ProgressBar,v as Radio,b as RadioGroup,q as Survey,d as TextArea};
1	+ import e,{useRef as n,forwardRef as t,useState as r,useEffect as o}from"react";function i(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))}}i(".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.75rem;\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}\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.15);\n z-index: 2;\n position: relative;\n}\n.freemium-survey-components .nps-container .widget button.active {\n color: white;\n transform: scale(1.15);\n z-index: 2;\n position: relative;\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.rounded button {\n border-radius: 50%;\n}\n.freemium-survey-components .nps-container .widget.rounded.boxed button {\n border-radius: 0;\n}\n.freemium-survey-components .nps-container .choices {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n.freemium-survey-components .nps-container .choice:nth-child(1).active, .freemium-survey-components .nps-container .choice:nth-child(1):hover {\n background: #eb5b56;\n}\n.freemium-survey-components .nps-container .choice:nth-child(2).active, .freemium-survey-components .nps-container .choice:nth-child(2):hover {\n background: #fb8774;\n}\n.freemium-survey-components .nps-container .choice:nth-child(3).active, .freemium-survey-components .nps-container .choice:nth-child(3):hover {\n background: #f58f6b;\n}\n.freemium-survey-components .nps-container .choice:nth-child(4).active, .freemium-survey-components .nps-container .choice:nth-child(4):hover {\n background: #f6996a;\n}\n.freemium-survey-components .nps-container .choice:nth-child(5).active, .freemium-survey-components .nps-container .choice:nth-child(5):hover {\n background: #eab268;\n}\n.freemium-survey-components .nps-container .choice:nth-child(6).active, .freemium-survey-components .nps-container .choice:nth-child(6):hover {\n background: #cebb69;\n}\n.freemium-survey-components .nps-container .choice:nth-child(7).active, .freemium-survey-components .nps-container .choice:nth-child(7):hover {\n background: #bdc46c;\n}\n.freemium-survey-components .nps-container .choice:nth-child(8).active, .freemium-survey-components .nps-container .choice:nth-child(8):hover {\n background: #a4cd72;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #77c955;\n}\n.freemium-survey-components .nps-container .choice:nth-child(9).active, .freemium-survey-components .nps-container .choice:nth-child(9):hover {\n background: #37c248;\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 a=t=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:i,end:a},validation:{min:c},footer_text:s}}=t,l=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},u=n(Array.from({length:10},((e,n)=>n+c)));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"},s))},c=(e,n)=>(e.defaultProps=n,e);i('.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:!1},l=t(((n,t)=>{const{inputStyle:r,style:o,className:i,showCount:a,isErrored:c,startLabel:s,isRequired:l,errorText:u,endLabel:p,maxLength:d,...m}=n;return console.log(n.value),e.createElement("div",{className:"input-container",style:o},n.label&&e.createElement("label",{className:"input-label "+(l?"required":"")},n.label),e.createElement("div",null,s&&e.createElement("div",{className:"start-label"},s),e.createElement("div",{className:`input-basic ${c?"error":""}${i\|\|""}`},e.createElement("input",Object.assign({type:"text",autoComplete:"off"},m,{ref:t,style:r})),a&&d>0&&e.createElement("div",{className:"end-max-length"},`${n.value&&n.value.length\|\|0}/${n.maxLength}`)),p&&e.createElement("div",{className:"end-label"},p)),c&&u&&e.createElement("span",{className:"input-error"},n.errorText))})),u=t(((n,t)=>{const{inputStyle:r,style:o,className:i,showCount:a,maxLength:c,isErrored:s,startLabel:l,isRequired:u,...p}=n;return console.log(n.value),e.createElement(e.Fragment,null,e.createElement("div",{className:"textarea-container",style:o},n.label&&e.createElement("label",{className:"input-label "+(u?"required":"")},n.label),l&&e.createElement("div",{className:"start-label"},l),e.createElement("div",{className:`input-basic ${s?"error":""} ${i\|\|""}`},e.createElement("textarea",Object.assign({autoComplete:"off"},p,{ref:t,style:r})),a&&c&&c>0&&e.createElement("div",{className:"end-max-length"},`${n.value&&n.value.length\|\|0}/${n.maxLength}`)),n.endLabel&&e.createElement("div",{className:"end-label"},n.endLabel)),n.isErrored&&n.errorText&&e.createElement("span",{className:"input-error"},n.errorText))})),p=c(l,s),d=c(u,s);i('.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: 10px;\n background-color: #fff;\n border: 1px solid;\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 m=()=>e.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},e.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),h=({values:n,options:t,onChangeHandler:r})=>e.createElement("div",{className:"checkbox-group"},t.map(((t,o)=>e.createElement(f,{key:t.id,checked:n?.includes(t.id),name:t.name??t.id,id:t.id,autoFocus:0===o,onChange:(e,o)=>{if(o)r([...n\|\|[],t.id]);else{const e=n.indexOf(t.id);e>-1&&n.splice(e,1),r([...n])}}},t.label)))),f=c(t(((n,t)=>e.createElement("label",{className:`checkbox-label ${n.disabled&&"disabled"}`},e.createElement("input",{ref:t,id:n.id,type:"checkbox",name:n.name,readOnly:n.readOnly,disabled:n.disabled,"aria-disabled":n.disabled,value:n.value,checked:n.checked,autoFocus:n.autoFocus,onChange:n.readOnly?()=>{}:e=>n.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},n.checked&&e.createElement("div",{className:"icon-container"},e.createElement(m,null)," ")),e.createElement("div",null,n.children)))),{checked:!1});i('.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: 12px;\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 g=({name:n,options:t,value:r,onChangeHandler:o})=>e.createElement("div",{className:"radio-group"},t.map(((t,i)=>e.createElement(v,{key:t.id,value:t.id,name:n,onChange:e=>{o(e.currentTarget.value)},autoFocus:0===i,checked:r===t.id},t.label)))),v=c(t(((n,t)=>e.createElement("label",{className:"radio-label"},e.createElement("input",{ref:t,type:"radio",name:n.name,value:n.value,checked:n.checked,onChange:n.onChange,autoFocus:n.autoFocus}),e.createElement("div",{className:"radio"}),e.createElement("div",null,n.children)))),{checked:!1,autoFocus:!1});i(".progressbar-container {\n width: 100%;\n height: 6px;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\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})`}}))};i(".freemium-survey-components .action-button {\n width: auto;\n display: block;\n margin: 0;\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}\n.freemium-survey-components button:focus:not(:active) {\n border: 1px solid transparent;\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 x=()=>e.createElement(e.Fragment,null,"..."),y={LARGE:"large",MINI:"mini",NORMAL:"normal"},w=n=>{const{inline:t=!1,children:r,disabled:o,className:i="",htmlType:a,type:c="primary",onClick:s,size:l,overrideStyleClassName:u="",loading:p=!1,...d}=n;return e.createElement("button",Object.assign({style:t?{display:"inline-block"}:{},disabled:o,className:`action-button ${i} ${u}`,type:a,onClick:s},d),p?e.createElement(x,null):r)},k=({question:n,formValues:t,onChangeHandler:r})=>{switch(n.type_info.question_type){case"RANGE":return e.createElement(a,{type_info:n.type_info,onChangeHandler:r,npsValue:t[n.name]});case"CHECKBOX":case"DROPDOWN":return e.createElement(h,{values:t[n.name],options:n.type_info.choices,onChangeHandler:r});case"RADIO":case"MULTICHOICE":return e.createElement(g,{name:n.name,onChangeHandler:r,options:n.type_info.choices,value:t[n.name]});case"INPUT":return e.createElement("div",{className:"responsive-text-field"},e.createElement(p,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]\|\|"",onChange:e=>r(e.target.value)}),e.createElement(d,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:n.is_required,value:t[n.name]\|\|"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return e.createElement(d,{autoFocus:!0,label:"",isRequired:n.is_required,value:t[n.name]\|\|"",onChange:e=>r(e.target.value)});case"MESSAGE":return e.createElement("div",{className:"message-container"},n.type_info?.meta?.value);default:return console.error(`Question type ${n.type_info.question_type} not found`),null}};i(":root {\n --widget-container-width: 350px;\n --widget-container-height: 400px;\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 400ms 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 .action-buttons {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.freemium-survey-components .skip-button {\n cursor: pointer;\n background: transparent;\n border: none;\n min-width: 40px;\n padding: 4px 12px;\n border-radius: 4px;\n position: absolute;\n right: 20px;\n}\n.freemium-survey-components .next-button {\n margin: 0 auto;\n}\n.freemium-survey-components .submit.within {\n display: none;\n}\n.freemium-survey-components .submit.external {\n display: flex;\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\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 width: 350px;\n width: var(--widget-container-width);\n height: 400px;\n height: var(--widget-container-height);\n font-size: 0.875rem;\n border: 1px solid green;\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}\n.widget-survey-components .question-text {\n font-size: 0.875rem;\n}\n.widget-survey-components .question-container {\n height: 100%;\n min-width: 100%;\n max-width: 100%;\n}\n.widget-survey-components .submit.within {\n display: flex;\n}\n.widget-survey-components .submit.external {\n display: none;\n}");const E=["RANGE","NPS","RADIO"],N=()=>e.createElement("div",{className:"question-container",style:{gap:"16px"}},e.createElement("h4",null,"Thank you for taking our survey!."),e.createElement("p",null," Your response is very important to us.")),q=({survey:t,onSubmit:i,widget:a,surveyContainerWidth:c=0})=>{const{meta:{blocks:s},question_details:{questions:l}}=t,[u,p]=r({}),[d,m]=r(!1),[h,f]=r([]),g=n(null),v=n(null),x=n(null),y=n(0),q=n(!1),C=n([]);o((()=>{s&&!g.current&&s.length>0&&z(s[0])}),[s]),o((()=>{x.current?.scrollIntoView({block:"center",behavior:"smooth"}),C.current=h}),[h]),o((()=>{Object.keys(u).length>0&&v.current&&(E.includes(v.current.type_info.question_type)\|\|q.current)&&!_()&&S()}),[u]);const _=()=>y.current===s.length-1\|\|"end"===g.current.branchOption,z=e=>{let n={};if(e.is_based_on_score){const t=l[0].type_info.choices[u?.[l[0].name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=l.find((e=>e.name===r))}else n=l.find((n=>n.name===e.question_names[0]));g.current=e,v.current=n;C.current.find((e=>e.question.name===n.name))\|\|f([...C.current,{...e,question:n}])},$=(e,n,t)=>{if(t)if(null!=u[e.question.name]&&e.name!==h[h.length-1].name){const[t,r]=(e=>{const n=h.findIndex((n=>n.name===e.name)),t=h.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=u[n.question.name],e)),{});return y.current=s.findIndex((n=>n.name===e.name)),[t,r]})(e);p({...r,...null!=n&&{[e.question.name]:n}}),C.current=t}else p({...u,...null!=n&&{[e.question.name]:n}});else p({...u,...null!=n&&{[e.question.name]:n}})},S=()=>{_()?m(!0):(g.current.nextBlock?y.current=s.findIndex((e=>e.name===g.current.nextBlock)):y.current+=1,z(s[y.current]))},L=e=>{const n=h.findIndex((n=>n.name===e.name)),t=[...h];t.splice(n,1),C.current=t,S()},O=(e,n)=>n.name===v.current.name&&!E.includes(n.type_info.question_type)&&!_(),R=(e,n)=>!e.required&&n.name===v.current.name;return g.current&&v.current?d?e.createElement("div",{className:"freemium-survey-components "+(a?"widget-survey-components":"")},e.createElement(N,null)):e.createElement("div",{className:"freemium-survey-components "+(a?"widget-survey-components":"")},e.createElement(b,{totalSteps:s.length,completedSteps:y.current}),e.createElement("div",{style:a?{transform:`translateX(-${y.currentc}px)`}:{},className:"questions"},h.map(((n,t)=>e.createElement("div",{className:"question-container",id:n.title,key:n.title},e.createElement("div",{className:"question-text"},n.question.text),e.createElement(k,{question:n.question,formValues:u,onChangeHandler:e=>{q.current=!1,y.current=s.findIndex((e=>e.name===n.name)),g.current=n,v.current=n.question,$(n,e,E.includes(n.question.type_info.question_type)&&!_())}}),O(0,n.question)\|\|R(n,n.question)?e.createElement("div",{className:"action-buttons"},O(0,n.question)&&e.createElement(w,{onClick:()=>{q.current=!0,$(n,null,!0)},className:"next-button"},"Next"),R(n,n.question)&&e.createElement("button",{className:"skip-button",onClick:L},"Skip")):null,_()&&e.createElement("div",{className:"submit within"},e.createElement(w,{onClick:()=>{m(!0),i(u)}},"Submit Survey"))))),_()&&e.createElement("div",{className:"submit external"},e.createElement(w,{onClick:()=>{m(!0),i(u)}},"Submit Survey")))):null};export{y as BUTTON_SIZE_VARIANTS,w as Button,h as CheckboxGroup,p as Input,a as NPS,b as ProgressBar,v as Radio,g as RadioGroup,q as Survey,d as TextArea};

package/lib/types/survey/index.d.ts CHANGED Viewed

@@ -4,9 +4,11 @@ interface SurveyProps {
     survey: {
         [key: string]: any;
     };
+    widget?: boolean;
     onSubmit: (data: {
         [key: string]: any;
     }) => void;
+    surveyContainerWidth?: number;
 }
-declare const Survey: ({ survey, onSubmit }: SurveyProps) => JSX.Element | null;
+declare const Survey: ({ survey, onSubmit, widget, surveyContainerWidth, }: SurveyProps) => JSX.Element | null;
 export { Survey };

package/package.json CHANGED Viewed

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