pixel-react 1.10.10-1 → 1.10.10-3

package/lib/index.js

@@ -2957,7 +2957,7 @@ const Dropdown$1 = ({
       }),
       children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
         className: classNames('ff-select-dropdown-option', {
-          'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
+          'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
         }, currentTheme),
         onClick: () => {
           if ('disable' in option && option['disable']) return;
@@ -3285,7 +3285,8 @@ const Select$1 = ({
         onSaveModal: onSaveModal,
         onCancelModal: onCancelModal,
         modalJSXProps: modalJSXProps,
-        recurrence: recurrence
+        recurrence: recurrence,
+        valueAccessor: valueAccessor
       }), document.body)
     })]
   });
@@ -4048,8 +4049,6 @@ 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,
@@ -5039,12 +5038,11 @@ 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, KeyboardCode.Tab]
+  end: [KeyboardCode.Space, KeyboardCode.Enter]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -5343,9 +5341,6 @@ 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);
@@ -5361,11 +5356,9 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
-        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
-        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -5382,13 +5375,6 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
-  handlePending(constraint, offset) {
-    const {
-      active,
-      onPending
-    } = this.props;
-    onPending(active, constraint, this.initialCoordinates, offset);
-  }
   handleStart() {
     const {
       initialCoordinates
@@ -5442,7 +5428,6 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
-      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -5452,24 +5437,16 @@ 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) {
@@ -5483,9 +5460,6 @@ class AbstractPointerSensor {
   }
 }
 const events = {
-  cancel: {
-    name: 'pointercancel'
-  },
   move: {
     name: 'pointermove'
   },
@@ -5558,9 +5532,6 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
-  cancel: {
-    name: 'touchcancel'
-  },
   move: {
     name: 'touchmove'
   },
@@ -5762,11 +5733,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,
@@ -5974,26 +5945,7 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  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 [rect, measureRect] = React.useReducer(reducer, null);
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -6028,6 +5980,23 @@ 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);
@@ -6173,24 +6142,28 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  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 [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  useIsomorphicLayoutEffect$1(() => {
-    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
-    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+  }
+  useIsomorphicLayoutEffect$1(() => {
+    if (elements.length) {
+      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+    } else {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      measureRects();
+    }
   }, [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) {
@@ -6357,7 +6330,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
+      if (!state.draggable.active) {
         return state;
       }
       return {
@@ -6629,7 +6602,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId != null ? draggableNodes.get(activeId) : null;
+  const node = activeId ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -6664,7 +6637,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
+    activeNode: activeId ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -6742,7 +6715,6 @@ 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,
@@ -6764,43 +6736,6 @@ 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) {
@@ -6814,7 +6749,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
-          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -6833,8 +6767,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
-          setActiveSensor(activeSensorRef.current);
-          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -6846,7 +6778,10 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    activeSensorRef.current = sensorInstance;
+    ReactDOM.unstable_batchedUpdates(() => {
+      setActiveSensor(sensorInstance);
+      setActivatorEvent(event.nativeEvent);
+    });
     function createHandler(type) {
       return async function handler() {
         const {
@@ -6883,7 +6818,6 @@ 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];
@@ -7105,7 +7039,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Draggable';
+const ID_PREFIX$1 = 'Droppable';
 function useDraggable(_ref) {
   let {
     id,
@@ -7252,7 +7186,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -7667,7 +7601,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
-  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -11505,14 +11438,13 @@ 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 || isFileListInstance)) &&
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
         (isArray || isObject$2(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -11571,7 +11503,7 @@ var set$1 = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (key === '__proto__') {
             return;
         }
         object[key] = newValue;
@@ -11790,7 +11722,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -11886,67 +11818,6 @@ 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) => {
@@ -11972,7 +11843,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (isBoolean(disabled) && get$1(control._fields, name)) {
+        if (get$1(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -11981,11 +11852,63 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return React.useMemo(() => ({
-        field,
+    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]),
+        },
         formState,
-        fieldState,
-    }), [field, formState, fieldState]);
+        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),
+            },
+        }),
+    };
 }
 
 /**
@@ -12035,7 +11958,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key]) && obj[key] !== null) {
+        if (isObjectType(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -12104,7 +12027,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
+                    const response = await fetch(action, {
                         method,
                         headers: {
                             ...headers,
@@ -12602,7 +12525,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -12611,8 +12534,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
+    props.rules &&
+        control.register(name, props.rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -12656,8 +12579,6 @@ 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,
         });
@@ -12972,8 +12893,7 @@ 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) &&
@@ -13102,7 +13022,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -13114,7 +13034,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
+        if (!props.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -13130,7 +13050,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -13194,7 +13114,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        if (!props.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -13235,9 +13155,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (_options.delayError && error) {
+        if (props.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
+            delayErrorCallback(props.delayError);
         }
         else {
             clearTimeout(timer);
@@ -13330,7 +13250,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
+    const _getDirty = (name, data) => !props.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -13342,7 +13262,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get$1(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get$1(_fields, name);
         let fieldValue = value;
@@ -13475,7 +13395,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (_options.mode === 'onBlur') {
+                    if (props.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -13640,15 +13560,13 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get$1(fields, name)._f)
                     : value;
-            if (disabled || (!disabled && !isUndefined(inputValue))) {
-                set$1(_formValues, name, 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(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -13664,7 +13582,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -13674,7 +13592,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -13758,12 +13676,6 @@ 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,
@@ -13871,7 +13783,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = _options.shouldUnregister
+            _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -13895,7 +13807,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!_options.shouldUnregister;
+        _state.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -13942,9 +13854,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -14066,8 +13976,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef(undefined);
-    const _values = React.useRef(undefined);
+    const _formControl = React.useRef();
+    const _values = React.useRef();
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -14145,6 +14055,11 @@ 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;
 }
@@ -14586,7 +14501,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}\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\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 {\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: 400px !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}\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(({
@@ -14628,7 +14543,7 @@ const TableHead = /*#__PURE__*/React.memo(({
   });
 });
 
-var css_248z$Q = ".add-module-container {\n  display: flex;\n}\n.add-module-container .icons {\n  cursor: pointer;\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: 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}";
 styleInject(css_248z$Q);
 
 const AddModule = ({
@@ -14639,22 +14554,47 @@ const AddModule = ({
 }) => {
   console.log('🚀 ~ value:', value);
   const [text, setText] = React.useState(value);
+  const isValueFilled = !checkEmpty(text);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
-      className: "add-module-container",
-      children: [jsxRuntime.jsx("input", {
-        type: "text",
-        className: "add-module-input",
-        onChange: e => setText(e.target.value),
-        value: text
-      }), jsxRuntime.jsx(Icon, {
-        className: "icons",
-        name: "update_icon",
-        onClick: () => onConfirm && onConfirm(text)
-      }), jsxRuntime.jsx(Icon, {
-        className: "icons",
-        name: "close",
-        onClick: onCancel
+      className: classNames("add-module-container"),
+      children: [jsxRuntime.jsxs("div", {
+        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',
+          children: jsxRuntime.jsx("span", {
+            className: classNames('ff-add-module-label', {
+              'ff-input-label--no-hover': !!text
+            }),
+            children: "Edit Script"
+          })
+        }), jsxRuntime.jsx("input", {
+          name: 'add-module-input',
+          type: "text",
+          className: "add-module-input",
+          onChange: e => setText(e.target.value),
+          value: text
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-module-icon-container",
+        children: [jsxRuntime.jsx(Icon, {
+          className: "icons",
+          name: "update_icon",
+          onClick: () => onConfirm && onConfirm(text),
+          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)',
+          height: 14,
+          width: 14
+        })]
       })]
     }), jsxRuntime.jsx("small", {
       children: error
@@ -14668,7 +14608,7 @@ const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   if (checkEmpty(parentSiblings)) {
     isLastNode = false;
     if (!isNaN(level)) {
-      siblingsArray = Array(level).fill(true);
+      siblingsArray = Array(level - 1).fill(true);
     }
   }
   return jsxRuntime.jsx("div", {
@@ -14688,47 +14628,79 @@ const TableCell = /*#__PURE__*/React.memo(({
   onToggleExpand,
   onAddConfirm,
   onAddCancel
-}) => jsxRuntime.jsxs("td", {
-  className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
-  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 last-block  ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
-      onClick: () => onToggleExpand(node),
-      children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxRuntime.jsxs("span", {
-        onClick: () => onToggleExpand(node),
-        children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
-      })
-    }), jsxRuntime.jsxs("span", {
-      className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
-      children: [!node?.isNewNode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
-          checked: node?.checked || false,
-          partial: node?.checked === 'partial',
-          onChange: e => onCheckBoxChange(e, node)
-        }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
-          name: node.title,
-          checked: selected.includes(node.id),
-          value: node.id,
-          onChange: e => onCheckBoxChange(e, node)
+}) => {
+  React.useEffect(() => {
+    const handleHover = (event, isHovering) => {
+      const target = event.target;
+      const levelClass = Array.from(target.classList).find(cls => cls.startsWith('tree-table-space-block-'));
+      if (levelClass) {
+        const level = levelClass.split('-').pop();
+        // Check if level is valid before selecting elements
+        if (level) {
+          const sameLevelBlocks = document.querySelectorAll(`.tree-table-space-block-${level}`);
+          sameLevelBlocks.forEach(block => {
+            if (isHovering) {
+              block.classList.add('tree-table-hovered');
+            } else {
+              block.classList.remove('tree-table-hovered');
+            }
+          });
+        }
+      }
+    };
+    const spaceBlocks = document.querySelectorAll('.tree-table-space-block');
+    spaceBlocks.forEach(block => {
+      block.addEventListener('mouseenter', e => handleHover(e, true));
+      block.addEventListener('mouseleave', e => handleHover(e, false));
+    });
+    return () => {
+      spaceBlocks.forEach(block => {
+        block.removeEventListener('mouseenter', e => handleHover(e, true));
+        block.removeEventListener('mouseleave', e => handleHover(e, false));
+      });
+    };
+  }, []);
+  return jsxRuntime.jsxs("td", {
+    className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
+    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'}`,
+        children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxRuntime.jsxs("span", {
+          onClick: () => onToggleExpand(node),
+          children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
+        })
+      }), jsxRuntime.jsxs("span", {
+        className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
+        children: [!node?.isNewNode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
+            checked: node?.checked || false,
+            partial: node?.checked === 'partial',
+            onChange: e => onCheckBoxChange(e, node)
+          }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
+            name: node.key,
+            checked: selected.includes(node.key),
+            value: node.key,
+            onChange: e => onCheckBoxChange(e, node)
+          })]
+        }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
+          onCancel: onAddCancel,
+          onConfirm: onAddConfirm,
+          error: node?.error || '',
+          value: node.value
+        }) : jsxRuntime.jsx("span", {
+          className: "tree-table-td-content-text",
+          children: prepareData(node, col)
         })]
-      }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
-        onCancel: onAddCancel,
-        onConfirm: onAddConfirm,
-        error: node?.error || '',
-        value: node.value
-      }) : jsxRuntime.jsx("span", {
-        className: "tree-table-td-content-text",
-        children: prepareData(node, col)
       })]
+    }), col.actions && jsxRuntime.jsx("div", {
+      className: `table-tree-row-action`,
+      children: (() => {
+        return col.actions(node, treeRowRef);
+      })()
     })]
