freemium-survey-components 0.5.1 → 0.5.2-beta.1

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