@orderingstack/front-components-product-configurator 1.5.2-beta.28 → 1.5.3-beta.0

package/dist/index.es.js

@@ -1,118 +1,148 @@
-import * as React from "react";
-import React__default, { useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, useState, useMemo, createContext, useContext, forwardRef, Fragment as Fragment$1, isValidElement, cloneElement, createElement, createRef, useCallback } from "react";
+import React, { useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, useState, useMemo, createContext, useContext, forwardRef, Fragment as Fragment$1, isValidElement, cloneElement, createElement, createRef } from "react";
 import { useTransition, animated } from "react-spring";
 import { createPortal } from "react-dom";
 var tailwind = "";
 var main = "";
-function _typeof$1(o2) {
+function _typeof$1(obj) {
   "@babel/helpers - typeof";
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o3) {
-    return typeof o3;
-  } : function(o3) {
-    return o3 && "function" == typeof Symbol && o3.constructor === Symbol && o3 !== Symbol.prototype ? "symbol" : typeof o3;
-  }, _typeof$1(o2);
-}
-function _classCallCheck(a2, n2) {
-  if (!(a2 instanceof n2))
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {
+    return typeof obj2;
+  } : function(obj2) {
+    return obj2 && "function" == typeof Symbol && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+  }, _typeof$1(obj);
+}
+function _classCallCheck(instance2, Constructor) {
+  if (!(instance2 instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
+  }
 }
-function toPrimitive(t2, r2) {
-  if ("object" != _typeof$1(t2) || !t2)
-    return t2;
-  var e2 = t2[Symbol.toPrimitive];
-  if (void 0 !== e2) {
-    var i2 = e2.call(t2, r2 || "default");
-    if ("object" != _typeof$1(i2))
-      return i2;
+function _toPrimitive(input, hint) {
+  if (_typeof$1(input) !== "object" || input === null)
+    return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== void 0) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof$1(res) !== "object")
+      return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r2 ? String : Number)(t2);
+  return (hint === "string" ? String : Number)(input);
 }
-function toPropertyKey(t2) {
-  var i2 = toPrimitive(t2, "string");
-  return "symbol" == _typeof$1(i2) ? i2 : i2 + "";
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof$1(key) === "symbol" ? key : String(key);
 }
-function _defineProperties(e2, r2) {
-  for (var t2 = 0; t2 < r2.length; t2++) {
-    var o2 = r2[t2];
-    o2.enumerable = o2.enumerable || false, o2.configurable = true, "value" in o2 && (o2.writable = true), Object.defineProperty(e2, toPropertyKey(o2.key), o2);
+function _defineProperties(target, props) {
+  for (var i2 = 0; i2 < props.length; i2++) {
+    var descriptor = props[i2];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor)
+      descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
-function _createClass(e2, r2, t2) {
-  return r2 && _defineProperties(e2.prototype, r2), t2 && _defineProperties(e2, t2), Object.defineProperty(e2, "prototype", {
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps)
+    _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps)
+    _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
     writable: false
-  }), e2;
+  });
+  return Constructor;
 }
-function _assertThisInitialized(e2) {
-  if (void 0 === e2)
+function _assertThisInitialized(self2) {
+  if (self2 === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e2;
+  }
+  return self2;
 }
-function _setPrototypeOf(t2, e2) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e3) {
-    return t3.__proto__ = e3, t3;
-  }, _setPrototypeOf(t2, e2);
+function _setPrototypeOf(o2, p2) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p3) {
+    o3.__proto__ = p3;
+    return o3;
+  };
+  return _setPrototypeOf(o2, p2);
 }
-function _inherits(t2, e2) {
-  if ("function" != typeof e2 && null !== e2)
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
-  t2.prototype = Object.create(e2 && e2.prototype, {
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
-      value: t2,
+      value: subClass,
       writable: true,
       configurable: true
     }
-  }), Object.defineProperty(t2, "prototype", {
+  });
+  Object.defineProperty(subClass, "prototype", {
     writable: false
-  }), e2 && _setPrototypeOf(t2, e2);
+  });
+  if (superClass)
+    _setPrototypeOf(subClass, superClass);
 }
