input-states-react/dist/input-states-react.umd.js

Reusable UI components for forms and steps

(function(R,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(R=typeof globalThis<"u"?globalThis:R||self,c(R.InputStatesReact={},R.React))})(this,function(R,c){"use strict";var K={exports:{}},J={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ie;function je(){if(ie)return J;ie=1;var n=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(a,i,d){var x=null;if(d!==void 0&&(x=""+d),i.key!==void 0&&(x=""+i.key),"key"in i){d={};for(var T in i)T!=="key"&&(d[T]=i[T])}else d=i;return i=d.ref,{$$typeof:n,type:a,key:x,ref:i!==void 0?i:null,props:d}}return J.Fragment=s,J.jsx=t,J.jsxs=t,J}var X={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var le;function Se(){return le||(le=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case V:return"Suspense";case Q:return"SuspenseList";case L:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case g:return"Portal";case A:return(e.displayName||"Context")+".Provider";case _:return(e._context.displayName||"Context")+".Consumer";case B:var u=e.render;return e=e.displayName,e||(e=u.displayName||u.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Y:return u=e.displayName||null,u!==null?u:n(e.type)||"Memo";case k:u=e._payload,e=e._init;try{return n(e(u))}catch{}}return null}function s(e){return""+e}function t(e){try{s(e);var u=!1}catch{u=!0}if(u){u=console;var p=u.error,w=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return p.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",w),s(e)}}function a(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var u=n(e);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function i(){var e=G.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function x(e){if(v.call(e,"key")){var u=Object.getOwnPropertyDescriptor(e,"key").get;if(u&&u.isReactWarning)return!1}return e.key!==void 0}function T(e,u){function p(){S||(S=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}p.isReactWarning=!0,Object.defineProperty(e,"key",{get:p,configurable:!0})}function N(){var e=n(this.type);return P[e]||(P[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,u,p,w,M,D,oe,ae){return p=D.ref,e={$$typeof:o,type:e,key:u,props:D,_owner:M},(p!==void 0?p:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:N}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:oe}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:ae}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function l(e,u,p,w,M,D,oe,ae){var I=u.children;if(I!==void 0)if(w)if(E(I)){for(w=0;w<I.length;w++)j(I[w]);Object.freeze&&Object.freeze(I)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(I);if(v.call(u,"key")){I=n(e);var U=Object.keys(u).filter(function(Ce){return Ce!=="key"});w=0<U.length?"{key: someKey, "+U.join(": ..., ")+": ...}":"{key: someKey}",F[I+w]||(U=0<U.length?"{"+U.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,w,I,U,I),F[I+w]=!0)}if(I=null,p!==void 0&&(t(p),I=""+p),x(u)&&(t(u.key),I=""+u.key),"key"in u){p={};for(var ce in u)ce!=="key"&&(p[ce]=u[ce])}else p=u;return I&&T(p,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,I,D,M,i(),p,oe,ae)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===o&&e._store&&(e._store.validated=1)}var h=c,o=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),A=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),V=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),Y=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),L=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),G=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,v=Object.prototype.hasOwnProperty,E=Array.isArray,H=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var S,P={},O=h["react-stack-bottom-frame"].bind(h,d)(),C=H(a(d)),F={};X.Fragment=f,X.jsx=function(e,u,p,w,M){var D=1e4>G.recentlyCreatedOwnerStacks++;return l(e,u,p,!1,w,M,D?Error("react-stack-top-frame"):O,D?H(a(e)):C)},X.jsxs=function(e,u,p,w,M){var D=1e4>G.recentlyCreatedOwnerStacks++;return l(e,u,p,!0,w,M,D?Error("react-stack-top-frame"):O,D?H(a(e)):C)}}()),X}var ue;function Re(){return ue||(ue=1,process.env.NODE_ENV==="production"?K.exports=je():K.exports=Se()),K.exports}var r=Re();const de=n=>r.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n,children:r.jsx("path",{d:"M2 12.6924L8.245 19L22 5",stroke:"#2DCD73",strokeWidth:"2",strokeMiterlimit:"10"})}),q=c.forwardRef(({height:n=200,checked:s,onChange:t,children:a,errorMessage:i="",errorConsentNotScrolled:d="",requireFullScroll:x=!0,scrollThreshold:T=.95},N)=>{const[b,l]=c.useState(!1),[j,h]=c.useState(!1),[o,g]=c.useState(!1),[f,m]=c.useState(0),y=c.useRef(null),_=c.useRef(null);c.useImperativeHandle(N,()=>({validate:()=>(l(!0),s===!0),focus:()=>{_.current&&_.current.scrollIntoView({behavior:"smooth",block:"center"}),setTimeout(()=>{y.current&&y.current.focus()},300)}}));const A=c.useRef(null),[B,V]=c.useState(!1);c.useEffect(()=>{const k=A.current,L=()=>{k.scrollTop+k.clientHeight>=k.scrollHeight-1&&(V(!0),h(!1),g(!0))};if(k.scrollHeight<=k.clientHeight&&V(!0),k)return k.scrollHeight<=k.clientHeight&&(V(!0),g(!0)),k.addEventListener("scroll",L),()=>k.removeEventListener("scroll",L)},[]),c.useEffect(()=>{s&&A.current&&(A.current.scrollTo({top:A.current.scrollHeight,behavior:"smooth"}),g(!0),m(1),V(!0))},[s]);const Q=()=>{B||h(!0)},Y=k=>{const L=k.target,z=L.scrollTop,G=L.scrollHeight,v=L.clientHeight,E=z/(G-v);m(Math.min(E,1)),E>=T&&g(!0)};return r.jsx("div",{className:" input-group   consent-scroll-box",ref:_,children:r.jsxs("label",{className:"consent-container",onClick:Q,children:[r.jsx("input",{ref:y,type:"checkbox",checked:s,disabled:!B,onChange:k=>{B&&(t(k.target.checked),h(!1)),l(!0)}}),s?r.jsx("span",{className:"checkbox-wrapper checkbox-selected",children:r.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",children:[r.jsx("rect",{x:"2",y:"2",width:"20",height:"20",rx:"4",stroke:"#007BFF",strokeWidth:"2"}),r.jsx("path",{d:"M7 12L10 15L17 8",stroke:"#007BFF",strokeWidth:"2"})]})}):r.jsx("span",{className:"checkbox-wrapper",children:r.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:r.jsx("rect",{x:"2",y:"2",width:"20",height:"20",rx:"4",stroke:"#ccc",strokeWidth:"2"})})}),r.jsxs("div",{className:"scroll-container",style:{position:"relative",width:"100%"},children:[r.jsx("div",{ref:A,className:`scroll-content ${j?"error":""}`,style:{height:n,border:`1px solid ${b&&!s||j?"var(--input-Error-Border-Color)":"var(--input-Defualt-Border-Color)"}`},onScroll:Y,tabIndex:0,children:r.jsx("div",{dangerouslySetInnerHTML:{__html:a}})}),r.jsx("div",{className:`text-error-message no-margin  ${j||b&&!s?"keep-space-showing":"keep-space-hidden"}`,children:j?d:b&&!s?i||d:""}),x&&r.jsx("div",{style:{position:"absolute",bottom:"27px",right:"8px",backgroundColor:o?"":"#007bff",color:"white",padding:"4px 8px",borderRadius:"12px",fontSize:"12px",fontWeight:"bold"},children:o?r.jsx(de,{}):`${Math.round(f*100)}%`})]})]})})}),$=c.forwardRef(({head:n,label:s,value:t,onChange:a,errorMessage:i,required:d,maxLength:x=100},T)=>{const[N,b]=c.useState(!1),j=(f=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f))(t),o=N&&(d||t!=="")&&!j,g=c.useRef(null);return c.useImperativeHandle(T,()=>({validate:()=>(b(!0),j),focus:()=>{g.current&&(g.current.focus(),setTimeout(()=>{const f=g.current.getBoundingClientRect();window.scrollTo({top:window.scrollY+f.top-80-24,behavior:"smooth"})},10))}})),r.jsxs(r.Fragment,{children:[n&&r.jsx("div",{className:"group-label",children:n}),r.jsxs("div",{className:`input-group email-input-wrapper  ${o?"error":""} ${!o&&N&&j?"valid":""}`,children:[r.jsxs("div",{className:"email-input-inner ",children:[r.jsx("input",{ref:g,maxLength:x,type:"text",className:"email-input",placeholder:" ",value:t,onChange:f=>{a(f.target.value),b(!0)},onBlur:()=>b(!0)}),r.jsxs("label",{className:"email-input-label",children:[s,d&&" "]}),r.jsx("span",{className:"validation-icon valid-icon"}),r.jsx("span",{className:"validation-icon error-icon"})]}),o&&r.jsx("div",{className:"text-error-message",children:i})]})]})});function fe({html:n,children:s,className:t="",style:a={}}){return n?r.jsx("div",{className:`text-default label-standard ${t}`,style:a,dangerouslySetInnerHTML:{__html:n}}):r.jsx("div",{className:`text-default label-standard ${t}`,style:a,children:s})}const me=(n,s=0)=>{const t=(n??"").toString().replace(/,/g,"");if(t==="")return"";if(t.endsWith(".")&&s>0){const i=t.slice(0,-1);if(i===""&&t===".")return"0.";const d=parseFloat(i);return isNaN(d)?t:d.toLocaleString(void 0,{minimumFractionDigits:0,maximumFractionDigits:0})+"."}const a=parseFloat(t);return isNaN(a)?t:a.toLocaleString(void 0,{minimumFractionDigits:s,maximumFractionDigits:s})},W=(n,s)=>{let t="",a=!1;typeof n!="string"&&(n=(n??"").toString());for(let i=0;i<n.length;i++){const d=n[i];/\d/.test(d)?t+=d:d==="."&&!a&&s>0?(t+=".",a=!0):d==="-"&&i===0&&t===""&&(t+="-")}return t==="."&&s>0?"0.":t==="-."&&s>0?"-0.":t.startsWith(".")&&s>0&&t.length>1?"0"+t:t.startsWith("-.")&&s>0&&t.length>2?"-0"+t.substring(1):t},ee=c.forwardRef(({head:n="หัวข้อ",label:s="Label",suggest:t="",value:a,onChange:i,min:d=-1/0,max:x=1/0,errorMessage:T="กรุณากรอกข้อมูลให้ถูกต้อง",required:N=!1,maxDigit:b=null,decimalPlaces:l=0},j)=>{const[h,o]=c.useState(""),[g,f]=c.useState(!1),[m,y]=c.useState(!1),_=c.useRef(null),A=c.useRef({value:"",cursor:0});c.useEffect(()=>{const v=a==null?"":a.toString(),E=W(v,l);if(!m)o(me(E,l));else{const H=W(h,l);E!==H&&(o(E),_.current&&(A.current={value:E,cursor:E.length}))}},[a,m,l]);const B=parseFloat(W(h,l)),V=W(h,l),Q=!N&&V===""||V==="-"&&!N||!isNaN(B)&&B>=d&&B<=x;c.useImperativeHandle(j,()=>({validate:()=>{f(!0);const v=W(h,l);if(!N&&v===""||v==="-"&&!N)return!0;const E=parseFloat(v);return!isNaN(E)&&E>=d&&E<=x},focus:()=>{_.current&&(_.current.focus(),setTimeout(()=>{const v=_.current.getBoundingClientRect();window.scrollTo({top:window.scrollY+v.top-100-24,behavior:"smooth"})},10))}}));const Y=g&&!Q&&!!T,k=()=>{y(!0);const v=W(h,l);_.current&&(A.current={value:v,cursor:v.length})},L=v=>{const E=v.target.value,H=v.target.selectionStart;A.current={value:E,cursor:H};let S="",P=!1;for(let w=0;w<E.length;w++){const M=E[w];/\d/.test(M)?S+=M:M==="."&&!P&&l>0&&(S+=M,P=!0)}S==="."&&l>0&&(S="0."),S==="-."&&l>0&&(S="-0.");let O="",C=S;S.startsWith("-")&&(O="-",C=S.substring(1));let[F,e]=C.split(".");F=F||"",b&&F.length>b&&(F=F.slice(0,b)),e!==void 0?(l!=null&&e.length>l&&(e=e.slice(0,l)),C=F+"."+e):C=F,S=O+C;let u=F;if(F){const w=parseFloat(F);(!isNaN(w)||F.match(/^0+$/))&&(u=w.toLocaleString(void 0,{minimumFractionDigits:0,maximumFractionDigits:0}))}let p=O+u;e!==void 0?p+="."+e:C.endsWith(".")&&l>0&&C.length>0&&F.length>=0&&(p===O&&C==="."?p=O+"0.":p.endsWith(".")||(p+=".")),S==="0."&&l>0&&(p="0."),S==="-0."&&l>0&&(p="-0."),o(p),i(S),g||f(!0)};c.useLayoutEffect(()=>{if(m&&_.current){const v=_.current,{value:E,cursor:H}=A.current,S=h;if(E===S&&v.value===S&&v.selectionStart===H)return;let P=0;for(let e=0;e<H;e++)E[e]!==","&&P++;let O=0,C=0;for(let e=0;e<S.length&&(S[e]!==","&&C++,O++,!(C>=P));e++);if(C<P&&C===0&&S.length>0)O=0,S.startsWith("-")&&(O=1);else if(C<P){let e=0,u=0;for(let p=0;p<S.length&&(S[p]!==","&&u++,e++,!(u>=C));p++);O=e}const F=Math.max(0,Math.min(O,v.value.length));v.value===S&&v.setSelectionRange(F,F)}},[h,m]);const z=()=>{y(!1),f(!0);const v=W(h,l);let E=v;if(v===""||v==="-")o(v==="-"?"-":""),E=v==="-"?"-":"";else{const H=parseFloat(v);isNaN(H)?(o(v),E=v):(E=H.toFixed(l),o(me(E,l)))}i(E)},G=h;return r.jsxs(r.Fragment,{children:[n&&r.jsx("div",{className:"group-label",children:n}),r.jsxs("div",{className:`input-group numeric-input-wrapper ${Y?"error":""}`,children:[r.jsxs("div",{className:"numeric-input-inner",children:[r.jsx("span",{className:"left-label",children:s}),r.jsx("input",{ref:_,type:"text",value:G,onChange:L,onFocus:k,onBlur:z,className:`numeric-input ${Y?"input-error":""}`,placeholder:t,inputMode:"decimal",onKeyDown:v=>{v.key}})]}),Y&&r.jsx("div",{className:"text-error-message",children:T})]})]})}),te=c.forwardRef(({head:n,name:s,options:t,value:a,onChange:i,errorMessage:d="กรุณากรอกข้อมูลให้ถูกต้อง",direction:x="horizontal"},T)=>{const[N,b]=c.useState(!1),[l,j]=c.useState(null),h=c.useRef(null),o=c.useRef(null);c.useImperativeHandle(T,()=>({validate:()=>(b(!0),!!a),focus:()=>{h.current&&h.current.scrollIntoView({behavior:"smooth",block:"center"}),setTimeout(()=>{o.current&&o.current.focus()},300)}}));const g=N&&!a,f=x==="vertical"?"radio-options-row-Vertical":"radio-options-row-Horizontal";return r.jsxs("div",{ref:h,className:"input-group radio-group-horizontal",children:[n&&r.jsx("div",{className:"group-label",dangerouslySetInnerHTML:{__html:n}}),r.jsx("div",{className:f,children:t.map((m,y)=>{const _=a===m.value,A=l===m.value;return r.jsxs("label",{className:"radio-option",onMouseEnter:()=>j(m.value),onMouseLeave:()=>j(null),children:[r.jsx("input",{ref:y===0?o:null,type:"radio",name:s,value:m.value,checked:_,onChange:i}),r.jsx("span",{className:"radio-icon",children:_?r.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",children:[r.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"#0064FF",strokeWidth:"2"}),r.jsx("path",{d:"M7 12L10 15L16 8",stroke:"#0064FF",strokeWidth:"2"})]}):A?r.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:r.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"#0064FF",strokeWidth:"2"})}):r.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:r.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"#ccc",strokeWidth:"2"})})}),r.jsx("span",{className:"radio-text",children:m.label})]},m.value)})}),r.jsx("div",{className:`text-error-message ${g?"keep-space-showing	":"keep-space-hidden"}`,children:d||"กรุณาเลือกเพศ"})]})});function pe(n,s=!0){const t=/^[a-zA-Z\u0E00-\u0E7F\s]+$/,a=n||"";return!s||a.trim()!==""&&t.test(a)}const re=c.forwardRef(({head:n,label:s,value:t,onChange:a,errorMessage:i,required:d,maxLength:x=100},T)=>{const[N,b]=c.useState(!1),l=pe(t),h=N&&(d||t!=="")&&!l,o=f=>{let m=f.target.value;m=m.replace(/[^a-zA-Z\u0E00-\u0E7F\s]/g,""),a(m),b(!0)},g=c.useRef(null);return c.useImperativeHandle(T,()=>({validate:()=>(b(!0),l),focus:()=>{g.current&&(g.current.focus(),setTimeout(()=>{const f=g.current.getBoundingClientRect();window.scrollTo({top:window.scrollY+f.top-80-24,behavior:"smooth"})},10))}})),r.jsxs(r.Fragment,{children:[n&&r.jsx("div",{className:"group-label",children:n}),r.jsxs("div",{className:`input-group text-input-wrapper  ${h?"error":""} ${!h&&N&&l?"valid":""}`,children:[r.jsxs("div",{className:"text-input-inner ",children:[r.jsx("input",{ref:g,maxLength:x,type:"text",className:"text-input",placeholder:" ",value:t,onChange:o,onBlur:()=>b(!0)}),r.jsxs("label",{className:"text-input-label",children:[s,d&&" "]}),r.jsx("span",{className:"validation-icon valid-icon",children:l&&r.jsx(de,{})}),r.jsx("span",{className:"validation-icon error-icon"})]}),h&&r.jsx("div",{className:"text-error-message",children:i})]})]})}),he=({children:n,type:s="button",className:t="",...a})=>r.jsx("button",{type:s,className:`${t||"btn-primary-base"}`,...a,children:n}),ne=({title:n,children:s,collapsible:t=!1,defaultOpen:a=!0})=>{const[i,d]=c.useState(a);return r.jsxs("div",{className:"form-section",children:[r.jsxs("div",{className:`form-section-header${t?" collapsible":""}`,onClick:()=>t&&d(x=>!x),children:[r.jsx("h3",{className:"form-section-title",children:n}),t&&r.jsx("span",{className:"form-section-toggle",children:i?"▲":"▼"})]}),(!t||i)&&r.jsx("div",{className:"form-section-content",children:s})]})},Ne=({steps:n,initialStep:s=1})=>{const[t,a]=c.useState(s),[i,d]=c.useState({}),x=l=>{d(j=>({...j,[t-1]:l})),t<n.length?a(j=>j+1):console.log("Stepper: All steps completed!")},T=l=>{l<t&&a(l)},N=n[t-1];let b;return N&&(b=c.cloneElement(N.component,{onStepComplete:x,stepsData:i})),r.jsxs("div",{className:"stepper-container",children:[r.jsx("div",{className:"stepper-row",children:n.map((l,j)=>{const h=j+1,o=h<t,g=h===t,f=o;let m="stepper-item__indicator";o?m+=" stepper-item__indicator--completed":g?m+=" stepper-item__indicator--active":m+=" stepper-item__indicator--upcoming",f&&(m+=" stepper-item__indicator--clickable");let y="stepper-item__label";o||g?y+=" stepper-item__label--highlighted":y+=" stepper-item__label--dimmed";let _="stepper-line";return o&&(_+=" stepper-line--completed"),r.jsxs(c.Fragment,{children:[r.jsxs("div",{className:"stepper-item",children:[r.jsx("div",{className:m,onClick:()=>f?T(h):null,children:o?r.jsx("svg",{className:"stepper-item__icon",viewBox:"0 0 20 20",fill:"currentColor",children:r.jsx("path",{fillRule:"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",clipRule:"evenodd"})}):r.jsx("span",{className:"stepper-item__number",children:h})}),r.jsx("p",{className:y,children:l.name})]}),h<n.length&&r.jsx("div",{className:_})]},l.name+j)})}),r.jsx("div",{className:"stepper-content",children:b})]})},Te=new Set([te,ee,$,q,re]);function Z(n={}){return!!n.name&&Te.has(n.component)}function ge(n,s={}){return n.forEach(t=>{if(Array.isArray(t.children)){ge(t.children,s);return}Z(t)&&(t.name==="consent"?s[t.name]=!1:s[t.name]=t.defaultValue??"")}),s}const _e={RadioGroup:te,NumericTextInput:ee,EmailInput:$,ConsentCheckbox:q,TextInput:re,StandardLabel:fe,Section:ne};function ve(n=[]){return n.map(s=>{const t=typeof s.component=="string"?s.component.trim():s.component,a={...s,component:typeof t=="string"?_e[t]:t};return Array.isArray(s.children)&&(a.children=ve(s.children)),a})}function xe(){const[n,s]=c.useState({});return{errors:n,setErrors:s,clearFieldError:a=>{s(i=>{const{[a]:d,...x}=i;return x})}}}const se=(n,s,t)=>a=>{var d;const i=((d=a==null?void 0:a.target)==null?void 0:d.value)??a;s(x=>({...x,[n]:i})),t(x=>{const{[n]:T,...N}=x;return N})};function be(n,s){const t={};return Object.keys(n).forEach(a=>{var i;(i=n[a].current)!=null&&i.validate()||(t[a]=s[a])}),t}function Ee(n){const s=[];return n.forEach(t=>{Array.isArray(t.children)?s.push(...Ee(t.children)):s.push(t)}),s}const we=({onFormSubmitAndValidated:n,fields:s,formData:t,setFormData:a,buttonLabel:i})=>{const{setErrors:d}=xe(),[x,T]=c.useState(!1),N=Ee(s),b=c.useRef({});N.filter(Z).forEach(o=>{b.current[o.name]||(b.current[o.name]=c.createRef())});const l=async o=>{o.preventDefault(),T(!0);const g=be(b.current,Object.fromEntries(N.filter(Z).map(f=>[f.name,f.errorMessage])));if(d(g),Object.keys(g).length>0){const f=Object.keys(g)[0],m=b.current[f];m&&m.current&&typeof m.current.focus=="function"&&m.current.focus(),T(!1);return}try{n&&n(t)}catch(f){console.error(f),alert("เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง")}T(!1)},j=(o,g)=>{if(o.component===ne&&Array.isArray(o.children)){const y=o.component;return r.jsx(y,{...o.props,children:o.children.map((_,A)=>r.jsx("div",{children:j(_,A)},_.name||A))},o.name||g)}if(!o.component)return null;if(!Z(o)||o.type==="custom"){const y=o.component;return r.jsx(y,{...o.props},o.name||g)}const f=o.component,m=b.current[o.name];return o.name==="consent"?r.jsx(f,{ref:m,...o.props,checked:!!t[o.name],onChange:se(o.name,a,()=>{},o.errorMessage),errorMessage:o.errorMessage},o.name||g):r.jsx(f,{ref:m,...o.props,value:t[o.name],onChange:se(o.name,a,()=>{},o.errorMessage),errorMessage:o.errorMessage},o.name||g)},h=o=>o.map((g,f)=>j(g,f));return r.jsxs("form",{onSubmit:l,children:[h(s),r.jsx("div",{className:"submit-container  ",children:r.jsx(he,{type:"submit",disabled:x,children:i})})]})};function ke(n){const t=(n||"").toString().replace(/[^\d.]/g,""),a=parseFloat(t);return isNaN(a)?"-":a.toLocaleString()}function ye(n){const t=(n||"").toString().replace(/[^\d.]/g,""),a=parseFloat(t);return isNaN(a)?"-":Math.round(a).toLocaleString()}R.ButtonPrimary=he,R.ConsentCheckbox=q,R.EmailInput=$,R.FormBuilder=we,R.Label=fe,R.NumericTextInput=ee,R.RadioGroup=te,R.Section=ne,R.Stepper=Ne,R.TextInput=re,R.formatNumber=ke,R.getInitialFormData=ge,R.isInputField=Z,R.isValidText=pe,R.mapFieldComponents=ve,R.roundAndFormatNumber=ye,R.updateFieldState=se,R.useFormErrors=xe,R.validateFields=be,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});