@clickhouse/click-ui 0.0.202 → 0.0.204

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

@@ -2884,6 +2884,18 @@ const Azure = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64"
     ] })
   ] })
 ] });
+const AzureBlobStorage = (props) => /* @__PURE__ */ jsxs("svg", { width: "62", height: "50", viewBox: "0 0 62 50", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M0.777344 13.5801H61.2218V47.2796C61.2218 47.8153 61.009 48.3289 60.6303 48.7077C60.2515 49.0864 59.7378 49.2992 59.2022 49.2992H2.7969C2.26128 49.2992 1.7476 49.0864 1.36886 48.7077C0.990118 48.3289 0.777344 47.8153 0.777344 47.2796V13.5801Z", fill: "url(#paint0_linear_11640_11692)" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.80757 0.7012H59.1916C59.4568 0.7012 59.7194 0.753438 59.9644 0.85493C60.2094 0.956422 60.4321 1.10518 60.6196 1.29271C60.8071 1.48025 60.9559 1.70288 61.0574 1.94791C61.1589 2.19293 61.2111 2.45554 61.2111 2.72076V13.5794H0.777344V2.72076C0.77734 2.45464 0.829929 2.19116 0.932087 1.94543C1.03425 1.69971 1.18396 1.4766 1.37262 1.28893C1.56129 1.10126 1.78518 0.95272 2.03144 0.851858C2.2777 0.750995 2.54146 0.699795 2.80757 0.7012Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M28.6036 18.0625H8.28357C7.72784 18.0625 7.27734 18.513 7.27734 19.0687V29.1736C7.27734 29.7293 7.72784 30.1798 8.28357 30.1798H28.6036C29.1593 30.1798 29.6098 29.7293 29.6098 29.1736V19.0687C29.6098 18.513 29.1593 18.0625 28.6036 18.0625Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M53.5215 18.0625H33.2015C32.6458 18.0625 32.1953 18.513 32.1953 19.0687V29.1736C32.1953 29.7293 32.6458 30.1798 33.2015 30.1798H53.5215C54.0773 30.1798 54.5278 29.7293 54.5278 29.1736V19.0687C54.5278 18.513 54.0773 18.0625 53.5215 18.0625Z", fill: "white" }),
+  /* @__PURE__ */ jsx("path", { d: "M28.4903 32.5664H8.17028C7.61456 32.5664 7.16406 33.0169 7.16406 33.5726V43.6775C7.16406 44.2332 7.61456 44.6837 8.17028 44.6837H28.4903C29.046 44.6837 29.4965 44.2332 29.4965 43.6775V33.5726C29.4965 33.0169 29.046 32.5664 28.4903 32.5664Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M53.4083 32.5664H33.0883C32.5325 32.5664 32.082 33.0169 32.082 33.5726V43.6775C32.082 44.2332 32.5325 44.6837 33.0883 44.6837H53.4083C53.964 44.6837 54.4145 44.2332 54.4145 43.6775V33.5726C54.4145 33.0169 53.964 32.5664 53.4083 32.5664Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "paint0_linear_11640_11692", x1: "30.9996", y1: "49.2992", x2: "30.9996", y2: "13.5801", gradientUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx("stop", { stopColor: "#32BEDD" }),
+    /* @__PURE__ */ jsx("stop", { offset: "0.775", stopColor: "#32D4F5" })
+  ] }) })
+] });
 const AzureEventHub = (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_7362_17014)", children: [
     /* @__PURE__ */ jsx("path", { d: "M6.33051 4.0693H57.6037C58.0583 4.0693 58.6529 3.99941 59.0376 4.24404C59.3524 4.45373 59.3174 4.76825 59.3174 5.08278V16.1961C59.3174 16.5107 59.2825 16.8252 59.0376 17.0349C58.7578 17.3145 58.4431 17.3145 58.0583 17.3145H53.1269C52.7072 17.3145 52.2875 17.2795 52.0077 16.965C51.7629 16.6854 51.7629 16.301 51.7629 15.9515V11.5831H11.8915V16.0564C11.8915 16.4058 11.8565 16.7553 11.6117 17.0349C11.3319 17.3145 10.9822 17.3145 10.6324 17.3145H5.45613C5.10639 17.3145 4.75664 17.3145 4.47684 17.0349C4.19704 16.7553 4.19704 16.4408 4.16206 16.0564V5.99142C4.16206 5.607 4.12709 5.18763 4.19704 4.8032C4.26699 4.45373 4.58176 4.17414 4.93151 4.10425C5.42116 4.03435 5.87583 4.0693 6.33051 4.0693Z", fill: "#006FD4" }),
