npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251203203405 → 1.0.0-snapshot.v20251204175016 - Mend

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

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

Files changed (140) hide show

package/dist/{browser/checkout_ui_9c3cc3_1.0.0-snapshot.v20251203203405.js → checkout_ui_30c3ec_1.0.0-snapshot.v20251204175016.js} RENAMED Viewed

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

package/dist/components/OrganizationProfile/InviteMembersScreen.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import email_default from "../../icons/email.js";
-import { useOrganizationProfileContext } from "../../contexts/components/OrganizationProfile.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
 import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
 import { Flex, Text } from "../../customizables/index.js";
@@ -10,8 +9,7 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { InviteMembersForm } from "./InviteMembersForm.js";
 import { IconCircle } from "../../elements/IconCircle.js";
-import { BillingWidget } from "./BillingWidget.js";
-import { runIfFunctionOrReturn } from "@clerk/shared/utils";
+import "@clerk/shared/utils";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
@@ -24,21 +22,16 @@ const InviteMembersScreen = withCardStateProvider((props) => {
 	const card = useCardState();
 	const wizard = useWizard({ onNextStep: () => card.setError(void 0) });
 	const { organization } = useOrganization();
-	const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();
 	if (!organization) return null;
-	const reachedOrganizationMemberLimit = !!__unstable_manageBillingMembersLimit && runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) <= organization.pendingInvitationsCount + organization.membersCount;
 	return /* @__PURE__ */ jsxs(Wizard, {
 		...wizard.props,
-		children: [/* @__PURE__ */ jsxs(FormContainer, {
+		children: [/* @__PURE__ */ jsx(FormContainer, {
 			headerTitle: title,
 			headerSubtitle: subtitle,
-			children: [reachedOrganizationMemberLimit && __unstable_manageBillingUrl && /* @__PURE__ */ jsx(BillingWidget, {
-				__unstable_manageBillingUrl,
-				__unstable_manageBillingMembersLimit
-			}), /* @__PURE__ */ jsx(InviteMembersForm, {
+			children: /* @__PURE__ */ jsx(InviteMembersForm, {
 				onSuccess: wizard.nextStep,
 				onReset
-			})]
+			})
 		}), /* @__PURE__ */ jsx(SuccessPage, {
 			title,
 			onFinish: close,

package/dist/components/OrganizationProfile/InviteMembersScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { runIfFunctionOrReturn } from '@clerk/shared/utils';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { useOrganizationProfileContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { ~~BillingWidget } from './BillingWidget';\nimport {~~ InviteMembersForm } from './InviteMembersForm';\n\ntype InviteMembersScreenProps = {\n onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n const { close } = useActionContext();\n const { onReset = close } = props;\n const title = localizationKeys('organizationProfile.invitePage.title');\n const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n const card = useCardState();\n const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n const { organization } = useOrganization();\n ~~// @ts-expect-error - __unstable_manageBillingUrl and __unstable_manageBillingMembersLimit are unstable props~~\n ~~const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();\n\n~~ if (!organization) {\n return null;\n }\n\n const reachedOrganizationMemberLimit =\n !!__unstable_manageBillingMembersLimit &&\n runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) <=\n organization.pendingInvitationsCount + organization.membersCount;\n\n return (\n <Wizard {...wizard.props}>\n <FormContainer\n headerTitle={title}\n headerSubtitle={subtitle}\n >\n ~~{reachedOrganizationMemberLimit && __unstable_manageBillingUrl && (\n~~ <BillingWidget\n __unstable_manageBillingUrl={__unstable_manageBillingUrl}\n __unstable_manageBillingMembersLimit={__unstable_manageBillingMembersLimit}\n />\n )}\n <InviteMembersForm\n onSuccess={wizard.nextStep}\n onReset={onReset}\n />\n </FormContainer>\n <SuccessPage\n title={title}\n onFinish={close}\n contents={<InvitationsSentMessage />}\n />\n </Wizard>\n );\n});\n\nexport const InvitationsSentMessage = () => {\n return (\n <Flex\n direction='col'\n center\n gap={4}\n >\n <IconCircle\n boxElementDescriptor={descriptors.invitationsSentIconBox}\n iconElementDescriptor={descriptors.invitationsSentIcon}\n icon={Email}\n />\n <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n </Flex>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAoBA~~,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;~~CAE1C~~,~~MAAM,EAAE,6BAA6B,yCAAyC,+BAA+B;AAE7G,~~KAAI,CAAC,aACH,QAAO;~~CAGT~~,~~MAAM,iCACJ,CAAC,CAAC,wCACF,sBAAsB,qCAAqC,IACzD,aAAa,0BAA0B,aAAa;AAExD,~~QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,~~qBAAC~~;GACC,aAAa;GACb,gBAAgB;~~cAEf~~,~~kCAAkC,+BACjC,~~oBAAC;~~IAC8B;IACS;KACtC,EAEJ,oBAAC;~~IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}
1	+ {"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { runIfFunctionOrReturn } from '@clerk/shared/utils';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { useOrganizationProfileContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { InviteMembersForm } from './InviteMembersForm';\n\ntype InviteMembersScreenProps = {\n onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n const { close } = useActionContext();\n const { onReset = close } = props;\n const title = localizationKeys('organizationProfile.invitePage.title');\n const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n const card = useCardState();\n const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n const { organization } = useOrganization();\n\n if (!organization) {\n return null;\n }\n\n return (\n <Wizard {...wizard.props}>\n <FormContainer\n headerTitle={title}\n headerSubtitle={subtitle}\n >\n <InviteMembersForm\n onSuccess={wizard.nextStep}\n onReset={onReset}\n />\n </FormContainer>\n <SuccessPage\n title={title}\n onFinish={close}\n contents={<InvitationsSentMessage />}\n />\n </Wizard>\n );\n});\n\nexport const InvitationsSentMessage = () => {\n return (\n <Flex\n direction='col'\n center\n gap={4}\n >\n <IconCircle\n boxElementDescriptor={descriptors.invitationsSentIconBox}\n iconElementDescriptor={descriptors.invitationsSentIcon}\n icon={Email}\n />\n <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n </Flex>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,oBAAC;GACC,aAAa;GACb,gBAAgB;aAEhB,oBAAC;IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}

package/dist/components/OrganizationProfile/OrganizationMembers.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { useEnvironment } from "../../contexts/EnvironmentContext.js";
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { useProtect } from "../../common/Gate.js";
-import { useOrganizationProfileContext } from "../../contexts/components/OrganizationProfile.js";
 import { mqu } from "../../styledSystem/breakpoints.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
 import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
@@ -14,7 +13,6 @@ import { Action } from "../../elements/Action/index.js";
 import { Tab, TabPanel, TabPanels, Tabs, TabsList } from "../../elements/Tabs.js";
 import { ActiveMembersList } from "./ActiveMembersList.js";
 import { MembersActionsRow } from "./MembersActions.js";
-import { MembershipWidget } from "./MembershipWidget.js";
 import { MembersSearch } from "./MembersSearch.js";
 import { OrganizationMembersTabInvitations } from "./OrganizationMembersTabInvitations.js";
 import { OrganizationMembersTabRequests } from "./OrganizationMembersTabRequests.js";
@@ -40,7 +38,6 @@ const OrganizationMembers = withCardStateProvider(() => {
 			query: query || void 0
 		} : void 0
 	});
-	const { __unstable_manageBillingUrl } = useOrganizationProfileContext();
 	if (canManageMemberships === null) return null;
 	return /* @__PURE__ */ jsx(Col, {
 		elementDescriptor: descriptors.page,
@@ -96,11 +93,11 @@ const OrganizationMembers = withCardStateProvider(() => {
 					}), /* @__PURE__ */ jsxs(TabPanels, { children: [
 						canReadMemberships && /* @__PURE__ */ jsx(TabPanel, {
 							sx: { width: "100%" },
-							children: /* @__PURE__ */ jsxs(Flex, {
+							children: /* @__PURE__ */ jsx(Flex, {
 								gap: 4,
 								direction: "col",
 								sx: { width: "100%" },
-								children: [canManageMemberships && __unstable_manageBillingUrl && /* @__PURE__ */ jsx(MembershipWidget, {}), /* @__PURE__ */ jsxs(Flex, {
+								children: /* @__PURE__ */ jsxs(Flex, {
 									gap: 2,
 									direction: "col",
 									sx: { width: "100%" },
@@ -114,7 +111,7 @@ const OrganizationMembers = withCardStateProvider(() => {
 										pageSize: ACTIVE_MEMBERS_PAGE_SIZE,
 										memberships
 									})]
-								})]
+								})
 							})
 						}),
 						canManageMemberships && /* @__PURE__ */ jsx(TabPanel, {

package/dist/components/OrganizationProfile/OrganizationMembers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { ~~MembershipWidget } from './MembershipWidget';\nimport {~~ MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n ~~// @ts-expect-error This property is not typed. It is used by our dashboard in order to render a billing widget.\n const { __unstable_manageBillingUrl } = useOrganizationProfileContext();\n\n~~ if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n ~~{canManageMemberships && __unstable_manageBillingUrl &&~~ <~~MembershipWidget />}\n <~~Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA~~,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;~~CAGF~~,~~MAAM,EAAE,gCAAgC,+BAA+B;AAEvE,~~KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,~~qBAAC~~;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;~~mBAEA~~,~~wBAAwB,+BAA+B,oBAAC,qBAAmB,EAC5E,~~qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}
1	+ {"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const card = useCardState();\n const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n const [query, setQuery] = useState('');\n const [search, setSearch] = useState('');\n\n const { membershipRequests, memberships, invitations } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n invitations: canManageMemberships \|\| undefined,\n memberships: canReadMemberships\n ? {\n keepPreviousData: true,\n query: query \|\| undefined,\n }\n : undefined,\n });\n\n if (canManageMemberships === null) {\n return null;\n }\n\n return (\n <Col\n elementDescriptor={descriptors.page}\n gap={2}\n >\n <Col\n elementDescriptor={descriptors.profilePage}\n elementId={descriptors.profilePage.setId('organizationMembers')}\n gap={4}\n >\n <Action.Root animate={false}>\n <Animated asChild>\n <Header.Root\n contentSx={{\n [mqu.md]: {\n flexDirection: 'row',\n width: '100%',\n justifyContent: 'space-between',\n },\n }}\n >\n <Header.Title\n localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n textVariant='h2'\n />\n </Header.Root>\n </Animated>\n <Card.Alert>{card.error}</Card.Alert>\n <Tabs>\n <TabsList sx={t => ({ gap: t.space.$2 })}>\n {canReadMemberships && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n {!!memberships?.count && (\n <NotificationCountBadge\n shouldAnimate={!query}\n notificationCount={memberships.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && (\n <Tab\n localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n >\n {invitations?.data && !invitations.isLoading && (\n <NotificationCountBadge\n notificationCount={invitations.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n {membershipRequests?.data && !membershipRequests.isLoading && (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n colorScheme='outline'\n />\n )}\n </Tab>\n )}\n </TabsList>\n <TabPanels>\n {canReadMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <Flex\n gap={4}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <Flex\n gap={2}\n direction='col'\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow\n actionSlot={\n <MembersSearch\n query={query}\n value={search}\n memberships={memberships}\n onSearchChange={query => setSearch(query)}\n onQueryTrigger={query => setQuery(query)}\n />\n }\n />\n <ActiveMembersList\n pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n memberships={memberships}\n />\n </Flex>\n </Flex>\n </TabPanel>\n )}\n {canManageMemberships && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabInvitations />\n </TabPanel>\n )}\n {canManageMemberships && isDomainsEnabled && (\n <TabPanel sx={{ width: '100%' }}>\n <OrganizationMembersTabRequests />\n </TabPanel>\n )}\n </TabPanels>\n </Tabs>\n </Action.Root>\n </Col>\n </Col>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}

package/dist/components/OrganizationProfile/OrganizationMembersTabInvitations.js CHANGED Viewed

@@ -9,75 +9,70 @@ import { Header } from "../../elements/Header.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { DomainList } from "./DomainList.js";
 import { MembersActionsRow } from "./MembersActions.js";
-import { MembershipWidget } from "./MembershipWidget.js";
 import { InvitedMembersList } from "./InvitedMembersList.js";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
 const OrganizationMembersTabInvitations = withCardStateProvider(() => {
 	const { organizationSettings } = useEnvironment();
-	const { __unstable_manageBillingUrl, navigateToGeneralPageRoot } = useOrganizationProfileContext();
+	const { navigateToGeneralPageRoot } = useOrganizationProfileContext();
 	const isDomainsEnabled = organizationSettings?.domains?.enabled;
 	return /* @__PURE__ */ jsxs(Col, {
 		gap: 4,
 		sx: { width: "100%" },
-		children: [
-			__unstable_manageBillingUrl && /* @__PURE__ */ jsx(MembershipWidget, {}),
-			isDomainsEnabled && /* @__PURE__ */ jsx(Protect, {
-				permission: "org:sys_domains:manage",
-				children: /* @__PURE__ */ jsxs(Flex, {
+		children: [isDomainsEnabled && /* @__PURE__ */ jsx(Protect, {
+			permission: "org:sys_domains:manage",
+			children: /* @__PURE__ */ jsxs(Flex, {
+				sx: (t) => ({
+					width: "100%",
+					gap: t.space.$8,
+					paddingBottom: t.space.$4,
+					paddingLeft: t.space.$1,
+					paddingRight: t.space.$1,
+					borderBottomWidth: t.borderWidths.$normal,
+					borderBottomStyle: t.borderStyles.$solid,
+					borderBottomColor: t.colors.$borderAlpha100,
+					[mqu.md]: {
+						flexDirection: "column",
+						gap: t.space.$2
+					}
+				}),
+				children: [/* @__PURE__ */ jsx(Col, {
 					sx: (t) => ({
-						width: "100%",
-						gap: t.space.$8,
-						paddingBottom: t.space.$4,
-						paddingLeft: t.space.$1,
-						paddingRight: t.space.$1,
-						borderBottomWidth: t.borderWidths.$normal,
-						borderBottomStyle: t.borderStyles.$solid,
-						borderBottomColor: t.colors.$borderAlpha100,
-						[mqu.md]: {
-							flexDirection: "column",
-							gap: t.space.$2
-						}
+						width: t.space.$66,
+						marginTop: t.space.$2
 					}),
-					children: [/* @__PURE__ */ jsx(Col, {
-						sx: (t) => ({
-							width: t.space.$66,
-							marginTop: t.space.$2
-						}),
-						children: /* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
-							localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle"),
-							textVariant: "h3"
-						}) })
-					}), /* @__PURE__ */ jsx(Col, {
-						sx: { width: "100%" },
-						children: /* @__PURE__ */ jsx(DomainList, {
-							fallback: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
-								localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton"),
-								id: "manageVerifiedDomains",
-								sx: (t) => ({ gap: t.space.$2 }),
-								onClick: navigateToGeneralPageRoot
-							}), /* @__PURE__ */ jsx(Text, {
-								localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle"),
-								sx: (t) => ({
-									paddingLeft: t.space.$10,
-									color: t.colors.$colorMutedForeground,
-									[mqu.md]: { paddingLeft: 0 }
-								})
-							})] }),
-							verificationStatus: "verified",
-							enrollmentMode: "automatic_invitation"
-						})
-					})]
-				})
-			}),
-			/* @__PURE__ */ jsxs(Flex, {
-				direction: "col",
-				gap: 2,
-				sx: { width: "100%" },
-				children: [/* @__PURE__ */ jsx(MembersActionsRow, {}), /* @__PURE__ */ jsx(InvitedMembersList, {})]
+					children: /* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
+						localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle"),
+						textVariant: "h3"
+					}) })
+				}), /* @__PURE__ */ jsx(Col, {
+					sx: { width: "100%" },
+					children: /* @__PURE__ */ jsx(DomainList, {
+						fallback: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
+							localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton"),
+							id: "manageVerifiedDomains",
+							sx: (t) => ({ gap: t.space.$2 }),
+							onClick: navigateToGeneralPageRoot
+						}), /* @__PURE__ */ jsx(Text, {
+							localizationKey: localizationKeys("organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle"),
+							sx: (t) => ({
+								paddingLeft: t.space.$10,
+								color: t.colors.$colorMutedForeground,
+								[mqu.md]: { paddingLeft: 0 }
+							})
+						})] }),
+						verificationStatus: "verified",
+						enrollmentMode: "automatic_invitation"
+					})
+				})]
 			})
-		]
+		}), /* @__PURE__ */ jsxs(Flex, {
+			direction: "col",
+			gap: 2,
+			sx: { width: "100%" },
+			children: [/* @__PURE__ */ jsx(MembersActionsRow, {}), /* @__PURE__ */ jsx(InvitedMembersList, {})]
+		})]
 	});
 });

package/dist/components/OrganizationProfile/OrganizationMembersTabInvitations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationMembersTabInvitations.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx"],"sourcesContent":["import { withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, Flex, localizationKeys, Text } from '../../customizables';\nimport { mqu } from '../../styledSystem';\nimport { DomainList } from './DomainList';\nimport { InvitedMembersList } from './InvitedMembersList';\nimport { MembersActionsRow } from './MembersActions';\~~nimport { MembershipWidget } from './MembershipWidget';\~~n\nexport const OrganizationMembersTabInvitations = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n ~~//@ts-expect-error\n~~ const { ~~__unstable_manageBillingUrl,~~ navigateToGeneralPageRoot } = useOrganizationProfileContext();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n return (\n <Col\n gap={4}\n sx={{\n width: '100%',\n }}\n >\n {~~__unstable_manageBillingUrl && <MembershipWidget />}\n\n {~~isDomainsEnabled && (\n <Protect permission={'org:sys_domains:manage'}>\n <Flex\n sx={t => ({\n width: '100%',\n gap: t.space.$8,\n paddingBottom: t.space.$4,\n paddingLeft: t.space.$1,\n paddingRight: t.space.$1,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n [mqu.md]: {\n flexDirection: 'column',\n gap: t.space.$2,\n },\n })}\n >\n <Col sx={t => ({ width: t.space.$66, marginTop: t.space.$2 })}>\n <Header.Root>\n <Header.Title\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',\n )}\n textVariant='h3'\n />\n </Header.Root>\n </Col>\n <Col sx={{ width: '100%' }}>\n <DomainList\n fallback={\n <>\n <ProfileSection.ArrowButton\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',\n )}\n id='manageVerifiedDomains'\n sx={t => ({ gap: t.space.$2 })}\n onClick={navigateToGeneralPageRoot}\n />\n <Text\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',\n )}\n sx={t => ({\n paddingLeft: t.space.$10,\n color: t.colors.$colorMutedForeground,\n [mqu.md]: {\n paddingLeft: 0,\n },\n })}\n />\n </>\n }\n verificationStatus={'verified'}\n enrollmentMode={'automatic_invitation'}\n />\n </Col>\n </Flex>\n </Protect>\n )}\n\n <Flex\n direction='col'\n gap={2}\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow />\n <InvitedMembersList />\n </Flex>\n </Col>\n );\n});\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAaA~~,MAAa,oCAAoC,4BAA4B;CAC3E,MAAM,EAAE,yBAAyB,gBAAgB;~~CAEjD~~,MAAM,EAAE,~~6BAA6B,~~8BAA8B,+BAA+B;~~CAElG~~,MAAM,mBAAmB,sBAAsB,SAAS;AAExD,QACE,qBAAC;EACC,KAAK;EACL,IAAI,EACF,OAAO,QACR~~;;GAEA,+BAA+B,oBAAC,qBAAmB~~;~~GAEnD~~,oBACC,oBAAC;~~IAAQ~~,YAAY;~~cACnB~~,qBAAC;~~KACC~~,KAAI,OAAM;~~MACR~~,OAAO;~~MACP~~,KAAK,EAAE,MAAM;~~MACb~~,eAAe,EAAE,MAAM;~~MACvB~~,aAAa,EAAE,MAAM;~~MACrB~~,cAAc,EAAE,MAAM;~~MACtB~~,mBAAmB,EAAE,aAAa;~~MAClC~~,mBAAmB,EAAE,aAAa;~~MAClC~~,mBAAmB,EAAE,OAAO;~~OAC3B~~,IAAI,KAAK;~~OACR~~,eAAe;~~OACf~~,KAAK,EAAE,MAAM;~~OACd~~;~~MACF~~;~~gBAED~~,oBAAC;~~MAAI~~,KAAI,OAAM;~~OAAE~~,OAAO,EAAE,MAAM;~~OAAK~~,WAAW,EAAE,MAAM;~~OAAI~~;~~gBAC1D~~,oBAAC,OAAO,kBACN,oBAAC,OAAO;~~OACN~~,iBAAiB,iBACf,6EACD;~~OACD~~,aAAY;~~QACZ~~,GACU;~~OACV~~,EACN,oBAAC;~~MAAI~~,IAAI,EAAE,OAAO,QAAQ;~~gBACxB~~,oBAAC;~~OACC~~,UACE,4CACE,oBAAC,eAAe;~~QACd~~,iBAAiB,iBACf,+EACD;~~QACD~~,IAAG;~~QACH~~,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;~~QAC7B~~,SAAS;~~SACT~~,EACF,oBAAC;~~QACC~~,iBAAiB,iBACf,gFACD;~~QACD~~,KAAI,OAAM;~~SACR~~,aAAa,EAAE,MAAM;~~SACrB~~,OAAO,EAAE,OAAO;~~UACf~~,IAAI,KAAK,EACR,aAAa,GACd;~~SACF~~;~~SACD~~,IACD;~~OAEL~~,oBAAoB;~~OACpB~~,gBAAgB;~~QAChB~~;~~OACE~~;~~MACD~~;~~KACC;GAGZ~~,qBAAC;~~IACC~~,WAAU;~~IACV~~,KAAK;~~IACL~~,IAAI,EACF,OAAO,QACR;~~eAED~~,oBAAC,sBAAoB,EACrB,oBAAC,uBAAqB;~~KACjB;;~~GACH;EAER"}
1	+ {"version":3,"file":"OrganizationMembersTabInvitations.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx"],"sourcesContent":["import { withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, Flex, localizationKeys, Text } from '../../customizables';\nimport { mqu } from '../../styledSystem';\nimport { DomainList } from './DomainList';\nimport { InvitedMembersList } from './InvitedMembersList';\nimport { MembersActionsRow } from './MembersActions';\n\nexport const OrganizationMembersTabInvitations = withCardStateProvider(() => {\n const { organizationSettings } = useEnvironment();\n const { navigateToGeneralPageRoot } = useOrganizationProfileContext();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n return (\n <Col\n gap={4}\n sx={{\n width: '100%',\n }}\n >\n {isDomainsEnabled && (\n <Protect permission={'org:sys_domains:manage'}>\n <Flex\n sx={t => ({\n width: '100%',\n gap: t.space.$8,\n paddingBottom: t.space.$4,\n paddingLeft: t.space.$1,\n paddingRight: t.space.$1,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n [mqu.md]: {\n flexDirection: 'column',\n gap: t.space.$2,\n },\n })}\n >\n <Col sx={t => ({ width: t.space.$66, marginTop: t.space.$2 })}>\n <Header.Root>\n <Header.Title\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',\n )}\n textVariant='h3'\n />\n </Header.Root>\n </Col>\n <Col sx={{ width: '100%' }}>\n <DomainList\n fallback={\n <>\n <ProfileSection.ArrowButton\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',\n )}\n id='manageVerifiedDomains'\n sx={t => ({ gap: t.space.$2 })}\n onClick={navigateToGeneralPageRoot}\n />\n <Text\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',\n )}\n sx={t => ({\n paddingLeft: t.space.$10,\n color: t.colors.$colorMutedForeground,\n [mqu.md]: {\n paddingLeft: 0,\n },\n })}\n />\n </>\n }\n verificationStatus={'verified'}\n enrollmentMode={'automatic_invitation'}\n />\n </Col>\n </Flex>\n </Protect>\n )}\n\n <Flex\n direction='col'\n gap={2}\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow />\n <InvitedMembersList />\n </Flex>\n </Col>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAa,oCAAoC,4BAA4B;CAC3E,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,EAAE,8BAA8B,+BAA+B;CAErE,MAAM,mBAAmB,sBAAsB,SAAS;AAExD,QACE,qBAAC;EACC,KAAK;EACL,IAAI,EACF,OAAO,QACR;aAEA,oBACC,oBAAC;GAAQ,YAAY;aACnB,qBAAC;IACC,KAAI,OAAM;KACR,OAAO;KACP,KAAK,EAAE,MAAM;KACb,eAAe,EAAE,MAAM;KACvB,aAAa,EAAE,MAAM;KACrB,cAAc,EAAE,MAAM;KACtB,mBAAmB,EAAE,aAAa;KAClC,mBAAmB,EAAE,aAAa;KAClC,mBAAmB,EAAE,OAAO;MAC3B,IAAI,KAAK;MACR,eAAe;MACf,KAAK,EAAE,MAAM;MACd;KACF;eAED,oBAAC;KAAI,KAAI,OAAM;MAAE,OAAO,EAAE,MAAM;MAAK,WAAW,EAAE,MAAM;MAAI;eAC1D,oBAAC,OAAO,kBACN,oBAAC,OAAO;MACN,iBAAiB,iBACf,6EACD;MACD,aAAY;OACZ,GACU;MACV,EACN,oBAAC;KAAI,IAAI,EAAE,OAAO,QAAQ;eACxB,oBAAC;MACC,UACE,4CACE,oBAAC,eAAe;OACd,iBAAiB,iBACf,+EACD;OACD,IAAG;OACH,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;OAC7B,SAAS;QACT,EACF,oBAAC;OACC,iBAAiB,iBACf,gFACD;OACD,KAAI,OAAM;QACR,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,OAAO;SACf,IAAI,KAAK,EACR,aAAa,GACd;QACF;QACD,IACD;MAEL,oBAAoB;MACpB,gBAAgB;OAChB;MACE;KACD;IACC,EAGZ,qBAAC;GACC,WAAU;GACV,KAAK;GACL,IAAI,EACF,OAAO,QACR;cAED,oBAAC,sBAAoB,EACrB,oBAAC,uBAAqB;IACjB;GACH;EAER"}

package/dist/components/OrganizationProfile/OrganizationMembersTabRequests.js CHANGED Viewed

@@ -8,75 +8,70 @@ import { Header } from "../../elements/Header.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { DomainList } from "./DomainList.js";
 import { MembersActionsRow } from "./MembersActions.js";
-import { MembershipWidget } from "./MembershipWidget.js";
 import { RequestToJoinList } from "./RequestToJoinList.js";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
 const OrganizationMembersTabRequests = () => {
 	const { organizationSettings } = useEnvironment();
-	const { __unstable_manageBillingUrl, navigateToGeneralPageRoot } = useOrganizationProfileContext();
+	const { navigateToGeneralPageRoot } = useOrganizationProfileContext();
 	const isDomainsEnabled = organizationSettings?.domains?.enabled;
 	return /* @__PURE__ */ jsxs(Col, {
 		gap: 4,
 		sx: { width: "100%" },
-		children: [
-			__unstable_manageBillingUrl && /* @__PURE__ */ jsx(MembershipWidget, {}),
-			isDomainsEnabled && /* @__PURE__ */ jsx(Protect, {
-				permission: "org:sys_domains:manage",
-				children: /* @__PURE__ */ jsxs(Flex, {
+		children: [isDomainsEnabled && /* @__PURE__ */ jsx(Protect, {
+			permission: "org:sys_domains:manage",
+			children: /* @__PURE__ */ jsxs(Flex, {
+				sx: (t) => ({
+					width: "100%",
+					gap: t.space.$8,
+					paddingBottom: t.space.$4,
+					paddingLeft: t.space.$1,
+					paddingRight: t.space.$1,
+					borderBottomWidth: t.borderWidths.$normal,
+					borderBottomStyle: t.borderStyles.$solid,
+					borderBottomColor: t.colors.$borderAlpha100,
+					[mqu.md]: {
+						flexDirection: "column",
+						gap: t.space.$2
+					}
+				}),
+				children: [/* @__PURE__ */ jsx(Col, {
 					sx: (t) => ({
-						width: "100%",
-						gap: t.space.$8,
-						paddingBottom: t.space.$4,
-						paddingLeft: t.space.$1,
-						paddingRight: t.space.$1,
-						borderBottomWidth: t.borderWidths.$normal,
-						borderBottomStyle: t.borderStyles.$solid,
-						borderBottomColor: t.colors.$borderAlpha100,
-						[mqu.md]: {
-							flexDirection: "column",
-							gap: t.space.$2
-						}
+						width: t.space.$66,
+						marginTop: t.space.$2
 					}),
-					children: [/* @__PURE__ */ jsx(Col, {
-						sx: (t) => ({
-							width: t.space.$66,
-							marginTop: t.space.$2
-						}),
-						children: /* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
-							localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle"),
-							textVariant: "h3"
-						}) })
-					}), /* @__PURE__ */ jsx(Col, {
-						sx: { width: "100%" },
-						children: /* @__PURE__ */ jsx(DomainList, {
-							fallback: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
-								localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton"),
-								sx: (t) => ({ gap: t.space.$2 }),
-								id: "manageVerifiedDomains",
-								onClick: navigateToGeneralPageRoot
-							}), /* @__PURE__ */ jsx(Text, {
-								localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle"),
-								sx: (t) => ({
-									paddingLeft: t.space.$10,
-									color: t.colors.$colorMutedForeground,
-									[mqu.md]: { paddingLeft: 0 }
-								})
-							})] }),
-							verificationStatus: "verified",
-							enrollmentMode: "automatic_suggestion"
-						})
-					})]
-				})
-			}),
-			/* @__PURE__ */ jsxs(Flex, {
-				direction: "col",
-				gap: 2,
-				sx: { width: "100%" },
-				children: [/* @__PURE__ */ jsx(MembersActionsRow, {}), /* @__PURE__ */ jsx(RequestToJoinList, {})]
+					children: /* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
+						localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle"),
+						textVariant: "h3"
+					}) })
+				}), /* @__PURE__ */ jsx(Col, {
+					sx: { width: "100%" },
+					children: /* @__PURE__ */ jsx(DomainList, {
+						fallback: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
+							localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton"),
+							sx: (t) => ({ gap: t.space.$2 }),
+							id: "manageVerifiedDomains",
+							onClick: navigateToGeneralPageRoot
+						}), /* @__PURE__ */ jsx(Text, {
+							localizationKey: localizationKeys("organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle"),
+							sx: (t) => ({
+								paddingLeft: t.space.$10,
+								color: t.colors.$colorMutedForeground,
+								[mqu.md]: { paddingLeft: 0 }
+							})
+						})] }),
+						verificationStatus: "verified",
+						enrollmentMode: "automatic_suggestion"
+					})
+				})]
 			})
-		]
+		}), /* @__PURE__ */ jsxs(Flex, {
+			direction: "col",
+			gap: 2,
+			sx: { width: "100%" },
+			children: [/* @__PURE__ */ jsx(MembersActionsRow, {}), /* @__PURE__ */ jsx(RequestToJoinList, {})]
+		})]
 	});
 };

package/dist/components/OrganizationProfile/OrganizationMembersTabRequests.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationMembersTabRequests.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx"],"sourcesContent":["import { Header } from '@/ui/elements/Header';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, Flex, localizationKeys, Text } from '../../customizables';\nimport { mqu } from '../../styledSystem';\nimport { DomainList } from './DomainList';\nimport { MembersActionsRow } from './MembersActions';\nimport { ~~MembershipWidget } from './MembershipWidget';\nimport {~~ RequestToJoinList } from './RequestToJoinList';\n\nexport const OrganizationMembersTabRequests = () => {\n const { organizationSettings } = useEnvironment();\n ~~//@ts-expect-error\n~~ const { ~~__unstable_manageBillingUrl,~~ navigateToGeneralPageRoot } = useOrganizationProfileContext();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n return (\n <Col\n gap={4}\n sx={{\n width: '100%',\n }}\n >\n {~~__unstable_manageBillingUrl && <MembershipWidget />}\n\n {~~isDomainsEnabled && (\n <Protect permission='org:sys_domains:manage'>\n <Flex\n sx={t => ({\n width: '100%',\n gap: t.space.$8,\n paddingBottom: t.space.$4,\n paddingLeft: t.space.$1,\n paddingRight: t.space.$1,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n [mqu.md]: {\n flexDirection: 'column',\n gap: t.space.$2,\n },\n })}\n >\n <Col sx={t => ({ width: t.space.$66, marginTop: t.space.$2 })}>\n <Header.Root>\n <Header.Title\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',\n )}\n textVariant='h3'\n />\n </Header.Root>\n </Col>\n <Col sx={{ width: '100%' }}>\n <DomainList\n fallback={\n <>\n <ProfileSection.ArrowButton\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',\n )}\n sx={t => ({ gap: t.space.$2 })}\n id='manageVerifiedDomains'\n onClick={navigateToGeneralPageRoot}\n />\n <Text\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',\n )}\n sx={t => ({\n paddingLeft: t.space.$10,\n color: t.colors.$colorMutedForeground,\n [mqu.md]: {\n paddingLeft: 0,\n },\n })}\n />\n </>\n }\n verificationStatus={'verified'}\n enrollmentMode={'automatic_suggestion'}\n />\n </Col>\n </Flex>\n </Protect>\n )}\n\n <Flex\n direction='col'\n gap={2}\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow />\n <RequestToJoinList />\n </Flex>\n </Col>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;AAYA~~,MAAa,uCAAuC;CAClD,MAAM,EAAE,yBAAyB,gBAAgB;~~CAEjD~~,MAAM,EAAE,~~6BAA6B,~~8BAA8B,+BAA+B;~~CAElG~~,MAAM,mBAAmB,sBAAsB,SAAS;AAExD,QACE,qBAAC;EACC,KAAK;EACL,IAAI,EACF,OAAO,QACR~~;;GAEA,+BAA+B,oBAAC,qBAAmB~~;~~GAEnD~~,oBACC,oBAAC;~~IAAQ~~,YAAW;~~cAClB~~,qBAAC;~~KACC~~,KAAI,OAAM;~~MACR~~,OAAO;~~MACP~~,KAAK,EAAE,MAAM;~~MACb~~,eAAe,EAAE,MAAM;~~MACvB~~,aAAa,EAAE,MAAM;~~MACrB~~,cAAc,EAAE,MAAM;~~MACtB~~,mBAAmB,EAAE,aAAa;~~MAClC~~,mBAAmB,EAAE,aAAa;~~MAClC~~,mBAAmB,EAAE,OAAO;~~OAC3B~~,IAAI,KAAK;~~OACR~~,eAAe;~~OACf~~,KAAK,EAAE,MAAM;~~OACd~~;~~MACF~~;~~gBAED~~,oBAAC;~~MAAI~~,KAAI,OAAM;~~OAAE~~,OAAO,EAAE,MAAM;~~OAAK~~,WAAW,EAAE,MAAM;~~OAAI~~;~~gBAC1D~~,oBAAC,OAAO,kBACN,oBAAC,OAAO;~~OACN~~,iBAAiB,iBACf,0EACD;~~OACD~~,aAAY;~~QACZ~~,GACU;~~OACV~~,EACN,oBAAC;~~MAAI~~,IAAI,EAAE,OAAO,QAAQ;~~gBACxB~~,oBAAC;~~OACC~~,UACE,4CACE,oBAAC,eAAe;~~QACd~~,iBAAiB,iBACf,4EACD;~~QACD~~,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;~~QAC7B~~,IAAG;~~QACH~~,SAAS;~~SACT~~,EACF,oBAAC;~~QACC~~,iBAAiB,iBACf,6EACD;~~QACD~~,KAAI,OAAM;~~SACR~~,aAAa,EAAE,MAAM;~~SACrB~~,OAAO,EAAE,OAAO;~~UACf~~,IAAI,KAAK,EACR,aAAa,GACd;~~SACF~~;~~SACD~~,IACD;~~OAEL~~,oBAAoB;~~OACpB~~,gBAAgB;~~QAChB~~;~~OACE~~;~~MACD~~;~~KACC;GAGZ~~,qBAAC;~~IACC~~,WAAU;~~IACV~~,KAAK;~~IACL~~,IAAI,EACF,OAAO,QACR;~~eAED~~,oBAAC,sBAAoB,EACrB,oBAAC,sBAAoB;~~KAChB;;~~GACH"}
1	+ {"version":3,"file":"OrganizationMembersTabRequests.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx"],"sourcesContent":["import { Header } from '@/ui/elements/Header';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, Flex, localizationKeys, Text } from '../../customizables';\nimport { mqu } from '../../styledSystem';\nimport { DomainList } from './DomainList';\nimport { MembersActionsRow } from './MembersActions';\nimport { RequestToJoinList } from './RequestToJoinList';\n\nexport const OrganizationMembersTabRequests = () => {\n const { organizationSettings } = useEnvironment();\n const { navigateToGeneralPageRoot } = useOrganizationProfileContext();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n return (\n <Col\n gap={4}\n sx={{\n width: '100%',\n }}\n >\n {isDomainsEnabled && (\n <Protect permission='org:sys_domains:manage'>\n <Flex\n sx={t => ({\n width: '100%',\n gap: t.space.$8,\n paddingBottom: t.space.$4,\n paddingLeft: t.space.$1,\n paddingRight: t.space.$1,\n borderBottomWidth: t.borderWidths.$normal,\n borderBottomStyle: t.borderStyles.$solid,\n borderBottomColor: t.colors.$borderAlpha100,\n [mqu.md]: {\n flexDirection: 'column',\n gap: t.space.$2,\n },\n })}\n >\n <Col sx={t => ({ width: t.space.$66, marginTop: t.space.$2 })}>\n <Header.Root>\n <Header.Title\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',\n )}\n textVariant='h3'\n />\n </Header.Root>\n </Col>\n <Col sx={{ width: '100%' }}>\n <DomainList\n fallback={\n <>\n <ProfileSection.ArrowButton\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',\n )}\n sx={t => ({ gap: t.space.$2 })}\n id='manageVerifiedDomains'\n onClick={navigateToGeneralPageRoot}\n />\n <Text\n localizationKey={localizationKeys(\n 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',\n )}\n sx={t => ({\n paddingLeft: t.space.$10,\n color: t.colors.$colorMutedForeground,\n [mqu.md]: {\n paddingLeft: 0,\n },\n })}\n />\n </>\n }\n verificationStatus={'verified'}\n enrollmentMode={'automatic_suggestion'}\n />\n </Col>\n </Flex>\n </Protect>\n )}\n\n <Flex\n direction='col'\n gap={2}\n sx={{\n width: '100%',\n }}\n >\n <MembersActionsRow />\n <RequestToJoinList />\n </Flex>\n </Col>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAa,uCAAuC;CAClD,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,EAAE,8BAA8B,+BAA+B;CAErE,MAAM,mBAAmB,sBAAsB,SAAS;AAExD,QACE,qBAAC;EACC,KAAK;EACL,IAAI,EACF,OAAO,QACR;aAEA,oBACC,oBAAC;GAAQ,YAAW;aAClB,qBAAC;IACC,KAAI,OAAM;KACR,OAAO;KACP,KAAK,EAAE,MAAM;KACb,eAAe,EAAE,MAAM;KACvB,aAAa,EAAE,MAAM;KACrB,cAAc,EAAE,MAAM;KACtB,mBAAmB,EAAE,aAAa;KAClC,mBAAmB,EAAE,aAAa;KAClC,mBAAmB,EAAE,OAAO;MAC3B,IAAI,KAAK;MACR,eAAe;MACf,KAAK,EAAE,MAAM;MACd;KACF;eAED,oBAAC;KAAI,KAAI,OAAM;MAAE,OAAO,EAAE,MAAM;MAAK,WAAW,EAAE,MAAM;MAAI;eAC1D,oBAAC,OAAO,kBACN,oBAAC,OAAO;MACN,iBAAiB,iBACf,0EACD;MACD,aAAY;OACZ,GACU;MACV,EACN,oBAAC;KAAI,IAAI,EAAE,OAAO,QAAQ;eACxB,oBAAC;MACC,UACE,4CACE,oBAAC,eAAe;OACd,iBAAiB,iBACf,4EACD;OACD,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;OAC7B,IAAG;OACH,SAAS;QACT,EACF,oBAAC;OACC,iBAAiB,iBACf,6EACD;OACD,KAAI,OAAM;QACR,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,OAAO;SACf,IAAI,KAAK,EACR,aAAa,GACd;QACF;QACD,IACD;MAEL,oBAAoB;MACpB,gBAAgB;OAChB;MACE;KACD;IACC,EAGZ,qBAAC;GACC,WAAU;GACV,KAAK;GACL,IAAI,EACF,OAAO,QACR;cAED,oBAAC,sBAAoB,EACrB,oBAAC,sBAAoB;IAChB;GACH"}