@atom-learning/components 3.27.1 → 3.28.0

package/dist/components/data-table/DataTable.d.ts

@@ -386,9 +386,6 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-        onBlur?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         slot?: string | undefined;
         style?: import("react").CSSProperties | undefined;
         title?: string | undefined;
@@ -498,7 +495,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
         onFocus?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
         onFocusCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onBeforeInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
@@ -506,6 +505,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         onInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onReset?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onResetCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onSubmitCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onInvalid?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
         onInvalidCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
@@ -1810,7 +1810,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
      */
-    GlobalFilter: ({ onChange, label, hideLabel, ...props }: Pick<Omit<Pick<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    GlobalFilter: ({ onChange, label, hideLabel, ...props }: Omit<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
         sm: string;
@@ -2195,7 +2195,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         }) | undefined;
         type?: "number" | "text" | "search" | "tel" | "url" | "email" | "password" | undefined;
         as?: undefined;
-    }, "color" | "height" | "translate" | "width" | "size" | "css" | "onBlur" | "onChange" | "onSubmit" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "autoComplete" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "as" | "step" | "required" | "min" | "max" | "maxLength" | "minLength" | "disabled" | "type" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "multiple" | "alt" | "src" | "accept" | "capture" | "checked" | "enterKeyHint" | "readOnly"> & import("react").RefAttributes<HTMLInputElement>, "size" | "state"> & {
+    }, "size" | "state"> & {
         size?: "sm" | "md" | "lg" | "xl" | ({
             "@sm"?: "sm" | "md" | "lg" | "xl" | undefined;
             "@md"?: "sm" | "md" | "lg" | "xl" | undefined;
@@ -2220,7 +2220,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         } & {
             [x: string]: "error" | undefined;
         }) | undefined;
-    }, "color" | "height" | "translate" | "width" | "size" | "css" | "onBlur" | "onChange" | "onSubmit" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "autoComplete" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "as" | "step" | "required" | "min" | "max" | "maxLength" | "minLength" | "disabled" | "type" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "multiple" | "alt" | "src" | "accept" | "capture" | "checked" | "enterKeyHint" | "readOnly" | "state"> & import("react").RefAttributes<HTMLInputElement> & {
+    } & {
         size?: "sm" | "md" | "lg" | undefined;
         css?: import("../..").CSS | undefined;
         value?: string | undefined;

package/dist/components/form/Form.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type { FormValues } from './Form.types';
+import React from 'react';
+import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
 declare const StyledForm: import("@stitches/react/types/styled-component").StyledComponent<"form", {}, {
     sm: string;
     md: string;
@@ -367,9 +367,16 @@ declare const StyledForm: import("@stitches/react/types/styled-component").Style
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues;
+declare type StyledFormProps = Omit<React.ComponentPropsWithoutRef<typeof StyledForm>, 'onSubmit' | 'onError'>;
+interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
+    defaultValues?: DefaultValues<TFormData>;
+    validationMode?: Mode;
+    onSubmit: SubmitHandler<TFormData>;
+    onError?: SubmitErrorHandler<TFormData>;
+    children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
+}
 export declare const Form: {
-    ({ children, defaultValues, onSubmit, onError, validationMode, render, persist, ...remainingProps }: FormProps): JSX.Element;
+    <TFormData extends FieldValues>(props: FormProps<TFormData>): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/form/Form.js

@@ -1,2 +1,2 @@
-import w from"invariant";import*as m from"react";import{useForm as S,FormProvider as E}from"react-hook-form";import g from"react-hook-form-persist";import{styled as F}from"../../stitches.js";import{StorageEnum as V}from"./Form.types.js";const v=F("form",{}),x=({persist:r,watch:o,setValue:n,children:l})=>{const{id:i,...e}=r;let t={...e,storage:e.storage===V.LOCAL?window.localStorage:window.sessionStorage};if(e.exclude){const{exclude:h,...a}=t,u=o(),c=Object.keys(u).filter(s=>{var d;if(!((d=e.exclude)!=null&&d.includes(s)))return s});t={...a,include:c}}return g(i,{watch:o,setValue:n},t),l},b=({formMethods:r,handleSubmit:o,onSubmit:n,onError:l,children:i,...e})=>m.createElement(E,{...r},m.createElement(v,{"aria-label":"form",...e,onSubmit:o(n,l)},i)),p=({children:r,defaultValues:o={},onSubmit:n,onError:l,validationMode:i="onBlur",render:e,persist:t,...h})=>{w(!(r&&e),"`Form` should only be given one of `children` or `render`. When both are provided, `render` will be used and `children` will be ignored.");const a=S({defaultValues:o,mode:i}),{handleSubmit:u,watch:c,setValue:s}=a,d=e?e(a):r,f={formMethods:a,handleSubmit:u,onSubmit:n,onError:l,...h};return t?m.createElement(x,{persist:t,watch:c,setValue:s},m.createElement(b,{...f},d)):m.createElement(b,{...f},d)};p.displayName="Form";export{p as Form};
+import r from"react";import{useForm as u,FormProvider as f}from"react-hook-form";import{styled as s}from"../../stitches.js";const c=s("form",{}),t=m=>{const{children:o,defaultValues:a,validationMode:l="onBlur",onSubmit:n,onError:i,...d}=m,e=u({defaultValues:a,mode:l});return r.createElement(f,{...e},r.createElement(c,{"aria-label":"form",onSubmit:e.handleSubmit(n,i),...d},typeof o=="function"?o(e):o))};t.displayName="Form";export{t as Form};
 //# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport useFormPersist from 'react-hook-form-persist'\n\nimport { styled } from '~/stitches'\n\nimport type {\n  FormContentValues,\n  FormPersistParams,\n  FormValues,\n  PersistFormWrapperValues\n} from './Form.types'\nimport { StorageEnum } from './Form.types'\n\nconst StyledForm = styled('form', {})\n\ntype FormProps = React.ComponentPropsWithoutRef<typeof StyledForm> & FormValues\n\ntype FormContentProps = React.ComponentPropsWithoutRef<typeof StyledForm> &\n  FormContentValues\n\ntype PersistFormWrapperProps = React.ComponentPropsWithoutRef<\n  typeof StyledForm\n> &\n  PersistFormWrapperValues\n\nconst PersistFormWrapper = ({\n  persist,\n  watch,\n  setValue,\n  children\n}: PersistFormWrapperProps) => {\n  const { id, ...options } = persist\n\n  let params: FormPersistParams = {\n    ...options,\n    storage:\n      options.storage === StorageEnum.LOCAL\n        ? window.localStorage\n        : window.sessionStorage\n  }\n\n  if (options.exclude) {\n    // Workaround for bug in react-hook-form-persist package\n    // package will still read from and save exclude param\n    // so need to send inputs we actually want to read from in include param instead\n    const { exclude, ...rest } = params\n    const allValues = watch()\n    const include = Object.keys(allValues).filter((key) => {\n      if (!options.exclude?.includes(key)) return key\n    })\n    params = { ...rest, include }\n  }\n\n  useFormPersist(id, { watch, setValue }, params)\n\n  return children\n}\n\nconst FormContent = ({\n  formMethods,\n  handleSubmit,\n  onSubmit,\n  onError,\n  children,\n  ...remainingProps\n}: FormContentProps) => (\n  <FormProvider {...formMethods}>\n    <StyledForm\n      aria-label=\"form\"\n      {...remainingProps}\n      onSubmit={handleSubmit(onSubmit, onError)}\n    >\n      {children}\n    </StyledForm>\n  </FormProvider>\n)\n\nexport const Form = ({\n  children,\n  defaultValues = {},\n  onSubmit,\n  onError,\n  validationMode = 'onBlur',\n  render,\n  persist,\n  ...remainingProps\n}: FormProps) => {\n  invariant(\n    !(children && render),\n    '`Form` should only be given one of `children` or `render`. When both are provided, `render` will be used and `children` will be ignored.'\n  )\n\n  const formMethods = useForm({\n    defaultValues,\n    mode: validationMode\n  })\n  const { handleSubmit, watch, setValue } = formMethods\n\n  const formContent = render ? render(formMethods) : children\n\n  const props = {\n    formMethods,\n    handleSubmit,\n    onSubmit,\n    onError,\n    ...remainingProps\n  }\n\n  if (persist) {\n    return (\n      <PersistFormWrapper persist={persist} watch={watch} setValue={setValue}>\n        <FormContent {...props}>{formContent}</FormContent>\n      </PersistFormWrapper>\n    )\n  }\n\n  return <FormContent {...props}>{formContent}</FormContent>\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","PersistFormWrapper","persist","watch","setValue","children","id","options","params","StorageEnum","exclude","rest","allValues","include","key","_a","useFormPersist","FormContent","formMethods","handleSubmit","onSubmit","onError","remainingProps","React","FormProvider","Form","defaultValues","validationMode","render","invariant","useForm","formContent","props"],"mappings":"6OAeA,MAAMA,EAAaC,EAAO,OAAQ,CAAA,CAAE,EAY9BC,EAAqB,CAAC,CAC1B,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,CACF,IAA+B,CAC7B,KAAM,CAAE,GAAAC,KAAOC,CAAQ,EAAIL,EAE3B,IAAIM,EAA4B,CAC9B,GAAGD,EACH,QACEA,EAAQ,UAAYE,EAAY,MAC5B,OAAO,aACP,OAAO,cACf,EAEA,GAAIF,EAAQ,QAAS,CAInB,KAAM,CAAE,QAAAG,KAAYC,CAAK,EAAIH,EACvBI,EAAYT,IACZU,EAAU,OAAO,KAAKD,CAAS,EAAE,OAAQE,GAAQ,CAjD3D,IAAAC,EAkDM,GAAI,GAACA,EAAAR,EAAQ,UAAR,MAAAQ,EAAiB,SAASD,CAAM,GAAA,OAAOA,CAC9C,CAAC,EACDN,EAAS,CAAE,GAAGG,EAAM,QAAAE,CAAQ,CAC9B,CAEA,OAAAG,EAAeV,EAAI,CAAE,MAAAH,EAAO,SAAAC,CAAS,EAAGI,CAAM,EAEvCH,CACT,EAEMY,EAAc,CAAC,CACnB,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAhB,KACGiB,CACL,IACEC,EAAA,cAACC,EAAA,CAAc,GAAGN,CAAAA,EAChBK,EAAA,cAACxB,EAAA,CACC,aAAW,OACV,GAAGuB,EACJ,SAAUH,EAAaC,EAAUC,CAAO,CAEvChB,EAAAA,CACH,CACF,EAGWoB,EAAO,CAAC,CACnB,SAAApB,EACA,cAAAqB,EAAgB,CAAC,EACjB,SAAAN,EACA,QAAAC,EACA,eAAAM,EAAiB,SACjB,OAAAC,EACA,QAAA1B,KACGoB,CACL,IAAiB,CACfO,EACE,EAAExB,GAAYuB,GACd,0IACF,EAEA,MAAMV,EAAcY,EAAQ,CAC1B,cAAAJ,EACA,KAAMC,CACR,CAAC,EACK,CAAE,aAAAR,EAAc,MAAAhB,EAAO,SAAAC,CAAS,EAAIc,EAEpCa,EAAcH,EAASA,EAAOV,CAAW,EAAIb,EAE7C2B,EAAQ,CACZ,YAAAd,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAEA,OAAIpB,EAEAqB,EAAA,cAACtB,EAAA,CAAmB,QAASC,EAAS,MAAOC,EAAO,SAAUC,CAAAA,EAC5DmB,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAAA,EAAQD,CAAY,CACvC,EAIGR,EAAA,cAACN,EAAA,CAAa,GAAGe,CAAQD,EAAAA,CAAY,CAC9C,EAEAN,EAAK,YAAc"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n  React.ComponentPropsWithoutRef<typeof StyledForm>,\n  'onSubmit' | 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData>\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <StyledForm\n        aria-label=\"form\"\n        onSubmit={methods.handleSubmit(onSubmit, onError)}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(methods) : children}\n      </StyledForm>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","rest","methods","useForm","React","FormProvider"],"mappings":"4HAaA,MAAMA,EAAaC,EAAO,OAAQ,CAAA,CAAE,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,KACGC,CACL,EAAIN,EAEEO,EAAUC,EAAmB,CACjC,cAAAN,EACA,KAAMC,CACR,CAAC,EAED,OACEM,EAAA,cAACC,EAAA,CAAc,GAAGH,CAAAA,EAChBE,EAAA,cAACZ,EAAA,CACC,aAAW,OACX,SAAUU,EAAQ,aAAaH,EAAUC,CAAO,EAC/C,GAAGC,GAEH,OAAOL,GAAa,WAAaA,EAASM,CAAO,EAAIN,CACxD,CACF,CAEJ,EAEAF,EAAK,YAAc"}