@clickhouse/click-ui 0.0.227 → 0.0.228

package/dist/click-ui.es.js

@@ -90,7 +90,7 @@ const Building = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.
   /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ 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__ */ jsx("path", { d: "M21.0036 7.99826H2.99609", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ 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" }),
@@ -782,7 +782,7 @@ const ICONS_MAP = {
   briefcase: Briefcase,
   building: Building,
   "burger-menu": BurgerMenu,
-  calendar: Calendar$1,
+  calendar: Calendar$2,
   "calendar-with-time": CalendarWithTime,
   cards: Cards,
   "cell-tower": CellTower,
@@ -16027,12 +16027,62 @@ const InputEndContent = styled.div.withConfig({
     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$1(InputWrapper).withConfig({
   componentId: "sc-1m6g9rm-0"
@@ -16056,13 +16106,37 @@ const DatePickerInput = ({
     /* @__PURE__ */ 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 = useId();
+  let formattedValue = /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
+  if (selectedStartDate) {
+    if (selectedEndDate) {
+      formattedValue = /* @__PURE__ */ jsxs("span", { children: [
+        selectedDateFormatter.format(selectedStartDate),
+        " –",
+        " ",
+        selectedDateFormatter.format(selectedEndDate)
+      ] });
+    } else {
+      formattedValue = /* @__PURE__ */ jsxs("span", { children: [
+        selectedDateFormatter.format(selectedStartDate),
+        " ",
+        /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: "– end date" })
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, as: "div", "data-testid": "daterangepicker-input", children: formattedValue })
+  ] });
+};
 const DatePickerContainer = styled$1(Container).withConfig({
   componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
@@ -16148,9 +16222,9 @@ const CalendarRenderer = ({
   headerDate.setFullYear(year);
   return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
     /* @__PURE__ */ jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
-      /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
+      /* @__PURE__ */ jsx(IconButton$1, { "data-testid": "calendar-previous-month", icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
       /* @__PURE__ */ jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
-      /* @__PURE__ */ jsx(IconButton$1, { icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
+      /* @__PURE__ */ jsx(IconButton$1, { "data-testid": "calendar-next-month", icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
     ] }),
     /* @__PURE__ */ jsxs(DateTable, { children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: headers.weekDays.map(({
@@ -16163,7 +16237,7 @@ const CalendarRenderer = ({
     ] })
   ] });
 };
-const Calendar = ({
+const Calendar$1 = ({
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
@@ -16222,7 +16296,275 @@ const DatePicker = ({
   };
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
     /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) }) })
+    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ 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__ */ 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.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(Panel).withConfig({
+  componentId: "sc-1f4vu20-0"
+})(["align-items:start;background:", ";"], ({
+  theme: theme2
+}) => theme2.click.panel.color.background.muted);
+const PredefinedDatesContainer = styled(Container).withConfig({
+  componentId: "sc-1f4vu20-1"
+})(["width:275px;"]);
+const CalendarRendererContainer = 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(CalendarRenderer).withConfig({
+  componentId: "sc-1f4vu20-3"
+})(["border-radius:", ";min-height:221px;"], ({
+  theme: theme2
+}) => theme2.click.datePicker.dateOption.radii.default);
+const StyledDropdownItem = styled(Dropdown.Item).withConfig({
+  componentId: "sc-1f4vu20-4"
+})(["min-height:24px;"]);
+const ScrollableContainer = styled(Container).withConfig({
+  componentId: "sc-1f4vu20-5"
+})(["max-height:210px;overflow-y:auto;"]);
+const DateRangeTableCell = 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] = useState();
+  const handleMouseOut = () => {
+    setHoveredDate(void 0);
+  };
+  return calendarBody.value.map(({
+    key: weekKey,
+    value: week
+  }) => {
+    return /* @__PURE__ */ 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__ */ 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__ */ jsxs(PredefinedDatesContainer, { "data-testid": "predefined-dates-list", isResponsive: false, orientation: "vertical", children: [
+    /* @__PURE__ */ 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__ */ jsx(StyledDropdownItem, { "data-testid": `predefined-date-${startDate.getTime()}`, onClick: handleItemClick, children: /* @__PURE__ */ jsxs(Container, { "data-selected": rangeIsSelected, "data-testid": formattedText, justifyContent: "space-between", orientation: "horizontal", children: [
+        formattedText,
+        rangeIsSelected && /* @__PURE__ */ jsx(SvgImage, { name: "check" })
+      ] }) }, startDate.toISOString());
+    }) }),
+    /* @__PURE__ */ jsx(StyledDropdownItem, { onClick: handleCustomTimePeriodClick, children: /* @__PURE__ */ jsxs(Container, { justifyContent: "space-between", orientation: "horizontal", children: [
+      "Custom time period ",
+      /* @__PURE__ */ 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] = useState(false);
+  const [selectedStartDate, setSelectedStartDate] = useState();
+  const [selectedEndDate, setSelectedEndDate] = useState();
+  const [shouldShowCustomRange, setShouldShowCustomRange] = useState(false);
+  const calendarOptions = {};
+  if (selectedStartDate) {
+    calendarOptions.defaultDate = selectedStartDate;
+  }
+  useEffect(() => {
+    if (startDate) {
+      setSelectedStartDate(startDate);
+    }
+  }, [startDate]);
+  useEffect(() => {
+    if (endDate) {
+      setSelectedEndDate(endDate);
+    }
+  }, [endDate]);
+  const closeDatePicker = useCallback(() => {
+    setIsOpen(false);
+    setShouldShowCustomRange(false);
+  }, []);
+  const handleOpenChange = (isOpen2) => {
+    setIsOpen(isOpen2);
+    if (!isOpen2) {
+      setShouldShowCustomRange(false);
+    }
+  };
+  const handleSelectDate = 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__ */ jsxs(Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DateRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate }) }),
+    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: shouldShowPredefinedDates ? /* @__PURE__ */ jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
+      /* @__PURE__ */ jsx(PredefinedDates, { onSelectDateRange, predefinedDatesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange }),
+      shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { children: /* @__PURE__ */ jsx(StyledCalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
+    ] }) : /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, children: (body) => /* @__PURE__ */ jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate }) }) })
   ] });
 };
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
@@ -34348,56 +34690,6 @@ const Pagination = ({
     ] })
   ] });
 };
-const Panel = ({
-  alignItems = "center",
-  children,
-  color,
-  cursor,
-  fillHeight,
-  fillWidth,
-  gap,
-  hasBorder,
-  hasShadow,
-  height,
-  orientation = "horizontal",
-  padding,
-  radii = "sm",
-  width,
-  ...props
-}) => /* @__PURE__ */ 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.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.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;", ";"], ({
@@ -51422,6 +51714,7 @@ export {
   DangerAlert,
   DateDetails,
   DatePicker,
+  DateRangePicker,
   Dialog,
   Dropdown,
   EllipsisContent,
@@ -51477,6 +51770,7 @@ export {
   VerticalStepper,
   WarningAlert,
   createToast,
+  getPredefinedMonthsForDateRangePicker,
   linkStyles,
   themes,
   useCUITheme,