@alfadocs/ui-kit-debug 1.54.1 → 1.54.3

package/dist/_chunks/{forgot-password-form-DVVOBEGj.js → forgot-password-form-Duu3pZDU.js}

@@ -2,11 +2,11 @@ import { jsx as s, jsxs as c, Fragment as no } from "react/jsx-runtime";
 import { forwardRef as lo, useId as x, useState as l, useRef as m, useEffect as _ } from "react";
 import { useTranslation as co } from "react-i18next";
 import { c as z } from "./index-D2ZczOXr.js";
-import { i as j, E as mo } from "./email-input-Cmeo4zdT.js";
+import { i as j, E as mo } from "./email-input-DQixfopu.js";
 import { A as P } from "./alert-BhCstf2h.js";
 import { B as fo } from "./button-CYPx2xFq.js";
 import { C as G } from "./card-DPmk26CL.js";
-import { F as uo } from "./form-field-D9WfDpYB.js";
+import { F as uo } from "./form-field-Db0liyI8.js";
 import { i as go } from "./safe-href-5dbsfbQn.js";
 import { u as vo, a as Fo, A as po, b as ho, E as bo, c as wo, d as xo } from "./auth-form-parts-Celi-TLV.js";
 import { u as Po } from "./use-registration-submit-DxCWic5_.js";
@@ -200,4 +200,4 @@ export {
   Go as F,
   To as a
 };
-//# sourceMappingURL=forgot-password-form-DVVOBEGj.js.map
+//# sourceMappingURL=forgot-password-form-Duu3pZDU.js.map