-  }), col.actions && jsxRuntime.jsx("div", {
-    className: `table-tree-row-action`,
-    children: (() => {
-      return col.actions(node, treeRowRef);
-    })()
-  })]
-}));
+  });
+});
 
 const TableRow = /*#__PURE__*/React.memo(({
   node,
@@ -14892,8 +14864,8 @@ const TreeTable = ({
     const lastNode = document.getElementById('ff-table-tree-last-node');
     // Exit early if essential elements or data are missing
     if (!scrollContainer || !firstNode || !lastNode || !treeData?.length) return;
-    const isLastResourceAbove = treeData[0]?.lastResource;
-    const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
+    const isLastResourceAbove = !!treeData[0]?.lastResource;
+    const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
     // Skip pagination if both last resources are present
     if (isLastResourceAbove && isLastResourceBelow) return;
     const observerCallback = entries => {
@@ -18653,53 +18625,6 @@ 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
@@ -18780,15 +18705,6 @@ 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.
      *
@@ -18950,15 +18866,6 @@ 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.
      *
@@ -19441,9 +19348,7 @@ function Weekday(props) {
  * @see https://daypicker.dev/guides/custom-components
  */
 function Weekdays(props) {
-  return /*#__PURE__*/React.createElement("thead", {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
     ...props
   }));
 }
@@ -19546,8 +19451,7 @@ 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-broadcast-calendar": props.broadcastCalendar || undefined
+    "data-week-numbers": props.showWeekNumber || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -19613,7 +19517,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale) {
+locale = enUS$1) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -19703,12 +19607,13 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
   if (!navEnd) return undefined;
   const {
     addMonths,
-    startOfMonth
+    startOfMonth,
+    isBefore
   } = dateLib;
   const year = displayMonth.getFullYear();
   const months = [];
   let month = navStart;
-  while (months.length < 12) {
+  while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
     months.push(month.getMonth());
     month = addMonths(month, 1);
   }
@@ -19716,7 +19621,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
     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 {
@@ -20091,8 +19996,7 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone, /** @since 9.4.0 */
-broadcastCalendar) {
+ISOWeek, timeZone) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -20104,18 +20008,20 @@ broadcastCalendar) {
 }
 
 /** Return the years to show in the dropdown. */
-function getYearOptions(navStart, navEnd, formatters, dateLib) {
-  if (!navStart) return undefined;
-  if (!navEnd) return undefined;
+function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
+  if (!calendarStart) return undefined;
+  if (!calendarEnd) return undefined;
   const {
+    startOfMonth,
     startOfYear,
     endOfYear,
     addYears,
     isBefore,
     isSameYear
   } = dateLib;
-  const firstNavYear = startOfYear(navStart);
-  const lastNavYear = endOfYear(navEnd);
+  const month = displayMonth.getMonth();
+  const firstNavYear = startOfYear(calendarStart);
+  const lastNavYear = endOfYear(calendarEnd);
   const years = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -20123,11 +20029,13 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
     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: false
+      disabled
     };
   });
 }
@@ -20291,30 +20199,29 @@ 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,
-    broadcastCalendar
+    fixedWeeks
   } = props ?? {};
   const {
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
+    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
-    endOfBroadcastWeek,
-    endOfISOWeek,
-    endOfMonth,
-    endOfWeek,
     isAfter,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    endOfMonth
   } = dateLib;
