pixel-react 1.7.5 → 1.7.6

package/lib/index.esm.js

@@ -3180,9 +3180,9 @@ const OptionCard = ({
   const optionCardRef = useRef(null);
   useEffect(() => {
     if (optionCardRef?.current) {
-      const rect = optionCardRef.current.getBoundingClientRect();
-      setOptionsHeight(rect.height);
-      setOptionsWidth(rect.width);
+      const rect = optionCardRef?.current?.getBoundingClientRect();
+      setOptionsHeight(rect?.height);
+      setOptionsWidth(rect?.width);
     }
   }, []);
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
@@ -3195,7 +3195,7 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + menuPosition.height + 7,
+          top: menuPosition.top + 20,
           left: menuPosition.left - 4
         };
       case 'left':
@@ -3206,25 +3206,23 @@ const OptionCard = ({
       case 'right':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left + menuPosition.height + 20
+          left: menuPosition.left + 20
         };
       default:
         return {
-          top: menuPosition.top,
-          left: menuPosition.left
+          top: menuPosition.bottom,
+          left: menuPosition.rightSpaceAvailable + 12
         };
     }
   })();
-  const adjustedStyle = {
-    top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
-    left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
-    zIndex
-  };
   return /*#__PURE__*/createPortal(jsx("div", {
     className: classNames('ff-option-card', [{
       'ff-option-card--primary': variant === 'primary'
     }], currentTheme),
-    style: adjustedStyle,
+    style: {
+      ...style,
+      zIndex
+    },
     ref: optionCardRef,
     children: options.map(opt => jsx(Option$1, {
       option: opt,
@@ -3258,19 +3256,6 @@ const MenuOption = ({
     right: 0
   });
   const closeDropDown = () => setIsClicked(false);
-  const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
-      const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
-      const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
-      setMenuPosition({
-        top: rect.top + window.scrollY - containerScrollTop,
-        left: rect.left + window.scrollX - containerScrollLeft,
-        height: rect.height,
-        right: rect.right
-      });
-    }
-  };
   const onIconClickHandler = () => {
     onClick();
     calculateDims();
@@ -3280,6 +3265,23 @@ const MenuOption = ({
     onOptionClick(option);
     closeDropDown();
   };
+  const calculateDims = () => {
+    let targetElement = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+        height: rect.height,
+        right: rect.right
+      });
+    }
+  };
   return jsxs("div", {
     className: "ff-menu-option-container",
     ref: menuRef,
@@ -4042,7 +4044,7 @@ const useFileDropzone = options => {
   };
 };
 
-var css_248z$S = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n  position: relative;\n  bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n  display: grid;\n  place-items: center;\n  padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n  padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n  position: relative;\n  bottom: 2px;\n}\n\n.ff-input-ref {\n  display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+var css_248z$S = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n  position: relative;\n  bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n  display: grid;\n  place-items: center;\n  padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n  padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n  position: relative;\n  bottom: 2px;\n}\n\n.ff-input-ref {\n  display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer_basic_button {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: flex-end;\n  gap: 16px;\n  border-top: 1px solid var(--border-color);\n  padding: 4px 8px;\n  background-color: var(--primary-icon-color);\n}";
 styleInject(css_248z$S);
 
 var css_248z$R = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\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-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
@@ -4126,13 +4128,17 @@ const RadioGroup = ({
 const RadioFilePreview = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer
 }) => {
   const fileInputRef = useRef(null);
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
   const handleFileChange = event => {
     const file = event.target.files?.[0];
@@ -4204,7 +4210,8 @@ const Dropzone = ({
   selectedFile,
   setSelectedFile,
   handleRemoveFile,
-  isDisable
+  isDisable,
+  setShowDrawer
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return jsx("div", {
@@ -4221,7 +4228,9 @@ const Dropzone = ({
       selectedFile: selectedFile.name,
       onFileRemoveClick: handleRemoveFile,
       onFileReplaceClick: setSelectedFile,
-      setSelectedFile: setSelectedFile
+      setSelectedFile: setSelectedFile,
+      selectedRadioOption: selectedRadioOption,
+      setShowDrawer: setShowDrawer
     }) : jsxs(Fragment, {
       children: [jsx("div", {
         className: "ff-file-dropzone-content__icon",
@@ -4376,7 +4385,8 @@ const FileDropzone = ({
   handleFileChange,
   handleRemoveFile,
   isApiResponseError = false,
-  isDisable = false
+  isDisable = false,
+  setShowDrawer
 }) => {
   const fileInputRef = useRef(null);
   const {
@@ -4450,7 +4460,8 @@ const FileDropzone = ({
       handleFileChange: handleFileChange,
       handleRemoveFile: handleRemoveFile,
       setSelectedFile: setSelectedFile,
-      isDisable: isDisable
+      isDisable: isDisable,
+      setShowDrawer: setShowDrawer
     }), isWebServiceFileDropZone && jsx("input", {
       ref: fileInputRef,
       type: "file",
@@ -13239,53 +13250,6 @@ function setYear(date, year, options) {
   return date_;
 }
 
-const FIVE_WEEKS = 5;
-const FOUR_WEEKS = 4;
-/**
- * Return the number of weeks to display in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function getBroadcastWeeksInMonth(month, dateLib) {
-  // Get the first day of the month
-  const firstDayOfMonth = dateLib.startOfMonth(month);
-  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
-  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
-  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
-  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
-  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
-  return numberOfWeeks;
-}
-
-/**
- * Return the start date of the week in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function startOfBroadcastWeek(date, dateLib) {
-  const firstOfMonth = dateLib.startOfMonth(date);
-  const dayOfWeek = firstOfMonth.getDay();
-  if (dayOfWeek === 1) {
-    return firstOfMonth;
-  } else if (dayOfWeek === 0) {
-    return dateLib.addDays(firstOfMonth, -1 * 6);
-  } else {
-    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
-  }
-}
-
-/**
- * Return the end date of the week in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function endOfBroadcastWeek(date, dateLib) {
-  const startDate = startOfBroadcastWeek(date, dateLib);
-  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
-  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
-  return endDate;
-}
-
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -13366,15 +13330,6 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
-    /**
-     * Returns the end of the broadcast week for the given date.
-     *
-     * @param date The original date.
-     * @returns The end of the broadcast week.
-     */
-    this.endOfBroadcastWeek = date => {
-      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
-    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -13536,15 +13491,6 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
-    /**
-     * Returns the start of the broadcast week for the given date.
-     *
-     * @param date The original date.
-     * @returns The start of the broadcast week.
-     */
-    this.startOfBroadcastWeek = date => {
-      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
-    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -14130,8 +14076,7 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined,
-    "data-broadcast-calendar": props.broadcastCalendar || undefined
+    "data-week-numbers": props.showWeekNumber || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -14197,7 +14142,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale) {
+locale = enUS) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -14301,7 +14246,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -14676,8 +14621,7 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone, /** @since 9.4.0 */
-broadcastCalendar) {
+ISOWeek, timeZone) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -14880,30 +14824,29 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
+/** The number of days in a month when having 6 weeks. */
+const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks,
-    broadcastCalendar
+    fixedWeeks
   } = props ?? {};
   const {
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
+    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
-    endOfBroadcastWeek,
-    endOfISOWeek,
-    endOfMonth,
-    endOfWeek,
     isAfter,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    endOfMonth
   } = dateLib;
-  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -14915,11 +14858,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
-  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    const daysToAdd = extraDates - dates.length;
-    for (let i = 0; i < daysToAdd; i++) {
+    for (let i = 0; i < 7; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -15030,29 +14971,25 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    addDays,
-    endOfBroadcastWeek,
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
     endOfISOWeek,
     endOfMonth,
-    endOfWeek,
-    getISOWeek,
+    addDays,
     getWeek,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    getISOWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
-    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+    if (props.fixedWeeks && monthDates.length < 42) {
       const extraDates = dates.filter(date => {
-        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
       });
       monthDates.push(...extraDates);
     }
@@ -15490,30 +15427,27 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek,
-    broadcastCalendar
+    ISOWeek
   } = props;
   const {
     addDays,
     addMonths,
-    addWeeks,
     addYears,
-    endOfBroadcastWeek,
+    addWeeks,
+    startOfISOWeek,
     endOfISOWeek,
+    startOfWeek,
     endOfWeek,
     max,
-    min,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    min
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -15579,8 +15513,6 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
- * NOTE: this is not an hook, but a factory for `getModifiers`.
- *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -15589,19 +15521,12 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
-    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth,
-    startOfMonth,
-    isBefore,
-    endOfMonth,
-    isAfter
+    isSameMonth
   } = dateLib;
-  const startMonth = props.startMonth && startOfMonth(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -15610,18 +15535,20 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
+  const selectionModifiersMap = {
+    [SelectionState.range_end]: [],
+    [SelectionState.range_middle]: [],
+    [SelectionState.range_start]: [],
+    [SelectionState.selected]: []
+  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
-    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
-    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
-    // Broadcast calendar will show outside days as default
-    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15650,16 +15577,27 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
+    const selectionStates = {
+      [SelectionState.range_end]: false,
+      [SelectionState.range_middle]: false,
+      [SelectionState.range_start]: false,
+      [SelectionState.selected]: false
+    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
+    for (const name in selectionModifiersMap) {
+      const days = selectionModifiersMap[name];
+      selectionStates[name] = days.some(d => d === day);
+    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
+      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -16064,7 +16002,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn: props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -16083,7 +16021,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
   const {
     captionLayout,
     mode,
@@ -18861,8 +18799,6 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
-    top: 0,
-    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -20155,9 +20091,6 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
-    if (events.cancel) {
-      this.listeners.add(events.cancel.name, this.handleCancel);
-    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -20277,9 +20210,6 @@ class AbstractPointerSensor {
   }
 }
 const events = {
-  cancel: {
-    name: 'pointercancel'
-  },
   move: {
     name: 'pointermove'
   },
@@ -20352,9 +20282,6 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
-  cancel: {
-    name: 'touchcancel'
-  },
   move: {
     name: 'touchmove'
   },
@@ -20556,11 +20483,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,
@@ -20768,26 +20695,7 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  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 [rect, measureRect] = useReducer(reducer, null);
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -20822,6 +20730,23 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
+  function reducer(currentRect) {
+    if (!element) {
+      return null;
+    }
+    if (element.isConnected === false) {
+      var _ref;
+
+      // Fall back to last rect we measured if the element is
+      // no longer connected to the DOM.
+      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+    }
+    const newRect = measure(element);
+    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+      return currentRect;
+    }
+    return newRect;
+  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -20967,24 +20892,28 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  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 [rects, measureRects] = useReducer(reducer, defaultValue$2);
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  useIsomorphicLayoutEffect$1(() => {
-    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
-    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+  }
+  useIsomorphicLayoutEffect$1(() => {
+    if (elements.length) {
+      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+    } else {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      measureRects();
+    }
   }, [elements]);
   return rects;
+  function reducer() {
+    if (!elements.length) {
+      return defaultValue$2;
+    }
+    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -21151,7 +21080,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
+      if (!state.draggable.active) {
         return state;
       }
       return {
@@ -21423,7 +21352,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId != null ? draggableNodes.get(activeId) : null;
+  const node = activeId ? draggableNodes.get(activeId) : null;
   const activeRects = useRef({
     initial: null,
     translated: null
@@ -21458,7 +21387,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
+    activeNode: activeId ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -21536,7 +21465,6 @@ 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,
@@ -21571,7 +21499,6 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
-          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -21590,8 +21517,6 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
-          setActiveSensor(activeSensorRef.current);
-          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -21603,7 +21528,10 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    activeSensorRef.current = sensorInstance;
+    unstable_batchedUpdates(() => {
+      setActiveSensor(sensorInstance);
+      setActivatorEvent(event.nativeEvent);
+    });
     function createHandler(type) {
       return async function handler() {
         const {
@@ -21640,7 +21568,6 @@ 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];
@@ -21862,7 +21789,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/createContext$1(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Draggable';
+const ID_PREFIX$1 = 'Droppable';
 function useDraggable(_ref) {
   let {
     id,
@@ -22009,7 +21936,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -22424,7 +22351,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
-  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -23878,7 +23804,7 @@ const Paper = ({
   });
 };
 
-var css_248z$B = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\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, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\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-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
+var css_248z$B = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\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, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\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-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-table-thead {\n  position: static;\n  top: auto;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
 styleInject(css_248z$B);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
@@ -24122,6 +24048,7 @@ const DashboardDonutChart = ({
           children: jsxs("table", {
             className: "ff-legend-table",
             children: [jsx("thead", {
+              className: 'ff-legend-table-thead',
               children: jsxs("tr", {
                 children: [jsx("th", {
                   className: "ff-table-header",
@@ -31567,13 +31494,12 @@ const ColumnIndicator = ({
     });
   }, [onSelect, column, setContextMenu]);
   return jsxs("th", {
-    style: {
-      minWidth: `${columnWidth}px`,
-      position: 'sticky'
-    },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      minWidth: `${columnWidth}px`
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -31582,7 +31508,7 @@ const ColumnIndicator = ({
       onContextMenu: contextClick,
       tabIndex: 0
     }), jsx(Typography, {
-      fontWeight: 'medium',
+      fontWeight: "medium",
       children: label !== undefined ? label : columnIndexToLabel(column)
     }), jsx("div", {
       onMouseDown: onMouseDown,
@@ -31688,14 +31614,13 @@ const RowIndicator = ({
     });
   }, [onSelect, row, setContextMenu]);
   return jsxs("th", {
-    style: {
-      height: `${rowHeight}px`,
-      minWidth: '60px',
-      position: 'relative'
-    },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      height: `${rowHeight}px`,
+      minWidth: '60px'
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -32102,7 +32027,7 @@ const Copied = () => {
   });
 };
 
-var css_248z$n = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: relative;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--excel-header-bg);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  top: 0;\n  left: 0;\n  margin: 0;\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 1000;\n  position: sticky;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n  position: fixed;\n  z-index: 2000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n  height: 34px;\n}\n.ff-excel .corner-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  top: -1px;\n  width: 60px;\n  height: 34px;\n  left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+var css_248z$n = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: relative;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--excel-header-bg);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  top: 0;\n  left: 0;\n  margin: 0;\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 1000;\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n  position: fixed;\n  z-index: 3000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n  height: 34px;\n}\n.ff-excel .corner-header {\n  border: 1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  top: -1px;\n  width: 60px;\n  height: 34px;\n  left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
 styleInject(css_248z$n);
 
 var css_248z$m = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
@@ -32294,6 +32219,8 @@ const ExcelToolBar = ({
     textAlign: 'center'
   };
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef(null);
+  const borderMenuRef = useRef(null);
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
   }, [cell]);
@@ -32548,18 +32475,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setUnderlineType(data, underLine, true),
             name: getUnderlineIcon()
-          }), jsx(MenuOption, {
-            iconName: "arrow_down",
-            zIndex: 1000,
-            iconSize: 12,
-            options: underlineTypeIcon,
-            tooltipPlacement: "top",
-            variant: "light",
-            onOptionClick: e => {
-              let selectedValue = e.value;
-              setUnderlineType(data, selectedValue, true);
-              setUnderLine(selectedValue);
-            }
+          }), jsx("span", {
+            ref: underLineMenuRef,
+            children: jsx(MenuOption, {
+              targetRef: underLineMenuRef,
+              iconName: "arrow_down",
+              zIndex: 1000,
+              iconSize: 12,
+              options: underlineTypeIcon,
+              tooltipPlacement: "top",
+              variant: "light",
+              onOptionClick: e => {
+                let selectedValue = e.value;
+                setUnderlineType(data, selectedValue, true);
+                setUnderLine(selectedValue);
+              }
+            })
           })]
         })
       })]
@@ -32630,18 +32561,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setBorderType(data, border, 'black'),
             name: getBorderIcon()
-          }), jsx(MenuOption, {
-            iconName: "arrow_down",
-            iconSize: 12,
-            zIndex: 1000,
-            options: borderTypeIcon,
-            tooltipPlacement: "top",
-            variant: "light",
-            onOptionClick: e => {
-              let selectedValue = e.value;
-              setBorderType(data, selectedValue, 'black');
-              setBorder(selectedValue);
-            }
+          }), jsx("span", {
+            ref: borderMenuRef,
+            children: jsx(MenuOption, {
+              iconName: "arrow_down",
+              targetRef: borderMenuRef,
+              iconSize: 12,
+              zIndex: 1000,
+              options: borderTypeIcon,
+              tooltipPlacement: "top",
+              variant: "light",
+              onOptionClick: e => {
+                let selectedValue = e.value;
+                setBorderType(data, selectedValue, 'black');
+                setBorder(selectedValue);
+              }
+            })
           })]
         })
       })