npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251204143242 → 1.0.0-snapshot.v20251208202852 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/{207_ui_87d4d5_1.0.0-snapshot.v20251204143242.js → 207_ui_03abd0_1.0.0-snapshot.v20251208202852.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["207"],{9e3:function(e,t,i){i.d(t,{v:()=>p});var n=i(4518),r=i(374),a=i(137),o=i(9606),l=i(7288),s=i(6256),d=i(2861),c=i(8272),h=i(4964);let p=()=>{let{data:e,isLoading:t,count:i}=(0,l.wD)(),a=(0,s.N7)();return(0,n.Y)(r.bQ,{page:1,onPageChange:e=>{},itemCount:i,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,d.G)(`${a}.billingPage.paymentHistorySection.empty`),headers:[(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__date`),(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__amount`),(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__status`)],rows:e.map(e=>(0,n.Y)(u,{paymentAttempt:e},e.id))})},u=({paymentAttempt:e})=>{let{id:t,amount:i,failedAt:l,paidAt:s,updatedAt:d,status:p}=e,{navigate:u}=(0,h.r)();return(0,n.FD)(r.J2,{onClick:()=>{u(`payment-attempt/${t}`)},children:[(0,n.FD)(c.Td,{sx:{cursor:"pointer"},children:[(0,n.Y)(c.EY,{variant:"subtitle",children:(0,a.Y)(s\|\|l\|\|d,"long")}),(0,n.Y)(c.EY,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,o.W)(t)})]}),(0,n.Y)(c.Td,{sx:{cursor:"pointer"},children:(0,n.FD)(c.EY,{children:[i.currencySymbol,i.amountFormatted]})}),(0,n.Y)(c.Td,{children:(0,n.Y)(c.Ex,{colorScheme:"paid"===p?"success":"failed"===p?"danger":"primary",sx:{textTransform:"capitalize"},children:p})})]})}},3450:function(e,t,i){i.d(t,{pr:()=>P,L6:()=>G,Mo:()=>T,bL:()=>F});var n=i(4518),r=i(8909),a=i(5074),o=i(6088),l=i(3269),s=i(2454),d=i(1475),c=i(3549),h=i(8930),p=i(4468),u=i(6256),g=i(6580),m=i(78),y=i(2861),b=i(8272),$=i(8920);let Y=e=>(0,n.Y)(b.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),f=()=>(0,n.Y)(Y,{sx:e=>({height:e.space.$10,width:"100%"})}),v=e=>(0,n.Y)(b.so,{direction:"col",gap:2,children:e.children}),D=()=>(0,n.Y)(b.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,n.FD)(b.so,{direction:"col",gap:5,children:[(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,n.Y)(f,{})]}),(0,n.FD)(b.xA,{columns:2,gap:4,children:[(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,n.Y)(f,{})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,n.Y)(f,{})]})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,n.Y)(f,{})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{}),(0,n.Y)(Y,{}),(0,n.Y)(Y,{sx:{width:"66.666667%"}})]})]})}),[x,z]=(0,r.e3)("AddPaymentMethodRoot"),S=({children:e,checkout:t,...i})=>{var o;let l,s=(0,u.XX)(),d=(0,a.useRef)(null),{t:c}=(0,m._)(),[p,b]=(0,a.useState)(void 0),[$,Y]=(0,a.useState)(void 0),[f,v]=(0,a.useState)(void 0),D=(o=d.current,l=(0,g.K)().parsedInternalTheme,(0,a.useMemo)(()=>{if(!o)return;let{colors:e,fontWeights:t,fontSizes:i,radii:n,space:r}=l;return{colorPrimary:(0,h.G3)(o,e.$primary500,e.$colorBackground),colorBackground:(0,h.G3)(o,e.$colorInput,e.$colorBackground),colorText:(0,h.G3)(o,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,h.G3)(o,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,h.G3)(o,e.$success500,e.$colorBackground),colorDanger:(0,h.G3)(o,e.$danger500,e.$colorBackground),colorWarning:(0,h.G3)(o,e.$warning500,e.$colorBackground),fontWeightNormal:(0,h.yJ)(o,"font-weight",t.$normal.toString()),fontWeightMedium:(0,h.yJ)(o,"font-weight",t.$medium.toString()),fontWeightBold:(0,h.yJ)(o,"font-weight",t.$bold.toString()),fontSizeXl:(0,h.yJ)(o,"font-size",i.$xl),fontSizeLg:(0,h.yJ)(o,"font-size",i.$lg),fontSizeSm:(0,h.yJ)(o,"font-size",i.$md),fontSizeXs:(0,h.yJ)(o,"font-size",i.$sm),borderRadius:(0,h.yJ)(o,"border-radius",n.$lg),spacingUnit:(0,h.yJ)(o,"padding",r.$1)}},[l,o]));return(0,n.FD)(x.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:f,setHeaderTitle:b,setHeaderSubtitle:Y,setSubmitLabel:v,checkout:t,...i}},children:[(0,n.Y)("div",{ref:d,style:{display:"none"}}),(0,n.Y)(r.Tn,{checkout:t,for:s,stripeAppearance:D,paymentDescription:c((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},M=e=>{let{isProviderReady:t}=(0,r.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,r.Jl)();return t?(0,n.Y)(n.FK,{children:e.children}):null},F=e=>{let{children:t,...i}=e;return(0,n.FD)(S,{...i,children:[(0,n.Y)(M,{children:(0,n.Y)(b.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,n.Y)(b.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,n.Y)(_,{children:(0,n.Y)(L,{children:t})})]})},w=(e,t)=>{(0,a.useRef)(()=>{t(e)}),(0,a.useEffect)(()=>{t(e)},[e,t])},T=({text:e})=>{let{setHeaderTitle:t}=z();return w(e,t),null},G=({text:e})=>{let{setHeaderSubtitle:t}=z();return w(e,t),null},P=({text:e})=>{let{setSubmitLabel:t}=z();return w(e,t),null},L=({children:e})=>{let{headerTitle:t,headerSubtitle:i,submitLabel:a,checkout:h,onSuccess:g,cancelAction:m}=z(),b=(0,l.f0)(),$=(0,u.N7)(),{isFormReady:Y,submit:f,reset:v}=(0,r.Jl)(),x=async e=>{e.preventDefault(),b.setLoading(),b.setError(void 0);let{data:t,error:i}=await f();if(!i)try{await g(t)}catch(e){(0,p.H4)(e,[],b.setError)}finally{b.setIdle(),v()}};return(0,n.Y)(c.M,{headerTitle:t,headerSubtitle:i,children:(0,n.FD)(s.l.Root,{onSubmit:x,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,n.Y)(r.cl,{fallback:(0,n.Y)(D,{})}),(0,n.Y)(o.Z.Alert,{children:b.error}),(0,n.Y)(d.G,{isDisabled:!Y,submitLabel:a??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:m,hideReset:!m,sx:{flex:h?1:void 0}})]})})}},3369:function(e,t,i){i.d(t,{O:()=>d});var n=i(4518),r=i(8272),a=i(8920),o=i(2861),l=i(4967),s=i(5203);let d=({paymentMethod:e})=>(0,n.FD)(r.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:a.$z.paymentMethodRow,children:[(0,n.Y)(r.In,{icon:"card"===e.paymentType?l.A:s.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:a.$z.paymentMethodRowIcon}),(0,n.Y)(r.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:a.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,n.Y)(r.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:a.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,n.Y)(r.Ex,{elementDescriptor:a.$z.paymentMethodRowBadge,elementId:a.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,o.G)("badge__default")}),"expired"===e.status&&(0,n.Y)(r.Ex,{elementDescriptor:a.$z.paymentMethodRowBadge,elementId:a.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,o.G)("badge__expired")})]})},3365:function(e,t,i){i.d(t,{b:()=>M});var n=i(4518),r=i(8909),a=i(5074),o=i(3269),l=i(2611),s=i(4003),d=i(8080),c=i(4468),h=i(8046),p=i(625),u=i(6256),g=i(7288),m=i(2861),y=i(3453),b=i(2513),$=i(3450),Y=i(3369),f=i(9436),v=i(78),D=i(8272);let x=()=>{let{t:e}=(0,v._)();return(0,n.FD)(D.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,n.Y)(D.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,n.FD)(D.az,{sx:{display:"flex",alignItems:"baseline",justifyContent:"space-between"},children:[(0,n.Y)(D.EY,{variant:"caption",colorScheme:"body",localizationKey:(0,m.G)("billing.paymentMethod.dev.testCardInfo")}),(0,n.Y)(D.EY,{variant:"caption",sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,m.G)("billing.paymentMethod.dev.developmentMode")})]}),(0,n.FD)(f.p.Root,{children:[(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.cardNumber")}),(0,n.Y)(f.p.Description,{text:"4242 4242 4242 4242"})]}),(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.expirationDate")}),(0,n.Y)(f.p.Description,{text:"11/44"})]}),(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.cvcZip")}),(0,n.Y)(f.p.Description,{text:e((0,m.G)("billing.paymentMethod.dev.anyNumbers"))})]})]})]})},z=(0,o.dm)(({onSuccess:e})=>{let{close:t}=(0,b.D5)(),i=(0,r.ho)(),a=(0,u.XX)(),o=(0,u.N7)(),l=async n=>{let r="organization"===a?i?.organization:i.user;return await r?.addPaymentMethod(n),e(),t(),Promise.resolve()};return(0,n.FD)($.bL,{onSuccess:l,cancelAction:t,children:[(0,n.Y)($.Mo,{text:(0,m.G)(`${o}.billingPage.paymentMethodsSection.add`)}),(0,n.Y)($.L6,{text:(0,m.G)(`${o}.billingPage.paymentMethodsSection.addSubtitle`)}),(0,n.Y)(p.W,{children:(0,n.Y)(x,{})})]})}),S=({paymentMethod:e,revalidate:t})=>{let{close:i}=(0,b.D5)(),l=(0,o.f0)(),s=(0,u.XX)(),d=(0,u.N7)(),p=(0,a.useRef)(`${"card"===e.paymentType?e.cardType:e.paymentType} ${"card"===e.paymentType?`⋯ ${e.last4}`:"-"}`),g=(0,r.Wf)();if(!p.current)return null;let y=async()=>{await e.remove({orgId:"organization"===s?g?.organization?.id:void 0}).then(t).catch(e=>{(0,c.H4)(e,[],l.setError)})};return(0,n.Y)(h.P,{title:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.title`),messageLine1:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,{identifier:p.current}),messageLine2:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.messageLine2`),successMessage:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.successMessage`,{paymentMethod:p.current}),deleteResource:y,onSuccess:i,onReset:i})},M=(0,o.dm)(()=>{let e=(0,r.ho)(),t=(0,u.XX)(),i=(0,u.N7)(),o="organization"===t?e?.organization:e.user,{data:d,isLoading:c,revalidate:h}=(0,g.mu)(),p=(0,a.useMemo)(()=>d.sort((e,t)=>e.isDefault&&!t.isDefault?-1:1),[d]);return!o\|\|__BUILD_DISABLE_RHC__&&0===p.length?null:(0,n.Y)(s.rd.Root,{title:(0,m.G)(`${i}.billingPage.paymentMethodsSection.title`),centered:!1,id:"paymentMethods",sx:e=>({flex:1,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100}),children:(0,n.Y)(y.r.Root,{children:(0,n.Y)(s.rd.ItemList,{id:"paymentMethods",disableAnimation:!0,children:c?(0,n.Y)(l.K,{}):(0,n.FD)(n.FK,{children:[p.map(e=>(0,n.FD)(a.Fragment,{children:[(0,n.FD)(s.rd.Item,{id:"paymentMethods",children:[(0,n.Y)(Y.O,{paymentMethod:e}),(0,n.Y)(_,{paymentMethod:e,revalidate:h})]}),(0,n.Y)(y.r.Open,{value:`remove-${e.id}`,children:(0,n.Y)(y.r.Card,{variant:"destructive",children:(0,n.Y)(S,{paymentMethod:e,revalidate:h})})})]},e.id)),__BUILD_DISABLE_RHC__?null:(0,n.FD)(n.FK,{children:[(0,n.Y)(y.r.Trigger,{value:"add",children:(0,n.Y)(s.rd.ArrowButton,{id:"paymentMethods",localizationKey:(0,m.G)(`${i}.billingPage.paymentMethodsSection.add`)})}),(0,n.Y)(y.r.Open,{value:"add",children:(0,n.Y)(y.r.Card,{children:(0,n.Y)(z,{onSuccess:h})})})]})]})})})})}),_=({paymentMethod:e,revalidate:t})=>{let{open:i}=(0,b.D5)(),a=(0,o.f0)(),l=(0,u.XX)(),s=(0,u.N7)(),h=(0,r.Wf)(),p=[{label:(0,m.G)(`${s}.billingPage.paymentMethodsSection.actionLabel__remove`),isDestructive:!0,onClick:()=>i(`remove-${e.id}`),isDisabled:!e.isRemovable}];return e.isDefault\|\|p.unshift({label:(0,m.G)(`${s}.billingPage.paymentMethodsSection.actionLabel__default`),isDestructive:!1,onClick:()=>{e.makeDefault({orgId:"organization"===l?h?.organization?.id:void 0}).then(t).catch(e=>{(0,c.H4)(e,[],a.setError)})},isDisabled:!1}),(0,n.Y)(d.o,{actions:p})}},7682:function(e,t,i){i.d(t,{T:()=>p});var n=i(4518),r=i(7288),a=i(6256),o=i(374),l=i(137),s=i(2861),d=i(8272),c=i(4964),h=i(9606);let p=()=>{let{data:e,isLoading:t,count:i}=(0,r.eT)(),l=(0,a.N7)();return(0,n.Y)(o.bQ,{page:1,onPageChange:e=>{},itemCount:i,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,s.G)(`${l}.billingPage.statementsSection.empty`),headers:[(0,s.G)(`${l}.billingPage.statementsSection.tableHeader__date`),(0,s.G)(`${l}.billingPage.statementsSection.tableHeader__amount`)],rows:e.map(e=>(0,n.Y)(u,{statement:e},e.id))})},u=({statement:e})=>{let{timestamp:t,id:i,totals:{grandTotal:r}}=e,{navigate:a}=(0,c.r)();return(0,n.FD)(o.J2,{onClick:()=>{a(`statement/${i}`)},children:[(0,n.FD)(d.Td,{sx:{cursor:"pointer"},children:[(0,n.Y)(d.EY,{variant:"subtitle",children:(0,l.Y)(t,"monthyear")}),(0,n.Y)(d.EY,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,h.W)(i)})]}),(0,n.Y)(d.Td,{sx:{cursor:"pointer"},children:(0,n.FD)(d.EY,{colorScheme:"secondary",children:[r.currencySymbol,r.amountFormatted]})})]})}},2916:function(e,t,i){i.d(t,{R:()=>$});var n=i(4518),r=i(5074),a=i(7477),o=i(4003),l=i(6256),s=i(7288),d=i(7697),c=i(8272),h=i(2861),p=i(7078),u=i(9679),g=i(8813),m=i(4430),y=i(4964),b=i(3679);function $({title:e,switchPlansLabel:t,newSubscriptionLabel:i,manageSubscriptionLabel:m}){let b=(0,l.N7)(),$=(0,l.XX)(),{subscriptionItems:f}=(0,s.Rs)(),v=(0,a.Fd)(e=>e({permission:"org:sys_billing:manage"}))\|\|"user"===$,{navigate:D}=(0,y.r)(),{commerceSettings:x}=(0,d.O)(),{openSubscriptionDetails:z}=(0,s.D)(),S=x.billing.user.hasPaidPlans&&"user"===$\|\|x.billing.organization.hasPaidPlans&&"organization"===$,M=(0,r.useMemo)(()=>f.some(e=>!e.plan.hasBaseFee&&"active"===e.status),[f]),_=v&&!M&&f.length>0,F=(0,r.useMemo)(()=>f.sort((e,t)=>"active"===e.status&&"active"!==t.status?-1:("active"===t.status&&e.status,1)),[f]);return(0,n.FD)(o.rd.Root,{id:"subscriptionsList",title:e,centered:!1,sx:e=>({borderTop:"none",paddingTop:e.space.$1}),children:[f.length>0&&(0,n.FD)(c.XI,{tableHeadVisuallyHidden:!0,children:[(0,n.Y)(c.d8,{children:(0,n.FD)(c.Tr,{children:[(0,n.Y)(c.Th,{localizationKey:(0,h.G)(`${b}.billingPage.subscriptionsListSection.tableHeader__plan`)}),(0,n.Y)(c.Th,{localizationKey:(0,h.G)(`${b}.billingPage.subscriptionsListSection.tableHeader__startDate`)})]})}),(0,n.Y)(c.NN,{children:F.map(e=>(0,n.Y)(Y,{subscription:e,length:F.length},e.id))})]}),(0,n.FD)(o.rd.ButtonGroup,{id:"subscriptionsList",children:[S?(0,n.Y)(o.rd.ArrowButton,{id:"subscriptionsList",textLocalizationKey:f.length>0?t:i,sx:[e=>({justifyContent:"start",height:e.sizes.$8,width:_?"unset":void 0})],leftIcon:f.length>0?p.A:u.A,rightIcon:null,leftIconSx:e=>({width:e.sizes.$4,height:e.sizes.$4}),onClick:()=>void D("plans")}):null,_?(0,n.Y)(o.rd.ArrowButton,{id:"subscriptionsList",textLocalizationKey:m,sx:[e=>({justifyContent:"start",height:e.sizes.$8,width:"unset"})],rightIcon:null,leftIcon:g.A,leftIconSx:e=>({width:e.sizes.$4,height:e.sizes.$4}),onClick:e=>z(e)}):null]})]})}function Y({subscription:e,length:t}){let i="annual"===e.planPeriod?e.plan.annualFee:e.plan.fee,{captionForSubscription:a}=(0,s.D)(),o=(0,r.useMemo)(()=>(0,s.Ij)(i.amountFormatted),[i.amountFormatted]);return(0,n.FD)(c.Tr,{children:[(0,n.Y)(c.Td,{children:(0,n.FD)(c.fv,{gap:1,children:[(0,n.FD)(c.so,{align:"center",gap:1,children:[(0,n.Y)(c.In,{icon:m.A,sx:e=>({width:e.sizes.$4,height:e.sizes.$4,opacity:e.opacity.$inactive})}),(0,n.Y)(c.EY,{variant:"subtitle",sx:e=>({marginRight:e.sizes.$1}),children:e.plan.name}),e.isFreeTrial\|\|t>1\|\|e.canceledAt?(0,n.Y)(b.V,{subscription:e.isFreeTrial?{status:"free_trial"}:e}):null]}),(!e.plan.isDefault\|\|"upcoming"===e.status)&&(0,n.Y)(c.EY,{variant:"caption",colorScheme:"secondary",localizationKey:a(e)})]})}),(0,n.Y)(c.Td,{sx:e=>({textAlign:"right"}),children:(0,n.FD)(c.EY,{variant:"subtitle",children:[i.currencySymbol,o,i.amount>0&&(0,n.Y)(c.L9,{sx:e=>({color:e.colors.$colorMutedForeground,textTransform:"lowercase",":before":{content:'"/"',marginInline:e.space.$1}}),localizationKey:"annual"===e.planPeriod?(0,h.G)("billing.year"):(0,h.G)("billing.month")})]})})]},e.id)}},3679:function(e,t,i){i.d(t,{V:()=>s});var n=i(4518),r=i(8272),a=i(2861);let o={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"},s=({subscription:e,elementDescriptor:t})=>(0,n.Y)(r.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,a.G)(o[e.status])})}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["207"],{9e3:function(e,t,i){i.d(t,{v:()=>h});var n=i(4518),r=i(374),a=i(137),o=i(9606),l=i(7288),s=i(6256),d=i(2861),c=i(8272),p=i(4964);let h=()=>{let{data:e,isLoading:t,count:i}=(0,l.wD)(),a=(0,s.N7)();return(0,n.Y)(r.bQ,{page:1,onPageChange:e=>{},itemCount:i,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,d.G)(`${a}.billingPage.paymentHistorySection.empty`),headers:[(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__date`),(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__amount`),(0,d.G)(`${a}.billingPage.paymentHistorySection.tableHeader__status`)],rows:e.map(e=>(0,n.Y)(u,{paymentAttempt:e},e.id))})},u=({paymentAttempt:e})=>{let{id:t,amount:i,failedAt:l,paidAt:s,updatedAt:d,status:h}=e,{navigate:u}=(0,p.r)();return(0,n.FD)(r.J2,{onClick:()=>{u(`payment-attempt/${t}`)},children:[(0,n.FD)(c.Td,{sx:{cursor:"pointer"},children:[(0,n.Y)(c.EY,{variant:"subtitle",children:(0,a.Y)(s\|\|l\|\|d,"long")}),(0,n.Y)(c.EY,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,o.W)(t)})]}),(0,n.Y)(c.Td,{sx:{cursor:"pointer"},children:(0,n.FD)(c.EY,{children:[i.currencySymbol,i.amountFormatted]})}),(0,n.Y)(c.Td,{children:(0,n.Y)(c.Ex,{colorScheme:"paid"===h?"success":"failed"===h?"danger":"primary",sx:{textTransform:"capitalize"},children:h})})]})}},3450:function(e,t,i){i.d(t,{pr:()=>_,L6:()=>P,Mo:()=>G,bL:()=>w});var n=i(4518),r=i(8909),a=i(5074),o=i(6088),l=i(3269),s=i(2454),d=i(1475),c=i(3549),p=i(8930),h=i(4468),u=i(6256),g=i(6580),m=i(78),y=i(2861),b=i(8272),$=i(8920);let Y=e=>(0,n.Y)(b.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),f=()=>(0,n.Y)(Y,{sx:e=>({height:e.space.$10,width:"100%"})}),v=e=>(0,n.Y)(b.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,n.Y)(b.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,n.FD)(b.so,{direction:"col",gap:5,children:[(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,n.Y)(f,{})]}),(0,n.FD)(b.xA,{columns:2,gap:4,children:[(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,n.Y)(f,{})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,n.Y)(f,{})]})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,n.Y)(f,{})]}),(0,n.FD)(v,{children:[(0,n.Y)(Y,{}),(0,n.Y)(Y,{}),(0,n.Y)(Y,{sx:{width:"66.666667%"}})]})]})}),[D,z]=(0,r.e3)("AddPaymentMethodRoot"),S=({children:e,checkout:t,...i})=>{var o;let l,s=(0,u.XX)(),d=(0,a.useRef)(null),{t:c}=(0,m._)(),[h,b]=(0,a.useState)(void 0),[$,Y]=(0,a.useState)(void 0),[f,v]=(0,a.useState)(void 0),x=(o=d.current,l=(0,g.K)().parsedInternalTheme,(0,a.useMemo)(()=>{if(!o)return;let{colors:e,fontWeights:t,fontSizes:i,radii:n,space:r}=l;return{colorPrimary:(0,p.G3)(o,e.$primary500,e.$colorBackground),colorBackground:(0,p.G3)(o,e.$colorInput,e.$colorBackground),colorText:(0,p.G3)(o,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,p.G3)(o,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,p.G3)(o,e.$success500,e.$colorBackground),colorDanger:(0,p.G3)(o,e.$danger500,e.$colorBackground),colorWarning:(0,p.G3)(o,e.$warning500,e.$colorBackground),fontWeightNormal:(0,p.yJ)(o,"font-weight",t.$normal.toString()),fontWeightMedium:(0,p.yJ)(o,"font-weight",t.$medium.toString()),fontWeightBold:(0,p.yJ)(o,"font-weight",t.$bold.toString()),fontSizeXl:(0,p.yJ)(o,"font-size",i.$xl),fontSizeLg:(0,p.yJ)(o,"font-size",i.$lg),fontSizeSm:(0,p.yJ)(o,"font-size",i.$md),fontSizeXs:(0,p.yJ)(o,"font-size",i.$sm),borderRadius:(0,p.yJ)(o,"border-radius",n.$lg),spacingUnit:(0,p.yJ)(o,"padding",r.$1)}},[l,o]));return(0,n.FD)(D.Provider,{value:{value:{headerTitle:h,headerSubtitle:$,submitLabel:f,setHeaderTitle:b,setHeaderSubtitle:Y,setSubmitLabel:v,checkout:t,...i}},children:[(0,n.Y)("div",{ref:d,style:{display:"none"}}),(0,n.Y)(r.Tn,{checkout:t,for:s,stripeAppearance:x,paymentDescription:c((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},M=e=>{let{isProviderReady:t}=(0,r.Jl)();return t?null:e.children},F=e=>{let{isProviderReady:t}=(0,r.Jl)();return t?(0,n.Y)(n.FK,{children:e.children}):null},w=e=>{let{children:t,...i}=e;return(0,n.FD)(S,{...i,children:[(0,n.Y)(M,{children:(0,n.Y)(b.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,n.Y)(b.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,n.Y)(F,{children:(0,n.Y)(k,{children:t})})]})},T=(e,t)=>{(0,a.useRef)(()=>{t(e)}),(0,a.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=z();return T(e,t),null},P=({text:e})=>{let{setHeaderSubtitle:t}=z();return T(e,t),null},_=({text:e})=>{let{setSubmitLabel:t}=z();return T(e,t),null},k=({children:e})=>{let{headerTitle:t,headerSubtitle:i,submitLabel:a,checkout:p,onSuccess:g,cancelAction:m}=z(),b=(0,l.f0)(),$=(0,u.N7)(),{isFormReady:Y,submit:f,reset:v}=(0,r.Jl)(),D=async e=>{e.preventDefault(),b.setLoading(),b.setError(void 0);let{data:t,error:i}=await f();if(!i)try{await g(t)}catch(e){(0,h.H4)(e,[],b.setError)}finally{b.setIdle(),v()}};return(0,n.Y)(c.M,{headerTitle:t,headerSubtitle:i,children:(0,n.FD)(s.l.Root,{onSubmit:D,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,n.Y)(r.cl,{fallback:(0,n.Y)(x,{})}),(0,n.Y)(o.Z.Alert,{children:b.error}),(0,n.Y)(d.G,{isDisabled:!Y,submitLabel:a??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:m,hideReset:!m,sx:{flex:p?1:void 0}})]})})}},3369:function(e,t,i){i.d(t,{O:()=>d});var n=i(4518),r=i(8272),a=i(8920),o=i(2861),l=i(4967),s=i(5203);let d=({paymentMethod:e})=>(0,n.FD)(r.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:a.$z.paymentMethodRow,children:[(0,n.Y)(r.In,{icon:"card"===e.paymentType?l.A:s.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:a.$z.paymentMethodRowIcon}),(0,n.Y)(r.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:a.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,n.Y)(r.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:a.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,n.Y)(r.Ex,{elementDescriptor:a.$z.paymentMethodRowBadge,elementId:a.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,o.G)("badge__default")}),"expired"===e.status&&(0,n.Y)(r.Ex,{elementDescriptor:a.$z.paymentMethodRowBadge,elementId:a.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,o.G)("badge__expired")})]})},3365:function(e,t,i){i.d(t,{b:()=>M});var n=i(4518),r=i(8909),a=i(5074),o=i(3269),l=i(2611),s=i(4003),d=i(8080),c=i(4468),p=i(8046),h=i(625),u=i(6256),g=i(7288),m=i(2861),y=i(3453),b=i(2513),$=i(3450),Y=i(3369),f=i(9436),v=i(78),x=i(8272);let D=()=>{let{t:e}=(0,v._)();return(0,n.FD)(x.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,n.Y)(x.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,n.FD)(x.az,{sx:{display:"flex",alignItems:"baseline",justifyContent:"space-between"},children:[(0,n.Y)(x.EY,{variant:"caption",colorScheme:"body",localizationKey:(0,m.G)("billing.paymentMethod.dev.testCardInfo")}),(0,n.Y)(x.EY,{variant:"caption",sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,m.G)("billing.paymentMethod.dev.developmentMode")})]}),(0,n.FD)(f.p.Root,{children:[(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.cardNumber")}),(0,n.Y)(f.p.Description,{text:"4242 4242 4242 4242"})]}),(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.expirationDate")}),(0,n.Y)(f.p.Description,{text:"11/44"})]}),(0,n.FD)(f.p.Group,{variant:"tertiary",children:[(0,n.Y)(f.p.Title,{title:(0,m.G)("billing.paymentMethod.dev.cvcZip")}),(0,n.Y)(f.p.Description,{text:e((0,m.G)("billing.paymentMethod.dev.anyNumbers"))})]})]})]})},z=(0,o.dm)(({onSuccess:e})=>{let{close:t}=(0,b.D5)(),i=(0,r.ho)(),a=(0,u.XX)(),o=(0,u.N7)(),l=async n=>{let r="organization"===a?i?.organization:i.user;return await r?.addPaymentMethod(n),e(),t(),Promise.resolve()};return(0,n.FD)($.bL,{onSuccess:l,cancelAction:t,children:[(0,n.Y)($.Mo,{text:(0,m.G)(`${o}.billingPage.paymentMethodsSection.add`)}),(0,n.Y)($.L6,{text:(0,m.G)(`${o}.billingPage.paymentMethodsSection.addSubtitle`)}),(0,n.Y)(h.W,{children:(0,n.Y)(D,{})})]})}),S=({paymentMethod:e,revalidate:t})=>{let{close:i}=(0,b.D5)(),l=(0,o.f0)(),s=(0,u.XX)(),d=(0,u.N7)(),h=(0,a.useRef)(`${"card"===e.paymentType?e.cardType:e.paymentType} ${"card"===e.paymentType?`⋯ ${e.last4}`:"-"}`),g=(0,r.Wf)();if(!h.current)return null;let y=async()=>{await e.remove({orgId:"organization"===s?g?.organization?.id:void 0}).then(t).catch(e=>{(0,c.H4)(e,[],l.setError)})};return(0,n.Y)(p.P,{title:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.title`),messageLine1:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,{identifier:h.current}),messageLine2:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.messageLine2`),successMessage:(0,m.G)(`${d}.billingPage.paymentMethodsSection.removeMethod.successMessage`,{paymentMethod:h.current}),deleteResource:y,onSuccess:i,onReset:i})},M=(0,o.dm)(()=>{let e=(0,r.ho)(),t=(0,u.XX)(),i=(0,u.N7)(),o="organization"===t?e?.organization:e.user,{data:d,isLoading:c,revalidate:p}=(0,g.mu)(),h=(0,a.useMemo)(()=>d.sort((e,t)=>e.isDefault&&!t.isDefault?-1:1),[d]);return o?(0,n.Y)(s.rd.Root,{title:(0,m.G)(`${i}.billingPage.paymentMethodsSection.title`),centered:!1,id:"paymentMethods",sx:e=>({flex:1,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100}),children:(0,n.Y)(y.r.Root,{children:(0,n.Y)(s.rd.ItemList,{id:"paymentMethods",disableAnimation:!0,children:c?(0,n.Y)(l.K,{}):(0,n.FD)(n.FK,{children:[h.map(e=>(0,n.FD)(a.Fragment,{children:[(0,n.FD)(s.rd.Item,{id:"paymentMethods",children:[(0,n.Y)(Y.O,{paymentMethod:e}),(0,n.Y)(F,{paymentMethod:e,revalidate:p})]}),(0,n.Y)(y.r.Open,{value:`remove-${e.id}`,children:(0,n.Y)(y.r.Card,{variant:"destructive",children:(0,n.Y)(S,{paymentMethod:e,revalidate:p})})})]},e.id)),(0,n.FD)(n.FK,{children:[(0,n.Y)(y.r.Trigger,{value:"add",children:(0,n.Y)(s.rd.ArrowButton,{id:"paymentMethods",localizationKey:(0,m.G)(`${i}.billingPage.paymentMethodsSection.add`)})}),(0,n.Y)(y.r.Open,{value:"add",children:(0,n.Y)(y.r.Card,{children:(0,n.Y)(z,{onSuccess:p})})})]})]})})})}):null}),F=({paymentMethod:e,revalidate:t})=>{let{open:i}=(0,b.D5)(),a=(0,o.f0)(),l=(0,u.XX)(),s=(0,u.N7)(),p=(0,r.Wf)(),h=[{label:(0,m.G)(`${s}.billingPage.paymentMethodsSection.actionLabel__remove`),isDestructive:!0,onClick:()=>i(`remove-${e.id}`),isDisabled:!e.isRemovable}];return e.isDefault\|\|h.unshift({label:(0,m.G)(`${s}.billingPage.paymentMethodsSection.actionLabel__default`),isDestructive:!1,onClick:()=>{e.makeDefault({orgId:"organization"===l?p?.organization?.id:void 0}).then(t).catch(e=>{(0,c.H4)(e,[],a.setError)})},isDisabled:!1}),(0,n.Y)(d.o,{actions:h})}},7682:function(e,t,i){i.d(t,{T:()=>h});var n=i(4518),r=i(7288),a=i(6256),o=i(374),l=i(137),s=i(2861),d=i(8272),c=i(4964),p=i(9606);let h=()=>{let{data:e,isLoading:t,count:i}=(0,r.eT)(),l=(0,a.N7)();return(0,n.Y)(o.bQ,{page:1,onPageChange:e=>{},itemCount:i,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,s.G)(`${l}.billingPage.statementsSection.empty`),headers:[(0,s.G)(`${l}.billingPage.statementsSection.tableHeader__date`),(0,s.G)(`${l}.billingPage.statementsSection.tableHeader__amount`)],rows:e.map(e=>(0,n.Y)(u,{statement:e},e.id))})},u=({statement:e})=>{let{timestamp:t,id:i,totals:{grandTotal:r}}=e,{navigate:a}=(0,c.r)();return(0,n.FD)(o.J2,{onClick:()=>{a(`statement/${i}`)},children:[(0,n.FD)(d.Td,{sx:{cursor:"pointer"},children:[(0,n.Y)(d.EY,{variant:"subtitle",children:(0,l.Y)(t,"monthyear")}),(0,n.Y)(d.EY,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,p.W)(i)})]}),(0,n.Y)(d.Td,{sx:{cursor:"pointer"},children:(0,n.FD)(d.EY,{colorScheme:"secondary",children:[r.currencySymbol,r.amountFormatted]})})]})}},2916:function(e,t,i){i.d(t,{R:()=>$});var n=i(4518),r=i(5074),a=i(7477),o=i(4003),l=i(6256),s=i(7288),d=i(7697),c=i(8272),p=i(2861),h=i(7078),u=i(9679),g=i(8813),m=i(4430),y=i(4964),b=i(3679);function $({title:e,switchPlansLabel:t,newSubscriptionLabel:i,manageSubscriptionLabel:m}){let b=(0,l.N7)(),$=(0,l.XX)(),{subscriptionItems:f}=(0,s.Rs)(),v=(0,a.Fd)(e=>e({permission:"org:sys_billing:manage"}))\|\|"user"===$,{navigate:x}=(0,y.r)(),{commerceSettings:D}=(0,d.O)(),{openSubscriptionDetails:z}=(0,s.D)(),S=D.billing.user.hasPaidPlans&&"user"===$\|\|D.billing.organization.hasPaidPlans&&"organization"===$,M=(0,r.useMemo)(()=>f.some(e=>!e.plan.hasBaseFee&&"active"===e.status),[f]),F=v&&!M&&f.length>0,w=(0,r.useMemo)(()=>f.sort((e,t)=>"active"===e.status&&"active"!==t.status?-1:("active"===t.status&&e.status,1)),[f]);return(0,n.FD)(o.rd.Root,{id:"subscriptionsList",title:e,centered:!1,sx:e=>({borderTop:"none",paddingTop:e.space.$1}),children:[f.length>0&&(0,n.FD)(c.XI,{tableHeadVisuallyHidden:!0,children:[(0,n.Y)(c.d8,{children:(0,n.FD)(c.Tr,{children:[(0,n.Y)(c.Th,{localizationKey:(0,p.G)(`${b}.billingPage.subscriptionsListSection.tableHeader__plan`)}),(0,n.Y)(c.Th,{localizationKey:(0,p.G)(`${b}.billingPage.subscriptionsListSection.tableHeader__startDate`)})]})}),(0,n.Y)(c.NN,{children:w.map(e=>(0,n.Y)(Y,{subscription:e,length:w.length},e.id))})]}),(0,n.FD)(o.rd.ButtonGroup,{id:"subscriptionsList",children:[S?(0,n.Y)(o.rd.ArrowButton,{id:"subscriptionsList",textLocalizationKey:f.length>0?t:i,sx:[e=>({justifyContent:"start",height:e.sizes.$8,width:F?"unset":void 0})],leftIcon:f.length>0?h.A:u.A,rightIcon:null,leftIconSx:e=>({width:e.sizes.$4,height:e.sizes.$4}),onClick:()=>void x("plans")}):null,F?(0,n.Y)(o.rd.ArrowButton,{id:"subscriptionsList",textLocalizationKey:m,sx:[e=>({justifyContent:"start",height:e.sizes.$8,width:"unset"})],rightIcon:null,leftIcon:g.A,leftIconSx:e=>({width:e.sizes.$4,height:e.sizes.$4}),onClick:e=>z(e)}):null]})]})}function Y({subscription:e,length:t}){let i="annual"===e.planPeriod?e.plan.annualFee:e.plan.fee,{captionForSubscription:a}=(0,s.D)(),o=(0,r.useMemo)(()=>(0,s.Ij)(i.amountFormatted),[i.amountFormatted]);return(0,n.FD)(c.Tr,{children:[(0,n.Y)(c.Td,{children:(0,n.FD)(c.fv,{gap:1,children:[(0,n.FD)(c.so,{align:"center",gap:1,children:[(0,n.Y)(c.In,{icon:m.A,sx:e=>({width:e.sizes.$4,height:e.sizes.$4,opacity:e.opacity.$inactive})}),(0,n.Y)(c.EY,{variant:"subtitle",sx:e=>({marginRight:e.sizes.$1}),children:e.plan.name}),e.isFreeTrial\|\|t>1\|\|e.canceledAt?(0,n.Y)(b.V,{subscription:e.isFreeTrial?{status:"free_trial"}:e}):null]}),(!e.plan.isDefault\|\|"upcoming"===e.status)&&(0,n.Y)(c.EY,{variant:"caption",colorScheme:"secondary",localizationKey:a(e)})]})}),(0,n.Y)(c.Td,{sx:e=>({textAlign:"right"}),children:(0,n.FD)(c.EY,{variant:"subtitle",children:[i.currencySymbol,o,i.amount>0&&(0,n.Y)(c.L9,{sx:e=>({color:e.colors.$colorMutedForeground,textTransform:"lowercase",":before":{content:'"/"',marginInline:e.space.$1}}),localizationKey:"annual"===e.planPeriod?(0,p.G)("billing.year"):(0,p.G)("billing.month")})]})})]},e.id)}},3679:function(e,t,i){i.d(t,{V:()=>s});var n=i(4518),r=i(8272),a=i(2861);let o={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"},s=({subscription:e,elementDescriptor:t})=>(0,n.Y)(r.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,a.G)(o[e.status])})}}]);

