{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-organization/organization-details-edit",
  "type": "registry:block",
  "title": "Organization details edit component.",
  "description": "A block component for organization details edit.",
  "dependencies": [
    "@auth0/universal-components-core@2.1.0",
    "@auth0/auth0-react@^2.15.1",
    "@hookform/resolvers@^5.1.0",
    "@radix-ui/react-label@^2.1.7",
    "@radix-ui/react-popover@^1.1.14",
    "@radix-ui/react-select@^2.2.5",
    "@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",
    "@uiw/color-convert@^2.9.2",
    "@uiw/react-color@^2.9.2",
    "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/organization-details-edit.tsx",
      "content": "/** @module organization-details-edit */\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { OrganizationDetails } from '@/components/auth0/my-organization/shared/organization-management/organization-details/organization-details';\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 { useOrganizationDetailsEdit } from '@/hooks/my-organization/use-organization-details-edit';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type {\n  OrganizationDetailsEditProps,\n  OrganizationDetailsEditViewProps,\n} from '@/types/my-organization/organization-management/organization-details-edit-types';\n\n/**\n * Organization details edit component.\n * @param props - Component props\n * @param props.schema - Zod validation schema\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.saveAction - Configuration for the save action\n * @param props.cancelAction - Configuration for the cancel action\n * @param props.hideHeader - Whether to hide the header\n * @param props.backButton - Configuration for the back button\n * @returns JSX element\n * @internal\n */\nfunction OrganizationDetailsEdit(props: OrganizationDetailsEditProps): React.JSX.Element {\n  const {\n    schema,\n    customMessages = {},\n    styling = {\n      variables: { common: {}, light: {}, dark: {} },\n      classes: {},\n    },\n    readOnly = false,\n    saveAction,\n    cancelAction,\n    hideHeader = false,\n    backButton,\n  } = props;\n\n  const { organization, isFetchLoading, formActions } = useOrganizationDetailsEdit({\n    saveAction,\n    cancelAction,\n    readOnly,\n    customMessages,\n  });\n\n  return (\n    <GateKeeper isLoading={isFetchLoading} styling={styling}>\n      <OrganizationDetailsEditView\n        organization={organization}\n        schema={schema}\n        styling={styling}\n        customMessages={customMessages}\n        readOnly={readOnly}\n        hideHeader={hideHeader}\n        backButton={backButton}\n        formActions={formActions}\n      />\n    </GateKeeper>\n  );\n}\n\n/**\n * @internal\n * @param props - View props\n * @returns Organization Details Edit view element\n */\nfunction OrganizationDetailsEditView({\n  organization,\n  schema,\n  styling,\n  customMessages,\n  readOnly,\n  hideHeader,\n  backButton,\n  formActions,\n}: OrganizationDetailsEditViewProps) {\n  const { isDarkMode } = useTheme();\n  const { t } = useTranslator('organization_management.organization_details_edit', customMessages);\n\n  const currentStyles = React.useMemo(\n    () => getComponentStyles(styling, isDarkMode),\n    [styling, isDarkMode],\n  );\n\n  return (\n    <StyledScope style={currentStyles.variables}>\n      <div className=\"w-full\">\n        {!hideHeader && (\n          <div className=\"mb-8\">\n            <Header\n              title={t('header.title', {\n                organizationName: organization.display_name || organization.name || '',\n              })}\n              backButton={\n                backButton && {\n                  ...backButton,\n                  text: t('header.back_button_text'),\n                }\n              }\n            />\n          </div>\n        )}\n\n        <div className=\"mb-8\">\n          <OrganizationDetails\n            organization={organization}\n            schema={schema?.details}\n            customMessages={customMessages?.details}\n            styling={styling}\n            readOnly={readOnly}\n            formActions={formActions}\n          />\n        </div>\n      </div>\n    </StyledScope>\n  );\n}\n\n/**\n * Organization details editing form.\n *\n * A comprehensive component for editing organization details including name,\n * display name, branding, and metadata. Provides form validation, lifecycle\n * hooks for save/cancel actions, and user feedback.\n *\n * @param props - {@link OrganizationDetailsEditProps}\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.saveAction - Lifecycle hooks for save operation\n * @param props.cancelAction - Lifecycle hooks for cancel operation\n * @param props.hideHeader - Hide the header section\n * @param props.backButton - Back button configuration\n * @returns Organization details edit component\n *\n * @see {@link OrganizationDetailsEditProps} for full props documentation\n *\n * @example\n * ```tsx\n * <OrganizationDetailsEdit\n *   saveAction={{\n *     onBefore: () => true,\n *     onAfter: (org) => console.log('Saved:', org),\n *   }}\n *   cancelAction={{\n *     onAfter: () => navigate(-1),\n *   }}\n * />\n * ```\n */\nexport { OrganizationDetailsEdit, OrganizationDetailsEditView };\n",
      "type": "registry:block",
      "target": "components/auth0/my-organization/organization-details-edit.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/organization-management/organization-details/branding-details.tsx",
      "content": "/**\n * Organization branding details form section.\n * @module branding-details\n * @internal\n */\n\nimport { LinkIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Section } from '@/components/auth0/shared/section';\nimport { ColorPickerInput } from '@/components/ui/color-picker';\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/components/ui/form';\nimport { ImagePreviewField } from '@/components/ui/image-preview-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { BrandingDetailsProps } from '@/types/my-organization/organization-management/organization-details-types';\n\n/**\n * BrandingDetails Component\n *\n * Renders the organization branding section with logo and color fields.\n * This component is focused purely on the branding-related form fields.\n * @param props - Component props.\n * @param props.form - React Hook Form instance\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @param props.readOnly - Whether the component is in read-only mode\n * @returns JSX element\n */\nexport function BrandingDetails({\n  form,\n  customMessages = {},\n  className,\n  readOnly = false,\n}: BrandingDetailsProps): React.JSX.Element {\n  const { t } = useTranslator('organization_management.organization_details', customMessages);\n\n  return (\n    <div className={className}>\n      <Section title={t('sections.branding.title')}>\n        <FormField\n          control={form.control}\n          name=\"branding.logo_url\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel className=\"text-sm text-(length:--font-size-label) font-medium\">\n                {t('sections.branding.fields.logo.label')}\n              </FormLabel>\n              <FormControl>\n                <ImagePreviewField\n                  {...field}\n                  readOnly={readOnly}\n                  onChange={(e) => {\n                    field.onChange(e);\n                    if (!e.target.value.trim()) {\n                      form.clearErrors('branding.logo_url');\n                    }\n                  }}\n                  onImageError={() => {\n                    form.setError('branding.logo_url', {\n                      type: 'manual',\n                      message: t('sections.branding.fields.logo.error'),\n                    });\n                  }}\n                  onImageLoad={() => {\n                    form.clearErrors('branding.logo_url');\n                  }}\n                  startAdornment={\n                    <div className=\"p-1.5\">\n                      <LinkIcon />\n                    </div>\n                  }\n                />\n              </FormControl>\n              <FormMessage\n                className=\"text-left text-sm text-(length:--font-size-paragraph)\"\n                role=\"alert\"\n              />\n              <FormDescription className=\"text-sm text-(length:--font-size-paragraph) font-normal text-left\">\n                {t('sections.branding.fields.logo.helper_text')}\n              </FormDescription>\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"branding.colors.primary\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel\n                className=\"text-sm text-(length:--font-size-label) font-medium\"\n                htmlFor=\"primary-color\"\n              >\n                {t('sections.branding.fields.primary_color.label')}\n              </FormLabel>\n              <FormControl>\n                <ColorPickerInput {...field} disabled={readOnly} />\n              </FormControl>\n              <FormMessage\n                className=\"text-left text-sm text-(length:--font-size-paragraph)\"\n                role=\"alert\"\n              />\n              <FormDescription className=\"text-sm text-(length:--font-size-paragraph) font-normal text-left\">\n                {t('sections.branding.fields.primary_color.helper_text')}\n              </FormDescription>\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"branding.colors.page_background\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel\n                className=\"text-sm text-(length:--font-size-label) font-medium\"\n                htmlFor=\"page-background-color\"\n              >\n                {t('sections.branding.fields.page_background_color.label')}\n              </FormLabel>\n              <FormControl>\n                <ColorPickerInput {...field} disabled={readOnly} />\n              </FormControl>\n              <FormMessage\n                className=\"text-left text-sm text-(length:--font-size-paragraph)\"\n                role=\"alert\"\n              />\n              <FormDescription className=\"text-sm text-(length:--font-size-paragraph) font-normal text-left\">\n                {t('sections.branding.fields.page_background_color.helper_text')}\n              </FormDescription>\n            </FormItem>\n          )}\n        />\n      </Section>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/organization-management/organization-details/branding-details.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx",
      "content": "/**\n * Organization details form component.\n * @module organization-details\n * @internal\n */\n\nimport type {\n  OrganizationDetailsFormValues,\n  OrganizationPrivate,\n  OrganizationDetailsSchemas,\n} from '@auth0/universal-components-core';\nimport {\n  getComponentStyles,\n  createOrganizationDetailSchema,\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 { BrandingDetails } from '@/components/auth0/my-organization/shared/organization-management/organization-details/branding-details';\nimport { SettingsDetails } from '@/components/auth0/my-organization/shared/organization-management/organization-details/settings-details';\nimport { FormActions } from '@/components/auth0/shared/form-actions';\nimport { Card } from '@/components/ui/card';\nimport { Form } from '@/components/ui/form';\nimport { Separator } from '@/components/ui/separator';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { OrganizationDetailsProps } from '@/types/my-organization/organization-management/organization-details-types';\n\n/**\n * OrganizationDetails Component\n *\n * A presentation component that displays organization details including settings and branding fields.\n * This component renders form fields for organization configuration in a structured layout with sections.\n * All data, validation, and business logic are handled via props passed from parent components.\n *\n * @param props - Component props.\n * @param props.organization - Organization object\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.schema - Zod validation schema\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.formActions - Form action buttons configuration\n * @returns JSX element\n */\nexport function OrganizationDetails({\n  organization,\n  isLoading = false,\n  schema,\n  customMessages = {},\n  styling = {\n    variables: { common: {}, light: {}, dark: {} },\n    classes: {},\n  },\n  readOnly = false,\n  formActions,\n}: OrganizationDetailsProps): React.JSX.Element {\n  const { t } = useTranslator('organization_management.organization_details', customMessages);\n\n  const { isDarkMode } = useTheme();\n  const currentStyles = React.useMemo(\n    () => getComponentStyles(styling, isDarkMode),\n    [styling, isDarkMode],\n  );\n\n  const organizationDetailSchema = React.useMemo(() => {\n    const mergeFieldConfig = (field: keyof OrganizationDetailsSchemas, defaultError: string) => {\n      const fieldConfig = schema?.[field];\n      return fieldConfig\n        ? {\n            ...fieldConfig,\n            errorMessage: fieldConfig.errorMessage || defaultError,\n          }\n        : {\n            errorMessage: defaultError,\n          };\n    };\n\n    return createOrganizationDetailSchema({\n      name: mergeFieldConfig('name', t('sections.settings.fields.name.error')),\n      displayName: mergeFieldConfig(\n        'displayName',\n        t('sections.settings.fields.display_name.error'),\n      ),\n      primaryColor: mergeFieldConfig(\n        'primaryColor',\n        t('sections.branding.fields.primary_color.error'),\n      ),\n      logoURL: mergeFieldConfig('logoURL', t('sections.branding.fields.logo.error')),\n      backgroundColor: mergeFieldConfig(\n        'backgroundColor',\n        t('sections.branding.fields.page_background_color.error'),\n      ),\n    });\n  }, [t, schema]);\n\n  const formValues = React.useMemo(\n    (): OrganizationDetailsFormValues => ({\n      name: organization.name,\n      display_name: organization.display_name,\n      branding: {\n        logo_url: organization.branding.logo_url,\n        colors: {\n          primary: organization.branding.colors.primary,\n          page_background: organization.branding.colors.page_background,\n        },\n      },\n    }),\n    [organization],\n  );\n\n  const form = useForm<OrganizationDetailsFormValues>({\n    resolver: zodResolver(organizationDetailSchema),\n    mode: FORM_VALIDATION_MODE,\n    defaultValues: formValues,\n    values: formValues,\n  });\n\n  const hasUnsavedChanges = form.formState.isDirty;\n  const hasFormErrors = Object.keys(form.formState.errors).length > 0;\n\n  const onValid = React.useCallback(\n    async (values: OrganizationDetailsFormValues) => {\n      if (formActions?.nextAction?.onClick) {\n        const payload: OrganizationPrivate = {\n          ...values,\n          id: organization.id,\n        };\n\n        const success = await formActions.nextAction.onClick(payload);\n\n        if (success) {\n          form.reset(values, {\n            keepValues: true,\n            keepDirty: false,\n            keepTouched: false,\n          });\n        }\n      }\n    },\n    [formActions?.nextAction, organization.id, form],\n  );\n\n  const handlePreviousAction = React.useCallback(\n    (event: Event) => {\n      form.reset();\n      formActions?.previousAction?.onClick?.(event);\n    },\n    [form, formActions?.previousAction?.onClick],\n  );\n\n  if (isLoading) {\n    return <Spinner />;\n  }\n  return (\n    <div style={currentStyles.variables} className=\"w-full space-y-6\">\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(onValid)} className=\"space-y-6\">\n          <Card\n            data-testid=\"organization-details-card\"\n            className={cn('p-6', currentStyles.classes?.OrganizationDetails_Card)}\n          >\n            <div className=\"space-y-6\">\n              <SettingsDetails\n                form={form}\n                readOnly={readOnly}\n                customMessages={customMessages}\n                className={currentStyles.classes?.OrganizationDetails_SettingsDetails}\n              />\n\n              <Separator />\n\n              <BrandingDetails\n                form={form}\n                readOnly={readOnly}\n                customMessages={customMessages}\n                className={currentStyles.classes?.OrganizationDetails_BrandingDetails}\n              />\n\n              <FormActions\n                hasUnsavedChanges={hasUnsavedChanges}\n                isLoading={formActions.isLoading}\n                nextAction={{\n                  label: t('submit_button_label'),\n                  disabled:\n                    formActions?.nextAction?.disabled ||\n                    !hasUnsavedChanges ||\n                    formActions.isLoading ||\n                    readOnly ||\n                    hasFormErrors,\n                  type: 'submit',\n                }}\n                previousAction={{\n                  label: t('cancel_button_label'),\n                  disabled:\n                    formActions?.previousAction?.disabled || formActions.isLoading || readOnly,\n                  onClick: handlePreviousAction,\n                }}\n                showPrevious={formActions?.showPrevious}\n                unsavedChangesText={t('unsaved_changes_text')}\n                showUnsavedChanges={formActions?.showUnsavedChanges}\n                align={formActions?.align}\n                className={currentStyles.classes?.OrganizationDetails_FormActions}\n              />\n            </div>\n          </Card>\n        </form>\n      </Form>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx"
    },
    {
      "path": "src/components/auth0/my-organization/shared/organization-management/organization-details/settings-details.tsx",
      "content": "/**\n * Organization settings details form section.\n * @module settings-details\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { Section } from '@/components/auth0/shared/section';\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { SettingsDetailsProps } from '@/types/my-organization/organization-management/organization-details-types';\n\n/**\n * SettingsDetails Component\n *\n * Renders the organization settings section with name and display name fields.\n * This component is focused purely on the settings-related form fields.\n * @param props - Component props.\n * @param props.form - React Hook Form instance\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function SettingsDetails({\n  form,\n  readOnly = false,\n  customMessages = {},\n  className,\n}: SettingsDetailsProps): React.JSX.Element {\n  const { t } = useTranslator('organization_management.organization_details', customMessages);\n\n  return (\n    <div className={className}>\n      <Section title={t('sections.settings.title')}>\n        <FormField\n          control={form.control}\n          name=\"name\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel\n                className=\"text-sm text-(length:--font-size-label) font-medium\"\n                htmlFor=\"organization-name\"\n              >\n                {t('sections.settings.fields.name.label')}\n              </FormLabel>\n              <FormControl>\n                <TextField\n                  id=\"organization-name\"\n                  placeholder={t('sections.settings.fields.name.placeholder')}\n                  error={Boolean(form.formState.errors.name)}\n                  aria-invalid={Boolean(form.formState.errors.name)}\n                  readOnly={readOnly}\n                  {...field}\n                />\n              </FormControl>\n              <FormMessage\n                className=\"text-left text-sm text-(length:--font-size-paragraph)\"\n                role=\"alert\"\n              />\n              <FormDescription className=\"text-sm text-(length:--font-size-paragraph) font-normal text-left\">\n                {t('sections.settings.fields.name.helper_text')}\n              </FormDescription>\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"display_name\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel\n                className=\"text-sm text-(length:--font-size-label) font-medium\"\n                htmlFor=\"organization-display-name\"\n              >\n                {t('sections.settings.fields.display_name.label')}\n              </FormLabel>\n              <FormControl>\n                <TextField\n                  id=\"organization-display-name\"\n                  placeholder={t('sections.settings.fields.display_name.placeholder')}\n                  error={Boolean(form.formState.errors.display_name)}\n                  aria-invalid={Boolean(form.formState.errors.display_name)}\n                  readOnly={readOnly}\n                  {...field}\n                />\n              </FormControl>\n              <FormMessage\n                className=\"text-left text-sm text-(length:--font-size-paragraph)\"\n                role=\"alert\"\n              />\n              <FormDescription className=\"text-sm text-(length:--font-size-paragraph) font-normal text-left\">\n                {t('sections.settings.fields.display_name.helper_text')}\n              </FormDescription>\n            </FormItem>\n          )}\n        />\n      </Section>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/my-organization/shared/organization-management/organization-details/settings-details.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/section.tsx",
      "content": "/**\n * Section layout with title and actions.\n * @module section\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { cn } from '@/lib/utils';\n\nexport interface BaseActionProps extends Omit<CoreActionButton, 'icon' | 'onClick'> {\n  icon?: LucideIcon;\n  className?: string;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n  type: 'button';\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToggleActionProps extends Omit<BaseActionProps, 'type'> {\n  type: 'toggle';\n  pressed?: boolean;\n  onPressedChange: (pressed: boolean) => void;\n  'aria-label': string;\n}\n\nexport type ActionProps = ButtonActionProps | ToggleActionProps;\n\ninterface SectionProps {\n  title?: string;\n  description?: string;\n  children: React.ReactNode;\n  actions?: ActionProps[];\n  className?: string;\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 ToggleAction: React.FC<ToggleActionProps> = ({\n  icon: Icon,\n  className,\n  label,\n  'aria-label': ariaLabel,\n  pressed,\n  onPressedChange,\n  disabled,\n  variant,\n  size,\n}) => (\n  <Toggle\n    pressed={pressed}\n    onPressedChange={onPressedChange}\n    disabled={disabled}\n    variant={variant === 'outline' ? 'outline' : 'default'}\n    size={size === 'icon' || size === 'xs' ? 'sm' : size}\n    className={cn('flex items-center gap-2', className)}\n    aria-label={ariaLabel}\n  >\n    {Icon && <Icon className=\"h-4 w-4 flex-shrink-0\" aria-hidden=\"true\" />}\n    {label && <span className=\"truncate\">{label}</span>}\n  </Toggle>\n);\n\n/**\n *\n * @param props - Component props.\n * @param props.title - The title text\n * @param props.description - The description text\n * @param props.children - Child elements to render\n * @param props.actions - Action buttons or elements\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function Section({\n  title,\n  description,\n  children,\n  actions,\n  className,\n}: SectionProps): React.JSX.Element {\n  const renderAction = (action: ActionProps, index: number) => {\n    const key = `action-${index}`;\n    return action.type === 'toggle' ? (\n      <ToggleAction key={key} {...action} />\n    ) : (\n      <ButtonAction key={key} {...action} />\n    );\n  };\n\n  return (\n    <div className={cn('space-y-6', className)}>\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col min-w-0 flex-1 space-y-2\">\n          {title && (\n            <h3\n              className={cn(\n                'text-lg text-foreground text-(length:--font-size-subtitle) font-semibold mb-1 text-left',\n              )}\n            >\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p\n              className={cn(\n                'text-sm text-muted-foreground text-left text-(length:--font-size-paragraph)',\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\n      <div className=\"space-y-6\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/auth0/shared/section.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/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/color-picker.tsx",
      "content": "/**\n * Color picker component with HSV controls.\n * @module color-picker\n * @internal\n */\n\n'use client';\n\nimport { hexToHsva, hsvaToHex, hsvaToRgba } from '@uiw/color-convert';\nimport { Alpha, Hue, Saturation } from '@uiw/react-color';\nimport { PipetteIcon } from 'lucide-react';\nimport React, {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentProps,\n  type HTMLAttributes,\n} from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { TextField } from '@/components/ui/text-field';\nimport { cn } from '@/lib/utils';\n\ninterface HsvaColor {\n  h: number;\n  s: number;\n  v: number;\n  a: number;\n}\n\ninterface ColorPickerContextValue {\n  hsva: HsvaColor;\n  mode: string;\n  setMode: (mode: string) => void;\n  setHsva: (hsva: HsvaColor) => void;\n  onChange?: (value: string) => void;\n}\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(undefined);\n\nexport const useColorPicker = (): ColorPickerContextValue => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport type ColorPickerProps = {\n  value?: HsvaColor;\n  defaultValue?: HsvaColor;\n  onChange?: (hex: string) => void;\n  onChangeHsva?: (hsva: HsvaColor) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;\n\nexport const ColorPicker = ({\n  value,\n  defaultValue = { h: 0, s: 0, v: 0, a: 1 },\n  onChange,\n  onChangeHsva,\n  className,\n  ...props\n}: ColorPickerProps) => {\n  const [mode, setMode] = useState('hex');\n  const [hsva, setHsva] = useState<HsvaColor>(() => {\n    try {\n      if (value && typeof value === 'object') {\n        return value;\n      } else if (defaultValue && typeof defaultValue === 'object') {\n        return defaultValue;\n      }\n      return { h: 0, s: 0, v: 0, a: 1 };\n    } catch {\n      return { h: 0, s: 0, v: 0, a: 1 };\n    }\n  });\n\n  useEffect(() => {\n    if (value !== undefined) {\n      try {\n        let newHsva: HsvaColor;\n        if (value && typeof value === 'object') {\n          newHsva = value;\n        } else {\n          return;\n        }\n\n        if (JSON.stringify(newHsva) !== JSON.stringify(hsva)) {\n          setHsva(newHsva);\n        }\n      } catch (error) {\n        // Intentionally ignore parse errors while avoiding an empty catch block\n        void error;\n      }\n    }\n  }, [value, hsva]);\n\n  const handleHsvaChange = useCallback(\n    (next: HsvaColor) => {\n      setHsva(next);\n      onChangeHsva?.(next);\n      onChange?.(hsvaToHex(next));\n    },\n    [onChangeHsva, onChange],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      hsva,\n      setHsva: handleHsvaChange,\n      onChange,\n      onChangeHsva,\n      mode,\n      setMode,\n    }),\n    [hsva, handleHsvaChange, onChange, onChangeHsva, mode, setMode],\n  );\n\n  return (\n    <ColorPickerContext.Provider value={contextValue}>\n      <div className={cn('flex size-full flex-col gap-4', className)} {...props} />\n    </ColorPickerContext.Provider>\n  );\n};\n\nexport type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerSelection = memo(({ className, ...props }: ColorPickerSelectionProps) => {\n  const { hsva, setHsva } = useColorPicker();\n\n  const handleSaturationChange = useCallback(\n    (newColor: HsvaColor) => {\n      const preservedHue = newColor.s < 1 || newColor.v < 1 ? hsva.h : newColor.h;\n      setHsva({ ...hsva, s: newColor.s, v: newColor.v, h: preservedHue });\n    },\n    [setHsva, hsva],\n  );\n\n  return (\n    <div className={cn('relative size-full', className)} {...props}>\n      <Saturation\n        hsva={hsva}\n        pointer={({ prefixCls, left, top, color }) => (\n          <div\n            className={cn(\n              'absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white',\n              prefixCls,\n            )}\n            style={{ left, top, backgroundColor: color }}\n          />\n        )}\n        onChange={(newColor) => handleSaturationChange(newColor)}\n        radius={6}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      />\n    </div>\n  );\n});\nColorPickerSelection.displayName = 'ColorPickerSelection';\n\nexport type ColorPickerHueProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) => {\n  const { hsva, setHsva } = useColorPicker();\n\n  const handleHueChange = useCallback(\n    (newHue: { h: number }) => {\n      setHsva({ ...hsva, ...{ h: newHue.h } });\n    },\n    [setHsva, hsva],\n  );\n\n  return (\n    <div className={cn('relative flex h-4 w-full', className)} {...props}>\n      <Hue\n        hue={hsva.h}\n        pointer={({ prefixCls, left, top, color }) => (\n          <div\n            className={cn(\n              'bg-background shadow-bevel-xs border-border border-px absolute h-6 w-1.5 -translate-x-1/2 -translate-y-1 rounded-full',\n              prefixCls,\n            )}\n            style={{ left, top, backgroundColor: color }}\n          />\n        )}\n        onChange={(newHue) => handleHueChange(newHue)}\n        radius={6}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      />\n    </div>\n  );\n};\nColorPickerHue.displayName = 'ColorPickerHue';\n\nexport type ColorPickerAlphaProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps) => {\n  const { hsva, setHsva } = useColorPicker();\n\n  const handleAlphaChange = useCallback(\n    (newAlpha: { a: number }) => {\n      setHsva({ ...hsva, ...{ a: newAlpha.a } });\n    },\n    [setHsva, hsva],\n  );\n\n  return (\n    <div className={cn('relative flex h-4 w-full', className)} {...props}>\n      <Alpha\n        hsva={hsva}\n        pointer={({ prefixCls, left, top, color }) => (\n          <div\n            className={cn(\n              'bg-background shadow-bevel-xs border-border border-px absolute h-6 w-1.5 -translate-x-1/2 -translate-y-1 rounded-full',\n              prefixCls,\n            )}\n            style={{ left, top, backgroundColor: color }}\n          />\n        )}\n        radius={6}\n        onChange={handleAlphaChange}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      />\n    </div>\n  );\n};\nColorPickerAlpha.displayName = 'ColorPickerAlpha';\n\nexport type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;\n\nexport const ColorPickerEyeDropper = ({ className, ...props }: ColorPickerEyeDropperProps) => {\n  const { setHsva } = useColorPicker();\n\n  type EyeDropperConstructorType = new () => {\n    open: () => Promise<{ sRGBHex: string }>;\n  };\n\n  const handleEyeDropper = async () => {\n    try {\n      const EyeDropperConstructor = (\n        window as unknown as { EyeDropper?: EyeDropperConstructorType }\n      ).EyeDropper;\n      if (!EyeDropperConstructor) {\n        console.warn('EyeDropper API is not supported in this browser');\n        return;\n      }\n\n      const eyeDropper = new EyeDropperConstructor();\n      const result = await eyeDropper.open();\n      if (result && typeof result.sRGBHex === 'string') {\n        const newHsva = hexToHsva(result.sRGBHex);\n        setHsva(newHsva);\n      }\n    } catch (error) {\n      console.error('EyeDropper failed:', error);\n    }\n  };\n\n  return (\n    <Button\n      className={cn('text-muted-foreground shrink-0 rounded-lg shadow-none', className)}\n      onClick={handleEyeDropper}\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PipetteIcon size={20} />\n    </Button>\n  );\n};\nColorPickerEyeDropper.displayName = 'ColorPickerEyeDropper';\n\nexport type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;\n\nconst formats = ['hex', 'rgb', 'hsl'];\nexport const ColorPickerOutput = ({ ...props }: ColorPickerOutputProps) => {\n  const { mode, setMode } = useColorPicker();\n\n  return (\n    <Select onValueChange={setMode} value={mode}>\n      <SelectTrigger className=\"h-8 w-20 shrink-0 rounded-lg text-xs\" {...props}>\n        <SelectValue placeholder={mode.toUpperCase()} />\n      </SelectTrigger>\n      <SelectContent>\n        {formats.map((format) => (\n          <SelectItem className=\"text-xs\" key={format} value={format}>\n            {format.toUpperCase()}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n};\nColorPickerOutput.displayName = 'ColorPickerOutput';\n\ntype PercentageInputProps = ComponentProps<typeof TextField>;\n\nconst PercentageInput = ({ className, ...props }: PercentageInputProps) => {\n  return (\n    <div className=\"relative\">\n      <TextField readOnly type=\"text\" {...props} className={cn('h-8 w-20 rounded-lg', className)} />\n      <span className=\"text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2 text-xs\">\n        %\n      </span>\n    </div>\n  );\n};\n\nexport type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement> & {\n  alpha?: boolean;\n};\nexport const ColorPickerFormat = ({ className, alpha, ...props }: ColorPickerFormatProps) => {\n  const { hsva, mode } = useColorPicker();\n\n  if (mode === 'hex') {\n    const hex = hsvaToHex(hsva);\n    const alphaValue = Math.round(hsva.a * 100);\n    return (\n      <div className={cn('relative flex w-full shrink items-center gap-1', className)} {...props}>\n        <TextField\n          readOnly\n          type=\"text\"\n          value={hex}\n          className={cn('h-8 flex-1 rounded-lg', className)}\n        />\n        {alpha && <PercentageInput value={alphaValue} />}\n      </div>\n    );\n  }\n\n  if (mode === 'rgb') {\n    const rgba = hsvaToRgba(hsva);\n    const alphaValue = Math.round(hsva.a * 100);\n    return (\n      <div className={cn('flex shrink items-center gap-1', className)} {...props}>\n        {[rgba.r, rgba.g, rgba.b].map((value, index) => (\n          <TextField\n            className={cn('h-8 flex-1 rounded-lg', className)}\n            key={index}\n            readOnly\n            type=\"text\"\n            value={Math.round(value)}\n          />\n        ))}\n        {alpha && <PercentageInput value={alphaValue} />}\n      </div>\n    );\n  }\n\n  if (mode === 'hsl') {\n    const { h, s, v, a } = hsva;\n    const l = (v * (100 - s)) / 100;\n    const sPercent = s;\n    const lPercent = l;\n    const alphaValue = Math.round(a * 100);\n\n    return (\n      <div className={cn('flex shrink items-center gap-1', className)} {...props}>\n        {[Math.round(h), Math.round(sPercent), Math.round(lPercent)].map((value, index) => (\n          <TextField\n            className={cn('h-8 flex-1 rounded-lg', className)}\n            key={index}\n            readOnly\n            type=\"text\"\n            value={value}\n          />\n        ))}\n        {alpha && <PercentageInput value={alphaValue} />}\n      </div>\n    );\n  }\n\n  return null;\n};\nColorPickerFormat.displayName = 'ColorPickerFormat';\n\nexport type ColorPickerInputProps = {\n  name?: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  onChangeHsva?: (hsva: HsvaColor) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: 'default' | 'input';\n  children?: React.ReactNode;\n  showTextInput?: boolean;\n  showColorPicker?: boolean;\n  alpha?: boolean;\n};\n\nexport const ColorPickerInput = ({\n  name,\n  value,\n  defaultValue = '#000000',\n  onChange,\n  onChangeHsva,\n  placeholder = 'Enter color value',\n  className,\n  disabled,\n  variant = 'input',\n  children,\n  showTextInput = true,\n  showColorPicker = true,\n  alpha = false,\n  ...props\n}: ColorPickerInputProps) => {\n  const [open, setOpen] = useState(false);\n  const [hsva, setHsva] = useState<HsvaColor>(() => {\n    try {\n      if (typeof value === 'string') {\n        return hexToHsva(value);\n      } else if (value && typeof value === 'object') {\n        return value;\n      } else if (typeof defaultValue === 'string') {\n        return hexToHsva(defaultValue);\n      } else if (defaultValue && typeof defaultValue === 'object') {\n        return defaultValue;\n      }\n      return { h: 0, s: 0, v: 0, a: 1 };\n    } catch {\n      return { h: 0, s: 0, v: 0, a: 1 };\n    }\n  });\n  const [textValue, setTextValue] = useState(() => {\n    try {\n      if (typeof value === 'string') {\n        return value;\n      } else if (value && typeof value === 'object') {\n        return hsvaToHex(value);\n      } else if (typeof defaultValue === 'string') {\n        return defaultValue;\n      } else if (defaultValue && typeof defaultValue === 'object') {\n        return hsvaToHex(defaultValue);\n      }\n      return '#000000';\n    } catch {\n      return '#000000';\n    }\n  });\n  const [isValidColor, setIsValidColor] = useState(true);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      try {\n        let newHsva: HsvaColor;\n        if (typeof value === 'string') {\n          newHsva = hexToHsva(value);\n        } else if (value && typeof value === 'object') {\n          newHsva = value;\n        } else {\n          return;\n        }\n        setHsva(newHsva);\n        setTextValue(hsvaToHex(newHsva));\n      } catch (error) {\n        // Intentionally ignore parse errors while avoiding an empty catch block\n        void error;\n      }\n    }\n  }, [value]);\n\n  const currentValue = hsvaToHex(hsva);\n\n  const validateColor = (colorValue: string): boolean => {\n    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(colorValue);\n  };\n\n  /**\n   * Formats hex color input with smart expansion rules:\n   * - Single letter: repeat 6 times (e.g., 'a' -> '#aaaaaa')\n   * - Two letters: repeat 3 times (e.g., 'ab' -> '#ababab')\n   * - Three letters: expand each to 2 (e.g., 'abc' -> '#aabbcc')\n   * - Automatically adds # prefix and filters invalid characters\n   */\n  const formatHexInput = (input: string): string => {\n    let cleanInput = input.replace(/^#+/, '').toLowerCase();\n\n    cleanInput = cleanInput.replace(/[^0-9a-f]/g, '');\n\n    if (cleanInput.length === 0) return '';\n\n    if (cleanInput.length === 1) {\n      cleanInput = cleanInput.repeat(6);\n    } else if (cleanInput.length === 2) {\n      cleanInput = cleanInput.repeat(3);\n    } else if (cleanInput.length === 3) {\n      cleanInput = cleanInput\n        .split('')\n        .map((char) => char + char)\n        .join('');\n    } else if (cleanInput.length > 6) {\n      cleanInput = cleanInput.substring(0, 6);\n    }\n\n    return `#${cleanInput}`;\n  };\n\n  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const rawValue = event.target.value;\n\n    setTextValue(rawValue);\n    setIsValidColor(true);\n  };\n\n  const handleTextKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n\n      const formattedValue = formatHexInput(textValue);\n      setTextValue(formattedValue);\n\n      const isValid = validateColor(formattedValue);\n      setIsValidColor(isValid);\n\n      if (isValid) {\n        try {\n          const newHsva = hexToHsva(formattedValue);\n          const preservedHsva = {\n            ...newHsva,\n            h: newHsva.s < 1 || newHsva.v < 1 ? hsva.h : newHsva.h,\n          };\n          setHsva(preservedHsva);\n          onChangeHsva?.(preservedHsva);\n          if (onChange) {\n            onChange(hsvaToHex(preservedHsva));\n          }\n        } catch {\n          // Invalid color, keep current\n        }\n      }\n    }\n  };\n\n  const handleTextBlur = () => {\n    const formattedValue = formatHexInput(textValue);\n    setTextValue(formattedValue);\n\n    const isValid = validateColor(formattedValue);\n    setIsValidColor(isValid);\n\n    if (isValid) {\n      try {\n        const newHsva = hexToHsva(formattedValue);\n\n        const preservedHsva = {\n          ...newHsva,\n          h: newHsva.s < 1 || newHsva.v < 1 ? hsva.h : newHsva.h,\n        };\n        setHsva(preservedHsva);\n        onChangeHsva?.(preservedHsva);\n        if (onChange) {\n          onChange(hsvaToHex(preservedHsva));\n        }\n      } catch (error) {\n        // Intentionally ignore parse errors while avoiding an empty catch block\n        void error;\n      }\n    } else if (textValue) {\n      setTextValue(hsvaToHex(hsva));\n      setIsValidColor(true);\n    }\n  };\n\n  const handlePickerOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n\n    if (!isOpen) {\n      setTextValue(hsvaToHex(hsva));\n    }\n  };\n\n  if (variant === 'default') {\n    return (\n      <ColorPicker\n        value={hsva}\n        onChangeHsva={(next) => {\n          setHsva(next);\n          onChangeHsva?.(next);\n          onChange?.(hsvaToHex(next));\n        }}\n        className={className}\n        {...props}\n      >\n        {children}\n      </ColorPicker>\n    );\n  }\n\n  return (\n    <div className={cn(className)} {...props}>\n      {showTextInput && (\n        <div className={cn('relative', className)}>\n          <TextField\n            ref={inputRef}\n            name={name}\n            value={textValue}\n            onChange={handleTextChange}\n            onKeyDown={handleTextKeyDown}\n            onBlur={handleTextBlur}\n            placeholder={placeholder}\n            disabled={disabled}\n            error={!isValidColor && textValue !== ''}\n            startAdornment={\n              showColorPicker ? (\n                <div className=\"mx-1 flex h-6 w-6 items-center justify-center\">\n                  <button\n                    ref={triggerRef}\n                    type=\"button\"\n                    className=\"hover:ring-primary/20 border-primary/10 h-5 w-5 cursor-pointer items-center justify-center rounded-md border transition-all hover:ring-2\"\n                    style={{ backgroundColor: isValidColor ? currentValue : '#ccc' }}\n                    onClick={() => setOpen(!open)}\n                    disabled={disabled}\n                  />\n                </div>\n              ) : (\n                <div\n                  className=\"h-6 w-6 rounded border\"\n                  style={{ backgroundColor: isValidColor ? currentValue : '#ccc' }}\n                />\n              )\n            }\n          />\n        </div>\n      )}\n      {showColorPicker && (\n        <Popover open={open} onOpenChange={handlePickerOpenChange}>\n          <PopoverTrigger ref={triggerRef}>\n            <div className=\"sr-only\" />\n          </PopoverTrigger>\n\n          <PopoverContent\n            className=\"w-full max-w-72 p-0\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={0}\n          >\n            <div className=\"p-4\">\n              <ColorPicker\n                value={hsva}\n                onChangeHsva={(next) => {\n                  setHsva(next);\n                  onChangeHsva?.(next);\n                }}\n                onChange={(hex) => {\n                  onChange?.(hex);\n                }}\n              >\n                {children || (\n                  <div className=\"space-y-2\">\n                    <ColorPickerSelection className=\"h-64 w-full\" />\n                    <div className=\"flex items-center justify-center gap-4\">\n                      <div className=\"flex flex-1 flex-col gap-2\">\n                        <ColorPickerHue />\n                        {alpha && <ColorPickerAlpha />}\n                      </div>\n\n                      <ColorPickerEyeDropper />\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <ColorPickerOutput />\n                      <ColorPickerFormat alpha={alpha} />\n                    </div>\n                  </div>\n                )}\n              </ColorPicker>\n            </div>\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/ui/color-picker.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/image-preview-field.tsx",
      "content": "/**\n * Text field with image preview.\n * @module image-preview-field\n * @internal\n */\n\nimport { ImageIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { TextField } from '@/components/ui/text-field';\nimport type { TextFieldProps } from '@/components/ui/text-field';\nimport { cn } from '@/lib/utils';\n\nexport interface ImagePreviewFieldProps extends Omit<TextFieldProps, 'onChange'> {\n  previewClassName?: string;\n  placeholder?: string;\n  previewPlaceholder?: string;\n  previewIcon?: React.ReactNode;\n  imgSizes?: string;\n  imgWidth?: number;\n  imgHeight?: number;\n  onImageLoad?: (imageUrl: string) => void;\n  onImageError?: (error: Error) => void;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction ImagePreviewField({\n  placeholder = 'Enter image URL',\n  previewPlaceholder = 'Paste an image URL to see a preview',\n  previewIcon = <ImageIcon size={24} />,\n  previewClassName,\n  imgSizes,\n  imgWidth,\n  imgHeight,\n  onImageLoad,\n  onImageError,\n  onChange,\n  value,\n  error,\n  ...textFieldProps\n}: ImagePreviewFieldProps) {\n  const [imageUrl, setImageUrl] = React.useState<string>(value?.toString() || '');\n  const [imageError, setImageError] = React.useState<boolean>(false);\n  const [isValidUrl, setIsValidUrl] = React.useState<boolean>(true);\n\n  const isValidImageUrl = (url: string): boolean => {\n    if (!url.trim()) return true;\n\n    try {\n      const urlObj = new URL(url);\n      return urlObj.protocol === 'http:' || urlObj.protocol === 'https:';\n    } catch {\n      return false;\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    const isValid = isValidImageUrl(newValue);\n\n    setIsValidUrl(isValid);\n    setImageUrl(newValue);\n    setImageError(false);\n\n    onChange?.(e);\n  };\n\n  const handleImageLoad = () => {\n    setImageError(false);\n    onImageLoad?.(imageUrl);\n  };\n\n  const handleImageError = () => {\n    setImageError(true);\n    onImageError?.(new Error('Failed to load image'));\n  };\n\n  const hasError = error || (!isValidUrl && imageUrl.trim() !== '') || imageError;\n  const showPreview = imageUrl.trim() !== '' && isValidUrl && !imageError;\n  const sanitizedImageUrl = showPreview ? encodeURI(imageUrl) : '';\n\n  return (\n    <div className=\"space-y-2\">\n      <div\n        className={cn(\n          'border-border/50 bg-muted/50 flex h-24 w-full items-center justify-center overflow-hidden rounded-lg border',\n          showPreview && 'bg-background p-0',\n          previewClassName,\n        )}\n      >\n        {showPreview ? (\n          <img\n            loading=\"lazy\"\n            srcSet={sanitizedImageUrl}\n            src={sanitizedImageUrl}\n            sizes={imgSizes}\n            decoding=\"async\"\n            alt=\"Preview\"\n            className=\"animate-in fade-in-0 max-h-24 max-w-24 object-contain blur-none transition-all duration-200 ease-in-out\"\n            height={imgHeight}\n            width={imgWidth}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        ) : (\n          <div className=\"text-muted-foreground flex h-full w-full flex-col items-center justify-center gap-2 text-sm\">\n            {previewIcon}\n            {imageUrl.trim() !== '' && !isValidUrl ? 'Invalid URL' : previewPlaceholder}\n          </div>\n        )}\n      </div>\n\n      <TextField\n        {...textFieldProps}\n        value={value}\n        onChange={handleChange}\n        error={hasError}\n        placeholder={placeholder}\n      />\n    </div>\n  );\n}\n\nexport { ImagePreviewField };\n",
      "type": "registry:component",
      "target": "components/ui/image-preview-field.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/popover.tsx",
      "content": "/**\n * Popover component using Radix primitives.\n * @module popover\n * @internal\n */\n\n'use client';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nfunction Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\nfunction PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} asChild />;\n}\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  const portalContainer = usePortalContainer();\n  return (\n    <PopoverPrimitive.Portal container={portalContainer}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 shadow-bevel-xl 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) overflow-hidden rounded-3xl ring-0 outline-hidden duration-150 ease-in-out outline-none focus:outline-none',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\nfunction PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n",
      "type": "registry:component",
      "target": "components/ui/popover.tsx"
    },
    {
      "path": "src/components/ui/select.tsx",
      "content": "/**\n * Select component using Radix primitives.\n * @module select\n * @internal\n */\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } 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 Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <SelectPrimitive.Trigger data-slot=\"select-trigger\" data-size={size} asChild {...props}>\n      <Button\n        variant=\"outline\"\n        className={cn(\n          \"border-border/25 data-[placeholder]:text-primary text-input-foreground shadow-input-resting hover:shadow-input-hover hover:border-border/0 focus-within:outline-primary focus-within:shadow-input-hover bg-input disabled:bg-muted data-[state=open]:focus-within:outline-primary data-[state=open]:focus-within:shadow-input-hover [&_svg:not([class*='text-'])]:text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full justify-between px-3 whitespace-nowrap ring-4 ring-transparent outline-4 disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n          className,\n        )}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon\n            className={cn('text-primary size-4 transition-transform duration-200')}\n          />\n        </SelectPrimitive.Icon>\n      </Button>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  const portalContainer = usePortalContainer();\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      <SelectPrimitive.Content\n        className={cn(\n          'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 shadow-bevel-xl 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 z-[1000] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-3xl ring-0 duration-300 ease-in-out outline-none focus:outline-none',\n          className,\n        )}\n        position={position}\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={8}\n        data-slot=\"select-content\"\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'hover:bg-muted/50 focus:bg-muted data-[highlighted]:bg-muted/75 data-[state=checked]:bg-muted relative flex w-full items-center justify-between rounded-2xl px-2 py-1.5 text-sm outline-hidden select-none',\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"text-primary size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('bg-border pointer-events-none mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn('flex cursor-default items-center justify-center py-1', className)}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn('flex cursor-default items-center justify-center py-1', className)}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n",
      "type": "registry:component",
      "target": "components/ui/select.tsx"
    },
    {
      "path": "src/components/ui/separator.tsx",
      "content": "/**\n * Visual separator component.\n * @module separator\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Separator({\n  className,\n  orientation = 'horizontal',\n  decorative = true,\n  ...props\n}: React.ComponentProps<'hr'> & { orientation?: 'horizontal' | 'vertical'; decorative?: boolean }) {\n  return (\n    <div\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      role={decorative ? 'none' : 'separator'}\n      className={cn(\n        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n",
      "type": "registry:component",
      "target": "components/ui/separator.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/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/toggle.tsx",
      "content": "/**\n * Toggle button component.\n * @module toggle\n * @internal\n */\n\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst toggleVariants = cva(\n  \"hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:shadow-bevel-sm focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-hidden 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          'hover:bg-muted data-[state=on]:bg-muted data-[state=on]:text-primary bg-transparent',\n        outline:\n          'data-[state=on]:bg-muted data-[state=on]:text-primary-foreground hover:bg-accent hover:text-accent-foreground shadow-input-resting bg-transparent',\n      },\n      size: {\n        default: 'h-9 min-w-9 px-2',\n        sm: 'h-8 min-w-8 px-1.5',\n        lg: 'h-10 min-w-10 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  variant?: 'default' | 'outline';\n  size?: 'sm' | 'default' | 'lg';\n}\n\nfunction ToggleRoot({\n  className,\n  children,\n  pressed,\n  onPressedChange,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ToggleProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      data-state={pressed ? 'on' : 'off'}\n      data-variant={variant}\n      onClick={() => onPressedChange?.(!pressed)}\n      className={cn(toggleVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction Toggle(props: ToggleProps) {\n  return <ToggleRoot {...props} />;\n}\n\nexport { Toggle };\n",
      "type": "registry:component",
      "target": "components/ui/toggle.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-organization-details-edit.ts",
      "content": "/**\n * Organization details edit hook.\n * @module use-organization-details-edit\n */\n\nimport {\n  OrganizationDetailsFactory,\n  OrganizationDetailsMappers,\n  type OrganizationPrivate,\n} from '@auth0/universal-components-core';\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { showToast } from '@/components/auth0/shared/toast';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useErrorHandler } from '@/hooks/shared/use-error-handler';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type {\n  UseOrganizationDetailsEditOptions,\n  UseOrganizationDetailsEditResult,\n} from '@/types/my-organization/organization-management/organization-details-edit-types';\nimport type { OrganizationDetailsFormActions } from '@/types/my-organization/organization-management/organization-details-types';\n\nconst organizationDetailsQueryKeys = {\n  all: ['organization-details'] as const,\n  details: () => [...organizationDetailsQueryKeys.all, 'details'] as const,\n};\n\nconst EMPTY_ORGANIZATION = OrganizationDetailsFactory.create();\n\n/**\n * Hook for fetching and updating organization details.\n * @param props - Component props.\n * @param props.saveAction - Configuration for the save action\n * @param props.cancelAction - Configuration for the cancel action\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns Hook state and methods\n */\nexport function useOrganizationDetailsEdit({\n  saveAction,\n  cancelAction,\n  readOnly = false,\n  customMessages = {},\n}: UseOrganizationDetailsEditOptions): UseOrganizationDetailsEditResult {\n  const { t } = useTranslator('organization_management.organization_details_edit', customMessages);\n  const { coreClient } = useCoreClient();\n  const queryClient = useQueryClient();\n\n  const isInitializing = !coreClient;\n  const handleError = useErrorHandler();\n\n  const organizationQuery = useQuery({\n    queryKey: organizationDetailsQueryKeys.details(),\n    queryFn: async () => {\n      const response = await coreClient!.getMyOrganizationApiClient().organizationDetails.get();\n      return OrganizationDetailsMappers.fromAPI(response);\n    },\n    enabled: !!coreClient,\n  });\n\n  useEffect(() => {\n    if (organizationQuery.error) {\n      handleError(organizationQuery.error, {\n        fallbackMessage: t('organization_changes_error_message_generic'),\n      });\n    }\n  }, [organizationQuery.error, t, handleError]);\n\n  const organization = organizationQuery.data ?? EMPTY_ORGANIZATION;\n\n  const updateMutation = useMutation({\n    mutationFn: async (data: OrganizationPrivate) => {\n      const updateData = OrganizationDetailsMappers.toAPI(data);\n      const response = await coreClient!\n        .getMyOrganizationApiClient()\n        .organizationDetails.update(updateData);\n\n      return OrganizationDetailsMappers.fromAPI(response);\n    },\n    onSuccess: (updatedOrg, variables) => {\n      queryClient.setQueryData(organizationDetailsQueryKeys.details(), updatedOrg);\n\n      showToast({\n        type: 'success',\n        message: t('save_organization_changes_message', {\n          organizationName: variables.display_name || variables.name,\n        }),\n      });\n\n      saveAction?.onAfter?.(variables);\n    },\n    onError: (error) => {\n      handleError(error, { fallbackMessage: t('organization_changes_error_message_generic') });\n    },\n  });\n\n  const hasData = !!organizationQuery.data;\n  const isActionDisabled = updateMutation.isPending || isInitializing;\n\n  const fetchOrgDetails = useCallback(async (): Promise<void> => {\n    await queryClient.getQueryData(organizationDetailsQueryKeys.details());\n  }, [queryClient]);\n\n  const updateOrgDetails = useCallback(\n    async (data: OrganizationPrivate): Promise<boolean> => {\n      if (saveAction?.onBefore && !saveAction.onBefore(data)) {\n        return false;\n      }\n\n      try {\n        await updateMutation.mutateAsync(data);\n        return true;\n      } catch {\n        return false;\n      }\n    },\n    [updateMutation, saveAction],\n  );\n\n  const formActions = useMemo(\n    (): OrganizationDetailsFormActions => ({\n      isLoading: updateMutation.isPending,\n      previousAction: {\n        disabled: cancelAction?.disabled || readOnly || !hasData || isActionDisabled,\n        onClick: () => cancelAction?.onAfter?.(organization),\n      },\n      nextAction: {\n        disabled: saveAction?.disabled || readOnly || !hasData || isActionDisabled,\n        onClick: updateOrgDetails,\n      },\n    }),\n    [\n      updateOrgDetails,\n      readOnly,\n      cancelAction,\n      saveAction?.disabled,\n      hasData,\n      isActionDisabled,\n      organization,\n    ],\n  );\n\n  return {\n    organization,\n    isFetchLoading: organizationQuery.isFetching,\n    isSaveLoading: updateMutation.isPending,\n    isInitializing,\n    formActions,\n    fetchOrgDetails,\n    updateOrgDetails,\n  };\n}\n",
      "type": "registry:component",
      "target": "hooks/my-organization/use-organization-details-edit.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/organization-management/organization-details-edit-types.ts",
      "content": "/**\n * Organization details edit types.\n * @module organization-details-edit-types\n */\n\nimport type {\n  BlockComponentSharedProps,\n  OrganizationDetailsSchemas,\n  ComponentAction,\n  BackButton,\n  OrganizationPrivate,\n  OrganizationDetailsEditMessages,\n  ComponentStyling,\n} from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport type React from 'react';\n\nimport type {\n  OrganizationDetailsClasses,\n  OrganizationDetailsFormActions,\n} from '@/types/my-organization/organization-management/organization-details-types';\n\n/** Type alias for organization edit CSS class overrides. */\nexport type OrganizationEditClasses = OrganizationDetailsClasses;\n\n/**\n * Schemas that can be used to override default schemas.\n */\nexport type OrganizationDetailsEditSchemas = {\n  details?: OrganizationDetailsSchemas;\n};\n\nexport interface OrganizationEditSaveAction extends ComponentAction<OrganizationPrivate> {}\n\nexport interface OrganizationEditBackButton extends Omit<BackButton, 'onClick'> {\n  icon?: LucideIcon;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface OrganizationDetailsEditProps\n  extends BlockComponentSharedProps<\n    OrganizationDetailsEditMessages,\n    OrganizationEditClasses,\n    OrganizationDetailsEditSchemas\n  > {\n  saveAction?: ComponentAction<OrganizationPrivate>;\n  cancelAction?: Omit<ComponentAction<OrganizationPrivate>, 'onBefore'>;\n  hideHeader?: boolean;\n  backButton?: OrganizationEditBackButton;\n}\nexport interface UseOrganizationDetailsEditOptions {\n  saveAction?: OrganizationDetailsEditProps['saveAction'];\n  cancelAction?: OrganizationDetailsEditProps['cancelAction'];\n  readOnly?: OrganizationDetailsEditProps['readOnly'];\n  customMessages?: OrganizationDetailsEditProps['customMessages'];\n}\n\nexport interface UseOrganizationDetailsEditResult {\n  organization: OrganizationPrivate;\n  isFetchLoading: boolean;\n  isSaveLoading: boolean;\n  isInitializing: boolean;\n  formActions: OrganizationDetailsFormActions;\n  fetchOrgDetails: () => Promise<void>;\n  updateOrgDetails: (data: OrganizationPrivate) => Promise<boolean>;\n}\n\nexport interface OrganizationDetailsEditViewProps {\n  organization: OrganizationPrivate;\n  schema: Partial<OrganizationDetailsEditSchemas> | undefined;\n  styling: ComponentStyling<OrganizationDetailsClasses>;\n  customMessages: OrganizationDetailsEditProps['customMessages'];\n  readOnly: OrganizationDetailsEditProps['readOnly'];\n  hideHeader: boolean;\n  backButton?: OrganizationEditBackButton;\n  formActions: OrganizationDetailsFormActions;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/organization-management/organization-details-edit-types.ts"
    },
    {
      "path": "src/types/my-organization/organization-management/organization-details-types.ts",
      "content": "/**\n * Organization details types.\n * @module organization-details-types\n */\n\nimport type {\n  SharedComponentProps,\n  OrganizationPrivate,\n  OrganizationDetailsSchemas as CoreOrganizationDetailsSchemas,\n  OrganizationDetailsFormValues,\n  OrganizationDetailsMessages,\n} from '@auth0/universal-components-core';\nimport type { UseFormReturn } from 'react-hook-form';\n\nimport type { FormActionsProps } from '@/components/auth0/shared/form-actions';\n\n/**\n * Styling that can be used to override default styles.\n */\nexport interface OrganizationDetailsClasses {\n  OrganizationDetails_Card?: string;\n  OrganizationDetails_FormActions?: string;\n  OrganizationDetails_SettingsDetails?: string;\n  OrganizationDetails_BrandingDetails?: string;\n}\n\n/**\n * Schemas that can be used to override default schemas.\n */\nexport type OrganizationDetailsSchemas = CoreOrganizationDetailsSchemas;\n\n/**\n * Form action configuration for organization details.\n */\nexport interface OrganizationDetailsFormActions extends Omit<FormActionsProps, 'nextAction'> {\n  nextAction?: {\n    disabled: boolean;\n    onClick?: (data: OrganizationPrivate) => boolean | Promise<boolean>;\n  };\n}\n\nexport interface OrganizationDetailsProps\n  extends SharedComponentProps<\n    OrganizationDetailsMessages,\n    OrganizationDetailsClasses,\n    OrganizationDetailsSchemas\n  > {\n  organization: OrganizationPrivate;\n  isLoading?: boolean;\n  formActions: OrganizationDetailsFormActions;\n}\n\nexport interface BrandingDetailsProps\n  extends SharedComponentProps<OrganizationDetailsMessages, OrganizationDetailsClasses> {\n  form: UseFormReturn<OrganizationDetailsFormValues>;\n  className?: string;\n}\n\nexport interface SettingsDetailsProps\n  extends SharedComponentProps<OrganizationDetailsMessages, OrganizationDetailsClasses> {\n  form: UseFormReturn<OrganizationDetailsFormValues>;\n  className?: string;\n}\n",
      "type": "registry:component",
      "target": "types/my-organization/organization-management/organization-details-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/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"
  }
}