package/dist/_chunks/{forgot-password-form-DVVOBEGj.js.map → forgot-password-form-Duu3pZDU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"forgot-password-form-DVVOBEGj.js","sources":["../../src/patterns/forgot-password-form/forgot-password-form.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* ForgotPasswordForm — the card that asks for a password reset link.    */\n/*                                                                        */\n/* One email field and a button, then a confirmation. The confirmation   */\n/* is vague on purpose: it never says whether an account exists for the  */\n/* address, and never repeats the address. The host sends the email and  */\n/* owns every server rule; the card checks what a browser can check,     */\n/* then hands the email to `onSubmit` or posts a real form.              */\n/* -------------------------------------------------------------------- */\n\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { cva } from 'class-variance-authority';\n// The validator EmailInput itself uses, so the two never disagree.\nimport isEmail from 'validator/lib/isEmail';\nimport { Alert } from '../../components/alert';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { EmailInput } from '../../components/email-input';\nimport { FormField } from '../../components/form-field';\nimport { isSafeHref } from '../../components/_shared/safe-href';\nimport {\n  AuthCardHeading,\n  AuthFormMessage,\n  AuthFormStatus,\n  AuthTextLink,\n  ExtraFields,\n  useExtraFields,\n  useFormAction,\n} from '../_shared/auth-form-parts';\nimport type { BrandMarkMotion } from '../_shared/brand-mark';\nimport { useRegistrationSubmit } from '../registration-form/use-registration-submit';\n\n/* -------------------------------------------------------------------- */\n/* Types                                                                  */\n/* -------------------------------------------------------------------- */\n\n/** The form's one field. */\nexport const FORGOT_PASSWORD_FORM_FIELDS = ['email'] as const;\n\nexport type ForgotPasswordFormField =\n  (typeof FORGOT_PASSWORD_FORM_FIELDS)[number];\n\n/** What `onSubmit` receives once the email has passed its check. */\nexport interface ForgotPasswordFormValues {\n  email: string;\n}\n\n/** The email to show when the form opens. */\nexport type ForgotPasswordFormInitialValues = Partial<ForgotPasswordFormValues>;\n\n/** Messages from the server, already translated: one for the email,\n *  plus `form` for a message about the whole form, such as \"too many\n *  requests, try again later\". */\nexport type ForgotPasswordFormErrors = Partial<\n  Record<ForgotPasswordFormField | 'form', string>\n>;\n\n/** The host's own form field name, for a native form post. It is needed:\n *  a field without a name is not posted. */\nexport type ForgotPasswordFormFieldNames = Record<\n  ForgotPasswordFormField,\n  string\n>;\n\nexport interface ForgotPasswordFormProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'onSubmit'\n> {\n  /** Replaces the heading \"Reset your password\". Pass it translated. */\n  title?: string;\n  /**\n   * Replaces the line under the heading (\"Enter the email linked to your\n   * account and we will send a reset link.\"). Pass it translated.\n   */\n  description?: string;\n  /**\n   * The heading's level. Default 1: this page usually has no other\n   * heading. Pass 2 on a page that has its own `h1`.\n   */\n  headingLevel?: 1 | 2 | 3;\n  /**\n   * Shows the Alfadocs mark above the heading, with the heading and its\n   * line centred under it. Default true.\n   */\n  showLogo?: boolean;\n  /** How the mark arrives when the card opens. Default `assemble`. It\n   *  plays once and rests. */\n  logoMotion?: BrandMarkMotion;\n  /**\n   * Host content between the heading and the field, such as a notice. It\n   * sits outside the form, so nothing in it is posted.\n   */\n  children?: ReactNode;\n  /** The email to show when the form opens. Read once. */\n  initialValues?: ForgotPasswordFormInitialValues;\n  /**\n   * Messages from the server, already translated. The email's message\n   * shows on the field until the user changes it; `form` shows above the\n   * field. When messages arrive, focus moves to the email, or to the\n   * message above it when only that says something.\n   *\n   * Do not use a message to say that no account has the address: that\n   * tells a stranger who has an account. Show `sent` for every address.\n   */\n  errors?: ForgotPasswordFormErrors;\n  /**\n   * Shows the confirmation in place of the form: \"Check your inbox\". Set\n   * it once the request has been accepted, whether or not an account\n   * exists for the address. The confirmation says \"if an account exists\"\n   * and never shows the address.\n   */\n  sent?: boolean;\n  /**\n   * Adds \"Back to sign in\" under the card's content. A path on the same\n   * site, or an address written in full. Anything else shows no link.\n   */\n  loginHref?: string;\n  /** Replaces the button's \"Send reset link\". Pass it translated. */\n  submitLabel?: string;\n  /**\n   * True while the host sends the email: the button shows a spinner and\n   * a second submit is ignored. Set it inside `onSubmit`, before anything\n   * is awaited: until it is true, a second press sends a second request.\n   */\n  submitting?: boolean;\n  /** For React hosts: called with the email once it has passed its\n   *  check. Not called when `fieldNames` is set. */\n  onSubmit?: (values: ForgotPasswordFormValues) => void;\n  /**\n   * For a native form post: the host's own field name, e.g.\n   * `{ email: 'email' }`. When set, the input carries that name and the\n   * browser posts the form.\n   */\n  fieldNames?: ForgotPasswordFormFieldNames;\n  /**\n   * Where a native form post goes. Default: the current address. Only a\n   * path, or an address on the page's own origin, is accepted: another\n   * origin is never sent what the user typed, and the post then goes to\n   * the current address. Does nothing without `fieldNames`.\n   */\n  action?: string;\n  /**\n   * Extra hidden inputs posted with a native form, by name: a CSRF\n   * token. Not used with `onSubmit`. A name that is also the one in\n   * `fieldNames` is left out: the form's own field wins.\n   */\n  hiddenFields?: Readonly<Record<string, string>>;\n}\n\n/* -------------------------------------------------------------------- */\n/* Styles                                                                 */\n/* -------------------------------------------------------------------- */\n\n// 400px at most, in px: a host whose root font size is not 16px would\n// stretch or squeeze a width in rem.\nconst forgotPasswordFormVariants = cva(\n  'ds:mx-auto ds:w-full ds:max-w-[400px] ds:text-start ds:text-[var(--foreground)]',\n);\n\n// The confirmation takes focus when it appears, so it shows a ring.\nconst confirmationVariants = cva(\n  'ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]',\n);\n\n/* -------------------------------------------------------------------- */\n/* Helpers                                                                */\n/* -------------------------------------------------------------------- */\n\ntype FocusTarget = 'email' | 'form';\n\n/** The confirmation's heading, by the level of the card's own. */\nconst CONFIRMATION_HEADING = { 1: 'h2', 2: 'h3', 3: 'h4' } as const;\n\nconst hasMessage = (errors: ForgotPasswordFormErrors): boolean =>\n  Object.values(errors).some(Boolean);\n\nconst focusTargetFor = (\n  messages: ForgotPasswordFormErrors,\n): FocusTarget | undefined =>\n  messages.email ? 'email' : messages.form ? 'form' : undefined;\n\n/* -------------------------------------------------------------------- */\n/* Component                                                              */\n/* -------------------------------------------------------------------- */\n\n/**\n * The card that asks for a password reset link. Mount it on the\n * forgot-password page, inside `SignedOutFrame` or the host's own chrome.\n */\nexport const ForgotPasswordForm = forwardRef<\n  HTMLDivElement,\n  ForgotPasswordFormProps\n>(\n  (\n    {\n      title,\n      description,\n      headingLevel = 1,\n      showLogo = true,\n      logoMotion = 'assemble',\n      children,\n      initialValues,\n      errors,\n      sent = false,\n      loginHref,\n      submitLabel,\n      submitting = false,\n      onSubmit,\n      fieldNames,\n      action,\n      hiddenFields,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const titleId = useId();\n    const sentTitleId = useId();\n    const sentDescriptionId = useId();\n    const native = fieldNames !== undefined;\n\n    /* ------------------------------ State ----------------------------- */\n\n    const [email, setEmail] = useState(() => initialValues?.email ?? '');\n    // True once the user has filled in the field and left it. An email\n    // that arrives filled in counts: a bad one is then flagged at once,\n    // with its message. An empty field is not flagged for being passed\n    // through; its message waits for a submit.\n    const [touched, setTouched] = useState(() => Boolean(initialValues?.email));\n    const [submitted, setSubmitted] = useState(false);\n    const [serverErrors, setServerErrors] = useState<ForgotPasswordFormErrors>(\n      () => errors ?? {},\n    );\n\n    const emailInput = useRef<HTMLInputElement>(null);\n    /**\n     * What the input holds now. Read from the input, not from state: a\n     * browser can fill the field without telling React, and the form must\n     * not refuse a field that is visibly filled.\n     */\n    const held = (): string => {\n      const value = emailInput.current?.value ?? email;\n      if (value !== email) setEmail(value);\n      return value;\n    };\n\n    /* ---------------------------- Validation -------------------------- */\n\n    const invalid = !isEmail(email);\n    // The message shows once the user has left the field or tried to\n    // submit.\n    const ownError =\n      (submitted || touched) && invalid\n        ? email === ''\n          ? t('forgotPasswordForm.emailRequired')\n          : t('inputs.email.invalid')\n        : undefined;\n    const emailError = serverErrors.email ?? ownError;\n\n    /* ------------------------------ Focus ----------------------------- */\n\n    const formMessage = useRef<HTMLDivElement>(null);\n    const confirmation = useRef<HTMLDivElement>(null);\n\n    // A new object for each request, so asking twice for the same place\n    // moves focus twice. It starts with the messages the form opened\n    // with: a page the server rendered after a failed post announces\n    // nothing itself.\n    const [focusRequest, setFocusRequest] = useState<{\n      target: FocusTarget;\n    } | null>(() => {\n      const target = focusTargetFor(errors ?? {});\n      return target ? { target } : null;\n    });\n    useEffect(() => {\n      if (!focusRequest) return;\n      (focusRequest.target === 'email'\n        ? emailInput\n        : formMessage\n      ).current?.focus();\n    }, [focusRequest]);\n\n    // The form, and the button that had focus, are gone once the\n    // confirmation shows. Move focus to it, so a keyboard or screen\n    // reader user lands on what happened. Not on a page that opens\n    // already sent: that one is read from the top like any other.\n    const wasSent = useRef(sent);\n    useEffect(() => {\n      if (sent && !wasSent.current) confirmation.current?.focus();\n      wasSent.current = sent;\n    }, [sent]);\n\n    /* ------------------------------ Submit ---------------------------- */\n\n    const submit = useRegistrationSubmit<'email'>({\n      errors,\n      submitting,\n      native,\n      captcha: false,\n      firstProblem: () => (isEmail(held()) ? undefined : 'email'),\n      onRefused: () => {\n        setSubmitted(true);\n        setFocusRequest({ target: 'email' });\n      },\n      // Only a React host gets here: a native post is the browser's own.\n      deliver: () => onSubmit?.({ email: held() }),\n      onAnswer: (answer) => {\n        const next: ForgotPasswordFormErrors = answer;\n        setServerErrors(next);\n        if (!hasMessage(next)) return;\n        setSubmitted(false);\n        const target = focusTargetFor(next);\n        if (target) setFocusRequest({ target });\n      },\n    });\n    const { busy } = submit;\n\n    /* ------------------------------ Render ---------------------------- */\n\n    const formAction = useFormAction('ForgotPasswordForm', native, action);\n    const loginLink =\n      loginHref && isSafeHref(loginHref) ? loginHref : undefined;\n    const extraFields = useExtraFields(\n      'ForgotPasswordForm',\n      native,\n      fieldNames,\n      hiddenFields,\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        data-component=\"forgot-password-form\"\n        data-state={sent ? 'sent' : 'asking'}\n        className={forgotPasswordFormVariants({ className })}\n      >\n        <Card variant=\"elevated\">\n          <Card.Body className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]\">\n            <AuthCardHeading\n              id={titleId}\n              title={title ?? t('forgotPasswordForm.title')}\n              // The instruction belongs to the form: once it is sent there\n              // is nothing left to enter.\n              description={\n                sent\n                  ? undefined\n                  : (description ?? t('forgotPasswordForm.description'))\n              }\n              level={headingLevel}\n              showLogo={showLogo}\n              logoMotion={logoMotion}\n            />\n\n            {children ? (\n              <div\n                data-slot=\"host-content\"\n                className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\"\n              >\n                {children}\n              </div>\n            ) : null}\n\n            {sent ? (\n              // Named and described, so a screen reader that lands here\n              // reads the whole confirmation, not only \"status\".\n              <Alert\n                ref={confirmation}\n                variant=\"success\"\n                tabIndex={-1}\n                aria-labelledby={sentTitleId}\n                aria-describedby={sentDescriptionId}\n                data-slot=\"confirmation\"\n                className={confirmationVariants()}\n              >\n                {/* One level under the card's own heading. */}\n                <Alert.Title\n                  id={sentTitleId}\n                  as={CONFIRMATION_HEADING[headingLevel]}\n                >\n                  {t('forgotPasswordForm.sentTitle')}\n                </Alert.Title>\n                <Alert.Description id={sentDescriptionId}>\n                  {t('forgotPasswordForm.sentDescription')}\n                </Alert.Description>\n              </Alert>\n            ) : (\n              <>\n                <form\n                  noValidate\n                  method=\"post\"\n                  action={formAction}\n                  aria-labelledby={titleId}\n                  aria-busy={busy || undefined}\n                  onSubmit={submit.handleSubmit}\n                  className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\"\n                >\n                  {serverErrors.form && (\n                    <AuthFormMessage ref={formMessage}>\n                      {serverErrors.form}\n                    </AuthFormMessage>\n                  )}\n\n                  <FormField\n                    label={t('forgotPasswordForm.email')}\n                    required\n                    error={emailError}\n                    data-field=\"email\"\n                  >\n                    {/* One check, above, drives the message, the red mark and\n                      aria-invalid through FormField. EmailInput's own check\n                      is off so the two cannot disagree. */}\n                    <EmailInput\n                      ref={emailInput}\n                      name={native ? fieldNames.email : 'email'}\n                      disableBuiltInValidation\n                      value={email}\n                      onChange={(event) => {\n                        setEmail(event.target.value);\n                        // The server's message was about the old value.\n                        setServerErrors((previous) =>\n                          previous.email\n                            ? { ...previous, email: undefined }\n                            : previous,\n                        );\n                      }}\n                      onBlur={(event) => {\n                        // Whatever a browser filled in without saying so.\n                        setEmail(event.target.value);\n                        if (event.target.value !== '') setTouched(true);\n                      }}\n                    />\n                  </FormField>\n\n                  <ExtraFields fields={extraFields} />\n\n                  <Button\n                    type=\"submit\"\n                    intent=\"primary\"\n                    size=\"lg\"\n                    loading={busy}\n                    className=\"ds:w-full\"\n                    data-action=\"submit\"\n                  >\n                    {submitLabel ?? t('forgotPasswordForm.submit')}\n                  </Button>\n                </form>\n                {/* Outside the form: a screen reader may hold back what\n                  changes inside a busy region. */}\n                <AuthFormStatus busy={busy} />\n              </>\n            )}\n\n            {loginLink && (\n              <AuthTextLink href={loginLink} action=\"login\">\n                {t('forgotPasswordForm.back')}\n              </AuthTextLink>\n            )}\n          </Card.Body>\n        </Card>\n      </div>\n    );\n  },\n);\nForgotPasswordForm.displayName = 'ForgotPasswordForm';\n"],"names":["FORGOT_PASSWORD_FORM_FIELDS","forgotPasswordFormVariants","cva","confirmationVariants","CONFIRMATION_HEADING","hasMessage","errors","focusTargetFor","messages","ForgotPasswordForm","forwardRef","title","description","headingLevel","showLogo","logoMotion","children","initialValues","sent","loginHref","submitLabel","submitting","onSubmit","fieldNames","action","hiddenFields","className","rest","ref","t","useTranslation","titleId","useId","sentTitleId","sentDescriptionId","native","email","setEmail","useState","touched","setTouched","submitted","setSubmitted","serverErrors","setServerErrors","emailInput","useRef","held","value","_a","invalid","isEmail","ownError","emailError","formMessage","confirmation","focusRequest","setFocusRequest","target","useEffect","wasSent","submit","useRegistrationSubmit","answer","next","busy","formAction","useFormAction","loginLink","isSafeHref","extraFields","useExtraFields","jsx","Card","AuthCardHeading","jsxs","Alert","Fragment","AuthFormMessage","FormField","EmailInput","event","previous","ExtraFields","Button","AuthFormStatus","AuthTextLink"],"mappings":"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"}
+{"version":3,"file":"forgot-password-form-Duu3pZDU.js","sources":["../../src/patterns/forgot-password-form/forgot-password-form.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* ForgotPasswordForm — the card that asks for a password reset link.    */\n/*                                                                        */\n/* One email field and a button, then a confirmation. The confirmation   */\n/* is vague on purpose: it never says whether an account exists for the  */\n/* address, and never repeats the address. The host sends the email and  */\n/* owns every server rule; the card checks what a browser can check,     */\n/* then hands the email to `onSubmit` or posts a real form.              */\n/* -------------------------------------------------------------------- */\n\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { cva } from 'class-variance-authority';\n// The validator EmailInput itself uses, so the two never disagree.\nimport isEmail from 'validator/lib/isEmail';\nimport { Alert } from '../../components/alert';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { EmailInput } from '../../components/email-input';\nimport { FormField } from '../../components/form-field';\nimport { isSafeHref } from '../../components/_shared/safe-href';\nimport {\n  AuthCardHeading,\n  AuthFormMessage,\n  AuthFormStatus,\n  AuthTextLink,\n  ExtraFields,\n  useExtraFields,\n  useFormAction,\n} from '../_shared/auth-form-parts';\nimport type { BrandMarkMotion } from '../_shared/brand-mark';\nimport { useRegistrationSubmit } from '../registration-form/use-registration-submit';\n\n/* -------------------------------------------------------------------- */\n/* Types                                                                  */\n/* -------------------------------------------------------------------- */\n\n/** The form's one field. */\nexport const FORGOT_PASSWORD_FORM_FIELDS = ['email'] as const;\n\nexport type ForgotPasswordFormField =\n  (typeof FORGOT_PASSWORD_FORM_FIELDS)[number];\n\n/** What `onSubmit` receives once the email has passed its check. */\nexport interface ForgotPasswordFormValues {\n  email: string;\n}\n\n/** The email to show when the form opens. */\nexport type ForgotPasswordFormInitialValues = Partial<ForgotPasswordFormValues>;\n\n/** Messages from the server, already translated: one for the email,\n *  plus `form` for a message about the whole form, such as \"too many\n *  requests, try again later\". */\nexport type ForgotPasswordFormErrors = Partial<\n  Record<ForgotPasswordFormField | 'form', string>\n>;\n\n/** The host's own form field name, for a native form post. It is needed:\n *  a field without a name is not posted. */\nexport type ForgotPasswordFormFieldNames = Record<\n  ForgotPasswordFormField,\n  string\n>;\n\nexport interface ForgotPasswordFormProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'onSubmit'\n> {\n  /** Replaces the heading \"Reset your password\". Pass it translated. */\n  title?: string;\n  /**\n   * Replaces the line under the heading (\"Enter the email linked to your\n   * account and we will send a reset link.\"). Pass it translated.\n   */\n  description?: string;\n  /**\n   * The heading's level. Default 1: this page usually has no other\n   * heading. Pass 2 on a page that has its own `h1`.\n   */\n  headingLevel?: 1 | 2 | 3;\n  /**\n   * Shows the Alfadocs mark above the heading, with the heading and its\n   * line centred under it. Default true.\n   */\n  showLogo?: boolean;\n  /** How the mark arrives when the card opens. Default `assemble`. It\n   *  plays once and rests. */\n  logoMotion?: BrandMarkMotion;\n  /**\n   * Host content between the heading and the field, such as a notice. It\n   * sits outside the form, so nothing in it is posted.\n   */\n  children?: ReactNode;\n  /** The email to show when the form opens. Read once. */\n  initialValues?: ForgotPasswordFormInitialValues;\n  /**\n   * Messages from the server, already translated. The email's message\n   * shows on the field until the user changes it; `form` shows above the\n   * field. When messages arrive, focus moves to the email, or to the\n   * message above it when only that says something.\n   *\n   * Do not use a message to say that no account has the address: that\n   * tells a stranger who has an account. Show `sent` for every address.\n   */\n  errors?: ForgotPasswordFormErrors;\n  /**\n   * Shows the confirmation in place of the form: \"Check your inbox\". Set\n   * it once the request has been accepted, whether or not an account\n   * exists for the address. The confirmation says \"if an account exists\"\n   * and never shows the address.\n   */\n  sent?: boolean;\n  /**\n   * Adds \"Back to sign in\" under the card's content. A path on the same\n   * site, or an address written in full. Anything else shows no link.\n   */\n  loginHref?: string;\n  /** Replaces the button's \"Send reset link\". Pass it translated. */\n  submitLabel?: string;\n  /**\n   * True while the host sends the email: the button shows a spinner and\n   * a second submit is ignored. Set it inside `onSubmit`, before anything\n   * is awaited: until it is true, a second press sends a second request.\n   */\n  submitting?: boolean;\n  /** For React hosts: called with the email once it has passed its\n   *  check. Not called when `fieldNames` is set. */\n  onSubmit?: (values: ForgotPasswordFormValues) => void;\n  /**\n   * For a native form post: the host's own field name, e.g.\n   * `{ email: 'email' }`. When set, the input carries that name and the\n   * browser posts the form.\n   */\n  fieldNames?: ForgotPasswordFormFieldNames;\n  /**\n   * Where a native form post goes. Default: the current address. Only a\n   * path, or an address on the page's own origin, is accepted: another\n   * origin is never sent what the user typed, and the post then goes to\n   * the current address. Does nothing without `fieldNames`.\n   */\n  action?: string;\n  /**\n   * Extra hidden inputs posted with a native form, by name: a CSRF\n   * token. Not used with `onSubmit`. A name that is also the one in\n   * `fieldNames` is left out: the form's own field wins.\n   */\n  hiddenFields?: Readonly<Record<string, string>>;\n}\n\n/* -------------------------------------------------------------------- */\n/* Styles                                                                 */\n/* -------------------------------------------------------------------- */\n\n// 400px at most, in px: a host whose root font size is not 16px would\n// stretch or squeeze a width in rem.\nconst forgotPasswordFormVariants = cva(\n  'ds:mx-auto ds:w-full ds:max-w-[400px] ds:text-start ds:text-[var(--foreground)]',\n);\n\n// The confirmation takes focus when it appears, so it shows a ring.\nconst confirmationVariants = cva(\n  'ds:focus-visible:outline-solid ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]',\n);\n\n/* -------------------------------------------------------------------- */\n/* Helpers                                                                */\n/* -------------------------------------------------------------------- */\n\ntype FocusTarget = 'email' | 'form';\n\n/** The confirmation's heading, by the level of the card's own. */\nconst CONFIRMATION_HEADING = { 1: 'h2', 2: 'h3', 3: 'h4' } as const;\n\nconst hasMessage = (errors: ForgotPasswordFormErrors): boolean =>\n  Object.values(errors).some(Boolean);\n\nconst focusTargetFor = (\n  messages: ForgotPasswordFormErrors,\n): FocusTarget | undefined =>\n  messages.email ? 'email' : messages.form ? 'form' : undefined;\n\n/* -------------------------------------------------------------------- */\n/* Component                                                              */\n/* -------------------------------------------------------------------- */\n\n/**\n * The card that asks for a password reset link. Mount it on the\n * forgot-password page, inside `SignedOutFrame` or the host's own chrome.\n */\nexport const ForgotPasswordForm = forwardRef<\n  HTMLDivElement,\n  ForgotPasswordFormProps\n>(\n  (\n    {\n      title,\n      description,\n      headingLevel = 1,\n      showLogo = true,\n      logoMotion = 'assemble',\n      children,\n      initialValues,\n      errors,\n      sent = false,\n      loginHref,\n      submitLabel,\n      submitting = false,\n      onSubmit,\n      fieldNames,\n      action,\n      hiddenFields,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const titleId = useId();\n    const sentTitleId = useId();\n    const sentDescriptionId = useId();\n    const native = fieldNames !== undefined;\n\n    /* ------------------------------ State ----------------------------- */\n\n    const [email, setEmail] = useState(() => initialValues?.email ?? '');\n    // True once the user has filled in the field and left it. An email\n    // that arrives filled in counts: a bad one is then flagged at once,\n    // with its message. An empty field is not flagged for being passed\n    // through; its message waits for a submit.\n    const [touched, setTouched] = useState(() => Boolean(initialValues?.email));\n    const [submitted, setSubmitted] = useState(false);\n    const [serverErrors, setServerErrors] = useState<ForgotPasswordFormErrors>(\n      () => errors ?? {},\n    );\n\n    const emailInput = useRef<HTMLInputElement>(null);\n    /**\n     * What the input holds now. Read from the input, not from state: a\n     * browser can fill the field without telling React, and the form must\n     * not refuse a field that is visibly filled.\n     */\n    const held = (): string => {\n      const value = emailInput.current?.value ?? email;\n      if (value !== email) setEmail(value);\n      return value;\n    };\n\n    /* ---------------------------- Validation -------------------------- */\n\n    const invalid = !isEmail(email);\n    // The message shows once the user has left the field or tried to\n    // submit.\n    const ownError =\n      (submitted || touched) && invalid\n        ? email === ''\n          ? t('forgotPasswordForm.emailRequired')\n          : t('inputs.email.invalid')\n        : undefined;\n    const emailError = serverErrors.email ?? ownError;\n\n    /* ------------------------------ Focus ----------------------------- */\n\n    const formMessage = useRef<HTMLDivElement>(null);\n    const confirmation = useRef<HTMLDivElement>(null);\n\n    // A new object for each request, so asking twice for the same place\n    // moves focus twice. It starts with the messages the form opened\n    // with: a page the server rendered after a failed post announces\n    // nothing itself.\n    const [focusRequest, setFocusRequest] = useState<{\n      target: FocusTarget;\n    } | null>(() => {\n      const target = focusTargetFor(errors ?? {});\n      return target ? { target } : null;\n    });\n    useEffect(() => {\n      if (!focusRequest) return;\n      (focusRequest.target === 'email'\n        ? emailInput\n        : formMessage\n      ).current?.focus();\n    }, [focusRequest]);\n\n    // The form, and the button that had focus, are gone once the\n    // confirmation shows. Move focus to it, so a keyboard or screen\n    // reader user lands on what happened. Not on a page that opens\n    // already sent: that one is read from the top like any other.\n    const wasSent = useRef(sent);\n    useEffect(() => {\n      if (sent && !wasSent.current) confirmation.current?.focus();\n      wasSent.current = sent;\n    }, [sent]);\n\n    /* ------------------------------ Submit ---------------------------- */\n\n    const submit = useRegistrationSubmit<'email'>({\n      errors,\n      submitting,\n      native,\n      captcha: false,\n      firstProblem: () => (isEmail(held()) ? undefined : 'email'),\n      onRefused: () => {\n        setSubmitted(true);\n        setFocusRequest({ target: 'email' });\n      },\n      // Only a React host gets here: a native post is the browser's own.\n      deliver: () => onSubmit?.({ email: held() }),\n      onAnswer: (answer) => {\n        const next: ForgotPasswordFormErrors = answer;\n        setServerErrors(next);\n        if (!hasMessage(next)) return;\n        setSubmitted(false);\n        const target = focusTargetFor(next);\n        if (target) setFocusRequest({ target });\n      },\n    });\n    const { busy } = submit;\n\n    /* ------------------------------ Render ---------------------------- */\n\n    const formAction = useFormAction('ForgotPasswordForm', native, action);\n    const loginLink =\n      loginHref && isSafeHref(loginHref) ? loginHref : undefined;\n    const extraFields = useExtraFields(\n      'ForgotPasswordForm',\n      native,\n      fieldNames,\n      hiddenFields,\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        data-component=\"forgot-password-form\"\n        data-state={sent ? 'sent' : 'asking'}\n        className={forgotPasswordFormVariants({ className })}\n      >\n        <Card variant=\"elevated\">\n          <Card.Body className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]\">\n            <AuthCardHeading\n              id={titleId}\n              title={title ?? t('forgotPasswordForm.title')}\n              // The instruction belongs to the form: once it is sent there\n              // is nothing left to enter.\n              description={\n                sent\n                  ? undefined\n                  : (description ?? t('forgotPasswordForm.description'))\n              }\n              level={headingLevel}\n              showLogo={showLogo}\n              logoMotion={logoMotion}\n            />\n\n            {children ? (\n              <div\n                data-slot=\"host-content\"\n                className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\"\n              >\n                {children}\n              </div>\n            ) : null}\n\n            {sent ? (\n              // Named and described, so a screen reader that lands here\n              // reads the whole confirmation, not only \"status\".\n              <Alert\n                ref={confirmation}\n                variant=\"success\"\n                tabIndex={-1}\n                aria-labelledby={sentTitleId}\n                aria-describedby={sentDescriptionId}\n                data-slot=\"confirmation\"\n                className={confirmationVariants()}\n              >\n                {/* One level under the card's own heading. */}\n                <Alert.Title\n                  id={sentTitleId}\n                  as={CONFIRMATION_HEADING[headingLevel]}\n                >\n                  {t('forgotPasswordForm.sentTitle')}\n                </Alert.Title>\n                <Alert.Description id={sentDescriptionId}>\n                  {t('forgotPasswordForm.sentDescription')}\n                </Alert.Description>\n              </Alert>\n            ) : (\n              <>\n                <form\n                  noValidate\n                  method=\"post\"\n                  action={formAction}\n                  aria-labelledby={titleId}\n                  aria-busy={busy || undefined}\n                  onSubmit={submit.handleSubmit}\n                  className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)]\"\n                >\n                  {serverErrors.form && (\n                    <AuthFormMessage ref={formMessage}>\n                      {serverErrors.form}\n                    </AuthFormMessage>\n                  )}\n\n                  <FormField\n                    label={t('forgotPasswordForm.email')}\n                    required\n                    error={emailError}\n                    data-field=\"email\"\n                  >\n                    {/* One check, above, drives the message, the red mark and\n                      aria-invalid through FormField. EmailInput's own check\n                      is off so the two cannot disagree. */}\n                    <EmailInput\n                      ref={emailInput}\n                      name={native ? fieldNames.email : 'email'}\n                      disableBuiltInValidation\n                      value={email}\n                      onChange={(event) => {\n                        setEmail(event.target.value);\n                        // The server's message was about the old value.\n                        setServerErrors((previous) =>\n                          previous.email\n                            ? { ...previous, email: undefined }\n                            : previous,\n                        );\n                      }}\n                      onBlur={(event) => {\n                        // Whatever a browser filled in without saying so.\n                        setEmail(event.target.value);\n                        if (event.target.value !== '') setTouched(true);\n                      }}\n                    />\n                  </FormField>\n\n                  <ExtraFields fields={extraFields} />\n\n                  <Button\n                    type=\"submit\"\n                    intent=\"primary\"\n                    size=\"lg\"\n                    loading={busy}\n                    className=\"ds:w-full\"\n                    data-action=\"submit\"\n                  >\n                    {submitLabel ?? t('forgotPasswordForm.submit')}\n                  </Button>\n                </form>\n                {/* Outside the form: a screen reader may hold back what\n                  changes inside a busy region. */}\n                <AuthFormStatus busy={busy} />\n              </>\n            )}\n\n            {loginLink && (\n              <AuthTextLink href={loginLink} action=\"login\">\n                {t('forgotPasswordForm.back')}\n              </AuthTextLink>\n            )}\n          </Card.Body>\n        </Card>\n      </div>\n    );\n  },\n);\nForgotPasswordForm.displayName = 'ForgotPasswordForm';\n"],"names":["FORGOT_PASSWORD_FORM_FIELDS","forgotPasswordFormVariants","cva","confirmationVariants","CONFIRMATION_HEADING","hasMessage","errors","focusTargetFor","messages","ForgotPasswordForm","forwardRef","title","description","headingLevel","showLogo","logoMotion","children","initialValues","sent","loginHref","submitLabel","submitting","onSubmit","fieldNames","action","hiddenFields","className","rest","ref","t","useTranslation","titleId","useId","sentTitleId","sentDescriptionId","native","email","setEmail","useState","touched","setTouched","submitted","setSubmitted","serverErrors","setServerErrors","emailInput","useRef","held","value","_a","invalid","isEmail","ownError","emailError","formMessage","confirmation","focusRequest","setFocusRequest","target","useEffect","wasSent","submit","useRegistrationSubmit","answer","next","busy","formAction","useFormAction","loginLink","isSafeHref","extraFields","useExtraFields","jsx","Card","AuthCardHeading","jsxs","Alert","Fragment","AuthFormMessage","FormField","EmailInput","event","previous","ExtraFields","Button","AuthFormStatus","AuthTextLink"],"mappings":"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"}