@@ -3381,6 +3393,7 @@ const LogosLight = {
   "aws-redshift": AWSRedshift,
   "aws-s3": AWS_S3,
   azure: Azure,
+  "azure-blob-storage": AzureBlobStorage,
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
@@ -3567,6 +3580,7 @@ const LogosDark = {
   "aws-redshift": AWSRedshift,
   "aws-s3": AWS_S3,
   azure: Azure,
+  "azure-blob-storage": AzureBlobStorage,
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
@@ -17126,13 +17140,6 @@ pt.svg.withConfig({
     }
   `);
 const locale = "en-US";
-const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-  weekday: "short"
-});
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric"
-});
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
   month: "short",
@@ -17140,20 +17147,41 @@ const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
 });
 const explicitWidth = "250px";
 const HighlightedInputWrapper = pt(InputWrapper).withConfig({
-  componentId: "sc-1kfphgn-0"
+  componentId: "sc-1m6g9rm-0"
 })(["", " width:", ";}"], ({
   $isActive,
   theme: theme2
 }) => {
   return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
 }, explicitWidth);
+const DatePickerInput = ({
+  isActive,
+  disabled,
+  id,
+  placeholder,
+  selectedDate
+}) => {
+  const defaultId = useId();
+  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
+    /* @__PURE__ */ jsx(InputElement, { "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 DatePickerContainer = pt(Container).withConfig({
-  componentId: "sc-1kfphgn-1"
+  componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
   theme: theme2
 }) => theme2.click.datePicker.dateOption.color.background.default);
 const UnselectableTitle = pt.h2.withConfig({
-  componentId: "sc-1kfphgn-2"
+  componentId: "sc-1m6g9rm-2"
 })(["", " user-select:none;"], ({
   theme: theme2
 }) => `
@@ -17161,16 +17189,14 @@ const UnselectableTitle = pt.h2.withConfig({
     font: ${theme2.click.datePicker.typography.title.default};
   `);
 const DateTable = pt.table.withConfig({
-  componentId: "sc-1kfphgn-3"
-})(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+  componentId: "sc-1m6g9rm-3"
+})(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
   theme: theme2
 }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
   theme: theme2
-}) => theme2.click.datePicker.dateOption.size.height, ({
-  theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+}) => theme2.click.datePicker.dateOption.size.height);
 const DateTableHeader = pt.th.withConfig({
-  componentId: "sc-1kfphgn-4"
+  componentId: "sc-1m6g9rm-4"
 })(["", " width:14%;"], ({
   theme: theme2
 }) => `
@@ -17178,10 +17204,11 @@ const DateTableHeader = pt.th.withConfig({
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
 const DateTableCell = pt.td.withConfig({
-  componentId: "sc-1kfphgn-5"
+  componentId: "sc-1m6g9rm-5"
 })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
   theme: theme2
 }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -17203,50 +17230,35 @@ const DateTableCell = pt.td.withConfig({
 }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
   $isDisabled,
   theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-const DatePickerInput = ({
-  isActive,
-  disabled,
-  id,
-  placeholder,
-  selectedDate
-}) => {
-  const defaultId = useId();
-  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
-};
-const Calendar = ({
-  closeDatepicker,
-  futureDatesDisabled,
-  selectedDate,
-  setSelectedDate
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+const CalendarRenderer = ({
+  calendarOptions = {},
+  children,
+  ...props
 }) => {
-  const calendarOptions = {
-    defaultWeekStart: 1
-  };
-  if (selectedDate) {
-    calendarOptions.defaultDate = selectedDate;
-  }
   const {
     body,
     headers,
     month,
     navigation,
     year
-  } = useCalendar(calendarOptions);
-  const handleNextClick = () => {
+  } = useCalendar({
+    defaultWeekStart: 1,
+    ...calendarOptions
+  });
+  const handleNextClick = useCallback(() => {
     navigation.toNext();
-  };
-  const handlePreviousClick = () => {
+  }, [navigation]);
+  const handlePreviousClick = useCallback(() => {
     navigation.toPrev();
-  };
+  }, [navigation]);
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
-  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+  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(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -17259,32 +17271,42 @@ const Calendar = ({
       }) => {
         return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
       }) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: body.value.map(({
-        key: weekKey,
-        value: week
-      }) => {
-        return /* @__PURE__ */ jsx("tr", { children: week.map(({
-          date,
-          isCurrentMonth,
-          key: dayKey,
-          value: fullDate
-        }) => {
-          const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-          const today = /* @__PURE__ */ new Date();
-          const isCurrentDate = isSameDate(today, fullDate);
-          const isDisabled = futureDatesDisabled ? fullDate > today : false;
-          return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-            if (isDisabled) {
-              return false;
-            }
-            setSelectedDate(fullDate);
-            closeDatepicker();
-          }, children: date }, dayKey);
-        }) }, weekKey);
-      }) })
+      /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] })
   ] });
 };
