@clickhouse/click-ui 0.0.227 → 0.0.229

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,
@@ -1777,6 +1777,10 @@ const ClickhouseLight$1 = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http:
   /* @__PURE__ */ jsx("rect", { x: "35.998", width: "5.9998", height: "53.9982", rx: "1.45943", fill: "#161517" }),
   /* @__PURE__ */ jsx("rect", { x: "48.001", y: "21.0005", width: "5.9998", height: "11.9996", rx: "1.45943", fill: "#161517" })
 ] });
+const Cloudflare = (props) => /* @__PURE__ */ jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx("path", { d: "M42.0353 44.5735L42.3116 43.5956C42.655 42.4412 42.5356 41.3603 41.9606 40.5809C41.6712 40.2074 41.2985 39.9044 40.8712 39.6954C40.444 39.4863 39.9737 39.3767 39.4966 39.375L19.4113 39.125C19.348 39.1242 19.2857 39.1084 19.2299 39.079C19.174 39.0495 19.1261 39.0073 19.0902 38.9559C19.0555 38.903 19.0339 38.8428 19.0274 38.7802C19.0209 38.7175 19.0297 38.6543 19.0529 38.5956C19.0872 38.499 19.1492 38.4143 19.2313 38.3516C19.3135 38.289 19.4123 38.2511 19.5158 38.2426L39.7878 37.9926C42.1921 37.8824 44.7905 35.9485 45.7089 33.5956L46.8662 30.6029C46.8974 30.5232 46.9126 30.4383 46.911 30.3529L46.8961 30.2059C46.2503 27.316 44.6227 24.7296 42.2822 22.874C39.9417 21.0183 37.0284 20.0045 34.0236 20C31.2599 20.0037 28.567 20.8605 26.3236 22.4498C24.0801 24.0392 22.3991 26.2811 21.5169 28.8603C20.531 28.1251 19.3365 27.7114 18.1003 27.6772C16.8641 27.6429 15.6479 27.9898 14.6215 28.6692C13.5952 29.3487 12.81 30.3269 12.3756 31.4671C11.9412 32.6074 11.8793 33.8528 12.1985 35.0294C11.0049 35.0676 9.833 35.3538 8.75958 35.8692C7.68616 36.3846 6.73547 37.1176 5.96984 38.0201C5.20421 38.9227 4.64092 39.9744 4.31691 41.1063C3.9929 42.2382 3.91547 43.4248 4.08971 44.5882C4.11211 44.7794 4.28384 44.9191 4.47798 44.9191L41.5649 44.9265H41.5724C41.7814 44.9265 41.9681 44.7794 42.0353 44.5735Z", fill: "#F6821F" }),
+  /* @__PURE__ */ jsx("path", { d: "M48.725 30.8237L48.165 30.8384L48.0754 30.8605C48.0269 30.8775 47.9833 30.9058 47.9482 30.9429C47.9131 30.98 47.8876 31.0249 47.8738 31.0737L47.0824 33.7723C46.7389 34.9267 46.8733 36.0076 47.4408 36.787C47.9634 37.5149 48.837 37.9414 49.9048 37.9928L54.1832 38.2428C54.2431 38.2453 54.3015 38.262 54.3535 38.2915C54.4055 38.3209 54.4495 38.3622 54.4818 38.412C54.5565 38.5149 54.5714 38.6473 54.5266 38.7723C54.4924 38.8689 54.4304 38.9536 54.3482 39.0162C54.2661 39.0789 54.1673 39.1167 54.0637 39.1252L49.621 39.3752C47.2018 39.4855 44.596 41.4193 43.685 43.7723L43.364 44.6031C43.3042 44.7502 43.4162 44.912 43.573 44.9193H58.8946C59.0813 44.9193 59.2381 44.8017 59.2904 44.6252C59.7553 43.0145 59.8349 41.3195 59.5229 39.6734C59.2109 38.0273 58.5158 36.4748 57.4922 35.1376C56.4686 33.8005 55.1443 32.7151 53.6232 31.9666C52.102 31.2181 50.4255 30.827 48.725 30.8237Z", fill: "#FBAD41" })
+] }) });
 const Confluent = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_472_6166)", children: [
     /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M45.8553 33.8734C47.477 33.7832 49.1887 33.6931 50.8104 33.6031V32.3417C49.1887 32.2518 47.477 32.1616 45.8553 32.0714L40.9005 31.8913C38.0175 31.8012 35.1347 31.8012 32.2519 31.8012C32.2519 28.9184 32.2519 26.0355 32.1617 23.1525L31.9816 18.1977C31.8914 16.5761 31.8914 14.8643 31.7113 13.2427H30.36C30.2698 14.8643 30.1797 16.5761 30.0897 18.1977L29.9094 23.1525C29.9094 24.5039 29.8194 25.8552 29.8194 27.2066C29.2789 25.9454 28.7384 24.6842 28.1978 23.4228L26.2158 18.9184C25.4951 17.4768 24.8644 15.9454 24.0536 14.4139L22.7924 14.9545C23.333 16.4859 23.8735 18.0174 24.414 19.639L26.2158 24.2336C26.6661 25.495 27.2067 26.7562 27.7472 28.0174C26.7563 27.0265 25.7654 26.1255 24.7743 25.2247L21.1708 21.8012C19.9094 20.7201 18.7384 19.5491 17.477 18.468L16.486 19.4589C17.5671 20.7201 18.7384 21.8913 19.8194 23.1525L23.2428 26.7562C24.1438 27.7471 25.1347 28.7382 26.0357 29.7292C24.7743 29.1886 23.5131 28.7382 22.2519 28.1977L17.6573 26.3958C16.1256 25.8552 14.5941 25.2247 12.9725 24.7741L12.432 26.0355C13.8735 26.7562 15.405 27.4768 16.9364 28.1977L21.4411 30.1795C22.7023 30.7201 23.9634 31.2606 25.2249 31.8012C23.8735 31.8012 22.5221 31.8012 21.1708 31.8913L16.2158 32.0714C14.5941 32.1616 12.8824 32.1616 11.2607 32.3417V33.6931C12.8824 33.7832 14.5941 33.8734 16.2158 33.9633L21.1708 34.1437C24.0536 34.2336 26.9364 34.2336 29.8194 34.2336C29.8194 37.1166 29.8194 39.9994 29.9094 42.8822L30.0897 47.8373C30.1797 49.4589 30.2698 51.1707 30.36 52.7923H31.6212C31.7113 51.1707 31.8013 49.4589 31.8914 47.8373L32.0716 42.8822C32.0716 41.5309 32.1617 40.0896 32.1617 38.7382C32.7023 39.9994 33.2428 41.2606 33.8735 42.612L35.9455 47.1166C36.6661 48.5579 37.2969 50.0896 38.1077 51.6211L39.2789 51.1707C38.7384 49.639 38.1978 48.1075 37.6573 46.4859L35.9455 41.8913C35.4951 40.6301 34.9546 39.2788 34.414 38.0174C35.405 39.0085 36.3959 39.9994 37.387 40.9004L40.9905 44.3238C42.2519 45.4048 43.4229 46.5761 44.6843 47.6572L45.5851 46.7562C44.504 45.495 43.4229 44.3238 42.2519 43.0626L38.8283 39.4589C37.8374 38.468 36.9364 37.4768 35.9455 36.4859C37.2067 37.0265 38.558 37.4768 39.8194 38.0174L44.414 39.7292C45.9455 40.2697 47.477 40.9004 49.0986 41.3508L49.5492 40.1795C48.1077 39.4589 46.5762 38.7382 45.0445 38.0174L40.5401 35.9454C39.2789 35.4048 38.0175 34.8643 36.7563 34.2336C38.1077 34.2336 39.5492 34.2336 40.9005 34.1437C40.9005 34.0535 45.8553 33.8734 45.8553 33.8734Z", fill: "#0574A2" }),
