freemium-survey-components 0.1.0 → 0.2.0

package/README.md

@@ -1,3 +1,58 @@
-// add reset.css root variable config
-//way to interact with survey component
-//named exports and default exports
+# Freemium-survey-components [npm](https://www.npmjs.com/package/freemium-survey-components)
+
+Freemium-survey-components is a react package that renders the survey collection form given the survey object from the survey-serv platform service.
+
+## Peer Dependencies
+
+Make sure you installed the above libraries in the parent application.
+
+- react >= 17.0.2
+- react-dom >= 17.0.2
+
+## Css Variables
+
+The below code denotes the css variables used across the app with its default values.
+Override the below css variables witht the custom value and include it in the parent app.
+
+```sh
+:root {
+  --primary-button-color:#264966;
+  --primary-button-hover-color: #12344D;
+  --brand-color: #d72d30;
+  --input-highlight-color: #2c5cc5;
+  --input-border-color: #92a2b1;
+  --input-hover-border-color: #264966;
+  --input-placeholder-color: #92a2b1;
+  --border-radius: 4px;
+  --brand-color: #264966;
+  --background-color: #ebeff3;
+  --error-highlight-color: #d72d30;
+}
+```
+
+## Usage
+
+- install the peer dependencies (mentioned above )
+- yarn add freemium-survey-components
+- include reset css and css variables in index css file
+
+## Exports (Named)
+
+Of the below components the parent app would only need to interact with the Survey component to render the survey.
+
+- Survey
+- NPS
+- CheckboxGroup
+- RadioGroup
+- Input
+- Textarea
+- Button
+- Progressbar
+
+## Using SURVEY
+
+```sh
+import Survey from 'freemium-survey-components'
+...
+<Survey survey={surveyObjectFromDb} onSubmit ={(data : surveyFormData) => {....}/>
+```

