@tempots/beatui 0.78.2 → 0.79.0

package/dist/auth/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@tempots/dom"),p=require("../use-form-pSErMD6z.cjs"),g=require("../modal-D3NQ6ZgO.cjs"),y=require("../translations-D_Vu2mbd.cjs"),P=require("../notice-DYBLXglS.cjs"),q=require("../translations-eUtMHN9s.cjs"),J=require("@tempots/ui"),T={google:{name:"Google",icon:"logos:google-icon",color:"#4285f4"},github:{name:"GitHub",icon:"logos:github-icon",color:"#333"},apple:{name:"Apple",icon:"logos:apple",color:"#000"},facebook:{name:"Facebook",icon:"logos:facebook",color:"#1877f2"},twitter:{name:"Twitter",icon:"logos:twitter",color:"#1da1f2"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"#00a4ef"},discord:{name:"Discord",icon:"logos:discord-icon",color:"#5865f2"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"#0077b5"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"#e4405f"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"#000"},snapchat:{name:"Snapchat",icon:"logos:snapchat-icon",color:"#fffc00"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"#ff4500"},pinterest:{name:"Pinterest",icon:"logos:pinterest-icon",color:"#bd081c"},twitch:{name:"Twitch",icon:"logos:twitch",color:"#9146ff"},steam:{name:"Steam",icon:"logos:steam-icon",color:"#000"},epic:{name:"Epic Games",icon:"simple-icons:epicgames",color:"#313131"},playstation:{name:"PlayStation",icon:"logos:playstation-icon",color:"#003791"},xbox:{name:"Xbox",icon:"logos:xbox-icon",color:"#107c10"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"#25d366"},wechat:{name:"WeChat",icon:"logos:wechat-icon",color:"#1aad19"},amazon:{name:"Amazon",icon:"logos:amazon-icon",color:"#ff9900"},yahoo:{name:"Yahoo",icon:"logos:yahoo-icon",color:"#720e9e"},paypal:{name:"PayPal",icon:"logos:paypal",color:"#0070ba"},x:{name:"X",icon:"simple-icons:x",color:"#000"}};function N(o){return T[o]?.name||o}function K(o){return T[o]?.icon||"mdi:account"}function Q(o){return T[o]?.color||"#666"}function tt(o,e="Continue with {provider}"){return e.replace("{provider}",N(o))}const B={minLength:8,requireUppercase:!0,requireLowercase:!0,requireNumbers:!0,requireSymbols:!1};function ot(o){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)}function D(o=32){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let l=0;l<o;l++)i+=e.charAt(Math.floor(Math.random()*e.length));return i}function et(o,e,i,l=[],c={}){const n={google:"https://accounts.google.com/oauth/authorize",github:"https://github.com/login/oauth/authorize",apple:"https://appleid.apple.com/auth/authorize",facebook:"https://www.facebook.com/v18.0/dialog/oauth",twitter:"https://twitter.com/i/oauth2/authorize",microsoft:"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",discord:"https://discord.com/api/oauth2/authorize",linkedin:"https://www.linkedin.com/oauth/v2/authorization",instagram:"https://api.instagram.com/oauth/authorize",tiktok:"https://www.tiktok.com/v2/auth/authorize",snapchat:"https://accounts.snapchat.com/accounts/oauth2/authorize",reddit:"https://www.reddit.com/api/v1/authorize",pinterest:"https://api.pinterest.com/oauth/",twitch:"https://id.twitch.tv/oauth2/authorize",steam:"https://steamcommunity.com/oauth/authorize",epic:"https://auth.epicgames.com/authorize",playstation:"https://auth.api.sonyentertainmentnetwork.com/oauth/authorize",xbox:"https://login.live.com/oauth20_authorize.srf",whatsapp:"https://web.whatsapp.com/oauth/authorize",wechat:"https://open.weixin.qq.com/connect/qrconnect",amazon:"https://www.amazon.com/ap/oa",yahoo:"https://api.login.yahoo.com/oauth2/request_auth",paypal:"https://www.paypal.com/signin/authorize",x:"https://api.twitter.com/oauth2/authorize"},m={google:["openid","email","profile"],github:["user:email"],apple:["email","name"],facebook:["email"],twitter:["users.read"],microsoft:["openid","email","profile"],discord:["identify","email"],linkedin:["r_liteprofile","r_emailaddress"],instagram:["user_profile","user_media"],tiktok:["user.info.basic","user.external.id"],snapchat:["user.info.basic","user.external.id"],reddit:["identity","email"],pinterest:["read_public","read_relationships"],twitch:["openid","email","profile"],steam:["openid","email","profile"],epic:["openid","email","profile"],playstation:["openid","email","profile"],xbox:["openid","email","profile"],whatsapp:["openid","email","profile"],wechat:["openid","email","profile"],amazon:["openid","email","profile"],yahoo:["openid","email","profile"],paypal:["openid","email","profile"],x:["openid","email","profile"]},a=n[o];if(!a)throw new Error(`Unsupported provider: ${o}`);const r=l.length>0?l:m[o],s=D(),h=new URLSearchParams({client_id:e,redirect_uri:i,scope:r.join(" "),state:s,response_type:"code",...c});return`${a}?${h.toString()}`}function at(o,e,i,l){const c=window.open(o,`${e}_login`,"width=500,height=600,scrollbars=yes,resizable=yes");if(!c){l?.(new Error("Failed to open popup window"));return}const n=setInterval(()=>{c.closed&&(clearInterval(n),l?.(new Error("Login cancelled")))},1e3),m=a=>{a.origin===window.location.origin&&(a.data.type==="SOCIAL_LOGIN_SUCCESS"?(clearInterval(n),c.close(),window.removeEventListener("message",m),i?.(a.data.result)):a.data.type==="SOCIAL_LOGIN_ERROR"&&(clearInterval(n),c.close(),window.removeEventListener("message",m),l?.(new Error(a.data.error))))};window.addEventListener("message",m)}function nt(o){return o instanceof Error?o.message:typeof o=="string"?o:o&&typeof o=="object"&&"message"in o?String(o.message):"An unexpected error occurred"}function rt(){return typeof window<"u"&&typeof document<"u"}function $({task:o,message:e,onStart:i,onEnd:l}){return async c=>{i?.();const n=await p.taskToValidation({task:o!=null?()=>o(c):async()=>null,errorMessage:e,errorPath:["root"],validation:m=>m!=null?p.i.invalid({message:m}):p.i.valid});return l?.(),n}}function z(o=B){let e=g.string();return o.minLength&&(e=e.min(o.minLength,`Password must be at least ${o.minLength} characters`)),o.requireUppercase&&(e=e.regex(/[A-Z]/,"Password must contain at least one uppercase letter")),o.requireLowercase&&(e=e.regex(/[a-z]/,"Password must contain at least one lowercase letter")),o.requireNumbers&&(e=e.regex(/[0-9]/,"Password must contain at least one number")),o.requireSymbols&&(e=e.regex(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,"Password must contain at least one special character")),o.customValidation&&(e=e.refine(i=>o.customValidation(i))),e}const x=g.string().min(1,"Email is required").email("Please enter a valid email address");function E(o){const e=o?z(o):g.string().refine(i=>i.length>0?null:"Password is required");return g.object({email:x,password:e,rememberMe:g.boolean().default(!1)}).schema()}function O(o=B,e){const i=z(o),l=e?.showNameField!==!1,c=e?.showConfirmPassword!==!1,n=e?.showAcceptTermsAndConditions!==!1,m={name:l?g.string().min(1,"Name is required").optional():g.string().optional(),email:x,password:i,confirmPassword:c?g.string().min(1,"Please confirm your password"):g.string(),acceptTerms:n?g.boolean().refine(r=>r===!0,"You must accept the terms and conditions"):g.boolean().default(!0)},a=g.object(m);return c?a.refine(r=>r.password===r.confirmPassword?null:"Passwords don't match",{path:["confirmPassword"]}).schema():a.schema()}const R=g.object({email:x}).schema(),st=E(),it=O(),ct={signIn:E,signUp:O,resetPassword:()=>R};function lt(o){const e=x.validate(o);return e.success?null:e.errors[0]?.message||"Invalid email"}function mt(o,e=B){const l=z(e).validate(o);return l.success?null:l.errors[0]?.message||"Invalid password"}function U(o,e=B){const i={length:o.length>=(e.minLength||8),uppercase:/[A-Z]/.test(o),lowercase:/[a-z]/.test(o),numbers:/[0-9]/.test(o),symbols:/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(o),custom:e.customValidation?e.customValidation(o)===null:o.length>0},l=[!0,e.requireUppercase,e.requireLowercase,e.requireNumbers,e.requireSymbols,!!e.customValidation].filter(Boolean).length,c=[i.length,e.requireUppercase?i.uppercase:null,e.requireLowercase?i.lowercase:null,e.requireNumbers?i.numbers:null,e.requireSymbols?i.symbols:null,e.customValidation?i.custom:null].filter(a=>a===!0).length,n=l>0?Math.round(c/l*100):0;let m;return n<40?m="weak":n<60?m="fair":n<80?m="good":m="strong",{strength:m,score:n,checks:i}}const M=()=>t.localStorageProp({key:"bui_auth_email",defaultValue:null});function G({onSignIn:o,passwordRules:e,labels:i,showRememberMe:l}){const c=t.prop(!1),n=M(),m=E(e),a=p.useForm({schema:m,onSubmit:$({task:o,message:"Reset password failed",onStart:()=>{c.set(!0),a.controller.disable()},onEnd:()=>{c.set(!1),a.controller.enable()}}),initialValue:{email:"",password:""}}),{controller:r,submit:s}=a;c.on(r.setDisabled);const h=r.field("email"),f=r.field("password");return n.on(b=>{b!=null&&h.change(b)}),h.signal.on(b=>{n.value!=null&&(n.value=b)}),t.Use(y.AuthI18n,b=>t.html.form(t.attr.class("bc-auth-form__form"),t.on.submit(s),p.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(r.error,L=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(L))),p.Control(P.EmailInput,{controller:h,label:t.coalesce(i?.emailLabel,b.$.emailLabel)}),p.Control(P.PasswordInput,{controller:f,label:t.coalesce(i?.passwordLabel,b.$.passwordLabel)}),t.When(l??!0,()=>t.html.div(t.attr.class("bc-auth-form__remember-me"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),p.CheckboxInput({value:n.map(L=>L!=null),after:t.html.span(t.coalesce(i?.rememberMeLabel,b.$.rememberMeLabel)),onChange:L=>{L?n.value=h.signal.value??"":n.value=null}}))))),q.Button({type:"submit",variant:"filled",color:"primary",loading:c,disabled:r.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(i?.signInButton,b.$.signInButton))))}function j({password:o,rules:e=B,showLabel:i=!0,className:l}){const c=t.computedOf(o)(s=>!s||s.length===0?{strength:"weak",score:0,checks:{length:!1,uppercase:!1,lowercase:!1,numbers:!1,symbols:!1,custom:!1}}:U(s,e)),n=c.map(s=>s.strength),m=c.map(s=>s.score),a=c.map(s=>s.checks),r=t.computedOf(n,l)((s,h)=>["bc-password-strength",`bc-password-strength--${s}`,h].filter(Boolean).join(" "));return t.html.div(t.attr.class(r),t.html.div(t.attr.class("bc-password-strength__bar"),t.html.div(t.attr.class("bc-password-strength__fill"),t.attr.style(m.map(s=>`width: ${s}%`)))),t.When(i,()=>t.Use(y.AuthI18n,s=>t.html.div(t.attr.class("bc-password-strength__label"),t.computedOf(n,s)((h,f)=>{switch(h){case"weak":return f.passwordStrengthWeak;case"fair":return f.passwordStrengthFair;case"good":return f.passwordStrengthGood;case"strong":return f.passwordStrengthStrong;default:return f.passwordStrengthWeak}})))),t.html.div(t.attr.class("bc-password-strength__requirements"),t.When(e.minLength!==void 0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.length?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.length?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),`At least ${e.minLength} characters`))),t.When(e.requireUppercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.uppercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.uppercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One uppercase letter"))),t.When(e.requireLowercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.lowercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.lowercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One lowercase letter"))),t.When(e.requireNumbers===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.numbers?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.numbers?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One number"))),t.When(e.requireSymbols===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.symbols?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.symbols?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One special character")))))}function ut({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(a=>!a||a.length===0?{strength:"weak",score:0}:U(a,e)),c=l.map(a=>a.strength),n=l.map(a=>a.score),m=t.computedOf(c,i)((a,r)=>["bc-password-strength-bar",`bc-password-strength-bar--${a}`,r].filter(Boolean).join(" "));return t.html.div(t.attr.class(m),t.html.div(t.attr.class("bc-password-strength-bar__fill"),t.attr.style(n.map(a=>`width: ${a}%`))))}function dt({password:o,rules:e=B,className:i}){const l=t.computedOf(o)(n=>!n||n.length===0?"weak":U(n,e).strength),c=t.computedOf(l,i)((n,m)=>["bc-password-strength-text",`bc-password-strength-text--${n}`,m].filter(Boolean).join(" "));return t.Fragment(t.Use(y.AuthI18n,n=>t.html.span(t.attr.class(c),t.computedOf(l,n)((m,a)=>{switch(m){case"weak":return a.passwordStrengthWeak;case"fair":return a.passwordStrengthFair;case"good":return a.passwordStrengthGood;case"strong":return a.passwordStrengthStrong;default:return a.passwordStrengthWeak}}))))}function H({passwordRules:o,labels:e,initialEmail:i,initialName:l,showPasswordStrength:c,onSignUp:n,showNameField:m,showConfirmPassword:a,showAcceptTermsAndConditions:r,termsAndConditions:s}){const h=t.prop(!1),f=o||B,b=O(f,{showNameField:m!==!1,showConfirmPassword:a!==!1,showAcceptTermsAndConditions:r!==!1}),L=p.useForm({schema:b,onSubmit:$({task:n!=null?_=>n({email:_.email,password:_.password,name:_.name,acceptTerms:_.acceptTerms}):void 0,message:"Reset password failed",onStart:()=>{h.set(!0),L.controller.disable()},onEnd:()=>{h.set(!1),L.controller.enable()}}),initialValue:{name:l??"",email:i??"",password:"",confirmPassword:"",acceptTerms:!1}}),{controller:k,submit:I}=L;h.on(k.setDisabled);const v=k.field("name"),A=k.field("email"),C=k.field("password"),W=k.field("confirmPassword"),S=k.field("acceptTerms");return t.Use(y.AuthI18n,_=>t.html.form(t.attr.class("bc-auth-form__form"),t.on.submit(I),p.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(k.error,w=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(w))),t.When(m!==!1,()=>p.Control(q.TextInput,{controller:v.transform(w=>w??"",w=>w===""?void 0:w),label:t.coalesce(e?.nameLabel,_.$.nameLabel)})),p.Control(P.EmailInput,{controller:A,label:t.coalesce(e?.emailLabel,_.$.emailLabel)}),p.Control(P.PasswordInput,{controller:C,label:t.coalesce(e?.passwordLabel,_.$.passwordLabel)}),t.When(c??!1,()=>j({password:C.signal,rules:f,showLabel:!0})),t.When(a??!1,()=>p.Control(P.PasswordInput,{controller:W,label:t.coalesce(e?.confirmPasswordLabel,_.$.confirmPasswordLabel)})),t.When(r??!1,()=>t.html.div(t.attr.class("bc-auth-form__terms"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),p.CheckboxInput({value:S.signal.map(w=>w??!1),onChange:w=>S.change(w)}),t.html.span(s||t.coalesce(e?.acceptTermsLabel,_.$.acceptTermsLabel))),t.When(S.errorVisible,()=>t.html.div(t.attr.class("bc-auth-form__field-error"),S.error.map(w=>w||"")))))),q.Button({type:"submit",variant:"filled",color:"primary",loading:h,disabled:k.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.signUpButton,_.$.signUpButton))))}function X({onResetPassword:o,labels:e={}}){const i=M(),l=t.prop(!1),c=p.useForm({schema:R,onSubmit:$({task:o,message:"Reset password failed",onStart:()=>{l.set(!0),c.controller.disable()},onEnd:()=>{l.set(!1),c.controller.enable()}}),initialValue:{email:""}}),{controller:n,submit:m}=c;l.on(n.setDisabled);const a=n.field("email");return i.on(r=>{r!=null&&a.change(r)}),t.Use(y.AuthI18n,r=>t.html.form(t.attr.class("bc-auth-form__form"),t.Ensure(n.error,s=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(s))),t.html.p(t.attr.class("bc-auth-form__description"),t.coalesce(e?.resetPasswordDescription,r.$.resetPasswordDescription)),t.on.submit(m),p.Stack(t.attr.class("bc-auth-form__fields"),p.Control(P.EmailInput,{controller:a,label:t.coalesce(e?.emailLabel,r.$.emailLabel)})),q.Button({loading:l,type:"submit",variant:"filled",color:"primary",disabled:n.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(e?.resetPasswordButton,r.$.resetPasswordButton))))}function d({provider:o,onClick:e,size:i="md",name:l,icon:c,color:n,flow:m,labels:a}){const r=async()=>{if(e)try{m==="popup"?await e():await e()}catch(s){console.error(`Social login error for ${o} (${m||"redirect"} flow):`,s)}};return q.Button({type:"button",variant:"filled",size:i,color:n,onClick:r,roundedness:"full"},t.attr.class("bc-social-login-button"),t.attr.class(t.computedOf(o)(s=>`bc-social-login-button--${s}`)),t.html.span(t.attr.class("bc-social-login-button__inner"),t.html.span(t.attr.class("bc-social-login-button__icon"),q.Icon({icon:c,size:i},t.attr.class("bc-social-login-button__icon-inner"))),t.Use(y.AuthI18n,s=>t.html.span(t.attr.class("bc-social-login-button__label"),t.bind(t.coalesce(a?.continueWithProvider,s.$.continueWithProvider))(l)))))}function Y({providers:o,onProviderClick:e,size:i="md",className:l}){return p.Stack(t.attr.class("bc-social-login-buttons"),t.attr.class(l),t.ForEach(o,c=>d({provider:c.$.provider,flow:c.$.flow,color:c.map(({provider:n})=>u[n].color),name:c.map(({provider:n})=>u[n].name),icon:c.map(({provider:n})=>u[n].icon),onClick:async()=>{e&&await e(c.$.provider.value)},size:i})))}const u={google:{name:"Google",icon:"logos:google-icon",color:"red"},github:{name:"GitHub",icon:"logos:github-icon",color:"black"},apple:{name:"Apple",icon:"logos:apple",color:"stone"},facebook:{name:"Facebook",icon:"logos:facebook",color:"blue"},twitter:{name:"Twitter",icon:"logos:twitter",color:"sky"},x:{name:"X",icon:"logos:x",color:"zinc"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"amber"},discord:{name:"Discord",icon:"logos:discord-icon",color:"indigo"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"cyan"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"fuchsia"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"teal"},snapchat:{name:"Snapchat",icon:"streamline-logos:snapchat-logo-solid",color:"yellow"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"orange"},pinterest:{name:"Pinterest",icon:"logos:pinterest",color:"rose"},twitch:{name:"Twitch",icon:"logos:twitch",color:"purple"},steam:{name:"Steam",icon:"logos:steam",color:"slate"},epic:{name:"Epic Games",icon:"streamline-logos:epic-games-logo-solid",color:"neutral"},playstation:{name:"PlayStation",icon:"streamline-logos:playstation-logo-solid",color:"violet"},xbox:{name:"Xbox",icon:"streamline-logos:xbox-live-logo-solid",color:"green"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"emerald"},wechat:{name:"WeChat",icon:"streamline-logos:wechat-logo",color:"lime"},amazon:{name:"Amazon",icon:"streamline-logos:amazon-logo-solid",color:"red"},yahoo:{name:"Yahoo",icon:"logos:yahoo",color:"rose"},paypal:{name:"PayPal",icon:"logos:paypal",color:"blue"}},pt=o=>d({...o,...u.google,provider:"google"}),ht=o=>d({...o,...u.github,provider:"github"}),gt=o=>d({...o,...u.apple,provider:"apple"}),ft=o=>d({...o,...u.facebook,provider:"facebook"}),bt=o=>d({...o,...u.x,provider:"x"}),wt=o=>d({...o,...u.twitter,provider:"twitter"}),Lt=o=>d({...o,...u.microsoft,provider:"microsoft"}),_t=o=>d({...o,...u.discord,provider:"discord"}),kt=o=>d({...o,...u.linkedin,provider:"linkedin"}),vt=o=>d({...o,...u.instagram,provider:"instagram"}),St=o=>d({...o,...u.tiktok,provider:"tiktok"}),Pt=o=>d({...o,...u.snapchat,provider:"snapchat"}),yt=o=>d({...o,...u.reddit,provider:"reddit"}),Bt=o=>d({...o,...u.pinterest,provider:"pinterest"}),It=o=>d({...o,...u.twitch,provider:"twitch"}),qt=o=>d({...o,...u.steam,provider:"steam"}),xt=o=>d({...o,...u.epic,provider:"epic"}),At=o=>d({...o,...u.playstation,provider:"playstation"}),Ct=o=>d({...o,...u.xbox,provider:"xbox"}),Tt=o=>d({...o,...u.whatsapp,provider:"whatsapp"}),$t=o=>d({...o,...u.wechat,provider:"wechat"}),zt=o=>d({...o,...u.amazon,provider:"amazon"}),Et=o=>d({...o,...u.yahoo,provider:"yahoo"}),Ot=o=>d({...o,...u.paypal,provider:"paypal"});function F({providers:o}){return p.Stack(Y({providers:o}))}function Z({mode:o,socialProviders:e,initialName:i,initialEmail:l,passwordRules:c,showRememberMe:n,showSocialDivider:m,showPasswordStrength:a,labels:r,onSignIn:s,onSignUp:h,onResetPassword:f,onModeChange:b,showContainer:L},...k){const I=o!=null?t.Value.deriveProp(o):t.prop("signin");return I.on(v=>b?.(v)),t.Use(y.AuthI18n,v=>{function A(){const S=t.coalesce(r?.hasAccountLink,v.$.hasAccountLink);return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("signin")),S)}function C(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("signup")),t.coalesce(r?.noAccountLink,v.$.noAccountLink))}function W(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("reset-password")),t.coalesce(r?.forgotPasswordLink,v.$.forgotPasswordLink))}return t.html.div(J.classes({"bc-auth-container":!0,"bc-auth-container--styled":t.Value.map(L??!0,S=>S)}),t.attr.class(I.map(S=>`bc-auth-container--${S}`)),t.attr.class("bc-auth-form"),t.OneOfValue(I,{signin:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signInTitle,v.$.signInTitle)),e!=null?t.Fragment(F({providers:e}),t.When(m??!1,V)):null,G({onSignIn:s,showRememberMe:n,passwordRules:c,labels:{emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,rememberMeLabel:r?.rememberMeLabel,signInButton:r?.signInButton,forgotPasswordLink:r?.forgotPasswordLink,noAccountLink:r?.noAccountLink}}),p.Stack(t.attr.class("bc-auth-form__footer"),C(),W())),signup:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signUpTitle,v.$.signUpTitle)),e!=null?t.Fragment(F({providers:e}),t.When(m??!1,V)):null,H({labels:{nameLabel:r?.nameLabel,emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,confirmPasswordLabel:r?.confirmPasswordLabel,acceptTermsLabel:r?.acceptTermsLabel,signUpButton:r?.signUpButton,hasAccountLink:r?.hasAccountLink},initialEmail:l,initialName:i,onSignUp:h,passwordRules:c,showPasswordStrength:a}),p.Stack(t.attr.class("bc-auth-form__footer"),A())),"reset-password":()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.resetPasswordTitle,v.$.resetPasswordTitle)),X({labels:{backToSignInLink:r?.backToSignInLink,emailLabel:r?.emailLabel,resetPasswordButton:r?.resetPasswordButton,resetPasswordDescription:r?.resetPasswordDescription},onResetPassword:f}),p.Stack(t.attr.class("bc-auth-form__footer"),A()))}),...k)})}function Ut(o){return g.Modal({size:"sm",dismissable:!0,showCloseButton:!0},(e,i)=>o(l=>e({body:Z({showContainer:!1,...l}),header:t.Use(y.AuthI18n,c=>t.coalesce(l.modalTitle,c.$.authenticationTitle))})))}function V({labels:o,className:e}={}){return t.html.div(t.attr.class("bc-auth-divider"),t.attr.class(e),t.html.div(t.attr.class("bc-auth-divider__line")),t.Use(y.AuthI18n,i=>t.html.span(t.attr.class("bc-auth-divider__text"),t.coalesce(o?.text,i.$.orDivider))),t.html.div(t.attr.class("bc-auth-divider__line")))}exports.AmazonLoginButton=zt;exports.AppleLoginButton=gt;exports.AuthContainer=Z;exports.AuthDivider=V;exports.AuthModal=Ut;exports.DiscordLoginButton=_t;exports.EpicLoginButton=xt;exports.FacebookLoginButton=ft;exports.GitHubLoginButton=ht;exports.GoogleLoginButton=pt;exports.InstagramLoginButton=vt;exports.LinkedInLoginButton=kt;exports.MicrosoftLoginButton=Lt;exports.PasswordStrengthBar=ut;exports.PasswordStrengthIndicator=j;exports.PasswordStrengthText=dt;exports.PayPalLoginButton=Ot;exports.PinterestLoginButton=Bt;exports.PlayStationLoginButton=At;exports.RedditLoginButton=yt;exports.ResetPasswordForm=X;exports.SignInForm=G;exports.SignUpForm=H;exports.SnapchatLoginButton=Pt;exports.SocialLoginButton=d;exports.SocialLoginButtons=Y;exports.SocialProviders=F;exports.SteamLoginButton=qt;exports.TiktokLoginButton=St;exports.TwitchLoginButton=It;exports.TwitterLoginButton=wt;exports.WeChatLoginButton=$t;exports.WhatsAppLoginButton=Tt;exports.XLoginButtin=bt;exports.XboxLoginButton=Ct;exports.YahooLoginButton=Et;exports.authSchemas=ct;exports.calculatePasswordStrength=U;exports.createPasswordSchema=z;exports.createSignInSchema=E;exports.createSignUpSchema=O;exports.createSocialLoginUrl=et;exports.defaultPasswordRules=B;exports.defaultSignInSchema=st;exports.defaultSignUpSchema=it;exports.emailSchema=x;exports.formatAuthError=nt;exports.formatProviderName=N;exports.formatSocialLoginText=tt;exports.generateRandomString=D;exports.getProviderColor=Q;exports.getProviderIcon=K;exports.isBrowser=rt;exports.isValidEmail=ot;exports.openSocialLoginPopup=at;exports.providerInfo=T;exports.requestToControllerValidation=$;exports.resetPasswordSchema=R;exports.socialProviderInfo=u;exports.useAuthEmailProp=M;exports.validateEmail=lt;exports.validatePassword=mt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@tempots/dom"),p=require("../use-form-pSErMD6z.cjs"),g=require("../modal-D3NQ6ZgO.cjs"),y=require("../translations-D_Vu2mbd.cjs"),P=require("../notice-DYBLXglS.cjs"),q=require("../translations-eUtMHN9s.cjs"),J=require("@tempots/ui"),T={google:{name:"Google",icon:"logos:google-icon",color:"#4285f4"},github:{name:"GitHub",icon:"logos:github-icon",color:"#333"},apple:{name:"Apple",icon:"logos:apple",color:"#000"},facebook:{name:"Facebook",icon:"logos:facebook",color:"#1877f2"},twitter:{name:"Twitter",icon:"logos:twitter",color:"#1da1f2"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"#00a4ef"},discord:{name:"Discord",icon:"logos:discord-icon",color:"#5865f2"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"#0077b5"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"#e4405f"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"#000"},snapchat:{name:"Snapchat",icon:"logos:snapchat-icon",color:"#fffc00"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"#ff4500"},pinterest:{name:"Pinterest",icon:"logos:pinterest-icon",color:"#bd081c"},twitch:{name:"Twitch",icon:"logos:twitch",color:"#9146ff"},steam:{name:"Steam",icon:"logos:steam-icon",color:"#000"},epic:{name:"Epic Games",icon:"simple-icons:epicgames",color:"#313131"},playstation:{name:"PlayStation",icon:"logos:playstation-icon",color:"#003791"},xbox:{name:"Xbox",icon:"logos:xbox-icon",color:"#107c10"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"#25d366"},wechat:{name:"WeChat",icon:"logos:wechat-icon",color:"#1aad19"},amazon:{name:"Amazon",icon:"logos:amazon-icon",color:"#ff9900"},yahoo:{name:"Yahoo",icon:"logos:yahoo-icon",color:"#720e9e"},paypal:{name:"PayPal",icon:"logos:paypal",color:"#0070ba"},x:{name:"X",icon:"simple-icons:x",color:"#000"}};function N(e){return T[e]?.name||e}function K(e){return T[e]?.icon||"mdi:account"}function Q(e){return T[e]?.color||"#666"}function tt(e,o="Continue with {provider}"){return o.replace("{provider}",N(e))}const B={minLength:8,requireUppercase:!0,requireLowercase:!0,requireNumbers:!0,requireSymbols:!1};function et(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function D(e=32){const o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let l=0;l<e;l++)i+=o.charAt(Math.floor(Math.random()*o.length));return i}function ot(e,o,i,l=[],c={}){const n={google:"https://accounts.google.com/oauth/authorize",github:"https://github.com/login/oauth/authorize",apple:"https://appleid.apple.com/auth/authorize",facebook:"https://www.facebook.com/v18.0/dialog/oauth",twitter:"https://twitter.com/i/oauth2/authorize",microsoft:"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",discord:"https://discord.com/api/oauth2/authorize",linkedin:"https://www.linkedin.com/oauth/v2/authorization",instagram:"https://api.instagram.com/oauth/authorize",tiktok:"https://www.tiktok.com/v2/auth/authorize",snapchat:"https://accounts.snapchat.com/accounts/oauth2/authorize",reddit:"https://www.reddit.com/api/v1/authorize",pinterest:"https://api.pinterest.com/oauth/",twitch:"https://id.twitch.tv/oauth2/authorize",steam:"https://steamcommunity.com/oauth/authorize",epic:"https://auth.epicgames.com/authorize",playstation:"https://auth.api.sonyentertainmentnetwork.com/oauth/authorize",xbox:"https://login.live.com/oauth20_authorize.srf",whatsapp:"https://web.whatsapp.com/oauth/authorize",wechat:"https://open.weixin.qq.com/connect/qrconnect",amazon:"https://www.amazon.com/ap/oa",yahoo:"https://api.login.yahoo.com/oauth2/request_auth",paypal:"https://www.paypal.com/signin/authorize",x:"https://api.twitter.com/oauth2/authorize"},m={google:["openid","email","profile"],github:["user:email"],apple:["email","name"],facebook:["email"],twitter:["users.read"],microsoft:["openid","email","profile"],discord:["identify","email"],linkedin:["r_liteprofile","r_emailaddress"],instagram:["user_profile","user_media"],tiktok:["user.info.basic","user.external.id"],snapchat:["user.info.basic","user.external.id"],reddit:["identity","email"],pinterest:["read_public","read_relationships"],twitch:["openid","email","profile"],steam:["openid","email","profile"],epic:["openid","email","profile"],playstation:["openid","email","profile"],xbox:["openid","email","profile"],whatsapp:["openid","email","profile"],wechat:["openid","email","profile"],amazon:["openid","email","profile"],yahoo:["openid","email","profile"],paypal:["openid","email","profile"],x:["openid","email","profile"]},a=n[e];if(!a)throw new Error(`Unsupported provider: ${e}`);const r=l.length>0?l:m[e],s=D(),h=new URLSearchParams({client_id:o,redirect_uri:i,scope:r.join(" "),state:s,response_type:"code",...c});return`${a}?${h.toString()}`}function at(e,o,i,l){const c=window.open(e,`${o}_login`,"width=500,height=600,scrollbars=yes,resizable=yes");if(!c){l?.(new Error("Failed to open popup window"));return}const n=setInterval(()=>{c.closed&&(clearInterval(n),l?.(new Error("Login cancelled")))},1e3),m=a=>{a.origin===window.location.origin&&(a.data.type==="SOCIAL_LOGIN_SUCCESS"?(clearInterval(n),c.close(),window.removeEventListener("message",m),i?.(a.data.result)):a.data.type==="SOCIAL_LOGIN_ERROR"&&(clearInterval(n),c.close(),window.removeEventListener("message",m),l?.(new Error(a.data.error))))};window.addEventListener("message",m)}function nt(e){return e instanceof Error?e.message:typeof e=="string"?e:e&&typeof e=="object"&&"message"in e?String(e.message):"An unexpected error occurred"}function rt(){return typeof window<"u"&&typeof document<"u"}function $({task:e,message:o,onStart:i,onEnd:l}){return async c=>{i?.();const n=await p.taskToValidation({task:e!=null?()=>e(c):async()=>null,errorMessage:o,errorPath:["root"],validation:m=>m!=null?p.i.invalid({message:m}):p.i.valid});return l?.(),n}}function z(e=B){let o=g.string();return e.minLength&&(o=o.min(e.minLength,`Password must be at least ${e.minLength} characters`)),e.requireUppercase&&(o=o.regex(/[A-Z]/,"Password must contain at least one uppercase letter")),e.requireLowercase&&(o=o.regex(/[a-z]/,"Password must contain at least one lowercase letter")),e.requireNumbers&&(o=o.regex(/[0-9]/,"Password must contain at least one number")),e.requireSymbols&&(o=o.regex(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,"Password must contain at least one special character")),e.customValidation&&(o=o.refine(i=>e.customValidation(i))),o}const x=g.string().min(1,"Email is required").email("Please enter a valid email address");function E(e){const o=e?z(e):g.string().refine(i=>i.length>0?null:"Password is required");return g.object({email:x,password:o,rememberMe:g.boolean().default(!1)}).schema()}function O(e=B,o){const i=z(e),l=o?.showNameField!==!1,c=o?.showConfirmPassword!==!1,n=o?.showAcceptTermsAndConditions!==!1,m={name:l?g.string().min(1,"Name is required").optional():g.string().optional(),email:x,password:i,confirmPassword:c?g.string().min(1,"Please confirm your password"):g.string(),acceptTerms:n?g.boolean().refine(r=>r===!0,"You must accept the terms and conditions"):g.boolean().default(!0)},a=g.object(m);return c?a.refine(r=>r.password===r.confirmPassword?null:"Passwords don't match",{path:["confirmPassword"]}).schema():a.schema()}const R=g.object({email:x}).schema(),st=E(),it=O(),ct={signIn:E,signUp:O,resetPassword:()=>R};function lt(e){const o=x.validate(e);return o.success?null:o.errors[0]?.message||"Invalid email"}function mt(e,o=B){const l=z(o).validate(e);return l.success?null:l.errors[0]?.message||"Invalid password"}function U(e,o=B){const i={length:e.length>=(o.minLength||8),uppercase:/[A-Z]/.test(e),lowercase:/[a-z]/.test(e),numbers:/[0-9]/.test(e),symbols:/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(e),custom:o.customValidation?o.customValidation(e)===null:e.length>0},l=[!0,o.requireUppercase,o.requireLowercase,o.requireNumbers,o.requireSymbols,!!o.customValidation].filter(Boolean).length,c=[i.length,o.requireUppercase?i.uppercase:null,o.requireLowercase?i.lowercase:null,o.requireNumbers?i.numbers:null,o.requireSymbols?i.symbols:null,o.customValidation?i.custom:null].filter(a=>a===!0).length,n=l>0?Math.round(c/l*100):0;let m;return n<40?m="weak":n<60?m="fair":n<80?m="good":m="strong",{strength:m,score:n,checks:i}}const M=()=>t.localStorageProp({key:"bui_auth_email",defaultValue:null});function G({onSignIn:e,passwordRules:o,labels:i,showRememberMe:l}){const c=t.prop(!1),n=M(),m=E(o),a=p.useForm({schema:m,onSubmit:$({task:e,message:"Reset password failed",onStart:()=>{c.set(!0),a.controller.disable()},onEnd:()=>{c.set(!1),a.controller.enable()}}),initialValue:{email:"",password:""}}),{controller:r,submit:s}=a;c.on(r.setDisabled);const h=r.field("email"),f=r.field("password");return n.on(b=>{b!=null&&h.change(b)}),h.signal.on(b=>{n.value!=null&&(n.value=b)}),t.Use(y.AuthI18n,b=>t.html.form(t.attr.class("bc-auth-form__form"),t.on.submit(s),p.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(r.error,L=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(L))),p.Control(P.EmailInput,{controller:h,label:t.coalesce(i?.emailLabel,b.$.emailLabel)}),p.Control(P.PasswordInput,{controller:f,label:t.coalesce(i?.passwordLabel,b.$.passwordLabel)}),t.When(l??!0,()=>t.html.div(t.attr.class("bc-auth-form__remember-me"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),p.CheckboxInput({value:n.map(L=>L!=null),after:t.html.span(t.coalesce(i?.rememberMeLabel,b.$.rememberMeLabel)),onChange:L=>{L?n.value=h.signal.value??"":n.value=null}}))))),q.Button({type:"submit",variant:"filled",color:"primary",loading:c,disabled:r.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(i?.signInButton,b.$.signInButton))))}function j({password:e,rules:o=B,showLabel:i=!0,className:l}){const c=t.computedOf(e)(s=>!s||s.length===0?{strength:"weak",score:0,checks:{length:!1,uppercase:!1,lowercase:!1,numbers:!1,symbols:!1,custom:!1}}:U(s,o)),n=c.map(s=>s.strength),m=c.map(s=>s.score),a=c.map(s=>s.checks),r=t.computedOf(n,l)((s,h)=>["bc-password-strength",`bc-password-strength--${s}`,h].filter(Boolean).join(" "));return t.html.div(t.attr.class(r),t.html.div(t.attr.class("bc-password-strength__bar"),t.html.div(t.attr.class("bc-password-strength__fill"),t.attr.style(m.map(s=>`width: ${s}%`)))),t.When(i,()=>t.Use(y.AuthI18n,s=>t.html.div(t.attr.class("bc-password-strength__label"),t.computedOf(n,s)((h,f)=>{switch(h){case"weak":return f.passwordStrengthWeak;case"fair":return f.passwordStrengthFair;case"good":return f.passwordStrengthGood;case"strong":return f.passwordStrengthStrong;default:return f.passwordStrengthWeak}})))),t.html.div(t.attr.class("bc-password-strength__requirements"),t.When(o.minLength!==void 0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.length?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.length?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),`At least ${o.minLength} characters`))),t.When(o.requireUppercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.uppercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.uppercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One uppercase letter"))),t.When(o.requireLowercase===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.lowercase?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.lowercase?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One lowercase letter"))),t.When(o.requireNumbers===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.numbers?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.numbers?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One number"))),t.When(o.requireSymbols===!0,()=>t.html.div(t.attr.class("bc-password-strength__requirement"),t.attr.class(t.computedOf(a)(s=>s.symbols?"bc-password-strength__requirement--met":"")),t.html.span(t.attr.class("bc-password-strength__requirement-icon"),t.computedOf(a)(s=>s.symbols?"✓":"○")),t.html.span(t.attr.class("bc-password-strength__requirement-text"),"One special character")))))}function ut({password:e,rules:o=B,className:i}){const l=t.computedOf(e)(a=>!a||a.length===0?{strength:"weak",score:0}:U(a,o)),c=l.map(a=>a.strength),n=l.map(a=>a.score),m=t.computedOf(c,i)((a,r)=>["bc-password-strength-bar",`bc-password-strength-bar--${a}`,r].filter(Boolean).join(" "));return t.html.div(t.attr.class(m),t.html.div(t.attr.class("bc-password-strength-bar__fill"),t.attr.style(n.map(a=>`width: ${a}%`))))}function dt({password:e,rules:o=B,className:i}){const l=t.computedOf(e)(n=>!n||n.length===0?"weak":U(n,o).strength),c=t.computedOf(l,i)((n,m)=>["bc-password-strength-text",`bc-password-strength-text--${n}`,m].filter(Boolean).join(" "));return t.Fragment(t.Use(y.AuthI18n,n=>t.html.span(t.attr.class(c),t.computedOf(l,n)((m,a)=>{switch(m){case"weak":return a.passwordStrengthWeak;case"fair":return a.passwordStrengthFair;case"good":return a.passwordStrengthGood;case"strong":return a.passwordStrengthStrong;default:return a.passwordStrengthWeak}}))))}function H({passwordRules:e,labels:o,initialEmail:i,initialName:l,showPasswordStrength:c,onSignUp:n,showNameField:m,showConfirmPassword:a,showAcceptTermsAndConditions:r,termsAndConditions:s}){const h=t.prop(!1),f=e||B,b=O(f,{showNameField:m!==!1,showConfirmPassword:a!==!1,showAcceptTermsAndConditions:r!==!1}),L=p.useForm({schema:b,onSubmit:$({task:n!=null?_=>n({email:_.email,password:_.password,name:_.name,acceptTerms:_.acceptTerms}):void 0,message:"Reset password failed",onStart:()=>{h.set(!0),L.controller.disable()},onEnd:()=>{h.set(!1),L.controller.enable()}}),initialValue:{name:l??"",email:i??"",password:"",confirmPassword:"",acceptTerms:!1}}),{controller:k,submit:I}=L;h.on(k.setDisabled);const v=k.field("name"),A=k.field("email"),C=k.field("password"),W=k.field("confirmPassword"),S=k.field("acceptTerms");return t.Use(y.AuthI18n,_=>t.html.form(t.attr.class("bc-auth-form__form"),t.on.submit(I),p.Stack(t.attr.class("bc-auth-form__fields"),t.Ensure(k.error,w=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(w))),t.When(m!==!1,()=>p.Control(q.TextInput,{controller:v.transform(w=>w??"",w=>w===""?void 0:w),label:t.coalesce(o?.nameLabel,_.$.nameLabel)})),p.Control(P.EmailInput,{controller:A,label:t.coalesce(o?.emailLabel,_.$.emailLabel)}),p.Control(P.PasswordInput,{controller:C,label:t.coalesce(o?.passwordLabel,_.$.passwordLabel)}),t.When(c??!1,()=>j({password:C.signal,rules:f,showLabel:!0})),t.When(a??!1,()=>p.Control(P.PasswordInput,{controller:W,label:t.coalesce(o?.confirmPasswordLabel,_.$.confirmPasswordLabel)})),t.When(r??!1,()=>t.html.div(t.attr.class("bc-auth-form__terms"),t.html.label(t.attr.class("bc-auth-form__checkbox-label"),p.CheckboxInput({value:S.signal.map(w=>w??!1),onChange:w=>S.change(w)}),t.html.span(s||t.coalesce(o?.acceptTermsLabel,_.$.acceptTermsLabel))),t.When(S.errorVisible,()=>t.html.div(t.attr.class("bc-auth-form__field-error"),S.error.map(w=>w||"")))))),q.Button({type:"submit",variant:"filled",color:"primary",loading:h,disabled:k.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(o?.signUpButton,_.$.signUpButton))))}function X({onResetPassword:e,labels:o={}}){const i=M(),l=t.prop(!1),c=p.useForm({schema:R,onSubmit:$({task:e,message:"Reset password failed",onStart:()=>{l.set(!0),c.controller.disable()},onEnd:()=>{l.set(!1),c.controller.enable()}}),initialValue:{email:""}}),{controller:n,submit:m}=c;l.on(n.setDisabled);const a=n.field("email");return i.on(r=>{r!=null&&a.change(r)}),t.Use(y.AuthI18n,r=>t.html.form(t.attr.class("bc-auth-form__form"),t.Ensure(n.error,s=>P.Notice({variant:"danger",tone:"prominent",role:"alert"},t.html.div(s))),t.html.p(t.attr.class("bc-auth-form__description"),t.coalesce(o?.resetPasswordDescription,r.$.resetPasswordDescription)),t.on.submit(m),p.Stack(t.attr.class("bc-auth-form__fields"),p.Control(P.EmailInput,{controller:a,label:t.coalesce(o?.emailLabel,r.$.emailLabel)})),q.Button({loading:l,type:"submit",variant:"filled",color:"primary",disabled:n.disabledOrHasErrors},t.attr.class("bc-auth-form__submit"),t.coalesce(o?.resetPasswordButton,r.$.resetPasswordButton))))}function d({provider:e,onClick:o,size:i="md",name:l,icon:c,color:n,flow:m,labels:a}){const r=async()=>{if(o)try{m==="popup"?await o():await o()}catch(s){console.error(`Social login error for ${e} (${m||"redirect"} flow):`,s)}};return q.Button({type:"button",variant:"filled",size:i,color:n,onClick:r,roundedness:"full"},t.attr.class("bc-social-login-button"),t.attr.class(t.computedOf(e)(s=>`bc-social-login-button--${s}`)),t.html.span(t.attr.class("bc-social-login-button__inner"),t.html.span(t.attr.class("bc-social-login-button__icon"),q.Icon({icon:c,size:i},t.attr.class("bc-social-login-button__icon-inner"))),t.Use(y.AuthI18n,s=>t.html.span(t.attr.class("bc-social-login-button__label"),t.bind(t.coalesce(a?.continueWithProvider,s.$.continueWithProvider))(l)))))}function Y({providers:e,onProviderClick:o,size:i="md",className:l}){return p.Stack(t.attr.class("bc-social-login-buttons"),t.attr.class(l),t.ForEach(e,c=>d({provider:c.$.provider,flow:c.$.flow,color:c.map(({provider:n})=>u[n].color),name:c.map(({provider:n})=>u[n].name),icon:c.map(({provider:n})=>u[n].icon),onClick:async()=>{o&&await o(c.$.provider.value)},size:i})))}const u={google:{name:"Google",icon:"logos:google-icon",color:"red"},github:{name:"GitHub",icon:"logos:github-icon",color:"black"},apple:{name:"Apple",icon:"logos:apple",color:"stone"},facebook:{name:"Facebook",icon:"logos:facebook",color:"blue"},twitter:{name:"Twitter",icon:"logos:twitter",color:"sky"},x:{name:"X",icon:"logos:x",color:"zinc"},microsoft:{name:"Microsoft",icon:"logos:microsoft-icon",color:"amber"},discord:{name:"Discord",icon:"logos:discord-icon",color:"indigo"},linkedin:{name:"LinkedIn",icon:"logos:linkedin-icon",color:"cyan"},instagram:{name:"Instagram",icon:"logos:instagram-icon",color:"fuchsia"},tiktok:{name:"TikTok",icon:"logos:tiktok-icon",color:"teal"},snapchat:{name:"Snapchat",icon:"simple-icons:snapchat",color:"yellow"},reddit:{name:"Reddit",icon:"logos:reddit-icon",color:"orange"},pinterest:{name:"Pinterest",icon:"logos:pinterest",color:"rose"},twitch:{name:"Twitch",icon:"logos:twitch",color:"purple"},steam:{name:"Steam",icon:"logos:steam",color:"slate"},epic:{name:"Epic Games",icon:"simple-icons:epicgames",color:"neutral"},playstation:{name:"PlayStation",icon:"simple-icons:playstation",color:"violet"},xbox:{name:"Xbox",icon:"simple-icons:xbox",color:"green"},whatsapp:{name:"WhatsApp",icon:"logos:whatsapp-icon",color:"emerald"},wechat:{name:"WeChat",icon:"simple-icons:wechat",color:"lime"},amazon:{name:"Amazon",icon:"simple-icons:amazon",color:"red"},yahoo:{name:"Yahoo",icon:"logos:yahoo",color:"rose"},paypal:{name:"PayPal",icon:"logos:paypal",color:"blue"}},pt=e=>d({...e,...u.google,provider:"google"}),ht=e=>d({...e,...u.github,provider:"github"}),gt=e=>d({...e,...u.apple,provider:"apple"}),ft=e=>d({...e,...u.facebook,provider:"facebook"}),bt=e=>d({...e,...u.x,provider:"x"}),wt=e=>d({...e,...u.twitter,provider:"twitter"}),Lt=e=>d({...e,...u.microsoft,provider:"microsoft"}),_t=e=>d({...e,...u.discord,provider:"discord"}),kt=e=>d({...e,...u.linkedin,provider:"linkedin"}),vt=e=>d({...e,...u.instagram,provider:"instagram"}),St=e=>d({...e,...u.tiktok,provider:"tiktok"}),Pt=e=>d({...e,...u.snapchat,provider:"snapchat"}),yt=e=>d({...e,...u.reddit,provider:"reddit"}),Bt=e=>d({...e,...u.pinterest,provider:"pinterest"}),It=e=>d({...e,...u.twitch,provider:"twitch"}),qt=e=>d({...e,...u.steam,provider:"steam"}),xt=e=>d({...e,...u.epic,provider:"epic"}),At=e=>d({...e,...u.playstation,provider:"playstation"}),Ct=e=>d({...e,...u.xbox,provider:"xbox"}),Tt=e=>d({...e,...u.whatsapp,provider:"whatsapp"}),$t=e=>d({...e,...u.wechat,provider:"wechat"}),zt=e=>d({...e,...u.amazon,provider:"amazon"}),Et=e=>d({...e,...u.yahoo,provider:"yahoo"}),Ot=e=>d({...e,...u.paypal,provider:"paypal"});function F({providers:e}){return p.Stack(Y({providers:e}))}function Z({mode:e,socialProviders:o,initialName:i,initialEmail:l,passwordRules:c,showRememberMe:n,showSocialDivider:m,showPasswordStrength:a,labels:r,onSignIn:s,onSignUp:h,onResetPassword:f,onModeChange:b,showContainer:L},...k){const I=e!=null?t.Value.deriveProp(e):t.prop("signin");return I.on(v=>b?.(v)),t.Use(y.AuthI18n,v=>{function A(){const S=t.coalesce(r?.hasAccountLink,v.$.hasAccountLink);return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("signin")),S)}function C(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("signup")),t.coalesce(r?.noAccountLink,v.$.noAccountLink))}function W(){return t.html.button(t.attr.type("button"),t.attr.class("bc-auth-form__link"),t.on.click(()=>I.set("reset-password")),t.coalesce(r?.forgotPasswordLink,v.$.forgotPasswordLink))}return t.html.div(J.classes({"bc-auth-container":!0,"bc-auth-container--styled":t.Value.map(L??!0,S=>S)}),t.attr.class(I.map(S=>`bc-auth-container--${S}`)),t.attr.class("bc-auth-form"),t.OneOfValue(I,{signin:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signInTitle,v.$.signInTitle)),o!=null?t.Fragment(F({providers:o}),t.When(m??!1,V)):null,G({onSignIn:s,showRememberMe:n,passwordRules:c,labels:{emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,rememberMeLabel:r?.rememberMeLabel,signInButton:r?.signInButton,forgotPasswordLink:r?.forgotPasswordLink,noAccountLink:r?.noAccountLink}}),p.Stack(t.attr.class("bc-auth-form__footer"),C(),W())),signup:()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.signUpTitle,v.$.signUpTitle)),o!=null?t.Fragment(F({providers:o}),t.When(m??!1,V)):null,H({labels:{nameLabel:r?.nameLabel,emailLabel:r?.emailLabel,passwordLabel:r?.passwordLabel,confirmPasswordLabel:r?.confirmPasswordLabel,acceptTermsLabel:r?.acceptTermsLabel,signUpButton:r?.signUpButton,hasAccountLink:r?.hasAccountLink},initialEmail:l,initialName:i,onSignUp:h,passwordRules:c,showPasswordStrength:a}),p.Stack(t.attr.class("bc-auth-form__footer"),A())),"reset-password":()=>t.Fragment(t.html.h2(t.attr.class("bc-auth-form__title"),t.coalesce(r?.resetPasswordTitle,v.$.resetPasswordTitle)),X({labels:{backToSignInLink:r?.backToSignInLink,emailLabel:r?.emailLabel,resetPasswordButton:r?.resetPasswordButton,resetPasswordDescription:r?.resetPasswordDescription},onResetPassword:f}),p.Stack(t.attr.class("bc-auth-form__footer"),A()))}),...k)})}function Ut(e){return g.Modal({size:"sm",dismissable:!0,showCloseButton:!0},(o,i)=>e(l=>o({body:Z({showContainer:!1,...l}),header:t.Use(y.AuthI18n,c=>t.coalesce(l.modalTitle,c.$.authenticationTitle))})))}function V({labels:e,className:o}={}){return t.html.div(t.attr.class("bc-auth-divider"),t.attr.class(o),t.html.div(t.attr.class("bc-auth-divider__line")),t.Use(y.AuthI18n,i=>t.html.span(t.attr.class("bc-auth-divider__text"),t.coalesce(e?.text,i.$.orDivider))),t.html.div(t.attr.class("bc-auth-divider__line")))}exports.AmazonLoginButton=zt;exports.AppleLoginButton=gt;exports.AuthContainer=Z;exports.AuthDivider=V;exports.AuthModal=Ut;exports.DiscordLoginButton=_t;exports.EpicLoginButton=xt;exports.FacebookLoginButton=ft;exports.GitHubLoginButton=ht;exports.GoogleLoginButton=pt;exports.InstagramLoginButton=vt;exports.LinkedInLoginButton=kt;exports.MicrosoftLoginButton=Lt;exports.PasswordStrengthBar=ut;exports.PasswordStrengthIndicator=j;exports.PasswordStrengthText=dt;exports.PayPalLoginButton=Ot;exports.PinterestLoginButton=Bt;exports.PlayStationLoginButton=At;exports.RedditLoginButton=yt;exports.ResetPasswordForm=X;exports.SignInForm=G;exports.SignUpForm=H;exports.SnapchatLoginButton=Pt;exports.SocialLoginButton=d;exports.SocialLoginButtons=Y;exports.SocialProviders=F;exports.SteamLoginButton=qt;exports.TiktokLoginButton=St;exports.TwitchLoginButton=It;exports.TwitterLoginButton=wt;exports.WeChatLoginButton=$t;exports.WhatsAppLoginButton=Tt;exports.XLoginButtin=bt;exports.XboxLoginButton=Ct;exports.YahooLoginButton=Et;exports.authSchemas=ct;exports.calculatePasswordStrength=U;exports.createPasswordSchema=z;exports.createSignInSchema=E;exports.createSignUpSchema=O;exports.createSocialLoginUrl=ot;exports.defaultPasswordRules=B;exports.defaultSignInSchema=st;exports.defaultSignUpSchema=it;exports.emailSchema=x;exports.formatAuthError=nt;exports.formatProviderName=N;exports.formatSocialLoginText=tt;exports.generateRandomString=D;exports.getProviderColor=Q;exports.getProviderIcon=K;exports.isBrowser=rt;exports.isValidEmail=et;exports.openSocialLoginPopup=at;exports.providerInfo=T;exports.requestToControllerValidation=$;exports.resetPasswordSchema=R;exports.socialProviderInfo=u;exports.useAuthEmailProp=M;exports.validateEmail=lt;exports.validatePassword=mt;

