@clickhouse/click-ui 0.0.227 → 0.0.228

package/dist/click-ui.umd.js

@@ -105,7 +105,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6.998 7.873a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 7.873a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M6.998 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M6.998 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M18.002 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M18.002 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25" })
   ] });
   const BurgerMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3.75 7.25h16.5M3.75 12.5h16.5m-16.5 5.25H12" }) });
-  const Calendar$1 = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  const Calendar$2 = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.99609", y: "2.99658", width: "18.0075", height: "18.0075", rx: "3", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.0036 7.99826H2.99609", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.3022 11.4997C17.3022 11.5273 17.2798 11.5497 17.2522 11.5497C17.2245 11.5497 17.2021 11.5273 17.2021 11.4997C17.2021 11.4721 17.2245 11.4497 17.2522 11.4497", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -797,7 +797,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     briefcase: Briefcase,
     building: Building,
     "burger-menu": BurgerMenu,
-    calendar: Calendar$1,
+    calendar: Calendar$2,
     "calendar-with-time": CalendarWithTime,
     cards: Cards,
     "cell-tower": CellTower,
@@ -16042,12 +16042,62 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     align-self: stretch;
     align-items: center;
   `);
-  const locale = "en-US";
-  const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
+  const locale$1 = "en-US";
+  const selectedDateFormatter = new Intl.DateTimeFormat(locale$1, {
     day: "2-digit",
     month: "short",
     year: "numeric"
   });
+  const weekdayFormatter = new Intl.DateTimeFormat(locale$1, {
+    weekday: "short"
+  });
+  const headerDateFormatter = new Intl.DateTimeFormat(locale$1, {
+    month: "short",
+    year: "numeric"
+  });
+  const getPredefinedMonthsForDateRangePicker = (numberOfMonths) => {
+    const now2 = dayjs();
+    if (numberOfMonths < 0) {
+      const lastSixMonths = [];
+      for (let i = 0; i < Math.abs(numberOfMonths); i++) {
+        const date = now2.subtract(i, "month");
+        if (date.date() === 1 && date.month() === now2.month()) {
+          continue;
+        }
+        lastSixMonths.push({
+          startDate: date.startOf("month").toDate(),
+          endDate: i === 0 ? now2.toDate() : date.endOf("month").toDate()
+        });
+      }
+      return lastSixMonths.reverse();
+    }
+    const nextSixMonths = [];
+    for (let i = 0; i < numberOfMonths; i++) {
+      const date = now2.add(i, "month");
+      nextSixMonths.push({
+        startDate: date.startOf("month").toDate(),
+        endDate: date.endOf("month").toDate()
+      });
+    }
+    return nextSixMonths;
+  };
+  const datesAreWithinMaxRange = (startDate, endDate, maxRangeLength) => {
+    const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), "days"));
+    return daysDifference <= maxRangeLength;
+  };
+  const isDateRangeTheWholeMonth = ({
+    startDate,
+    endDate
+  }) => {
+    if (startDate.getMonth() !== endDate.getMonth()) {
+      return false;
+    }
+    const start = dayjs(startDate);
+    const end = dayjs(endDate);
+    const startDateIsFirstDay = start.isSame(start.startOf("month"), "day");
+    const endDateIsLastDay = end.isSame(end.endOf("month"), "day");
+    return startDateIsFirstDay && endDateIsLastDay;
+  };
   const explicitWidth = "250px";
   const HighlightedInputWrapper = styled(InputWrapper).withConfig({
     componentId: "sc-1m6g9rm-0"
@@ -16071,13 +16121,37 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
     ] });
   };
-  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-    weekday: "short"
-  });
-  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric"
-  });
+  const DateRangePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedEndDate,
+    selectedStartDate
+  }) => {
+    const defaultId = React.useId();
+    let formattedValue = /* @__PURE__ */ jsxRuntime.jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
+    if (selectedStartDate) {
+      if (selectedEndDate) {
+        formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          selectedDateFormatter.format(selectedStartDate),
+          " –",
+          " ",
+          selectedDateFormatter.format(selectedEndDate)
+        ] });
+      } else {
+        formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          selectedDateFormatter.format(selectedStartDate),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { color: "muted", component: "span", children: "– end date" })
+        ] });
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { $hasStartContent: true, as: "div", "data-testid": "daterangepicker-input", children: formattedValue })
+    ] });
+  };
   const DatePickerContainer = styled(Container).withConfig({
     componentId: "sc-1m6g9rm-1"
   })(["background:", ";"], ({
@@ -16163,9 +16237,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     headerDate.setFullYear(year);
     return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { "data-testid": "calendar-previous-month", icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
         /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
-        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { "data-testid": "calendar-next-month", icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(DateTable, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekDays.map(({
@@ -16178,7 +16252,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] });
   };
-  const Calendar = ({
+  const Calendar$1 = ({
     calendarBody,
     closeDatepicker,
     futureDatesDisabled,
@@ -16237,7 +16311,275 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar$1, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
+    ] });
+  };
+  const Panel = ({
+    alignItems = "center",
+    children,
+    color,
+    cursor,
+    fillHeight,
+    fillWidth,
+    gap,
+    hasBorder,
+    hasShadow,
+    height,
+    orientation = "horizontal",
+    padding,
+    radii = "sm",
+    width,
+    ...props
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
+  const Wrapper$2 = styled.styled.div.withConfig({
+    componentId: "sc-1q78udp-0"
+  })(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
+    $orientation = "horizontal"
+  }) => $orientation === "horizontal" ? "row wrap" : "column", ({
+    $alignItems = "center"
+  }) => $alignItems === "center" ? "center" : `flex-${$alignItems}`, ({
+    $width,
+    $fillWidth
+  }) => $fillWidth ? "100%" : $width, ({
+    $height,
+    $fillHeight
+  }) => $fillHeight ? "100%" : $height, ({
+    $color = "default",
+    theme: theme2
+  }) => theme2.click.panel.color.background[$color], ({
+    $radii = "sm",
+    theme: theme2
+  }) => theme2.click.panel.radii[$radii], ({
+    $padding = "md",
+    theme: theme2
+  }) => theme2.click.panel.space.y[$padding], ({
+    $hasBorder,
+    theme: theme2
+  }) => $hasBorder ? `1px solid ${theme2.click.global.color.stroke.default}` : "none", ({
+    $hasShadow,
+    theme: theme2
+  }) => $hasShadow ? theme2.shadow[1] : "none", ({
+    $gap = "sm",
+    theme: theme2
+  }) => theme2.click.panel.space.gap[$gap], ({
+    $cursor
+  }) => $cursor && `cursor: ${$cursor}`);
+  const PredefinedCalendarContainer = styled.styled(Panel).withConfig({
+    componentId: "sc-1f4vu20-0"
+  })(["align-items:start;background:", ";"], ({
+    theme: theme2
+  }) => theme2.click.panel.color.background.muted);
+  const PredefinedDatesContainer = styled.styled(Container).withConfig({
+    componentId: "sc-1f4vu20-1"
+  })(["width:275px;"]);
+  const CalendarRendererContainer = styled.styled.div.withConfig({
+    componentId: "sc-1f4vu20-2"
+  })(["border:", ";border-radius:", ";box-shadow:lch(6.77 0 0 / 0.15) 4px 4px 6px -1px,lch(6.77 0 0 / 0.15) 2px 2px 4px -1px;left:276px;position:absolute;top:0;"], ({
+    theme: theme2
+  }) => `${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.background.range}`, ({
+    theme: theme2
+  }) => theme2.click.datePicker.dateOption.radii.default);
+  const StyledCalendarRenderer = styled.styled(CalendarRenderer).withConfig({
+    componentId: "sc-1f4vu20-3"
+  })(["border-radius:", ";min-height:221px;"], ({
+    theme: theme2
+  }) => theme2.click.datePicker.dateOption.radii.default);
+  const StyledDropdownItem = styled.styled(Dropdown.Item).withConfig({
+    componentId: "sc-1f4vu20-4"
+  })(["min-height:24px;"]);
+  const ScrollableContainer = styled.styled(Container).withConfig({
+    componentId: "sc-1f4vu20-5"
+  })(["max-height:210px;overflow-y:auto;"]);
+  const DateRangeTableCell = styled.styled(DateTableCell).withConfig({
+    componentId: "sc-1f4vu20-6"
+  })(["", ""], ({
+    $shouldShowRangeIndicator,
+    theme: theme2
+  }) => $shouldShowRangeIndicator && `
+    background: ${theme2.click.datePicker.dateOption.color.background.range};
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.background.range};
+    border-radius: 0;
+    `);
+  const Calendar = ({
+    calendarBody,
+    closeDatepicker,
+    futureDatesDisabled,
+    futureStartDatesDisabled,
+    maxRangeLength,
+    setSelectedDate,
+    startDate,
+    endDate
+  }) => {
+    const [hoveredDate, setHoveredDate] = React.useState();
+    const handleMouseOut = () => {
+      setHoveredDate(void 0);
+    };
+    return calendarBody.value.map(({
+      key: weekKey,
+      value: week
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+        date,
+        isCurrentMonth,
+        key: dayKey,
+        value: fullDate
+      }) => {
+        const isSelected = startDate && isSameDate(startDate, fullDate) || endDate && isSameDate(endDate, fullDate);
+        const today = /* @__PURE__ */ new Date();
+        const isCurrentDate = isSameDate(today, fullDate);
+        const isBetweenStartAndEndDates = Boolean(startDate && endDate && fullDate > startDate && fullDate < endDate);
+        let isDisabled = false;
+        if (futureDatesDisabled && fullDate > today) {
+          isDisabled = true;
+        }
+        if (futureStartDatesDisabled && !startDate && fullDate > today) {
+          isDisabled = true;
+        }
+        if (maxRangeLength > 1 && startDate && !datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)) {
+          isDisabled = true;
+        }
+        const shouldShowRangeIndicator = !endDate && Boolean(startDate && hoveredDate && fullDate > startDate && fullDate < hoveredDate);
+        const handleMouseEnter = () => {
+          setHoveredDate(fullDate);
+        };
+        const handleClick = () => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          if (startDate && endDate) {
+            return;
+          }
+          if (startDate && fullDate < startDate) {
+            return;
+          }
+          if (startDate && !isSameDate(fullDate, startDate)) {
+            closeDatepicker();
+            return;
+          }
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(DateRangeTableCell, { $shouldShowRangeIndicator: !isSelected && (shouldShowRangeIndicator || isBetweenStartAndEndDates), $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseOut, children: date }, dayKey);
+      }) }, weekKey);
+    });
+  };
+  const locale = "en-US";
+  const monthFormatter = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    year: "numeric"
+  });
+  const PredefinedDates = ({
+    onSelectDateRange,
+    predefinedDatesList,
+    selectedEndDate,
+    selectedStartDate,
+    setEndDate,
+    setStartDate,
+    shouldShowCustomRange,
+    showCustomDateRange
+  }) => {
+    const handleCustomTimePeriodClick = (event) => {
+      event.preventDefault();
+      showCustomDateRange(!shouldShowCustomRange);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(PredefinedDatesContainer, { "data-testid": "predefined-dates-list", isResponsive: false, orientation: "vertical", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { orientation: "vertical", children: predefinedDatesList.map(({
+        startDate,
+        endDate
+      }) => {
+        const handleItemClick = () => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+          onSelectDateRange(startDate, endDate);
+        };
+        const rangeIsSelected = selectedEndDate && isSameDate(selectedEndDate, endDate) && selectedStartDate && isSameDate(selectedStartDate, startDate);
+        const isWholeMonth = isDateRangeTheWholeMonth({
+          startDate,
+          endDate
+        });
+        const formattedText = isWholeMonth ? monthFormatter.format(startDate) : `${selectedDateFormatter.format(startDate)} - ${selectedDateFormatter.format(endDate)}`.trim();
+        return /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownItem, { "data-testid": `predefined-date-${startDate.getTime()}`, onClick: handleItemClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { "data-selected": rangeIsSelected, "data-testid": formattedText, justifyContent: "space-between", orientation: "horizontal", children: [
+          formattedText,
+          rangeIsSelected && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check" })
+        ] }) }, startDate.toISOString());
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { justifyContent: "space-between", orientation: "horizontal", children: [
+        "Custom time period ",
+        /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "chevron-right" })
+      ] }) })
+    ] });
+  };
+  const DateRangePicker = ({
+    endDate,
+    startDate,
+    disabled = false,
+    futureDatesDisabled = false,
+    futureStartDatesDisabled = false,
+    maxRangeLength = -1,
+    onSelectDateRange,
+    placeholder = "start date – end date",
+    predefinedDatesList
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedStartDate, setSelectedStartDate] = React.useState();
+    const [selectedEndDate, setSelectedEndDate] = React.useState();
+    const [shouldShowCustomRange, setShouldShowCustomRange] = React.useState(false);
+    const calendarOptions = {};
+    if (selectedStartDate) {
+      calendarOptions.defaultDate = selectedStartDate;
+    }
+    React.useEffect(() => {
+      if (startDate) {
+        setSelectedStartDate(startDate);
+      }
+    }, [startDate]);
+    React.useEffect(() => {
+      if (endDate) {
+        setSelectedEndDate(endDate);
+      }
+    }, [endDate]);
+    const closeDatePicker = React.useCallback(() => {
+      setIsOpen(false);
+      setShouldShowCustomRange(false);
+    }, []);
+    const handleOpenChange = (isOpen2) => {
+      setIsOpen(isOpen2);
+      if (!isOpen2) {
+        setShouldShowCustomRange(false);
+      }
+    };
+    const handleSelectDate = React.useCallback((selectedDate) => {
+      if (selectedStartDate && selectedEndDate) {
+        if (futureStartDatesDisabled && selectedDate > /* @__PURE__ */ new Date()) {
+          setSelectedEndDate(void 0);
+          return;
+        }
+        setSelectedStartDate(selectedDate);
+        setSelectedEndDate(void 0);
+        return;
+      }
+      if (selectedStartDate) {
+        if (isSameDate(selectedStartDate, selectedDate)) {
+          setSelectedStartDate(void 0);
+          return;
+        }
+        if (selectedDate < selectedStartDate) {
+          setSelectedStartDate(selectedDate);
+          return;
+        }
+        setSelectedEndDate(selectedDate);
+        onSelectDateRange(selectedStartDate, selectedDate);
+        setShouldShowCustomRange(false);
+        return;
+      }
+      setSelectedStartDate(selectedDate);
+    }, [futureStartDatesDisabled, onSelectDateRange, selectedEndDate, selectedStartDate]);
+    const shouldShowPredefinedDates = predefinedDatesList !== void 0 && predefinedDatesList.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DateRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: shouldShowPredefinedDates ? /* @__PURE__ */ jsxRuntime.jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PredefinedDates, { onSelectDateRange, predefinedDatesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange }),
+        shouldShowCustomRange && /* @__PURE__ */ jsxRuntime.jsx(CalendarRendererContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledCalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
     ] });
   };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
@@ -34363,56 +34705,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] });
   };
-  const Panel = ({
-    alignItems = "center",
-    children,
-    color,
-    cursor,
-    fillHeight,
-    fillWidth,
-    gap,
-    hasBorder,
-    hasShadow,
-    height,
-    orientation = "horizontal",
-    padding,
-    radii = "sm",
-    width,
-    ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
-  const Wrapper$2 = styled.styled.div.withConfig({
-    componentId: "sc-1q78udp-0"
-  })(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
-    $orientation = "horizontal"
-  }) => $orientation === "horizontal" ? "row wrap" : "column", ({
-    $alignItems = "center"
-  }) => $alignItems === "center" ? "center" : `flex-${$alignItems}`, ({
-    $width,
-    $fillWidth
-  }) => $fillWidth ? "100%" : $width, ({
-    $height,
-    $fillHeight
-  }) => $fillHeight ? "100%" : $height, ({
-    $color = "default",
-    theme: theme2
-  }) => theme2.click.panel.color.background[$color], ({
-    $radii = "sm",
-    theme: theme2
-  }) => theme2.click.panel.radii[$radii], ({
-    $padding = "md",
-    theme: theme2
-  }) => theme2.click.panel.space.y[$padding], ({
-    $hasBorder,
-    theme: theme2
-  }) => $hasBorder ? `1px solid ${theme2.click.global.color.stroke.default}` : "none", ({
-    $hasShadow,
-    theme: theme2
-  }) => $hasShadow ? theme2.shadow[1] : "none", ({
-    $gap = "sm",
-    theme: theme2
-  }) => theme2.click.panel.space.gap[$gap], ({
-    $cursor
-  }) => $cursor && `cursor: ${$cursor}`);
   const ProgressContainer = styled.styled.div.withConfig({
     componentId: "sc-16gr3cg-0"
   })(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;min-height:2px;", ";"], ({
@@ -51436,6 +51728,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.DangerAlert = DangerAlert;
   exports2.DateDetails = DateDetails;
   exports2.DatePicker = DatePicker;
+  exports2.DateRangePicker = DateRangePicker;
   exports2.Dialog = Dialog;
   exports2.Dropdown = Dropdown;
   exports2.EllipsisContent = EllipsisContent;
@@ -51491,6 +51784,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.VerticalStepper = VerticalStepper;
   exports2.WarningAlert = WarningAlert;
   exports2.createToast = createToast;
+  exports2.getPredefinedMonthsForDateRangePicker = getPredefinedMonthsForDateRangePicker;
   exports2.linkStyles = linkStyles;
   exports2.themes = themes;
   exports2.useCUITheme = useCUITheme;