pixel-react 1.14.41 → 1.14.43

package/lib/index.cjs

@@ -222,7 +222,7 @@ const SvgExportCollectionIcon = (props) => /* @__PURE__ */ React__namespace.crea
 
 const SvgRunIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_5151_106068)" }, /* @__PURE__ */ React__namespace.createElement("g", { filter: "url(#filter0_d_5151_106068)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M24.8701 12C24.8701 18.6274 19.4975 24 12.8701 24C6.2427 24 0.870117 18.6274 0.870117 12C0.870117 5.37258 6.2427 0 12.8701 0C19.4975 0 24.8701 5.37258 24.8701 12Z", fill: "url(#paint0_linear_5151_106068)" })), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.2033 15.7503L16.2033 12.0003L11.2033 8.25032V15.7503ZM12.87 3.66699C11.2218 3.66699 9.61061 4.15573 8.24021 5.07141C6.8698 5.98709 5.80169 7.28858 5.17096 8.8113C4.54023 10.334 4.3752 12.0096 4.69675 13.6261C5.01829 15.2426 5.81196 16.7274 6.9774 17.8929C8.14284 19.0583 9.6277 19.852 11.2442 20.1735C12.8607 20.4951 14.5363 20.33 16.059 19.6993C17.5817 19.0686 18.8832 18.0005 19.7989 16.6301C20.7145 15.2597 21.2033 13.6485 21.2033 12.0003C21.2033 9.79019 20.3253 7.67057 18.7625 6.10777C17.1997 4.54497 15.0801 3.66699 12.87 3.66699ZM12.87 18.667C11.5514 18.667 10.2625 18.276 9.16616 17.5435C8.06983 16.8109 7.21535 15.7697 6.71076 14.5515C6.20618 13.3334 6.07415 11.9929 6.33139 10.6997C6.58862 9.40652 7.22356 8.21863 8.15591 7.28628C9.08826 6.35393 10.2761 5.71899 11.5694 5.46176C12.8626 5.20452 14.203 5.33654 15.4212 5.84113C16.6394 6.34571 17.6805 7.2002 18.4131 8.29652C19.1456 9.39285 19.5366 10.6818 19.5366 12.0003C19.5344 13.7678 18.8313 15.4622 17.5816 16.7119C16.3318 17.9617 14.6374 18.6648 12.87 18.667Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("filter", { id: "filter0_d_5151_106068", x: -0.129883, y: -3, width: 28, height: 28, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React__namespace.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ React__namespace.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React__namespace.createElement("feOffset", { dx: 1, dy: -1 }), /* @__PURE__ */ React__namespace.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ React__namespace.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.141176 0 0 0 0 0.0745098 0 0 0 0 0.196078 0 0 0 0.1 0" }), /* @__PURE__ */ React__namespace.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_5151_106068" }), /* @__PURE__ */ React__namespace.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_5151_106068", result: "shape" })), /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint0_linear_5151_106068", x1: 2.59783, y1: 2.34599, x2: 24.8701, y2: 24, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#2A6F09" }), /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#44B002" })), /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_5151_106068" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 24, height: 24, fill: "currentColor", transform: "translate(0.870117)" }))));
 
-const SvgBeautifyIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 0.439941H0V1.71995H6V0.439941ZM0 3.00001H6V4.28001H0V3.00001ZM6 10.6801H0V11.9601H6V10.6801ZM6 13.2401H0V14.5201H6V13.2401ZM2.56001 5.56002H10.2401V6.84003H2.56001V5.56002ZM12.4084 5.56002H10.5601V6.84003H12.4084V5.56002ZM2.56001 8.12003H12.8V9.40004H2.56001V8.12003ZM16 8.12003H13.44V9.40004H16V8.12003Z", fill: "currentColor" }));
+const SvgBeautifyIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 0.5, y: 0.5, width: 16, height: 16, rx: 4.5, stroke: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10 15.2402H3V14.2402H10V15.2402ZM10 13.2402H3V12.2402H10V13.2402ZM14.7998 11.04H4.56055V9.75977H14.7998V11.04ZM12.2402 8.48047H4.56055V7.2002H12.2402V8.48047ZM14.4082 8.48047H12.5605V7.2002H14.4082V8.48047ZM10 6H3V5H10V6ZM10 4H3V3H10V4Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2786 2.22236C13.249 2.0923 13.1334 2 13 2C12.8666 2 12.751 2.0923 12.7214 2.22236L12.5633 2.91756C12.4902 3.23911 12.2391 3.4902 11.9176 3.56331L11.2224 3.7214C11.0923 3.75097 11 3.86661 11 4C11 4.13339 11.0923 4.24903 11.2224 4.2786L11.9176 4.43669C12.2391 4.5098 12.4902 4.76089 12.5633 5.08244L12.7214 5.77764C12.751 5.9077 12.8666 6 13 6C13.1334 6 13.249 5.9077 13.2786 5.77764L13.4367 5.08244C13.5098 4.76089 13.7609 4.5098 14.0824 4.43669L14.7776 4.2786C14.9077 4.24903 15 4.13339 15 4C15 3.86661 14.9077 3.75097 14.7776 3.7214L14.0824 3.56331C13.7609 3.4902 13.5098 3.23911 13.4367 2.91756L13.2786 2.22236ZM12.3769 4C12.6449 3.86324 12.8632 3.64489 13 3.37691C13.1368 3.64489 13.3551 3.86324 13.6231 4C13.3551 4.13676 13.1368 4.35511 13 4.62309C12.8632 4.35511 12.6449 4.13676 12.3769 4Z", fill: "currentColor" }));
 
 const SvgAddVariableIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9799 1.39074L14.98 1.39066C14.7152 1.10024 14.2958 0.91202 13.667 0.901363L13.6603 0.901248L13.6603 0.901202C12.7479 0.873384 11.9951 1.10031 11.384 1.55729C10.8289 1.97239 10.3593 2.60115 10.001 3.47483C10.1534 3.44887 10.311 3.43399 10.4753 3.43399C10.7848 3.43399 11.4004 3.4707 11.7695 3.94829L11.7739 3.95398L11.7738 3.95401C12.0596 4.33506 12.0442 4.83443 11.9167 5.28791L11.9148 5.29459L11.9148 5.29458C11.8487 5.5177 11.679 5.86554 11.4767 6.23962C11.2662 6.62901 10.996 7.09066 10.702 7.55973L10.6993 7.56416L10.6992 7.56414C10.3347 8.13251 10.0495 8.55478 9.83621 8.83812C9.73082 8.9781 9.63297 9.09769 9.54476 9.18669C9.50132 9.23051 9.44774 9.27975 9.3864 9.32131C9.33933 9.3532 9.21625 9.43126 9.04751 9.43126H9.03969L9.03189 9.43102C8.86024 9.42565 8.74138 9.34197 8.68565 9.29502C8.62506 9.24396 8.58139 9.18766 8.55261 9.14632C8.49422 9.06244 8.44439 8.96269 8.40245 8.86844C8.31617 8.6746 8.22417 8.41394 8.13119 8.12159C7.94369 7.5321 7.73346 6.75358 7.53672 5.98052C7.33946 5.20536 7.15363 4.42727 7.01499 3.8353C6.94564 3.53916 6.88802 3.28929 6.84663 3.10947L6.79742 2.89575C6.78998 2.86356 6.7853 2.8436 6.78273 2.83267C6.78085 2.82467 6.78011 2.82151 6.78026 2.82195C6.57968 2.09733 6.4571 1.68312 6.26635 1.42424C6.18505 1.31391 6.0959 1.24128 5.9786 1.19094C5.85381 1.13739 5.67159 1.09837 5.39186 1.09837C5.26627 1.09837 5.03076 1.1623 4.67253 1.3451C4.32974 1.52003 3.92898 1.77495 3.49123 2.08709C2.6167 2.71068 1.63791 3.53124 0.748646 4.31012L0.746028 4.31241L0.74602 4.3124L0.529348 4.49953L0.770345 4.803C1.04584 4.59868 1.33341 4.39361 1.60844 4.23668C1.8837 4.07963 2.21683 3.9283 2.55433 3.92635C3.08046 3.91574 3.42074 4.32093 3.64468 4.72599C3.88424 5.15933 4.10594 5.79526 4.33533 6.63214C4.78297 8.25095 5.33179 9.99936 5.93252 11.3357C6.23406 12.0064 6.53701 12.5465 6.83047 12.9111C7.13988 13.2955 7.35241 13.3793 7.4597 13.3793C8.04015 13.3793 8.72417 13.1366 9.55755 12.509C10.3917 11.8809 11.3418 10.8921 12.4423 9.46323L14.9799 1.39074ZM14.9799 1.39074L14.9874 1.39862M14.9799 1.39074L14.9874 1.39862M14.9874 1.39862C15.338 1.76673 15.549 2.45607 15.4903 3.5376L15.4902 3.5376M14.9874 1.39862L15.4902 3.5376M15.4902 3.5376L15.4899 3.54442M15.4902 3.5376L15.4899 3.54442M15.4899 3.54442C15.4633 4.19952 15.2114 5.02391 14.6981 6.02812M15.4899 3.54442L14.6981 6.02812M14.6981 6.02812C14.1875 7.02705 13.4345 8.17281 12.4424 9.46314L14.6981 6.02812Z", fill: "currentColor", stroke: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.4708 9.75072H15.8999V11.1833H13.4708H13.3708V11.2833V13.7793H11.8044V11.2833V11.1833H11.7044H9.27529V9.75072H11.7044H11.8044V9.65072V7.15469H13.3708V9.65072V9.75072H13.4708Z", fill: "currentColor", stroke: "white", strokeWidth: 0.2 }));
 