package/dist/{970_ui_87d4d5_1.0.0-snapshot.v20251204143242.js → 970_ui_03abd0_1.0.0-snapshot.v20251208202852.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["970"],{1217:function(e,r,a){a.d(r,{n:()=>_});var i=a(4518),l=a(8909),n=a(5074),t=a(4607),o=a(164),c=a(7288),d=a(8511),s=a(6455),p=a(5424),g=a(7477),m=a(6256),u=a(8272),h=a(8920),b=a(2861),$=a(2405),x=a(9679),f=a(9406),z=a(1464),T=a(3679);function y({plans:e,planPeriod:r,setPlanPeriod:a,onSelect:l,isCompact:n,props:t}){return(0,i.Y)(f.S,{children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTable,sx:e=>({"--grid-min-size":n?"11.75rem":"20rem","--grid-max-columns":"infinity","--grid-gap":e.space.$4,"--max-column-width":"100% / var(--grid-max-columns, infinity) - var(--grid-gap)","--column-width":"max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))",display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(var(--column-width), 1fr))",gridTemplateRows:"auto 1fr",gap:`var(--grid-gap-y, var(--grid-gap, ${e.space.$4})) var(--grid-gap, ${e.space.$4})`,alignItems:"stretch",width:"100%",minWidth:"0"}),"data-variant":n?"compact":"default",children:e?.map(e=>(0,i.Y)(D,{plan:e,planPeriod:r,setPlanPeriod:a,onSelect:l,props:t,isCompact:n},e.id))})})}function D(e){let{plan:r,planPeriod:a,setPlanPeriod:t,onSelect:d,props:$,isCompact:x=!1}=e,f=(0,l.ho)(),{isSignedIn:y}=(0,l.wV)(),{mode:D="mounted",ctaPosition:C}=(0,o.T)(),w=(0,m.XX)(),S=(0,l.Wf)(),v=$.ctaPosition\|\|C\|\|"bottom",M=$.collapseFeatures\|\|!1,{id:P,slug:k}=r,I=(0,g.Fd)(e=>e({permission:"org:sys_billing:manage"})\|\|"user"===w),{buttonPropsForPlan:E,activeOrUpcomingSubscriptionBasedOnPlanPeriod:B}=(0,c.D)(),R=n.useMemo(()=>B(r,a),[r,a,B]),_=r.features.length>0,{shouldShowFooter:G,shouldShowFooterNotice:A}=(e=>{let[r,a]=(e=>{let{subscription:r,plan:a,planPeriod:i,for:l,hasActiveOrganization:n}=e,t=[!0,!0],o=[!0,!1],c=[!1,!1];if(!r)return"organization"!==l\|\|n?o:c;if("upcoming"===r.status)return t;if("active"===r.status){let e=!!r.canceledAt,l=i!==r.planPeriod&&!!a.annualMonthlyFee,n=a.freeTrialEnabled&&r.isFreeTrial;if(e\|\|l)return o;if(n)return t}return c})(e);return{shouldShowFooter:r,shouldShowFooterNotice:a}})({subscription:R,plan:r,planPeriod:a,for:$.for,hasActiveOrganization:!!S?.organization});return(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCard,elementId:h.$z.pricingTableCard.setId(k),sx:e=>({display:"grid",gap:0,gridTemplateRows:"subgrid",gridRow:"span 5",background:z.s.mutedBackground(e),borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha150,borderRadius:e.radii.$xl,overflow:"hidden",textAlign:"left"}),"data-variant":x?"compact":"default",children:[(0,i.Y)(Y,{plan:r,isCompact:x,planPeriod:a,setPlanPeriod:t,badge:R?(0,i.Y)(T.V,{subscription:R.isFreeTrial?{status:"free_trial"}:R}):void 0}),(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardBody,sx:{display:"grid",gridTemplateRows:"subgrid",gridRow:"span 2",gap:0},children:["bottom"===v&&!M\|\|"top"===v&&_?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardFeatures,sx:e=>({display:"flex",flexDirection:"column",flex:"1",padding:x?e.space.$3:e.space.$4,backgroundColor:_?e.colors.$colorBackground:"transparent",borderTopWidth:_?e.borderWidths.$normal:0,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150}),"data-variant":x?"compact":"default",children:(0,i.Y)(F,{plan:r,isCompact:x,showPlanDetails:e=>{let i=(0,p.J)(D,e);f.__internal_openPlanDetails({plan:r,initialPlanPeriod:a,portalRoot:i})}})}):null,G?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardFooter,sx:e=>({marginTop:"auto",padding:x?e.space.$3:e.space.$4,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150,order:"top"===v?-1:void 0}),children:A&&R?(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFooterNotice,variant:x?"buttonSmall":"buttonLarge",localizationKey:r.freeTrialEnabled&&R.isFreeTrial&&R.periodEnd?(0,b.G)("badge__trialEndsAt",{date:R.periodEnd}):(0,b.G)("badge__startsAt",{date:R.periodStart}),colorScheme:"secondary",sx:e=>({paddingBlock:e.space.$1x5,textAlign:"center"})}):(0,i.FD)(s.m_.Root,{children:[(0,i.Y)(s.m_.Trigger,{sx:{width:"100%"},children:(0,i.Y)(u.$n,{elementDescriptor:h.$z.pricingTableCardFooterButton,block:!0,textVariant:x?"buttonSmall":"buttonLarge",...E({plan:r,isCompact:x,selectedPlanPeriod:a}),onClick:e=>{d(r,e)}})}),y&&!I&&(0,i.Y)(s.m_.Content,{text:(0,b.G)("organizationProfile.plansPage.alerts.noPermissionsToManageBilling")})]})}):(0,i.Y)(u.az,{sx:e=>({backgroundColor:_?e.colors.$colorBackground:"transparent"})})]})]},P)}let Y=n.forwardRef((e,r)=>{let{plan:a,isCompact:l,planPeriod:t,setPlanPeriod:o,badge:s}=e,{name:p,annualMonthlyFee:g}=a,m=!!g,$=n.useMemo(()=>m&&"annual"===t?a.annualMonthlyFee:a.fee,[m,t,a.fee,a.annualMonthlyFee]),x=n.useMemo(()=>(0,c.Ij)($.amountFormatted),[$.amountFormatted]);return(0,i.FD)(u.az,{ref:r,elementDescriptor:h.$z.pricingTableCardHeader,sx:e=>({width:"100%",padding:l?e.space.$3:e.space.$4,display:"grid",gap:e.space.$1,gridRow:"span 3",gridTemplateRows:"subgrid"}),"data-variant":l?"compact":"default",children:[(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardTitleContainer,children:[(0,i.FD)(u.az,{sx:e=>({display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:e.space.$0x25}),children:[(0,i.Y)(u.DZ,{elementDescriptor:h.$z.pricingTableCardTitle,as:"h2",textVariant:l?"h3":"h2",children:p}),s&&s]}),!l&&a.description?(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardDescription,variant:"subtitle",colorScheme:"secondary",sx:{justifySelf:"flex-start"},children:a.description}):null]}),(0,i.FD)(u.so,{elementDescriptor:h.$z.pricingTableCardFeeContainer,"data-variant":l?"compact":"default",align:"center",wrap:"wrap",sx:e=>({columnGap:e.space.$1,marginTop:e.space.$1}),children:[(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableCardFee,variant:l?"h2":"h1",colorScheme:"body",children:[$.currencySymbol,x]}),a.isDefault?null:(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$0x25}}),localizationKey:(0,b.G)("billing.month")})]}),m&&o?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardPeriodToggle,sx:e=>({marginTop:e.space.$1}),children:(0,i.Y)(d.d,{isChecked:"annual"===t,onChange:e=>o(e?"annual":"month"),label:(0,b.G)("billing.billedAnnually")})}):(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeePeriodNotice,variant:"caption",colorScheme:"secondary",localizationKey:a.isDefault?(0,b.G)("billing.alwaysFree"):(0,b.G)("billing.billedMonthlyOnly"),sx:e=>({justifySelf:"flex-start",alignSelf:"center",marginTop:e.space.$1})})]})}),F=n.forwardRef((e,r)=>{let{plan:a,isCompact:l,showPlanDetails:n}=e,t=a.features.length,o=l?t>3:t>8;return(0,i.FD)(u.az,{ref:r,elementDescriptor:h.$z.pricingTableCardFeatures,sx:e=>({display:"grid",flex:1,rowGap:l?e.space.$2:e.space.$3}),children:[(0,i.Y)(u.fv,{elementDescriptor:h.$z.pricingTableCardFeaturesList,"data-variant":l?"compact":"default",as:"ul",role:"list",sx:e=>({flex:"1",rowGap:l?e.space.$2:e.space.$3,margin:0,padding:0}),children:a.features.slice(0,o?l?3:8:t).map(e=>(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardFeaturesListItem,elementId:h.$z.pricingTableCardFeaturesListItem.setId(e.slug),as:"li",sx:e=>({display:"flex",alignItems:"baseline",gap:e.space.$2,margin:0,padding:0}),children:[(0,i.Y)(u.In,{icon:$.A,colorScheme:"neutral",size:"sm","aria-hidden":!0,sx:e=>({transform:`translateY(${e.space.$0x25})`})}),(0,i.Y)(u.L9,{elementDescriptor:h.$z.pricingTableCardFeaturesListItemContent,children:(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeaturesListItemTitle,colorScheme:"body",sx:e=>({fontWeight:e.fontWeights.$normal}),children:e.name})})]},e.id))}),o&&(0,i.FD)(u.dF,{onClick:e=>n(e),variant:"link",sx:e=>({marginBlockStart:"auto",paddingBlock:e.space.$1,gap:e.space.$1}),children:[(0,i.Y)(u.In,{icon:x.A,colorScheme:"neutral",size:"md","aria-hidden":!0}),(0,i.Y)(u.L9,{localizationKey:(0,b.G)("billing.seeAllFeatures")})]})]})});var C=a(6195),w=a(6839),S=a(4620),v=a(6580),M=a(78),P=a(359),k=a(9068),I=a(7591);function E({plans:e=[],planPeriod:r,setPlanPeriod:a,onSelect:l,highlightedPlan:t}){let o=(0,P.j)(),{animations:d}=(0,v.K)().parsedLayout,s=!o&&!0===d,p=n.useId(),g=`${p}-segmented-control`,{buttonPropsForPlan:m}=(0,c.D)(),{t:x}=(0,M._)(),T=e=>({transition:s?`grid-template-rows ${e.transitionDuration.$slower} ${e.transitionTiming.$slowBezier}`:"none"}),y=e=>({background:z.s.mergedColorsBackground(S.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha25)}),D=n.useMemo(()=>`repeat(${e.length+1}, minmax(9.375rem,1fr))`,[e.length]),Y=n.useMemo(()=>e.some(e=>!!e.annualMonthlyFee),[e]),F=n.useMemo(()=>{let r=new Set;return e.forEach(({features:e})=>{e.forEach(({name:e})=>r.add(e))}),Array.from(r)},[e]);return e.length?(0,i.Y)(f.S,{children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrix,sx:e=>({position:"relative",minWidth:"100%",display:"grid",isolation:"isolate",backgroundColor:e.colors.$colorBackground,[I.g.md]:{overflowX:"auto"}}),children:(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixTable,role:"table",children:[(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRowGroup,h.$z.pricingTableMatrixRowGroupHeader],role:"rowgroup",sx:e=>({position:"sticky",top:0,backgroundColor:e.colors.$colorBackground,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,zIndex:1}),children:(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRow,h.$z.pricingTableMatrixRowHeader],role:"row",sx:{display:"grid",gridTemplateColumns:D},children:[(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixColumnHeader,role:"columnheader",sx:e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",justifyContent:"flex-end",rowGap:e.space.$3,paddingBlockEnd:e.space.$12,paddingInlineStart:e.space.$3}),children:Y?(0,i.FD)(i.FK,{children:[(0,i.Y)(u.EY,{id:g,colorScheme:"secondary",variant:"caption",localizationKey:(0,b.G)("billing.pricingTable.billingCycle"),children:"Billing cycle"}),(0,i.FD)(w.I.Root,{"aria-labelledby":g,value:r,onChange:e=>a(e),children:[(0,i.Y)(w.I.Button,{value:"month",text:(0,b.G)("billing.monthly")}),(0,i.Y)(w.I.Button,{value:"annual",text:(0,b.G)("billing.annually")})]})]}):null}),e.map(e=>{let a=e.slug===t,n=e.annualMonthlyFee&&"annual"===r?e.annualMonthlyFee:e.fee;return(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixColumnHeader,role:"columnheader",sx:[e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:1,borderStartStartRadius:e.radii.$xl,borderStartEndRadius:e.radii.$xl}),a&&y],"data-highlighted":a,children:[(0,i.FD)(u.az,{sx:e=>({width:"100%",padding:e.space.$4}),children:[e.avatarUrl\|\|a?(0,i.FD)(u.L9,{sx:e=>({width:"100%",display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBlockEnd:e.space.$3}),children:[e.avatarUrl?(0,i.Y)(C.e,{elementDescriptor:h.$z.pricingTableMatrixAvatar,size:e=>40,title:e.name,initials:e.name[0],rounded:!1,imageUrl:e.avatarUrl}):null,a?(0,i.Y)(u.Ex,{elementDescriptor:h.$z.pricingTableMatrixBadge,colorScheme:"secondary",localizationKey:(0,b.G)("billing.popular")}):null]}):null,(0,i.Y)(u.DZ,{elementDescriptor:h.$z.pricingTableMatrixPlanName,textVariant:"h3",children:e.name}),(0,i.Y)(u.so,{align:"center",wrap:"wrap",sx:e=>({marginTop:e.space.$2,columnGap:e.space.$1x5}),children:e.hasBaseFee?(0,i.FD)(i.FK,{children:[(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFee,variant:"h2",colorScheme:"body",children:[n.currencySymbol,n.amountFormatted]}),(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$1}}),localizationKey:(0,b.G)("billing.month")}),e.annualMonthlyFee?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNotice,sx:[e=>({width:"100%",display:"grid",gridTemplateRows:"annual"===r?"1fr":"0fr"}),T],inert:"annual"!==r?"true":void 0,children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNoticeInner,sx:{overflow:"hidden",minHeight:0},children:(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNoticeLabel,variant:"caption",colorScheme:"secondary",sx:e=>({width:"100%",display:"flex",alignItems:"center",columnGap:e.space.$1}),children:[(0,i.Y)(u.In,{icon:k.A,colorScheme:"neutral",size:"sm","aria-hidden":!0})," ",(0,i.Y)(u.L9,{localizationKey:(0,b.G)("billing.billedAnnually")})]})})}):null]}):(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFee,variant:"h2",localizationKey:(0,b.G)("billing.free"),colorScheme:"body"})})]}),e.isDefault?null:(0,i.Y)(u.az,{sx:e=>({width:"100%",marginBlockStart:"auto",marginBlockEnd:e.space.$8,paddingBlockStart:e.space.$2,paddingBlockEnd:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(u.$n,{block:!0,textVariant:"buttonSmall",size:"xs",onClick:r=>{l(e,r)},...m({plan:e,selectedPlanPeriod:r}),colorScheme:a?"primary":"secondary"})})]},e.slug)})]})}),(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRowGroup,h.$z.pricingTableMatrixRowGroupBody],role:"rowgroup",children:[F.map(r=>(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRow,h.$z.pricingTableMatrixRowBody],role:"row",sx:e=>({position:"relative",display:"grid",gridTemplateColumns:D,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,":after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",backgroundColor:e.colors.$neutralAlpha25,opacity:0},":hover:after":{opacity:1}}),children:[(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixCell,role:"cell",sx:e=>({padding:e.space.$3}),children:(0,i.Y)(u.EY,{colorScheme:"body",children:r})}),e.map(e=>{let a=e.slug===t,l=e.features.some(e=>e.name===r);return(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixCell,role:"cell",sx:[e=>({display:"grid",placeContent:"center",padding:e.space.$3}),a&&y],"data-highlighted":a,"data-checked":l,children:l&&(0,i.Y)(u.In,{icon:$.A,colorScheme:"neutral",size:"sm","aria-label":x((0,b.G)("billing.pricingTable.included"))})},e.slug)})]},r)),(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFooter,sx:{display:"grid",gridTemplateColumns:D},children:[(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixCell,h.$z.pricingTableMatrixCellFooter]}),e.map(e=>{let r=e.slug===t;return(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixCell,h.$z.pricingTableMatrixCellFooter],sx:[e=>({height:e.space.$10,borderEndStartRadius:e.radii.$xl,borderEndEndRadius:e.radii.$xl}),r&&y],"data-highlighted":r},e.slug)})]})]})]})})}):null}let B=e=>{let r=(0,l.ho)(),{mode:a="mounted",signInMode:d="redirect"}=(0,o.T)(),s="modal"===a,{data:p,subscriptionItems:g}=(0,c.Rs)(),{data:m}=(0,c.A$)(),{handleSelectPlan:u}=(0,c.D)(),h=(0,n.useMemo)(()=>r.isSignedIn?p?m:[]:m,[r.isSignedIn,m,p]),b=(0,n.useMemo)(()=>{if(s){let e=g?.find(e=>"upcoming"===e.status);if(e)return e.planPeriod;let r=g?.find(e=>!e.canceledAt&&"active"===e.status&&!e.plan.isDefault);if(r)return r.planPeriod}return"annual"},[s,g]),[$,x]=(0,n.useState)(b);(0,n.useEffect)(()=>{x(b)},[b]);let f=(i,l)=>{if(!r.isSignedIn)return"modal"===d?r.openSignIn():r.redirectToSignIn();u({mode:a,plan:i,planPeriod:$,event:l,appearance:e.checkoutProps?.appearance,newSubscriptionRedirectUrl:e.newSubscriptionRedirectUrl})};return(0,c.mu)(),(0,i.Y)(t.n.Root,{flow:"pricingTable",isFlowReady:r.isSignedIn?!!p:m.length>0,sx:{width:"100%"},children:"modal"!==a&&"matrix"===e.layout?(0,i.Y)(E,{plans:h,planPeriod:$,setPlanPeriod:x,onSelect:f,highlightedPlan:e.highlightPlan}):(0,i.Y)(y,{plans:h,planPeriod:$,setPlanPeriod:x,onSelect:f,isCompact:s,props:e})})},R=e=>(0,i.Y)("div",{children:(0,i.Y)(B,{...e})}),_=e=>{let{mode:r="mounted"}=(0,o.T)();return"modal"===r?(0,i.Y)(R,{...e}):(0,i.Y)(B,{...e})}},3679:function(e,r,a){a.d(r,{V:()=>c});var i=a(4518),l=a(8272),n=a(2861);let t={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},o={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:r})=>(0,i.Y)(l.Ex,{elementDescriptor:r,colorScheme:o[e.status],localizationKey:(0,n.G)(t[e.status])})},164:function(e,r,a){a.d(r,{T:()=>n,a:()=>l});var i=a(5074);let l=(0,i.createContext)(null),n=()=>{let e=(0,i.useContext)(l);if(!e\|\|"PricingTable"!==e.componentName)throw Error("Clerk: usePricingTableContext called outside PricingTable.");let{componentName:r,...a}=e;return{...a,componentName:r}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["970"],{1217:function(e,r,a){a.d(r,{n:()=>_});var i=a(4518),l=a(8909),n=a(5074),t=a(4607),o=a(164),c=a(7288),d=a(8511),s=a(6455),p=a(5424),g=a(7477),m=a(6256),u=a(8272),h=a(8920),b=a(2861),$=a(2405),x=a(9679),f=a(9406),z=a(1464),T=a(3679);function y({plans:e,planPeriod:r,setPlanPeriod:a,onSelect:l,isCompact:n,props:t}){return(0,i.Y)(f.S,{children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTable,sx:e=>({"--grid-min-size":n?"11.75rem":"20rem","--grid-max-columns":"infinity","--grid-gap":e.space.$4,"--max-column-width":"100% / var(--grid-max-columns, infinity) - var(--grid-gap)","--column-width":"max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))",display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(var(--column-width), 1fr))",gridTemplateRows:"auto 1fr",gap:`var(--grid-gap-y, var(--grid-gap, ${e.space.$4})) var(--grid-gap, ${e.space.$4})`,alignItems:"stretch",width:"100%",minWidth:"0"}),"data-variant":n?"compact":"default",children:e?.map(e=>(0,i.Y)(D,{plan:e,planPeriod:r,setPlanPeriod:a,onSelect:l,props:t,isCompact:n},e.id))})})}function D(e){let{plan:r,planPeriod:a,setPlanPeriod:t,onSelect:d,props:$,isCompact:x=!1}=e,f=(0,l.ho)(),{isSignedIn:y}=(0,l.wV)(),{mode:D="mounted",ctaPosition:C}=(0,o.T)(),w=(0,m.XX)(),S=(0,l.Wf)(),v=$.ctaPosition\|\|C\|\|"bottom",M=$.collapseFeatures\|\|!1,{id:P,slug:k}=r,I=(0,g.Fd)(e=>e({permission:"org:sys_billing:manage"})\|\|"user"===w),{buttonPropsForPlan:E,activeOrUpcomingSubscriptionBasedOnPlanPeriod:B}=(0,c.D)(),R=n.useMemo(()=>B(r,a),[r,a,B]),_=r.features.length>0,{shouldShowFooter:G,shouldShowFooterNotice:A}=(e=>{let[r,a]=(e=>{let{subscription:r,plan:a,planPeriod:i,for:l,hasActiveOrganization:n}=e,t=[!0,!0],o=[!0,!1],c=[!1,!1];if(!r)return"organization"!==l\|\|n?o:c;if("upcoming"===r.status)return t;if("active"===r.status){let e=!!r.canceledAt,l=i!==r.planPeriod&&!!a.annualMonthlyFee,n=a.freeTrialEnabled&&r.isFreeTrial;if(e\|\|l)return o;if(n)return t}return c})(e);return{shouldShowFooter:r,shouldShowFooterNotice:a}})({subscription:R,plan:r,planPeriod:a,for:$.for,hasActiveOrganization:!!S?.organization});return(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCard,elementId:h.$z.pricingTableCard.setId(k),sx:e=>({display:"grid",gap:0,gridTemplateRows:"subgrid",gridRow:"span 5",background:z.s.mutedBackground(e),borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha150,borderRadius:e.radii.$xl,overflow:"hidden",textAlign:"left"}),"data-variant":x?"compact":"default",children:[(0,i.Y)(Y,{plan:r,isCompact:x,planPeriod:a,setPlanPeriod:t,badge:R?(0,i.Y)(T.V,{subscription:R.isFreeTrial?{status:"free_trial"}:R}):void 0}),(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardBody,sx:{display:"grid",gridTemplateRows:"subgrid",gridRow:"span 2",gap:0},children:["bottom"===v&&!M\|\|"top"===v&&_?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardFeatures,sx:e=>({display:"flex",flexDirection:"column",flex:"1",padding:x?e.space.$3:e.space.$4,backgroundColor:_?e.colors.$colorBackground:"transparent",borderTopWidth:_?e.borderWidths.$normal:0,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150}),"data-variant":x?"compact":"default",children:(0,i.Y)(F,{plan:r,isCompact:x,showPlanDetails:e=>{let i=(0,p.J)(D,e);f.__internal_openPlanDetails({plan:r,initialPlanPeriod:a,portalRoot:i})}})}):null,G?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardFooter,sx:e=>({marginTop:"auto",padding:x?e.space.$3:e.space.$4,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150,order:"top"===v?-1:void 0}),children:A&&R?(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFooterNotice,variant:x?"buttonSmall":"buttonLarge",localizationKey:r.freeTrialEnabled&&R.isFreeTrial&&R.periodEnd?(0,b.G)("badge__trialEndsAt",{date:R.periodEnd}):(0,b.G)("badge__startsAt",{date:R.periodStart}),colorScheme:"secondary",sx:e=>({paddingBlock:e.space.$1x5,textAlign:"center"})}):(0,i.FD)(s.m_.Root,{children:[(0,i.Y)(s.m_.Trigger,{sx:{width:"100%"},children:(0,i.Y)(u.$n,{elementDescriptor:h.$z.pricingTableCardFooterButton,block:!0,textVariant:x?"buttonSmall":"buttonLarge",...E({plan:r,isCompact:x,selectedPlanPeriod:a}),onClick:e=>{d(r,e)}})}),y&&!I&&(0,i.Y)(s.m_.Content,{text:(0,b.G)("organizationProfile.plansPage.alerts.noPermissionsToManageBilling")})]})}):(0,i.Y)(u.az,{sx:e=>({backgroundColor:_?e.colors.$colorBackground:"transparent"})})]})]},P)}let Y=n.forwardRef((e,r)=>{let{plan:a,isCompact:l,planPeriod:t,setPlanPeriod:o,badge:s}=e,{name:p,annualMonthlyFee:g}=a,m=!!g,$=n.useMemo(()=>m&&"annual"===t?a.annualMonthlyFee:a.fee,[m,t,a.fee,a.annualMonthlyFee]),x=n.useMemo(()=>(0,c.Ij)($.amountFormatted),[$.amountFormatted]);return(0,i.FD)(u.az,{ref:r,elementDescriptor:h.$z.pricingTableCardHeader,sx:e=>({width:"100%",padding:l?e.space.$3:e.space.$4,display:"grid",gap:e.space.$1,gridRow:"span 3",gridTemplateRows:"subgrid"}),"data-variant":l?"compact":"default",children:[(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardTitleContainer,children:[(0,i.FD)(u.az,{sx:e=>({display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:e.space.$0x25}),children:[(0,i.Y)(u.DZ,{elementDescriptor:h.$z.pricingTableCardTitle,as:"h2",textVariant:l?"h3":"h2",children:p}),s&&s]}),!l&&a.description?(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardDescription,variant:"subtitle",colorScheme:"secondary",sx:{justifySelf:"flex-start"},children:a.description}):null]}),(0,i.FD)(u.so,{elementDescriptor:h.$z.pricingTableCardFeeContainer,"data-variant":l?"compact":"default",align:"center",wrap:"wrap",sx:e=>({columnGap:e.space.$1,marginTop:e.space.$1}),children:[(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableCardFee,variant:l?"h2":"h1",colorScheme:"body",children:[$.currencySymbol,x]}),a.isDefault?null:(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$0x25}}),localizationKey:(0,b.G)("billing.month")})]}),m&&o?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableCardPeriodToggle,sx:e=>({marginTop:e.space.$1}),children:(0,i.Y)(d.d,{isChecked:"annual"===t,onChange:e=>o(e?"annual":"month"),label:(0,b.G)("billing.billedAnnually")})}):(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeePeriodNotice,variant:"caption",colorScheme:"secondary",localizationKey:a.isDefault?(0,b.G)("billing.alwaysFree"):(0,b.G)("billing.billedMonthlyOnly"),sx:e=>({justifySelf:"flex-start",alignSelf:"center",marginTop:e.space.$1})})]})}),F=n.forwardRef((e,r)=>{let{plan:a,isCompact:l,showPlanDetails:n}=e,t=a.features.length,o=l?t>3:t>8;return(0,i.FD)(u.az,{ref:r,elementDescriptor:h.$z.pricingTableCardFeatures,sx:e=>({display:"grid",flex:1,rowGap:l?e.space.$2:e.space.$3}),children:[(0,i.Y)(u.fv,{elementDescriptor:h.$z.pricingTableCardFeaturesList,"data-variant":l?"compact":"default",as:"ul",role:"list",sx:e=>({flex:"1",rowGap:l?e.space.$2:e.space.$3,margin:0,padding:0}),children:a.features.slice(0,o?l?3:8:t).map(e=>(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableCardFeaturesListItem,elementId:h.$z.pricingTableCardFeaturesListItem.setId(e.slug),as:"li",sx:e=>({display:"flex",alignItems:"baseline",gap:e.space.$2,margin:0,padding:0}),children:[(0,i.Y)(u.In,{icon:$.A,colorScheme:"neutral",size:"sm","aria-hidden":!0,sx:e=>({transform:`translateY(${e.space.$0x25})`})}),(0,i.Y)(u.L9,{elementDescriptor:h.$z.pricingTableCardFeaturesListItemContent,children:(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableCardFeaturesListItemTitle,colorScheme:"body",sx:e=>({fontWeight:e.fontWeights.$normal}),children:e.name})})]},e.id))}),o&&(0,i.FD)(u.dF,{onClick:e=>n(e),variant:"link",sx:e=>({marginBlockStart:"auto",paddingBlock:e.space.$1,gap:e.space.$1}),children:[(0,i.Y)(u.In,{icon:x.A,colorScheme:"neutral",size:"md","aria-hidden":!0}),(0,i.Y)(u.L9,{localizationKey:(0,b.G)("billing.seeAllFeatures")})]})]})});var C=a(6195),w=a(6839),S=a(4620),v=a(6580),M=a(78),P=a(359),k=a(9068),I=a(7591);function E({plans:e=[],planPeriod:r,setPlanPeriod:a,onSelect:l,highlightedPlan:t}){let o=(0,P.j)(),{animations:d}=(0,v.K)().parsedOptions,s=!o&&!0===d,p=n.useId(),g=`${p}-segmented-control`,{buttonPropsForPlan:m}=(0,c.D)(),{t:x}=(0,M._)(),T=e=>({transition:s?`grid-template-rows ${e.transitionDuration.$slower} ${e.transitionTiming.$slowBezier}`:"none"}),y=e=>({background:z.s.mergedColorsBackground(S.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha25)}),D=n.useMemo(()=>`repeat(${e.length+1}, minmax(9.375rem,1fr))`,[e.length]),Y=n.useMemo(()=>e.some(e=>!!e.annualMonthlyFee),[e]),F=n.useMemo(()=>{let r=new Set;return e.forEach(({features:e})=>{e.forEach(({name:e})=>r.add(e))}),Array.from(r)},[e]);return e.length?(0,i.Y)(f.S,{children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrix,sx:e=>({position:"relative",minWidth:"100%",display:"grid",isolation:"isolate",backgroundColor:e.colors.$colorBackground,[I.g.md]:{overflowX:"auto"}}),children:(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixTable,role:"table",children:[(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRowGroup,h.$z.pricingTableMatrixRowGroupHeader],role:"rowgroup",sx:e=>({position:"sticky",top:0,backgroundColor:e.colors.$colorBackground,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,zIndex:1}),children:(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRow,h.$z.pricingTableMatrixRowHeader],role:"row",sx:{display:"grid",gridTemplateColumns:D},children:[(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixColumnHeader,role:"columnheader",sx:e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",justifyContent:"flex-end",rowGap:e.space.$3,paddingBlockEnd:e.space.$12,paddingInlineStart:e.space.$3}),children:Y?(0,i.FD)(i.FK,{children:[(0,i.Y)(u.EY,{id:g,colorScheme:"secondary",variant:"caption",localizationKey:(0,b.G)("billing.pricingTable.billingCycle"),children:"Billing cycle"}),(0,i.FD)(w.I.Root,{"aria-labelledby":g,value:r,onChange:e=>a(e),children:[(0,i.Y)(w.I.Button,{value:"month",text:(0,b.G)("billing.monthly")}),(0,i.Y)(w.I.Button,{value:"annual",text:(0,b.G)("billing.annually")})]})]}):null}),e.map(e=>{let a=e.slug===t,n=e.annualMonthlyFee&&"annual"===r?e.annualMonthlyFee:e.fee;return(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixColumnHeader,role:"columnheader",sx:[e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:1,borderStartStartRadius:e.radii.$xl,borderStartEndRadius:e.radii.$xl}),a&&y],"data-highlighted":a,children:[(0,i.FD)(u.az,{sx:e=>({width:"100%",padding:e.space.$4}),children:[e.avatarUrl\|\|a?(0,i.FD)(u.L9,{sx:e=>({width:"100%",display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBlockEnd:e.space.$3}),children:[e.avatarUrl?(0,i.Y)(C.e,{elementDescriptor:h.$z.pricingTableMatrixAvatar,size:e=>40,title:e.name,initials:e.name[0],rounded:!1,imageUrl:e.avatarUrl}):null,a?(0,i.Y)(u.Ex,{elementDescriptor:h.$z.pricingTableMatrixBadge,colorScheme:"secondary",localizationKey:(0,b.G)("billing.popular")}):null]}):null,(0,i.Y)(u.DZ,{elementDescriptor:h.$z.pricingTableMatrixPlanName,textVariant:"h3",children:e.name}),(0,i.Y)(u.so,{align:"center",wrap:"wrap",sx:e=>({marginTop:e.space.$2,columnGap:e.space.$1x5}),children:e.hasBaseFee?(0,i.FD)(i.FK,{children:[(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFee,variant:"h2",colorScheme:"body",children:[n.currencySymbol,n.amountFormatted]}),(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$1}}),localizationKey:(0,b.G)("billing.month")}),e.annualMonthlyFee?(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNotice,sx:[e=>({width:"100%",display:"grid",gridTemplateRows:"annual"===r?"1fr":"0fr"}),T],inert:"annual"!==r?"true":void 0,children:(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNoticeInner,sx:{overflow:"hidden",minHeight:0},children:(0,i.FD)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFeePeriodNoticeLabel,variant:"caption",colorScheme:"secondary",sx:e=>({width:"100%",display:"flex",alignItems:"center",columnGap:e.space.$1}),children:[(0,i.Y)(u.In,{icon:k.A,colorScheme:"neutral",size:"sm","aria-hidden":!0})," ",(0,i.Y)(u.L9,{localizationKey:(0,b.G)("billing.billedAnnually")})]})})}):null]}):(0,i.Y)(u.EY,{elementDescriptor:h.$z.pricingTableMatrixFee,variant:"h2",localizationKey:(0,b.G)("billing.free"),colorScheme:"body"})})]}),e.isDefault?null:(0,i.Y)(u.az,{sx:e=>({width:"100%",marginBlockStart:"auto",marginBlockEnd:e.space.$8,paddingBlockStart:e.space.$2,paddingBlockEnd:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(u.$n,{block:!0,textVariant:"buttonSmall",size:"xs",onClick:r=>{l(e,r)},...m({plan:e,selectedPlanPeriod:r}),colorScheme:a?"primary":"secondary"})})]},e.slug)})]})}),(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRowGroup,h.$z.pricingTableMatrixRowGroupBody],role:"rowgroup",children:[F.map(r=>(0,i.FD)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixRow,h.$z.pricingTableMatrixRowBody],role:"row",sx:e=>({position:"relative",display:"grid",gridTemplateColumns:D,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,":after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",backgroundColor:e.colors.$neutralAlpha25,opacity:0},":hover:after":{opacity:1}}),children:[(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixCell,role:"cell",sx:e=>({padding:e.space.$3}),children:(0,i.Y)(u.EY,{colorScheme:"body",children:r})}),e.map(e=>{let a=e.slug===t,l=e.features.some(e=>e.name===r);return(0,i.Y)(u.az,{elementDescriptor:h.$z.pricingTableMatrixCell,role:"cell",sx:[e=>({display:"grid",placeContent:"center",padding:e.space.$3}),a&&y],"data-highlighted":a,"data-checked":l,children:l&&(0,i.Y)(u.In,{icon:$.A,colorScheme:"neutral",size:"sm","aria-label":x((0,b.G)("billing.pricingTable.included"))})},e.slug)})]},r)),(0,i.FD)(u.az,{elementDescriptor:h.$z.pricingTableMatrixFooter,sx:{display:"grid",gridTemplateColumns:D},children:[(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixCell,h.$z.pricingTableMatrixCellFooter]}),e.map(e=>{let r=e.slug===t;return(0,i.Y)(u.az,{elementDescriptor:[h.$z.pricingTableMatrixCell,h.$z.pricingTableMatrixCellFooter],sx:[e=>({height:e.space.$10,borderEndStartRadius:e.radii.$xl,borderEndEndRadius:e.radii.$xl}),r&&y],"data-highlighted":r},e.slug)})]})]})]})})}):null}let B=e=>{let r=(0,l.ho)(),{mode:a="mounted",signInMode:d="redirect"}=(0,o.T)(),s="modal"===a,{data:p,subscriptionItems:g}=(0,c.Rs)(),{data:m}=(0,c.A$)(),{handleSelectPlan:u}=(0,c.D)(),h=(0,n.useMemo)(()=>r.isSignedIn?p?m:[]:m,[r.isSignedIn,m,p]),b=(0,n.useMemo)(()=>{if(s){let e=g?.find(e=>"upcoming"===e.status);if(e)return e.planPeriod;let r=g?.find(e=>!e.canceledAt&&"active"===e.status&&!e.plan.isDefault);if(r)return r.planPeriod}return"annual"},[s,g]),[$,x]=(0,n.useState)(b);(0,n.useEffect)(()=>{x(b)},[b]);let f=(i,l)=>{if(!r.isSignedIn)return"modal"===d?r.openSignIn():r.redirectToSignIn();u({mode:a,plan:i,planPeriod:$,event:l,appearance:e.checkoutProps?.appearance,newSubscriptionRedirectUrl:e.newSubscriptionRedirectUrl})};return(0,c.mu)(),(0,i.Y)(t.n.Root,{flow:"pricingTable",isFlowReady:r.isSignedIn?!!p:m.length>0,sx:{width:"100%"},children:"modal"!==a&&"matrix"===e.layout?(0,i.Y)(E,{plans:h,planPeriod:$,setPlanPeriod:x,onSelect:f,highlightedPlan:e.highlightPlan}):(0,i.Y)(y,{plans:h,planPeriod:$,setPlanPeriod:x,onSelect:f,isCompact:s,props:e})})},R=e=>(0,i.Y)("div",{children:(0,i.Y)(B,{...e})}),_=e=>{let{mode:r="mounted"}=(0,o.T)();return"modal"===r?(0,i.Y)(R,{...e}):(0,i.Y)(B,{...e})}},3679:function(e,r,a){a.d(r,{V:()=>c});var i=a(4518),l=a(8272),n=a(2861);let t={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},o={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:r})=>(0,i.Y)(l.Ex,{elementDescriptor:r,colorScheme:o[e.status],localizationKey:(0,n.G)(t[e.status])})},164:function(e,r,a){a.d(r,{T:()=>n,a:()=>l});var i=a(5074);let l=(0,i.createContext)(null),n=()=>{let e=(0,i.useContext)(l);if(!e\|\|"PricingTable"!==e.componentName)throw Error("Clerk: usePricingTableContext called outside PricingTable.");let{componentName:r,...a}=e;return{...a,componentName:r}}}}]);

