pixel-react 1.10.10-3 → 1.10.11

package/lib/index.js

@@ -4049,6 +4049,8 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -5038,11 +5040,12 @@ var KeyboardCode;
   KeyboardCode["Up"] = "ArrowUp";
   KeyboardCode["Esc"] = "Escape";
   KeyboardCode["Enter"] = "Enter";
+  KeyboardCode["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 const defaultKeyboardCodes = {
   start: [KeyboardCode.Space, KeyboardCode.Enter],
   cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter]
+  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -5341,6 +5344,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
+    if (events.cancel) {
+      this.listeners.add(events.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -5356,9 +5362,11 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
+        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
+        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -5375,6 +5383,13 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
+  handlePending(constraint, offset) {
+    const {
+      active,
+      onPending
+    } = this.props;
+    onPending(active, constraint, this.initialCoordinates, offset);
+  }
   handleStart() {
     const {
       initialCoordinates
@@ -5428,6 +5443,7 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
+      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -5437,16 +5453,24 @@ class AbstractPointerSensor {
   }
   handleEnd() {
     const {
+      onAbort,
       onEnd
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onEnd();
   }
   handleCancel() {
     const {
+      onAbort,
       onCancel
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onCancel();
   }
   handleKeydown(event) {
@@ -5460,6 +5484,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: 'pointercancel'
+  },
   move: {
     name: 'pointermove'
   },
@@ -5532,6 +5559,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: 'touchcancel'
+  },
   move: {
     name: 'touchmove'
   },
@@ -5733,11 +5763,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo(cachedNode => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     } // In some cases, the draggable node can unmount while dragging
     // This is the case for virtualized lists. In those situations,
@@ -5945,7 +5975,26 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = React.useReducer(reducer, null);
+  const [rect, setRect] = React.useState(null);
+  function measureRect() {
+    setRect(currentRect => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+
+        // Fall back to last rect we measured if the element is
+        // no longer connected to the DOM.
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -5980,23 +6029,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-
-      // Fall back to last rect we measured if the element is
-      // no longer connected to the DOM.
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -6142,28 +6174,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
+  const [rects, setRects] = React.useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect$1(() => {
-    if (elements.length) {
-      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -6330,7 +6358,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -6602,7 +6630,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -6637,7 +6665,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -6715,6 +6743,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = React.useRef(null);
   const instantiateSensor = React.useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -6736,6 +6765,43 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       // Sensors need to be instantiated with refs for arguments that change over time
       // otherwise they are frozen in time with the stale arguments
       context: sensorContext,
+      onAbort(id) {
+        const draggableNode = draggableNodes.get(id);
+        if (!draggableNode) {
+          return;
+        }
+        const {
+          onDragAbort
+        } = latestProps.current;
+        const event = {
+          id
+        };
+        onDragAbort == null ? void 0 : onDragAbort(event);
+        dispatchMonitorEvent({
+          type: 'onDragAbort',
+          event
+        });
+      },
+      onPending(id, constraint, initialCoordinates, offset) {
+        const draggableNode = draggableNodes.get(id);
+        if (!draggableNode) {
+          return;
+        }
+        const {
+          onDragPending
+        } = latestProps.current;
+        const event = {
+          id,
+          constraint,
+          initialCoordinates,
+          offset
+        };
+        onDragPending == null ? void 0 : onDragPending(event);
+        dispatchMonitorEvent({
+          type: 'onDragPending',
+          event
+        });
+      },
       onStart(initialCoordinates) {
         const id = activeRef.current;
         if (id == null) {
@@ -6749,6 +6815,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
+          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -6767,6 +6834,8 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
+          setActiveSensor(activeSensorRef.current);
+          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -6778,10 +6847,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    ReactDOM.unstable_batchedUpdates(() => {
-      setActiveSensor(sensorInstance);
-      setActivatorEvent(event.nativeEvent);
-    });
+    activeSensorRef.current = sensorInstance;
     function createHandler(type) {
       return async function handler() {
         const {
@@ -6818,6 +6884,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           setOver(null);
           setActiveSensor(null);
           setActivatorEvent(null);
+          activeSensorRef.current = null;
           const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
           if (event) {
             const handler = latestProps.current[eventName];
@@ -7039,7 +7106,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Droppable';
+const ID_PREFIX$1 = 'Draggable';
 function useDraggable(_ref) {
   let {
     id,
@@ -7186,7 +7253,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$1(() => {
+  React.useEffect(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -7601,6 +7668,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
+  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -11438,13 +11506,14 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
         copy = new Date(data);
     }
     else if (data instanceof Set) {
         copy = new Set(data);
     }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject$2(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -11503,7 +11572,7 @@ var set$1 = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__') {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
             return;
         }
         object[key] = newValue;
@@ -11722,7 +11791,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return getProxyFormState(formState, control, _localProxyFormState.current, false);
+    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -11818,6 +11887,67 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+        invalid: {
+            enumerable: true,
+            get: () => !!get$1(formState.errors, name),
+        },
+        isDirty: {
+            enumerable: true,
+            get: () => !!get$1(formState.dirtyFields, name),
+        },
+        isTouched: {
+            enumerable: true,
+            get: () => !!get$1(formState.touchedFields, name),
+        },
+        isValidating: {
+            enumerable: true,
+            get: () => !!get$1(formState.validatingFields, name),
+        },
+        error: {
+            enumerable: true,
+            get: () => get$1(formState.errors, name),
+        },
+    }), [formState, name]);
+    const field = React.useMemo(() => ({
+        name,
+        value,
+        ...(isBoolean(disabled) || formState.disabled
+            ? { disabled: formState.disabled || disabled }
+            : {}),
+        onChange: (event) => _registerProps.current.onChange({
+            target: {
+                value: getEventValue(event),
+                name: name,
+            },
+            type: EVENTS.CHANGE,
+        }),
+        onBlur: () => _registerProps.current.onBlur({
+            target: {
+                value: get$1(control._formValues, name),
+                name: name,
+            },
+            type: EVENTS.BLUR,
+        }),
+        ref: (elm) => {
+            const field = get$1(control._fields, name);
+            if (field && elm) {
+                field._f.ref = {
+                    focus: () => elm.focus(),
+                    select: () => elm.select(),
+                    setCustomValidity: (message) => elm.setCustomValidity(message),
+                    reportValidity: () => elm.reportValidity(),
+                };
+            }
+        },
+    }), [
+        name,
+        control._formValues,
+        disabled,
+        formState.disabled,
+        value,
+        control._fields,
+    ]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
@@ -11843,7 +11973,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (get$1(control._fields, name)) {
+        if (isBoolean(disabled) && get$1(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -11852,63 +11982,11 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return {
-        field: {
-            name,
-            value,
-            ...(isBoolean(disabled) || formState.disabled
-                ? { disabled: formState.disabled || disabled }
-                : {}),
-            onChange: React.useCallback((event) => _registerProps.current.onChange({
-                target: {
-                    value: getEventValue(event),
-                    name: name,
-                },
-                type: EVENTS.CHANGE,
-            }), [name]),
-            onBlur: React.useCallback(() => _registerProps.current.onBlur({
-                target: {
-                    value: get$1(control._formValues, name),
-                    name: name,
-                },
-                type: EVENTS.BLUR,
-            }), [name, control]),
-            ref: React.useCallback((elm) => {
-                const field = get$1(control._fields, name);
-                if (field && elm) {
-                    field._f.ref = {
-                        focus: () => elm.focus(),
-                        select: () => elm.select(),
-                        setCustomValidity: (message) => elm.setCustomValidity(message),
-                        reportValidity: () => elm.reportValidity(),
-                    };
-                }
-            }, [control._fields, name]),
-        },
+    return React.useMemo(() => ({
+        field,
         formState,
-        fieldState: Object.defineProperties({}, {
-            invalid: {
-                enumerable: true,
-                get: () => !!get$1(formState.errors, name),
-            },
-            isDirty: {
-                enumerable: true,
-                get: () => !!get$1(formState.dirtyFields, name),
-            },
-            isTouched: {
-                enumerable: true,
-                get: () => !!get$1(formState.touchedFields, name),
-            },
-            isValidating: {
-                enumerable: true,
-                get: () => !!get$1(formState.validatingFields, name),
-            },
-            error: {
-                enumerable: true,
-                get: () => get$1(formState.errors, name),
-            },
-        }),
-    };
+        fieldState,
+    }), [field, formState, fieldState]);
 }
 
 /**
@@ -11958,7 +12036,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key])) {
+        if (isObjectType(obj[key]) && obj[key] !== null) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -12027,7 +12105,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(action, {
+                    const response = await fetch(String(action), {
                         method,
                         headers: {
                             ...headers,
@@ -12525,7 +12603,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -12534,8 +12612,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    props.rules &&
-        control.register(name, props.rules);
+    rules &&
+        control.register(name, rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -12579,6 +12657,8 @@ function useFieldArray(props) {
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
+        !Array.isArray(get$1(control._fields, name)) &&
+            set$1(control._fields, name, undefined);
         control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
         });
@@ -12893,7 +12973,8 @@ var getRuleValue = (rule) => isUndefined(rule)
             : rule;
 
 const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
+var hasPromiseValidation = (fieldReference) => !!fieldReference &&
+    !!fieldReference.validate &&
     !!((isFunction$1(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
         (isObject$2(fieldReference.validate) &&
@@ -13022,7 +13103,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -13034,7 +13115,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!props.disabled &&
+        if (!_options.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -13050,7 +13131,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !props.disabled) {
+        if (args && method && !_options.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -13114,7 +13195,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!props.disabled) {
+        if (!_options.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -13155,9 +13236,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (props.delayError && error) {
+        if (_options.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(props.delayError);
+            delayErrorCallback(_options.delayError);
         }
         else {
             clearTimeout(timer);
@@ -13250,7 +13331,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !props.disabled &&
+    const _getDirty = (name, data) => !_options.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -13262,7 +13343,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get$1(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get$1(_fields, name);
         let fieldValue = value;
@@ -13395,7 +13476,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (props.mode === 'onBlur') {
+                    if (_options.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -13560,13 +13641,15 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get$1(fields, name)._f)
                     : value;
-            set$1(_formValues, name, inputValue);
+            if (disabled || (!disabled && !isUndefined(inputValue))) {
+                set$1(_formValues, name, inputValue);
+            }
             updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -13582,7 +13665,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : props.disabled,
+                    : _options.disabled,
                 name,
                 value: options.value,
             });
@@ -13592,7 +13675,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || props.disabled }
+                ? { disabled: options.disabled || _options.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -13676,6 +13759,12 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
+        if (_options.disabled) {
+            if (onInvalid) {
+                await onInvalid({ ..._formState.errors }, e);
+            }
+            return;
+        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -13783,7 +13872,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = props.shouldUnregister
+            _formValues = _options.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -13807,7 +13896,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!props.shouldUnregister;
+        _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -13854,7 +13943,9 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect && fieldRef.select();
+                options.shouldSelect &&
+                    isFunction$1(fieldRef.select) &&
+                    fieldRef.select();
             }
         }
     };
@@ -13976,8 +14067,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef();
-    const _values = React.useRef();
+    const _formControl = React.useRef(undefined);
+    const _values = React.useRef(undefined);
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -14055,11 +14146,6 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
-    React.useEffect(() => {
-        if (_formControl.current) {
-            _formControl.current.watch = _formControl.current.watch.bind({});
-        }
-    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -14501,7 +14587,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   }), document.body);
 });
 
-var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
+var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n  cursor: pointer;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
 styleInject(css_248z$R);
 
 const TableHead = /*#__PURE__*/React.memo(({
@@ -14543,36 +14629,36 @@ const TableHead = /*#__PURE__*/React.memo(({
   });
 });
 
-var css_248z$Q = ".fontXs, .add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container, .add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.add-module-container {\n  display: flex;\n}\n.add-module-container .icons {\n  cursor: pointer;\n}\n.add-module-container .ff-add-module-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  padding: 4px 6px;\n  transition: all 0.3s ease-in-out;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container .ff-add-module-label {\n  color: var(--input-default-label-color);\n}\n.add-module-container .ff-add-module-input-container .add-module-input {\n  height: 24px;\n  padding: 0px 6px;\n  width: 330px;\n  border: 0.5px solid var(--nlp-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-module-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}";
+var css_248z$Q = ".fontXs, .add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container, .add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.add-module-container {\n  display: flex;\n}\n.add-module-container .icons {\n  cursor: pointer;\n}\n.add-module-container .ff-add-module-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  padding: 4px 6px;\n  transition: all 0.3s ease-in-out;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container .ff-add-module-label {\n  color: var(--input-default-label-color);\n}\n.add-module-container .ff-add-module-input-container .add-module-input {\n  height: 24px;\n  padding: 0px 6px;\n  width: 430px;\n  border: 0.5px solid var(--nlp-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-module-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}";
 styleInject(css_248z$Q);
 
 const AddModule = ({
   onConfirm,
   onCancel,
   error,
-  value = ''
+  value = '',
+  label = 'Add Script'
 }) => {
-  console.log('🚀 ~ value:', value);
   const [text, setText] = React.useState(value);
   const isValueFilled = !checkEmpty(text);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
-      className: classNames("add-module-container"),
+      className: classNames('add-module-container'),
       children: [jsxRuntime.jsxs("div", {
-        className: classNames("ff-add-module-input-container", {
+        className: classNames('ff-add-module-input-container', {
           'ff-add-module-input-container--float': isValueFilled
         }),
         children: [jsxRuntime.jsx("label", {
-          className: 'ff-add-module-label-container',
-          htmlFor: 'add-module-input',
+          className: "ff-add-module-label-container",
+          htmlFor: "add-module-input",
           children: jsxRuntime.jsx("span", {
             className: classNames('ff-add-module-label', {
               'ff-input-label--no-hover': !!text
             }),
-            children: "Edit Script"
+            children: label
           })
         }), jsxRuntime.jsx("input", {
-          name: 'add-module-input',
+          name: "add-module-input",
           type: "text",
           className: "add-module-input",
           onChange: e => setText(e.target.value),
@@ -14584,14 +14670,14 @@ const AddModule = ({
           className: "icons",
           name: "update_icon",
           onClick: () => onConfirm && onConfirm(text),
-          color: 'var(--label-edit-confirm-icon)',
+          color: "var(--label-edit-confirm-icon)",
           height: 18,
           width: 18
         }), jsxRuntime.jsx(Icon, {
           className: "icons",
           name: "close",
           onClick: onCancel,
-          color: 'var(--label-edit-cancel-icon)',
+          color: "var(--label-edit-cancel-icon)",
           height: 14,
           width: 14
         })]
@@ -14602,6 +14688,8 @@ const AddModule = ({
   });
 };
 
+const SvgSpinner = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("style", null, "\r\n    .spinner_DupU {\r\n      animation: spinner_sM3D 1.2s infinite;\r\n      fill: #71347b;\r\n    }\r\n    .spinner_GWtZ { animation-delay: .1s; }\r\n    .spinner_dwN6 { animation-delay: .2s; }\r\n    .spinner_46QP { animation-delay: .3s; }\r\n    .spinner_PD82 { animation-delay: .4s; }\r\n    .spinner_eUgh { animation-delay: .5s; }\r\n    .spinner_eUaP { animation-delay: .6s; }\r\n    .spinner_j38H { animation-delay: .7s; }\r\n    .spinner_tVmX { animation-delay: .8s; }\r\n    .spinner_DQhX { animation-delay: .9s; }\r\n    .spinner_GIL4 { animation-delay: 1s; }\r\n    .spinner_n0Yb { animation-delay: 1.1s; }\r\n\r\n    @keyframes spinner_sM3D {\r\n      0%, 50% {\r\n        animation-timing-function: cubic-bezier(0, 1, 0, 1);\r\n        r: 0;\r\n      }\r\n      10% {\r\n        animation-timing-function: cubic-bezier(.53, 0, .61, .73);\r\n        r: 2px;\r\n      }\r\n    }\r\n  "), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU", cx: 12, cy: 3, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GWtZ", cx: 16.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_n0Yb", cx: 7.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_dwN6", cx: 19.79, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GIL4", cx: 4.21, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_46QP", cx: 21, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_DQhX", cx: 3, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_PD82", cx: 19.79, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_tVmX", cx: 4.21, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUgh", cx: 16.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_j38H", cx: 7.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUaP", cx: 12, cy: 21, r: 0 }));
+
 const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -14627,7 +14715,8 @@ const TableCell = /*#__PURE__*/React.memo(({
   onCheckBoxChange,
   onToggleExpand,
   onAddConfirm,
-  onAddCancel
+  onAddCancel,
+  isExpanding
 }) => {
   React.useEffect(() => {
     const handleHover = (event, isHovering) => {
@@ -14665,10 +14754,10 @@ const TableCell = /*#__PURE__*/React.memo(({
     children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxRuntime.jsxs("div", {
       className: "tree-title-container",
       children: [col.isTree && jsxRuntime.jsx("span", {
-        className: `tree-table-space-block tree-table-space-block-${node.hierarchy} last-block  ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
+        className: `tree-table-space-block tree-table-space-block-${node.hierarchy} last-block  ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
         children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxRuntime.jsxs("span", {
           onClick: () => onToggleExpand(node),
-          children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
+          children: [' ', isExpanding ? jsxRuntime.jsx(SvgSpinner, {}) : jsxRuntime.jsx(SvgArrowsDownIcon, {})]
         })
       }), jsxRuntime.jsxs("span", {
         className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
@@ -14687,13 +14776,14 @@ const TableCell = /*#__PURE__*/React.memo(({
           onCancel: onAddCancel,
           onConfirm: onAddConfirm,
           error: node?.error || '',
-          value: node.value
+          value: node.value,
+          label: node?.label || ''
         }) : jsxRuntime.jsx("span", {
           className: "tree-table-td-content-text",
           children: prepareData(node, col)
         })]
       })]
-    }), col.actions && jsxRuntime.jsx("div", {
+    }), col.actions && !node?.isNewNode && jsxRuntime.jsx("div", {
       className: `table-tree-row-action`,
       children: (() => {
         return col.actions(node, treeRowRef);
@@ -14711,7 +14801,8 @@ const TableRow = /*#__PURE__*/React.memo(({
   onToggleExpand,
   onCheckBoxChange,
   onAddConfirm,
-  onAddCancel
+  onAddCancel,
+  isExpanding
 }) => {
   const treeRowRef = React.useRef(null);
   return jsxRuntime.jsx("tr", {
@@ -14728,7 +14819,8 @@ const TableRow = /*#__PURE__*/React.memo(({
       onCheckBoxChange: onCheckBoxChange,
       onToggleExpand: onToggleExpand,
       onAddConfirm: onAddConfirm,
-      onAddCancel: onAddCancel
+      onAddCancel: onAddCancel,
+      isExpanding: isExpanding
     }, col.name))
   });
 });
@@ -14738,7 +14830,8 @@ const addNewRow = (treeData, newNode) => {
     sourceId,
     action,
     value = '',
-    error = ''
+    error = '',
+    label
   } = newNode;
   if (!sourceId || !action) return treeData;
   const nodeMap = new Map(treeData.map(node => [node.key, node]));
@@ -14752,7 +14845,8 @@ const addNewRow = (treeData, newNode) => {
     isNewNode: true,
     key: 'new-node',
     value,
-    error
+    error,
+    label
   };
   switch (action) {
     case 'addAbove':
@@ -14781,7 +14875,8 @@ const TableBody = ({
   onCheckBoxChange,
   newNode = {},
   onAddConfirm,
-  onAddCancel
+  onAddCancel,
+  expanding
 }) => {
   if (checkEmpty(flattenedTreeData)) {
     return null;
@@ -14799,7 +14894,8 @@ const TableBody = ({
       onToggleExpand: node => onToggleExpand(node, index),
       onCheckBoxChange: onCheckBoxChange,
       onAddConfirm: onAddConfirm,
-      onAddCancel: onAddCancel
+      onAddCancel: onAddCancel,
+      isExpanding: node.key === expanding
     }, node.key)), jsxRuntime.jsx("tr", {
       id: "ff-table-tree-last-node"
     })]
@@ -14842,14 +14938,11 @@ const TreeTable = ({
   loadMore = () => {},
   tableBorder,
   height = 'auto',
-  newNode = {
-    action: 'addInside',
-    sourceId: 'PAG1013',
-    value: 'newNode'
-  },
+  newNode = {},
   onAddConfirm = _name => {},
   onAddCancel = () => {}
 }) => {
+  const [expanding, setExpanding] = React.useState(null);
   const observerRef = React.useRef(null);
   const isTriggeredAbove = React.useRef(false); // Track if pagination for "above" direction has been triggered
   const isTriggeredBelow = React.useRef(false); // Track if pagination for "below" direction has been triggered
@@ -14921,11 +15014,33 @@ const TreeTable = ({
       throttledLoadMore.cancel();
     };
   }, [treeData, throttledLoadMore]);
-  const handleToggleExpand = React.useCallback((node, index) => onExpand?.(node, index), [onExpand]);
+  React.useEffect(() => {
+    if (expanding) {
+      setExpanding(null);
+    }
+  }, [treeData]);
+  React.useEffect(() => {
+    if (expanding) {
+      setTimeout(() => {
+        if (expanding) {
+          setExpanding(null);
+        }
+      }, 3000);
+    }
+  }, [expanding]);
+  const handleToggleExpand = React.useCallback((node, index) => {
+    if (expanding) return;
+    setExpanding(node.key);
+    onExpand?.(node, index);
+  }, [onExpand, expanding]);
   const handleCheckBoxChange = React.useCallback((e, node) => {
+    if (expanding) return;
     onChange?.(e, node);
-  }, [onChange]);
-  const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
+  }, [onChange, expanding]);
+  const handleRowClick = React.useCallback((e, node) => {
+    if (expanding) return;
+    onClick?.(e, node);
+  }, [onClick, expanding]);
   return jsxRuntime.jsx("div", {
     className: "tree-table-wrap",
     children: jsxRuntime.jsx("div", {
@@ -14949,13 +15064,13 @@ const TreeTable = ({
           onCheckBoxChange: handleCheckBoxChange,
           newNode: newNode,
           onAddConfirm: onAddConfirm,
-          onAddCancel: onAddCancel
+          onAddCancel: onAddCancel,
+          expanding: expanding
         })]
       })
     })
   });
 };
-var TableTree = /*#__PURE__*/React.memo(TreeTable);
 
 var css_248z$P = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n  --dataset-tooltip-title: #($dataset-tooltip-title),\n  --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n  flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border-radius: 8px 8px 0 0;\n  padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  position: relative;\n  border: none;\n  background: none;\n  padding: 0 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n  background-color: var(--input-default-label-color);\n  color: var(--tab-bg-color);\n  height: 12px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 600;\n  padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n  border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n  border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n  background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n  border-radius: 8px;\n  background: white;\n  padding: 0px;\n  justify-content: flex-start;\n  margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n  background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n  position: absolute;\n  top: 2px;\n  right: 0px;\n  width: 6px;\n  height: 6px;\n  background-color: transparent;\n  border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n  background-color: var(--confirm-tick-icon-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n  background-color: var(--delete-text-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
 styleInject(css_248z$P);
@@ -18625,6 +18740,53 @@ function setYear(date, year, options) {
   return date_;
 }
 
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function getBroadcastWeeksInMonth(month, dateLib) {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -18705,6 +18867,15 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
+    /**
+     * Returns the end of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The end of the broadcast week.
+     */
+    this.endOfBroadcastWeek = date => {
+      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -18866,6 +19037,15 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
+    /**
+     * Returns the start of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The start of the broadcast week.
+     */
+    this.startOfBroadcastWeek = date => {
+      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -19348,7 +19528,9 @@ function Weekday(props) {
  * @see https://daypicker.dev/guides/custom-components
  */
 function Weekdays(props) {
-  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("thead", {
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("tr", {
     ...props
   }));
 }
@@ -19451,7 +19633,8 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -19517,7 +19700,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale = enUS$1) {
+locale) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -19607,13 +19790,12 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
   if (!navEnd) return undefined;
   const {
     addMonths,
-    startOfMonth,
-    isBefore
+    startOfMonth
   } = dateLib;
   const year = displayMonth.getFullYear();
   const months = [];
   let month = navStart;
-  while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
+  while (months.length < 12) {
     months.push(month.getMonth());
     month = addMonths(month, 1);
   }
@@ -19621,7 +19803,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -19996,7 +20178,8 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone) {
+ISOWeek, timeZone, /** @since 9.4.0 */
+broadcastCalendar) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -20008,20 +20191,18 @@ ISOWeek, timeZone) {
 }
 
 /** Return the years to show in the dropdown. */
-function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
-  if (!calendarStart) return undefined;
-  if (!calendarEnd) return undefined;
+function getYearOptions(navStart, navEnd, formatters, dateLib) {
+  if (!navStart) return undefined;
+  if (!navEnd) return undefined;
   const {
-    startOfMonth,
     startOfYear,
     endOfYear,
     addYears,
     isBefore,
     isSameYear
   } = dateLib;
-  const month = displayMonth.getMonth();
-  const firstNavYear = startOfYear(calendarStart);
-  const lastNavYear = endOfYear(calendarEnd);
+  const firstNavYear = startOfYear(navStart);
+  const lastNavYear = endOfYear(navEnd);
   const years = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -20029,13 +20210,11 @@ function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, da
     year = addYears(year, 1);
   }
   return years.map(value => {
-    const year = dateLib.Date ? new dateLib.Date(value, month) : new Date(value, month);
-    const disabled = calendarStart && year < startOfMonth(calendarStart) || month && calendarEnd && year > startOfMonth(calendarEnd) || false;
     const label = formatters.formatYearDropdown(value);
     return {
       value,
       label,
-      disabled
+      disabled: false
     };
   });
 }
@@ -20199,29 +20378,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
-/** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks
+    fixedWeeks,
+    broadcastCalendar
   } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
-  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -20233,9 +20413,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -20346,25 +20528,29 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    if (props.fixedWeeks && monthDates.length < 42) {
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
       const extraDates = dates.filter(date => {
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
       });
       monthDates.push(...extraDates);
     }
@@ -20802,27 +20988,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek
+    ISOWeek,
+    broadcastCalendar
   } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -20888,6 +21077,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -20896,12 +21087,19 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
+    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
   } = dateLib;
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -20910,20 +21108,18 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
-  const selectionModifiersMap = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
+    // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -20952,27 +21148,16 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name];
-      selectionStates[name] = days.some(d => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -21377,7 +21562,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.weekStartsOn,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -21396,7 +21581,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
   const {
     captionLayout,
     mode,
@@ -21506,6 +21691,16 @@ function DayPicker(props) {
   const handleDayMouseLeave = React.useCallback((day, modifiers) => e => {
     onDayMouseLeave?.(day.date, modifiers, e);
   }, [onDayMouseLeave]);
+  const handleMonthChange = React.useCallback(date => e => {
+    const selectedMonth = Number(e.target.value);
+    const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
+  const handleYearChange = React.useCallback(date => e => {
+    const selectedYear = Number(e.target.value);
+    const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
   const {
     className,
     style
@@ -21543,6 +21738,8 @@ function DayPicker(props) {
     lang: props.lang,
     nonce: props.nonce,
     title: props.title,
+    role: props.role,
+    "aria-label": props["aria-label"],
     ...dataAttributes
   }, /*#__PURE__*/React.createElement(components.Months, {
     className: classNames[UI.Months],
@@ -21556,17 +21753,8 @@ function DayPicker(props) {
     previousMonth: previousMonth,
     nextMonth: nextMonth
   })), months.map((calendarMonth, displayIndex) => {
-    const handleMonthChange = e => {
-      const selectedMonth = Number(e.target.value);
-      const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
-      goToMonth(month);
-    };
-    const handleYearChange = e => {
-      const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
-      goToMonth(month);
-    };
     const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
-    const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
+    const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
     return /*#__PURE__*/React.createElement(components.Month, {
       className: classNames[UI.Month],
       style: styles?.[UI.Month],
@@ -21587,7 +21775,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleMonthChange,
+      onChange: handleMonthChange(calendarMonth.date),
       options: dropdownMonths,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getMonth()
@@ -21600,7 +21788,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleYearChange,
+      onChange: handleYearChange(calendarMonth.date),
       options: dropdownYears,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getFullYear()
@@ -21647,7 +21835,8 @@ function DayPicker(props) {
           locale
         }),
         className: classNames[UI.WeekNumber],
-        scope: "row"
+        scope: "row",
+        role: "rowheader"
       }, formatWeekNumber(week.weekNumber))), week.days.map(day => {
         const {
           date
@@ -21667,14 +21856,14 @@ function DayPicker(props) {
         }
         const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
         const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-        const ariaLabel = !isInteractive ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
+        const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
         return /*#__PURE__*/React.createElement(components.Day, {
           key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`,
           day: day,
           modifiers: modifiers,
           className: className.join(" "),
           style: style,
-          "aria-hidden": modifiers.hidden || undefined,
+          role: "gridcell",
           "aria-selected": modifiers.selected || undefined,
           "aria-label": ariaLabel,
           "data-day": dateLib.format(date, "yyyy-MM-dd"),
@@ -21685,7 +21874,7 @@ function DayPicker(props) {
           "data-outside": day.outside || undefined,
           "data-focused": modifiers.focused || undefined,
           "data-today": modifiers.today || undefined
-        }, isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
+        }, !modifiers.hidden && isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
           className: classNames[UI.DayButton],
           style: styles?.[UI.DayButton],
           type: "button",
@@ -21700,7 +21889,7 @@ function DayPicker(props) {
           onKeyDown: handleDayKeyDown(day, modifiers),
           onMouseEnter: handleDayMouseEnter(day, modifiers),
           onMouseLeave: handleDayMouseLeave(day, modifiers)
-        }, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
+        }, formatDay(date, dateLib.options, dateLib))) : !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib));
       }));
     }))));
   })), props.footer && (/*#__PURE__*/React.createElement(components.Footer, {
@@ -27781,9 +27970,9 @@ const DashboardDonutChart = ({
 
 var propTypes = {exports: {}};
 
-var reactIs$1 = {exports: {}};
+var reactIs = {exports: {}};
 
-var reactIs_production_min$1 = {};
+var reactIs_production_min = {};
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -27793,10 +27982,10 @@ var reactIs_production_min$1 = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_production_min$1;
-function requireReactIs_production_min$1() {
-  if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
-  hasRequiredReactIs_production_min$1 = 1;
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
   var b = "function" === typeof Symbol && Symbol.for,
     c = b ? Symbol.for("react.element") : 60103,
     d = b ? Symbol.for("react.portal") : 60106,
@@ -27849,64 +28038,64 @@ function requireReactIs_production_min$1() {
   function A(a) {
     return z(a) === m;
   }
-  reactIs_production_min$1.AsyncMode = l;
-  reactIs_production_min$1.ConcurrentMode = m;
-  reactIs_production_min$1.ContextConsumer = k;
-  reactIs_production_min$1.ContextProvider = h;
-  reactIs_production_min$1.Element = c;
-  reactIs_production_min$1.ForwardRef = n;
-  reactIs_production_min$1.Fragment = e;
-  reactIs_production_min$1.Lazy = t;
-  reactIs_production_min$1.Memo = r;
-  reactIs_production_min$1.Portal = d;
-  reactIs_production_min$1.Profiler = g;
-  reactIs_production_min$1.StrictMode = f;
-  reactIs_production_min$1.Suspense = p;
-  reactIs_production_min$1.isAsyncMode = function (a) {
+  reactIs_production_min.AsyncMode = l;
+  reactIs_production_min.ConcurrentMode = m;
+  reactIs_production_min.ContextConsumer = k;
+  reactIs_production_min.ContextProvider = h;
+  reactIs_production_min.Element = c;
+  reactIs_production_min.ForwardRef = n;
+  reactIs_production_min.Fragment = e;
+  reactIs_production_min.Lazy = t;
+  reactIs_production_min.Memo = r;
+  reactIs_production_min.Portal = d;
+  reactIs_production_min.Profiler = g;
+  reactIs_production_min.StrictMode = f;
+  reactIs_production_min.Suspense = p;
+  reactIs_production_min.isAsyncMode = function (a) {
     return A(a) || z(a) === l;
   };
-  reactIs_production_min$1.isConcurrentMode = A;
-  reactIs_production_min$1.isContextConsumer = function (a) {
+  reactIs_production_min.isConcurrentMode = A;
+  reactIs_production_min.isContextConsumer = function (a) {
     return z(a) === k;
   };
-  reactIs_production_min$1.isContextProvider = function (a) {
+  reactIs_production_min.isContextProvider = function (a) {
     return z(a) === h;
   };
-  reactIs_production_min$1.isElement = function (a) {
+  reactIs_production_min.isElement = function (a) {
     return "object" === typeof a && null !== a && a.$$typeof === c;
   };
-  reactIs_production_min$1.isForwardRef = function (a) {
+  reactIs_production_min.isForwardRef = function (a) {
     return z(a) === n;
   };
-  reactIs_production_min$1.isFragment = function (a) {
+  reactIs_production_min.isFragment = function (a) {
     return z(a) === e;
   };
-  reactIs_production_min$1.isLazy = function (a) {
+  reactIs_production_min.isLazy = function (a) {
     return z(a) === t;
   };
-  reactIs_production_min$1.isMemo = function (a) {
+  reactIs_production_min.isMemo = function (a) {
     return z(a) === r;
   };
-  reactIs_production_min$1.isPortal = function (a) {
+  reactIs_production_min.isPortal = function (a) {
     return z(a) === d;
   };
-  reactIs_production_min$1.isProfiler = function (a) {
+  reactIs_production_min.isProfiler = function (a) {
     return z(a) === g;
   };
-  reactIs_production_min$1.isStrictMode = function (a) {
+  reactIs_production_min.isStrictMode = function (a) {
     return z(a) === f;
   };
-  reactIs_production_min$1.isSuspense = function (a) {
+  reactIs_production_min.isSuspense = function (a) {
     return z(a) === p;
   };
-  reactIs_production_min$1.isValidElementType = function (a) {
+  reactIs_production_min.isValidElementType = function (a) {
     return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
   };
-  reactIs_production_min$1.typeOf = z;
-  return reactIs_production_min$1;
+  reactIs_production_min.typeOf = z;
+  return reactIs_production_min;
 }
 
-var reactIs_development$1 = {};
+var reactIs_development = {};
 
 /** @license React v16.13.1
  * react-is.development.js
@@ -27916,10 +28105,10 @@ var reactIs_development$1 = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_development$1;
-function requireReactIs_development$1() {
-  if (hasRequiredReactIs_development$1) return reactIs_development$1;
-  hasRequiredReactIs_development$1 = 1;
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
   if (process.env.NODE_ENV !== "production") {
     (function () {
 
@@ -28046,49 +28235,49 @@ function requireReactIs_development$1() {
       function isSuspense(object) {
         return typeOf(object) === REACT_SUSPENSE_TYPE;
       }
-      reactIs_development$1.AsyncMode = AsyncMode;
-      reactIs_development$1.ConcurrentMode = ConcurrentMode;
-      reactIs_development$1.ContextConsumer = ContextConsumer;
-      reactIs_development$1.ContextProvider = ContextProvider;
-      reactIs_development$1.Element = Element;
-      reactIs_development$1.ForwardRef = ForwardRef;
-      reactIs_development$1.Fragment = Fragment;
-      reactIs_development$1.Lazy = Lazy;
-      reactIs_development$1.Memo = Memo;
-      reactIs_development$1.Portal = Portal;
-      reactIs_development$1.Profiler = Profiler;
-      reactIs_development$1.StrictMode = StrictMode;
-      reactIs_development$1.Suspense = Suspense;
-      reactIs_development$1.isAsyncMode = isAsyncMode;
-      reactIs_development$1.isConcurrentMode = isConcurrentMode;
-      reactIs_development$1.isContextConsumer = isContextConsumer;
-      reactIs_development$1.isContextProvider = isContextProvider;
-      reactIs_development$1.isElement = isElement;
-      reactIs_development$1.isForwardRef = isForwardRef;
-      reactIs_development$1.isFragment = isFragment;
-      reactIs_development$1.isLazy = isLazy;
-      reactIs_development$1.isMemo = isMemo;
-      reactIs_development$1.isPortal = isPortal;
-      reactIs_development$1.isProfiler = isProfiler;
-      reactIs_development$1.isStrictMode = isStrictMode;
-      reactIs_development$1.isSuspense = isSuspense;
-      reactIs_development$1.isValidElementType = isValidElementType;
-      reactIs_development$1.typeOf = typeOf;
+      reactIs_development.AsyncMode = AsyncMode;
+      reactIs_development.ConcurrentMode = ConcurrentMode;
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
     })();
   }
-  return reactIs_development$1;
+  return reactIs_development;
 }
 
-var hasRequiredReactIs$1;
-function requireReactIs$1() {
-  if (hasRequiredReactIs$1) return reactIs$1.exports;
-  hasRequiredReactIs$1 = 1;
+var hasRequiredReactIs;
+function requireReactIs() {
+  if (hasRequiredReactIs) return reactIs.exports;
+  hasRequiredReactIs = 1;
   if (process.env.NODE_ENV === 'production') {
-    reactIs$1.exports = requireReactIs_production_min$1();
+    reactIs.exports = requireReactIs_production_min();
   } else {
-    reactIs$1.exports = requireReactIs_development$1();
+    reactIs.exports = requireReactIs_development();
   }
-  return reactIs$1.exports;
+  return reactIs.exports;
 }
 
 /*
@@ -28303,7 +28492,7 @@ var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = requireReactIs$1();
+  var ReactIs = requireReactIs();
   var assign = requireObjectAssign();
   var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
   var has = /*@__PURE__*/requireHas();
@@ -28916,7 +29105,7 @@ function requirePropTypes() {
   if (hasRequiredPropTypes) return propTypes.exports;
   hasRequiredPropTypes = 1;
   if (process.env.NODE_ENV !== 'production') {
-    var ReactIs = requireReactIs$1();
+    var ReactIs = requireReactIs();
 
     // By explicitly using `prop-types` you are opting into new development behavior.
     // http://fb.me/prop-types-in-prod
@@ -29151,316 +29340,6 @@ ReCAPTCHA.defaultProps = {
   badge: "bottomright"
 };
 
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
-  var b = "function" === typeof Symbol && Symbol.for,
-    c = b ? Symbol.for("react.element") : 60103,
-    d = b ? Symbol.for("react.portal") : 60106,
-    e = b ? Symbol.for("react.fragment") : 60107,
-    f = b ? Symbol.for("react.strict_mode") : 60108,
-    g = b ? Symbol.for("react.profiler") : 60114,
-    h = b ? Symbol.for("react.provider") : 60109,
-    k = b ? Symbol.for("react.context") : 60110,
-    l = b ? Symbol.for("react.async_mode") : 60111,
-    m = b ? Symbol.for("react.concurrent_mode") : 60111,
-    n = b ? Symbol.for("react.forward_ref") : 60112,
-    p = b ? Symbol.for("react.suspense") : 60113,
-    q = b ? Symbol.for("react.suspense_list") : 60120,
-    r = b ? Symbol.for("react.memo") : 60115,
-    t = b ? Symbol.for("react.lazy") : 60116,
-    v = b ? Symbol.for("react.block") : 60121,
-    w = b ? Symbol.for("react.fundamental") : 60117,
-    x = b ? Symbol.for("react.responder") : 60118,
-    y = b ? Symbol.for("react.scope") : 60119;
-  function z(a) {
-    if ("object" === typeof a && null !== a) {
-      var u = a.$$typeof;
-      switch (u) {
-        case c:
-          switch (a = a.type, a) {
-            case l:
-            case m:
-            case e:
-            case g:
-            case f:
-            case p:
-              return a;
-            default:
-              switch (a = a && a.$$typeof, a) {
-                case k:
-                case n:
-                case t:
-                case r:
-                case h:
-                  return a;
-                default:
-                  return u;
-              }
-          }
-        case d:
-          return u;
-      }
-    }
-  }
-  function A(a) {
-    return z(a) === m;
-  }
-  reactIs_production_min.AsyncMode = l;
-  reactIs_production_min.ConcurrentMode = m;
-  reactIs_production_min.ContextConsumer = k;
-  reactIs_production_min.ContextProvider = h;
-  reactIs_production_min.Element = c;
-  reactIs_production_min.ForwardRef = n;
-  reactIs_production_min.Fragment = e;
-  reactIs_production_min.Lazy = t;
-  reactIs_production_min.Memo = r;
-  reactIs_production_min.Portal = d;
-  reactIs_production_min.Profiler = g;
-  reactIs_production_min.StrictMode = f;
-  reactIs_production_min.Suspense = p;
-  reactIs_production_min.isAsyncMode = function (a) {
-    return A(a) || z(a) === l;
-  };
-  reactIs_production_min.isConcurrentMode = A;
-  reactIs_production_min.isContextConsumer = function (a) {
-    return z(a) === k;
-  };
-  reactIs_production_min.isContextProvider = function (a) {
-    return z(a) === h;
-  };
-  reactIs_production_min.isElement = function (a) {
-    return "object" === typeof a && null !== a && a.$$typeof === c;
-  };
-  reactIs_production_min.isForwardRef = function (a) {
-    return z(a) === n;
-  };
-  reactIs_production_min.isFragment = function (a) {
-    return z(a) === e;
-  };
-  reactIs_production_min.isLazy = function (a) {
-    return z(a) === t;
-  };
-  reactIs_production_min.isMemo = function (a) {
-    return z(a) === r;
-  };
-  reactIs_production_min.isPortal = function (a) {
-    return z(a) === d;
-  };
-  reactIs_production_min.isProfiler = function (a) {
-    return z(a) === g;
-  };
-  reactIs_production_min.isStrictMode = function (a) {
-    return z(a) === f;
-  };
-  reactIs_production_min.isSuspense = function (a) {
-    return z(a) === p;
-  };
-  reactIs_production_min.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
-  };
-  reactIs_production_min.typeOf = z;
-  return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
-
-      // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-      // nor polyfill, then a plain number is used for performance.
-      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-      // (unstable) APIs that have been removed. Can we remove the symbols?
-
-      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-      function isValidElementType(type) {
-        return typeof type === 'string' || typeof type === 'function' ||
-        // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-      }
-      function typeOf(object) {
-        if (typeof object === 'object' && object !== null) {
-          var $$typeof = object.$$typeof;
-          switch ($$typeof) {
-            case REACT_ELEMENT_TYPE:
-              var type = object.type;
-              switch (type) {
-                case REACT_ASYNC_MODE_TYPE:
-                case REACT_CONCURRENT_MODE_TYPE:
-                case REACT_FRAGMENT_TYPE:
-                case REACT_PROFILER_TYPE:
-                case REACT_STRICT_MODE_TYPE:
-                case REACT_SUSPENSE_TYPE:
-                  return type;
-                default:
-                  var $$typeofType = type && type.$$typeof;
-                  switch ($$typeofType) {
-                    case REACT_CONTEXT_TYPE:
-                    case REACT_FORWARD_REF_TYPE:
-                    case REACT_LAZY_TYPE:
-                    case REACT_MEMO_TYPE:
-                    case REACT_PROVIDER_TYPE:
-                      return $$typeofType;
-                    default:
-                      return $$typeof;
-                  }
-              }
-            case REACT_PORTAL_TYPE:
-              return $$typeof;
-          }
-        }
-        return undefined;
-      } // AsyncMode is deprecated along with isAsyncMode
-
-      var AsyncMode = REACT_ASYNC_MODE_TYPE;
-      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-      var ContextConsumer = REACT_CONTEXT_TYPE;
-      var ContextProvider = REACT_PROVIDER_TYPE;
-      var Element = REACT_ELEMENT_TYPE;
-      var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
-      var Lazy = REACT_LAZY_TYPE;
-      var Memo = REACT_MEMO_TYPE;
-      var Portal = REACT_PORTAL_TYPE;
-      var Profiler = REACT_PROFILER_TYPE;
-      var StrictMode = REACT_STRICT_MODE_TYPE;
-      var Suspense = REACT_SUSPENSE_TYPE;
-      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-      function isAsyncMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-          }
-        }
-        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-      }
-      function isConcurrentMode(object) {
-        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-      }
-      function isContextConsumer(object) {
-        return typeOf(object) === REACT_CONTEXT_TYPE;
-      }
-      function isContextProvider(object) {
-        return typeOf(object) === REACT_PROVIDER_TYPE;
-      }
-      function isElement(object) {
-        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-      }
-      function isForwardRef(object) {
-        return typeOf(object) === REACT_FORWARD_REF_TYPE;
-      }
-      function isFragment(object) {
-        return typeOf(object) === REACT_FRAGMENT_TYPE;
-      }
-      function isLazy(object) {
-        return typeOf(object) === REACT_LAZY_TYPE;
-      }
-      function isMemo(object) {
-        return typeOf(object) === REACT_MEMO_TYPE;
-      }
-      function isPortal(object) {
-        return typeOf(object) === REACT_PORTAL_TYPE;
-      }
-      function isProfiler(object) {
-        return typeOf(object) === REACT_PROFILER_TYPE;
-      }
-      function isStrictMode(object) {
-        return typeOf(object) === REACT_STRICT_MODE_TYPE;
-      }
-      function isSuspense(object) {
-        return typeOf(object) === REACT_SUSPENSE_TYPE;
-      }
-      reactIs_development.AsyncMode = AsyncMode;
-      reactIs_development.ConcurrentMode = ConcurrentMode;
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
-    })();
-  }
-  return reactIs_development;
-}
-
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
-  hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === 'production') {
-    reactIs.exports = requireReactIs_production_min();
-  } else {
-    reactIs.exports = requireReactIs_development();
-  }
-  return reactIs.exports;
-}
-
 var hoistNonReactStatics_cjs;
 var hasRequiredHoistNonReactStatics_cjs;
 function requireHoistNonReactStatics_cjs() {
@@ -55039,7 +54918,7 @@ exports.StatusCard = StatusCard;
 exports.TIME_REGEX = TIME_REGEX;
 exports.TWITTER_HANDLE_REGEX = TWITTER_HANDLE_REGEX;
 exports.Table = Table$1;
-exports.TableTree = TableTree;
+exports.TableTree = TreeTable;
 exports.TableWithAccordion = TableWithAccordion;
 exports.Tabs = Tabs;
 exports.TextArea = Textarea;