@@ -6470,7 +6470,8 @@ const Select$1 = ({
       }
       const style = window.getComputedStyle(parent);
       const overflowY = style.overflowY;
-      const isScrollable = (overflowY === 'auto' || overflowY === 'scroll') && parent.scrollHeight > parent.clientHeight;
+      const overflowX = style.overflowX;
+      const isScrollable = (overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll') && (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth);
       if (isScrollable) {
         return parent;
       }
@@ -25620,6 +25621,498 @@ function DayPicker(initialProps) {
   }, props.footer))));
 }
 
+/**
+ * @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 constructFrom
+ * @category Generic Helpers
+ * @summary Constructs a date using the reference date and the value
+ *
+ * @description
+ * The function constructs a new date using the constructor from the reference
+ * 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
+ * @param value - The value to create the date
+ *
+ * @returns Date initialized using the given date and value
+ *
+ * @example
+ * import { constructFrom } from 'date-fns'
+ *
+ * // A function that clones a date preserving the original type
+ * function cloneDate<DateType extends Date(date: DateType): DateType {
+ *   return constructFrom(
+ *     date, // Use contrustor from the given date
+ *     date.getTime() // Use the date value to create a new date
+ *   )
+ * }
+ */
+function constructFrom(date, value) {
+  if (date instanceof Date) {
+    return new date.constructor(value);
+  } else {
+    return new Date(value);
+  }
+}
+
+/**
+ * @module constants
+ * @summary Useful constants
+ * @description
+ * Collection of useful date constants.
+ *
+ * The constants could be imported from `date-fns/constants`:
+ *
+ * ```ts
+ * import { maxTime, minTime } from "./constants/date-fns/constants";
+ *
+ * function isAllowedTime(time) {
+ *   return time <= maxTime && time >= minTime;
+ * }
+ * ```
+ */
+
+
+/**
+ * @constant
+ * @name millisecondsInWeek
+ * @summary Milliseconds in 1 week.
+ */
+const millisecondsInWeek = 604800000;
+
+/**
+ * @constant
+ * @name millisecondsInDay
+ * @summary Milliseconds in 1 day.
+ */
+const millisecondsInDay = 86400000;
+
+let defaultOptions = {};
+
+function getDefaultOptions$1() {
+  return defaultOptions;
+}
+
+/**
+ * The {@link startOfWeek} function options.
+ */
+
+/**
+ * @name startOfWeek
+ * @category Week Helpers
+ * @summary Return the start of a week for the given date.
+ *
+ * @description
+ * Return the start of a week for the given date.
+ * The result will be in the local timezone.
+ *
+ * @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 original date
+ * @param options - An object with options
+ *
+ * @returns The start of a week
+ *
+ * @example
+ * // The start of a week for 2 September 2014 11:55:00:
+ * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Sun Aug 31 2014 00:00:00
+ *
+ * @example
+ * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
+ * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfWeek(date, options) {
+  const defaultOptions = getDefaultOptions$1();
+  const weekStartsOn =
+    options?.weekStartsOn ??
+    options?.locale?.options?.weekStartsOn ??
+    defaultOptions.weekStartsOn ??
+    defaultOptions.locale?.options?.weekStartsOn ??
+    0;
+
+  const _date = toDate$1(date);
+  const day = _date.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+
+  _date.setDate(_date.getDate() - diff);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+/**
+ * @name startOfISOWeek
+ * @category ISO Week Helpers
+ * @summary Return the start of an ISO week for the given date.
+ *
+ * @description
+ * Return the start of an ISO week for the given date.
+ * The result will be in the local timezone.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @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 original date
+ *
+ * @returns The start of an ISO week
+ *
+ * @example
+ * // The start of an ISO week for 2 September 2014 11:55:00:
+ * const result = startOfISOWeek(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function startOfISOWeek(date) {
+  return startOfWeek(date, { weekStartsOn: 1 });
+}
+
+/**
+ * @name getISOWeekYear
+ * @category ISO Week-Numbering Year Helpers
+ * @summary Get the ISO week-numbering year of the given date.
+ *
+ * @description
+ * Get the ISO week-numbering year of the given date,
+ * which always starts 3 days before the year's first Thursday.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @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 given date
+ *
+ * @returns The ISO week-numbering year
+ *
+ * @example
+ * // Which ISO-week numbering year is 2 January 2005?
+ * const result = getISOWeekYear(new Date(2005, 0, 2))
+ * //=> 2004
+ */
+function getISOWeekYear(date) {
+  const _date = toDate$1(date);
+  const year = _date.getFullYear();
+
+  const fourthOfJanuaryOfNextYear = constructFrom(date, 0);
+  fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
+  fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
+
+  const fourthOfJanuaryOfThisYear = constructFrom(date, 0);
+  fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
+  fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
+
+  if (_date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (_date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @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 original date
+ *
+ * @returns The start of a day
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(date) {
+  const _date = toDate$1(date);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
+/**
+ * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
+ * They usually appear for dates that denote time before the timezones were introduced
+ * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
+ * and GMT+01:00:00 after that date)
+ *
+ * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
+ * which would lead to incorrect calculations.
+ *
+ * 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(),
+    ),
+  );
+  utcDate.setUTCFullYear(_date.getFullYear());
+  return +date - +utcDate;
+}
+
+/**
+ * @name differenceInCalendarDays
+ * @category Day Helpers
+ * @summary Get the number of calendar days between the given dates.
+ *
+ * @description
+ * Get the number of calendar days between the given dates. This means that the times are removed
+ * from the dates and then the difference in days is calculated.
+ *
+ * @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 dateLeft - The later date
+ * @param dateRight - The earlier date
+ *
+ * @returns The number of calendar days
+ *
+ * @example
+ * // How many calendar days are between
+ * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2012, 6, 2, 0, 0),
+ *   new Date(2011, 6, 2, 23, 0)
+ * )
+ * //=> 366
+ * // How many calendar days are between
+ * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2011, 6, 3, 0, 1),
+ *   new Date(2011, 6, 2, 23, 59)
+ * )
+ * //=> 1
+ */
+function differenceInCalendarDays(dateLeft, dateRight) {
+  const startOfDayLeft = startOfDay(dateLeft);
+  const startOfDayRight = startOfDay(dateRight);
+
+  const timestampLeft =
+    +startOfDayLeft - getTimezoneOffsetInMilliseconds$1(startOfDayLeft);
+  const timestampRight =
+    +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 week of
+  // the daylight saving time clock shift).
+  return Math.round((timestampLeft - timestampRight) / millisecondsInDay);
+}
+
+/**
+ * @name startOfISOWeekYear
+ * @category ISO Week-Numbering Year Helpers
+ * @summary Return the start of an ISO week-numbering year for the given date.
+ *
+ * @description
+ * Return the start of an ISO week-numbering year,
+ * which always starts 3 days before the year's first Thursday.
+ * The result will be in the local timezone.
+ *
+ * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
+ *
+ * @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 original date
+ *
+ * @returns The start of an ISO week-numbering year
+ *
+ * @example
+ * // The start of an ISO week-numbering year for 2 July 2005:
+ * const result = startOfISOWeekYear(new Date(2005, 6, 2))
+ * //=> Mon Jan 03 2005 00:00:00
+ */
+function startOfISOWeekYear(date) {
+  const year = getISOWeekYear(date);
+  const fourthOfJanuary = constructFrom(date, 0);
+  fourthOfJanuary.setFullYear(year, 0, 4);
+  fourthOfJanuary.setHours(0, 0, 0, 0);
+  return startOfISOWeek(fourthOfJanuary);
+}
+
+/**
+ * @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));
+}
+
+/**
+ * @name startOfYear
+ * @category Year Helpers
+ * @summary Return the start of a year for the given date.
+ *
+ * @description
+ * Return the start of a year for the given date.
+ * The result will be in the local timezone.
+ *
+ * @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 original date
+ *
+ * @returns The start of a year
+ *
+ * @example
+ * // The start of a year for 2 September 2014 11:55:00:
+ * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
+ * //=> Wed Jan 01 2014 00:00:00
+ */
+function startOfYear(date) {
+  const cleanDate = toDate$1(date);
+  const _date = constructFrom(date, 0);
+  _date.setFullYear(cleanDate.getFullYear(), 0, 1);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+
 const formatDistanceLocale = {
   lessThanXSeconds: {
     one: "less than a second",
@@ -26262,267 +26755,6 @@ const enUS = {
   },
 };
 
-let defaultOptions = {};
-
-function getDefaultOptions$1() {
-  return defaultOptions;
-}
-
-/**
- * @module constants
- * @summary Useful constants
- * @description
- * Collection of useful date constants.
- *
- * The constants could be imported from `date-fns/constants`:
- *
- * ```ts
- * import { maxTime, minTime } from "./constants/date-fns/constants";
- *
- * function isAllowedTime(time) {
- *   return time <= maxTime && time >= minTime;
- * }
- * ```
- */
-
-
-/**
- * @constant
- * @name millisecondsInWeek
- * @summary Milliseconds in 1 week.
- */
-const millisecondsInWeek = 604800000;
-
-/**
- * @constant
- * @name millisecondsInDay
- * @summary Milliseconds in 1 day.
- */
-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
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @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 original date
- *
- * @returns The start of a day
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(date) {
-  const _date = toDate$1(date);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
- * They usually appear for dates that denote time before the timezones were introduced
- * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
- * and GMT+01:00:00 after that date)
- *
- * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
- * which would lead to incorrect calculations.
- *
- * 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(),
-    ),
-  );
-  utcDate.setUTCFullYear(_date.getFullYear());
-  return +date - +utcDate;
-}
-
-/**
- * @name differenceInCalendarDays
- * @category Day Helpers
- * @summary Get the number of calendar days between the given dates.
- *
- * @description
- * Get the number of calendar days between the given dates. This means that the times are removed
- * from the dates and then the difference in days is calculated.
- *
- * @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 dateLeft - The later date
- * @param dateRight - The earlier date
- *
- * @returns The number of calendar days
- *
- * @example
- * // How many calendar days are between
- * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
- * const result = differenceInCalendarDays(
- *   new Date(2012, 6, 2, 0, 0),
- *   new Date(2011, 6, 2, 23, 0)
- * )
- * //=> 366
- * // How many calendar days are between
- * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
- * const result = differenceInCalendarDays(
- *   new Date(2011, 6, 3, 0, 1),
- *   new Date(2011, 6, 2, 23, 59)
- * )
- * //=> 1
- */
-function differenceInCalendarDays(dateLeft, dateRight) {
-  const startOfDayLeft = startOfDay(dateLeft);
-  const startOfDayRight = startOfDay(dateRight);
-
-  const timestampLeft =
-    +startOfDayLeft - getTimezoneOffsetInMilliseconds$1(startOfDayLeft);
-  const timestampRight =
-    +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 week of
-  // the daylight saving time clock shift).
-  return Math.round((timestampLeft - timestampRight) / millisecondsInDay);
-}
-
-/**
- * @name constructFrom
- * @category Generic Helpers
- * @summary Constructs a date using the reference date and the value
- *
- * @description
- * The function constructs a new date using the constructor from the reference
- * 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
- * @param value - The value to create the date
- *
- * @returns Date initialized using the given date and value
- *
- * @example
- * import { constructFrom } from 'date-fns'
- *
- * // A function that clones a date preserving the original type
- * function cloneDate<DateType extends Date(date: DateType): DateType {
- *   return constructFrom(
- *     date, // Use contrustor from the given date
- *     date.getTime() // Use the date value to create a new date
- *   )
- * }
- */
-function constructFrom(date, value) {
-  if (date instanceof Date) {
-    return new date.constructor(value);
-  } else {
-    return new Date(value);
-  }
-}
-
-/**
- * @name startOfYear
- * @category Year Helpers
- * @summary Return the start of a year for the given date.
- *
- * @description
- * Return the start of a year for the given date.
- * The result will be in the local timezone.
- *
- * @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 original date
- *
- * @returns The start of a year
- *
- * @example
- * // The start of a year for 2 September 2014 11:55:00:
- * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
- * //=> Wed Jan 01 2014 00:00:00
- */
-function startOfYear(date) {
-  const cleanDate = toDate$1(date);
-  const _date = constructFrom(date, 0);
-  _date.setFullYear(cleanDate.getFullYear(), 0, 1);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
 /**
  * @name getDayOfYear
  * @category Day Helpers
@@ -26549,156 +26781,6 @@ function getDayOfYear(date) {
   return dayOfYear;
 }
 
-/**
- * The {@link startOfWeek} function options.
- */
-
-/**
- * @name startOfWeek
- * @category Week Helpers
- * @summary Return the start of a week for the given date.
- *
- * @description
- * Return the start of a week for the given date.
- * The result will be in the local timezone.
- *
- * @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 original date
- * @param options - An object with options
- *
- * @returns The start of a week
- *
- * @example
- * // The start of a week for 2 September 2014 11:55:00:
- * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Sun Aug 31 2014 00:00:00
- *
- * @example
- * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:
- * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfWeek(date, options) {
-  const defaultOptions = getDefaultOptions$1();
-  const weekStartsOn =
-    options?.weekStartsOn ??
-    options?.locale?.options?.weekStartsOn ??
-    defaultOptions.weekStartsOn ??
-    defaultOptions.locale?.options?.weekStartsOn ??
-    0;
-
-  const _date = toDate$1(date);
-  const day = _date.getDay();
-  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
-
-  _date.setDate(_date.getDate() - diff);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * @name startOfISOWeek
- * @category ISO Week Helpers
- * @summary Return the start of an ISO week for the given date.
- *
- * @description
- * Return the start of an ISO week for the given date.
- * The result will be in the local timezone.
- *
- * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
- *
- * @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 original date
- *
- * @returns The start of an ISO week
- *
- * @example
- * // The start of an ISO week for 2 September 2014 11:55:00:
- * const result = startOfISOWeek(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfISOWeek(date) {
-  return startOfWeek(date, { weekStartsOn: 1 });
-}
-
-/**
- * @name getISOWeekYear
- * @category ISO Week-Numbering Year Helpers
- * @summary Get the ISO week-numbering year of the given date.
- *
- * @description
- * Get the ISO week-numbering year of the given date,
- * which always starts 3 days before the year's first Thursday.
- *
- * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
- *
- * @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 given date
- *
- * @returns The ISO week-numbering year
- *
- * @example
- * // Which ISO-week numbering year is 2 January 2005?
- * const result = getISOWeekYear(new Date(2005, 0, 2))
- * //=> 2004
- */
-function getISOWeekYear(date) {
-  const _date = toDate$1(date);
-  const year = _date.getFullYear();
-
-  const fourthOfJanuaryOfNextYear = constructFrom(date, 0);
-  fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
-  fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
-  const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
-
-  const fourthOfJanuaryOfThisYear = constructFrom(date, 0);
-  fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
-  fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
-  const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
-
-  if (_date.getTime() >= startOfNextYear.getTime()) {
-    return year + 1;
-  } else if (_date.getTime() >= startOfThisYear.getTime()) {
-    return year;
-  } else {
-    return year - 1;
-  }
-}
-
-/**
- * @name startOfISOWeekYear
- * @category ISO Week-Numbering Year Helpers
- * @summary Return the start of an ISO week-numbering year for the given date.
- *
- * @description
- * Return the start of an ISO week-numbering year,
- * which always starts 3 days before the year's first Thursday.
- * The result will be in the local timezone.
- *
- * ISO week-numbering year: http://en.wikipedia.org/wiki/ISO_week_date
- *
- * @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 original date
- *
- * @returns The start of an ISO week-numbering year
- *
- * @example
- * // The start of an ISO week-numbering year for 2 July 2005:
- * const result = startOfISOWeekYear(new Date(2005, 6, 2))
- * //=> Mon Jan 03 2005 00:00:00
- */
-function startOfISOWeekYear(date) {
-  const year = getISOWeekYear(date);
-  const fourthOfJanuary = constructFrom(date, 0);
-  fourthOfJanuary.setFullYear(year, 0, 4);
-  fourthOfJanuary.setHours(0, 0, 0, 0);
-  return startOfISOWeek(fourthOfJanuary);
-}
-
 /**
  * @name getISOWeek
  * @category ISO Week Helpers
@@ -27862,87 +27944,6 @@ function message(token, format, input) {
   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 `|`:
 // - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
 //   (one of the certain letters followed by `o`)
@@ -29451,6 +29452,40 @@ function format$2(date, formatStr, options = {}) {
   return format$3(date, formatStr, options);
 }
 
+/**
+ * @name toZonedTime
+ * @category Time Zone Helpers
+ * @summary Get a date/time representing local time in a given time zone from the UTC date
+ *
+ * @description
+ * Returns a date instance with values representing the local time in the time zone
+ * specified of the UTC time from the date provided. In other words, when the new date
+ * is formatted it will show the equivalent hours in the target time zone regardless
+ * of the current system time zone.
+ *
+ * @param date the date with the relevant UTC time
+ * @param timeZone the time zone to get local time for, can be an offset or IANA time zone
+ * @param options the object with options. See [Options]{@link https://date-fns.org/docs/Options}
+ * @param {0|1|2} [options.additionalDigits=2] - passed to `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
+ *
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} `options.additionalDigits` must be 0, 1 or 2
+ *
+ * @example
+ * // In June 10am UTC is 6am in New York (-04:00)
+ * const result = toZonedTime('2014-06-25T10:00:00.000Z', 'America/New_York')
+ * //=> Jun 25 2014 06:00:00
+ */
+function toZonedTime(date, timeZone, options) {
+  date = toDate(date, options);
+  const offsetMilliseconds = tzParseTimezone(timeZone, date, true);
+  const d = new Date(date.getTime() - offsetMilliseconds);
+  const resultDate = new Date(0);
+  resultDate.setFullYear(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+  resultDate.setHours(d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds());
+  return resultDate;
+}
+
 const TimePicker = ({
   value,
   onChange,
@@ -29738,21 +29773,6 @@ const TimePicker = ({
   });
 };
 
-const handleTimeZoneChange = timeZone => {
-  const currentDate = new Date();
-  return new Intl.DateTimeFormat('en-US', {
-    timeZone,
-    weekday: 'long',
-    year: 'numeric',
-    month: 'short',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: true
-  }).format(currentDate);
-};
-
 const CustomDatePicker = /*#__PURE__*/React.forwardRef(({
   minDate,
   maxDate,
@@ -29791,7 +29811,8 @@ const CustomDatePicker = /*#__PURE__*/React.forwardRef(({
   const pickerRef = React.useRef(null); // Ref to track the picker
   const containerRef = React.useRef(null);
   const mergedRef = useMergeRefs(pickerRef, ref);
-  const todayInTimeZone = new Date(handleTimeZoneChange(timezone));
+  const todayInTimeZone = startOfDay(toZonedTime(new Date(), timezone));
+  const systemTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   React.useEffect(() => {
     selectedDateRef.current = selectedDate;
   }, [selectedDate]);
@@ -30135,7 +30156,7 @@ const CustomDatePicker = /*#__PURE__*/React.forwardRef(({
             before: new Date(minDate ? minDate : ''),
             after: new Date(maxDate ? maxDate : '')
           }],
-          timeZone: timezone,
+          timeZone: systemTimeZone,
           components: {
             CaptionLabel: props => jsxRuntime.jsx(CustomCaption, {
               ...props
@@ -31611,7 +31632,8 @@ const DashboardDonutChart = ({
   onSelectedStatus = _value => {},
   selectedStatusKey = '',
   setSelectedStatusKey = _selectedStatusKey => {},
-  isOnClick = false
+  isOnClick = false,
+  zIndex = 99
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = React.useState(null);
   const [hoveredVersion, setHoveredVersion] = React.useState(null);
@@ -32311,6 +32333,9 @@ const DashboardDonutChart = ({
     },
     children: [jsxRuntime.jsxs("div", {
       className: "ff-dashboard-donut-chart-svg-container",
+      style: {
+        zIndex: zIndex
+      },
       children: [jsxRuntime.jsx("svg", {
         width: DONUT_SVG_SIZE,
         height: DONUT_SVG_SIZE,
@@ -37737,7 +37762,7 @@ const EmptyCell = {
 };
 const fontFamilyList = [{
   label: 'Times New Roman',
-  value: '"Times New Roman"'
+  value: 'Times New Roman'
 }, {
   label: 'Arial',
   value: 'Arial'
@@ -37761,28 +37786,28 @@ const fontFamilyList = [{
   value: 'Tahoma'
 }, {
   label: 'Trebuchet MS',
-  value: '"Trebuchet MS"'
+  value: 'Trebuchet MS'
 }, {
   label: 'Comic Sans MS',
-  value: '"Comic Sans MS"'
+  value: 'Comic Sans MS'
 }, {
   label: 'Impact',
   value: 'Impact'
 }, {
   label: 'Arial Black',
-  value: '"Arial Black"'
+  value: 'Arial Black'
 }, {
   label: 'Lucida Console',
-  value: '"Lucida Console"'
+  value: 'Lucida Console'
 }, {
   label: 'Lucida Sans Unicode',
-  value: '"Lucida Sans Unicode"'
+  value: 'Lucida Sans Unicode'
 }, {
   label: 'Courier',
   value: 'Courier'
 }, {
   label: 'Arial Rounded MT Bold',
-  value: '"Arial Rounded MT Bold"'
+  value: 'Arial Rounded MT Bold'
 }, {
   label: 'Georgia',
   value: 'Georgia'
@@ -38290,65 +38315,142 @@ function applyBorderToCells(currentData, selectedRange, value, color, editable)
     start,
     end
   } = selectedRange;
+  const getCell = (row, col) => get$1({
+    row,
+    column: col
+  }, updatedData);
+  const setCell = (row, col, cell) => {
+    updatedData = set$1({
+      row,
+      column: col
+    }, cell, updatedData);
+  };
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
-      const currentCell = get$1({
-        row,
-        column: col
-      }, updatedData);
-      if (!currentCell || !editable) continue;
-      if (currentCell.readOnly) continue;
-      let updatedCell = {
-        ...currentCell
+      const currentCell = getCell(row, col);
+      if (!currentCell || !editable || currentCell.readOnly) continue;
+      const updatedCell = {
+        ...currentCell,
+        style: {
+          ...currentCell.style
+        }
+      };
+      const aboveCell = getCell(row - 1, col);
+      const belowCell = getCell(row + 1, col);
+      const leftCell = getCell(row, col - 1);
+      const rightCell = getCell(row, col + 1);
+      const borderStyle = `2px solid ${color}`;
+      const defaultBorder = `1px solid var(--excel-header-border)`;
+      const applyBorder = side => {
+        switch (side) {
+          case 'borderTop':
+            if (!aboveCell || aboveCell.style?.borderBottom !== borderStyle) {
+              updatedCell.style.borderTop = borderStyle;
+            } else {
+              updatedCell.style.borderTop = 'none';
+            }
+            break;
+          case 'borderBottom':
+            if (!belowCell || belowCell.style?.borderTop !== borderStyle) {
+              updatedCell.style.borderBottom = borderStyle;
+            } else {
+              updatedCell.style.borderBottom = 'none';
+            }
+            break;
+          case 'borderLeft':
+            if (!leftCell || leftCell.style?.borderRight !== borderStyle) {
+              updatedCell.style.borderLeft = borderStyle;
+            } else {
+              updatedCell.style.borderLeft = 'none';
+            }
+            break;
+          case 'borderRight':
+            if (!rightCell || rightCell.style?.borderLeft !== borderStyle) {
+              updatedCell.style.borderRight = borderStyle;
+            } else {
+              updatedCell.style.borderRight = 'none';
+            }
+            break;
+        }
       };
       switch (value) {
         case 'border-all-sides':
-          updatedCell.style = {
-            ...currentCell.style,
-            borderRight: `2px solid ${color}`,
-            borderLeft: `2px solid ${color}`,
-            borderTop: `2px solid ${color}`,
-            borderBottom: `2px solid ${color}`
-          };
+          applyBorder('borderTop');
+          applyBorder('borderBottom');
+          applyBorder('borderLeft');
+          applyBorder('borderRight');
           break;
         case 'border-none':
           updatedCell.style = {
-            ...currentCell.style,
-            borderRight: `1px solid var(--excel-header-border)`,
-            borderLeft: `1px solid var(--excel-header-border)`,
-            borderTop: `1px solid var(--excel-header-border)`,
-            borderBottom: `1px solid var(--excel-header-border)`
+            ...updatedCell.style,
+            borderRight: defaultBorder,
+            borderLeft: defaultBorder,
+            borderTop: defaultBorder,
+            borderBottom: defaultBorder
           };
+          if (aboveCell) {
+            const updatedAbove = {
+              ...aboveCell,
+              style: {
+                ...aboveCell.style
+              }
+            };
+            if (updatedAbove.style.borderBottom === 'none') {
+              updatedAbove.style.borderBottom = borderStyle;
+              setCell(row - 1, col, updatedAbove);
+            }
+          }
+          if (belowCell) {
+            const updatedBelow = {
+              ...belowCell,
+              style: {
+                ...belowCell.style
+              }
+            };
+            if (updatedBelow.style.borderTop === 'none') {
+              updatedBelow.style.borderTop = borderStyle;
+              setCell(row + 1, col, updatedBelow);
+            }
+          }
+          if (leftCell) {
+            const updatedLeft = {
+              ...leftCell,
+              style: {
+                ...leftCell.style
+              }
+            };
+            if (updatedLeft.style.borderRight === 'none') {
+              updatedLeft.style.borderRight = borderStyle;
+              setCell(row, col - 1, updatedLeft);
+            }
+          }
+          if (rightCell) {
+            const updatedRight = {
+              ...rightCell,
+              style: {
+                ...rightCell.style
+              }
+            };
+            if (updatedRight.style.borderLeft === 'none') {
+              updatedRight.style.borderLeft = borderStyle;
+              setCell(row, col + 1, updatedRight);
+            }
+          }
           break;
         case 'border-right':
-          updatedCell.style = {
-            ...currentCell.style,
-            borderRight: `2px solid ${color}`
-          };
+          applyBorder('borderRight');
           break;
         case 'border-left':
-          updatedCell.style = {
-            ...currentCell.style,
-            borderLeft: `2px solid ${color}`
-          };
+          applyBorder('borderLeft');
           break;
         case 'border-top':
-          updatedCell.style = {
-            ...currentCell.style,
-            borderTop: `2px solid ${color}`
-          };
+          applyBorder('borderTop');
           break;
         case 'border-bottom':
-          updatedCell.style = {
-            ...currentCell.style,
-            borderBottom: `2px solid ${color}`
-          };
+          applyBorder('borderBottom');
           break;
       }
-      updatedData = set$1({
-        row,
-        column: col
-      }, updatedCell, updatedData);
+      setCell(row, col, updatedCell);
     }
   }
   return updatedData;
@@ -41417,7 +41519,8 @@ const Cell = ({
   select,
   activate,
   setCellDimensions,
-  setCellData
+  setCellData,
+  editable
 }) => {
   const rootRef = React__namespace.useRef(null);
   const point = React__namespace.useMemo(() => ({
@@ -41425,6 +41528,7 @@ const Cell = ({
     column
   }), [row, column]);
   const handleMouseDown = React__namespace.useCallback(event => {
+    if (!editable) return;
     if (mode === 'view') {
       setCellDimensions(point, getOffsetRect(event.currentTarget));
       if (event.shiftKey) {
@@ -43030,7 +43134,8 @@ const Spreadsheet = props => {
         row: rowNumber,
         column: columnNumber,
         // @ts-ignore
-        DataViewer: DataViewer$1
+        DataViewer: DataViewer$1,
+        editable: editable$1
       }, columnNumber))]
     }, rowNumber))]
   }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1, visibleRange.end, visibleRange.start]);
@@ -50302,7 +50407,6 @@ const SessionDropdown = ({
             className: `ff-dropdown-header-item ${activeTab === 'primary' ? 'active' : ''}`,
             onClick: onPrimaryTabClick,
             children: [jsxRuntime.jsx(Typography, {
-              fontSize: 16,
               fontWeight: "semi-bold",
               className: "ff-dropdown-text",
               children: header
@@ -50314,7 +50418,6 @@ const SessionDropdown = ({
             className: `ff-dropdown-header-item ${activeTab === 'secondary' ? 'active' : ''}`,
             onClick: onSecondaryTabClick,
             children: [jsxRuntime.jsx(Typography, {
-              fontSize: 16,
               fontWeight: "semi-bold",
               className: "ff-dropdown-text",
               children: secondaryHeader
@@ -56610,7 +56713,7 @@ const BarChart = ({
   const chartWidth = totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
   const id = Date.now();
   const renderGradients = gradients => {
-    return gradients.map((gradient, index) => jsxRuntime.jsx("defs", {
+    return gradients.filter(gradient => gradient.length > 1).map((gradient, index) => jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsx("linearGradient", {
         id: `gradient-${id}-${type}-${index}`,
         x1: "0%",
@@ -56624,7 +56727,11 @@ const BarChart = ({
       })
     }, index));
   };
-  const getFillColor = index => colors?.[index % colors.length]?.[0] ? `url(#gradient-${id}-${type}-${index % colors.length})` : 'grey';
+  const getFillColor = index => {
+    if (!colors.length) return 'grey';
+    const colorGroup = colors[index % colors.length];
+    return colorGroup?.length === 1 ? colorGroup[0] : `url(#gradient-${id}-${type}-${index % colors.length})`;
+  };
   const handleMouseEnter = (label, value, id, percent, versions) => {
     setIsHoveringBar(true);
     const tooltip = tooltipRef.current;
@@ -64352,14 +64459,14 @@ const MachineInstances = ({
                   },
                   children: [jsxRuntime.jsx("div", {
                     className: `ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataSetIndex}`
-                  }), childNodeData?.runScriptCount && jsxRuntime.jsx("div", {
+                  }), Number(childNodeData?.runScriptCount) ? jsxRuntime.jsx("div", {
                     className: "ff-selectedMachines-connecting-line-text",
                     children: jsxRuntime.jsx(Typography, {
                       fontSize: 8,
                       fontWeight: "regular",
-                      children: `${childNodeData.runScriptCount} Script${childNodeData.runScriptCount !== 1 ? 's' : ''}`
+                      children: `${![0, '0', null].includes(childNodeData.runScriptCount) ? childNodeData.runScriptCount : ''} Script${childNodeData.runScriptCount !== 1 ? 's' : ''}`
                     })
-                  })]
+                  }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})]
                 })
               }), jsxRuntime.jsx("div", {
                 className: "ff-run-data-box",
@@ -79032,6 +79139,21 @@ const convertToISO = dateString => {
   return new Date(`${formattedDate}T${formattedTime}`);
 };
 
+const handleTimeZoneChange = timeZone => {
+  const currentDate = new Date();
+  return new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    weekday: 'long',
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  }).format(currentDate);
+};
+
 const PrePostStepAccordions = ({
   data,
   level = 0,