package/dist/auth/index.es.js

@@ -1,9 +1,9 @@
 import { localStorageProp as ie, prop as V, Use as x, html as i, attr as t, on as z, When as b, coalesce as h, Ensure as D, computedOf as g, Fragment as C, bind as ce, ForEach as le, Value as ee, OneOfValue as me } from "@tempots/dom";
 import { t as ue, i as oe, u as W, S as $, a as se, b as I } from "../use-form-DMiCxK26.js";
-import { s as A, o as G, b as N, M as de } from "../modal-oWbT46Rc.js";
+import { s as A, o as G, b as N, M as pe } from "../modal-oWbT46Rc.js";
 import { AuthI18n as q } from "../translations-CVfr2JXG.js";
 import { P as R, E as H, N as j } from "../notice-C0Brmeyi.js";
-import { B as F, T as pe, c as he } from "../translations-BEMKy6-W.js";
+import { B as F, T as de, c as he } from "../translations-BEMKy6-W.js";
 import { classes as ge } from "@tempots/ui";
 const X = {
   google: { name: "Google", icon: "logos:google-icon", color: "#4285f4" },
@@ -662,7 +662,7 @@ function Le({
           // Name field (optional)
           b(
             u !== !1,
-            () => I(pe, {
+            () => I(de, {
               controller: S.transform(
                 (L) => L ?? "",
                 (L) => L === "" ? void 0 : L
@@ -808,7 +808,7 @@ function ke({
     )
   );
 }
-function p({
+function d({
   provider: e,
   onClick: o,
   size: c = "md",
@@ -870,14 +870,14 @@ function ve({
     t.class(m),
     le(
       e,
-      (l) => p({
+      (l) => d({
         provider: l.$.provider,
         flow: l.$.flow,
         color: l.map(
-          ({ provider: s }) => d[s].color
+          ({ provider: s }) => p[s].color
         ),
-        name: l.map(({ provider: s }) => d[s].name),
-        icon: l.map(({ provider: s }) => d[s].icon),
+        name: l.map(({ provider: s }) => p[s].name),
+        icon: l.map(({ provider: s }) => p[s].icon),
         onClick: async () => {
           o && await o(l.$.provider.value);
         },
@@ -886,7 +886,7 @@ function ve({
     )
   );
 }
-const d = {
+const p = {
   // Core
   google: {
     name: "Google",
@@ -948,7 +948,7 @@ const d = {
   },
   snapchat: {
     name: "Snapchat",
-    icon: "streamline-logos:snapchat-logo-solid",
+    icon: "simple-icons:snapchat",
     color: "yellow"
   },
   reddit: {
@@ -974,17 +974,17 @@ const d = {
   },
   epic: {
     name: "Epic Games",
-    icon: "streamline-logos:epic-games-logo-solid",
+    icon: "simple-icons:epicgames",
     color: "neutral"
   },
   playstation: {
     name: "PlayStation",
-    icon: "streamline-logos:playstation-logo-solid",
+    icon: "simple-icons:playstation",
     color: "violet"
   },
   xbox: {
     name: "Xbox",
-    icon: "streamline-logos:xbox-live-logo-solid",
+    icon: "simple-icons:xbox",
     color: "green"
   },
   // Messaging
@@ -995,13 +995,13 @@ const d = {
   },
   wechat: {
     name: "WeChat",
-    icon: "streamline-logos:wechat-logo",
+    icon: "simple-icons:wechat",
     color: "lime"
   },
   // Other Identity
   amazon: {
     name: "Amazon",
-    icon: "streamline-logos:amazon-logo-solid",
+    icon: "simple-icons:amazon",
     color: "red"
     // distinct warm tone (not used elsewhere here)
   },
@@ -1017,101 +1017,101 @@ const d = {
     color: "blue"
     // distinct deep blue tone (not Facebook’s exact blue)
   }
-}, He = (e) => p({
+}, He = (e) => d({
   ...e,
-  ...d.google,
+  ...p.google,
   provider: "google"
-}), je = (e) => p({
+}), je = (e) => d({
   ...e,
-  ...d.github,
+  ...p.github,
   provider: "github"
-}), Xe = (e) => p({
+}), Xe = (e) => d({
   ...e,
-  ...d.apple,
+  ...p.apple,
   provider: "apple"
-}), Ye = (e) => p({
+}), Ye = (e) => d({
   ...e,
-  ...d.facebook,
+  ...p.facebook,
   provider: "facebook"
-}), Ze = (e) => p({
+}), Ze = (e) => d({
   ...e,
-  ...d.x,
+  ...p.x,
   provider: "x"
-}), Je = (e) => p({
+}), Je = (e) => d({
   ...e,
-  ...d.twitter,
+  ...p.twitter,
   provider: "twitter"
-}), Ke = (e) => p({
+}), Ke = (e) => d({
   ...e,
-  ...d.microsoft,
+  ...p.microsoft,
   provider: "microsoft"
-}), Qe = (e) => p({
+}), Qe = (e) => d({
   ...e,
-  ...d.discord,
+  ...p.discord,
   provider: "discord"
-}), eo = (e) => p({
+}), eo = (e) => d({
   ...e,
-  ...d.linkedin,
+  ...p.linkedin,
   provider: "linkedin"
-}), oo = (e) => p({
+}), oo = (e) => d({
   ...e,
-  ...d.instagram,
+  ...p.instagram,
   provider: "instagram"
-}), to = (e) => p({
+}), to = (e) => d({
   ...e,
-  ...d.tiktok,
+  ...p.tiktok,
   provider: "tiktok"
-}), no = (e) => p({
+}), no = (e) => d({
   ...e,
-  ...d.snapchat,
+  ...p.snapchat,
   provider: "snapchat"
-}), so = (e) => p({
+}), so = (e) => d({
   ...e,
-  ...d.reddit,
+  ...p.reddit,
   provider: "reddit"
-}), ao = (e) => p({
+}), ao = (e) => d({
   ...e,
-  ...d.pinterest,
+  ...p.pinterest,
   provider: "pinterest"
-}), ro = (e) => p({
+}), ro = (e) => d({
   ...e,
-  ...d.twitch,
+  ...p.twitch,
   provider: "twitch"
-}), io = (e) => p({
+}), io = (e) => d({
   ...e,
-  ...d.steam,
+  ...p.steam,
   provider: "steam"
-}), co = (e) => p({
+}), co = (e) => d({
   ...e,
-  ...d.epic,
+  ...p.epic,
   provider: "epic"
-}), lo = (e) => p({
+}), lo = (e) => d({
   ...e,
-  ...d.playstation,
+  ...p.playstation,
   provider: "playstation"
-}), mo = (e) => p({
+}), mo = (e) => d({
   ...e,
-  ...d.xbox,
+  ...p.xbox,
   provider: "xbox"
-}), uo = (e) => p({
+}), uo = (e) => d({
   ...e,
-  ...d.whatsapp,
+  ...p.whatsapp,
   provider: "whatsapp"
-}), po = (e) => p({
+}), po = (e) => d({
   ...e,
-  ...d.wechat,
+  ...p.wechat,
   provider: "wechat"
-}), ho = (e) => p({
+}), ho = (e) => d({
   ...e,
-  ...d.amazon,
+  ...p.amazon,
   provider: "amazon"
-}), go = (e) => p({
+}), go = (e) => d({
   ...e,
-  ...d.yahoo,
+  ...p.yahoo,
   provider: "yahoo"
-}), fo = (e) => p({
+}), fo = (e) => d({
   ...e,
-  ...d.paypal,
+  ...p.paypal,
   provider: "paypal"
 });
 function te({ providers: e }) {
@@ -1250,7 +1250,7 @@ function ye({
   });
 }
 function bo(e) {
-  return de(
+  return pe(
     {
       size: "sm",
       dismissable: !0,
@@ -1310,7 +1310,7 @@ export {
   we as SignInForm,
   Le as SignUpForm,
   no as SnapchatLoginButton,
-  p as SocialLoginButton,
+  d as SocialLoginButton,
   ve as SocialLoginButtons,
   te as SocialProviders,
   io as SteamLoginButton,
@@ -1344,7 +1344,7 @@ export {
   X as providerInfo,
   Y as requestToControllerValidation,
   ae as resetPasswordSchema,
-  d as socialProviderInfo,
+  p as socialProviderInfo,
   re as useAuthEmailProp,
   Re as validateEmail,
   De as validatePassword

package/dist/beatui.css

@@ -1810,7 +1810,7 @@ a:focus-visible {
   justify-content: center;
   background-color: var(--color-white);
   border-radius: var(--radius-full);
-  padding: calc(var(--spacing-base) * 2);
+  padding: calc(var(--spacing-base) * 1);
 }
 
 .b-dark .bc-social-login-button__icon {
@@ -1834,24 +1834,144 @@ a:focus-visible {
   padding-inline: calc(var(--spacing-base) * 4);
 }
 
+/* Provider-specific icon backgrounds and colors */
+
+/* Google - colorful logo needs white background */
 .bc-social-login-button--google .bc-social-login-button__icon {
   background-color: var(--color-white);
 }
 
+/* GitHub - black icon needs contrasting background */
 .bc-social-login-button--github .bc-social-login-button__icon {
-  background-color: var(--color-black);
+  background-color: var(--color-white);
 }
 
-.bc-social-login-button--github .bc-social-login-button__icon-inner {
-  color: var(--color-white);
+/* Apple - black icon needs contrasting background */
+.bc-social-login-button--apple .bc-social-login-button__icon {
+  background-color: var(--color-white);
 }
 
-.bc-social-login-button--apple .bc-social-login-button__icon {
+/* X (Twitter rebrand) - black icon needs contrasting background */
+.bc-social-login-button--x .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Microsoft - colorful logo needs white background */
+.bc-social-login-button--microsoft .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Steam - dark icon needs contrasting background */
+.bc-social-login-button--steam .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Epic Games - simple-icons, dark icon on white background */
+.bc-social-login-button--epic .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+.bc-social-login-button--epic .bc-social-login-button__icon-inner {
+  color: var(--color-black);
+}
+
+/* PlayStation - simple-icons, blue icon on white background */
+.bc-social-login-button--playstation .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+.bc-social-login-button--playstation .bc-social-login-button__icon-inner {
+  color: #003791;
+}
+
+/* Xbox - simple-icons, green icon on white background */
+.bc-social-login-button--xbox .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+.bc-social-login-button--xbox .bc-social-login-button__icon-inner {
+  color: #107c10;
+}
+
+/* TikTok - has dark elements that need contrasting background */
+.bc-social-login-button--tiktok .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Snapchat - simple-icons, yellow icon on black background */
+.bc-social-login-button--snapchat .bc-social-login-button__icon {
   background-color: var(--color-black);
 }
+.bc-social-login-button--snapchat .bc-social-login-button__icon-inner {
+  color: #fffc00;
+}
 
-.bc-social-login-button--apple .bc-social-login-button__icon-inner {
-  color: var(--color-white);
+/* Amazon - simple-icons, orange icon on white background */
+.bc-social-login-button--amazon .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+.bc-social-login-button--amazon .bc-social-login-button__icon-inner {
+  color: #ff9900;
+}
+
+/* WeChat - simple-icons, green icon on white background */
+.bc-social-login-button--wechat .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+.bc-social-login-button--wechat .bc-social-login-button__icon-inner {
+  color: #07c160;
+}
+
+/* Yahoo - purple icon needs white background for visibility */
+.bc-social-login-button--yahoo .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* PayPal - blue icon needs white background */
+.bc-social-login-button--paypal .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Facebook - blue logo needs white background */
+.bc-social-login-button--facebook .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Twitter - blue bird needs white background */
+.bc-social-login-button--twitter .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Discord - purple icon works on white background */
+.bc-social-login-button--discord .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* LinkedIn - blue icon needs white background */
+.bc-social-login-button--linkedin .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Instagram - gradient icon needs white background */
+.bc-social-login-button--instagram .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Reddit - orange icon needs white background */
+.bc-social-login-button--reddit .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Pinterest - red icon needs white background */
+.bc-social-login-button--pinterest .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* Twitch - purple icon needs white background */
+.bc-social-login-button--twitch .bc-social-login-button__icon {
+  background-color: var(--color-white);
+}
+
+/* WhatsApp - green icon needs white background */
+.bc-social-login-button--whatsapp .bc-social-login-button__icon {
+  background-color: var(--color-white);
 }
 
 /* Badge Component */