package/dist/ClerkUi.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { mountComponentRenderer } from "./Components.js";
 //#region src/ClerkUi.ts
 var ClerkUi = class {
-	static version = "1.0.0-snapshot.v20251204143242";
-	version = "1.0.0-snapshot.v20251204143242";
+	static version = "1.0.0-snapshot.v20251208202852";
+	version = "1.0.0-snapshot.v20251208202852";
 	#componentRenderer;
 	constructor(getClerk, getEnvironment, options, moduleManager) {
 		this.#componentRenderer = mountComponentRenderer(getClerk, getEnvironment, options, moduleManager);

package/dist/Components.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Components.d.ts","names":[],"sources":["../src/Components.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;~~AAqEgC~~,KAFpB,iBAAA,GAEoB;EAAb,cAAA,EAAA,CAAA,MAAA,EAAA;IACT,aAAA,EADS,YACT,CADsB,iBACtB,CAAA,eAAA,CAAA,CAAA;IACA,IAAA,EADA,kBACA;IACE,IAAA,EADF,cACE;IAEyB,KAAA,CAAA,EAFzB,uBAEyB;EAEpB,CAAA,EAAA,GAAA,IAAA;EACH,gBAAA,EAAA,CAAA,MAAA,EAAA;IACH,IAAA,EAJ0B,cAI1B;EAgBA,CAAA,EAAA,GAAA,IAAA;EACA,WAAA,EAAA,CAAA,MAAA,EAAA;IACH,UAAA,CAAA,EApBS,UAoBT,GAAA,SAAA;IACA,OAAA,CAAA,EApBM,YAoBN,GAAA,SAAA;IACE,IAAA,CAAA,EApBC,cAoBD;IACA,KAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,SAAA,EAAA,CAAA,UAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,CAAA,CAAA,KAAA,EAPD,CAOC,EAAA,KAAA,EAND,CAMC,SAAA,QAAA,GALJ,WAKI,GAJJ,CAII,SAAA,QAAA,GAHF,WAGE,GAFF,CAEE,SAAA,kBAAA,GADA,gCACA,GAAA,CAAA,SAAA,UAAA,GACE,aADF,GAEE,CAFF,SAAA,2BAAA,GAGI,yCAHJ,GAII,gBAJJ,EAAA,GAAA,IAAA;EACE,UAAA,EAAA,CAAA,KAAA,EAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,EAAA,OAEE,CAFF,EAAA;IACA,MAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,UAAA,EAAA,CAAA,UAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,CAAA,CAAA,MAAA,EAmBJ,CAnBI,EAAA,KAAA,EAoBL,CApBK,SAAA,UAAA,GAqBR,wBArBQ,GAsBR,CAtBQ,SAAA,aAAA,GAuBN,2BAvBM,GAwBN,CAxBM,SAAA,qBAAA,GAyBJ,mCAzBI,GAAA,KAAA,EAAA,GAAA,IAAA;EAmBJ,WAAA,EAAA,CAAA,MAAA,EAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,EAAA,OAEJ,CAFI,EAAA;IACD,MAAA,CAAA,EAAA,OAAA;EACH,CAAA,EAAA,GAAA,IAAA;EACA,QAAA,EAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,GAAA,IAAA;EACE,qBAAA,EAAA,GAAA,GAAA,IAAA;CACA;AACE,cAmEC,sBAnED,EAAA,CAAA,QAAA,EAAA,GAAA,GAoEM,KApEN,EAAA,cAAA,EAAA,GAAA,GAqEY,mBArEZ,GAAA,IAAA,GAAA,SAAA,EAAA,QAAA,EAsEA,YAtEA,EAAA,aAAA,EAuEK,aAvEL,EAAA,GAAA;EAAmC,aAAA,EAAA,CAAA,IAoE7B,CApE6B,EAAA;IAmElC,WAAA,EAyBmC,kBA2B/C;EAnDiB,CAAA,EAAA,GAwBkD,OAxBlD,CAwBkD,iBAxBlD,CAAA;CACM;AACZ,KAmDA,sBAAA,GAnDA,OAmDgC,sBAnDhC"}
1	+ {"version":3,"file":"Components.d.ts","names":[],"sources":["../src/Components.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAoEgC,KAFpB,iBAAA,GAEoB;EAAb,cAAA,EAAA,CAAA,MAAA,EAAA;IACT,aAAA,EADS,YACT,CADsB,iBACtB,CAAA,eAAA,CAAA,CAAA;IACA,IAAA,EADA,kBACA;IACE,IAAA,EADF,cACE;IAEyB,KAAA,CAAA,EAFzB,uBAEyB;EAEpB,CAAA,EAAA,GAAA,IAAA;EACH,gBAAA,EAAA,CAAA,MAAA,EAAA;IACH,IAAA,EAJ0B,cAI1B;EAgBA,CAAA,EAAA,GAAA,IAAA;EACA,WAAA,EAAA,CAAA,MAAA,EAAA;IACH,UAAA,CAAA,EApBS,UAoBT,GAAA,SAAA;IACA,OAAA,CAAA,EApBM,YAoBN,GAAA,SAAA;IACE,IAAA,CAAA,EApBC,cAoBD;IACA,KAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,SAAA,EAAA,CAAA,UAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,CAAA,CAAA,KAAA,EAPD,CAOC,EAAA,KAAA,EAND,CAMC,SAAA,QAAA,GALJ,WAKI,GAJJ,CAII,SAAA,QAAA,GAHF,WAGE,GAFF,CAEE,SAAA,kBAAA,GADA,gCACA,GAAA,CAAA,SAAA,UAAA,GACE,aADF,GAEE,CAFF,SAAA,2BAAA,GAGI,yCAHJ,GAII,gBAJJ,EAAA,GAAA,IAAA;EACE,UAAA,EAAA,CAAA,KAAA,EAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,EAAA,OAEE,CAFF,EAAA;IACA,MAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,UAAA,EAAA,CAAA,UAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,CAAA,CAAA,MAAA,EAmBJ,CAnBI,EAAA,KAAA,EAoBL,CApBK,SAAA,UAAA,GAqBR,wBArBQ,GAsBR,CAtBQ,SAAA,aAAA,GAuBN,2BAvBM,GAwBN,CAxBM,SAAA,qBAAA,GAyBJ,mCAzBI,GAAA,KAAA,EAAA,GAAA,IAAA;EAmBJ,WAAA,EAAA,CAAA,MAAA,EAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,EAAA,OAEJ,CAFI,EAAA;IACD,MAAA,CAAA,EAAA,OAAA;EACH,CAAA,EAAA,GAAA,IAAA;EACA,QAAA,EAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,GAAA,IAAA;EACE,qBAAA,EAAA,GAAA,GAAA,IAAA;CACA;AACE,cAmEC,sBAnED,EAAA,CAAA,QAAA,EAAA,GAAA,GAoEM,KApEN,EAAA,cAAA,EAAA,GAAA,GAqEY,mBArEZ,GAAA,IAAA,GAAA,SAAA,EAAA,QAAA,EAsEA,YAtEA,EAAA,aAAA,EAuEK,aAvEL,EAAA,GAAA;EAAmC,aAAA,EAAA,CAAA,IAoE7B,CApE6B,EAAA;IAmElC,WAAA,EAyBmC,kBA2B/C;EAnDiB,CAAA,EAAA,GAwBkD,OAxBlD,CAwBkD,iBAxBlD,CAAA;CACM;AACZ,KAmDA,sBAAA,GAnDA,OAmDgC,sBAnDhC"}

package/dist/Components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Components.js","names":["componentsControlsResolver: Promise<ComponentControls> \| undefined","props"],"sources":["../src/Components.tsx"],"sourcesContent":["import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors';\nimport type { ModuleManager } from '@clerk/shared/moduleManager';\nimport type {\n __internal_CheckoutProps,\n __internal_EnableOrganizationsPromptProps,\n __internal_PlanDetailsProps,\n __internal_SubscriptionDetailsProps,\n __internal_UserVerificationProps,\n Clerk,\n ClerkOptions,\n CreateOrganizationProps,\n EnvironmentResource,\n GoogleOneTapProps,\n OrganizationProfileProps,\n SignInProps,\n SignUpProps,\n UserProfileProps,\n WaitlistProps,\n} from '@clerk/shared/types';\n\nimport type { Appearance } from './internal/appearance';\nimport { createDeferredPromise } from '@clerk/shared/utils';\nimport React, { Suspense } from 'react';\n\nimport type { AppearanceCascade } from './customizables/parseAppearance';\n// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size\nimport { useClerkModalStateParams } from './hooks/useClerkModalStateParams';\nimport type { ClerkComponentName } from './lazyModules/components';\nimport {\n BlankCaptchaModal,\n CreateOrganizationModal,\n EnableOrganizationsPrompt,\n ImpersonationFab,\n KeylessPrompt,\n OrganizationProfileModal,\n preloadComponent,\n SignInModal,\n SignUpModal,\n UserProfileModal,\n UserVerificationModal,\n WaitlistModal,\n} from './lazyModules/components';\nimport { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';\nimport {\n LazyComponentRenderer,\n LazyEnableOrganizationsPromptProvider,\n LazyImpersonationFabProvider,\n LazyModalRenderer,\n LazyOneTapRenderer,\n LazyProviders,\n OrganizationSwitcherPrefetch,\n} from './lazyModules/providers';\nimport type { AvailableComponentProps } from './types';\nimport { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl';\nimport { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions';\nimport { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance';\n\n// Re-export for ClerkUi\nexport { extractCssLayerNameFromAppearance };\n\n/*\n Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle.\n /\nconst useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport const ROOT_ELEMENT_ID = 'clerk-components';\n\nexport type ComponentControls = {\n mountComponent: (params: {\n appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n name: ClerkComponentName;\n node: HTMLDivElement;\n props?: AvailableComponentProps;\n }) => void;\n unmountComponent: (params: { node: HTMLDivElement }) => void;\n updateProps: (params: {\n appearance?: Appearance \| undefined;\n options?: ClerkOptions \| undefined;\n node?: HTMLDivElement;\n props?: unknown;\n }) => void;\n openModal: <\n T extends\n \| 'googleOneTap'\n \| 'signIn'\n \| 'signUp'\n \| 'userProfile'\n \| 'organizationProfile'\n \| 'createOrganization'\n \| 'userVerification'\n \| 'waitlist'\n \| 'blankCaptcha'\n \| 'enableOrganizationsPrompt',\n >(\n modal: T,\n props: T extends 'signIn'\n ? SignInProps\n : T extends 'signUp'\n ? SignUpProps\n : T extends 'userVerification'\n ? __internal_UserVerificationProps\n : T extends 'waitlist'\n ? WaitlistProps\n : T extends 'enableOrganizationsPrompt'\n ? __internal_EnableOrganizationsPromptProps\n : UserProfileProps,\n ) => void;\n closeModal: (\n modal:\n \| 'googleOneTap'\n \| 'signIn'\n \| 'signUp'\n \| 'userProfile'\n \| 'organizationProfile'\n \| 'createOrganization'\n \| 'userVerification'\n \| 'waitlist'\n \| 'blankCaptcha'\n \| 'enableOrganizationsPrompt',\n options?: {\n notify?: boolean;\n },\n ) => void;\n openDrawer: <T extends 'checkout' \| 'planDetails' \| 'subscriptionDetails'>(\n drawer: T,\n props: T extends 'checkout'\n ? __internal_CheckoutProps\n : T extends 'planDetails'\n ? __internal_PlanDetailsProps\n : T extends 'subscriptionDetails'\n ? __internal_SubscriptionDetailsProps\n : never,\n ) => void;\n closeDrawer: (\n drawer: 'checkout' \| 'planDetails' \| 'subscriptionDetails',\n options?: {\n notify?: boolean;\n },\n ) => void;\n prefetch: (component: 'organizationSwitcher') => void;\n // Special case, as the impersonation fab mounts automatically\n mountImpersonationFab: () => void;\n};\n\ninterface HtmlNodeOptions {\n key: string;\n name: ClerkComponentName;\n appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n props?: AvailableComponentProps;\n}\n\ninterface ComponentsProps {\n getClerk: () => Clerk;\n getEnvironment: () => EnvironmentResource \| null \| undefined;\n options: ClerkOptions;\n onComponentsMounted: () => void;\n moduleManager: ModuleManager;\n}\n\ninterface ComponentsState {\n appearance: Appearance \| undefined;\n options: ClerkOptions \| undefined;\n googleOneTapModal: null \| GoogleOneTapProps;\n signInModal: null \| SignInProps;\n signUpModal: null \| SignUpProps;\n userProfileModal: null \| UserProfileProps;\n userVerificationModal: null \| __internal_UserVerificationProps;\n organizationProfileModal: null \| OrganizationProfileProps;\n createOrganizationModal: null \| CreateOrganizationProps;\n enableOrganizationsPromptModal: null \| __internal_EnableOrganizationsPromptProps;\n blankCaptchaModal: null;\n organizationSwitcherPrefetch: boolean;\n waitlistModal: null \| WaitlistProps;\n checkoutDrawer: {\n open: false;\n props: null \| __internal_CheckoutProps;\n };\n planDetailsDrawer: {\n open: false;\n props: null \| __internal_PlanDetailsProps;\n };\n subscriptionDetailsDrawer: {\n open: false;\n props: null \| __internal_SubscriptionDetailsProps;\n };\n nodes: Map<HTMLDivElement, HtmlNodeOptions>;\n impersonationFab: boolean;\n}\n\nlet portalCt = 0;\n\nfunction assertDOMElement(element: HTMLElement): asserts element {\n if (!element) {\n clerkUIErrorDOMElementNotFound();\n }\n}\n\nexport const mountComponentRenderer = (\n getClerk: () => Clerk,\n getEnvironment: () => EnvironmentResource \| null \| undefined,\n _options: ClerkOptions,\n moduleManager: ModuleManager,\n) => {\n const options = { ..._options };\n // Extract cssLayerName from theme if present and move it to appearance level\n if (options.appearance) {\n options.appearance = extractCssLayerNameFromAppearance(options.appearance);\n }\n\n // TODO: Init of components should start\n // before /env and /client requests\n let clerkRoot = document.getElementById(ROOT_ELEMENT_ID);\n\n if (!clerkRoot) {\n clerkRoot = document.createElement('div');\n clerkRoot.setAttribute('id', 'clerk-components');\n document.body.appendChild(clerkRoot);\n }\n\n let componentsControlsResolver: Promise<ComponentControls> \| undefined;\n\n return {\n ensureMounted: async (opts?: { preloadHint: ClerkComponentName }) => {\n const { preloadHint } = opts \|\| {};\n // This mechanism ensures that mountComponentControls will only be called once\n // and any calls to .mount before mountComponentControls resolves will fire in order.\n // Otherwise, we risk having components rendered multiple times, or having\n // .unmountComponent incorrectly called before the component is rendered\n if (!componentsControlsResolver) {\n const deferredPromise = createDeferredPromise();\n if (preloadHint) {\n void preloadComponent(preloadHint);\n }\n componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n createRoot(clerkRoot).render(\n <Components\n getClerk={getClerk}\n getEnvironment={getEnvironment}\n options={options}\n onComponentsMounted={deferredPromise.resolve}\n moduleManager={moduleManager}\n />,\n );\n return deferredPromise.promise.then(() => componentsControls);\n });\n }\n return componentsControlsResolver.then(controls => controls);\n },\n };\n};\n\nexport type MountComponentRenderer = typeof mountComponentRenderer;\n\nconst componentsControls = {} as ComponentControls;\n\nconst componentNodes = Object.freeze({\n SignUp: 'signUpModal',\n SignIn: 'signInModal',\n UserProfile: 'userProfileModal',\n OrganizationProfile: 'organizationProfileModal',\n CreateOrganization: 'createOrganizationModal',\n Waitlist: 'waitlistModal',\n}) as any;\n\nconst Components = (props: ComponentsProps) => {\n const [state, setState] = React.useState<ComponentsState>({\n appearance: props.options.appearance,\n options: props.options,\n googleOneTapModal: null,\n signInModal: null,\n signUpModal: null,\n userProfileModal: null,\n userVerificationModal: null,\n organizationProfileModal: null,\n createOrganizationModal: null,\n enableOrganizationsPromptModal: null,\n organizationSwitcherPrefetch: false,\n waitlistModal: null,\n blankCaptchaModal: null,\n checkoutDrawer: {\n open: false,\n props: null,\n },\n planDetailsDrawer: {\n open: false,\n props: null,\n },\n subscriptionDetailsDrawer: {\n open: false,\n props: null,\n },\n nodes: new Map(),\n impersonationFab: false,\n });\n\n const {\n googleOneTapModal,\n signInModal,\n signUpModal,\n userProfileModal,\n userVerificationModal,\n organizationProfileModal,\n createOrganizationModal,\n waitlistModal,\n blankCaptchaModal,\n checkoutDrawer,\n planDetailsDrawer,\n subscriptionDetailsDrawer,\n nodes,\n } = state;\n\n const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n\n useSafeLayoutEffect(() => {\n if (decodedRedirectParams) {\n setState(s => ({\n ...s,\n [componentNodes[decodedRedirectParams.componentName]]: true,\n }));\n }\n\n componentsControls.mountComponent = params => {\n const { node, name, props, appearanceKey } = params;\n assertDOMElement(node);\n setState(s => {\n s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n return { ...s, nodes };\n });\n };\n\n componentsControls.unmountComponent = params => {\n const { node } = params;\n setState(s => {\n s.nodes.delete(node);\n return { ...s, nodes };\n });\n };\n\n componentsControls.updateProps = ({ node, props, ...restProps }) => {\n if (node && props && typeof props === 'object') {\n const nodeOptions = state.nodes.get(node);\n if (nodeOptions) {\n nodeOptions.props = { ...props };\n setState(s => ({ ...s }));\n return;\n }\n }\n\n setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));\n };\n\n componentsControls.closeModal = (name, options = {}) => {\n const { notify = true } = options;\n clearUrlStateParam();\n setState(s => {\n function handleCloseModalForExperimentalUserVerification() {\n const modal = s[`${name}Modal`];\n if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {\n // TypeScript doesn't narrow properly with template literal access and 'in' operator\n (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();\n }\n }\n\n /\n We need this in order for `Clerk.__experimental_closeUserVerification()`\n * to properly trigger the previously defined `afterVerificationCancelled` callback\n /\n handleCloseModalForExperimentalUserVerification();\n\n return { ...s, [`${name}Modal`]: null };\n });\n };\n\n componentsControls.openModal = (name, props) => {\n // Prevent opening enableOrganizations prompt if it's already open\n // It should open the first call and ignore the subsequent calls\n if (name === 'enableOrganizationsPrompt') {\n setState(prev => {\n // Modal is already open, don't update state\n if (prev.enableOrganizationsPromptModal) {\n return prev;\n }\n\n return { ...prev, [`${name}Modal`]: props };\n });\n return;\n }\n\n function handleCloseModalForExperimentalUserVerification() {\n if (!('afterVerificationCancelled' in props)) {\n return;\n }\n\n setState(s => ({\n ...s,\n [`${name}Modal`]: {\n ...props,\n /\n When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback\n /\n afterVerification() {\n props.afterVerification?.();\n componentsControls.closeModal(name, { notify: false });\n },\n },\n }));\n }\n\n if ('afterVerificationCancelled' in props) {\n handleCloseModalForExperimentalUserVerification();\n } else {\n setState(s => ({ ...s, [`${name}Modal`]: props }));\n }\n };\n\n componentsControls.mountImpersonationFab = () => {\n setState(s => ({ ...s, impersonationFab: true }));\n };\n\n componentsControls.openDrawer = (name, props) => {\n setState(s => ({\n ...s,\n [`${name}Drawer`]: {\n open: true,\n props,\n },\n }));\n };\n\n componentsControls.closeDrawer = name => {\n setState(s => {\n const currentItem = s[`${name}Drawer`];\n // @ts-expect-error `__internal_PlanDetailsProps` does not accept `onClose`\n currentItem?.props?.onClose?.();\n return {\n ...s,\n [`${name}Drawer`]: {\n ...s[`${name}Drawer`],\n open: false,\n },\n };\n });\n };\n\n componentsControls.prefetch = component => {\n setState(s => ({ ...s, [`${component}Prefetch`]: true }));\n };\n\n props.onComponentsMounted();\n }, []);\n\n const mountedOneTapModal = (\n <LazyOneTapRenderer\n componentProps={googleOneTapModal}\n globalAppearance={state.appearance}\n componentAppearance={googleOneTapModal?.appearance}\n startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}\n />\n );\n\n const mountedSignInModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'signIn'}\n componentAppearance={signInModal?.appearance}\n flowName={'signIn'}\n onClose={() => componentsControls.closeModal('signIn')}\n onExternalNavigate={() => componentsControls.closeModal('signIn')}\n startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}\n componentName={'SignInModal'}\n >\n <SignInModal {...signInModal} />\n <SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />\n <WaitlistModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedSignUpModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'signUp'}\n componentAppearance={signUpModal?.appearance}\n flowName={'signUp'}\n onClose={() => componentsControls.closeModal('signUp')}\n onExternalNavigate={() => componentsControls.closeModal('signUp')}\n startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}\n componentName={'SignUpModal'}\n >\n <SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />\n <SignUpModal {...signUpModal} />\n <WaitlistModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedUserProfileModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'userProfile'}\n componentAppearance={userProfileModal?.appearance}\n flowName={'userProfile'}\n onClose={() => componentsControls.closeModal('userProfile')}\n onExternalNavigate={() => componentsControls.closeModal('userProfile')}\n startPath={buildVirtualRouterUrl({\n base: '/user',\n path: userProfileModal?.__experimental_startPath \|\| urlStateParam?.path,\n })}\n componentName={'UserProfileModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <UserProfileModal {...userProfileModal} />\n </LazyModalRenderer>\n );\n\n const mountedUserVerificationModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'userVerification'}\n componentAppearance={userVerificationModal?.appearance}\n flowName={'userVerification'}\n onClose={() => componentsControls.closeModal('userVerification')}\n onExternalNavigate={() => componentsControls.closeModal('userVerification')}\n startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}\n componentName={'UserVerificationModal'}\n modalContainerSx={{ alignItems: 'center' }}\n >\n <UserVerificationModal {...userVerificationModal} />\n </LazyModalRenderer>\n );\n\n const mountedOrganizationProfileModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'organizationProfile'}\n componentAppearance={organizationProfileModal?.appearance}\n flowName={'organizationProfile'}\n onClose={() => componentsControls.closeModal('organizationProfile')}\n onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}\n startPath={buildVirtualRouterUrl({\n base: '/organizationProfile',\n path: organizationProfileModal?.__experimental_startPath \|\| urlStateParam?.path,\n })}\n componentName={'OrganizationProfileModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <OrganizationProfileModal {...organizationProfileModal} />\n </LazyModalRenderer>\n );\n\n const mountedCreateOrganizationModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'createOrganization'}\n componentAppearance={createOrganizationModal?.appearance}\n flowName={'createOrganization'}\n onClose={() => componentsControls.closeModal('createOrganization')}\n onExternalNavigate={() => componentsControls.closeModal('createOrganization')}\n startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}\n componentName={'CreateOrganizationModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <CreateOrganizationModal {...createOrganizationModal} />\n </LazyModalRenderer>\n );\n\n const mountedWaitlistModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'waitlist'}\n componentAppearance={waitlistModal?.appearance}\n flowName={'waitlist'}\n onClose={() => componentsControls.closeModal('waitlist')}\n onExternalNavigate={() => componentsControls.closeModal('waitlist')}\n startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}\n componentName={'WaitlistModal'}\n >\n <WaitlistModal {...waitlistModal} />\n <SignInModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedBlankCaptchaModal = (\n /\n Captcha modal should not close on `Clerk.navigate()`, hence we are not passing `onExternalNavigate`.\n */\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'blankCaptcha' as any}\n componentAppearance={{}}\n flowName={'blankCaptcha'}\n onClose={() => componentsControls.closeModal('blankCaptcha')}\n startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}\n componentName={'BlankCaptchaModal'}\n canCloseModal={false}\n modalId={'cl-modal-captcha-wrapper'}\n modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}\n >\n <BlankCaptchaModal />\n </LazyModalRenderer>\n );\n\n return (\n <Suspense fallback={''}>\n <LazyProviders\n clerk={props.getClerk()}\n environment={props.getEnvironment()}\n options={state.options}\n moduleManager={props.moduleManager}\n >\n {[...nodes].map(([node, component]) => {\n return (\n <LazyComponentRenderer\n key={component.key}\n node={node}\n globalAppearance={state.appearance}\n appearanceKey={component.appearanceKey}\n componentAppearance={component.props?.appearance}\n componentName={component.name}\n componentProps={component.props}\n />\n );\n })}\n\n {googleOneTapModal && mountedOneTapModal}\n {signInModal && mountedSignInModal}\n {signUpModal && mountedSignUpModal}\n {userProfileModal && mountedUserProfileModal}\n {userVerificationModal && mountedUserVerificationModal}\n {organizationProfileModal && mountedOrganizationProfileModal}\n {createOrganizationModal && mountedCreateOrganizationModal}\n {waitlistModal && mountedWaitlistModal}\n {blankCaptchaModal && mountedBlankCaptchaModal}\n\n <MountedCheckoutDrawer\n appearance={state.appearance}\n checkoutDrawer={checkoutDrawer}\n onOpenChange={() => componentsControls.closeDrawer('checkout')}\n />\n\n <MountedPlanDetailDrawer\n appearance={state.appearance}\n planDetailsDrawer={planDetailsDrawer}\n onOpenChange={() => componentsControls.closeDrawer('planDetails')}\n />\n\n <MountedSubscriptionDetailDrawer\n appearance={state.appearance}\n subscriptionDetailsDrawer={subscriptionDetailsDrawer}\n onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}\n />\n\n {state.impersonationFab && (\n <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n <ImpersonationFab />\n </LazyImpersonationFabProvider>\n )}\n\n {state.enableOrganizationsPromptModal && (\n <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>\n <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />\n </LazyEnableOrganizationsPromptProvider>\n )}\n\n {state.options?.__internal_keyless_claimKeylessApplicationUrl &&\n state.options?.__internal_keyless_copyInstanceKeysUrl && (\n <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n <KeylessPrompt\n claimUrl={state.options.__internal_keyless_claimKeylessApplicationUrl}\n copyKeysUrl={state.options.__internal_keyless_copyInstanceKeysUrl}\n onDismiss={state.options.__internal_keyless_dismissPrompt}\n />\n </LazyImpersonationFabProvider>\n )}\n\n <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>\n </LazyProviders>\n </Suspense>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Components.js","names":["componentsControlsResolver: Promise<ComponentControls> \| undefined","props"],"sources":["../src/Components.tsx"],"sourcesContent":["import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors';\nimport type { ModuleManager } from '@clerk/shared/moduleManager';\nimport type {\n __internal_CheckoutProps,\n __internal_EnableOrganizationsPromptProps,\n __internal_PlanDetailsProps,\n __internal_SubscriptionDetailsProps,\n __internal_UserVerificationProps,\n Clerk,\n ClerkOptions,\n CreateOrganizationProps,\n EnvironmentResource,\n GoogleOneTapProps,\n OrganizationProfileProps,\n SignInProps,\n SignUpProps,\n UserProfileProps,\n WaitlistProps,\n} from '@clerk/shared/types';\nimport { createDeferredPromise } from '@clerk/shared/utils';\nimport React, { Suspense } from 'react';\n\nimport type { AppearanceCascade } from './customizables/parseAppearance';\n// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size\nimport { useClerkModalStateParams } from './hooks/useClerkModalStateParams';\nimport type { Appearance } from './internal/appearance';\nimport type { ClerkComponentName } from './lazyModules/components';\nimport {\n BlankCaptchaModal,\n CreateOrganizationModal,\n EnableOrganizationsPrompt,\n ImpersonationFab,\n KeylessPrompt,\n OrganizationProfileModal,\n preloadComponent,\n SignInModal,\n SignUpModal,\n UserProfileModal,\n UserVerificationModal,\n WaitlistModal,\n} from './lazyModules/components';\nimport { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';\nimport {\n LazyComponentRenderer,\n LazyEnableOrganizationsPromptProvider,\n LazyImpersonationFabProvider,\n LazyModalRenderer,\n LazyOneTapRenderer,\n LazyProviders,\n OrganizationSwitcherPrefetch,\n} from './lazyModules/providers';\nimport type { AvailableComponentProps } from './types';\nimport { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl';\nimport { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions';\nimport { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance';\n\n// Re-export for ClerkUi\nexport { extractCssLayerNameFromAppearance };\n\n/*\n Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle.\n /\nconst useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport const ROOT_ELEMENT_ID = 'clerk-components';\n\nexport type ComponentControls = {\n mountComponent: (params: {\n appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n name: ClerkComponentName;\n node: HTMLDivElement;\n props?: AvailableComponentProps;\n }) => void;\n unmountComponent: (params: { node: HTMLDivElement }) => void;\n updateProps: (params: {\n appearance?: Appearance \| undefined;\n options?: ClerkOptions \| undefined;\n node?: HTMLDivElement;\n props?: unknown;\n }) => void;\n openModal: <\n T extends\n \| 'googleOneTap'\n \| 'signIn'\n \| 'signUp'\n \| 'userProfile'\n \| 'organizationProfile'\n \| 'createOrganization'\n \| 'userVerification'\n \| 'waitlist'\n \| 'blankCaptcha'\n \| 'enableOrganizationsPrompt',\n >(\n modal: T,\n props: T extends 'signIn'\n ? SignInProps\n : T extends 'signUp'\n ? SignUpProps\n : T extends 'userVerification'\n ? __internal_UserVerificationProps\n : T extends 'waitlist'\n ? WaitlistProps\n : T extends 'enableOrganizationsPrompt'\n ? __internal_EnableOrganizationsPromptProps\n : UserProfileProps,\n ) => void;\n closeModal: (\n modal:\n \| 'googleOneTap'\n \| 'signIn'\n \| 'signUp'\n \| 'userProfile'\n \| 'organizationProfile'\n \| 'createOrganization'\n \| 'userVerification'\n \| 'waitlist'\n \| 'blankCaptcha'\n \| 'enableOrganizationsPrompt',\n options?: {\n notify?: boolean;\n },\n ) => void;\n openDrawer: <T extends 'checkout' \| 'planDetails' \| 'subscriptionDetails'>(\n drawer: T,\n props: T extends 'checkout'\n ? __internal_CheckoutProps\n : T extends 'planDetails'\n ? __internal_PlanDetailsProps\n : T extends 'subscriptionDetails'\n ? __internal_SubscriptionDetailsProps\n : never,\n ) => void;\n closeDrawer: (\n drawer: 'checkout' \| 'planDetails' \| 'subscriptionDetails',\n options?: {\n notify?: boolean;\n },\n ) => void;\n prefetch: (component: 'organizationSwitcher') => void;\n // Special case, as the impersonation fab mounts automatically\n mountImpersonationFab: () => void;\n};\n\ninterface HtmlNodeOptions {\n key: string;\n name: ClerkComponentName;\n appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n props?: AvailableComponentProps;\n}\n\ninterface ComponentsProps {\n getClerk: () => Clerk;\n getEnvironment: () => EnvironmentResource \| null \| undefined;\n options: ClerkOptions;\n onComponentsMounted: () => void;\n moduleManager: ModuleManager;\n}\n\ninterface ComponentsState {\n appearance: Appearance \| undefined;\n options: ClerkOptions \| undefined;\n googleOneTapModal: null \| GoogleOneTapProps;\n signInModal: null \| SignInProps;\n signUpModal: null \| SignUpProps;\n userProfileModal: null \| UserProfileProps;\n userVerificationModal: null \| __internal_UserVerificationProps;\n organizationProfileModal: null \| OrganizationProfileProps;\n createOrganizationModal: null \| CreateOrganizationProps;\n enableOrganizationsPromptModal: null \| __internal_EnableOrganizationsPromptProps;\n blankCaptchaModal: null;\n organizationSwitcherPrefetch: boolean;\n waitlistModal: null \| WaitlistProps;\n checkoutDrawer: {\n open: false;\n props: null \| __internal_CheckoutProps;\n };\n planDetailsDrawer: {\n open: false;\n props: null \| __internal_PlanDetailsProps;\n };\n subscriptionDetailsDrawer: {\n open: false;\n props: null \| __internal_SubscriptionDetailsProps;\n };\n nodes: Map<HTMLDivElement, HtmlNodeOptions>;\n impersonationFab: boolean;\n}\n\nlet portalCt = 0;\n\nfunction assertDOMElement(element: HTMLElement): asserts element {\n if (!element) {\n clerkUIErrorDOMElementNotFound();\n }\n}\n\nexport const mountComponentRenderer = (\n getClerk: () => Clerk,\n getEnvironment: () => EnvironmentResource \| null \| undefined,\n _options: ClerkOptions,\n moduleManager: ModuleManager,\n) => {\n const options = { ..._options };\n // Extract cssLayerName from theme if present and move it to appearance level\n if (options.appearance) {\n options.appearance = extractCssLayerNameFromAppearance(options.appearance);\n }\n\n // TODO: Init of components should start\n // before /env and /client requests\n let clerkRoot = document.getElementById(ROOT_ELEMENT_ID);\n\n if (!clerkRoot) {\n clerkRoot = document.createElement('div');\n clerkRoot.setAttribute('id', 'clerk-components');\n document.body.appendChild(clerkRoot);\n }\n\n let componentsControlsResolver: Promise<ComponentControls> \| undefined;\n\n return {\n ensureMounted: async (opts?: { preloadHint: ClerkComponentName }) => {\n const { preloadHint } = opts \|\| {};\n // This mechanism ensures that mountComponentControls will only be called once\n // and any calls to .mount before mountComponentControls resolves will fire in order.\n // Otherwise, we risk having components rendered multiple times, or having\n // .unmountComponent incorrectly called before the component is rendered\n if (!componentsControlsResolver) {\n const deferredPromise = createDeferredPromise();\n if (preloadHint) {\n void preloadComponent(preloadHint);\n }\n componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n createRoot(clerkRoot).render(\n <Components\n getClerk={getClerk}\n getEnvironment={getEnvironment}\n options={options}\n onComponentsMounted={deferredPromise.resolve}\n moduleManager={moduleManager}\n />,\n );\n return deferredPromise.promise.then(() => componentsControls);\n });\n }\n return componentsControlsResolver.then(controls => controls);\n },\n };\n};\n\nexport type MountComponentRenderer = typeof mountComponentRenderer;\n\nconst componentsControls = {} as ComponentControls;\n\nconst componentNodes = Object.freeze({\n SignUp: 'signUpModal',\n SignIn: 'signInModal',\n UserProfile: 'userProfileModal',\n OrganizationProfile: 'organizationProfileModal',\n CreateOrganization: 'createOrganizationModal',\n Waitlist: 'waitlistModal',\n}) as any;\n\nconst Components = (props: ComponentsProps) => {\n const [state, setState] = React.useState<ComponentsState>({\n appearance: props.options.appearance,\n options: props.options,\n googleOneTapModal: null,\n signInModal: null,\n signUpModal: null,\n userProfileModal: null,\n userVerificationModal: null,\n organizationProfileModal: null,\n createOrganizationModal: null,\n enableOrganizationsPromptModal: null,\n organizationSwitcherPrefetch: false,\n waitlistModal: null,\n blankCaptchaModal: null,\n checkoutDrawer: {\n open: false,\n props: null,\n },\n planDetailsDrawer: {\n open: false,\n props: null,\n },\n subscriptionDetailsDrawer: {\n open: false,\n props: null,\n },\n nodes: new Map(),\n impersonationFab: false,\n });\n\n const {\n googleOneTapModal,\n signInModal,\n signUpModal,\n userProfileModal,\n userVerificationModal,\n organizationProfileModal,\n createOrganizationModal,\n waitlistModal,\n blankCaptchaModal,\n checkoutDrawer,\n planDetailsDrawer,\n subscriptionDetailsDrawer,\n nodes,\n } = state;\n\n const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n\n useSafeLayoutEffect(() => {\n if (decodedRedirectParams) {\n setState(s => ({\n ...s,\n [componentNodes[decodedRedirectParams.componentName]]: true,\n }));\n }\n\n componentsControls.mountComponent = params => {\n const { node, name, props, appearanceKey } = params;\n assertDOMElement(node);\n setState(s => {\n s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n return { ...s, nodes };\n });\n };\n\n componentsControls.unmountComponent = params => {\n const { node } = params;\n setState(s => {\n s.nodes.delete(node);\n return { ...s, nodes };\n });\n };\n\n componentsControls.updateProps = ({ node, props, ...restProps }) => {\n if (node && props && typeof props === 'object') {\n const nodeOptions = state.nodes.get(node);\n if (nodeOptions) {\n nodeOptions.props = { ...props };\n setState(s => ({ ...s }));\n return;\n }\n }\n\n setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));\n };\n\n componentsControls.closeModal = (name, options = {}) => {\n const { notify = true } = options;\n clearUrlStateParam();\n setState(s => {\n function handleCloseModalForExperimentalUserVerification() {\n const modal = s[`${name}Modal`];\n if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {\n // TypeScript doesn't narrow properly with template literal access and 'in' operator\n (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();\n }\n }\n\n /\n We need this in order for `Clerk.__experimental_closeUserVerification()`\n * to properly trigger the previously defined `afterVerificationCancelled` callback\n /\n handleCloseModalForExperimentalUserVerification();\n\n return { ...s, [`${name}Modal`]: null };\n });\n };\n\n componentsControls.openModal = (name, props) => {\n // Prevent opening enableOrganizations prompt if it's already open\n // It should open the first call and ignore the subsequent calls\n if (name === 'enableOrganizationsPrompt') {\n setState(prev => {\n // Modal is already open, don't update state\n if (prev.enableOrganizationsPromptModal) {\n return prev;\n }\n\n return { ...prev, [`${name}Modal`]: props };\n });\n return;\n }\n\n function handleCloseModalForExperimentalUserVerification() {\n if (!('afterVerificationCancelled' in props)) {\n return;\n }\n\n setState(s => ({\n ...s,\n [`${name}Modal`]: {\n ...props,\n /\n When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback\n /\n afterVerification() {\n props.afterVerification?.();\n componentsControls.closeModal(name, { notify: false });\n },\n },\n }));\n }\n\n if ('afterVerificationCancelled' in props) {\n handleCloseModalForExperimentalUserVerification();\n } else {\n setState(s => ({ ...s, [`${name}Modal`]: props }));\n }\n };\n\n componentsControls.mountImpersonationFab = () => {\n setState(s => ({ ...s, impersonationFab: true }));\n };\n\n componentsControls.openDrawer = (name, props) => {\n setState(s => ({\n ...s,\n [`${name}Drawer`]: {\n open: true,\n props,\n },\n }));\n };\n\n componentsControls.closeDrawer = name => {\n setState(s => {\n const currentItem = s[`${name}Drawer`];\n // @ts-expect-error `__internal_PlanDetailsProps` does not accept `onClose`\n currentItem?.props?.onClose?.();\n return {\n ...s,\n [`${name}Drawer`]: {\n ...s[`${name}Drawer`],\n open: false,\n },\n };\n });\n };\n\n componentsControls.prefetch = component => {\n setState(s => ({ ...s, [`${component}Prefetch`]: true }));\n };\n\n props.onComponentsMounted();\n }, []);\n\n const mountedOneTapModal = (\n <LazyOneTapRenderer\n componentProps={googleOneTapModal}\n globalAppearance={state.appearance}\n componentAppearance={googleOneTapModal?.appearance}\n startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}\n />\n );\n\n const mountedSignInModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'signIn'}\n componentAppearance={signInModal?.appearance}\n flowName={'signIn'}\n onClose={() => componentsControls.closeModal('signIn')}\n onExternalNavigate={() => componentsControls.closeModal('signIn')}\n startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}\n componentName={'SignInModal'}\n >\n <SignInModal {...signInModal} />\n <SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />\n <WaitlistModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedSignUpModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'signUp'}\n componentAppearance={signUpModal?.appearance}\n flowName={'signUp'}\n onClose={() => componentsControls.closeModal('signUp')}\n onExternalNavigate={() => componentsControls.closeModal('signUp')}\n startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}\n componentName={'SignUpModal'}\n >\n <SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />\n <SignUpModal {...signUpModal} />\n <WaitlistModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedUserProfileModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'userProfile'}\n componentAppearance={userProfileModal?.appearance}\n flowName={'userProfile'}\n onClose={() => componentsControls.closeModal('userProfile')}\n onExternalNavigate={() => componentsControls.closeModal('userProfile')}\n startPath={buildVirtualRouterUrl({\n base: '/user',\n path: userProfileModal?.__experimental_startPath \|\| urlStateParam?.path,\n })}\n componentName={'UserProfileModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <UserProfileModal {...userProfileModal} />\n </LazyModalRenderer>\n );\n\n const mountedUserVerificationModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'userVerification'}\n componentAppearance={userVerificationModal?.appearance}\n flowName={'userVerification'}\n onClose={() => componentsControls.closeModal('userVerification')}\n onExternalNavigate={() => componentsControls.closeModal('userVerification')}\n startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}\n componentName={'UserVerificationModal'}\n modalContainerSx={{ alignItems: 'center' }}\n >\n <UserVerificationModal {...userVerificationModal} />\n </LazyModalRenderer>\n );\n\n const mountedOrganizationProfileModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'organizationProfile'}\n componentAppearance={organizationProfileModal?.appearance}\n flowName={'organizationProfile'}\n onClose={() => componentsControls.closeModal('organizationProfile')}\n onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}\n startPath={buildVirtualRouterUrl({\n base: '/organizationProfile',\n path: organizationProfileModal?.__experimental_startPath \|\| urlStateParam?.path,\n })}\n componentName={'OrganizationProfileModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <OrganizationProfileModal {...organizationProfileModal} />\n </LazyModalRenderer>\n );\n\n const mountedCreateOrganizationModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'createOrganization'}\n componentAppearance={createOrganizationModal?.appearance}\n flowName={'createOrganization'}\n onClose={() => componentsControls.closeModal('createOrganization')}\n onExternalNavigate={() => componentsControls.closeModal('createOrganization')}\n startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}\n componentName={'CreateOrganizationModal'}\n modalContainerSx={{ alignItems: 'center' }}\n modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n >\n <CreateOrganizationModal {...createOrganizationModal} />\n </LazyModalRenderer>\n );\n\n const mountedWaitlistModal = (\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'waitlist'}\n componentAppearance={waitlistModal?.appearance}\n flowName={'waitlist'}\n onClose={() => componentsControls.closeModal('waitlist')}\n onExternalNavigate={() => componentsControls.closeModal('waitlist')}\n startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}\n componentName={'WaitlistModal'}\n >\n <WaitlistModal {...waitlistModal} />\n <SignInModal {...waitlistModal} />\n </LazyModalRenderer>\n );\n\n const mountedBlankCaptchaModal = (\n /\n Captcha modal should not close on `Clerk.navigate()`, hence we are not passing `onExternalNavigate`.\n */\n <LazyModalRenderer\n globalAppearance={state.appearance}\n appearanceKey={'blankCaptcha' as any}\n componentAppearance={{}}\n flowName={'blankCaptcha'}\n onClose={() => componentsControls.closeModal('blankCaptcha')}\n startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}\n componentName={'BlankCaptchaModal'}\n canCloseModal={false}\n modalId={'cl-modal-captcha-wrapper'}\n modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}\n >\n <BlankCaptchaModal />\n </LazyModalRenderer>\n );\n\n return (\n <Suspense fallback={''}>\n <LazyProviders\n clerk={props.getClerk()}\n environment={props.getEnvironment()}\n options={state.options}\n moduleManager={props.moduleManager}\n >\n {[...nodes].map(([node, component]) => {\n return (\n <LazyComponentRenderer\n key={component.key}\n node={node}\n globalAppearance={state.appearance}\n appearanceKey={component.appearanceKey}\n componentAppearance={component.props?.appearance}\n componentName={component.name}\n componentProps={component.props}\n />\n );\n })}\n\n {googleOneTapModal && mountedOneTapModal}\n {signInModal && mountedSignInModal}\n {signUpModal && mountedSignUpModal}\n {userProfileModal && mountedUserProfileModal}\n {userVerificationModal && mountedUserVerificationModal}\n {organizationProfileModal && mountedOrganizationProfileModal}\n {createOrganizationModal && mountedCreateOrganizationModal}\n {waitlistModal && mountedWaitlistModal}\n {blankCaptchaModal && mountedBlankCaptchaModal}\n\n <MountedCheckoutDrawer\n appearance={state.appearance}\n checkoutDrawer={checkoutDrawer}\n onOpenChange={() => componentsControls.closeDrawer('checkout')}\n />\n\n <MountedPlanDetailDrawer\n appearance={state.appearance}\n planDetailsDrawer={planDetailsDrawer}\n onOpenChange={() => componentsControls.closeDrawer('planDetails')}\n />\n\n <MountedSubscriptionDetailDrawer\n appearance={state.appearance}\n subscriptionDetailsDrawer={subscriptionDetailsDrawer}\n onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}\n />\n\n {state.impersonationFab && (\n <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n <ImpersonationFab />\n </LazyImpersonationFabProvider>\n )}\n\n {state.enableOrganizationsPromptModal && (\n <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>\n <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />\n </LazyEnableOrganizationsPromptProvider>\n )}\n\n {state.options?.__internal_keyless_claimKeylessApplicationUrl &&\n state.options?.__internal_keyless_copyInstanceKeysUrl && (\n <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n <KeylessPrompt\n claimUrl={state.options.__internal_keyless_claimKeylessApplicationUrl}\n copyKeysUrl={state.options.__internal_keyless_copyInstanceKeysUrl}\n onDismiss={state.options.__internal_keyless_dismissPrompt}\n />\n </LazyImpersonationFabProvider>\n )}\n\n <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>\n </LazyProviders>\n </Suspense>\n );\n};\n"],"mappings":"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"}

package/dist/checkout_ui_03abd0_1.0.0-snapshot.v20251208202852.js ADDED Viewed

@@ -0,0 +1,9 @@
+"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:`
+              @keyframes check {
+                0% {
+                  stroke-dashoffset: 1;
+                }
+                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])})}}]);

