@geowiki/design-system 0.16.9-dev.14 → 0.16.9-dev.15

package/dist/index.d.ts

@@ -116,9 +116,11 @@ declare const Command: React$1.ForwardRefExoticComponent<Omit<{
     label?: string | undefined;
     shouldFilter?: boolean | undefined;
     filter?: ((value: string, search: string) => number) | undefined;
+    defaultValue?: string | undefined;
     value?: string | undefined;
     onValueChange?: ((value: string) => void) | undefined;
     loop?: boolean | undefined;
+    vimBindings?: boolean | undefined;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 interface CommandDialogProps extends DialogProps {
 }
@@ -135,9 +137,10 @@ declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
-} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "value" | "heading"> & {
+} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "heading" | "value"> & {
     heading?: React$1.ReactNode;
     value?: string | undefined;
+    forceMount?: boolean | undefined;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement> & {
     alwaysRender?: boolean | undefined;
@@ -148,6 +151,7 @@ declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     disabled?: boolean | undefined;
     onSelect?: ((value: string) => void) | undefined;
     value?: string | undefined;
+    forceMount?: boolean | undefined;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandShortcut: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
@@ -221,7 +225,7 @@ declare const DropdownMenuShortcut: {
     displayName: string;
 };
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
@@ -1246,4 +1250,4 @@ interface H1BodyButtonWithAppProps {
 }
 declare const H1BodyButtonWithApp: (props: H1BodyButtonWithAppProps) => react_jsx_runtime.JSX.Element;
 
-export { AboutInfoItem, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppItem, AppItemsList, AspectRatio, AtomIcon, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, BasicFooter, BigLandingTitle, BigLandingTitleAccent, Body12, Body12m, Body12sb, Body14, Body14m, Body14sb, Body15, Body15it, Body15m, Body15sb, Body16, Body16it, Body16m, Body16sb, Body18, Body18m, Body18sb, Body20, Body20m, Body20sb, BookTextIcon, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonContent, ButtonLink, ButtonProps$1 as ButtonProps, Calendar, CalendarIcon, CalendarProps, CameraIcon, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartLineDotsIcon, ChatsIcons, Checkbox$1 as Checkbox, ClipboardIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Cookies, CountryItem, CpuIcon, CustomImage, CustomTable, DeleteButton, DesignButton, Checkbox as DesignCheckbox, DesignFooter, DesignHeader, DesignHeaderProps, DesignInput, DesignInputProps, DesignRadioGroup, DesignRadioGroupItem, DesignResultTag, DesignSelect, DesignSelectContent, DesignSelectGroup, DesignSelectItem, DesignSelectLabel, DesignSelectSeparator, DesignSelectTrigger, DesignSelectValue, DesignSimpleTag, DesignSwitch, DesktopCodeIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayItem, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorMessage, FaqComponent, FarmerClusterPin, FarmerClustersIcon, FeatureDisabled, FeaturedItemWithBannerImage, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullPageLoader, GlobeIcon, GridDividersIcon, H1AccentDesign, H1BodyButton, H1BodyButtonProps, H1BodyButtonWithApp, H1BodyButtonWithAppProps, H1Design, H2AccentDesign, H2BodyButton, H2Design, H3Design, H4Design, H5Design, H6Design, H7Design, H8Design, H9Design, HardDriveIcon, HeadphonesIcon, HeroImage, HeroImageRightWithAppButtons, Hexagon, HoverCard, HoverCardContent, HoverCardTrigger, IPanelHorizontalProps, Icon, IconPaths, IframeViewer, ImageIcon, InfoBox, Input, InputProps, KeyInfoItem, Label, LandingTitle, LandingTitleAccent, LastUpdatedTag, LayerGroupIcon, LegendIcon, LinkButtonItem, Loader, LoaderFull, LocalLoader, LocationIcon, MapIcon, MapLayersIcon, MapLegendIcon, MediaEmbedItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Microscope, MicroscopeIcon, MinusIcon, MultiSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoResults, Notification, ObservationPin, OldButton, OldCustomInput, OverlayIcon, Pagination, PanelHorizontal, PermissionDisabled, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrimaryButton, Progress, RadioGroup, RadioGroupItem, ResourceTag, ResourcesIcon, ResourcesQuickFind, ScrollArea, ScrollBar, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowLargeText, ShowShortText, SimpleLink, SizedImage, Skeleton, Slider, StopWatchCheckIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableViewProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagList, TagsGroup, TestWeight, TextArea, Textarea, TextareaProps, ThemeSwitcher, ThreeColumn, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UmamiAnalytics, UnderConstruction, UserGroupIcon, UsersGroup, VersionDisplay, VideoPlayIcon, XIcon, badgeVariants, buttonVariants, cn, designButtonVariants, getPages, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useDebounce, useFormField, useToast };
+export { AboutInfoItem, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppItem, AppItemsList, AspectRatio, AtomIcon, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BasicFooter, BigLandingTitle, BigLandingTitleAccent, Body12, Body12m, Body12sb, Body14, Body14m, Body14sb, Body15, Body15it, Body15m, Body15sb, Body16, Body16it, Body16m, Body16sb, Body18, Body18m, Body18sb, Body20, Body20m, Body20sb, BookTextIcon, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonContent, ButtonLink, type ButtonProps$1 as ButtonProps, Calendar, CalendarIcon, type CalendarProps, CameraIcon, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartLineDotsIcon, ChatsIcons, Checkbox$1 as Checkbox, ClipboardIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Cookies, CountryItem, CpuIcon, CustomImage, CustomTable, DeleteButton, DesignButton, Checkbox as DesignCheckbox, DesignFooter, DesignHeader, type DesignHeaderProps, DesignInput, type DesignInputProps, DesignRadioGroup, DesignRadioGroupItem, DesignResultTag, DesignSelect, DesignSelectContent, DesignSelectGroup, DesignSelectItem, DesignSelectLabel, DesignSelectSeparator, DesignSelectTrigger, DesignSelectValue, DesignSimpleTag, DesignSwitch, DesktopCodeIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DisplayItem, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorMessage, FaqComponent, FarmerClusterPin, FarmerClustersIcon, FeatureDisabled, FeaturedItemWithBannerImage, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullPageLoader, GlobeIcon, GridDividersIcon, H1AccentDesign, H1BodyButton, type H1BodyButtonProps, H1BodyButtonWithApp, type H1BodyButtonWithAppProps, H1Design, H2AccentDesign, H2BodyButton, H2Design, H3Design, H4Design, H5Design, H6Design, H7Design, H8Design, H9Design, HardDriveIcon, HeadphonesIcon, HeroImage, HeroImageRightWithAppButtons, Hexagon, HoverCard, HoverCardContent, HoverCardTrigger, type IPanelHorizontalProps, Icon, IconPaths, IframeViewer, ImageIcon, InfoBox, Input, type InputProps, KeyInfoItem, Label, LandingTitle, LandingTitleAccent, LastUpdatedTag, LayerGroupIcon, LegendIcon, type LinkButtonItem, Loader, LoaderFull, LocalLoader, LocationIcon, MapIcon, MapLayersIcon, MapLegendIcon, MediaEmbedItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Microscope, MicroscopeIcon, MinusIcon, MultiSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoResults, Notification, ObservationPin, OldButton, OldCustomInput, OverlayIcon, Pagination, PanelHorizontal, PermissionDisabled, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrimaryButton, Progress, RadioGroup, RadioGroupItem, ResourceTag, ResourcesIcon, ResourcesQuickFind, ScrollArea, ScrollBar, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowLargeText, ShowShortText, SimpleLink, SizedImage, Skeleton, Slider, StopWatchCheckIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableViewProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagList, TagsGroup, TestWeight, TextArea, Textarea, type TextareaProps, ThemeSwitcher, ThreeColumn, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UmamiAnalytics, UnderConstruction, UserGroupIcon, UsersGroup, VersionDisplay, VideoPlayIcon, XIcon, badgeVariants, buttonVariants, cn, designButtonVariants, getPages, navigationMenuTriggerStyle, reducer, toast, toggleVariants, useDebounce, useFormField, useToast };

package/dist/index.js

@@ -1582,48 +1582,48 @@ var isNullOrUndefined = (value) => value == null;
 var isObjectType = (value) => typeof value === "object";
 var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
 var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isNameInFieldArray = (names, name) => name.split(".").some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join(".")));
 var isPlainObject = (tempObject) => {
   const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
   return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
 };
 var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
 function cloneObject(data) {
-  let copy;
-  const isArray = Array.isArray(data);
   if (data instanceof Date) {
-    copy = new Date(data);
-  } else if (data instanceof Set) {
-    copy = new Set(data);
-  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
-    copy = isArray ? [] : {};
-    if (!isArray && !isPlainObject(data)) {
-      copy = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
+    return new Date(data);
+  }
+  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
+  if (isWeb && (data instanceof Blob || isFileListInstance)) {
     return data;
   }
+  const isArray = Array.isArray(data);
+  if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    return data;
+  }
+  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      copy[key] = cloneObject(data[key]);
+    }
+  }
   return copy;
 }
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey = (value) => /^\w*$/.test(value);
 var isUndefined = (val) => val === void 0;
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
 var get = (object, path, defaultValue) => {
   if (!path || !isObject(object)) {
     return defaultValue;
   }
-  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
+  const paths = isKey(path) ? [path] : stringToPath(path);
+  const result = paths.reduce((result2, key) => {
+    return isNullOrUndefined(result2) ? void 0 : result2[key];
+  }, object);
   return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
 var isBoolean = (value) => typeof value === "boolean";
-var isKey = (value) => /^\w*$/.test(value);
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
+var isFunction = (value) => typeof value === "function";
 var set = (object, path, value) => {
   let index = -1;
   const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -1636,18 +1636,20 @@ var set = (object, path, value) => {
       const objValue = object[key];
       newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
     }
-    if (key === "__proto__") {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") {
       return;
     }
     object[key] = newValue;
     object = object[key];
   }
-  return object;
 };
 var EVENTS = {
   BLUR: "blur",
   FOCUS_OUT: "focusout",
-  CHANGE: "change"
+  CHANGE: "change",
+  SUBMIT: "submit",
+  TRIGGER: "trigger",
+  VALID: "valid"
 };
 var VALIDATION_MODE = {
   onBlur: "onBlur",
@@ -1656,16 +1658,11 @@ var VALIDATION_MODE = {
   onTouched: "onTouched",
   all: "all"
 };
-var HookFormContext = import_react.default.createContext(null);
-var useFormContext = () => import_react.default.useContext(HookFormContext);
-var FormProvider = (props) => {
-  const _a = props, { children } = _a, data = __objRest(_a, ["children"]);
-  return import_react.default.createElement(HookFormContext.Provider, { value: data }, children);
-};
+var HookFormControlContext = import_react.default.createContext(null);
+HookFormControlContext.displayName = "HookFormControlContext";
+var useFormControlContext = () => import_react.default.useContext(HookFormControlContext);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
-  const result = {
-    defaultValues: control._defaultValues
-  };
+  const result = {};
   for (const key in formState) {
     Object.defineProperty(result, key, {
       get: () => {
@@ -1680,31 +1677,13 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
-var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
-  updateFormState(formStateData);
-  const _a = formStateData, { name } = _a, formState = __objRest(_a, ["name"]);
-  return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
-};
-var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
-var shouldSubscribeByName = (name, signalName, exact) => !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName)));
-function useSubscribe(props) {
-  const _props = import_react.default.useRef(props);
-  _props.current = props;
-  import_react.default.useEffect(() => {
-    const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
-      next: _props.current.next
-    });
-    return () => {
-      subscription && subscription.unsubscribe();
-    };
-  }, [props.disabled]);
-}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react.default.useLayoutEffect : import_react.default.useEffect;
 function useFormState(props) {
-  const methods = useFormContext();
-  const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = import_react.default.useState(control._formState);
-  const _mounted = import_react.default.useRef(true);
+  const formControl = useFormControlContext();
+  const { control = formControl, disabled, name, exact } = props || {};
+  const [formState, updateFormState] = import_react.default.useState(() => __spreadProps(__spreadValues({}, control._formState), {
+    defaultValues: control._defaultValues
+  }));
   const _localProxyFormState = import_react.default.useRef({
     isDirty: false,
     isLoading: false,
@@ -1715,21 +1694,20 @@ function useFormState(props) {
     isValid: false,
     errors: false
   });
-  const _name = import_react.default.useRef(name);
-  _name.current = name;
-  useSubscribe({
-    disabled,
-    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) && updateFormState(__spreadValues(__spreadValues({}, control._formState), value)),
-    subject: control._subjects.state
-  });
+  useIsomorphicLayoutEffect(() => control._subscribe({
+    name,
+    formState: _localProxyFormState.current,
+    exact,
+    callback: (formState2) => {
+      !disabled && updateFormState(__spreadProps(__spreadValues(__spreadValues({}, control._formState), formState2), {
+        defaultValues: control._defaultValues
+      }));
+    }
+  }), [name, disabled, exact]);
   import_react.default.useEffect(() => {
-    _mounted.current = true;
-    _localProxyFormState.current.isValid && control._updateValid(true);
-    return () => {
-      _mounted.current = false;
-    };
+    _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return getProxyFormState(formState, control, _localProxyFormState.current, false);
+  return import_react.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -1743,129 +1721,261 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
   isGlobal && (_names.watchAll = true);
   return formValues;
 };
-function useWatch(props) {
-  const methods = useFormContext();
-  const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
-  const _name = import_react.default.useRef(name);
-  _name.current = name;
-  useSubscribe({
-    disabled,
-    subject: control._subjects.values,
-    next: (formState) => {
-      if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-        updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+function deepEqual(object1, object2, visited = /* @__PURE__ */ new WeakSet()) {
+  if (object1 === object2) {
+    return true;
+  }
+  if (isPrimitive(object1) || isPrimitive(object2)) {
+    return Object.is(object1, object2);
+  }
+  if (isDateObject(object1) && isDateObject(object2)) {
+    return Object.is(object1.getTime(), object2.getTime());
+  }
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  if (visited.has(object1) || visited.has(object2)) {
+    return true;
+  }
+  visited.add(object1);
+  visited.add(object2);
+  for (const key of keys1) {
+    const val1 = object1[key];
+    if (!(key in object2)) {
+      return false;
+    }
+    if (key !== "ref") {
+      const val2 = object2[key];
+      if (isDateObject(val1) && isDateObject(val2) || (isObject(val1) || Array.isArray(val1)) && (isObject(val2) || Array.isArray(val2)) ? !deepEqual(val1, val2, visited) : !Object.is(val1, val2)) {
+        return false;
       }
     }
+  }
+  return true;
+}
+function useWatch(props) {
+  const formControl = useFormControlContext();
+  const { control = formControl, name, defaultValue, disabled, exact, compute } = props || {};
+  const _defaultValue = import_react.default.useRef(defaultValue);
+  const _compute = import_react.default.useRef(compute);
+  const _computeFormValues = import_react.default.useRef(void 0);
+  const _prevControl = import_react.default.useRef(control);
+  const _prevName = import_react.default.useRef(name);
+  _compute.current = compute;
+  const [value, updateValue] = import_react.default.useState(() => {
+    const defaultValue2 = control._getWatch(name, _defaultValue.current);
+    return _compute.current ? _compute.current(defaultValue2) : defaultValue2;
   });
-  const [value, updateValue] = import_react.default.useState(control._getWatch(name, defaultValue));
+  const getCurrentOutput = import_react.default.useCallback((values) => {
+    const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+    return _compute.current ? _compute.current(formValues) : formValues;
+  }, [control._formValues, control._names, name]);
+  const refreshValue = import_react.default.useCallback((values) => {
+    if (!disabled) {
+      const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+      if (_compute.current) {
+        const computedFormValues = _compute.current(formValues);
+        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+          updateValue(computedFormValues);
+          _computeFormValues.current = computedFormValues;
+        }
+      } else {
+        updateValue(formValues);
+      }
+    }
+  }, [control._formValues, control._names, disabled, name]);
+  useIsomorphicLayoutEffect(() => {
+    if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+      _prevControl.current = control;
+      _prevName.current = name;
+      refreshValue();
+    }
+    return control._subscribe({
+      name,
+      formState: {
+        values: true
+      },
+      exact,
+      callback: (formState) => {
+        refreshValue(formState.values);
+      }
+    });
+  }, [control, exact, name, refreshValue]);
   import_react.default.useEffect(() => control._removeUnmounted());
-  return value;
+  const controlChanged = _prevControl.current !== control;
+  const prevName = _prevName.current;
+  const computedOutput = import_react.default.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    const nameChanged = !controlChanged && !deepEqual(prevName, name);
+    const shouldReturnImmediate = controlChanged || nameChanged;
+    return shouldReturnImmediate ? getCurrentOutput() : null;
+  }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+  return computedOutput !== null ? computedOutput : value;
 }
 function useController(props) {
-  const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister } = props;
+  const formControl = useFormControlContext();
+  const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
+  const defaultValueMemo = import_react.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
-    defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
-    exact: true
+    defaultValue: defaultValueMemo,
+    exact
   });
   const formState = useFormState({
     control,
     name,
-    exact: true
+    exact
   });
+  const _props = import_react.default.useRef(props);
   const _registerProps = import_react.default.useRef(control.register(name, __spreadValues(__spreadProps(__spreadValues({}, props.rules), {
     value
   }), isBoolean(props.disabled) ? { disabled: props.disabled } : {})));
+  _props.current = props;
+  const fieldState = import_react.default.useMemo(() => Object.defineProperties({}, {
+    invalid: {
+      enumerable: true,
+      get: () => !!get(formState.errors, name)
+    },
+    isDirty: {
+      enumerable: true,
+      get: () => !!get(formState.dirtyFields, name)
+    },
+    isTouched: {
+      enumerable: true,
+      get: () => !!get(formState.touchedFields, name)
+    },
+    isValidating: {
+      enumerable: true,
+      get: () => !!get(formState.validatingFields, name)
+    },
+    error: {
+      enumerable: true,
+      get: () => get(formState.errors, name)
+    }
+  }), [formState, name]);
+  const onChange = import_react.default.useCallback((event) => _registerProps.current.onChange({
+    target: {
+      value: getEventValue(event),
+      name
+    },
+    type: EVENTS.CHANGE
+  }), [name]);
+  const onBlur = import_react.default.useCallback(() => _registerProps.current.onBlur({
+    target: {
+      value: get(control._formValues, name),
+      name
+    },
+    type: EVENTS.BLUR
+  }), [name, control._formValues]);
+  const ref = import_react.default.useCallback((elm) => {
+    const field2 = get(control._fields, name);
+    if (field2 && field2._f && elm) {
+      field2._f.ref = {
+        focus: () => isFunction(elm.focus) && elm.focus(),
+        select: () => isFunction(elm.select) && elm.select(),
+        setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+        reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity()
+      };
+    }
+  }, [control._fields, name]);
+  const field = import_react.default.useMemo(() => __spreadProps(__spreadValues({
+    name,
+    value
+  }, isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {}), {
+    onChange,
+    onBlur,
+    ref
+  }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
   import_react.default.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+    control.register(name, __spreadValues(__spreadValues({}, _props.current.rules), isBoolean(_props.current.disabled) ? { disabled: _props.current.disabled } : {}));
     const updateMounted = (name2, value2) => {
-      const field = get(control._fields, name2);
-      if (field && field._f) {
-        field._f.mount = value2;
+      const field2 = get(control._fields, name2);
+      if (field2 && field2._f) {
+        field2._f.mount = value2;
       }
     };
     updateMounted(name, true);
     if (_shouldUnregisterField) {
-      const value2 = cloneObject(get(control._options.defaultValues, name));
+      const value2 = cloneObject(get(control._options.defaultValues, name, _props.current.defaultValue));
       set(control._defaultValues, name, value2);
       if (isUndefined(get(control._formValues, name))) {
         set(control._formValues, name, value2);
       }
     }
+    !isArrayField && control.register(name);
     return () => {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
   import_react.default.useEffect(() => {
-    if (get(control._fields, name)) {
-      control._updateDisabledField({
-        disabled,
-        fields: control._fields,
-        name,
-        value: get(control._fields, name)._f.value
-      });
-    }
+    control._setDisabledField({
+      disabled,
+      name
+    });
   }, [disabled, name, control]);
-  return {
-    field: __spreadProps(__spreadValues({
-      name,
-      value
-    }, isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {}), {
-      onChange: import_react.default.useCallback((event) => _registerProps.current.onChange({
-        target: {
-          value: getEventValue(event),
-          name
-        },
-        type: EVENTS.CHANGE
-      }), [name]),
-      onBlur: import_react.default.useCallback(() => _registerProps.current.onBlur({
-        target: {
-          value: get(control._formValues, name),
-          name
-        },
-        type: EVENTS.BLUR
-      }), [name, control]),
-      ref: import_react.default.useCallback((elm) => {
-        const field = get(control._fields, name);
-        if (field && elm) {
-          field._f.ref = {
-            focus: () => elm.focus(),
-            select: () => elm.select(),
-            setCustomValidity: (message) => elm.setCustomValidity(message),
-            reportValidity: () => elm.reportValidity()
-          };
-        }
-      }, [control._fields, name])
-    }),
+  return import_react.default.useMemo(() => ({
+    field,
     formState,
-    fieldState: Object.defineProperties({}, {
-      invalid: {
-        enumerable: true,
-        get: () => !!get(formState.errors, name)
-      },
-      isDirty: {
-        enumerable: true,
-        get: () => !!get(formState.dirtyFields, name)
-      },
-      isTouched: {
-        enumerable: true,
-        get: () => !!get(formState.touchedFields, name)
-      },
-      isValidating: {
-        enumerable: true,
-        get: () => !!get(formState.validatingFields, name)
-      },
-      error: {
-        enumerable: true,
-        get: () => get(formState.errors, name)
-      }
-    })
-  };
+    fieldState
+  }), [field, formState, fieldState]);
 }
 var Controller = (props) => props.render(useController(props));
+var HookFormContext = import_react.default.createContext(null);
+HookFormContext.displayName = "HookFormContext";
+var useFormContext = () => import_react.default.useContext(HookFormContext);
+var FormProvider = (props) => {
+  const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe } = props;
+  const memoizedValue = import_react.default.useMemo(() => ({
+    watch,
+    getValues,
+    getFieldState,
+    setError,
+    clearErrors,
+    setValue,
+    setValues,
+    trigger,
+    formState,
+    resetField,
+    reset,
+    handleSubmit,
+    unregister,
+    control,
+    register,
+    setFocus,
+    subscribe
+  }), [
+    clearErrors,
+    control,
+    formState,
+    getFieldState,
+    getValues,
+    handleSubmit,
+    register,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+    setValue,
+    setValues,
+    subscribe,
+    trigger,
+    unregister,
+    watch
+  ]);
+  return import_react.default.createElement(
+    HookFormContext.Provider,
+    { value: memoizedValue },
+    import_react.default.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)
+  );
+};
 var defaultOptions = {
   mode: VALIDATION_MODE.onSubmit,
   reValidateMode: VALIDATION_MODE.onChange,