-  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 startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -20326,11 +20233,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
-  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    const daysToAdd = extraDates - dates.length;
-    for (let i = 0; i < daysToAdd; i++) {
+    for (let i = 0; i < 7; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -20441,29 +20346,25 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    addDays,
-    endOfBroadcastWeek,
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
     endOfISOWeek,
     endOfMonth,
-    endOfWeek,
-    getISOWeek,
+    addDays,
     getWeek,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    getISOWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, 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));
+    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = 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;
     });
-    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
-    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+    if (props.fixedWeeks && monthDates.length < 42) {
       const extraDates = dates.filter(date => {
-        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
       });
       monthDates.push(...extraDates);
     }
@@ -20901,30 +20802,27 @@ 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,
-    broadcastCalendar
+    ISOWeek
   } = props;
   const {
     addDays,
     addMonths,
-    addWeeks,
     addYears,
-    endOfBroadcastWeek,
+    addWeeks,
+    startOfISOWeek,
     endOfISOWeek,
+    startOfWeek,
     endOfWeek,
     max,
-    min,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    min
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -20990,8 +20888,6 @@ 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) {
@@ -21000,19 +20896,12 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
-    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth,
-    startOfMonth,
-    isBefore,
-    endOfMonth,
-    isAfter
+    isSameMonth
   } = dateLib;