@@ -1821,6 +1825,7 @@ const DataGrip = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "
     /* @__PURE__ */ jsx("clipPath", { id: "clip0_472_6308", children: /* @__PURE__ */ jsx("rect", { width: "64", height: "64", fill: "white" }) })
   ] })
 ] });
+const Databricks = (props) => /* @__PURE__ */ jsx("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M50.9153 23.086L28.0253 36.141L3.51134 22.1923L2.33301 22.8363V32.963L28.023 47.5603L50.9153 34.5543V39.914L28.0253 52.9713L3.51134 39.0203L2.33301 39.6667V41.405L28.023 56L53.6663 41.405V31.2783L52.488 30.632L28.0253 44.5317L5.08401 31.5257V26.1637L28.0253 39.1697L53.6663 24.5747V14.595L52.39 13.8507L28.0253 27.7013L6.26234 15.3907L28.0253 3.02867L45.9057 13.2067L47.476 12.313V11.0717L28.0253 0L2.33301 14.595V16.184L28.023 30.779L50.9153 17.724V23.086Z", fill: "#EE3D2C" }) });
 const dBeaver = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "31.5", fill: "white" }),
   /* @__PURE__ */ jsx("path", { d: "M31.0886 55.2907C25.5469 53.8929 20.6156 48.7447 15.8064 39.3685C8.94644 25.981 8.06759 13.7747 13.6898 10.0833C15.6159 8.88238 18.4258 8.92668 20.9159 10.1923C22.2976 10.8962 22.6907 11.3391 23.4792 13.0716C24.4484 15.2053 24.8268 17.649 24.9903 22.817L25.1412 27.5666L25.9175 25.7725C26.3447 24.7857 27.2065 23.0901 27.8339 21.9827C28.4613 20.8876 28.9764 19.6916 28.9764 19.3249C28.9764 18.9607 28.703 18.0083 28.3661 17.2036C27.7411 15.7073 27.641 14.8952 27.9071 13.5368C28.0595 12.7689 28.0612 12.7665 29.677 12.7665L31.2932 12.7655L32.3014 11.4514C33.439 9.965 35.6459 8.15375 37.5501 7.16937C38.6535 6.59352 39.1247 6.5 40.919 6.5C42.7695 6.5 43.1357 6.5785 44.1903 7.19891C44.8397 7.58281 45.3181 7.94949 45.2547 8.01348C45.1912 8.07746 44.5052 7.94309 43.7264 7.7157C41.7881 7.14723 39.8449 7.35148 37.8674 8.33094C33.1802 10.6541 28.4198 19.4052 30.2752 22.2598C30.5266 22.6487 31.1394 22.9957 32.0231 23.2541C33.4585 23.6749 34.1519 23.5641 32.9532 23.1044C30.4387 22.1422 30.9587 19.856 34.6377 15.697L36.7347 13.3271L36.5958 11.9712C36.4701 10.7431 36.5086 10.5856 37.0059 10.3174C37.6895 9.94827 38.8051 10.1567 39.6181 10.8071C40.3895 11.4199 42.7917 11.4765 44.8179 10.9324C45.5552 10.7326 46.8442 10.5682 47.6742 10.5657C49.095 10.563 49.2048 10.6039 49.3489 11.1785C49.4331 11.5156 49.4399 11.9561 49.364 12.1555C49.2881 12.3548 49.4563 13.0414 49.7375 13.6837C50.3698 15.1258 50.6066 18.5318 50.2038 20.4021C50.0481 21.1354 49.4861 22.6366 48.9539 23.749C47.6234 26.5052 47.5721 26.9236 48.3363 28.7447C49.6472 31.8701 50.6042 37.8501 50.3576 41.3201C50.2846 42.3413 49.9328 44.6177 49.574 46.365C48.8904 49.7365 48.9441 50.9177 49.8181 51.656C50.0188 51.8241 50.1843 52.3155 50.1843 52.7486C50.1843 53.6641 49.5007 54.3999 48.2557 54.8183C47.0888 55.212 44.5694 55.1677 43.3488 54.7295C41.8914 54.2102 40.6878 54.2693 39.6869 54.9074C38.935 55.3873 38.4541 55.4586 35.6588 55.5128C33.5032 55.5536 32.0214 55.4576 31.0449 55.2125L31.0886 55.2907ZM27.3779 46.6282C25.2076 40.2052 25.8814 32.9946 29.3528 25.4888L30.3977 23.2346L29.2796 22.2551L28.3007 24.3863C24.3214 33.0488 23.7111 40.6777 26.5625 46.3625C27.3168 47.8686 28.0004 49.0449 28.1273 49.0449C28.161 49.0449 27.8246 47.9645 27.3803 46.6455L27.3779 46.6282ZM46.0534 25.095L46.5661 23.803L46.4548 24.8785C46.3916 25.4913 46.4353 25.8629 46.5563 25.7398C46.756 25.5385 48.0138 22.3683 48.0138 22.0484C48.0138 21.9719 47.6818 22.1916 47.2741 22.5357C46.5197 23.1755 45.1648 23.6702 44.1493 23.6726C43.6366 23.6739 43.6024 23.7536 43.744 24.5979C44.0223 26.264 44.0956 26.3821 44.8328 26.3821C45.448 26.3821 45.5945 26.2273 46.0461 25.0901L46.0534 25.095Z", fill: "#FCFBFB" }),
