chore: import upstream snapshot with attribution

apps/sim/app/invite/components/index.ts

@@ -0,0 +1,2 @@
+export { default as InviteLayout } from './layout'
+export { InviteStatusCard } from './status-card'

apps/sim/app/invite/components/layout.tsx

@@ -0,0 +1,14 @@
+import { AuthShell, SupportFooter } from '@/app/(auth)/components'
+
+interface InviteLayoutProps {
+  children: React.ReactNode
+}
+
+/**
+ * Invite pages wear the same light auth shell as login/signup — the shared
+ * {@link AuthShell} (logo-only header, centered column) plus the support footer —
+ * so the invite-to-workspace flow is visually aligned with the rest of auth.
+ */
+export default function InviteLayout({ children }: InviteLayoutProps) {
+  return <AuthShell footer={<SupportFooter position='static' />}>{children}</AuthShell>
+}

apps/sim/app/invite/components/status-card.tsx

@@ -0,0 +1,100 @@
+'use client'
+import { Chip, cn, Loader } from '@sim/emcn'
+import { useRouter } from 'next/navigation'
+import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
+
+interface InviteStatusCardProps {
+  type: 'login' | 'loading' | 'error' | 'success' | 'invitation' | 'warning'
+  title: string
+  description: string | React.ReactNode
+  icon?: 'userPlus' | 'mail' | 'users' | 'error' | 'success' | 'warning'
+  actions?: Array<{
+    label: string
+    onClick: () => void
+    disabled?: boolean
+    loading?: boolean
+  }>
+  isExpiredError?: boolean
+}
+
+const EMPTY_ACTIONS: NonNullable<InviteStatusCardProps['actions']> = []
+
+export function InviteStatusCard({
+  type,
+  title,
+  description,
+  icon: _icon,
+  actions = EMPTY_ACTIONS,
+  isExpiredError = false,
+}: InviteStatusCardProps) {
+  const router = useRouter()
+
+  if (type === 'loading') {
+    return (
+      <>
+        <div className='space-y-1 text-center'>
+          <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'>
+            Loading
+          </h1>
+          <p className='font-[380] text-[var(--text-muted)]'>{description}</p>
+        </div>
+        <div className='mt-8 flex w-full items-center justify-center py-8'>
+          <Loader className='size-8 text-[var(--text-muted)]' animate />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className='space-y-1 text-center'>
+        <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'>
+          {title}
+        </h1>
+        <p className='font-[380] text-[var(--text-muted)]'>{description}</p>
+      </div>
+
+      <div className='mt-8 w-full max-w-[410px] space-y-3'>
+        {isExpiredError && (
+          <AuthSubmitButton type='button' onClick={() => router.push('/')} loadingLabel=''>
+            Request New Invitation
+          </AuthSubmitButton>
+        )}
+
+        {actions.map((action, index) =>
+          index === 0 ? (
+            <AuthSubmitButton
+              key={action.label}
+              type='button'
+              onClick={action.onClick}
+              disabled={action.disabled}
+              loading={action.loading}
+              loadingLabel={`${action.label}...`}
+            >
+              {action.label}
+            </AuthSubmitButton>
+          ) : (
+            <Chip
+              key={action.label}
+              fullWidth
+              flush
+              onClick={action.onClick}
+              disabled={action.disabled || action.loading}
+              className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
+            >
+              {action.loading ? (
+                <span className='flex items-center gap-2'>
+                  <Loader className='size-4' animate />
+                  {action.label}...
+                </span>
+              ) : (
+                action.label
+              )}
+            </Chip>
+          )
+        )}
+      </div>
+    </>
+  )
+}