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

package/dist/{apiKeys_ui_30c3ec_1.0.0-snapshot.v20251204175016.js → apiKeys_ui_a492c4_1.0.0-snapshot.v20251211120550.js}

@@ -1 +1 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>N,APIKeysPage:()=>M});var a=i(4518),r=i(3610),n=i(6739),o=i(8909),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(8272),m=i(8920),h=i(2861),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),K=i(4317),D=i(4439),Y=i(7591),v=i(8080),F=i(7198);let b=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:n})=>(0,a.Y)(u.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(u.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(u.d8,{children:(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Th,{children:"Name"}),(0,a.Y)(u.Th,{children:"Last used"}),n&&(0,a.Y)(u.Th,{children:"Actions"})]})}),(0,a.Y)(u.NN,{children:t?(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:3,children:(0,a.Y)(u.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:m.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Td,{children:(0,a.FD)(u.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(u.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,h.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,h.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(u.Td,{children:(0,a.Y)(u.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(u.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),n&&(0,a.Y)(u.Td,{children:(0,a.Y)(v.o,{actions:[{label:(0,h.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(C,{})})]})}),C=()=>(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:4,children:(0,a.Y)(u.EY,{localizationKey:(0,h.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var $=i(2513),w=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),k=i(8640);let E=["never","1d","7d","30d","60d","90d","180d","1y"],A={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},G=e=>{if("never"===e||!e)return;let t=new Date,i=new Date(t);return A[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},P=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),n=E.map(e=>({value:e,label:r((0,h.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:n,value:e?.value??"",onChange:t,placeholder:r((0,h.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},R=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,$.D5)(),{showDescription:n=!1}=(0,d.l)(),o=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,k.tJ)("name","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyName"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,k.tJ)("apiKeyDescription","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=G(t?.value);if(!t?.value||!e)return s((0,h.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3*e);return s((0,h.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,h.G)("apiKeys.formTitle"),headerSubtitle:(0,h.G)("apiKeys.formHint"),elementDescriptor:m.$z.apiKeysCreateForm,children:(0,a.FD)(w.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value||void 0,secondsUntilExpiration:G(t?.value)})},children:[(0,a.FD)(u.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)(w.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:m.$z.apiKeysCreateFormNameInput,children:(0,a.Y)(w.l.PlainInput,{...c.props})}),(0,a.FD)(u.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:m.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(u.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(u.EY,{as:"span",variant:"subtitle",localizationKey:(0,h.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,h.G)("formFieldHintText__optional")})]}),(0,a.Y)(P,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:m.$z.apiKeysCreateFormExpirationCaption})]})]}),n&&(0,a.Y)(u.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)(w.l.ControlRow,{elementId:y.id,elementDescriptor:m.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)(w.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,h.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:o.isLoading,elementDescriptor:m.$z.apiKeysCreateFormSubmitButton})]})})},O=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),L=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),M=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,n.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[v,F]=(0,l.useState)(""),C=(0,K.d)(v,500).trim(),{data:$,isLoading:w,isFetching:I,page:z,fetchPage:S,pageCount:T,count:k,revalidate:E}=(0,o.hZ)({subject:e,pageSize:t??10,query:C,keepPreviousData:!0,enabled:!d||c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let n=(0,l.useRef)(e);(0,l.useEffect)(()=>{n.current!==e&&(n.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:C,page:z,pageCount:T,isFetching:I,fetchPage:S});let A=k>0?Math.max(0,(z-1)*(t??10))+1:0,G=Math.min(z*(t??10),k),P=(0,x.f0)(),M=(0,o.ho)(),[N,B]=(0,l.useState)(null),{t:W}=(0,p._)(),[j,J]=(0,l.useState)(!1),[U,H]=(0,l.useState)(""),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(!1),V=async t=>{try{P.setLoading();let i=await M.apiKeys.create({...t,subject:e});E(),P.setError(void 0),Q(!0),B(i)}catch(e){(0,r.$R)(e)&&409===e.status&&P.setError("API Key name already exists")}finally{P.setIdle()}};return(0,a.FD)(u.fv,{gap:4,sx:{width:"100%"},elementDescriptor:m.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(u.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:m.$z.apiKeysHeader,children:[(0,a.Y)(u.az,{elementDescriptor:m.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:W((0,h.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(u.In,{icon:D.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:v,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:m.$z.apiKeysSearchInput})}),(d&&y||!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(u.$n,{variant:"solid",localizationKey:(0,h.G)("apiKeys.action__add"),elementDescriptor:m.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(u.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(R,{onCreate:V})})})}),(0,a.Y)(L,{isOpen:Z,onOpen:()=>Q(!0),onClose:()=>Q(!1),apiKeyName:N?.name||"",apiKeySecret:N?.secret||"",modalRoot:i})]}),(0,a.Y)(b,{rows:$,isLoading:w,onRevoke:(e,t)=>{H(e),X(t),J(!0)},elementDescriptor:m.$z.apiKeysTable,canManageAPIKeys:d&&y||!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:k,startingRow:A,endingRow:G}}),(0,a.Y)(O,{isOpen:j,onOpen:()=>J(!0),onClose:()=>{H(""),X(""),J(!1)},apiKeyID:U,apiKeyName:q,onRevokeSuccess:E,modalRoot:i})]})},N=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,o.Jd)(),i=(0,o.Wf)(),r=i?.organization?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(M,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>n,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),n=()=>{let e=(0,a.useContext)(r);if(!e||"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>N,APIKeysPage:()=>M});var a=i(4518),r=i(3610),n=i(6739),o=i(5543),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(8272),m=i(8920),h=i(2861),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),K=i(4317),D=i(4439),Y=i(7591),v=i(8080),F=i(7198);let b=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:n})=>(0,a.Y)(u.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(u.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(u.d8,{children:(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Th,{children:"Name"}),(0,a.Y)(u.Th,{children:"Last used"}),n&&(0,a.Y)(u.Th,{children:"Actions"})]})}),(0,a.Y)(u.NN,{children:t?(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:3,children:(0,a.Y)(u.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:m.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Td,{children:(0,a.FD)(u.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(u.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,h.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,h.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(u.Td,{children:(0,a.Y)(u.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(u.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),n&&(0,a.Y)(u.Td,{children:(0,a.Y)(v.o,{actions:[{label:(0,h.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(C,{})})]})}),C=()=>(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:4,children:(0,a.Y)(u.EY,{localizationKey:(0,h.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var $=i(2513),w=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),k=i(8640);let E=["never","1d","7d","30d","60d","90d","180d","1y"],A={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},G=e=>{if("never"===e||!e)return;let t=new Date,i=new Date(t);return A[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},P=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),n=E.map(e=>({value:e,label:r((0,h.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:n,value:e?.value??"",onChange:t,placeholder:r((0,h.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},R=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,$.D5)(),{showDescription:n=!1}=(0,d.l)(),o=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,k.tJ)("name","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyName"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,k.tJ)("apiKeyDescription","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=G(t?.value);if(!t?.value||!e)return s((0,h.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3*e);return s((0,h.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,h.G)("apiKeys.formTitle"),headerSubtitle:(0,h.G)("apiKeys.formHint"),elementDescriptor:m.$z.apiKeysCreateForm,children:(0,a.FD)(w.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value||void 0,secondsUntilExpiration:G(t?.value)})},children:[(0,a.FD)(u.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)(w.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:m.$z.apiKeysCreateFormNameInput,children:(0,a.Y)(w.l.PlainInput,{...c.props})}),(0,a.FD)(u.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:m.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(u.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(u.EY,{as:"span",variant:"subtitle",localizationKey:(0,h.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,h.G)("formFieldHintText__optional")})]}),(0,a.Y)(P,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:m.$z.apiKeysCreateFormExpirationCaption})]})]}),n&&(0,a.Y)(u.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)(w.l.ControlRow,{elementId:y.id,elementDescriptor:m.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)(w.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,h.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:o.isLoading,elementDescriptor:m.$z.apiKeysCreateFormSubmitButton})]})})},O=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),L=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),M=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,n.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[v,F]=(0,l.useState)(""),C=(0,K.d)(v,500).trim(),{data:$,isLoading:w,isFetching:I,page:z,fetchPage:S,pageCount:T,count:k,revalidate:E}=(0,o.hZ)({subject:e,pageSize:t??10,query:C,keepPreviousData:!0,enabled:!d||c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let n=(0,l.useRef)(e);(0,l.useEffect)(()=>{n.current!==e&&(n.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:C,page:z,pageCount:T,isFetching:I,fetchPage:S});let A=k>0?Math.max(0,(z-1)*(t??10))+1:0,G=Math.min(z*(t??10),k),P=(0,x.f0)(),M=(0,o.ho)(),[N,B]=(0,l.useState)(null),{t:W}=(0,p._)(),[j,J]=(0,l.useState)(!1),[U,H]=(0,l.useState)(""),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(!1),V=async t=>{try{P.setLoading();let i=await M.apiKeys.create({...t,subject:e});E(),P.setError(void 0),Q(!0),B(i)}catch(e){(0,r.$R)(e)&&409===e.status&&P.setError("API Key name already exists")}finally{P.setIdle()}};return(0,a.FD)(u.fv,{gap:4,sx:{width:"100%"},elementDescriptor:m.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(u.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:m.$z.apiKeysHeader,children:[(0,a.Y)(u.az,{elementDescriptor:m.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:W((0,h.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(u.In,{icon:D.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:v,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:m.$z.apiKeysSearchInput})}),(d&&y||!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(u.$n,{variant:"solid",localizationKey:(0,h.G)("apiKeys.action__add"),elementDescriptor:m.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(u.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(R,{onCreate:V})})})}),(0,a.Y)(L,{isOpen:Z,onOpen:()=>Q(!0),onClose:()=>Q(!1),apiKeyName:N?.name||"",apiKeySecret:N?.secret||"",modalRoot:i})]}),(0,a.Y)(b,{rows:$,isLoading:w,onRevoke:(e,t)=>{H(e),X(t),J(!0)},elementDescriptor:m.$z.apiKeysTable,canManageAPIKeys:d&&y||!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:k,startingRow:A,endingRow:G}}),(0,a.Y)(O,{isOpen:j,onOpen:()=>J(!0),onClose:()=>{H(""),X(""),J(!1)},apiKeyID:U,apiKeyName:q,onRevokeSuccess:E,modalRoot:i})]})},N=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,o.Jd)(),i=(0,o.Wf)(),r=i?.organization?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(M,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>n,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),n=()=>{let e=(0,a.useContext)(r);if(!e||"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);

package/dist/checkout_ui_a492c4_1.0.0-snapshot.v20251211120550.js

@@ -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(5543),c=r(5074),s=r(2366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let i=(0,c.useMemo)(()=>{if(e.portalRoot)return;let i=e.newSubscriptionRedirectUrl||t.buildNewSubscriptionRedirectUrl?.();return(0,a.vU)(r?.allowedRedirectOrigins,window.location.origin)(i)?i:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,r?.allowedRedirectOrigins]),{componentName:o,...n}=e;return{...n,componentName:o,newSubscriptionRedirectUrl:i}};var p=r(4607),h=r(2861),m=r(8272),g=r(9436),y=r(137),f=r(8920),$=r(6580),b=r(4091),Y=r(359),D=r(4964);let x=e=>e[0].toUpperCase()+e.slice(1),w=(e,t,r)=>e+(t-e)*r,k=({positionX:e,positionY:t})=>{let r=(0,c.useRef)(null),[o,n]=(0,c.useState)({x:256,y:256}),a="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!a)return;let i=()=>{n(r=>({x:w(r.x,e,.15),y:w(r.y,t,.15)})),r.current=requestAnimationFrame(i)};return r.current=requestAnimationFrame(i),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a]);let l=(0,c.useId)(),s=(0,c.useId)(),d=(0,c.useId)();return(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,i.FD)("defs",{children:[(0,i.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,i.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,i.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,i.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,i.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:l},{r:162.5,maskStart:15,maskEnd:85,id:s},{r:100,maskStart:20,maskEnd:80,id:d}].map(({maskStart:e,maskEnd:t,id:r})=>(0,i.FD)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,i.Y)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,i.Y)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,i.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:l},{r:162.5,id:s},{r:100,id:d}].map(({r:e,id:t})=>(0,i.Y)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,i.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,i.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),a&&(0,i.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:o.x-128,y:o.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},v=()=>{let e=(0,D.r)(),{setIsOpen:t}=(0,o.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:n}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=n,[w,v]=(0,c.useState)({x:256,y:256}),F=(0,Y.j)(),{animations:_}=(0,$.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,i.FD)(i.FK,{children:[(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.L9,{elementDescriptor:f.$z.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top,o=t.width;o>0?v({x:r/o*512,y:i/o*512}):v({x:256,y:256})}},children:[(0,i.Y)(k,{positionX:w.x,positionY:w.y}),(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:G?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,i.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,i.Y)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:S?`check ${b.wz.drawer}ms ${b._8.bezier} forwards ${b.wz.slow}ms`:"none",...!S&&{strokeDashoffset:"0"}}})}),(0,i.Y)("style",{children:`
+              @keyframes check {
+                0% {
+                  stroke-dashoffset: 1;
+                }
+                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(5543),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);

package/dist/components/Checkout/CheckoutComplete.js

@@ -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

@@ -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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"}
+{"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

@@ -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 = () => {

package/dist/components/Checkout/CheckoutForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' | 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n  const { checkout } = useCheckout();\n\n  const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n  if (!plan) {\n    return null;\n  }\n\n  const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;\n  const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n  const showDowngradeInfo = !isImmediatePlanChange;\n\n  const fee =\n    planPeriod === 'month'\n      ? plan.fee\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        plan.annualMonthlyFee!;\n\n  return (\n    <Drawer.Body>\n      <Box\n        elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n        sx={t => ({\n          padding: t.space.$4,\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n        })}\n      >\n        <LineItems.Root>\n          <LineItems.Group>\n            <LineItems.Title\n              title={plan.name}\n              description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              badge={\n                plan.freeTrialEnabled && freeTrialEndsAt ? (\n                  <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n                ) : null\n              }\n            />\n            <LineItems.Description\n              prefix={planPeriod === 'annual' ? 'x12' : undefined}\n              text={`${fee.currencySymbol}${fee.amountFormatted}`}\n              suffix={localizationKeys('billing.checkout.perMonth')}\n            />\n          </LineItems.Group>\n          <LineItems.Group\n            borderTop\n            variant='tertiary'\n          >\n            <LineItems.Title title={localizationKeys('billing.subtotal')} />\n            <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n          </LineItems.Group>\n          {showCredits && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n              <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n          {showPastDue && (\n            <LineItems.Group variant='tertiary'>\n              <Tooltip.Root>\n                <Tooltip.Trigger>\n                  <LineItems.Title\n                    title={localizationKeys('billing.pastDue')}\n                    icon={InformationCircle}\n                  />\n                </Tooltip.Trigger>\n                <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n              </Tooltip.Root>\n              <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n\n          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title\n                title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n                  days: plan.freeTrialDays,\n                })}\n              />\n              <LineItems.Description\n                text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n\n          <LineItems.Group borderTop>\n            <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n            <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n          </LineItems.Group>\n        </LineItems.Root>\n      </Box>\n\n      {showDowngradeInfo && (\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            paddingBlockStart: t.space.$4,\n            paddingInline: t.space.$4,\n          })}\n        >\n          <Text\n            localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n            variant='caption'\n            colorScheme='secondary'\n          />\n        </Box>\n      )}\n\n      <CheckoutFormElements />\n    </Drawer.Body>\n  );\n});\n\nconst useCheckoutMutations = () => {\n  const { onSubscriptionComplete } = useCheckoutContext();\n  const { checkout } = useCheckout();\n  const card = useCardState();\n\n  if (checkout.status !== 'needs_confirmation') {\n    throw new Error('Checkout not found');\n  }\n\n  const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n    card.setLoading();\n    card.setError(undefined);\n\n    const { error } = await checkout.confirm(params);\n\n    if (error) {\n      handleError(error, [], card.setError);\n    } else {\n      onSubscriptionComplete?.();\n    }\n    card.setIdle();\n  };\n\n  const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    const data = new FormData(e.currentTarget);\n    const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n    return confirmCheckout({\n      paymentMethodId,\n    });\n  };\n\n  const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return confirmCheckout({});\n  };\n\n  const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n  const payWithTestCard = () =>\n    confirmCheckout({\n      gateway: 'stripe',\n      useTestCard: true,\n    });\n\n  return {\n    payWithExistingPaymentMethod,\n    addPaymentMethodAndPay,\n    payWithTestCard,\n    payWithoutPaymentMethod,\n  };\n};\n\nconst CheckoutFormElements = () => {\n  const { checkout } = useCheckout();\n  const { plan } = checkout;\n\n  const { isLoading } = usePaymentMethods();\n\n  if (!plan) {\n    return null;\n  }\n\n  if (isLoading) {\n    return (\n      <Spinner\n        sx={{\n          margin: 'auto',\n        }}\n      />\n    );\n  }\n\n  return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n  const { checkout } = useCheckout();\n  const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n  const { data: paymentMethods } = usePaymentMethods();\n\n  const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n    paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n  );\n\n  const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n  if (!plan) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.checkoutFormElementsRoot}\n      gap={4}\n      sx={t => ({ padding: t.space.$4 })}\n    >\n      {__BUILD_DISABLE_RHC__ ? null : (\n        <>\n          {paymentMethods.length > 0 && showTabs && (\n            <SegmentedControl.Root\n              aria-label='Payment method source'\n              value={paymentMethodSource}\n              onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n              size='lg'\n              fullWidth\n            >\n              <SegmentedControl.Button\n                value='existing'\n                text={localizationKeys('billing.paymentMethods__label')}\n              />\n              <SegmentedControl.Button\n                value='new'\n                text={localizationKeys('billing.addPaymentMethod__label')}\n              />\n            </SegmentedControl.Root>\n          )}\n        </>\n      )}\n\n      {!needsPaymentMethod ? (\n        <FreeTrialButton />\n      ) : paymentMethodSource === 'existing' ? (\n        <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n      ) : (\n        !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n      )}\n    </Col>\n  );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n  const { isLoading } = useCardState();\n  const { payWithTestCard } = useCheckoutMutations();\n\n  return (\n    <Box\n      sx={t => ({\n        background: t.colors.$neutralAlpha50,\n        padding: t.space.$2x5,\n        borderRadius: t.radii.$md,\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha100,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: t.space.$2,\n        position: 'relative',\n      })}\n    >\n      <Box\n        sx={t => ({\n          position: 'absolute',\n          inset: 0,\n          background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n          maskImage: `linear-gradient(transparent 20%, black)`,\n          pointerEvents: 'none',\n        })}\n      />\n      <Flex\n        sx={t => ({\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexDirection: 'column',\n          rowGap: t.space.$2,\n        })}\n      >\n        <Text\n          sx={t => ({\n            color: t.colors.$warning500,\n            fontWeight: t.fontWeights.$semibold,\n          })}\n          localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n        />\n        <Button\n          type='button'\n          block\n          variant='bordered'\n          localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n          colorScheme='secondary'\n          isLoading={isLoading}\n          onClick={payWithTestCard}\n        />\n      </Flex>\n    </Box>\n  );\n};\n\nconst useSubmitLabel = () => {\n  const { checkout } = useCheckout();\n  const { status, freeTrialEndsAt, totals } = checkout;\n\n  if (status === 'needs_initialization') {\n    throw new Error('Clerk: Invalid state');\n  }\n\n  if (freeTrialEndsAt) {\n    return localizationKeys('billing.startFreeTrial');\n  }\n\n  if (totals.totalDueNow.amount > 0) {\n    return localizationKeys('billing.pay', {\n      amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n    });\n  }\n\n  return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n  const { for: _for } = useCheckoutContext();\n  const { payWithoutPaymentMethod } = useCheckoutMutations();\n  const card = useCardState();\n\n  return (\n    <Form\n      onSubmit={payWithoutPaymentMethod}\n      sx={formProps}\n    >\n      <Card.Alert>{card.error}</Card.Alert>\n      <CheckoutSubmitButton />\n    </Form>\n  );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n  const { addPaymentMethodAndPay } = useCheckoutMutations();\n  const submitLabel = useSubmitLabel();\n  const { checkout } = useCheckout();\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={addPaymentMethodAndPay}\n      checkout={checkout}\n    >\n      <DevOnly>\n        <PayWithTestPaymentMethod />\n      </DevOnly>\n\n      <AddPaymentMethod.FormButton text={submitLabel} />\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n  const card = useCardState();\n  const submitLabel = useSubmitLabel();\n\n  return (\n    <Button\n      type='submit'\n      colorScheme='primary'\n      size='sm'\n      textVariant={'buttonLarge'}\n      sx={{\n        width: '100%',\n      }}\n      isLoading={card.isLoading}\n      localizationKey={submitLabel}\n      {...props}\n    />\n  );\n};\n\nconst formProps: ThemableCssProp = t => ({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n  ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n    const { checkout } = useCheckout();\n    const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n    const { payWithExistingPaymentMethod } = useCheckoutMutations();\n    const card = useCardState();\n    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n      RemoveFunctions<BillingPaymentMethodResource> | undefined\n    >(paymentMethod || paymentMethods.find(p => p.isDefault));\n\n    const options = useMemo(() => {\n      return paymentMethods.map(method => {\n        const label =\n          method.paymentType !== 'card'\n            ? method.paymentType\n              ? `${capitalize(method.paymentType)}`\n              : '–'\n            : method.cardType\n              ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n              : '–';\n\n        return {\n          value: method.id,\n          label,\n        };\n      });\n    }, [paymentMethods]);\n\n    const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n    return (\n      <Form\n        onSubmit={payWithExistingPaymentMethod}\n        sx={formProps}\n      >\n        {showPaymentMethods ? (\n          <Select\n            elementId='paymentMethod'\n            options={options}\n            value={selectedPaymentMethod?.id || null}\n            onChange={option => {\n              const paymentMethod = paymentMethods.find(source => source.id === option.value);\n              setSelectedPaymentMethod(paymentMethod);\n            }}\n            portal\n          >\n            {/*Store value inside an input in order to be accessible as form data*/}\n            <input\n              name={HIDDEN_INPUT_NAME}\n              type='hidden'\n              value={selectedPaymentMethod?.id}\n            />\n            <SelectButton\n              icon={ChevronUpDown}\n              sx={t => ({\n                justifyContent: 'space-between',\n                backgroundColor: t.colors.$colorBackground,\n              })}\n            >\n              {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n            </SelectButton>\n            <SelectOptionList\n              sx={t => ({\n                paddingBlock: t.space.$1,\n                color: t.colors.$colorForeground,\n              })}\n            />\n          </Select>\n        ) : (\n          <input\n            name={HIDDEN_INPUT_NAME}\n            type='hidden'\n            value={selectedPaymentMethod?.id}\n          />\n        )}\n        <Card.Alert>{card.error}</Card.Alert>\n        <CheckoutSubmitButton />\n      </Form>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' | 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n  const { checkout } = useCheckout();\n\n  const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n  if (!plan) {\n    return null;\n  }\n\n  const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;\n  const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n  const showDowngradeInfo = !isImmediatePlanChange;\n\n  const fee =\n    planPeriod === 'month'\n      ? plan.fee\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        plan.annualMonthlyFee!;\n\n  return (\n    <Drawer.Body>\n      <Box\n        elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n        sx={t => ({\n          padding: t.space.$4,\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n        })}\n      >\n        <LineItems.Root>\n          <LineItems.Group>\n            <LineItems.Title\n              title={plan.name}\n              description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              badge={\n                plan.freeTrialEnabled && freeTrialEndsAt ? (\n                  <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n                ) : null\n              }\n            />\n            <LineItems.Description\n              prefix={planPeriod === 'annual' ? 'x12' : undefined}\n              text={`${fee.currencySymbol}${fee.amountFormatted}`}\n              suffix={localizationKeys('billing.checkout.perMonth')}\n            />\n          </LineItems.Group>\n          <LineItems.Group\n            borderTop\n            variant='tertiary'\n          >\n            <LineItems.Title title={localizationKeys('billing.subtotal')} />\n            <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n          </LineItems.Group>\n          {showCredits && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n              <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n          {showPastDue && (\n            <LineItems.Group variant='tertiary'>\n              <Tooltip.Root>\n                <Tooltip.Trigger>\n                  <LineItems.Title\n                    title={localizationKeys('billing.pastDue')}\n                    icon={InformationCircle}\n                  />\n                </Tooltip.Trigger>\n                <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n              </Tooltip.Root>\n              <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n\n          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title\n                title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n                  days: plan.freeTrialDays,\n                })}\n              />\n              <LineItems.Description\n                text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n\n          <LineItems.Group borderTop>\n            <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n            <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n          </LineItems.Group>\n        </LineItems.Root>\n      </Box>\n\n      {showDowngradeInfo && (\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            paddingBlockStart: t.space.$4,\n            paddingInline: t.space.$4,\n          })}\n        >\n          <Text\n            localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n            variant='caption'\n            colorScheme='secondary'\n          />\n        </Box>\n      )}\n\n      <CheckoutFormElements />\n    </Drawer.Body>\n  );\n});\n\nconst useCheckoutMutations = () => {\n  const { onSubscriptionComplete } = useCheckoutContext();\n  const { checkout } = useCheckout();\n  const card = useCardState();\n\n  if (checkout.status !== 'needs_confirmation') {\n    throw new Error('Checkout not found');\n  }\n\n  const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n    card.setLoading();\n    card.setError(undefined);\n\n    const { error } = await checkout.confirm(params);\n\n    if (error) {\n      handleError(error, [], card.setError);\n    } else {\n      onSubscriptionComplete?.();\n    }\n    card.setIdle();\n  };\n\n  const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    const data = new FormData(e.currentTarget);\n    const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n    return confirmCheckout({\n      paymentMethodId,\n    });\n  };\n\n  const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return confirmCheckout({});\n  };\n\n  const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n  const payWithTestCard = () =>\n    confirmCheckout({\n      gateway: 'stripe',\n      useTestCard: true,\n    });\n\n  return {\n    payWithExistingPaymentMethod,\n    addPaymentMethodAndPay,\n    payWithTestCard,\n    payWithoutPaymentMethod,\n  };\n};\n\nconst CheckoutFormElements = () => {\n  const { checkout } = useCheckout();\n  const { plan } = checkout;\n\n  const { isLoading } = usePaymentMethods();\n\n  if (!plan) {\n    return null;\n  }\n\n  if (isLoading) {\n    return (\n      <Spinner\n        sx={{\n          margin: 'auto',\n        }}\n      />\n    );\n  }\n\n  return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n  const { checkout } = useCheckout();\n  const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n  const { data: paymentMethods } = usePaymentMethods();\n\n  const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n    paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n  );\n\n  const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n  if (!plan) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.checkoutFormElementsRoot}\n      gap={4}\n      sx={t => ({ padding: t.space.$4 })}\n    >\n      {__BUILD_DISABLE_RHC__ ? null : (\n        <>\n          {paymentMethods.length > 0 && showTabs && (\n            <SegmentedControl.Root\n              aria-label='Payment method source'\n              value={paymentMethodSource}\n              onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n              size='lg'\n              fullWidth\n            >\n              <SegmentedControl.Button\n                value='existing'\n                text={localizationKeys('billing.paymentMethods__label')}\n              />\n              <SegmentedControl.Button\n                value='new'\n                text={localizationKeys('billing.addPaymentMethod__label')}\n              />\n            </SegmentedControl.Root>\n          )}\n        </>\n      )}\n\n      {!needsPaymentMethod ? (\n        <FreeTrialButton />\n      ) : paymentMethodSource === 'existing' ? (\n        <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n      ) : (\n        !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n      )}\n    </Col>\n  );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n  const { isLoading } = useCardState();\n  const { payWithTestCard } = useCheckoutMutations();\n\n  return (\n    <Box\n      sx={t => ({\n        background: t.colors.$neutralAlpha50,\n        padding: t.space.$2x5,\n        borderRadius: t.radii.$md,\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha100,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: t.space.$2,\n        position: 'relative',\n      })}\n    >\n      <Box\n        sx={t => ({\n          position: 'absolute',\n          inset: 0,\n          background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n          maskImage: `linear-gradient(transparent 20%, black)`,\n          pointerEvents: 'none',\n        })}\n      />\n      <Flex\n        sx={t => ({\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexDirection: 'column',\n          rowGap: t.space.$2,\n        })}\n      >\n        <Text\n          sx={t => ({\n            color: t.colors.$warning500,\n            fontWeight: t.fontWeights.$semibold,\n          })}\n          localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n        />\n        <Button\n          type='button'\n          block\n          variant='bordered'\n          localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n          colorScheme='secondary'\n          isLoading={isLoading}\n          onClick={payWithTestCard}\n        />\n      </Flex>\n    </Box>\n  );\n};\n\nconst useSubmitLabel = () => {\n  const { checkout } = useCheckout();\n  const { status, freeTrialEndsAt, totals } = checkout;\n\n  if (status === 'needs_initialization') {\n    throw new Error('Clerk: Invalid state');\n  }\n\n  if (freeTrialEndsAt) {\n    return localizationKeys('billing.startFreeTrial');\n  }\n\n  if (totals.totalDueNow.amount > 0) {\n    return localizationKeys('billing.pay', {\n      amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n    });\n  }\n\n  return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n  const { for: _for } = useCheckoutContext();\n  const { payWithoutPaymentMethod } = useCheckoutMutations();\n  const card = useCardState();\n\n  return (\n    <Form\n      onSubmit={payWithoutPaymentMethod}\n      sx={formProps}\n    >\n      <Card.Alert>{card.error}</Card.Alert>\n      <CheckoutSubmitButton />\n    </Form>\n  );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n  const { addPaymentMethodAndPay } = useCheckoutMutations();\n  const submitLabel = useSubmitLabel();\n  const { checkout } = useCheckout();\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={addPaymentMethodAndPay}\n      checkout={checkout}\n    >\n      <DevOnly>\n        <PayWithTestPaymentMethod />\n      </DevOnly>\n\n      <AddPaymentMethod.FormButton text={submitLabel} />\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n  const card = useCardState();\n  const submitLabel = useSubmitLabel();\n\n  return (\n    <Button\n      type='submit'\n      colorScheme='primary'\n      size='sm'\n      textVariant={'buttonLarge'}\n      sx={{\n        width: '100%',\n      }}\n      isLoading={card.isLoading}\n      localizationKey={submitLabel}\n      {...props}\n    />\n  );\n};\n\nconst formProps: ThemableCssProp = t => ({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n  ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n    const { checkout } = useCheckout();\n    const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n    const { payWithExistingPaymentMethod } = useCheckoutMutations();\n    const card = useCardState();\n    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n      RemoveFunctions<BillingPaymentMethodResource> | undefined\n    >(paymentMethod || paymentMethods.find(p => p.isDefault));\n\n    const options = useMemo(() => {\n      return paymentMethods.map(method => {\n        const label =\n          method.paymentType !== 'card'\n            ? method.paymentType\n              ? `${capitalize(method.paymentType)}`\n              : '–'\n            : method.cardType\n              ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n              : '–';\n\n        return {\n          value: method.id,\n          label,\n        };\n      });\n    }, [paymentMethods]);\n\n    const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n    return (\n      <Form\n        onSubmit={payWithExistingPaymentMethod}\n        sx={formProps}\n      >\n        {showPaymentMethods ? (\n          <Select\n            elementId='paymentMethod'\n            options={options}\n            value={selectedPaymentMethod?.id || null}\n            onChange={option => {\n              const paymentMethod = paymentMethods.find(source => source.id === option.value);\n              setSelectedPaymentMethod(paymentMethod);\n            }}\n            portal\n          >\n            {/*Store value inside an input in order to be accessible as form data*/}\n            <input\n              name={HIDDEN_INPUT_NAME}\n              type='hidden'\n              value={selectedPaymentMethod?.id}\n            />\n            <SelectButton\n              icon={ChevronUpDown}\n              sx={t => ({\n                justifyContent: 'space-between',\n                backgroundColor: t.colors.$colorBackground,\n              })}\n            >\n              {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n            </SelectButton>\n            <SelectOptionList\n              sx={t => ({\n                paddingBlock: t.space.$1,\n                color: t.colors.$colorForeground,\n              })}\n            />\n          </Select>\n        ) : (\n          <input\n            name={HIDDEN_INPUT_NAME}\n            type='hidden'\n            value={selectedPaymentMethod?.id}\n          />\n        )}\n        <Card.Alert>{card.error}</Card.Alert>\n        <CheckoutSubmitButton />\n      </Form>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/Checkout/CheckoutPage.js

@@ -29,7 +29,9 @@ const FetchStatus = ({ children, status }) => {
 	const { errors, fetchStatus } = __experimental_useCheckout();
 	if (useMemo(() => {
 		if (errors.global) {
-			const errorCodes = errors.global.map((e) => e.code);
+			const errorCodes = errors.global.flatMap((e) => {
+				if (e.isClerkApiResponseError()) return e.errors.map((e$1) => e$1.code);
+			});
 			if (errorCodes.includes("missing_payer_email")) return "missing_payer_email";
 			if (errorCodes.includes("invalid_plan_change")) return "invalid_plan_change";
 			return "generic_error";

package/dist/components/Checkout/CheckoutPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n  const { checkout } = useCheckout();\n\n  useEffect(() => {\n    void checkout.start();\n  }, []);\n  return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n  const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n  return (\n    <CheckoutProvider\n      for={_for}\n      planId={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planId!\n      }\n      planPeriod={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planPeriod!\n      }\n    >\n      <Initiator />\n      {children}\n    </CheckoutProvider>\n  );\n};\n\nconst Stage = ({\n  children,\n  name,\n}: {\n  children: React.ReactNode;\n  name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n  const { checkout } = useCheckout();\n  if (checkout.status !== name) {\n    return null;\n  }\n  return children;\n};\n\nconst FetchStatus = ({\n  children,\n  status,\n}: {\n  children: React.ReactNode;\n  status: 'idle' | 'fetching' | 'generic_error' | 'invalid_plan_change' | 'missing_payer_email';\n}) => {\n  const { errors, fetchStatus } = useCheckout();\n\n  const internalFetchStatus = useMemo(() => {\n    if (errors.global) {\n      const errorCodes = errors.global.map(e => e.code);\n\n      if (errorCodes.includes('missing_payer_email')) {\n        return 'missing_payer_email';\n      }\n\n      if (errorCodes.includes('invalid_plan_change')) {\n        return 'invalid_plan_change';\n      }\n      return 'generic_error';\n    }\n\n    return fetchStatus;\n  }, [fetchStatus]);\n\n  if (internalFetchStatus !== status) {\n    return null;\n  }\n  return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;AAmB7C,KAjB4B,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,KAAI,MAAK,EAAE,KAAK;AAEjD,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}
+{"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider","e"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n  const { checkout } = useCheckout();\n\n  useEffect(() => {\n    void checkout.start();\n  }, []);\n  return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n  const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n  return (\n    <CheckoutProvider\n      for={_for}\n      planId={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planId!\n      }\n      planPeriod={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planPeriod!\n      }\n    >\n      <Initiator />\n      {children}\n    </CheckoutProvider>\n  );\n};\n\nconst Stage = ({\n  children,\n  name,\n}: {\n  children: React.ReactNode;\n  name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n  const { checkout } = useCheckout();\n  if (checkout.status !== name) {\n    return null;\n  }\n  return children;\n};\n\nconst FetchStatus = ({\n  children,\n  status,\n}: {\n  children: React.ReactNode;\n  status: 'idle' | 'fetching' | 'generic_error' | 'invalid_plan_change' | 'missing_payer_email';\n}) => {\n  const { errors, fetchStatus } = useCheckout();\n\n  const internalFetchStatus = useMemo(() => {\n    if (errors.global) {\n      const errorCodes = errors.global.flatMap(e => {\n        if (e.isClerkApiResponseError()) {\n          return e.errors.map(e => e.code);\n        }\n      });\n\n      if (errorCodes.includes('missing_payer_email')) {\n        return 'missing_payer_email';\n      }\n\n      if (errorCodes.includes('invalid_plan_change')) {\n        return 'invalid_plan_change';\n      }\n      return 'generic_error';\n    }\n\n    return fetchStatus;\n  }, [fetchStatus]);\n\n  if (internalFetchStatus !== status) {\n    return null;\n  }\n  return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;AAuB7C,KArB4B,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,SAAQ,MAAK;AAC5C,QAAI,EAAE,yBAAyB,CAC7B,QAAO,EAAE,OAAO,KAAI,QAAKE,IAAE,KAAK;KAElC;AAEF,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}

package/dist/components/Checkout/parts.js

@@ -33,7 +33,7 @@ const GenericError = () => {
 const InvalidPlanScreen = () => {
 	const { planPeriod } = useCheckoutContext();
 	const { errors } = __experimental_useCheckout();
-	const InvalidPlanError = errors?.global?.find((e) => e.code === "invalid_plan_change");
+	const InvalidPlanError = errors?.global?.filter((e) => e.isClerkApiResponseError()).flatMap((e) => e.errors).find((e) => e.code === "invalid_plan_change");
 	if (!InvalidPlanError) return null;
 	const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};
 	return /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsxs(Flex, {

package/dist/components/Checkout/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n  const { errors } = useCheckout();\n\n  const { translateError } = useLocalizations();\n  const { t } = useLocalizations();\n  return (\n    <Drawer.Body>\n      <Flex\n        align={'center'}\n        justify={'center'}\n        sx={t => ({\n          height: '100%',\n          padding: t.space.$4,\n          fontSize: t.fontSizes.$md,\n        })}\n      >\n        <Alert\n          variant='danger'\n          colorScheme='danger'\n        >\n          {errors.global\n            ? translateError(errors.global[0])\n            : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n        </Alert>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const InvalidPlanScreen = () => {\n  const { planPeriod } = useCheckoutContext();\n  const { errors } = useCheckout();\n\n  const InvalidPlanError = errors?.global?.find(e => e.code === 'invalid_plan_change');\n  if (!InvalidPlanError) {\n    return null;\n  }\n\n  // @ts-expect-error - meta is not a property of FieldError\n  const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};\n\n  return (\n    <Drawer.Body>\n      <Flex\n        gap={4}\n        direction='col'\n      >\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            padding: t.space.$4,\n            borderBottomWidth: t.borderWidths.$normal,\n            borderBottomStyle: t.borderStyles.$solid,\n            borderBottomColor: t.colors.$borderAlpha100,\n          })}\n        >\n          <LineItems.Root>\n            <LineItems.Group>\n              <LineItems.Title\n                title={planFromError.name}\n                description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              />\n              <LineItems.Description\n                prefix={planPeriod === 'annual' ? 'x12' : undefined}\n                text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n                suffix={localizationKeys('billing.checkout.perMonth')}\n              />\n            </LineItems.Group>\n          </LineItems.Root>\n        </Box>\n        <Box sx={t => ({ padding: t.space.$4 })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={\n              isPlanUpgradePossible\n                ? localizationKeys('billing.cannotSubscribeMonthly')\n                : localizationKeys('billing.cannotSubscribeUnrecoverable')\n            }\n          />\n        </Box>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const AddEmailForm = () => {\n  const { checkout } = useCheckout();\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <Drawer.Body>\n      <Box\n        sx={t => ({\n          padding: t.space.$4,\n        })}\n      >\n        <EmailForm\n          title={localizationKeys('billing.checkout.emailForm.title')}\n          subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n          onSuccess={() => void checkout.start()}\n          onReset={() => setIsOpen(false)}\n          disableAutoFocus\n        />\n      </Box>\n    </Drawer.Body>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,QAAQ,MAAK,MAAK,EAAE,SAAS,sBAAsB;AACpF,KAAI,CAAC,iBACH,QAAO;CAIT,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}
+{"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n  const { errors } = useCheckout();\n\n  const { translateError } = useLocalizations();\n  const { t } = useLocalizations();\n  return (\n    <Drawer.Body>\n      <Flex\n        align={'center'}\n        justify={'center'}\n        sx={t => ({\n          height: '100%',\n          padding: t.space.$4,\n          fontSize: t.fontSizes.$md,\n        })}\n      >\n        <Alert\n          variant='danger'\n          colorScheme='danger'\n        >\n          {errors.global\n            ? translateError(errors.global[0])\n            : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n        </Alert>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const InvalidPlanScreen = () => {\n  const { planPeriod } = useCheckoutContext();\n  const { errors } = useCheckout();\n\n  const InvalidPlanError = errors?.global\n    ?.filter(e => e.isClerkApiResponseError())\n    .flatMap(e => e.errors)\n    .find(e => e.code === 'invalid_plan_change');\n\n  if (!InvalidPlanError) {\n    return null;\n  }\n\n  const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};\n\n  return (\n    <Drawer.Body>\n      <Flex\n        gap={4}\n        direction='col'\n      >\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            padding: t.space.$4,\n            borderBottomWidth: t.borderWidths.$normal,\n            borderBottomStyle: t.borderStyles.$solid,\n            borderBottomColor: t.colors.$borderAlpha100,\n          })}\n        >\n          <LineItems.Root>\n            <LineItems.Group>\n              <LineItems.Title\n                title={planFromError.name}\n                description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              />\n              <LineItems.Description\n                prefix={planPeriod === 'annual' ? 'x12' : undefined}\n                text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n                suffix={localizationKeys('billing.checkout.perMonth')}\n              />\n            </LineItems.Group>\n          </LineItems.Root>\n        </Box>\n        <Box sx={t => ({ padding: t.space.$4 })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={\n              isPlanUpgradePossible\n                ? localizationKeys('billing.cannotSubscribeMonthly')\n                : localizationKeys('billing.cannotSubscribeUnrecoverable')\n            }\n          />\n        </Box>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const AddEmailForm = () => {\n  const { checkout } = useCheckout();\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <Drawer.Body>\n      <Box\n        sx={t => ({\n          padding: t.space.$4,\n        })}\n      >\n        <EmailForm\n          title={localizationKeys('billing.checkout.emailForm.title')}\n          subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n          onSuccess={() => void checkout.start()}\n          onReset={() => setIsOpen(false)}\n          disableAutoFocus\n        />\n      </Box>\n    </Drawer.Body>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,QAC7B,QAAO,MAAK,EAAE,yBAAyB,CAAC,CACzC,SAAQ,MAAK,EAAE,OAAO,CACtB,MAAK,MAAK,EAAE,SAAS,sBAAsB;AAE9C,KAAI,CAAC,iBACH,QAAO;CAGT,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}

package/dist/components/GoogleOneTap/one-tap-start.js

@@ -4,7 +4,7 @@ import { useFetch } from "../../hooks/useFetch.js";
 import { useGoogleOneTapContext } from "../../contexts/components/GoogleOneTap.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { loadGIS } from "../../utils/one-tap.js";
-import { clerkUnsupportedEnvironmentWarning } from "@clerk/shared/internal/clerk-js/errors";
+import "@clerk/shared/internal/clerk-js/errors";
 import { useEffect, useRef } from "react";
 import { useClerk, useUser } from "@clerk/shared/react";
 
@@ -28,10 +28,6 @@ function OneTapStartInternal() {
 	const environmentClientID = environment.displayConfig.googleOneTapClientId;
 	const shouldLoadGIS = !user?.id && !!environmentClientID;
 	async function initializeGIS() {
-		if (__BUILD_DISABLE_RHC__) {
-			clerkUnsupportedEnvironmentWarning("Google Identity Services");
-			return;
-		}
 		const google = await loadGIS();
 		google.accounts.id.initialize({
 			client_id: environmentClientID,

package/dist/components/GoogleOneTap/one-tap-start.js.map

@@ -1 +1 @@
-{"version":3,"file":"one-tap-start.js","names":["e: any"],"sources":["../../../src/components/GoogleOneTap/one-tap-start.tsx"],"sourcesContent":["import { clerkUnsupportedEnvironmentWarning } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk, useUser } from '@clerk/shared/react';\nimport { useEffect, useRef } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\n\nimport { useEnvironment, useGoogleOneTapContext } from '../../contexts';\nimport { useFetch } from '../../hooks';\nimport { useRouter } from '../../router';\nimport type { GISCredentialResponse } from '../../utils/one-tap';\nimport { loadGIS } from '../../utils/one-tap';\n\nfunction OneTapStartInternal(): JSX.Element | null {\n  const clerk = useClerk();\n  const { user } = useUser();\n  const environment = useEnvironment();\n  const isPromptedRef = useRef(false);\n  const { navigate } = useRouter();\n\n  const ctx = useGoogleOneTapContext();\n\n  async function oneTapCallback(response: GISCredentialResponse) {\n    isPromptedRef.current = false;\n    try {\n      const res = await clerk.authenticateWithGoogleOneTap({\n        token: response.credential,\n      });\n      await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate);\n    } catch (e: any) {\n      console.error(e);\n    }\n  }\n\n  const environmentClientID = environment.displayConfig.googleOneTapClientId;\n  const shouldLoadGIS = !user?.id && !!environmentClientID;\n\n  async function initializeGIS() {\n    if (__BUILD_DISABLE_RHC__) {\n      clerkUnsupportedEnvironmentWarning('Google Identity Services');\n      return undefined;\n    }\n\n    const google = await loadGIS();\n\n    google.accounts.id.initialize({\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      client_id: environmentClientID!,\n      callback: oneTapCallback,\n      itp_support: ctx.itpSupport,\n      cancel_on_tap_outside: ctx.cancelOnTapOutside,\n      auto_select: false,\n      use_fedcm_for_prompt: ctx.fedCmSupport,\n    });\n\n    return google;\n  }\n\n  /**\n   * Prevent GIS from initializing multiple times\n   */\n  const { data: initializedGoogle } = useFetch(\n    shouldLoadGIS ? initializeGIS : undefined,\n    'google-identity-services-script',\n  );\n\n  useEffect(() => {\n    if (initializedGoogle && !user?.id && !isPromptedRef.current) {\n      initializedGoogle.accounts.id.prompt(notification => {\n        // Close the modal, when the user clicks outside the prompt or cancels\n        if (notification.getMomentType() === 'skipped') {\n          // Unmounts the component will cause the useEffect cleanup function from below to be called\n          clerk.closeGoogleOneTap();\n        }\n      });\n      isPromptedRef.current = true;\n    }\n  }, [clerk, initializedGoogle, user?.id]);\n\n  // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization\n  useEffect(() => {\n    return () => {\n      if (initializedGoogle && isPromptedRef.current) {\n        isPromptedRef.current = false;\n        initializedGoogle.accounts.id.cancel();\n      }\n    };\n  }, [initializedGoogle]);\n\n  return null;\n}\n\nexport const OneTapStart = withCardStateProvider(OneTapStartInternal);\n"],"mappings":";;;;;;;;;;;AAYA,SAAS,sBAA0C;CACjD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,EAAE,aAAa,WAAW;CAEhC,MAAM,MAAM,wBAAwB;CAEpC,eAAe,eAAe,UAAiC;AAC7D,gBAAc,UAAU;AACxB,MAAI;GACF,MAAM,MAAM,MAAM,MAAM,6BAA6B,EACnD,OAAO,SAAS,YACjB,CAAC;AACF,SAAM,MAAM,2BAA2B,KAAK,IAAI,qBAAqB,OAAO,SAAS,KAAK,EAAE,SAAS;WAC9FA,GAAQ;AACf,WAAQ,MAAM,EAAE;;;CAIpB,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,CAAC,CAAC;CAErC,eAAe,gBAAgB;AAC7B,MAAI,uBAAuB;AACzB,sCAAmC,2BAA2B;AAC9D;;EAGF,MAAM,SAAS,MAAM,SAAS;AAE9B,SAAO,SAAS,GAAG,WAAW;GAE5B,WAAW;GACX,UAAU;GACV,aAAa,IAAI;GACjB,uBAAuB,IAAI;GAC3B,aAAa;GACb,sBAAsB,IAAI;GAC3B,CAAC;AAEF,SAAO;;;;;CAMT,MAAM,EAAE,MAAM,sBAAsB,SAClC,gBAAgB,gBAAgB,QAChC,kCACD;AAED,iBAAgB;AACd,MAAI,qBAAqB,CAAC,MAAM,MAAM,CAAC,cAAc,SAAS;AAC5D,qBAAkB,SAAS,GAAG,QAAO,iBAAgB;AAEnD,QAAI,aAAa,eAAe,KAAK,UAEnC,OAAM,mBAAmB;KAE3B;AACF,iBAAc,UAAU;;IAEzB;EAAC;EAAO;EAAmB,MAAM;EAAG,CAAC;AAGxC,iBAAgB;AACd,eAAa;AACX,OAAI,qBAAqB,cAAc,SAAS;AAC9C,kBAAc,UAAU;AACxB,sBAAkB,SAAS,GAAG,QAAQ;;;IAGzC,CAAC,kBAAkB,CAAC;AAEvB,QAAO;;AAGT,MAAa,cAAc,sBAAsB,oBAAoB"}
+{"version":3,"file":"one-tap-start.js","names":["e: any"],"sources":["../../../src/components/GoogleOneTap/one-tap-start.tsx"],"sourcesContent":["import { clerkUnsupportedEnvironmentWarning } from '@clerk/shared/internal/clerk-js/errors';\nimport { useClerk, useUser } from '@clerk/shared/react';\nimport { useEffect, useRef } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\n\nimport { useEnvironment, useGoogleOneTapContext } from '../../contexts';\nimport { useFetch } from '../../hooks';\nimport { useRouter } from '../../router';\nimport type { GISCredentialResponse } from '../../utils/one-tap';\nimport { loadGIS } from '../../utils/one-tap';\n\nfunction OneTapStartInternal(): JSX.Element | null {\n  const clerk = useClerk();\n  const { user } = useUser();\n  const environment = useEnvironment();\n  const isPromptedRef = useRef(false);\n  const { navigate } = useRouter();\n\n  const ctx = useGoogleOneTapContext();\n\n  async function oneTapCallback(response: GISCredentialResponse) {\n    isPromptedRef.current = false;\n    try {\n      const res = await clerk.authenticateWithGoogleOneTap({\n        token: response.credential,\n      });\n      await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate);\n    } catch (e: any) {\n      console.error(e);\n    }\n  }\n\n  const environmentClientID = environment.displayConfig.googleOneTapClientId;\n  const shouldLoadGIS = !user?.id && !!environmentClientID;\n\n  async function initializeGIS() {\n    if (__BUILD_DISABLE_RHC__) {\n      clerkUnsupportedEnvironmentWarning('Google Identity Services');\n      return undefined;\n    }\n\n    const google = await loadGIS();\n\n    google.accounts.id.initialize({\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      client_id: environmentClientID!,\n      callback: oneTapCallback,\n      itp_support: ctx.itpSupport,\n      cancel_on_tap_outside: ctx.cancelOnTapOutside,\n      auto_select: false,\n      use_fedcm_for_prompt: ctx.fedCmSupport,\n    });\n\n    return google;\n  }\n\n  /**\n   * Prevent GIS from initializing multiple times\n   */\n  const { data: initializedGoogle } = useFetch(\n    shouldLoadGIS ? initializeGIS : undefined,\n    'google-identity-services-script',\n  );\n\n  useEffect(() => {\n    if (initializedGoogle && !user?.id && !isPromptedRef.current) {\n      initializedGoogle.accounts.id.prompt(notification => {\n        // Close the modal, when the user clicks outside the prompt or cancels\n        if (notification.getMomentType() === 'skipped') {\n          // Unmounts the component will cause the useEffect cleanup function from below to be called\n          clerk.closeGoogleOneTap();\n        }\n      });\n      isPromptedRef.current = true;\n    }\n  }, [clerk, initializedGoogle, user?.id]);\n\n  // Trigger only on mount/unmount. Above we handle the logic for the initial fetch + initialization\n  useEffect(() => {\n    return () => {\n      if (initializedGoogle && isPromptedRef.current) {\n        isPromptedRef.current = false;\n        initializedGoogle.accounts.id.cancel();\n      }\n    };\n  }, [initializedGoogle]);\n\n  return null;\n}\n\nexport const OneTapStart = withCardStateProvider(OneTapStartInternal);\n"],"mappings":";;;;;;;;;;;AAYA,SAAS,sBAA0C;CACjD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,OAAO,MAAM;CACnC,MAAM,EAAE,aAAa,WAAW;CAEhC,MAAM,MAAM,wBAAwB;CAEpC,eAAe,eAAe,UAAiC;AAC7D,gBAAc,UAAU;AACxB,MAAI;GACF,MAAM,MAAM,MAAM,MAAM,6BAA6B,EACnD,OAAO,SAAS,YACjB,CAAC;AACF,SAAM,MAAM,2BAA2B,KAAK,IAAI,qBAAqB,OAAO,SAAS,KAAK,EAAE,SAAS;WAC9FA,GAAQ;AACf,WAAQ,MAAM,EAAE;;;CAIpB,MAAM,sBAAsB,YAAY,cAAc;CACtD,MAAM,gBAAgB,CAAC,MAAM,MAAM,CAAC,CAAC;CAErC,eAAe,gBAAgB;EAM7B,MAAM,SAAS,MAAM,SAAS;AAE9B,SAAO,SAAS,GAAG,WAAW;GAE5B,WAAW;GACX,UAAU;GACV,aAAa,IAAI;GACjB,uBAAuB,IAAI;GAC3B,aAAa;GACb,sBAAsB,IAAI;GAC3B,CAAC;AAEF,SAAO;;;;;CAMT,MAAM,EAAE,MAAM,sBAAsB,SAClC,gBAAgB,gBAAgB,QAChC,kCACD;AAED,iBAAgB;AACd,MAAI,qBAAqB,CAAC,MAAM,MAAM,CAAC,cAAc,SAAS;AAC5D,qBAAkB,SAAS,GAAG,QAAO,iBAAgB;AAEnD,QAAI,aAAa,eAAe,KAAK,UAEnC,OAAM,mBAAmB;KAE3B;AACF,iBAAc,UAAU;;IAEzB;EAAC;EAAO;EAAmB,MAAM;EAAG,CAAC;AAGxC,iBAAgB;AACd,eAAa;AACX,OAAI,qBAAqB,cAAc,SAAS;AAC9C,kBAAc,UAAU;AACxB,sBAAkB,SAAS,GAAG,QAAQ;;;IAGzC,CAAC,kBAAkB,CAAC;AAEvB,QAAO;;AAGT,MAAa,cAAc,sBAAsB,oBAAoB"}

package/dist/components/OrganizationProfile/InviteMembersForm.js

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

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

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