package/dist/components/Checkout/CheckoutComplete.js CHANGED Viewed

@@ -174,7 +174,7 @@ const CheckoutComplete = () => {
 		y: 256
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const checkoutSuccessRootRef = useRef(null);
 	const canHover = typeof window === "undefined" ? true : window.matchMedia("(hover: hover) and (pointer: fine)").matches;

package/dist/components/Checkout/CheckoutComplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckoutComplete.js","names":["useCheckout"],"sources":["../../../src/components/Checkout/CheckoutComplete.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { formatDate } from '@/ui/utils/formatDate';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, Button, descriptors, Heading, localizationKeys, Span, Text, useAppearance } from '../../customizables';\nimport { transitionDurationValues, transitionTiming } from '../../foundations/transitions';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { useRouter } from '../../router';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst lerp = (start: number, end: number, amt: number) => start + (end - start) * amt;\n\nconst SuccessRing = ({ positionX, positionY }: { positionX: number; positionY: number }) => {\n const animationRef = useRef<number \| null>(null);\n const [currentPosition, setCurrentPosition] = useState({ x: 256, y: 256 });\n\n const canHover =\n typeof window === 'undefined' ? true : window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\n useEffect(() => {\n if (!canHover) {\n return;\n }\n const animate = () => {\n setCurrentPosition(prev => {\n const amt = 0.15;\n const x = lerp(prev.x, positionX, amt);\n const y = lerp(prev.y, positionY, amt);\n return { x, y };\n });\n animationRef.current = requestAnimationFrame(animate);\n };\n animationRef.current = requestAnimationFrame(animate);\n return () => {\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, [positionX, positionY, canHover]);\n\n // Generate unique IDs for SVG elements to avoid conflicts with multiple component instances\n const maskId1 = useId();\n const maskId2 = useId();\n const maskId3 = useId();\n\n return (\n <Box\n elementDescriptor={descriptors.checkoutSuccessRings}\n as='svg'\n // @ts-ignore - viewBox is a valid prop for svg\n viewBox='0 0 512 512'\n sx={{\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n }}\n aria-hidden\n >\n <defs>\n <radialGradient id='clerk-checkout-success-gradient'>\n <stop\n offset='0%'\n style={{\n stopColor: 'var(--ring-highlight)',\n }}\n />\n <stop\n offset='100%'\n stopOpacity='0'\n style={{\n stopColor: 'var(--ring-highlight)',\n }}\n />\n </radialGradient>\n <filter id='clerk-checkout-success-blur-effect'>\n <feGaussianBlur stdDeviation='10' />\n </filter>\n {[\n { r: 225, maskStart: 10, maskEnd: 90, id: maskId1 },\n { r: 162.5, maskStart: 15, maskEnd: 85, id: maskId2 },\n { r: 100, maskStart: 20, maskEnd: 80, id: maskId3 },\n ].map(({ maskStart, maskEnd, id }) => (\n <linearGradient\n key={id}\n id={`gradient-${id}`}\n x1='0%'\n y1='0%'\n x2='0%'\n y2='100%'\n >\n <stop\n offset={`${maskStart + 5}%`}\n stopColor='white'\n stopOpacity='0'\n />\n <stop\n offset={`${maskStart + 35}%`}\n stopColor='white'\n stopOpacity='1'\n />\n <stop\n offset={`${maskEnd - 35}%`}\n stopColor='white'\n stopOpacity='1'\n />\n <stop\n offset={`${maskEnd - 5}%`}\n stopColor='white'\n stopOpacity='0'\n />\n </linearGradient>\n ))}\n <mask id='clerk-checkout-success-mask'>\n {[\n { r: 225, id: maskId1 },\n { r: 162.5, id: maskId2 },\n { r: 100, id: maskId3 },\n ].map(({ r, id }) => (\n <circle\n key={id}\n cx='256'\n cy='256'\n r={r}\n stroke={`url(#gradient-${id})`}\n fill='none'\n strokeWidth='1'\n />\n ))}\n </mask>\n </defs>\n <g mask='url(#clerk-checkout-success-mask)'>\n <rect\n width='512'\n height='512'\n style={{\n fill: 'var(--ring-fill)',\n }}\n />\n {canHover && (\n <rect\n id='movingGradientHighlight'\n width='256'\n height='256'\n x={currentPosition.x - 128}\n y={currentPosition.y - 128}\n fill='url(#clerk-checkout-success-gradient)'\n filter='url(#clerk-checkout-success-blur-effect)'\n />\n )}\n </g>\n </Box>\n );\n};\n\nexport const CheckoutComplete = () => {\n const router = useRouter();\n const { setIsOpen } = useDrawerContext();\n const { newSubscriptionRedirectUrl } = useCheckoutContext();\n const { checkout } = useCheckout();\n const { totals, paymentMethod, planPeriodStart, freeTrialEndsAt } = checkout;\n const [mousePosition, setMousePosition] = useState({ x: 256, y: 256 });\n\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedLayout;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const checkoutSuccessRootRef = useRef<HTMLSpanElement>(null);\n const canHover =\n typeof window === 'undefined' ? true : window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\n const handleMouseMove = (event: React.MouseEvent<HTMLSpanElement>) => {\n if (!canHover) {\n return;\n }\n if (checkoutSuccessRootRef.current) {\n const rect = checkoutSuccessRootRef.current.getBoundingClientRect();\n const domX = event.clientX - rect.left;\n const domY = event.clientY - rect.top;\n const domWidth = rect.width;\n\n const svgViewBoxWidth = 512;\n\n if (domWidth > 0) {\n const svgX = (domX / domWidth) * svgViewBoxWidth;\n const svgY = (domY / domWidth) * svgViewBoxWidth;\n setMousePosition({ x: svgX, y: svgY });\n } else {\n setMousePosition({ x: 256, y: 256 });\n }\n }\n };\n\n const handleClose = () => {\n if (newSubscriptionRedirectUrl) {\n void router.navigate(newSubscriptionRedirectUrl);\n }\n if (setIsOpen) {\n setIsOpen(false);\n }\n };\n\n if (!totals) {\n return null;\n }\n\n return (\n <>\n <Drawer.Body>\n <Span\n elementDescriptor={descriptors.checkoutSuccessRoot}\n sx={t => ({\n '--ring-fill': t.colors.$neutralAlpha200,\n '--ring-highlight': t.colors.$success500,\n margin: 'auto',\n position: 'relative',\n aspectRatio: '1/1',\n display: 'grid',\n width: '100%',\n flexShrink: 0,\n transformOrigin: 'bottom center',\n animationName: 'scaleIn',\n animationDuration: `${transitionDurationValues.slowest}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n opacity: 0,\n overflow: 'hidden',\n backgroundColor: t.colors.$colorBackground,\n '@keyframes scaleIn': {\n '0%': {\n filter: 'blur(10px)',\n transform: 'scale(0.85)',\n opacity: 0,\n },\n '100%': {\n filter: 'blur(0px)',\n transform: 'scale(1)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n animation: 'none',\n opacity: 1,\n }),\n })}\n ref={checkoutSuccessRootRef}\n onMouseMove={handleMouseMove}\n >\n <SuccessRing\n positionX={mousePosition.x}\n positionY={mousePosition.y}\n />\n <Box\n elementDescriptor={descriptors.checkoutSuccessBadge}\n sx={t => ({\n margin: 'auto',\n gridArea: '1/1',\n display: 'flex',\n position: 'relative',\n width: t.sizes.$16,\n height: t.sizes.$16,\n borderRadius: t.radii.$circle,\n 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%)`,\n boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',\n color: canHover ? t.colors.$success500 : t.colors.$colorForeground,\n ':before': {\n content: '\"\"',\n position: 'absolute',\n inset: t.space.$1,\n borderRadius: t.radii.$circle,\n backgroundColor: t.colors.$colorBackground,\n },\n })}\n >\n <svg\n fill='none'\n viewBox='0 0 10 10'\n aria-hidden='true'\n style={{\n position: 'relative',\n margin: 'auto',\n width: '1rem',\n height: '1rem',\n }}\n >\n <path\n d='m1 6 3 3 5-8'\n stroke='currentColor'\n strokeWidth='1.25'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeDasharray='1'\n pathLength='1'\n style={{\n strokeDashoffset: '1',\n animation: isMotionSafe\n ? `check ${transitionDurationValues.drawer}ms ${transitionTiming.bezier} forwards ${transitionDurationValues.slow}ms`\n : 'none',\n ...(!isMotionSafe && {\n strokeDashoffset: '0',\n }),\n }}\n />\n </svg>\n <style>{`\n @keyframes check {\n 0% {\n stroke-dashoffset: 1;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n `}</style>\n </Box>\n <Span\n sx={t => ({\n margin: 'auto',\n gridArea: '1/1',\n position: 'relative',\n textAlign: 'center',\n transform: `translateY(${t.space.$20})`,\n })}\n >\n <Heading\n elementDescriptor={descriptors.checkoutSuccessTitle}\n as='h2'\n textVariant='h2'\n localizationKey={\n freeTrialEndsAt\n ? localizationKeys('billing.checkout.title__trialSuccess')\n : totals.totalDueNow.amount > 0\n ? localizationKeys('billing.checkout.title__paymentSuccessful')\n : localizationKeys('billing.checkout.title__subscriptionSuccessful')\n }\n sx={t => ({\n opacity: 0,\n animationName: 'slideUp',\n animationDuration: `${transitionDurationValues.slowest}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n color: t.colors.$colorForeground,\n '@keyframes slideUp': {\n '0%': {\n transform: 'translateY(30px)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n opacity: 1,\n animation: 'none',\n }),\n })}\n />\n <Text\n elementDescriptor={descriptors.checkoutSuccessDescription}\n colorScheme='secondary'\n sx={t => ({\n textAlign: 'center',\n paddingInline: t.space.$8,\n marginBlockStart: t.space.$2,\n opacity: 0,\n animationName: 'slideUp',\n animationDuration: `${transitionDurationValues.slowest * 1.5}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n '@keyframes slideUp': {\n '0%': {\n transform: 'translateY(30px)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n opacity: 1,\n animation: 'none',\n }),\n })}\n localizationKey={\n totals.totalDueNow.amount > 0\n ? localizationKeys('billing.checkout.description__paymentSuccessful')\n : localizationKeys('billing.checkout.description__subscriptionSuccessful')\n }\n />\n </Span>\n </Span>\n </Drawer.Body>\n <Drawer.Footer\n sx={t => ({\n rowGap: t.space.$4,\n animationName: 'footerSlideInUp',\n animationDuration: `${transitionDurationValues.drawer}ms`,\n animationTimingFunction: transitionTiming.bezier,\n '@keyframes footerSlideInUp': {\n '0%': {\n transform: 'translateY(100%)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n animation: 'none',\n }),\n })}\n >\n <LineItems.Root>\n <LineItems.Group variant='secondary'>\n <LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__totalPaid')} />\n <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n </LineItems.Group>\n\n {freeTrialEndsAt ? (\n <LineItems.Group variant='secondary'>\n <LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__freeTrialEndsAt')} />\n <LineItems.Description text={formatDate(freeTrialEndsAt)} />\n </LineItems.Group>\n ) : null}\n <LineItems.Group variant='secondary'>\n <LineItems.Title\n title={\n totals.totalDueNow.amount > 0 \|\| freeTrialEndsAt !== null\n ? localizationKeys('billing.checkout.lineItems.title__paymentMethod')\n : localizationKeys('billing.checkout.lineItems.title__subscriptionBegins')\n }\n />\n\n <LineItems.Description\n text={\n totals.totalDueNow.amount > 0 \|\| freeTrialEndsAt !== null\n ? paymentMethod\n ? paymentMethod.paymentType !== 'card'\n ? paymentMethod.paymentType\n ? `${capitalize(paymentMethod.paymentType)}`\n : '–'\n : paymentMethod.cardType\n ? `${capitalize(paymentMethod.cardType)} ⋯ ${paymentMethod.last4}`\n : '–'\n : '–'\n : planPeriodStart\n ? formatDate(new Date(planPeriodStart))\n : '–'\n }\n />\n </LineItems.Group>\n </LineItems.Root>\n <Button\n onClick={handleClose}\n localizationKey={localizationKeys('formButtonPrimary')}\n />\n </Drawer.Footer>\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CheckoutComplete.js","names":["useCheckout"],"sources":["../../../src/components/Checkout/CheckoutComplete.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { formatDate } from '@/ui/utils/formatDate';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, Button, descriptors, Heading, localizationKeys, Span, Text, useAppearance } from '../../customizables';\nimport { transitionDurationValues, transitionTiming } from '../../foundations/transitions';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { useRouter } from '../../router';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst lerp = (start: number, end: number, amt: number) => start + (end - start) * amt;\n\nconst SuccessRing = ({ positionX, positionY }: { positionX: number; positionY: number }) => {\n const animationRef = useRef<number \| null>(null);\n const [currentPosition, setCurrentPosition] = useState({ x: 256, y: 256 });\n\n const canHover =\n typeof window === 'undefined' ? true : window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\n useEffect(() => {\n if (!canHover) {\n return;\n }\n const animate = () => {\n setCurrentPosition(prev => {\n const amt = 0.15;\n const x = lerp(prev.x, positionX, amt);\n const y = lerp(prev.y, positionY, amt);\n return { x, y };\n });\n animationRef.current = requestAnimationFrame(animate);\n };\n animationRef.current = requestAnimationFrame(animate);\n return () => {\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, [positionX, positionY, canHover]);\n\n // Generate unique IDs for SVG elements to avoid conflicts with multiple component instances\n const maskId1 = useId();\n const maskId2 = useId();\n const maskId3 = useId();\n\n return (\n <Box\n elementDescriptor={descriptors.checkoutSuccessRings}\n as='svg'\n // @ts-ignore - viewBox is a valid prop for svg\n viewBox='0 0 512 512'\n sx={{\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n }}\n aria-hidden\n >\n <defs>\n <radialGradient id='clerk-checkout-success-gradient'>\n <stop\n offset='0%'\n style={{\n stopColor: 'var(--ring-highlight)',\n }}\n />\n <stop\n offset='100%'\n stopOpacity='0'\n style={{\n stopColor: 'var(--ring-highlight)',\n }}\n />\n </radialGradient>\n <filter id='clerk-checkout-success-blur-effect'>\n <feGaussianBlur stdDeviation='10' />\n </filter>\n {[\n { r: 225, maskStart: 10, maskEnd: 90, id: maskId1 },\n { r: 162.5, maskStart: 15, maskEnd: 85, id: maskId2 },\n { r: 100, maskStart: 20, maskEnd: 80, id: maskId3 },\n ].map(({ maskStart, maskEnd, id }) => (\n <linearGradient\n key={id}\n id={`gradient-${id}`}\n x1='0%'\n y1='0%'\n x2='0%'\n y2='100%'\n >\n <stop\n offset={`${maskStart + 5}%`}\n stopColor='white'\n stopOpacity='0'\n />\n <stop\n offset={`${maskStart + 35}%`}\n stopColor='white'\n stopOpacity='1'\n />\n <stop\n offset={`${maskEnd - 35}%`}\n stopColor='white'\n stopOpacity='1'\n />\n <stop\n offset={`${maskEnd - 5}%`}\n stopColor='white'\n stopOpacity='0'\n />\n </linearGradient>\n ))}\n <mask id='clerk-checkout-success-mask'>\n {[\n { r: 225, id: maskId1 },\n { r: 162.5, id: maskId2 },\n { r: 100, id: maskId3 },\n ].map(({ r, id }) => (\n <circle\n key={id}\n cx='256'\n cy='256'\n r={r}\n stroke={`url(#gradient-${id})`}\n fill='none'\n strokeWidth='1'\n />\n ))}\n </mask>\n </defs>\n <g mask='url(#clerk-checkout-success-mask)'>\n <rect\n width='512'\n height='512'\n style={{\n fill: 'var(--ring-fill)',\n }}\n />\n {canHover && (\n <rect\n id='movingGradientHighlight'\n width='256'\n height='256'\n x={currentPosition.x - 128}\n y={currentPosition.y - 128}\n fill='url(#clerk-checkout-success-gradient)'\n filter='url(#clerk-checkout-success-blur-effect)'\n />\n )}\n </g>\n </Box>\n );\n};\n\nexport const CheckoutComplete = () => {\n const router = useRouter();\n const { setIsOpen } = useDrawerContext();\n const { newSubscriptionRedirectUrl } = useCheckoutContext();\n const { checkout } = useCheckout();\n const { totals, paymentMethod, planPeriodStart, freeTrialEndsAt } = checkout;\n const [mousePosition, setMousePosition] = useState({ x: 256, y: 256 });\n\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const checkoutSuccessRootRef = useRef<HTMLSpanElement>(null);\n const canHover =\n typeof window === 'undefined' ? true : window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\n const handleMouseMove = (event: React.MouseEvent<HTMLSpanElement>) => {\n if (!canHover) {\n return;\n }\n if (checkoutSuccessRootRef.current) {\n const rect = checkoutSuccessRootRef.current.getBoundingClientRect();\n const domX = event.clientX - rect.left;\n const domY = event.clientY - rect.top;\n const domWidth = rect.width;\n\n const svgViewBoxWidth = 512;\n\n if (domWidth > 0) {\n const svgX = (domX / domWidth) * svgViewBoxWidth;\n const svgY = (domY / domWidth) * svgViewBoxWidth;\n setMousePosition({ x: svgX, y: svgY });\n } else {\n setMousePosition({ x: 256, y: 256 });\n }\n }\n };\n\n const handleClose = () => {\n if (newSubscriptionRedirectUrl) {\n void router.navigate(newSubscriptionRedirectUrl);\n }\n if (setIsOpen) {\n setIsOpen(false);\n }\n };\n\n if (!totals) {\n return null;\n }\n\n return (\n <>\n <Drawer.Body>\n <Span\n elementDescriptor={descriptors.checkoutSuccessRoot}\n sx={t => ({\n '--ring-fill': t.colors.$neutralAlpha200,\n '--ring-highlight': t.colors.$success500,\n margin: 'auto',\n position: 'relative',\n aspectRatio: '1/1',\n display: 'grid',\n width: '100%',\n flexShrink: 0,\n transformOrigin: 'bottom center',\n animationName: 'scaleIn',\n animationDuration: `${transitionDurationValues.slowest}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n opacity: 0,\n overflow: 'hidden',\n backgroundColor: t.colors.$colorBackground,\n '@keyframes scaleIn': {\n '0%': {\n filter: 'blur(10px)',\n transform: 'scale(0.85)',\n opacity: 0,\n },\n '100%': {\n filter: 'blur(0px)',\n transform: 'scale(1)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n animation: 'none',\n opacity: 1,\n }),\n })}\n ref={checkoutSuccessRootRef}\n onMouseMove={handleMouseMove}\n >\n <SuccessRing\n positionX={mousePosition.x}\n positionY={mousePosition.y}\n />\n <Box\n elementDescriptor={descriptors.checkoutSuccessBadge}\n sx={t => ({\n margin: 'auto',\n gridArea: '1/1',\n display: 'flex',\n position: 'relative',\n width: t.sizes.$16,\n height: t.sizes.$16,\n borderRadius: t.radii.$circle,\n 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%)`,\n boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',\n color: canHover ? t.colors.$success500 : t.colors.$colorForeground,\n ':before': {\n content: '\"\"',\n position: 'absolute',\n inset: t.space.$1,\n borderRadius: t.radii.$circle,\n backgroundColor: t.colors.$colorBackground,\n },\n })}\n >\n <svg\n fill='none'\n viewBox='0 0 10 10'\n aria-hidden='true'\n style={{\n position: 'relative',\n margin: 'auto',\n width: '1rem',\n height: '1rem',\n }}\n >\n <path\n d='m1 6 3 3 5-8'\n stroke='currentColor'\n strokeWidth='1.25'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeDasharray='1'\n pathLength='1'\n style={{\n strokeDashoffset: '1',\n animation: isMotionSafe\n ? `check ${transitionDurationValues.drawer}ms ${transitionTiming.bezier} forwards ${transitionDurationValues.slow}ms`\n : 'none',\n ...(!isMotionSafe && {\n strokeDashoffset: '0',\n }),\n }}\n />\n </svg>\n <style>{`\n @keyframes check {\n 0% {\n stroke-dashoffset: 1;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n `}</style>\n </Box>\n <Span\n sx={t => ({\n margin: 'auto',\n gridArea: '1/1',\n position: 'relative',\n textAlign: 'center',\n transform: `translateY(${t.space.$20})`,\n })}\n >\n <Heading\n elementDescriptor={descriptors.checkoutSuccessTitle}\n as='h2'\n textVariant='h2'\n localizationKey={\n freeTrialEndsAt\n ? localizationKeys('billing.checkout.title__trialSuccess')\n : totals.totalDueNow.amount > 0\n ? localizationKeys('billing.checkout.title__paymentSuccessful')\n : localizationKeys('billing.checkout.title__subscriptionSuccessful')\n }\n sx={t => ({\n opacity: 0,\n animationName: 'slideUp',\n animationDuration: `${transitionDurationValues.slowest}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n color: t.colors.$colorForeground,\n '@keyframes slideUp': {\n '0%': {\n transform: 'translateY(30px)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n opacity: 1,\n animation: 'none',\n }),\n })}\n />\n <Text\n elementDescriptor={descriptors.checkoutSuccessDescription}\n colorScheme='secondary'\n sx={t => ({\n textAlign: 'center',\n paddingInline: t.space.$8,\n marginBlockStart: t.space.$2,\n opacity: 0,\n animationName: 'slideUp',\n animationDuration: `${transitionDurationValues.slowest * 1.5}ms`,\n animationTimingFunction: transitionTiming.bezier,\n animationFillMode: 'forwards',\n '@keyframes slideUp': {\n '0%': {\n transform: 'translateY(30px)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n opacity: 1,\n animation: 'none',\n }),\n })}\n localizationKey={\n totals.totalDueNow.amount > 0\n ? localizationKeys('billing.checkout.description__paymentSuccessful')\n : localizationKeys('billing.checkout.description__subscriptionSuccessful')\n }\n />\n </Span>\n </Span>\n </Drawer.Body>\n <Drawer.Footer\n sx={t => ({\n rowGap: t.space.$4,\n animationName: 'footerSlideInUp',\n animationDuration: `${transitionDurationValues.drawer}ms`,\n animationTimingFunction: transitionTiming.bezier,\n '@keyframes footerSlideInUp': {\n '0%': {\n transform: 'translateY(100%)',\n opacity: 0,\n },\n '100%': {\n transform: 'translateY(0)',\n opacity: 1,\n },\n },\n ...(!isMotionSafe && {\n animation: 'none',\n }),\n })}\n >\n <LineItems.Root>\n <LineItems.Group variant='secondary'>\n <LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__totalPaid')} />\n <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n </LineItems.Group>\n\n {freeTrialEndsAt ? (\n <LineItems.Group variant='secondary'>\n <LineItems.Title title={localizationKeys('billing.checkout.lineItems.title__freeTrialEndsAt')} />\n <LineItems.Description text={formatDate(freeTrialEndsAt)} />\n </LineItems.Group>\n ) : null}\n <LineItems.Group variant='secondary'>\n <LineItems.Title\n title={\n totals.totalDueNow.amount > 0 \|\| freeTrialEndsAt !== null\n ? localizationKeys('billing.checkout.lineItems.title__paymentMethod')\n : localizationKeys('billing.checkout.lineItems.title__subscriptionBegins')\n }\n />\n\n <LineItems.Description\n text={\n totals.totalDueNow.amount > 0 \|\| freeTrialEndsAt !== null\n ? paymentMethod\n ? paymentMethod.paymentType !== 'card'\n ? paymentMethod.paymentType\n ? `${capitalize(paymentMethod.paymentType)}`\n : '–'\n : paymentMethod.cardType\n ? `${capitalize(paymentMethod.cardType)} ⋯ ${paymentMethod.last4}`\n : '–'\n : '–'\n : planPeriodStart\n ? formatDate(new Date(planPeriodStart))\n : '–'\n }\n />\n </LineItems.Group>\n </LineItems.Root>\n <Button\n onClick={handleClose}\n localizationKey={localizationKeys('formButtonPrimary')}\n />\n </Drawer.Footer>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/components/Checkout/CheckoutForm.js CHANGED Viewed

@@ -137,14 +137,14 @@ const CheckoutFormElementsInternal = () => {
 	const { checkout } = __experimental_useCheckout();
 	const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;
 	const { data: paymentMethods } = usePaymentMethods();
-	const [paymentMethodSource, setPaymentMethodSource] = useState(() => paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? "existing" : "new");
+	const [paymentMethodSource, setPaymentMethodSource] = useState(() => paymentMethods.length > 0 || false ? "existing" : "new");
 	const showTabs = isImmediatePlanChange && needsPaymentMethod;
 	if (!plan) return null;
 	return /* @__PURE__ */ jsxs(Col, {
 		elementDescriptor: descriptors.checkoutFormElementsRoot,
 		gap: 4,
 		sx: (t) => ({ padding: t.space.$4 }),
-		children: [__BUILD_DISABLE_RHC__ ? null : /* @__PURE__ */ jsx(Fragment$1, { children: paymentMethods.length > 0 && showTabs && /* @__PURE__ */ jsxs(SegmentedControl.Root, {
+		children: [/* @__PURE__ */ jsx(Fragment$1, { children: paymentMethods.length > 0 && showTabs && /* @__PURE__ */ jsxs(SegmentedControl.Root, {
 			"aria-label": "Payment method source",
 			value: paymentMethodSource,
 			onChange: (value) => setPaymentMethodSource(value),
@@ -157,7 +157,7 @@ const CheckoutFormElementsInternal = () => {
 				value: "new",
 				text: localizationKeys("billing.addPaymentMethod__label")
 			})]
-		}) }), !needsPaymentMethod ? /* @__PURE__ */ jsx(FreeTrialButton, {}) : paymentMethodSource === "existing" ? /* @__PURE__ */ jsx(ExistingPaymentMethodForm, { paymentMethods }) : !__BUILD_DISABLE_RHC__ && paymentMethodSource === "new" && /* @__PURE__ */ jsx(AddPaymentMethodForCheckout, {})]
+		}) }), !needsPaymentMethod ? /* @__PURE__ */ jsx(FreeTrialButton, {}) : paymentMethodSource === "existing" ? /* @__PURE__ */ jsx(ExistingPaymentMethodForm, { paymentMethods }) : paymentMethodSource === "new" && /* @__PURE__ */ jsx(AddPaymentMethodForCheckout, {})]
 	});
 };
 const PayWithTestPaymentMethod = () => {