dripsender-otp-widget 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -14,13 +14,19 @@ npm install dripsender-otp-widget
14
14
 
15
15
  #### JSDelivr (Recommended)
16
16
  ```html
17
- <!-- CSS is inlined in the JavaScript bundle -->
17
+ <!-- Add the widget element BEFORE importing the script -->
18
+ <div id="otp-widget" reqotp="YOUR_REQUEST_OTP_ENDPOINT" verifyotp="YOUR_VERIFY_OTP_ENDPOINT"></div>
19
+
20
+ <!-- Then import the script (CSS is inlined in the JavaScript bundle) -->
18
21
  <script type="module" src="https://cdn.jsdelivr.net/npm/dripsender-otp-widget@latest/dist/assets/main.js"></script>
19
22
  ```
20
23
 
21
24
  #### Unpkg
22
25
  ```html
23
- <!-- CSS is inlined in the JavaScript bundle -->
26
+ <!-- Add the widget element BEFORE importing the script -->
27
+ <div id="otp-widget" reqotp="YOUR_REQUEST_OTP_ENDPOINT" verifyotp="YOUR_VERIFY_OTP_ENDPOINT"></div>
28
+
29
+ <!-- Then import the script (CSS is inlined in the JavaScript bundle) -->
24
30
  <script type="module" src="https://unpkg.com/dripsender-otp-widget/dist/assets/main.js"></script>
25
31
  ```
26
32
 
@@ -47,6 +53,14 @@ The widget can be customized using the following attributes:
47
53
  | `verifyotp` | API endpoint URL for verifying OTP | Required |
48
54
  | `title` | Custom title for the verification modal | "Verifikasi OTP" |
49
55
 
56
+ ## Troubleshooting
57
+
58
+ If the CSS is not loading properly when using the CDN version:
59
+
60
+ 1. Make sure the widget element is added to the DOM **before** the script is loaded
61
+ 2. Try adding the script at the end of your body tag
62
+ 3. For HTML Playground environments, you may need to ensure the script is loaded after the DOM is fully loaded
63
+
50
64
  ## Development
51
65
 
52
66
  To start the development server:
@@ -66,4 +80,4 @@ npm run build
66
80
 
67
81
  ## License
68
82
 
