@clerk/ui 1.2.2-snapshot.v20260311230607 → 1.2.2

package/dist/970_ui_33fca3_1.2.2.js

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

package/dist/970_ui_3db80f_1.2.2.js

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

package/dist/970_ui_6e27e5_1.2.2.js

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

package/dist/ClerkUI.js

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.2.2-snapshot.v20260311230607";
-	version = "1.2.2-snapshot.v20260311230607";
+	static version = "1.2.2";
+	version = "1.2.2";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/components/PricingTable/PricingTableDefault.js

@@ -253,7 +253,7 @@ const CardHeader = React$1.forwardRef((props, ref) => {
 	});
 });
 const PeriodToggle = ({ plan, planPeriod, setPlanPeriod }) => {
-	if (plan.fee && plan.annualMonthlyFee) return /* @__PURE__ */ jsx(Box, {
+	if (!plan.isDefault && plan.fee && plan.annualMonthlyFee) return /* @__PURE__ */ jsx(Box, {
 		elementDescriptor: descriptors.pricingTableCardPeriodToggle,
 		sx: (t) => ({ marginTop: t.space.$1 }),
 		children: /* @__PURE__ */ jsx(Switch, {

package/dist/components/PricingTable/PricingTableDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"PricingTableDefault.js","names":["React","Check","Plus"],"sources":["../../../src/components/PricingTable/PricingTableDefault.tsx"],"sourcesContent":["import { __internal_useOrganizationBase, useClerk, useSession } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Switch } from '@/ui/elements/Switch';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { getClosestProfileScrollBox } from '@/ui/utils/getClosestProfileScrollBox';\n\nimport { useProtect } from '../../common';\nimport { normalizeFormatted, usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';\nimport {\n  Box,\n  Button,\n  Col,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  SimpleButton,\n  Span,\n  Text,\n} from '../../customizables';\nimport { Check, Plus } from '../../icons';\nimport { common, InternalThemeProvider } from '../../styledSystem';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\nimport { getPricingFooterState } from './utils/pricing-footer-state';\n\ninterface PricingTableDefaultProps {\n  plans?: BillingPlanResource[] | null;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource) => void;\n  isCompact?: boolean;\n  props: PricingTableProps;\n}\n\nexport function PricingTableDefault({\n  plans,\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  isCompact,\n  props,\n}: PricingTableDefaultProps) {\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTable}\n        sx={t => ({\n          // Sets the minimum width a column can be before wrapping\n          '--grid-min-size': isCompact ? '11.75rem' : '20rem',\n          // Set a max amount of columns before they start wrapping to new rows.\n          '--grid-max-columns': 'infinity',\n          // Set the default gap, use `--grid-gap-y` to override the row gap\n          '--grid-gap': t.space.$4,\n          // Derived from the maximum column size based on the grid configuration\n          '--max-column-width': '100% / var(--grid-max-columns, infinity) - var(--grid-gap)',\n          // Derived from `--max-column-width` and ensures it respects the minimum size and maximum width constraints\n          '--column-width': 'max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))',\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(var(--column-width), 1fr))',\n          gridTemplateRows: 'auto 1fr',\n          gap: `var(--grid-gap-y, var(--grid-gap, ${t.space.$4})) var(--grid-gap, ${t.space.$4})`,\n          alignItems: 'stretch',\n          width: '100%',\n          minWidth: '0',\n        })}\n        data-variant={isCompact ? 'compact' : 'default'}\n      >\n        {plans?.map(plan => (\n          <Card\n            key={plan.id}\n            plan={plan}\n            planPeriod={planPeriod}\n            setPlanPeriod={setPlanPeriod}\n            onSelect={onSelect}\n            props={props}\n            isCompact={isCompact}\n          />\n        ))}\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Card\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardProps {\n  plan: BillingPlanResource;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (p: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n  isCompact?: boolean;\n  props: PricingTableProps;\n}\n\nfunction Card(props: CardProps) {\n  const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;\n  const clerk = useClerk();\n  const { isSignedIn } = useSession();\n  const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();\n  const subscriberType = useSubscriberTypeContext();\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organization = __internal_useOrganizationBase();\n\n  const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';\n  const collapseFeatures = pricingTableProps.collapseFeatures || false;\n  const { id, slug } = plan;\n\n  const canManageBilling = useProtect(\n    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',\n  );\n  const { buttonPropsForPlan, activeOrUpcomingSubscriptionBasedOnPlanPeriod } = usePlansContext();\n\n  const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {\n    const portalRoot = getClosestProfileScrollBox(mode, event);\n\n    clerk.__internal_openPlanDetails({\n      plan,\n      initialPlanPeriod: planPeriod,\n      portalRoot,\n    });\n  };\n\n  const subscription = React.useMemo(\n    () => activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod),\n    [plan, planPeriod, activeOrUpcomingSubscriptionBasedOnPlanPeriod],\n  );\n\n  const hasFeatures = plan.features.length > 0;\n\n  const { shouldShowFooter, shouldShowFooterNotice } = getPricingFooterState({\n    subscription,\n    plan,\n    planPeriod,\n    for: pricingTableProps.for,\n    hasActiveOrganization: !!organization,\n  });\n\n  return (\n    <Box\n      key={id}\n      elementDescriptor={descriptors.pricingTableCard}\n      elementId={descriptors.pricingTableCard.setId(slug)}\n      sx={t => ({\n        display: 'grid',\n        gap: 0,\n        gridTemplateRows: 'subgrid',\n        gridRow: 'span 5',\n        background: common.mutedBackground(t),\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha150,\n        borderRadius: t.radii.$xl,\n        overflow: 'hidden',\n        textAlign: 'start',\n      })}\n      data-variant={isCompact ? 'compact' : 'default'}\n    >\n      <CardHeader\n        plan={plan}\n        isCompact={isCompact}\n        planPeriod={planPeriod}\n        setPlanPeriod={setPlanPeriod}\n        badge={\n          subscription ? (\n            <SubscriptionBadge subscription={subscription.isFreeTrial ? { status: 'free_trial' } : subscription} />\n          ) : undefined\n        }\n      />\n      <Box\n        elementDescriptor={descriptors.pricingTableCardBody}\n        sx={{\n          display: 'grid',\n          gridTemplateRows: 'subgrid',\n          gridRow: 'span 2',\n          gap: 0,\n        }}\n      >\n        {(ctaPosition === 'bottom' && !collapseFeatures) || (ctaPosition === 'top' && hasFeatures) ? (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFeatures}\n            sx={t => ({\n              // gridRow: shouldShowFooter ? 'auto' : 'span 2',\n              display: 'flex',\n              flexDirection: 'column',\n              flex: '1',\n              padding: isCompact ? t.space.$3 : t.space.$4,\n              backgroundColor: hasFeatures ? t.colors.$colorBackground : 'transparent',\n              borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,\n              borderTopStyle: t.borderStyles.$solid,\n              borderTopColor: t.colors.$borderAlpha150,\n            })}\n            data-variant={isCompact ? 'compact' : 'default'}\n          >\n            <CardFeaturesList\n              plan={plan}\n              isCompact={isCompact}\n              showPlanDetails={showPlanDetails}\n            />\n          </Box>\n        ) : null}\n\n        {shouldShowFooter ? (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFooter}\n            sx={t => ({\n              marginTop: 'auto',\n              padding: isCompact ? t.space.$3 : t.space.$4,\n              borderTopWidth: t.borderWidths.$normal,\n              borderTopStyle: t.borderStyles.$solid,\n              borderTopColor: t.colors.$borderAlpha150,\n              order: ctaPosition === 'top' ? -1 : undefined,\n            })}\n          >\n            {shouldShowFooterNotice && subscription ? (\n              <Text\n                elementDescriptor={descriptors.pricingTableCardFooterNotice}\n                variant={isCompact ? 'buttonSmall' : 'buttonLarge'}\n                localizationKey={\n                  plan.freeTrialEnabled && subscription.isFreeTrial && subscription.periodEnd\n                    ? localizationKeys('badge__trialEndsAt', {\n                        date: subscription.periodEnd,\n                      })\n                    : localizationKeys('badge__startsAt', { date: subscription.periodStart })\n                }\n                colorScheme='secondary'\n                sx={t => ({\n                  paddingBlock: t.space.$1x5,\n                  textAlign: 'center',\n                })}\n              />\n            ) : (\n              <Tooltip.Root>\n                <Tooltip.Trigger sx={{ width: '100%' }}>\n                  <Button\n                    elementDescriptor={descriptors.pricingTableCardFooterButton}\n                    block\n                    textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}\n                    {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}\n                    onClick={event => {\n                      onSelect(plan, event);\n                    }}\n                  />\n                </Tooltip.Trigger>\n                {isSignedIn && !canManageBilling && (\n                  <Tooltip.Content\n                    text={localizationKeys('organizationProfile.plansPage.alerts.noPermissionsToManageBilling')}\n                  />\n                )}\n              </Tooltip.Root>\n            )}\n          </Box>\n        ) : (\n          <Box\n            sx={t => ({\n              backgroundColor: hasFeatures ? t.colors.$colorBackground : 'transparent',\n            })}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CardHeader\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardHeaderProps {\n  plan: BillingPlanResource;\n  isCompact?: boolean;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  badge?: React.ReactNode;\n}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref) => {\n  const { plan, isCompact, planPeriod, setPlanPeriod, badge } = props;\n  const { name } = plan;\n\n  const fee = React.useMemo(() => {\n    if (!plan.annualMonthlyFee) {\n      return plan.fee;\n    }\n\n    if (!plan.fee) {\n      return plan.annualFee;\n    }\n\n    return planPeriod === 'annual' ? plan.annualMonthlyFee : plan.fee;\n  }, [plan, planPeriod]);\n\n  const feeFormatted = React.useMemo(() => {\n    if (!fee) {\n      return '';\n    }\n    return `${fee.currencySymbol}${normalizeFormatted(fee.amountFormatted)}`;\n  }, [fee]);\n\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.pricingTableCardHeader}\n      sx={t => ({\n        width: '100%',\n        padding: isCompact ? t.space.$3 : t.space.$4,\n        display: 'grid',\n        gap: t.space.$1,\n        gridRow: 'span 3',\n        gridTemplateRows: 'subgrid',\n      })}\n      data-variant={isCompact ? 'compact' : 'default'}\n    >\n      <Box elementDescriptor={descriptors.pricingTableCardTitleContainer}>\n        <Box\n          sx={t => ({\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: t.space.$0x25,\n          })}\n        >\n          <Heading\n            elementDescriptor={descriptors.pricingTableCardTitle}\n            as='h2'\n            textVariant={isCompact ? 'h3' : 'h2'}\n          >\n            {name}\n          </Heading>\n          {badge && badge}\n        </Box>\n        {!isCompact && plan.description ? (\n          <Text\n            elementDescriptor={descriptors.pricingTableCardDescription}\n            variant='subtitle'\n            colorScheme='secondary'\n            sx={{\n              justifySelf: 'flex-start',\n            }}\n          >\n            {plan.description}\n          </Text>\n        ) : null}\n      </Box>\n\n      <Flex\n        elementDescriptor={descriptors.pricingTableCardFeeContainer}\n        data-variant={isCompact ? 'compact' : 'default'}\n        align='center'\n        wrap='wrap'\n        sx={t => ({\n          columnGap: t.space.$1,\n          marginTop: t.space.$1,\n        })}\n      >\n        <Text\n          elementDescriptor={descriptors.pricingTableCardFee}\n          variant={isCompact ? 'h2' : 'h1'}\n          colorScheme='body'\n        >\n          {feeFormatted}\n        </Text>\n        {!plan.isDefault ? (\n          <Text\n            elementDescriptor={descriptors.pricingTableCardFeePeriod}\n            variant='caption'\n            colorScheme='secondary'\n            sx={t => ({\n              textTransform: 'lowercase',\n              ':before': {\n                content: '\"/\"',\n                marginInlineEnd: t.space.$0x25,\n              },\n            })}\n            localizationKey={plan.fee ? localizationKeys('billing.month') : localizationKeys('billing.year')}\n          />\n        ) : null}\n      </Flex>\n\n      <PeriodToggle\n        plan={plan}\n        planPeriod={planPeriod}\n        setPlanPeriod={setPlanPeriod}\n      />\n    </Box>\n  );\n});\n\nconst PeriodToggle = ({\n  plan,\n  planPeriod,\n  setPlanPeriod,\n}: {\n  plan: BillingPlanResource;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n}) => {\n  if (plan.fee && plan.annualMonthlyFee) {\n    return (\n      <Box\n        elementDescriptor={descriptors.pricingTableCardPeriodToggle}\n        sx={t => ({\n          marginTop: t.space.$1,\n        })}\n      >\n        <Switch\n          isChecked={planPeriod === 'annual'}\n          onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}\n          label={localizationKeys('billing.billedAnnually')}\n        />\n      </Box>\n    );\n  }\n\n  if (plan.annualMonthlyFee) {\n    return (\n      <Text\n        elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}\n        variant='caption'\n        colorScheme='secondary'\n        localizationKey={\n          plan.isDefault ? localizationKeys('billing.alwaysFree') : localizationKeys('billing.billedAnnuallyOnly')\n        }\n        sx={t => ({\n          justifySelf: 'flex-start',\n          alignSelf: 'center',\n          marginTop: t.space.$1,\n        })}\n      />\n    );\n  }\n\n  return (\n    <Text\n      elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}\n      variant='caption'\n      colorScheme='secondary'\n      localizationKey={\n        plan.isDefault ? localizationKeys('billing.alwaysFree') : localizationKeys('billing.billedMonthlyOnly')\n      }\n      sx={t => ({\n        justifySelf: 'flex-start',\n        alignSelf: 'center',\n        marginTop: t.space.$1,\n      })}\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CardFeaturesList\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardFeaturesListProps {\n  plan: BillingPlanResource;\n  /**\n   * @default false\n   */\n  isCompact?: boolean;\n  showPlanDetails: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst CardFeaturesList = React.forwardRef<HTMLDivElement, CardFeaturesListProps>((props, ref) => {\n  const { plan, isCompact, showPlanDetails } = props;\n\n  const totalFeatures = plan.features.length;\n  const hasMoreFeatures = isCompact ? totalFeatures > 3 : totalFeatures > 8;\n\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.pricingTableCardFeatures}\n      sx={t => ({\n        display: 'grid',\n        flex: 1,\n        rowGap: isCompact ? t.space.$2 : t.space.$3,\n      })}\n    >\n      <Col\n        elementDescriptor={descriptors.pricingTableCardFeaturesList}\n        data-variant={isCompact ? 'compact' : 'default'}\n        as='ul'\n        role='list'\n        sx={t => ({\n          flex: '1',\n          rowGap: isCompact ? t.space.$2 : t.space.$3,\n          margin: 0,\n          padding: 0,\n        })}\n      >\n        {plan.features.slice(0, hasMoreFeatures ? (isCompact ? 3 : 8) : totalFeatures).map(feature => (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFeaturesListItem}\n            elementId={descriptors.pricingTableCardFeaturesListItem.setId(feature.slug)}\n            key={feature.id}\n            as='li'\n            sx={t => ({\n              display: 'flex',\n              alignItems: 'baseline',\n              gap: t.space.$2,\n              margin: 0,\n              padding: 0,\n            })}\n          >\n            <Icon\n              icon={Check}\n              colorScheme='neutral'\n              size='sm'\n              aria-hidden\n              sx={t => ({\n                transform: `translateY(${t.space.$0x25})`,\n              })}\n            />\n            <Span elementDescriptor={descriptors.pricingTableCardFeaturesListItemContent}>\n              <Text\n                elementDescriptor={descriptors.pricingTableCardFeaturesListItemTitle}\n                colorScheme='body'\n                sx={t => ({\n                  fontWeight: t.fontWeights.$normal,\n                })}\n              >\n                {feature.name}\n              </Text>\n            </Span>\n          </Box>\n        ))}\n      </Col>\n      {hasMoreFeatures && (\n        <SimpleButton\n          onClick={event => showPlanDetails(event)}\n          variant='link'\n          sx={t => ({\n            marginBlockStart: 'auto',\n            paddingBlock: t.space.$1,\n            gap: t.space.$1,\n          })}\n        >\n          <Icon\n            icon={Plus}\n            colorScheme='neutral'\n            size='md'\n            aria-hidden\n          />\n          <Span localizationKey={localizationKeys('billing.seeAllFeatures')} />\n        </SimpleButton>\n      )}\n    </Box>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PricingTableDefault.js","names":["React","Check","Plus"],"sources":["../../../src/components/PricingTable/PricingTableDefault.tsx"],"sourcesContent":["import { __internal_useOrganizationBase, useClerk, useSession } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Switch } from '@/ui/elements/Switch';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { getClosestProfileScrollBox } from '@/ui/utils/getClosestProfileScrollBox';\n\nimport { useProtect } from '../../common';\nimport { normalizeFormatted, usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';\nimport {\n  Box,\n  Button,\n  Col,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  SimpleButton,\n  Span,\n  Text,\n} from '../../customizables';\nimport { Check, Plus } from '../../icons';\nimport { common, InternalThemeProvider } from '../../styledSystem';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\nimport { getPricingFooterState } from './utils/pricing-footer-state';\n\ninterface PricingTableDefaultProps {\n  plans?: BillingPlanResource[] | null;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource) => void;\n  isCompact?: boolean;\n  props: PricingTableProps;\n}\n\nexport function PricingTableDefault({\n  plans,\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  isCompact,\n  props,\n}: PricingTableDefaultProps) {\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTable}\n        sx={t => ({\n          // Sets the minimum width a column can be before wrapping\n          '--grid-min-size': isCompact ? '11.75rem' : '20rem',\n          // Set a max amount of columns before they start wrapping to new rows.\n          '--grid-max-columns': 'infinity',\n          // Set the default gap, use `--grid-gap-y` to override the row gap\n          '--grid-gap': t.space.$4,\n          // Derived from the maximum column size based on the grid configuration\n          '--max-column-width': '100% / var(--grid-max-columns, infinity) - var(--grid-gap)',\n          // Derived from `--max-column-width` and ensures it respects the minimum size and maximum width constraints\n          '--column-width': 'max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))',\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(var(--column-width), 1fr))',\n          gridTemplateRows: 'auto 1fr',\n          gap: `var(--grid-gap-y, var(--grid-gap, ${t.space.$4})) var(--grid-gap, ${t.space.$4})`,\n          alignItems: 'stretch',\n          width: '100%',\n          minWidth: '0',\n        })}\n        data-variant={isCompact ? 'compact' : 'default'}\n      >\n        {plans?.map(plan => (\n          <Card\n            key={plan.id}\n            plan={plan}\n            planPeriod={planPeriod}\n            setPlanPeriod={setPlanPeriod}\n            onSelect={onSelect}\n            props={props}\n            isCompact={isCompact}\n          />\n        ))}\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Card\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardProps {\n  plan: BillingPlanResource;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (p: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n  isCompact?: boolean;\n  props: PricingTableProps;\n}\n\nfunction Card(props: CardProps) {\n  const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;\n  const clerk = useClerk();\n  const { isSignedIn } = useSession();\n  const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();\n  const subscriberType = useSubscriberTypeContext();\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organization = __internal_useOrganizationBase();\n\n  const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';\n  const collapseFeatures = pricingTableProps.collapseFeatures || false;\n  const { id, slug } = plan;\n\n  const canManageBilling = useProtect(\n    has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',\n  );\n  const { buttonPropsForPlan, activeOrUpcomingSubscriptionBasedOnPlanPeriod } = usePlansContext();\n\n  const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {\n    const portalRoot = getClosestProfileScrollBox(mode, event);\n\n    clerk.__internal_openPlanDetails({\n      plan,\n      initialPlanPeriod: planPeriod,\n      portalRoot,\n    });\n  };\n\n  const subscription = React.useMemo(\n    () => activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod),\n    [plan, planPeriod, activeOrUpcomingSubscriptionBasedOnPlanPeriod],\n  );\n\n  const hasFeatures = plan.features.length > 0;\n\n  const { shouldShowFooter, shouldShowFooterNotice } = getPricingFooterState({\n    subscription,\n    plan,\n    planPeriod,\n    for: pricingTableProps.for,\n    hasActiveOrganization: !!organization,\n  });\n\n  return (\n    <Box\n      key={id}\n      elementDescriptor={descriptors.pricingTableCard}\n      elementId={descriptors.pricingTableCard.setId(slug)}\n      sx={t => ({\n        display: 'grid',\n        gap: 0,\n        gridTemplateRows: 'subgrid',\n        gridRow: 'span 5',\n        background: common.mutedBackground(t),\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha150,\n        borderRadius: t.radii.$xl,\n        overflow: 'hidden',\n        textAlign: 'start',\n      })}\n      data-variant={isCompact ? 'compact' : 'default'}\n    >\n      <CardHeader\n        plan={plan}\n        isCompact={isCompact}\n        planPeriod={planPeriod}\n        setPlanPeriod={setPlanPeriod}\n        badge={\n          subscription ? (\n            <SubscriptionBadge subscription={subscription.isFreeTrial ? { status: 'free_trial' } : subscription} />\n          ) : undefined\n        }\n      />\n      <Box\n        elementDescriptor={descriptors.pricingTableCardBody}\n        sx={{\n          display: 'grid',\n          gridTemplateRows: 'subgrid',\n          gridRow: 'span 2',\n          gap: 0,\n        }}\n      >\n        {(ctaPosition === 'bottom' && !collapseFeatures) || (ctaPosition === 'top' && hasFeatures) ? (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFeatures}\n            sx={t => ({\n              // gridRow: shouldShowFooter ? 'auto' : 'span 2',\n              display: 'flex',\n              flexDirection: 'column',\n              flex: '1',\n              padding: isCompact ? t.space.$3 : t.space.$4,\n              backgroundColor: hasFeatures ? t.colors.$colorBackground : 'transparent',\n              borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,\n              borderTopStyle: t.borderStyles.$solid,\n              borderTopColor: t.colors.$borderAlpha150,\n            })}\n            data-variant={isCompact ? 'compact' : 'default'}\n          >\n            <CardFeaturesList\n              plan={plan}\n              isCompact={isCompact}\n              showPlanDetails={showPlanDetails}\n            />\n          </Box>\n        ) : null}\n\n        {shouldShowFooter ? (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFooter}\n            sx={t => ({\n              marginTop: 'auto',\n              padding: isCompact ? t.space.$3 : t.space.$4,\n              borderTopWidth: t.borderWidths.$normal,\n              borderTopStyle: t.borderStyles.$solid,\n              borderTopColor: t.colors.$borderAlpha150,\n              order: ctaPosition === 'top' ? -1 : undefined,\n            })}\n          >\n            {shouldShowFooterNotice && subscription ? (\n              <Text\n                elementDescriptor={descriptors.pricingTableCardFooterNotice}\n                variant={isCompact ? 'buttonSmall' : 'buttonLarge'}\n                localizationKey={\n                  plan.freeTrialEnabled && subscription.isFreeTrial && subscription.periodEnd\n                    ? localizationKeys('badge__trialEndsAt', {\n                        date: subscription.periodEnd,\n                      })\n                    : localizationKeys('badge__startsAt', { date: subscription.periodStart })\n                }\n                colorScheme='secondary'\n                sx={t => ({\n                  paddingBlock: t.space.$1x5,\n                  textAlign: 'center',\n                })}\n              />\n            ) : (\n              <Tooltip.Root>\n                <Tooltip.Trigger sx={{ width: '100%' }}>\n                  <Button\n                    elementDescriptor={descriptors.pricingTableCardFooterButton}\n                    block\n                    textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}\n                    {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}\n                    onClick={event => {\n                      onSelect(plan, event);\n                    }}\n                  />\n                </Tooltip.Trigger>\n                {isSignedIn && !canManageBilling && (\n                  <Tooltip.Content\n                    text={localizationKeys('organizationProfile.plansPage.alerts.noPermissionsToManageBilling')}\n                  />\n                )}\n              </Tooltip.Root>\n            )}\n          </Box>\n        ) : (\n          <Box\n            sx={t => ({\n              backgroundColor: hasFeatures ? t.colors.$colorBackground : 'transparent',\n            })}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CardHeader\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardHeaderProps {\n  plan: BillingPlanResource;\n  isCompact?: boolean;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  badge?: React.ReactNode;\n}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref) => {\n  const { plan, isCompact, planPeriod, setPlanPeriod, badge } = props;\n  const { name } = plan;\n\n  const fee = React.useMemo(() => {\n    if (!plan.annualMonthlyFee) {\n      return plan.fee;\n    }\n\n    if (!plan.fee) {\n      return plan.annualFee;\n    }\n\n    return planPeriod === 'annual' ? plan.annualMonthlyFee : plan.fee;\n  }, [plan, planPeriod]);\n\n  const feeFormatted = React.useMemo(() => {\n    if (!fee) {\n      return '';\n    }\n    return `${fee.currencySymbol}${normalizeFormatted(fee.amountFormatted)}`;\n  }, [fee]);\n\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.pricingTableCardHeader}\n      sx={t => ({\n        width: '100%',\n        padding: isCompact ? t.space.$3 : t.space.$4,\n        display: 'grid',\n        gap: t.space.$1,\n        gridRow: 'span 3',\n        gridTemplateRows: 'subgrid',\n      })}\n      data-variant={isCompact ? 'compact' : 'default'}\n    >\n      <Box elementDescriptor={descriptors.pricingTableCardTitleContainer}>\n        <Box\n          sx={t => ({\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: t.space.$0x25,\n          })}\n        >\n          <Heading\n            elementDescriptor={descriptors.pricingTableCardTitle}\n            as='h2'\n            textVariant={isCompact ? 'h3' : 'h2'}\n          >\n            {name}\n          </Heading>\n          {badge && badge}\n        </Box>\n        {!isCompact && plan.description ? (\n          <Text\n            elementDescriptor={descriptors.pricingTableCardDescription}\n            variant='subtitle'\n            colorScheme='secondary'\n            sx={{\n              justifySelf: 'flex-start',\n            }}\n          >\n            {plan.description}\n          </Text>\n        ) : null}\n      </Box>\n\n      <Flex\n        elementDescriptor={descriptors.pricingTableCardFeeContainer}\n        data-variant={isCompact ? 'compact' : 'default'}\n        align='center'\n        wrap='wrap'\n        sx={t => ({\n          columnGap: t.space.$1,\n          marginTop: t.space.$1,\n        })}\n      >\n        <Text\n          elementDescriptor={descriptors.pricingTableCardFee}\n          variant={isCompact ? 'h2' : 'h1'}\n          colorScheme='body'\n        >\n          {feeFormatted}\n        </Text>\n        {!plan.isDefault ? (\n          <Text\n            elementDescriptor={descriptors.pricingTableCardFeePeriod}\n            variant='caption'\n            colorScheme='secondary'\n            sx={t => ({\n              textTransform: 'lowercase',\n              ':before': {\n                content: '\"/\"',\n                marginInlineEnd: t.space.$0x25,\n              },\n            })}\n            localizationKey={plan.fee ? localizationKeys('billing.month') : localizationKeys('billing.year')}\n          />\n        ) : null}\n      </Flex>\n\n      <PeriodToggle\n        plan={plan}\n        planPeriod={planPeriod}\n        setPlanPeriod={setPlanPeriod}\n      />\n    </Box>\n  );\n});\n\nconst PeriodToggle = ({\n  plan,\n  planPeriod,\n  setPlanPeriod,\n}: {\n  plan: BillingPlanResource;\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n}) => {\n  if (!plan.isDefault && plan.fee && plan.annualMonthlyFee) {\n    return (\n      <Box\n        elementDescriptor={descriptors.pricingTableCardPeriodToggle}\n        sx={t => ({\n          marginTop: t.space.$1,\n        })}\n      >\n        <Switch\n          isChecked={planPeriod === 'annual'}\n          onChange={(checked: boolean) => setPlanPeriod(checked ? 'annual' : 'month')}\n          label={localizationKeys('billing.billedAnnually')}\n        />\n      </Box>\n    );\n  }\n\n  if (plan.annualMonthlyFee) {\n    return (\n      <Text\n        elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}\n        variant='caption'\n        colorScheme='secondary'\n        localizationKey={\n          plan.isDefault ? localizationKeys('billing.alwaysFree') : localizationKeys('billing.billedAnnuallyOnly')\n        }\n        sx={t => ({\n          justifySelf: 'flex-start',\n          alignSelf: 'center',\n          marginTop: t.space.$1,\n        })}\n      />\n    );\n  }\n\n  return (\n    <Text\n      elementDescriptor={descriptors.pricingTableCardFeePeriodNotice}\n      variant='caption'\n      colorScheme='secondary'\n      localizationKey={\n        plan.isDefault ? localizationKeys('billing.alwaysFree') : localizationKeys('billing.billedMonthlyOnly')\n      }\n      sx={t => ({\n        justifySelf: 'flex-start',\n        alignSelf: 'center',\n        marginTop: t.space.$1,\n      })}\n    />\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CardFeaturesList\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CardFeaturesListProps {\n  plan: BillingPlanResource;\n  /**\n   * @default false\n   */\n  isCompact?: boolean;\n  showPlanDetails: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst CardFeaturesList = React.forwardRef<HTMLDivElement, CardFeaturesListProps>((props, ref) => {\n  const { plan, isCompact, showPlanDetails } = props;\n\n  const totalFeatures = plan.features.length;\n  const hasMoreFeatures = isCompact ? totalFeatures > 3 : totalFeatures > 8;\n\n  return (\n    <Box\n      ref={ref}\n      elementDescriptor={descriptors.pricingTableCardFeatures}\n      sx={t => ({\n        display: 'grid',\n        flex: 1,\n        rowGap: isCompact ? t.space.$2 : t.space.$3,\n      })}\n    >\n      <Col\n        elementDescriptor={descriptors.pricingTableCardFeaturesList}\n        data-variant={isCompact ? 'compact' : 'default'}\n        as='ul'\n        role='list'\n        sx={t => ({\n          flex: '1',\n          rowGap: isCompact ? t.space.$2 : t.space.$3,\n          margin: 0,\n          padding: 0,\n        })}\n      >\n        {plan.features.slice(0, hasMoreFeatures ? (isCompact ? 3 : 8) : totalFeatures).map(feature => (\n          <Box\n            elementDescriptor={descriptors.pricingTableCardFeaturesListItem}\n            elementId={descriptors.pricingTableCardFeaturesListItem.setId(feature.slug)}\n            key={feature.id}\n            as='li'\n            sx={t => ({\n              display: 'flex',\n              alignItems: 'baseline',\n              gap: t.space.$2,\n              margin: 0,\n              padding: 0,\n            })}\n          >\n            <Icon\n              icon={Check}\n              colorScheme='neutral'\n              size='sm'\n              aria-hidden\n              sx={t => ({\n                transform: `translateY(${t.space.$0x25})`,\n              })}\n            />\n            <Span elementDescriptor={descriptors.pricingTableCardFeaturesListItemContent}>\n              <Text\n                elementDescriptor={descriptors.pricingTableCardFeaturesListItemTitle}\n                colorScheme='body'\n                sx={t => ({\n                  fontWeight: t.fontWeights.$normal,\n                })}\n              >\n                {feature.name}\n              </Text>\n            </Span>\n          </Box>\n        ))}\n      </Col>\n      {hasMoreFeatures && (\n        <SimpleButton\n          onClick={event => showPlanDetails(event)}\n          variant='link'\n          sx={t => ({\n            marginBlockStart: 'auto',\n            paddingBlock: t.space.$1,\n            gap: t.space.$1,\n          })}\n        >\n          <Icon\n            icon={Plus}\n            colorScheme='neutral'\n            size='md'\n            aria-hidden\n          />\n          <Span localizationKey={localizationKeys('billing.seeAllFeatures')} />\n        </SimpleButton>\n      )}\n    </Box>\n  );\n});\n"],"mappings":"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"}