+const Calendar = ({
+  calendarBody,
+  closeDatepicker,
+  futureDatesDisabled,
+  selectedDate,
+  setSelectedDate
+}) => {
+  return calendarBody.value.map(({
+    key: weekKey,
+    value: week
+  }) => {
+    return /* @__PURE__ */ jsx("tr", { children: week.map(({
+      date,
+      isCurrentMonth,
+      key: dayKey,
+      value: fullDate
+    }) => {
+      const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+      const today = /* @__PURE__ */ new Date();
+      const isCurrentDate = isSameDate(today, fullDate);
+      const isDisabled = futureDatesDisabled ? fullDate > today : false;
+      const handleClick = () => {
+        if (isDisabled) {
+          return false;
+        }
+        setSelectedDate(fullDate);
+        closeDatepicker();
+      };
+      return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+    }) }, weekKey);
+  });
+};
 const DatePicker = ({
   date,
   disabled = false,
@@ -17294,6 +17316,10 @@ const DatePicker = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState();
+  const calendarOptions = {};
+  if (selectedDate) {
+    calendarOptions.defaultDate = selectedDate;
+  }
   useEffect(() => {
     if (date) {
       setSelectedDate(date);
@@ -17307,8 +17333,8 @@ const DatePicker = ({
     onSelectDate(selectedDate2);
   };
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+    /* @__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 }) }) })
   ] });
 };
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

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

@@ -2900,6 +2900,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] })
   ] });
+  const AzureBlobStorage = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "62", height: "50", viewBox: "0 0 62 50", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.777344 13.5801H61.2218V47.2796C61.2218 47.8153 61.009 48.3289 60.6303 48.7077C60.2515 49.0864 59.7378 49.2992 59.2022 49.2992H2.7969C2.26128 49.2992 1.7476 49.0864 1.36886 48.7077C0.990118 48.3289 0.777344 47.8153 0.777344 47.2796V13.5801Z", fill: "url(#paint0_linear_11640_11692)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.80757 0.7012H59.1916C59.4568 0.7012 59.7194 0.753438 59.9644 0.85493C60.2094 0.956422 60.4321 1.10518 60.6196 1.29271C60.8071 1.48025 60.9559 1.70288 61.0574 1.94791C61.1589 2.19293 61.2111 2.45554 61.2111 2.72076V13.5794H0.777344V2.72076C0.77734 2.45464 0.829929 2.19116 0.932087 1.94543C1.03425 1.69971 1.18396 1.4766 1.37262 1.28893C1.56129 1.10126 1.78518 0.95272 2.03144 0.851858C2.2777 0.750995 2.54146 0.699795 2.80757 0.7012Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M28.6036 18.0625H8.28357C7.72784 18.0625 7.27734 18.513 7.27734 19.0687V29.1736C7.27734 29.7293 7.72784 30.1798 8.28357 30.1798H28.6036C29.1593 30.1798 29.6098 29.7293 29.6098 29.1736V19.0687C29.6098 18.513 29.1593 18.0625 28.6036 18.0625Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M53.5215 18.0625H33.2015C32.6458 18.0625 32.1953 18.513 32.1953 19.0687V29.1736C32.1953 29.7293 32.6458 30.1798 33.2015 30.1798H53.5215C54.0773 30.1798 54.5278 29.7293 54.5278 29.1736V19.0687C54.5278 18.513 54.0773 18.0625 53.5215 18.0625Z", fill: "white" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M28.4903 32.5664H8.17028C7.61456 32.5664 7.16406 33.0169 7.16406 33.5726V43.6775C7.16406 44.2332 7.61456 44.6837 8.17028 44.6837H28.4903C29.046 44.6837 29.4965 44.2332 29.4965 43.6775V33.5726C29.4965 33.0169 29.046 32.5664 28.4903 32.5664Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M53.4083 32.5664H33.0883C32.5325 32.5664 32.082 33.0169 32.082 33.5726V43.6775C32.082 44.2332 32.5325 44.6837 33.0883 44.6837H53.4083C53.964 44.6837 54.4145 44.2332 54.4145 43.6775V33.5726C54.4145 33.0169 53.964 32.5664 53.4083 32.5664Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_11640_11692", x1: "30.9996", y1: "49.2992", x2: "30.9996", y2: "13.5801", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#32BEDD" }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.775", stopColor: "#32D4F5" })
+    ] }) })
+  ] });
   const AzureEventHub = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_7362_17014)", children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.33051 4.0693H57.6037C58.0583 4.0693 58.6529 3.99941 59.0376 4.24404C59.3524 4.45373 59.3174 4.76825 59.3174 5.08278V16.1961C59.3174 16.5107 59.2825 16.8252 59.0376 17.0349C58.7578 17.3145 58.4431 17.3145 58.0583 17.3145H53.1269C52.7072 17.3145 52.2875 17.2795 52.0077 16.965C51.7629 16.6854 51.7629 16.301 51.7629 15.9515V11.5831H11.8915V16.0564C11.8915 16.4058 11.8565 16.7553 11.6117 17.0349C11.3319 17.3145 10.9822 17.3145 10.6324 17.3145H5.45613C5.10639 17.3145 4.75664 17.3145 4.47684 17.0349C4.19704 16.7553 4.19704 16.4408 4.16206 16.0564V5.99142C4.16206 5.607 4.12709 5.18763 4.19704 4.8032C4.26699 4.45373 4.58176 4.17414 4.93151 4.10425C5.42116 4.03435 5.87583 4.0693 6.33051 4.0693Z", fill: "#006FD4" }),
@@ -3397,6 +3409,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "aws-redshift": AWSRedshift,
     "aws-s3": AWS_S3,
     azure: Azure,
+    "azure-blob-storage": AzureBlobStorage,
     "azure-event-hub": AzureEventHub,
     bigquery: BigQueryLight,
     "c#": ChashLight,
@@ -3583,6 +3596,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "aws-redshift": AWSRedshift,
     "aws-s3": AWS_S3,
     azure: Azure,
+    "azure-blob-storage": AzureBlobStorage,
     "azure-event-hub": AzureEventHub,
     bigquery: BigQueryLight,
     "c#": ChashLight,
@@ -17142,13 +17156,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const locale = "en-US";
-  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-    weekday: "short"
-  });
-  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric"
-  });
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
@@ -17156,20 +17163,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   const explicitWidth = "250px";
   const HighlightedInputWrapper = pt(InputWrapper).withConfig({
-    componentId: "sc-1kfphgn-0"
+    componentId: "sc-1m6g9rm-0"
   })(["", " width:", ";}"], ({
     $isActive,
     theme: theme2
   }) => {
     return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
   }, explicitWidth);
+  const DatePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedDate
+  }) => {
+    const defaultId = React.useId();
+    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "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 DatePickerContainer = pt(Container).withConfig({
-    componentId: "sc-1kfphgn-1"
+    componentId: "sc-1m6g9rm-1"
   })(["background:", ";"], ({
     theme: theme2
   }) => theme2.click.datePicker.dateOption.color.background.default);
   const UnselectableTitle = pt.h2.withConfig({
-    componentId: "sc-1kfphgn-2"
+    componentId: "sc-1m6g9rm-2"
   })(["", " user-select:none;"], ({
     theme: theme2
   }) => `
@@ -17177,16 +17205,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     font: ${theme2.click.datePicker.typography.title.default};
   `);
   const DateTable = pt.table.withConfig({
-    componentId: "sc-1kfphgn-3"
-  })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+    componentId: "sc-1m6g9rm-3"
+  })(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
     theme: theme2
   }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
     theme: theme2
-  }) => theme2.click.datePicker.dateOption.size.height, ({
-    theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+  }) => theme2.click.datePicker.dateOption.size.height);
   const DateTableHeader = pt.th.withConfig({
-    componentId: "sc-1kfphgn-4"
+    componentId: "sc-1m6g9rm-4"
   })(["", " width:14%;"], ({
     theme: theme2
   }) => `
@@ -17194,10 +17220,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
   const DateTableCell = pt.td.withConfig({
-    componentId: "sc-1kfphgn-5"
+    componentId: "sc-1m6g9rm-5"
   })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
     theme: theme2
   }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -17219,50 +17246,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
     $isDisabled,
     theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-  const DatePickerInput = ({
-    isActive,
-    disabled,
-    id,
-    placeholder,
-    selectedDate
-  }) => {
-    const defaultId = React.useId();
-    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-    ] });
-  };
-  const Calendar = ({
-    closeDatepicker,
-    futureDatesDisabled,
-    selectedDate,
-    setSelectedDate
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+  const CalendarRenderer = ({
+    calendarOptions = {},
+    children,
+    ...props
   }) => {
-    const calendarOptions = {
-      defaultWeekStart: 1
-    };
-    if (selectedDate) {
-      calendarOptions.defaultDate = selectedDate;
-    }
     const {
       body,
       headers,
       month,
       navigation,
       year
-    } = useCalendar(calendarOptions);
-    const handleNextClick = () => {
+    } = useCalendar({
+      defaultWeekStart: 1,
+      ...calendarOptions
+    });
+    const handleNextClick = React.useCallback(() => {
       navigation.toNext();
-    };
-    const handlePreviousClick = () => {
+    }, [navigation]);
+    const handlePreviousClick = React.useCallback(() => {
       navigation.toPrev();
-    };
+    }, [navigation]);
     const headerDate = /* @__PURE__ */ new Date();
     headerDate.setMonth(month);
     headerDate.setFullYear(year);
-    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+    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(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -17275,32 +17287,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: body.value.map(({
-          key: weekKey,
-          value: week
-        }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
-            date,
-            isCurrentMonth,
-            key: dayKey,
-            value: fullDate
-          }) => {
-            const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-            const today = /* @__PURE__ */ new Date();
-            const isCurrentDate = isSameDate(today, fullDate);
-            const isDisabled = futureDatesDisabled ? fullDate > today : false;
-            return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-              if (isDisabled) {
-                return false;
-              }
-              setSelectedDate(fullDate);
-              closeDatepicker();
-            }, children: date }, dayKey);
-          }) }, weekKey);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
       ] })
     ] });
   };
