@clickhouse/click-ui 0.0.227 → 0.0.228

package/README.md

@@ -2,16 +2,17 @@
 
 The home of the ClickHouse design system and component library. Click UI is in very early development and subject to change, we do not recommend using it for production purposes.
 
-### Using Click UI in an external app
+## Using Click UI in an external app
 
 Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.
+
 1. Navigate to your app's route and run
    `npm i @clickhouse/click-ui`
    or
    `yarn add @clickhouse/click-ui`
 2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
 
-```ts
+```typescript
 import { ClickUIProvider, Text, ThemeName, Title, Switch } from '@clickhouse/click-ui'
 
 function App() {
@@ -34,7 +35,7 @@ function App() {
 export default App
 ```
 
-### To develop this library locally 🚀
+## To develop this library locally 🚀
 
 1. Clone this repo, cd into the `click-ui` directory
 2. To install dependencies, run `npm i`
@@ -43,3 +44,9 @@ export default App
 5. To run Storybook locally, run `npm run storybook` and navigate to https://localhost:6006
 
 Enjoy!
+
+## Releases and Versions
+
+New versions and release notes are available at [GitHub Releases](https://github.com/ClickHouse/click-ui/releases).
+
+To create a new release and publish a new version, follow the instructions in [publish.md](./docs/publish.md).

package/dist/click-ui.bundled.es.js

@@ -1286,7 +1286,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" }),
@@ -1978,7 +1978,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,
@@ -17195,12 +17195,62 @@ const InputEndContent = pt.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 = pt(InputWrapper).withConfig({
   componentId: "sc-1m6g9rm-0"
@@ -17224,13 +17274,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 = pt(Container).withConfig({
   componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
@@ -17316,9 +17390,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(({
@@ -17331,7 +17405,7 @@ const CalendarRenderer = ({
     ] })
   ] });
 };
-const Calendar = ({
+const Calendar$1 = ({
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
@@ -17390,7 +17464,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 = pt.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 = pt(Panel).withConfig({
+  componentId: "sc-1f4vu20-0"
+})(["align-items:start;background:", ";"], ({
+  theme: theme2
+}) => theme2.click.panel.color.background.muted);
+const PredefinedDatesContainer = pt(Container).withConfig({
+  componentId: "sc-1f4vu20-1"
+})(["width:275px;"]);
+const CalendarRendererContainer = pt.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 = pt(CalendarRenderer).withConfig({
+  componentId: "sc-1f4vu20-3"
+})(["border-radius:", ";min-height:221px;"], ({
+  theme: theme2
+}) => theme2.click.datePicker.dateOption.radii.default);
+const StyledDropdownItem = pt(Dropdown.Item).withConfig({
+  componentId: "sc-1f4vu20-4"
+})(["min-height:24px;"]);
+const ScrollableContainer = pt(Container).withConfig({
+  componentId: "sc-1f4vu20-5"
+})(["max-height:210px;overflow-y:auto;"]);
+const DateRangeTableCell = pt(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";
@@ -35516,56 +35858,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 = pt.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 = pt.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;", ";"], ({
@@ -52590,6 +52882,7 @@ export {
   DangerAlert,
   DateDetails,
   DatePicker,
+  DateRangePicker,
   Dialog,
   Dropdown,
   EllipsisContent,
@@ -52645,6 +52938,7 @@ export {
   VerticalStepper,
   WarningAlert,
   createToast,
+  getPredefinedMonthsForDateRangePicker,
   linkStyles,
   themes,
   useCUITheme,