package/dist/_chunks/{form-field-D9WfDpYB.js → form-field-Db0liyI8.js}

@@ -1,10 +1,10 @@
-import { jsxs as n, Fragment as U, jsx as s } from "react/jsx-runtime";
-import { forwardRef as W, useId as H, useMemo as w, useRef as z, useState as J, useCallback as K } from "react";
-import { c as D } from "./index-D2ZczOXr.js";
-import { useTranslation as Q } from "react-i18next";
-import { F as X } from "./form-field-context-DtiROUJV.js";
-import { C as Y } from "./circle-alert-rGDZ73Wh.js";
-const Z = D("ds:text-start", {
+import { jsxs as n, Fragment as K, jsx as s } from "react/jsx-runtime";
+import { forwardRef as Q, useId as X, useState as z, useMemo as D, useRef as T, useCallback as Y } from "react";
+import { c as V } from "./index-D2ZczOXr.js";
+import { useTranslation as Z } from "react-i18next";
+import { F as ee } from "./form-field-context-DtiROUJV.js";
+import { C as se } from "./circle-alert-rGDZ73Wh.js";
+const te = V("ds:text-start", {
   variants: {
     orientation: {
       vertical: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
@@ -19,7 +19,7 @@ const Z = D("ds:text-start", {
     orientation: "vertical",
     disabled: !1
   }
-}), ee = D("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", {
+}), ne = V("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", {
   variants: {
     orientation: {
       vertical: "",
@@ -29,69 +29,70 @@ const Z = D("ds:text-start", {
   defaultVariants: {
     orientation: "vertical"
   }
-}), se = W(
-  (T, V) => {
+}), oe = Q(
+  ($, j) => {
     const {
       label: m,
       labelStart: i,
       labelEnd: d,
       description: c,
-      error: r,
+      error: o,
       required: u = !1,
-      optional: j = !1,
+      optional: E = !1,
       orientation: v = "vertical",
       disabled: f = !1,
-      className: E,
-      children: L,
-      ...P
-    } = T, { t: _ } = Q("ui"), e = H(), a = `${e}-help`, l = `${e}-error`, b = !!r, N = w(
-      () => [c ? a : null, r ? l : null].filter(Boolean).join(" "),
-      [c, r, a, l]
-    ), y = z(null), $ = z([]), [M, F] = J(null), I = K(
-      (S) => {
-        const o = $.current, B = () => {
-          var k;
-          const t = (k = y.current) == null ? void 0 : k.getRootNode(), p = (x) => t instanceof Document || t instanceof ShadowRoot ? t.getElementById(x) : null;
-          if (o.includes(e) || p(e)) {
-            F(null);
+      className: L,
+      children: P,
+      ..._
+    } = $, { t: M } = Z("ui"), e = X(), r = `${e}-help`, a = `${e}-error`, q = `${e}-notice`, b = !!o, [N, A] = z(void 0), y = D(
+      () => [c ? r : null, o ? a : null].filter(Boolean).join(" "),
+      [c, o, r, a]
+    ), F = T(null), G = T([]), [U, I] = z(null), C = Y(
+      (B) => {
+        const l = G.current, k = () => {
+          var w;
+          const t = (w = F.current) == null ? void 0 : w.getRootNode(), p = (x) => t instanceof Document || t instanceof ShadowRoot ? t.getElementById(x) : null;
+          if (l.includes(e) || p(e)) {
+            I(null);
             return;
           }
-          const A = [...o].sort((x, G) => {
-            const h = p(x), g = p(G);
+          const H = [...l].sort((x, J) => {
+            const h = p(x), g = p(J);
             return !h || !g || h === g ? 0 : h.compareDocumentPosition(g) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
           });
-          F(A[0] ?? null);
+          I(H[0] ?? null);
         };
-        return o.push(S), B(), () => {
-          const t = o.indexOf(S);
-          t !== -1 && o.splice(t, 1), B();
+        return l.push(B), k(), () => {
+          const t = l.indexOf(B);
+          t !== -1 && l.splice(t, 1), k();
         };
       },
       [e]
-    ), C = typeof m == "string" ? m : void 0, q = w(
+    ), O = typeof m == "string" ? m : void 0, W = D(
       () => ({
         id: e,
-        helpId: a,
-        errorId: l,
-        describedBy: N,
+        helpId: r,
+        errorId: a,
+        describedBy: y,
         invalid: b,
         required: u,
         disabled: f,
-        label: C,
-        registerControlId: I
+        label: O,
+        registerControlId: C,
+        setNotice: A
       }),
       [
         e,
+        r,
         a,
-        l,
-        N,
+        y,
         b,
         u,
         f,
-        C,
-        I
+        O,
+        C
       ]
-    ), O = /* @__PURE__ */ n(U, { children: [
+    ), R = /* @__PURE__ */ n(K, { children: [
       m,
       u && /* @__PURE__ */ s(
         "span",
@@ -101,54 +102,62 @@ const Z = D("ds:text-start", {
           children: "*"
         }
       ),
-      j && /* @__PURE__ */ n("span", { className: "ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal", children: [
+      E && /* @__PURE__ */ n("span", { className: "ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal", children: [
         "(",
-        _("common.optional", "optional"),
+        M("common.optional", "optional"),
         ")"
       ] })
-    ] }), R = !!(i || d);
-    return /* @__PURE__ */ s(X.Provider, { value: q, children: /* @__PURE__ */ n(
+    ] }), S = !!(i || d);
+    return /* @__PURE__ */ s(ee.Provider, { value: W, children: /* @__PURE__ */ n(
       "div",
       {
-        ref: V,
-        className: Z({ orientation: v, disabled: f, className: E }),
+        ref: j,
+        className: te({ orientation: v, disabled: f, className: L }),
         "data-component": "form-field",
-        ...P,
+        ..._,
         children: [
           /* @__PURE__ */ n(
             "label",
             {
-              ref: y,
+              ref: F,
               id: `${e}-label`,
-              htmlFor: M ?? e,
-              className: R ? "type-label ds:text-foreground ds:flex ds:items-start ds:gap-[var(--spacing-xs)]" : "type-label ds:text-foreground",
+              htmlFor: U ?? e,
+              className: S ? "type-label ds:text-foreground ds:flex ds:items-start ds:gap-[var(--spacing-xs)]" : "type-label ds:text-foreground",
               children: [
                 i ? /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:shrink-0 ds:items-center", children: i }) : null,
                 i ? " " : null,
-                R ? /* @__PURE__ */ s("span", { children: O }) : O,
+                S ? /* @__PURE__ */ s("span", { children: R }) : R,
                 d ? " " : null,
                 d ? /* @__PURE__ */ s("span", { className: "ds:ms-auto ds:inline-flex ds:shrink-0 ds:items-center", children: d }) : null
               ]
             }
           ),
-          /* @__PURE__ */ n("div", { className: ee({ orientation: v }), children: [
-            L,
-            c && /* @__PURE__ */ s("p", { id: a, className: "type-body-sm ds:text-muted-foreground", children: c }),
-            r && /* @__PURE__ */ n(
+          /* @__PURE__ */ n("div", { className: ne({ orientation: v }), children: [
+            P,
+            c && /* @__PURE__ */ s("p", { id: r, className: "type-body-sm ds:text-muted-foreground", children: c }),
+            N && /* @__PURE__ */ s(
               "p",
               {
-                id: l,
+                id: q,
+                className: "type-body-sm ds:text-muted-foreground",
+                children: N
+              }
+            ),
+            o && /* @__PURE__ */ n(
+              "p",
+              {
+                id: a,
                 role: "alert",
                 className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive",
                 children: [
                   /* @__PURE__ */ s(
-                    Y,
+                    se,
                     {
                       "aria-hidden": "true",
                       className: "ds:size-4 ds:shrink-0"
                     }
                   ),
-                  /* @__PURE__ */ s("span", { children: r })
+                  /* @__PURE__ */ s("span", { children: o })
                 ]
               }
             )
@@ -158,8 +167,8 @@ const Z = D("ds:text-start", {
     ) });
   }
 );
-se.displayName = "FormField";
+oe.displayName = "FormField";
 export {
-  se as F
+  oe as F
 };
-//# sourceMappingURL=form-field-D9WfDpYB.js.map
+//# sourceMappingURL=form-field-Db0liyI8.js.map

package/dist/_chunks/form-field-Db0liyI8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-Db0liyI8.js","sources":["../../src/components/form-field/form-field.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { CircleAlert } from 'lucide-react';\nimport {\n  FormFieldContext,\n  type FormFieldContextShape,\n} from './form-field-context';\n\nconst fieldVariants = cva('ds:text-start', {\n  variants: {\n    orientation: {\n      vertical: 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]',\n      horizontal:\n        'ds:grid ds:grid-cols-[minmax(0,var(--form-label-inline-size))_minmax(0,1fr)] ds:items-start ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]',\n    },\n    disabled: {\n      true: 'ds:opacity-50 ds:cursor-not-allowed',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    disabled: false,\n  },\n});\n\nconst slotsVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: 'ds:min-w-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\ntype RequiredIndicator =\n  | { required?: boolean; optional?: never }\n  | { required?: never; optional?: boolean };\n\ninterface BaseFormFieldProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    Omit<VariantProps<typeof fieldVariants>, 'disabled'> {\n  label: string;\n  /**\n   * Rendered at the inline START of the label line, `--spacing-xs` before\n   * the text — a status chip or a marker, never a control. Part of the\n   * label, so its text joins the field's accessible name (\"Highlighted,\n   * Allergies\"). Use it when the mark qualifies the question itself; a\n   * reader should not have to cross the line to learn what it refers to.\n   */\n  labelStart?: React.ReactNode;\n  /**\n   * Rendered at the inline end of the label line — a status chip or a\n   * marker, never a control. Part of the label, so its text joins the\n   * field's accessible name (\"Allergies, Highlighted\").\n   */\n  labelEnd?: React.ReactNode;\n  description?: string;\n  error?: string;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport type FormFieldProps = BaseFormFieldProps & RequiredIndicator;\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      labelStart,\n      labelEnd,\n      description,\n      error,\n      required = false,\n      optional = false,\n      orientation = 'vertical',\n      disabled = false,\n      className,\n      children,\n      ...rest\n    } = props as BaseFormFieldProps & {\n      required?: boolean;\n      optional?: boolean;\n    };\n\n    const { t } = useTranslation('ui');\n    const id = useId();\n    const helpId = `${id}-help`;\n    const errorId = `${id}-error`;\n    const noticeId = `${id}-notice`;\n    const invalid = Boolean(error);\n    const [notice, setNotice] = useState<string | undefined>(undefined);\n\n    const describedBy = useMemo(\n      () =>\n        [description ? helpId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' '),\n      [description, error, helpId, errorId],\n    );\n\n    /* The ids the controls inside really render. The label follows one of\n       them only while nothing uses the field's own id: a control that reads\n       `useFormField().id` itself never registers, so the DOM is asked too.\n       Of several host ids, the first in the document wins. */\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const controlIdsRef = useRef<string[]>([]);\n    const [customControlId, setCustomControlId] = useState<string | null>(null);\n    const registerControlId = useCallback(\n      (controlId: string) => {\n        const ids = controlIdsRef.current;\n        const sync = () => {\n          const root = labelRef.current?.getRootNode();\n          const find = (elementId: string) =>\n            root instanceof Document || root instanceof ShadowRoot\n              ? root.getElementById(elementId)\n              : null;\n          if (ids.includes(id) || find(id)) {\n            setCustomControlId(null);\n            return;\n          }\n          const inDocumentOrder = [...ids].sort((a, b) => {\n            const first = find(a);\n            const second = find(b);\n            if (!first || !second || first === second) return 0;\n            return first.compareDocumentPosition(second) &\n              Node.DOCUMENT_POSITION_FOLLOWING\n              ? -1\n              : 1;\n          });\n          setCustomControlId(inDocumentOrder[0] ?? null);\n        };\n        ids.push(controlId);\n        sync();\n        return () => {\n          const index = ids.indexOf(controlId);\n          if (index !== -1) ids.splice(index, 1);\n          sync();\n        };\n      },\n      [id],\n    );\n\n    const labelString = typeof label === 'string' ? label : undefined;\n\n    const ctx: FormFieldContextShape = useMemo(\n      () => ({\n        id,\n        helpId,\n        errorId,\n        describedBy,\n        invalid,\n        required,\n        disabled,\n        label: labelString,\n        registerControlId,\n        setNotice,\n      }),\n      [\n        id,\n        helpId,\n        errorId,\n        describedBy,\n        invalid,\n        required,\n        disabled,\n        labelString,\n        registerControlId,\n      ],\n    );\n\n    const labelText = (\n      <>\n        {label}\n        {required && (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:text-destructive ds:ms-[var(--spacing-xs)]\"\n          >\n            *\n          </span>\n        )}\n        {optional && (\n          <span className=\"ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal\">\n            ({t('common.optional', 'optional')})\n          </span>\n        )}\n      </>\n    );\n\n    const hasLabelSlot = Boolean(labelStart || labelEnd);\n\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={fieldVariants({ orientation, disabled, className })}\n          data-component=\"form-field\"\n          {...rest}\n        >\n          <label\n            ref={labelRef}\n            id={`${id}-label`}\n            htmlFor={customControlId ?? id}\n            className={\n              hasLabelSlot\n                ? 'type-label ds:text-foreground ds:flex ds:items-start ds:gap-[var(--spacing-xs)]'\n                : 'type-label ds:text-foreground'\n            }\n          >\n            {labelStart ? (\n              <span className=\"ds:inline-flex ds:shrink-0 ds:items-center\">\n                {labelStart}\n              </span>\n            ) : null}\n            {/* An explicit separator, so the accessible name reads\n                \"Highlighted, Allergies\" and not one run-on word. The label\n                row is a flex box, which drops a whitespace-only text node —\n                it costs nothing on screen. */}\n            {labelStart ? ' ' : null}\n            {/* Wrapped only when a slot sits beside it: the plain label\n                keeps its text as a direct child, as consumers assert. */}\n            {hasLabelSlot ? <span>{labelText}</span> : labelText}\n            {labelEnd ? ' ' : null}\n            {labelEnd ? (\n              <span className=\"ds:ms-auto ds:inline-flex ds:shrink-0 ds:items-center\">\n                {labelEnd}\n              </span>\n            ) : null}\n          </label>\n          <div className={slotsVariants({ orientation })}>\n            {children}\n            {description && (\n              <p id={helpId} className=\"type-body-sm ds:text-muted-foreground\">\n                {description}\n              </p>\n            )}\n            {/* Neither live nor in the field's description: the control\n                announces it, and a description that changes while the\n                field has focus is read again by NVDA. */}\n            {notice && (\n              <p\n                id={noticeId}\n                className=\"type-body-sm ds:text-muted-foreground\"\n              >\n                {notice}\n              </p>\n            )}\n            {error && (\n              <p\n                id={errorId}\n                role=\"alert\"\n                className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive\"\n              >\n                <CircleAlert\n                  aria-hidden=\"true\"\n                  className=\"ds:size-4 ds:shrink-0\"\n                />\n                <span>{error}</span>\n              </p>\n            )}\n          </div>\n        </div>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n"],"names":["fieldVariants","cva","slotsVariants","FormField","forwardRef","props","ref","label","labelStart","labelEnd","description","error","required","optional","orientation","disabled","className","children","rest","t","useTranslation","id","useId","helpId","errorId","noticeId","invalid","notice","setNotice","useState","describedBy","useMemo","labelRef","useRef","controlIdsRef","customControlId","setCustomControlId","registerControlId","useCallback","controlId","ids","sync","root","_a","find","elementId","inDocumentOrder","a","b","first","second","index","labelString","ctx","labelText","jsxs","Fragment","jsx","hasLabelSlot","FormFieldContext","CircleAlert"],"mappings":"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"}

package/dist/_chunks/form-field-context-DtiROUJV.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context-DtiROUJV.js","sources":["../../src/components/form-field/form-field-context.ts"],"sourcesContent":["import { createContext, useContext, useId, type RefObject } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\n\nexport interface FormFieldContextShape {\n  id: string;\n  helpId: string;\n  errorId: string;\n  describedBy: string;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  /** The field's label text, for a control that cannot be named by `for`. */\n  label?: string;\n  /**\n   * A control reports the id it really renders, so the label's `for`\n   * follows it. Returns the release. Call it from an effect; prefer\n   * `useFormFieldControlId`.\n   */\n  registerControlId?: (controlId: string) => () => void;\n}\n\nexport const FormFieldContext = createContext<FormFieldContextShape | null>(\n  null,\n);\n\nexport function useFormField(): FormFieldContextShape {\n  const ctx = useContext(FormFieldContext);\n  const fallbackId = useId();\n\n  if (ctx) {\n    return ctx;\n  }\n\n  return {\n    id: fallbackId,\n    helpId: `${fallbackId}-help`,\n    errorId: `${fallbackId}-error`,\n    describedBy: '',\n    invalid: false,\n    required: false,\n    disabled: false,\n  };\n}\n\n/**\n * The id a control renders: its own `id`, else the field's. Inside a\n * `<FormField>` the id is reported to the field, so the label's `for`\n * points at the control even when the host chose the id.\n */\nexport function useFormFieldControlId(\n  ctx: FormFieldContextShape,\n  id?: string,\n): string {\n  const controlId = id ?? ctx.id;\n  const register = ctx.registerControlId;\n  useIsomorphicLayoutEffect(() => register?.(controlId), [register, controlId]);\n  return controlId;\n}\n\n/**\n * For a control whose id is written by a library (cmdk): reports the id the\n * element really has, read from the DOM after mount.\n */\nexport function useFormFieldControlRef(\n  ctx: FormFieldContextShape,\n  ref: RefObject<HTMLElement | null>,\n): void {\n  const register = ctx.registerControlId;\n  useIsomorphicLayoutEffect(() => {\n    const controlId = ref.current?.id;\n    if (register && controlId) return register(controlId);\n  }, [register, ref]);\n}\n"],"names":["FormFieldContext","createContext","useFormField","ctx","useContext","fallbackId","useId","useFormFieldControlId","id","controlId","register","useIsomorphicLayoutEffect","useFormFieldControlRef","ref","_a"],"mappings":";;AAqBO,MAAMA,IAAmBC;AAAA,EAC9B;AACF;AAEO,SAASC,IAAsC;AACpD,QAAMC,IAAMC,EAAWJ,CAAgB,GACjCK,IAAaC,EAAA;AAEnB,SAAIH,KAIG;AAAA,IACL,IAAIE;AAAA,IACJ,QAAQ,GAAGA,CAAU;AAAA,IACrB,SAAS,GAAGA,CAAU;AAAA,IACtB,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd;AAOO,SAASE,EACdJ,GACAK,GACQ;AACR,QAAMC,IAAYD,KAAML,EAAI,IACtBO,IAAWP,EAAI;AACrB,SAAAQ,EAA0B,MAAMD,KAAA,gBAAAA,EAAWD,IAAY,CAACC,GAAUD,CAAS,CAAC,GACrEA;AACT;AAMO,SAASG,EACdT,GACAU,GACM;AACN,QAAMH,IAAWP,EAAI;AACrB,EAAAQ,EAA0B,MAAM;;AAC9B,UAAMF,KAAYK,IAAAD,EAAI,YAAJ,gBAAAC,EAAa;AAC/B,QAAIJ,KAAYD,EAAW,QAAOC,EAASD,CAAS;AAAA,EACtD,GAAG,CAACC,GAAUG,CAAG,CAAC;AACpB;"}
+{"version":3,"file":"form-field-context-DtiROUJV.js","sources":["../../src/components/form-field/form-field-context.ts"],"sourcesContent":["import { createContext, useContext, useId, type RefObject } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';\n\nexport interface FormFieldContextShape {\n  id: string;\n  helpId: string;\n  errorId: string;\n  describedBy: string;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  /** The field's label text, for a control that cannot be named by `for`. */\n  label?: string;\n  /**\n   * A control reports the id it really renders, so the label's `for`\n   * follows it. Returns the release. Call it from an effect; prefer\n   * `useFormFieldControlId`.\n   */\n  registerControlId?: (controlId: string) => () => void;\n  /**\n   * A control shows a short note under the field, e.g. that a paste was\n   * refused; `undefined` removes it. The control announces it itself.\n   */\n  setNotice?: (notice: string | undefined) => void;\n}\n\nexport const FormFieldContext = createContext<FormFieldContextShape | null>(\n  null,\n);\n\nexport function useFormField(): FormFieldContextShape {\n  const ctx = useContext(FormFieldContext);\n  const fallbackId = useId();\n\n  if (ctx) {\n    return ctx;\n  }\n\n  return {\n    id: fallbackId,\n    helpId: `${fallbackId}-help`,\n    errorId: `${fallbackId}-error`,\n    describedBy: '',\n    invalid: false,\n    required: false,\n    disabled: false,\n  };\n}\n\n/**\n * The id a control renders: its own `id`, else the field's. Inside a\n * `<FormField>` the id is reported to the field, so the label's `for`\n * points at the control even when the host chose the id.\n */\nexport function useFormFieldControlId(\n  ctx: FormFieldContextShape,\n  id?: string,\n): string {\n  const controlId = id ?? ctx.id;\n  const register = ctx.registerControlId;\n  useIsomorphicLayoutEffect(() => register?.(controlId), [register, controlId]);\n  return controlId;\n}\n\n/**\n * For a control whose id is written by a library (cmdk): reports the id the\n * element really has, read from the DOM after mount.\n */\nexport function useFormFieldControlRef(\n  ctx: FormFieldContextShape,\n  ref: RefObject<HTMLElement | null>,\n): void {\n  const register = ctx.registerControlId;\n  useIsomorphicLayoutEffect(() => {\n    const controlId = ref.current?.id;\n    if (register && controlId) return register(controlId);\n  }, [register, ref]);\n}\n"],"names":["FormFieldContext","createContext","useFormField","ctx","useContext","fallbackId","useId","useFormFieldControlId","id","controlId","register","useIsomorphicLayoutEffect","useFormFieldControlRef","ref","_a"],"mappings":";;AA0BO,MAAMA,IAAmBC;AAAA,EAC9B;AACF;AAEO,SAASC,IAAsC;AACpD,QAAMC,IAAMC,EAAWJ,CAAgB,GACjCK,IAAaC,EAAA;AAEnB,SAAIH,KAIG;AAAA,IACL,IAAIE;AAAA,IACJ,QAAQ,GAAGA,CAAU;AAAA,IACrB,SAAS,GAAGA,CAAU;AAAA,IACtB,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd;AAOO,SAASE,EACdJ,GACAK,GACQ;AACR,QAAMC,IAAYD,KAAML,EAAI,IACtBO,IAAWP,EAAI;AACrB,SAAAQ,EAA0B,MAAMD,KAAA,gBAAAA,EAAWD,IAAY,CAACC,GAAUD,CAAS,CAAC,GACrEA;AACT;AAMO,SAASG,EACdT,GACAU,GACM;AACN,QAAMH,IAAWP,EAAI;AACrB,EAAAQ,EAA0B,MAAM;;AAC9B,UAAMF,KAAYK,IAAAD,EAAI,YAAJ,gBAAAC,EAAa;AAC/B,QAAIJ,KAAYD,EAAW,QAAOC,EAASD,CAAS;AAAA,EACtD,GAAG,CAACC,GAAUG,CAAG,CAAC;AACpB;"}

package/dist/_chunks/{gestational-age-calculator-BMkoLJGR.js → gestational-age-calculator-BVBz_5dm.js}

@@ -5,7 +5,7 @@ import { useTranslation as ce } from "react-i18next";
 import { u as ue } from "./registry-DvAUVLHh.js";
 import { R as d } from "./radio-BBbMdbE_.js";
 import { R as S } from "./radio-group-BT97ty7o.js";
-import { F as k } from "./form-field-D9WfDpYB.js";
+import { F as k } from "./form-field-Db0liyI8.js";
 import { D as _ } from "./date-picker-BnhBmcH6.js";
 import { S as me } from "./select-DHPmASkG.js";
 import { S as ge } from "./switch-D--x7n6h.js";
@@ -485,4 +485,4 @@ Re.displayName = "GestationalAgeCalculator";
 export {
   Re as G
 };
-//# sourceMappingURL=gestational-age-calculator-BMkoLJGR.js.map
+//# sourceMappingURL=gestational-age-calculator-BVBz_5dm.js.map