-  const startMonth = props.startMonth && startOfMonth(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -21021,18 +20910,20 @@ 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)) || isBeforeStartMonth || isAfterEndMonth ||
-    // Broadcast calendar will show outside days as default
-    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && 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);
@@ -21061,16 +20952,27 @@ 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
@@ -21475,7 +21377,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn: props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -21494,7 +21396,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.broadcastCalendar]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
   const {
     captionLayout,
     mode,
@@ -21604,16 +21506,6 @@ 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
@@ -21651,8 +21543,6 @@ 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],
@@ -21666,8 +21556,17 @@ 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(navStart, navEnd, formatters, dateLib);
+    const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
     return /*#__PURE__*/React.createElement(components.Month, {
       className: classNames[UI.Month],
       style: styles?.[UI.Month],
@@ -21688,7 +21587,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleMonthChange(calendarMonth.date),
+      onChange: handleMonthChange,
       options: dropdownMonths,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getMonth()
@@ -21701,7 +21600,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleYearChange(calendarMonth.date),
+      onChange: handleYearChange,
       options: dropdownYears,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getFullYear()
@@ -21748,8 +21647,7 @@ function DayPicker(props) {
           locale
         }),
         className: classNames[UI.WeekNumber],
-        scope: "row",
-        role: "rowheader"
+        scope: "row"
       }, formatWeekNumber(week.weekNumber))), week.days.map(day => {
         const {
           date
@@ -21769,14 +21667,14 @@ function DayPicker(props) {
         }
         const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
         const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-        const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
+        const ariaLabel = !isInteractive ? 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,
-          role: "gridcell",
+          "aria-hidden": modifiers.hidden || undefined,
           "aria-selected": modifiers.selected || undefined,
           "aria-label": ariaLabel,
           "data-day": dateLib.format(date, "yyyy-MM-dd"),
@@ -21787,7 +21685,7 @@ function DayPicker(props) {
           "data-outside": day.outside || undefined,
           "data-focused": modifiers.focused || undefined,
           "data-today": modifiers.today || undefined
-        }, !modifiers.hidden && isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
+        }, isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
           className: classNames[UI.DayButton],
           style: styles?.[UI.DayButton],
           type: "button",
@@ -21802,7 +21700,7 @@ function DayPicker(props) {
           onKeyDown: handleDayKeyDown(day, modifiers),
           onMouseEnter: handleDayMouseEnter(day, modifiers),
           onMouseLeave: handleDayMouseLeave(day, modifiers)
-        }, formatDay(date, dateLib.options, dateLib))) : !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib));
+        }, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
       }));
     }))));
   })), props.footer && (/*#__PURE__*/React.createElement(components.Footer, {
@@ -27301,12 +27199,13 @@ const PieChart = ({
   });
 };
 
-var css_248z$F = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  z-index: 1000;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 4px;\n  padding-bottom: 16px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n  overflow: hidden;\n  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n  max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  flex-grow: 12; /* Increase size on hover */\n  max-width: 700px;\n  opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n  margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n  animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n  animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}\n@keyframes quickmenu-expand {\n  from {\n    max-height: 0;\n    opacity: 0;\n  }\n  to {\n    max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n    opacity: 1;\n  }\n}\n@keyframes quickmenu-collapse {\n  from {\n    max-height: 500px;\n    opacity: 1;\n  }\n  to {\n    max-height: 0;\n    opacity: 0;\n  }\n}";
+var css_248z$F = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  z-index: 1000;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 4px;\n  padding-bottom: 16px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n  overflow: hidden;\n  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n  max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  flex-grow: 12; /* Increase size on hover */\n  max-width: 700px;\n  opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n  margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n  animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n  animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  margin-left: 8px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-menuicon-container {\n  width: 40px !important;\n  height: 32px !important;\n  border-radius: 16px !important;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}\n@keyframes quickmenu-expand {\n  from {\n    max-height: 0;\n    opacity: 0;\n  }\n  to {\n    max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n    opacity: 1;\n  }\n}\n@keyframes quickmenu-collapse {\n  from {\n    max-height: 500px;\n    opacity: 1;\n  }\n  to {\n    max-height: 0;\n    opacity: 0;\n  }\n}";
 styleInject(css_248z$F);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
   width,
+  borderRadius,
   leftContent,
   rightContent,
   projectsList,
@@ -27332,6 +27231,10 @@ const AppHeader = ({
     className: "ff-app-header-main",
     children: jsxRuntime.jsxs("div", {
       className: "ff-app-header",
+      style: {
+        borderStartStartRadius: borderRadius,
+        borderStartEndRadius: borderRadius
+      },
       children: [jsxRuntime.jsxs("div", {
         className: "ff-app-header-left-container",
         children: [jsxRuntime.jsx("div", {
@@ -27878,9 +27781,9 @@ const DashboardDonutChart = ({
 
 var propTypes = {exports: {}};
 
-var reactIs = {exports: {}};
+var reactIs$1 = {exports: {}};
 
-var reactIs_production_min = {};
+var reactIs_production_min$1 = {};
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -27890,10 +27793,10 @@ var reactIs_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
+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 b = "function" === typeof Symbol && Symbol.for,
     c = b ? Symbol.for("react.element") : 60103,
     d = b ? Symbol.for("react.portal") : 60106,
@@ -27946,64 +27849,64 @@ function requireReactIs_production_min() {
   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) {
+  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) {
     return A(a) || z(a) === l;
   };
-  reactIs_production_min.isConcurrentMode = A;
-  reactIs_production_min.isContextConsumer = function (a) {
+  reactIs_production_min$1.isConcurrentMode = A;
+  reactIs_production_min$1.isContextConsumer = function (a) {
     return z(a) === k;
   };
-  reactIs_production_min.isContextProvider = function (a) {
+  reactIs_production_min$1.isContextProvider = function (a) {
     return z(a) === h;
   };
-  reactIs_production_min.isElement = function (a) {
+  reactIs_production_min$1.isElement = function (a) {
     return "object" === typeof a && null !== a && a.$$typeof === c;
   };
-  reactIs_production_min.isForwardRef = function (a) {
+  reactIs_production_min$1.isForwardRef = function (a) {
     return z(a) === n;
   };
-  reactIs_production_min.isFragment = function (a) {
+  reactIs_production_min$1.isFragment = function (a) {
     return z(a) === e;
   };
-  reactIs_production_min.isLazy = function (a) {
+  reactIs_production_min$1.isLazy = function (a) {
     return z(a) === t;
   };
-  reactIs_production_min.isMemo = function (a) {
+  reactIs_production_min$1.isMemo = function (a) {
     return z(a) === r;
   };
-  reactIs_production_min.isPortal = function (a) {
+  reactIs_production_min$1.isPortal = function (a) {
     return z(a) === d;
   };
-  reactIs_production_min.isProfiler = function (a) {
+  reactIs_production_min$1.isProfiler = function (a) {
     return z(a) === g;
   };
-  reactIs_production_min.isStrictMode = function (a) {
+  reactIs_production_min$1.isStrictMode = function (a) {
     return z(a) === f;
   };
-  reactIs_production_min.isSuspense = function (a) {
+  reactIs_production_min$1.isSuspense = function (a) {
     return z(a) === p;
   };
-  reactIs_production_min.isValidElementType = function (a) {
+  reactIs_production_min$1.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;
+  reactIs_production_min$1.typeOf = z;
+  return reactIs_production_min$1;
 }
 
-var reactIs_development = {};
+var reactIs_development$1 = {};
 
 /** @license React v16.13.1
  * react-is.development.js
@@ -28013,10 +27916,10 @@ var reactIs_development = {};
  * 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;
+var hasRequiredReactIs_development$1;
+function requireReactIs_development$1() {
+  if (hasRequiredReactIs_development$1) return reactIs_development$1;
+  hasRequiredReactIs_development$1 = 1;
   if (process.env.NODE_ENV !== "production") {
     (function () {
 
@@ -28143,49 +28046,49 @@ function requireReactIs_development() {
       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;
+      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;
     })();
   }
-  return reactIs_development;
+  return reactIs_development$1;
 }
 
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
-  hasRequiredReactIs = 1;
+var hasRequiredReactIs$1;
+function requireReactIs$1() {
+  if (hasRequiredReactIs$1) return reactIs$1.exports;
+  hasRequiredReactIs$1 = 1;
   if (process.env.NODE_ENV === 'production') {
-    reactIs.exports = requireReactIs_production_min();
+    reactIs$1.exports = requireReactIs_production_min$1();
   } else {
-    reactIs.exports = requireReactIs_development();
+    reactIs$1.exports = requireReactIs_development$1();
   }
-  return reactIs.exports;
+  return reactIs$1.exports;
 }
 
 /*
@@ -28400,7 +28303,7 @@ var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = requireReactIs();
+  var ReactIs = requireReactIs$1();
   var assign = requireObjectAssign();
   var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
   var has = /*@__PURE__*/requireHas();
@@ -29013,7 +28916,7 @@ function requirePropTypes() {
   if (hasRequiredPropTypes) return propTypes.exports;
   hasRequiredPropTypes = 1;
   if (process.env.NODE_ENV !== 'production') {
-    var ReactIs = requireReactIs();
+    var ReactIs = requireReactIs$1();
 
     // By explicitly using `prop-types` you are opting into new development behavior.
     // http://fb.me/prop-types-in-prod
@@ -29248,6 +29151,316 @@ 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() {
@@ -30411,7 +30624,8 @@ const Branches = ({
   readOnly
 }) => {
   const evenRow = rowIndex % 2 === 0;
-  const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - 1]);
+  const getLastIndex = readOnly ? 0 : 1;
+  const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - getLastIndex]);
   const getBorderStyle = (currentBranch, nextBranch) => {
     if (currentBranch && nextBranch && 'machineInstanceId' in currentBranch && 'machineInstanceId' in nextBranch) {
       return currentBranch.machineInstanceId === nextBranch.machineInstanceId ? 'dashed' : 'solid';
@@ -30568,16 +30782,18 @@ const Branches = ({
                   color: "var(--ff-connecting-branch-color)",
                   children: "Dataset List"
                 })]
-              }), jsxRuntime.jsx(Icon, {
-                name: "plus_icon",
-                className: "ff-connecting-icon",
-                onClick: () => onAddRunBrowser(machineInstanceId),
-                color: "var(--ff-connecting-branch-color)",
-                hoverEffect: true
-              }), jsxRuntime.jsx(Typography, {
-                className: "ff-connecting-text",
-                color: "var(--ff-connecting-branch-color)",
-                children: "Run"
+              }), !readOnly && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [jsxRuntime.jsx(Icon, {
+                  name: "plus_icon",
+                  className: "ff-connecting-icon",
+                  onClick: () => onAddRunBrowser(machineInstanceId),
+                  color: "var(--ff-connecting-branch-color)",
+                  hoverEffect: true
+                }), jsxRuntime.jsx(Typography, {
+                  className: "ff-connecting-text",
+                  color: "var(--ff-connecting-branch-color)",
+                  children: "Run"
+                })]
               })]
             }), !readOnly && jsxRuntime.jsx(Icon, {
               name: "delete",
@@ -51619,28 +51835,31 @@ const MachineInstances = ({
   datasetHeight,
   curveHeights,
   itemRefs,
-  datasetRef
+  datasetRef,
+  isReadOnlyMode
 }) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx("div", {
-        className: "ff-selectedMachines-connecting-line",
-        children: jsxRuntime.jsxs("div", {
-          className: "ff-line",
-          children: [jsxRuntime.jsx("div", {
-            className: "ff-left-icon"
-          }), jsxRuntime.jsx("div", {
-            className: "ff-right-icon"
-          })]
-        })
-      }), jsxRuntime.jsx("div", {
-        className: "ff-machine-instance ff-machine-env-button",
-        children: getChildNodeComponent({
-          isButton: true,
-          parentNodeData,
-          parentNodeIndex
-        })
-      })]
+    children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-selectedMachines-connecting-line",
+          children: jsxRuntime.jsxs("div", {
+            className: "ff-line",
+            children: [jsxRuntime.jsx("div", {
+              className: "ff-left-icon"
+            }), jsxRuntime.jsx("div", {
+              className: "ff-right-icon"
+            })]
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "ff-machine-instance ff-machine-env-button",
+          children: getChildNodeComponent({
+            isButton: true,
+            parentNodeData,
+            parentNodeIndex
+          })
+        })]
+      })
     }) : parentNodeData?.machineInstances?.map((childNodeData, childNodeIndex) => {
       const isFirstLine = childNodeIndex === 0;
       return jsxRuntime.jsxs("div", {
@@ -51703,26 +51922,28 @@ const MachineInstances = ({
               })]
             }, ffid())
           }, runLevelExecutionDataSet?.runLevelExecutionDataSetId + ffid()))
-        }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx("div", {
-            className: "ff-selectedMachines-connecting-line ff-second-line",
-            children: jsxRuntime.jsxs("div", {
-              className: "ff-line",
-              children: [jsxRuntime.jsx("div", {
-                className: "ff-left-icon"
-              }), jsxRuntime.jsx("div", {
-                className: "ff-right-icon"
-              })]
-            })
-          }), jsxRuntime.jsx("div", {
-            className: "ff-machine-instance ff-machine-env-button",
-            children: getChildNodeComponent({
-              isButton: true,
-              parentNodeData,
-              parentNodeIndex,
-              childNodeIndex: childNodeIndex + 1
-            })
-          })]
+        }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("div", {
+              className: "ff-selectedMachines-connecting-line ff-second-line",
+              children: jsxRuntime.jsxs("div", {
+                className: "ff-line",
+                children: [jsxRuntime.jsx("div", {
+                  className: "ff-left-icon"
+                }), jsxRuntime.jsx("div", {
+                  className: "ff-right-icon"
+                })]
+              })
+            }), jsxRuntime.jsx("div", {
+              className: "ff-machine-instance ff-machine-env-button",
+              children: getChildNodeComponent({
+                isButton: true,
+                parentNodeData,
+                parentNodeIndex,
+                childNodeIndex: childNodeIndex + 1
+              })
+            })]
+          })
         })]
       }, ffid());
     })