@@ -2246,7 +2251,9 @@ const LogosLight = {
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
+  cloudflare: Cloudflare,
   confluent: Confluent,
+  databricks: Databricks,
   datagrip: DataGrip,
   dbeaver: dBeaver,
   dbt: Dbt,
@@ -2433,7 +2440,9 @@ const LogosDark = {
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
+  cloudflare: Cloudflare,
   confluent: Confluent,
+  databricks: Databricks,
   datagrip: DataGrip,
   dbeaver: dBeaver,
   dbt: Dbt,
@@ -15388,7 +15397,9 @@ const formatTimezone = (date, timezone2) => {
 const DateDetails = ({
   date,
   side = "top",
-  systemTimeZone
+  size: size2 = "sm",
+  systemTimeZone,
+  weight = "normal"
 }) => {
   const dayjsDate = dayjs(date);
   let systemTime;
@@ -15400,7 +15411,7 @@ const DateDetails = ({
     }
   }
   return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(UnderlinedTrigger, { $size: "sm", $weight: "medium", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: dayjs.utc(date).fromNow() }) }),
+    /* @__PURE__ */ jsx(UnderlinedTrigger, { $size: "sm", $weight: "medium", children: /* @__PURE__ */ jsx(Text, { size: size2, weight, children: dayjs.utc(date).fromNow() }) }),
     /* @__PURE__ */ jsx(Popover.Content, { side, showArrow: true, children: /* @__PURE__ */ jsxs(GridContainer$1, { columnGap: "xl", gridTemplateColumns: "repeat(2, auto)", gap: "sm", children: [
       /* @__PURE__ */ jsx(Text, { color: "muted", size: "sm", children: "Local" }),
       /* @__PURE__ */ jsx(Container, { justifyContent: "end", children: /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
@@ -16027,12 +16038,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 +16117,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 +16233,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 +16248,7 @@ const CalendarRenderer = ({
     ] })
   ] });
 };
-const Calendar = ({
+const Calendar$1 = ({
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
@@ -16222,7 +16307,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 +34701,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 +51725,7 @@ export {
   DangerAlert,
   DateDetails,
   DatePicker,
+  DateRangePicker,
   Dialog,
   Dropdown,
   EllipsisContent,
@@ -51477,6 +51781,7 @@ export {
   VerticalStepper,
   WarningAlert,
   createToast,
+  getPredefinedMonthsForDateRangePicker,
   linkStyles,
   themes,
   useCUITheme,