-function _possibleConstructorReturn(t2, e2) {
-  if (e2 && ("object" == _typeof$1(e2) || "function" == typeof e2))
-    return e2;
-  if (void 0 !== e2)
+function _possibleConstructorReturn(self2, call) {
+  if (call && (_typeof$1(call) === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
-  return _assertThisInitialized(t2);
-}
-function _getPrototypeOf(t2) {
-  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t3) {
-    return t3.__proto__ || Object.getPrototypeOf(t3);
-  }, _getPrototypeOf(t2);
-}
-function _defineProperty(e2, r2, t2) {
-  return (r2 = toPropertyKey(r2)) in e2 ? Object.defineProperty(e2, r2, {
-    value: t2,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e2[r2] = t2, e2;
-}
-function _arrayWithHoles$1(r2) {
-  if (Array.isArray(r2))
-    return r2;
-}
-function _iterableToArray$1(r2) {
-  if ("undefined" != typeof Symbol && null != r2[Symbol.iterator] || null != r2["@@iterator"])
-    return Array.from(r2);
+  }
+  return _assertThisInitialized(self2);
 }
-function _arrayLikeToArray$1(r2, a2) {
-  (null == a2 || a2 > r2.length) && (a2 = r2.length);
-  for (var e2 = 0, n2 = Array(a2); e2 < a2; e2++)
-    n2[e2] = r2[e2];
-  return n2;
+function _getPrototypeOf(o2) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o3) {
+    return o3.__proto__ || Object.getPrototypeOf(o3);
+  };
+  return _getPrototypeOf(o2);
 }
-function _unsupportedIterableToArray$1(r2, a2) {
-  if (r2) {
-    if ("string" == typeof r2)
-      return _arrayLikeToArray$1(r2, a2);
-    var t2 = {}.toString.call(r2).slice(8, -1);
-    return "Object" === t2 && r2.constructor && (t2 = r2.constructor.name), "Map" === t2 || "Set" === t2 ? Array.from(r2) : "Arguments" === t2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t2) ? _arrayLikeToArray$1(r2, a2) : void 0;
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+function _arrayWithHoles$1(arr2) {
+  if (Array.isArray(arr2))
+    return arr2;
+}
+function _iterableToArray$1(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+    return Array.from(iter);
+}
+function _arrayLikeToArray$1(arr2, len) {
+  if (len == null || len > arr2.length)
+    len = arr2.length;
+  for (var i2 = 0, arr22 = new Array(len); i2 < len; i2++)
+    arr22[i2] = arr2[i2];
+  return arr22;
+}
+function _unsupportedIterableToArray$1(o2, minLen) {
+  if (!o2)
+    return;
+  if (typeof o2 === "string")
+    return _arrayLikeToArray$1(o2, minLen);
+  var n2 = Object.prototype.toString.call(o2).slice(8, -1);
+  if (n2 === "Object" && o2.constructor)
+    n2 = o2.constructor.name;
+  if (n2 === "Map" || n2 === "Set")
+    return Array.from(o2);
+  if (n2 === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2))
+    return _arrayLikeToArray$1(o2, minLen);
 }
 function _nonIterableRest$1() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _toArray$1(r2) {
-  return _arrayWithHoles$1(r2) || _iterableToArray$1(r2) || _unsupportedIterableToArray$1(r2) || _nonIterableRest$1();
+function _toArray$1(arr2) {
+  return _arrayWithHoles$1(arr2) || _iterableToArray$1(arr2) || _unsupportedIterableToArray$1(arr2) || _nonIterableRest$1();
 }
 function ownKeys$2(object, enumerableOnly) {
   var keys2 = Object.keys(object);
@@ -404,13 +434,13 @@ var chars = [" ", ",", "?", "!", ";"];
 function looksLikeObjectPath(key, nsSeparator, keySeparator) {
   nsSeparator = nsSeparator || "";
   keySeparator = keySeparator || "";
-  var possibleChars = chars.filter(function(c2) {
-    return nsSeparator.indexOf(c2) < 0 && keySeparator.indexOf(c2) < 0;
+  var possibleChars = chars.filter(function(c) {
+    return nsSeparator.indexOf(c) < 0 && keySeparator.indexOf(c) < 0;
   });
   if (possibleChars.length === 0)
     return true;
-  var r2 = new RegExp("(".concat(possibleChars.map(function(c2) {
-    return c2 === "?" ? "\\?" : c2;
+  var r2 = new RegExp("(".concat(possibleChars.map(function(c) {
+    return c === "?" ? "\\?" : c;
   }).join("|"), ")"));
   var matched = !r2.test(key);
   if (!matched) {
@@ -1268,13 +1298,13 @@ var LanguageUtil = function() {
       var _this2 = this;
       var fallbackCodes = this.getFallbackCodes(fallbackCode || this.options.fallbackLng || [], code);
       var codes = [];
-      var addCode = function addCode2(c2) {
-        if (!c2)
+      var addCode = function addCode2(c) {
+        if (!c)
           return;
-        if (_this2.isSupportedCode(c2)) {
-          codes.push(c2);
+        if (_this2.isSupportedCode(c)) {
+          codes.push(c);
         } else {
-          _this2.logger.warn("rejecting language code not found in supportedLngs: ".concat(c2));
+          _this2.logger.warn("rejecting language code not found in supportedLngs: ".concat(c));
         }
       };
       if (typeof code === "string" && code.indexOf("-") > -1) {
@@ -1771,9 +1801,9 @@ var Interpolator = function() {
         var sep = this.nestingOptionsSeparator;
         if (key.indexOf(sep) < 0)
           return key;
-        var c2 = key.split(new RegExp("".concat(sep, "[ ]*{")));
-        var optionsString = "{".concat(c2[1]);
-        key = c2[0];
+        var c = key.split(new RegExp("".concat(sep, "[ ]*{")));
+        var optionsString = "{".concat(c[1]);
+        key = c[0];
         optionsString = this.interpolate(optionsString, clonedOptions);
         var matchedSingleQuotes = optionsString.match(/'/g);
         var matchedDoubleQuotes = optionsString.match(/"/g);
@@ -2621,7 +2651,7 @@ var I18n = function(_EventEmitter) {
         if (usedLng && usedLng.toLowerCase() === "cimode")
           return usedCallback();
         var toLoad = [];
-        var append = function append2(lng) {
+        var append2 = function append3(lng) {
           if (!lng)
             return;
           var lngs = _this3.services.languageUtils.toResolveHierarchy(lng);
@@ -2633,14 +2663,14 @@ var I18n = function(_EventEmitter) {
         if (!usedLng) {
           var fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
           fallbacks.forEach(function(l2) {
-            return append(l2);
+            return append2(l2);
           });
         } else {
-          append(usedLng);
+          append2(usedLng);
         }
         if (this.options.preload) {
           this.options.preload.forEach(function(l2) {
-            return append(l2);
+            return append2(l2);
           });
         }
         this.services.backendConnector.load(toLoad, this.options.ns, function(e2) {
@@ -2987,65 +3017,14 @@ var isObject$1 = (value) => !isNullOrUndefined(value) && !Array.isArray(value) &
 var getEventValue = (event) => isObject$1(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 isPlainObject = (tempObject) => {
-  const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-  return isObject$1(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
-};
-var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
-function cloneObject(data) {
-  let copy2;
-  const isArray2 = Array.isArray(data);
-  if (data instanceof Date) {
-    copy2 = new Date(data);
-  } else if (data instanceof Set) {
-    copy2 = new Set(data);
-  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray2 || isObject$1(data))) {
-    copy2 = isArray2 ? [] : {};
-    if (!isArray2 && !isPlainObject(data)) {
-      copy2 = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy2[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
-    return data;
-  }
-  return copy2;
-}
 var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 var isUndefined$2 = (val) => val === void 0;
-var get = (object, path2, defaultValue) => {
-  if (!path2 || !isObject$1(object)) {
+var get = (obj, path2, defaultValue) => {
+  if (!path2 || !isObject$1(obj)) {
     return defaultValue;
   }
-  const result = compact(path2.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
-  return isUndefined$2(result) || result === object ? isUndefined$2(object[path2]) ? defaultValue : object[path2] : result;
-};
-var isBoolean = (value) => typeof value === "boolean";
-var isKey = (value) => /^\w*$/.test(value);
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
-var set = (object, path2, value) => {
-  let index = -1;
-  const tempPath = isKey(path2) ? [path2] : stringToPath(path2);
-  const length = tempPath.length;
-  const lastIndex = length - 1;
-  while (++index < length) {
-    const key = tempPath[index];
-    let newValue = value;
-    if (index !== lastIndex) {
-      const objValue = object[key];
-      newValue = isObject$1(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
-    }
-    if (key === "__proto__") {
-      return;
-    }
-    object[key] = newValue;
-    object = object[key];
-  }
-  return object;
+  const result = compact(path2.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], obj);
+  return isUndefined$2(result) || result === obj ? isUndefined$2(obj[path2]) ? defaultValue : obj[path2] : result;
 };
 const EVENTS = {
   BLUR: "blur",
@@ -3068,11 +3047,11 @@ const INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-const HookFormContext = React__default.createContext(null);
-const useFormContext = () => React__default.useContext(HookFormContext);
+const HookFormContext = React.createContext(null);
+const useFormContext = () => React.useContext(HookFormContext);
 const FormProvider = (props) => {
   const { children, ...data } = props;
-  return React__default.createElement(HookFormContext.Provider, { value: data }, children);
+  return React.createElement(HookFormContext.Provider, { value: data }, children);
 };
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
@@ -3093,18 +3072,17 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   return result;
 };
 var isEmptyObject = (value) => isObject$1(value) && !Object.keys(value).length;
-var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
-  updateFormState(formStateData);
+var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
   const { name, ...formState } = formStateData;
   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)));
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName ? name === signalName : !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (currentName.startsWith(signalName) || signalName.startsWith(currentName)));
 function useSubscribe(props) {
-  const _props = React__default.useRef(props);
+  const _props = React.useRef(props);
   _props.current = props;
-  React__default.useEffect(() => {
-    const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
+  React.useEffect(() => {
+    const subscription = !props.disabled && _props.current.subject.subscribe({
       next: _props.current.next
     });
     return () => {
@@ -3115,31 +3093,36 @@ function useSubscribe(props) {
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = React__default.useState(control._formState);
-  const _mounted = React__default.useRef(true);
-  const _localProxyFormState = React__default.useRef({
+  const [formState, updateFormState] = React.useState(control._formState);
+  const _mounted = React.useRef(true);
+  const _localProxyFormState = React.useRef({
     isDirty: false,
     isLoading: false,
     dirtyFields: false,
     touchedFields: false,
-    validatingFields: false,
     isValidating: false,
     isValid: false,
     errors: false
   });
-  const _name = React__default.useRef(name);
+  const _name = React.useRef(name);
   _name.current = name;
   useSubscribe({
     disabled,
-    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) && updateFormState({
+    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current) && updateFormState({
       ...control._formState,
       ...value
     }),
     subject: control._subjects.state
   });
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     _mounted.current = true;
-    _localProxyFormState.current.isValid && control._updateValid(true);
+    const isDirty = control._proxyFormState.isDirty && control._getDirty();
+    if (isDirty !== control._formState.isDirty) {
+      control._subjects.state.next({
+        isDirty
+      });
+    }
+    control._updateValid();
     return () => {
       _mounted.current = false;
     };
@@ -3158,27 +3141,53 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
   isGlobal && (_names.watchAll = true);
   return formValues;
 };
+var isPlainObject = (tempObject) => {
+  const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+  return isObject$1(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
+};
+var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
+function cloneObject(data) {
+  let copy2;
+  const isArray2 = Array.isArray(data);
+  if (data instanceof Date) {
+    copy2 = new Date(data);
+  } else if (data instanceof Set) {
+    copy2 = new Set(data);
+  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray2 || isObject$1(data))) {
+    copy2 = isArray2 ? [] : {};
+    if (!Array.isArray(data) && !isPlainObject(data)) {
+      copy2 = data;
+    } else {
+      for (const key in data) {
+        copy2[key] = cloneObject(data[key]);
+      }
+    }
+  } else {
+    return data;
+  }
+  return copy2;
+}
 function useWatch(props) {
   const methods = useFormContext();
   const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
-  const _name = React__default.useRef(name);
+  const _name = React.useRef(name);
   _name.current = name;
   useSubscribe({
     disabled,
-    subject: control._subjects.values,
+    subject: control._subjects.watch,
     next: (formState) => {
       if (shouldSubscribeByName(_name.current, formState.name, exact)) {
         updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
       }
     }
   });
-  const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
-  React__default.useEffect(() => control._removeUnmounted());
+  const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+  React.useEffect(() => control._removeUnmounted());
   return value;
 }
 function useController(props) {
   const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister } = props;
+  const { name, control = methods.control, shouldUnregister } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
   const value = useWatch({
     control,
@@ -3190,54 +3199,35 @@ function useController(props) {
     control,
     name
   });
-  const _registerProps = React__default.useRef(control.register(name, {
+  const _registerProps = React.useRef(control.register(name, {
     ...props.rules,
-    value,
-    ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
+    value
   }));
-  React__default.useEffect(() => {
-    const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+  React.useEffect(() => {
     const updateMounted = (name2, value2) => {
       const field = get(control._fields, name2);
-      if (field && field._f) {
+      if (field) {
         field._f.mount = value2;
       }
     };
     updateMounted(name, true);
-    if (_shouldUnregisterField) {
-      const value2 = cloneObject(get(control._options.defaultValues, name));
-      set(control._defaultValues, name, value2);
-      if (isUndefined$2(get(control._formValues, name))) {
-        set(control._formValues, name, value2);
-      }
-    }
     return () => {
-      (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
+      const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+      (isArrayField ? _shouldUnregisterField && !control._stateFlags.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
-  React__default.useEffect(() => {
-    if (get(control._fields, name)) {
-      control._updateDisabledField({
-        disabled,
-        fields: control._fields,
-        name,
-        value: get(control._fields, name)._f.value
-      });
-    }
-  }, [disabled, name, control]);
   return {
     field: {
       name,
       value,
-      ...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
-      onChange: React__default.useCallback((event) => _registerProps.current.onChange({
+      onChange: React.useCallback((event) => _registerProps.current.onChange({
         target: {
           value: getEventValue(event),
           name
         },
         type: EVENTS.CHANGE
       }), [name]),
-      onBlur: React__default.useCallback(() => _registerProps.current.onBlur({
+      onBlur: React.useCallback(() => _registerProps.current.onBlur({
         target: {
           value: get(control._formValues, name),
           name
@@ -3270,10 +3260,6 @@ function useController(props) {
         enumerable: true,
         get: () => !!get(formState.touchedFields, name)
       },
-      isValidating: {
-        enumerable: true,
-        get: () => !!get(formState.validatingFields, name)
-      },
       error: {
         enumerable: true,
         get: () => get(formState.errors, name)
@@ -3282,76 +3268,6 @@ function useController(props) {
   };
 }
 const Controller = (props) => props.render(useController(props));
-const POST_REQUEST = "post";
-function Form(props) {
-  const methods = useFormContext();
-  const [mounted, setMounted] = React__default.useState(false);
-  const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-  const submit = async (event) => {
-    let hasError = false;
-    let type = "";
-    await control.handleSubmit(async (data) => {
-      const formData = new FormData();
-      let formDataJson = "";
-      try {
-        formDataJson = JSON.stringify(data);
-      } catch (_a) {
-      }
-      for (const name of control._names.mount) {
-        formData.append(name, get(data, name));
-      }
-      if (onSubmit) {
-        await onSubmit({
-          data,
-          event,
-          method,
-          formData,
-          formDataJson
-        });
-      }
-      if (action) {
-        try {
-          const shouldStringifySubmissionData = [
-            headers && headers["Content-Type"],
-            encType
-          ].some((value) => value && value.includes("json"));
-          const response = await fetch(action, {
-            method,
-            headers: {
-              ...headers,
-              ...encType ? { "Content-Type": encType } : {}
-            },
-            body: shouldStringifySubmissionData ? formDataJson : formData
-          });
-          if (response && (validateStatus ? !validateStatus(response.status) : response.status < 200 || response.status >= 300)) {
-            hasError = true;
-            onError && onError({ response });
-            type = String(response.status);
-          } else {
-            onSuccess && onSuccess({ response });
-          }
-        } catch (error2) {
-          hasError = true;
-          onError && onError({ error: error2 });
-        }
-      }
-    })(event);
-    if (hasError && props.control) {
-      props.control._subjects.state.next({
-        isSubmitSuccessful: false
-      });
-      props.control.setError("root.server", {
-        type
-      });
-    }
-  };
-  React__default.useEffect(() => {
-    setMounted(true);
-  }, []);
-  return render ? React__default.createElement(React__default.Fragment, null, render({
-    submit
-  })) : React__default.createElement("form", { noValidate: mounted, action, method, encType, onSubmit: submit, ...rest }, children);
-}
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
   ...errors[name],
   types: {
@@ -3359,11 +3275,49 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     [type]: message || true
   }
 } : {};
+var isKey = (value) => /^\w*$/.test(value);
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
+function set(object, path2, value) {
+  let index = -1;
+  const tempPath = isKey(path2) ? [path2] : stringToPath(path2);
+  const length = tempPath.length;
+  const lastIndex = length - 1;
+  while (++index < length) {
+    const key = tempPath[index];
+    let newValue = value;
+    if (index !== lastIndex) {
+      const objValue = object[key];
+      newValue = isObject$1(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
+    }
+    object[key] = newValue;
+    object = object[key];
+  }
+  return object;
+}
+const focusFieldBy = (fields, callback, fieldsNames) => {
+  for (const key of fieldsNames || Object.keys(fields)) {
+    const field = get(fields, key);
+    if (field) {
+      const { _f, ...currentField } = field;
+      if (_f && callback(_f.name)) {
+        if (_f.ref.focus) {
+          _f.ref.focus();
+          break;
+        } else if (_f.refs && _f.refs[0].focus) {
+          _f.refs[0].focus();
+          break;
+        }
+      } else if (isObject$1(currentField)) {
+        focusFieldBy(currentField, callback);
+      }
+    }
+  }
+};
 var generateId = () => {
   const d2 = typeof performance === "undefined" ? Date.now() : performance.now() * 1e3;
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c2) => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
     const r2 = (Math.random() * 16 + d2) % 16 | 0;
-    return (c2 == "x" ? r2 : r2 & 3 | 8).toString(16);
+    return (c == "x" ? r2 : r2 & 3 | 8).toString(16);
   });
 };
 var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined$2(options.shouldFocus) ? options.focusName || `${name}.${isUndefined$2(options.focusIndex) ? index : options.focusIndex}.` : "";
@@ -3375,31 +3329,13 @@ var getValidationModes = (mode) => ({
   isOnTouch: mode === VALIDATION_MODE.onTouched
 });
 var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (_names.watchAll || _names.watch.has(name) || [..._names.watch].some((watchName) => name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length))));
-const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
-  for (const key of fieldsNames || Object.keys(fields)) {
-    const field = get(fields, key);
-    if (field) {
-      const { _f, ...currentField } = field;
-      if (_f) {
-        if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-          break;
-        } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-          break;
-        } else {
-          iterateFieldsByAction(currentField, action);
-        }
-      } else if (isObject$1(currentField)) {
-        iterateFieldsByAction(currentField, action);
-      }
-    }
-  }
-};
 var updateFieldArrayRootError = (errors, error2, name) => {
-  const fieldArrayErrors = convertToArrayPayload(get(errors, name));
+  const fieldArrayErrors = compact(get(errors, name));
   set(fieldArrayErrors, "root", error2[name]);
   set(errors, name, fieldArrayErrors);
   return errors;
 };
+var isBoolean = (value) => typeof value === "boolean";
 var isFileInput = (element) => element.type === "file";
 var isFunction$1 = (value) => typeof value === "function";
 var isHTMLElement = (value) => {
@@ -3409,7 +3345,7 @@ var isHTMLElement = (value) => {
   const owner = value ? value.ownerDocument : 0;
   return value instanceof (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
 };
-var isMessage = (value) => isString(value);
+var isMessage = (value) => isString(value) || React.isValidElement(value);
 var isRadioInput = (element) => element.type === "radio";
 var isRegex = (value) => value instanceof RegExp;
 const defaultResult = {
@@ -3448,9 +3384,8 @@ var getValueAndMessage = (validationData) => isObject$1(validationData) && !isRe
   value: validationData,
   message: ""
 };
-var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
+var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
   const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, disabled } = field._f;
-  const inputValue = get(formValues, name);
   if (!mount || disabled) {
     return {};
   }
@@ -3527,8 +3462,8 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
   if ((maxLength || minLength) && !isEmpty2 && (isString(inputValue) || isFieldArray && Array.isArray(inputValue))) {
     const maxLengthOutput = getValueAndMessage(maxLength);
     const minLengthOutput = getValueAndMessage(minLength);
-    const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
-    const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
+    const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > maxLengthOutput.value;
+    const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < minLengthOutput.value;
     if (exceedMax || exceedMin) {
       getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
       if (!validateAllFieldCriteria) {
@@ -3554,7 +3489,7 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
   }
   if (validate) {
     if (isFunction$1(validate)) {
-      const result = await validate(inputValue, formValues);
+      const result = await validate(inputValue);
       const validateError = getValidateError(result, inputRef);
       if (validateError) {
         error2[name] = {
@@ -3572,7 +3507,7 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
         if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
           break;
         }
-        const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
+        const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
         if (validateError) {
           validationResult = {
             ...validateError,
@@ -3598,10 +3533,9 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
   setCustomValidity(true);
   return error2;
 };
-var appendAt = (data, value) => [
-  ...data,
-  ...convertToArrayPayload(value)
-];
+function append(data, value) {
+  return [...data, ...convertToArrayPayload(value)];
+}
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => void 0) : void 0;
 function insert(data, index, value) {
   return [
@@ -3620,10 +3554,9 @@ var moveArrayAt = (data, from, to) => {
   data.splice(to, 0, data.splice(from, 1)[0]);
   return data;
 };
-var prependAt = (data, value) => [
-  ...convertToArrayPayload(value),
-  ...convertToArrayPayload(data)
-];
+function prepend(data, value) {
+  return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
+}
 function removeAtIndexes(data, indexes) {
   let i2 = 0;
   const temp = [...data];
@@ -3633,9 +3566,9 @@ function removeAtIndexes(data, indexes) {
   }
   return compact(temp).length ? temp : [];
 }
-var removeArrayAt = (data, index) => isUndefined$2(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a2, b2) => a2 - b2));
+var removeArrayAt = (data, index) => isUndefined$2(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a2, b) => a2 - b));
 var swapArrayAt = (data, indexA, indexB) => {
-  [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
+  data[indexA] = [data[indexB], data[indexB] = data[indexA]][0];
 };
 function baseGet(object, updatePath) {
   const length = updatePath.slice(0, -1).length;
@@ -3647,22 +3580,36 @@ function baseGet(object, updatePath) {
 }
 function isEmptyArray(obj) {
   for (const key in obj) {
-    if (obj.hasOwnProperty(key) && !isUndefined$2(obj[key])) {
+    if (!isUndefined$2(obj[key])) {
       return false;
     }
   }
   return true;
 }
 function unset(object, path2) {
-  const paths = Array.isArray(path2) ? path2 : isKey(path2) ? [path2] : stringToPath(path2);
-  const childObject = paths.length === 1 ? object : baseGet(object, paths);
-  const index = paths.length - 1;
-  const key = paths[index];
+  const updatePath = isKey(path2) ? [path2] : stringToPath(path2);
+  const childObject = updatePath.length == 1 ? object : baseGet(object, updatePath);
+  const key = updatePath[updatePath.length - 1];
+  let previousObjRef;
   if (childObject) {
     delete childObject[key];
   }
-  if (index !== 0 && (isObject$1(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
-    unset(object, paths.slice(0, -1));
+  for (let k2 = 0; k2 < updatePath.slice(0, -1).length; k2++) {
+    let index = -1;
+    let objectRef;
+    const currentPaths = updatePath.slice(0, -(k2 + 1));
+    const currentPathsLength = currentPaths.length - 1;
+    if (k2 > 0) {
+      previousObjRef = object;
+    }
+    while (++index < currentPaths.length) {
+      const item = currentPaths[index];
+      objectRef = objectRef ? objectRef[item] : object[item];
+      if (currentPathsLength === index && (isObject$1(objectRef) && isEmptyObject(objectRef) || Array.isArray(objectRef) && isEmptyArray(objectRef))) {
+        previousObjRef ? delete previousObjRef[item] : delete object[item];
+      }
+      previousObjRef = objectRef;
+    }
   }
   return object;
 }
@@ -3673,11 +3620,11 @@ var updateAt = (fieldValues, index, value) => {
 function useFieldArray(props) {
   const methods = useFormContext();
   const { control = methods.control, name, keyName = "id", shouldUnregister } = props;
-  const [fields, setFields] = React__default.useState(control._getFieldArray(name));
-  const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
-  const _fieldIds = React__default.useRef(fields);
-  const _name = React__default.useRef(name);
-  const _actioned = React__default.useRef(false);
+  const [fields, setFields] = React.useState(control._getFieldArray(name));
+  const ids = React.useRef(control._getFieldArray(name).map(generateId));
+  const _fieldIds = React.useRef(fields);
+  const _name = React.useRef(name);
+  const _actioned = React.useRef(false);
   _name.current = name;
   _fieldIds.current = fields;
   control._names.array.add(name);
@@ -3694,29 +3641,29 @@ function useFieldArray(props) {
     },
     subject: control._subjects.array
   });
-  const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
+  const updateValues = React.useCallback((updatedFieldArrayValues) => {
     _actioned.current = true;
     control._updateFieldArray(name, updatedFieldArrayValues);
   }, [control, name]);
-  const append = (value, options) => {
+  const append$1 = (value, options) => {
     const appendValue = convertToArrayPayload(cloneObject(value));
-    const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
+    const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
     control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
-    ids.current = appendAt(ids.current, appendValue.map(generateId));
+    ids.current = append(ids.current, appendValue.map(generateId));
     updateValues(updatedFieldArrayValues);
     setFields(updatedFieldArrayValues);
-    control._updateFieldArray(name, updatedFieldArrayValues, appendAt, {
+    control._updateFieldArray(name, updatedFieldArrayValues, append, {
       argA: fillEmptyArray(value)
     });
   };
-  const prepend = (value, options) => {
+  const prepend$1 = (value, options) => {
     const prependValue = convertToArrayPayload(cloneObject(value));
-    const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
+    const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
     control._names.focus = getFocusFieldName(name, 0, options);
-    ids.current = prependAt(ids.current, prependValue.map(generateId));
+    ids.current = prepend(ids.current, prependValue.map(generateId));
     updateValues(updatedFieldArrayValues);
     setFields(updatedFieldArrayValues);
-    control._updateFieldArray(name, updatedFieldArrayValues, prependAt, {
+    control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
       argA: fillEmptyArray(value)
     });
   };
@@ -3781,17 +3728,15 @@ function useFieldArray(props) {
     setFields([...updatedFieldArrayValues]);
     control._updateFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
   };
-  React__default.useEffect(() => {
-    control._state.action = false;
-    isWatched(name, control._names) && control._subjects.state.next({
-      ...control._formState
-    });
+  React.useEffect(() => {
+    control._stateFlags.action = false;
+    isWatched(name, control._names) && control._subjects.state.next({});
     if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted)) {
       if (control._options.resolver) {
         control._executeSchema([name]).then((result) => {
           const error2 = get(result.errors, name);
           const existingError = get(control._formState.errors, name);
-          if (existingError ? !error2 && existingError.type || error2 && (existingError.type !== error2.type || existingError.message !== error2.message) : error2 && error2.type) {
+          if (existingError ? !error2 && existingError.type : error2 && error2.type) {
             error2 ? set(control._formState.errors, name, error2) : unset(control._formState.errors, name);
             control._subjects.state.next({
               errors: control._formState.errors
@@ -3800,54 +3745,47 @@ function useFieldArray(props) {
         });
       } else {
         const field = get(control._fields, name);
-        if (field && field._f && !(getValidationModes(control._options.reValidateMode).isOnSubmit && getValidationModes(control._options.mode).isOnSubmit)) {
-          validateField(field, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error2) => !isEmptyObject(error2) && control._subjects.state.next({
+        if (field && field._f) {
+          validateField(field, get(control._formValues, name), control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error2) => !isEmptyObject(error2) && control._subjects.state.next({
             errors: updateFieldArrayRootError(control._formState.errors, error2, name)
           }));
         }
       }
     }
-    control._subjects.values.next({
+    control._subjects.watch.next({
       name,
-      values: { ...control._formValues }
-    });
-    control._names.focus && iterateFieldsByAction(control._fields, (ref, key) => {
-      if (control._names.focus && key.startsWith(control._names.focus) && ref.focus) {
-        ref.focus();
-        return 1;
-      }
-      return;
+      values: control._formValues
     });
+    control._names.focus && focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ""));
     control._names.focus = "";
-    control._updateValid();
-    _actioned.current = false;
+    control._proxyFormState.isValid && control._updateValid();
   }, [fields, name, control]);
-  React__default.useEffect(() => {
+  React.useEffect(() => {
     !get(control._formValues, name) && control._updateFieldArray(name);
     return () => {
       (control._options.shouldUnregister || shouldUnregister) && control.unregister(name);
     };
   }, [name, control, keyName, shouldUnregister]);
   return {
-    swap: React__default.useCallback(swap, [updateValues, name, control]),
-    move: React__default.useCallback(move, [updateValues, name, control]),
-    prepend: React__default.useCallback(prepend, [updateValues, name, control]),
-    append: React__default.useCallback(append, [updateValues, name, control]),
-    remove: React__default.useCallback(remove2, [updateValues, name, control]),
-    insert: React__default.useCallback(insert$1, [updateValues, name, control]),
-    update: React__default.useCallback(update, [updateValues, name, control]),
-    replace: React__default.useCallback(replace, [updateValues, name, control]),
-    fields: React__default.useMemo(() => fields.map((field, index) => ({
+    swap: React.useCallback(swap, [updateValues, name, control]),
+    move: React.useCallback(move, [updateValues, name, control]),
+    prepend: React.useCallback(prepend$1, [updateValues, name, control]),
+    append: React.useCallback(append$1, [updateValues, name, control]),
+    remove: React.useCallback(remove2, [updateValues, name, control]),
+    insert: React.useCallback(insert$1, [updateValues, name, control]),
+    update: React.useCallback(update, [updateValues, name, control]),
+    replace: React.useCallback(replace, [updateValues, name, control]),
+    fields: React.useMemo(() => fields.map((field, index) => ({
       ...field,
       [keyName]: ids.current[index] || generateId()
     })), [fields, keyName])
   };
 }
-var createSubject = () => {
+function createSubject() {
   let _observers = [];
   const next = (value) => {
     for (const observer of _observers) {
-      observer.next && observer.next(value);
+      observer.next(value);
     }
   };
   const subscribe = (observer) => {
@@ -3869,7 +3807,7 @@ var createSubject = () => {
     subscribe,
     unsubscribe
   };
-};
+}
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 function deepEqual(object1, object2) {
   if (isPrimitive(object1) || isPrimitive(object2)) {
@@ -3933,7 +3871,7 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
           getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
         }
       } else {
-        dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+        deepEqual(data[key], formValues[key]) ? delete dirtyFieldsFromValues[key] : dirtyFieldsFromValues[key] = true;
       }
     }
   }
@@ -4021,15 +3959,16 @@ const defaultOptions$1 = {
   reValidateMode: VALIDATION_MODE.onChange,
   shouldFocusError: true
 };
-function createFormControl(props = {}) {
+function createFormControl(props = {}, flushRootRender) {
   let _options = {
     ...defaultOptions$1,
     ...props
   };
+  const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
   let _formState = {
     submitCount: 0,
     isDirty: false,
-    isLoading: isFunction$1(_options.defaultValues),
+    isLoading: true,
     isValidating: false,
     isSubmitted: false,
     isSubmitting: false,
@@ -4037,14 +3976,12 @@ function createFormControl(props = {}) {
     isValid: false,
     touchedFields: {},
     dirtyFields: {},
-    validatingFields: {},
-    errors: _options.errors || {},
-    disabled: _options.disabled || false
+    errors: {}
   };
   let _fields = {};
-  let _defaultValues = isObject$1(_options.defaultValues) || isObject$1(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
+  let _defaultValues = isObject$1(_options.defaultValues) ? cloneObject(_options.defaultValues) || {} : {};
   let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
-  let _state = {
+  let _stateFlags = {
     action: false,
     mount: false,
     watch: false
@@ -4060,14 +3997,13 @@ function createFormControl(props = {}) {
   const _proxyFormState = {
     isDirty: false,
     dirtyFields: false,
-    validatingFields: false,
     touchedFields: false,
     isValidating: false,
     isValid: false,
     errors: false
   };
   const _subjects = {
-    values: createSubject(),
+    watch: createSubject(),
     array: createSubject(),
     state: createSubject()
   };
@@ -4076,34 +4012,25 @@ function createFormControl(props = {}) {
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
   const debounce = (callback) => (wait) => {
     clearTimeout(timer);
-    timer = setTimeout(callback, wait);
+    timer = window.setTimeout(callback, wait);
   };
-  const _updateValid = async (shouldUpdateValid) => {
-    if (_proxyFormState.isValid || shouldUpdateValid) {
+  const _updateValid = async () => {
+    if (_proxyFormState.isValid) {
       const isValid = _options.resolver ? isEmptyObject((await _executeSchema()).errors) : await executeBuiltInValidation(_fields, true);
       if (isValid !== _formState.isValid) {
+        _formState.isValid = isValid;
         _subjects.state.next({
           isValid
         });
       }
     }
   };
-  const _updateIsValidating = (names, isValidating) => {
-    if (_proxyFormState.isValidating || _proxyFormState.validatingFields) {
-      (names || Array.from(_names.mount)).forEach((name) => {
-        if (name) {
-          isValidating ? set(_formState.validatingFields, name, isValidating) : unset(_formState.validatingFields, name);
-        }
-      });
-      _subjects.state.next({
-        validatingFields: _formState.validatingFields,
-        isValidating: !isEmptyObject(_formState.validatingFields)
-      });
-    }
-  };
+  const _updateIsValidating = (value) => _proxyFormState.isValidating && _subjects.state.next({
+    isValidating: value
+  });
   const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
     if (args && method) {
-      _state.action = true;
+      _stateFlags.action = true;
       if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
         const fieldValues = method(get(_fields, name), args.argA, args.argB);
         shouldSetValues && set(_fields, name, fieldValues);
@@ -4137,19 +4064,12 @@ function createFormControl(props = {}) {
       errors: _formState.errors
     });
   };
-  const _setErrors = (errors) => {
-    _formState.errors = errors;
-    _subjects.state.next({
-      errors: _formState.errors,
-      isValid: false
-    });
-  };
   const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
     const field = get(_fields, name);
     if (field) {
       const defaultValue = get(_formValues, name, isUndefined$2(value) ? get(_defaultValues, name) : value);
       isUndefined$2(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-      _state.mount && _updateValid();
+      _stateFlags.mount && _updateValid();
     }
   };
   const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -4158,16 +4078,15 @@ function createFormControl(props = {}) {
     const output2 = {
       name
     };
-    const disabledField = !!(get(_fields, name) && get(_fields, name)._f && get(_fields, name)._f.disabled);
     if (!isBlurEvent || shouldDirty) {
       if (_proxyFormState.isDirty) {
         isPreviousDirty = _formState.isDirty;
         _formState.isDirty = output2.isDirty = _getDirty();
         shouldUpdateField = isPreviousDirty !== output2.isDirty;
       }
-      const isCurrentFieldPristine = disabledField || deepEqual(get(_defaultValues, name), fieldValue);
-      isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
-      isCurrentFieldPristine || disabledField ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
+      const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+      isPreviousDirty = get(_formState.dirtyFields, name);
+      isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
       output2.dirtyFields = _formState.dirtyFields;
       shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
     }
@@ -4206,15 +4125,11 @@ function createFormControl(props = {}) {
       };
       _subjects.state.next(updatedFormState);
     }
+    _updateIsValidating(false);
   };
-  const _executeSchema = async (name) => {
-    _updateIsValidating(name, true);
-    const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-    _updateIsValidating(name);
-    return result;
-  };
+  const _executeSchema = async (name) => await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
   const executeSchemaAndUpdateState = async (names) => {
-    const { errors } = await _executeSchema(names);
+    const { errors } = await _executeSchema();
     if (names) {
       for (const name of names) {
         const error2 = get(errors, name);
@@ -4234,9 +4149,7 @@ function createFormControl(props = {}) {
         const { _f, ...fieldValue } = field;
         if (_f) {
           const isFieldArrayRoot = _names.array.has(_f.name);
-          _updateIsValidating([name], true);
-          const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
-          _updateIsValidating([name]);
+          const fieldError = await validateField(field, get(_formValues, _f.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation, isFieldArrayRoot);
           if (fieldError[_f.name]) {
             context.valid = false;
             if (shouldOnlyCheckValid) {
@@ -4259,9 +4172,9 @@ function createFormControl(props = {}) {
   };
   const _getDirty = (name, data) => (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
   const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
-    ..._state.mount ? _formValues : isUndefined$2(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
+    ..._stateFlags.mount ? _formValues : isUndefined$2(defaultValue) ? _defaultValues : isString(names) ? { [names]: defaultValue } : defaultValue
   }, isGlobal, defaultValue);
-  const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+  const _getFieldArray = (name) => compact(get(_stateFlags.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
   const setFieldValue = (name, value, options = {}) => {
     const field = get(_fields, name);
     let fieldValue = value;
@@ -4283,9 +4196,8 @@ function createFormControl(props = {}) {
         } else {
           fieldReference.ref.value = fieldValue;
           if (!fieldReference.ref.type) {
-            _subjects.values.next({
-              name,
-              values: { ..._formValues }
+            _subjects.watch.next({
+              name
             });
           }
         }
@@ -4310,34 +4222,30 @@ function createFormControl(props = {}) {
     if (isFieldArray) {
       _subjects.array.next({
         name,
-        values: { ..._formValues }
+        values: _formValues
       });
       if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) && options.shouldDirty) {
+        _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         _subjects.state.next({
           name,
-          dirtyFields: getDirtyFields(_defaultValues, _formValues),
+          dirtyFields: _formState.dirtyFields,
           isDirty: _getDirty(name, cloneValue)
         });
       }
     } else {
       field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
     }
-    isWatched(name, _names) && _subjects.state.next({ ..._formState });
-    _subjects.values.next({
-      name: _state.mount ? name : void 0,
-      values: { ..._formValues }
+    isWatched(name, _names) && _subjects.state.next({});
+    _subjects.watch.next({
+      name
     });
+    !_stateFlags.mount && flushRootRender();
   };
   const onChange = async (event) => {
-    _state.mount = true;
     const target = event.target;
     let name = target.name;
-    let isFieldValueUpdated = true;
     const field = get(_fields, name);
     const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
-    const _updateIsFieldValueUpdated = (fieldValue) => {
-      isFieldValueUpdated = Number.isNaN(fieldValue) || fieldValue === get(_formValues, name, fieldValue);
-    };
     if (field) {
       let error2;
       let isValid;
@@ -4354,56 +4262,40 @@ function createFormControl(props = {}) {
       }
       const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
       const shouldRender = !isEmptyObject(fieldState) || watched;
-      !isBlurEvent && _subjects.values.next({
+      !isBlurEvent && _subjects.watch.next({
         name,
-        type: event.type,
-        values: { ..._formValues }
+        type: event.type
       });
       if (shouldSkipValidation) {
         _proxyFormState.isValid && _updateValid();
         return shouldRender && _subjects.state.next({ name, ...watched ? {} : fieldState });
       }
-      !isBlurEvent && watched && _subjects.state.next({ ..._formState });
+      !isBlurEvent && watched && _subjects.state.next({});
+      _updateIsValidating(true);
       if (_options.resolver) {
         const { errors } = await _executeSchema([name]);
-        _updateIsFieldValueUpdated(fieldValue);
-        if (isFieldValueUpdated) {
-          const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
-          const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
-          error2 = errorLookupResult.error;
-          name = errorLookupResult.name;
-          isValid = isEmptyObject(errors);
-        }
+        const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+        const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+        error2 = errorLookupResult.error;
+        name = errorLookupResult.name;
+        isValid = isEmptyObject(errors);
       } else {
-        _updateIsValidating([name], true);
-        error2 = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
-        _updateIsValidating([name]);
-        _updateIsFieldValueUpdated(fieldValue);
-        if (isFieldValueUpdated) {
-          if (error2) {
-            isValid = false;
-          } else if (_proxyFormState.isValid) {
-            isValid = await executeBuiltInValidation(_fields, true);
-          }
+        error2 = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
+        if (error2) {
+          isValid = false;
+        } else if (_proxyFormState.isValid) {
+          isValid = await executeBuiltInValidation(_fields, true);
         }
       }
-      if (isFieldValueUpdated) {
-        field._f.deps && trigger(field._f.deps);
-        shouldRenderByError(name, isValid, error2, fieldState);
-      }
+      field._f.deps && trigger(field._f.deps);
+      shouldRenderByError(name, isValid, error2, fieldState);
     }
   };
-  const _focusInput = (ref, key) => {
-    if (get(_formState.errors, key) && ref.focus) {
-      ref.focus();
-      return 1;
-    }
-    return;
-  };
   const trigger = async (name, options = {}) => {
     let isValid;
     let validationResult;
     const fieldNames = convertToArrayPayload(name);
+    _updateIsValidating(true);
     if (_options.resolver) {
       const errors = await executeSchemaAndUpdateState(isUndefined$2(name) ? name : fieldNames);
       isValid = isEmptyObject(errors);
@@ -4420,36 +4312,34 @@ function createFormControl(props = {}) {
     _subjects.state.next({
       ...!isString(name) || _proxyFormState.isValid && isValid !== _formState.isValid ? {} : { name },
       ..._options.resolver || !name ? { isValid } : {},
-      errors: _formState.errors
+      errors: _formState.errors,
+      isValidating: false
     });
-    options.shouldFocus && !validationResult && iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
+    options.shouldFocus && !validationResult && focusFieldBy(_fields, (key) => key && get(_formState.errors, key), name ? fieldNames : _names.mount);
     return validationResult;
   };
   const getValues = (fieldNames) => {
     const values = {
-      ..._state.mount ? _formValues : _defaultValues
+      ..._defaultValues,
+      ..._stateFlags.mount ? _formValues : {}
     };
     return isUndefined$2(fieldNames) ? values : isString(fieldNames) ? get(values, fieldNames) : fieldNames.map((name) => get(values, name));
   };
   const getFieldState = (name, formState) => ({
     invalid: !!get((formState || _formState).errors, name),
     isDirty: !!get((formState || _formState).dirtyFields, name),
-    error: get((formState || _formState).errors, name),
-    isValidating: !!get(_formState.validatingFields, name),
-    isTouched: !!get((formState || _formState).touchedFields, name)
+    isTouched: !!get((formState || _formState).touchedFields, name),
+    error: get((formState || _formState).errors, name)
   });
   const clearErrors = (name) => {
-    name && convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
+    name ? convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName)) : _formState.errors = {};
     _subjects.state.next({
-      errors: name ? _formState.errors : {}
+      errors: _formState.errors
     });
   };
   const setError = (name, error2, options) => {
     const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
-    const currentError = get(_formState.errors, name) || {};
-    const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
     set(_formState.errors, name, {
-      ...restOfErrorTree,
       ...error2,
       ref
     });
@@ -4460,39 +4350,31 @@ function createFormControl(props = {}) {
     });
     options && options.shouldFocus && ref && ref.focus && ref.focus();
   };
-  const watch = (name, defaultValue) => isFunction$1(name) ? _subjects.values.subscribe({
+  const watch = (name, defaultValue) => isFunction$1(name) ? _subjects.watch.subscribe({
     next: (payload) => name(_getWatch(void 0, defaultValue), payload)
   }) : _getWatch(name, defaultValue, true);
   const unregister = (name, options = {}) => {
     for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
       _names.mount.delete(fieldName);
       _names.array.delete(fieldName);
-      if (!options.keepValue) {
-        unset(_fields, fieldName);
-        unset(_formValues, fieldName);
-      }
-      !options.keepError && unset(_formState.errors, fieldName);
-      !options.keepDirty && unset(_formState.dirtyFields, fieldName);
-      !options.keepTouched && unset(_formState.touchedFields, fieldName);
-      !options.keepIsValidating && unset(_formState.validatingFields, fieldName);
-      !_options.shouldUnregister && !options.keepDefaultValue && unset(_defaultValues, fieldName);
-    }
-    _subjects.values.next({
-      values: { ..._formValues }
-    });
+      if (get(_fields, fieldName)) {
+        if (!options.keepValue) {
+          unset(_fields, fieldName);
+          unset(_formValues, fieldName);
+        }
+        !options.keepError && unset(_formState.errors, fieldName);
+        !options.keepDirty && unset(_formState.dirtyFields, fieldName);
+        !options.keepTouched && unset(_formState.touchedFields, fieldName);
+        !_options.shouldUnregister && !options.keepDefaultValue && unset(_defaultValues, fieldName);
+      }
+    }
+    _subjects.watch.next({});
     _subjects.state.next({
       ..._formState,
       ...!options.keepDirty ? {} : { isDirty: _getDirty() }
     });
     !options.keepIsValid && _updateValid();
   };
-  const _updateDisabledField = ({ disabled, name, field, fields, value }) => {
-    if (isBoolean(disabled) && _state.mount || !!disabled) {
-      const inputValue = disabled ? void 0 : isUndefined$2(value) ? getFieldValue(field ? field._f : get(fields, name)._f) : value;
-      set(_formValues, name, inputValue);
-      updateTouchAndDirty(name, inputValue, false, false, true);
-    }
-  };
   const register = (name, options = {}) => {
     let field = get(_fields, name);
     const disabledIsDefined = isBoolean(options.disabled);
@@ -4506,19 +4388,10 @@ function createFormControl(props = {}) {
       }
     });
     _names.mount.add(name);
-    if (field) {
-      _updateDisabledField({
-        field,
-        disabled: options.disabled,
-        name,
-        value: options.value
-      });
-    } else {
-      updateValidAndValue(name, true, options.value);
-    }
+    field ? disabledIsDefined && set(_formValues, name, options.disabled ? void 0 : get(_formValues, name, getFieldValue(field._f))) : updateValidAndValue(name, true, options.value);
     return {
       ...disabledIsDefined ? { disabled: options.disabled } : {},
-      ..._options.progressive ? {
+      ..._options.shouldUseNativeValidation ? {
         required: !!options.required,
         min: getRuleValue(options.min),
         max: getRuleValue(options.max),
@@ -4558,87 +4431,70 @@ function createFormControl(props = {}) {
           if (field._f) {
             field._f.mount = false;
           }
-          (_options.shouldUnregister || options.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _state.action) && _names.unMount.add(name);
+          (_options.shouldUnregister || options.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _stateFlags.action) && _names.unMount.add(name);
         }
       }
     };
   };
-  const _focusError = () => _options.shouldFocusError && iterateFieldsByAction(_fields, _focusInput, _names.mount);
-  const _disableForm = (disabled) => {
-    if (isBoolean(disabled)) {
-      _subjects.state.next({ disabled });
-      iterateFieldsByAction(_fields, (ref, name) => {
-        const currentField = get(_fields, name);
-        if (currentField) {
-          ref.disabled = currentField._f.disabled || disabled;
-          if (Array.isArray(currentField._f.refs)) {
-            currentField._f.refs.forEach((inputRef) => {
-              inputRef.disabled = currentField._f.disabled || disabled;
-            });
-          }
-        }
-      }, 0, false);
-    }
-  };
+  const _focusError = () => _options.shouldFocusError && focusFieldBy(_fields, (key) => key && get(_formState.errors, key), _names.mount);
   const handleSubmit = (onValid, onInvalid) => async (e2) => {
-    let onValidError = void 0;
     if (e2) {
       e2.preventDefault && e2.preventDefault();
       e2.persist && e2.persist();
     }
+    let hasNoPromiseError = true;
     let fieldValues = cloneObject(_formValues);
     _subjects.state.next({
       isSubmitting: true
     });
-    if (_options.resolver) {
-      const { errors, values } = await _executeSchema();
-      _formState.errors = errors;
-      fieldValues = values;
-    } else {
-      await executeBuiltInValidation(_fields);
-    }
-    unset(_formState.errors, "root");
-    if (isEmptyObject(_formState.errors)) {
-      _subjects.state.next({
-        errors: {}
-      });
-      try {
-        await onValid(fieldValues, e2);
-      } catch (error2) {
-        onValidError = error2;
+    try {
+      if (_options.resolver) {
+        const { errors, values } = await _executeSchema();
+        _formState.errors = errors;
+        fieldValues = values;
+      } else {
+        await executeBuiltInValidation(_fields);
       }
-    } else {
-      if (onInvalid) {
-        await onInvalid({ ..._formState.errors }, e2);
+      if (isEmptyObject(_formState.errors)) {
+        _subjects.state.next({
+          errors: {},
+          isSubmitting: true
+        });
+        await onValid(fieldValues, e2);
+      } else {
+        if (onInvalid) {
+          await onInvalid({ ..._formState.errors }, e2);
+        }
+        _focusError();
       }
-      _focusError();
-      setTimeout(_focusError);
-    }
-    _subjects.state.next({
-      isSubmitted: true,
-      isSubmitting: false,
-      isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
-      submitCount: _formState.submitCount + 1,
-      errors: _formState.errors
-    });
-    if (onValidError) {
-      throw onValidError;
+    } catch (err) {
+      hasNoPromiseError = false;
+      throw err;
+    } finally {
+      _formState.isSubmitted = true;
+      _subjects.state.next({
+        isSubmitted: true,
+        isSubmitting: false,
+        isSubmitSuccessful: isEmptyObject(_formState.errors) && hasNoPromiseError,
+        submitCount: _formState.submitCount + 1,
+        errors: _formState.errors
+      });
     }
   };
   const resetField = (name, options = {}) => {
     if (get(_fields, name)) {
       if (isUndefined$2(options.defaultValue)) {
-        setValue(name, cloneObject(get(_defaultValues, name)));
+        setValue(name, get(_defaultValues, name));
       } else {
         setValue(name, options.defaultValue);
-        set(_defaultValues, name, cloneObject(options.defaultValue));
+        set(_defaultValues, name, options.defaultValue);
       }
       if (!options.keepTouched) {
         unset(_formState.touchedFields, name);
       }
       if (!options.keepDirty) {
         unset(_formState.dirtyFields, name);
-        _formState.isDirty = options.defaultValue ? _getDirty(name, cloneObject(get(_defaultValues, name))) : _getDirty();
+        _formState.isDirty = options.defaultValue ? _getDirty(name, get(_defaultValues, name)) : _getDirty();
       }
       if (!options.keepError) {
         unset(_formState.errors, name);
@@ -4648,15 +4504,14 @@ function createFormControl(props = {}) {
     }
   };
   const _reset = (formValues, keepStateOptions = {}) => {
-    const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
+    const updatedValues = formValues || _defaultValues;
     const cloneUpdatedValues = cloneObject(updatedValues);
-    const isEmptyResetValues = isEmptyObject(formValues);
-    const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
+    const values = formValues && !isEmptyObject(formValues) ? cloneUpdatedValues : _defaultValues;
     if (!keepStateOptions.keepDefaultValues) {
       _defaultValues = updatedValues;
     }
     if (!keepStateOptions.keepValues) {
-      if (keepStateOptions.keepDirtyValues) {
+      if (keepStateOptions.keepDirtyValues || shouldCaptureDirtyFields) {
         for (const fieldName of _names.mount) {
           get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
         }
@@ -4678,33 +4533,34 @@ function createFormControl(props = {}) {
         }
         _fields = {};
       }
-      _formValues = props.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
+      _formValues = props.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneUpdatedValues;
       _subjects.array.next({
-        values: { ...values }
+        values
       });
-      _subjects.values.next({
-        values: { ...values }
+      _subjects.watch.next({
+        values
       });
     }
     _names = {
-      mount: keepStateOptions.keepDirtyValues ? _names.mount : /* @__PURE__ */ new Set(),
+      mount: /* @__PURE__ */ new Set(),
       unMount: /* @__PURE__ */ new Set(),
       array: /* @__PURE__ */ new Set(),
       watch: /* @__PURE__ */ new Set(),
       watchAll: false,
       focus: ""
     };
-    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues;
-    _state.watch = !!props.shouldUnregister;
+    !_stateFlags.mount && flushRootRender();
+    _stateFlags.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
+    _stateFlags.watch = !!props.shouldUnregister;
     _subjects.state.next({
       submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
-      isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
+      isDirty: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
       isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
-      dirtyFields: isEmptyResetValues ? {} : keepStateOptions.keepDirtyValues ? keepStateOptions.keepDefaultValues && _formValues ? getDirtyFields(_defaultValues, _formValues) : _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : keepStateOptions.keepDirty ? _formState.dirtyFields : {},
+      dirtyFields: keepStateOptions.keepDirty || keepStateOptions.keepDirtyValues ? _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : {},
       touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
       errors: keepStateOptions.keepErrors ? _formState.errors : {},
-      isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
-      isSubmitting: false
+      isSubmitting: false,
+      isSubmitSuccessful: false
     });
   };
   const reset = (formValues, keepStateOptions) => _reset(isFunction$1(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
@@ -4719,51 +4575,41 @@ function createFormControl(props = {}) {
       }
     }
   };
-  const _updateFormState = (updatedFormState) => {
-    _formState = {
-      ..._formState,
-      ...updatedFormState
-    };
-  };
-  const _resetDefaultValues = () => isFunction$1(_options.defaultValues) && _options.defaultValues().then((values) => {
-    reset(values, _options.resetOptions);
-    _subjects.state.next({
-      isLoading: false
+  if (isFunction$1(_options.defaultValues)) {
+    _options.defaultValues().then((values) => {
+      reset(values, _options.resetOptions);
+      _subjects.state.next({
+        isLoading: false
+      });
     });
-  });
+  }
   return {
     control: {
       register,
       unregister,
       getFieldState,
-      handleSubmit,
-      setError,
       _executeSchema,
+      _focusError,
       _getWatch,
       _getDirty,
       _updateValid,
       _removeUnmounted,
       _updateFieldArray,
-      _updateDisabledField,
       _getFieldArray,
       _reset,
-      _resetDefaultValues,
-      _updateFormState,
-      _disableForm,
       _subjects,
       _proxyFormState,
-      _setErrors,
       get _fields() {
         return _fields;
       },
       get _formValues() {
         return _formValues;
       },
-      get _state() {
-        return _state;
+      get _stateFlags() {
+        return _stateFlags;
       },
-      set _state(value) {
-        _state = value;
+      set _stateFlags(value) {
+        _stateFlags = value;
       },
       get _defaultValues() {
         return _defaultValues;
@@ -4806,12 +4652,11 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = React__default.useRef();
-  const _values = React__default.useRef();
-  const [formState, updateFormState] = React__default.useState({
+  const _formControl = React.useRef();
+  const [formState, updateFormState] = React.useState({
     isDirty: false,
     isValidating: false,
-    isLoading: isFunction$1(props.defaultValues),
+    isLoading: true,
     isSubmitted: false,
     isSubmitting: false,
     isSubmitSuccessful: false,
@@ -4819,14 +4664,12 @@ function useForm(props = {}) {
     submitCount: 0,
     dirtyFields: {},
     touchedFields: {},
-    validatingFields: {},
-    errors: props.errors || {},
-    disabled: props.disabled || false,
+    errors: {},
     defaultValues: isFunction$1(props.defaultValues) ? void 0 : props.defaultValues
   });
   if (!_formControl.current) {
     _formControl.current = {
-      ...createFormControl(props),
+      ...createFormControl(props, () => updateFormState((formState2) => ({ ...formState2 }))),
       formState
     };
   }
@@ -4835,59 +4678,40 @@ function useForm(props = {}) {
   useSubscribe({
     subject: control._subjects.state,
     next: (value) => {
-      if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
+      if (shouldRenderFormState(value, control._proxyFormState, true)) {
+        control._formState = {
+          ...control._formState,
+          ...value
+        };
         updateFormState({ ...control._formState });
       }
     }
   });
-  React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  React__default.useEffect(() => {
-    if (control._proxyFormState.isDirty) {
-      const isDirty = control._getDirty();
-      if (isDirty !== formState.isDirty) {
-        control._subjects.state.next({
-          isDirty
-        });
-      }
-    }
-  }, [control, formState.isDirty]);
-  React__default.useEffect(() => {
-    if (props.values && !deepEqual(props.values, _values.current)) {
-      control._reset(props.values, control._options.resetOptions);
-      _values.current = props.values;
-      updateFormState((state) => ({ ...state }));
-    } else {
-      control._resetDefaultValues();
-    }
-  }, [props.values, control]);
-  React__default.useEffect(() => {
-    if (props.errors) {
-      control._setErrors(props.errors);
-    }
-  }, [props.errors, control]);
-  React__default.useEffect(() => {
-    if (!control._state.mount) {
-      control._updateValid();
-      control._state.mount = true;
+  React.useEffect(() => {
+    if (!control._stateFlags.mount) {
+      control._proxyFormState.isValid && control._updateValid();
+      control._stateFlags.mount = true;
     }
-    if (control._state.watch) {
-      control._state.watch = false;
-      control._subjects.state.next({ ...control._formState });
+    if (control._stateFlags.watch) {
+      control._stateFlags.watch = false;
+      control._subjects.state.next({});
     }
     control._removeUnmounted();
   });
-  React__default.useEffect(() => {
-    props.shouldUnregister && control._subjects.values.next({
-      values: control._getWatch()
-    });
-  }, [props.shouldUnregister, control]);
+  React.useEffect(() => {
+    if (props.values && !deepEqual(props.values, control._defaultValues)) {
+      control._reset(props.values, control._options.resetOptions);
+    }
+  }, [props.values, control]);
+  React.useEffect(() => {
+    formState.submitCount && control._focusError();
+  }, [control, formState.submitCount]);
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
 var index_esm = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Controller,
-  Form,
   FormProvider,
   appendErrors,
   get,
@@ -6360,6 +6184,7 @@ var EOrderSource;
   EOrderSource2["TAZZ"] = "TAZZ";
   EOrderSource2["POS"] = "POS";
   EOrderSource2["UPMENU"] = "UPMENU";
+  EOrderSource2["APP"] = "APP";
 })(EOrderSource || (EOrderSource = {}));
 var EChannelName;
 (function(EChannelName2) {
@@ -6424,6 +6249,7 @@ var EOrderProductKind;
 })(EOrderProductKind || (EOrderProductKind = {}));
 var ENotificationType;
 (function(ENotificationType2) {
+  ENotificationType2["ORDER_MESSAGE"] = "OrderMessage";
   ENotificationType2["ORDER_EVENT_ERROR"] = "OrderEventError";
   ENotificationType2["ORDER_APPLIED_EVENTS"] = "OrderAppliedEvents";
   ENotificationType2["ORDER_EVENT_FISCAL"] = "OrderEventFiscal";
@@ -6435,14 +6261,6 @@ const isApiBooleanTrue = (value) => {
   }
   return false;
 };
-const scrollToId = (id) => {
-  const element = document.getElementById(id);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  } else {
-    console.warn(`Error: scrollToId: id: ${id} not found in html structure`);
-  }
-};
 const getOptionsKindId = (contextName) => {
   return `options--${contextName}`;
 };
@@ -6517,7 +6335,7 @@ const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 function create(createState) {
   const api = typeof createState === "function" ? createStore(createState) : createState;
   const useStore2 = (selector = api.getState, equalityFn = Object.is) => {
-    const [, forceUpdate] = useReducer((c2) => c2 + 1, 0);
+    const [, forceUpdate] = useReducer((c) => c + 1, 0);
     const state = api.getState();
     const stateRef = useRef(state);
     const selectorRef = useRef(selector);
@@ -6823,7 +6641,9 @@ function getValidSelectedState(product, selected) {
 }
 function useProductConfigurator(product) {
   var _a;
-  const [productQuantity, setProductQuantity] = useState(Number(product.quantity) || 1);
+  const [productQuantity, setProductQuantity] = useState(
+    Number(product.quantity) || 1
+  );
   const encodedProduct = encodeProduct(product);
   const { state: { filter: initFilter = {} } = {} } = encodedProduct;
   const initSelected = getValidSelectedState(
@@ -6839,9 +6659,8 @@ function useProductConfigurator(product) {
   const setIsOnSubmittedOnTrue = useStore(
     (state) => state.setIsOnSubmittedOnTrue
   );
-  useStore((state) => state.refreshFormDt);
+  const refreshFormDt = useStore((state) => state.refreshFormDt);
   const getInvalidSelCtxArray = useStore((state) => state.getInvalidSelCtxArray);
-  const getValidationMap = useStore((state) => state.getValidationMap);
   const increaseProductQuantity = () => {
     setProductQuantity((productQuantity2) => productQuantity2 + 1);
   };
@@ -6865,9 +6684,9 @@ function useProductConfigurator(product) {
     setIsOnSubmittedOnTrue,
     getInvalidSelCtxArray,
     productQuantity,
-    getValidationMap,
     increaseProductQuantity,
-    decreaseProductQuantity
+    decreaseProductQuantity,
+    refreshFormDt
   };
 }
 const validateProductFilter = (product, stateFilter) => {
@@ -6914,13 +6733,11 @@ const getProductToChangeInForm = (product, isFilterValidated) => {
   return { productsToSelect, productsToUnselect };
 };
 const unselectProductsInForm = (productsToUnselect, setValueInForm) => {
-  console.log("LOG1 productsToUnselect", productsToUnselect);
   productsToUnselect.map(({ selCtx, id }) => {
     setValueInForm(`selected.${selCtx}.${id}`, false);
   });
 };
 const selectProductsInForm = (productToSelect, setValueInForm, initialSelectedState) => {
-  console.log("LOG1 productToSelect", productToSelect);
   productToSelect.map(({ selCtx, id }) => {
     var _a;
     const productInInitialState = (_a = initialSelectedState[selCtx]) == null ? void 0 : _a[id];
@@ -6983,22 +6800,22 @@ var reactJsxRuntime_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f$5 = React__default, k$1 = Symbol.for("react.element"), l$6 = Symbol.for("react.fragment"), m$3 = Object.prototype.hasOwnProperty, n$4 = f$5.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$4 = { key: true, ref: true, __self: true, __source: true };
-function q$1(c2, a2, g2) {
-  var b2, d2 = {}, e2 = null, h2 = null;
-  void 0 !== g2 && (e2 = "" + g2);
+var f$3 = React, k$2 = Symbol.for("react.element"), l$4 = Symbol.for("react.fragment"), m$3 = Object.prototype.hasOwnProperty, n$2 = f$3.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$3 = { key: true, ref: true, __self: true, __source: true };
+function q(c, a2, g) {
+  var b, d2 = {}, e2 = null, h2 = null;
+  void 0 !== g && (e2 = "" + g);
   void 0 !== a2.key && (e2 = "" + a2.key);
   void 0 !== a2.ref && (h2 = a2.ref);
-  for (b2 in a2)
-    m$3.call(a2, b2) && !p$4.hasOwnProperty(b2) && (d2[b2] = a2[b2]);
-  if (c2 && c2.defaultProps)
-    for (b2 in a2 = c2.defaultProps, a2)
-      void 0 === d2[b2] && (d2[b2] = a2[b2]);
-  return { $$typeof: k$1, type: c2, key: e2, ref: h2, props: d2, _owner: n$4.current };
-}
-reactJsxRuntime_production_min.Fragment = l$6;
-reactJsxRuntime_production_min.jsx = q$1;
-reactJsxRuntime_production_min.jsxs = q$1;
+  for (b in a2)
+    m$3.call(a2, b) && !p$3.hasOwnProperty(b) && (d2[b] = a2[b]);
+  if (c && c.defaultProps)
+    for (b in a2 = c.defaultProps, a2)
+      void 0 === d2[b] && (d2[b] = a2[b]);
+  return { $$typeof: k$2, type: c, key: e2, ref: h2, props: d2, _owner: n$2.current };
+}
+reactJsxRuntime_production_min.Fragment = l$4;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
 {
   jsxRuntime.exports = reactJsxRuntime_production_min;
 }
@@ -7107,8 +6924,8 @@ function _nonIterableRest() {
 }
 var Static = {
   normalizePrecision: function normalizePrecision(objects) {
-    var highestPrecision = objects.reduce(function(a2, b2) {
-      return Math.max(a2.getPrecision(), b2.getPrecision());
+    var highestPrecision = objects.reduce(function(a2, b) {
+      return Math.max(a2.getPrecision(), b.getPrecision());
     });
     return objects.map(function(object) {
       return object.getPrecision() !== highestPrecision ? object.convertPrecision(highestPrecision) : object;
@@ -7213,12 +7030,12 @@ function isThenable(value) {
   return Boolean(value) && (_typeof(value) === "object" || typeof value === "function") && typeof value.then === "function";
 }
 function Calculator() {
-  var floatMultiply = function floatMultiply2(a2, b2) {
+  var floatMultiply = function floatMultiply2(a2, b) {
     var getFactor = function getFactor2(number) {
       return Math.pow(10, countFractionDigits(number));
     };
-    var factor = Math.max(getFactor(a2), getFactor(b2));
-    return Math.round(a2 * factor) * Math.round(b2 * factor) / (factor * factor);
+    var factor = Math.max(getFactor(a2), getFactor(b));
+    return Math.round(a2 * factor) * Math.round(b * factor) / (factor * factor);
   };
   var roundingModes = {
     HALF_ODD: function HALF_ODD(number) {
@@ -7246,20 +7063,20 @@ function Calculator() {
     }
   };
   return {
-    add: function add(a2, b2) {
-      return a2 + b2;
+    add: function add(a2, b) {
+      return a2 + b;
     },
-    subtract: function subtract(a2, b2) {
-      return a2 - b2;
+    subtract: function subtract(a2, b) {
+      return a2 - b;
     },
-    multiply: function multiply(a2, b2) {
-      return isFloat(a2) || isFloat(b2) ? floatMultiply(a2, b2) : a2 * b2;
+    multiply: function multiply(a2, b) {
+      return isFloat(a2) || isFloat(b) ? floatMultiply(a2, b) : a2 * b;
     },
-    divide: function divide(a2, b2) {
-      return a2 / b2;
+    divide: function divide(a2, b) {
+      return a2 / b;
     },
-    modulo: function modulo(a2, b2) {
-      return a2 % b2;
+    modulo: function modulo(a2, b) {
+      return a2 % b;
     },
     round: function round(number) {
       var roundingMode = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "HALF_EVEN";
@@ -7441,8 +7258,8 @@ var Dinero = function Dinero2(options) {
     allocate: function allocate(ratios) {
       var _this = this;
       assertValidRatios(ratios);
-      var total = ratios.reduce(function(a2, b2) {
-        return calculator$1.add(a2, b2);
+      var total = ratios.reduce(function(a2, b) {
+        return calculator$1.add(a2, b);
       });
       var remainder = this.getAmount();
       var shares = ratios.map(function(ratio) {
@@ -7816,34 +7633,34 @@ function hasLoadedNamespace(ns, i18n) {
     }
   });
 }
-function _iterableToArrayLimit(r2, l2) {
-  var t2 = null == r2 ? null : "undefined" != typeof Symbol && r2[Symbol.iterator] || r2["@@iterator"];
-  if (null != t2) {
-    var e2, n2, i2, u2, a2 = [], f2 = true, o2 = false;
+function _iterableToArrayLimit(arr2, i2) {
+  var _i = null == arr2 ? null : "undefined" != typeof Symbol && arr2[Symbol.iterator] || arr2["@@iterator"];
+  if (null != _i) {
+    var _s, _e2, _x, _r, _arr = [], _n = true, _d = false;
     try {
-      if (i2 = (t2 = t2.call(r2)).next, 0 === l2) {
-        if (Object(t2) !== t2)
+      if (_x = (_i = _i.call(arr2)).next, 0 === i2) {
+        if (Object(_i) !== _i)
           return;
-        f2 = false;
+        _n = false;
       } else
-        for (; !(f2 = (e2 = i2.call(t2)).done) && (a2.push(e2.value), a2.length !== l2); f2 = true)
+        for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i2); _n = true)
           ;
-    } catch (r3) {
-      o2 = true, n2 = r3;
+    } catch (err) {
+      _d = true, _e2 = err;
     } finally {
       try {
-        if (!f2 && null != t2["return"] && (u2 = t2["return"](), Object(u2) !== u2))
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r))
           return;
       } finally {
-        if (o2)
-          throw n2;
+        if (_d)
+          throw _e2;
       }
     }
-    return a2;
+    return _arr;
   }
 }
-function _slicedToArray(r2, e2) {
-  return _arrayWithHoles$1(r2) || _iterableToArrayLimit(r2, e2) || _unsupportedIterableToArray$1(r2, e2) || _nonIterableRest$1();
+function _slicedToArray(arr2, i2) {
+  return _arrayWithHoles$1(arr2) || _iterableToArrayLimit(arr2, i2) || _unsupportedIterableToArray$1(arr2, i2) || _nonIterableRest$1();
 }
 function ownKeys(object, enumerableOnly) {
   var keys2 = Object.keys(object);
@@ -8058,12 +7875,12 @@ var cookie = {
     var nameEQ = "".concat(name, "=");
     var ca = document.cookie.split(";");
     for (var i2 = 0; i2 < ca.length; i2++) {
-      var c2 = ca[i2];
-      while (c2.charAt(0) === " ") {
-        c2 = c2.substring(1, c2.length);
+      var c = ca[i2];
+      while (c.charAt(0) === " ") {
+        c = c.substring(1, c.length);
       }
-      if (c2.indexOf(nameEQ) === 0)
-        return c2.substring(nameEQ.length, c2.length);
+      if (c.indexOf(nameEQ) === 0)
+        return c.substring(nameEQ.length, c.length);
     }
     return null;
   },
@@ -8076,9 +7893,9 @@ var cookie$1 = {
   lookup: function lookup(options) {
     var found;
     if (options.lookupCookie && typeof document !== "undefined") {
-      var c2 = cookie.read(options.lookupCookie);
-      if (c2)
-        found = c2;
+      var c = cookie.read(options.lookupCookie);
+      if (c)
+        found = c;
     }
     return found;
   },
@@ -8569,7 +8386,7 @@ const MenuOptionsDefaultUI = (props) => {
     })]
   });
 };
-const ComponentsContext = React__default.createContext(null);
+const ComponentsContext = React.createContext(null);
 function useComponents() {
   const context = useContext(ComponentsContext);
   if (!context) {
@@ -8602,7 +8419,8 @@ const MenuOptions = (props) => {
   const MenuItemsDispatcherWrapper = /* @__PURE__ */ jsx(MenuItemsDispatcher, {
     productItems: optionsItem.items,
     parentProduct: optionsItem,
-    rootProduct
+    rootProduct,
+    nestedLvl: nestedLvl + 1
   });
   const menuOptionsProps = {
     optionsItem,
@@ -8611,7 +8429,8 @@ const MenuOptions = (props) => {
     isOnSubmitted,
     actualQtyCnt: qtyCnt,
     actualSelCnt: selCnt,
-    currency
+    currency,
+    nestedLvl
   };
   if (MenuOptionsUI) {
     return /* @__PURE__ */ jsx(MenuOptionsUI, {
@@ -8903,6 +8722,7 @@ const addProductToState = (selected, setValue) => {
 };
 const removeProductFromState = (selCtx, getValues, setValue) => {
   const changedSelCtx = getValues(`selected.${selCtx}`);
+  console.log("changedSelCtx", changedSelCtx);
   setValue(
     `selected.${selCtx}`,
     Object.keys(changedSelCtx).reduce((acc, key) => {
@@ -8998,7 +8818,28 @@ const selectUnselectProduct = (setValue, getValues, product, isChecked, unregist
     }
   }
 };
-function useMenuProduct(product, parentAttrs, nestedLvl) {
+const findProductInParentProductBySelCtx = (parent, selCtx) => {
+  var _a;
+  if (!parent.items || isEmpty(parent.items)) {
+    return null;
+  }
+  for (let i2 = 0; i2 < ((_a = parent.items) == null ? void 0 : _a.length); i2++) {
+    const prod = parent.items[i2];
+    if (prod.selCtx) {
+      if (prod.selCtx === selCtx && prod.kind === EProductKind.PRODUCT) {
+        return prod;
+      }
+    }
+    if (prod.kind === EProductKind.OPTIONS && prod.items && prod.items.length > 0) {
+      const found = findProductInParentProductBySelCtx(prod, selCtx);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
   var _a;
   const { id, selCtx, emit = {}, fltCtx } = product;
   const {
@@ -9014,11 +8855,11 @@ function useMenuProduct(product, parentAttrs, nestedLvl) {
   const { selected = {} } = getValues();
   const valueNumber = Number(value || 0);
   const isRadio = parentSelMin === "1" && parentSelMax === "1";
+  useEmitFilter(product, isRadio, nestedLvl);
   const isCheckbox = !isRadio;
   const isCounter = isApiBooleanTrue(parentAllowMultiple);
   const isDecrementEnabled = valueNumber > (isRadio ? 1 : 0);
-  const isIncrementEnabled = useEmitFilter(product, isRadio, nestedLvl);
-  isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
+  const isIncrementEnabled = isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
   const isChecked = Number(((_a = selected == null ? void 0 : selected[selCtx]) == null ? void 0 : _a[id]) || 0) > 0;
   const isCheckboxEnabled = isInputEnabled2(product) || valueNumber;
   const registerId = `${isRadio ? "radio" : "selected"}.${selCtx}.${id}`;
@@ -9028,15 +8869,34 @@ function useMenuProduct(product, parentAttrs, nestedLvl) {
     }
   });
   const handleCounterIncrementQty = () => {
+    var _a2, _b;
     setValue(`selected.${selCtx}.${id}`, `${valueNumber + 1}`);
+    const importantSubProductsInState = (_b = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
+      var _a3;
+      return { key: y2, subProductId: (_a3 = findProductInParentProductBySelCtx(product, y2)) == null ? void 0 : _a3.id };
+    })) == null ? void 0 : _b.filter((x2) => !!x2.subProductId);
+    if (valueNumber === 0) {
+      importantSubProductsInState == null ? void 0 : importantSubProductsInState.forEach((x2) => {
+        setValue(`selected.${x2.key}.${x2.subProductId}`, `${valueNumber + 1}`);
+      });
+    }
   };
   const handleCounterDecrementQty = () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     const decrementedValue = valueNumber - 1;
     setValue(`selected.${selCtx}.${id}`, `${decrementedValue}`);
+    const importantSubProductsInState = (_b = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
+      var _a3;
+      return { key: y2, subProductId: (_a3 = findProductInParentProductBySelCtx(product, y2)) == null ? void 0 : _a3.id };
+    })) == null ? void 0 : _b.filter((x2) => !!x2.subProductId);
+    if (decrementedValue === 0) {
+      importantSubProductsInState == null ? void 0 : importantSubProductsInState.forEach((x2) => {
+        setValue(`selected.${x2.key}.${x2.subProductId}`, `${decrementedValue}`);
+      });
+    }
     if (isCheckbox && decrementedValue === 0) {
       setValue(`selected.${selCtx}.${id}`, false);
-      (_a2 = Object.keys(emit)) == null ? void 0 : _a2.forEach((x2) => {
+      (_c = Object.keys(emit)) == null ? void 0 : _c.forEach((x2) => {
         const formPath = `filterWithCnt.${fltCtx}.${x2}.${emit[x2]}`;
         const cnt = getValues(formPath) || 0;
         if (cnt < 2) {
@@ -9062,8 +8922,8 @@ function useMenuProduct(product, parentAttrs, nestedLvl) {
         const groupsPath = `filterWithCnt.${fltCtx}`;
         const groupCntPath = `filterWithCnt.${fltCtx}.${selCtx}`;
         const fltCtxPath = `filter.${fltCtx}`;
-        (_b = Object.keys(emit)) == null ? void 0 : _b.forEach((emitKey) => {
-          var _a3, _b2, _c;
+        (_d = Object.keys(emit)) == null ? void 0 : _d.forEach((emitKey) => {
+          var _a3, _b2, _c2;
           const groupValue = getValues(`${groupCntPath}.${emitKey}`) || 0;
           if (groupValue) {
             if (groupValue > 1) {
@@ -9082,7 +8942,7 @@ function useMenuProduct(product, parentAttrs, nestedLvl) {
                 if (!sameKeyOtherGroup) {
                   unregister(`${fltCtxPath}.${emitKey}`);
                 } else {
-                  const newValue = (_c = (_b2 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b2[`${emitKey}`]) == null ? void 0 : _c.value;
+                  const newValue = (_c2 = (_b2 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b2[`${emitKey}`]) == null ? void 0 : _c2.value;
                   setValue(`${fltCtxPath}.${emitKey}`, newValue);
                 }
               }
@@ -9093,12 +8953,20 @@ function useMenuProduct(product, parentAttrs, nestedLvl) {
     }
   };
   const handleOnInputChange = (e2) => {
+    var _a2;
     const {
       target: { checked, name: selCtx2, defaultValue: productId }
     } = e2;
     selectUnselectProduct(setValue, getValues, product, checked, unregister, nestedLvl);
     if (isRadio) {
       console.log("handleOnInputChange radio", selCtx2, productId);
+      const otherGroupItems = (_a2 = parentPriduct == null ? void 0 : parentPriduct.items) == null ? void 0 : _a2.filter((x2) => x2.id !== product.id);
+      for (const key of Object.keys(selected || {})) {
+        const isItemToClear = (otherGroupItems == null ? void 0 : otherGroupItems.some((x2) => !!findProductInParentProductBySelCtx(x2, key))) ? key : false;
+        if (isItemToClear) {
+          setValue(`selected.${key}`, false);
+        }
+      }
       const selectedContextName = "selected." + selCtx2.replace("radio.", "").split(".")[0];
       setValue(selectedContextName, { [productId]: "1" });
       refreshForm();
@@ -9145,7 +9013,7 @@ const MenuProduct = (props) => {
     handleCounterIncrementQty,
     handleCounterDecrementQty,
     currency
-  } = useMenuProduct(product, parentAttrs, nestedLvl);
+  } = useMenuProduct(product, parentAttrs, nestedLvl, parentProduct);
   const {
     MenuProductUI
   } = useComponents();
@@ -9400,7 +9268,7 @@ const DisplayState = () => {
         children: [/* @__PURE__ */ jsxs("p", {
           className: "text-lg font-semibold",
           children: [selCtx, ":"]
-        }), Object.keys(selected[selCtx]).map((id) => /* @__PURE__ */ jsx(React__default.Fragment, {
+        }), Object.keys(selected[selCtx]).map((id) => /* @__PURE__ */ jsx(React.Fragment, {
           children: selected[selCtx][id] && /* @__PURE__ */ jsxs("p", {
             children: [id, ":", selected[selCtx][id].toString()]
           })
@@ -9556,62 +9424,24 @@ function clsx() {
     (e2 = arguments[f2++]) && (t2 = r$4(e2)) && (n2 && (n2 += " "), n2 += t2);
   return n2;
 }
-var i$3 = Object.defineProperty;
-var d$5 = (t2, e2, n2) => e2 in t2 ? i$3(t2, e2, { enumerable: true, configurable: true, writable: true, value: n2 }) : t2[e2] = n2;
-var r$3 = (t2, e2, n2) => (d$5(t2, typeof e2 != "symbol" ? e2 + "" : e2, n2), n2);
-class o$5 {
-  constructor() {
-    r$3(this, "current", this.detect());
-    r$3(this, "handoffState", "pending");
-    r$3(this, "currentId", 0);
-  }
-  set(e2) {
-    this.current !== e2 && (this.handoffState = "pending", this.currentId = 0, this.current = e2);
-  }
-  reset() {
-    this.set(this.detect());
-  }
-  nextId() {
-    return ++this.currentId;
-  }
-  get isServer() {
-    return this.current === "server";
-  }
-  get isClient() {
-    return this.current === "client";
-  }
-  detect() {
-    return typeof window == "undefined" || typeof document == "undefined" ? "server" : "client";
-  }
-  handoff() {
-    this.handoffState === "pending" && (this.handoffState = "complete");
-  }
-  get isHandoffComplete() {
-    return this.handoffState === "complete";
-  }
-}
-let s$8 = new o$5();
-let l$5 = (e2, f2) => {
-  s$8.isServer ? useEffect(e2, f2) : useLayoutEffect(e2, f2);
-};
-function s$7(e2) {
+const e$3 = typeof window == "undefined" || typeof document == "undefined";
+let s$6 = e$3 ? useEffect : useLayoutEffect;
+function s$5(e2) {
   let r2 = useRef(e2);
-  return l$5(() => {
+  return s$6(() => {
     r2.current = e2;
   }, [e2]), r2;
 }
-let o$4 = function(t2) {
-  let e2 = s$7(t2);
-  return React__default.useCallback((...r2) => e2.current(...r2), [e2]);
-};
-function t$6(e2) {
+function t(e2) {
   typeof queueMicrotask == "function" ? queueMicrotask(e2) : Promise.resolve().then(e2).catch((o2) => setTimeout(() => {
     throw o2;
   }));
 }
-function o$3() {
-  let n2 = [], r2 = { addEventListener(e2, t2, s2, a2) {
-    return e2.addEventListener(t2, s2, a2), r2.add(() => e2.removeEventListener(t2, s2, a2));
+function m$2() {
+  let n2 = [], i2 = [], r2 = { enqueue(e2) {
+    i2.push(e2);
+  }, addEventListener(e2, t2, a2, o2) {
+    return e2.addEventListener(t2, a2, o2), r2.add(() => e2.removeEventListener(t2, a2, o2));
   }, requestAnimationFrame(...e2) {
     let t2 = requestAnimationFrame(...e2);
     return r2.add(() => cancelAnimationFrame(t2));
@@ -9621,134 +9451,130 @@ function o$3() {
     let t2 = setTimeout(...e2);
     return r2.add(() => clearTimeout(t2));
   }, microTask(...e2) {
-    let t2 = { current: true };
-    return t$6(() => {
-      t2.current && e2[0]();
+    let t$1 = { current: true };
+    return t(() => {
+      t$1.current && e2[0]();
     }), r2.add(() => {
-      t2.current = false;
-    });
-  }, style(e2, t2, s2) {
-    let a2 = e2.style.getPropertyValue(t2);
-    return Object.assign(e2.style, { [t2]: s2 }), this.add(() => {
-      Object.assign(e2.style, { [t2]: a2 });
+      t$1.current = false;
     });
-  }, group(e2) {
-    let t2 = o$3();
-    return e2(t2), this.add(() => t2.dispose());
   }, add(e2) {
     return n2.push(e2), () => {
       let t2 = n2.indexOf(e2);
-      if (t2 >= 0)
-        for (let s2 of n2.splice(t2, 1))
-          s2();
+      if (t2 >= 0) {
+        let [a2] = n2.splice(t2, 1);
+        a2();
+      }
     };
   }, dispose() {
     for (let e2 of n2.splice(0))
       e2();
+  }, async workQueue() {
+    for (let e2 of i2.splice(0))
+      await e2();
   } };
   return r2;
 }
-function p$3() {
-  let [e2] = useState(o$3);
+function p$2() {
+  let [e2] = useState(m$2);
   return useEffect(() => () => e2.dispose(), [e2]), e2;
 }
-function s$6() {
-  let r2 = typeof document == "undefined";
-  return "useSyncExternalStore" in React ? ((o2) => o2.useSyncExternalStore)(React)(() => () => {
-  }, () => false, () => !r2) : false;
-}
-function l$4() {
-  let r2 = s$6(), [e2, n2] = React.useState(s$8.isHandoffComplete);
-  return e2 && s$8.isHandoffComplete === false && n2(false), React.useEffect(() => {
-    e2 !== true && n2(true);
-  }, [e2]), React.useEffect(() => s$8.handoff(), []), r2 ? false : e2;
-}
-var o$2;
-let I$5 = (o$2 = React__default.useId) != null ? o$2 : function() {
-  let n2 = l$4(), [e2, u2] = React__default.useState(n2 ? () => s$8.nextId() : null);
-  return l$5(() => {
-    e2 === null && u2(s$8.nextId());
+let o$3 = function(t2) {
+  let e2 = s$5(t2);
+  return React.useCallback((...r2) => e2.current(...r2), [e2]);
+};
+let r$3 = { serverHandoffComplete: false };
+function a$2() {
+  let [e2, f2] = useState(r$3.serverHandoffComplete);
+  return useEffect(() => {
+    e2 !== true && f2(true);
+  }, [e2]), useEffect(() => {
+    r$3.serverHandoffComplete === false && (r$3.serverHandoffComplete = true);
+  }, []), e2;
+}
+var u$4;
+let l$3 = 0;
+function r$2() {
+  return ++l$3;
+}
+let I$2 = (u$4 = React.useId) != null ? u$4 : function() {
+  let n2 = a$2(), [e2, o2] = React.useState(n2 ? r$2 : null);
+  return s$6(() => {
+    e2 === null && o2(r$2());
   }, [e2]), e2 != null ? "" + e2 : void 0;
 };
-function u$5(r2, n2, ...a2) {
+function u$3(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
     return typeof e2 == "function" ? e2(...a2) : e2;
   }
   let t2 = new Error(`Tried to handle "${r2}" but there is no handler defined. Only defined handlers are: ${Object.keys(n2).map((e2) => `"${e2}"`).join(", ")}.`);
-  throw Error.captureStackTrace && Error.captureStackTrace(t2, u$5), t2;
+  throw Error.captureStackTrace && Error.captureStackTrace(t2, u$3), t2;
 }
-function o$1(r2) {
-  return s$8.isServer ? null : r2 instanceof Node ? r2.ownerDocument : r2 != null && r2.hasOwnProperty("current") && r2.current instanceof Node ? r2.current.ownerDocument : document;
+function e$2(r2) {
+  return e$3 ? null : r2 instanceof Node ? r2.ownerDocument : r2 != null && r2.hasOwnProperty("current") && r2.current instanceof Node ? r2.current.ownerDocument : document;
 }
-let c$4 = ["[contentEditable=true]", "[tabindex]", "a[href]", "area[href]", "button:not([disabled])", "iframe", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])"].map((e2) => `${e2}:not([tabindex='-1'])`).join(",");
-var M$2 = ((n2) => (n2[n2.First = 1] = "First", n2[n2.Previous = 2] = "Previous", n2[n2.Next = 4] = "Next", n2[n2.Last = 8] = "Last", n2[n2.WrapAround = 16] = "WrapAround", n2[n2.NoScroll = 32] = "NoScroll", n2))(M$2 || {}), N$2 = ((o2) => (o2[o2.Error = 0] = "Error", o2[o2.Overflow = 1] = "Overflow", o2[o2.Success = 2] = "Success", o2[o2.Underflow = 3] = "Underflow", o2))(N$2 || {}), F$2 = ((t2) => (t2[t2.Previous = -1] = "Previous", t2[t2.Next = 1] = "Next", t2))(F$2 || {});
-function f$4(e2 = document.body) {
-  return e2 == null ? [] : Array.from(e2.querySelectorAll(c$4)).sort((r2, t2) => Math.sign((r2.tabIndex || Number.MAX_SAFE_INTEGER) - (t2.tabIndex || Number.MAX_SAFE_INTEGER)));
+let f$2 = ["[contentEditable=true]", "[tabindex]", "a[href]", "area[href]", "button:not([disabled])", "iframe", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])"].map((e2) => `${e2}:not([tabindex='-1'])`).join(",");
+var L$1 = ((n2) => (n2[n2.First = 1] = "First", n2[n2.Previous = 2] = "Previous", n2[n2.Next = 4] = "Next", n2[n2.Last = 8] = "Last", n2[n2.WrapAround = 16] = "WrapAround", n2[n2.NoScroll = 32] = "NoScroll", n2))(L$1 || {}), N = ((o2) => (o2[o2.Error = 0] = "Error", o2[o2.Overflow = 1] = "Overflow", o2[o2.Success = 2] = "Success", o2[o2.Underflow = 3] = "Underflow", o2))(N || {}), T$2 = ((r2) => (r2[r2.Previous = -1] = "Previous", r2[r2.Next = 1] = "Next", r2))(T$2 || {});
+function E$1(e2 = document.body) {
+  return e2 == null ? [] : Array.from(e2.querySelectorAll(f$2)).sort((t2, r2) => Math.sign((t2.tabIndex || Number.MAX_SAFE_INTEGER) - (r2.tabIndex || Number.MAX_SAFE_INTEGER)));
 }
-var T$1 = ((t2) => (t2[t2.Strict = 0] = "Strict", t2[t2.Loose = 1] = "Loose", t2))(T$1 || {});
-function h$2(e2, r2 = 0) {
-  var t2;
-  return e2 === ((t2 = o$1(e2)) == null ? void 0 : t2.body) ? false : u$5(r2, { [0]() {
-    return e2.matches(c$4);
+var F$4 = ((r2) => (r2[r2.Strict = 0] = "Strict", r2[r2.Loose = 1] = "Loose", r2))(F$4 || {});
+function h$2(e2, t2 = 0) {
+  var r2;
+  return e2 === ((r2 = e$2(e2)) == null ? void 0 : r2.body) ? false : u$3(t2, { [0]() {
+    return e2.matches(f$2);
   }, [1]() {
     let l2 = e2;
     for (; l2 !== null; ) {
-      if (l2.matches(c$4))
+      if (l2.matches(f$2))
         return true;
       l2 = l2.parentElement;
     }
     return false;
   } });
 }
-var w$1 = ((t2) => (t2[t2.Keyboard = 0] = "Keyboard", t2[t2.Mouse = 1] = "Mouse", t2))(w$1 || {});
-typeof window != "undefined" && typeof document != "undefined" && (document.addEventListener("keydown", (e2) => {
-  e2.metaKey || e2.altKey || e2.ctrlKey || (document.documentElement.dataset.headlessuiFocusVisible = "");
-}, true), document.addEventListener("click", (e2) => {
-  e2.detail === 1 ? delete document.documentElement.dataset.headlessuiFocusVisible : e2.detail === 0 && (document.documentElement.dataset.headlessuiFocusVisible = "");
-}, true));
-function y$3(e2) {
+function S$2(e2) {
   e2 == null || e2.focus({ preventScroll: true });
 }
-let S$5 = ["textarea", "input"].join(",");
-function H(e2) {
-  var r2, t2;
-  return (t2 = (r2 = e2 == null ? void 0 : e2.matches) == null ? void 0 : r2.call(e2, S$5)) != null ? t2 : false;
+let H$1 = ["textarea", "input"].join(",");
+function w$1(e2) {
+  var t2, r2;
+  return (r2 = (t2 = e2 == null ? void 0 : e2.matches) == null ? void 0 : t2.call(e2, H$1)) != null ? r2 : false;
 }
-function I$4(e2, r2 = (t2) => t2) {
-  return e2.slice().sort((t2, l2) => {
-    let o2 = r2(t2), i2 = r2(l2);
+function A$3(e2, t2 = (r2) => r2) {
+  return e2.slice().sort((r2, l2) => {
+    let o2 = t2(r2), i2 = t2(l2);
     if (o2 === null || i2 === null)
       return 0;
     let n2 = o2.compareDocumentPosition(i2);
     return n2 & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n2 & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
   });
 }
-function O$1(e2, r2, { sorted: t2 = true, relativeTo: l2 = null, skipElements: o2 = [] } = {}) {
-  let i2 = Array.isArray(e2) ? e2.length > 0 ? e2[0].ownerDocument : document : e2.ownerDocument, n2 = Array.isArray(e2) ? t2 ? I$4(e2) : e2 : f$4(e2);
-  o2.length > 0 && n2.length > 1 && (n2 = n2.filter((s2) => !o2.includes(s2))), l2 = l2 != null ? l2 : i2.activeElement;
-  let E2 = (() => {
-    if (r2 & 5)
+function I$1(e2, t2, { sorted: r2 = true, relativeTo: l2 = null, skipElements: o2 = [] } = {}) {
+  let i2 = Array.isArray(e2) ? e2.length > 0 ? e2[0].ownerDocument : document : e2.ownerDocument, n2 = Array.isArray(e2) ? r2 ? A$3(e2) : e2 : E$1(e2);
+  o2.length > 0 && (n2 = n2.filter((s2) => !o2.includes(s2))), l2 = l2 != null ? l2 : i2.activeElement;
+  let d2 = (() => {
+    if (t2 & 5)
       return 1;
-    if (r2 & 10)
+    if (t2 & 10)
       return -1;
     throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
   })(), x2 = (() => {
-    if (r2 & 1)
+    if (t2 & 1)
       return 0;
-    if (r2 & 2)
+    if (t2 & 2)
       return Math.max(0, n2.indexOf(l2)) - 1;
-    if (r2 & 4)
+    if (t2 & 4)
       return Math.max(0, n2.indexOf(l2)) + 1;
-    if (r2 & 8)
+    if (t2 & 8)
       return n2.length - 1;
     throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
-  })(), p2 = r2 & 32 ? { preventScroll: true } : {}, d2 = 0, a2 = n2.length, u2;
+  })(), p2 = t2 & 32 ? { preventScroll: true } : {}, c = 0, a2 = n2.length, u2;
   do {
-    if (d2 >= a2 || d2 + a2 <= 0)
+    if (c >= a2 || c + a2 <= 0)
       return 0;
-    let s2 = x2 + d2;
-    if (r2 & 16)
+    let s2 = x2 + c;
+    if (t2 & 16)
       s2 = (s2 + a2) % a2;
     else {
       if (s2 < 0)
@@ -9756,21 +9582,12 @@ function O$1(e2, r2, { sorted: t2 = true, relativeTo: l2 = null, skipElements: o
       if (s2 >= a2)
         return 1;
     }
-    u2 = n2[s2], u2 == null || u2.focus(p2), d2 += E2;
+    u2 = n2[s2], u2 == null || u2.focus(p2), c += d2;
   } while (u2 !== i2.activeElement);
-  return r2 & 6 && H(u2) && u2.select(), 2;
-}
-function t$5() {
-  return /iPhone/gi.test(window.navigator.platform) || /Mac/gi.test(window.navigator.platform) && window.navigator.maxTouchPoints > 0;
-}
-function i$2() {
-  return /Android/gi.test(window.navigator.userAgent);
+  return t2 & 6 && w$1(u2) && u2.select(), u2.hasAttribute("tabindex") || u2.setAttribute("tabindex", "0"), 2;
 }
-function n$3() {
-  return t$5() || i$2();
-}
-function d$4(e2, r2, n2) {
-  let o2 = s$7(r2);
+function d$1(e2, r2, n2) {
+  let o2 = s$5(r2);
   useEffect(() => {
     function t2(u2) {
       o2.current(u2);
@@ -9778,201 +9595,139 @@ function d$4(e2, r2, n2) {
     return document.addEventListener(e2, t2, n2), () => document.removeEventListener(e2, t2, n2);
   }, [e2, n2]);
 }
-function s$5(e2, r2, n2) {
-  let o2 = s$7(r2);
-  useEffect(() => {
-    function t2(i2) {
-      o2.current(i2);
-    }
-    return window.addEventListener(e2, t2, n2), () => window.removeEventListener(e2, t2, n2);
-  }, [e2, n2]);
-}
-function y$2(s2, m2, a2 = true) {
+function L(m2, E2, c = true) {
   let i2 = useRef(false);
   useEffect(() => {
     requestAnimationFrame(() => {
-      i2.current = a2;
+      i2.current = c;
     });
-  }, [a2]);
-  function c2(e2, r2) {
+  }, [c]);
+  function f2(e2, o2) {
     if (!i2.current || e2.defaultPrevented)
       return;
-    let t2 = r2(e2);
-    if (t2 === null || !t2.getRootNode().contains(t2) || !t2.isConnected)
-      return;
-    let E2 = function u2(n2) {
-      return typeof n2 == "function" ? u2(n2()) : Array.isArray(n2) || n2 instanceof Set ? n2 : [n2];
-    }(s2);
-    for (let u2 of E2) {
-      if (u2 === null)
-        continue;
-      let n2 = u2 instanceof HTMLElement ? u2 : u2.current;
-      if (n2 != null && n2.contains(t2) || e2.composed && e2.composedPath().includes(n2))
-        return;
+    let l2 = function r2(t2) {
+      return typeof t2 == "function" ? r2(t2()) : Array.isArray(t2) || t2 instanceof Set ? t2 : [t2];
+    }(m2), n2 = o2(e2);
+    if (n2 !== null && !!n2.getRootNode().contains(n2)) {
+      for (let r2 of l2) {
+        if (r2 === null)
+          continue;
+        let t2 = r2 instanceof HTMLElement ? r2 : r2.current;
+        if (t2 != null && t2.contains(n2) || e2.composed && e2.composedPath().includes(t2))
+          return;
+      }
+      return !h$2(n2, F$4.Loose) && n2.tabIndex !== -1 && e2.preventDefault(), E2(e2, n2);
     }
-    return !h$2(t2, T$1.Loose) && t2.tabIndex !== -1 && e2.preventDefault(), m2(e2, t2);
   }
-  let o2 = useRef(null);
-  d$4("pointerdown", (e2) => {
-    var r2, t2;
-    i2.current && (o2.current = ((t2 = (r2 = e2.composedPath) == null ? void 0 : r2.call(e2)) == null ? void 0 : t2[0]) || e2.target);
-  }, true), d$4("mousedown", (e2) => {
-    var r2, t2;
-    i2.current && (o2.current = ((t2 = (r2 = e2.composedPath) == null ? void 0 : r2.call(e2)) == null ? void 0 : t2[0]) || e2.target);
-  }, true), d$4("click", (e2) => {
-    n$3() || o2.current && (c2(e2, () => o2.current), o2.current = null);
-  }, true), d$4("touchend", (e2) => c2(e2, () => e2.target instanceof HTMLElement ? e2.target : null), true), s$5("blur", (e2) => c2(e2, () => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null), true);
+  let u2 = useRef(null);
+  d$1("mousedown", (e2) => {
+    var o2, l2;
+    i2.current && (u2.current = ((l2 = (o2 = e2.composedPath) == null ? void 0 : o2.call(e2)) == null ? void 0 : l2[0]) || e2.target);
+  }, true), d$1("click", (e2) => {
+    !u2.current || (f2(e2, () => u2.current), u2.current = null);
+  }, true), d$1("blur", (e2) => f2(e2, () => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null), true);
 }
-function n$2(...e2) {
-  return useMemo(() => o$1(...e2), [...e2]);
+let u$2 = Symbol();
+function T$1(t2, n2 = true) {
+  return Object.assign(t2, { [u$2]: n2 });
 }
-let u$4 = Symbol();
-function T(t2, n2 = true) {
-  return Object.assign(t2, { [u$4]: n2 });
-}
-function y$1(...t2) {
+function y(...t2) {
   let n2 = useRef(t2);
   useEffect(() => {
     n2.current = t2;
   }, [t2]);
-  let c2 = o$4((e2) => {
+  let c = o$3((e2) => {
     for (let o2 of n2.current)
       o2 != null && (typeof o2 == "function" ? o2(e2) : o2.current = e2);
   });
-  return t2.every((e2) => e2 == null || (e2 == null ? void 0 : e2[u$4])) ? void 0 : c2;
-}
-function m$2(u2, t2) {
-  let e2 = useRef([]), r2 = o$4(u2);
-  useEffect(() => {
-    let o2 = [...e2.current];
-    for (let [n2, a2] of t2.entries())
-      if (e2.current[n2] !== a2) {
-        let l2 = r2(t2, o2);
-        return e2.current = t2, l2;
-      }
-  }, [r2, ...t2]);
-}
-function t$4(...r2) {
-  return Array.from(new Set(r2.flatMap((n2) => typeof n2 == "string" ? n2.split(" ") : []))).filter(Boolean).join(" ");
-}
-var O = ((n2) => (n2[n2.None = 0] = "None", n2[n2.RenderStrategy = 1] = "RenderStrategy", n2[n2.Static = 2] = "Static", n2))(O || {}), v$1 = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(v$1 || {});
-function C({ ourProps: r2, theirProps: t2, slot: e2, defaultTag: n2, features: o2, visible: a2 = true, name: f2, mergeRefs: l2 }) {
-  l2 = l2 != null ? l2 : k;
-  let s2 = R(t2, r2);
-  if (a2)
-    return m$1(s2, e2, n2, f2, l2);
-  let y2 = o2 != null ? o2 : 0;
-  if (y2 & 2) {
-    let { static: u2 = false, ...d2 } = s2;
-    if (u2)
-      return m$1(d2, e2, n2, f2, l2);
-  }
-  if (y2 & 1) {
-    let { unmount: u2 = true, ...d2 } = s2;
-    return u$5(u2 ? 0 : 1, { [0]() {
+  return t2.every((e2) => e2 == null || (e2 == null ? void 0 : e2[u$2])) ? void 0 : c;
+}
+var S$1 = ((a2) => (a2[a2.None = 0] = "None", a2[a2.RenderStrategy = 1] = "RenderStrategy", a2[a2.Static = 2] = "Static", a2))(S$1 || {}), j$1 = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(j$1 || {});
+function $$1({ ourProps: r2, theirProps: t2, slot: e2, defaultTag: a2, features: o2, visible: n2 = true, name: l2 }) {
+  let s2 = T(t2, r2);
+  if (n2)
+    return p$1(s2, e2, a2, l2);
+  let u2 = o2 != null ? o2 : 0;
+  if (u2 & 2) {
+    let { static: i2 = false, ...d2 } = s2;
+    if (i2)
+      return p$1(d2, e2, a2, l2);
+  }
+  if (u2 & 1) {
+    let { unmount: i2 = true, ...d2 } = s2;
+    return u$3(i2 ? 0 : 1, { [0]() {
       return null;
     }, [1]() {
-      return m$1({ ...d2, hidden: true, style: { display: "none" } }, e2, n2, f2, l2);
+      return p$1({ ...d2, hidden: true, style: { display: "none" } }, e2, a2, l2);
     } });
   }
-  return m$1(s2, e2, n2, f2, l2);
+  return p$1(s2, e2, a2, l2);
 }
-function m$1(r2, t2 = {}, e2, n2, o2) {
-  let { as: a2 = e2, children: f2, refName: l2 = "ref", ...s2 } = F$1(r2, ["unmount", "static"]), y2 = r2.ref !== void 0 ? { [l2]: r2.ref } : {}, u2 = typeof f2 == "function" ? f2(t2) : f2;
-  "className" in s2 && s2.className && typeof s2.className == "function" && (s2.className = s2.className(t2));
+function p$1(r2, t2 = {}, e2, a2) {
+  let { as: o2 = e2, children: n2, refName: l2 = "ref", ...s2 } = m$1(r2, ["unmount", "static"]), u2 = r2.ref !== void 0 ? { [l2]: r2.ref } : {}, i2 = typeof n2 == "function" ? n2(t2) : n2;
+  s2.className && typeof s2.className == "function" && (s2.className = s2.className(t2));
   let d2 = {};
   if (t2) {
-    let i2 = false, c2 = [];
-    for (let [T2, p2] of Object.entries(t2))
-      typeof p2 == "boolean" && (i2 = true), p2 === true && c2.push(T2);
-    i2 && (d2["data-headlessui-state"] = c2.join(" "));
-  }
-  if (a2 === Fragment$1 && Object.keys(x$1(s2)).length > 0) {
-    if (!isValidElement(u2) || Array.isArray(u2) && u2.length > 1)
-      throw new Error(['Passing props on "Fragment"!', "", `The current component <${n2} /> is rendering a "Fragment".`, "However we need to passthrough the following props:", Object.keys(s2).map((p2) => `  - ${p2}`).join(`
-`), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".', "Render a single element as the child so that we can forward the props onto that element."].map((p2) => `  - ${p2}`).join(`
+    let f2 = false, y2 = [];
+    for (let [h2, g] of Object.entries(t2))
+      typeof g == "boolean" && (f2 = true), g === true && y2.push(h2);
+    f2 && (d2["data-headlessui-state"] = y2.join(" "));
+  }
+  if (o2 === Fragment$1 && Object.keys(F$3(s2)).length > 0) {
+    if (!isValidElement(i2) || Array.isArray(i2) && i2.length > 1)
+      throw new Error(['Passing props on "Fragment"!', "", `The current component <${a2} /> is rendering a "Fragment".`, "However we need to passthrough the following props:", Object.keys(s2).map((f2) => `  - ${f2}`).join(`
+`), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".', "Render a single element as the child so that we can forward the props onto that element."].map((f2) => `  - ${f2}`).join(`
 `)].join(`
 `));
-    let i2 = u2.props, c2 = typeof (i2 == null ? void 0 : i2.className) == "function" ? (...p2) => t$4(i2 == null ? void 0 : i2.className(...p2), s2.className) : t$4(i2 == null ? void 0 : i2.className, s2.className), T2 = c2 ? { className: c2 } : {};
-    return cloneElement(u2, Object.assign({}, R(u2.props, x$1(F$1(s2, ["ref"]))), d2, y2, { ref: o2(u2.ref, y2.ref) }, T2));
+    return cloneElement(i2, Object.assign({}, T(i2.props, F$3(m$1(s2, ["ref"]))), d2, u2, w(i2.ref, u2.ref)));
   }
-  return createElement(a2, Object.assign({}, F$1(s2, ["ref"]), a2 !== Fragment$1 && y2, a2 !== Fragment$1 && d2), u2);
+  return createElement(o2, Object.assign({}, m$1(s2, ["ref"]), o2 !== Fragment$1 && u2, o2 !== Fragment$1 && d2), i2);
 }
-function k(...r2) {
-  return r2.every((t2) => t2 == null) ? void 0 : (t2) => {
+function w(...r2) {
+  return { ref: r2.every((t2) => t2 == null) ? void 0 : (t2) => {
     for (let e2 of r2)
       e2 != null && (typeof e2 == "function" ? e2(t2) : e2.current = t2);
-  };
+  } };
 }
-function R(...r2) {
+function T(...r2) {
   if (r2.length === 0)
     return {};
   if (r2.length === 1)
     return r2[0];
   let t2 = {}, e2 = {};
   for (let o2 of r2)
-    for (let a2 in o2)
-      a2.startsWith("on") && typeof o2[a2] == "function" ? (e2[a2] != null || (e2[a2] = []), e2[a2].push(o2[a2])) : t2[a2] = o2[a2];
+    for (let n2 in o2)
+      n2.startsWith("on") && typeof o2[n2] == "function" ? (e2[n2] != null || (e2[n2] = []), e2[n2].push(o2[n2])) : t2[n2] = o2[n2];
   if (t2.disabled || t2["aria-disabled"])
     return Object.assign(t2, Object.fromEntries(Object.keys(e2).map((o2) => [o2, void 0])));
   for (let o2 in e2)
-    Object.assign(t2, { [o2](a2, ...f2) {
-      let l2 = e2[o2];
-      for (let s2 of l2) {
-        if ((a2 instanceof Event || (a2 == null ? void 0 : a2.nativeEvent) instanceof Event) && a2.defaultPrevented)
+    Object.assign(t2, { [o2](n2, ...l2) {
+      let s2 = e2[o2];
+      for (let u2 of s2) {
+        if ((n2 instanceof Event || (n2 == null ? void 0 : n2.nativeEvent) instanceof Event) && n2.defaultPrevented)
           return;
-        s2(a2, ...f2);
+        u2(n2, ...l2);
       }
     } });
   return t2;
 }
-function U$2(r2) {
+function C$1(r2) {
   var t2;
   return Object.assign(forwardRef(r2), { displayName: (t2 = r2.displayName) != null ? t2 : r2.name });
 }
-function x$1(r2) {
+function F$3(r2) {
   let t2 = Object.assign({}, r2);
   for (let e2 in t2)
     t2[e2] === void 0 && delete t2[e2];
   return t2;
 }
-function F$1(r2, t2 = []) {
+function m$1(r2, t2 = []) {
   let e2 = Object.assign({}, r2);
-  for (let n2 of t2)
-    n2 in e2 && delete e2[n2];
+  for (let a2 of t2)
+    a2 in e2 && delete e2[a2];
   return e2;
 }
-let p$2 = "div";
-var s$4 = ((e2) => (e2[e2.None = 1] = "None", e2[e2.Focusable = 2] = "Focusable", e2[e2.Hidden = 4] = "Hidden", e2))(s$4 || {});
-function l$3(d2, o2) {
-  var n2;
-  let { features: t2 = 1, ...e2 } = d2, r2 = { ref: o2, "aria-hidden": (t2 & 2) === 2 ? true : (n2 = e2["aria-hidden"]) != null ? n2 : void 0, hidden: (t2 & 4) === 4 ? true : void 0, style: { position: "fixed", top: 1, left: 1, width: 1, height: 0, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0", ...(t2 & 4) === 4 && (t2 & 2) !== 2 && { display: "none" } } };
-  return C({ ourProps: r2, theirProps: e2, slot: {}, defaultTag: p$2, name: "Hidden" });
-}
-let u$3 = U$2(l$3);
-let n$1 = createContext(null);
-n$1.displayName = "OpenClosedContext";
-var d$3 = ((e2) => (e2[e2.Open = 1] = "Open", e2[e2.Closed = 2] = "Closed", e2[e2.Closing = 4] = "Closing", e2[e2.Opening = 8] = "Opening", e2))(d$3 || {});
-function u$2() {
-  return useContext(n$1);
-}
-function s$3({ value: o2, children: r2 }) {
-  return React__default.createElement(n$1.Provider, { value: o2 }, r2);
-}
-function t$3(n2) {
-  function e2() {
-    document.readyState !== "loading" && (n2(), document.removeEventListener("DOMContentLoaded", e2));
-  }
-  typeof window != "undefined" && typeof document != "undefined" && (document.addEventListener("DOMContentLoaded", e2), e2());
-}
-let t$2 = [];
-t$3(() => {
-  function e2(n2) {
-    n2.target instanceof HTMLElement && n2.target !== document.body && t$2[0] !== n2.target && (t$2.unshift(n2.target), t$2 = t$2.filter((r2) => r2 != null && r2.isConnected), t$2.splice(10));
-  }
-  window.addEventListener("click", e2, { capture: true }), window.addEventListener("mousedown", e2, { capture: true }), window.addEventListener("focus", e2, { capture: true }), document.body.addEventListener("click", e2, { capture: true }), document.body.addEventListener("mousedown", e2, { capture: true }), document.body.addEventListener("focus", e2, { capture: true });
-});
-function r$2(n2) {
+function r$1(n2) {
   let e2 = n2.parentElement, l2 = null;
   for (; e2 && !(e2 instanceof HTMLFieldSetElement); )
     e2 instanceof HTMLLegendElement && (l2 = e2), e2 = e2.parentElement;
@@ -9990,383 +9745,265 @@ function i$1(n2) {
   }
   return true;
 }
-var o = ((r2) => (r2.Space = " ", r2.Enter = "Enter", r2.Escape = "Escape", r2.Backspace = "Backspace", r2.Delete = "Delete", r2.ArrowLeft = "ArrowLeft", r2.ArrowUp = "ArrowUp", r2.ArrowRight = "ArrowRight", r2.ArrowDown = "ArrowDown", r2.Home = "Home", r2.End = "End", r2.PageUp = "PageUp", r2.PageDown = "PageDown", r2.Tab = "Tab", r2))(o || {});
-function E(n2, e2, a2, t2) {
-  let i2 = s$7(a2);
+let a$1 = "div";
+var s$4 = ((e2) => (e2[e2.None = 1] = "None", e2[e2.Focusable = 2] = "Focusable", e2[e2.Hidden = 4] = "Hidden", e2))(s$4 || {});
+let h$1 = C$1(function(t2, o2) {
+  let { features: e2 = 1, ...r2 } = t2, d2 = { ref: o2, "aria-hidden": (e2 & 2) === 2 ? true : void 0, style: { position: "fixed", top: 1, left: 1, width: 1, height: 0, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0", ...(e2 & 4) === 4 && (e2 & 2) !== 2 && { display: "none" } } };
+  return $$1({ ourProps: d2, theirProps: r2, slot: {}, defaultTag: a$1, name: "Hidden" });
+});
+let o$2 = createContext(null);
+o$2.displayName = "OpenClosedContext";
+var p = ((e2) => (e2[e2.Open = 0] = "Open", e2[e2.Closed = 1] = "Closed", e2))(p || {});
+function s$3() {
+  return useContext(o$2);
+}
+function C({ value: t2, children: n2 }) {
+  return React.createElement(o$2.Provider, { value: t2 }, n2);
+}
+var o$1 = ((r2) => (r2.Space = " ", r2.Enter = "Enter", r2.Escape = "Escape", r2.Backspace = "Backspace", r2.Delete = "Delete", r2.ArrowLeft = "ArrowLeft", r2.ArrowUp = "ArrowUp", r2.ArrowRight = "ArrowRight", r2.ArrowDown = "ArrowDown", r2.Home = "Home", r2.End = "End", r2.PageUp = "PageUp", r2.PageDown = "PageDown", r2.Tab = "Tab", r2))(o$1 || {});
+function m(u2, t2) {
+  let e2 = useRef([]), r2 = o$3(u2);
   useEffect(() => {
-    n2 = n2 != null ? n2 : window;
-    function r2(o2) {
-      i2.current(o2);
+    let o2 = [...e2.current];
+    for (let [n2, a2] of t2.entries())
+      if (e2.current[n2] !== a2) {
+        let l2 = r2(t2, o2);
+        return e2.current = t2, l2;
+      }
+  }, [r2, ...t2]);
+}
+function s$2(e2, r2, n2) {
+  let o2 = s$5(r2);
+  useEffect(() => {
+    function t2(i2) {
+      o2.current(i2);
     }
-    return n2.addEventListener(e2, r2, t2), () => n2.removeEventListener(e2, r2, t2);
-  }, [n2, e2, t2]);
+    return window.addEventListener(e2, t2, n2), () => window.removeEventListener(e2, t2, n2);
+  }, [e2, n2]);
 }
-function f$3() {
+var s$1 = ((r2) => (r2[r2.Forwards = 0] = "Forwards", r2[r2.Backwards = 1] = "Backwards", r2))(s$1 || {});
+function n$1() {
+  let e2 = useRef(0);
+  return s$2("keydown", (o2) => {
+    o2.key === "Tab" && (e2.current = o2.shiftKey ? 1 : 0);
+  }, true), e2;
+}
+function f$1() {
   let e2 = useRef(false);
-  return l$5(() => (e2.current = true, () => {
+  return s$6(() => (e2.current = true, () => {
     e2.current = false;
   }), []), e2;
 }
-function c$3(t2) {
-  let r2 = o$4(t2), e2 = useRef(false);
-  useEffect(() => (e2.current = false, () => {
-    e2.current = true, t$6(() => {
-      e2.current && r2();
-    });
-  }), [r2]);
-}
-var s$2 = ((r2) => (r2[r2.Forwards = 0] = "Forwards", r2[r2.Backwards = 1] = "Backwards", r2))(s$2 || {});
-function n() {
-  let e2 = useRef(0);
-  return s$5("keydown", (o2) => {
-    o2.key === "Tab" && (e2.current = o2.shiftKey ? 1 : 0);
-  }, true), e2;
+function n(...e2) {
+  return useMemo(() => e$2(...e2), [...e2]);
 }
-function P(t2) {
-  if (!t2)
-    return /* @__PURE__ */ new Set();
-  if (typeof t2 == "function")
-    return new Set(t2());
-  let n2 = /* @__PURE__ */ new Set();
-  for (let e2 of t2.current)
-    e2.current instanceof HTMLElement && n2.add(e2.current);
-  return n2;
+function E(n2, e2, a2, t2) {
+  let i2 = s$5(a2);
+  useEffect(() => {
+    n2 = n2 != null ? n2 : window;
+    function r2(o2) {
+      i2.current(o2);
+    }
+    return n2.addEventListener(e2, r2, t2), () => n2.removeEventListener(e2, r2, t2);
+  }, [n2, e2, t2]);
 }
-let X = "div";
-var _$1 = ((r2) => (r2[r2.None = 1] = "None", r2[r2.InitialFocus = 2] = "InitialFocus", r2[r2.TabLock = 4] = "TabLock", r2[r2.FocusLock = 8] = "FocusLock", r2[r2.RestoreFocus = 16] = "RestoreFocus", r2[r2.All = 30] = "All", r2))(_$1 || {});
-function z(t2, n$12) {
-  let e2 = useRef(null), o2 = y$1(e2, n$12), { initialFocus: l2, containers: c2, features: r2 = 30, ...s2 } = t2;
-  l$4() || (r2 = 1);
-  let i2 = n$2(e2);
-  Y({ ownerDocument: i2 }, Boolean(r2 & 16));
-  let u2 = Z({ ownerDocument: i2, container: e2, initialFocus: l2 }, Boolean(r2 & 2));
-  $({ ownerDocument: i2, container: e2, containers: c2, previousActiveElement: u2 }, Boolean(r2 & 8));
-  let y2 = n(), R2 = o$4((a2) => {
-    let m2 = e2.current;
-    if (!m2)
+let z = "div";
+var A$2 = ((t2) => (t2[t2.None = 1] = "None", t2[t2.InitialFocus = 2] = "InitialFocus", t2[t2.TabLock = 4] = "TabLock", t2[t2.FocusLock = 8] = "FocusLock", t2[t2.RestoreFocus = 16] = "RestoreFocus", t2[t2.All = 30] = "All", t2))(A$2 || {});
+let de = Object.assign(C$1(function(u2, e2) {
+  let l2 = useRef(null), a2 = y(l2, e2), { initialFocus: m2, containers: t2, features: n$22 = 30, ...E2 } = u2;
+  a$2() || (n$22 = 1);
+  let s2 = n(l2);
+  J$1({ ownerDocument: s2 }, Boolean(n$22 & 16));
+  let S2 = Q({ ownerDocument: s2, container: l2, initialFocus: m2 }, Boolean(n$22 & 2));
+  X({ ownerDocument: s2, container: l2, containers: t2, previousActiveElement: S2 }, Boolean(n$22 & 8));
+  let H2 = n$1(), R = o$3((o2) => {
+    let c = l2.current;
+    if (!c)
       return;
-    ((B) => B())(() => {
-      u$5(y2.current, { [s$2.Forwards]: () => {
-        O$1(m2, M$2.First, { skipElements: [a2.relatedTarget] });
-      }, [s$2.Backwards]: () => {
-        O$1(m2, M$2.Last, { skipElements: [a2.relatedTarget] });
-      } });
+    ((_24) => _24())(() => {
+      u$3(H2.current, { [s$1.Forwards]: () => I$1(c, L$1.First, { skipElements: [o2.relatedTarget] }), [s$1.Backwards]: () => I$1(c, L$1.Last, { skipElements: [o2.relatedTarget] }) });
     });
-  }), h2 = p$3(), H2 = useRef(false), j2 = { ref: o2, onKeyDown(a2) {
-    a2.key == "Tab" && (H2.current = true, h2.requestAnimationFrame(() => {
-      H2.current = false;
+  }), B = p$2(), L2 = useRef(false), P2 = { ref: a2, onKeyDown(o2) {
+    o2.key == "Tab" && (L2.current = true, B.requestAnimationFrame(() => {
+      L2.current = false;
     }));
-  }, onBlur(a2) {
-    let m2 = P(c2);
-    e2.current instanceof HTMLElement && m2.add(e2.current);
-    let T2 = a2.relatedTarget;
-    T2 instanceof HTMLElement && T2.dataset.headlessuiFocusGuard !== "true" && (S$4(m2, T2) || (H2.current ? O$1(e2.current, u$5(y2.current, { [s$2.Forwards]: () => M$2.Next, [s$2.Backwards]: () => M$2.Previous }) | M$2.WrapAround, { relativeTo: a2.target }) : a2.target instanceof HTMLElement && y$3(a2.target)));
+  }, onBlur(o2) {
+    let c = new Set(t2 == null ? void 0 : t2.current);
+    c.add(l2);
+    let p2 = o2.relatedTarget;
+    !p2 || p2.dataset.headlessuiFocusGuard !== "true" && (h(c, p2) || (L2.current ? I$1(l2.current, u$3(H2.current, { [s$1.Forwards]: () => L$1.Next, [s$1.Backwards]: () => L$1.Previous }) | L$1.WrapAround, { relativeTo: o2.target }) : o2.target instanceof HTMLElement && S$2(o2.target)));
   } };
-  return React__default.createElement(React__default.Fragment, null, Boolean(r2 & 4) && React__default.createElement(u$3, { as: "button", type: "button", "data-headlessui-focus-guard": true, onFocus: R2, features: s$4.Focusable }), C({ ourProps: j2, theirProps: s2, defaultTag: X, name: "FocusTrap" }), Boolean(r2 & 4) && React__default.createElement(u$3, { as: "button", type: "button", "data-headlessui-focus-guard": true, onFocus: R2, features: s$4.Focusable }));
-}
-let D$2 = U$2(z), de = Object.assign(D$2, { features: _$1 });
-function Q(t2 = true) {
-  let n2 = useRef(t$2.slice());
-  return m$2(([e2], [o2]) => {
-    o2 === true && e2 === false && t$6(() => {
-      n2.current.splice(0);
-    }), o2 === false && e2 === true && (n2.current = t$2.slice());
-  }, [t2, t$2, n2]), o$4(() => {
-    var e2;
-    return (e2 = n2.current.find((o2) => o2 != null && o2.isConnected)) != null ? e2 : null;
-  });
-}
-function Y({ ownerDocument: t2 }, n2) {
-  let e2 = Q(n2);
-  m$2(() => {
-    n2 || (t2 == null ? void 0 : t2.activeElement) === (t2 == null ? void 0 : t2.body) && y$3(e2());
-  }, [n2]), c$3(() => {
-    n2 && y$3(e2());
-  });
+  return React.createElement(React.Fragment, null, Boolean(n$22 & 4) && React.createElement(h$1, { as: "button", type: "button", "data-headlessui-focus-guard": true, onFocus: R, features: s$4.Focusable }), $$1({ ourProps: P2, theirProps: E2, defaultTag: z, name: "FocusTrap" }), Boolean(n$22 & 4) && React.createElement(h$1, { as: "button", type: "button", "data-headlessui-focus-guard": true, onFocus: R, features: s$4.Focusable }));
+}), { features: A$2 });
+function J$1({ ownerDocument: r2 }, u2) {
+  let e2 = useRef(null);
+  E(r2 == null ? void 0 : r2.defaultView, "focusout", (a2) => {
+    !u2 || e2.current || (e2.current = a2.target);
+  }, true), m(() => {
+    u2 || ((r2 == null ? void 0 : r2.activeElement) === (r2 == null ? void 0 : r2.body) && S$2(e2.current), e2.current = null);
+  }, [u2]);
+  let l2 = useRef(false);
+  useEffect(() => (l2.current = false, () => {
+    l2.current = true, t(() => {
+      !l2.current || (S$2(e2.current), e2.current = null);
+    });
+  }), []);
 }
-function Z({ ownerDocument: t2, container: n2, initialFocus: e2 }, o2) {
-  let l2 = useRef(null), c2 = f$3();
-  return m$2(() => {
-    if (!o2)
+function Q({ ownerDocument: r2, container: u2, initialFocus: e2 }, l2) {
+  let a2 = useRef(null), m$12 = f$1();
+  return m(() => {
+    if (!l2)
       return;
-    let r2 = n2.current;
-    r2 && t$6(() => {
-      if (!c2.current)
+    let t$1 = u2.current;
+    !t$1 || t(() => {
+      if (!m$12.current)
         return;
-      let s2 = t2 == null ? void 0 : t2.activeElement;
+      let n2 = r2 == null ? void 0 : r2.activeElement;
       if (e2 != null && e2.current) {
-        if ((e2 == null ? void 0 : e2.current) === s2) {
-          l2.current = s2;
+        if ((e2 == null ? void 0 : e2.current) === n2) {
+          a2.current = n2;
           return;
         }
-      } else if (r2.contains(s2)) {
-        l2.current = s2;
+      } else if (t$1.contains(n2)) {
+        a2.current = n2;
         return;
       }
-      e2 != null && e2.current ? y$3(e2.current) : O$1(r2, M$2.First) === N$2.Error && console.warn("There are no focusable elements inside the <FocusTrap />"), l2.current = t2 == null ? void 0 : t2.activeElement;
+      e2 != null && e2.current ? S$2(e2.current) : I$1(t$1, L$1.First) === N.Error && console.warn("There are no focusable elements inside the <FocusTrap />"), a2.current = r2 == null ? void 0 : r2.activeElement;
     });
-  }, [o2]), l2;
+  }, [l2]), a2;
 }
-function $({ ownerDocument: t2, container: n2, containers: e2, previousActiveElement: o2 }, l2) {
-  let c2 = f$3();
-  E(t2 == null ? void 0 : t2.defaultView, "focus", (r2) => {
-    if (!l2 || !c2.current)
+function X({ ownerDocument: r2, container: u2, containers: e2, previousActiveElement: l2 }, a2) {
+  let m2 = f$1();
+  E(r2 == null ? void 0 : r2.defaultView, "focus", (t2) => {
+    if (!a2 || !m2.current)
       return;
-    let s2 = P(e2);
-    n2.current instanceof HTMLElement && s2.add(n2.current);
-    let i2 = o2.current;
-    if (!i2)
+    let n2 = new Set(e2 == null ? void 0 : e2.current);
+    n2.add(u2);
+    let E2 = l2.current;
+    if (!E2)
       return;
-    let u2 = r2.target;
-    u2 && u2 instanceof HTMLElement ? S$4(s2, u2) ? (o2.current = u2, y$3(u2)) : (r2.preventDefault(), r2.stopPropagation(), y$3(i2)) : y$3(o2.current);
+    let s2 = t2.target;
+    s2 && s2 instanceof HTMLElement ? h(n2, s2) ? (l2.current = s2, S$2(s2)) : (t2.preventDefault(), t2.stopPropagation(), S$2(E2)) : S$2(l2.current);
   }, true);
 }
-function S$4(t2, n2) {
-  for (let e2 of t2)
-    if (e2.contains(n2))
+function h(r2, u2) {
+  var e2;
+  for (let l2 of r2)
+    if ((e2 = l2.current) != null && e2.contains(u2))
       return true;
   return false;
 }
-let e = createContext(false);
-function a$4() {
-  return useContext(e);
+let i = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Map();
+function u$1(t2) {
+  t2.setAttribute("aria-hidden", "true"), t2.inert = true;
+}
+function l$2(t2) {
+  let n2 = r.get(t2);
+  !n2 || (n2["aria-hidden"] === null ? t2.removeAttribute("aria-hidden") : t2.setAttribute("aria-hidden", n2["aria-hidden"]), t2.inert = n2.inert);
+}
+function M$3(t2, n2 = true) {
+  s$6(() => {
+    if (!n2 || !t2.current)
+      return;
+    let o2 = t2.current, a2 = e$2(o2);
+    if (!!a2) {
+      i.add(o2);
+      for (let e2 of r.keys())
+        e2.contains(o2) && (l$2(e2), r.delete(e2));
+      return a2.querySelectorAll("body > *").forEach((e2) => {
+        if (e2 instanceof HTMLElement) {
+          for (let f2 of i)
+            if (e2.contains(f2))
+              return;
+          i.size === 1 && (r.set(e2, { "aria-hidden": e2.getAttribute("aria-hidden"), inert: e2.inert }), u$1(e2));
+        }
+      }), () => {
+        if (i.delete(o2), i.size > 0)
+          a2.querySelectorAll("body > *").forEach((e2) => {
+            if (e2 instanceof HTMLElement && !r.has(e2)) {
+              for (let f2 of i)
+                if (e2.contains(f2))
+                  return;
+              r.set(e2, { "aria-hidden": e2.getAttribute("aria-hidden"), inert: e2.inert }), u$1(e2);
+            }
+          });
+        else
+          for (let e2 of r.keys())
+            l$2(e2), r.delete(e2);
+      };
+    }
+  }, [n2]);
+}
+let e$1 = createContext(false);
+function l$1() {
+  return useContext(e$1);
 }
-function l$2(o2) {
-  return React__default.createElement(e.Provider, { value: o2.force }, o2.children);
+function P$1(o2) {
+  return React.createElement(e$1.Provider, { value: o2.force }, o2.children);
 }
-function F(p2) {
-  let n2 = a$4(), l2 = useContext(_23), e2 = n$2(p2), [a2, o2] = useState(() => {
-    if (!n2 && l2 !== null || s$8.isServer)
+function x$1(i2) {
+  let u2 = l$1(), o2 = useContext(A$1), e2 = n(i2), [r2, f2] = useState(() => {
+    if (!u2 && o2 !== null || e$3)
       return null;
-    let t2 = e2 == null ? void 0 : e2.getElementById("headlessui-portal-root");
-    if (t2)
-      return t2;
+    let n2 = e2 == null ? void 0 : e2.getElementById("headlessui-portal-root");
+    if (n2)
+      return n2;
     if (e2 === null)
       return null;
-    let r2 = e2.createElement("div");
-    return r2.setAttribute("id", "headlessui-portal-root"), e2.body.appendChild(r2);
+    let t2 = e2.createElement("div");
+    return t2.setAttribute("id", "headlessui-portal-root"), e2.body.appendChild(t2);
   });
   return useEffect(() => {
-    a2 !== null && (e2 != null && e2.body.contains(a2) || e2 == null || e2.body.appendChild(a2));
-  }, [a2, e2]), useEffect(() => {
-    n2 || l2 !== null && o2(l2.current);
-  }, [l2, o2, n2]), a2;
-}
-let U$1 = Fragment$1;
-function N$1(p2, n2) {
-  let l2 = p2, e2 = useRef(null), a2 = y$1(T((u2) => {
-    e2.current = u2;
-  }), n2), o2 = n$2(e2), t2 = F(e2), [r2] = useState(() => {
-    var u2;
-    return s$8.isServer ? null : (u2 = o2 == null ? void 0 : o2.createElement("div")) != null ? u2 : null;
-  }), i2 = useContext(f$2), v2 = l$4();
-  return l$5(() => {
-    !t2 || !r2 || t2.contains(r2) || (r2.setAttribute("data-headlessui-portal", ""), t2.appendChild(r2));
-  }, [t2, r2]), l$5(() => {
-    if (r2 && i2)
-      return i2.register(r2);
-  }, [i2, r2]), c$3(() => {
-    var u2;
-    !t2 || !r2 || (r2 instanceof Node && t2.contains(r2) && t2.removeChild(r2), t2.childNodes.length <= 0 && ((u2 = t2.parentElement) == null || u2.removeChild(t2)));
-  }), v2 ? !t2 || !r2 ? null : createPortal(C({ ourProps: { ref: a2 }, theirProps: l2, defaultTag: U$1, name: "Portal" }), r2) : null;
-}
-let S$3 = Fragment$1, _23 = createContext(null);
-function j(p2, n2) {
-  let { target: l2, ...e2 } = p2, o2 = { ref: y$1(n2) };
-  return React__default.createElement(_23.Provider, { value: l2 }, C({ ourProps: o2, theirProps: e2, defaultTag: S$3, name: "Popover.Group" }));
-}
-let f$2 = createContext(null);
-function ee() {
-  let p2 = useContext(f$2), n2 = useRef([]), l2 = o$4((o2) => (n2.current.push(o2), p2 && p2.register(o2), () => e2(o2))), e2 = o$4((o2) => {
-    let t2 = n2.current.indexOf(o2);
-    t2 !== -1 && n2.current.splice(t2, 1), p2 && p2.unregister(o2);
-  }), a2 = useMemo(() => ({ register: l2, unregister: e2, portals: n2 }), [l2, e2, n2]);
-  return [n2, useMemo(() => function({ children: t2 }) {
-    return React__default.createElement(f$2.Provider, { value: a2 }, t2);
-  }, [a2])];
-}
-let D$1 = U$2(N$1), I$3 = U$2(j), te = Object.assign(D$1, { Group: I$3 });
-function i(e2, t2) {
-  return e2 === t2 && (e2 !== 0 || 1 / e2 === 1 / t2) || e2 !== e2 && t2 !== t2;
-}
-const d$2 = typeof Object.is == "function" ? Object.is : i, { useState: u$1, useEffect: h$1, useLayoutEffect: f$1, useDebugValue: p$1 } = React;
-function y(e2, t2, c2) {
-  const a2 = t2(), [{ inst: n2 }, o2] = u$1({ inst: { value: a2, getSnapshot: t2 } });
-  return f$1(() => {
-    n2.value = a2, n2.getSnapshot = t2, r$1(n2) && o2({ inst: n2 });
-  }, [e2, a2, t2]), h$1(() => (r$1(n2) && o2({ inst: n2 }), e2(() => {
-    r$1(n2) && o2({ inst: n2 });
-  })), [e2]), p$1(a2), a2;
-}
-function r$1(e2) {
-  const t2 = e2.getSnapshot, c2 = e2.value;
-  try {
-    const a2 = t2();
-    return !d$2(c2, a2);
-  } catch {
-    return true;
+    r2 !== null && (e2 != null && e2.body.contains(r2) || e2 == null || e2.body.appendChild(r2));
+  }, [r2, e2]), useEffect(() => {
+    u2 || o2 !== null && f2(o2.current);
+  }, [o2, f2, u2]), r2;
+}
+let _23 = Fragment$1, U = C$1(function(u2, o2) {
+  let e2 = u2, r2 = useRef(null), f2 = y(T$1((a2) => {
+    r2.current = a2;
+  }), o2), n$12 = n(r2), t$1 = x$1(r2), [l2] = useState(() => {
+    var a2;
+    return e$3 ? null : (a2 = n$12 == null ? void 0 : n$12.createElement("div")) != null ? a2 : null;
+  }), b = a$2(), p2 = useRef(false);
+  return s$6(() => {
+    if (p2.current = false, !(!t$1 || !l2))
+      return t$1.contains(l2) || (l2.setAttribute("data-headlessui-portal", ""), t$1.appendChild(l2)), () => {
+        p2.current = true, t(() => {
+          var a2;
+          !p2.current || !t$1 || !l2 || (t$1.removeChild(l2), t$1.childNodes.length <= 0 && ((a2 = t$1.parentElement) == null || a2.removeChild(t$1)));
+        });
+      };
+  }, [t$1, l2]), b ? !t$1 || !l2 ? null : createPortal($$1({ ourProps: { ref: f2 }, theirProps: e2, defaultTag: _23, name: "Portal" }), l2) : null;
+}), j = Fragment$1, A$1 = createContext(null), F$2 = C$1(function(u2, o2) {
+  let { target: e2, ...r2 } = u2, n2 = { ref: y(o2) };
+  return React.createElement(A$1.Provider, { value: e2 }, $$1({ ourProps: n2, theirProps: r2, defaultTag: j, name: "Popover.Group" }));
+}), $ = Object.assign(U, { Group: F$2 });
+let d = createContext(null);
+function u() {
+  let n2 = useContext(d);
+  if (n2 === null) {
+    let t2 = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
+    throw Error.captureStackTrace && Error.captureStackTrace(t2, u), t2;
   }
-}
-function t$1(r2, e2, n2) {
-  return e2();
-}
-const r = typeof window != "undefined" && typeof window.document != "undefined" && typeof window.document.createElement != "undefined", s$1 = !r, c$2 = s$1 ? t$1 : y, a$3 = "useSyncExternalStore" in React ? ((n2) => n2.useSyncExternalStore)(React) : c$2;
-function S$2(t2) {
-  return a$3(t2.subscribe, t2.getSnapshot, t2.getSnapshot);
-}
-function a$2(o2, r2) {
-  let t2 = o2(), n2 = /* @__PURE__ */ new Set();
-  return { getSnapshot() {
-    return t2;
-  }, subscribe(e2) {
-    return n2.add(e2), () => n2.delete(e2);
-  }, dispatch(e2, ...s2) {
-    let i2 = r2[e2].call(t2, ...s2);
-    i2 && (t2 = i2, n2.forEach((c2) => c2()));
-  } };
-}
-function c$1() {
-  let o2;
-  return { before({ doc: e2 }) {
-    var l2;
-    let n2 = e2.documentElement;
-    o2 = ((l2 = e2.defaultView) != null ? l2 : window).innerWidth - n2.clientWidth;
-  }, after({ doc: e2, d: n2 }) {
-    let t2 = e2.documentElement, l2 = t2.clientWidth - t2.offsetWidth, r2 = o2 - l2;
-    n2.style(t2, "paddingRight", `${r2}px`);
-  } };
-}
-function d$1() {
-  return t$5() ? { before({ doc: r2, d: l2, meta: c2 }) {
-    function o2(a2) {
-      return c2.containers.flatMap((n2) => n2()).some((n2) => n2.contains(a2));
-    }
-    l2.microTask(() => {
-      var s2;
-      if (window.getComputedStyle(r2.documentElement).scrollBehavior !== "auto") {
-        let t2 = o$3();
-        t2.style(r2.documentElement, "scrollBehavior", "auto"), l2.add(() => l2.microTask(() => t2.dispose()));
-      }
-      let a2 = (s2 = window.scrollY) != null ? s2 : window.pageYOffset, n2 = null;
-      l2.addEventListener(r2, "click", (t2) => {
-        if (t2.target instanceof HTMLElement)
-          try {
-            let e2 = t2.target.closest("a");
-            if (!e2)
-              return;
-            let { hash: f2 } = new URL(e2.href), i2 = r2.querySelector(f2);
-            i2 && !o2(i2) && (n2 = i2);
-          } catch {
-          }
-      }, true), l2.addEventListener(r2, "touchstart", (t2) => {
-        if (t2.target instanceof HTMLElement)
-          if (o2(t2.target)) {
-            let e2 = t2.target;
-            for (; e2.parentElement && o2(e2.parentElement); )
-              e2 = e2.parentElement;
-            l2.style(e2, "overscrollBehavior", "contain");
-          } else
-            l2.style(t2.target, "touchAction", "none");
-      }), l2.addEventListener(r2, "touchmove", (t2) => {
-        if (t2.target instanceof HTMLElement)
-          if (o2(t2.target)) {
-            let e2 = t2.target;
-            for (; e2.parentElement && e2.dataset.headlessuiPortal !== "" && !(e2.scrollHeight > e2.clientHeight || e2.scrollWidth > e2.clientWidth); )
-              e2 = e2.parentElement;
-            e2.dataset.headlessuiPortal === "" && t2.preventDefault();
-          } else
-            t2.preventDefault();
-      }, { passive: false }), l2.add(() => {
-        var e2;
-        let t2 = (e2 = window.scrollY) != null ? e2 : window.pageYOffset;
-        a2 !== t2 && window.scrollTo(0, a2), n2 && n2.isConnected && (n2.scrollIntoView({ block: "nearest" }), n2 = null);
-      });
-    });
-  } } : {};
-}
-function l$1() {
-  return { before({ doc: e2, d: o2 }) {
-    o2.style(e2.documentElement, "overflow", "hidden");
-  } };
-}
-function m(e2) {
-  let n2 = {};
-  for (let t2 of e2)
-    Object.assign(n2, t2(n2));
   return n2;
 }
-let a$1 = a$2(() => /* @__PURE__ */ new Map(), { PUSH(e2, n2) {
-  var o2;
-  let t2 = (o2 = this.get(e2)) != null ? o2 : { doc: e2, count: 0, d: o$3(), meta: /* @__PURE__ */ new Set() };
-  return t2.count++, t2.meta.add(n2), this.set(e2, t2), this;
-}, POP(e2, n2) {
-  let t2 = this.get(e2);
-  return t2 && (t2.count--, t2.meta.delete(n2)), this;
-}, SCROLL_PREVENT({ doc: e2, d: n2, meta: t2 }) {
-  let o2 = { doc: e2, d: n2, meta: m(t2) }, c2 = [d$1(), c$1(), l$1()];
-  c2.forEach(({ before: r2 }) => r2 == null ? void 0 : r2(o2)), c2.forEach(({ after: r2 }) => r2 == null ? void 0 : r2(o2));
-}, SCROLL_ALLOW({ d: e2 }) {
-  e2.dispose();
-}, TEARDOWN({ doc: e2 }) {
-  this.delete(e2);
-} });
-a$1.subscribe(() => {
-  let e2 = a$1.getSnapshot(), n2 = /* @__PURE__ */ new Map();
-  for (let [t2] of e2)
-    n2.set(t2, t2.documentElement.style.overflow);
-  for (let t2 of e2.values()) {
-    let o2 = n2.get(t2.doc) === "hidden", c2 = t2.count !== 0;
-    (c2 && !o2 || !c2 && o2) && a$1.dispatch(t2.count > 0 ? "SCROLL_PREVENT" : "SCROLL_ALLOW", t2), t2.count === 0 && a$1.dispatch("TEARDOWN", t2);
-  }
-});
-function p(e2, r2, n2) {
-  let f2 = S$2(a$1), o2 = e2 ? f2.get(e2) : void 0, i2 = o2 ? o2.count > 0 : false;
-  return l$5(() => {
-    if (!(!e2 || !r2))
-      return a$1.dispatch("PUSH", e2, n2), () => a$1.dispatch("POP", e2, n2);
-  }, [r2, e2]), i2;
-}
-let u = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
-function b$3(r2, l2 = true) {
-  l$5(() => {
-    var o2;
-    if (!l2)
-      return;
-    let e2 = typeof r2 == "function" ? r2() : r2.current;
-    if (!e2)
-      return;
-    function a2() {
-      var d2;
-      if (!e2)
-        return;
-      let i2 = (d2 = t.get(e2)) != null ? d2 : 1;
-      if (i2 === 1 ? t.delete(e2) : t.set(e2, i2 - 1), i2 !== 1)
-        return;
-      let n2 = u.get(e2);
-      n2 && (n2["aria-hidden"] === null ? e2.removeAttribute("aria-hidden") : e2.setAttribute("aria-hidden", n2["aria-hidden"]), e2.inert = n2.inert, u.delete(e2));
-    }
-    let f2 = (o2 = t.get(e2)) != null ? o2 : 0;
-    return t.set(e2, f2 + 1), f2 !== 0 || (u.set(e2, { "aria-hidden": e2.getAttribute("aria-hidden"), inert: e2.inert }), e2.setAttribute("aria-hidden", "true"), e2.inert = true), a2;
-  }, [r2, l2]);
-}
-function N({ defaultContainers: o2 = [], portals: r2, mainTreeNodeRef: u2 } = {}) {
-  var f2;
-  let t2 = useRef((f2 = u2 == null ? void 0 : u2.current) != null ? f2 : null), l2 = n$2(t2), c2 = o$4(() => {
-    var i2, s2, a2;
-    let n2 = [];
-    for (let e2 of o2)
-      e2 !== null && (e2 instanceof HTMLElement ? n2.push(e2) : "current" in e2 && e2.current instanceof HTMLElement && n2.push(e2.current));
-    if (r2 != null && r2.current)
-      for (let e2 of r2.current)
-        n2.push(e2);
-    for (let e2 of (i2 = l2 == null ? void 0 : l2.querySelectorAll("html > *, body > *")) != null ? i2 : [])
-      e2 !== document.body && e2 !== document.head && e2 instanceof HTMLElement && e2.id !== "headlessui-portal-root" && (e2.contains(t2.current) || e2.contains((a2 = (s2 = t2.current) == null ? void 0 : s2.getRootNode()) == null ? void 0 : a2.host) || n2.some((L) => e2.contains(L)) || n2.push(e2));
-    return n2;
-  });
-  return { resolveContainers: c2, contains: o$4((n2) => c2().some((i2) => i2.contains(n2))), mainTreeNodeRef: t2, MainTreeNode: useMemo(() => function() {
-    return u2 != null ? null : React__default.createElement(u$3, { features: s$4.Hidden, ref: t2 });
-  }, [t2, u2]) };
+function k$1() {
+  let [n2, t2] = useState([]);
+  return [n2.length > 0 ? n2.join(" ") : void 0, useMemo(() => function(e2) {
+    let i2 = o$3((r2) => (t2((o2) => [...o2, r2]), () => t2((o2) => {
+      let s2 = o2.slice(), p2 = s2.indexOf(r2);
+      return p2 !== -1 && s2.splice(p2, 1), s2;
+    }))), a2 = useMemo(() => ({ register: i2, slot: e2.slot, name: e2.name, props: e2.props }), [i2, e2.slot, e2.name, e2.props]);
+    return React.createElement(d.Provider, { value: a2 }, e2.children);
+  }, [t2])];
 }
+let S = "p", F$1 = C$1(function(t2, c) {
+  let e2 = I$2(), { id: i2 = `headlessui-description-${e2}`, ...a2 } = t2, r2 = u(), o2 = y(c);
+  s$6(() => r2.register(i2), [i2, r2.register]);
+  let s2 = { ref: o2, ...r2.props, id: i2 };
+  return $$1({ ourProps: s2, theirProps: a2, slot: r2.slot || {}, defaultTag: S, name: r2.name || "Description" });
+});
 let a = createContext(() => {
 });
 a.displayName = "StackContext";
@@ -10374,169 +10011,142 @@ var s = ((e2) => (e2[e2.Add = 0] = "Add", e2[e2.Remove = 1] = "Remove", e2))(s |
 function x() {
   return useContext(a);
 }
-function b$2({ children: i2, onUpdate: r2, type: e2, element: n2, enabled: u2 }) {
-  let l2 = x(), o2 = o$4((...t2) => {
+function M$2({ children: i2, onUpdate: r2, type: e2, element: n2, enabled: u2 }) {
+  let l2 = x(), o2 = o$3((...t2) => {
     r2 == null || r2(...t2), l2(...t2);
   });
-  return l$5(() => {
+  return s$6(() => {
     let t2 = u2 === void 0 || u2 === true;
     return t2 && o2(0, e2, n2), () => {
       t2 && o2(1, e2, n2);
     };
-  }, [o2, e2, n2, u2]), React__default.createElement(a.Provider, { value: o2 }, i2);
-}
-let d = createContext(null);
-function f() {
-  let r2 = useContext(d);
-  if (r2 === null) {
-    let t2 = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
-    throw Error.captureStackTrace && Error.captureStackTrace(t2, f), t2;
-  }
-  return r2;
+  }, [o2, e2, n2, u2]), React.createElement(a.Provider, { value: o2 }, i2);
 }
-function w() {
-  let [r2, t2] = useState([]);
-  return [r2.length > 0 ? r2.join(" ") : void 0, useMemo(() => function(e2) {
-    let i2 = o$4((s2) => (t2((o2) => [...o2, s2]), () => t2((o2) => {
-      let p2 = o2.slice(), c2 = p2.indexOf(s2);
-      return c2 !== -1 && p2.splice(c2, 1), p2;
-    }))), n2 = useMemo(() => ({ register: i2, slot: e2.slot, name: e2.name, props: e2.props }), [i2, e2.slot, e2.name, e2.props]);
-    return React__default.createElement(d.Provider, { value: n2 }, e2.children);
-  }, [t2])];
+function o() {
+  return /iPhone/gi.test(window.navigator.platform) || /Mac/gi.test(window.navigator.platform) && window.navigator.maxTouchPoints > 0;
 }
-let I$2 = "p";
-function S$1(r2, t2) {
-  let a2 = I$5(), { id: e2 = `headlessui-description-${a2}`, ...i2 } = r2, n2 = f(), s2 = y$1(t2);
-  l$5(() => n2.register(e2), [e2, n2.register]);
-  let o2 = { ref: s2, ...n2.props, id: e2 };
-  return C({ ourProps: o2, theirProps: i2, slot: n2.slot || {}, defaultTag: I$2, name: n2.name || "Description" });
-}
-let h = U$2(S$1), G = Object.assign(h, {});
-var Me = ((r2) => (r2[r2.Open = 0] = "Open", r2[r2.Closed = 1] = "Closed", r2))(Me || {}), we = ((e2) => (e2[e2.SetTitleId = 0] = "SetTitleId", e2))(we || {});
-let He$1 = { [0](o2, e2) {
-  return o2.titleId === e2.id ? o2 : { ...o2, titleId: e2.id };
-} }, I$1 = createContext(null);
-I$1.displayName = "DialogContext";
-function b$1(o2) {
-  let e2 = useContext(I$1);
+var be$1 = ((r2) => (r2[r2.Open = 0] = "Open", r2[r2.Closed = 1] = "Closed", r2))(be$1 || {}), ve = ((e2) => (e2[e2.SetTitleId = 0] = "SetTitleId", e2))(ve || {});
+let Ae = { [0](t2, e2) {
+  return t2.titleId === e2.id ? t2 : { ...t2, titleId: e2.id };
+} }, H = createContext(null);
+H.displayName = "DialogContext";
+function k(t2) {
+  let e2 = useContext(H);
   if (e2 === null) {
-    let r2 = new Error(`<${o2} /> is missing a parent <Dialog /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(r2, b$1), r2;
+    let r2 = new Error(`<${t2} /> is missing a parent <Dialog /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(r2, k), r2;
   }
   return e2;
 }
-function Be(o2, e2, r2 = () => [document.body]) {
-  p(o2, e2, (i2) => {
-    var n2;
-    return { containers: [...(n2 = i2.containers) != null ? n2 : [], r2] };
-  });
+function Oe(t2, e2, r2 = () => [document.body]) {
+  useEffect(() => {
+    var c;
+    if (!e2 || !t2)
+      return;
+    let s2 = m$2(), d2 = window.pageYOffset;
+    function a2(n2, i2, l2) {
+      let P2 = n2.style.getPropertyValue(i2);
+      return Object.assign(n2.style, { [i2]: l2 }), s2.add(() => {
+        Object.assign(n2.style, { [i2]: P2 });
+      });
+    }
+    let o$12 = t2.documentElement, f2 = ((c = t2.defaultView) != null ? c : window).innerWidth - o$12.clientWidth;
+    if (a2(o$12, "overflow", "hidden"), f2 > 0) {
+      let n2 = o$12.clientWidth - o$12.offsetWidth, i2 = f2 - n2;
+      a2(o$12, "paddingRight", `${i2}px`);
+    }
+    if (o()) {
+      a2(t2.body, "marginTop", `-${d2}px`), window.scrollTo(0, 0);
+      let n2 = null;
+      s2.addEventListener(t2, "click", (i2) => {
+        if (i2.target instanceof HTMLElement)
+          try {
+            let l2 = i2.target.closest("a");
+            if (!l2)
+              return;
+            let { hash: P2 } = new URL(l2.href), u2 = t2.querySelector(P2);
+            u2 && !r2().some((_24) => _24.contains(u2)) && (n2 = u2);
+          } catch {
+          }
+      }, true), s2.addEventListener(t2, "touchmove", (i2) => {
+        i2.target instanceof HTMLElement && !r2().some((l2) => l2.contains(i2.target)) && i2.preventDefault();
+      }, { passive: false }), s2.add(() => {
+        window.scrollTo(0, window.pageYOffset + d2), n2 && n2.isConnected && (n2.scrollIntoView({ block: "nearest" }), n2 = null);
+      });
+    }
+    return s2.dispose;
+  }, [t2, e2]);
 }
-function Ge(o2, e2) {
-  return u$5(e2.type, He$1, o2, e2);
-}
-let Ne$1 = "div", Ue = O.RenderStrategy | O.Static;
-function We(o$12, e2) {
-  let r2 = I$5(), { id: i2 = `headlessui-dialog-${r2}`, open: n2, onClose: l2, initialFocus: s$12, role: a2 = "dialog", __demoMode: T2 = false, ...m2 } = o$12, [M2, f2] = useState(0), U2 = useRef(false);
-  a2 = function() {
-    return a2 === "dialog" || a2 === "alertdialog" ? a2 : (U2.current || (U2.current = true, console.warn(`Invalid role [${a2}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)), "dialog");
-  }();
-  let E$1 = u$2();
-  n2 === void 0 && E$1 !== null && (n2 = (E$1 & d$3.Open) === d$3.Open);
-  let D2 = useRef(null), ee$1 = y$1(D2, e2), g2 = n$2(D2), W = o$12.hasOwnProperty("open") || E$1 !== null, $2 = o$12.hasOwnProperty("onClose");
-  if (!W && !$2)
+function Ce$1(t2, e2) {
+  return u$3(e2.type, Ae, t2, e2);
+}
+let Se$1 = "div", Le = S$1.RenderStrategy | S$1.Static, Me = C$1(function(e2, r2) {
+  let s$12 = I$2(), { id: d2 = `headlessui-dialog-${s$12}`, open: a2, onClose: o2, initialFocus: p$12, __demoMode: f2 = false, ...c } = e2, [n$12, i2] = useState(0), l2 = s$3();
+  a2 === void 0 && l2 !== null && (a2 = u$3(l2, { [p.Open]: true, [p.Closed]: false }));
+  let P2 = useRef(/* @__PURE__ */ new Set()), u2 = useRef(null), _24 = y(u2, r2), U2 = useRef(null), y$1 = n(u2), $$2 = e2.hasOwnProperty("open") || l2 !== null, Y = e2.hasOwnProperty("onClose");
+  if (!$$2 && !Y)
     throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");
-  if (!W)
+  if (!$$2)
     throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");
-  if (!$2)
+  if (!Y)
     throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");
-  if (typeof n2 != "boolean")
-    throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${n2}`);
-  if (typeof l2 != "function")
-    throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${l2}`);
-  let p2 = n2 ? 0 : 1, [h2, te$1] = useReducer(Ge, { titleId: null, descriptionId: null, panelRef: createRef() }), P2 = o$4(() => l2(false)), Y2 = o$4((t2) => te$1({ type: 0, id: t2 })), S2 = l$4() ? T2 ? false : p2 === 0 : false, x2 = M2 > 1, j2 = useContext(I$1) !== null, [oe, re] = ee(), ne = { get current() {
-    var t2;
-    return (t2 = h2.panelRef.current) != null ? t2 : D2.current;
-  } }, { resolveContainers: w$12, mainTreeNodeRef: L, MainTreeNode: le2 } = N({ portals: oe, defaultContainers: [ne] }), ae2 = x2 ? "parent" : "leaf", J = E$1 !== null ? (E$1 & d$3.Closing) === d$3.Closing : false, ie = (() => j2 || J ? false : S2)(), se2 = useCallback(() => {
-    var t2, c2;
-    return (c2 = Array.from((t2 = g2 == null ? void 0 : g2.querySelectorAll("body > *")) != null ? t2 : []).find((d2) => d2.id === "headlessui-portal-root" ? false : d2.contains(L.current) && d2 instanceof HTMLElement)) != null ? c2 : null;
-  }, [L]);
-  b$3(se2, ie);
-  let pe = (() => x2 ? true : S2)(), de$1 = useCallback(() => {
-    var t2, c2;
-    return (c2 = Array.from((t2 = g2 == null ? void 0 : g2.querySelectorAll("[data-headlessui-portal]")) != null ? t2 : []).find((d2) => d2.contains(L.current) && d2 instanceof HTMLElement)) != null ? c2 : null;
-  }, [L]);
-  b$3(de$1, pe);
-  let ue2 = (() => !(!S2 || x2))();
-  y$2(w$12, (t2) => {
-    t2.preventDefault(), P2();
-  }, ue2);
-  let fe = (() => !(x2 || p2 !== 0))();
-  E(g2 == null ? void 0 : g2.defaultView, "keydown", (t2) => {
-    fe && (t2.defaultPrevented || t2.key === o.Escape && (t2.preventDefault(), t2.stopPropagation(), P2()));
+  if (typeof a2 != "boolean")
+    throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${a2}`);
+  if (typeof o2 != "function")
+    throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${o2}`);
+  let g = a2 ? 0 : 1, [h2, Q2] = useReducer(Ce$1, { titleId: null, descriptionId: null, panelRef: createRef() }), R = o$3(() => o2(false)), j2 = o$3((T2) => Q2({ type: 0, id: T2 })), x2 = a$2() ? f2 ? false : g === 0 : false, w2 = n$12 > 1, X2 = useContext(H) !== null, Z = w2 ? "parent" : "leaf";
+  M$3(u2, w2 ? x2 : false);
+  let N2 = o$3(() => {
+    var b, D2;
+    return [...Array.from((b = y$1 == null ? void 0 : y$1.querySelectorAll("body > *, [data-headlessui-portal]")) != null ? b : []).filter((E2) => !(!(E2 instanceof HTMLElement) || E2.contains(U2.current) || h2.panelRef.current && E2.contains(h2.panelRef.current))), (D2 = h2.panelRef.current) != null ? D2 : u2.current];
   });
-  let ge = (() => !(J || p2 !== 0 || j2))();
-  Be(g2, ge, w$12), useEffect(() => {
-    if (p2 !== 0 || !D2.current)
+  L(() => N2(), R, x2 && !w2), E(y$1 == null ? void 0 : y$1.defaultView, "keydown", (T2) => {
+    T2.defaultPrevented || T2.key === o$1.Escape && g === 0 && (w2 || (T2.preventDefault(), T2.stopPropagation(), R()));
+  }), Oe(y$1, g === 0 && !X2, N2), useEffect(() => {
+    if (g !== 0 || !u2.current)
       return;
-    let t2 = new ResizeObserver((c2) => {
-      for (let d2 of c2) {
-        let F2 = d2.target.getBoundingClientRect();
-        F2.x === 0 && F2.y === 0 && F2.width === 0 && F2.height === 0 && P2();
-      }
+    let T2 = new IntersectionObserver((b) => {
+      for (let D2 of b)
+        D2.boundingClientRect.x === 0 && D2.boundingClientRect.y === 0 && D2.boundingClientRect.width === 0 && D2.boundingClientRect.height === 0 && R();
     });
-    return t2.observe(D2.current), () => t2.disconnect();
-  }, [p2, D2, P2]);
-  let [Te, ce] = w(), De2 = useMemo(() => [{ dialogState: p2, close: P2, setTitleId: Y2 }, h2], [p2, h2, P2, Y2]), X2 = useMemo(() => ({ open: p2 === 0 }), [p2]), me = { ref: ee$1, id: i2, role: a2, "aria-modal": p2 === 0 ? true : void 0, "aria-labelledby": h2.titleId, "aria-describedby": Te };
-  return React__default.createElement(b$2, { type: "Dialog", enabled: p2 === 0, element: D2, onUpdate: o$4((t2, c2) => {
-    c2 === "Dialog" && u$5(t2, { [s.Add]: () => f2((d2) => d2 + 1), [s.Remove]: () => f2((d2) => d2 - 1) });
-  }) }, React__default.createElement(l$2, { force: true }, React__default.createElement(te, null, React__default.createElement(I$1.Provider, { value: De2 }, React__default.createElement(te.Group, { target: D2 }, React__default.createElement(l$2, { force: false }, React__default.createElement(ce, { slot: X2, name: "Dialog.Description" }, React__default.createElement(de, { initialFocus: s$12, containers: w$12, features: S2 ? u$5(ae2, { parent: de.features.RestoreFocus, leaf: de.features.All & ~de.features.FocusLock }) : de.features.None }, React__default.createElement(re, null, C({ ourProps: me, theirProps: m2, slot: X2, defaultTag: Ne$1, features: Ue, visible: p2 === 0, name: "Dialog" }))))))))), React__default.createElement(le2, null));
-}
-let $e = "div";
-function Ye(o2, e2) {
-  let r2 = I$5(), { id: i2 = `headlessui-dialog-overlay-${r2}`, ...n2 } = o2, [{ dialogState: l2, close: s2 }] = b$1("Dialog.Overlay"), a2 = y$1(e2), T2 = o$4((f2) => {
-    if (f2.target === f2.currentTarget) {
-      if (r$2(f2.currentTarget))
-        return f2.preventDefault();
-      f2.preventDefault(), f2.stopPropagation(), s2();
-    }
-  }), m2 = useMemo(() => ({ open: l2 === 0 }), [l2]);
-  return C({ ourProps: { ref: a2, id: i2, "aria-hidden": true, onClick: T2 }, theirProps: n2, slot: m2, defaultTag: $e, name: "Dialog.Overlay" });
-}
-let je = "div";
-function Je(o2, e2) {
-  let r2 = I$5(), { id: i2 = `headlessui-dialog-backdrop-${r2}`, ...n2 } = o2, [{ dialogState: l2 }, s2] = b$1("Dialog.Backdrop"), a2 = y$1(e2);
+    return T2.observe(u2.current), () => T2.disconnect();
+  }, [g, u2, R]);
+  let [ee, te] = k$1(), oe2 = useMemo(() => [{ dialogState: g, close: R, setTitleId: j2 }, h2], [g, h2, R, j2]), V = useMemo(() => ({ open: g === 0 }), [g]), re2 = { ref: _24, id: d2, role: "dialog", "aria-modal": g === 0 ? true : void 0, "aria-labelledby": h2.titleId, "aria-describedby": ee };
+  return React.createElement(M$2, { type: "Dialog", enabled: g === 0, element: u2, onUpdate: o$3((T2, b, D2) => {
+    b === "Dialog" && u$3(T2, { [s.Add]() {
+      P2.current.add(D2), i2((E2) => E2 + 1);
+    }, [s.Remove]() {
+      P2.current.add(D2), i2((E2) => E2 - 1);
+    } });
+  }) }, React.createElement(P$1, { force: true }, React.createElement($, null, React.createElement(H.Provider, { value: oe2 }, React.createElement($.Group, { target: u2 }, React.createElement(P$1, { force: false }, React.createElement(te, { slot: V, name: "Dialog.Description" }, React.createElement(de, { initialFocus: p$12, containers: P2, features: x2 ? u$3(Z, { parent: de.features.RestoreFocus, leaf: de.features.All & ~de.features.FocusLock }) : de.features.None }, $$1({ ourProps: re2, theirProps: c, slot: V, defaultTag: Se$1, features: Le, visible: g === 0, name: "Dialog" })))))))), React.createElement(h$1, { features: s$4.Hidden, ref: U2 }));
+}), ke = "div", we = C$1(function(e2, r2) {
+  let s2 = I$2(), { id: d2 = `headlessui-dialog-overlay-${s2}`, ...a2 } = e2, [{ dialogState: o2, close: p2 }] = k("Dialog.Overlay"), f2 = y(r2), c = o$3((l2) => {
+    if (l2.target === l2.currentTarget) {
+      if (r$1(l2.currentTarget))
+        return l2.preventDefault();
+      l2.preventDefault(), l2.stopPropagation(), p2();
+    }
+  }), n2 = useMemo(() => ({ open: o2 === 0 }), [o2]);
+  return $$1({ ourProps: { ref: f2, id: d2, "aria-hidden": true, onClick: c }, theirProps: a2, slot: n2, defaultTag: ke, name: "Dialog.Overlay" });
+}), Fe = "div", Ie = C$1(function(e2, r2) {
+  let s2 = I$2(), { id: d2 = `headlessui-dialog-backdrop-${s2}`, ...a2 } = e2, [{ dialogState: o2 }, p2] = k("Dialog.Backdrop"), f2 = y(r2);
   useEffect(() => {
-    if (s2.panelRef.current === null)
+    if (p2.panelRef.current === null)
       throw new Error("A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.");
-  }, [s2.panelRef]);
-  let T2 = useMemo(() => ({ open: l2 === 0 }), [l2]);
-  return React__default.createElement(l$2, { force: true }, React__default.createElement(te, null, C({ ourProps: { ref: a2, id: i2, "aria-hidden": true }, theirProps: n2, slot: T2, defaultTag: je, name: "Dialog.Backdrop" })));
-}
-let Xe = "div";
-function Ke(o2, e2) {
-  let r2 = I$5(), { id: i2 = `headlessui-dialog-panel-${r2}`, ...n2 } = o2, [{ dialogState: l2 }, s2] = b$1("Dialog.Panel"), a2 = y$1(e2, s2.panelRef), T2 = useMemo(() => ({ open: l2 === 0 }), [l2]), m2 = o$4((f2) => {
-    f2.stopPropagation();
+  }, [p2.panelRef]);
+  let c = useMemo(() => ({ open: o2 === 0 }), [o2]);
+  return React.createElement(P$1, { force: true }, React.createElement($, null, $$1({ ourProps: { ref: f2, id: d2, "aria-hidden": true }, theirProps: a2, slot: c, defaultTag: Fe, name: "Dialog.Backdrop" })));
+}), He = "div", _e = C$1(function(e2, r2) {
+  let s2 = I$2(), { id: d2 = `headlessui-dialog-panel-${s2}`, ...a2 } = e2, [{ dialogState: o2 }, p2] = k("Dialog.Panel"), f2 = y(r2, p2.panelRef), c = useMemo(() => ({ open: o2 === 0 }), [o2]), n2 = o$3((l2) => {
+    l2.stopPropagation();
   });
-  return C({ ourProps: { ref: a2, id: i2, onClick: m2 }, theirProps: n2, slot: T2, defaultTag: Xe, name: "Dialog.Panel" });
-}
-let Ve = "h2";
-function qe$1(o2, e2) {
-  let r2 = I$5(), { id: i2 = `headlessui-dialog-title-${r2}`, ...n2 } = o2, [{ dialogState: l2, setTitleId: s2 }] = b$1("Dialog.Title"), a2 = y$1(e2);
-  useEffect(() => (s2(i2), () => s2(null)), [i2, s2]);
-  let T2 = useMemo(() => ({ open: l2 === 0 }), [l2]);
-  return C({ ourProps: { ref: a2, id: i2 }, theirProps: n2, slot: T2, defaultTag: Ve, name: "Dialog.Title" });
-}
-let ze = U$2(We), Qe = U$2(Je), Ze = U$2(Ke), et = U$2(Ye), tt = U$2(qe$1), _t = Object.assign(ze, { Backdrop: Qe, Panel: Ze, Overlay: et, Title: tt, Description: G });
-function c(a2 = 0) {
-  let [l2, r2] = useState(a2), t2 = f$3(), o2 = useCallback((e2) => {
-    t2.current && r2((u2) => u2 | e2);
-  }, [l2, t2]), m2 = useCallback((e2) => Boolean(l2 & e2), [l2]), s2 = useCallback((e2) => {
-    t2.current && r2((u2) => u2 & ~e2);
-  }, [r2, t2]), g2 = useCallback((e2) => {
-    t2.current && r2((u2) => u2 ^ e2);
-  }, [r2]);
-  return { flags: l2, addFlag: o2, hasFlag: m2, removeFlag: s2, toggleFlag: g2 };
-}
+  return $$1({ ourProps: { ref: f2, id: d2, onClick: n2 }, theirProps: a2, slot: c, defaultTag: He, name: "Dialog.Panel" });
+}), xe$1 = "h2", We = C$1(function(e2, r2) {
+  let s2 = I$2(), { id: d2 = `headlessui-dialog-title-${s2}`, ...a2 } = e2, [{ dialogState: o2, setTitleId: p2 }] = k("Dialog.Title"), f2 = y(r2);
+  useEffect(() => (p2(d2), () => p2(null)), [d2, p2]);
+  let c = useMemo(() => ({ open: o2 === 0 }), [o2]);
+  return $$1({ ourProps: { ref: f2, id: d2 }, theirProps: a2, slot: c, defaultTag: xe$1, name: "Dialog.Title" });
+}), mt = Object.assign(Me, { Backdrop: Ie, Panel: _e, Overlay: we, Title: We, Description: F$1 });
 function l(r2) {
   let e2 = { called: false };
   return (...t2) => {
@@ -10544,204 +10154,181 @@ function l(r2) {
       return e2.called = true, r2(...t2);
   };
 }
-function g(t2, ...e2) {
+function v(t2, ...e2) {
   t2 && e2.length > 0 && t2.classList.add(...e2);
 }
-function v(t2, ...e2) {
+function f(t2, ...e2) {
   t2 && e2.length > 0 && t2.classList.remove(...e2);
 }
-function b(t2, e2) {
-  let n2 = o$3();
+function F(t2, e2) {
+  let n2 = m$2();
   if (!t2)
     return n2.dispose;
-  let { transitionDuration: m2, transitionDelay: a2 } = getComputedStyle(t2), [u2, p2] = [m2, a2].map((l2) => {
-    let [r2 = 0] = l2.split(",").filter(Boolean).map((i2) => i2.includes("ms") ? parseFloat(i2) : parseFloat(i2) * 1e3).sort((i2, T2) => T2 - i2);
+  let { transitionDuration: a2, transitionDelay: i2 } = getComputedStyle(t2), [m2, d2] = [a2, i2].map((o2) => {
+    let [r2 = 0] = o2.split(",").filter(Boolean).map((l2) => l2.includes("ms") ? parseFloat(l2) : parseFloat(l2) * 1e3).sort((l2, g) => g - l2);
     return r2;
-  }), o2 = u2 + p2;
-  if (o2 !== 0) {
-    n2.group((r2) => {
-      r2.setTimeout(() => {
-        e2(), r2.dispose();
-      }, o2), r2.addEventListener(t2, "transitionrun", (i2) => {
-        i2.target === i2.currentTarget && r2.dispose();
-      });
-    });
-    let l2 = n2.addEventListener(t2, "transitionend", (r2) => {
-      r2.target === r2.currentTarget && (e2(), l2());
+  });
+  if (m2 + d2 !== 0) {
+    let o2 = n2.addEventListener(t2, "transitionend", (r2) => {
+      r2.target === r2.currentTarget && (e2(), o2());
     });
   } else
     e2();
   return n2.add(() => e2()), n2.dispose;
 }
-function M$1(t2, e2, n2, m2) {
-  let a2 = n2 ? "enter" : "leave", u2 = o$3(), p2 = m2 !== void 0 ? l(m2) : () => {
+function M$1(t2, e2, n2, a2) {
+  let i2 = n2 ? "enter" : "leave", m2 = m$2(), d2 = a2 !== void 0 ? l(a2) : () => {
   };
-  a2 === "enter" && (t2.removeAttribute("hidden"), t2.style.display = "");
-  let o2 = u$5(a2, { enter: () => e2.enter, leave: () => e2.leave }), l$12 = u$5(a2, { enter: () => e2.enterTo, leave: () => e2.leaveTo }), r2 = u$5(a2, { enter: () => e2.enterFrom, leave: () => e2.leaveFrom });
-  return v(t2, ...e2.base, ...e2.enter, ...e2.enterTo, ...e2.enterFrom, ...e2.leave, ...e2.leaveFrom, ...e2.leaveTo, ...e2.entered), g(t2, ...e2.base, ...o2, ...r2), u2.nextFrame(() => {
-    v(t2, ...e2.base, ...o2, ...r2), g(t2, ...e2.base, ...o2, ...l$12), b(t2, () => (v(t2, ...e2.base, ...o2), g(t2, ...e2.base, ...e2.entered), p2()));
-  }), u2.dispose;
-}
-function D({ immediate: t2, container: s2, direction: n2, classes: u2, onStart: a2, onStop: c2 }) {
-  let l2 = f$3(), d2 = p$3(), e2 = s$7(n2);
-  l$5(() => {
-    t2 && (e2.current = "enter");
-  }, [t2]), l$5(() => {
-    let r2 = o$3();
-    d2.add(r2.dispose);
-    let i2 = s2.current;
-    if (i2 && e2.current !== "idle" && l2.current)
-      return r2.dispose(), a2.current(e2.current), r2.add(M$1(i2, u2.current, e2.current === "enter", () => {
-        r2.dispose(), c2.current(e2.current);
-      })), r2.dispose;
-  }, [n2]);
+  i2 === "enter" && (t2.removeAttribute("hidden"), t2.style.display = "");
+  let u2 = u$3(i2, { enter: () => e2.enter, leave: () => e2.leave }), o2 = u$3(i2, { enter: () => e2.enterTo, leave: () => e2.leaveTo }), r2 = u$3(i2, { enter: () => e2.enterFrom, leave: () => e2.leaveFrom });
+  return f(t2, ...e2.enter, ...e2.enterTo, ...e2.enterFrom, ...e2.leave, ...e2.leaveFrom, ...e2.leaveTo, ...e2.entered), v(t2, ...u2, ...r2), m2.nextFrame(() => {
+    f(t2, ...r2), v(t2, ...o2), F(t2, () => (f(t2, ...u2), v(t2, ...e2.entered), d2()));
+  }), m2.dispose;
+}
+function D({ container: i2, direction: t2, classes: o2, onStart: s2, onStop: u2 }) {
+  let a2 = f$1(), c = p$2(), r2 = s$5(t2);
+  s$6(() => {
+    let e2 = m$2();
+    c.add(e2.dispose);
+    let n2 = i2.current;
+    if (!!n2 && r2.current !== "idle" && !!a2.current)
+      return e2.dispose(), s2.current(r2.current), e2.add(M$1(n2, o2.current, r2.current === "enter", () => {
+        e2.dispose(), u2.current(r2.current);
+      })), e2.dispose;
+  }, [t2]);
+}
+function e(...n2) {
+  return n2.filter(Boolean).join(" ");
 }
-function S(t2 = "") {
-  return t2.split(/\s+/).filter((n2) => n2.length > 1);
+function P(i2 = "") {
+  return i2.split(" ").filter((e2) => e2.trim().length > 1);
 }
-let I = createContext(null);
-I.displayName = "TransitionContext";
-var Se = ((r2) => (r2.Visible = "visible", r2.Hidden = "hidden", r2))(Se || {});
-function ye() {
-  let t2 = useContext(I);
-  if (t2 === null)
+let A = createContext(null);
+A.displayName = "TransitionContext";
+var Ce = ((s2) => (s2.Visible = "visible", s2.Hidden = "hidden", s2))(Ce || {});
+function ge() {
+  let i2 = useContext(A);
+  if (i2 === null)
     throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
-  return t2;
+  return i2;
 }
-function xe() {
-  let t2 = useContext(M);
-  if (t2 === null)
+function be() {
+  let i2 = useContext(M);
+  if (i2 === null)
     throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
-  return t2;
+  return i2;
 }
 let M = createContext(null);
 M.displayName = "NestingContext";
-function U(t2) {
-  return "children" in t2 ? U(t2.children) : t2.current.filter(({ el: n2 }) => n2.current !== null).filter(({ state: n2 }) => n2 === "visible").length > 0;
-}
-function se(t2, n2) {
-  let r2 = s$7(t2), s2 = useRef([]), R2 = f$3(), D2 = p$3(), p2 = o$4((i2, e2 = v$1.Hidden) => {
-    let a2 = s2.current.findIndex(({ el: o2 }) => o2 === i2);
-    a2 !== -1 && (u$5(e2, { [v$1.Unmount]() {
-      s2.current.splice(a2, 1);
-    }, [v$1.Hidden]() {
-      s2.current[a2].state = "hidden";
-    } }), D2.microTask(() => {
+function I(i2) {
+  return "children" in i2 ? I(i2.children) : i2.current.filter(({ el: e2 }) => e2.current !== null).filter(({ state: e2 }) => e2 === "visible").length > 0;
+}
+function ne(i2, e2) {
+  let s2 = s$5(i2), n2 = useRef([]), m2 = f$1(), R = p$2(), b = o$3((l2, r2 = j$1.Hidden) => {
+    let t2 = n2.current.findIndex(({ el: o2 }) => o2 === l2);
+    t2 !== -1 && (u$3(r2, { [j$1.Unmount]() {
+      n2.current.splice(t2, 1);
+    }, [j$1.Hidden]() {
+      n2.current[t2].state = "hidden";
+    } }), R.microTask(() => {
       var o2;
-      !U(s2) && R2.current && ((o2 = r2.current) == null || o2.call(r2));
+      !I(n2) && m2.current && ((o2 = s2.current) == null || o2.call(s2));
     }));
-  }), x2 = o$4((i2) => {
-    let e2 = s2.current.find(({ el: a2 }) => a2 === i2);
-    return e2 ? e2.state !== "visible" && (e2.state = "visible") : s2.current.push({ el: i2, state: "visible" }), () => p2(i2, v$1.Unmount);
-  }), h2 = useRef([]), v2 = useRef(Promise.resolve()), u2 = useRef({ enter: [], leave: [], idle: [] }), g2 = o$4((i2, e2, a2) => {
-    h2.current.splice(0), n2 && (n2.chains.current[e2] = n2.chains.current[e2].filter(([o2]) => o2 !== i2)), n2 == null || n2.chains.current[e2].push([i2, new Promise((o2) => {
-      h2.current.push(o2);
-    })]), n2 == null || n2.chains.current[e2].push([i2, new Promise((o2) => {
-      Promise.all(u2.current[e2].map(([f2, N2]) => N2)).then(() => o2());
-    })]), e2 === "enter" ? v2.current = v2.current.then(() => n2 == null ? void 0 : n2.wait.current).then(() => a2(e2)) : a2(e2);
-  }), d2 = o$4((i2, e2, a2) => {
-    Promise.all(u2.current[e2].splice(0).map(([o2, f2]) => f2)).then(() => {
+  }), E2 = o$3((l2) => {
+    let r2 = n2.current.find(({ el: t2 }) => t2 === l2);
+    return r2 ? r2.state !== "visible" && (r2.state = "visible") : n2.current.push({ el: l2, state: "visible" }), () => b(l2, j$1.Unmount);
+  }), S2 = useRef([]), u2 = useRef(Promise.resolve()), p2 = useRef({ enter: [], leave: [], idle: [] }), d2 = o$3((l2, r2, t2) => {
+    S2.current.splice(0), e2 && (e2.chains.current[r2] = e2.chains.current[r2].filter(([o2]) => o2 !== l2)), e2 == null || e2.chains.current[r2].push([l2, new Promise((o2) => {
+      S2.current.push(o2);
+    })]), e2 == null || e2.chains.current[r2].push([l2, new Promise((o2) => {
+      Promise.all(p2.current[r2].map(([f2, a2]) => a2)).then(() => o2());
+    })]), r2 === "enter" ? u2.current = u2.current.then(() => e2 == null ? void 0 : e2.wait.current).then(() => t2(r2)) : t2(r2);
+  }), v2 = o$3((l2, r2, t2) => {
+    Promise.all(p2.current[r2].splice(0).map(([o2, f2]) => f2)).then(() => {
       var o2;
-      (o2 = h2.current.shift()) == null || o2();
-    }).then(() => a2(e2));
+      (o2 = S2.current.shift()) == null || o2();
+    }).then(() => t2(r2));
   });
-  return useMemo(() => ({ children: s2, register: x2, unregister: p2, onStart: g2, onStop: d2, wait: v2, chains: u2 }), [x2, p2, s2, g2, d2, u2, v2]);
+  return useMemo(() => ({ children: n2, register: E2, unregister: b, onStart: d2, onStop: v2, wait: u2, chains: p2 }), [E2, b, n2, d2, v2, p2, u2]);
 }
-function Ne() {
+function Ee() {
 }
-let Pe = ["beforeEnter", "afterEnter", "beforeLeave", "afterLeave"];
-function ae(t2) {
-  var r2;
-  let n2 = {};
-  for (let s2 of Pe)
-    n2[s2] = (r2 = t2[s2]) != null ? r2 : Ne;
-  return n2;
+let Se = ["beforeEnter", "afterEnter", "beforeLeave", "afterLeave"];
+function re(i2) {
+  var s2;
+  let e2 = {};
+  for (let n2 of Se)
+    e2[n2] = (s2 = i2[n2]) != null ? s2 : Ee;
+  return e2;
 }
-function Re(t2) {
-  let n2 = useRef(ae(t2));
+function xe(i2) {
+  let e2 = useRef(re(i2));
   return useEffect(() => {
-    n2.current = ae(t2);
-  }, [t2]), n2;
-}
-let De = "div", le = O.RenderStrategy;
-function He(t2, n2) {
-  var Q2, Y2;
-  let { beforeEnter: r2, afterEnter: s2, beforeLeave: R2, afterLeave: D$12, enter: p2, enterFrom: x2, enterTo: h2, entered: v2, leave: u2, leaveFrom: g2, leaveTo: d2, ...i2 } = t2, e2 = useRef(null), a2 = y$1(e2, n2), o2 = (Q2 = i2.unmount) == null || Q2 ? v$1.Unmount : v$1.Hidden, { show: f2, appear: N2, initial: T2 } = ye(), [l2, j2] = useState(f2 ? "visible" : "hidden"), z2 = xe(), { register: L, unregister: O2 } = z2;
-  useEffect(() => L(e2), [L, e2]), useEffect(() => {
-    if (o2 === v$1.Hidden && e2.current) {
-      if (f2 && l2 !== "visible") {
-        j2("visible");
+    e2.current = re(i2);
+  }, [i2]), e2;
+}
+let Pe = "div", ie = S$1.RenderStrategy, oe = C$1(function(e$12, s2) {
+  let { beforeEnter: n2, afterEnter: m2, beforeLeave: R, afterLeave: b, enter: E2, enterFrom: S2, enterTo: u2, entered: p$12, leave: d2, leaveFrom: v2, leaveTo: l2, ...r2 } = e$12, t2 = useRef(null), o2 = y(t2, s2), f2 = r2.unmount ? j$1.Unmount : j$1.Hidden, { show: a2, appear: x2, initial: se } = ge(), [h2, _24] = useState(a2 ? "visible" : "hidden"), K = be(), { register: D$1, unregister: V } = K, j2 = useRef(null);
+  useEffect(() => D$1(t2), [D$1, t2]), useEffect(() => {
+    if (f2 === j$1.Hidden && !!t2.current) {
+      if (a2 && h2 !== "visible") {
+        _24("visible");
         return;
       }
-      return u$5(l2, { ["hidden"]: () => O2(e2), ["visible"]: () => L(e2) });
+      return u$3(h2, { ["hidden"]: () => V(t2), ["visible"]: () => D$1(t2) });
     }
-  }, [l2, e2, L, O2, f2, o2]);
-  let k2 = s$7({ base: S(i2.className), enter: S(p2), enterFrom: S(x2), enterTo: S(h2), entered: S(v2), leave: S(u2), leaveFrom: S(g2), leaveTo: S(d2) }), V = Re({ beforeEnter: r2, afterEnter: s2, beforeLeave: R2, afterLeave: D$12 }), G2 = l$4();
+  }, [h2, t2, D$1, V, a2, f2]);
+  let U2 = s$5({ enter: P(E2), enterFrom: P(S2), enterTo: P(u2), entered: P(p$12), leave: P(d2), leaveFrom: P(v2), leaveTo: P(l2) }), w2 = xe({ beforeEnter: n2, afterEnter: m2, beforeLeave: R, afterLeave: b }), k2 = a$2();
   useEffect(() => {
-    if (G2 && l2 === "visible" && e2.current === null)
+    if (k2 && h2 === "visible" && t2.current === null)
       throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?");
-  }, [e2, l2, G2]);
-  let Te = T2 && !N2, K = N2 && f2 && T2, de2 = (() => !G2 || Te ? "idle" : f2 ? "enter" : "leave")(), H2 = c(0), fe = o$4((C2) => u$5(C2, { enter: () => {
-    H2.addFlag(d$3.Opening), V.current.beforeEnter();
-  }, leave: () => {
-    H2.addFlag(d$3.Closing), V.current.beforeLeave();
-  }, idle: () => {
-  } })), me = o$4((C2) => u$5(C2, { enter: () => {
-    H2.removeFlag(d$3.Opening), V.current.afterEnter();
-  }, leave: () => {
-    H2.removeFlag(d$3.Closing), V.current.afterLeave();
-  }, idle: () => {
-  } })), w2 = se(() => {
-    j2("hidden"), O2(e2);
-  }, z2), B = useRef(false);
-  D({ immediate: K, container: e2, classes: k2, direction: de2, onStart: s$7((C2) => {
-    B.current = true, w2.onStart(e2, C2, fe);
-  }), onStop: s$7((C2) => {
-    B.current = false, w2.onStop(e2, C2, me), C2 === "leave" && !U(w2) && (j2("hidden"), O2(e2));
-  }) });
-  let P2 = i2, ce = { ref: a2 };
-  return K ? P2 = { ...P2, className: t$4(i2.className, ...k2.current.enter, ...k2.current.enterFrom) } : B.current && (P2.className = t$4(i2.className, (Y2 = e2.current) == null ? void 0 : Y2.className), P2.className === "" && delete P2.className), React__default.createElement(M.Provider, { value: w2 }, React__default.createElement(s$3, { value: u$5(l2, { ["visible"]: d$3.Open, ["hidden"]: d$3.Closed }) | H2.flags }, C({ ourProps: ce, theirProps: P2, defaultTag: De, features: le, visible: l2 === "visible", name: "Transition.Child" })));
-}
-function Fe(t2, n2) {
-  let { show: r2, appear: s2 = false, unmount: R2 = true, ...D2 } = t2, p2 = useRef(null), x2 = y$1(p2, n2);
-  l$4();
-  let h2 = u$2();
-  if (r2 === void 0 && h2 !== null && (r2 = (h2 & d$3.Open) === d$3.Open), ![true, false].includes(r2))
+  }, [t2, h2, k2]);
+  let G = se && !x2, le = (() => !k2 || G || j2.current === a2 ? "idle" : a2 ? "enter" : "leave")(), ae = o$3((C2) => u$3(C2, { enter: () => w2.current.beforeEnter(), leave: () => w2.current.beforeLeave(), idle: () => {
+  } })), ue = o$3((C2) => u$3(C2, { enter: () => w2.current.afterEnter(), leave: () => w2.current.afterLeave(), idle: () => {
+  } })), L2 = ne(() => {
+    _24("hidden"), V(t2);
+  }, K);
+  D({ container: t2, classes: U2, direction: le, onStart: s$5((C2) => {
+    L2.onStart(t2, C2, ae);
+  }), onStop: s$5((C2) => {
+    L2.onStop(t2, C2, ue), C2 === "leave" && !I(L2) && (_24("hidden"), V(t2));
+  }) }), useEffect(() => {
+    !G || (f2 === j$1.Hidden ? j2.current = null : j2.current = a2);
+  }, [a2, G, h2]);
+  let B = r2, de2 = { ref: o2 };
+  return x2 && a2 && (typeof window == "undefined" || typeof document == "undefined") && (B = { ...B, className: e(r2.className, ...U2.current.enter, ...U2.current.enterFrom) }), React.createElement(M.Provider, { value: L2 }, React.createElement(C, { value: u$3(h2, { ["visible"]: p.Open, ["hidden"]: p.Closed }) }, $$1({ ourProps: de2, theirProps: B, defaultTag: Pe, features: ie, visible: h2 === "visible", name: "Transition.Child" })));
+}), J = C$1(function(e2, s2) {
+  let { show: n2, appear: m2 = false, unmount: R, ...b } = e2, E2 = useRef(null), S2 = y(E2, s2);
+  a$2();
+  let u2 = s$3();
+  if (n2 === void 0 && u2 !== null && (n2 = u$3(u2, { [p.Open]: true, [p.Closed]: false })), ![true, false].includes(n2))
     throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");
-  let [v2, u2] = useState(r2 ? "visible" : "hidden"), g2 = se(() => {
-    u2("hidden");
-  }), [d2, i2] = useState(true), e2 = useRef([r2]);
-  l$5(() => {
-    d2 !== false && e2.current[e2.current.length - 1] !== r2 && (e2.current.push(r2), i2(false));
-  }, [e2, r2]);
-  let a2 = useMemo(() => ({ show: r2, appear: s2, initial: d2 }), [r2, s2, d2]);
+  let [p$12, d2] = useState(n2 ? "visible" : "hidden"), v2 = ne(() => {
+    d2("hidden");
+  }), [l2, r2] = useState(true), t2 = useRef([n2]);
+  s$6(() => {
+    l2 !== false && t2.current[t2.current.length - 1] !== n2 && (t2.current.push(n2), r2(false));
+  }, [t2, n2]);
+  let o2 = useMemo(() => ({ show: n2, appear: m2, initial: l2 }), [n2, m2, l2]);
   useEffect(() => {
-    if (r2)
-      u2("visible");
-    else if (!U(g2))
-      u2("hidden");
+    if (n2)
+      d2("visible");
+    else if (!I(v2))
+      d2("hidden");
     else {
-      let T2 = p2.current;
-      if (!T2)
+      let a2 = E2.current;
+      if (!a2)
         return;
-      let l2 = T2.getBoundingClientRect();
-      l2.x === 0 && l2.y === 0 && l2.width === 0 && l2.height === 0 && u2("hidden");
-    }
-  }, [r2, g2]);
-  let o2 = { unmount: R2 }, f2 = o$4(() => {
-    var T2;
-    d2 && i2(false), (T2 = t2.beforeEnter) == null || T2.call(t2);
-  }), N2 = o$4(() => {
-    var T2;
-    d2 && i2(false), (T2 = t2.beforeLeave) == null || T2.call(t2);
-  });
-  return React__default.createElement(M.Provider, { value: g2 }, React__default.createElement(I.Provider, { value: a2 }, C({ ourProps: { ...o2, as: Fragment$1, children: React__default.createElement(ue, { ref: x2, ...o2, ...D2, beforeEnter: f2, beforeLeave: N2 }) }, theirProps: {}, defaultTag: Fragment$1, features: le, visible: v2 === "visible", name: "Transition" })));
-}
-function _e(t2, n2) {
-  let r2 = useContext(I) !== null, s2 = u$2() !== null;
-  return React__default.createElement(React__default.Fragment, null, !r2 && s2 ? React__default.createElement(q, { ref: n2, ...t2 }) : React__default.createElement(ue, { ref: n2, ...t2 }));
-}
-let q = U$2(Fe), ue = U$2(He), Le = U$2(_e), qe = Object.assign(q, { Child: Le, Root: q });
+      let x2 = a2.getBoundingClientRect();
+      x2.x === 0 && x2.y === 0 && x2.width === 0 && x2.height === 0 && d2("hidden");
+    }
+  }, [n2, v2]);
+  let f2 = { unmount: R };
+  return React.createElement(M.Provider, { value: v2 }, React.createElement(A.Provider, { value: o2 }, $$1({ ourProps: { ...f2, as: Fragment$1, children: React.createElement(oe, { ref: S2, ...f2, ...b }) }, theirProps: {}, defaultTag: Fragment$1, features: ie, visible: p$12 === "visible", name: "Transition" })));
+}), ye = C$1(function(e2, s2) {
+  let n2 = useContext(A) !== null, m2 = s$3() !== null;
+  return React.createElement(React.Fragment, null, !n2 && m2 ? React.createElement(J, { ref: s2, ...e2 }) : React.createElement(oe, { ref: s2, ...e2 }));
+}), Je = Object.assign(J, { Child: ye, Root: J });
 function Modal(props) {
   const {
     children,
@@ -10754,11 +10341,11 @@ function Modal(props) {
     isModal: true
   });
   return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx(qe, {
+    children: /* @__PURE__ */ jsx(Je, {
       appear: true,
       show: isOpen,
       as: Fragment$1,
-      children: /* @__PURE__ */ jsx(_t, {
+      children: /* @__PURE__ */ jsx(mt, {
         as: "div",
         className: "fixed inset-0 z-10 overflow-y-auto",
         style: {
@@ -10767,7 +10354,7 @@ function Modal(props) {
         onClose: handleClose,
         children: /* @__PURE__ */ jsxs("div", {
           className: "min-h-screen text-center sm:px-4",
-          children: [/* @__PURE__ */ jsx(qe.Child, {
+          children: [/* @__PURE__ */ jsx(Je.Child, {
             as: Fragment$1,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0",
@@ -10775,14 +10362,14 @@ function Modal(props) {
             leave: "ease-in duration-200",
             leaveFrom: "opacity-100",
             leaveTo: "opacity-0",
-            children: /* @__PURE__ */ jsx(_t.Overlay, {
+            children: /* @__PURE__ */ jsx(mt.Overlay, {
               className: "fixed inset-0"
             })
           }), /* @__PURE__ */ jsx("span", {
             className: "inline-block h-screen align-middle",
             "aria-hidden": "true",
             children: "\u200B"
-          }), /* @__PURE__ */ jsx(qe.Child, {
+          }), /* @__PURE__ */ jsx(Je.Child, {
             as: Fragment$1,
             enter: "ease-out duration-300",
             enterFrom: "opacity-0 scale-95",
@@ -10983,6 +10570,81 @@ function MenuProductRootDefaultUI(props) {
     })
   });
 }
+const getValidationMap2 = (product, selected = {}, filter, map, nestedLvl = 0) => {
+  var _a, _b;
+  const res = map || {};
+  if (nestedLvl === 0 || ((_a = selected[product.selCtx]) == null ? void 0 : _a[product.id])) {
+    (_b = product == null ? void 0 : product.items) == null ? void 0 : _b.forEach((x2) => {
+      var _a2, _b2, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      if (x2.kind === EProductKind.OPTIONS && (((_a2 = x2.attrs) == null ? void 0 : _a2.vital) || ((_b2 = x2 == null ? void 0 : x2.attrs) == null ? void 0 : _b2.selMin) || ((_c = x2.attrs) == null ? void 0 : _c.selMax) || ((_d = x2.attrs) == null ? void 0 : _d.qtyMin) || ((_e2 = x2.attrs) == null ? void 0 : _e2.qtyMax) || ((_f = x2.attrs) == null ? void 0 : _f.allowMultiple))) {
+        const [selCnt, qtyCnt] = getSelCtxCntFromSelectedState(
+          x2.selCtx,
+          selected,
+          x2.items
+        );
+        const isFilterValidated = validateProductFilter(product, filter);
+        res[x2.selCtx] = {
+          isSelCntAllowedToIncrement: selCnt < Number(((_g = x2 == null ? void 0 : x2.attrs) == null ? void 0 : _g.selMax) || Number.MAX_SAFE_INTEGER),
+          isQtyCntAllowedToIncrement: qtyCnt < Number(((_h = x2 == null ? void 0 : x2.attrs) == null ? void 0 : _h.qtyMax) || Number.MAX_SAFE_INTEGER),
+          nestedLvl,
+          isPassedFiltering: isFilterValidated,
+          isValid: inRange(
+            selCnt,
+            Number(((_i = x2.attrs) == null ? void 0 : _i.selMin) || 0),
+            Number(((_j = x2.attrs) == null ? void 0 : _j.selMax) || Number.MAX_SAFE_INTEGER) + 1
+          ) && inRange(
+            qtyCnt,
+            Number(((_k = x2.attrs) == null ? void 0 : _k.qtyMin) || 0),
+            Number(((_l = x2.attrs) == null ? void 0 : _l.qtyMax) || Number.MAX_SAFE_INTEGER) + 1
+          ) && (((_m = x2.attrs) == null ? void 0 : _m.vital) !== true || selCnt > 0) && (((_n = x2.attrs) == null ? void 0 : _n.allowMultiple) === true || qtyCnt - selCnt === 0)
+        };
+      }
+      if ((x2 == null ? void 0 : x2.items) && ((_o = x2.items) == null ? void 0 : _o.length) > 0) {
+        (_p = x2.items) == null ? void 0 : _p.forEach((item) => {
+          getValidationMap2(item, selected, filter, res, nestedLvl + 1);
+        });
+      }
+    });
+  }
+  return res;
+};
+const GroupsValidationContext = React.createContext(null);
+function GroupsValidationProvivider({
+  rootProduct,
+  children
+}) {
+  return /* @__PURE__ */ jsx(GroupsValidationContext.Provider, {
+    value: {
+      rootProduct
+    },
+    children
+  });
+}
+function useGroupsValidation(product) {
+  const context = useContext(GroupsValidationContext);
+  const selected = useWatch({
+    name: "selected"
+  });
+  const filter = useWatch({
+    name: "filter"
+  });
+  const [validationMap2, setValidationMap2] = useState(void 0);
+  if (!context) {
+    throw new Error("Missing ComponentsContext");
+  }
+  useEffect(() => {
+    console.log("useGroupsValidation validationMap2 change");
+  }, [validationMap2]);
+  useEffect(() => {
+    const newMap = getValidationMap2(product, selected, filter);
+    if (!isEqual(newMap, validationMap2)) {
+      setValidationMap2(newMap);
+    }
+  }, [selected, filter]);
+  return {
+    validationMap2
+  };
+}
 const MenuProductRoot = (props) => {
   const {
     product
@@ -10990,6 +10652,9 @@ const MenuProductRoot = (props) => {
   const {
     MenuProductRootUI
   } = useComponents();
+  const {
+    validationMap2
+  } = useGroupsValidation(product);
   const MenuItemsDispatcherWrapper = !isEmpty(product.items) ? /* @__PURE__ */ jsx(MenuItemsDispatcher, {
     productItems: product.items,
     parentProduct: product,
@@ -10998,16 +10663,18 @@ const MenuProductRoot = (props) => {
   if (MenuProductRootUI) {
     return /* @__PURE__ */ jsx(MenuProductRootUI, {
       ...props,
+      validationMap: validationMap2 || {},
       children: MenuItemsDispatcherWrapper
     });
   }
   return /* @__PURE__ */ jsx(MenuProductRootDefaultUI, {
     ...props,
+    validationMap: validationMap2 || {},
     children: MenuItemsDispatcherWrapper
   });
 };
 var style = "";
-const ProductDataContext = React__default.createContext(null);
+const ProductDataContext = React.createContext(null);
 function ProductDataProvider({
   rootProduct,
   children
@@ -11047,27 +10714,20 @@ function ProductConfigurator(props) {
     productQuantity,
     setIsOnSubmittedOnTrue,
     getInvalidSelCtxArray,
-    getValidationMap,
     increaseProductQuantity,
     decreaseProductQuantity,
     setCurrency
   } = useProductConfigurator(product);
-  const [validationMap, setValidationMap] = useState(getValidationMap());
   useEffect(() => {
     instance.changeLanguage(lang);
   }, [lang]);
   useEffect(() => {
     setCurrency(currency);
   }, [currency]);
-  useEffect(() => {
-    const validationMapNew = getValidationMap();
-    if (!isEqual(validationMapNew, validationMap)) {
-      setValidationMap(validationMapNew);
-    }
-  });
   const methods = useForm({
     defaultValues: {
-      selected: initSelected
+      selected: initSelected,
+      filter: initFilter
     }
   });
   const {
@@ -11076,14 +10736,15 @@ function ProductConfigurator(props) {
   const countedProductPrice = Number((parseFloat(price || "0") + countPrice(getValues("selected"), encodedProduct)).toFixed(2));
   const onSubmit = () => {
     var _a;
-    console.log("onSubmit");
     setIsOnSubmittedOnTrue();
-    const invalidContextNames = getInvalidSelCtxArray();
-    if (invalidContextNames.length) {
-      scrollToId(getOptionsKindId(invalidContextNames[0]));
-      console.log({
-        invalidContextNames
-      });
+    const validationMap = getValidationMap2(product, getValues("selected"), getValues("filter"));
+    console.log("onSubmit product-configurator", validationMap);
+    const isInvalid = Object.keys(validationMap).some(function(key) {
+      const el = validationMap[key];
+      return el.isValid === false;
+    });
+    if (isInvalid) {
+      console.warn("INVALID VALIDATION MAP product-configurator", validationMap);
     } else {
       console.log("selected", getValues("selected"));
       const decodedCleanedSelected = decodeSelected(cleanSelected(getValues("selected")));
@@ -11097,7 +10758,7 @@ function ProductConfigurator(props) {
           }
         }
       });
-      console.log("decodedCleanedSelected: ", decodedCleanedSelected);
+      console.log("decodedCleanedSelected product-configurator: ", decodedCleanedSelected);
       handleAddToCart({
         price: countedProductPrice,
         quantity: productQuantity,
@@ -11118,19 +10779,21 @@ function ProductConfigurator(props) {
             children: [showDebugState && /* @__PURE__ */ jsx("div", {
               className: "hidden",
               children: /* @__PURE__ */ jsx(DisplayState, {})
-            }), /* @__PURE__ */ jsx(MenuProductRoot, {
-              product: encodedProduct,
-              productQuantity,
-              validationMap,
-              isOpen,
-              handleClose,
-              handleGoBack,
-              handleOnSubmit,
-              countedProductPrice,
-              countedProductTotalPrice: countedProductPrice * productQuantity,
-              increaseProductQuantity,
-              decreaseProductQuantity,
-              currency
+            }), /* @__PURE__ */ jsx(GroupsValidationProvivider, {
+              rootProduct: encodedProduct,
+              children: /* @__PURE__ */ jsx(MenuProductRoot, {
+                product: encodedProduct,
+                productQuantity,
+                isOpen,
+                handleClose,
+                handleGoBack,
+                handleOnSubmit,
+                countedProductPrice,
+                countedProductTotalPrice: countedProductPrice * productQuantity,
+                increaseProductQuantity,
+                decreaseProductQuantity,
+                currency
+              })
             })]
           })
         })
@@ -11138,5 +10801,5 @@ function ProductConfigurator(props) {
     })
   });
 }
-export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus, getProductToChangeInForm, index_esm as hookForm, selectProductsInForm, unselectProductsInForm, useMenuOptions, useProductData, validateProductFilter };
+export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus, getProductToChangeInForm, index_esm as hookForm, selectProductsInForm, unselectProductsInForm, useMenuOptions, useProductData, useStore, validateProductFilter };
 //# sourceMappingURL=index.es.js.map