@fuf-stack/uniform 1.20.16 → 1.20.17

package/dist/Form/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Form = require("../Form-BQbwyvPX.cjs");
+const require_Form = require("../Form-B0SxszqY.cjs");
 exports.Form = require_Form.Form;
 exports.default = require_Form.Form_default;

package/dist/Form/index.js

@@ -1,2 +1,2 @@
-import { n as Form, t as Form_default } from "../Form-BodvG3wG.js";
+import { n as Form, t as Form_default } from "../Form-CEeNi0iG.js";
 export { Form, Form_default as default };

package/dist/{Form-BQbwyvPX.cjs → Form-B0SxszqY.cjs}

@@ -1,5 +1,5 @@
-const require_FormContext = require("./FormContext-Djp8wTG8.cjs");
-const require_useFormContext = require("./useFormContext-CNGE9heQ.cjs");
+const require_FormContext = require("./FormContext-DwCicmnH.cjs");
+const require_useFormContext = require("./useFormContext-q0hx1SYq.cjs");
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react = require("react");
 let react_icons_fa6 = require("react-icons/fa6");
@@ -122,4 +122,4 @@ Object.defineProperty(exports, "Form_default", {
 	}
 });
 
-//# sourceMappingURL=Form-BQbwyvPX.cjs.map
+//# sourceMappingURL=Form-B0SxszqY.cjs.map

