{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-organization/domain-table",
  "type": "registry:block",
  "title": "DomainTable container component.",
  "description": "A block component for domain table.",
  "dependencies": [
    "@auth0/universal-components-core@2.1.0",
    "@auth0/auth0-react@^2.15.1",
    "@hookform/resolvers@^5.1.0",
    "@radix-ui/react-checkbox@^1.1.1",
    "@radix-ui/react-dialog@^1.1.14",
    "@radix-ui/react-dropdown-menu@^2.1.1",
    "@radix-ui/react-label@^2.1.7",
    "@radix-ui/react-slot@^1.2.3",
    "@radix-ui/react-switch@^1.1.0",
    "@radix-ui/react-tooltip@^1.2.7",
    "@tanstack/react-query@^5.56.2",
    "@tanstack/react-table@^8.21.3",
    "class-variance-authority@^0.7.1",
    "clsx@^2.1.1",
    "lucide-react@^1.16.0",
    "react-hook-form@^7.57.0",
    "sonner@^2.0.5",
    "tailwind-merge@^3.3.0"
  ],
  "files": [
    {
      "path": "src/components/auth0/my-organization/domain-table.tsx",
      "content": "/** @module domain-table */\n\nimport { type Domain, getComponentStyles } from '@auth0/universal-components-core';\nimport { Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { DomainConfigureProvidersModal } from '@/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal';\nimport { DomainCreateModal } from '@/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal';\nimport { DomainDeleteModal } from '@/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal';\nimport { DomainTableActionsColumn } from '@/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column';\nimport { DomainVerifyModal } from '@/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal';\nimport { DataTable, type Column } from '@/components/auth0/shared/data-table';\nimport { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper';\nimport { Header } from '@/components/auth0/shared/header';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Badge } from '@/components/ui/badge';\nimport { useDomainTable } from '@/hooks/my-organization/use-domain-table';\nimport { useDomainTableLogic } from '@/hooks/my-organization/use-domain-table-logic';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils';\nimport type {\n  DomainTableProps,\n  DomainTableViewProps,\n} from '@/types/my-organization/domain-management/domain-table-types';\n\n/**\n * DomainTable container component.\n * @param props - Component props\n * @returns Domain table container element\n * @internal\n */\nfunction DomainTable(props: DomainTableProps) {\n  const {\n    schema,\n    hideHeader = false,\n    readOnly = false,\n    createAction,\n    verifyAction,\n    deleteAction,\n    associateToProviderAction,\n    deleteFromProviderAction,\n    customMessages = {},\n    styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} },\n    onOpenProvider,\n    onCreateProvider,\n  } = props;\n\n  const { t } = useTranslator('domain_management', customMessages);\n\n  const domainTableState = useDomainTable({\n    createAction,\n    verifyAction,\n    deleteAction,\n    associateToProviderAction,\n    deleteFromProviderAction,\n    customMessages,\n  });\n\n  const domainTableHandlers = useDomainTableLogic({\n    t,\n    onCreateDomain: domainTableState.onCreateDomain,\n    onVerifyDomain: domainTableState.onVerifyDomain,\n    onDeleteDomain: domainTableState.onDeleteDomain,\n    onAssociateToProvider: domainTableState.onAssociateToProvider,\n    onDeleteFromProvider: domainTableState.onDeleteFromProvider,\n    fetchProviders: domainTableState.fetchProviders,\n    fetchDomains: domainTableState.fetchDomains,\n  });\n\n  const domainTableLogic = {\n    ...domainTableState,\n    schema,\n    styling,\n    hideHeader,\n    readOnly,\n    onOpenProvider,\n    onCreateProvider,\n  };\n\n  return (\n    <GateKeeper isLoading={domainTableState.isFetching} styling={styling}>\n      <DomainTableView logic={domainTableLogic} handlers={domainTableHandlers} />\n    </GateKeeper>\n  );\n}\n\n/**\n * DomainTableView — Presentational component.\n * @param props - View props with logic and handlers\n * @returns Domain table view element\n * @internal\n */\nfunction DomainTableView({\n  logic,\n  handlers,\n}: DomainTableViewProps & { handlers: ReturnType<typeof useDomainTableLogic> }) {\n  const { isDarkMode } = useTheme();\n  const { t } = useTranslator('domain_management', logic.customMessages);\n\n  const {\n    domains,\n    providers,\n    isCreating,\n    isVerifying,\n    isFetching,\n    isLoadingProviders,\n    isDeleting,\n    schema,\n    styling,\n    hideHeader,\n    readOnly = false,\n    customMessages,\n    createAction,\n    onOpenProvider,\n    onCreateProvider,\n  } = logic;\n\n  const {\n    showCreateModal,\n    showConfigureModal,\n    showVerifyModal,\n    showDeleteModal,\n    verifyError,\n    selectedDomain,\n    setShowCreateModal,\n    setShowConfigureModal,\n    setShowDeleteModal,\n    handleCreate,\n    handleVerify,\n    handleDelete,\n    handleToggleSwitch,\n    handleCloseVerifyModal,\n    handleCreateClick,\n    handleConfigureClick,\n    handleVerifyClick,\n    handleDeleteClick,\n  } = handlers;\n\n  const currentStyles = React.useMemo(\n    () => getComponentStyles(styling, isDarkMode),\n    [styling, isDarkMode],\n  );\n\n  const columns: Column<Domain>[] = React.useMemo(\n    () => [\n      {\n        type: 'text',\n        accessorKey: 'domain',\n        title: t('domain_table.table.columns.domain'),\n        width: '35%',\n        render: (domain) => (\n          <div className=\"font-medium text-primary truncate\">{domain.domain}</div>\n        ),\n      },\n      {\n        type: 'text',\n        accessorKey: 'status',\n        title: t('domain_table.table.columns.status'),\n        width: '25%',\n        render: (domain) => (\n          <Badge variant={getStatusBadgeVariant(domain.status)} size={'sm'}>\n            {t(`shared.domain_statuses.${domain.status}`)}\n          </Badge>\n        ),\n      },\n      {\n        type: 'actions',\n        title: '',\n        width: '20%',\n        render: (domain) => (\n          <DomainTableActionsColumn\n            domain={domain}\n            readOnly={readOnly}\n            customMessages={logic.customMessages}\n            onView={handleConfigureClick}\n            onConfigure={handleConfigureClick}\n            onVerify={handleVerifyClick}\n            onDelete={handleDeleteClick}\n          />\n        ),\n      },\n    ],\n    [t, readOnly, customMessages, handleConfigureClick, handleVerifyClick, handleDeleteClick],\n  );\n\n  return (\n    <StyledScope style={currentStyles.variables}>\n      {!hideHeader && (\n        <div className={currentStyles.classes?.['DomainTable-header']}>\n          <Header\n            title={t('domain_table.header.title')}\n            description={t('domain_table.header.description')}\n            actions={[\n              {\n                type: 'button',\n                label: t('domain_table.header.create_button_text'),\n                onClick: () => handleCreateClick(),\n                icon: Plus,\n                disabled: createAction?.disabled || readOnly || isFetching,\n              },\n            ]}\n          />\n        </div>\n      )}\n\n      <DataTable\n        columns={columns}\n        data={domains}\n        loading={isFetching}\n        emptyState={{ title: t('domain_table.table.empty_message') }}\n        className={currentStyles.classes?.['DomainTable-table']}\n      />\n\n      <DomainCreateModal\n        className={currentStyles.classes?.['DomainTable-createModal']}\n        isOpen={showCreateModal}\n        isLoading={isCreating}\n        schema={schema?.create}\n        onClose={() => setShowCreateModal(false)}\n        onCreate={handleCreate}\n        customMessages={customMessages?.create}\n      />\n\n      <DomainConfigureProvidersModal\n        className={currentStyles.classes?.['DomainTable-configureModal']}\n        domain={selectedDomain}\n        providers={providers}\n        isOpen={showConfigureModal}\n        isLoading={isLoadingProviders}\n        isLoadingSwitch={false}\n        onClose={() => setShowConfigureModal(false)}\n        onToggleSwitch={handleToggleSwitch}\n        onOpenProvider={onOpenProvider}\n        onCreateProvider={onCreateProvider}\n        customMessages={customMessages?.configure}\n      />\n\n      <DomainVerifyModal\n        className={currentStyles.classes?.['DomainTable-verifyModal']}\n        isOpen={showVerifyModal}\n        isLoading={isVerifying}\n        domain={selectedDomain}\n        error={verifyError}\n        onClose={handleCloseVerifyModal}\n        onVerify={handleVerify}\n        onDelete={handleDeleteClick}\n        customMessages={customMessages?.verify}\n      />\n\n      <DomainDeleteModal\n        className={currentStyles.classes?.['DomainTable-deleteModal']}\n        domain={selectedDomain}\n        isOpen={showDeleteModal}\n        isLoading={isDeleting}\n        onClose={() => setShowDeleteModal(false)}\n        onDelete={handleDelete}\n        customMessages={customMessages?.delete}\n      />\n    </StyledScope>\n  );\n}\n\n/**\n * Domain management table.\n *\n * Displays organization domains with CRUD operations. Supports creating,\n * verifying, deleting domains, and associating them with identity providers.\n *\n * @param props - {@link DomainTableProps}\n * @param props.schema - Validation schema overrides\n * @param props.customMessages - Custom i18n message overrides\n * @param props.styling - CSS variables and class overrides\n * @param props.readOnly - Render in read-only mode\n * @param props.hideHeader - Hide the header section\n * @param props.createAction - Lifecycle hooks for create operation\n * @param props.verifyAction - Lifecycle hooks for verify operation\n * @param props.deleteAction - Lifecycle hooks for delete operation\n * @param props.associateToProviderAction - Lifecycle hooks for provider association\n * @param props.deleteFromProviderAction - Lifecycle hooks for provider removal\n * @param props.onOpenProvider - Callback when opening a provider\n * @param props.onCreateProvider - Callback when creating a provider\n * @returns Domain table component\n *\n * @see {@link DomainTableProps} for full props documentation\n *\n * @example\n * ```tsx\n * <DomainTable\n *   createAction={{ onAfter: (domain) => console.log('Created:', domain) }}\n *   verifyAction={{ onAfter: (domain) => console.log('Verified:', domain) }}\n *   deleteAction={{ onAfter: (domain) => console.log('Deleted:', domain) }}\n * />\n * ```\n */\nexport { DomainTable, DomainTableView };\n",
      "type": "registry:block",
      "target": "components/auth0/my-organization/domain-table.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx",
      "content": "/**\n * Domain configure providers modal.\n * @module domain-configure-providers-modal\n * @internal\n */\n\nimport type { IdentityProviderAssociatedWithDomain } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport { type Column, DataTable } from '@/components/auth0/shared/data-table';\nimport { Button } from '@/components/ui/button';\nimport { Modal } from '@/components/ui/modal';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { DomainConfigureProvidersModalProps } from '@/types/my-organization/domain-management/domain-configure-types';\n\n/**\n * Modal for configuring domain providers.\n * @param props - Component props.\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.domain - Domain object or domain name\n * @param props.providers - Array of SSO providers\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.isLoadingSwitch - The is loading switch\n * @param props.onClose - Callback fired when the component should close\n * @param props.onToggleSwitch - Callback fired when switch is toggled\n * @param props.onOpenProvider - Callback fired when opening a provider\n * @param props.onCreateProvider - Callback fired when creating a new provider\n * @returns JSX element\n */\nexport function DomainConfigureProvidersModal({\n  className,\n  customMessages,\n  domain,\n  providers,\n  isOpen,\n  isLoading,\n  isLoadingSwitch,\n  onClose,\n  onToggleSwitch,\n  onOpenProvider,\n  onCreateProvider,\n}: DomainConfigureProvidersModalProps) {\n  const { t } = useTranslator('domain_management.domain_configure_providers.modal', customMessages);\n\n  const handleToggleSwitch = React.useCallback(\n    (provider: IdentityProviderAssociatedWithDomain, newCheckedValue: boolean) => {\n      onToggleSwitch(domain!, provider, newCheckedValue); // Switch component is not rendered if domain is null\n    },\n    [domain, onToggleSwitch],\n  );\n\n  const columns: Column<IdentityProviderAssociatedWithDomain>[] = React.useMemo(\n    () => [\n      {\n        type: 'text',\n        accessorKey: 'display_name',\n        title: t('table.columns.name'),\n        width: '25%',\n        render: (provider) => (\n          <div className=\"font-medium text-muted-foreground\">{provider.display_name}</div>\n        ),\n      },\n      {\n        type: 'text',\n        accessorKey: 'strategy',\n        title: t('table.columns.provider'),\n        width: '40%',\n        render: (provider) => <div className=\"text-muted-foreground\">{provider.strategy}</div>,\n      },\n      {\n        type: 'actions',\n        title: '',\n        width: '30%',\n        render: (provider) => (\n          <div className=\"flex items-center justify-end gap-4 min-w-0\">\n            {onOpenProvider && (\n              <Button\n                type=\"button\"\n                variant={'outline'}\n                size={'sm'}\n                onClick={() => onOpenProvider(provider)}\n              >\n                {t('table.actions.view_provider_button_text')}\n              </Button>\n            )}\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <span>\n                  <Switch\n                    checked={provider.is_associated ?? false}\n                    onCheckedChange={(checked) => handleToggleSwitch(provider, checked)}\n                    disabled={isLoadingSwitch}\n                  />\n                </span>\n              </TooltipTrigger>\n              <TooltipContent className=\"z-[1000]\">\n                {provider.is_associated\n                  ? t('table.actions.disable_provider_tooltip')\n                  : t('table.actions.enable_provider_tooltip')}\n              </TooltipContent>\n            </Tooltip>\n          </div>\n        ),\n      },\n    ],\n    [t, onOpenProvider, isLoadingSwitch, handleToggleSwitch],\n  );\n\n  return (\n    <Modal\n      open={isOpen}\n      onOpenChange={(open) => !open && onClose()}\n      className=\"p-10\"\n      title={t('title', { domain: domain?.domain ?? '' })}\n      content={\n        domain && (\n          <div className={cn('space-y-6', className)}>\n            <p className=\"text-sm text-muted-foreground text-(length:--font-size-paragraph)\">\n              {t('description', { domain: domain?.domain ?? '' })}\n            </p>\n            <DataTable\n              columns={columns}\n              data={providers}\n              loading={isLoading}\n              emptyState={{\n                title: t('table.empty_message'),\n                action: onCreateProvider\n                  ? {\n                      label: t('table.actions.add_provider_button_text'),\n                      variant: 'outline',\n                      onClick: onCreateProvider,\n                    }\n                  : undefined,\n              }}\n            />\n          </div>\n        )\n      }\n      modalActions={{\n        showNext: false,\n        previousAction: {\n          label: t('actions.close_button_text'),\n          onClick: onClose,\n        },\n      }}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx",
      "content": "/**\n * Domain creation modal.\n * @module domain-create-modal\n * @internal\n */\n\nimport {\n  createDomainCreateSchema,\n  type InternalDomainCreateFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormMessage,\n  FormLabel,\n} from '@/components/ui/form';\nimport { Modal } from '@/components/ui/modal';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.schema - Zod validation schema\n * @param props.onClose - Callback fired when the component should close\n * @param props.onCreate - Callback fired when create action is triggered\n * @returns JSX element\n */\nexport function DomainCreateModal({\n  translatorKey = 'domain_management.domain_create.modal',\n  className,\n  customMessages,\n  isOpen,\n  isLoading,\n  schema,\n  onClose,\n  onCreate,\n}: DomainCreateModalProps) {\n  const { t } = useTranslator(translatorKey, customMessages);\n\n  const domainCreateSchema = React.useMemo(\n    () => createDomainCreateSchema(schema, t('field.error')),\n    [schema, t],\n  );\n\n  const form = useForm<InternalDomainCreateFormValues>({\n    resolver: zodResolver(domainCreateSchema),\n    defaultValues: {\n      domain_url: '',\n    },\n    mode: FORM_VALIDATION_MODE,\n  });\n\n  const handleCreate = React.useCallback(\n    async (values: InternalDomainCreateFormValues) => {\n      if (!values.domain_url) return;\n      await onCreate(values.domain_url);\n      form.reset();\n    },\n    [form, onCreate],\n  );\n\n  const handleClose = React.useCallback(() => {\n    form.reset();\n    onClose();\n  }, [form, onClose]);\n\n  const onSubmit = React.useCallback(\n    (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      form.handleSubmit(handleCreate)();\n    },\n    [form, handleCreate],\n  );\n\n  return (\n    <Modal\n      open={isOpen}\n      onOpenChange={(open) => !open && handleClose()}\n      className={cn('p-10', className)}\n      title={t('title')}\n      content={\n        <div>\n          <Form {...form}>\n            <form id=\"domain-create-form\" onSubmit={onSubmit}>\n              <FormField\n                control={form.control}\n                name=\"domain_url\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel\n                      htmlFor=\"domain-url\"\n                      className=\"text-sm text-(length:--font-size-label) font-medium\"\n                    >\n                      {t('field.label')}\n                    </FormLabel>\n                    <FormControl>\n                      <TextField\n                        id=\"domain-url\"\n                        type=\"text\"\n                        placeholder={t('field.placeholder')}\n                        className=\"mt-2\"\n                        {...field}\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </form>\n          </Form>\n        </div>\n      }\n      modalActions={{\n        isLoading,\n        nextAction: {\n          type: 'button',\n          label: t('actions.create_button_text'),\n          variant: 'primary',\n          disabled: isLoading,\n          onClick: (e) => {\n            e.preventDefault();\n            form.handleSubmit(handleCreate)();\n          },\n        },\n        previousAction: {\n          label: t('actions.cancel_button_text'),\n          onClick: handleClose,\n        },\n      }}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx",
      "content": "/**\n * Domain deletion confirmation modal.\n * @module domain-delete-modal\n * @internal\n */\n\nimport type { Domain } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { DomainDeleteModalProps } from '@/types/my-organization/domain-management/domain-delete-types';\n\nconst getDescriptionKey = (domain: Domain | null) => {\n  return domain?.status === 'pending' ? 'description.pending' : 'description.verified';\n};\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.domain - Domain object or domain name\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.onClose - Callback fired when the component should close\n * @param props.onDelete - Callback fired when delete action is triggered\n * @returns JSX element\n */\nexport function DomainDeleteModal({\n  translatorKey = 'domain_management.domain_delete.modal',\n  className,\n  customMessages,\n  domain,\n  isOpen,\n  isLoading,\n  onClose,\n  onDelete,\n}: DomainDeleteModalProps) {\n  const { t } = useTranslator(translatorKey, customMessages);\n\n  const handleDelete = React.useCallback(() => {\n    if (domain) {\n      onDelete(domain);\n    }\n  }, [onDelete, domain]);\n\n  return (\n    <Modal\n      open={isOpen}\n      onOpenChange={(open) => !open && onClose()}\n      className={cn('p-10', className)}\n      title={t('title')}\n      content={\n        <div className={'space-y-6'}>\n          <p className=\"text-sm text-muted-foreground text-(length:--font-size-paragraph)\">\n            {t(getDescriptionKey(domain), { domainName: domain?.domain })}\n          </p>\n        </div>\n      }\n      modalActions={{\n        isLoading,\n        nextAction: {\n          type: 'button',\n          label: t('actions.delete_button_text'),\n          variant: 'destructive',\n          disabled: isLoading,\n          onClick: handleDelete,\n        },\n        previousAction: {\n          label: t('actions.cancel_button_text'),\n          onClick: onClose,\n        },\n      }}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx",
      "content": "/**\n * Domain table row actions dropdown.\n * @module domain-table-actions-column\n * @internal\n */\n\nimport { MoreHorizontal, Trash2, PencilLine, Eye, RefreshCcw } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n} from '@/components/ui/dropdown-menu';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { DomainTableActionsColumnProps } from '@/types/my-organization/domain-management/domain-table-types';\n\n/**\n * DomainTableActionsColumn Component\n * Handles the actions column for Domain table with dropdown menu\n * @param props - Component props.\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.domain - Domain object or domain name\n * @param props.onView - Callback fired when view action is triggered\n * @param props.onConfigure - Callback fired when configure action is triggered\n * @param props.onVerify - Callback fired when verify action is triggered\n * @param props.onDelete - Callback fired when delete action is triggered\n * @returns JSX element\n */\nexport function DomainTableActionsColumn({\n  customMessages = {},\n  readOnly = false,\n  domain,\n  onView,\n  onConfigure,\n  onVerify,\n  onDelete,\n}: DomainTableActionsColumnProps) {\n  const { t } = useTranslator('domain_management.domain_table', customMessages);\n\n  const handleView = React.useCallback(() => {\n    onConfigure(domain);\n  }, [domain, onView]);\n\n  const handleConfigure = React.useCallback(() => {\n    onConfigure(domain);\n  }, [domain, onConfigure]);\n\n  const handleVerify = React.useCallback(() => {\n    onVerify(domain);\n  }, [domain, onVerify]);\n\n  const handleDelete = React.useCallback(() => {\n    onDelete(domain);\n  }, [domain, onDelete]);\n\n  return (\n    <div className=\"flex items-center justify-end gap-4 min-w-0\">\n      <DropdownMenu>\n        <DropdownMenuTrigger className=\"h-8 w-8 p-0 rounded-xl bg-primary border border-primary/20 shadow-sm transition-all duration-200 hover:bg-primary/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/50\">\n          <MoreHorizontal className=\"h-4 w-4 text-primary-foreground\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuPortal>\n          <DropdownMenuContent align=\"end\">\n            {domain.status === 'verified' && (\n              <DropdownMenuItem onClick={handleConfigure} disabled={readOnly}>\n                <PencilLine className=\"mr-2 h-4 w-4\" />\n                {t('table.actions.configure_button_text')}\n              </DropdownMenuItem>\n            )}\n            {domain.status === 'pending' && (\n              <>\n                <DropdownMenuItem onClick={handleView} disabled={readOnly}>\n                  <Eye className=\"mr-2 h-4 w-4\" />\n                  {t('table.actions.view_button_text')}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={handleVerify} disabled={readOnly}>\n                  <RefreshCcw className=\"mr-2 h-4 w-4\" />\n                  {t('table.actions.verify_button_text')}\n                </DropdownMenuItem>\n              </>\n            )}\n            <DropdownMenuItem\n              onClick={handleDelete}\n              className=\"text-destructive-foreground focus:text-destructive-foreground\"\n              disabled={readOnly}\n            >\n              <Trash2 className=\"mr-2 h-4 w-4 text-destructive-foreground focus:text-destructive-foreground\" />\n              {t('table.actions.delete_button_text')}\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenuPortal>\n      </DropdownMenu>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx",
      "content": "/**\n * Domain verification modal.\n * @module domain-verify-modal\n * @internal\n */\n\nimport { MessageSquare } from 'lucide-react';\nimport React from 'react';\n\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Label } from '@/components/ui/label';\nimport { Modal } from '@/components/ui/modal';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { DomainVerifyModalProps } from '@/types/my-organization/domain-management/domain-verify-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.domain - Domain object or domain name\n * @param props.error - Error message or error object to display\n * @param props.onClose - Callback fired when the component should close\n * @param props.onVerify - Callback fired when verify action is triggered\n * @param props.onDelete - Callback fired when delete action is triggered\n * @returns JSX element\n */\nexport function DomainVerifyModal({\n  translatorKey = 'domain_management.domain_verify.modal',\n  className,\n  customMessages,\n  isOpen,\n  isLoading,\n  domain,\n  error,\n  onClose,\n  onVerify,\n  onDelete,\n}: DomainVerifyModalProps) {\n  const { t } = useTranslator(translatorKey, customMessages);\n\n  const handleVerify = React.useCallback(() => {\n    if (domain) {\n      onVerify(domain);\n    }\n  }, [onVerify, domain]);\n\n  const handleDelete = React.useCallback(() => {\n    if (domain) {\n      onDelete(domain);\n    }\n  }, [onDelete, domain]);\n\n  return (\n    <Modal\n      open={isOpen}\n      onOpenChange={(open) => !open && onClose()}\n      className=\"p-10 break-all\"\n      title={t('title', { domainName: domain?.domain })}\n      content={\n        <div className={cn('space-y-4', className)}>\n          {error && (\n            <Alert variant=\"destructive\">\n              <MessageSquare className=\"h-4 w-4\" />\n              <AlertDescription className=\"text-destructive-foreground\">{error}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"txt-record-name\" className=\"text-sm font-medium\">\n              {t('txt_record_name.label')}\n            </Label>\n            <CopyableTextField\n              id=\"txt-record-name\"\n              value={domain?.verification_host || ''}\n              readOnly\n              className=\"text-sm\"\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"txt-record-content\" className=\"text-sm font-medium\">\n              {t('txt_record_content.label')}\n            </Label>\n            <CopyableTextField\n              id=\"txt-record-content\"\n              value={domain?.verification_txt || ''}\n              readOnly\n              className=\"text-sm\"\n            />\n          </div>\n\n          <div className=\"space-y-2 pt-4 border-t border-gray-200\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm text-foreground font-medium\">\n                {t('verification_status.label')}\n              </span>\n              <Badge variant=\"warning\">{t('verification_status.pending')}</Badge>\n            </div>\n            <p className={'text-sm text-muted-foreground text-(length:--font-size-paragraph)'}>\n              {t('verification_status.description')}\n            </p>\n          </div>\n\n          <div className=\"flex gap-2 pt-2 -mb-4\">\n            <Button variant=\"outline\" onClick={handleVerify} disabled={isLoading}>\n              {isLoading ? <Spinner size=\"sm\" /> : t('actions.verify_button_text')}\n            </Button>\n            <Button variant=\"destructive\" onClick={handleDelete} disabled={isLoading}>\n              {t('actions.delete_button_text')}\n            </Button>\n          </div>\n        </div>\n      }\n      modalActions={{\n        showNext: false,\n        previousAction: {\n          label: t('actions.done_button_text'),\n          onClick: onClose,\n          variant: 'primary',\n        },\n      }}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx"
    },
    {
      "path": "src/components/auth0/shared/copyable-text-field.tsx",
      "content": "/**\n * Text field with copy-to-clipboard button.\n * @module copyable-text-field\n * @internal\n */\n\nimport { Copy } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { TextField, type TextFieldProps } from '@/components/ui/text-field';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\n\nexport interface CopyableTextFieldProps extends TextFieldProps {\n  onCopy?: () => void;\n  copyButtonClassName?: string;\n  tooltipSide?: 'top' | 'bottom' | 'left' | 'right';\n  tooltipAlign?: 'start' | 'center' | 'end';\n  showCopyButton?: boolean;\n}\n\nconst CopyableTextField = React.forwardRef<HTMLInputElement, CopyableTextFieldProps>(\n  (\n    {\n      onCopy,\n      copyButtonClassName,\n      tooltipSide = 'top',\n      tooltipAlign = 'end',\n      readOnly = true,\n      endAdornment,\n      showCopyButton = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslator('common');\n    const [tooltipText, setTooltipText] = React.useState(t('copy'));\n    const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n    const handleCopy = async () => {\n      if (props.value) {\n        await navigator.clipboard.writeText(String(props.value));\n        setTooltipText(t('copied'));\n        setTooltipOpen(true);\n        setTimeout(() => {\n          setTooltipText(t('copy'));\n          setTooltipOpen(false);\n        }, 1000);\n        onCopy?.();\n      }\n    };\n\n    const copyButton = (\n      <Tooltip open={tooltipOpen} onOpenChange={setTooltipOpen}>\n        <TooltipTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            className={cn('h-8 w-8', copyButtonClassName)}\n            onClick={handleCopy}\n            aria-label={t('copy')}\n          >\n            <Copy className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side={tooltipSide} align={tooltipAlign} sideOffset={5} className=\"z-[1000]\">\n          {tooltipText}\n        </TooltipContent>\n      </Tooltip>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        readOnly={readOnly}\n        {...props}\n        endAdornment={\n          showCopyButton ? (\n            endAdornment ? (\n              <div className=\"flex items-center gap-1\">\n                {endAdornment}\n                {copyButton}\n              </div>\n            ) : (\n              copyButton\n            )\n          ) : (\n            endAdornment\n          )\n        }\n      />\n    );\n  },\n);\n\nCopyableTextField.displayName = 'CopyableTextField';\n\nexport { CopyableTextField };\n",
      "type": "registry:component",
      "target": "components/auth0/shared/copyable-text-field.tsx"
    },
    {
      "path": "src/components/auth0/shared/data-table.tsx",
      "content": "/**\n * Data table with sorting and actions.\n * @module data-table\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport {\n  useReactTable,\n  getCoreRowModel,\n  getSortedRowModel,\n  flexRender,\n} from '@tanstack/react-table';\nimport type { SortingState, ColumnDef, RowSelectionState } from '@tanstack/react-table';\nimport { Copy } from 'lucide-react';\nimport React, { useState, useMemo } from 'react';\n\nimport { MiddleEllipsisText } from '@/components/auth0/shared/middle-ellipsis-text';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { InlineCode } from '@/components/ui/inline-code';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHead,\n  TableCell,\n} from '@/components/ui/table';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\ninterface ActionButton extends Omit<CoreActionButton, 'onClick'> {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\ntype AlignmentType = 'left' | 'center' | 'right';\n\nexport interface BaseColumn<Item> {\n  title: string | React.ReactNode;\n  accessorKey: keyof Item;\n  width?: string;\n  enableSorting?: boolean;\n  headerAlign?: AlignmentType;\n}\n\nexport interface TextColumn<Item> extends BaseColumn<Item> {\n  type: 'text';\n  render?: (item: Item, value: unknown) => React.ReactNode;\n}\n\nexport interface DateColumn<Item> extends BaseColumn<Item> {\n  type: 'date';\n  format?: 'short' | 'medium' | 'long' | 'relative';\n  render?: (item: Item, value: Date | string | number) => React.ReactNode;\n}\n\nexport interface SwitchColumn<Item> extends BaseColumn<Item> {\n  type: 'switch';\n  onToggle?: (checked: boolean, item: Item) => void;\n}\n\nexport interface ButtonColumn<Item> extends BaseColumn<Item> {\n  type: 'button';\n  buttonText: string;\n  variant?: 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n  onClick: (item: Item) => void;\n}\n\nexport interface CopyColumnLabels {\n  copyTooltip?: string;\n  copiedTooltip?: string;\n}\n\nexport interface DataTableSelectionLabels {\n  selectAll: string;\n  selectRow: (index: number) => string;\n}\n\nexport interface CopyColumn<Item> extends BaseColumn<Item> {\n  type: 'copy';\n}\n\nexport interface BadgeColumn<Item> extends BaseColumn<Item> {\n  type: 'badge';\n  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success';\n}\n\nexport interface ActionsColumn<Item> extends Omit<BaseColumn<Item>, 'accessorKey'> {\n  type: 'actions';\n  accessorKey?: keyof Item;\n  render: (item: Item) => React.ReactNode;\n}\n\nexport interface CustomColumn<Item> extends BaseColumn<Item> {\n  type: 'custom';\n  render: (item: Item, value: unknown) => React.ReactNode;\n}\n\nexport type Column<Item> =\n  | TextColumn<Item>\n  | DateColumn<Item>\n  | SwitchColumn<Item>\n  | ButtonColumn<Item>\n  | CopyColumn<Item>\n  | BadgeColumn<Item>\n  | ActionsColumn<Item>\n  | CustomColumn<Item>;\n\nexport interface EmptyStateProps {\n  title: string;\n  subtitle?: string;\n  action?: ActionButton;\n}\n\nexport interface DataTableSortConfig {\n  key: string | null;\n  direction: 'asc' | 'desc';\n}\n\nexport interface DataTableProps<Item> {\n  data: Item[];\n  columns: Column<Item>[];\n  loading?: boolean;\n  loader?: React.ReactNode;\n  emptyState?: EmptyStateProps;\n  onRowClick?: (rowData: Item) => void;\n  className?: string;\n  headerAlign?: AlignmentType;\n  /** When provided, sorting is delegated to the parent (server-side). */\n  onSortChange?: (sortConfig: DataTableSortConfig) => void;\n  /** Controlled sort state. Used with onSortChange for server-side sorting. */\n  sortConfig?: DataTableSortConfig;\n  /** Enable row selection with checkboxes. */\n  selectable?: boolean;\n  /** Controlled selected rows. */\n  selectedRows?: Item[];\n  /** Called when selection changes. */\n  onSelectedRowsChange?: (rows: Item[]) => void;\n  /** Derive a stable string ID from a row for selection tracking. */\n  getRowId?: (row: Item) => string;\n  /** Accessible labels for selection checkboxes. */\n  selectionLabels?: DataTableSelectionLabels;\n}\n\nconst ALIGNMENT_CLASSES = {\n  text: {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  },\n  flex: {\n    left: 'justify-start',\n    center: 'justify-center',\n    right: 'justify-end',\n  },\n} as const;\n\nconst isEmpty = (value: unknown): boolean => {\n  return value === null || value === undefined || value === '';\n};\n\nconst formatDate = (value: Date | string | number, format: string = 'medium'): string => {\n  const date = new Date(value);\n  if (isNaN(date.getTime())) return 'Invalid Date';\n\n  switch (format) {\n    case 'short':\n      return date.toLocaleDateString();\n    case 'long':\n      return date.toLocaleDateString(undefined, {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      });\n    case 'relative': {\n      const now = new Date();\n      const diffTime = date.getTime() - now.getTime();\n      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n\n      if (Math.abs(diffDays) === 0) return 'Today';\n      if (diffDays === 1) return 'Tomorrow';\n      if (diffDays === -1) return 'Yesterday';\n      if (diffDays > 0) return `In ${diffDays} days`;\n      return `${Math.abs(diffDays)} days ago`;\n    }\n    case 'medium':\n    default:\n      return date.toLocaleDateString(undefined, {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n      });\n  }\n};\n\nconst DEFAULT_COPY_LABELS: Required<CopyColumnLabels> = {\n  copyTooltip: 'Copy to clipboard',\n  copiedTooltip: 'Copied!',\n};\n\nconst DEFAULT_SELECTION_LABELS: DataTableSelectionLabels = {\n  selectAll: 'Select all rows',\n  selectRow: (index: number) => `Select row ${index + 1}`,\n};\n\n/**\n * Copy button with clipboard functionality.\n * @param props - Component props.\n * @param props.value - Value to copy\n * @param props.labels - Tooltip labels\n * @returns JSX element\n */\nfunction CopyButton({\n  value,\n  labels = DEFAULT_COPY_LABELS,\n}: {\n  value: unknown;\n  labels?: CopyColumnLabels;\n}) {\n  const [copied, setCopied] = useState(false);\n  const [copyTooltipOpen, setCopyTooltipOpen] = useState(false);\n  const stringValue = String(value);\n\n  const handleCopy = async (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!value) return;\n\n    try {\n      await navigator.clipboard.writeText(stringValue);\n      setCopied(true);\n      setCopyTooltipOpen(true);\n\n      setTimeout(() => {\n        setCopied(false);\n        setCopyTooltipOpen(false);\n      }, 2000);\n    } catch (error) {\n      console.error('Failed to copy text:', error);\n    }\n  };\n\n  return (\n    <InlineCode className=\"w-full flex items-center justify-between gap-2 pr-1\">\n      <span className=\"min-w-0 flex-1\">\n        <MiddleEllipsisText text={stringValue} className=\"text-muted-foreground\" />\n      </span>\n      <Tooltip open={copyTooltipOpen} onOpenChange={setCopyTooltipOpen}>\n        <TooltipTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCopy}\n            className=\"h-6 w-6 p-0 hover:bg-muted/50 shrink-0\"\n            aria-label={copied ? labels.copiedTooltip : labels.copyTooltip}\n          >\n            <Copy className=\"h-3 w-3\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>{copied ? labels.copiedTooltip : labels.copyTooltip}</p>\n        </TooltipContent>\n      </Tooltip>\n    </InlineCode>\n  );\n}\n\n/**\n * Renders a text column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderTextColumn<Item>(\n  item: Item,\n  value: unknown,\n  column: TextColumn<Item>,\n): React.ReactNode {\n  if (column.render) {\n    return column.render(item, value);\n  }\n\n  return <span className=\"text-muted-foreground\">{String(value)}</span>;\n}\n\n/**\n * Renders a date column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderDateColumn<Item>(\n  item: Item,\n  value: Date | string | number,\n  column: DateColumn<Item>,\n): React.ReactNode {\n  if (column.render) {\n    return column.render(item, value);\n  }\n  const formattedDate = formatDate(value, column.format);\n\n  return (\n    <span className=\"text-muted-foreground\" title={new Date(value).toISOString()}>\n      {formattedDate}\n    </span>\n  );\n}\n\n/**\n * Renders a switch column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderSwitchColumn<Item>(\n  item: Item,\n  value: boolean,\n  column: SwitchColumn<Item>,\n): React.ReactNode {\n  const handleToggle = (checked: boolean) => {\n    column.onToggle?.(checked, item);\n  };\n\n  return (\n    <div onClick={(e) => e.stopPropagation()}>\n      <Switch checked={!!value} onCheckedChange={handleToggle} />\n    </div>\n  );\n}\n\n/**\n * Renders a button column cell.\n * @param item - Data item.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderButtonColumn<Item>(item: Item, column: ButtonColumn<Item>): React.ReactNode {\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    column.onClick(item);\n  };\n\n  return (\n    <Button variant={column.variant} size=\"sm\" onClick={handleClick}>\n      {column.buttonText}\n    </Button>\n  );\n}\n\n/**\n * Renders a badge column cell.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderBadgeColumn<Item>(value: unknown, column: BadgeColumn<Item>): React.ReactNode {\n  return <Badge variant={column.variant}>{String(value)}</Badge>;\n}\n\n/**\n * Renders a copy column cell.\n * @param value - Cell value.\n * @returns React node\n */\nfunction renderCopyColumn(value: unknown): React.ReactNode {\n  return <CopyButton value={value} />;\n}\n\n/**\n * Empty state component for data table.\n * @param props - Component props.\n * @param props.title - Empty state title.\n * @param props.subtitle - Empty state subtitle.\n * @param props.action - Optional action button config.\n * @returns JSX element\n */\nfunction EmptyState({ title, subtitle, action }: EmptyStateProps) {\n  return (\n    <div className=\"text-center py-12\">\n      <h3 className=\"text-md font-medium text-foreground mb-2\">{title}</h3>\n      {subtitle && <p className=\"text-sm text-muted-foreground mb-4\">{subtitle}</p>}\n      {action && (\n        <Button variant={action.variant} onClick={action.onClick}>\n          {action.label}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Generic data table component.\n * @param props - Component props.\n * @param props.data - Table data items.\n * @param props.columns - Column configurations.\n * @param props.loading - Loading state.\n * @param props.loader - Custom loader component.\n * @param props.emptyState - Empty state configuration.\n * @param props.onRowClick - Row click handler.\n * @param props.className - Additional CSS classes.\n * @param props.headerAlign - Default header alignment.\n * @returns JSX element\n */\nexport function DataTable<Item>({\n  data,\n  columns,\n  loading = false,\n  loader,\n  emptyState,\n  onRowClick,\n  className,\n  headerAlign = 'left',\n  onSortChange,\n  sortConfig,\n  selectable = false,\n  selectedRows,\n  onSelectedRowsChange,\n  getRowId,\n  selectionLabels,\n}: DataTableProps<Item>) {\n  const isServerSideSort = !!onSortChange;\n  const isControlledSelection = selectedRows !== undefined;\n\n  const [internalSorting, setInternalSorting] = useState<SortingState>([]);\n  const [internalRowSelection, setInternalRowSelection] = useState<RowSelectionState>({});\n\n  // Convert controlled sortConfig to TanStack SortingState for header display\n  const sorting: SortingState = useMemo(() => {\n    if (isServerSideSort && sortConfig?.key) {\n      return [{ id: sortConfig.key, desc: sortConfig.direction === 'desc' }];\n    }\n    return internalSorting;\n  }, [isServerSideSort, sortConfig, internalSorting]);\n\n  const rowSelection = useMemo<RowSelectionState>(() => {\n    if (!selectable) return {};\n    if (isControlledSelection && selectedRows) {\n      if (getRowId) {\n        return Object.fromEntries(selectedRows.map((row) => [getRowId(row), true]));\n      }\n      return Object.fromEntries(\n        data.reduce<[string, boolean][]>((acc, item, idx) => {\n          if (selectedRows.includes(item)) acc.push([String(idx), true]);\n          return acc;\n        }, []),\n      );\n    }\n    return internalRowSelection;\n  }, [selectable, isControlledSelection, selectedRows, getRowId, data, internalRowSelection]);\n\n  const handleSortingChange = React.useCallback(\n    (updater: SortingState | ((old: SortingState) => SortingState)) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n\n      if (isServerSideSort) {\n        const sort = newSorting[0];\n        if (sort) {\n          onSortChange({ key: sort.id, direction: sort.desc ? 'desc' : 'asc' });\n        } else {\n          onSortChange({ key: null, direction: 'asc' });\n        }\n      } else {\n        setInternalSorting(newSorting);\n      }\n    },\n    [isServerSideSort, onSortChange, sorting],\n  );\n\n  const handleRowSelectionChange = React.useCallback(\n    (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      if (!isControlledSelection) setInternalRowSelection(newSelection);\n      if (onSelectedRowsChange) {\n        const items = getRowId\n          ? data.filter((item) => newSelection[getRowId(item)])\n          : data.filter((_, idx) => newSelection[String(idx)]);\n        onSelectedRowsChange(items);\n      }\n    },\n    [rowSelection, isControlledSelection, onSelectedRowsChange, getRowId, data],\n  );\n\n  const selectionColumn = useMemo<ColumnDef<Item>>(\n    () => ({\n      id: '__selection__',\n      enableSorting: false,\n      size: 48,\n      meta: {\n        headerAlign: 'left' as AlignmentType,\n        column: {\n          type: 'actions',\n          title: '',\n          width: '48px',\n          enableSorting: false,\n          render: () => null,\n        } as unknown as Column<Item>,\n      },\n      header: ({ table: t }) => (\n        <Checkbox\n          checked={\n            t.getIsAllPageRowsSelected()\n              ? true\n              : t.getIsSomePageRowsSelected()\n                ? 'indeterminate'\n                : false\n          }\n          onCheckedChange={(checked) => t.toggleAllPageRowsSelected(!!checked)}\n          aria-label={selectionLabels?.selectAll ?? DEFAULT_SELECTION_LABELS.selectAll}\n          onClick={(e: React.MouseEvent) => e.stopPropagation()}\n        />\n      ),\n      cell: ({ row }) => (\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(checked) => row.toggleSelected(!!checked)}\n          aria-label={\n            selectionLabels?.selectRow(row.index) ?? DEFAULT_SELECTION_LABELS.selectRow(row.index)\n          }\n          onClick={(e: React.MouseEvent) => e.stopPropagation()}\n        />\n      ),\n    }),\n    [selectionLabels],\n  );\n\n  const tableColumns = useMemo<ColumnDef<Item>[]>(() => {\n    const dataCols: ColumnDef<Item>[] = columns.map((column, index) => {\n      return {\n        id: column.accessorKey ? String(column.accessorKey) : `column-${index}`,\n        accessorKey: column.accessorKey as string,\n        header:\n          typeof column.title === 'string' ? column.title : () => column.title as React.ReactNode,\n        size: column.width\n          ? isNaN(Number(column.width))\n            ? undefined\n            : Number(column.width)\n          : undefined,\n        enableSorting: column.enableSorting !== false && !!column.accessorKey,\n        meta: {\n          headerAlign: column.headerAlign || headerAlign || 'left',\n          column: column,\n        },\n\n        cell: ({ getValue, row }) => {\n          const value = getValue();\n          const item = row.original;\n\n          if (column.type === 'actions') {\n            return <div onClick={(e) => e.stopPropagation()}>{column.render(item)}</div>;\n          }\n\n          if (column.type === 'custom') {\n            return <>{column.render(item, value)}</>;\n          }\n\n          if (column.type === 'switch') {\n            return renderSwitchColumn(item, value as boolean, column);\n          }\n\n          if (column.type === 'button') {\n            return renderButtonColumn(item, column);\n          }\n\n          if (isEmpty(value)) {\n            return null;\n          }\n\n          switch (column.type) {\n            case 'text':\n              return renderTextColumn(item, value, column);\n            case 'date':\n              return renderDateColumn(item, value as Date | string | number, column);\n            case 'copy':\n              return renderCopyColumn(value);\n            case 'badge':\n              return renderBadgeColumn(value, column);\n            default:\n              return <span className=\"text-foreground\">{String(value)}</span>;\n          }\n        },\n      };\n    });\n    return selectable ? [selectionColumn, ...dataCols] : dataCols;\n  }, [columns, headerAlign, selectable, selectionColumn]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    state: {\n      sorting,\n      ...(selectable && { rowSelection }),\n    },\n    getRowId: getRowId,\n    onSortingChange: handleSortingChange,\n    ...(selectable && { onRowSelectionChange: handleRowSelectionChange }),\n    enableRowSelection: selectable,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: isServerSideSort ? undefined : getSortedRowModel(),\n    manualSorting: isServerSideSort,\n    manualPagination: true,\n  });\n\n  if (loading) {\n    return (\n      <div className={cn('w-full flex items-center justify-center py-8', className)}>\n        {loader || <Spinner />}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('w-full', className)}>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const canSort = header.column.getCanSort();\n                const sortDirection = header.column.getIsSorted();\n                const meta = header.column.columnDef.meta as {\n                  headerAlign: AlignmentType;\n                  column: Column<Item>;\n                };\n\n                return (\n                  <TableHead\n                    key={header.id}\n                    className={cn(\n                      canSort && 'hover:bg-muted/50',\n                      'transition-colors',\n                      ALIGNMENT_CLASSES.text[meta.headerAlign],\n                    )}\n                    style={{\n                      width: meta.column.width,\n                      minWidth: meta.column.width,\n                      maxWidth: meta.column.width,\n                    }}\n                    onClick={canSort ? header.column.getToggleSortingHandler() : undefined}\n                    isSortable={canSort}\n                    sortDirection={sortDirection}\n                  >\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length === 0 ? (\n            <TableRow disableHover>\n              <TableCell colSpan={tableColumns.length}>\n                <EmptyState\n                  {...(emptyState ?? {\n                    title: 'No data available',\n                    subtitle: 'There are no items to display.',\n                  })}\n                />\n              </TableCell>\n            </TableRow>\n          ) : (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                className={cn(\n                  onRowClick && 'cursor-pointer hover:bg-muted/50',\n                  'transition-colors',\n                )}\n                onClick={() => onRowClick?.(row.original)}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const meta = cell.column.columnDef.meta as {\n                    column: Column<Item>;\n                  };\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className=\"text-left\"\n                      style={{\n                        width: meta.column.width,\n                        minWidth: meta.column.width,\n                        maxWidth: meta.column.width,\n                      }}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/shared/data-table.tsx"
    },
    {
      "path": "src/components/auth0/shared/form-actions.tsx",
      "content": "/**\n * Form action buttons component.\n * @module form-actions\n * @internal\n */\n\nimport type { ActionButton } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { cn } from '@/lib/utils';\n\nexport interface FormActionsProps<T = void> {\n  hasUnsavedChanges?: boolean;\n  isLoading?: boolean;\n  nextAction?: Partial<ActionButton<T>>;\n  previousAction?: Partial<ActionButton<T>>;\n  showPrevious?: boolean;\n  showNext?: boolean;\n  showUnsavedChanges?: boolean;\n  align?: 'left' | 'right';\n  className?: string;\n  unsavedChangesText?: string;\n}\n\nconst DEFAULT_NEXT_ACTION: ActionButton = {\n  type: 'submit',\n  label: 'Save',\n  variant: 'primary',\n  onClick: () => {},\n};\n\nconst DEFAULT_PREVIOUS_ACTION: ActionButton = {\n  label: 'Cancel',\n  variant: 'outline',\n  onClick: () => {},\n};\n\nexport const FormActions: React.FC<FormActionsProps> = ({\n  hasUnsavedChanges = false,\n  isLoading = false,\n  nextAction,\n  previousAction,\n  className,\n  showPrevious = true,\n  showNext = true,\n  showUnsavedChanges = true,\n  align = 'right',\n  unsavedChangesText = 'Unsaved changes',\n}) => {\n  const nextButtonProps = React.useMemo(\n    () => ({ ...DEFAULT_NEXT_ACTION, ...nextAction }),\n    [nextAction],\n  );\n\n  const previousButtonProps = React.useMemo(\n    () => ({ ...DEFAULT_PREVIOUS_ACTION, ...previousAction }),\n    [previousAction],\n  );\n\n  const handleNextClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      nextButtonProps.onClick(e.nativeEvent);\n    },\n    [nextButtonProps.onClick],\n  );\n\n  const handlePreviousClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      previousButtonProps.onClick(e.nativeEvent);\n    },\n    [previousButtonProps.onClick],\n  );\n\n  const showUnsavedIndicator = showUnsavedChanges && hasUnsavedChanges;\n  const isPreviousVisible = showUnsavedChanges ? showPrevious && hasUnsavedChanges : showPrevious;\n\n  return (\n    <div\n      className={cn(\n        'flex flex-row items-center gap-2 p-2',\n        align === 'right' ? 'justify-end' : 'justify-start',\n        className,\n      )}\n    >\n      {showUnsavedIndicator && (\n        <span className=\"text-sm text-muted-foreground\">{unsavedChangesText}</span>\n      )}\n\n      {showPrevious && (\n        <Button\n          type=\"button\"\n          variant={previousButtonProps.variant}\n          size={previousButtonProps.size}\n          onClick={handlePreviousClick}\n          disabled={\n            previousButtonProps.disabled || isLoading || (showUnsavedChanges && !hasUnsavedChanges)\n          }\n          className={cn(\n            'FormActions-previous',\n            showUnsavedChanges && !isPreviousVisible && 'invisible',\n          )}\n          aria-hidden={showUnsavedChanges && !isPreviousVisible}\n          tabIndex={isPreviousVisible ? 0 : -1}\n        >\n          {previousButtonProps.label}\n        </Button>\n      )}\n\n      {showNext && (\n        <Button\n          type={nextButtonProps.type}\n          variant={nextButtonProps.variant}\n          size={nextButtonProps.size}\n          disabled={nextButtonProps.disabled || isLoading}\n          className=\"FormActions-next min-w-17.5\"\n          {...(nextButtonProps.type !== 'submit' && { onClick: handleNextClick })}\n        >\n          {isLoading ? (\n            <Spinner\n              colorScheme={nextButtonProps.variant === 'destructive' ? 'primary' : 'foreground'}\n              size=\"sm\"\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <>\n              {nextButtonProps.icon && (\n                <span className=\"mr-2\" aria-hidden=\"true\">\n                  {nextButtonProps.icon as React.ReactNode}\n                </span>\n              )}\n              {nextButtonProps.label}\n            </>\n          )}\n        </Button>\n      )}\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/auth0/shared/form-actions.tsx"
    },
    {
      "path": "src/components/auth0/shared/gate-keeper/gate-keeper.tsx",
      "content": "/**\n * GateKeeper component for guarding content during loading, MFA step-up, and 5xx error states.\n * @module gate-keeper\n * @internal\n */\n\nimport {\n  type ComponentStyling,\n  getComponentStyles,\n  getStatusCode,\n  isMfaRequiredError,\n} from '@auth0/universal-components-core';\nimport { RefreshCcw } from 'lucide-react';\nimport React, { useCallback, useMemo, useState, useEffect } from 'react';\n\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardFooter, CardTitle } from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { useGateKeeperContext } from '@/providers/gate-keeper-context';\n\ninterface GateKeeperProps {\n  styling?: ComponentStyling<Record<string, string>>;\n  isLoading?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Blocking error fallback with retry button.\n * Shown for 5xx errors and dismissed MFA errors.\n *\n * @param props - Component props.\n * @param props.onRetry - Retry handler.\n * @returns Error fallback element.\n * @internal\n */\nfunction ErrorFallback({ onRetry, isMfa }: { onRetry: () => void; isMfa?: boolean }) {\n  const { t } = useTranslator('gate_keeper');\n  const key = isMfa ? 'mfa_error' : 'fallback';\n\n  return (\n    <Card className=\"text-center\">\n      <CardContent className=\"flex flex-col items-center gap-2\">\n        <CardTitle>{t(`${key}.title`)}</CardTitle>\n        <CardDescription>{t(`${key}.description`)}</CardDescription>\n      </CardContent>\n      {!isMfa && (\n        <CardFooter className=\"justify-center\">\n          <Button variant=\"primary\" size=\"default\" onClick={onRetry}>\n            <RefreshCcw className=\"size-4\" />\n            {t('fallback.retry')}\n          </Button>\n        </CardFooter>\n      )}\n    </Card>\n  );\n}\n\n/**\n * Guards children from rendering during loading/error states. MFA step-up overlays\n * children without unmounting them, preserving any in-progress form state.\n * - Loading → spinner (blocks children)\n * - MFA required error → MFA step-up dialog overlaid on children\n * - 5xx error or dismissed MFA → blocking error fallback with retry\n * - No error → children\n *\n * @param props - Component props.\n * @param props.styling - Styling configuration forwarded to the styled scope.\n * @param props.isLoading - Whether content is loading.\n * @param props.children - Child elements to render on success.\n * @returns GateKeeper element.\n */\nexport function GateKeeper({ styling, isLoading, children }: GateKeeperProps) {\n  const { error, onRetry } = useGateKeeperContext();\n  const { coreClient } = useCoreClient();\n  const { isDarkMode } = useTheme();\n  const [isRetrying, setIsRetrying] = useState(false);\n\n  const styles = useMemo(() => getComponentStyles(styling, isDarkMode), [styling, isDarkMode]);\n\n  const handleRetry = useCallback(async () => {\n    setIsRetrying(true);\n    try {\n      await onRetry?.();\n    } finally {\n      setIsRetrying(false);\n    }\n  }, [onRetry]);\n\n  const isMfaStepUp = isMfaRequiredError(error);\n  const statusCode = getStatusCode(error);\n  const isSystemError = !!error && !!statusCode && statusCode >= 500;\n\n  useEffect(() => {\n    if (isMfaStepUp && coreClient && !coreClient.isProxyMode()) {\n      console.warn(\n        `🚨 [Auth0 Components Warning]: A step-up authentication (MFA) was triggered, but the interactiveErrorHandler is not configured.\\n\\nTo enable Universal Login redirects for MFA step-up, login required, or consent errors, please update your configuration:\\n\\n<Auth0Provider\\n  ...\\n  interactiveErrorHandler=\"popup\"\\n>\\n\\nFor more details, refer to the Auth0 Documentation.`,\n      );\n    }\n  }, [isMfaStepUp, coreClient]);\n\n  if (isLoading || isRetrying) {\n    return (\n      <StyledScope style={styles.variables}>\n        <div className=\"flex items-center justify-center p-8\">\n          <Spinner />\n        </div>\n      </StyledScope>\n    );\n  }\n\n  if (isSystemError || isMfaStepUp) {\n    return (\n      <StyledScope style={styles.variables}>\n        <ErrorFallback onRetry={handleRetry} isMfa={isMfaStepUp} />\n      </StyledScope>\n    );\n  }\n\n  return <StyledScope style={styles.variables}>{children}</StyledScope>;\n}\n",
      "type": "registry:component",
      "target": "components/auth0/shared/gate-keeper/gate-keeper.tsx"
    },
    {
      "path": "src/components/auth0/shared/header.tsx",
      "content": "/**\n * Section header with actions.\n * @module header\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport { ArrowLeft } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface TooltipProps {\n  content: React.ReactNode | string;\n}\n\nexport interface WithTooltipProps {\n  trigger: React.ReactNode | string;\n  tooltip: TooltipProps;\n}\n\nexport interface BaseActionProps extends Omit<CoreActionButton, 'icon' | 'onClick'> {\n  icon?: LucideIcon;\n  className?: string;\n  hidden?: boolean;\n  tooltip?: TooltipProps;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n  type: 'button';\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface SwitchActionProps extends Omit<BaseActionProps, 'type' | 'label'> {\n  type: 'switch';\n  checked?: boolean;\n  onCheckedChange: (checked: boolean) => void;\n  'aria-label'?: string;\n}\n\nexport type ActionProps = ButtonActionProps | SwitchActionProps;\n\nexport interface HeaderProps {\n  title?: string;\n  description?: string;\n  backButton?: {\n    text?: string;\n    icon?: LucideIcon;\n    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  };\n  actions?: ActionProps[];\n  isLoading?: boolean;\n  className?: string;\n}\n\nconst WithTooltip: React.FC<WithTooltipProps> = ({ trigger, tooltip }) => (\n  <>\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <div>{trigger}</div>\n      </TooltipTrigger>\n      <TooltipContent>{tooltip.content}</TooltipContent>\n    </Tooltip>\n  </>\n);\n\nconst ButtonAction: React.FC<ButtonActionProps> = ({\n  icon: Icon,\n  className,\n  label,\n  onClick,\n  disabled,\n  variant,\n  size,\n}) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    variant={variant}\n    size={size}\n    className={cn('flex items-center gap-2 w-full sm:w-auto sm:min-w-fit', className)}\n    aria-label={label}\n  >\n    {Icon && <Icon className=\"h-4 w-4 flex-shrink-0\" aria-hidden=\"true\" />}\n    <span className=\"truncate\">{label}</span>\n  </Button>\n);\n\nconst SwitchAction: React.FC<SwitchActionProps> = ({\n  className,\n  'aria-label': ariaLabel,\n  checked,\n  onCheckedChange,\n  disabled,\n}) => (\n  <div className={cn('flex items-center gap-2', className)}>\n    <Switch\n      checked={checked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      aria-label={ariaLabel}\n    />\n  </div>\n);\n\nexport const Header = React.forwardRef<\n  HTMLDivElement,\n  HeaderProps & React.HTMLAttributes<HTMLDivElement>\n>(({ title, description, backButton, actions, isLoading, className, ...props }, ref) => {\n  const BackIcon = backButton?.icon || ArrowLeft;\n\n  const renderAction = (action: ActionProps, index: number) => {\n    const key = `action-${index}`;\n    if (isLoading) {\n      return <Spinner key={`spinner-${key}`} className=\"w-4 h-4\" />;\n    }\n    if (action.hidden) {\n      return null;\n    }\n    const actionElement =\n      action.type === 'switch' ? (\n        <SwitchAction key={key} {...action} />\n      ) : (\n        <ButtonAction key={key} {...action} />\n      );\n    if (action.tooltip) {\n      return (\n        <WithTooltip key={`tooltip-${key}`} trigger={actionElement} tooltip={action.tooltip} />\n      );\n    }\n    return actionElement;\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn('w-full mb-8', className)}\n      role=\"banner\"\n      aria-label={title ? `${title} header` : 'Header'}\n      {...props}\n    >\n      {backButton && (\n        <Button\n          variant=\"link\"\n          onClick={backButton.onClick}\n          size=\"default\"\n          className=\"flex items-center text-sm mb-3\"\n          aria-label={backButton.text || 'Go back'}\n        >\n          <BackIcon className=\"h-4 w-4\" aria-hidden=\"true\" />\n          {backButton.text && <span>{backButton.text}</span>}\n        </Button>\n      )}\n\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col min-w-0 flex-1\">\n          {title && (\n            <h1\n              className={cn(\n                'text-xl sm:text-2xl text-primary md:text-4xl font-bold leading-tight break-words text-left text-(length:--font-size-page-header) mb-0',\n              )}\n            >\n              {title}\n            </h1>\n          )}\n          {description && (\n            <p\n              className={cn(\n                'text-base text-muted-foreground leading-relaxed break-words text-left text-(length:--font-size-page-description) mt-2',\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </div>\n\n        {actions && actions.length > 0 && (\n          <div className=\"flex-shrink-0 flex items-start gap-2 mt-1\">\n            {actions.map(renderAction)}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nHeader.displayName = 'Header';\n",
      "type": "registry:component",
      "target": "components/auth0/shared/header.tsx"
    },
    {
      "path": "src/components/auth0/shared/middle-ellipsis-text.tsx",
      "content": "import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * Props for the `MiddleEllipsisText` component.\n */\nexport interface MiddleEllipsisTextProps {\n  /**\n   * Full text value to render and truncate from the middle when needed.\n   */\n  text: string;\n  /**\n   * Optional class names applied to the text container.\n   */\n  className?: string;\n}\n\n/**\n * Truncates text by preserving both the start and end segments and inserting\n * an ellipsis in the middle when the measured width exceeds the available width.\n *\n * @param text Full source text.\n * @param availableWidth Maximum width available for rendering in pixels.\n * @param font Canvas font shorthand used for text measurement.\n * @returns The display string and whether truncation was applied.\n */\nfunction calculateTruncatedText(\n  text: string,\n  availableWidth: number,\n  font: string,\n): { truncated: string; isTruncated: boolean } {\n  if (!text || availableWidth <= 0) {\n    return { truncated: text, isTruncated: false };\n  }\n\n  // Create a canvas element for text measurement\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) {\n    return { truncated: text, isTruncated: false };\n  }\n\n  context.font = font;\n  const ellipsis = '...';\n  const fullWidth = context.measureText(text).width;\n\n  // If text fits, return as-is\n  if (fullWidth <= availableWidth) {\n    return { truncated: text, isTruncated: false };\n  }\n\n  const ellipsisWidth = context.measureText(ellipsis).width;\n  const targetWidth = availableWidth - ellipsisWidth;\n\n  if (targetWidth <= 0) {\n    return { truncated: ellipsis, isTruncated: true };\n  }\n\n  // Binary search for optimal split point\n  let start = 0;\n  let end = text.length;\n  let bestStart = 0;\n  let bestEnd = text.length;\n\n  while (start <= end) {\n    const mid = Math.floor((start + end) / 2);\n    const leftPart = text.substring(0, mid);\n    const rightPart = text.substring(text.length - mid);\n    const combinedWidth =\n      context.measureText(leftPart).width + context.measureText(rightPart).width;\n\n    if (combinedWidth <= targetWidth) {\n      bestStart = mid;\n      bestEnd = text.length - mid;\n      start = mid + 1;\n    } else {\n      end = mid - 1;\n    }\n  }\n\n  const truncated = text.substring(0, bestStart) + ellipsis + text.substring(bestEnd);\n  return { truncated, isTruncated: true };\n}\n\n/**\n * Renders text that truncates in the middle (`abc...xyz`) based on the\n * container width while preserving both the prefix and suffix.\n *\n * A tooltip with the original text is provided when truncation occurs.\n */\nexport const MiddleEllipsisText = React.memo(\n  React.forwardRef<HTMLSpanElement, MiddleEllipsisTextProps>(({ text, className }, ref) => {\n    const [displayText, setDisplayText] = React.useState(text);\n    const [isTruncated, setIsTruncated] = React.useState(false);\n    const containerRef = React.useRef<HTMLSpanElement>(null);\n    const rafIdRef = React.useRef<number | null>(null);\n\n    React.useImperativeHandle(ref, () => containerRef.current!);\n\n    const updateTruncation = React.useCallback(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const computedStyle = window.getComputedStyle(container);\n      const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;\n      const availableWidth = container.offsetWidth;\n\n      const { truncated, isTruncated: truncated_flag } = calculateTruncatedText(\n        text,\n        availableWidth,\n        font,\n      );\n\n      setDisplayText(truncated);\n      setIsTruncated(truncated_flag);\n    }, [text]);\n\n    // Update truncation on mount/text change and observe resize\n    React.useEffect(() => {\n      updateTruncation();\n\n      const container = containerRef.current;\n      let resizeObserver: ResizeObserver | null = null;\n\n      if (container) {\n        resizeObserver = new ResizeObserver(() => {\n          if (rafIdRef.current !== null) {\n            cancelAnimationFrame(rafIdRef.current);\n          }\n          rafIdRef.current = requestAnimationFrame(() => {\n            updateTruncation();\n          });\n        });\n\n        resizeObserver.observe(container);\n      }\n\n      return () => {\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n          rafIdRef.current = null;\n        }\n        resizeObserver?.disconnect();\n      };\n    }, [updateTruncation]);\n\n    return (\n      <span\n        ref={containerRef}\n        className={cn('block min-w-0', className)}\n        title={isTruncated ? text : undefined}\n      >\n        {displayText}\n      </span>\n    );\n  }),\n);\n",
      "type": "registry:component",
      "target": "components/auth0/shared/middle-ellipsis-text.tsx"
    },
    {
      "path": "src/components/auth0/shared/sonner.tsx",
      "content": "/**\n * Sonner toast provider wrapper.\n * @module sonner\n * @internal\n */\n\n'use client';\n\nimport type { ToasterProps } from 'sonner';\nimport { Toaster as Sonner } from 'sonner';\n\nimport { useTheme } from '@/hooks/shared/use-theme';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { isDarkMode } = useTheme();\n  const theme = isDarkMode ? 'dark' : 'light';\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      className=\"toaster group\"\n      toastOptions={{\n        style: {\n          width: 'fit-content',\n          maxWidth: '22.25rem',\n        },\n      }}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n",
      "type": "registry:component",
      "target": "components/auth0/shared/sonner.tsx"
    },
    {
      "path": "src/components/auth0/shared/styled-scope.tsx",
      "content": "/**\n * Auth0Scope component — CSS scope root and portal container for lib components.\n * @module auth0-scope\n * @internal\n */\n\n'use client';\n\nimport { getCoreStyles } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { ThemeContext } from '@/providers/theme-provider';\n\nexport interface StyledScopeProps {\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * CSS scope root for lib components. Handles dark-mode class and theme attribute.\n *\n * @param props - Component props.\n * @param props.children - Content to render inside the scope root.\n * @param props.style - Optional inline CSS styles\n * @returns A scoped wrapper div with dark-mode and theme attributes applied.\n * @internal\n */\nexport const StyledScope: React.FC<StyledScopeProps> = ({ children, style }) => {\n  const { theme = 'default', isDarkMode, variables } = React.useContext(ThemeContext);\n\n  const mergedStyle = React.useMemo(() => {\n    const providerVars = getCoreStyles(variables, isDarkMode).variables;\n    return { ...providerVars, ...style };\n  }, [variables, isDarkMode, style]);\n\n  return (\n    <div\n      className={cn('auth0-universal', isDarkMode && 'dark')}\n      data-theme={theme}\n      style={mergedStyle}\n    >\n      {children}\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/auth0/shared/styled-scope.tsx"
    },
    {
      "path": "src/components/auth0/shared/toast.tsx",
      "content": "/**\n * Toast notification utilities.\n * @module toast\n * @internal\n */\n\nimport { Flag } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { toast, type ExternalToast } from 'sonner';\n\nimport { DEFAULT_TOAST_SETTINGS } from '@/types/toast-types';\nimport type { ToastOptions, ToastSettings, ToastType } from '@/types/toast-types';\n\nconst TOAST_COLOR_CLASSES: Record<ToastType, string> = {\n  success: 'text-success-foreground',\n  error: 'text-destructive-foreground',\n  warning: 'text-warning-foreground',\n  info: 'text-info-foreground',\n} as const;\n\nconst VALID_TOAST_TYPES: ToastType[] = ['success', 'error', 'warning', 'info'] as const;\n\nconst BASE_TOAST_Z_INDEX = 1000;\nlet toastZIndexCounter = 0;\nconst MAX_Z_INDEX_COUNTER = 1000;\nconst activeToastIds = new Set<string | number | unknown>();\n\n/**\n * Resets the z-index counter if no active toasts remain\n */\nconst resetCounterIfEmpty = (): void => {\n  if (activeToastIds.size === 0) {\n    toastZIndexCounter = 0;\n  }\n};\n\n/**\n * Removes a toast from tracking and resets counter if needed\n * @param toastId - The toast ID to remove, or undefined to clear all\n */\nconst removeToastFromTracking = (toastId?: string | number | unknown): void => {\n  if (toastId !== undefined && toastId !== null) {\n    activeToastIds.delete(toastId);\n  } else {\n    activeToastIds.clear();\n  }\n  resetCounterIfEmpty();\n};\n\nlet globalToastSettings: ToastSettings = {\n  ...DEFAULT_TOAST_SETTINGS,\n};\n\n/**\n * Sets global toast configuration. Called by Auth0ComponentProvider.\n * @param settings - Settings configuration\n * @internal\n */\nexport const setGlobalToastSettings = (settings?: ToastSettings): void => {\n  if (!settings) {\n    globalToastSettings = {\n      ...DEFAULT_TOAST_SETTINGS,\n    };\n    return;\n  }\n\n  globalToastSettings = {\n    ...settings,\n  };\n\n  if (settings.provider === 'custom') {\n    const { methods } = settings;\n    const availableMethods = Object.keys(methods);\n\n    if (availableMethods.length === 0) {\n      console.warn(\n        'Auth0ComponentProvider: Custom toast provider specified but no custom methods provided',\n      );\n    }\n\n    availableMethods.forEach((method) => {\n      if (typeof methods[method as keyof typeof methods] !== 'function') {\n        console.warn(`Auth0ComponentProvider: Custom toast method '${method}' is not a function`);\n      }\n    });\n  }\n};\n\n/**\n * Gets the current global toast configuration.\n * @returns The current toast settings\n */\nexport const getGlobalToastSettings = (): ToastSettings => globalToastSettings;\n\n/**\n * Creates a styled message element with appropriate color classes.\n * @param type - The toast type for styling\n * @param message - The message text to style\n * @returns A React element with styled text\n */\nconst createStyledMessage = (type: ToastType, message: string): ReactNode => {\n  const colorClass = TOAST_COLOR_CLASSES[type];\n  return <span className={colorClass}>{message}</span>;\n};\n\n/**\n * Creates a default icon for the toast based on its type.\n * @param type - The toast type to create an icon for\n * @returns A React element with a styled Flag icon\n */\nconst createDefaultIcon = (type: ToastType): ReactNode => {\n  const colorClass = TOAST_COLOR_CLASSES[type];\n  return <Flag className={`h-4 w-4 ${colorClass}`} aria-hidden=\"true\" />;\n};\n\n/**\n * Shows a toast notification using the configured provider.\n *\n * @param options - The toast configuration options\n * @param options.type - The type of toast ('success', 'error', 'info', 'warning', 'loading')\n * @param options.message - The message to display in the toast\n * @param options.className - Optional CSS class name for custom styling\n * @param options.icon - Optional custom icon to display\n * @param options.data - Additional options passed to the toast provider\n * @returns The toast instance ID or result from custom method\n */\nexport const showToast = ({\n  type,\n  message,\n  className,\n  icon,\n  data = {},\n}: ToastOptions): string | number | void => {\n  if (!message?.trim()) {\n    console.warn('showToast: Empty message provided');\n    return;\n  }\n\n  if (!VALID_TOAST_TYPES.includes(type)) {\n    console.error(\n      `showToast: Invalid toast type '${type}'. Must be one of: ${VALID_TOAST_TYPES.join(', ')}`,\n    );\n    return;\n  }\n\n  if (globalToastSettings.provider === 'custom' && globalToastSettings.methods[type]) {\n    try {\n      // Custom methods only receive the message - they handle their own configuration\n      return globalToastSettings.methods[type]!(message);\n    } catch (error) {\n      console.error(`showToast: Error in custom ${type} method:`, error);\n    }\n  }\n\n  const styledMessage = createStyledMessage(type, message);\n  const defaultIcon = icon || createDefaultIcon(type);\n\n  const currentZIndex = BASE_TOAST_Z_INDEX + toastZIndexCounter;\n  toastZIndexCounter += 1;\n\n  if (toastZIndexCounter >= MAX_Z_INDEX_COUNTER) {\n    toastZIndexCounter = 0;\n  }\n\n  const toastOptions: ExternalToast = {\n    className,\n    icon: defaultIcon,\n    style: {\n      zIndex: currentZIndex,\n    },\n    onDismiss: (toastId) => {\n      removeToastFromTracking(toastId);\n    },\n    ...data,\n  };\n\n  try {\n    const toastId = toast[type](styledMessage, toastOptions);\n    if (toastId) {\n      activeToastIds.add(toastId);\n    }\n    return toastId;\n  } catch (error) {\n    console.error(`showToast: Error showing ${type} toast:`, error);\n    return toast(message);\n  }\n};\n\n/**\n * Dismisses a toast notification by ID, or dismisses all toasts if no ID is provided.\n *\n * @param toastId - Optional toast ID to dismiss. If not provided, dismisses all toasts.\n */\nexport const dismissToast = (toastId?: string | number): void => {\n  if (globalToastSettings.provider === 'custom' && globalToastSettings.methods.dismiss) {\n    try {\n      globalToastSettings.methods.dismiss(toastId?.toString());\n    } catch (error) {\n      console.error('dismissToast: Error in custom dismiss method:', error);\n    }\n    return;\n  }\n\n  toast.dismiss(toastId);\n\n  removeToastFromTracking(toastId);\n};\n",
      "type": "registry:component",
      "target": "components/auth0/shared/toast.tsx"
    },
    {
      "path": "src/components/ui/alert.tsx",
      "content": "/**\n * Alert component with status variants.\n * @module alert\n * @internal\n */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst alertVariants = cva(\n  'shadow-input-hover bg-input relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 overflow-clip rounded-3xl p-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n  {\n    variants: {\n      variant: {\n        default: 'text-foreground border-b-2 border-transparent',\n        info: 'text-info-foreground [&>svg]:text-info-foreground',\n        success: 'text-success-foreground [&>svg]:text-success-foreground',\n        warning: 'text-warning-foreground [&>svg]:text-warning-foreground',\n        destructive: 'text-destructive-foreground [&>svg]:text-destructive-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        'col-start-2 line-clamp-1 flex h-auto min-h-4 leading-4.5 font-medium tracking-tight',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('absolute top-2 right-2 flex items-center space-x-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n",
      "type": "registry:component",
      "target": "components/ui/alert.tsx"
    },
    {
      "path": "src/components/ui/badge.tsx",
      "content": "/**\n * Badge component with variants.\n * @module badge\n * @internal\n */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n  'theme-default:shadow-xs box-border inline-flex items-center overflow-clip rounded-2xl border border-transparent font-medium',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground theme-default:border-primary',\n        secondary: 'bg-muted text-muted-foreground theme-default:border-muted-foreground/25',\n        outline: 'border-border',\n        info: 'bg-info text-info-foreground theme-default:border-info-foreground/25',\n        success: 'bg-success theme-default:border-success-foreground/25 text-success-foreground',\n        warning: 'bg-warning theme-default:border-warning-foreground/25 text-warning-foreground',\n        destructive:\n          'bg-destructive theme-default:border-destructive-foreground/25 text-destructive-foreground',\n      },\n      size: {\n        sm: 'px-1.5 py-0.5 text-xs',\n        md: 'px-2 py-1 text-sm',\n        lg: 'px-2.5 py-1.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n",
      "type": "registry:component",
      "target": "components/ui/badge.tsx"
    },
    {
      "path": "src/components/ui/button.tsx",
      "content": "/**\n * Button component with variants.\n * @module button\n * @internal\n */\n\n'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n  \"focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden text-sm font-medium whitespace-nowrap transition-all duration-150 ease-in-out outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"shadow-button-resting hover:shadow-button-hover hover:border-primary/50 border-primary bg-primary text-primary-foreground hover:bg-primary/90 theme-default:before:from-primary-foreground/0 theme-default:before:to-primary-foreground/15 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border\",\n        outline:\n          \"dark:bg-muted/50 hover:text-accent-foreground shadow-button-outlined-resting hover:shadow-button-outlined-hover hover:border-accent bg-background hover:bg-muted text-primary border-primary/35 theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border\",\n        ghost: 'hover:bg-muted text-primary bg-transparent',\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-button-destructive-resting hover:shadow-button-destructive-hover border-destructive-border/25 hover:border-destructive-border/50 theme-default:before:to-primary-foreground/50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] theme-default:border\",\n        link: 'text-foreground underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3',\n        xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2',\n        sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5',\n        lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4',\n        icon: 'size-7 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  as?: boolean;\n}\n\nfunction Button({\n  className,\n  variant,\n  size,\n  as,\n  ...props\n}: React.ComponentProps<'button'> & ButtonProps) {\n  const Comp = as ? Slot : 'button';\n\n  return <Comp className={cn(buttonVariants({ variant, size }), className)} {...props} />;\n}\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component",
      "target": "components/ui/button.tsx"
    },
    {
      "path": "src/components/ui/card.tsx",
      "content": "/**\n * Card layout component.\n * @module card\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'bg-card text-card-foreground shadow-bevel-2xl flex flex-col gap-6 rounded-4xl py-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('px-6', className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n",
      "type": "registry:component",
      "target": "components/ui/card.tsx"
    },
    {
      "path": "src/components/ui/checkbox.tsx",
      "content": "/**\n * Checkbox component using Radix primitives.\n * @module checkbox\n * @internal\n */\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'group shadow-checkbox-resting peer hover:shadow-checkbox-hover focus-visible:ring-ring hover:border-primary/50 border-border data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative flex size-6 shrink-0 appearance-none items-center justify-center rounded-lg border transition-[colors,shadow] duration-150 ease-in-out outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group-data-[state=checked]:animate-in group-data-[state=unchecked]:animate-out group-data-[state=unchecked]:fade-out-0 group-data-[state=checked]:fade-in-0 group-data-[state=unchecked]:slide-out-to-bottom-5 group-data-[state=unchecked]:zoom-out-75 group-data-[state=checked]:zoom-in-75 group-data-[state=checked]:slide-in-from-bottom-5 text-primary-foreground stroke-primary-foreground duration-150 ease-in-out group-data-[state=checked]:block\"\n      >\n        {props.checked === 'indeterminate' ? (\n          <MinusIcon className=\"size-3 stroke-[4px]\" absoluteStrokeWidth />\n        ) : (\n          <CheckIcon className=\"size-3 stroke-[4px]\" absoluteStrokeWidth />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n",
      "type": "registry:component",
      "target": "components/ui/checkbox.tsx"
    },
    {
      "path": "src/components/ui/dialog.tsx",
      "content": "/**\n * Dialog component using Radix primitives.\n * @module dialog\n * @internal\n */\n\n'use client';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  const { children, asChild = false, ...elementProps } = props;\n\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...(typeof children.props === 'object' ? children.props : {}),\n      ...elementProps,\n    });\n  }\n\n  return (\n    <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" asChild {...props}>\n      <Button {...elementProps} data-slot=\"dialog-trigger\">\n        {children}\n      </Button>\n    </DialogPrimitive.Trigger>\n  );\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  const portalContainer = usePortalContainer();\n  return (\n    <DialogPrimitive.Portal container={portalContainer} data-slot=\"dialog-portal\" {...props} />\n  );\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  const { children } = props;\n\n  return (\n    <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n      <Button variant=\"outline\" data-slot=\"dialog-close\">\n        {children}\n      </Button>\n    </DialogPrimitive.Close>\n  );\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 duration-200 ease-in-out',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-bevel-2xl rounded-5xl fixed top-[50%] left-[50%] z-[999] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 ease-in-out sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            asChild\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background absolute top-4 right-4\"\n          >\n            <Button variant=\"ghost\" size=\"icon\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex flex-row gap-2 justify-end', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg text-primary leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
      "type": "registry:component",
      "target": "components/ui/dialog.tsx"
    },
    {
      "path": "src/components/ui/dropdown-menu.tsx",
      "content": "/**\n * Dropdown menu using Radix primitives.\n * @module dropdown-menu\n * @internal\n */\n\n'use client';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { VariantProps } from 'class-variance-authority';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button, buttonVariants } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  const portalContainer = usePortalContainer();\n  return (\n    <DropdownMenuPrimitive.Portal\n      container={portalContainer}\n      data-slot=\"dropdown-menu-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> &\n  VariantProps<typeof buttonVariants>) {\n  return (\n    <DropdownMenuPrimitive.Trigger asChild {...props}>\n      <Button\n        data-slot=\"dropdown-menu-trigger\"\n        className={cn(buttonVariants({ variant, size }), className)}\n      >\n        {props.children}\n      </Button>\n    </DropdownMenuPrimitive.Trigger>\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {\n  sideOffset?: number;\n}) {\n  const portalContainer = usePortalContainer();\n  return (\n    <DropdownMenuPrimitive.Portal container={portalContainer}>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-xl z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-2xl p-1 outline-none',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"dropdown-menu-group\" className={className} {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-muted hover:bg-muted/50 focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xl px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-muted hover:bg-muted/50 focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xl py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-muted hover:bg-muted/50 focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xl py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<'div'> & {\n  inset?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('bg-border mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        'focus:bg-muted hover:bg-muted/50 focus:text-accent-foreground flex w-full cursor-default items-center rounded-xl px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-xl z-50 min-w-[8rem] overflow-hidden rounded-2xl p-1 outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n",
      "type": "registry:component",
      "target": "components/ui/dropdown-menu.tsx"
    },
    {
      "path": "src/components/ui/form.tsx",
      "content": "/**\n * Form components with react-hook-form integration.\n * @module form\n * @internal\n */\n\n'use client';\n\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nconst Form: typeof FormProvider = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller\n        {...props}\n        render={({ field, fieldState, formState }) => {\n          const { onChange, onBlur, ...rest } = field;\n          return props.render({\n            field: {\n              ...rest,\n              onChange: (...args: unknown[]) => {\n                onChange(...(args as Parameters<typeof onChange>));\n              },\n              onBlur: (...args: unknown[]) => {\n                onBlur(...(args as Parameters<typeof onBlur>));\n              },\n            },\n            fieldState,\n            formState,\n          });\n        }}\n      />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn('grid gap-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn('data-[error=true]:text-destructive-foreground', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn('text-destructive-foreground text-sm', className)}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n",
      "type": "registry:component",
      "target": "components/ui/form.tsx"
    },
    {
      "path": "src/components/ui/inline-code.tsx",
      "content": "/**\n * Inline code display component.\n * @module inline-code\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n  return (\n    <code\n      className={cn(\n        'bg-background theme-default:shadow-input-resting theme-default:bg-secondary shadow-bevel-xs relative rounded-lg px-[0.35rem] py-[0.2rem] font-mono text-sm font-medium tracking-tight',\n        className,\n      )}\n    >\n      {children}\n    </code>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/ui/inline-code.tsx"
    },
    {
      "path": "src/components/ui/label.tsx",
      "content": "/**\n * Form label component.\n * @module label\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n  return (\n    <label\n      className={cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </label>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/ui/label.tsx"
    },
    {
      "path": "src/components/ui/modal.tsx",
      "content": "/**\n * Modal dialog wrapper component.\n * @module modal\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { FormActions, type FormActionsProps } from '@/components/auth0/shared/form-actions';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n} from '@/components/ui/dialog';\n\ninterface ModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title?: string;\n  description?: string;\n  content?: React.ReactNode;\n  modalActions?: FormActionsProps;\n  className?: string;\n  showCloseButton?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  content,\n  modalActions,\n  className,\n  showCloseButton,\n}) => {\n  const hasHeader = title || description;\n\n  const actions: FormActionsProps = {\n    hasUnsavedChanges: true,\n    showPrevious: true,\n    showUnsavedChanges: false,\n    previousAction: {\n      label: 'Cancel',\n      variant: 'outline',\n      onClick: () => onOpenChange(false),\n    },\n    nextAction: {\n      label: 'Confirm',\n      variant: 'primary',\n      onClick: () => onOpenChange(false),\n    },\n    ...modalActions,\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className={className} showCloseButton={showCloseButton}>\n        {hasHeader && (\n          <DialogHeader>\n            {title && <DialogTitle>{title}</DialogTitle>}\n            {description && <DialogDescription>{description}</DialogDescription>}\n          </DialogHeader>\n        )}\n\n        {content && <div className=\"py-4\">{content}</div>}\n\n        <DialogFooter>\n          <FormActions {...actions} />\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nModal.displayName = 'Modal';\n",
      "type": "registry:component",
      "target": "components/ui/modal.tsx"
    },
    {
      "path": "src/components/ui/spinner.tsx",
      "content": "/**\n * Loading spinner component.\n * @module spinner\n * @internal\n */\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst spinnerVariants = cva(\n  'inline-block h-8 w-8 animate-spin rounded-full border-2 border-transparent',\n  {\n    variants: {\n      variant: {\n        solid: '!border-t-current',\n        dots: 'animate-[spin_5s_linear_infinite] border-6 border-dotted border-current',\n        pulse: 'animate-pulse bg-current',\n      },\n      size: {\n        sm: 'size-4',\n        md: 'size-8',\n        lg: 'size-12',\n      },\n      colorScheme: {\n        primary: 'text-primary',\n        foreground: 'text-primary-foreground',\n        muted: 'text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'md',\n      colorScheme: 'primary',\n    },\n  },\n);\n\nexport interface SpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {}\n\nexport function Spinner({ variant, size, colorScheme, className, ...props }: SpinnerProps) {\n  return (\n    <div className={cn(spinnerVariants({ variant, size, colorScheme }), className)} {...props}>\n      <span className=\"sr-only\">Loading...</span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/ui/spinner.tsx"
    },
    {
      "path": "src/components/ui/switch.tsx",
      "content": "/**\n * Toggle switch using Radix primitives.\n * @module switch\n * @internal\n */\n\n'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'theme-default:shadow-switch-resting data-[state=checked]:from-primary-foreground/0 data-[state=checked]:to-primary-foreground/25 from-primary-foreground/50 to-primary-foreground/0 [&]:bg-accent/50 hover:bg-accent/75 data-[state=checked]:hover:bg-primary theme-default:hover:shadow-switch-hover data-[state=checked]:bg-primary focus-visible:ring-ring focus-within:ring-ring relative h-7 w-[46px] rounded-full bg-gradient-to-l transition-all duration-150 ease-in-out focus-visible:ring-4 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'dark:bg-primary dark:shadow-switch-thumb-dark data-[state=checked]:dark:bg-background [&]:bg-background to-background/0 from-primary/5 shadow-switch-thumb data-[state=checked]:bg-background pointer-events-none absolute top-[4px] left-[4px] h-5 w-5 rounded-full bg-gradient-to-t transition-transform duration-150 ease-in-out data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
      "type": "registry:component",
      "target": "components/ui/switch.tsx"
    },
    {
      "path": "src/components/ui/table.tsx",
      "content": "/**\n * Table component with sorting support.\n * @module table\n * @internal\n */\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  className?: string;\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, ...props }, ref) => (\n  <div className=\"shadow-bevel-sm w-full overflow-clip rounded-2xl\">\n    <div className=\"overflow-x-auto\">\n      <table ref={ref} className={cn('w-full border-collapse table-fixed', className)} {...props} />\n    </div>\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn('bg-muted text-primary text-sm', className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />\n));\nTableBody.displayName = 'TableBody';\n\ninterface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  disableHover?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, disableHover, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        !disableHover && 'hover:bg-muted/50',\n        'border-border/50 border-b text-sm transition-colors',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\ninterface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  isSortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, children, isSortable, sortDirection, ...props }, ref) => {\n    const showSortIcon = isSortable !== undefined && sortDirection !== undefined;\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'hover:bg-accent/10 border-border/50 border-b px-4 py-2 text-left',\n          isSortable && 'group cursor-pointer select-none',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-1\">\n          {children}\n          {showSortIcon && (\n            <div className=\"ml-2 flex items-center\">\n              {sortDirection === false && (\n                <ChevronDownIcon className=\"text-muted-foreground h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100\" />\n              )}\n              {sortDirection === 'asc' && <ChevronUpIcon className=\"h-4 w-4\" />}\n              {sortDirection === 'desc' && <ChevronDownIcon className=\"h-4 w-4\" />}\n            </div>\n          )}\n        </div>\n      </th>\n    );\n  },\n);\nTableHead.displayName = 'TableHead';\n\ninterface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, ...props }, ref) => (\n    <td ref={ref} className={cn('px-4 py-2', className)} {...props} />\n  ),\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableColumn<T> {\n  header: string;\n  accessor: keyof T;\n  sortable?: boolean;\n}\n\nexport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };\n",
      "type": "registry:component",
      "target": "components/ui/table.tsx"
    },
    {
      "path": "src/components/ui/text-field.tsx",
      "content": "/**\n * Text input field with variants.\n * @module text-field\n * @internal\n */\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst textFieldVariants = cva(\n  \"bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 overflow-hidden rounded-2xl text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          'border-border/50 text-input-foreground shadow-input-resting hover:shadow-input-hover hover:border-primary/25 focus-within:border-border focus-within:ring-primary/15 focus-within:ring-4',\n        error:\n          'border-destructive-border/50 text-destructive-foreground shadow-input-destructive-resting hover:shadow-input-destructive-hover hover:border-destructive-border/25 focus-within:ring-destructive-border/15 focus-within:ring-4',\n      },\n      size: {\n        default: 'h-10',\n        sm: 'h-9',\n        lg: 'h-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  error?: boolean;\n  helperText?: string;\n  size?: VariantProps<typeof textFieldVariants>['size'];\n  variant?: VariantProps<typeof textFieldVariants>['variant'];\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    { className, variant, size, error, helperText, startAdornment, endAdornment, ...props },\n    ref,\n  ) => {\n    const isDisabled = props.disabled;\n\n    const WrapperComponent = props.id ? 'div' : 'label';\n\n    return (\n      <div className=\"flex w-full flex-col\">\n        <WrapperComponent\n          className={cn(\n            textFieldVariants({ variant: error ? 'error' : variant, size }),\n            'group items-center gap-0.5',\n            isDisabled &&\n              'bg-input-muted text-input-muted-foreground cursor-not-allowed opacity-50',\n            isDisabled && variant === 'default' && 'bg-input-muted',\n            startAdornment && 'pl-[5px]',\n            endAdornment && 'pr-[5px]',\n            className,\n          )}\n        >\n          {startAdornment && (\n            <div className=\"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n              {startAdornment}\n            </div>\n          )}\n          <input\n            className={cn(\n              'w-full flex-1 bg-transparent px-3 py-2 outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium',\n              isDisabled &&\n                'bg-input-muted text-input-muted-foreground cursor-not-allowed opacity-50',\n              startAdornment && 'pl-0',\n              endAdornment && 'pr-0',\n              size === 'default' && 'h-10',\n              size === 'sm' && 'h-9',\n              size === 'lg' && 'h-11',\n            )}\n            ref={ref}\n            {...props}\n          />\n          {endAdornment && (\n            <div className=\"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n              {endAdornment}\n            </div>\n          )}\n        </WrapperComponent>\n        {helperText && (\n          <p\n            className={cn(\n              'mt-1.5 px-2 text-xs',\n              error ? 'text-destructive-foreground' : 'text-muted-foreground',\n            )}\n          >\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField, textFieldVariants };\n",
      "type": "registry:component",
      "target": "components/ui/text-field.tsx"
    },
    {
      "path": "src/components/ui/tooltip.tsx",
      "content": "/**\n * Tooltip using Radix primitives.\n * @module tooltip\n * @internal\n */\n\n'use client';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nconst tooltipVariants = cva(\n  'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-lg z-50 w-fit rounded-xl px-2 py-1 text-sm text-balance',\n  {\n    variants: {\n      position: {\n        top: 'origin-bottom',\n        bottom: 'origin-top',\n        left: 'origin-left',\n        right: 'origin-right',\n      },\n    },\n    defaultVariants: {\n      position: 'top',\n    },\n  },\n);\n\nfunction Tooltip({ children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n\nfunction TooltipTrigger({\n  asChild = true,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger asChild={asChild} {...props} />;\n}\n\ninterface TooltipContentProps\n  extends React.ComponentProps<typeof TooltipPrimitive.Content>,\n    VariantProps<typeof tooltipVariants> {}\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, side = 'top', position, sideOffset = 8, children, ...props }, ref) => {\n  const portalContainer = usePortalContainer();\n  return (\n    <TooltipPrimitive.Portal container={portalContainer}>\n      <TooltipPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(tooltipVariants({ position: position || side }), className)}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"fill-popover\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n});\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, tooltipVariants };\n",
      "type": "registry:component",
      "target": "components/ui/tooltip.tsx"
    },
    {
      "path": "src/hooks/my-organization/use-domain-table-logic.ts",
      "content": "/**\n * Domain table UI logic hook.\n * @module use-domain-table-logic\n * @internal\n */\n\nimport { type Domain, type IdpKnownResponse } from '@auth0/universal-components-core';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { showToast } from '@/components/auth0/shared/toast';\nimport { useErrorHandler } from '@/hooks/shared/use-error-handler';\nimport type {\n  UseDomainTableLogicOptions,\n  UseDomainTableLogicResult,\n} from '@/types/my-organization/domain-management/domain-table-types';\n\n/**\n * Hook for domain table modal state and action handlers.\n * @param props - Component props.\n * @param props.t - Translation function\n * @param props.onCreateDomain - The on create domain\n * @param props.onVerifyDomain - The on verify domain\n * @param props.onDeleteDomain - The on delete domain\n * @param props.onAssociateToProvider - The on associate to provider\n * @param props.onDeleteFromProvider - The on delete from provider\n * @param props.fetchProviders - The fetch providers\n * @param props.fetchDomains - The fetch domains\n * @internal\n * @returns Hook state and methods\n */\nexport function useDomainTableLogic({\n  t,\n  onCreateDomain,\n  onVerifyDomain,\n  onDeleteDomain,\n  onAssociateToProvider,\n  onDeleteFromProvider,\n  fetchProviders,\n  fetchDomains,\n}: UseDomainTableLogicOptions): UseDomainTableLogicResult {\n  const handleError = useErrorHandler();\n  const [showCreateModal, setShowCreateModal] = useState(false);\n  const [showConfigureModal, setShowConfigureModal] = useState(false);\n  const [showVerifyModal, setShowVerifyModal] = useState(false);\n  const [verifyError, setVerifyError] = useState<string | undefined>(undefined);\n  const [showDeleteModal, setShowDeleteModal] = useState(false);\n  const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);\n\n  const handleCreate = useCallback(\n    async (domainUrl: string) => {\n      try {\n        const newDomain = await onCreateDomain({ domain: domainUrl });\n        showToast({\n          type: 'success',\n          message: t('domain_table.notifications.domain_create.success', {\n            domainName: newDomain?.domain,\n          }),\n        });\n        setSelectedDomain(newDomain);\n        setShowCreateModal(false);\n        setShowVerifyModal(true);\n      } catch (error) {\n        handleError(error, {\n          fallbackMessage: t('domain_table.notifications.domain_create.error'),\n        });\n      }\n    },\n    [onCreateDomain, t, handleError],\n  );\n\n  const handleVerify = useCallback(\n    async (domain: Domain) => {\n      try {\n        const isVerified = await onVerifyDomain(domain);\n        if (isVerified) {\n          setShowVerifyModal(false);\n          showToast({\n            type: 'success',\n            message: t('domain_table.notifications.domain_verify.success', {\n              domainName: domain.domain,\n            }),\n          });\n        } else {\n          setVerifyError(\n            t('domain_verify.modal.errors.verification_failed', { domainName: domain.domain }),\n          );\n        }\n      } catch (error) {\n        handleError(error, {\n          fallbackMessage: t('domain_table.notifications.domain_verify.error'),\n        });\n      }\n    },\n    [onVerifyDomain, t, handleError],\n  );\n\n  const handleDelete = useCallback(\n    async (domain: Domain) => {\n      try {\n        await onDeleteDomain(domain);\n        showToast({\n          type: 'success',\n          message: t('domain_table.notifications.domain_delete.success', {\n            domainName: domain.domain,\n          }),\n        });\n        setShowDeleteModal(false);\n        setShowVerifyModal(false);\n      } catch (error) {\n        handleError(error, {\n          fallbackMessage: t('domain_table.notifications.domain_delete.error'),\n        });\n      }\n    },\n    [onDeleteDomain, t, handleError],\n  );\n\n  const handleToggleSwitch = useCallback(\n    async (domain: Domain, provider: IdpKnownResponse, newCheckedValue: boolean) => {\n      if (newCheckedValue) {\n        try {\n          await onAssociateToProvider(domain, provider);\n          showToast({\n            type: 'success',\n            message: t('domain_table.notifications.domain_associate_provider.success', {\n              domain: domain.domain,\n              idp: provider.name,\n            }),\n          });\n        } catch (error) {\n          handleError(error, {\n            fallbackMessage: t('domain_table.notifications.domain_associate_provider.error'),\n          });\n        }\n      } else {\n        try {\n          await onDeleteFromProvider(domain, provider);\n          showToast({\n            type: 'success',\n            message: t('domain_table.notifications.domain_delete_provider.success', {\n              domain: domain.domain,\n              idp: provider.name,\n            }),\n          });\n        } catch (error) {\n          handleError(error, {\n            fallbackMessage: t('domain_table.notifications.domain_delete_provider.error'),\n          });\n        }\n      }\n    },\n    [onAssociateToProvider, onDeleteFromProvider, t, handleError],\n  );\n\n  const handleCloseVerifyModal = useCallback(() => {\n    setShowVerifyModal(false);\n    setVerifyError(undefined);\n  }, []);\n\n  const handleCreateClick = useCallback(() => {\n    setShowCreateModal(true);\n  }, []);\n\n  const handleConfigureClick = useCallback(\n    async (domain: Domain) => {\n      setSelectedDomain(domain);\n      if (domain.status !== 'verified') {\n        setShowVerifyModal(true);\n      } else {\n        try {\n          await fetchProviders(domain);\n          setShowConfigureModal(true);\n        } catch (error) {\n          handleError(error, {\n            fallbackMessage: t('domain_table.notifications.fetch_providers_error'),\n          });\n        }\n      }\n    },\n    [fetchProviders, t, handleError],\n  );\n\n  const handleVerifyClick = useCallback(\n    async (domain: Domain) => {\n      setSelectedDomain(domain);\n      try {\n        const isVerified = await onVerifyDomain(domain);\n        if (isVerified) {\n          await fetchProviders(domain);\n          setShowConfigureModal(true);\n          showToast({\n            type: 'success',\n            message: t('domain_table.notifications.domain_verify.success', {\n              domainName: domain.domain,\n            }),\n          });\n        } else {\n          showToast({\n            type: 'error',\n            message: t('domain_table.notifications.domain_verify.verification_failed', {\n              domainName: domain.domain,\n            }),\n          });\n        }\n      } catch (error) {\n        handleError(error, {\n          fallbackMessage: t('domain_table.notifications.domain_verify.error'),\n        });\n      }\n    },\n    [onVerifyDomain, fetchProviders, t, handleError],\n  );\n\n  const handleDeleteClick = useCallback((domain: Domain) => {\n    setSelectedDomain(domain);\n    setShowVerifyModal(false);\n    setShowDeleteModal(true);\n  }, []);\n\n  // Initialization\n  useEffect(() => {\n    try {\n      fetchDomains();\n    } catch (error) {\n      handleError(error, {\n        fallbackMessage: t('domain_table.notifications.fetch_domains_error'),\n      });\n    }\n  }, []);\n\n  return {\n    // Modal state\n    showCreateModal,\n    showConfigureModal,\n    showVerifyModal,\n    showDeleteModal,\n    verifyError,\n    selectedDomain,\n\n    // State setters\n    setShowCreateModal,\n    setShowConfigureModal,\n    setShowVerifyModal,\n    setShowDeleteModal,\n\n    // Handlers\n    handleCreate,\n    handleVerify,\n    handleDelete,\n    handleToggleSwitch,\n    handleCloseVerifyModal,\n    handleCreateClick,\n    handleConfigureClick,\n    handleVerifyClick,\n    handleDeleteClick,\n  };\n}\n",
      "type": "registry:component",
      "target": "hooks/my-organization/use-domain-table-logic.ts"
    },
    {
      "path": "src/hooks/my-organization/use-domain-table.ts",
      "content": "/**\n * Domain table data and mutations hook.\n * @module use-domain-table\n */\n\nimport {\n  type Domain,\n  type IdpKnownResponse,\n  type CreateOrganizationDomainRequestContent,\n  type IdentityProviderAssociatedWithDomain,\n  BusinessError,\n} from '@auth0/universal-components-core';\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\n\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type {\n  UseDomainTableOptions,\n  UseDomainTableResult,\n} from '@/types/my-organization/domain-management/domain-table-types';\n\nconst domainQueryKeys = {\n  all: ['domains'] as const,\n  list: () => [...domainQueryKeys.all, 'list'] as const,\n  providers: (domainId: string) => [...domainQueryKeys.all, 'providers', domainId] as const,\n};\n\n/**\n * Hook for domain table data fetching and CRUD operations.\n * @param props - Component props.\n * @param props.createAction - Configuration for the create action\n * @param props.deleteAction - Configuration for the delete action\n * @param props.verifyAction - Configuration for the verify action\n * @param props.associateToProviderAction - Configuration for associating to a provider\n * @param props.deleteFromProviderAction - Configuration for deleting from a provider\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns Hook state and methods\n */\nexport function useDomainTable({\n  createAction,\n  deleteAction,\n  verifyAction,\n  associateToProviderAction,\n  deleteFromProviderAction,\n  customMessages,\n}: UseDomainTableOptions): UseDomainTableResult {\n  const { t } = useTranslator('domain_management.domain_table.notifications', customMessages);\n  const { coreClient } = useCoreClient();\n  const queryClient = useQueryClient();\n\n  const [selectedDomainId, setSelectedDomainId] = useState<string | null>(null);\n  const [selectedDomainName, setSelectedDomainName] = useState<string | null>(null);\n\n  const fetchProvidersForDomain = async (domainName: string) => {\n    const api = coreClient!.getMyOrganizationApiClient();\n\n    const allProvidersResponse = await api.organization.identityProviders.list();\n    const allProviders = allProvidersResponse?.identity_providers ?? [];\n\n    return allProviders.map(\n      (provider): IdentityProviderAssociatedWithDomain => ({\n        ...provider,\n        is_associated: provider.domains?.includes(domainName) ?? false,\n      }),\n    );\n  };\n\n  const domainsQuery = useQuery({\n    queryKey: domainQueryKeys.list(),\n    queryFn: async () => {\n      const { response } = await coreClient!\n        .getMyOrganizationApiClient()\n        .organization.domains.list();\n      return response?.organization_domains ?? [];\n    },\n    enabled: !!coreClient,\n  });\n\n  const providersQuery = useQuery({\n    queryKey: domainQueryKeys.providers(selectedDomainId ?? ''),\n    queryFn: () => fetchProvidersForDomain(selectedDomainName!),\n    enabled: !!coreClient && !!selectedDomainId && !!selectedDomainName,\n  });\n\n  const createDomainMutation = useMutation({\n    mutationFn: async (data: CreateOrganizationDomainRequestContent): Promise<Domain> => {\n      if (createAction?.onBefore && !createAction.onBefore(data as Domain)) {\n        throw new BusinessError({ message: t('domain_create.on_before') });\n      }\n      return coreClient!.getMyOrganizationApiClient().organization.domains.create(data);\n    },\n    onSuccess: (result) => {\n      createAction?.onAfter?.(result);\n      queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() });\n    },\n  });\n\n  const verifyDomainMutation = useMutation({\n    mutationFn: async (domain: Domain): Promise<boolean> => {\n      if (verifyAction?.onBefore && !verifyAction.onBefore(domain)) {\n        throw new BusinessError({ message: t('domain_verify.on_before') });\n      }\n      const response = await coreClient!\n        .getMyOrganizationApiClient()\n        .organization.domains.verify.create(domain.id);\n      return response.status === 'verified';\n    },\n    onSuccess: (_, domain) => {\n      verifyAction?.onAfter?.(domain);\n      queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() });\n    },\n  });\n\n  const deleteDomainMutation = useMutation({\n    mutationFn: async (domain: Domain): Promise<void> => {\n      if (deleteAction?.onBefore && !deleteAction.onBefore(domain)) {\n        throw new BusinessError({ message: t('domain_delete.on_before') });\n      }\n      await coreClient!.getMyOrganizationApiClient().organization.domains.delete(domain.id);\n    },\n    onSuccess: (_, domain) => {\n      deleteAction?.onAfter?.(domain);\n      queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() });\n      queryClient.removeQueries({ queryKey: domainQueryKeys.providers(domain.id) });\n    },\n  });\n\n  const associateToProviderMutation = useMutation({\n    mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => {\n      if (\n        associateToProviderAction?.onBefore &&\n        !associateToProviderAction.onBefore(domain, provider)\n      ) {\n        throw new BusinessError({ message: t('domain_associate_provider.on_before') });\n      }\n      await coreClient!\n        .getMyOrganizationApiClient()\n        .organization.identityProviders.domains.create(provider.id!, { domain: domain.domain });\n    },\n    onSuccess: (_, { domain, provider }) => {\n      associateToProviderAction?.onAfter?.(domain, provider);\n      queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) });\n    },\n  });\n\n  const deleteFromProviderMutation = useMutation({\n    mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => {\n      if (\n        deleteFromProviderAction?.onBefore &&\n        !deleteFromProviderAction.onBefore(domain, provider)\n      ) {\n        throw new BusinessError({ message: t('domain_delete_provider.on_before') });\n      }\n      await coreClient!\n        .getMyOrganizationApiClient()\n        .organization.identityProviders.domains.delete(provider.id!, domain.domain);\n    },\n    onSuccess: (_, { domain, provider }) => {\n      deleteFromProviderAction?.onAfter?.(domain, provider);\n      queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) });\n    },\n  });\n\n  return {\n    domains: domainsQuery.data ?? [],\n    providers: providersQuery.data ?? [],\n    isFetching: domainsQuery.isLoading,\n    isCreating: createDomainMutation.isPending,\n    isDeleting: deleteDomainMutation.isPending,\n    isVerifying: verifyDomainMutation.isPending,\n    isLoadingProviders: providersQuery.isLoading,\n    fetchProviders: async (domain: Domain) => {\n      setSelectedDomainId(domain.id);\n      setSelectedDomainName(domain.domain);\n      await queryClient.ensureQueryData({\n        queryKey: domainQueryKeys.providers(domain.id),\n        queryFn: () => fetchProvidersForDomain(domain.domain),\n      });\n    },\n    fetchDomains: async () => {\n      await queryClient.getQueryData(domainQueryKeys.list());\n    },\n    onCreateDomain: (data) => createDomainMutation.mutateAsync(data),\n    onVerifyDomain: (domain) => verifyDomainMutation.mutateAsync(domain),\n    onDeleteDomain: (domain) => deleteDomainMutation.mutateAsync(domain),\n    onAssociateToProvider: (domain, provider) =>\n      associateToProviderMutation.mutateAsync({ domain, provider }),\n    onDeleteFromProvider: (domain, provider) =>\n      deleteFromProviderMutation.mutateAsync({ domain, provider }),\n  };\n}\n",
      "type": "registry:component",
      "target": "hooks/my-organization/use-domain-table.ts"
    },
    {
      "path": "src/hooks/shared/use-core-client-initialization.ts",
      "content": "/**\n * CoreClient initialization hook.\n * @module use-core-client-initialization\n * @internal\n */\n\nimport type {\n  CoreClientInterface,\n  AuthDetails,\n  I18nInitOptions,\n} from '@auth0/universal-components-core';\nimport { createCoreClient } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\ninterface UseCoreClientInitializationProps {\n  authDetails: AuthDetails;\n  i18nOptions?: I18nInitOptions;\n}\n\n/**\n * @internal\n * @param props - Initialization props.\n * @returns The initialized CoreClient instance, or null while initializing.\n */\nexport const useCoreClientInitialization = ({\n  authDetails,\n  i18nOptions,\n}: UseCoreClientInitializationProps): CoreClientInterface | null => {\n  const { authProxyUrl } = authDetails;\n  const [coreClient, setCoreClient] = React.useState<CoreClientInterface | null>(null);\n\n  React.useEffect(() => {\n    const initializeCoreClient = async () => {\n      try {\n        const initializedCoreClient = await createCoreClient(authDetails, i18nOptions);\n        setCoreClient(initializedCoreClient);\n      } catch (error) {\n        console.error(error);\n      }\n    };\n    initializeCoreClient();\n  }, [authProxyUrl, i18nOptions]);\n\n  return coreClient;\n};\n",
      "type": "registry:component",
      "target": "hooks/shared/use-core-client-initialization.ts"
    },
    {
      "path": "src/hooks/shared/use-core-client.ts",
      "content": "/**\n * CoreClient context and hook.\n * @module use-core-client\n */\n\nimport type { CoreClientInterface } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\n/** @internal */\nconst CoreClientContext = React.createContext<{\n  coreClient: CoreClientInterface | null;\n}>({\n  coreClient: null,\n});\n\n/**\n * Hook to access CoreClient from context.\n * @returns CoreClient instance or null.\n * @throws If used outside Auth0ComponentProvider.\n */\nexport const useCoreClient = () => {\n  const context = React.useContext(CoreClientContext);\n  if (!context) {\n    throw new Error('useCoreClient must be used within Auth0ComponentProvider');\n  }\n  return context;\n};\n\nexport { CoreClientContext };\n",
      "type": "registry:component",
      "target": "hooks/shared/use-core-client.ts"
    },
    {
      "path": "src/hooks/shared/use-error-handler.ts",
      "content": "/**\n * Error handling hook with toast error.\n * @module use-error-handler\n */\n\nimport {\n  isNetworkError,\n  isNotifiableError,\n  resolveErrorMessage,\n  getStatusCode,\n  hasApiErrorBody,\n  ERROR_CODES,\n} from '@auth0/universal-components-core';\nimport { useCallback } from 'react';\n\nimport { showToast } from '@/components/auth0/shared/toast';\nimport { useTranslator } from '@/hooks/shared/use-translator';\n\ninterface ErrorHandlerCallOptions {\n  fallbackMessage?: string;\n}\n\n/**\n * Hook for consistent error handling across the app.\n *\n * @returns Error handler function.\n *\n * @example\n * const handleError = useErrorHandler();\n *\n * // With custom message\n * onError: (error) => handleError(error, {\n *   fallbackMessage: t('my_error')\n * });\n *\n * // With defaults\n * onError: handleError;\n */\nexport function useErrorHandler() {\n  const { t } = useTranslator('common');\n\n  return useCallback(\n    (error: unknown, options: ErrorHandlerCallOptions = {}): void => {\n      if (!isNotifiableError(error)) return;\n\n      const getCustomErrorMessage = (err: unknown): string | undefined => {\n        if (isNetworkError(err)) return t('error.network');\n        const status = getStatusCode(err);\n        switch (status) {\n          case 400:\n            return t('error.bad_request');\n          case 401:\n            return t('error.missing_token');\n          case 403:\n            return hasApiErrorBody(err) && err.body?.type?.includes(ERROR_CODES.INSUFFICIENT_SCOPE)\n              ? t('error.insufficient_scope')\n              : t('error.forbidden');\n          case 404:\n            return t('error.not_found');\n          case 429:\n            return t('error.rate_limit');\n          default:\n            return undefined;\n        }\n      };\n\n      showToast({\n        type: 'error',\n        message:\n          getCustomErrorMessage(error) ??\n          resolveErrorMessage(error, options.fallbackMessage ?? t('error.generic')),\n      });\n    },\n    [t],\n  );\n}\n",
      "type": "registry:component",
      "target": "hooks/shared/use-error-handler.ts"
    },
    {
      "path": "src/hooks/shared/use-theme.ts",
      "content": "/**\n * Theme context hook.\n * @module use-theme\n */\n\n'use client';\n\nimport { useContext } from 'react';\n\nimport { ThemeContext } from '@/providers/theme-provider';\n\n/**\n * Hook to access theme context (mode, variables, loader).\n * @returns Theme context value.\n * @throws If used outside ThemeProvider.\n */\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n",
      "type": "registry:component",
      "target": "hooks/shared/use-theme.ts"
    },
    {
      "path": "src/hooks/shared/use-toast-provider.ts",
      "content": "/**\n * Toast settings management hook.\n * @module use-toast-provider\n * @internal\n */\n\nimport { useEffect, useMemo } from 'react';\n\nimport { setGlobalToastSettings } from '@/components/auth0/shared/toast';\nimport { DEFAULT_TOAST_SETTINGS, type ToastSettings } from '@/types/toast-types';\n\n/**\n * Hook to merge and apply toast settings.\n * @param toastSettings - Optional toast settings.\n * @returns Merged toast settings.\n * @internal\n */\nexport const useToastProvider = (toastSettings?: ToastSettings) => {\n  const mergedToastSettings = useMemo(() => {\n    if (!toastSettings) {\n      return DEFAULT_TOAST_SETTINGS;\n    }\n\n    if (toastSettings.provider === 'custom') {\n      return toastSettings;\n    }\n\n    const defaultSonnerSettings =\n      DEFAULT_TOAST_SETTINGS.provider === 'sonner' ? DEFAULT_TOAST_SETTINGS.settings || {} : {};\n\n    return {\n      provider: 'sonner' as const,\n      settings: {\n        ...defaultSonnerSettings,\n        ...(toastSettings.provider === 'sonner' ? toastSettings.settings : {}),\n      },\n    } satisfies ToastSettings;\n  }, [toastSettings]);\n\n  useEffect(() => {\n    setGlobalToastSettings(mergedToastSettings);\n  }, [mergedToastSettings]);\n\n  return mergedToastSettings;\n};\n",
      "type": "registry:component",
      "target": "hooks/shared/use-toast-provider.ts"
    },
    {
      "path": "src/hooks/shared/use-translator.ts",
      "content": "/**\n * i18n translator hook.\n * @module use-translator\n */\n\nimport { type EnhancedTranslationFunction } from '@auth0/universal-components-core';\nimport { useMemo, useCallback } from 'react';\n\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\n\n/**\n * Hook to access i18n translations.\n * @param namespace - Translation namespace.\n * @param overrides - Optional translation overrides.\n * @returns Translator function and language utilities.\n */\nexport function useTranslator(\n  namespace: string,\n  overrides?: Record<string, unknown>,\n): {\n  t: EnhancedTranslationFunction;\n  changeLanguage: (language: string, fallbackLanguage?: string) => Promise<void>;\n  currentLanguage: string;\n  fallbackLanguage: string | undefined;\n} {\n  const { coreClient } = useCoreClient();\n\n  if (!coreClient) {\n    throw new Error(\n      'useTranslator must be used within Auth0ComponentProvider with initialized CoreClient',\n    );\n  }\n\n  const translator = useMemo(() => {\n    return coreClient.i18nService.translator(namespace, overrides);\n  }, [coreClient, namespace, overrides]);\n\n  const changeLanguage = useCallback(\n    async (language: string, fallbackLanguage?: string) => {\n      await coreClient.i18nService.changeLanguage(language, fallbackLanguage);\n    },\n    [coreClient],\n  );\n\n  return {\n    t: translator,\n    changeLanguage,\n    currentLanguage: coreClient.i18nService.currentLanguage,\n    fallbackLanguage: coreClient.i18nService.fallbackLanguage,\n  };\n}\n",
      "type": "registry:component",
      "target": "hooks/shared/use-translator.ts"
    },
    {
      "path": "src/providers/gate-keeper-context.tsx",
      "content": "'use client';\n\nimport { createContext, useContext } from 'react';\n\nexport interface GateKeeperContextValue {\n  error: Error | null;\n  /** Defined only when an error is active. */\n  onRetry?: () => Promise<boolean>;\n}\n\nexport const GateKeeperContext = createContext<GateKeeperContextValue | null>(null);\n\n/**\n * @internal\n * @returns Current GateKeeper context value\n * @throws Error if used outside of the GateKeeperProvider\n */\nexport function useGateKeeperContext(): GateKeeperContextValue {\n  const context = useContext(GateKeeperContext);\n\n  if (!context) {\n    throw new Error('useGateKeeperContext must be used within a GateKeeperProvider');\n  }\n\n  return context;\n}\n",
      "type": "registry:component",
      "target": "providers/gate-keeper-context.tsx"
    },
    {
      "path": "src/providers/portal-context.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/**\n * React context that stores the target HTML element used as a portal container\n * for overlay-based UI (for example, dialogs, popovers, and tooltips).\n *\n */\nexport const PortalContext = React.createContext<HTMLElement | null>(null);\n\n/**\n * Returns the current portal container element from `PortalContext`.\n *\n * @returns The configured portal host element, or `null` when not provided.\n */\nexport function usePortalContainer() {\n  return React.useContext(PortalContext);\n}\n",
      "type": "registry:component",
      "target": "providers/portal-context.tsx"
    },
    {
      "path": "src/providers/proxy-provider.tsx",
      "content": "/**\n * RWA proxy provider for server-side auth.\n * @module proxy-provider\n */\n\n'use client';\n\nimport type { AuthDetails } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Toaster } from '@/components/auth0/shared/sonner';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Spinner } from '@/components/ui/spinner';\nimport { CoreClientContext } from '@/hooks/shared/use-core-client';\nimport { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization';\nimport { useToastProvider } from '@/hooks/shared/use-toast-provider';\nimport { QueryProvider } from '@/providers/query-provider';\nimport { ThemeProvider } from '@/providers/theme-provider';\nimport type { Auth0ComponentProviderProps } from '@/types/auth-types';\n\n/**\n * Auth0 provider for RWAs using backend proxy auth.\n * @param props - Provider configuration including domain, proxyConfig, i18n, themeSettings, toastSettings, cacheConfig, loader, and children.\n * @returns Provider component tree\n */\nexport const Auth0ComponentProvider = ({\n  i18n,\n  domain,\n  proxyConfig,\n  previewMode,\n  themeSettings = {\n    theme: 'default',\n    mode: 'light',\n    variables: {\n      common: {},\n      light: {},\n      dark: {},\n    },\n  },\n  toastSettings,\n  cacheConfig,\n  loader,\n  children,\n}: Extract<Auth0ComponentProviderProps, { mode: 'proxy' }> & { children: React.ReactNode }) => {\n  const mergedToastSettings = useToastProvider(toastSettings);\n  const { baseUrl, fetcher } = proxyConfig;\n\n  const memoizedAuthDetails = React.useMemo<AuthDetails>(\n    () => ({\n      domain,\n      authProxyUrl: baseUrl,\n      fetcher,\n      previewMode,\n    }),\n    [domain, baseUrl, fetcher, previewMode],\n  );\n\n  const coreClient = useCoreClientInitialization({\n    authDetails: memoizedAuthDetails,\n    i18nOptions: i18n,\n  });\n\n  const coreClientValue = React.useMemo(\n    () => ({\n      coreClient,\n    }),\n    [coreClient],\n  );\n\n  const fallback = loader || (\n    <StyledScope>\n      <div className=\"flex items-center justify-center min-h-[200px]\">\n        <Spinner />\n      </div>\n    </StyledScope>\n  );\n\n  return (\n    <ThemeProvider\n      themeSettings={{\n        mode: themeSettings.mode,\n        variables: themeSettings.variables,\n        loader,\n        theme: themeSettings.theme,\n      }}\n    >\n      {mergedToastSettings.provider === 'sonner' && (\n        <Toaster\n          position={mergedToastSettings.settings?.position || 'top-right'}\n          closeButton={mergedToastSettings.settings?.closeButton ?? true}\n          className=\"auth0-universal\"\n        />\n      )}\n      {coreClient ? (\n        <CoreClientContext.Provider value={coreClientValue}>\n          <QueryProvider cacheConfig={cacheConfig}>{children}</QueryProvider>\n        </CoreClientContext.Provider>\n      ) : (\n        fallback\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Auth0ComponentProvider;\n",
      "type": "registry:component",
      "target": "providers/proxy-provider.tsx"
    },
    {
      "path": "src/providers/query-provider.tsx",
      "content": "'use client';\n\n/**\n * TanStack Query provider wrapper.\n * @module query-provider\n * @internal\n */\n\nimport { isMfaRequiredError, isNotifiableError } from '@auth0/universal-components-core';\nimport {\n  MutationCache,\n  type Query,\n  QueryCache,\n  QueryClient,\n  QueryClientProvider as TanStackQueryClientProvider,\n} from '@tanstack/react-query';\nimport { useMemo, useState, type ReactElement, type ReactNode } from 'react';\n\nimport { GateKeeperContext } from '@/providers/gate-keeper-context';\n\n/** Query cache configuration. */\nexport interface QueryCacheConfig {\n  enabled?: boolean;\n  staleTime?: number;\n  gcTime?: number;\n  refetchOnWindowFocus?: boolean | 'always';\n}\n\n/** Default cache configuration. */\nexport const DEFAULT_CACHE_CONFIG: Readonly<Required<QueryCacheConfig>> = {\n  enabled: true,\n  staleTime: 2 * 60 * 1000,\n  gcTime: 5 * 60 * 1000,\n  refetchOnWindowFocus: false,\n};\n\nconst QUERY_RETRY_CONFIG = {\n  maxRetries: 3,\n  maxRetryDelay: 30_000,\n  backoffMultiplier: 2,\n} as const;\n\nconst MUTATION_RETRY_CONFIG = {\n  maxRetries: 1,\n} as const;\n\nconst DISABLED_CACHE_GC_TIME = 5 * 1000;\n\n/**\n * Merges user config with defaults.\n * @param userConfig - User-provided cache config.\n * @returns The resolved cache configuration\n * @internal\n */\nexport function resolveCacheConfig(userConfig?: QueryCacheConfig): Required<QueryCacheConfig> {\n  const merged: Required<QueryCacheConfig> = {\n    ...DEFAULT_CACHE_CONFIG,\n    ...userConfig,\n  };\n\n  if (!merged.enabled) {\n    return {\n      ...merged,\n      staleTime: 0,\n      gcTime: DISABLED_CACHE_GC_TIME,\n    };\n  }\n\n  return merged;\n}\n\n/**\n * Returns true if a cached query has an error that GateKeeper should handle.\n * @param query - The cached query to check.\n * @returns Whether the query error should be intercepted by GateKeeper.\n */\nfunction isGateKeeperError(query: Query): boolean {\n  return !!query.state.error && !isNotifiableError(query.state.error);\n}\n\n/**\n * Creates a QueryClient with config and global GateKeeper error interception.\n * @param cacheConfig - Cache configuration.\n * @param setGateKeeperState - Setter for GateKeeper context state.\n * @returns The configured QueryClient instance\n * @internal\n */\nfunction createQueryClient(\n  cacheConfig: Required<QueryCacheConfig>,\n  setGateKeeperState: (state: { error: Error; onRetry: () => Promise<boolean> } | null) => void,\n): QueryClient {\n  const queryClient = new QueryClient({\n    queryCache: new QueryCache({\n      onError: (error) => {\n        if (!isNotifiableError(error)) {\n          setGateKeeperState({\n            error,\n            onRetry: async () => {\n              await queryClient.refetchQueries({ predicate: isGateKeeperError });\n              const stillFailing = queryClient.getQueryCache().getAll().some(isGateKeeperError);\n              if (!stillFailing) setGateKeeperState(null);\n              return !stillFailing;\n            },\n          });\n        }\n      },\n    }),\n    mutationCache: new MutationCache({\n      onError: (error, variables, _context, mutation) => {\n        if (isMfaRequiredError(error)) {\n          setGateKeeperState({\n            error,\n            onRetry: async () => {\n              try {\n                await mutation.execute(variables);\n                setGateKeeperState(null);\n                return true;\n              } catch {\n                return false;\n              }\n            },\n          });\n        }\n      },\n    }),\n    defaultOptions: {\n      queries: {\n        staleTime: cacheConfig.staleTime,\n        gcTime: cacheConfig.gcTime,\n        refetchOnWindowFocus: cacheConfig.refetchOnWindowFocus,\n        retry: (failureCount, error) =>\n          !isMfaRequiredError(error) && failureCount < QUERY_RETRY_CONFIG.maxRetries,\n        retryDelay: (attemptIndex: number) =>\n          Math.min(\n            1000 * QUERY_RETRY_CONFIG.backoffMultiplier ** attemptIndex,\n            QUERY_RETRY_CONFIG.maxRetryDelay,\n          ),\n        refetchOnReconnect: true,\n      },\n      mutations: {\n        retry: (failureCount, error) =>\n          !isMfaRequiredError(error) && failureCount < MUTATION_RETRY_CONFIG.maxRetries,\n      },\n    },\n  });\n\n  return queryClient;\n}\n\n/** Props for QueryProvider. */\nexport interface QueryProviderProps {\n  children: ReactNode;\n  /** Cache config, only read on mount. */\n  cacheConfig?: QueryCacheConfig;\n}\n\n/**\n * Internal TanStack Query provider wrapper.\n * @param props - Component props.\n * @param props.children - Child components.\n * @param props.cacheConfig - Cache configuration.\n * @returns The context provider component\n * @internal\n */\nexport function QueryProvider({ children, cacheConfig }: QueryProviderProps): ReactElement {\n  const [gateKeeperState, setGateKeeperState] = useState<{\n    error: Error;\n    onRetry: () => Promise<boolean>;\n  } | null>(null);\n  const [queryClient] = useState(() =>\n    createQueryClient(resolveCacheConfig(cacheConfig), setGateKeeperState),\n  );\n\n  const contextValue = useMemo(() => gateKeeperState ?? { error: null }, [gateKeeperState]);\n\n  return (\n    <GateKeeperContext.Provider value={contextValue}>\n      <TanStackQueryClientProvider client={queryClient}>{children}</TanStackQueryClientProvider>\n    </GateKeeperContext.Provider>\n  );\n}\n",
      "type": "registry:component",
      "target": "providers/query-provider.tsx"
    },
    {
      "path": "src/providers/spa-provider.tsx",
      "content": "/**\n * SPA provider using @auth0/auth0-react.\n * @module spa-provider\n */\n\n'use client';\n\nimport { useAuth0 } from '@auth0/auth0-react';\nimport type { AuthDetails, BasicAuth0ContextInterface } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Toaster } from '@/components/auth0/shared/sonner';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Spinner } from '@/components/ui/spinner';\nimport { CoreClientContext } from '@/hooks/shared/use-core-client';\nimport { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization';\nimport { useToastProvider } from '@/hooks/shared/use-toast-provider';\nimport { QueryProvider } from '@/providers/query-provider';\nimport { ThemeProvider } from '@/providers/theme-provider';\nimport type { Auth0ComponentProviderProps } from '@/types/auth-types';\n\n/**\n * Auth0 provider for SPAs. Wraps components with required contexts.\n * @param props - Provider configuration including domain, mode, authContext, i18n, themeSettings, toastSettings, cacheConfig, loader, and children.\n * @returns Provider component tree\n */\nexport const Auth0ComponentProvider = (\n  props: Extract<Auth0ComponentProviderProps, { mode?: 'direct' }> & { children: React.ReactNode },\n) => {\n  const {\n    i18n,\n    previewMode,\n    themeSettings = {\n      theme: 'default',\n      mode: 'light',\n      variables: {\n        common: {},\n        light: {},\n        dark: {},\n      },\n    },\n    toastSettings,\n    cacheConfig,\n    loader,\n    children,\n    authContext,\n  } = props;\n  const mergedToastSettings = useToastProvider(toastSettings);\n\n  const auth0ReactContext = useAuth0();\n\n  const resolvedAuthContext = React.useMemo(() => {\n    if (authContext) {\n      return authContext;\n    }\n    if (auth0ReactContext && 'isAuthenticated' in auth0ReactContext) {\n      return auth0ReactContext as BasicAuth0ContextInterface;\n    }\n\n    throw new Error(\n      'Auth0ContextInterface is not available. Make sure you wrap your app with Auth0Provider from @auth0/auth0-react, or pass authContext.',\n    );\n  }, [auth0ReactContext, authContext]);\n\n  const memoizedAuthDetails = React.useMemo<AuthDetails>(\n    () => ({\n      contextInterface: resolvedAuthContext,\n      previewMode,\n    }),\n    [resolvedAuthContext, previewMode],\n  );\n\n  const coreClient = useCoreClientInitialization({\n    authDetails: memoizedAuthDetails,\n    i18nOptions: i18n,\n  });\n\n  const coreClientValue = React.useMemo(\n    () => ({\n      coreClient,\n    }),\n    [coreClient],\n  );\n\n  const fallback = loader || (\n    <StyledScope>\n      <div className=\"flex items-center justify-center min-h-[200px]\">\n        <Spinner />\n      </div>\n    </StyledScope>\n  );\n\n  return (\n    <ThemeProvider\n      themeSettings={{\n        mode: themeSettings.mode,\n        variables: themeSettings.variables,\n        loader,\n        theme: themeSettings.theme,\n      }}\n    >\n      {mergedToastSettings.provider === 'sonner' && (\n        <Toaster\n          position={mergedToastSettings.settings?.position || 'top-right'}\n          closeButton={mergedToastSettings.settings?.closeButton ?? true}\n          className=\"auth0-universal\"\n        />\n      )}\n      {coreClient ? (\n        <CoreClientContext.Provider value={coreClientValue}>\n          <QueryProvider cacheConfig={cacheConfig}>{children}</QueryProvider>\n        </CoreClientContext.Provider>\n      ) : (\n        fallback\n      )}\n    </ThemeProvider>\n  );\n};\n\nexport default Auth0ComponentProvider;\n",
      "type": "registry:component",
      "target": "providers/spa-provider.tsx"
    },
    {
      "path": "src/providers/theme-provider.tsx",
      "content": "/**\n * Theme provider for styling configuration.\n * @module theme-provider\n * @internal\n */\n\n'use client';\n\nimport { applyStyleOverrides, type StylingVariables } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { PortalContext } from '@/providers/portal-context';\nimport type { ThemeContextValue, ThemeInput } from '@/types/theme-types';\n\n/** Default empty style overrides. */\nconst defaultStyleOverrides: StylingVariables = { common: {}, light: {}, dark: {} };\n\n/**\n * Theme context for accessing theme settings.\n * @internal\n * @returns The context provider component\n */\nexport const ThemeContext = React.createContext<ThemeContextValue>({\n  isDarkMode: false,\n  variables: defaultStyleOverrides,\n  loader: null,\n});\n\n/**\n * Provides theme configuration to the component tree.\n * @param props - Component props.\n * @param props.themeSettings - Theme settings with mode, variables, and loader.\n * @param props.children - Child components.\n * @returns Theme provider.\n * @internal\n */\nexport const ThemeProvider: React.FC<{\n  themeSettings?: ThemeInput;\n  children: React.ReactNode;\n}> = ({ themeSettings, children }) => {\n  const { variables, loader, mode, theme } = React.useMemo(\n    () => ({\n      variables: themeSettings?.variables ?? defaultStyleOverrides,\n      loader: themeSettings?.loader ?? null,\n      mode: themeSettings?.mode,\n      theme: themeSettings?.theme ?? 'default',\n    }),\n    [themeSettings],\n  );\n\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    applyStyleOverrides(variables, mode, theme);\n  }, [variables, mode, theme]);\n\n  return (\n    <ThemeContext.Provider value={{ isDarkMode: mode === 'dark', theme, variables, loader }}>\n      <PortalContext.Provider value={portalContainer}>\n        {children}\n        <div className=\"auth0-universal\" data-theme={theme} ref={setPortalContainer} />\n      </PortalContext.Provider>\n    </ThemeContext.Provider>\n  );\n};\n",
      "type": "registry:component",
      "target": "providers/theme-provider.tsx"
    },
    {
      "path": "src/types/auth-types.ts",
      "content": "/**\n * Auth provider configuration types.\n * @module auth-types\n */\n\nimport type { AuthDetails, FetcherAuthParams } from '@auth0/universal-components-core';\nimport type * as React from 'react';\n\nimport type { QueryCacheConfig } from '@/types/cache-types';\nimport type { I18nOptions } from '@/types/i18n-types';\nimport type { ThemeSettings } from '@/types/theme-types';\nimport type { ToastSettings } from '@/types/toast-types';\n\n/** Props for Auth0ComponentProvider. */\nexport type Auth0ComponentProviderProps = (\n  | {\n      mode?: 'direct';\n      authContext?: AuthDetails['contextInterface'];\n      proxyConfig?: never;\n    }\n  | {\n      mode: 'proxy';\n      domain: string;\n      proxyConfig: {\n        baseUrl: string;\n        fetcher?: (\n          url: string,\n          init?: RequestInit,\n          authParams?: FetcherAuthParams,\n        ) => Promise<Response>;\n      };\n    }\n) & {\n  i18n?: I18nOptions;\n  themeSettings?: ThemeSettings;\n  loader?: React.ReactNode;\n  toastSettings?: ToastSettings;\n  /** TanStack Query cache config. Use `{ enabled: false }` to disable. */\n  cacheConfig?: QueryCacheConfig;\n  previewMode?: boolean;\n};\n",
      "type": "registry:component",
      "target": "types/auth-types.ts"
    },
    {
      "path": "src/types/cache-types.ts",
      "content": "/**\n * TanStack Query cache configuration types.\n * @module cache-types\n */\n\n/** Cache configuration options. */\nexport interface QueryCacheConfig {\n  enabled?: boolean;\n  staleTime?: number;\n  gcTime?: number;\n  refetchOnWindowFocus?: boolean | 'always';\n}\n",
      "type": "registry:component",
      "target": "types/cache-types.ts"
    },
    {
      "path": "src/types/i18n-types.ts",
      "content": "/**\n * Internationalization configuration types.\n * @module i18n-types\n */\n\n/** i18n configuration for Auth0 components. */\nexport interface I18nOptions {\n  currentLanguage: string;\n  fallbackLanguage?: string;\n}\n",
      "type": "registry:component",
      "target": "types/i18n-types.ts"
    },
    {
      "path": "src/types/my-organization/domain-management/domain-configure-types.ts",
      "content": "/**\n * Domain configure modal types.\n * @module domain-configure-types\n */\n\nimport type {\n  Domain,\n  DomainConfigureMessages,\n  IdentityProviderAssociatedWithDomain,\n} from '@auth0/universal-components-core';\n\n/** Props for DomainConfigureProvidersModal. */\nexport interface DomainConfigureProvidersModalProps {\n  className?: string;\n  customMessages?: Partial<DomainConfigureMessages>;\n  isOpen: boolean;\n  isLoading: boolean;\n  isLoadingSwitch: boolean;\n  domain: Domain | null;\n  providers: IdentityProviderAssociatedWithDomain[];\n  onClose: () => void;\n  onToggleSwitch: (\n    domain: Domain,\n    provider: IdentityProviderAssociatedWithDomain,\n    enable: boolean,\n  ) => void;\n  onOpenProvider?: (provider: IdentityProviderAssociatedWithDomain) => void;\n  onCreateProvider?: () => void;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/domain-management/domain-configure-types.ts"
    },
    {
      "path": "src/types/my-organization/domain-management/domain-create-types.ts",
      "content": "/**\n * Domain create modal types.\n * @module domain-create-types\n */\n\nimport type { DomainCreateMessages, DomainCreateSchemas } from '@auth0/universal-components-core';\n\n/** Props for DomainCreateModal. */\nexport interface DomainCreateModalProps {\n  translatorKey?: string;\n  className?: string;\n  customMessages?: Partial<DomainCreateMessages>;\n  schema?: DomainCreateSchemas;\n  isOpen: boolean;\n  isLoading: boolean;\n  onClose: () => void;\n  onCreate: (domainName: string) => void | Promise<void>;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/domain-management/domain-create-types.ts"
    },
    {
      "path": "src/types/my-organization/domain-management/domain-delete-types.ts",
      "content": "/**\n * Domain delete modal types.\n * @module domain-delete-types\n */\n\nimport type { Domain, DomainDeleteMessages } from '@auth0/universal-components-core';\n\n/** Props for DomainDeleteModal. */\nexport interface DomainDeleteModalProps {\n  translatorKey?: string;\n  className?: string;\n  customMessages?: Partial<DomainDeleteMessages>;\n  domain: Domain | null;\n  isOpen: boolean;\n  isLoading: boolean;\n  onClose: () => void;\n  onDelete: (domain: Domain) => void;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/domain-management/domain-delete-types.ts"
    },
    {
      "path": "src/types/my-organization/domain-management/domain-table-types.ts",
      "content": "/**\n * Domain table types.\n * @module domain-table-types\n */\n\nimport type {\n  SharedComponentProps,\n  IdpKnownResponse,\n  DomainCreateMessages,\n  DomainCreateSchemas,\n  ComponentAction,\n  Domain,\n  DomainDeleteMessages,\n  DomainConfigureMessages,\n  DomainVerifyMessages,\n  DomainTableMessages,\n  CreateOrganizationDomainRequestContent,\n  EnhancedTranslationFunction,\n  IdentityProviderAssociatedWithDomain,\n} from '@auth0/universal-components-core';\n\nexport type { Domain };\n\n/** CSS classes for DomainTable. */\nexport interface DomainTableClasses {\n  'DomainTable-header'?: string;\n  'DomainTable-table'?: string;\n  'DomainTable-createModal'?: string;\n  'DomainTable-configureModal'?: string;\n  'DomainTable-deleteModal'?: string;\n}\n\n/** DomainTable translation messages. */\nexport interface DomainTableMainMessages extends DomainTableMessages {\n  create: DomainCreateMessages;\n  configure: DomainConfigureMessages;\n  verify: DomainVerifyMessages;\n  delete: DomainDeleteMessages;\n}\n\n/** DomainTable validation schemas. */\nexport interface DomainTableSchema {\n  create?: DomainCreateSchemas;\n}\n\n/** Props for DomainTable component. */\nexport interface DomainTableProps\n  extends SharedComponentProps<DomainTableMainMessages, DomainTableClasses, DomainTableSchema> {\n  hideHeader?: boolean;\n  createAction?: ComponentAction<Domain>;\n  verifyAction?: ComponentAction<Domain>;\n  deleteAction?: ComponentAction<Domain>;\n  associateToProviderAction?: ComponentAction<Domain, IdpKnownResponse>;\n  deleteFromProviderAction?: ComponentAction<Domain, IdpKnownResponse>;\n  onOpenProvider?: (provider: IdpKnownResponse) => void;\n  onCreateProvider?: () => void;\n}\n\n// DomainTableView component props\nexport interface DomainTableViewProps {\n  logic: UseDomainTableResult & DomainTableProps;\n  handlers: UseDomainTableLogicResult;\n}\n\n/** Props for DomainTable actions column. */\nexport interface DomainTableActionsColumnProps {\n  customMessages?: Partial<DomainTableMainMessages>;\n  readOnly: boolean;\n  domain: Domain;\n  onView: (domain: Domain) => void;\n  onConfigure: (domain: Domain) => void;\n  onVerify: (domain: Domain) => void;\n  onDelete: (domain: Domain) => void;\n}\n\nexport interface UseDomainTableOptions {\n  createAction?: DomainTableProps['createAction'];\n  verifyAction?: DomainTableProps['verifyAction'];\n  deleteAction?: DomainTableProps['deleteAction'];\n  associateToProviderAction?: DomainTableProps['associateToProviderAction'];\n  deleteFromProviderAction?: DomainTableProps['deleteFromProviderAction'];\n  customMessages?: DomainTableProps['customMessages'];\n}\n\nexport interface UseDomainTableResult extends SharedComponentProps {\n  domains: Domain[];\n  providers: IdentityProviderAssociatedWithDomain[];\n  isFetching: boolean;\n  isLoadingProviders: boolean;\n  isCreating: boolean;\n  isDeleting: boolean;\n  isVerifying: boolean;\n  fetchProviders: (domain: Domain) => Promise<void>;\n  fetchDomains: () => Promise<void>;\n  onCreateDomain: (data: CreateOrganizationDomainRequestContent) => Promise<Domain | null>;\n  onVerifyDomain: (data: Domain) => Promise<boolean>;\n  onDeleteDomain: (domain: Domain) => Promise<void>;\n  onAssociateToProvider: (domain: Domain, provider: IdpKnownResponse) => Promise<void>;\n  onDeleteFromProvider: (domain: Domain, provider: IdpKnownResponse) => Promise<void>;\n}\n\nexport interface UseDomainTableLogicOptions {\n  t: EnhancedTranslationFunction;\n  onCreateDomain: UseDomainTableResult['onCreateDomain'];\n  onVerifyDomain: UseDomainTableResult['onVerifyDomain'];\n  onDeleteDomain: UseDomainTableResult['onDeleteDomain'];\n  onAssociateToProvider: UseDomainTableResult['onAssociateToProvider'];\n  onDeleteFromProvider: UseDomainTableResult['onDeleteFromProvider'];\n  fetchProviders: UseDomainTableResult['fetchProviders'];\n  fetchDomains: UseDomainTableResult['fetchDomains'];\n}\n\nexport interface UseDomainTableLogicResult {\n  // Modal state\n  showCreateModal: boolean;\n  showConfigureModal: boolean;\n  showVerifyModal: boolean;\n  showDeleteModal: boolean;\n  verifyError: string | undefined;\n  selectedDomain: Domain | null;\n\n  // State setters\n  setShowCreateModal: (show: boolean) => void;\n  setShowConfigureModal: (show: boolean) => void;\n  setShowVerifyModal: (show: boolean) => void;\n  setShowDeleteModal: (show: boolean) => void;\n\n  // Handlers\n  handleCreate: (domainUrl: string) => Promise<void>;\n  handleVerify: (domain: Domain) => Promise<void>;\n  handleDelete: (domain: Domain) => void;\n  handleToggleSwitch: (domain: Domain, provider: IdpKnownResponse, checked: boolean) => void;\n  handleCloseVerifyModal: () => void;\n  handleCreateClick: () => void;\n  handleConfigureClick: (domain: Domain) => void;\n  handleVerifyClick: (domain: Domain) => Promise<void>;\n  handleDeleteClick: (domain: Domain) => void;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/domain-management/domain-table-types.ts"
    },
    {
      "path": "src/types/my-organization/domain-management/domain-verify-types.ts",
      "content": "/**\n * Domain verification modal types.\n * @module domain-verify-types\n */\n\nimport type { DomainVerifyMessages, Domain } from '@auth0/universal-components-core';\n\n/** Props for DomainVerifyModal. */\nexport interface DomainVerifyModalProps {\n  translatorKey?: string;\n  isOpen: boolean;\n  isLoading?: boolean;\n  domain: Domain | null;\n  error?: string;\n  onClose: () => void;\n  onVerify: (domain: Domain) => void;\n  onDelete: (domain: Domain) => void;\n  className?: string;\n  customMessages?: Partial<DomainVerifyMessages>;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/domain-management/domain-verify-types.ts"
    },
    {
      "path": "src/types/theme-types.ts",
      "content": "/**\n * Theme configuration types.\n * @module theme-types\n */\n\nimport type { StylingVariables } from '@auth0/universal-components-core';\nimport type React from 'react';\n\n/** Theme settings for provider. */\nexport interface ThemeSettings {\n  theme?: 'default' | 'minimal' | 'rounded';\n  mode?: 'light' | 'dark';\n  variables?: StylingVariables;\n}\n\n/** Theme input for ThemeProvider. */\nexport type ThemeInput = {\n  theme?: 'default' | 'minimal' | 'rounded';\n  mode?: 'light' | 'dark';\n  variables?: StylingVariables;\n  loader?: React.ReactNode;\n};\n\n/** Theme context value. */\nexport type ThemeContextValue = {\n  theme?: 'default' | 'minimal' | 'rounded';\n  isDarkMode?: boolean;\n  variables: StylingVariables;\n  loader: React.ReactNode | null;\n};\n",
      "type": "registry:component",
      "target": "types/theme-types.ts"
    },
    {
      "path": "src/types/toast-types.ts",
      "content": "/**\n * Toast notification types.\n * @module toast-types\n */\n\nimport type { ReactNode } from 'react';\nimport type { ExternalToast } from 'sonner';\n\n/** Toast notification type. */\nexport type ToastType = 'success' | 'info' | 'warning' | 'error';\n\n/** Toast position options. */\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'top-center'\n  | 'bottom-center';\n\n/** Custom toast method signature. */\nexport interface CustomToastMethod {\n  (message: string): void;\n}\n\n/** Custom toast methods for overriding default behavior. */\nexport interface CustomToastMethods {\n  success?: CustomToastMethod;\n  error?: CustomToastMethod;\n  warning?: CustomToastMethod;\n  info?: CustomToastMethod;\n  dismiss?: (toastId?: string) => void;\n}\n\n/** Sonner toast settings. */\nexport interface SonnerSettings {\n  position?: ToastPosition;\n  maxToasts?: number;\n  duration?: number;\n  dismissible?: boolean;\n  closeButton?: boolean;\n}\n\n/** Toast provider configuration. */\nexport type ToastSettings =\n  | { provider?: 'sonner'; settings?: SonnerSettings }\n  | { provider: 'custom'; methods: CustomToastMethods };\n\n/** Toast options for showToast. */\nexport interface ToastOptions {\n  type: ToastType;\n  message: string;\n  className?: string;\n  icon?: ReactNode;\n  data?: ExternalToast;\n}\n\n/** Default toast settings. */\nexport const DEFAULT_TOAST_SETTINGS: ToastSettings = {\n  provider: 'sonner',\n  settings: {\n    position: 'top-right',\n    closeButton: true,\n  },\n} as const;\n",
      "type": "registry:component",
      "target": "types/toast-types.ts"
    },
    {
      "path": "src/lib/constants/form-constants.ts",
      "content": "/**\n * Form constants used across the components.\n * @internal\n */\n\nexport const FORM_VALIDATION_MODE = 'onTouched';\nexport const FORM_REVALIDATE_MODE = 'onChange';\n",
      "type": "registry:component",
      "target": "lib/constants/form-constants.ts"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "/**\n * Tailwind CSS utility functions.\n * @module utils\n * @internal\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names with Tailwind CSS conflict resolution.\n * @param inputs - Input values to process\n * @returns The merged class name string\n * @internal\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:component",
      "target": "lib/utils.ts"
    },
    {
      "path": "src/lib/utils/my-organization/domain-management/domain-management-utils.ts",
      "content": "/**\n * Domain management utility functions.\n * @module domain-management-utils\n * @internal\n */\n\nimport type { Domain } from '@/types/my-organization/domain-management/domain-table-types';\n\n/**\n * Returns badge variant for domain status.\n * @param status - Current status\n * @returns The badge variant\n * @internal\n */\nexport function getStatusBadgeVariant(\n  status: Domain['status'],\n): 'success' | 'warning' | 'destructive' | 'outline' {\n  switch (status) {\n    case 'verified':\n      return 'success';\n    case 'pending':\n      return 'warning';\n    case 'failed':\n      return 'destructive';\n    default:\n      return 'outline';\n  }\n}\n",
      "type": "registry:component",
      "target": "lib/utils/my-organization/domain-management/domain-management-utils.ts"
    },
    {
      "path": "src/styles/globals.css",
      "content": "@import 'tailwindcss' important;\n@import '@auth0/universal-components-core/styles/globals.css';\n",
      "type": "registry:component",
      "target": "styles/globals.css"
    },
    {
      "path": "src/styles/tailwind.css",
      "content": "/* Scan component library for class names */\n@source \"./**/*.js\";\n",
      "type": "registry:component",
      "target": "styles/tailwind.css"
    }
  ],
  "meta": {
    "coreVersion": "2.1.0"
  }
}