pixel-react 1.8.5 → 1.8.7

package/lib/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useRef, useEffect, memo, useState, createContext as createContext$1, useContext, useMemo, useCallback, createElement, PureComponent, useImperativeHandle, useLayoutEffect, useReducer, cloneElement, Component } from 'react';
+import React__default, { forwardRef, useRef, useEffect, useState, createContext as createContext$1, useContext, useMemo, useCallback, createElement, PureComponent, useImperativeHandle, memo, useLayoutEffect, useReducer, cloneElement, Component } from 'react';
 import { createPortal, unstable_batchedUpdates } from 'react-dom';
 
 function styleInject(css, ref) {
@@ -999,7 +999,6 @@ const Typography = ({
   });
 };
 
-const areEqual$2 = (prevProps, nextProps) => prevProps.selectedFile?.name === nextProps.selectedFile?.name;
 const Button$1 = /*#__PURE__*/forwardRef(({
   variant = 'primary',
   backgroundColor,
@@ -1059,7 +1058,6 @@ const Button$1 = /*#__PURE__*/forwardRef(({
     }), iconPosition === 'right' && renderIcon()]
   });
 });
-var Button$2 = /*#__PURE__*/memo(Button$1, areEqual$2);
 
 var css_248z$1f = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n  z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n  margin-bottom: 4px;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  top: 87px;\n  background-color: var(--primary-button-text-color);\n  z-index: 999;\n  transform: translateX(100%);\n  opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n  transform: translateX(0);\n  opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n  width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n  width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n  width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n  width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n  transition: all 0.4s ease-in-out;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  gap: 10px;\n  border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-weight: 600;\n  color: var(--drawer-title-color);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n  height: 16px;\n  width: 16px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n  cursor: pointer;\n  background-color: var(--button-bg-color);\n  outline: none;\n  border: none;\n  margin: 0;\n  border: 1px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n  background-color: var(--drawer-footer-bg);\n  width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n  background-color: var(--drawer-footer-bg);\n  overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--drawer-footer-border);\n  z-index: 1000;\n  background-color: var(--base-bg-color);\n  transform: translateY(3px);\n  border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n  background-color: var(--drawer-footer-bg);\n  width: 100%;\n  border-radius: 0 0 8px 8px;\n}";
 styleInject(css_248z$1f);