package/lib/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function o(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}o(".container {\n  margin: 0 auto;\n  width: 100%;\n}\n.title {\n  color: var(--color-elephant-900);\n  font-weight: 600;\n}\n\n.footer {\n  margin-top: 20px;\n  border-top: 1px solid var(--color-smoke-50);\n  padding-top: 20px;\n  display: flex;\n  justify-content: center;\n  font-size: 12px;\n}\n\n.widget span {\n  color: #aaa;\n  font-size: 12px;\n}\n.widget button {\n  display: inline-block;\n  font-size: 16px;\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: 500;\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,\n    border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.widget button:hover {\n  color: white;\n  transform: scale(1.15);\n  z-index: 2;\n  position: relative;\n}\n.widget button.active {\n  color: white;\n  transform: scale(1.15);\n  z-index: 2;\n  position: relative;\n}\n\n.choices {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n\n.choice.active,\n.choice:hover:nth-child(1) {\n  background: #eb5b56;\n}\n.choice.active,\n.choice:hover:nth-child(2) {\n  background: #fb8774;\n}\n.choice.active,\n.choice:hover:nth-child(3) {\n  background: #f58f6b;\n}\n.choice.active,\n.choice:hover:nth-child(4) {\n  background: #f6996a;\n}\n.choice.active,\n.choice:hover:nth-child(5) {\n  background: #eab268;\n}\n.choice.active,\n.choice:hover:nth-child(6) {\n  background: #cebb69;\n}\n.choice.active,\n.choice:hover:nth-child(7) {\n  background: #bdc46c;\n}\n.choice.active,\n.choice:hover:nth-child(8) {\n  background: #a4cd72;\n}\n.choice.active,\n.choice:hover:nth-child(9) {\n  background: #77c955;\n}\n.choice.active,\n.choice:hover:nth-child(10) {\n  background: #37c248;\n}\n\n.widget.highlighted button.active,\n.widget.highlighted button:hover {\n  background: var(--color-elephant-800) !important;\n}\n.widget .rounded button {\n  border-radius: 100%;\n}\n.widget .boxed button {\n  border-radius: 0;\n}\n.widget {\n  padding: 35px 0;\n  box-sizing: border-box;\n  position: relative;\n  padding-bottom: 30px;\n}\n.widget .button-container {\n  display: flex;\n  justify-content: space-between;\n  background: var(--color-smoke-50);\n}\n.widget .positive-text,\n.widget .negative-text {\n  position: absolute;\n  color: var(--color-elephant-500);\n}\n.widget .positive-text {\n  right: 0px;\n  bottom: 5px;\n  text-align: right;\n}\n.widget .negative-text {\n  left: 0;\n  bottom: 5px;\n  text-align: left;\n}\n@media (max-width: 550px) {\n  .widget .button-container {\n    background: transparent;\n  }\n  .widget .choices {\n    flex-wrap: wrap;\n    justify-content: center;\n    grid-gap: 16px;\n    gap: 16px;\n    background: transparent;\n  }\n  .widget button {\n    border-radius: 50%;\n    background: #ebeff3;\n  }\n}\n");const r=e=>{const{type_info:{linear_scale:{button_shape:o,button_style:r},score_presets:{start:a,end:i},validation:{min:l},footer_text:c}}=e,s=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},d=n.useRef(Array.from({length:10},((e,n)=>n+l)));return t.createElement("div",{className:"container"},t.createElement("div",{className:`widget ${o} ${r}`},t.createElement("div",{className:"button-container"},t.createElement("span",{className:"negative-text"},a),t.createElement("div",{className:"choices"},d.current.map((n=>t.createElement("button",{onClick:t=>{e.onChangeHandler(n)},className:`choice ${s(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("span",{className:"positive-text"},i))),t.createElement("div",{className:"footer"},c))},a=(e,n)=>(e.defaultProps=n,e);o(".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: 12px;\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(--error-highlight-color);\n}\n\n.input-basic {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--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 var(--error-highlight-color);\n}\n.input-basic.error:hover {\n  border: 1px solid var(--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(--input-hover-border-color);\n  transition: 0.2s linear;\n}\n.input-basic[focus-within] {\n  border: 1px solid transparent;\n  box-shadow: 0 0 0 2px var(--input-highlight-color);\n}\n.input-basic:focus-within {\n  border: 1px solid transparent;\n  box-shadow: 0 0 0 2px var(--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(--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  font-weight: 500;\n  border-radius: 4px;\n}\ninput[type='text'],\ntextarea {\n  outline: none;\n  border: none;\n}\ninput[type='text']::-moz-placeholder {\n  color: var(--input-placeholder-color);\n}\ninput[type='text']:-ms-input-placeholder {\n  color: var(--input-placeholder-color);\n}\ninput[type='text']::placeholder {\n  color: var(--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  font-weight: 500;\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=n.forwardRef(((e,n)=>{const{inputStyle:o,style:r,className:a,showCount:i,isErrored:l,startLabel:c,isRequired:s,errorText:d,endLabel:p,maxLength:u,...h}=e;return console.log(e.value),t.createElement("div",{className:"input-container",style:r},e.label&&t.createElement("label",{className:"input-label "+(s?"required":"")},e.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:n,style:o})),i&&u>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),p&&t.createElement("div",{className:"end-label"},p)),l&&d&&t.createElement("span",{className:"input-error"},e.errorText))})),c=n.forwardRef(((e,n)=>{const{inputStyle:o,style:r,className:a,showCount:i,maxLength:l,isErrored:c,startLabel:s,isRequired:d,...p}=e;return console.log(e.value),t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:r},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.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"},p,{ref:n,style:o})),i&&l&&l>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)),e.isErrored&&e.errorText&&t.createElement("span",{className:"input-error"},e.errorText))})),s=a(l,i),d=a(c,i);o(".checkbox-group {\n  display: flex;\n  align-items: center;\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  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(--input-highlight-color) 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  font-weight: 500;\n  padding: 16px;\n  min-width: 200px;\n  border: 1px solid #ebeff3;\n  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);\n  border-radius: 4px;\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  border-radius: 2px;\n  position: relative;\n  margin-right: 10px;\n  background-color: #fff;\n  border: 1px solid;\n  border-color: var(--input-highlight-color);\n}\n.checkbox:hover {\n  border-color: var(--input-highlight-color);\n  box-shadow: var(--focus-box-shadow-color) 0px 0px 0px 5px;\n}\ninput[type='checkbox']:checked ~ .checkbox {\n  background-color: var(--input-highlight-color);\n  border-color: var(--input-highlight-color);\n}\ninput[type='checkbox']:checked ~ .checkbox:hover {\n  border-color: var(--input-highlight-color);\n}\ninput[type='checkbox']:disabled ~ .checkbox:hover {\n  box-shadow: unset;\n  border-color: unset;\n}\n");const p=()=>t.createElement("svg",{id:"tick",className:"tick-icon",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"title",viewBox:"0 0 10 10"},t.createElement("path",{d:"M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",fill:"#fff",fillRule:"evenodd"})),u=({values:e,options:n,onChangeHandler:o})=>t.createElement("div",{className:"checkbox-group"},n.map(((n,r)=>t.createElement(h,{key:n.id,checked:e?.includes(n.id),name:n.name??n.id,id:n.id,autoFocus:0===r,onChange:(t,r)=>{if(r)o([...e||[],n.id]);else{const t=e.indexOf(n.id);t>-1&&e.splice(t,1),o([...e])}}},n.label)))),h=a(n.forwardRef(((e,n)=>t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:n,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,autoFocus:e.autoFocus,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(p,null)," ")),t.createElement("div",null,e.children)))),{checked:!1});o(".radio-group {\n  display: flex;\n  align-items: center;\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(--input-border-color);\n  transition: background-color ease-in 0.2s;\n  width: 18px;\n  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: 500;\n  padding: 16px;\n  min-width: 200px;\n  border: 1px solid #ebeff3;\n  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);\n  border-radius: 4px;\n}\ninput[type='radio'] {\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n}\ninput[type='radio']:focus ~ .radio {\n  /* box-shadow: ${pseudo.focus} 0px 0px 0px 3px; */\n  box-shadow: var(--input-highlight-color) 0px 0px 0px 3px;\n  border-color: transparent;\n}\n\ninput[type='radio']:checked ~ .radio:before {\n  background-color: var(--input-highlight-color);\n}\n.radio-container:hover .radio {\n  border-color: var(--input-highlight-color);\n  box-shadow: var(--focus-box-shadow-color) 0px 0px 0px 5px;\n}\n");const x=({name:e,options:n,value:o,onChangeHandler:r})=>t.createElement("div",{className:"radio-group"},n.map((n=>t.createElement(m,{key:n.id,value:n.id,name:e,onChange:e=>{r(e.currentTarget.value)},checked:o===n.id},n.label)))),m=a(n.forwardRef(((e,n)=>t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:n,type:"radio",name:e.name,value:e.value,checked:e.checked,onClick:e.onChange,autoFocus:!0}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children)))),{checked:!1});o(".progressbar-container {\n  width: 100%;\n  height: 6px;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.progressbar {\n  transition: transform 0.25s linear;\n  transform-origin: left;\n  height: 100%;\n  background-color: var(--brand-color);\n}\n");const b=e=>{const{totalSteps:n,completedSteps:o}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(o>0?100/n:0)+"%",transform:`scaleX(${o})`}}))};o(".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(--primary-button-color);\n  border: 1px solid var(--primary-button-color);\n  border-radius: 4px;\n  min-width: 200px;\n}\n@media (max-width: 550px) {\n  .action-button {\n    min-width: 120px;\n  }\n}\n\n.action-button:not([disabled]):hover {\n  background: var(--primary-button-hover-color);\n  /* background-color: ${hover}; */\n}\n\n.action-button:not([disabled]):active {\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}\n");const g=()=>t.createElement(t.Fragment,null,"..."),f=e=>{const{inline:n=!1,children:o,disabled:r,className:a="",htmlType:i,type:l="primary",onClick:c,size:s,overrideStyleClassName:d="",loading:p=!1,...u}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:r,className:`action-button ${a} ${d}`,type:i,onClick:c},u),p?t.createElement(g,null):o)},v=({question:e,formValues:n,onChangeHandler:o})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(r,{type_info:e.type_info,onChangeHandler:o,npsValue:n[e.name]});case"CHECKBOX":return t.createElement(u,{values:n[e.name],options:e.type_info.choices,onChangeHandler:o});case"CHECKBOX":return t.createElement(x,{name:e.name,onChangeHandler:o,options:e.type_info.choices,value:n[e.name]});case"MESSAGE":return t.createElement("div",{className:"responsive-text-field"},t.createElement(s,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>o(e.target.value)}),t.createElement(d,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>o(e.target.value)}));case"PARAGRAPH":return t.createElement(d,{autoFocus:!0,label:"",isRequired:e.is_required,value:n[e.name]||"",onChange:e=>o(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};o(".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: 40px;\n  padding: 20px;\n  grid-gap: 28px;\n  gap: 28px;\n}\n.question-text {\n  font-size: 1.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.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.submit {\n  padding-bottom: 40px;\n  display: flex;\n  justify-content: center;\n}\n.responsive-text-field {\n  width: 100%;\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  .responsive-text-field .textarea-container {\n    display: flex;\n  }\n}\n");const w=["RANGE","NPS","RADIO"],y=()=>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=u,exports.Input=s,exports.NPS=r,exports.ProgressBar=b,exports.Radio=m,exports.RadioGroup=x,exports.TextArea=d,exports.default=({survey:e,onSubmit:o})=>{const{meta:{blocks:r},question_details:{questions:a}}=e,[i,l]=n.useState({}),[c,s]=n.useState(!1),[d,p]=n.useState([]),u=n.useRef(null),h=n.useRef(null),x=n.useRef(null),m=n.useRef(0),g=n.useRef(!1),k=n.useRef([]);n.useEffect((()=>{r&&!u.current&&r.length>0&&N(r[0])}),[r]),n.useEffect((()=>{x.current?.scrollIntoView({block:"center",behavior:"smooth"}),k.current=d}),[d]),n.useEffect((()=>{Object.keys(i).length>0&&h.current&&(w.includes(h.current.type_info.question_type)||g.current)&&!E()&&C()}),[i]);const E=()=>m.current===r.length-1||"end"===u.current.branchOption,N=e=>{let n={};if(e.is_based_on_score){const t=a[0].type_info.choices[i?.[a[0].name]]?.dependent_question_names,o=e.question_names.find((e=>t?.includes(e)));n=a.find((e=>e.name===o))}else n=a.find((n=>n.name===e.question_names[0]));u.current=e,h.current=n;k.current.find((e=>e.question.name===n.name))||p([...k.current,{...e,question:n}])},q=(e,n,t)=>{if(t)if(null!=i[e.question.name]&&e.name!==d[d.length-1].name){const[t,o]=(e=>{const n=d.findIndex((n=>n.name===e.name)),t=d.slice(0,n+1),o=t.reduce(((e,n)=>(e[n.question.name]=i[n.question.name],e)),{});return m.current=r.findIndex((n=>n.name===e.name)),[t,o]})(e);l({...o,...null!=n&&{[e.question.name]:n}}),k.current=t}else l({...i,...null!=n&&{[e.question.name]:n}});else l({...i,...null!=n&&{[e.question.name]:n}})},C=()=>{E()?s(!0):(u.current.nextBlock?m.current=r.findIndex((e=>e.name===u.current.nextBlock)):m.current+=1,N(r[m.current]))},_=e=>{const n=d.findIndex((n=>n.name===e.name)),t=[...d];t.splice(n,1),k.current=t,C()};return u.current&&h.current?c?t.createElement(y,null):t.createElement(t.Fragment,null,t.createElement(b,{totalSteps:r.length,completedSteps:m.current}),d.map(((e,n)=>{return t.createElement("div",{className:"question-container",ref:x,id:e.title,key:e.title},t.createElement("div",{className:"question-text"},e.question.text),t.createElement(v,{question:e.question,formValues:i,onChangeHandler:n=>{g.current=!1,m.current=r.findIndex((n=>n.name===e.name)),u.current=e,h.current=e.question,q(e,n,w.includes(e.question.type_info.question_type)&&!E())}}),t.createElement("div",{className:"action-buttons"},(o=e.question,o.name===h.current.name&&!w.includes(o.type_info.question_type)&&!E()&&t.createElement(f,{onClick:()=>{g.current=!0,q(e,null,!0)},className:"next-button"},"Next")),((e,n)=>!e.required&&n.name===h.current.name)(e,e.question)&&t.createElement("button",{className:"skip-button",onClick:_},"Skip")));var o})),E()&&t.createElement("div",{className:"submit"},t.createElement(f,{onClick:()=>{s(!0),o(i)}},"Submit Survey"))):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function r(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}r(".container {\n  margin: 0 auto;\n  width: 100%;\n}\n.title {\n  color: var(--brand-color);\n  font-weight: 600;\n}\n\n.footer {\n  margin-top: 20px;\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: 12px;\n}\n\n.widget span {\n  color: #aaa;\n  font-size: 12px;\n}\n.widget button {\n  display: inline-block;\n  font-size: 16px;\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: 500;\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,\n    border-color 0.2s ease-in, transform 0.2s cubic-bezier(0.5, 2, 0.5, 0.75);\n}\n.widget button:hover {\n  color: white;\n  transform: scale(1.15);\n  z-index: 2;\n  position: relative;\n}\n.widget button.active {\n  color: white;\n  transform: scale(1.15);\n  z-index: 2;\n  position: relative;\n}\n\n.choices {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n\n.choice.active,\n.choice:hover:nth-child(1) {\n  background: #eb5b56;\n}\n.choice.active,\n.choice:hover:nth-child(2) {\n  background: #fb8774;\n}\n.choice.active,\n.choice:hover:nth-child(3) {\n  background: #f58f6b;\n}\n.choice.active,\n.choice:hover:nth-child(4) {\n  background: #f6996a;\n}\n.choice.active,\n.choice:hover:nth-child(5) {\n  background: #eab268;\n}\n.choice.active,\n.choice:hover:nth-child(6) {\n  background: #cebb69;\n}\n.choice.active,\n.choice:hover:nth-child(7) {\n  background: #bdc46c;\n}\n.choice.active,\n.choice:hover:nth-child(8) {\n  background: #a4cd72;\n}\n.choice.active,\n.choice:hover:nth-child(9) {\n  background: #77c955;\n}\n.choice.active,\n.choice:hover:nth-child(10) {\n  background: #37c248;\n}\n\n.widget.highlighted button.active,\n.widget.highlighted button:hover {\n  background: var(--brand-color) !important;\n}\n.widget .rounded button {\n  border-radius: 100%;\n}\n.widget .boxed button {\n  border-radius: 0;\n}\n.widget {\n  padding: 35px 0;\n  box-sizing: border-box;\n  position: relative;\n  padding-bottom: 30px;\n}\n.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.widget .positive-text,\n.widget .negative-text {\n  position: absolute;\n  color: var(--color-elephant-500);\n}\n.widget .positive-text {\n  right: 0px;\n  bottom: 5px;\n  text-align: right;\n}\n.widget .negative-text {\n  left: 0;\n  bottom: 5px;\n  text-align: left;\n}\n@media (max-width: 550px) {\n  .widget .button-container {\n    background: transparent;\n  }\n  .widget .choices {\n    flex-wrap: wrap;\n    justify-content: center;\n    grid-gap: 16px;\n    gap: 16px;\n    background: transparent;\n  }\n  .widget button {\n    border-radius: 50%;\n    background: #ebeff3;\n  }\n}\n");const o=e=>{const{type_info:{linear_scale:{button_shape:r,button_style:o},score_presets:{start:a,end:i},validation:{min:l},footer_text:c}}=e,d=e=>{switch(e){case e<4:return"detractor";case e<7:return"passive";default:return"promoter"}},s=n.useRef(Array.from({length:10},((e,n)=>n+l)));return t.createElement("div",{className:"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"},s.current.map((n=>t.createElement("button",{onClick:t=>{e.onChangeHandler(n)},className:`choice ${d(n)} ${e.npsValue===n&&"active"}`},n)))),t.createElement("span",{className:"positive-text"},i))),t.createElement("div",{className:"footer"},c))},a=(e,n)=>(e.defaultProps=n,e);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: 12px;\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 var(--default-error-highlight-color);\n  border: 1px solid var(--error-highlight-color,var(--default-error-highlight-color));\n}\n.input-basic.error:hover {\n  border: 1px solid var(--default-error-highlight-color);\n  border: 1px solid var(--error-highlight-color,var(--default-error-highlight-color));\n}\n.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  border-color: var(--input-hover-border-color,var(--default-input-hover-border-color)));\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  font-weight: 500;\n  border-radius: 4px;\n}\ninput[type='text'],\ntextarea {\n  outline: none;\n  border: none;\n}\ninput[type='text']::-moz-placeholder {\n  color: var(--input-placeholder-color);\n}\ninput[type='text']:-ms-input-placeholder {\n  color: var(--input-placeholder-color);\n}\ninput[type='text']::placeholder {\n  color: var(--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  font-weight: 500;\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=n.forwardRef(((e,n)=>{const{inputStyle:r,style:o,className:a,showCount:i,isErrored:l,startLabel:c,isRequired:d,errorText:s,endLabel:u,maxLength:p,...h}=e;return console.log(e.value),t.createElement("div",{className:"input-container",style:o},e.label&&t.createElement("label",{className:"input-label "+(d?"required":"")},e.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:n,style:r})),i&&p>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),u&&t.createElement("div",{className:"end-label"},u)),l&&s&&t.createElement("span",{className:"input-error"},e.errorText))})),c=n.forwardRef(((e,n)=>{const{inputStyle:r,style:o,className:a,showCount:i,maxLength:l,isErrored:c,startLabel:d,isRequired:s,...u}=e;return console.log(e.value),t.createElement(t.Fragment,null,t.createElement("div",{className:"textarea-container",style:o},e.label&&t.createElement("label",{className:"input-label "+(s?"required":"")},e.label),d&&t.createElement("div",{className:"start-label"},d),t.createElement("div",{className:`input-basic ${c?"error":""} ${a||""}`},t.createElement("textarea",Object.assign({autoComplete:"off"},u,{ref:n,style:r})),i&&l&&l>0&&t.createElement("div",{className:"end-max-length"},`${e.value&&e.value.length||0}/${e.maxLength}`)),e.endLabel&&t.createElement("div",{className:"end-label"},e.endLabel)),e.isErrored&&e.errorText&&t.createElement("span",{className:"input-error"},e.errorText))})),d=a(l,i),s=a(c,i);r(".checkbox-group {\n  display: flex;\n  align-items: center;\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  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  font-weight: 500;\n  padding: 16px;\n  min-width: 200px;\n  border: 1px solid #ebeff3;\n  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);\n  border-radius: 4px;\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  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:e,options:n,onChangeHandler:r})=>t.createElement("div",{className:"checkbox-group"},n.map(((n,o)=>t.createElement(h,{key:n.id,checked:e?.includes(n.id),name:n.name??n.id,id:n.id,autoFocus:0===o,onChange:(t,o)=>{if(o)r([...e||[],n.id]);else{const t=e.indexOf(n.id);t>-1&&e.splice(t,1),r([...e])}}},n.label)))),h=a(n.forwardRef(((e,n)=>t.createElement("label",{className:`checkbox-label ${e.disabled&&"disabled"}`},t.createElement("input",{ref:n,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,autoFocus:e.autoFocus,onChange:e.readOnly?()=>{}:n=>e.onChange(n,n.target.checked)}),t.createElement("div",{className:"checkbox"},e.checked&&t.createElement("div",{className:"icon-container"},t.createElement(u,null)," ")),t.createElement("div",null,e.children)))),{checked:!1});r(".radio-group {\n  display: flex;\n  align-items: center;\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  width: 18px;\n  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: 500;\n  padding: 16px;\n  min-width: 200px;\n  border: 1px solid #ebeff3;\n  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);\n  border-radius: 4px;\n}\ninput[type='radio'] {\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\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 0px 5px;\n  box-shadow: var(--background-color,var(--default-background-color)) 0px 0px 0px 5px;\n}\n");const b=({name:e,options:n,value:r,onChangeHandler:o})=>t.createElement("div",{className:"radio-group"},n.map((n=>t.createElement(g,{key:n.id,value:n.id,name:e,onChange:e=>{o(e.currentTarget.value)},checked:r===n.id},n.label)))),g=a(n.forwardRef(((e,n)=>t.createElement("label",{className:"radio-label"},t.createElement("input",{ref:n,type:"radio",name:e.name,value:e.value,checked:e.checked,onClick:e.onChange,autoFocus:!0}),t.createElement("div",{className:"radio"}),t.createElement("div",null,e.children)))),{checked:!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(--brand-color);\n}\n");const x=e=>{const{totalSteps:n,completedSteps:r}=e;return t.createElement("div",{className:"progressbar-container"},t.createElement("div",{className:"progressbar",style:{width:(r>0?100/n:0)+"%",transform:`scaleX(${r})`}}))};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(--primary-button-color);\n  border: 1px solid var(--primary-button-color);\n  border-radius: 4px;\n  min-width: 200px;\n}\n@media (max-width: 550px) {\n  .action-button {\n    min-width: 120px;\n  }\n}\n\n.action-button:not([disabled]):hover {\n  background: var(--primary-button-hover-color);\n  /* background-color: ${hover}; */\n}\n\n.action-button:not([disabled]):active {\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}\n");const m=()=>t.createElement(t.Fragment,null,"..."),f=e=>{const{inline:n=!1,children:r,disabled:o,className:a="",htmlType:i,type:l="primary",onClick:c,size:d,overrideStyleClassName:s="",loading:u=!1,...p}=e;return t.createElement("button",Object.assign({style:n?{display:"inline-block"}:{},disabled:o,className:`action-button ${a} ${s}`,type:i,onClick:c},p),u?t.createElement(m,null):r)},v=({question:e,formValues:n,onChangeHandler:r})=>{switch(e.type_info.question_type){case"RANGE":return t.createElement(o,{type_info:e.type_info,onChangeHandler:r,npsValue:n[e.name]});case"CHECKBOX":return t.createElement(p,{values:n[e.name],options:e.type_info.choices,onChangeHandler:r});case"CHECKBOX":return t.createElement(b,{name:e.name,onChangeHandler:r,options:e.type_info.choices,value:n[e.name]});case"MESSAGE":return t.createElement("div",{className:"responsive-text-field"},t.createElement(d,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}),t.createElement(s,{autoFocus:!0,label:"",maxLength:300,showCount:!0,isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)}));case"PARAGRAPH":return t.createElement(s,{autoFocus:!0,label:"",isRequired:e.is_required,value:n[e.name]||"",onChange:e=>r(e.target.value)});default:return console.error(`Question type ${e.type_info.question_type} not found`),null}};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.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: 40px;\n  padding: 20px;\n  grid-gap: 28px;\n  gap: 28px;\n}\n.question-text {\n  font-size: 1.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.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.submit {\n  padding-bottom: 40px;\n  display: flex;\n  justify-content: center;\n}\n.responsive-text-field {\n  width: 100%;\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  .responsive-text-field .textarea-container {\n    display: flex;\n  }\n}\n");const w=["RANGE","NPS","RADIO"],k=()=>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=d,exports.NPS=o,exports.ProgressBar=x,exports.Radio=g,exports.RadioGroup=b,exports.Survey=({survey:e,onSubmit:r})=>{const{meta:{blocks:o},question_details:{questions:a}}=e,[i,l]=n.useState({}),[c,d]=n.useState(!1),[s,u]=n.useState([]),p=n.useRef(null),h=n.useRef(null),b=n.useRef(null),g=n.useRef(0),m=n.useRef(!1),y=n.useRef([]);n.useEffect((()=>{o&&!p.current&&o.length>0&&N(o[0])}),[o]),n.useEffect((()=>{b.current?.scrollIntoView({block:"center",behavior:"smooth"}),y.current=s}),[s]),n.useEffect((()=>{Object.keys(i).length>0&&h.current&&(w.includes(h.current.type_info.question_type)||m.current)&&!E()&&C()}),[i]);const E=()=>g.current===o.length-1||"end"===p.current.branchOption,N=e=>{let n={};if(e.is_based_on_score){const t=a[0].type_info.choices[i?.[a[0].name]]?.dependent_question_names,r=e.question_names.find((e=>t?.includes(e)));n=a.find((e=>e.name===r))}else n=a.find((n=>n.name===e.question_names[0]));p.current=e,h.current=n;y.current.find((e=>e.question.name===n.name))||u([...y.current,{...e,question:n}])},q=(e,n,t)=>{if(t)if(null!=i[e.question.name]&&e.name!==s[s.length-1].name){const[t,r]=(e=>{const n=s.findIndex((n=>n.name===e.name)),t=s.slice(0,n+1),r=t.reduce(((e,n)=>(e[n.question.name]=i[n.question.name],e)),{});return g.current=o.findIndex((n=>n.name===e.name)),[t,r]})(e);l({...r,...null!=n&&{[e.question.name]:n}}),y.current=t}else l({...i,...null!=n&&{[e.question.name]:n}});else l({...i,...null!=n&&{[e.question.name]:n}})},C=()=>{E()?d(!0):(p.current.nextBlock?g.current=o.findIndex((e=>e.name===p.current.nextBlock)):g.current+=1,N(o[g.current]))},_=e=>{const n=s.findIndex((n=>n.name===e.name)),t=[...s];t.splice(n,1),y.current=t,C()};return p.current&&h.current?c?t.createElement(k,null):t.createElement(t.Fragment,null,t.createElement(x,{totalSteps:o.length,completedSteps:g.current}),s.map(((e,n)=>{return t.createElement("div",{className:"question-container",ref:b,id:e.title,key:e.title},t.createElement("div",{className:"question-text"},e.question.text),t.createElement(v,{question:e.question,formValues:i,onChangeHandler:n=>{m.current=!1,g.current=o.findIndex((n=>n.name===e.name)),p.current=e,h.current=e.question,q(e,n,w.includes(e.question.type_info.question_type)&&!E())}}),t.createElement("div",{className:"action-buttons"},(r=e.question,r.name===h.current.name&&!w.includes(r.type_info.question_type)&&!E()&&t.createElement(f,{onClick:()=>{m.current=!0,q(e,null,!0)},className:"next-button"},"Next")),((e,n)=>!e.required&&n.name===h.current.name)(e,e.question)&&t.createElement("button",{className:"skip-button",onClick:_},"Skip")));var r})),E()&&t.createElement("div",{className:"submit"},t.createElement(f,{onClick:()=>{d(!0),r(i)}},"Submit Survey"))):null},exports.TextArea=s;

package/lib/index.esm.js

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

package/lib/types/components/button/button.stories.d.ts

@@ -0,0 +1 @@
+export {};