package/dist/{Form-BQbwyvPX.cjs.map → Form-B0SxszqY.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-BQbwyvPX.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form-B0SxszqY.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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"}

package/dist/{Form-BodvG3wG.js → Form-CEeNi0iG.js}

@@ -1,5 +1,5 @@
-import { t as FormProvider } from "./FormContext-DMaTuTAr.js";
-import { n as useFormContext } from "./useFormContext-2vyVWpUJ.js";
+import { t as FormProvider } from "./FormContext-C-CnF8V4.js";
+import { n as useFormContext } from "./useFormContext-C-THOgmB.js";
 import { cn, slugify } from "@fuf-stack/pixel-utils";
 import { useEffect, useState } from "react";
 import { FaBug, FaBullseye } from "react-icons/fa6";
@@ -111,4 +111,4 @@ var Form_default = Form;
 //#endregion
 export { Form as n, Form_default as t };
 
-//# sourceMappingURL=Form-BodvG3wG.js.map
+//# sourceMappingURL=Form-CEeNi0iG.js.map

package/dist/{Form-BodvG3wG.js.map → Form-CEeNi0iG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-BodvG3wG.js","names":[],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,KAAA,QAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,eAAe;CAEnB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,CAAC,CAAC;CAEhE,gBAAgB;EAEd,IAAI,CAAC,eACH;EAIF,UAAU,UAAU,KAAK,CAAC,CAAC;EAE3B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,UAAU,MAAM,UAAU,CAAC,CAAC;GAC9B;EACF,CAAC;EAED,aAAa;GACX,aAAa;EACf;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,SAAQ;EACR,eAAe;GACb,aAAa,OAAO;EACtB;CACD,CAAA;CAKL,IAAI,CAAC,eACH,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,SAAS;EACvB,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAgB,CAAA,GAC1C,oBAAC,QAAD;IACE,OAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,MAAK;IACL,SAAQ;IACR,eAAe;KACb,aAAa,KAAK;IACpB;GACD,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,SAAS,mBAAmB,UAAU;GACtC,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;aAEC,mBAAmB,oBAAoB;EAClC,CAAA,GACR,oBAAC,MAAD,EACE,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF,EACD,CAAA,CACG;;AAEV;;;AC/GA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,gBAAgB,KAAA,GAChB,OAAO,KAAA,GACP,UACA,SAAS,KAAA,GACT,aAAa,KAAA,GACb,oBAAoB,YACL;CACf,OACE,oBAAC,cAAD;EACE,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;GAC9B,OACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GAAG,QAAQ,SAAS;KAC/B,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,EAAE;KACnC;KACN,UAAU;KAET;IACG,CAAA,GAEL,CAAC,WAAW,CAAC,OAAO,WACnB,oBAAC,iBAAD,EAAiB,WAAU,cAAe,CAAA,CAEzC;;EAET;CACY,CAAA;AAElB;;;ACtEA,IAAA,eAAe"}
+{"version":3,"file":"Form-CEeNi0iG.js","names":[],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,KAAA,QAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,eAAe;CAEnB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,CAAC,CAAC;CAEhE,gBAAgB;EAEd,IAAI,CAAC,eACH;EAIF,UAAU,UAAU,KAAK,CAAC,CAAC;EAE3B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,UAAU,MAAM,UAAU,CAAC,CAAC;GAC9B;EACF,CAAC;EAED,aAAa;GACX,aAAa;EACf;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,SAAQ;EACR,eAAe;GACb,aAAa,OAAO;EACtB;CACD,CAAA;CAKL,IAAI,CAAC,eACH,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,SAAS;EACvB,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAgB,CAAA,GAC1C,oBAAC,QAAD;IACE,OAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,MAAK;IACL,SAAQ;IACR,eAAe;KACb,aAAa,KAAK;IACpB;GACD,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,SAAS,mBAAmB,UAAU;GACtC,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;aAEC,mBAAmB,oBAAoB;EAClC,CAAA,GACR,oBAAC,MAAD,EACE,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF,EACD,CAAA,CACG;;AAEV;;;AC/GA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,gBAAgB,KAAA,GAChB,OAAO,KAAA,GACP,UACA,SAAS,KAAA,GACT,aAAa,KAAA,GACb,oBAAoB,YACL;CACf,OACE,oBAAC,cAAD;EACE,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;GAC9B,OACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GAAG,QAAQ,SAAS;KAC/B,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,EAAE;KACnC;KACN,UAAU;KAET;IACG,CAAA,GAEL,CAAC,WAAW,CAAC,OAAO,WACnB,oBAAC,iBAAD,EAAiB,WAAU,cAAe,CAAA,CAEzC;;EAET;CACY,CAAA;AAElB;;;ACtEA,IAAA,eAAe"}

package/dist/{FormContext-DMaTuTAr.js → FormContext-C-CnF8V4.js}

@@ -75,25 +75,32 @@ const useExtendedValidation = (baseValidation) => {
 * @param extendedValidation - Extended validation instance from useExtendedValidation
 * @returns Object containing resolver function, current validation errors, and optimization hash
 */
-const useFormResolver = (extendedValidation) => {
+const useFormResolver = (extendedValidation, onValidationErrorsChange) => {
 	const validationErrors = useRef(void 0);
-	const resolver = useMemo(() => {
-		if (!extendedValidation) return;
-		return async (values) => {
-			const validationValues = toValidationFormat(values) ?? {};
-			const result = await extendedValidation.validateAsync(validationValues);
-			validationErrors.current = result.errors ?? void 0;
-			return {
-				values: result.data ?? {},
-				errors: result.errors ?? {}
-			};
-		};
-	}, [extendedValidation]);
-	const validationErrorsHash = JSON.stringify(validationErrors.current);
+	const validationErrorsHash = useRef(void 0);
+	const updateValidationErrors = useCallback((errors) => {
+		validationErrors.current = errors;
+		const nextHash = JSON.stringify(errors);
+		if (validationErrorsHash.current !== nextHash) {
+			validationErrorsHash.current = nextHash;
+			onValidationErrorsChange?.(nextHash);
+		}
+	}, [onValidationErrorsChange]);
 	return {
-		resolver,
+		resolver: useMemo(() => {
+			if (!extendedValidation) return;
+			return async (values) => {
+				const validationValues = toValidationFormat(values) ?? {};
+				const result = await extendedValidation.validateAsync(validationValues);
+				updateValidationErrors(result.errors ?? void 0);
+				return {
+					values: result.data ?? {},
+					errors: result.errors ?? {}
+				};
+			};
+		}, [extendedValidation, updateValidationErrors]),
 		validationErrors: validationErrors.current,
-		validationErrorsHash
+		validationErrorsHash: validationErrorsHash.current
 	};
 };
 //#endregion
@@ -133,7 +140,15 @@ debug("UniformContext exported", {
 const FormProvider$1 = ({ children, debugModeSettings = void 0, initialValues = void 0, onSubmit, validation: baseValidation = void 0, validationTrigger }) => {
 	const [debugMode, setDebugMode] = useLocalStorage(debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT, "off");
 	const { extendedValidation, setClientValidationSchema } = useExtendedValidation(baseValidation);
-	const { resolver, validationErrors, validationErrorsHash } = useFormResolver(extendedValidation);
+	const hasPendingUserChangeRef = useRef(false);
+	const [validationErrorsRefreshVersion, setValidationErrorsRefreshVersion] = useState(0);
+	const { resolver, validationErrors, validationErrorsHash } = useFormResolver(extendedValidation, useCallback(() => {
+		if (!hasPendingUserChangeRef.current) return;
+		hasPendingUserChangeRef.current = false;
+		setValidationErrorsRefreshVersion((prev) => {
+			return prev + 1;
+		});
+	}, []));
 	const methods = useForm({
 		defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,
 		mode: validationTrigger,
@@ -149,6 +164,7 @@ const FormProvider$1 = ({ children, debugModeSettings = void 0, initialValues =
 		};
 	}, []);
 	const notifyUserChange = useCallback((fieldName, value) => {
+		hasPendingUserChangeRef.current = true;
 		userChangeListenersRef.current.forEach((listener) => {
 			listener(fieldName, value);
 		});
@@ -212,7 +228,8 @@ const FormProvider$1 = ({ children, debugModeSettings = void 0, initialValues =
 	}, [
 		debugMode,
 		debugModeSettings?.disable,
-		validationErrorsHash
+		validationErrorsHash,
+		validationErrorsRefreshVersion
 	]);
 	return /* @__PURE__ */ jsx(UniformContext.Provider, {
 		value: contextValue,
@@ -228,4 +245,4 @@ const FormProvider$1 = ({ children, debugModeSettings = void 0, initialValues =
 //#endregion
 export { UniformContext as n, FormProvider$1 as t };
 
-//# sourceMappingURL=FormContext-DMaTuTAr.js.map
+//# sourceMappingURL=FormContext-C-CnF8V4.js.map

package/dist/FormContext-C-CnF8V4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext-C-CnF8V4.js","names":["FormProvider","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo<VetoTypeAny[]>(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter((schema): schema is VetoTypeAny => {\n          return Boolean(schema);\n        });\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined =\n        clientSchemaValues.reduce<VetoTypeAny | null>(\n          (combined, clientSchema) => {\n            return combined ? and(combined, clientSchema) : clientSchema;\n          },\n          null,\n        );\n\n      // return combined validation\n      if (baseValidation && clientSchemasCombined) {\n        // Put client validation first so dynamic/domain-specific messages\n        // are returned before generic base validation errors.\n        const baseSchema = baseValidation.schema as VetoTypeAny;\n        return veto(and(clientSchemasCombined, baseSchema));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (\n  extendedValidation?: VetoInstance,\n  onValidationErrorsChange?: (validationErrorsHash: string | undefined) => void,\n) => {\n  // Keep validation errors in a ref to avoid re-renders on each resolver run.\n  // This preserves UX/snapshot behavior where validation updates alone\n  // do not force immediate visual error state changes.\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n  const validationErrorsHash = useRef<string | undefined>(undefined);\n\n  const updateValidationErrors = useCallback(\n    (errors: VetoFormattedError | undefined): void => {\n      // Store the formatted errors in a ref so resolver runs stay cheap and do\n      // not automatically repaint every form consumer.\n      validationErrors.current = errors;\n\n      // The hash is the reactive signal for consumers. Only notify when the\n      // actual error output changes, so repeated validations with the same\n      // result do not cause avoidable context refreshes.\n      const nextHash = JSON.stringify(errors);\n\n      if (validationErrorsHash.current !== nextHash) {\n        validationErrorsHash.current = nextHash;\n        onValidationErrorsChange?.(nextHash);\n      }\n    },\n    [onValidationErrorsChange],\n  );\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      updateValidationErrors(result.errors ?? undefined);\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation, updateValidationErrors]);\n\n  /* eslint-disable react-hooks/refs -- intentional non-reactive cache reads */\n  const currentValidationErrors = validationErrors.current;\n  const currentValidationErrorsHash = validationErrorsHash.current;\n\n  return {\n    resolver,\n    validationErrors: currentValidationErrors,\n    validationErrorsHash: currentValidationErrorsHash,\n  };\n  /* eslint-enable react-hooks/refs */\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  const hasPendingUserChangeRef = useRef(false);\n  const [validationErrorsRefreshVersion, setValidationErrorsRefreshVersion] =\n    useState(0);\n\n  const handleValidationErrorsChange = useCallback(() => {\n    if (!hasPendingUserChangeRef.current) {\n      return;\n    }\n\n    hasPendingUserChangeRef.current = false;\n    setValidationErrorsRefreshVersion((prev) => {\n      return prev + 1;\n    });\n  }, []);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } = useFormResolver(\n    extendedValidation,\n    handleValidationErrorsChange,\n  );\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      hasPendingUserChangeRef.current = true;\n\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert form data to submission format:\n    // - Unwrap flat array wrappers and convert markers\n    // - Remove empty strings, nulls, empty arrays, and empty objects\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toSubmitFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      debugMode,\n      debugModeSettings?.disable,\n      validationErrorsHash,\n      validationErrorsRefreshVersion,\n    ],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":"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"}

package/dist/{FormContext-Djp8wTG8.cjs → FormContext-DwCicmnH.cjs}

@@ -99,25 +99,32 @@ const useExtendedValidation = (baseValidation) => {
 * @param extendedValidation - Extended validation instance from useExtendedValidation
 * @returns Object containing resolver function, current validation errors, and optimization hash
 */
-const useFormResolver = (extendedValidation) => {
+const useFormResolver = (extendedValidation, onValidationErrorsChange) => {
 	const validationErrors = (0, react.useRef)(void 0);
-	const resolver = (0, react.useMemo)(() => {
-		if (!extendedValidation) return;
-		return async (values) => {
-			const validationValues = require_helpers_index.toValidationFormat(values) ?? {};
-			const result = await extendedValidation.validateAsync(validationValues);
-			validationErrors.current = result.errors ?? void 0;
-			return {
-				values: result.data ?? {},
-				errors: result.errors ?? {}
-			};
-		};
-	}, [extendedValidation]);
-	const validationErrorsHash = JSON.stringify(validationErrors.current);
+	const validationErrorsHash = (0, react.useRef)(void 0);
+	const updateValidationErrors = (0, react.useCallback)((errors) => {
+		validationErrors.current = errors;
+		const nextHash = JSON.stringify(errors);
+		if (validationErrorsHash.current !== nextHash) {
+			validationErrorsHash.current = nextHash;
+			onValidationErrorsChange?.(nextHash);
+		}
+	}, [onValidationErrorsChange]);
 	return {
-		resolver,
+		resolver: (0, react.useMemo)(() => {
+			if (!extendedValidation) return;
+			return async (values) => {
+				const validationValues = require_helpers_index.toValidationFormat(values) ?? {};
+				const result = await extendedValidation.validateAsync(validationValues);
+				updateValidationErrors(result.errors ?? void 0);
+				return {
+					values: result.data ?? {},
+					errors: result.errors ?? {}
+				};
+			};
+		}, [extendedValidation, updateValidationErrors]),
 		validationErrors: validationErrors.current,
-		validationErrorsHash
+		validationErrorsHash: validationErrorsHash.current
 	};
 };
 //#endregion
@@ -157,7 +164,15 @@ debug$1("UniformContext exported", {
 const FormProvider = ({ children, debugModeSettings = void 0, initialValues = void 0, onSubmit, validation: baseValidation = void 0, validationTrigger }) => {
 	const [debugMode, setDebugMode] = (0, _fuf_stack_pixels.useLocalStorage)(debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT, "off");
 	const { extendedValidation, setClientValidationSchema } = useExtendedValidation(baseValidation);
-	const { resolver, validationErrors, validationErrorsHash } = useFormResolver(extendedValidation);
+	const hasPendingUserChangeRef = (0, react.useRef)(false);
+	const [validationErrorsRefreshVersion, setValidationErrorsRefreshVersion] = (0, react.useState)(0);
+	const { resolver, validationErrors, validationErrorsHash } = useFormResolver(extendedValidation, (0, react.useCallback)(() => {
+		if (!hasPendingUserChangeRef.current) return;
+		hasPendingUserChangeRef.current = false;
+		setValidationErrorsRefreshVersion((prev) => {
+			return prev + 1;
+		});
+	}, []));
 	const methods = (0, react_hook_form.useForm)({
 		defaultValues: initialValues ? require_helpers_index.toFormFormat(initialValues) : initialValues,
 		mode: validationTrigger,
@@ -173,6 +188,7 @@ const FormProvider = ({ children, debugModeSettings = void 0, initialValues = vo
 		};
 	}, []);
 	const notifyUserChange = (0, react.useCallback)((fieldName, value) => {
+		hasPendingUserChangeRef.current = true;
 		userChangeListenersRef.current.forEach((listener) => {
 			listener(fieldName, value);
 		});
@@ -236,7 +252,8 @@ const FormProvider = ({ children, debugModeSettings = void 0, initialValues = vo
 	}, [
 		debugMode,
 		debugModeSettings?.disable,
-		validationErrorsHash
+		validationErrorsHash,
+		validationErrorsRefreshVersion
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UniformContext.Provider, {
 		value: contextValue,
@@ -269,4 +286,4 @@ Object.defineProperty(exports, "__toESM", {
 	}
 });
 
-//# sourceMappingURL=FormContext-Djp8wTG8.cjs.map
+//# sourceMappingURL=FormContext-DwCicmnH.cjs.map

package/dist/FormContext-DwCicmnH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext-DwCicmnH.cjs","names":["toValidationFormat","debug","React","toFormFormat","toSubmitFormat","HookFormProvider"],"sources":["../src/Form/subcomponents/FormResolver.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport { and, veto } from '@fuf-stack/veto';\n\nimport { toValidationFormat } from '../../helpers';\n\n/**\n * Hook that manages client validation schemas state.\n *\n * Provides a centralized way to add/remove dynamic validation schemas\n * that can be combined with base form validation.\n *\n * @returns Object with client validation state and memoized setter function\n */\nexport const useClientValidationManager = () => {\n  // Client validation schemas state\n  const [clientValidationSchemas, setClientValidationSchemas] = useState<\n    Record<string, VetoTypeAny>\n  >({});\n\n  // Memoized function to set/clear client validation schema\n  const setClientValidationSchema = useMemo(() => {\n    return (key: string, schema: VetoTypeAny | null) => {\n      // update client validation schemas\n      setClientValidationSchemas((prev) => {\n        // if no schema and no existing client validation schema for this key, do nothing\n        if (!prev[key] && !schema) {\n          return prev;\n        }\n        // if no schema, remove the client validation schema for this key\n        if (!schema) {\n          const { [key]: _removed, ...rest } = prev;\n          return rest;\n        }\n        // if schema, add or update the client validation schema for this key\n        return { ...prev, [key]: schema };\n      });\n    };\n  }, []);\n\n  return {\n    clientValidationSchemas,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates an extended validation instance combining base Veto validation with dynamic client validation.\n *\n * @param baseValidation - Optional base Veto validation schema\n * @returns Combined validation instance and client schema setter\n */\nexport const useExtendedValidation = (baseValidation?: VetoInstance) => {\n  // Setup client validation schemas\n  const { clientValidationSchemas, setClientValidationSchema } =\n    useClientValidationManager();\n\n  // Create a stable dependency array from the client validation schemas\n  const clientSchemaValues = useMemo<VetoTypeAny[]>(\n    () => {\n      const keys = Object.keys(clientValidationSchemas).sort();\n      return keys\n        .map((key) => {\n          return clientValidationSchemas[key];\n        })\n        .filter((schema): schema is VetoTypeAny => {\n          return Boolean(schema);\n        });\n    },\n    // Include the object identity to react to schema instance updates with same shape\n    [clientValidationSchemas],\n  );\n\n  // Memoized extended validation instance\n  const extendedValidation = useMemo(\n    () => {\n      const hasBaseValidation = !!baseValidation;\n      const hasClientSchemas = clientSchemaValues.length > 0;\n\n      // If no base validation and no client schemas, return undefined\n      if (!hasBaseValidation && !hasClientSchemas) {\n        return undefined;\n      }\n\n      // If no client schemas, return base validation\n      if (!hasClientSchemas) {\n        return baseValidation;\n      }\n\n      // Combine client validation schemas\n      const clientSchemasCombined =\n        clientSchemaValues.reduce<VetoTypeAny | null>(\n          (combined, clientSchema) => {\n            return combined ? and(combined, clientSchema) : clientSchema;\n          },\n          null,\n        );\n\n      // return combined validation\n      if (baseValidation && clientSchemasCombined) {\n        // Put client validation first so dynamic/domain-specific messages\n        // are returned before generic base validation errors.\n        const baseSchema = baseValidation.schema as VetoTypeAny;\n        return veto(and(clientSchemasCombined, baseSchema));\n      }\n\n      // If we only have client schemas, return them as a veto instance\n      if (clientSchemasCombined) {\n        return veto(clientSchemasCombined);\n      }\n\n      // This should not happen due to the conditions above, but just in case\n      return baseValidation;\n    },\n    // Recompute when validation schema instances change\n    [baseValidation, clientSchemaValues],\n  );\n\n  return {\n    extendedValidation,\n    setClientValidationSchema,\n  };\n};\n\n/**\n * Hook that creates a React Hook Form resolver from an extended validation instance.\n *\n * @param extendedValidation - Extended validation instance from useExtendedValidation\n * @returns Object containing resolver function, current validation errors, and optimization hash\n */\nexport const useFormResolver = (\n  extendedValidation?: VetoInstance,\n  onValidationErrorsChange?: (validationErrorsHash: string | undefined) => void,\n) => {\n  // Keep validation errors in a ref to avoid re-renders on each resolver run.\n  // This preserves UX/snapshot behavior where validation updates alone\n  // do not force immediate visual error state changes.\n  const validationErrors = useRef<VetoFormattedError>(undefined);\n  const validationErrorsHash = useRef<string | undefined>(undefined);\n\n  const updateValidationErrors = useCallback(\n    (errors: VetoFormattedError | undefined): void => {\n      // Store the formatted errors in a ref so resolver runs stay cheap and do\n      // not automatically repaint every form consumer.\n      validationErrors.current = errors;\n\n      // The hash is the reactive signal for consumers. Only notify when the\n      // actual error output changes, so repeated validations with the same\n      // result do not cause avoidable context refreshes.\n      const nextHash = JSON.stringify(errors);\n\n      if (validationErrorsHash.current !== nextHash) {\n        validationErrorsHash.current = nextHash;\n        onValidationErrorsChange?.(nextHash);\n      }\n    },\n    [onValidationErrorsChange],\n  );\n\n  // Memoized resolver function for React Hook Form\n  const resolver = useMemo(() => {\n    if (!extendedValidation) {\n      return undefined;\n    }\n\n    return async (values: FieldValues) => {\n      const validationValues = toValidationFormat(values) ?? {};\n      const result = await extendedValidation.validateAsync(validationValues);\n      updateValidationErrors(result.errors ?? undefined);\n\n      // Transform veto result to React Hook Form format\n      return {\n        values: result.data ?? {},\n        errors: result.errors ?? {},\n      };\n    };\n  }, [extendedValidation, updateValidationErrors]);\n\n  /* eslint-disable react-hooks/refs -- intentional non-reactive cache reads */\n  const currentValidationErrors = validationErrors.current;\n  const currentValidationErrorsHash = validationErrorsHash.current;\n\n  return {\n    resolver,\n    validationErrors: currentValidationErrors,\n    validationErrorsHash: currentValidationErrorsHash,\n  };\n  /* eslint-enable react-hooks/refs */\n};\n","import type {\n  VetoFormattedError,\n  VetoInstance,\n  VetoTypeAny,\n} from '@fuf-stack/veto';\nimport type { BaseSyntheticEvent, ReactNode } from 'react';\nimport type { FieldValues, Path, SubmitHandler } from 'react-hook-form';\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport createDebug from 'debug';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toFormFormat, toSubmitFormat } from '../../helpers';\nimport { useExtendedValidation, useFormResolver } from './FormResolver';\n\nconst debug = createDebug('uniform:FormContext');\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport interface DebugModeSettings {\n  /** disable form debug completely */\n  disable?: boolean;\n  /** custom localStorage key to save debug mode state */\n  localStorageKey?: string;\n}\n\n/**\n * Listener function that gets called when a field changes due to user input\n */\nexport type UserChangeListener<TFieldValues extends object = object> = (\n  fieldName: Path<TFieldValues>,\n  value: unknown,\n) => void;\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n *    form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n *    that can be used to validate form fields and handle validation logic.\n * 3. **Client Validation**: The `setClientValidationSchema` function allows setting dynamic client-side\n *    validation schemas that complement the base Veto validation.\n * 4. **User Change Tracking**: The `userChange` property provides a pub/sub system for tracking\n *    user-initiated field changes (typing, clicking, selecting) - NOT programmatic changes like\n *    form.reset() or form.setValue(). Used by the `useWatchUserChange` hook to enable reactive\n *    field dependencies.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n *\n * IMPORTANT: Context Singleton Pattern for HMR (Hot Module Replacement)\n * =====================================================================\n *\n * We use a global window variable to ensure only ONE context instance exists across\n * hot module reloads during development. This is critical because:\n *\n * **The Problem:**\n * When using Vite/Storybook with Fast Refresh (HMR), editing this file causes it to\n * be re-evaluated. Each re-evaluation runs `React.createContext()` again, creating a\n * NEW context instance. This leads to \"context instance mismatch\":\n *\n *   1. FormProvider (provider) loads and uses context instance A\n *   2. File is edited, HMR triggers\n *   3. SubmitButton (consumer) hot-reloads and imports context instance B\n *   4. Provider writes to instance A, Consumer reads from instance B\n *   5. Result: Consumer sees default values (triggerSubmit = () => undefined)\n *   6. Clicking submit does nothing because it calls the empty default function\n *\n * **The Solution:**\n * By storing the context in `window.__UNIFORM_CONTEXT__`, we ensure:\n *   - First load: Create context and store in window\n *   - Subsequent HMRs: Reuse the same context from window\n *   - All components always reference the SAME context instance\n *   - Provider and consumers can properly communicate\n *\n * **Why This Is Safe:**\n * - Only affects development (production has no HMR)\n * - Context type never changes (same interface)\n * - React handles cleanup on unmount normally\n * - No memory leaks (context is lightweight)\n *\n * Without this pattern, you'd need to restart the dev server after every edit\n * to FormContext.tsx to ensure all components use the same context instance.\n */\n\n// Define the context type\ninterface UniformContextType {\n  /** Form debug mode enabled or not */\n  debugMode: DebugMode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** Function to update if the form can currently be submitted */\n  preventSubmit: (prevent: boolean) => void;\n  /** Setter to enable or disable form debug mode */\n  setDebugMode: (debugMode: DebugMode) => void;\n  /** Function to trigger form submit programmatically */\n  triggerSubmit: (e?: BaseSyntheticEvent) => Promise<void> | void;\n  /** User change tracking (user input only, not programmatic changes) */\n  userChange: {\n    /**\n     * Subscribe to user field changes.\n     * Returns an unsubscribe function.\n     */\n    subscribe: (listener: UserChangeListener) => () => void;\n    /**\n     * Notify all subscribers about a user field change.\n     * Called from useController when user interacts with a field.\n     */\n    notify: (fieldName: string, value: unknown) => void;\n  };\n  /** Form validation configuration */\n  validation: {\n    /** Base validation schema instance (without client validation) */\n    baseInstance?: VetoInstance;\n    /** Veto validation schema instance for form validation */\n    instance?: VetoInstance;\n    /** Current validation errors in form */\n    errors?: VetoFormattedError;\n    /** Function to set client validation schema for a specific key */\n    setClientValidationSchema: (\n      key: string,\n      schema: VetoTypeAny | null,\n    ) => void;\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nif (!(window as any).__UNIFORM_CONTEXT__) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (window as any).__UNIFORM_CONTEXT__ = React.createContext<UniformContextType>(\n    {\n      debugMode: 'off',\n      preventSubmit: () => {\n        return undefined;\n      },\n      setDebugMode: () => {\n        return undefined;\n      },\n      triggerSubmit: () => {\n        return undefined;\n      },\n      userChange: {\n        subscribe: () => {\n          return () => {\n            return undefined;\n          };\n        },\n        notify: () => {\n          return undefined;\n        },\n      },\n      validation: {\n        setClientValidationSchema: () => {\n          return undefined;\n        },\n      },\n    },\n  );\n  debug('Creating new UniformContext instance');\n} else {\n  debug(\n    'Reusing existing UniformContext instance from window.__UNIFORM_CONTEXT__',\n  );\n}\n\n// Export the singleton context instance from window\n// This ensures all imports get the same context, even after HMR\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const UniformContext = (window as any)\n  .__UNIFORM_CONTEXT__ as React.Context<UniformContextType>;\n\ndebug('UniformContext exported', {\n  contextExists: !!UniformContext,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  windowContextExists: !!(window as any).__UNIFORM_CONTEXT__,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  contextsMatch: UniformContext === (window as any).__UNIFORM_CONTEXT__,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n  /** children form render function */\n  children: (childProps: {\n    handleSubmit: (e?: BaseSyntheticEvent) => Promise<void>;\n    isValid: boolean;\n  }) => ReactNode;\n  /** settings for from debug mode */\n  debugModeSettings?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** Veto validation schema instance */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - Veto validation schema context\n * - Client validation schema management\n * - Submit handler with automatic data conversion and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n  children,\n  debugModeSettings = undefined,\n  initialValues = undefined,\n  onSubmit,\n  validation: baseValidation = undefined,\n  validationTrigger,\n}) => {\n  // Form Debug mode state is handled in the form context\n  const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n    debugModeSettings?.localStorageKey ?? DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n    'off',\n  );\n\n  // Create extended validation combining base + client validations\n  const { extendedValidation, setClientValidationSchema } =\n    useExtendedValidation(baseValidation);\n\n  const hasPendingUserChangeRef = useRef(false);\n  const [validationErrorsRefreshVersion, setValidationErrorsRefreshVersion] =\n    useState(0);\n\n  const handleValidationErrorsChange = useCallback(() => {\n    if (!hasPendingUserChangeRef.current) {\n      return;\n    }\n\n    hasPendingUserChangeRef.current = false;\n    setValidationErrorsRefreshVersion((prev) => {\n      return prev + 1;\n    });\n  }, []);\n\n  // Create resolver from extended validation + get current validation errors\n  const { resolver, validationErrors, validationErrorsHash } = useFormResolver(\n    extendedValidation,\n    handleValidationErrorsChange,\n  );\n\n  // Initialize react hook form with the resolver\n  const methods = useForm({\n    defaultValues: initialValues ? toFormFormat(initialValues) : initialValues,\n    // set rhf mode\n    // see: https://react-hook-form.com/docs/useform#mode\n    mode: validationTrigger,\n    resolver,\n  });\n\n  // Get isValid from React Hook Form's formState\n  const isValid = methods.formState?.isValid;\n\n  // Control if the form can currently be submitted\n  const [preventSubmit, setPreventSubmit] = useState(false);\n\n  // User change listener registry (stored in ref to avoid re-renders)\n  const userChangeListenersRef = useRef<Set<UserChangeListener>>(new Set());\n\n  // Subscribe to user changes\n  const subscribeUserChange = useCallback(\n    (listener: UserChangeListener): (() => void) => {\n      userChangeListenersRef.current.add(listener);\n      // Return cleanup function to unsubscribe\n      return () => {\n        userChangeListenersRef.current.delete(listener);\n      };\n    },\n    [],\n  );\n\n  // Notify all subscribers about user change\n  const notifyUserChange = useCallback(\n    (fieldName: string, value: unknown): void => {\n      hasPendingUserChangeRef.current = true;\n\n      // Notify all registered listeners\n      userChangeListenersRef.current.forEach((listener) => {\n        listener(fieldName as Path<object>, value);\n      });\n    },\n    [],\n  );\n\n  // Create submit handler with automatic data conversion\n  // eslint-disable-next-line consistent-return\n  const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n    debug('handleSubmit called', {\n      preventSubmit,\n      formStateIsValid: methods.formState.isValid,\n      validationErrors: methods.formState.errors,\n      validationTrigger,\n      formValues: methods.getValues(),\n    });\n\n    // only prevent submit when form state is valid, because otherwise\n    // submit will only trigger validation and add errors / focus invalid fields\n    if (methods.formState.isValid && preventSubmit) {\n      debug('⛔ Form submit PREVENTED', {\n        formStateIsValid: methods.formState.isValid,\n        preventSubmit,\n      });\n      console.warn(\n        '[FormProvider] form submit was prevented because preventSubmit is true...',\n      );\n      e?.preventDefault();\n      return Promise.resolve();\n    }\n\n    debug('✓ Form submit ALLOWED', {\n      formStateIsValid: methods.formState.isValid,\n      preventSubmit,\n      reason: !methods.formState.isValid\n        ? 'Form is invalid (will trigger validation and show errors)'\n        : 'Form is valid and preventSubmit is false',\n    });\n\n    // Convert form data to submission format:\n    // - Unwrap flat array wrappers and convert markers\n    // - Remove empty strings, nulls, empty arrays, and empty objects\n    const wrappedOnSubmit = (data: FieldValues, event?: BaseSyntheticEvent) => {\n      const submitData = toSubmitFormat(data) ?? {};\n      debug('onSubmit callback called', { submitData });\n      return onSubmit(submitData, event);\n    };\n\n    await methods.handleSubmit(wrappedOnSubmit)(e);\n\n    debug('handleSubmit completed');\n  };\n\n  // Memoize the context value to prevent re-renders\n  const contextValue = useMemo(\n    () => {\n      return {\n        // set debugMode to disabled when debugModeSettings.disable is true\n        // otherwise use current debug mode from localStorage\n        debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n        preventSubmit: (prevent: boolean) => {\n          debug('preventSubmit called', {\n            previousValue: preventSubmit,\n            newValue: prevent,\n            formStateIsValid: methods.formState.isValid,\n            validationErrors: methods.formState.errors,\n          });\n          setPreventSubmit(prevent);\n        },\n        setClientValidationSchema,\n        setDebugMode,\n        triggerSubmit: handleSubmit,\n        userChange: {\n          subscribe: subscribeUserChange,\n          notify: notifyUserChange,\n        },\n        validation: {\n          baseInstance: baseValidation,\n          instance: extendedValidation,\n          errors: validationErrors,\n          setClientValidationSchema,\n        },\n      };\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      debugMode,\n      debugModeSettings?.disable,\n      validationErrorsHash,\n      validationErrorsRefreshVersion,\n    ],\n  );\n\n  return (\n    <UniformContext.Provider value={contextValue}>\n      {/* Spread all hook form props into HookFormProvider */}\n      <HookFormProvider {...methods}>\n        {children({ handleSubmit, isValid })}\n      </HookFormProvider>\n    </UniformContext.Provider>\n  );\n};\n\nexport default FormProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,mCAAmC;CAE9C,MAAM,CAAC,yBAAyB,+BAAA,GAAA,MAAA,UAE9B,CAAC,CAAC;CAsBJ,OAAO;EACL;EACA,4BAAA,GAAA,MAAA,eArB8C;GAC9C,QAAQ,KAAa,WAA+B;IAElD,4BAA4B,SAAS;KAEnC,IAAI,CAAC,KAAK,QAAQ,CAAC,QACjB,OAAO;KAGT,IAAI,CAAC,QAAQ;MACX,MAAM,GAAG,MAAM,UAAU,GAAG,SAAS;MACrC,OAAO;KACT;KAEA,OAAO;MAAE,GAAG;OAAO,MAAM;KAAO;IAClC,CAAC;GACH;EACF,GAAG,CAAC,CAIsB;CAC1B;AACF;;;;;;;AAQA,MAAa,yBAAyB,mBAAkC;CAEtE,MAAM,EAAE,yBAAyB,8BAC/B,2BAA2B;CAG7B,MAAM,sBAAA,GAAA,MAAA,eACE;EAEJ,OADa,OAAO,KAAK,uBAAuB,EAAE,KACxC,EACP,KAAK,QAAQ;GACZ,OAAO,wBAAwB;EACjC,CAAC,EACA,QAAQ,WAAkC;GACzC,OAAO,QAAQ,MAAM;EACvB,CAAC;CACL,GAEA,CAAC,uBAAuB,CAC1B;CA+CA,OAAO;EACL,qBAAA,GAAA,MAAA,eA5CM;GACJ,MAAM,oBAAoB,CAAC,CAAC;GAC5B,MAAM,mBAAmB,mBAAmB,SAAS;GAGrD,IAAI,CAAC,qBAAqB,CAAC,kBACzB;GAIF,IAAI,CAAC,kBACH,OAAO;GAIT,MAAM,wBACJ,mBAAmB,QAChB,UAAU,iBAAiB;IAC1B,OAAO,YAAA,GAAA,gBAAA,KAAe,UAAU,YAAY,IAAI;GAClD,GACA,IACF;GAGF,IAAI,kBAAkB,uBAAuB;IAG3C,MAAM,aAAa,eAAe;IAClC,QAAA,GAAA,gBAAA,OAAA,GAAA,gBAAA,KAAgB,uBAAuB,UAAU,CAAC;GACpD;GAGA,IAAI,uBACF,QAAA,GAAA,gBAAA,MAAY,qBAAqB;GAInC,OAAO;EACT,GAEA,CAAC,gBAAgB,kBAAkB,CAIlB;EACjB;CACF;AACF;;;;;;;AAQA,MAAa,mBACX,oBACA,6BACG;CAIH,MAAM,oBAAA,GAAA,MAAA,QAA8C,KAAA,CAAS;CAC7D,MAAM,wBAAA,GAAA,MAAA,QAAkD,KAAA,CAAS;CAEjE,MAAM,0BAAA,GAAA,MAAA,cACH,WAAiD;EAGhD,iBAAiB,UAAU;EAK3B,MAAM,WAAW,KAAK,UAAU,MAAM;EAEtC,IAAI,qBAAqB,YAAY,UAAU;GAC7C,qBAAqB,UAAU;GAC/B,2BAA2B,QAAQ;EACrC;CACF,GACA,CAAC,wBAAwB,CAC3B;CAyBA,OAAO;EACL,WAAA,GAAA,MAAA,eAvB6B;GAC7B,IAAI,CAAC,oBACH;GAGF,OAAO,OAAO,WAAwB;IACpC,MAAM,mBAAmBA,sBAAAA,mBAAmB,MAAM,KAAK,CAAC;IACxD,MAAM,SAAS,MAAM,mBAAmB,cAAc,gBAAgB;IACtE,uBAAuB,OAAO,UAAU,KAAA,CAAS;IAGjD,OAAO;KACL,QAAQ,OAAO,QAAQ,CAAC;KACxB,QAAQ,OAAO,UAAU,CAAC;IAC5B;GACF;EACF,GAAG,CAAC,oBAAoB,sBAAsB,CAOrC;EACP,kBAL8B,iBAAiB;EAM/C,sBALkC,qBAAqB;CAMzD;AAEF;;;ACjLA,MAAMC,WAAAA,GAAAA,MAAAA,SAAoB,qBAAqB;AAmB/C,MAAM,uCAAuC;AAkG7C,IAAI,CAAE,OAAe,qBAAqB;CAExC,OAAgB,sBAAsBC,MAAAA,QAAM,cAC1C;EACE,WAAW;EACX,qBAAqB,CAErB;EACA,oBAAoB,CAEpB;EACA,qBAAqB,CAErB;EACA,YAAY;GACV,iBAAiB;IACf,aAAa,CAEb;GACF;GACA,cAAc,CAEd;EACF;EACA,YAAY,EACV,iCAAiC,CAEjC,EACF;CACF,CACF;CACA,QAAM,sCAAsC;AAC9C,OACE,QACE,0EACF;AAMF,MAAa,iBAAkB,OAC5B;AAEHD,QAAM,2BAA2B;CAC/B,eAAe,CAAC,CAAC;CAEjB,qBAAqB,CAAC,CAAE,OAAe;CAEvC,eAAe,mBAAoB,OAAe;AACpD,CAAC;;;;;;;;;AA6BD,MAAM,gBAA6C,EACjD,UACA,oBAAoB,KAAA,GACpB,gBAAgB,KAAA,GAChB,UACA,YAAY,iBAAiB,KAAA,GAC7B,wBACI;CAEJ,MAAM,CAAC,WAAW,iBAAA,GAAA,kBAAA,iBAChB,mBAAmB,mBAAmB,sCACtC,KACF;CAGA,MAAM,EAAE,oBAAoB,8BAC1B,sBAAsB,cAAc;CAEtC,MAAM,2BAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,CAAC,gCAAgC,sCAAA,GAAA,MAAA,UAC5B,CAAC;CAcZ,MAAM,EAAE,UAAU,kBAAkB,yBAAyB,gBAC3D,qBAAA,GAAA,MAAA,mBAbqD;EACrD,IAAI,CAAC,wBAAwB,SAC3B;EAGF,wBAAwB,UAAU;EAClC,mCAAmC,SAAS;GAC1C,OAAO,OAAO;EAChB,CAAC;CACH,GAAG,CAAC,CAKyB,CAC7B;CAGA,MAAM,WAAA,GAAA,gBAAA,SAAkB;EACtB,eAAe,gBAAgBE,sBAAAA,aAAa,aAAa,IAAI;EAG7D,MAAM;EACN;CACF,CAAC;CAGD,MAAM,UAAU,QAAQ,WAAW;CAGnC,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B,KAAK;CAGxD,MAAM,0BAAA,GAAA,MAAA,wBAAyD,IAAI,IAAI,CAAC;CAGxE,MAAM,uBAAA,GAAA,MAAA,cACH,aAA+C;EAC9C,uBAAuB,QAAQ,IAAI,QAAQ;EAE3C,aAAa;GACX,uBAAuB,QAAQ,OAAO,QAAQ;EAChD;CACF,GACA,CAAC,CACH;CAGA,MAAM,oBAAA,GAAA,MAAA,cACH,WAAmB,UAAyB;EAC3C,wBAAwB,UAAU;EAGlC,uBAAuB,QAAQ,SAAS,aAAa;GACnD,SAAS,WAA2B,KAAK;EAC3C,CAAC;CACH,GACA,CAAC,CACH;CAIA,MAAM,eAAe,OAAO,MAAiC;EAC3D,QAAM,uBAAuB;GAC3B;GACA,kBAAkB,QAAQ,UAAU;GACpC,kBAAkB,QAAQ,UAAU;GACpC;GACA,YAAY,QAAQ,UAAU;EAChC,CAAC;EAID,IAAI,QAAQ,UAAU,WAAW,eAAe;GAC9C,QAAM,2BAA2B;IAC/B,kBAAkB,QAAQ,UAAU;IACpC;GACF,CAAC;GACD,QAAQ,KACN,2EACF;GACA,GAAG,eAAe;GAClB,OAAO,QAAQ,QAAQ;EACzB;EAEA,QAAM,yBAAyB;GAC7B,kBAAkB,QAAQ,UAAU;GACpC;GACA,QAAQ,CAAC,QAAQ,UAAU,UACvB,8DACA;EACN,CAAC;EAKD,MAAM,mBAAmB,MAAmB,UAA+B;GACzE,MAAM,aAAaC,sBAAAA,eAAe,IAAI,KAAK,CAAC;GAC5C,QAAM,4BAA4B,EAAE,WAAW,CAAC;GAChD,OAAO,SAAS,YAAY,KAAK;EACnC;EAEA,MAAM,QAAQ,aAAa,eAAe,EAAE,CAAC;EAE7C,QAAM,wBAAwB;CAChC;CAGA,MAAM,gBAAA,GAAA,MAAA,eACE;EACJ,OAAO;GAGL,WAAW,mBAAmB,UAAU,aAAa;GACrD,gBAAgB,YAAqB;IACnC,QAAM,wBAAwB;KAC5B,eAAe;KACf,UAAU;KACV,kBAAkB,QAAQ,UAAU;KACpC,kBAAkB,QAAQ,UAAU;IACtC,CAAC;IACD,iBAAiB,OAAO;GAC1B;GACA;GACA;GACA,eAAe;GACf,YAAY;IACV,WAAW;IACX,QAAQ;GACV;GACA,YAAY;IACV,cAAc;IACd,UAAU;IACV,QAAQ;IACR;GACF;EACF;CACF,GAEA;EACE;EACA,mBAAmB;EACnB;EACA;CACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAe,UAAhB;EAAyB,OAAO;YAE9B,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,cAAD;GAAkB,GAAI;aACnB,SAAS;IAAE;IAAc;GAAQ,CAAC;EACnB,CAAA;CACK,CAAA;AAE7B"}

package/dist/Grid/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Grid = require("../Grid-BPOumLUp.cjs");
+const require_Grid = require("../Grid-DIe8WII9.cjs");
 exports.Grid = require_Grid.Grid;
 exports.default = require_Grid.Grid_default;

package/dist/{Grid-BPOumLUp.cjs → Grid-DIe8WII9.cjs}

@@ -1,4 +1,4 @@
-require("./FormContext-Djp8wTG8.cjs");
+require("./FormContext-DwCicmnH.cjs");
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Grid/Grid.tsx
@@ -29,4 +29,4 @@ Object.defineProperty(exports, "Grid_default", {
 	}
 });
 
-//# sourceMappingURL=Grid-BPOumLUp.cjs.map
+//# sourceMappingURL=Grid-DIe8WII9.cjs.map

package/dist/{Grid-BPOumLUp.cjs.map → Grid-DIe8WII9.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-BPOumLUp.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}
+{"version":3,"file":"Grid-DIe8WII9.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}

package/dist/Input/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Input = require("../Input-D64GjrZJ.cjs");
+const require_Input = require("../Input-Bi75-PA6.cjs");
 exports.Input = require_Input.Input;
 exports.default = require_Input.Input_default;

package/dist/Input/index.d.cts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-A8Jhitar.cjs";
+import { n as InputProps, t as Input } from "../index-DxXdHxyY.cjs";
 export { Input, Input as default, type InputProps };

package/dist/Input/index.d.ts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-5_7F4o-d.js";
+import { n as InputProps, t as Input } from "../index-C4Qex3mx.js";
 export { Input, Input as default, type InputProps };

package/dist/{Input-D64GjrZJ.cjs → Input-Bi75-PA6.cjs}

@@ -1,4 +1,4 @@
-require("./FormContext-Djp8wTG8.cjs");
+require("./FormContext-DwCicmnH.cjs");
 const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
 const require_hooks_useInputValueDebounce_index = require("./hooks/useInputValueDebounce/index.cjs");
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -105,4 +105,4 @@ Object.defineProperty(exports, "Input_default", {
 	}
 });
 
-//# sourceMappingURL=Input-D64GjrZJ.cjs.map
+//# sourceMappingURL=Input-Bi75-PA6.cjs.map

package/dist/{Input-D64GjrZJ.cjs.map → Input-Bi75-PA6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-D64GjrZJ.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAe"}
+{"version":3,"file":"Input-Bi75-PA6.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAe"}

package/dist/RadioBoxes/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_RadioBoxes = require("../RadioBoxes-DpBv9exN.cjs");
+const require_RadioBoxes = require("../RadioBoxes-D9cMQ9hJ.cjs");
 exports.RadioBoxes = require_RadioBoxes.RadioBoxes;
 exports.default = require_RadioBoxes.RadioBoxes_default;
 exports.radioBoxVariants = require_RadioBoxes.radioBoxVariants;

package/dist/RadioBoxes/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-Dz1C3MeK.cjs";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-cxajYZel.cjs";
 export { RadioBoxes, RadioBoxes as default, type RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-D-UGVdC1.js";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-B682jKQ_.js";
 export { RadioBoxes, RadioBoxes as default, type RadioBoxesProps, radioBoxVariants };

package/dist/{RadioBoxes-DpBv9exN.cjs → RadioBoxes-D9cMQ9hJ.cjs}

@@ -1,4 +1,4 @@
-require("./FormContext-Djp8wTG8.cjs");
+require("./FormContext-DwCicmnH.cjs");
 const require_helpers_index = require("./helpers/index.cjs");
 const require_hooks_useUniformField_index = require("./hooks/useUniformField/index.cjs");
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
@@ -150,4 +150,4 @@ Object.defineProperty(exports, "radioBoxVariants", {
 	}
 });
 
-//# sourceMappingURL=RadioBoxes-DpBv9exN.cjs.map
+//# sourceMappingURL=RadioBoxes-D9cMQ9hJ.cjs.map