@@ -51734,17 +51955,19 @@ const ConnectingBranch = ({
   getChildNodeComponent,
   getParentNodeComponent,
   getParentNodeComponentActionItems,
-  childNodeCurveHeight = 1.28
+  childNodeCurveHeight = 1.28,
+  isReadOnlyMode = false
 }) => {
   const datasetRef = React.useRef(null);
   const [datasetHeight, setDatasetHeight] = React.useState(0);
   const [curveHeights, setCurveHeights] = React.useState([]);
   const itemRefs = React.useRef([]);
   const calculateVerticalLineHeight = (machineInstances, datasetHeight, gap) => {
-    const totalDataSets = machineInstances.reduce((acc, instance) => {
-      return acc + (instance.runLevelExecutionDataSets?.length || 0);
-    }, 0);
-    return totalDataSets * datasetHeight + totalDataSets * gap;
+    if (machineInstances.length === 1 && isReadOnlyMode) {
+      return 0;
+    }
+    const totalDataSets = machineInstances.reduce((acc, instance, index) => acc + (index !== machineInstances.length - 1 || !isReadOnlyMode ? instance.runLevelExecutionDataSets?.length || 0 : 0), 0);
+    return totalDataSets * (datasetHeight + gap);
   };
   React.useEffect(() => {
     if (datasetRef.current) {
@@ -51848,11 +52071,12 @@ const ConnectingBranch = ({
                 curveHeights: curveHeights,
                 itemRefs: itemRefs,
                 datasetRef: datasetRef,
-                getChildNodeComponent: getChildNodeComponent
+                getChildNodeComponent: getChildNodeComponent,
+                isReadOnlyMode: isReadOnlyMode
               })]
             })]
           }, ffid());
-        }), jsxRuntime.jsx("div", {
+        }), !isReadOnlyMode && jsxRuntime.jsx("div", {
           className: "ff-select-machine-input",
           style: {
             gridRow: `${currentRow}`