+  const Calendar = ({
+    calendarBody,
+    closeDatepicker,
+    futureDatesDisabled,
+    selectedDate,
+    setSelectedDate
+  }) => {
+    return calendarBody.value.map(({
+      key: weekKey,
+      value: week
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+        date,
+        isCurrentMonth,
+        key: dayKey,
+        value: fullDate
+      }) => {
+        const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+        const today = /* @__PURE__ */ new Date();
+        const isCurrentDate = isSameDate(today, fullDate);
+        const isDisabled = futureDatesDisabled ? fullDate > today : false;
+        const handleClick = () => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          closeDatepicker();
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+      }) }, weekKey);
+    });
+  };
   const DatePicker = ({
     date,
     disabled = false,
@@ -17310,6 +17332,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState();
+    const calendarOptions = {};
+    if (selectedDate) {
+      calendarOptions.defaultDate = selectedDate;
+    }
     React.useEffect(() => {
       if (date) {
         setSelectedDate(date);
@@ -17323,8 +17349,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onSelectDate(selectedDate2);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+      /* @__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 }) }) })
     ] });
   };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/click-ui.es.js

@@ -1688,6 +1688,18 @@ const Azure = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64"
     ] })
   ] })
 ] });
+const AzureBlobStorage = (props) => /* @__PURE__ */ jsxs("svg", { width: "62", height: "50", viewBox: "0 0 62 50", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M0.777344 13.5801H61.2218V47.2796C61.2218 47.8153 61.009 48.3289 60.6303 48.7077C60.2515 49.0864 59.7378 49.2992 59.2022 49.2992H2.7969C2.26128 49.2992 1.7476 49.0864 1.36886 48.7077C0.990118 48.3289 0.777344 47.8153 0.777344 47.2796V13.5801Z", fill: "url(#paint0_linear_11640_11692)" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.80757 0.7012H59.1916C59.4568 0.7012 59.7194 0.753438 59.9644 0.85493C60.2094 0.956422 60.4321 1.10518 60.6196 1.29271C60.8071 1.48025 60.9559 1.70288 61.0574 1.94791C61.1589 2.19293 61.2111 2.45554 61.2111 2.72076V13.5794H0.777344V2.72076C0.77734 2.45464 0.829929 2.19116 0.932087 1.94543C1.03425 1.69971 1.18396 1.4766 1.37262 1.28893C1.56129 1.10126 1.78518 0.95272 2.03144 0.851858C2.2777 0.750995 2.54146 0.699795 2.80757 0.7012Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M28.6036 18.0625H8.28357C7.72784 18.0625 7.27734 18.513 7.27734 19.0687V29.1736C7.27734 29.7293 7.72784 30.1798 8.28357 30.1798H28.6036C29.1593 30.1798 29.6098 29.7293 29.6098 29.1736V19.0687C29.6098 18.513 29.1593 18.0625 28.6036 18.0625Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M53.5215 18.0625H33.2015C32.6458 18.0625 32.1953 18.513 32.1953 19.0687V29.1736C32.1953 29.7293 32.6458 30.1798 33.2015 30.1798H53.5215C54.0773 30.1798 54.5278 29.7293 54.5278 29.1736V19.0687C54.5278 18.513 54.0773 18.0625 53.5215 18.0625Z", fill: "white" }),
+  /* @__PURE__ */ jsx("path", { d: "M28.4903 32.5664H8.17028C7.61456 32.5664 7.16406 33.0169 7.16406 33.5726V43.6775C7.16406 44.2332 7.61456 44.6837 8.17028 44.6837H28.4903C29.046 44.6837 29.4965 44.2332 29.4965 43.6775V33.5726C29.4965 33.0169 29.046 32.5664 28.4903 32.5664Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("path", { d: "M53.4083 32.5664H33.0883C32.5325 32.5664 32.082 33.0169 32.082 33.5726V43.6775C32.082 44.2332 32.5325 44.6837 33.0883 44.6837H53.4083C53.964 44.6837 54.4145 44.2332 54.4145 43.6775V33.5726C54.4145 33.0169 53.964 32.5664 53.4083 32.5664Z", fill: "#0078D4" }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "paint0_linear_11640_11692", x1: "30.9996", y1: "49.2992", x2: "30.9996", y2: "13.5801", gradientUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx("stop", { stopColor: "#32BEDD" }),
+    /* @__PURE__ */ jsx("stop", { offset: "0.775", stopColor: "#32D4F5" })
+  ] }) })
+] });
 const AzureEventHub = (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_7362_17014)", children: [
     /* @__PURE__ */ jsx("path", { d: "M6.33051 4.0693H57.6037C58.0583 4.0693 58.6529 3.99941 59.0376 4.24404C59.3524 4.45373 59.3174 4.76825 59.3174 5.08278V16.1961C59.3174 16.5107 59.2825 16.8252 59.0376 17.0349C58.7578 17.3145 58.4431 17.3145 58.0583 17.3145H53.1269C52.7072 17.3145 52.2875 17.2795 52.0077 16.965C51.7629 16.6854 51.7629 16.301 51.7629 15.9515V11.5831H11.8915V16.0564C11.8915 16.4058 11.8565 16.7553 11.6117 17.0349C11.3319 17.3145 10.9822 17.3145 10.6324 17.3145H5.45613C5.10639 17.3145 4.75664 17.3145 4.47684 17.0349C4.19704 16.7553 4.19704 16.4408 4.16206 16.0564V5.99142C4.16206 5.607 4.12709 5.18763 4.19704 4.8032C4.26699 4.45373 4.58176 4.17414 4.93151 4.10425C5.42116 4.03435 5.87583 4.0693 6.33051 4.0693Z", fill: "#006FD4" }),
@@ -2185,6 +2197,7 @@ const LogosLight = {
   "aws-redshift": AWSRedshift,
   "aws-s3": AWS_S3,
   azure: Azure,
+  "azure-blob-storage": AzureBlobStorage,
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
@@ -2371,6 +2384,7 @@ const LogosDark = {
   "aws-redshift": AWSRedshift,
   "aws-s3": AWS_S3,
   azure: Azure,
+  "azure-blob-storage": AzureBlobStorage,
   "azure-event-hub": AzureEventHub,
   bigquery: BigQueryLight,
   "c#": ChashLight,
@@ -15958,62 +15972,75 @@ styled.svg.withConfig({
     }
   `);
 const locale = "en-US";
-const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-  weekday: "short"
-});
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric"
-});
 const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
   day: "2-digit",
   month: "short",
   year: "numeric"
 });
 const explicitWidth = "250px";
-const HighlightedInputWrapper = styled(InputWrapper).withConfig({
-  componentId: "sc-1kfphgn-0"
+const HighlightedInputWrapper = styled$1(InputWrapper).withConfig({
+  componentId: "sc-1m6g9rm-0"
 })(["", " width:", ";}"], ({
   $isActive,
   theme: theme2
 }) => {
   return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
 }, explicitWidth);
-const DatePickerContainer = styled(Container).withConfig({
-  componentId: "sc-1kfphgn-1"
+const DatePickerInput = ({
+  isActive,
+  disabled,
+  id,
+  placeholder,
+  selectedDate
+}) => {
+  const defaultId = useId();
+  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
+    /* @__PURE__ */ jsx(InputElement, { "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 DatePickerContainer = styled$1(Container).withConfig({
+  componentId: "sc-1m6g9rm-1"
 })(["background:", ";"], ({
   theme: theme2
 }) => theme2.click.datePicker.dateOption.color.background.default);
-const UnselectableTitle = styled.h2.withConfig({
-  componentId: "sc-1kfphgn-2"
+const UnselectableTitle = styled$1.h2.withConfig({
+  componentId: "sc-1m6g9rm-2"
 })(["", " user-select:none;"], ({
   theme: theme2
 }) => `
     color: ${theme2.click.datePicker.color.title.default};
     font: ${theme2.click.datePicker.typography.title.default};
   `);
-const DateTable = styled.table.withConfig({
-  componentId: "sc-1kfphgn-3"
-})(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+const DateTable = styled$1.table.withConfig({
+  componentId: "sc-1m6g9rm-3"
+})(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
   theme: theme2
 }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
   theme: theme2
-}) => theme2.click.datePicker.dateOption.size.height, ({
-  theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
-const DateTableHeader = styled.th.withConfig({
-  componentId: "sc-1kfphgn-4"
+}) => theme2.click.datePicker.dateOption.size.height);
+const DateTableHeader = styled$1.th.withConfig({
+  componentId: "sc-1m6g9rm-4"
 })(["", " width:14%;"], ({
   theme: theme2
 }) => `
     color: ${theme2.click.datePicker.color.daytitle.default};
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
-const DateTableCell = styled.td.withConfig({
-  componentId: "sc-1kfphgn-5"
+const DateTableCell = styled$1.td.withConfig({
+  componentId: "sc-1m6g9rm-5"
 })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
   theme: theme2
 }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -16035,50 +16062,35 @@ const DateTableCell = styled.td.withConfig({
 }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
   $isDisabled,
   theme: theme2
-}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-const DatePickerInput = ({
-  isActive,
-  disabled,
-  id,
-  placeholder,
-  selectedDate
-}) => {
-  const defaultId = useId();
-  const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }),
-    /* @__PURE__ */ jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
-};
-const Calendar = ({
-  closeDatepicker,
-  futureDatesDisabled,
-  selectedDate,
-  setSelectedDate
+}) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+const CalendarRenderer = ({
+  calendarOptions = {},
+  children,
+  ...props
 }) => {
-  const calendarOptions = {
-    defaultWeekStart: 1
-  };
-  if (selectedDate) {
-    calendarOptions.defaultDate = selectedDate;
-  }
   const {
     body,
     headers,
     month,
     navigation,
     year
-  } = useCalendar(calendarOptions);
-  const handleNextClick = () => {
+  } = useCalendar({
+    defaultWeekStart: 1,
+    ...calendarOptions
+  });
+  const handleNextClick = useCallback(() => {
     navigation.toNext();
-  };
-  const handlePreviousClick = () => {
+  }, [navigation]);
+  const handlePreviousClick = useCallback(() => {
     navigation.toPrev();
-  };
+  }, [navigation]);
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
-  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+  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(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -16091,32 +16103,42 @@ const Calendar = ({
       }) => {
         return /* @__PURE__ */ jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
       }) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: body.value.map(({
-        key: weekKey,
-        value: week
-      }) => {
-        return /* @__PURE__ */ jsx("tr", { children: week.map(({
-          date,
-          isCurrentMonth,
-          key: dayKey,
-          value: fullDate
-        }) => {
-          const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-          const today = /* @__PURE__ */ new Date();
-          const isCurrentDate = isSameDate(today, fullDate);
-          const isDisabled = futureDatesDisabled ? fullDate > today : false;
-          return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-            if (isDisabled) {
-              return false;
-            }
-            setSelectedDate(fullDate);
-            closeDatepicker();
-          }, children: date }, dayKey);
-        }) }, weekKey);
-      }) })
+      /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] })
   ] });
 };