69
- MIT
83
+ MIT
@@ -1,6 +1,7 @@
1
- (function(H,T){typeof exports=="object"&&typeof module<"u"?module.exports=T():typeof define=="function"&&define.amd?define(T):(H=typeof globalThis<"u"?globalThis:H||self,H.DripsenderOTP=T())})(this,function(){"use strict";var Ye=Object.defineProperty;var Ze=(H,T,z)=>T in H?Ye(H,T,{enumerable:!0,configurable:!0,writable:!0,value:z}):H[T]=z;var ne=(H,T,z)=>(Ze(H,typeof T!="symbol"?T+"":T,z),z);const H="";function T(){}function z(e){return e()}function le(){return Object.create(null)}function K(e){e.forEach(z)}function oe(e){return typeof e=="function"}function ve(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function we(e){return Object.keys(e).length===0}function i(e,t){e.appendChild(t)}function ye(e,t,n){const l=ke(e);if(!l.getElementById(t)){const r=h("style");r.id=t,r.textContent=n,xe(l,r)}}function ke(e){if(!e)return document;const t=e.getRootNode?e.getRootNode():e.ownerDocument;return t&&t.host?t:e.ownerDocument}function xe(e,t){return i(e.head||e,t),t.sheet}function E(e,t,n){e.insertBefore(t,n||null)}function C(e){e.parentNode&&e.parentNode.removeChild(e)}function Oe(e,t){for(let n=0;n<e.length;n+=1)e[n]&&e[n].d(t)}function h(e){return document.createElement(e)}function F(e){return document.createElementNS("http://www.w3.org/2000/svg",e)}function j(e){return document.createTextNode(e)}function M(){return j(" ")}function Pe(){return j("")}function A(e,t,n,l){return e.addEventListener(t,n,l),()=>e.removeEventListener(t,n,l)}function o(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function Te(e){return Array.from(e.childNodes)}function J(e,t){t=""+t,e.data!==t&&(e.data=t)}function re(e,t){e.value=t??""}let Z;function X(e){Z=e}const D=[],se=[];let V=[];const ie=[],Se=Promise.resolve();let $=!1;function Ce(){$||($=!0,Se.then(ae))}function ee(e){V.push(e)}const te=new Set;let U=0;function ae(){if(U!==0)return;const e=Z;do{try{for(;U<D.length;){const t=D[U];U++,X(t),Ee(t.$$)}}catch(t){throw D.length=0,U=0,t}for(X(null),D.length=0,U=0;se.length;)se.pop()();for(let t=0;t<V.length;t+=1){const n=V[t];te.has(n)||(te.add(n),n())}V.length=0}while(D.length);for(;ie.length;)ie.pop()();$=!1,te.clear(),X(e)}function Ee(e){if(e.fragment!==null){e.update(),K(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(ee)}}function Me(e){const t=[],n=[];V.forEach(l=>e.indexOf(l)===-1?t.push(l):n.push(l)),n.forEach(l=>l()),V=t}const Ne=new Set;function Ie(e,t){e&&e.i&&(Ne.delete(e),e.i(t))}function ue(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}function qe(e,t,n){const{fragment:l,after_update:r}=e.$$;l&&l.m(t,n),ee(()=>{const a=e.$$.on_mount.map(z).filter(oe);e.$$.on_destroy?e.$$.on_destroy.push(...a):K(a),e.$$.on_mount=[]}),r.forEach(ee)}function He(e,t){const n=e.$$;n.fragment!==null&&(Me(n.after_update),K(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Be(e,t){e.$$.dirty[0]===-1&&(D.push(e),Ce(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function je(e,t,n,l,r,a,f=null,s=[-1]){const p=Z;X(e);const m=e.$$={fragment:null,ctx:[],props:a,update:T,not_equal:r,bound:le(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(p?p.$$.context:[])),callbacks:le(),dirty:s,skip_bound:!1,root:t.target||p.$$.root};f&&f(m.root);let v=!1;if(m.ctx=n?n(e,t.props||{},(d,_,...u)=>{const b=u.length?u[0]:_;return m.ctx&&r(m.ctx[d],m.ctx[d]=b)&&(!m.skip_bound&&m.bound[d]&&m.bound[d](b),v&&Be(e,d)),_}):[],m.update(),v=!0,K(m.before_update),m.fragment=l?l(m.ctx):!1,t.target){if(t.hydrate){const d=Te(t.target);m.fragment&&m.fragment.l(d),d.forEach(C)}else m.fragment&&m.fragment.c();t.intro&&Ie(e.$$.fragment),qe(e,t.target,t.anchor),ae()}X(p)}class Ae{constructor(){ne(this,"$$");ne(this,"$$set")}$destroy(){He(this,1),this.$destroy=T}$on(t,n){if(!oe(n))return T;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const r=l.indexOf(n);r!==-1&&l.splice(r,1)}}$set(t){this.$$set&&!we(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const ze="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(ze);function Le(e){ye(e,"svelte-13xfqe0",`body{margin:0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
2
- Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;background-color:#f9fafb}@keyframes svelte-13xfqe0-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes svelte-13xfqe0-success-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(79, 209, 197, 0)}50%{transform:scale(1.03);box-shadow:0 0 20px rgba(79, 209, 197, 0.5)}}input[type="text"].svelte-13xfqe0,input[type="tel"].svelte-13xfqe0{transition:border-color 0.2s ease}button.svelte-13xfqe0{position:relative;overflow:hidden}button.svelte-13xfqe0::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255, 255, 255, 0.5);opacity:0;border-radius:100%;transform:scale(1, 1) translate(-50%);transform-origin:50% 50%}@keyframes svelte-13xfqe0-ripple{0%{transform:scale(0, 0);opacity:0.5}100%{transform:scale(20, 20);opacity:0}}button.svelte-13xfqe0:focus:not(:active)::after{animation:svelte-13xfqe0-ripple 1s ease-out}`)}function fe(e,t,n){const l=e.slice();return l[24]=t[n],l[26]=n,l}function ce(e){let t,n,l,r,a,f,s,p,m,v,d,_;function u(k,P){return k[3]?Ke:De}let b=u(e),w=b(e),y=e[5]&&pe(e),x=e[6]&&me(e);return{c(){t=h("div"),n=h("div"),l=h("div"),r=h("div"),a=h("div"),f=h("h2"),s=j(e[0]),p=M(),m=h("div"),v=M(),w.c(),d=M(),y&&y.c(),_=M(),x&&x.c(),o(f,"class","text-2xl font-bold text-gray-800 mb-2"),o(m,"class","w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"),o(a,"class","text-center mb-8"),o(r,"class","bg-white p-8 rounded-2xl"),o(l,"class","bg-gradient-to-br from-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl"),o(n,"class","modal-content relative w-full max-w-md transform transition-all duration-300 ease-in-out scale-100 translate-y-0"),o(t,"class","fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm")},m(k,P){E(k,t,P),i(t,n),i(n,l),i(l,r),i(r,a),i(a,f),i(f,s),i(a,p),i(a,m),i(r,v),w.m(r,null),i(r,d),y&&y.m(r,null),i(r,_),x&&x.m(r,null)},p(k,P){P&1&&J(s,k[0]),b===(b=u(k))&&w?w.p(k,P):(w.d(1),w=b(k),w&&(w.c(),w.m(r,d))),k[5]?y?y.p(k,P):(y=pe(k),y.c(),y.m(r,_)):y&&(y.d(1),y=null),k[6]?x?x.p(k,P):(x=me(k),x.c(),x.m(r,null)):x&&(x.d(1),x=null)},d(k){k&&C(t),w.d(),y&&y.d(),x&&x.d()}}}function Ke(e){let t,n,l,r,a,f,s,p,m,v,d,_,u,b,w,y,x,k,P=ue(e[2]),S=[];for(let g=0;g<P.length;g+=1)S[g]=de(fe(e,P,g));function W(g,q){return g[4]?Ue:Ve}let R=W(e),B=R(e);return{c(){t=h("div"),n=h("label"),n.textContent="Masukkan Kode OTP",l=M(),r=h("p"),a=j("Kode OTP telah dikirim ke nomor "),f=j(e[1]),s=M(),p=h("div");for(let g=0;g<S.length;g+=1)S[g].c();m=M(),v=h("div"),d=h("button"),d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
3
- Ubah Nomor HP`,_=M(),u=h("button"),u.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
4
- Kirim Ulang Kode`,b=M(),w=h("button"),B.c(),o(n,"class","block text-sm font-medium text-gray-700 mb-2"),o(r,"class","text-xs text-gray-500 mb-4"),o(p,"class","flex justify-between mb-6"),o(d,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),o(d,"aria-label","Ubah Nomor HP"),o(u,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),o(u,"aria-label","Kirim Ulang Kode"),o(v,"class","flex justify-between text-sm"),o(t,"class","mb-6"),o(t,"id","otp-container"),w.disabled=y=e[4]||e[2].some(he),o(w,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(g,q){E(g,t,q),i(t,n),i(t,l),i(t,r),i(r,a),i(r,f),i(t,s),i(t,p);for(let O=0;O<S.length;O+=1)S[O]&&S[O].m(p,null);i(t,m),i(t,v),i(v,d),i(v,_),i(v,u),E(g,b,q),E(g,w,q),B.m(w,null),x||(k=[A(d,"click",e[21]),A(u,"click",e[22]),A(w,"click",e[13])],x=!0)},p(g,q){if(q&2&&J(f,g[1]),q&23812){P=ue(g[2]);let O;for(O=0;O<P.length;O+=1){const c=fe(g,P,O);S[O]?S[O].p(c,q):(S[O]=de(c),S[O].c(),S[O].m(p,null))}for(;O<S.length;O+=1)S[O].d(1);S.length=P.length}R!==(R=W(g))&&(B.d(1),B=R(g),B&&(B.c(),B.m(w,null))),q&20&&y!==(y=g[4]||g[2].some(he))&&(w.disabled=y)},d(g){g&&(C(t),C(b),C(w)),Oe(S,g),B.d(),x=!1,K(k)}}}function De(e){let t,n,l,r,a,f,s,p,m;function v(u,b){return u[4]?Xe:Re}let d=v(e),_=d(e);return{c(){t=h("div"),n=h("label"),n.textContent="Nomor HP",l=M(),r=h("div"),a=h("input"),f=M(),s=h("button"),_.c(),o(n,"for","phone"),o(n,"class","block text-sm font-medium text-gray-700 mb-2"),o(a,"type","tel"),o(a,"id","phone"),o(a,"placeholder","Masukkan nomor HP Anda"),o(a,"class","w-full p-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),o(r,"class","relative"),o(t,"class","mb-6"),o(t,"id","phone-container"),s.disabled=e[4],o(s,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(u,b){E(u,t,b),i(t,n),i(t,l),i(t,r),i(r,a),re(a,e[1]),E(u,f,b),E(u,s,b),_.m(s,null),p||(m=[A(a,"input",e[17]),A(s,"click",e[9])],p=!0)},p(u,b){b&2&&re(a,u[1]),d!==(d=v(u))&&(_.d(1),_=d(u),_&&(_.c(),_.m(s,null))),b&16&&(s.disabled=u[4])},d(u){u&&(C(t),C(f),C(s)),_.d(),p=!1,K(m)}}}function de(e){let t,n,l,r,a,f,s,p,m;function v(...u){return e[18](e[26],...u)}function d(...u){return e[19](e[26],...u)}function _(){return e[20](e[26])}return{c(){t=h("div"),n=h("input"),r=M(),a=h("div"),s=M(),o(n,"type","text"),o(n,"id","otp-"+e[26]),o(n,"maxlength","1"),o(n,"inputmode","numeric"),n.value=l=e[24],o(n,"class","w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),o(a,"class",f="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent")),o(t,"class","relative")},m(u,b){E(u,t,b),i(t,n),i(t,r),i(t,a),i(t,s),p||(m=[A(n,"input",v),A(n,"keydown",d),A(n,"paste",e[14]),A(n,"focus",_)],p=!0)},p(u,b){e=u,b&4&&l!==(l=e[24])&&n.value!==l&&(n.value=l),b&256&&f!==(f="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent"))&&o(a,"class",f)},d(u){u&&C(t),p=!1,K(m)}}}function Ve(e){let t;return{c(){t=j("Verifikasi")},m(n,l){E(n,t,l)},d(n){n&&C(t)}}}function Ue(e){let t;return{c(){t=h("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
5
- Memverifikasi...`,o(t,"class","flex items-center justify-center")},m(n,l){E(n,t,l)},d(n){n&&C(t)}}}function Re(e){let t;return{c(){t=j("Kirim Kode OTP")},m(n,l){E(n,t,l)},d(n){n&&C(t)}}}function Xe(e){let t;return{c(){t=h("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
6
- Mengirim...`,o(t,"class","flex items-center justify-center")},m(n,l){E(n,t,l)},d(n){n&&C(t)}}}function pe(e){let t,n,l,r,a,f;return{c(){t=h("div"),n=F("svg"),l=F("path"),r=M(),a=h("span"),f=j(e[5]),o(l,"fill-rule","evenodd"),o(l,"d","M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"),o(l,"clip-rule","evenodd"),o(n,"xmlns","http://www.w3.org/2000/svg"),o(n,"class","h-5 w-5 mr-2 flex-shrink-0"),o(n,"viewBox","0 0 20 20"),o(n,"fill","currentColor"),o(t,"class","mt-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md flex items-start")},m(s,p){E(s,t,p),i(t,n),i(n,l),i(t,r),i(t,a),i(a,f)},p(s,p){p&32&&J(f,s[5])},d(s){s&&C(t)}}}function me(e){let t,n,l,r,a,f;return{c(){t=h("div"),n=F("svg"),l=F("path"),r=M(),a=h("span"),f=j(e[6]),o(l,"fill-rule","evenodd"),o(l,"d","M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"),o(l,"clip-rule","evenodd"),o(n,"xmlns","http://www.w3.org/2000/svg"),o(n,"class","h-5 w-5 mr-2 flex-shrink-0"),o(n,"viewBox","0 0 20 20"),o(n,"fill","currentColor"),o(t,"class","mt-4 p-3 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-md flex items-start")},m(s,p){E(s,t,p),i(t,n),i(n,l),i(t,r),i(t,a),i(a,f)},p(s,p){p&64&&J(f,s[6])},d(s){s&&C(t)}}}function Fe(e){let t,n=e[7]&&ce(e);return{c(){n&&n.c(),t=Pe()},m(l,r){n&&n.m(l,r),E(l,t,r)},p(l,[r]){l[7]?n?n.p(l,r):(n=ce(l),n.c(),n.m(t.parentNode,t)):n&&(n.d(1),n=null)},i:T,o:T,d(l){l&&C(t),n&&n.d(l)}}}function G(e){const t=document.getElementById(e);t&&(t.classList.add("shake"),setTimeout(()=>{t.classList.remove("shake")},500))}const he=e=>e==="";function Je(e,t,n){let{title:l="Verifikasi OTP"}=t,{vp_url:r=""}=t,{votp_url:a=""}=t,f="",s=["","","","",""],p=s.length,m=!1,v=!1,d="",_="",u=!0,b=0;localStorage.getItem("savedOtp")&&localStorage.getItem("savedPhoneNumber")&&(u=!1);async function w(){if(!f){n(5,d="Silakan masukkan nomor HP"),G("phone-container");return}n(5,d=""),n(4,v=!0),(await(await fetch(r,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:f})})).json()).exists?(n(4,v=!1),n(3,m=!0),n(6,_=`Kode OTP telah dikirim ke ${f}`),setTimeout(()=>{var N;(N=document.getElementById("otp-0"))==null||N.focus()},300)):(n(4,v=!1),n(5,d="Nomor HP tidak ditemukan"),G("phone-container"))}function y(c,I){var L;const N=I.target.value;if(!/^\d*$/.test(N)){I.target.value=s[c];return}n(2,s[c]=N.slice(-1),s),N&&c<5&&((L=document.getElementById(`otp-${c+1}`))==null||L.focus(),n(8,b=c+1)),s.every(Y=>Y!=="")&&c===5&&P()}function x(c,I){var N;I.key==="Backspace"&&!s[c]&&c>0&&((N=document.getElementById(`otp-${c-1}`))==null||N.focus(),n(8,b=c-1))}function k(c){n(8,b=c)}async function P(){const c=s.join("");if(c.length!==s.length){n(5,d="Silakan masukkan kode OTP "+s.length+" digit"),G("otp-container");return}if(n(5,d=""),n(4,v=!0),(await(await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:f,otp:c})})).json()).status=="success"){n(4,v=!1),n(6,_="Verifikasi berhasil!");const L=document.querySelector(".modal-content");L&&L.classList.add("success-animation"),n(7,u=!1),localStorage.setItem("savedOtp",c),localStorage.setItem("savedPhoneNumber",f)}else n(4,v=!1),n(5,d="Kode OTP tidak valid"),G("otp-container")}function S(c){var Y;c.preventDefault();const I=c.clipboardData.getData("text");if(!/^\d+$/.test(I))return;const N=I.slice(0,p).split("");N.forEach((We,_e)=>{_e<p&&n(2,s[_e]=We,s)});const L=Math.min(N.length,5);(Y=document.getElementById(`otp-${L}`))==null||Y.focus(),n(8,b=L),N.length===p&&P()}function W(){f=this.value,n(1,f)}const R=(c,I)=>y(c,I),B=(c,I)=>x(c,I),g=c=>k(c),q=()=>{n(3,m=!1),n(6,_="")},O=()=>{n(6,_=""),w()};return e.$$set=c=>{"title"in c&&n(0,l=c.title),"vp_url"in c&&n(15,r=c.vp_url),"votp_url"in c&&n(16,a=c.votp_url)},[l,f,s,m,v,d,_,u,b,w,y,x,k,P,S,r,a,W,R,B,g,q,O]}class Ge extends Ae{constructor(t){super(),je(this,t,Je,Fe,ve,{title:0,vp_url:15,votp_url:16},Le)}}const Q=document.getElementById("otp-widget"),be=Q.getAttribute("reqotp"),ge=Q.getAttribute("verifyotp"),Qe=Q.getAttribute("title")||"Verifikasi OTP";return console.log(be,ge),new Ge({target:Q,props:{vp_url:be,votp_url:ge,title:Qe}})});
1
+ (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.id="dripsender-otp-styles",t.appendChild(document.createTextNode('*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-2{bottom:-.5rem}.left-1\\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-1{margin-left:-.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-1{height:.25rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.success-animation{animation:success-pulse 1.5s ease-in-out}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.disabled\\:transform-none:disabled{transform:none}.disabled\\:opacity-70:disabled{opacity:.7}')),document.head.appendChild(t)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
+ (function(H,T){typeof exports=="object"&&typeof module<"u"?module.exports=T():typeof define=="function"&&define.amd?define(T):(H=typeof globalThis<"u"?globalThis:H||self,H.DripsenderOTP=T())})(this,function(){"use strict";var Je=Object.defineProperty;var Ge=(H,T,z)=>T in H?Je(H,T,{enumerable:!0,configurable:!0,writable:!0,value:z}):H[T]=z;var te=(H,T,z)=>(Ge(H,typeof T!="symbol"?T+"":T,z),z);const H="";function T(){}function z(e){return e()}function ne(){return Object.create(null)}function K(e){e.forEach(z)}function le(e){return typeof e=="function"}function ge(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function _e(e){return Object.keys(e).length===0}function i(e,t){e.appendChild(t)}function ve(e,t,n){const l=we(e);if(!l.getElementById(t)){const o=h("style");o.id=t,o.textContent=n,ye(l,o)}}function we(e){if(!e)return document;const t=e.getRootNode?e.getRootNode():e.ownerDocument;return t&&t.host?t:e.ownerDocument}function ye(e,t){return i(e.head||e,t),t.sheet}function C(e,t,n){e.insertBefore(t,n||null)}function S(e){e.parentNode&&e.parentNode.removeChild(e)}function ke(e,t){for(let n=0;n<e.length;n+=1)e[n]&&e[n].d(t)}function h(e){return document.createElement(e)}function X(e){return document.createElementNS("http://www.w3.org/2000/svg",e)}function j(e){return document.createTextNode(e)}function E(){return j(" ")}function xe(){return j("")}function L(e,t,n,l){return e.addEventListener(t,n,l),()=>e.removeEventListener(t,n,l)}function r(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function Oe(e){return Array.from(e.childNodes)}function F(e,t){t=""+t,e.data!==t&&(e.data=t)}function oe(e,t){e.value=t??""}let Y;function W(e){Y=e}const D=[],re=[];let V=[];const se=[],Pe=Promise.resolve();let Z=!1;function Te(){Z||(Z=!0,Pe.then(ie))}function $(e){V.push(e)}const ee=new Set;let U=0;function ie(){if(U!==0)return;const e=Y;do{try{for(;U<D.length;){const t=D[U];U++,W(t),Me(t.$$)}}catch(t){throw D.length=0,U=0,t}for(W(null),D.length=0,U=0;re.length;)re.pop()();for(let t=0;t<V.length;t+=1){const n=V[t];ee.has(n)||(ee.add(n),n())}V.length=0}while(D.length);for(;se.length;)se.pop()();Z=!1,ee.clear(),W(e)}function Me(e){if(e.fragment!==null){e.update(),K(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach($)}}function Se(e){const t=[],n=[];V.forEach(l=>e.indexOf(l)===-1?t.push(l):n.push(l)),n.forEach(l=>l()),V=t}const Ce=new Set;function Ee(e,t){e&&e.i&&(Ce.delete(e),e.i(t))}function ae(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}function Ie(e,t,n){const{fragment:l,after_update:o}=e.$$;l&&l.m(t,n),$(()=>{const a=e.$$.on_mount.map(z).filter(le);e.$$.on_destroy?e.$$.on_destroy.push(...a):K(a),e.$$.on_mount=[]}),o.forEach($)}function Ne(e,t){const n=e.$$;n.fragment!==null&&(Se(n.after_update),K(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function qe(e,t){e.$$.dirty[0]===-1&&(D.push(e),Te(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function He(e,t,n,l,o,a,f=null,s=[-1]){const m=Y;W(e);const p=e.$$={fragment:null,ctx:[],props:a,update:T,not_equal:o,bound:ne(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(m?m.$$.context:[])),callbacks:ne(),dirty:s,skip_bound:!1,root:t.target||m.$$.root};f&&f(p.root);let v=!1;if(p.ctx=n?n(e,t.props||{},(d,_,...u)=>{const b=u.length?u[0]:_;return p.ctx&&o(p.ctx[d],p.ctx[d]=b)&&(!p.skip_bound&&p.bound[d]&&p.bound[d](b),v&&qe(e,d)),_}):[],p.update(),v=!0,K(p.before_update),p.fragment=l?l(p.ctx):!1,t.target){if(t.hydrate){const d=Oe(t.target);p.fragment&&p.fragment.l(d),d.forEach(S)}else p.fragment&&p.fragment.c();t.intro&&Ee(e.$$.fragment),Ie(e,t.target,t.anchor),ie()}W(m)}class Be{constructor(){te(this,"$$");te(this,"$$set")}$destroy(){Ne(this,1),this.$destroy=T}$on(t,n){if(!le(n))return T;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const o=l.indexOf(n);o!==-1&&l.splice(o,1)}}$set(t){this.$$set&&!_e(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const je="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(je);function Le(e){ve(e,"svelte-13xfqe0",`body{margin:0;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
3
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;background-color:#f9fafb}@keyframes svelte-13xfqe0-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes svelte-13xfqe0-success-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(79, 209, 197, 0)}50%{transform:scale(1.03);box-shadow:0 0 20px rgba(79, 209, 197, 0.5)}}input[type="text"].svelte-13xfqe0,input[type="tel"].svelte-13xfqe0{transition:border-color 0.2s ease}button.svelte-13xfqe0{position:relative;overflow:hidden}button.svelte-13xfqe0::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255, 255, 255, 0.5);opacity:0;border-radius:100%;transform:scale(1, 1) translate(-50%);transform-origin:50% 50%}@keyframes svelte-13xfqe0-ripple{0%{transform:scale(0, 0);opacity:0.5}100%{transform:scale(20, 20);opacity:0}}button.svelte-13xfqe0:focus:not(:active)::after{animation:svelte-13xfqe0-ripple 1s ease-out}`)}function ue(e,t,n){const l=e.slice();return l[24]=t[n],l[26]=n,l}function fe(e){let t,n,l,o,a,f,s,m,p,v,d,_;function u(k,P){return k[3]?ze:Ae}let b=u(e),w=b(e),y=e[5]&&de(e),x=e[6]&&me(e);return{c(){t=h("div"),n=h("div"),l=h("div"),o=h("div"),a=h("div"),f=h("h2"),s=j(e[0]),m=E(),p=h("div"),v=E(),w.c(),d=E(),y&&y.c(),_=E(),x&&x.c(),r(f,"class","text-2xl font-bold text-gray-800 mb-2"),r(p,"class","w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"),r(a,"class","text-center mb-8"),r(o,"class","bg-white p-8 rounded-2xl"),r(l,"class","bg-gradient-to-br from-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl"),r(n,"class","modal-content relative w-full max-w-md transform transition-all duration-300 ease-in-out scale-100 translate-y-0"),r(t,"class","fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm")},m(k,P){C(k,t,P),i(t,n),i(n,l),i(l,o),i(o,a),i(a,f),i(f,s),i(a,m),i(a,p),i(o,v),w.m(o,null),i(o,d),y&&y.m(o,null),i(o,_),x&&x.m(o,null)},p(k,P){P&1&&F(s,k[0]),b===(b=u(k))&&w?w.p(k,P):(w.d(1),w=b(k),w&&(w.c(),w.m(o,d))),k[5]?y?y.p(k,P):(y=de(k),y.c(),y.m(o,_)):y&&(y.d(1),y=null),k[6]?x?x.p(k,P):(x=me(k),x.c(),x.m(o,null)):x&&(x.d(1),x=null)},d(k){k&&S(t),w.d(),y&&y.d(),x&&x.d()}}}function ze(e){let t,n,l,o,a,f,s,m,p,v,d,_,u,b,w,y,x,k,P=ae(e[2]),M=[];for(let g=0;g<P.length;g+=1)M[g]=ce(ue(e,P,g));function G(g,q){return g[4]?De:Ke}let R=G(e),B=R(e);return{c(){t=h("div"),n=h("label"),n.textContent="Masukkan Kode OTP",l=E(),o=h("p"),a=j("Kode OTP telah dikirim ke nomor "),f=j(e[1]),s=E(),m=h("div");for(let g=0;g<M.length;g+=1)M[g].c();p=E(),v=h("div"),d=h("button"),d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
4
+ Ubah Nomor HP`,_=E(),u=h("button"),u.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
5
+ Kirim Ulang Kode`,b=E(),w=h("button"),B.c(),r(n,"class","block text-sm font-medium text-gray-700 mb-2"),r(o,"class","text-xs text-gray-500 mb-4"),r(m,"class","flex justify-between mb-6"),r(d,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),r(d,"aria-label","Ubah Nomor HP"),r(u,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),r(u,"aria-label","Kirim Ulang Kode"),r(v,"class","flex justify-between text-sm"),r(t,"class","mb-6"),r(t,"id","otp-container"),w.disabled=y=e[4]||e[2].some(pe),r(w,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(g,q){C(g,t,q),i(t,n),i(t,l),i(t,o),i(o,a),i(o,f),i(t,s),i(t,m);for(let O=0;O<M.length;O+=1)M[O]&&M[O].m(m,null);i(t,p),i(t,v),i(v,d),i(v,_),i(v,u),C(g,b,q),C(g,w,q),B.m(w,null),x||(k=[L(d,"click",e[21]),L(u,"click",e[22]),L(w,"click",e[13])],x=!0)},p(g,q){if(q&2&&F(f,g[1]),q&23812){P=ae(g[2]);let O;for(O=0;O<P.length;O+=1){const c=ue(g,P,O);M[O]?M[O].p(c,q):(M[O]=ce(c),M[O].c(),M[O].m(m,null))}for(;O<M.length;O+=1)M[O].d(1);M.length=P.length}R!==(R=G(g))&&(B.d(1),B=R(g),B&&(B.c(),B.m(w,null))),q&20&&y!==(y=g[4]||g[2].some(pe))&&(w.disabled=y)},d(g){g&&(S(t),S(b),S(w)),ke(M,g),B.d(),x=!1,K(k)}}}function Ae(e){let t,n,l,o,a,f,s,m,p;function v(u,b){return u[4]?Ue:Ve}let d=v(e),_=d(e);return{c(){t=h("div"),n=h("label"),n.textContent="Nomor HP",l=E(),o=h("div"),a=h("input"),f=E(),s=h("button"),_.c(),r(n,"for","phone"),r(n,"class","block text-sm font-medium text-gray-700 mb-2"),r(a,"type","tel"),r(a,"id","phone"),r(a,"placeholder","Masukkan nomor HP Anda"),r(a,"class","w-full p-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),r(o,"class","relative"),r(t,"class","mb-6"),r(t,"id","phone-container"),s.disabled=e[4],r(s,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(u,b){C(u,t,b),i(t,n),i(t,l),i(t,o),i(o,a),oe(a,e[1]),C(u,f,b),C(u,s,b),_.m(s,null),m||(p=[L(a,"input",e[17]),L(s,"click",e[9])],m=!0)},p(u,b){b&2&&oe(a,u[1]),d!==(d=v(u))&&(_.d(1),_=d(u),_&&(_.c(),_.m(s,null))),b&16&&(s.disabled=u[4])},d(u){u&&(S(t),S(f),S(s)),_.d(),m=!1,K(p)}}}function ce(e){let t,n,l,o,a,f,s,m,p;function v(...u){return e[18](e[26],...u)}function d(...u){return e[19](e[26],...u)}function _(){return e[20](e[26])}return{c(){t=h("div"),n=h("input"),o=E(),a=h("div"),s=E(),r(n,"type","text"),r(n,"id","otp-"+e[26]),r(n,"maxlength","1"),r(n,"inputmode","numeric"),n.value=l=e[24],r(n,"class","w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),r(a,"class",f="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent")),r(t,"class","relative")},m(u,b){C(u,t,b),i(t,n),i(t,o),i(t,a),i(t,s),m||(p=[L(n,"input",v),L(n,"keydown",d),L(n,"paste",e[14]),L(n,"focus",_)],m=!0)},p(u,b){e=u,b&4&&l!==(l=e[24])&&n.value!==l&&(n.value=l),b&256&&f!==(f="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent"))&&r(a,"class",f)},d(u){u&&S(t),m=!1,K(p)}}}function Ke(e){let t;return{c(){t=j("Verifikasi")},m(n,l){C(n,t,l)},d(n){n&&S(t)}}}function De(e){let t;return{c(){t=h("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
6
+ Memverifikasi...`,r(t,"class","flex items-center justify-center")},m(n,l){C(n,t,l)},d(n){n&&S(t)}}}function Ve(e){let t;return{c(){t=j("Kirim Kode OTP")},m(n,l){C(n,t,l)},d(n){n&&S(t)}}}function Ue(e){let t;return{c(){t=h("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
7
+ Mengirim...`,r(t,"class","flex items-center justify-center")},m(n,l){C(n,t,l)},d(n){n&&S(t)}}}function de(e){let t,n,l,o,a,f;return{c(){t=h("div"),n=X("svg"),l=X("path"),o=E(),a=h("span"),f=j(e[5]),r(l,"fill-rule","evenodd"),r(l,"d","M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"),r(l,"clip-rule","evenodd"),r(n,"xmlns","http://www.w3.org/2000/svg"),r(n,"class","h-5 w-5 mr-2 flex-shrink-0"),r(n,"viewBox","0 0 20 20"),r(n,"fill","currentColor"),r(t,"class","mt-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md flex items-start")},m(s,m){C(s,t,m),i(t,n),i(n,l),i(t,o),i(t,a),i(a,f)},p(s,m){m&32&&F(f,s[5])},d(s){s&&S(t)}}}function me(e){let t,n,l,o,a,f;return{c(){t=h("div"),n=X("svg"),l=X("path"),o=E(),a=h("span"),f=j(e[6]),r(l,"fill-rule","evenodd"),r(l,"d","M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"),r(l,"clip-rule","evenodd"),r(n,"xmlns","http://www.w3.org/2000/svg"),r(n,"class","h-5 w-5 mr-2 flex-shrink-0"),r(n,"viewBox","0 0 20 20"),r(n,"fill","currentColor"),r(t,"class","mt-4 p-3 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-md flex items-start")},m(s,m){C(s,t,m),i(t,n),i(n,l),i(t,o),i(t,a),i(a,f)},p(s,m){m&64&&F(f,s[6])},d(s){s&&S(t)}}}function Re(e){let t,n=e[7]&&fe(e);return{c(){n&&n.c(),t=xe()},m(l,o){n&&n.m(l,o),C(l,t,o)},p(l,[o]){l[7]?n?n.p(l,o):(n=fe(l),n.c(),n.m(t.parentNode,t)):n&&(n.d(1),n=null)},i:T,o:T,d(l){l&&S(t),n&&n.d(l)}}}function J(e){const t=document.getElementById(e);t&&(t.classList.add("shake"),setTimeout(()=>{t.classList.remove("shake")},500))}const pe=e=>e==="";function We(e,t,n){let{title:l="Verifikasi OTP"}=t,{vp_url:o=""}=t,{votp_url:a=""}=t,f="",s=["","","","",""],m=s.length,p=!1,v=!1,d="",_="",u=!0,b=0;localStorage.getItem("savedOtp")&&localStorage.getItem("savedPhoneNumber")&&(u=!1);async function w(){if(!f){n(5,d="Silakan masukkan nomor HP"),J("phone-container");return}n(5,d=""),n(4,v=!0),(await(await fetch(o,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:f})})).json()).exists?(n(4,v=!1),n(3,p=!0),n(6,_=`Kode OTP telah dikirim ke ${f}`),setTimeout(()=>{var I;(I=document.getElementById("otp-0"))==null||I.focus()},300)):(n(4,v=!1),n(5,d="Nomor HP tidak ditemukan"),J("phone-container"))}function y(c,N){var A;const I=N.target.value;if(!/^\d*$/.test(I)){N.target.value=s[c];return}n(2,s[c]=I.slice(-1),s),I&&c<5&&((A=document.getElementById(`otp-${c+1}`))==null||A.focus(),n(8,b=c+1)),s.every(Q=>Q!=="")&&c===5&&P()}function x(c,N){var I;N.key==="Backspace"&&!s[c]&&c>0&&((I=document.getElementById(`otp-${c-1}`))==null||I.focus(),n(8,b=c-1))}function k(c){n(8,b=c)}async function P(){const c=s.join("");if(c.length!==s.length){n(5,d="Silakan masukkan kode OTP "+s.length+" digit"),J("otp-container");return}if(n(5,d=""),n(4,v=!0),(await(await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:f,otp:c})})).json()).status=="success"){n(4,v=!1),n(6,_="Verifikasi berhasil!");const A=document.querySelector(".modal-content");A&&A.classList.add("success-animation"),n(7,u=!1),localStorage.setItem("savedOtp",c),localStorage.setItem("savedPhoneNumber",f)}else n(4,v=!1),n(5,d="Kode OTP tidak valid"),J("otp-container")}function M(c){var Q;c.preventDefault();const N=c.clipboardData.getData("text");if(!/^\d+$/.test(N))return;const I=N.slice(0,m).split("");I.forEach((Fe,be)=>{be<m&&n(2,s[be]=Fe,s)});const A=Math.min(I.length,5);(Q=document.getElementById(`otp-${A}`))==null||Q.focus(),n(8,b=A),I.length===m&&P()}function G(){f=this.value,n(1,f)}const R=(c,N)=>y(c,N),B=(c,N)=>x(c,N),g=c=>k(c),q=()=>{n(3,p=!1),n(6,_="")},O=()=>{n(6,_=""),w()};return e.$$set=c=>{"title"in c&&n(0,l=c.title),"vp_url"in c&&n(15,o=c.vp_url),"votp_url"in c&&n(16,a=c.votp_url)},[l,f,s,p,v,d,_,u,b,w,y,x,k,P,M,o,a,G,R,B,g,q,O]}class Xe extends Be{constructor(t){super(),He(this,t,We,Re,ge,{title:0,vp_url:15,votp_url:16},Le)}}function he(){const e=document.getElementById("otp-widget");if(!e){console.error('OTP Widget element not found. Make sure to add an element with id="otp-widget"');return}const t=e.getAttribute("reqotp"),n=e.getAttribute("verifyotp"),l=e.getAttribute("title")||"Verifikasi OTP";return console.log("Initializing OTP Widget",t,n),new Xe({target:e,props:{vp_url:t,votp_url:n,title:l}})}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",he):he(),{}});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dripsender-otp-widget",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "description": "A customizable OTP verification widget for Dripsender",
6
6
  "main": "dist/assets/main.js",
@@ -31,6 +31,7 @@
31
31
  "postcss": "^8.5.3",
32
32
  "svelte": "^4.2.12",
33
33
  "tailwindcss": "^3.4.17",
34
- "vite": "^4.5.13"
34
+ "vite": "^4.5.13",
35
+ "vite-plugin-css-injected-by-js": "^3.5.2"
35
36
  }
36
37
  }
@@ -1 +0,0 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-2{bottom:-.5rem}.left-1\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-1{margin-left:-.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-1{height:.25rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.success-animation{animation:success-pulse 1.5s ease-in-out}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.disabled\:transform-none:disabled{transform:none}.disabled\:opacity-70:disabled{opacity:.7}