@@ -1246,17 +1244,17 @@ const Drawer = ({
         children: customFooter || footerContent || jsxs(Fragment, {
           children: [jsxs("div", {
             className: "button-container",
-            children: [leftSecondaryButtonProps.label && jsx(Button$2, {
+            children: [leftSecondaryButtonProps.label && jsx(Button$1, {
               ...leftSecondaryButtonProps,
               onClick: leftPrimaryButtonProps.onClick,
               variant: "secondary",
               transparentBackground: true
-            }), leftPrimaryButtonProps.label && jsx(Button$2, {
+            }), leftPrimaryButtonProps.label && jsx(Button$1, {
               ...leftPrimaryButtonProps,
               onClick: leftPrimaryButtonProps.onClick,
               variant: "primary",
               transparentBackground: true
-            }), leftTertiaryButtonProps?.label && jsx(Button$2, {
+            }), leftTertiaryButtonProps?.label && jsx(Button$1, {
               ...leftTertiaryButtonProps,
               onClick: leftTertiaryButtonProps.onClick,
               variant: "tertiary",
@@ -1264,17 +1262,17 @@ const Drawer = ({
             })]
           }), jsxs("div", {
             className: "button-container",
-            children: [rightTertiaryButtonProps?.label && jsx(Button$2, {
+            children: [rightTertiaryButtonProps?.label && jsx(Button$1, {
               ...rightTertiaryButtonProps,
               onClick: rightTertiaryButtonProps.onClick,
               variant: "tertiary",
               transparentBackground: true
-            }), secondaryButtonProps.label && jsx(Button$2, {
+            }), secondaryButtonProps.label && jsx(Button$1, {
               ...secondaryButtonProps,
               onClick: onCancel,
               variant: "secondary",
               transparentBackground: true
-            }), primaryButtonProps.label && jsx(Button$2, {
+            }), primaryButtonProps.label && jsx(Button$1, {
               ...primaryButtonProps,
               onClick: primaryButtonProps.onClick,
               variant: "primary",
@@ -1738,7 +1736,7 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
       })
     }), withSelectButton && filteredOptions.length > 0 && jsx("div", {
       className: "select-button-container",
-      children: jsx(Button$2, {
+      children: jsx(Button$1, {
         label: "Select",
         variant: "tertiary",
         onClick: onSelectClick
@@ -2200,11 +2198,11 @@ const Toaster = ({
             children: toastMessage
           }), variant === 'confirm' && jsxs("div", {
             className: "ff-toaster-content__prompt",
-            children: [jsx(Button$2, {
+            children: [jsx(Button$1, {
               onClick: handleClose,
               variant: "secondary",
               children: "Cancel"
-            }), jsx(Button$2, {
+            }), jsx(Button$1, {
               onClick: onConfirmation,
               variant: "delete",
               children: confirmationText
@@ -4323,7 +4321,7 @@ const Dropzone = ({
             selectedValue: selectedRadioOption?.value,
             onChange: handleOptionChange
           })]
-        }) : jsx(Button$2, {
+        }) : jsx(Button$1, {
           variant: "primary",
           label: buttonLabel,
           className: 'choose-file-btn',
@@ -6405,7 +6403,7 @@ var _excluded$1 = ["style"],
 // It knows to compare individual style props and ignore the wrapper object.
 // See https://reactjs.org/docs/react-api.html#reactmemo
 
-function areEqual$1(prevProps, nextProps) {
+function areEqual(prevProps, nextProps) {
   var prevStyle = prevProps.style,
     prevRest = _objectWithoutPropertiesLoose$3(prevProps, _excluded$1);
   var nextStyle = nextProps.style,
@@ -6417,7 +6415,7 @@ function areEqual$1(prevProps, nextProps) {
 // See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
 
 function shouldComponentUpdate(nextProps, nextState) {
-  return !areEqual$1(this.props, nextProps) || shallowDiffers(this.state, nextState);
+  return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
 }
 
 var LazyLoad = /*#__PURE__*/Object.freeze({
@@ -6426,7 +6424,7 @@ var LazyLoad = /*#__PURE__*/Object.freeze({
   FixedSizeList: FixedSizeList,
   VariableSizeGrid: VariableSizeGrid,
   VariableSizeList: VariableSizeList,
-  areEqual: areEqual$1,
+  areEqual: areEqual,
   shouldComponentUpdate: shouldComponentUpdate
 });
 
@@ -6472,13 +6470,14 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
         copy = new Date(data);
     }
     else if (data instanceof Set) {
         copy = new Set(data);
     }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject$2(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -6537,7 +6536,7 @@ var set$1 = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__') {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
             return;
         }
         object[key] = newValue;
@@ -6756,7 +6755,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return getProxyFormState(formState, control, _localProxyFormState.current, false);
+    return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -6852,6 +6851,67 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    const fieldState = React__default.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__default.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__default.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
@@ -6877,7 +6937,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React__default.useEffect(() => {
-        if (get$1(control._fields, name)) {
+        if (isBoolean(disabled) && get$1(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -6886,63 +6946,11 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return {
-        field: {
-            name,
-            value,
-            ...(isBoolean(disabled) || formState.disabled
-                ? { disabled: formState.disabled || disabled }
-                : {}),
-            onChange: React__default.useCallback((event) => _registerProps.current.onChange({
-                target: {
-                    value: getEventValue(event),
-                    name: name,
-                },
-                type: EVENTS.CHANGE,
-            }), [name]),
-            onBlur: React__default.useCallback(() => _registerProps.current.onBlur({
-                target: {
-                    value: get$1(control._formValues, name),
-                    name: name,
-                },
-                type: EVENTS.BLUR,
-            }), [name, control]),
-            ref: React__default.useCallback((elm) => {
-                const field = get$1(control._fields, name);
-                if (field && elm) {
-                    field._f.ref = {
-                        focus: () => elm.focus(),
-                        select: () => elm.select(),
-                        setCustomValidity: (message) => elm.setCustomValidity(message),
-                        reportValidity: () => elm.reportValidity(),
-                    };
-                }
-            }, [control._fields, name]),
-        },
+    return React__default.useMemo(() => ({
+        field,
         formState,
-        fieldState: Object.defineProperties({}, {
-            invalid: {
-                enumerable: true,
-                get: () => !!get$1(formState.errors, name),
-            },
-            isDirty: {
-                enumerable: true,
-                get: () => !!get$1(formState.dirtyFields, name),
-            },
-            isTouched: {
-                enumerable: true,
-                get: () => !!get$1(formState.touchedFields, name),
-            },
-            isValidating: {
-                enumerable: true,
-                get: () => !!get$1(formState.validatingFields, name),
-            },
-            error: {
-                enumerable: true,
-                get: () => get$1(formState.errors, name),
-            },
-        }),
-    };
+        fieldState,
+    }), [field, formState, fieldState]);
 }
 
 /**
@@ -6992,7 +7000,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key])) {
+        if (isObjectType(obj[key]) && obj[key] !== null) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -7061,7 +7069,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(action, {
+                    const response = await fetch(String(action), {
                         method,
                         headers: {
                             ...headers,
@@ -7559,7 +7567,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
     const [fields, setFields] = React__default.useState(control._getFieldArray(name));
     const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React__default.useRef(fields);
@@ -7568,8 +7576,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    props.rules &&
-        control.register(name, props.rules);
+    rules &&
+        control.register(name, rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -7613,6 +7621,8 @@ function useFieldArray(props) {
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
+        !Array.isArray(get$1(control._fields, name)) &&
+            set$1(control._fields, name, undefined);
         control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
         });
@@ -7927,7 +7937,8 @@ var getRuleValue = (rule) => isUndefined(rule)
             : rule;
 
 const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
+var hasPromiseValidation = (fieldReference) => !!fieldReference &&
+    !!fieldReference.validate &&
     !!((isFunction$1(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
         (isObject$2(fieldReference.validate) &&
@@ -8189,9 +8200,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (props.delayError && error) {
+        if (_options.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(props.delayError);
+            delayErrorCallback(_options.delayError);
         }
         else {
             clearTimeout(timer);
@@ -8296,7 +8307,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get$1(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get$1(_fields, name);
         let fieldValue = value;
@@ -8429,7 +8440,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (props.mode === 'onBlur') {
+                    if (_options.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -8594,7 +8605,9 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get$1(fields, name)._f)
                     : value;
-            set$1(_formValues, name, inputValue);
+            if (disabled || (!disabled && !isUndefined(inputValue))) {
+                set$1(_formValues, name, inputValue);
+            }
             updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
@@ -8823,7 +8836,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = props.shouldUnregister
+            _formValues = _options.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -8847,7 +8860,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!props.shouldUnregister;
+        _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -9018,8 +9031,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React__default.useRef();
-    const _values = React__default.useRef();
+    const _formControl = React__default.useRef(undefined);
+    const _values = React__default.useRef(undefined);
     const [formState, updateFormState] = React__default.useState({
         isDirty: false,
         isValidating: false,
@@ -9511,12 +9524,12 @@ const MiniModal = /*#__PURE__*/forwardRef(({
           children: footerContent
         }) : isIconModel ? jsx(Fragment, {}) : jsxs("footer", {
           className: "modal-footer",
-          children: [jsx(Button$2, {
+          children: [jsx(Button$1, {
             variant: "primary",
             className: "btn-cancel",
             onClick: cancelButtonProps?.onClick,
             label: cancelButtonProps?.text
-          }), jsx(Button$2, {
+          }), jsx(Button$1, {
             variant: "secondary",
             className: "btn-proceed",
             label: proceedButtonProps?.text,
@@ -12661,21 +12674,21 @@ const longFormatters$1 = {
   P: dateTimeLongFormatter$1
 };
 
-const dayOfYearTokenRE = /^D+$/;
-const weekYearTokenRE = /^Y+$/;
-const throwTokens = ["D", "DD", "YY", "YYYY"];
+const dayOfYearTokenRE$1 = /^D+$/;
+const weekYearTokenRE$1 = /^Y+$/;
+const throwTokens$1 = ["D", "DD", "YY", "YYYY"];
 function isProtectedDayOfYearToken$1(token) {
-  return dayOfYearTokenRE.test(token);
+  return dayOfYearTokenRE$1.test(token);
 }
 function isProtectedWeekYearToken$1(token) {
-  return weekYearTokenRE.test(token);
+  return weekYearTokenRE$1.test(token);
 }
-function warnOrThrowProtectedError(token, format, input) {
-  const _message = message(token, format, input);
+function warnOrThrowProtectedError$1(token, format, input) {
+  const _message = message$1(token, format, input);
   console.warn(_message);
-  if (throwTokens.includes(token)) throw new RangeError(_message);
+  if (throwTokens$1.includes(token)) throw new RangeError(_message);
 }
-function message(token, format, input) {
+function message$1(token, format, input) {
   const subject = token[0] === "Y" ? "years" : "days of the month";
   return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
 }
@@ -13047,7 +13060,7 @@ function format$2(date, formatStr, options) {
     if (!part.isToken) return part.value;
     const token = part.value;
     if (!options?.useAdditionalWeekYearTokens && isProtectedWeekYearToken$1(token) || !options?.useAdditionalDayOfYearTokens && isProtectedDayOfYearToken$1(token)) {
-      warnOrThrowProtectedError(token, formatStr, String(date));
+      warnOrThrowProtectedError$1(token, formatStr, String(date));
     }
     const formatter = formatters$2[token[0]];
     return formatter(originalDate, token, locale.localize, formatterOptions);
@@ -13273,6 +13286,53 @@ function setYear(date, year, options) {
   return date_;
 }
 
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function getBroadcastWeeksInMonth(month, dateLib) {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -13353,6 +13413,15 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
+    /**
+     * Returns the end of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The end of the broadcast week.
+     */
+    this.endOfBroadcastWeek = date => {
+      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -13514,6 +13583,15 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
+    /**
+     * Returns the start of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The start of the broadcast week.
+     */
+    this.startOfBroadcastWeek = date => {
+      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -13996,7 +14074,9 @@ function Weekday(props) {
  * @see https://daypicker.dev/guides/custom-components
  */
 function Weekdays(props) {
-  return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
+  return /*#__PURE__*/React__default.createElement("thead", {
+    "aria-hidden": true
+  }, /*#__PURE__*/React__default.createElement("tr", {
     ...props
   }));
 }
@@ -14099,7 +14179,8 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -14165,7 +14246,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale = enUS$1) {
+locale) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -14255,13 +14336,12 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
   if (!navEnd) return undefined;
   const {
     addMonths,
-    startOfMonth,
-    isBefore
+    startOfMonth
   } = dateLib;
   const year = displayMonth.getFullYear();
   const months = [];
   let month = navStart;
-  while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
+  while (months.length < 12) {
     months.push(month.getMonth());
     month = addMonths(month, 1);
   }
@@ -14269,7 +14349,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -14644,7 +14724,8 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone) {
+ISOWeek, timeZone, /** @since 9.4.0 */
+broadcastCalendar) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -14656,20 +14737,18 @@ ISOWeek, timeZone) {
 }
 
 /** Return the years to show in the dropdown. */
-function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
-  if (!calendarStart) return undefined;
-  if (!calendarEnd) return undefined;
+function getYearOptions(navStart, navEnd, formatters, dateLib) {
+  if (!navStart) return undefined;
+  if (!navEnd) return undefined;
   const {
-    startOfMonth,
     startOfYear,
     endOfYear,
     addYears,
     isBefore,
     isSameYear
   } = dateLib;
-  const month = displayMonth.getMonth();
-  const firstNavYear = startOfYear(calendarStart);
-  const lastNavYear = endOfYear(calendarEnd);
+  const firstNavYear = startOfYear(navStart);
+  const lastNavYear = endOfYear(navEnd);
   const years = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -14677,13 +14756,11 @@ function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, da
     year = addYears(year, 1);
   }
   return years.map(value => {
-    const year = dateLib.Date ? new dateLib.Date(value, month) : new Date(value, month);
-    const disabled = calendarStart && year < startOfMonth(calendarStart) || month && calendarEnd && year > startOfMonth(calendarEnd) || false;
     const label = formatters.formatYearDropdown(value);
     return {
       value,
       label,
-      disabled
+      disabled: false
     };
   });
 }
@@ -14847,29 +14924,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
-/** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks
+    fixedWeeks,
+    broadcastCalendar
   } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
-  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -14881,9 +14959,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -14994,25 +15074,29 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    if (props.fixedWeeks && monthDates.length < 42) {
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
       const extraDates = dates.filter(date => {
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
       });
       monthDates.push(...extraDates);
     }
@@ -15450,27 +15534,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek
+    ISOWeek,
+    broadcastCalendar
   } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -15536,6 +15623,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -15544,12 +15633,19 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
+    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
   } = dateLib;
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -15558,20 +15654,18 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
-  const selectionModifiersMap = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
+    // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15600,27 +15694,16 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name];
-      selectionStates[name] = days.some(d => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -16025,7 +16108,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.weekStartsOn,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -16044,7 +16127,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
   const {
     captionLayout,
     mode,
@@ -16154,6 +16237,16 @@ function DayPicker(props) {
   const handleDayMouseLeave = useCallback((day, modifiers) => e => {
     onDayMouseLeave?.(day.date, modifiers, e);
   }, [onDayMouseLeave]);
+  const handleMonthChange = useCallback(date => e => {
+    const selectedMonth = Number(e.target.value);
+    const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
+  const handleYearChange = useCallback(date => e => {
+    const selectedYear = Number(e.target.value);
+    const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
+    goToMonth(month);
+  }, [dateLib, goToMonth]);
   const {
     className,
     style
@@ -16191,6 +16284,8 @@ function DayPicker(props) {
     lang: props.lang,
     nonce: props.nonce,
     title: props.title,
+    role: props.role,
+    "aria-label": props["aria-label"],
     ...dataAttributes
   }, /*#__PURE__*/React__default.createElement(components.Months, {
     className: classNames[UI.Months],
@@ -16204,17 +16299,8 @@ function DayPicker(props) {
     previousMonth: previousMonth,
     nextMonth: nextMonth
   })), months.map((calendarMonth, displayIndex) => {
-    const handleMonthChange = e => {
-      const selectedMonth = Number(e.target.value);
-      const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
-      goToMonth(month);
-    };
-    const handleYearChange = e => {
-      const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
-      goToMonth(month);
-    };
     const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
-    const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
+    const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
     return /*#__PURE__*/React__default.createElement(components.Month, {
       className: classNames[UI.Month],
       style: styles?.[UI.Month],
@@ -16235,7 +16321,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleMonthChange,
+      onChange: handleMonthChange(calendarMonth.date),
       options: dropdownMonths,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getMonth()
@@ -16248,7 +16334,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleYearChange,
+      onChange: handleYearChange(calendarMonth.date),
       options: dropdownYears,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getFullYear()
@@ -16295,7 +16381,8 @@ function DayPicker(props) {
           locale
         }),
         className: classNames[UI.WeekNumber],
-        scope: "row"
+        scope: "row",
+        role: "rowheader"
       }, formatWeekNumber(week.weekNumber))), week.days.map(day => {
         const {
           date
@@ -16315,14 +16402,14 @@ function DayPicker(props) {
         }
         const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
         const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-        const ariaLabel = !isInteractive ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
+        const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
         return /*#__PURE__*/React__default.createElement(components.Day, {
           key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`,
           day: day,
           modifiers: modifiers,
           className: className.join(" "),
           style: style,
-          "aria-hidden": modifiers.hidden || undefined,
+          role: "gridcell",
           "aria-selected": modifiers.selected || undefined,
           "aria-label": ariaLabel,
           "data-day": dateLib.format(date, "yyyy-MM-dd"),
@@ -16333,7 +16420,7 @@ function DayPicker(props) {
           "data-outside": day.outside || undefined,
           "data-focused": modifiers.focused || undefined,
           "data-today": modifiers.today || undefined
-        }, isInteractive ? (/*#__PURE__*/React__default.createElement(components.DayButton, {
+        }, !modifiers.hidden && isInteractive ? (/*#__PURE__*/React__default.createElement(components.DayButton, {
           className: classNames[UI.DayButton],
           style: styles?.[UI.DayButton],
           type: "button",
@@ -16348,7 +16435,7 @@ function DayPicker(props) {
           onKeyDown: handleDayKeyDown(day, modifiers),
           onMouseEnter: handleDayMouseEnter(day, modifiers),
           onMouseLeave: handleDayMouseLeave(day, modifiers)
-        }, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
+        }, formatDay(date, dateLib.options, dateLib))) : !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib));
       }));
     }))));
   })), props.footer && (/*#__PURE__*/React__default.createElement(components.Footer, {
@@ -16359,143 +16446,6 @@ function DayPicker(props) {
   }, props.footer))));
 }
 
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param value - The value to check
- *
- * @returns True if the given value is a date
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  return (
-    value instanceof Date ||
-    (typeof value === "object" &&
-      Object.prototype.toString.call(value) === "[object Date]")
-  );
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param argument - The value to convert
- *
- * @returns The parsed date in the local time zone
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate$1(argument) {
-  const argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (
-    argument instanceof Date ||
-    (typeof argument === "object" && argStr === "[object Date]")
-  ) {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new argument.constructor(+argument);
-  } else if (
-    typeof argument === "number" ||
-    argStr === "[object Number]" ||
-    typeof argStr === "string" ||
-    argStr === "[object String]"
-  ) {
-    // TODO: Can we get rid of as?
-    return new Date(argument);
-  } else {
-    // TODO: Can we get rid of as?
-    return new Date(NaN);
-  }
-}
-
-/**
- * @name isValid
- * @category Common Helpers
- * @summary Is the given date valid?
- *
- * @description
- * Returns false if argument is Invalid Date and true otherwise.
- * Argument is converted to Date using `toDate`. See [toDate](https://date-fns.org/docs/toDate)
- * Invalid Date is a Date, whose time value is NaN.
- *
- * Time value of Date: http://es5.github.io/#x15.9.1.1
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The date to check
- *
- * @returns The date is valid
- *
- * @example
- * // For the valid date:
- * const result = isValid(new Date(2014, 1, 31))
- * //=> true
- *
- * @example
- * // For the value, convertable into a date:
- * const result = isValid(1393804800000)
- * //=> true
- *
- * @example
- * // For the invalid date:
- * const result = isValid(new Date(''))
- * //=> false
- */
-function isValid(date) {
-  if (!isDate(date) && typeof date !== "number") {
-    return false;
-  }
-  const _date = toDate$1(date);
-  return !isNaN(Number(_date));
-}
-
 const formatDistanceLocale = {
   lessThanXSeconds: {
     one: "less than a second",
@@ -17176,6 +17126,62 @@ const millisecondsInWeek = 604800000;
  */
 const millisecondsInDay = 86400000;
 
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param argument - The value to convert
+ *
+ * @returns The parsed date in the local time zone
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */
+function toDate$1(argument) {
+  const argStr = Object.prototype.toString.call(argument);
+
+  // Clone the date
+  if (
+    argument instanceof Date ||
+    (typeof argument === "object" && argStr === "[object Date]")
+  ) {
+    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
+    return new argument.constructor(+argument);
+  } else if (
+    typeof argument === "number" ||
+    argStr === "[object Number]" ||
+    typeof argument === "string" ||
+    argStr === "[object String]"
+  ) {
+    // TODO: Can we get rid of as?
+    return new Date(argument);
+  } else {
+    // TODO: Can we get rid of as?
+    return new Date(NaN);
+  }
+}
+
 /**
  * @name startOfDay
  * @category Day Helpers
@@ -17214,19 +17220,20 @@ function startOfDay(date) {
  * This function returns the timezone offset in milliseconds that takes seconds in account.
  */
 function getTimezoneOffsetInMilliseconds$1(date) {
+  const _date = toDate$1(date);
   const utcDate = new Date(
     Date.UTC(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate(),
-      date.getHours(),
-      date.getMinutes(),
-      date.getSeconds(),
-      date.getMilliseconds(),
+      _date.getFullYear(),
+      _date.getMonth(),
+      _date.getDate(),
+      _date.getHours(),
+      _date.getMinutes(),
+      _date.getSeconds(),
+      _date.getMilliseconds(),
     ),
   );
-  utcDate.setUTCFullYear(date.getFullYear());
-  return date.getTime() - utcDate.getTime();
+  utcDate.setUTCFullYear(_date.getFullYear());
+  return +date - +utcDate;
 }
 
 /**
@@ -17266,14 +17273,13 @@ function differenceInCalendarDays(dateLeft, dateRight) {
   const startOfDayRight = startOfDay(dateRight);
 
   const timestampLeft =
-    startOfDayLeft.getTime() - getTimezoneOffsetInMilliseconds$1(startOfDayLeft);
+    +startOfDayLeft - getTimezoneOffsetInMilliseconds$1(startOfDayLeft);
   const timestampRight =
-    startOfDayRight.getTime() -
-    getTimezoneOffsetInMilliseconds$1(startOfDayRight);
+    +startOfDayRight - getTimezoneOffsetInMilliseconds$1(startOfDayRight);
 
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a day is not constant
-  // (e.g. it's different in the day of the daylight saving time clock shift)
+  // Round the number of days to the nearest integer because the number of
+  // milliseconds in a day is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
   return Math.round((timestampLeft - timestampRight) / millisecondsInDay);
 }
 
@@ -17287,6 +17293,8 @@ function differenceInCalendarDays(dateLeft, dateRight) {
  * date and the given value. It helps to build generic functions that accept
  * date extensions.
  *
+ * It defaults to `Date` if the passed reference date is a number or a string.
+ *
  * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
  *
  * @param date - The reference date to take constructor from
@@ -17540,12 +17548,11 @@ function startOfISOWeekYear(date) {
  */
 function getISOWeek(date) {
   const _date = toDate$1(date);
-  const diff =
-    startOfISOWeek(_date).getTime() - startOfISOWeekYear(_date).getTime();
+  const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
 
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a week is not constant
-  // (e.g. it's different in the week of the daylight saving time clock shift)
+  // Round the number of weeks to the nearest integer because the number of
+  // milliseconds in a week is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
   return Math.round(diff / millisecondsInWeek) + 1;
 }
 
@@ -17565,7 +17572,7 @@ function getISOWeek(date) {
  * and `options.firstWeekContainsDate` (which is the day of January, which is always in
  * the first week of the week-numbering year)
  *
- * Week numbering: https://en.wikipedia.org/wiki/Week#Week_numbering
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
  *
  * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
  *
@@ -17636,7 +17643,7 @@ function getWeekYear(date, options) {
  * and `options.firstWeekContainsDate` (which is the day of January, which is always in
  * the first week of the week-numbering year)
  *
- * Week numbering: https://en.wikipedia.org/wiki/Week#Week_numbering
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
  *
  * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
  *
@@ -17693,7 +17700,7 @@ function startOfWeekYear(date, options) {
  * and `options.firstWeekContainsDate` (which is the day of January, which is always in
  * the first week of the week-numbering year)
  *
- * Week numbering: https://en.wikipedia.org/wiki/Week#Week_numbering
+ * Week numbering: https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system
  *
  * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
  *
@@ -17720,13 +17727,11 @@ function startOfWeekYear(date, options) {
 
 function getWeek(date, options) {
   const _date = toDate$1(date);
-  const diff =
-    startOfWeek(_date, options).getTime() -
-    startOfWeekYear(_date, options).getTime();
+  const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options);
 
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a week is not constant
-  // (e.g. it's different in the week of the daylight saving time clock shift)
+  // Round the number of weeks to the nearest integer because the number of
+  // milliseconds in a week is not constant (e.g. it's different in the week of
+  // the daylight saving time clock shift).
   return Math.round(diff / millisecondsInWeek) + 1;
 }
 
@@ -17820,7 +17825,7 @@ const lightFormatters = {
   S(date, token) {
     const numberOfDigits = token.length;
     const milliseconds = date.getMilliseconds();
-    const fractionalSeconds = Math.floor(
+    const fractionalSeconds = Math.trunc(
       milliseconds * Math.pow(10, numberOfDigits - 3),
     );
     return addLeadingZeros$1(fractionalSeconds, token.length);
@@ -18467,9 +18472,8 @@ const formatters$1 = {
   },
 
   // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
-  X: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timezoneOffset = originalDate.getTimezoneOffset();
+  X: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
 
     if (timezoneOffset === 0) {
       return "Z";
@@ -18498,9 +18502,8 @@ const formatters$1 = {
   },
 
   // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
-  x: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timezoneOffset = originalDate.getTimezoneOffset();
+  x: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
 
     switch (token) {
       // Hours and optional minutes
@@ -18525,9 +18528,8 @@ const formatters$1 = {
   },
 
   // Timezone (GMT)
-  O: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timezoneOffset = originalDate.getTimezoneOffset();
+  O: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
 
     switch (token) {
       // Short
@@ -18543,9 +18545,8 @@ const formatters$1 = {
   },
 
   // Timezone (specific non-location)
-  z: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timezoneOffset = originalDate.getTimezoneOffset();
+  z: function (date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
 
     switch (token) {
       // Short
@@ -18561,16 +18562,14 @@ const formatters$1 = {
   },
 
   // Seconds timestamp
-  t: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timestamp = Math.floor(originalDate.getTime() / 1000);
+  t: function (date, token, _localize) {
+    const timestamp = Math.trunc(date.getTime() / 1000);
     return addLeadingZeros$1(timestamp, token.length);
   },
 
   // Milliseconds timestamp
-  T: function (date, token, _localize, options) {
-    const originalDate = options._originalDate || date;
-    const timestamp = originalDate.getTime();
+  T: function (date, token, _localize) {
+    const timestamp = date.getTime();
     return addLeadingZeros$1(timestamp, token.length);
   },
 };
@@ -18578,7 +18577,7 @@ const formatters$1 = {
 function formatTimezoneShort$1(offset, delimiter = "") {
   const sign = offset > 0 ? "-" : "+";
   const absOffset = Math.abs(offset);
-  const hours = Math.floor(absOffset / 60);
+  const hours = Math.trunc(absOffset / 60);
   const minutes = absOffset % 60;
   if (minutes === 0) {
     return sign + String(hours);
@@ -18597,7 +18596,7 @@ function formatTimezoneWithOptionalMinutes$1(offset, delimiter) {
 function formatTimezone$1(offset, delimiter = "") {
   const sign = offset > 0 ? "-" : "+";
   const absOffset = Math.abs(offset);
-  const hours = addLeadingZeros$1(Math.floor(absOffset / 60), 2);
+  const hours = addLeadingZeros$1(Math.trunc(absOffset / 60), 2);
   const minutes = addLeadingZeros$1(absOffset % 60, 2);
   return sign + hours + delimiter + minutes;
 }
@@ -18667,35 +18666,109 @@ const longFormatters = {
   P: dateTimeLongFormatter,
 };
 
-const protectedDayOfYearTokens = ["D", "DD"];
-const protectedWeekYearTokens = ["YY", "YYYY"];
+const dayOfYearTokenRE = /^D+$/;
+const weekYearTokenRE = /^Y+$/;
+
+const throwTokens = ["D", "DD", "YY", "YYYY"];
 
 function isProtectedDayOfYearToken(token) {
-  return protectedDayOfYearTokens.indexOf(token) !== -1;
+  return dayOfYearTokenRE.test(token);
 }
 
 function isProtectedWeekYearToken(token) {
-  return protectedWeekYearTokens.indexOf(token) !== -1;
+  return weekYearTokenRE.test(token);
 }
 
-function throwProtectedError(token, format, input) {
-  if (token === "YYYY") {
-    throw new RangeError(
-      `Use \`yyyy\` instead of \`YYYY\` (in \`${format}\`) for formatting years to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`,
-    );
-  } else if (token === "YY") {
-    throw new RangeError(
-      `Use \`yy\` instead of \`YY\` (in \`${format}\`) for formatting years to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`,
-    );
-  } else if (token === "D") {
-    throw new RangeError(
-      `Use \`d\` instead of \`D\` (in \`${format}\`) for formatting days of the month to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`,
-    );
-  } else if (token === "DD") {
-    throw new RangeError(
-      `Use \`dd\` instead of \`DD\` (in \`${format}\`) for formatting days of the month to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`,
-    );
+function warnOrThrowProtectedError(token, format, input) {
+  const _message = message(token, format, input);
+  console.warn(_message);
+  if (throwTokens.includes(token)) throw new RangeError(_message);
+}
+
+function message(token, format, input) {
+  const subject = token[0] === "Y" ? "years" : "days of the month";
+  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
+}
+
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param value - The value to check
+ *
+ * @returns True if the given value is a date
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  return (
+    value instanceof Date ||
+    (typeof value === "object" &&
+      Object.prototype.toString.call(value) === "[object Date]")
+  );
+}
+
+/**
+ * @name isValid
+ * @category Common Helpers
+ * @summary Is the given date valid?
+ *
+ * @description
+ * Returns false if argument is Invalid Date and true otherwise.
+ * Argument is converted to Date using `toDate`. See [toDate](https://date-fns.org/docs/toDate)
+ * Invalid Date is a Date, whose time value is NaN.
+ *
+ * Time value of Date: http://es5.github.io/#x15.9.1.1
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to check
+ *
+ * @returns The date is valid
+ *
+ * @example
+ * // For the valid date:
+ * const result = isValid(new Date(2014, 1, 31))
+ * //=> true
+ *
+ * @example
+ * // For the value, convertable into a date:
+ * const result = isValid(1393804800000)
+ * //=> true
+ *
+ * @example
+ * // For the invalid date:
+ * const result = isValid(new Date(''))
+ * //=> false
+ */
+function isValid(date) {
+  if (!isDate(date) && typeof date !== "number") {
+    return false;
   }
+  const _date = toDate$1(date);
+  return !isNaN(Number(_date));
 }
 
 // This RegExp consists of three parts separated by `|`:
@@ -18726,6 +18799,7 @@ const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 
 /**
  * @name format
+ * @alias formatDate
  * @category Common Helpers
  * @summary Format the date.
  *
@@ -19033,16 +19107,9 @@ function format$1(date, formatStr, options) {
     throw new RangeError("Invalid time value");
   }
 
-  const formatterOptions = {
-    firstWeekContainsDate: firstWeekContainsDate,
-    weekStartsOn: weekStartsOn,
-    locale: locale,
-    _originalDate: originalDate,
-  };
-
-  const result = formatStr
+  let parts = formatStr
     .match(longFormattingTokensRegExp)
-    .map(function (substring) {
+    .map((substring) => {
       const firstCharacter = substring[0];
       if (firstCharacter === "p" || firstCharacter === "P") {
         const longFormatter = longFormatters[firstCharacter];
@@ -19052,37 +19119,19 @@ function format$1(date, formatStr, options) {
     })
     .join("")
     .match(formattingTokensRegExp)
-    .map(function (substring) {
+    .map((substring) => {
       // Replace two single quote characters with one single quote character
       if (substring === "''") {
-        return "'";
+        return { isToken: false, value: "'" };
       }
 
       const firstCharacter = substring[0];
       if (firstCharacter === "'") {
-        return cleanEscapedString(substring);
+        return { isToken: false, value: cleanEscapedString(substring) };
       }
 
-      const formatter = formatters$1[firstCharacter];
-      if (formatter) {
-        if (
-          !options?.useAdditionalWeekYearTokens &&
-          isProtectedWeekYearToken(substring)
-        ) {
-          throwProtectedError(substring, formatStr, String(date));
-        }
-        if (
-          !options?.useAdditionalDayOfYearTokens &&
-          isProtectedDayOfYearToken(substring)
-        ) {
-          throwProtectedError(substring, formatStr, String(date));
-        }
-        return formatter(
-          originalDate,
-          substring,
-          locale.localize,
-          formatterOptions,
-        );
+      if (formatters$1[firstCharacter]) {
+        return { isToken: true, value: substring };
       }
 
       if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
@@ -19093,11 +19142,39 @@ function format$1(date, formatStr, options) {
         );
       }
 
-      return substring;
+      return { isToken: false, value: substring };
+    });
+
+  // invoke localize preprocessor (only for french locales at the moment)
+  if (locale.localize.preprocessor) {
+    parts = locale.localize.preprocessor(originalDate, parts);
+  }
+
+  const formatterOptions = {
+    firstWeekContainsDate,
+    weekStartsOn,
+    locale,
+  };
+
+  return parts
+    .map((part) => {
+      if (!part.isToken) return part.value;
+
+      const token = part.value;
+
+      if (
+        (!options?.useAdditionalWeekYearTokens &&
+          isProtectedWeekYearToken(token)) ||
+        (!options?.useAdditionalDayOfYearTokens &&
+          isProtectedDayOfYearToken(token))
+      ) {
+        warnOrThrowProtectedError(token, formatStr, String(date));
+      }
+
+      const formatter = formatters$1[token[0]];
+      return formatter(originalDate, token, locale.localize, formatterOptions);
     })
     .join("");
-
-  return result;
 }
 
 function cleanEscapedString(input) {
@@ -20576,7 +20653,7 @@ const TimePicker = ({
   });
 };
 
-var css_248z$K = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\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, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\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/* Custom date picker styling */\n.ff-date-picker {\n  position: relative;\n}\n.ff-date-picker .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  --rdp-day_button-height: 24px;\n  --rdp-day_button-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  top: 50%;\n  transform: translate(25%, -50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n  z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n  color: var(--text-color-light);\n  cursor: default;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n  background-color: var(--disable-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */\n  --rdp-day-font: inherit; /* The font used for the day cells. */\n  --rdp-day-height: 2.75rem; /* The height of the day cells. */\n  --rdp-day-width: 2.75rem; /* The width of the day cells. */\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */\n  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */\n  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n  --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  font: var(--rdp-day-font);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n  cursor: revert;\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n  z-index: 2;\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font: var(--rdp-weekday-font);\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font: var(--rdp-week_number-font);\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n  font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border-color: transparent;\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}";
+var css_248z$K = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\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, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\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/* Custom date picker styling */\n.ff-date-picker {\n  position: relative;\n}\n.ff-date-picker .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  --rdp-day_button-height: 24px;\n  --rdp-day_button-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  top: 50%;\n  transform: translate(25%, -50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n  color: var(--text-color-light);\n  cursor: default;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n  background-color: var(--disable-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */\n  --rdp-day-font: inherit; /* The font used for the day cells. */\n  --rdp-day-height: 2.75rem; /* The height of the day cells. */\n  --rdp-day-width: 2.75rem; /* The width of the day cells. */\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */\n  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */\n  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n  --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  font: var(--rdp-day-font);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n  cursor: revert;\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n  z-index: 2;\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font: var(--rdp-weekday-font);\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font: var(--rdp-week_number-font);\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n  font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border-color: transparent;\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */\n  --rdp-day-font: inherit; /* The font used for the day cells. */\n  --rdp-day-height: 2.75rem; /* The height of the day cells. */\n  --rdp-day-width: 2.75rem; /* The width of the day cells. */\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */\n  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */\n  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n  --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n  --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  font: var(--rdp-day-font);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n  cursor: revert;\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n  z-index: 2;\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font: var(--rdp-weekday-font);\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font: var(--rdp-week_number-font);\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n  font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border-color: transparent;\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}";
 styleInject(css_248z$K);
 
 const CustomDatePicker = ({
@@ -20592,7 +20669,9 @@ const CustomDatePicker = ({
   timeFormat = 'hh:mm a',
   error,
   helperText = '',
-  dateOnly = false
+  dateOnly = false,
+  className,
+  zIndex = 10
 }) => {
   const [timeValue, setTimeValue] = useState('');
   const [selectedDate, setSelectedDate] = useState();
@@ -20600,13 +20679,16 @@ const CustomDatePicker = ({
   const [timeError, setTimeError] = useState(false);
   const [selectedMonth, setSelectedMonth] = useState(new Date());
   const [view, setView] = useState('days');
+  const selectedDateRef = useRef(undefined);
   const [startYear, setStartYear] = useState(() => {
     const currentYear = selectedMonth?.getFullYear() ?? new Date().getFullYear();
     return currentYear - currentYear % 12; // Set to the first year in the 12-year range
   });
-  const [datePickerPosition, setDatePickerPosition] = useState('bottom');
   const pickerRef = useRef(null); // Ref to track the picker
   const containerRef = useRef(null);
+  useEffect(() => {
+    selectedDateRef.current = selectedDate;
+  }, [selectedDate]);
   useEffect(() => {
     if (value) {
       setTimeValue(formatTimeStr(value));
@@ -20625,23 +20707,26 @@ const CustomDatePicker = ({
     const adjustPosition = () => {
       if (containerRef.current && pickerRef.current) {
         const relativeRect = containerRef.current.getBoundingClientRect();
-        const absoluteRect = pickerRef.current.getBoundingClientRect();
+        const pickerHeight = pickerRef.current.offsetHeight;
+        const spacing = 5; // spacing in pixels
         const spaceBelow = window.innerHeight - relativeRect.bottom;
         const spaceAbove = relativeRect.top;
-        // Check if there is more space above than below
-        if (spaceBelow < absoluteRect.height && spaceAbove >= absoluteRect.height) {
-          setDatePickerPosition('top');
-        } else {
-          setDatePickerPosition('bottom');
+        let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
+        if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
+          top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
         }
+        // Horizontal position: align to container with optional adjustments
+        const left = relativeRect.left + window.scrollX;
+        pickerRef.current.style.top = `${top}px`;
+        pickerRef.current.style.left = `${left}px`;
       }
     };
-    // Initial check
+    // Initial adjustment
     adjustPosition();
-    // Adjust position on window resize
+    // Recalculate on resize
     window.addEventListener('resize', adjustPosition);
     return () => window.removeEventListener('resize', adjustPosition);
-  }, []);
+  }, [isPickerOpen]);
   const calendarStyle = {
     '--rdp-day-width': calendarWidth ? `${calendarWidth / 7 - 4}px` : undefined
   };
@@ -20675,7 +20760,8 @@ const CustomDatePicker = ({
     }
   };
   const handleSave = () => {
-    onChange(selectedDate);
+    console.log('selectedDate1', selectedDateRef.current);
+    onChange(selectedDateRef.current);
     resetAndCloseDatePicker();
   };
   const handleDateInputClick = () => {
@@ -20853,7 +20939,7 @@ const CustomDatePicker = ({
     });
   };
   return jsxs("div", {
-    className: "ff-date-picker",
+    className: `ff-date-picker ${className}`,
     ref: containerRef,
     children: [jsxs("div", {
       className: "ff-datepicker-input-container",
@@ -20897,8 +20983,7 @@ const CustomDatePicker = ({
       className: "ff-date-picker-container",
       ref: pickerRef,
       style: {
-        top: datePickerPosition === 'top' ? 'auto' : '110%',
-        bottom: datePickerPosition === 'top' ? '110%' : 'auto'
+        zIndex
       },
       children: [jsxs("div", {
         className: "ff-calendar-container",
@@ -20948,12 +21033,12 @@ const CustomDatePicker = ({
         })]
       }), !dateOnly && jsxs("div", {
         className: "ff-date-picker-controls",
-        children: [jsx(Button$2, {
+        children: [jsx(Button$1, {
           className: "ff-date-picker-button",
           variant: "secondary",
           onClick: handleCancel,
           label: "Cancel"
-        }), jsx(Button$2, {
+        }), jsx(Button$1, {
           className: "ff-date-picker-button",
           variant: "primary",
           onClick: handleSave,
@@ -21609,6 +21694,8 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -22598,11 +22685,12 @@ var KeyboardCode;
   KeyboardCode["Up"] = "ArrowUp";
   KeyboardCode["Esc"] = "Escape";
   KeyboardCode["Enter"] = "Enter";
+  KeyboardCode["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 const defaultKeyboardCodes = {
   start: [KeyboardCode.Space, KeyboardCode.Enter],
   cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter]
+  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -22901,6 +22989,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
+    if (events.cancel) {
+      this.listeners.add(events.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -22916,9 +23007,11 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
+        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
+        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -22935,6 +23028,13 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
+  handlePending(constraint, offset) {
+    const {
+      active,
+      onPending
+    } = this.props;
+    onPending(active, constraint, this.initialCoordinates, offset);
+  }
   handleStart() {
     const {
       initialCoordinates
@@ -22988,6 +23088,7 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
+      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -22997,16 +23098,24 @@ class AbstractPointerSensor {
   }
   handleEnd() {
     const {
+      onAbort,
       onEnd
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onEnd();
   }
   handleCancel() {
     const {
+      onAbort,
       onCancel
     } = this.props;
     this.detach();
+    if (!this.activated) {
+      onAbort(this.props.active);
+    }
     onCancel();
   }
   handleKeydown(event) {
@@ -23020,6 +23129,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: 'pointercancel'
+  },
   move: {
     name: 'pointermove'
   },
@@ -23092,6 +23204,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: 'touchcancel'
+  },
   move: {
     name: 'touchmove'
   },
@@ -23293,11 +23408,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,
@@ -23505,7 +23620,26 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = useReducer(reducer, null);
+  const [rect, setRect] = useState(null);
+  function measureRect() {
+    setRect(currentRect => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+
+        // Fall back to last rect we measured if the element is
+        // no longer connected to the DOM.
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -23540,23 +23674,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-
-      // Fall back to last rect we measured if the element is
-      // no longer connected to the DOM.
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -23702,28 +23819,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = useReducer(reducer, defaultValue$2);
+  const [rects, setRects] = useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect$1(() => {
-    if (elements.length) {
-      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -23890,7 +24003,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -24162,7 +24275,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef({
     initial: null,
     translated: null
@@ -24197,7 +24310,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -24275,6 +24388,7 @@ const DndContext = /*#__PURE__*/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 = useRef(null);
   const instantiateSensor = useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -24296,6 +24410,43 @@ const DndContext = /*#__PURE__*/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) {
@@ -24309,6 +24460,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
+          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -24327,6 +24479,8 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
+          setActiveSensor(activeSensorRef.current);
+          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -24338,10 +24492,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    unstable_batchedUpdates(() => {
-      setActiveSensor(sensorInstance);
-      setActivatorEvent(event.nativeEvent);
-    });
+    activeSensorRef.current = sensorInstance;
     function createHandler(type) {
       return async function handler() {
         const {
@@ -24378,6 +24529,7 @@ const DndContext = /*#__PURE__*/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];
@@ -24599,7 +24751,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/createContext$1(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Droppable';
+const ID_PREFIX$1 = 'Draggable';
 function useDraggable(_ref) {
   let {
     id,
@@ -24746,7 +24898,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$1(() => {
+  useEffect(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -25161,6 +25313,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
+  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -27034,6 +27187,316 @@ const DashboardDonutChart = ({
 
 var propTypes = {exports: {}};
 
+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;
+}
+
 /*
 object-assign
 (c) Sindre Sorhus
@@ -27136,6 +27599,15 @@ function requireReactPropTypesSecret() {
   return ReactPropTypesSecret_1;
 }
 
+var has$1;
+var hasRequiredHas;
+function requireHas() {
+  if (hasRequiredHas) return has$1;
+  hasRequiredHas = 1;
+  has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
+  return has$1;
+}
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -27149,8 +27621,9 @@ function requireCheckPropTypes() {
   hasRequiredCheckPropTypes = 1;
   var printWarning = function () {};
   if (process.env.NODE_ENV !== 'production') {
-    var ReactPropTypesSecret = requireReactPropTypesSecret();
+    var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
     var loggedTypeFailures = {};
+    var has = /*@__PURE__*/requireHas();
     printWarning = function (text) {
       var message = 'Warning: ' + text;
       if (typeof console !== 'undefined') {
@@ -27161,7 +27634,7 @@ function requireCheckPropTypes() {
         // This error was thrown as a convenience so that you can use this stack
         // to find the callsite that caused this warning to fire.
         throw new Error(message);
-      } catch (x) {}
+      } catch (x) {/**/}
     };
   }
 
@@ -27179,7 +27652,7 @@ function requireCheckPropTypes() {
   function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
     if (process.env.NODE_ENV !== 'production') {
       for (var typeSpecName in typeSpecs) {
-        if (typeSpecs.hasOwnProperty(typeSpecName)) {
+        if (has(typeSpecs, typeSpecName)) {
           var error;
           // Prop type validation may throw. In case they do, we don't want to
           // fail the render phase where it didn't fail before. So we log it.
@@ -27188,7 +27661,7 @@ function requireCheckPropTypes() {
             // This is intentionally an invariant that gets caught. It's the same
             // behavior as without this statement except with a better message.
             if (typeof typeSpecs[typeSpecName] !== 'function') {
-              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.');
+              var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
               err.name = 'Invariant Violation';
               throw err;
             }
@@ -27210,6 +27683,17 @@ function requireCheckPropTypes() {
       }
     }
   }
+
+  /**
+   * Resets warning cache when testing.
+   *
+   * @private
+   */
+  checkPropTypes.resetWarningCache = function () {
+    if (process.env.NODE_ENV !== 'production') {
+      loggedTypeFailures = {};
+    }
+  };
   checkPropTypes_1 = checkPropTypes;
   return checkPropTypes_1;
 }
@@ -27225,9 +27709,11 @@ var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
+  var ReactIs = requireReactIs();
   var assign = requireObjectAssign();
-  var ReactPropTypesSecret = requireReactPropTypesSecret();
-  var checkPropTypes = requireCheckPropTypes();
+  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
+  var has = /*@__PURE__*/requireHas();
+  var checkPropTypes = /*@__PURE__*/requireCheckPropTypes();
   var printWarning = function () {};
   if (process.env.NODE_ENV !== 'production') {
     printWarning = function (text) {
@@ -27325,6 +27811,7 @@ function requireFactoryWithTypeCheckers() {
     // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
     var ReactPropTypes = {
       array: createPrimitiveTypeChecker('array'),
+      bigint: createPrimitiveTypeChecker('bigint'),
       bool: createPrimitiveTypeChecker('boolean'),
       func: createPrimitiveTypeChecker('function'),
       number: createPrimitiveTypeChecker('number'),
@@ -27334,6 +27821,7 @@ function requireFactoryWithTypeCheckers() {
       any: createAnyTypeChecker(),
       arrayOf: createArrayOfTypeChecker,
       element: createElementTypeChecker(),
+      elementType: createElementTypeTypeChecker(),
       instanceOf: createInstanceTypeChecker,
       node: createNodeChecker(),
       objectOf: createObjectOfTypeChecker,
@@ -27368,8 +27856,9 @@ function requireFactoryWithTypeCheckers() {
      * is prohibitively expensive if they are created too often, such as what
      * happens in oneOfType() for any type before the one that matched.
      */
-    function PropTypeError(message) {
+    function PropTypeError(message, data) {
       this.message = message;
+      this.data = data && typeof data === 'object' ? data : {};
       this.stack = '';
     }
     // Make `instanceof Error` still work for returned errors.
@@ -27425,7 +27914,9 @@ function requireFactoryWithTypeCheckers() {
           // check, but we can offer a more precise error message here rather than
           // 'of type `object`'.
           var preciseType = getPreciseType(propValue);
-          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'), {
+            expectedType: expectedType
+          });
         }
         return null;
       }
@@ -27465,6 +27956,17 @@ function requireFactoryWithTypeCheckers() {
       }
       return createChainableTypeChecker(validate);
     }
+    function createElementTypeTypeChecker() {
+      function validate(props, propName, componentName, location, propFullName) {
+        var propValue = props[propName];
+        if (!ReactIs.isValidElementType(propValue)) {
+          var propType = getPropType(propValue);
+          return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+        }
+        return null;
+      }
+      return createChainableTypeChecker(validate);
+    }
     function createInstanceTypeChecker(expectedClass) {
       function validate(props, propName, componentName, location, propFullName) {
         if (!(props[propName] instanceof expectedClass)) {
@@ -27478,7 +27980,13 @@ function requireFactoryWithTypeCheckers() {
     }
     function createEnumTypeChecker(expectedValues) {
       if (!Array.isArray(expectedValues)) {
-        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
+        if (process.env.NODE_ENV !== 'production') {
+          if (arguments.length > 1) {
+            printWarning('Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' + 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).');
+          } else {
+            printWarning('Invalid argument supplied to oneOf, expected an array.');
+          }
+        }
         return emptyFunctionThatReturnsNull;
       }
       function validate(props, propName, componentName, location, propFullName) {
@@ -27488,8 +27996,14 @@ function requireFactoryWithTypeCheckers() {
             return null;
           }
         }
-        var valuesString = JSON.stringify(expectedValues);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+        var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+          var type = getPreciseType(value);
+          if (type === 'symbol') {
+            return String(value);
+          }
+          return value;
+        });
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
       }
       return createChainableTypeChecker(validate);
     }
@@ -27504,7 +28018,7 @@ function requireFactoryWithTypeCheckers() {
           return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
         }
         for (var key in propValue) {
-          if (propValue.hasOwnProperty(key)) {
+          if (has(propValue, key)) {
             var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
             if (error instanceof Error) {
               return error;
@@ -27528,13 +28042,19 @@ function requireFactoryWithTypeCheckers() {
         }
       }
       function validate(props, propName, componentName, location, propFullName) {
+        var expectedTypes = [];
         for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
           var checker = arrayOfTypeCheckers[i];
-          if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
+          var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
+          if (checkerResult == null) {
             return null;
           }
+          if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+            expectedTypes.push(checkerResult.data.expectedType);
+          }
         }
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+        var expectedTypesMessage = expectedTypes.length > 0 ? ', expected one of type [' + expectedTypes.join(', ') + ']' : '';
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
       }
       return createChainableTypeChecker(validate);
     }
@@ -27547,6 +28067,9 @@ function requireFactoryWithTypeCheckers() {
       }
       return createChainableTypeChecker(validate);
     }
+    function invalidValidatorError(componentName, location, propFullName, key, type) {
+      return new PropTypeError((componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + type + '`.');
+    }
     function createShapeTypeChecker(shapeTypes) {
       function validate(props, propName, componentName, location, propFullName) {
         var propValue = props[propName];
@@ -27556,8 +28079,8 @@ function requireFactoryWithTypeCheckers() {
         }
         for (var key in shapeTypes) {
           var checker = shapeTypes[key];
-          if (!checker) {
-            continue;
+          if (typeof checker !== 'function') {
+            return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
           }
           var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
           if (error) {
@@ -27575,11 +28098,13 @@ function requireFactoryWithTypeCheckers() {
         if (propType !== 'object') {
           return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
         }
-        // We need to check all keys in case some are required but missing from
-        // props.
+        // We need to check all keys in case some are required but missing from props.
         var allKeys = assign({}, props[propName], shapeTypes);
         for (var key in allKeys) {
           var checker = shapeTypes[key];
+          if (has(shapeTypes, key) && typeof checker !== 'function') {
+            return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+          }
           if (!checker) {
             return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + '\nBad object: ' + JSON.stringify(props[propName], null, '  ') + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  '));
           }
@@ -27642,6 +28167,11 @@ function requireFactoryWithTypeCheckers() {
         return true;
       }
 
+      // falsy value can't be a Symbol
+      if (!propValue) {
+        return false;
+      }
+
       // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
       if (propValue['@@toStringTag'] === 'Symbol') {
         return true;
@@ -27714,6 +28244,7 @@ function requireFactoryWithTypeCheckers() {
       return propValue.constructor.name;
     }
     ReactPropTypes.checkPropTypes = checkPropTypes;
+    ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
     ReactPropTypes.PropTypes = ReactPropTypes;
     return ReactPropTypes;
   };
@@ -27731,8 +28262,10 @@ var hasRequiredFactoryWithThrowingShims;
 function requireFactoryWithThrowingShims() {
   if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
   hasRequiredFactoryWithThrowingShims = 1;
-  var ReactPropTypesSecret = requireReactPropTypesSecret();
+  var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
   function emptyFunction() {}
+  function emptyFunctionWithReset() {}
+  emptyFunctionWithReset.resetWarningCache = emptyFunction;
   factoryWithThrowingShims = function () {
     function shim(props, propName, componentName, location, propFullName, secret) {
       if (secret === ReactPropTypesSecret) {
@@ -27751,6 +28284,7 @@ function requireFactoryWithThrowingShims() {
     // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
     var ReactPropTypes = {
       array: shim,
+      bigint: shim,
       bool: shim,
       func: shim,
       number: shim,
@@ -27760,15 +28294,17 @@ function requireFactoryWithThrowingShims() {
       any: shim,
       arrayOf: getShim,
       element: shim,
+      elementType: shim,
       instanceOf: getShim,
       node: shim,
       objectOf: getShim,
       oneOf: getShim,
       oneOfType: getShim,
       shape: getShim,
-      exact: getShim
+      exact: getShim,
+      checkPropTypes: emptyFunctionWithReset,
+      resetWarningCache: emptyFunction
     };
-    ReactPropTypes.checkPropTypes = emptyFunction;
     ReactPropTypes.PropTypes = ReactPropTypes;
     return ReactPropTypes;
   };
@@ -27786,24 +28322,21 @@ function requirePropTypes() {
   if (hasRequiredPropTypes) return propTypes.exports;
   hasRequiredPropTypes = 1;
   if (process.env.NODE_ENV !== 'production') {
-    var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element') || 0xeac7;
-    var isValidElement = function (object) {
-      return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-    };
+    var ReactIs = requireReactIs();
 
     // By explicitly using `prop-types` you are opting into new development behavior.
     // http://fb.me/prop-types-in-prod
     var throwOnDirectAccess = true;
-    propTypes.exports = requireFactoryWithTypeCheckers()(isValidElement, throwOnDirectAccess);
+    propTypes.exports = /*@__PURE__*/requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
   } else {
     // By explicitly using `prop-types` you are opting into new production behavior.
     // http://fb.me/prop-types-in-prod
-    propTypes.exports = requireFactoryWithThrowingShims()();
+    propTypes.exports = /*@__PURE__*/requireFactoryWithThrowingShims()();
   }
   return propTypes.exports;
 }
 
-var propTypesExports = requirePropTypes();
+var propTypesExports = /*@__PURE__*/ requirePropTypes();
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
 var _excluded = ["sitekey", "onChange", "theme", "type", "tabindex", "onExpired", "onErrored", "size", "stoken", "grecaptcha", "badge", "hl", "isolated"];
@@ -28024,316 +28557,6 @@ ReCAPTCHA.defaultProps = {
   badge: "bottomright"
 };
 
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
-  var b = "function" === typeof Symbol && Symbol.for,
-    c = b ? Symbol.for("react.element") : 60103,
-    d = b ? Symbol.for("react.portal") : 60106,
-    e = b ? Symbol.for("react.fragment") : 60107,
-    f = b ? Symbol.for("react.strict_mode") : 60108,
-    g = b ? Symbol.for("react.profiler") : 60114,
-    h = b ? Symbol.for("react.provider") : 60109,
-    k = b ? Symbol.for("react.context") : 60110,
-    l = b ? Symbol.for("react.async_mode") : 60111,
-    m = b ? Symbol.for("react.concurrent_mode") : 60111,
-    n = b ? Symbol.for("react.forward_ref") : 60112,
-    p = b ? Symbol.for("react.suspense") : 60113,
-    q = b ? Symbol.for("react.suspense_list") : 60120,
-    r = b ? Symbol.for("react.memo") : 60115,
-    t = b ? Symbol.for("react.lazy") : 60116,
-    v = b ? Symbol.for("react.block") : 60121,
-    w = b ? Symbol.for("react.fundamental") : 60117,
-    x = b ? Symbol.for("react.responder") : 60118,
-    y = b ? Symbol.for("react.scope") : 60119;
-  function z(a) {
-    if ("object" === typeof a && null !== a) {
-      var u = a.$$typeof;
-      switch (u) {
-        case c:
-          switch (a = a.type, a) {
-            case l:
-            case m:
-            case e:
-            case g:
-            case f:
-            case p:
-              return a;
-            default:
-              switch (a = a && a.$$typeof, a) {
-                case k:
-                case n:
-                case t:
-                case r:
-                case h:
-                  return a;
-                default:
-                  return u;
-              }
-          }
-        case d:
-          return u;
-      }
-    }
-  }
-  function A(a) {
-    return z(a) === m;
-  }
-  reactIs_production_min.AsyncMode = l;
-  reactIs_production_min.ConcurrentMode = m;
-  reactIs_production_min.ContextConsumer = k;
-  reactIs_production_min.ContextProvider = h;
-  reactIs_production_min.Element = c;
-  reactIs_production_min.ForwardRef = n;
-  reactIs_production_min.Fragment = e;
-  reactIs_production_min.Lazy = t;
-  reactIs_production_min.Memo = r;
-  reactIs_production_min.Portal = d;
-  reactIs_production_min.Profiler = g;
-  reactIs_production_min.StrictMode = f;
-  reactIs_production_min.Suspense = p;
-  reactIs_production_min.isAsyncMode = function (a) {
-    return A(a) || z(a) === l;
-  };
-  reactIs_production_min.isConcurrentMode = A;
-  reactIs_production_min.isContextConsumer = function (a) {
-    return z(a) === k;
-  };
-  reactIs_production_min.isContextProvider = function (a) {
-    return z(a) === h;
-  };
-  reactIs_production_min.isElement = function (a) {
-    return "object" === typeof a && null !== a && a.$$typeof === c;
-  };
-  reactIs_production_min.isForwardRef = function (a) {
-    return z(a) === n;
-  };
-  reactIs_production_min.isFragment = function (a) {
-    return z(a) === e;
-  };
-  reactIs_production_min.isLazy = function (a) {
-    return z(a) === t;
-  };
-  reactIs_production_min.isMemo = function (a) {
-    return z(a) === r;
-  };
-  reactIs_production_min.isPortal = function (a) {
-    return z(a) === d;
-  };
-  reactIs_production_min.isProfiler = function (a) {
-    return z(a) === g;
-  };
-  reactIs_production_min.isStrictMode = function (a) {
-    return z(a) === f;
-  };
-  reactIs_production_min.isSuspense = function (a) {
-    return z(a) === p;
-  };
-  reactIs_production_min.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
-  };
-  reactIs_production_min.typeOf = z;
-  return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
-
-      // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-      // nor polyfill, then a plain number is used for performance.
-      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-      // (unstable) APIs that have been removed. Can we remove the symbols?
-
-      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-      function isValidElementType(type) {
-        return typeof type === 'string' || typeof type === 'function' ||
-        // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-      }
-      function typeOf(object) {
-        if (typeof object === 'object' && object !== null) {
-          var $$typeof = object.$$typeof;
-          switch ($$typeof) {
-            case REACT_ELEMENT_TYPE:
-              var type = object.type;
-              switch (type) {
-                case REACT_ASYNC_MODE_TYPE:
-                case REACT_CONCURRENT_MODE_TYPE:
-                case REACT_FRAGMENT_TYPE:
-                case REACT_PROFILER_TYPE:
-                case REACT_STRICT_MODE_TYPE:
-                case REACT_SUSPENSE_TYPE:
-                  return type;
-                default:
-                  var $$typeofType = type && type.$$typeof;
-                  switch ($$typeofType) {
-                    case REACT_CONTEXT_TYPE:
-                    case REACT_FORWARD_REF_TYPE:
-                    case REACT_LAZY_TYPE:
-                    case REACT_MEMO_TYPE:
-                    case REACT_PROVIDER_TYPE:
-                      return $$typeofType;
-                    default:
-                      return $$typeof;
-                  }
-              }
-            case REACT_PORTAL_TYPE:
-              return $$typeof;
-          }
-        }
-        return undefined;
-      } // AsyncMode is deprecated along with isAsyncMode
-
-      var AsyncMode = REACT_ASYNC_MODE_TYPE;
-      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-      var ContextConsumer = REACT_CONTEXT_TYPE;
-      var ContextProvider = REACT_PROVIDER_TYPE;
-      var Element = REACT_ELEMENT_TYPE;
-      var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
-      var Lazy = REACT_LAZY_TYPE;
-      var Memo = REACT_MEMO_TYPE;
-      var Portal = REACT_PORTAL_TYPE;
-      var Profiler = REACT_PROFILER_TYPE;
-      var StrictMode = REACT_STRICT_MODE_TYPE;
-      var Suspense = REACT_SUSPENSE_TYPE;
-      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-      function isAsyncMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-          }
-        }
-        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-      }
-      function isConcurrentMode(object) {
-        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-      }
-      function isContextConsumer(object) {
-        return typeOf(object) === REACT_CONTEXT_TYPE;
-      }
-      function isContextProvider(object) {
-        return typeOf(object) === REACT_PROVIDER_TYPE;
-      }
-      function isElement(object) {
-        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-      }
-      function isForwardRef(object) {
-        return typeOf(object) === REACT_FORWARD_REF_TYPE;
-      }
-      function isFragment(object) {
-        return typeOf(object) === REACT_FRAGMENT_TYPE;
-      }
-      function isLazy(object) {
-        return typeOf(object) === REACT_LAZY_TYPE;
-      }
-      function isMemo(object) {
-        return typeOf(object) === REACT_MEMO_TYPE;
-      }
-      function isPortal(object) {
-        return typeOf(object) === REACT_PORTAL_TYPE;
-      }
-      function isProfiler(object) {
-        return typeOf(object) === REACT_PROFILER_TYPE;
-      }
-      function isStrictMode(object) {
-        return typeOf(object) === REACT_STRICT_MODE_TYPE;
-      }
-      function isSuspense(object) {
-        return typeOf(object) === REACT_SUSPENSE_TYPE;
-      }
-      reactIs_development.AsyncMode = AsyncMode;
-      reactIs_development.ConcurrentMode = ConcurrentMode;
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
-    })();
-  }
-  return reactIs_development;
-}
-
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
-  hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === 'production') {
-    reactIs.exports = requireReactIs_production_min();
-  } else {
-    reactIs.exports = requireReactIs_development();
-  }
-  return reactIs.exports;
-}
-
 var hoistNonReactStatics_cjs;
 var hasRequiredHoistNonReactStatics_cjs;
 function requireHoistNonReactStatics_cjs() {
@@ -28682,6 +28905,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
 var css_248z$B = ".ff-recaptcha-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n  color: var(--input-error-text-color);\n  font-size: 12px;\n  margin-top: 4px;\n}";
 styleInject(css_248z$B);
 
+// Extend the props to include React.RefAttributes
+const FixedReCAPTCHA = RecaptchaWrapper;
 const Recaptcha = /*#__PURE__*/forwardRef(({
   onVerify,
   className = '',
@@ -28701,7 +28926,7 @@ const Recaptcha = /*#__PURE__*/forwardRef(({
   const error = externalError || internalError;
   return jsxs("div", {
     className: classNames('ff-recaptcha-wrapper', className),
-    children: [jsx(RecaptchaWrapper, {
+    children: [jsx(FixedReCAPTCHA, {
       ref: ref,
       sitekey: sitekey,
       onChange: handleChange,
@@ -29621,7 +29846,7 @@ const Branches = ({
           })]
         }) : jsx("div", {
           className: "ff-connecting-branch-browser-button",
-          children: jsx(Button$2, {
+          children: jsx(Button$1, {
             id: `ff-sequential-branch-add-${machineInstanceId}`,
             variant: "tertiary",
             label: addInstanceLabel,
@@ -29785,7 +30010,7 @@ const SequentialConnectingBranch = ({
                 className: "ff-branch-arrow"
               })
             }), isMachineInstances && jsx(Fragment, {
-              children: jsx(Button$2, {
+              children: jsx(Button$1, {
                 variant: "tertiary",
                 label: "Add Environment",
                 size: "small",
@@ -29911,7 +30136,7 @@ const AttachmentButton = ({
       fontWeight: "semi-bold",
       lineHeight: '18px',
       children: label
-    }), (!showSelectedFiles || selectedFiles.length === 0) && jsx(Button$2, {
+    }), (!showSelectedFiles || selectedFiles.length === 0) && jsx(Button$1, {
       variant: buttonVariant,
       label: buttonLabel,
       size: "medium",
@@ -33198,7 +33423,7 @@ var scheduler = {exports: {}};
 
 var scheduler_production_min = {};
 
-/** @license React v0.19.0
+/** @license React v0.19.1
  * scheduler.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -33500,7 +33725,7 @@ function requireScheduler_production_min() {
 
 var scheduler_development = {};
 
-/** @license React v0.19.0
+/** @license React v0.19.1
  * scheduler.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -37291,11 +37516,11 @@ const CreateVariableSlider = ({
   const FooterContent = () => {
     return jsxs("div", {
       className: "ff-create-slider-footer",
-      children: [jsx(Button$2, {
+      children: [jsx(Button$1, {
         onClick: onClose,
         label: "Cancel",
         variant: "tertiary"
-      }), jsx(Button$2, {
+      }), jsx(Button$1, {
         variant: "primary",
         label: "create",
         type: "submit",
@@ -37554,7 +37779,6 @@ const ProgressBar = ({
   });
 };
 
-const areEqual = (prevProps, nextProps) => prevProps.selectedFile?.name === nextProps.selectedFile?.name;
 const ChooseFile = ({
   variant = 'primary',
   size = 'small',
@@ -37571,7 +37795,7 @@ const ChooseFile = ({
   handleCloseIcon
 }) => {
   return jsx("div", {
-    children: jsx(Button$2, {
+    children: jsx(Button$1, {
       variant: variant,
       label: label,
       type: type,
@@ -37589,7 +37813,6 @@ const ChooseFile = ({
     })
   });
 };
-var ChooseFile$1 = /*#__PURE__*/memo(ChooseFile, areEqual);
 
 var css_248z$8 = "/* Container Styling */\n.ff-script-switch-container {\n  display: flex;\n  background-color: var(--base-bg-color);\n  height: 24px;\n  width: 48px;\n  border-radius: 6px;\n  border: 1px solid var(--border-color);\n  align-items: center;\n  justify-content: center;\n  /* Button Styling */\n  /* Active Button */\n}\n.ff-script-switch-container .ff-script-switch-button {\n  padding: 0.1px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.3s ease;\n  /* Button Hover Effect */\n}\n.ff-script-switch-container .ff-script-switch-button:hover {\n  background-color: var(--hover-color);\n  color: var(--brand-color);\n}\n.ff-script-switch-container .ff-script-switch-button.active {\n  background-color: var(--ff-line-number-bg);\n  color: var(--base-bg-color);\n}";
 styleInject(css_248z$8);
@@ -50984,11 +51207,11 @@ const PopUpModal = ({
         })]
       }), jsxs("div", {
         className: 'warning_modal_footer_button',
-        children: [jsx(Button$2, {
+        children: [jsx(Button$1, {
           variant: "secondary",
           label: firstButtonLabel,
           onClick: onClose
-        }), jsx(Button$2, {
+        }), jsx(Button$1, {
           variant: buttonVariant || 'warning',
           label: secondButtonLabel,
           onClick: onContinue
@@ -53136,5 +53359,5 @@ const PhoneInputField = ({
   });
 };
 
-export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, Button$2 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile$1 as ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useKeyboardActions, useTheme };
+export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, Button$1 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useKeyboardActions, useTheme };
 //# sourceMappingURL=index.esm.js.map