+const Calendar = ({
+  calendarBody,
+  closeDatepicker,
+  futureDatesDisabled,
+  selectedDate,
+  setSelectedDate
+}) => {
+  return calendarBody.value.map(({
+    key: weekKey,
+    value: week
+  }) => {
+    return /* @__PURE__ */ jsx("tr", { children: week.map(({
+      date,
+      isCurrentMonth,
+      key: dayKey,
+      value: fullDate
+    }) => {
+      const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+      const today = /* @__PURE__ */ new Date();
+      const isCurrentDate = isSameDate(today, fullDate);
+      const isDisabled = futureDatesDisabled ? fullDate > today : false;
+      const handleClick = () => {
+        if (isDisabled) {
+          return false;
+        }
+        setSelectedDate(fullDate);
+        closeDatepicker();
+      };
+      return /* @__PURE__ */ jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+    }) }, weekKey);
+  });
+};
 const DatePicker = ({
   date,
   disabled = false,
@@ -16126,6 +16148,10 @@ const DatePicker = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState();
+  const calendarOptions = {};
+  if (selectedDate) {
+    calendarOptions.defaultDate = selectedDate;
+  }
   useEffect(() => {
     if (date) {
       setSelectedDate(date);
@@ -16139,8 +16165,8 @@ const DatePicker = ({
     onSelectDate(selectedDate2);
   };
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+    /* @__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 }) }) })
   ] });
 };
 const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/click-ui.umd.js

@@ -1703,6 +1703,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] })
   ] });
+  const AzureBlobStorage = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "62", height: "50", viewBox: "0 0 62 50", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0.777344 13.5801H61.2218V47.2796C61.2218 47.8153 61.009 48.3289 60.6303 48.7077C60.2515 49.0864 59.7378 49.2992 59.2022 49.2992H2.7969C2.26128 49.2992 1.7476 49.0864 1.36886 48.7077C0.990118 48.3289 0.777344 47.8153 0.777344 47.2796V13.5801Z", fill: "url(#paint0_linear_11640_11692)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.80757 0.7012H59.1916C59.4568 0.7012 59.7194 0.753438 59.9644 0.85493C60.2094 0.956422 60.4321 1.10518 60.6196 1.29271C60.8071 1.48025 60.9559 1.70288 61.0574 1.94791C61.1589 2.19293 61.2111 2.45554 61.2111 2.72076V13.5794H0.777344V2.72076C0.77734 2.45464 0.829929 2.19116 0.932087 1.94543C1.03425 1.69971 1.18396 1.4766 1.37262 1.28893C1.56129 1.10126 1.78518 0.95272 2.03144 0.851858C2.2777 0.750995 2.54146 0.699795 2.80757 0.7012Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M28.6036 18.0625H8.28357C7.72784 18.0625 7.27734 18.513 7.27734 19.0687V29.1736C7.27734 29.7293 7.72784 30.1798 8.28357 30.1798H28.6036C29.1593 30.1798 29.6098 29.7293 29.6098 29.1736V19.0687C29.6098 18.513 29.1593 18.0625 28.6036 18.0625Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M53.5215 18.0625H33.2015C32.6458 18.0625 32.1953 18.513 32.1953 19.0687V29.1736C32.1953 29.7293 32.6458 30.1798 33.2015 30.1798H53.5215C54.0773 30.1798 54.5278 29.7293 54.5278 29.1736V19.0687C54.5278 18.513 54.0773 18.0625 53.5215 18.0625Z", fill: "white" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M28.4903 32.5664H8.17028C7.61456 32.5664 7.16406 33.0169 7.16406 33.5726V43.6775C7.16406 44.2332 7.61456 44.6837 8.17028 44.6837H28.4903C29.046 44.6837 29.4965 44.2332 29.4965 43.6775V33.5726C29.4965 33.0169 29.046 32.5664 28.4903 32.5664Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M53.4083 32.5664H33.0883C32.5325 32.5664 32.082 33.0169 32.082 33.5726V43.6775C32.082 44.2332 32.5325 44.6837 33.0883 44.6837H53.4083C53.964 44.6837 54.4145 44.2332 54.4145 43.6775V33.5726C54.4145 33.0169 53.964 32.5664 53.4083 32.5664Z", fill: "#0078D4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_11640_11692", x1: "30.9996", y1: "49.2992", x2: "30.9996", y2: "13.5801", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "#32BEDD" }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0.775", stopColor: "#32D4F5" })
+    ] }) })
+  ] });
   const AzureEventHub = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_7362_17014)", children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.33051 4.0693H57.6037C58.0583 4.0693 58.6529 3.99941 59.0376 4.24404C59.3524 4.45373 59.3174 4.76825 59.3174 5.08278V16.1961C59.3174 16.5107 59.2825 16.8252 59.0376 17.0349C58.7578 17.3145 58.4431 17.3145 58.0583 17.3145H53.1269C52.7072 17.3145 52.2875 17.2795 52.0077 16.965C51.7629 16.6854 51.7629 16.301 51.7629 15.9515V11.5831H11.8915V16.0564C11.8915 16.4058 11.8565 16.7553 11.6117 17.0349C11.3319 17.3145 10.9822 17.3145 10.6324 17.3145H5.45613C5.10639 17.3145 4.75664 17.3145 4.47684 17.0349C4.19704 16.7553 4.19704 16.4408 4.16206 16.0564V5.99142C4.16206 5.607 4.12709 5.18763 4.19704 4.8032C4.26699 4.45373 4.58176 4.17414 4.93151 4.10425C5.42116 4.03435 5.87583 4.0693 6.33051 4.0693Z", fill: "#006FD4" }),
@@ -2200,6 +2212,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "aws-redshift": AWSRedshift,
     "aws-s3": AWS_S3,
     azure: Azure,
+    "azure-blob-storage": AzureBlobStorage,
     "azure-event-hub": AzureEventHub,
     bigquery: BigQueryLight,
     "c#": ChashLight,
@@ -2386,6 +2399,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "aws-redshift": AWSRedshift,
     "aws-s3": AWS_S3,
     azure: Azure,
+    "azure-blob-storage": AzureBlobStorage,
     "azure-event-hub": AzureEventHub,
     bigquery: BigQueryLight,
     "c#": ChashLight,
@@ -15973,62 +15987,75 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   `);
   const locale = "en-US";
-  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
-    weekday: "short"
-  });
-  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-    month: "short",
-    year: "numeric"
-  });
   const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
     day: "2-digit",
     month: "short",
     year: "numeric"
   });
   const explicitWidth = "250px";
-  const HighlightedInputWrapper = styled.styled(InputWrapper).withConfig({
-    componentId: "sc-1kfphgn-0"
+  const HighlightedInputWrapper = styled(InputWrapper).withConfig({
+    componentId: "sc-1m6g9rm-0"
   })(["", " width:", ";}"], ({
     $isActive,
     theme: theme2
   }) => {
     return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
   }, explicitWidth);
-  const DatePickerContainer = styled.styled(Container).withConfig({
-    componentId: "sc-1kfphgn-1"
+  const DatePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedDate
+  }) => {
+    const defaultId = React.useId();
+    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "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 DatePickerContainer = styled(Container).withConfig({
+    componentId: "sc-1m6g9rm-1"
   })(["background:", ";"], ({
     theme: theme2
   }) => theme2.click.datePicker.dateOption.color.background.default);
-  const UnselectableTitle = styled.styled.h2.withConfig({
-    componentId: "sc-1kfphgn-2"
+  const UnselectableTitle = styled.h2.withConfig({
+    componentId: "sc-1m6g9rm-2"
   })(["", " user-select:none;"], ({
     theme: theme2
   }) => `
     color: ${theme2.click.datePicker.color.title.default};
     font: ${theme2.click.datePicker.typography.title.default};
   `);
-  const DateTable = styled.styled.table.withConfig({
-    componentId: "sc-1kfphgn-3"
-  })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+  const DateTable = styled.table.withConfig({
+    componentId: "sc-1m6g9rm-3"
+  })(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
     theme: theme2
   }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
     theme: theme2
-  }) => theme2.click.datePicker.dateOption.size.height, ({
-    theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
-  const DateTableHeader = styled.styled.th.withConfig({
-    componentId: "sc-1kfphgn-4"
+  }) => theme2.click.datePicker.dateOption.size.height);
+  const DateTableHeader = styled.th.withConfig({
+    componentId: "sc-1m6g9rm-4"
   })(["", " width:14%;"], ({
     theme: theme2
   }) => `
     color: ${theme2.click.datePicker.color.daytitle.default};
     font: ${theme2.click.datePicker.typography.daytitle.default};
   `);
-  const DateTableCell = styled.styled.td.withConfig({
-    componentId: "sc-1kfphgn-5"
+  const DateTableCell = styled.td.withConfig({
+    componentId: "sc-1m6g9rm-5"
   })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
     theme: theme2
   }) => `
+    border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default};
     border-radius: ${theme2.click.datePicker.dateOption.radii.default};
     font: ${theme2.click.datePicker.dateOption.typography.label.default};
   `, ({
@@ -16050,50 +16077,35 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
     $isDisabled,
     theme: theme2
-  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
-  const DatePickerInput = ({
-    isActive,
-    disabled,
-    id,
-    placeholder,
-    selectedDate
-  }) => {
-    const defaultId = React.useId();
-    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-    ] });
-  };
-  const Calendar = ({
-    closeDatepicker,
-    futureDatesDisabled,
-    selectedDate,
-    setSelectedDate
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover};
+
+
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};`);
+  const CalendarRenderer = ({
+    calendarOptions = {},
+    children,
+    ...props
   }) => {
-    const calendarOptions = {
-      defaultWeekStart: 1
-    };
-    if (selectedDate) {
-      calendarOptions.defaultDate = selectedDate;
-    }
     const {
       body,
       headers,
       month,
       navigation,
       year
-    } = useCalendar(calendarOptions);
-    const handleNextClick = () => {
+    } = useCalendar({
+      defaultWeekStart: 1,
+      ...calendarOptions
+    });
+    const handleNextClick = React.useCallback(() => {
       navigation.toNext();
-    };
-    const handlePreviousClick = () => {
+    }, [navigation]);
+    const handlePreviousClick = React.useCallback(() => {
       navigation.toPrev();
-    };
+    }, [navigation]);
     const headerDate = /* @__PURE__ */ new Date();
     headerDate.setMonth(month);
     headerDate.setFullYear(year);
-    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+    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(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
@@ -16106,32 +16118,42 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: body.value.map(({
-          key: weekKey,
-          value: week
-        }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
-            date,
-            isCurrentMonth,
-            key: dayKey,
-            value: fullDate
-          }) => {
-            const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
-            const today = /* @__PURE__ */ new Date();
-            const isCurrentDate = isSameDate(today, fullDate);
-            const isDisabled = futureDatesDisabled ? fullDate > today : false;
-            return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
-              if (isDisabled) {
-                return false;
-              }
-              setSelectedDate(fullDate);
-              closeDatepicker();
-            }, children: date }, dayKey);
-          }) }, weekKey);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
       ] })
     ] });
   };
