admin-ui-starter-kit 0.6.9 → 0.7.1

package/dist/showcase/assets/layout-auth-ysobcsYs.js

@@ -0,0 +1,790 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{f as r,n as i,o as a,p as o,t as s}from"./section-C_rLy6Zn.js";import{t as c}from"./building-2-ICycTKXZ.js";import{t as l}from"./chart-column-CJx3qWPs.js";import{r as u,t as d}from"./example-BsDQngs7.js";import{t as f}from"./circle-check-BjuHEm7p.js";import{t as p}from"./clock-3-CzeN1Iwk.js";import{t as m}from"./earth-BGrx2u2i.js";import{t as h}from"./password-input-C5MrNrHm.js";import{t as g}from"./key-round-CNEqnMGG.js";import{t as _}from"./lock-keyhole-DKi16lNp.js";import{t as v}from"./mail-check-DrNT7RWT.js";import{t as y}from"./shield-check-CNudpzdR.js";import{t as b}from"./sparkles-BDnbTUMq.js";import{N as x,d as ee,l as te,n as S}from"./index-B4sKWDcN.js";import{t as C}from"./props-table-aynAz90t.js";import{t as w}from"./text-link-BFYPeXTq.js";import{a as T,r as ne,t as re}from"./card-primitives-DzqLvy5f.js";import{i as E,n as ie,r as D,t as O}from"./alert--MONSwFW.js";import{c as ae,i as oe,o as se,r as ce,t as le,u as ue}from"./item-WOhHNpnr.js";import{t as de}from"./checkbox-BBxn_hxI.js";import{t as k}from"./input-CLQIEOQ4.js";import{n as A}from"./form-field-D5kwgD4P.js";import{t as j}from"./use-layout-link-DpqFiDf-.js";var fe=te(`users-round`,[[`path`,{d:`M18 21a8 8 0 0 0-16 0`,key:`3ypg7q`}],[`circle`,{cx:`10`,cy:`8`,r:`5`,key:`o932ke`}],[`path`,{d:`M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3`,key:`10s06x`}]]),M=ee();function pe({eyebrow:e,title:t,description:n,headerEnd:i,banner:a,media:s,footer:c,children:l,className:u,headerClassName:d,mediaClassName:f,contentClassName:p,footerClassName:m,...h}){let g=!!(e||t||n||i);return(0,M.jsxs)(T,{"data-slot":`auth-card`,className:S(`auth-card--component`,`gap-0 overflow-hidden rounded-lg border border-border/70 bg-card py-0 shadow-sm`,u),...h,children:[!!s&&(0,M.jsx)(`div`,{className:S(`auth-card--media`,`min-h-12 border-b border-border/60 bg-muted/50`,f),children:s}),!!g&&(0,M.jsxs)(`header`,{className:S(`auth-card--header`,`flex items-start justify-between gap-4 px-6 pt-6 md:px-8 md:pt-8`,d),children:[(0,M.jsxs)(`div`,{className:`min-w-0 space-y-1.5`,children:[!!e&&(0,M.jsx)(o,{tag:`div`,size:`xs`,type:`secondary`,weight:`semibold`,className:`auth-card--eyebrow uppercase tracking-wide`,children:e}),!!t&&(0,M.jsx)(r,{tag:`h1`,containerClassName:`space-y-0`,className:`auth-card--title border-0 pb-0 text-base leading-tight`,children:t}),!!n&&(0,M.jsx)(o,{tag:`div`,type:`secondary`,lineHeight:`relaxed`,className:`auth-card--description max-w-prose`,children:n})]}),!!i&&(0,M.jsx)(`div`,{className:`auth-card--header-end shrink-0`,children:i})]}),(0,M.jsxs)(re,{className:S(`auth-card--content`,`px-6 pb-6 md:px-8 md:pb-8`,g?`pt-5`:`pt-6 md:pt-8`,p),children:[!!a&&(0,M.jsx)(`div`,{className:`auth-card--banner mb-5`,children:a}),l]}),!!c&&(0,M.jsx)(ne,{className:S(`auth-card--footer`,`border-t border-border/60 px-6 py-4 md:px-8`,m),children:c})]})}var N=t(n(),1);function me(e){return!!(e&&typeof e==`object`&&!(0,N.isValidElement)(e)&&(`logo`in e||`label`in e||`description`in e||`href`in e))}function P({links:e=[],renderLink:t,LinkComponent:n}={}){let r=j({renderLink:t,LinkComponent:n});return{links:(0,N.useMemo)(()=>e.filter(e=>e.visible!==!1),[e]),renderLink:r}}function he({variant:e=`card`,brand:t,footer:n,footerLinks:r=[],policyLinks:i=[],languageLinks:a=[],languageSwitcher:o,postCard:s,socialProviders:c=[],splitPanel:l,renderLink:u,LinkComponent:d}={}){let f=j({renderLink:u,LinkComponent:d}),p=(0,N.useMemo)(()=>r.filter(e=>e.visible!==!1),[r]),m=(0,N.useMemo)(()=>i.filter(e=>e.visible!==!1),[i]),h=(0,N.useMemo)(()=>a.filter(e=>e.visible!==!1),[a]),g=(0,N.useMemo)(()=>c.filter(e=>e.visible!==!1),[c]),_=!!(t&&(me(t)?t.logo||t.label||t.description:t)),v=!!(s||n||o||p.length>0||m.length>0||h.length>0),y=!!l;return{variant:y?e:`card`,hasBrand:_,hasAfterCard:v,hasSplitPanel:y,hasSocialProviders:g.length>0,renderLink:f,footerLinks:p,policyLinks:m,languageLinks:h,socialProviders:g}}var ge={socialDivider:`or continue with email`,socialProvidersLabel:`Social sign-in options`,footerLinksLabel:`Authentication links`,policyLinksLabel:`Policies`,languageLinksLabel:`Language options`},F={label:`Authentication links`},I={label:`Social sign-in options`},L={label:`Authentication method`,divider:`or`};function R({links:e,leadingIcon:t,separator:n=`·`,renderLink:r,LinkComponent:i,className:a,strings:s,...c}){let l=x(F,s),{links:u,renderLink:d}=P({links:e,renderLink:r,LinkComponent:i});return u.length===0?null:(0,M.jsxs)(`nav`,{"aria-label":c[`aria-label`]??l.label,className:S(`auth-footer-links--component`,`flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-center`,a),...c,children:[!!t&&(0,M.jsx)(`span`,{className:`auth-footer-links--icon flex shrink-0 items-center text-muted-foreground`,"aria-hidden":`true`,children:t}),u.map((e,t)=>{let r=d({href:e.href,target:e.target,rel:e.rel,external:e.external,disabled:e.disabled,onClick:e.onClick,className:S(`auth-footer-links--item`,`text-muted-foreground transition-colors hover:text-foreground`,e.disabled&&`pointer-events-none opacity-50`),children:(0,M.jsx)(o,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label})});return(0,M.jsxs)(N.Fragment,{children:[t>0&&(0,M.jsx)(o,{tag:`span`,size:`xs`,type:`secondary`,"aria-hidden":`true`,className:`auth-footer-links--separator`,children:n}),r]},e.id??t)})]})}var _e=`auth-social-provider-button--component inline-flex h-9 w-full items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-pxs font-medium text-foreground shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50`;function z(){return(0,M.jsxs)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 256 262`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,M.jsx)(`path`,{fill:`#4285F4`,d:`M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027`}),(0,M.jsx)(`path`,{fill:`#34A853`,d:`M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1`}),(0,M.jsx)(`path`,{fill:`#FBBC05`,d:`M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782`}),(0,M.jsx)(`path`,{fill:`#EB4335`,d:`M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251`})]})}function B(){return(0,M.jsxs)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 23 23`,children:[(0,M.jsx)(`path`,{fill:`#f25022`,d:`M1 1h10v10H1z`}),(0,M.jsx)(`path`,{fill:`#7fba00`,d:`M12 1h10v10H12z`}),(0,M.jsx)(`path`,{fill:`#00a4ef`,d:`M1 12h10v10H1z`}),(0,M.jsx)(`path`,{fill:`#ffb900`,d:`M12 12h10v10H12z`})]})}function V(){return(0,M.jsx)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,M.jsx)(`path`,{d:`M12 2C6.48 2 2 6.58 2 12.24c0 4.53 2.87 8.37 6.84 9.73.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.93.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.04 1.03-2.76-.1-.26-.45-1.31.1-2.72 0 0 .84-.28 2.75 1.05A9.32 9.32 0 0 1 12 6.95c.85 0 1.7.12 2.5.35 1.9-1.33 2.74-1.05 2.74-1.05.55 1.41.2 2.46.1 2.72.64.72 1.03 1.64 1.03 2.76 0 3.94-2.34 4.8-4.57 5.06.36.32.68.95.68 1.91 0 1.38-.01 2.49-.01 2.83 0 .27.18.59.69.49A10.12 10.12 0 0 0 22 12.24C22 6.58 17.52 2 12 2Z`})})}function H(){return(0,M.jsx)(`svg`,{"aria-hidden":`true`,className:`size-4`,viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,M.jsx)(`path`,{d:`M16.37 12.05c-.02-2.26 1.85-3.35 1.94-3.4-1.06-1.55-2.69-1.76-3.26-1.78-1.37-.14-2.7.82-3.39.82-.71 0-1.78-.8-2.93-.78-1.5.02-2.9.89-3.67 2.25-1.57 2.72-.4 6.72 1.1 8.92.76 1.08 1.64 2.29 2.79 2.25 1.13-.05 1.55-.72 2.91-.72 1.35 0 1.75.72 2.93.69 1.21-.02 1.98-1.09 2.71-2.18.87-1.24 1.22-2.46 1.23-2.52-.03-.01-2.34-.9-2.36-3.55ZM14.16 5.42c.61-.76 1.03-1.8.91-2.85-.88.04-1.98.61-2.62 1.35-.57.65-1.08 1.73-.95 2.74.99.08 2.02-.5 2.66-1.24Z`})})}function ve({provider:e}){if(e.icon)return(0,M.jsx)(M.Fragment,{children:e.icon});switch(e.provider){case`google`:return(0,M.jsx)(z,{});case`github`:return(0,M.jsx)(V,{});case`microsoft`:return(0,M.jsx)(B,{});case`apple`:return(0,M.jsx)(H,{});default:return(0,M.jsx)(g,{className:`size-4`,"aria-hidden":`true`})}}function U({provider:e,renderLink:t,LinkComponent:n,className:r}){let i=j({renderLink:t,LinkComponent:n}),a=(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(ve,{provider:e}),(0,M.jsx)(o,{tag:`span`,className:`text-inherit`,children:e.label})]}),s=S(_e,e.disabled&&`pointer-events-none opacity-50`,r);return e.href?i({href:e.href,target:e.target,rel:e.rel,external:e.external,disabled:e.disabled,onClick:e.onClick,className:s,children:a}):(0,M.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,disabled:e.disabled,className:S(`auth-social-provider-button--component`,r),onClick:t=>e.onClick?.(t),children:a})}function ye({providers:e,layout:t=`stack`,renderLink:n,LinkComponent:r,className:i,strings:a,...o}){let s=x(I,a),c=e?.filter(e=>e.visible!==!1)??[];return c.length===0?null:(0,M.jsx)(`div`,{role:`group`,"aria-label":o[`aria-label`]??s.label,"data-layout":t,className:S(`auth-social-providers--component`,t===`grid`?`grid gap-2 sm:grid-cols-2`:`grid gap-2`,i),...o,children:c.map(e=>(0,M.jsx)(U,{provider:e,renderLink:n,LinkComponent:r},e.id??String(e.label)))})}var be={card:`border-border/70 bg-card`,muted:`border-border/60 bg-muted/40`};function xe({eyebrow:e,title:t,description:n,media:i,features:a,footer:s,children:c,surface:l=`muted`,className:u,contentClassName:d,...f}){let p=!!(e||t||n),m=a?.filter(e=>e.title)??[];return(0,M.jsx)(`aside`,{"data-slot":`auth-split-panel`,"data-surface":l,className:S(`auth-split-panel--component`,`flex min-h-full w-full flex-col justify-between overflow-hidden border`,be[l],u),...f,children:(0,M.jsxs)(`div`,{className:S(`auth-split-panel--content`,`flex min-h-full flex-col justify-center gap-8 p-6 md:p-8 lg:p-10`,d),children:[!!i&&(0,M.jsx)(`div`,{className:`auth-split-panel--media overflow-hidden rounded-lg border border-border/60 bg-background/70`,children:i}),!!p&&(0,M.jsxs)(`div`,{className:`auth-split-panel--intro max-w-xl space-y-2`,children:[!!e&&(0,M.jsx)(o,{tag:`div`,size:`xs`,type:`secondary`,weight:`semibold`,className:`auth-split-panel--eyebrow uppercase tracking-wide`,children:e}),!!t&&(0,M.jsx)(r,{tag:`h2`,containerClassName:`space-y-0`,className:`auth-split-panel--title border-0 pb-0 text-base leading-tight`,children:t}),!!n&&(0,M.jsx)(o,{tag:`div`,type:`secondary`,lineHeight:`relaxed`,className:`auth-split-panel--description max-w-prose`,children:n})]}),m.length>0&&(0,M.jsx)(se,{className:`auth-split-panel--features grid gap-3`,children:m.map((e,t)=>(0,M.jsxs)(le,{variant:`muted`,className:`auth-split-panel--feature bg-background/70`,children:[!!e.icon&&(0,M.jsx)(ae,{variant:`icon`,className:`text-muted-foreground`,children:e.icon}),(0,M.jsxs)(ce,{className:`min-w-0 sm:min-w-48`,children:[(0,M.jsx)(ue,{children:e.title}),!!e.description&&(0,M.jsx)(oe,{clamp:`none`,children:e.description})]})]},e.id??t))}),c,!!s&&(0,M.jsx)(`div`,{className:`auth-split-panel--footer`,children:s})]})})}var Se={sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`};function Ce(e){return!!(e&&typeof e==`object`&&!(0,N.isValidElement)(e))}function we(e){let t=!!(e.label||e.description);return(0,M.jsxs)(M.Fragment,{children:[!!e.logo&&(0,M.jsx)(`div`,{className:`auth-shell--brand-logo shrink-0`,children:e.logo}),!!t&&(0,M.jsxs)(`div`,{className:`auth-shell--brand-text min-w-0`,children:[!!e.label&&(0,M.jsx)(o,{tag:`div`,weight:`semibold`,className:`auth-shell--brand-label`,children:e.label}),!!e.description&&(0,M.jsx)(o,{tag:`div`,size:`xs`,type:`secondary`,className:`auth-shell--brand-description`,children:e.description})]})]})}function Te({brand:e,renderLink:t}){if(!e)return null;if(!me(e))return(0,M.jsx)(`div`,{className:`auth-shell--brand flex items-center justify-center`,children:e});let n=we(e),r=S(`auth-shell--brand`,`inline-flex items-center justify-center gap-2.5 self-center rounded-md text-foreground`,e.href&&`transition-opacity hover:opacity-80`);return e.href?t({href:e.href,"aria-label":e.ariaLabel,className:r,children:n}):(0,M.jsx)(`div`,{className:r,children:n})}function Ee(e){return e?(0,N.isValidElement)(e)?e:Ce(e)?(0,M.jsx)(xe,{...e}):null:null}function W({children:e,variant:t=`card`,size:n=`md`,align:r=`center`,brand:i,eyebrow:a,title:s,description:c,headerEnd:l,banner:u,cardMedia:d,cardMediaClassName:f,cardFooter:p,postCard:h,footer:g,footerLinks:_,policyLinks:v,languageLinks:y,languageSwitcher:b,socialProviders:ee,socialProvidersLayout:te=`stack`,socialDivider:C,splitPanel:w,splitSide:T=`left`,splitMobile:ne=`hidden`,renderLink:re,LinkComponent:E,className:ie,mainClassName:D,stackClassName:O,cardClassName:ae,cardContentClassName:oe,splitGridClassName:se,splitPanelClassName:ce,footerClassName:le,strings:ue,...de}){let k=x(ge,ue),{variant:A,hasBrand:j,hasAfterCard:fe,hasSplitPanel:N,hasSocialProviders:me,renderLink:P,footerLinks:F,policyLinks:I,languageLinks:L,socialProviders:_e}=he({variant:t,brand:i,footer:g,footerLinks:_,policyLinks:v,languageLinks:y,languageSwitcher:b,postCard:h,socialProviders:ee,splitPanel:w,renderLink:re,LinkComponent:E}),z=A===`split`&&N,B=Ee(w),V=T===`left`,H=ne===`stacked`,ve=j?Te({brand:i,renderLink:P}):null,U=(0,M.jsx)(`main`,{className:S(`auth-shell--main`,`flex min-h-svh w-full items-center justify-center px-4 py-8 sm:px-6 md:px-8`,r===`start`&&`items-start pt-12`,z&&`lg:min-h-svh`,D),children:(0,M.jsxs)(`div`,{className:S(`auth-shell--stack`,`flex w-full flex-col gap-5`,Se[n],O),children:[ve,(0,M.jsxs)(pe,{eyebrow:a,title:s,description:c,headerEnd:l,banner:u,media:d,mediaClassName:f,footer:p,className:ae,contentClassName:oe,children:[!!me&&(0,M.jsxs)(`div`,{className:`auth-shell--social mb-4 grid gap-4`,children:[(0,M.jsx)(ye,{providers:_e,layout:te,renderLink:P,strings:{label:k.socialProvidersLabel}}),(0,M.jsxs)(`div`,{className:`auth-shell--social-divider flex items-center gap-3`,children:[(0,M.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`}),(0,M.jsx)(o,{tag:`span`,size:`xs`,type:`secondary`,children:C??k.socialDivider}),(0,M.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`})]})]}),e]}),!!fe&&(0,M.jsxs)(`div`,{className:S(`auth-shell--after-card`,`flex flex-col items-center gap-3 text-center`,le),children:[!!h&&(0,M.jsx)(`div`,{className:`auth-shell--post-card`,children:h}),!!b&&(0,M.jsx)(`div`,{className:`auth-shell--language-switcher`,children:b}),L.length>0&&(0,M.jsx)(R,{className:`auth-shell--language-links`,links:L,leadingIcon:(0,M.jsx)(m,{className:`size-3.5`}),renderLink:P,strings:{label:k.languageLinksLabel}}),F.length>0&&(0,M.jsx)(R,{className:`auth-shell--footer-links`,links:F,renderLink:P,strings:{label:k.footerLinksLabel}}),I.length>0&&(0,M.jsx)(R,{className:`auth-shell--policy-links`,links:I,renderLink:P,strings:{label:k.policyLinksLabel}}),!!g&&(0,M.jsx)(`div`,{className:`auth-shell--footer`,children:g})]})]})});return z?(0,M.jsx)(`div`,{"data-slot":`auth-shell`,"data-variant":`split`,"data-split-side":T,"data-split-mobile":ne,className:S(`auth-shell--component`,`min-h-svh bg-background text-foreground`,ie),...de,children:(0,M.jsxs)(`div`,{className:S(`auth-shell--split-grid min-h-svh lg:grid`,V?`lg:grid-cols-[minmax(0,1fr)_minmax(24rem,34rem)]`:`lg:grid-cols-[minmax(24rem,34rem)_minmax(0,1fr)]`,se),children:[!!V&&(0,M.jsx)(`div`,{className:S(`auth-shell--split-panel`,H?`block`:`hidden lg:block`,ce),children:B}),U,!V&&(0,M.jsx)(`div`,{className:S(`auth-shell--split-panel`,H?`block`:`hidden lg:block`,ce),children:B})]})}):(0,M.jsx)(`div`,{"data-slot":`auth-shell`,"data-variant":`card`,className:S(`auth-shell--component`,`min-h-svh bg-background text-foreground`,ie),...de,children:U})}function De(e){return e.find(e=>!e.disabled)}function Oe({options:e=[],value:t,defaultValue:n,onValueChange:r}={}){let i=N.useMemo(()=>e.filter(e=>e.visible!==!1),[e]),a=n??De(i)?.id,[o,s]=N.useState(a),c=t!==void 0,l=c?t:o,u=i.find(e=>e.id===l),d=N.useCallback(e=>{let t=i.find(t=>t.id===e);!t||t.disabled||(c||s(e),r?.(e,t))},[c,r,i]);return N.useEffect(()=>{c||u||i.length===0||s(De(i)?.id)},[c,u,i]),{value:l,selectedOption:u,options:i,setValue:d}}function ke({options:e=[],value:t,defaultValue:n,onValueChange:r,layout:i=`stack`,divider:a,className:s,strings:c,...l}){let d=x(L,c),{"aria-label":f,...p}=l,{value:m,options:h,setValue:g}=Oe({options:e,value:t,defaultValue:n,onValueChange:r});return h.length===0?null:(0,M.jsxs)(`div`,{className:S(`auth-method-switch--component grid gap-3`,s),...p,children:[a!==null&&a!==!1&&(0,M.jsxs)(`div`,{className:`auth-method-switch--divider flex items-center gap-3`,children:[(0,M.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`}),(0,M.jsx)(o,{tag:`span`,size:`xs`,type:`secondary`,children:a??d.divider}),(0,M.jsx)(`span`,{className:`h-px min-w-0 flex-1 bg-border`,"aria-hidden":`true`})]}),(0,M.jsx)(`div`,{role:`group`,"aria-label":f??d.label,"data-layout":i,className:S(`auth-method-switch--options`,i===`grid`&&`grid gap-2 sm:grid-cols-2`,i===`stack`&&`grid gap-2`,i===`segmented`&&`grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-1 rounded-lg border border-border bg-muted/40 p-1`),...l,children:h.map(e=>{let t=e.id===m,n=i===`segmented`;return(0,M.jsx)(u,{type:`button`,"aria-pressed":t,disabled:e.disabled,variant:t?`dark`:`secondary`,buttonStyle:t?`solid`:n?`ghost`:`outline`,fullWidth:!0,className:S(`auth-method-switch--option`,`h-auto min-h-10 justify-start rounded-md px-3 py-2.5 text-start`,n&&`min-h-9 justify-center border-0 px-2 py-2 text-center shadow-none min-[480px]:px-3 min-[480px]:text-start`,t&&`auth-method-switch--option-selected`),onClick:()=>g(e.id),children:(0,M.jsxs)(`span`,{className:S(`auth-method-switch--option-inner flex min-w-0 items-center gap-2`,n&&`w-full flex-col justify-center gap-1 min-[480px]:w-auto min-[480px]:flex-row min-[480px]:justify-start min-[480px]:gap-2`),children:[!!e.icon&&(0,M.jsx)(`span`,{className:`auth-method-switch--option-icon shrink-0`,"aria-hidden":`true`,children:e.icon}),(0,M.jsxs)(`span`,{className:S(`auth-method-switch--option-copy grid min-w-0 gap-0.5`,n&&`justify-items-center min-[480px]:justify-items-start`),children:[(0,M.jsx)(o,{tag:`span`,size:`xs`,weight:`semibold`,className:S(`max-w-full text-inherit leading-tight`,n?`text-center min-[480px]:truncate min-[480px]:text-start`:`text-start`),children:e.label}),!!e.description&&(0,M.jsx)(o,{tag:`span`,size:`xs`,className:S(n?`hidden min-[480px]:block min-[480px]:truncate`:`text-start leading-snug`,t?`text-inherit opacity-75`:`text-muted-foreground`),children:e.description})]})]})},e.id)})})]})}var Ae=e({CenteredCardAuth:()=>Ke,FrameworkLinkContract:()=>Qe,LocalizedPatternCardAuth:()=>qe,ProviderMatrixAuth:()=>Je,ResetPasswordAuth:()=>Ye,RightSplitAuthShell:()=>Ze,SplitAuthShell:()=>Xe}),G=[{id:`support`,label:`Support`,href:`#/support`},{id:`status`,label:`Status`,href:`https://status.example.com`,external:!0}],K=[{id:`privacy`,label:`Privacy`,href:`#/privacy`},{id:`terms`,label:`Terms`,href:`#/terms`}],je=[{id:`en`,label:`EN`,href:`#/locale/en`},{id:`bg`,label:`BG`,href:`#/locale/bg`},{id:`el`,label:`EL`,href:`#/locale/el`}],Me=[{id:`google`,provider:`google`,label:`Google`,href:`#/auth/google`},{id:`github`,provider:`github`,label:`GitHub`,href:`#/auth/github`}],Ne=[{id:`google`,provider:`google`,label:`Google`,href:`#/auth/google`},{id:`github`,provider:`github`,label:`GitHub`,href:`#/auth/github`},{id:`microsoft`,provider:`microsoft`,label:`Microsoft`,href:`#/auth/microsoft`},{id:`apple`,provider:`apple`,label:`Apple`,href:`#/auth/apple`},{id:`sso`,provider:`sso`,label:`Company SSO`,href:`#/auth/sso`},{id:`custom`,provider:`custom`,label:`Magic link`,href:`#/auth/magic-link`,icon:(0,M.jsx)(v,{className:`size-4`,"aria-hidden":`true`})}],Pe=[{id:`magic-link`,label:`Email me a magic link`,description:`Send a single-use sign-in link to the address above.`,icon:(0,M.jsx)(v,{className:`size-3.5`,"aria-hidden":`true`})},{id:`sso`,label:`Continue with company SSO`,description:`Use the identity provider configured by the host app.`,icon:(0,M.jsx)(g,{className:`size-3.5`,"aria-hidden":`true`})}];function q(){return(0,M.jsx)(`span`,{className:`flex size-9 items-center justify-center rounded-lg bg-foreground text-background`,children:(0,M.jsx)(c,{className:`size-4`,"aria-hidden":`true`})})}function Fe(){return(0,M.jsxs)(`div`,{className:`flex flex-col items-center gap-1 text-center`,children:[(0,M.jsx)(o,{tag:`div`,className:`font-serif text-base leading-none tracking-normal text-foreground`,children:`Gift come true`}),(0,M.jsx)(`div`,{className:`h-px w-16 bg-foreground/40`})]})}function J({href:e,children:t,className:n,target:r,rel:i,onClick:a}){return(0,M.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,onClick:a,children:t})}var Y=`min-h-full`,X=`min-h-full py-6 sm:py-6 md:py-7`,Ie=`min-h-full`;function Z({children:e}){return(0,M.jsx)(`div`,{className:`auth-demo-viewport h-168 overflow-auto bg-background`,children:e})}function Le(){return(0,M.jsxs)(`div`,{className:`relative h-full min-h-16 overflow-hidden`,children:[(0,M.jsx)(`div`,{className:`absolute inset-0 bg-info/15`}),(0,M.jsx)(`div`,{className:`absolute -left-8 top-0 h-24 w-24 rotate-45 border-[10px] border-info/70`}),(0,M.jsx)(`div`,{className:`absolute left-20 -top-6 h-28 w-16 rotate-12 bg-warning/75`}),(0,M.jsx)(`div`,{className:`absolute left-44 top-3 h-20 w-28 rotate-[-18deg] border-[10px] border-success/70`}),(0,M.jsx)(`div`,{className:`absolute right-20 -top-4 h-24 w-12 rotate-45 bg-info/70`}),(0,M.jsx)(`div`,{className:`absolute right-0 top-0 h-20 w-24 rotate-12 border-[10px] border-warning/80`}),(0,M.jsx)(`div`,{className:`absolute inset-x-0 bottom-0 h-3 bg-foreground/80`})]})}function Re(){return(0,M.jsxs)(`div`,{className:`relative h-full min-h-16 overflow-hidden bg-foreground`,children:[(0,M.jsx)(`div`,{className:`absolute left-0 top-0 h-full w-20 border-e-8 border-warning bg-info/80`}),(0,M.jsx)(`div`,{className:`absolute left-14 top-0 h-24 w-24 rotate-45 border-[10px] border-success`}),(0,M.jsx)(`div`,{className:`absolute left-36 -top-4 h-28 w-16 rotate-12 bg-warning`}),(0,M.jsx)(`div`,{className:`absolute left-52 top-4 h-20 w-32 rotate-[-18deg] border-[10px] border-info`}),(0,M.jsx)(`div`,{className:`absolute right-24 -top-2 h-24 w-20 rotate-45 bg-success`}),(0,M.jsx)(`div`,{className:`absolute right-0 top-0 h-20 w-28 rotate-12 border-[10px] border-warning`})]})}function ze(){let[e,t]=(0,N.useState)(`password`),n=Pe.filter(t=>t.id!==e);return(0,M.jsxs)(`div`,{className:`grid gap-4`,children:[e===`password`&&(0,M.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`Password sign in`,children:[(0,M.jsx)(A,{label:`Email`,required:!0,children:(0,M.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,M.jsx)(A,{label:`Password`,required:!0,children:(0,M.jsx)(h,{placeholder:`Enter your password`,autoComplete:`current-password`,startIcon:_})}),(0,M.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,M.jsxs)(`label`,{className:`flex min-w-0 items-center gap-2`,children:[(0,M.jsx)(de,{"aria-label":`Remember this device`}),(0,M.jsx)(o,{tag:`span`,size:`xs`,children:`Remember this device`})]}),(0,M.jsx)(u,{type:`button`,size:`small`,variant:`action`,buttonStyle:`ghost`,className:`h-auto px-1 py-0`,onClick:()=>t(`forgot-password`),children:`Forgot password?`})]}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Sign in`}),(0,M.jsx)(ke,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`magic-link`&&(0,M.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`Magic link sign in`,children:[(0,M.jsx)(A,{label:`Work email`,hint:`We will send a single-use link that expires in 15 minutes.`,required:!0,children:(0,M.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`,startIcon:v})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Send magic link`}),(0,M.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Use password instead`}),(0,M.jsx)(ke,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`sso`&&(0,M.jsxs)(`form`,{className:`grid gap-4`,"aria-label":`SSO sign in`,children:[(0,M.jsx)(A,{label:`Company domain`,hint:`Route the user to the provider owned by the host app.`,required:!0,children:(0,M.jsx)(k,{type:`text`,placeholder:`northwind.com`,autoComplete:`organization`,startIcon:m})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Continue with SSO`}),(0,M.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Use password instead`}),(0,M.jsx)(ke,{options:n,value:null,onValueChange:e=>t(e)})]}),e===`forgot-password`&&(0,M.jsxs)(`div`,{className:`grid gap-4`,"aria-label":`Forgot password`,children:[(0,M.jsxs)(O,{variant:`info`,children:[(0,M.jsx)(E,{children:`Password reset`}),(0,M.jsx)(D,{children:`Send a recovery link without leaving the auth shell or changing routes first.`})]}),(0,M.jsxs)(`form`,{className:`grid gap-4`,children:[(0,M.jsx)(A,{label:`Account email`,hint:`Use the email connected to your workspace.`,required:!0,children:(0,M.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Send reset link`})]}),(0,M.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,onClick:()=>t(`password`),children:`Back to password sign in`})]})]})}function Be(){return(0,M.jsxs)(`form`,{className:`grid gap-4`,children:[(0,M.jsx)(A,{label:`Имейл`,required:!0,children:(0,M.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`})}),(0,M.jsx)(A,{label:`Парола`,required:!0,children:(0,M.jsx)(h,{placeholder:`Въведете парола`,autoComplete:`current-password`,startIcon:_,strings:{showPassword:`Покажи паролата`,hidePassword:`Скрий паролата`}})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Вход`})]})}function Ve(){return(0,M.jsxs)(`form`,{className:`grid gap-4`,children:[(0,M.jsx)(A,{label:`Work email`,hint:`Use the email address that received the invite.`,required:!0,children:(0,M.jsx)(k,{type:`email`,placeholder:`you@company.com`,autoComplete:`email`,startIcon:m})}),(0,M.jsx)(A,{label:`Password`,hint:`Minimum 12 characters.`,required:!0,children:(0,M.jsx)(h,{placeholder:`Create a password`,autoComplete:`new-password`,startIcon:g})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Accept invite`})]})}function He(){return(0,M.jsxs)(`form`,{className:`grid gap-4`,children:[(0,M.jsx)(A,{label:`Work email`,hint:`We will send a secure one-time code.`,children:(0,M.jsx)(k,{type:`email`,placeholder:`admin@company.com`,autoComplete:`email`})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Send code`})]})}function Ue(){return(0,M.jsxs)(`form`,{className:`grid gap-4`,children:[(0,M.jsx)(A,{label:`New password`,hint:`Use at least 12 characters.`,required:!0,children:(0,M.jsx)(h,{autoComplete:`new-password`,placeholder:`Create a new password`})}),(0,M.jsx)(A,{label:`Confirm password`,required:!0,children:(0,M.jsx)(h,{autoComplete:`new-password`,placeholder:`Repeat password`})}),(0,M.jsx)(u,{type:`submit`,fullWidth:!0,children:`Update password`})]})}function We(){let e=[{label:`Orders protected`,value:`18.4k`,icon:y},{label:`Team seats`,value:`42`,icon:fe},{label:`Risk checks`,value:`99.9%`,icon:l}];return(0,M.jsxs)(`div`,{className:`grid gap-3 p-4`,children:[(0,M.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-card p-4`,children:[(0,M.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,M.jsxs)(`div`,{children:[(0,M.jsx)(o,{size:`xs`,type:`secondary`,children:`Last 30 days`}),(0,M.jsx)(o,{tag:`div`,weight:`semibold`,children:`Operational overview`})]}),(0,M.jsx)(a,{variant:`success`,children:`Live`})]}),(0,M.jsx)(`div`,{className:`mt-4 flex h-24 items-end gap-1.5`,children:[34,42,31,52,48,66,58,72,63,76,68,84].map((e,t)=>(0,M.jsx)(`span`,{className:`flex-1 rounded-t bg-info/70`,style:{height:`${e}%`}},t))})]}),(0,M.jsx)(`div`,{className:`grid gap-2 sm:grid-cols-3`,children:e.map(e=>{let t=e.icon;return(0,M.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-background/80 p-3`,children:[(0,M.jsx)(t,{className:`mb-2 size-4 text-muted-foreground`,"aria-hidden":`true`}),(0,M.jsx)(o,{tag:`div`,weight:`semibold`,children:e.value}),(0,M.jsx)(o,{size:`xs`,type:`secondary`,children:e.label})]},e.label)})})]})}function Ge(){return(0,M.jsx)(xe,{surface:`card`,eyebrow:`Workspace access`,title:`Secure onboarding for every admin account.`,description:`Use the shell for visual context and trust signals while the app owns the actual auth action, translations, and routing.`,media:(0,M.jsx)(We,{}),className:`rounded-lg shadow-sm`,contentClassName:`gap-6 p-5 md:p-7 lg:p-8`,features:[{id:`approval`,icon:(0,M.jsx)(f,{className:`size-4`,"aria-hidden":`true`}),title:`Approval-aware sessions`,description:`Invite, verification, and review states stay visible without crowding the form.`},{id:`audit`,icon:(0,M.jsx)(p,{className:`size-4`,"aria-hidden":`true`}),title:`Audit-friendly copy`,description:`Use concise admin language and keep framework routes at the call site.`}],footer:(0,M.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3`,children:[(0,M.jsx)(o,{size:`xs`,type:`secondary`,children:`Trusted by finance, operations, and support teams.`}),(0,M.jsx)(a,{variant:`success`,children:`SOC2 ready`})]})})}function Ke(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{className:Y,mainClassName:X,brand:{logo:(0,M.jsx)(q,{}),label:`Northwind Admin`,description:`Operations console`,href:`#/`,ariaLabel:`Northwind Admin home`},title:`Sign in to your workspace`,description:`Use your company account to continue.`,banner:(0,M.jsxs)(O,{variant:`info`,children:[(0,M.jsx)(E,{children:`Single sign-on is available`}),(0,M.jsx)(D,{children:`Company domains can sign in with Google or email.`}),(0,M.jsx)(ie,{children:(0,M.jsx)(u,{size:`small`,variant:`action`,buttonStyle:`ghost`,children:`Learn more`})})]}),socialProviders:Me,socialProvidersLayout:`grid`,socialDivider:`or use email`,cardFooter:(0,M.jsxs)(o,{size:`xs`,type:`secondary`,children:[`New to Northwind? `,(0,M.jsx)(w,{href:`#/register`,size:`xs`,children:`Request access`})]}),postCard:(0,M.jsx)(o,{size:`xs`,type:`secondary`,children:`Protected by device verification and audit logging.`}),footerLinks:G,policyLinks:K,languageLinks:je,renderLink:J,children:(0,M.jsx)(ze,{})})})}function qe(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{className:Y,mainClassName:X,size:`md`,brand:(0,M.jsx)(Fe,{}),cardMedia:(0,M.jsx)(Re,{}),cardMediaClassName:`h-16 min-h-16 overflow-hidden border-b-0 bg-transparent`,title:`Влезте в акаунта си`,description:`Въведете вашите данни, за да получите достъп до таблото.`,cardFooter:(0,M.jsxs)(o,{size:`xs`,type:`secondary`,children:[`Нямате достъп? `,(0,M.jsx)(w,{href:`#/request-access`,size:`xs`,children:`Заявете покана`})]}),languageLinks:[{id:`bg`,label:`Български`,href:`#/locale/bg`},{id:`en`,label:`English`,href:`#/locale/en`}],policyLinks:K,renderLink:J,strings:{languageLinksLabel:`Език`,policyLinksLabel:`Правила`},children:(0,M.jsx)(Be,{})})})}function Je(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{className:Y,mainClassName:X,brand:{logo:(0,M.jsx)(q,{}),label:`Northwind Admin`,description:`Identity gateway`,href:`#/`},title:`Choose a sign-in method`,description:`Route every provider through the host app while keeping the button layout consistent.`,socialProviders:Ne,socialProvidersLayout:`grid`,socialDivider:`or send a one-time code`,footerLinks:G,policyLinks:K,renderLink:J,children:(0,M.jsx)(He,{})})})}function Ye(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{className:Y,mainClassName:X,size:`sm`,brand:{logo:(0,M.jsx)(q,{}),label:`Northwind Admin`,href:`#/`},title:`Reset your password`,description:`Choose a new password for marina@northwind.test.`,banner:(0,M.jsxs)(O,{variant:`warning`,children:[(0,M.jsx)(E,{children:`Reset link expires soon`}),(0,M.jsx)(D,{children:`For security, this link is valid for another 12 minutes.`})]}),cardFooter:(0,M.jsxs)(o,{size:`xs`,type:`secondary`,children:[`Remembered it? `,(0,M.jsx)(w,{href:`#/login`,size:`xs`,children:`Back to sign in`})]}),policyLinks:K,renderLink:J,children:(0,M.jsx)(Ue,{})})})}function Xe(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{variant:`split`,size:`md`,splitSide:`left`,splitMobile:`stacked`,className:`min-h-full bg-muted/20`,mainClassName:X,splitGridClassName:Ie,splitPanelClassName:`p-3 lg:p-5`,brand:{logo:(0,M.jsx)(q,{}),label:`Northwind Admin`,href:`#/`},cardMedia:(0,M.jsx)(Le,{}),cardMediaClassName:`h-16 min-h-16 overflow-hidden border-b-0 bg-transparent`,eyebrow:`Team invite`,title:`Create your admin account`,description:`Accept the invite and configure your first secure session.`,headerEnd:(0,M.jsx)(a,{variant:`warning`,children:`Invite`}),splitPanel:(0,M.jsx)(Ge,{}),cardFooter:(0,M.jsxs)(o,{size:`xs`,type:`secondary`,children:[`Already joined? `,(0,M.jsx)(w,{href:`#/login`,size:`xs`,children:`Sign in`})]}),footerLinks:G,policyLinks:K,renderLink:J,children:(0,M.jsx)(Ve,{})})})}function Ze(){return(0,M.jsx)(Z,{children:(0,M.jsx)(W,{variant:`split`,size:`sm`,splitSide:`right`,className:`min-h-full bg-muted/20`,mainClassName:X,splitGridClassName:Ie,splitPanelClassName:`p-3 lg:p-5`,splitPanel:{surface:`card`,className:`rounded-lg shadow-sm`,contentClassName:`gap-6 p-5 md:p-7 lg:p-8`,eyebrow:`Access policy`,title:`Passwordless flows use the same shell.`,description:`Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.`,features:[{id:`configurable`,icon:(0,M.jsx)(b,{className:`size-4`,"aria-hidden":`true`}),title:`Configurable chrome`,description:`Brand, media, footer links, panel, and post-card copy are all slots.`},{id:`framework`,icon:(0,M.jsx)(y,{className:`size-4`,"aria-hidden":`true`}),title:`Framework-neutral links`,description:`Pass renderLink once and the shell uses the host router component.`}]},brand:{logo:(0,M.jsx)(q,{}),label:`Northwind Admin`,href:`#/`},title:`Check your email`,description:`We sent a one-time sign-in link to marina@northwind.test.`,footerLinks:G,policyLinks:K,languageSwitcher:(0,M.jsx)(u,{size:`small`,variant:`secondary`,buttonStyle:`outline`,children:`English`}),renderLink:J,children:(0,M.jsxs)(`div`,{className:`grid gap-4`,children:[(0,M.jsxs)(O,{variant:`success`,children:[(0,M.jsx)(E,{children:`Magic link sent`}),(0,M.jsx)(D,{children:`The link expires in 15 minutes.`})]}),(0,M.jsx)(u,{fullWidth:!0,children:`Open mail app`}),(0,M.jsx)(u,{variant:`secondary`,buttonStyle:`outline`,fullWidth:!0,children:`Resend link`})]})})})}function Qe(){return(0,M.jsxs)(`div`,{className:`max-w-md rounded-lg border border-dashed border-border p-6`,children:[(0,M.jsx)(o,{tag:`div`,weight:`semibold`,children:`Footer links use the host router`}),(0,M.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-1`,children:`The package never imports Inertia, Next, React Router, or TanStack Router.`}),(0,M.jsx)(R,{className:`mt-4 justify-start`,links:G,renderLink:({href:e,children:t,className:n,target:r,rel:i,onClick:a})=>(0,M.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,onClick:a,"data-router-link":`example`,children:t})})]})}var Q=`import {
+	BarChart3,
+	Building2,
+	CheckCircle2,
+	Clock3,
+	Globe2,
+	KeyRound,
+	LockKeyhole,
+	MailCheck,
+	ShieldCheck,
+	Sparkles,
+	UsersRound,
+} from 'lucide-react';
+import { useState, type ReactNode } from 'react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/base/display/alert';
+import { Checkbox, FormField, Input, PasswordInput } from '@/components/base/forms';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+import {
+	AuthFooterLinks,
+	AuthMethodSwitch,
+	AuthShell,
+	AuthSplitPanel,
+	type AuthLink,
+	type AuthMethodOption,
+	type AuthSocialProvider,
+} from '@/components/layout/auth';
+import { Text, TextLink } from '@/components/typography';
+
+const footerLinks: AuthLink[] = [
+	{ id: 'support', label: 'Support', href: '#/support' },
+	{ id: 'status', label: 'Status', href: 'https://status.example.com', external: true },
+];
+
+const policyLinks: AuthLink[] = [
+	{ id: 'privacy', label: 'Privacy', href: '#/privacy' },
+	{ id: 'terms', label: 'Terms', href: '#/terms' },
+];
+
+const languageLinks: AuthLink[] = [
+	{ id: 'en', label: 'EN', href: '#/locale/en' },
+	{ id: 'bg', label: 'BG', href: '#/locale/bg' },
+	{ id: 'el', label: 'EL', href: '#/locale/el' },
+];
+
+const socialProviders: AuthSocialProvider[] = [
+	{ id: 'google', provider: 'google', label: 'Google', href: '#/auth/google' },
+	{ id: 'github', provider: 'github', label: 'GitHub', href: '#/auth/github' },
+];
+
+const providerMatrix: AuthSocialProvider[] = [
+	{ id: 'google', provider: 'google', label: 'Google', href: '#/auth/google' },
+	{ id: 'github', provider: 'github', label: 'GitHub', href: '#/auth/github' },
+	{ id: 'microsoft', provider: 'microsoft', label: 'Microsoft', href: '#/auth/microsoft' },
+	{ id: 'apple', provider: 'apple', label: 'Apple', href: '#/auth/apple' },
+	{ id: 'sso', provider: 'sso', label: 'Company SSO', href: '#/auth/sso' },
+	{
+		id: 'custom',
+		provider: 'custom',
+		label: 'Magic link',
+		href: '#/auth/magic-link',
+		icon: <MailCheck className="size-4" aria-hidden="true" />,
+	},
+];
+
+type AuthDemoMethod = 'password' | 'magic-link' | 'sso' | 'forgot-password';
+
+const alternateAuthMethodOptions: AuthMethodOption[] = [
+	{
+		id: 'magic-link',
+		label: 'Email me a magic link',
+		description: 'Send a single-use sign-in link to the address above.',
+		icon: <MailCheck className="size-3.5" aria-hidden="true" />,
+	},
+	{
+		id: 'sso',
+		label: 'Continue with company SSO',
+		description: 'Use the identity provider configured by the host app.',
+		icon: <KeyRound className="size-3.5" aria-hidden="true" />,
+	},
+];
+
+function LogoMark() {
+	return (
+		<span className="flex size-9 items-center justify-center rounded-lg bg-foreground text-background">
+			<Building2 className="size-4" aria-hidden="true" />
+		</span>
+	);
+}
+
+function Wordmark() {
+	return (
+		<div className="flex flex-col items-center gap-1 text-center">
+			<Text tag="div" className="font-serif text-base leading-none tracking-normal text-foreground">
+				Gift come true
+			</Text>
+			<div className="h-px w-16 bg-foreground/40" />
+		</div>
+	);
+}
+
+function renderPreviewLink({
+	href,
+	children,
+	className,
+	target,
+	rel,
+	onClick,
+}: LayoutLinkRenderProps) {
+	return (
+		<a href={href ?? '#'} className={className} target={target} rel={rel} onClick={onClick}>
+			{children}
+		</a>
+	);
+}
+
+const AUTH_DEMO_SHELL_CLASS = 'min-h-full';
+const AUTH_DEMO_MAIN_CLASS = 'min-h-full py-6 sm:py-6 md:py-7';
+const AUTH_DEMO_SPLIT_GRID_CLASS = 'min-h-full';
+
+function AuthDemoViewport({ children }: { children: ReactNode }) {
+	return (
+		<div className="auth-demo-viewport h-168 overflow-auto bg-background">
+			{children}
+		</div>
+	);
+}
+
+function PatternStrip() {
+	return (
+		<div className="relative h-full min-h-16 overflow-hidden">
+			<div className="absolute inset-0 bg-info/15" />
+			<div className="absolute -left-8 top-0 h-24 w-24 rotate-45 border-[10px] border-info/70" />
+			<div className="absolute left-20 -top-6 h-28 w-16 rotate-12 bg-warning/75" />
+			<div className="absolute left-44 top-3 h-20 w-28 rotate-[-18deg] border-[10px] border-success/70" />
+			<div className="absolute right-20 -top-4 h-24 w-12 rotate-45 bg-info/70" />
+			<div className="absolute right-0 top-0 h-20 w-24 rotate-12 border-[10px] border-warning/80" />
+			<div className="absolute inset-x-0 bottom-0 h-3 bg-foreground/80" />
+		</div>
+	);
+}
+
+function DensePatternStrip() {
+	return (
+		<div className="relative h-full min-h-16 overflow-hidden bg-foreground">
+			<div className="absolute left-0 top-0 h-full w-20 border-e-8 border-warning bg-info/80" />
+			<div className="absolute left-14 top-0 h-24 w-24 rotate-45 border-[10px] border-success" />
+			<div className="absolute left-36 -top-4 h-28 w-16 rotate-12 bg-warning" />
+			<div className="absolute left-52 top-4 h-20 w-32 rotate-[-18deg] border-[10px] border-info" />
+			<div className="absolute right-24 -top-2 h-24 w-20 rotate-45 bg-success" />
+			<div className="absolute right-0 top-0 h-20 w-28 rotate-12 border-[10px] border-warning" />
+		</div>
+	);
+}
+
+function LoginForm() {
+	const [method, setMethod] = useState<AuthDemoMethod>('password');
+	const alternateOptions = alternateAuthMethodOptions.filter((option) => option.id !== method);
+
+	return (
+		<div className="grid gap-4">
+			{method === 'password' && (
+				<form className="grid gap-4" aria-label="Password sign in">
+					<FormField label="Email" required>
+						<Input type="email" placeholder="you@company.com" autoComplete="email" />
+					</FormField>
+
+					<FormField label="Password" required>
+						<PasswordInput
+							placeholder="Enter your password"
+							autoComplete="current-password"
+							startIcon={LockKeyhole}
+						/>
+					</FormField>
+
+					<div className="flex items-center justify-between gap-3">
+						<label className="flex min-w-0 items-center gap-2">
+							<Checkbox aria-label="Remember this device" />
+							<Text tag="span" size="xs">
+								Remember this device
+							</Text>
+						</label>
+						<Button
+							type="button"
+							size="small"
+							variant="action"
+							buttonStyle="ghost"
+							className="h-auto px-1 py-0"
+							onClick={() => setMethod('forgot-password')}
+						>
+							Forgot password?
+						</Button>
+					</div>
+
+					<Button type="submit" fullWidth>
+						Sign in
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'magic-link' && (
+				<form className="grid gap-4" aria-label="Magic link sign in">
+					<FormField label="Work email" hint="We will send a single-use link that expires in 15 minutes." required>
+						<Input type="email" placeholder="you@company.com" autoComplete="email" startIcon={MailCheck} />
+					</FormField>
+
+					<Button type="submit" fullWidth>
+						Send magic link
+					</Button>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Use password instead
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'sso' && (
+				<form className="grid gap-4" aria-label="SSO sign in">
+					<FormField label="Company domain" hint="Route the user to the provider owned by the host app." required>
+						<Input type="text" placeholder="northwind.com" autoComplete="organization" startIcon={Globe2} />
+					</FormField>
+
+					<Button type="submit" fullWidth>
+						Continue with SSO
+					</Button>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Use password instead
+					</Button>
+
+					<AuthMethodSwitch
+						options={alternateOptions}
+						value={null}
+						onValueChange={(nextValue) => setMethod(nextValue as AuthDemoMethod)}
+					/>
+				</form>
+			)}
+
+			{method === 'forgot-password' && (
+				<div className="grid gap-4" aria-label="Forgot password">
+					<Alert variant="info">
+						<AlertTitle>Password reset</AlertTitle>
+						<AlertDescription>
+							Send a recovery link without leaving the auth shell or changing routes first.
+						</AlertDescription>
+					</Alert>
+					<form className="grid gap-4">
+						<FormField label="Account email" hint="Use the email connected to your workspace." required>
+							<Input type="email" placeholder="you@company.com" autoComplete="email" />
+						</FormField>
+
+						<Button type="submit" fullWidth>
+							Send reset link
+						</Button>
+					</form>
+					<Button
+						type="button"
+						variant="secondary"
+						buttonStyle="outline"
+						fullWidth
+						onClick={() => setMethod('password')}
+					>
+						Back to password sign in
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function LocalizedLoginForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Имейл" required>
+				<Input type="email" placeholder="you@company.com" autoComplete="email" />
+			</FormField>
+
+			<FormField label="Парола" required>
+				<PasswordInput
+					placeholder="Въведете парола"
+					autoComplete="current-password"
+					startIcon={LockKeyhole}
+					strings={{
+						showPassword: 'Покажи паролата',
+						hidePassword: 'Скрий паролата',
+					}}
+				/>
+			</FormField>
+
+			<Button type="submit" fullWidth>
+				Вход
+			</Button>
+		</form>
+	);
+}
+
+function InviteForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Work email" hint="Use the email address that received the invite." required>
+				<Input type="email" placeholder="you@company.com" autoComplete="email" startIcon={Globe2} />
+			</FormField>
+
+			<FormField label="Password" hint="Minimum 12 characters." required>
+				<PasswordInput placeholder="Create a password" autoComplete="new-password" startIcon={KeyRound} />
+			</FormField>
+
+			<Button type="submit" fullWidth>
+				Accept invite
+			</Button>
+		</form>
+	);
+}
+
+function OneTimeCodeForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="Work email" hint="We will send a secure one-time code.">
+				<Input type="email" placeholder="admin@company.com" autoComplete="email" />
+			</FormField>
+			<Button type="submit" fullWidth>
+				Send code
+			</Button>
+		</form>
+	);
+}
+
+function ResetPasswordForm() {
+	return (
+		<form className="grid gap-4">
+			<FormField label="New password" hint="Use at least 12 characters." required>
+				<PasswordInput autoComplete="new-password" placeholder="Create a new password" />
+			</FormField>
+			<FormField label="Confirm password" required>
+				<PasswordInput autoComplete="new-password" placeholder="Repeat password" />
+			</FormField>
+			<Button type="submit" fullWidth>
+				Update password
+			</Button>
+		</form>
+	);
+}
+
+function MetricsPreview() {
+	const rows = [
+		{ label: 'Orders protected', value: '18.4k', icon: ShieldCheck },
+		{ label: 'Team seats', value: '42', icon: UsersRound },
+		{ label: 'Risk checks', value: '99.9%', icon: BarChart3 },
+	];
+
+	return (
+		<div className="grid gap-3 p-4">
+			<div className="rounded-md border border-border/60 bg-card p-4">
+				<div className="flex items-center justify-between gap-3">
+					<div>
+						<Text size="xs" type="secondary">
+							Last 30 days
+						</Text>
+						<Text tag="div" weight="semibold">
+							Operational overview
+						</Text>
+					</div>
+					<Badge variant="success">Live</Badge>
+				</div>
+				<div className="mt-4 flex h-24 items-end gap-1.5">
+					{[34, 42, 31, 52, 48, 66, 58, 72, 63, 76, 68, 84].map((height, index) => (
+						<span
+							key={index}
+							className="flex-1 rounded-t bg-info/70"
+							style={{ height: \`\${height}%\` }}
+						/>
+					))}
+				</div>
+			</div>
+
+			<div className="grid gap-2 sm:grid-cols-3">
+				{rows.map((row) => {
+					const Icon = row.icon;
+					return (
+						<div key={row.label} className="rounded-md border border-border/60 bg-background/80 p-3">
+							<Icon className="mb-2 size-4 text-muted-foreground" aria-hidden="true" />
+							<Text tag="div" weight="semibold">
+								{row.value}
+							</Text>
+							<Text size="xs" type="secondary">
+								{row.label}
+							</Text>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function InvitePanel() {
+	return (
+		<AuthSplitPanel
+			surface="card"
+			eyebrow="Workspace access"
+			title="Secure onboarding for every admin account."
+			description="Use the shell for visual context and trust signals while the app owns the actual auth action, translations, and routing."
+			media={<MetricsPreview />}
+			className="rounded-lg shadow-sm"
+			contentClassName="gap-6 p-5 md:p-7 lg:p-8"
+			features={[
+				{
+					id: 'approval',
+					icon: <CheckCircle2 className="size-4" aria-hidden="true" />,
+					title: 'Approval-aware sessions',
+					description: 'Invite, verification, and review states stay visible without crowding the form.',
+				},
+				{
+					id: 'audit',
+					icon: <Clock3 className="size-4" aria-hidden="true" />,
+					title: 'Audit-friendly copy',
+					description: 'Use concise admin language and keep framework routes at the call site.',
+				},
+			]}
+			footer={
+				<div className="flex flex-wrap items-center justify-between gap-3">
+					<Text size="xs" type="secondary">
+						Trusted by finance, operations, and support teams.
+					</Text>
+					<Badge variant="success">SOC2 ready</Badge>
+				</div>
+			}
+		/>
+	);
+}
+
+export function CenteredCardAuth() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					description: 'Operations console',
+					href: '#/',
+					ariaLabel: 'Northwind Admin home',
+				}}
+				title="Sign in to your workspace"
+				description="Use your company account to continue."
+				banner={
+					<Alert variant="info">
+						<AlertTitle>Single sign-on is available</AlertTitle>
+						<AlertDescription>Company domains can sign in with Google or email.</AlertDescription>
+						<AlertAction>
+							<Button size="small" variant="action" buttonStyle="ghost">
+								Learn more
+							</Button>
+						</AlertAction>
+					</Alert>
+				}
+				socialProviders={socialProviders}
+				socialProvidersLayout="grid"
+				socialDivider="or use email"
+				cardFooter={
+					<Text size="xs" type="secondary">
+						New to Northwind? <TextLink href="#/register" size="xs">Request access</TextLink>
+					</Text>
+				}
+				postCard={
+					<Text size="xs" type="secondary">
+						Protected by device verification and audit logging.
+					</Text>
+				}
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				languageLinks={languageLinks}
+				renderLink={renderPreviewLink}
+			>
+				<LoginForm />
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function LocalizedPatternCardAuth() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				size="md"
+				brand={<Wordmark />}
+				cardMedia={<DensePatternStrip />}
+				cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+				title="Влезте в акаунта си"
+				description="Въведете вашите данни, за да получите достъп до таблото."
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Нямате достъп? <TextLink href="#/request-access" size="xs">Заявете покана</TextLink>
+					</Text>
+				}
+				languageLinks={[
+					{ id: 'bg', label: 'Български', href: '#/locale/bg' },
+					{ id: 'en', label: 'English', href: '#/locale/en' },
+				]}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+				strings={{
+					languageLinksLabel: 'Език',
+					policyLinksLabel: 'Правила',
+				}}
+			>
+				<LocalizedLoginForm />
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function ProviderMatrixAuth() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					description: 'Identity gateway',
+					href: '#/',
+				}}
+				title="Choose a sign-in method"
+				description="Route every provider through the host app while keeping the button layout consistent."
+				socialProviders={providerMatrix}
+				socialProvidersLayout="grid"
+				socialDivider="or send a one-time code"
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<OneTimeCodeForm />
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function ResetPasswordAuth() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				size="sm"
+				brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+				title="Reset your password"
+				description="Choose a new password for marina@northwind.test."
+				banner={
+					<Alert variant="warning">
+						<AlertTitle>Reset link expires soon</AlertTitle>
+						<AlertDescription>For security, this link is valid for another 12 minutes.</AlertDescription>
+					</Alert>
+				}
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Remembered it? <TextLink href="#/login" size="xs">Back to sign in</TextLink>
+					</Text>
+				}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<ResetPasswordForm />
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function SplitAuthShell() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				variant="split"
+				size="md"
+				splitSide="left"
+				splitMobile="stacked"
+				className="min-h-full bg-muted/20"
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				splitGridClassName={AUTH_DEMO_SPLIT_GRID_CLASS}
+				splitPanelClassName="p-3 lg:p-5"
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					href: '#/',
+				}}
+				cardMedia={<PatternStrip />}
+				cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+				eyebrow="Team invite"
+				title="Create your admin account"
+				description="Accept the invite and configure your first secure session."
+				headerEnd={<Badge variant="warning">Invite</Badge>}
+				splitPanel={<InvitePanel />}
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Already joined? <TextLink href="#/login" size="xs">Sign in</TextLink>
+					</Text>
+				}
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<InviteForm />
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function RightSplitAuthShell() {
+	return (
+		<AuthDemoViewport>
+			<AuthShell
+				variant="split"
+				size="sm"
+				splitSide="right"
+				className="min-h-full bg-muted/20"
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				splitGridClassName={AUTH_DEMO_SPLIT_GRID_CLASS}
+				splitPanelClassName="p-3 lg:p-5"
+				splitPanel={{
+					surface: 'card',
+					className: 'rounded-lg shadow-sm',
+					contentClassName: 'gap-6 p-5 md:p-7 lg:p-8',
+					eyebrow: 'Access policy',
+					title: 'Passwordless flows use the same shell.',
+					description: 'Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.',
+					features: [
+						{
+							id: 'configurable',
+							icon: <Sparkles className="size-4" aria-hidden="true" />,
+							title: 'Configurable chrome',
+							description: 'Brand, media, footer links, panel, and post-card copy are all slots.',
+						},
+						{
+							id: 'framework',
+							icon: <ShieldCheck className="size-4" aria-hidden="true" />,
+							title: 'Framework-neutral links',
+							description: 'Pass renderLink once and the shell uses the host router component.',
+						},
+					],
+				}}
+				brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+				title="Check your email"
+				description="We sent a one-time sign-in link to marina@northwind.test."
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				languageSwitcher={
+					<Button size="small" variant="secondary" buttonStyle="outline">
+						English
+					</Button>
+				}
+				renderLink={renderPreviewLink}
+			>
+				<div className="grid gap-4">
+					<Alert variant="success">
+						<AlertTitle>Magic link sent</AlertTitle>
+						<AlertDescription>The link expires in 15 minutes.</AlertDescription>
+					</Alert>
+					<Button fullWidth>Open mail app</Button>
+					<Button variant="secondary" buttonStyle="outline" fullWidth>
+						Resend link
+					</Button>
+				</div>
+			</AuthShell>
+		</AuthDemoViewport>
+	);
+}
+
+export function FrameworkLinkContract() {
+	const adapter = ({
+		href,
+		children,
+		className,
+		target,
+		rel,
+		onClick,
+	}: LayoutLinkRenderProps) => (
+		<a
+			href={href ?? '#'}
+			className={className}
+			target={target}
+			rel={rel}
+			onClick={onClick}
+			data-router-link="example"
+		>
+			{children}
+		</a>
+	);
+
+	return (
+		<div className="max-w-md rounded-lg border border-dashed border-border p-6">
+			<Text tag="div" weight="semibold">
+				Footer links use the host router
+			</Text>
+			<Text size="xs" type="secondary" className="mt-1">
+				The package never imports Inertia, Next, React Router, or TanStack Router.
+			</Text>
+			<AuthFooterLinks
+				className="mt-4 justify-start"
+				links={footerLinks}
+				renderLink={adapter}
+			/>
+		</div>
+	);
+}
+`;function $e(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return Ae||$(`Examples`,!1),Ke||$(`Examples.CenteredCardAuth`,!0),Qe||$(`Examples.FrameworkLinkContract`,!0),qe||$(`Examples.LocalizedPatternCardAuth`,!0),Je||$(`Examples.ProviderMatrixAuth`,!0),Ye||$(`Examples.ResetPasswordAuth`,!0),Ze||$(`Examples.RightSplitAuthShell`,!0),Xe||$(`Examples.SplitAuthShell`,!0),(0,M.jsxs)(i,{title:`Layout · Auth shell`,description:`Framework-neutral auth card and split shells for login, register, invite, reset, magic-link, and verification pages.`,layer:`layout`,status:`ready`,sourcePath:`src/components/layout/auth`,children:[(0,M.jsxs)(s,{title:`Overview`,id:`overview`,children:[(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`AuthShell`}),` owns the reusable auth chrome: centered card layout, split panel
+layout, brand area, full-bleed card media strip, social-provider buttons,
+language rows with a globe marker, policy/footer link rows, card header,
+after-card support copy, and footer slots. `,(0,M.jsx)(t.code,{children:`AuthMethodSwitch`}),` renders alternate
+login strategies as explicit buttons behind a divider, with controlled or
+uncontrolled state for magic-link, SSO, recovery, or any other consumer-owned
+auth state. The consuming app still owns the auth form, request action, route
+names, translations, language state, and framework link component.`]}),(0,M.jsxs)(t.p,{children:[`Use `,(0,M.jsx)(t.code,{children:`renderLink`}),` for every router-specific link. This is the same layout link
+contract used by header, sidebar, breadcrumbs, and page actions, so Inertia,
+Next, React Router, TanStack Router, or plain anchors stay app-owned.`]})]}),(0,M.jsx)(s,{title:`Consumer usage`,id:`usage`,children:(0,M.jsx)(t.pre,{children:(0,M.jsx)(t.code,{className:`language-tsx`,children:`import { AuthShell } from 'admin-ui-starter-kit/layout/auth';
+import { AuthMethodSwitch } from 'admin-ui-starter-kit/layout/auth';
+import { Button } from 'admin-ui-starter-kit/base/buttons';
+import { FormField, Input, PasswordInput } from 'admin-ui-starter-kit/base/forms';
+
+<AuthShell
+	brand={{ logo: <Logo />, label: 'Acme Admin', href: '/' }}
+	cardMedia={<PatternStrip />}
+	cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+	title="Sign in"
+	description="Use your company account to continue."
+	socialProviders={[
+		{ provider: 'google', label: 'Google', href: '/auth/google' },
+		{ provider: 'github', label: 'GitHub', href: '/auth/github' },
+	]}
+	footerLinks={[
+		{ label: 'Support', href: '/support' },
+	]}
+	policyLinks={[
+		{ label: 'Privacy', href: '/privacy' },
+		{ label: 'Terms', href: '/terms' },
+	]}
+	languageLinks={[
+		{ label: 'EN', href: '/locale/en' },
+		{ label: 'BG', href: '/locale/bg' },
+	]}
+	renderLink={({ href, children, className }) => (
+		<AppLink href={href ?? '#'} className={className}>{children}</AppLink>
+	)}
+>
+	<form onSubmit={submit}>
+		<FormField label="Email" required>
+			<Input type="email" autoComplete="email" />
+		</FormField>
+		<FormField label="Password" required>
+			<PasswordInput autoComplete="current-password" />
+		</FormField>
+		<Button type="submit" fullWidth>Continue</Button>
+		<AuthMethodSwitch
+			value={method === 'password' ? null : method}
+			onValueChange={setMethod}
+			options={[
+				{ id: 'magic-link', label: 'Email me a magic link' },
+				{ id: 'sso', label: 'Continue with company SSO' },
+			]}
+		/>
+	</form>
+</AuthShell>
+`})})}),(0,M.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,M.jsx)(d,{name:`CenteredCardAuth`,description:`Centered login card with brand, alert banner, password form, forgot-password toggle, alternate strategy buttons behind a divider, footer, and framework-neutral links.`,source:Q,layout:`flush`,children:(0,M.jsx)(Ke,{})}),(0,M.jsx)(d,{name:`LocalizedPatternCardAuth`,description:`Localized card layout with a full-bleed top pattern, logo, language links, and policy links.`,source:Q,layout:`flush`,children:(0,M.jsx)(qe,{})}),(0,M.jsx)(d,{name:`ProviderMatrixAuth`,description:`Provider grid covering Google, GitHub, Microsoft, Apple, SSO, and a custom magic-link provider.`,source:Q,layout:`flush`,children:(0,M.jsx)(Je,{})}),(0,M.jsx)(d,{name:`ResetPasswordAuth`,description:`Reset-password card with warning banner and two password reveal fields.`,source:Q,layout:`flush`,children:(0,M.jsx)(Ye,{})}),(0,M.jsx)(d,{name:`SplitAuthShell`,description:`Modern split auth page with a reusable card-style side panel, feature rows, and a stacked mobile panel.`,source:Q,layout:`flush`,children:(0,M.jsx)(Xe,{})}),(0,M.jsx)(d,{name:`RightSplitAuthShell`,description:`Right-side split panel with constrained form column and card-style panel surface.`,source:Q,layout:`flush`,children:(0,M.jsx)(Ze,{})}),(0,M.jsx)(d,{name:`FrameworkLinkContract`,description:`Footer links rendered through the host app link adapter.`,source:Q,children:(0,M.jsx)(Qe,{})})]}),(0,M.jsxs)(s,{title:`API`,id:`api`,children:[(0,M.jsx)(t.h4,{children:`AuthShell`}),(0,M.jsx)(C,{component:`AuthShell`}),(0,M.jsx)(t.h4,{children:`AuthCard`}),(0,M.jsx)(C,{component:`AuthCard`}),(0,M.jsx)(t.h4,{children:`AuthSplitPanel`}),(0,M.jsx)(C,{component:`AuthSplitPanel`}),(0,M.jsx)(t.h4,{children:`AuthFooterLinks`}),(0,M.jsx)(C,{component:`AuthFooterLinks`}),(0,M.jsx)(t.h4,{children:`AuthMethodSwitch`}),(0,M.jsx)(C,{component:`AuthMethodSwitch`}),(0,M.jsx)(t.h4,{children:`AuthSocialProviders`}),(0,M.jsx)(C,{component:`AuthSocialProviders`}),(0,M.jsx)(t.h4,{children:`AuthSocialProviderButton`}),(0,M.jsx)(C,{component:`AuthSocialProviderButton`})]})]})}function et(e={}){let{wrapper:t}=e.components||{};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)($e,{...e})}):$e(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{et as default};