@clerk/ui 1.0.0-snapshot.v20251208202852 → 1.0.0-snapshot.v20251211120550

package/dist/{checkout_ui_03abd0_1.0.0-snapshot.v20251208202852.js → checkout_ui_a492c4_1.0.0-snapshot.v20251211120550.js}

@@ -1,4 +1,4 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{2677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var i=r(4518),o=r(8532),n=r(6256),a=r(4173),l=r(8909),c=r(5074),s=r(2366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let i=(0,c.useMemo)(()=>{if(e.portalRoot)return;let i=e.newSubscriptionRedirectUrl||t.buildNewSubscriptionRedirectUrl?.();return(0,a.vU)(r?.allowedRedirectOrigins,window.location.origin)(i)?i:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,r?.allowedRedirectOrigins]),{componentName:o,...n}=e;return{...n,componentName:o,newSubscriptionRedirectUrl:i}};var p=r(4607),h=r(2861),m=r(8272),g=r(9436),y=r(137),f=r(8920),$=r(6580),b=r(4091),Y=r(359),D=r(4964);let x=e=>e[0].toUpperCase()+e.slice(1),w=(e,t,r)=>e+(t-e)*r,k=({positionX:e,positionY:t})=>{let r=(0,c.useRef)(null),[o,n]=(0,c.useState)({x:256,y:256}),a="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!a)return;let i=()=>{n(r=>({x:w(r.x,e,.15),y:w(r.y,t,.15)})),r.current=requestAnimationFrame(i)};return r.current=requestAnimationFrame(i),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a]);let l=(0,c.useId)(),s=(0,c.useId)(),d=(0,c.useId)();return(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,i.FD)("defs",{children:[(0,i.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,i.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,i.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,i.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,i.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:l},{r:162.5,maskStart:15,maskEnd:85,id:s},{r:100,maskStart:20,maskEnd:80,id:d}].map(({maskStart:e,maskEnd:t,id:r})=>(0,i.FD)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,i.Y)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,i.Y)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,i.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:l},{r:162.5,id:s},{r:100,id:d}].map(({r:e,id:t})=>(0,i.Y)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,i.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,i.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),a&&(0,i.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:o.x-128,y:o.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},v=()=>{let e=(0,D.r)(),{setIsOpen:t}=(0,o.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:n}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=n,[w,v]=(0,c.useState)({x:256,y:256}),F=(0,Y.j)(),{animations:_}=(0,$.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,i.FD)(i.FK,{children:[(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.L9,{elementDescriptor:f.$z.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top,o=t.width;o>0?v({x:r/o*512,y:i/o*512}):v({x:256,y:256})}},children:[(0,i.Y)(k,{positionX:w.x,positionY:w.y}),(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:G?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,i.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,i.Y)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:S?`check ${b.wz.drawer}ms ${b._8.bezier} forwards ${b.wz.slow}ms`:"none",...!S&&{strokeDashoffset:"0"}}})}),(0,i.Y)("style",{children:`
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{2677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var i=r(4518),o=r(8532),n=r(6256),a=r(4173),l=r(5543),c=r(5074),s=r(2366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let i=(0,c.useMemo)(()=>{if(e.portalRoot)return;let i=e.newSubscriptionRedirectUrl||t.buildNewSubscriptionRedirectUrl?.();return(0,a.vU)(r?.allowedRedirectOrigins,window.location.origin)(i)?i:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,r?.allowedRedirectOrigins]),{componentName:o,...n}=e;return{...n,componentName:o,newSubscriptionRedirectUrl:i}};var p=r(4607),h=r(2861),m=r(8272),g=r(9436),y=r(137),f=r(8920),$=r(6580),b=r(4091),Y=r(359),D=r(4964);let x=e=>e[0].toUpperCase()+e.slice(1),w=(e,t,r)=>e+(t-e)*r,k=({positionX:e,positionY:t})=>{let r=(0,c.useRef)(null),[o,n]=(0,c.useState)({x:256,y:256}),a="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!a)return;let i=()=>{n(r=>({x:w(r.x,e,.15),y:w(r.y,t,.15)})),r.current=requestAnimationFrame(i)};return r.current=requestAnimationFrame(i),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a]);let l=(0,c.useId)(),s=(0,c.useId)(),d=(0,c.useId)();return(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,i.FD)("defs",{children:[(0,i.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,i.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,i.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,i.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,i.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:l},{r:162.5,maskStart:15,maskEnd:85,id:s},{r:100,maskStart:20,maskEnd:80,id:d}].map(({maskStart:e,maskEnd:t,id:r})=>(0,i.FD)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,i.Y)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,i.Y)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,i.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:l},{r:162.5,id:s},{r:100,id:d}].map(({r:e,id:t})=>(0,i.Y)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,i.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,i.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),a&&(0,i.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:o.x-128,y:o.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},v=()=>{let e=(0,D.r)(),{setIsOpen:t}=(0,o.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:n}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=n,[w,v]=(0,c.useState)({x:256,y:256}),F=(0,Y.j)(),{animations:_}=(0,$.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,i.FD)(i.FK,{children:[(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.L9,{elementDescriptor:f.$z.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top,o=t.width;o>0?v({x:r/o*512,y:i/o*512}):v({x:256,y:256})}},children:[(0,i.Y)(k,{positionX:w.x,positionY:w.y}),(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:G?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,i.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,i.Y)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:S?`check ${b.wz.drawer}ms ${b._8.bezier} forwards ${b.wz.slow}ms`:"none",...!S&&{strokeDashoffset:"0"}}})}),(0,i.Y)("style",{children:`
               @keyframes check {
                 0% {
                   stroke-dashoffset: 1;
@@ -6,4 +6,4 @@
                 100% {
                   stroke-dashoffset: 0;
                 }
-            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),A=r(3450),I=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{sx:e=>({background:e.colors.$neutralAlpha50,padding:e.space.$2x5,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",flexDirection:"column",rowGap:e.space.$2,position:"relative"}),children:[(0,i.Y)(m.az,{sx:e=>({position:"absolute",inset:0,background:`repeating-linear-gradient(-45deg,${e.colors.$warningAlpha100},${e.colors.$warningAlpha100} 6px,${e.colors.$warningAlpha150} 6px,${e.colors.$warningAlpha150} 12px)`,maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(I.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(8909),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);
+            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),A=r(3450),I=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{sx:e=>({background:e.colors.$neutralAlpha50,padding:e.space.$2x5,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",flexDirection:"column",rowGap:e.space.$2,position:"relative"}),children:[(0,i.Y)(m.az,{sx:e=>({position:"absolute",inset:0,background:`repeating-linear-gradient(-45deg,${e.colors.$warningAlpha100},${e.colors.$warningAlpha100} 6px,${e.colors.$warningAlpha150} 6px,${e.colors.$warningAlpha150} 12px)`,maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(I.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(5543),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);

package/dist/components/OrganizationProfile/InviteMembersForm.js

@@ -143,8 +143,8 @@ const AsyncRoleSelect = (field) => {
 	});
 };
 /**
-* Determines default role from the organization settings or fallback to
-* the only available role.
+* Determines default Role from the Organization settings or fallback to
+* the only available Role.
 */
 const useDefaultRole = () => {
 	const { options } = useFetchRoles();

package/dist/components/OrganizationProfile/InviteMembersForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n  onSuccess?: () => void;\n  onReset?: () => void;\n  primaryButtonLabel?: LocalizationKey;\n  resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n  const { onSuccess, onReset, resetButtonLabel } = props;\n  const { organization, invitations } = useOrganization({\n    invitations: {\n      pageSize: 10,\n      keepPreviousData: true,\n    },\n  });\n  const card = useCardState();\n  const { t, locale } = useLocalizations();\n  const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n  const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n  const emailAddressField = useFormControl('emailAddress', '', {\n    type: 'text',\n    label: localizationKeys('formFieldLabel__emailAddresses'),\n  });\n\n  const defaultRole = useDefaultRole();\n  const roleField = useFormControl('role', '', {\n    label: localizationKeys('formFieldLabel__role'),\n  });\n\n  useEffect(() => {\n    if (roleField.value || !defaultRole) {\n      return;\n    }\n\n    roleField.setValue(defaultRole);\n  }, [defaultRole, roleField]);\n\n  if (!organization) {\n    return null;\n  }\n\n  const {\n    props: {\n      setError,\n      setWarning,\n      setSuccess,\n      setInfo,\n      isFocused,\n      validatePassword,\n      setHasPassedComplexity,\n      hasPassedComplexity,\n      feedback,\n      feedbackType,\n      clearFeedback,\n      ...restEmailAddressProps\n    },\n  } = emailAddressField;\n\n  const canSubmit = (!!emailAddressField.value.length || isValidUnsubmittedEmail) && !!roleField.value;\n\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit) {\n      return;\n    }\n\n    const submittedData = new FormData(e.currentTarget);\n    return organization\n      .inviteMembers({\n        emailAddresses: emailAddressField.value.split(','),\n        role: submittedData.get('role') as string,\n      })\n      .then(async () => {\n        await invitations?.revalidate?.();\n        return onSuccess?.();\n      })\n      .catch(err => {\n        if (!isClerkAPIResponseError(err)) {\n          handleError(err, [], card.setError);\n          return;\n        }\n\n        removeInvalidEmails(err.errors[0]);\n\n        switch (err.errors?.[0]?.code) {\n          case 'duplicate_record': {\n            const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];\n            card.setError(\n              t(\n                localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n                  // Create a localized list of email addresses\n                  email_addresses: createListFormat(unlocalizedEmailsList, locale),\n                }),\n              ),\n            );\n            break;\n          }\n          case 'already_a_member_in_organization': {\n            /**\n             * Extracts email from the error message since it's not provided in the error response\n             */\n            const longMessage = err.errors[0].longMessage ?? '';\n            const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/)?.[0];\n\n            handleError(err, [], err =>\n              email\n                ? /**\n                   * Fallbacks to original error message in case the email cannot be extracted\n                   */\n                  card.setError(\n                    t(\n                      localizationKeys('unstable__errors.already_a_member_in_organization', {\n                        email,\n                      }),\n                    ),\n                  )\n                : card.setError(err),\n            );\n\n            break;\n          }\n          default: {\n            handleError(err, [], card.setError);\n          }\n        }\n      });\n  };\n\n  const removeInvalidEmails = (err: ClerkAPIError) => {\n    const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n    const emails = emailAddressField.value.split(',');\n    emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n  };\n\n  return (\n    <Form.Root onSubmit={onSubmit}>\n      <Form.ControlRow elementId={emailAddressField.id}>\n        <TagInput\n          {...restEmailAddressProps}\n          autoFocus\n          validate={isEmail}\n          sx={{ width: '100%' }}\n          validateUnsubmittedEmail={validateUnsubmittedEmail}\n          placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n        />\n      </Form.ControlRow>\n      <Flex\n        align='center'\n        justify='between'\n        sx={t => ({\n          marginTop: t.space.$2,\n          gap: t.space.$4,\n          flexWrap: 'wrap',\n          [mqu.sm]: { justifyContent: 'center' },\n        })}\n      >\n        <AsyncRoleSelect {...roleField} />\n        <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n          <Form.SubmitButton\n            block={false}\n            isDisabled={!canSubmit}\n            localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n          />\n          <Form.ResetButton\n            localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}\n            block={false}\n            onClick={onReset}\n          />\n        </FormButtonContainer>\n      </Flex>\n    </Form.Root>\n  );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n  const { options, isLoading } = useFetchRoles();\n\n  const { t } = useLocalizations();\n\n  return (\n    <Form.ControlRow elementId={field.id}>\n      <Flex\n        direction='col'\n        gap={2}\n      >\n        <RoleSelect\n          {...field.props}\n          roles={options}\n          isDisabled={isLoading}\n          onChange={value => field.setValue(value)}\n          triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n          optionListSx={t => ({ minWidth: t.sizes.$48 })}\n          prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n        />\n      </Flex>\n    </Form.ControlRow>\n  );\n};\n\n/**\n * Determines default role from the organization settings or fallback to\n * the only available role.\n */\nconst useDefaultRole = () => {\n  const { options } = useFetchRoles();\n  const { organizationSettings } = useEnvironment();\n\n  let defaultRole = organizationSettings.domains.defaultRole;\n\n  if (!defaultRole && options?.length === 1) {\n    defaultRole = options[0].value;\n  }\n\n  return defaultRole;\n};\n"],"mappings":"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"}
+{"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n  onSuccess?: () => void;\n  onReset?: () => void;\n  primaryButtonLabel?: LocalizationKey;\n  resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n  const { onSuccess, onReset, resetButtonLabel } = props;\n  const { organization, invitations } = useOrganization({\n    invitations: {\n      pageSize: 10,\n      keepPreviousData: true,\n    },\n  });\n  const card = useCardState();\n  const { t, locale } = useLocalizations();\n  const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n  const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n  const emailAddressField = useFormControl('emailAddress', '', {\n    type: 'text',\n    label: localizationKeys('formFieldLabel__emailAddresses'),\n  });\n\n  const defaultRole = useDefaultRole();\n  const roleField = useFormControl('role', '', {\n    label: localizationKeys('formFieldLabel__role'),\n  });\n\n  useEffect(() => {\n    if (roleField.value || !defaultRole) {\n      return;\n    }\n\n    roleField.setValue(defaultRole);\n  }, [defaultRole, roleField]);\n\n  if (!organization) {\n    return null;\n  }\n\n  const {\n    props: {\n      setError,\n      setWarning,\n      setSuccess,\n      setInfo,\n      isFocused,\n      validatePassword,\n      setHasPassedComplexity,\n      hasPassedComplexity,\n      feedback,\n      feedbackType,\n      clearFeedback,\n      ...restEmailAddressProps\n    },\n  } = emailAddressField;\n\n  const canSubmit = (!!emailAddressField.value.length || isValidUnsubmittedEmail) && !!roleField.value;\n\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (!canSubmit) {\n      return;\n    }\n\n    const submittedData = new FormData(e.currentTarget);\n    return organization\n      .inviteMembers({\n        emailAddresses: emailAddressField.value.split(','),\n        role: submittedData.get('role') as string,\n      })\n      .then(async () => {\n        await invitations?.revalidate?.();\n        return onSuccess?.();\n      })\n      .catch(err => {\n        if (!isClerkAPIResponseError(err)) {\n          handleError(err, [], card.setError);\n          return;\n        }\n\n        removeInvalidEmails(err.errors[0]);\n\n        switch (err.errors?.[0]?.code) {\n          case 'duplicate_record': {\n            const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];\n            card.setError(\n              t(\n                localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n                  // Create a localized list of email addresses\n                  email_addresses: createListFormat(unlocalizedEmailsList, locale),\n                }),\n              ),\n            );\n            break;\n          }\n          case 'already_a_member_in_organization': {\n            /**\n             * Extracts email from the error message since it's not provided in the error response\n             */\n            const longMessage = err.errors[0].longMessage ?? '';\n            const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/)?.[0];\n\n            handleError(err, [], err =>\n              email\n                ? /**\n                   * Fallbacks to original error message in case the email cannot be extracted\n                   */\n                  card.setError(\n                    t(\n                      localizationKeys('unstable__errors.already_a_member_in_organization', {\n                        email,\n                      }),\n                    ),\n                  )\n                : card.setError(err),\n            );\n\n            break;\n          }\n          default: {\n            handleError(err, [], card.setError);\n          }\n        }\n      });\n  };\n\n  const removeInvalidEmails = (err: ClerkAPIError) => {\n    const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n    const emails = emailAddressField.value.split(',');\n    emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n  };\n\n  return (\n    <Form.Root onSubmit={onSubmit}>\n      <Form.ControlRow elementId={emailAddressField.id}>\n        <TagInput\n          {...restEmailAddressProps}\n          autoFocus\n          validate={isEmail}\n          sx={{ width: '100%' }}\n          validateUnsubmittedEmail={validateUnsubmittedEmail}\n          placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n        />\n      </Form.ControlRow>\n      <Flex\n        align='center'\n        justify='between'\n        sx={t => ({\n          marginTop: t.space.$2,\n          gap: t.space.$4,\n          flexWrap: 'wrap',\n          [mqu.sm]: { justifyContent: 'center' },\n        })}\n      >\n        <AsyncRoleSelect {...roleField} />\n        <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n          <Form.SubmitButton\n            block={false}\n            isDisabled={!canSubmit}\n            localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n          />\n          <Form.ResetButton\n            localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}\n            block={false}\n            onClick={onReset}\n          />\n        </FormButtonContainer>\n      </Flex>\n    </Form.Root>\n  );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n  const { options, isLoading } = useFetchRoles();\n\n  const { t } = useLocalizations();\n\n  return (\n    <Form.ControlRow elementId={field.id}>\n      <Flex\n        direction='col'\n        gap={2}\n      >\n        <RoleSelect\n          {...field.props}\n          roles={options}\n          isDisabled={isLoading}\n          onChange={value => field.setValue(value)}\n          triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n          optionListSx={t => ({ minWidth: t.sizes.$48 })}\n          prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n        />\n      </Flex>\n    </Form.ControlRow>\n  );\n};\n\n/**\n * Determines default Role from the Organization settings or fallback to\n * the only available Role.\n */\nconst useDefaultRole = () => {\n  const { options } = useFetchRoles();\n  const { organizationSettings } = useEnvironment();\n\n  let defaultRole = organizationSettings.domains.defaultRole;\n\n  if (!defaultRole && options?.length === 1) {\n    defaultRole = options[0].value;\n  }\n\n  return defaultRole;\n};\n"],"mappings":"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"}

package/dist/components/OrganizationProfile/MembersSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n  /**\n   * Controlled query param state by parent component\n   */\n  query: GetMembersParams['query'];\n  /**\n   * Controlled input field value by parent component\n   */\n  value: string;\n  /**\n   * Paginated organization memberships\n   */\n  memberships: ReturnType<typeof useOrganization>['memberships'];\n  /**\n   * Handler for change event on input field\n   */\n  onSearchChange: (value: string) => void;\n  /**\n   * Handler for `query` value changes\n   */\n  onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n  const { t } = useLocalizations();\n\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const eventValue = event.target.value;\n    onSearchChange(eventValue);\n\n    const shouldClearQuery = eventValue === '';\n    if (shouldClearQuery) {\n      onQueryTrigger(eventValue);\n    }\n  };\n\n  // Debounce the input value changes until the user stops typing\n  // to trigger the `query` param setter\n  function handleKeyUp() {\n    if (debounceTimer.current) {\n      clearTimeout(debounceTimer.current);\n    }\n\n    debounceTimer.current = setTimeout(() => {\n      onQueryTrigger(value.trim());\n    }, membersSearchDebounceMs);\n  }\n\n  // If search is not performed on a initial page, resets pagination offset\n  // based on the response count\n  useEffect(() => {\n    if (!query || !memberships?.data) {\n      return;\n    }\n\n    const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n    if (hasOnePageLeft) {\n      memberships?.fetchPage?.(1);\n    }\n  }, [query, memberships]);\n\n  const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n  return (\n    <Animated asChild>\n      <Flex\n        sx={{\n          width: '50%',\n          [mqu.sm]: {\n            width: 'auto',\n          },\n        }}\n      >\n        <InputWithIcon\n          value={value}\n          type='search'\n          autoCapitalize='none'\n          spellCheck={false}\n          aria-label='Search'\n          placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n          leftIcon={\n            isFetchingNewData ? (\n              <Spinner size='xs' />\n            ) : (\n              <Icon\n                icon={MagnifyingGlass}\n                elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n                sx={t => ({ color: t.colors.$colorMutedForeground })}\n              />\n            )\n          }\n          onKeyUp={handleKeyUp}\n          onChange={handleChange}\n          elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n        />\n      </Flex>\n    </Animated>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}
+{"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n  /**\n   * Controlled query param state by parent component\n   */\n  query: GetMembersParams['query'];\n  /**\n   * Controlled input field value by parent component\n   */\n  value: string;\n  /**\n   * Paginated Organization memberships\n   */\n  memberships: ReturnType<typeof useOrganization>['memberships'];\n  /**\n   * Handler for change event on input field\n   */\n  onSearchChange: (value: string) => void;\n  /**\n   * Handler for `query` value changes\n   */\n  onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n  const { t } = useLocalizations();\n\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const eventValue = event.target.value;\n    onSearchChange(eventValue);\n\n    const shouldClearQuery = eventValue === '';\n    if (shouldClearQuery) {\n      onQueryTrigger(eventValue);\n    }\n  };\n\n  // Debounce the input value changes until the user stops typing\n  // to trigger the `query` param setter\n  function handleKeyUp() {\n    if (debounceTimer.current) {\n      clearTimeout(debounceTimer.current);\n    }\n\n    debounceTimer.current = setTimeout(() => {\n      onQueryTrigger(value.trim());\n    }, membersSearchDebounceMs);\n  }\n\n  // If search is not performed on a initial page, resets pagination offset\n  // based on the response count\n  useEffect(() => {\n    if (!query || !memberships?.data) {\n      return;\n    }\n\n    const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n    if (hasOnePageLeft) {\n      memberships?.fetchPage?.(1);\n    }\n  }, [query, memberships]);\n\n  const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n  return (\n    <Animated asChild>\n      <Flex\n        sx={{\n          width: '50%',\n          [mqu.sm]: {\n            width: 'auto',\n          },\n        }}\n      >\n        <InputWithIcon\n          value={value}\n          type='search'\n          autoCapitalize='none'\n          spellCheck={false}\n          aria-label='Search'\n          placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n          leftIcon={\n            isFetchingNewData ? (\n              <Spinner size='xs' />\n            ) : (\n              <Icon\n                icon={MagnifyingGlass}\n                elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n                sx={t => ({ color: t.colors.$colorMutedForeground })}\n              />\n            )\n          }\n          onKeyUp={handleKeyUp}\n          onChange={handleChange}\n          elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n        />\n      </Flex>\n    </Animated>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js

@@ -66,7 +66,7 @@ const TaskResetPasswordInternal = () => {
 	};
 	const resetPassword = () => {
 		return card.runAsync(async () => {
-			if (!clerk.user) return;
+			if (!canSubmit || !clerk.user) return;
 			passwordField.clearFeedback();
 			confirmField.clearFeedback();
 			try {

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n  const clerk = useClerk();\n  const card = useCardState();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n  const { redirectUrlComplete } = useTaskResetPasswordContext();\n  const { otherSessions } = useMultipleSessions({ user: clerk.user });\n  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n  const { navigateOnSetActive } = useSessionTasksContext();\n\n  const handleSignOut = () => {\n    if (otherSessions.length === 0) {\n      return clerk?.signOut(navigateAfterSignOut);\n    }\n\n    return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n  };\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = () => {\n    return card.runAsync(async () => {\n      if (!clerk.user) {\n        return;\n      }\n\n      passwordField.clearFeedback();\n      confirmField.clearFeedback();\n\n      try {\n        await updatePasswordWithReverification(clerk.user, [\n          {\n            newPassword: passwordField.value,\n            signOutOfOtherSessions: sessionsField.checked,\n          },\n        ]);\n\n        // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n        await clerk.setActive({\n          session: clerk.session,\n          navigate: async ({ session }) => {\n            await navigateOnSetActive?.({ session, redirectUrlComplete });\n          },\n        });\n      } catch (e: any) {\n        return handleError(e, [passwordField, confirmField], card.setError);\n      }\n    });\n  };\n\n  const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n  return (\n    <Flow.Root flow='taskResetPassword'>\n      <Flow.Part part='resetPassword'>\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n              <Header.Subtitle localizationKey={localizationKeys('taskResetPassword.subtitle')} />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={8}\n            >\n              <Form.Root\n                onSubmit={() => {\n                  void resetPassword();\n                }}\n                onBlur={validateForm}\n                gap={8}\n              >\n                <Col gap={6}>\n                  {/* For password managers */}\n                  <input\n                    readOnly\n                    data-testid='hidden-identifier'\n                    id='identifier-field'\n                    name='identifier'\n                    value={clerk.user?.primaryEmailAddress?.emailAddress || clerk.user?.username || ''}\n                    style={{ display: 'none' }}\n                  />\n                  <Form.ControlRow elementId={passwordField.id}>\n                    <Form.PasswordInput\n                      {...passwordField.props}\n                      isRequired\n                      minLength={6}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={confirmField.id}>\n                    <Form.PasswordInput\n                      {...confirmField.props}\n                      onChange={e => {\n                        if (e.target.value) {\n                          setConfirmPasswordFeedback(e.target.value);\n                        }\n                        return confirmField.props.onChange(e);\n                      }}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={sessionsField.id}>\n                    <Form.Checkbox {...sessionsField.props} />\n                  </Form.ControlRow>\n                </Col>\n                <Col gap={3}>\n                  <Form.SubmitButton\n                    isLoading={card.isLoading}\n                    isDisabled={!canSubmit}\n                    localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n                  />\n                </Col>\n              </Form.Root>\n            </Col>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action\n              elementId='signOut'\n              gap={2}\n              justify='center'\n              sx={() => ({ width: '100%' })}\n            >\n              {identifier && (\n                <Card.ActionText\n                  truncate\n                  localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n                    identifier,\n                  })}\n                />\n              )}\n              <Card.ActionLink\n                sx={() => ({ flexShrink: 0 })}\n                onClick={() => {\n                  void handleSignOut();\n                }}\n                localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n  withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n  const clerk = useClerk();\n  const card = useCardState();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n  const { redirectUrlComplete } = useTaskResetPasswordContext();\n  const { otherSessions } = useMultipleSessions({ user: clerk.user });\n  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n  const { navigateOnSetActive } = useSessionTasksContext();\n\n  const handleSignOut = () => {\n    if (otherSessions.length === 0) {\n      return clerk?.signOut(navigateAfterSignOut);\n    }\n\n    return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n  };\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = () => {\n    return card.runAsync(async () => {\n      if (!canSubmit || !clerk.user) {\n        return;\n      }\n\n      passwordField.clearFeedback();\n      confirmField.clearFeedback();\n\n      try {\n        await updatePasswordWithReverification(clerk.user, [\n          {\n            newPassword: passwordField.value,\n            signOutOfOtherSessions: sessionsField.checked,\n          },\n        ]);\n\n        // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n        await clerk.setActive({\n          session: clerk.session,\n          navigate: async ({ session }) => {\n            await navigateOnSetActive?.({ session, redirectUrlComplete });\n          },\n        });\n      } catch (e: any) {\n        return handleError(e, [passwordField, confirmField], card.setError);\n      }\n    });\n  };\n\n  const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n  return (\n    <Flow.Root flow='taskResetPassword'>\n      <Flow.Part part='resetPassword'>\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n              <Header.Subtitle localizationKey={localizationKeys('taskResetPassword.subtitle')} />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={8}\n            >\n              <Form.Root\n                onSubmit={() => {\n                  void resetPassword();\n                }}\n                onBlur={validateForm}\n                gap={8}\n              >\n                <Col gap={6}>\n                  {/* For password managers */}\n                  <input\n                    readOnly\n                    data-testid='hidden-identifier'\n                    id='identifier-field'\n                    name='identifier'\n                    value={clerk.user?.primaryEmailAddress?.emailAddress || clerk.user?.username || ''}\n                    style={{ display: 'none' }}\n                  />\n                  <Form.ControlRow elementId={passwordField.id}>\n                    <Form.PasswordInput\n                      {...passwordField.props}\n                      isRequired\n                      minLength={6}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={confirmField.id}>\n                    <Form.PasswordInput\n                      {...confirmField.props}\n                      onChange={e => {\n                        if (e.target.value) {\n                          setConfirmPasswordFeedback(e.target.value);\n                        }\n                        return confirmField.props.onChange(e);\n                      }}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={sessionsField.id}>\n                    <Form.Checkbox {...sessionsField.props} />\n                  </Form.ControlRow>\n                </Col>\n                <Col gap={3}>\n                  <Form.SubmitButton\n                    isLoading={card.isLoading}\n                    isDisabled={!canSubmit}\n                    localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n                  />\n                </Col>\n              </Form.Root>\n            </Col>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action\n              elementId='signOut'\n              gap={2}\n              justify='center'\n              sx={() => ({ width: '100%' })}\n            >\n              {identifier && (\n                <Card.ActionText\n                  truncate\n                  localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n                    identifier,\n                  })}\n                />\n              )}\n              <Card.ActionLink\n                sx={() => ({ flexShrink: 0 })}\n                onClick={() => {\n                  void handleSignOut();\n                }}\n                localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n  withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}

package/dist/components/SignIn/ResetPassword.js

@@ -60,6 +60,7 @@ const ResetPasswordInternal = () => {
 		if (passwordField.value) setConfirmPasswordFeedback(confirmField.value);
 	};
 	const resetPassword = async () => {
+		if (!canSubmit) return;
 		passwordField.clearFeedback();
 		confirmField.clearFeedback();
 		try {

package/dist/components/SignIn/ResetPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}
+{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    if (!canSubmit) {\n      return;\n    }\n\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}

package/dist/components/UserProfile/PasswordForm.js

@@ -70,6 +70,7 @@ const PasswordForm = withCardStateProvider((props) => {
 		if (passwordField.value) setConfirmPasswordFeedback(confirmField.value);
 	};
 	const updatePassword = async () => {
+		if (!canSubmit) return;
 		try {
 			successPagePropsRef.current = {
 				title: user.passwordEnabled ? localizationKeys("userProfile.passwordPage.title__update") : localizationKeys("userProfile.passwordPage.title__set"),

package/dist/components/UserProfile/PasswordForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordForm.js","names":["user","e: any"],"sources":["../../../src/components/UserProfile/PasswordForm.tsx"],"sourcesContent":["import { useReverification, useSession, useUser } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\nimport { useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer, FormButtons } from '@/ui/elements/FormButtons';\nimport type { FormProps } from '@/ui/elements/FormContainer';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { InformationBox } from '@/ui/elements/InformationBox';\nimport type { SuccessPage } from '@/ui/elements/SuccessPage';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\n\nconst generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => {\n  const localizedTexts = [];\n\n  if (userHasPassword) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));\n  } else {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));\n  }\n\n  if (sessionSignOut) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));\n  }\n\n  return localizedTexts;\n};\n\ntype PasswordFormProps = FormProps;\nexport const PasswordForm = withCardStateProvider((props: PasswordFormProps) => {\n  const { t, locale } = useLocalizations();\n  const { onSuccess, onReset } = props;\n  const { user } = useUser();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n\n  if (!user) {\n    return null;\n  }\n\n  const {\n    userSettings: { passwordSettings },\n    authConfig: { reverification },\n  } = useEnvironment();\n\n  const { session } = useSession();\n  const title = user.passwordEnabled\n    ? localizationKeys('userProfile.passwordPage.title__update')\n    : localizationKeys('userProfile.passwordPage.title__set');\n  const card = useCardState();\n\n  const passwordEditDisabled = user.enterpriseAccounts.some(ea => ea.active);\n  const currentPasswordRequired = user.passwordEnabled && !reverification;\n\n  // Ensure that messages will not use the updated state of User after a password has been set or changed\n  const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({\n    title: localizationKeys('userProfile.passwordPage.title__set'),\n  });\n\n  const currentPasswordField = useFormControl('currentPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__currentPassword'),\n    isRequired: true,\n  });\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit =\n    (currentPasswordRequired ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) &&\n    passwordField.value &&\n    confirmField.value;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const updatePassword = async () => {\n    try {\n      successPagePropsRef.current = {\n        title: user.passwordEnabled\n          ? localizationKeys('userProfile.passwordPage.title__update')\n          : localizationKeys('userProfile.passwordPage.title__set'),\n        text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),\n      };\n\n      const opts = {\n        newPassword: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n        currentPassword: currentPasswordRequired ? currentPasswordField.value : undefined,\n      } satisfies Parameters<typeof user.updatePassword>[0];\n\n      await updatePasswordWithReverification(user, [opts]);\n      onSuccess();\n    } catch (e: any) {\n      handleError(e, [currentPasswordField, passwordField, confirmField], card.setError);\n    }\n  };\n\n  return (\n    <FormContainer headerTitle={title}>\n      {passwordEditDisabled && <InformationBox message={localizationKeys('userProfile.passwordPage.readonly')} />}\n\n      <Form.Root\n        onSubmit={updatePassword}\n        onBlur={validateForm}\n      >\n        {/* For password managers */}\n        <input\n          readOnly\n          data-testid='hidden-identifier'\n          id='identifier-field'\n          name='identifier'\n          value={session?.publicUserData.identifier || ''}\n          style={{ display: 'none' }}\n        />\n        {currentPasswordRequired && (\n          <Form.ControlRow elementId={currentPasswordField.id}>\n            <Form.PasswordInput\n              {...currentPasswordField.props}\n              minLength={6}\n              isRequired\n              autoFocus\n              isDisabled={passwordEditDisabled}\n            />\n          </Form.ControlRow>\n        )}\n        <Form.ControlRow elementId={passwordField.id}>\n          <Form.PasswordInput\n            {...passwordField.props}\n            minLength={6}\n            isRequired\n            autoFocus={!user.passwordEnabled}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={confirmField.id}>\n          <Form.PasswordInput\n            {...confirmField.props}\n            onChange={e => {\n              if (e.target.value) {\n                setConfirmPasswordFeedback(e.target.value);\n              }\n              return confirmField.props.onChange(e);\n            }}\n            isRequired\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={sessionsField.id}>\n          <Form.Checkbox\n            {...sessionsField.props}\n            description={localizationKeys('userProfile.passwordPage.checkboxInfoText__signOutOfOtherSessions')}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        {passwordEditDisabled ? (\n          <FormButtonContainer>\n            <Form.ResetButton\n              localizationKey={localizationKeys('userProfile.formButtonReset')}\n              block={false}\n              onClick={onReset}\n            />\n          </FormButtonContainer>\n        ) : (\n          <FormButtons\n            isDisabled={!canSubmit}\n            onReset={onReset}\n          />\n        )}\n      </Form.Root>\n    </FormContainer>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PasswordForm.js","names":["user","e: any"],"sources":["../../../src/components/UserProfile/PasswordForm.tsx"],"sourcesContent":["import { useReverification, useSession, useUser } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\nimport { useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer, FormButtons } from '@/ui/elements/FormButtons';\nimport type { FormProps } from '@/ui/elements/FormContainer';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { InformationBox } from '@/ui/elements/InformationBox';\nimport type { SuccessPage } from '@/ui/elements/SuccessPage';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\n\nconst generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => {\n  const localizedTexts = [];\n\n  if (userHasPassword) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));\n  } else {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));\n  }\n\n  if (sessionSignOut) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));\n  }\n\n  return localizedTexts;\n};\n\ntype PasswordFormProps = FormProps;\nexport const PasswordForm = withCardStateProvider((props: PasswordFormProps) => {\n  const { t, locale } = useLocalizations();\n  const { onSuccess, onReset } = props;\n  const { user } = useUser();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n\n  if (!user) {\n    return null;\n  }\n\n  const {\n    userSettings: { passwordSettings },\n    authConfig: { reverification },\n  } = useEnvironment();\n\n  const { session } = useSession();\n  const title = user.passwordEnabled\n    ? localizationKeys('userProfile.passwordPage.title__update')\n    : localizationKeys('userProfile.passwordPage.title__set');\n  const card = useCardState();\n\n  const passwordEditDisabled = user.enterpriseAccounts.some(ea => ea.active);\n  const currentPasswordRequired = user.passwordEnabled && !reverification;\n\n  // Ensure that messages will not use the updated state of User after a password has been set or changed\n  const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({\n    title: localizationKeys('userProfile.passwordPage.title__set'),\n  });\n\n  const currentPasswordField = useFormControl('currentPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__currentPassword'),\n    isRequired: true,\n  });\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit =\n    (currentPasswordRequired ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) &&\n    passwordField.value &&\n    confirmField.value;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const updatePassword = async () => {\n    if (!canSubmit) {\n      return;\n    }\n\n    try {\n      successPagePropsRef.current = {\n        title: user.passwordEnabled\n          ? localizationKeys('userProfile.passwordPage.title__update')\n          : localizationKeys('userProfile.passwordPage.title__set'),\n        text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),\n      };\n\n      const opts = {\n        newPassword: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n        currentPassword: currentPasswordRequired ? currentPasswordField.value : undefined,\n      } satisfies Parameters<typeof user.updatePassword>[0];\n\n      await updatePasswordWithReverification(user, [opts]);\n      onSuccess();\n    } catch (e: any) {\n      handleError(e, [currentPasswordField, passwordField, confirmField], card.setError);\n    }\n  };\n\n  return (\n    <FormContainer headerTitle={title}>\n      {passwordEditDisabled && <InformationBox message={localizationKeys('userProfile.passwordPage.readonly')} />}\n\n      <Form.Root\n        onSubmit={updatePassword}\n        onBlur={validateForm}\n      >\n        {/* For password managers */}\n        <input\n          readOnly\n          data-testid='hidden-identifier'\n          id='identifier-field'\n          name='identifier'\n          value={session?.publicUserData.identifier || ''}\n          style={{ display: 'none' }}\n        />\n        {currentPasswordRequired && (\n          <Form.ControlRow elementId={currentPasswordField.id}>\n            <Form.PasswordInput\n              {...currentPasswordField.props}\n              minLength={6}\n              isRequired\n              autoFocus\n              isDisabled={passwordEditDisabled}\n            />\n          </Form.ControlRow>\n        )}\n        <Form.ControlRow elementId={passwordField.id}>\n          <Form.PasswordInput\n            {...passwordField.props}\n            minLength={6}\n            isRequired\n            autoFocus={!user.passwordEnabled}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={confirmField.id}>\n          <Form.PasswordInput\n            {...confirmField.props}\n            onChange={e => {\n              if (e.target.value) {\n                setConfirmPasswordFeedback(e.target.value);\n              }\n              return confirmField.props.onChange(e);\n            }}\n            isRequired\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={sessionsField.id}>\n          <Form.Checkbox\n            {...sessionsField.props}\n            description={localizationKeys('userProfile.passwordPage.checkboxInfoText__signOutOfOtherSessions')}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        {passwordEditDisabled ? (\n          <FormButtonContainer>\n            <Form.ResetButton\n              localizationKey={localizationKeys('userProfile.formButtonReset')}\n              block={false}\n              onClick={onReset}\n            />\n          </FormButtonContainer>\n        ) : (\n          <FormButtons\n            isDisabled={!canSubmit}\n            onReset={onReset}\n          />\n        )}\n      </Form.Root>\n    </FormContainer>\n  );\n});\n"],"mappings":"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"}

package/dist/{createorganization_ui_03abd0_1.0.0-snapshot.v20251208202852.js → createorganization_ui_a492c4_1.0.0-snapshot.v20251211120550.js}

@@ -1 +1 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(8909),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(3100),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(8909),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e||"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen||!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(5543),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(3100),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(5543),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e||"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen||!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);

package/dist/elements/AvatarUploader.js

@@ -1,4 +1,5 @@
 import { localizationKeys } from "../localization/localizationKeys.js";
+import { useLocalizations } from "../localization/makeLocalizable.js";
 import { descriptors } from "../customizables/elementDescriptors.js";
 import { useCardState } from "./contexts/index.js";
 import { Button, Col, Flex, SimpleButton, Text } from "../customizables/index.js";
@@ -24,8 +25,8 @@ const SUPPORTED_MIME_TYPES = Object.freeze([
 ]);
 const validType = (f) => SUPPORTED_MIME_TYPES.includes(f.type);
 const validSize = (f) => f.size <= MAX_SIZE_BYTES;
-const validFile = (f) => validType(f) && validSize(f);
 const AvatarUploader = (props) => {
+	const { t } = useLocalizations();
 	const [showUpload, setShowUpload] = React.useState(false);
 	const [objectUrl, setObjectUrl] = React.useState();
 	const card = useCardState();
@@ -50,7 +51,16 @@ const AvatarUploader = (props) => {
 		return onAvatarRemove?.();
 	};
 	const upload = async (f) => {
-		if (f && validFile(f)) await handleFileDrop(f);
+		if (!f) return;
+		if (!validType(f)) {
+			card.setError(t(localizationKeys("unstable__errors.avatar_file_type_invalid")));
+			return;
+		}
+		if (!validSize(f)) {
+			card.setError(t(localizationKeys("unstable__errors.avatar_file_size_exceeded")));
+			return;
+		}
+		await handleFileDrop(f);
 	};
 	const previewElement = objectUrl ? React.cloneElement(avatarPreview, { imageUrl: objectUrl }) : avatarPreviewPlaceholder ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog }) : avatarPreview;
 	return /* @__PURE__ */ jsxs(Col, {
@@ -81,7 +91,7 @@ const AvatarUploader = (props) => {
 						elementDescriptor: descriptors.avatarImageActionsRemove,
 						localizationKey: localizationKeys("userProfile.profilePage.imageFormDestructiveActionSubtitle"),
 						isDisabled: card.isLoading,
-						sx: (t) => ({ color: t.colors.$danger500 }),
+						sx: (t$1) => ({ color: t$1.colors.$danger500 }),
 						variant: "ghost",
 						colorScheme: "danger",
 						onClick: handleRemove,
@@ -89,7 +99,7 @@ const AvatarUploader = (props) => {
 					})]
 				}), /* @__PURE__ */ jsx(Text, {
 					colorScheme: "secondary",
-					sx: (t) => ({ fontSize: t.fontSizes.$sm }),
+					sx: (t$1) => ({ fontSize: t$1.fontSizes.$sm }),
 					localizationKey: localizationKeys("userProfile.profilePage.fileDropAreaHint")
 				})]
 			})]

package/dist/elements/AvatarUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.js","names":[],"sources":["../../src/elements/AvatarUploader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Button, Col, descriptors, Flex, localizationKeys, SimpleButton, Text } from '../customizables';\nimport { handleError } from '../utils/errorHandler';\nimport { useCardState } from './contexts';\n\nexport type AvatarUploaderProps = {\n  title: LocalizationKey;\n  avatarPreview: React.ReactElement;\n  onAvatarChange: (file: File) => Promise<unknown>;\n  onAvatarRemove?: (() => void) | null;\n  avatarPreviewPlaceholder?: React.ReactElement | null;\n};\n\nconst fileToBase64 = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = error => reject(error);\n  });\n};\n\nconst MAX_SIZE_BYTES = 10 * 1000 * 1000;\nconst SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);\n\nconst validType = (f: File | DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);\nconst validSize = (f: File) => f.size <= MAX_SIZE_BYTES;\nconst validFile = (f: File) => validType(f) && validSize(f);\n\nexport const AvatarUploader = (props: AvatarUploaderProps) => {\n  const [showUpload, setShowUpload] = React.useState(false);\n  const [objectUrl, setObjectUrl] = React.useState<string>();\n  const card = useCardState();\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const openDialog = () => inputRef.current?.click();\n\n  const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;\n\n  const toggle = () => {\n    setShowUpload(!showUpload);\n  };\n\n  const handleFileDrop = (file: File | null) => {\n    if (file === null) {\n      return setObjectUrl('');\n    }\n\n    void fileToBase64(file).then(setObjectUrl);\n    card.setLoading();\n    return onAvatarChange(file)\n      .then(() => {\n        toggle();\n        card.setIdle();\n      })\n      .catch(err => handleError(err, [], card.setError));\n  };\n\n  const handleRemove = async () => {\n    card.setLoading();\n    await handleFileDrop(null);\n    return onAvatarRemove?.();\n  };\n\n  const upload = async (f: File | undefined) => {\n    if (f && validFile(f)) {\n      await handleFileDrop(f);\n    }\n  };\n\n  const previewElement = objectUrl\n    ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })\n    : avatarPreviewPlaceholder\n      ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog })\n      : avatarPreview;\n\n  return (\n    <Col gap={4}>\n      <input\n        type='file'\n        accept={SUPPORTED_MIME_TYPES.join(',')}\n        style={{ display: 'none' }}\n        ref={inputRef}\n        onChange={e => upload(e.currentTarget.files?.[0])}\n      />\n\n      <Flex\n        gap={4}\n        align='center'\n        {...rest}\n      >\n        {previewElement}\n        <Col gap={1}>\n          <Flex\n            elementDescriptor={descriptors.avatarImageActions}\n            gap={2}\n          >\n            <SimpleButton\n              elementDescriptor={descriptors.avatarImageActionsUpload}\n              localizationKey={localizationKeys('userProfile.profilePage.imageFormSubtitle')}\n              isDisabled={card.isLoading}\n              variant='outline'\n              size='xs'\n              onClick={openDialog}\n            />\n\n            {!!onAvatarRemove && !showUpload && (\n              <Button\n                elementDescriptor={descriptors.avatarImageActionsRemove}\n                localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}\n                isDisabled={card.isLoading}\n                sx={t => ({ color: t.colors.$danger500 })}\n                variant='ghost'\n                colorScheme='danger'\n                onClick={handleRemove}\n                size='xs'\n              />\n            )}\n          </Flex>\n          <Text\n            colorScheme='secondary'\n            sx={t => ({ fontSize: t.fontSizes.$sm })}\n            localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}\n          />\n        </Col>\n      </Flex>\n    </Col>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,MAAM,gBAAgB,SAAgC;AACpD,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,YAAY;AAC/B,SAAO,cAAc,KAAK;AAC1B,SAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,SAAO,WAAU,UAAS,OAAO,MAAM;GACvC;;AAGJ,MAAM,iBAAiB,KAAK,MAAO;AACnC,MAAM,uBAAuB,OAAO,OAAO;CAAC;CAAa;CAAc;CAAa;CAAa,CAAC;AAElG,MAAM,aAAa,MAA+B,qBAAqB,SAAS,EAAE,KAAK;AACvF,MAAM,aAAa,MAAY,EAAE,QAAQ;AACzC,MAAM,aAAa,MAAY,UAAU,EAAE,IAAI,UAAU,EAAE;AAE3D,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CACzD,MAAM,CAAC,WAAW,gBAAgB,MAAM,UAAkB;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,WAAW,MAAM,OAAgC,KAAK;CAC5D,MAAM,mBAAmB,SAAS,SAAS,OAAO;CAElD,MAAM,EAAE,gBAAgB,gBAAgB,OAAO,eAAe,yBAA0B,GAAG,SAAS;CAEpG,MAAM,eAAe;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,kBAAkB,SAAsB;AAC5C,MAAI,SAAS,KACX,QAAO,aAAa,GAAG;AAGzB,EAAK,aAAa,KAAK,CAAC,KAAK,aAAa;AAC1C,OAAK,YAAY;AACjB,SAAO,eAAe,KAAK,CACxB,WAAW;AACV,WAAQ;AACR,QAAK,SAAS;IACd,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;CAGtD,MAAM,eAAe,YAAY;AAC/B,OAAK,YAAY;AACjB,QAAM,eAAe,KAAK;AAC1B,SAAO,kBAAkB;;CAG3B,MAAM,SAAS,OAAO,MAAwB;AAC5C,MAAI,KAAK,UAAU,EAAE,CACnB,OAAM,eAAe,EAAE;;CAI3B,MAAM,iBAAiB,YACnB,MAAM,aAAa,eAAe,EAAE,UAAU,WAAW,CAAC,GAC1D,2BACE,MAAM,aAAa,0BAA0B,EAAE,SAAS,YAAY,CAAC,GACrE;AAEN,QACE,qBAAC;EAAI,KAAK;aACR,oBAAC;GACC,MAAK;GACL,QAAQ,qBAAqB,KAAK,IAAI;GACtC,OAAO,EAAE,SAAS,QAAQ;GAC1B,KAAK;GACL,WAAU,MAAK,OAAO,EAAE,cAAc,QAAQ,GAAG;IACjD,EAEF,qBAAC;GACC,KAAK;GACL,OAAM;GACN,GAAI;cAEH,gBACD,qBAAC;IAAI,KAAK;eACR,qBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;gBAEL,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,4CAA4C;MAC9E,YAAY,KAAK;MACjB,SAAQ;MACR,MAAK;MACL,SAAS;OACT,EAED,CAAC,CAAC,kBAAkB,CAAC,cACpB,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,6DAA6D;MAC/F,YAAY,KAAK;MACjB,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,YAAY;MACxC,SAAQ;MACR,aAAY;MACZ,SAAS;MACT,MAAK;OACL;MAEC,EACP,oBAAC;KACC,aAAY;KACZ,KAAI,OAAM,EAAE,UAAU,EAAE,UAAU,KAAK;KACvC,iBAAiB,iBAAiB,2CAA2C;MAC7E;KACE;IACD;GACH"}
+{"version":3,"file":"AvatarUploader.js","names":["t"],"sources":["../../src/elements/AvatarUploader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport {\n  Button,\n  Col,\n  descriptors,\n  Flex,\n  localizationKeys,\n  SimpleButton,\n  Text,\n  useLocalizations,\n} from '../customizables';\nimport { handleError } from '../utils/errorHandler';\nimport { useCardState } from './contexts';\n\nexport type AvatarUploaderProps = {\n  title: LocalizationKey;\n  avatarPreview: React.ReactElement;\n  onAvatarChange: (file: File) => Promise<unknown>;\n  onAvatarRemove?: (() => void) | null;\n  avatarPreviewPlaceholder?: React.ReactElement | null;\n};\n\nconst fileToBase64 = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = error => reject(error);\n  });\n};\n\nconst MAX_SIZE_BYTES = 10 * 1000 * 1000;\nconst SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);\n\nconst validType = (f: File | DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);\nconst validSize = (f: File) => f.size <= MAX_SIZE_BYTES;\n\nexport const AvatarUploader = (props: AvatarUploaderProps) => {\n  const { t } = useLocalizations();\n  const [showUpload, setShowUpload] = React.useState(false);\n  const [objectUrl, setObjectUrl] = React.useState<string>();\n  const card = useCardState();\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const openDialog = () => inputRef.current?.click();\n\n  const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;\n\n  const toggle = () => {\n    setShowUpload(!showUpload);\n  };\n\n  const handleFileDrop = (file: File | null) => {\n    if (file === null) {\n      return setObjectUrl('');\n    }\n\n    void fileToBase64(file).then(setObjectUrl);\n    card.setLoading();\n    return onAvatarChange(file)\n      .then(() => {\n        toggle();\n        card.setIdle();\n      })\n      .catch(err => handleError(err, [], card.setError));\n  };\n\n  const handleRemove = async () => {\n    card.setLoading();\n    await handleFileDrop(null);\n    return onAvatarRemove?.();\n  };\n\n  const upload = async (f: File | undefined) => {\n    if (!f) {\n      return;\n    }\n\n    if (!validType(f)) {\n      card.setError(t(localizationKeys('unstable__errors.avatar_file_type_invalid')));\n      return;\n    }\n\n    if (!validSize(f)) {\n      card.setError(t(localizationKeys('unstable__errors.avatar_file_size_exceeded')));\n      return;\n    }\n\n    await handleFileDrop(f);\n  };\n\n  const previewElement = objectUrl\n    ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })\n    : avatarPreviewPlaceholder\n      ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog })\n      : avatarPreview;\n\n  return (\n    <Col gap={4}>\n      <input\n        type='file'\n        accept={SUPPORTED_MIME_TYPES.join(',')}\n        style={{ display: 'none' }}\n        ref={inputRef}\n        onChange={e => upload(e.currentTarget.files?.[0])}\n      />\n\n      <Flex\n        gap={4}\n        align='center'\n        {...rest}\n      >\n        {previewElement}\n        <Col gap={1}>\n          <Flex\n            elementDescriptor={descriptors.avatarImageActions}\n            gap={2}\n          >\n            <SimpleButton\n              elementDescriptor={descriptors.avatarImageActionsUpload}\n              localizationKey={localizationKeys('userProfile.profilePage.imageFormSubtitle')}\n              isDisabled={card.isLoading}\n              variant='outline'\n              size='xs'\n              onClick={openDialog}\n            />\n\n            {!!onAvatarRemove && !showUpload && (\n              <Button\n                elementDescriptor={descriptors.avatarImageActionsRemove}\n                localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}\n                isDisabled={card.isLoading}\n                sx={t => ({ color: t.colors.$danger500 })}\n                variant='ghost'\n                colorScheme='danger'\n                onClick={handleRemove}\n                size='xs'\n              />\n            )}\n          </Flex>\n          <Text\n            colorScheme='secondary'\n            sx={t => ({ fontSize: t.fontSizes.$sm })}\n            localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}\n          />\n        </Col>\n      </Flex>\n    </Col>\n  );\n};\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,gBAAgB,SAAgC;AACpD,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,YAAY;AAC/B,SAAO,cAAc,KAAK;AAC1B,SAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,SAAO,WAAU,UAAS,OAAO,MAAM;GACvC;;AAGJ,MAAM,iBAAiB,KAAK,MAAO;AACnC,MAAM,uBAAuB,OAAO,OAAO;CAAC;CAAa;CAAc;CAAa;CAAa,CAAC;AAElG,MAAM,aAAa,MAA+B,qBAAqB,SAAS,EAAE,KAAK;AACvF,MAAM,aAAa,MAAY,EAAE,QAAQ;AAEzC,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,MAAM,kBAAkB;CAChC,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CACzD,MAAM,CAAC,WAAW,gBAAgB,MAAM,UAAkB;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,WAAW,MAAM,OAAgC,KAAK;CAC5D,MAAM,mBAAmB,SAAS,SAAS,OAAO;CAElD,MAAM,EAAE,gBAAgB,gBAAgB,OAAO,eAAe,yBAA0B,GAAG,SAAS;CAEpG,MAAM,eAAe;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,kBAAkB,SAAsB;AAC5C,MAAI,SAAS,KACX,QAAO,aAAa,GAAG;AAGzB,EAAK,aAAa,KAAK,CAAC,KAAK,aAAa;AAC1C,OAAK,YAAY;AACjB,SAAO,eAAe,KAAK,CACxB,WAAW;AACV,WAAQ;AACR,QAAK,SAAS;IACd,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;CAGtD,MAAM,eAAe,YAAY;AAC/B,OAAK,YAAY;AACjB,QAAM,eAAe,KAAK;AAC1B,SAAO,kBAAkB;;CAG3B,MAAM,SAAS,OAAO,MAAwB;AAC5C,MAAI,CAAC,EACH;AAGF,MAAI,CAAC,UAAU,EAAE,EAAE;AACjB,QAAK,SAAS,EAAE,iBAAiB,4CAA4C,CAAC,CAAC;AAC/E;;AAGF,MAAI,CAAC,UAAU,EAAE,EAAE;AACjB,QAAK,SAAS,EAAE,iBAAiB,6CAA6C,CAAC,CAAC;AAChF;;AAGF,QAAM,eAAe,EAAE;;CAGzB,MAAM,iBAAiB,YACnB,MAAM,aAAa,eAAe,EAAE,UAAU,WAAW,CAAC,GAC1D,2BACE,MAAM,aAAa,0BAA0B,EAAE,SAAS,YAAY,CAAC,GACrE;AAEN,QACE,qBAAC;EAAI,KAAK;aACR,oBAAC;GACC,MAAK;GACL,QAAQ,qBAAqB,KAAK,IAAI;GACtC,OAAO,EAAE,SAAS,QAAQ;GAC1B,KAAK;GACL,WAAU,MAAK,OAAO,EAAE,cAAc,QAAQ,GAAG;IACjD,EAEF,qBAAC;GACC,KAAK;GACL,OAAM;GACN,GAAI;cAEH,gBACD,qBAAC;IAAI,KAAK;eACR,qBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;gBAEL,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,4CAA4C;MAC9E,YAAY,KAAK;MACjB,SAAQ;MACR,MAAK;MACL,SAAS;OACT,EAED,CAAC,CAAC,kBAAkB,CAAC,cACpB,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,6DAA6D;MAC/F,YAAY,KAAK;MACjB,KAAI,SAAM,EAAE,OAAOA,IAAE,OAAO,YAAY;MACxC,SAAQ;MACR,aAAY;MACZ,SAAS;MACT,MAAK;OACL;MAEC,EACP,oBAAC;KACC,aAAY;KACZ,KAAI,SAAM,EAAE,UAAUA,IAAE,UAAU,KAAK;KACvC,iBAAiB,iBAAiB,2CAA2C;MAC7E;KACE;IACD;GACH"}