+  const Calendar = ({
+    calendarBody,
+    closeDatepicker,
+    futureDatesDisabled,
+    selectedDate,
+    setSelectedDate
+  }) => {
+    return calendarBody.value.map(({
+      key: weekKey,
+      value: week
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+        date,
+        isCurrentMonth,
+        key: dayKey,
+        value: fullDate
+      }) => {
+        const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+        const today = /* @__PURE__ */ new Date();
+        const isCurrentDate = isSameDate(today, fullDate);
+        const isDisabled = futureDatesDisabled ? fullDate > today : false;
+        const handleClick = () => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          closeDatepicker();
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: handleClick, children: date }, dayKey);
+      }) }, weekKey);
+    });
+  };
   const DatePicker = ({
     date,
     disabled = false,
@@ -16141,6 +16163,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState();
+    const calendarOptions = {};
+    if (selectedDate) {
+      calendarOptions.defaultDate = selectedDate;
+    }
     React.useEffect(() => {
       if (date) {
         setSelectedDate(date);
@@ -16154,8 +16180,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onSelectDate(selectedDate2);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+      /* @__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 }) }) })
     ] });
   };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";

package/dist/components/DatePicker/Common.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { useCalendar, UseCalendarOptions } from '@h6s/calendar';
+
+interface DatePickerInputProps {
+    isActive: boolean;
+    disabled: boolean;
+    id?: string;
+    placeholder?: string;
+    selectedDate?: Date;
+}
+export declare const DatePickerInput: ({ isActive, disabled, id, placeholder, selectedDate, }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+interface DateRangePickerInputProps {
+    isActive: boolean;
+    disabled: boolean;
+    id?: string;
+    placeholder?: string;
+    selectedEndDate?: Date;
+    selectedStartDate?: Date;
+}
+export declare const DateRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, }: DateRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTableCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $isCurrentMonth?: boolean;
+    $isDisabled?: boolean;
+    $isSelected?: boolean;
+    $isToday?: boolean;
+}>> & string;
+export type Body = ReturnType<typeof useCalendar>["body"];
+interface CalendarRendererProps {
+    calendarOptions?: UseCalendarOptions;
+    children: (body: Body) => ReactNode;
+}
+export declare const CalendarRenderer: ({ calendarOptions, children, ...props }: CalendarRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+export interface DatePickerProps {
+    endDate?: Date;
+    disabled?: boolean;
+    futureDatesDisabled?: boolean;
+    onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
+    placeholder?: string;
+    startDate?: Date;
+}
+export declare const DateRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, onSelectDateRange, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logos/AzureBlobStorage.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const AzureBlobStorage: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AzureBlobStorage;

package/dist/components/Logos/types.d.ts

@@ -1 +1 @@
-export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "digital_ocean" | "feature_database" | "feature_hexagon" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";
+export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "digital_ocean" | "feature_database" | "feature_hexagon" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-blob-storage" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.202",
+  "version": "0.0.204",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",