master-components-react-ts 2.1.2 → 2.1.3

package/dist/components/DatePicker/Calendar.js

@@ -0,0 +1,437 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useState, useRef, useEffect } from "react";
+import dayjs from "dayjs";
+import style from "./Calendar.module.scss.js";
+import { IconLeft } from "../../assets/Icons/IconLeft.js";
+import { IconRight } from "../../assets/Icons/IconRight.js";
+import { _filterUnique } from "../../utils/Helpers.js";
+import customParseFormat from "../../node_modules/dayjs/plugin/customParseFormat.js";
+import MainButton from "../MainButton/MainButton.js";
+dayjs.extend(customParseFormat);
+const Calendar = ({
+  valueFormat,
+  quickPick,
+  onChange,
+  CurrentMonth,
+  setCurrentMonth,
+  SelectedDate,
+  namespace,
+  customYears,
+  setSelectedDate,
+  IsFocused,
+  setIsFocused,
+  mode,
+  RangeSelection,
+  setRangeSelection,
+  pickerType,
+  disabledDatesRange,
+  disabledDatesTill,
+  disabledDatesFrom,
+  CalendarRef,
+  defaultValue,
+  selectedStyle,
+  endDateStyle,
+  startDateStyle,
+  inRangeStyle,
+  otherMonthStyle,
+  todayStyle,
+  weekDayStyle,
+  quickPickStyle,
+  monthStyle
+}) => {
+  const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  dayjs().year();
+  const [PickedMonth, setPickedMonth] = useState("");
+  const QuickPicker = useRef([]);
+  const [ShowMonths, setShowMonths] = useState(false);
+  const getMonthMatrix = (month) => {
+    if (customYears?.length && !customYears.includes(month.year().toString())) {
+      return [];
+    }
+    const startDay = (month.startOf("month").day() + 6) % 7;
+    const endDay = month.endOf("month").date();
+    const prevMonthEnd = month.subtract(1, "month").endOf("month").date();
+    const matrix = [];
+    let week = [];
+    let day = 1;
+    for (let i = 0; i < startDay; i++) {
+      week.push({
+        date: month.subtract(1, "month").date(prevMonthEnd - startDay + i + 1),
+        currentMonth: false
+      });
+    }
+    while (day <= endDay) {
+      week.push({ date: month.date(day++), currentMonth: true });
+      if (week.length === 7) {
+        matrix.push(week);
+        week = [];
+      }
+    }
+    let nextMonthDay = 1;
+    while (matrix.length < 5) {
+      if (week.length === 7) {
+        matrix.push(week);
+        week = [];
+      }
+      week.push({
+        date: month.add(1, "month").date(nextMonthDay++),
+        currentMonth: false
+      });
+    }
+    if (week.length) {
+      while (week.length < 7) {
+        week.push({
+          date: month.add(1, "month").date(nextMonthDay++),
+          currentMonth: false
+        });
+      }
+      matrix.push(week);
+    }
+    return matrix;
+  };
+  const currentMonthMatrix = getMonthMatrix(CurrentMonth);
+  const nextMonthMatrix = pickerType === "dual" ? getMonthMatrix(CurrentMonth.add(1, "month")) : null;
+  const getQuickPickers = () => {
+    let array = [];
+    if (quickPick && Array.isArray(quickPick) && quickPick.length > 0) {
+      quickPick.forEach((item) => {
+        switch (item) {
+          case "today":
+            QuickPicker.current.push({ name: "Today", key: "Today" });
+            break;
+          case "yesterday":
+            QuickPicker.current.push({ name: "Yesterday", key: "Yesterday" });
+            break;
+          case "thisweek":
+            QuickPicker.current.push({ name: "This week", key: "Thisweek" });
+            break;
+          case "lastweek":
+            QuickPicker.current.push({ name: "Last week", key: "Lastweek" });
+            break;
+          case "thismonth":
+            QuickPicker.current.push({ name: "This month", key: "Thismonth" });
+            break;
+          case "lastmonth":
+            QuickPicker.current.push({ name: "Last month", key: "Lastmonth" });
+            break;
+          case "thisyear":
+            QuickPicker.current.push({ name: "This year", key: "Thisyear" });
+            break;
+          case "lastyear":
+            QuickPicker.current.push({ name: "Last year", key: "Lastyear" });
+            break;
+          case "alltime":
+            QuickPicker.current.push({ name: "All time", key: "Alltime" });
+            break;
+        }
+      });
+    }
+    QuickPicker.current = _filterUnique(QuickPicker.current, "key");
+    array = QuickPicker.current;
+    return array;
+  };
+  const handleQuickPick = (item) => {
+    let obj = { start: "", end: "" };
+    setSelectedDate(null);
+    switch (item.key?.toLowerCase()) {
+      case "today":
+        setRangeSelection({
+          start: dayjs(),
+          end: dayjs()
+        });
+        obj.start = dayjs();
+        break;
+      case "yesterday":
+        setSelectedDate(dayjs().subtract(1, "day"));
+        setRangeSelection({
+          start: dayjs().subtract(1, "day"),
+          end: dayjs().subtract(1, "day")
+        });
+        obj.start = dayjs().subtract(1, "day");
+        break;
+      case "thisweek":
+        setRangeSelection({
+          start: dayjs().startOf("week"),
+          end: dayjs().endOf("week")
+        });
+        obj.start = dayjs().startOf("week");
+        obj.end = dayjs().endOf("week");
+        break;
+      case "lastweek":
+        setRangeSelection({
+          start: dayjs().subtract(1, "week").startOf("week"),
+          end: dayjs().subtract(1, "week").endOf("week")
+        });
+        obj.start = dayjs().subtract(1, "week").startOf("week");
+        obj.end = dayjs().subtract(1, "week").endOf("week");
+        break;
+      case "thismonth":
+        setRangeSelection({
+          start: dayjs().startOf("month"),
+          end: dayjs().endOf("month")
+        });
+        obj.start = dayjs().startOf("month");
+        obj.end = dayjs().endOf("month");
+        break;
+      case "lastmonth":
+        setRangeSelection({
+          start: dayjs().subtract(1, "month").startOf("month"),
+          end: dayjs().subtract(1, "month").endOf("month")
+        });
+        obj.start = dayjs().subtract(1, "month").startOf("month");
+        obj.end = dayjs().subtract(1, "month").endOf("month");
+        break;
+      case "thisyear":
+        setRangeSelection({
+          start: dayjs().startOf("year"),
+          end: dayjs().endOf("year")
+        });
+        obj.start = dayjs().startOf("year");
+        obj.end = dayjs().endOf("year");
+        break;
+      case "lastyear":
+        setRangeSelection({
+          start: dayjs().subtract(1, "year").startOf("year"),
+          end: dayjs().subtract(1, "year").endOf("year")
+        });
+        obj.start = dayjs().subtract(1, "year").startOf("year");
+        obj.end = dayjs().subtract(1, "year").endOf("year");
+        break;
+      case "alltime":
+        setRangeSelection({
+          start: "",
+          end: ""
+        });
+        obj.start = "";
+        obj.end = "";
+        break;
+      default:
+        console.warn("Unsupported quick pick option:", item);
+        break;
+    }
+    if (onChange && typeof onChange === "function") {
+      const range = {
+        start: obj.start ? obj.start : "",
+        end: obj.end ? obj.end : ""
+      };
+      setIsFocused(false);
+      onChange(range.end === "" ? range.start : range);
+    }
+  };
+  const HandleChooseMonth = () => {
+    return;
+  };
+  const handleDayClick = (day, isCurrentMonth, withDefault = false) => {
+    if (!isCurrentMonth) {
+      setCurrentMonth(day.startOf("month"));
+    }
+    if (mode === "range") {
+      setRangeSelection((prev) => {
+        if (!prev.start || prev.start && prev.end) {
+          if (onChange && typeof onChange === "function") {
+            onChange({
+              start: day ?? "",
+              end: ""
+            });
+          }
+          return { start: day ?? "", end: "" };
+        } else if (prev.start && !prev.end) {
+          if (day.isBefore(prev.start, "day")) {
+            if (onChange && typeof onChange === "function") {
+              onChange({
+                start: day ?? "",
+                end: prev?.start ?? ""
+              });
+            }
+            return { start: day ?? "", end: prev?.start ?? "" };
+          } else {
+            onChange({
+              ...prev,
+              end: day ?? ""
+            });
+            return { ...prev, end: day ?? "" };
+          }
+        }
+        return prev;
+      });
+    } else {
+      setRangeSelection({ start: null, end: null });
+      setSelectedDate(day);
+      if (!withDefault) {
+        setIsFocused(false);
+        if (onChange && typeof onChange === "function") {
+          onChange(day.format(valueFormat));
+        }
+      }
+    }
+  };
+  const goToNextMonth = () => {
+    setCurrentMonth(CurrentMonth.add(1, "month"));
+  };
+  const goToPreviousMonth = () => {
+    setCurrentMonth(CurrentMonth.subtract(1, "month"));
+  };
+  const goToNextYear = () => {
+    setCurrentMonth(CurrentMonth.add(1, "year"));
+  };
+  const goToPreviousYear = () => {
+    setCurrentMonth(CurrentMonth.subtract(1, "year"));
+  };
+  useEffect(() => {
+    if (defaultValue?.state) {
+      if (Array.isArray(defaultValue?.value)) {
+        setRangeSelection({ start: dayjs(defaultValue?.value[0], valueFormat), end: dayjs(defaultValue?.value[1], valueFormat) });
+      } else {
+        handleDayClick(dayjs(defaultValue.value), false, true);
+      }
+      defaultValue.state = false;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: CalendarRef,
+      className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datePicker} ${IsFocused ? style.focused : ""} ${pickerType === "dual" ? quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? style.dualCalendarWithQuick : style.dualCalendar : ""} `,
+      onClick: (e) => e.stopPropagation(),
+      style: pickerType === "dual" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 ? { width: "848px" } : {},
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.div, children: [
+        pickerType === "dual" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", display: "flex", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "80px" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.left, children: [
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {}),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {})
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } }),
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "50%", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "80px" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: monthStyle ?? {}, children: customYears && customYears.length === 1 ? CurrentMonth.add(1, "month").format("MMMM") : CurrentMonth.add(1, "month").format("MMMM YYYY") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.right, children: [
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } }),
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {}),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {})
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.datePickerHeader, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.left, children: [
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() > Math.min(...customYears.map(Number))) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.doubleIcon, onClick: goToPreviousYear, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {}),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {})
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } }),
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `January ${Math.min(...customYears.map(Number))}` ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.singleIcon, onClick: goToPreviousMonth, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.currentDateHeader, style: monthStyle ?? {}, onClick: HandleChooseMonth, children: customYears && customYears.length === 1 ? CurrentMonth.format("MMMM") : CurrentMonth.format("MMMM YYYY") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.right, children: [
+              !customYears || customYears && CurrentMonth.format("MMMM YYYY") !== `December ${Math.max(...customYears.map(Number))}` ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.singleIcon, onClick: goToNextMonth, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "20px", height: "20px" } }),
+              (!customYears || customYears.length > 1) && (!customYears || CurrentMonth.year() < Math.max(...customYears.map(Number))) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.doubleIcon, onClick: goToNextYear, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {}),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {})
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.doubleIcon })
+            ] })
+          ] }),
+          pickerType === "single" && quickPick && Array.isArray(quickPick) && quickPick.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: style.quickPick, children: getQuickPickers().slice(0, 3).map((item) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { style: quickPickStyle ?? {}, onClick: () => handleQuickPick(item), children: item.name }, item.key);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.calendarWrapper, children: [
+          ShowMonths ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: style.monthsWrapper, children: months.map((month) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${style.month} ${PickedMonth === month ? style.pickedMonth : ""}`, onClick: () => setPickedMonth(month), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.monthName, children: month }) })) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("tbody", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { className: style.spacerRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}) }),
+              currentMonthMatrix.map((week, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
+                const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
+                const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
+                const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
+                const selected = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
+                const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
+                const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
+                let isInDisabledRange = false;
+                if (disabledDatesRange?.length === 2) {
+                  const [start, end] = disabledDatesRange.map((d) => dayjs(d));
+                  isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
+                }
+                const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "td",
+                  {
+                    style: {
+                      ...currentMonth ? {} : otherMonthStyle,
+                      ...date.isSame(dayjs(), "day") ? todayStyle : {},
+                      ...isInRange ? inRangeStyle : {},
+                      ...isStartDate ? startDateStyle : {},
+                      ...isEndDate ? endDateStyle : {},
+                      ...selected ? selectedStyle : {}
+                    },
+                    className: `${style.day} 
+                              ${currentMonth ? "" : style.otherMonth} 
+                              ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style.today : ""} 
+                              ${!currentMonth ? "" : isInRange ? style.inRange : ""} 
+                              ${!currentMonth ? "" : isStartDate ? style.startDate : ""} 
+                              ${!currentMonth ? "" : isEndDate ? style.endDate : ""}
+                              ${!currentMonth && !isInRange && !isEndDate ? "" : selected ? style.selected : ""}
+                              ${isDisabled ? style.disabled : ""}`,
+                    onClick: () => handleDayClick(date, currentMonth),
+                    children: date.date()
+                  },
+                  idx
+                );
+              }) }, index))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.buttonWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MainButton, { label: "Current date", onClick: () => handleDayClick(dayjs(), true) }) }),
+          pickerType === "dual" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.border }),
+          pickerType === "dual" && /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: daysOfWeek.map((day) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", { style: weekDayStyle ?? {}, children: day }, day)) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: nextMonthMatrix?.map((week, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: week.map(({ date, currentMonth }, idx) => {
+              const isInRange = RangeSelection.start && RangeSelection.end && date.isAfter(RangeSelection.start, "day") && date.isBefore(RangeSelection.end, "day");
+              const isStartDate = RangeSelection.start && date.isSame(RangeSelection.start, "day");
+              const isEndDate = RangeSelection.end && date.isSame(RangeSelection.end, "day");
+              const selected = mode === "single" && SelectedDate && date.isSame(SelectedDate, "day");
+              const isDisabledTill = disabledDatesTill && date.isBefore(dayjs(disabledDatesTill), "day");
+              const isDisabledFrom = disabledDatesFrom && date.isAfter(dayjs(disabledDatesFrom), "day");
+              let isInDisabledRange = false;
+              if (disabledDatesRange?.length === 2) {
+                const [start, end] = disabledDatesRange.map((d) => dayjs(d));
+                isInDisabledRange = date.isAfter(start.subtract(1, "day")) && date.isBefore(end.add(1, "day"));
+              }
+              const isDisabled = isDisabledFrom || isDisabledTill || isInDisabledRange;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "td",
+                {
+                  style: {
+                    ...currentMonth ? {} : otherMonthStyle,
+                    ...date.isSame(dayjs(), "day") ? todayStyle : {},
+                    ...isInRange ? inRangeStyle : {},
+                    ...isStartDate ? startDateStyle : {},
+                    ...isEndDate ? endDateStyle : {},
+                    ...selected ? selectedStyle : {}
+                  },
+                  className: `${style.day} 
+                              ${currentMonth ? "" : style.otherMonth} 
+                              ${!currentMonth ? "" : date.isSame(dayjs(), "day") ? style.today : ""} 
+                              ${!currentMonth ? "" : isInRange ? style.inRange : ""} 
+                              ${!currentMonth ? "" : isStartDate ? style.startDate : ""} 
+                              ${!currentMonth ? "" : isEndDate ? style.endDate : ""}
+                              ${!currentMonth && !isInRange && !isEndDate ? "" : selected ? style.selected : ""}
+                              ${isDisabled ? style.disabled : ""}`,
+                  onClick: () => handleDayClick(date, currentMonth),
+                  children: date.date()
+                },
+                idx
+              );
+            }) }, index)) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Calendar as default
+};

package/dist/components/DatePicker/Calendar.module.scss.js

@@ -0,0 +1,83 @@
+const datePicker = "Calendar-module__datePicker";
+const dualCalendar = "Calendar-module__dualCalendar";
+const dualCalendarWithQuick = "Calendar-module__dualCalendarWithQuick";
+const border = "Calendar-module__border";
+const calendarWrapper = "Calendar-module__calendarWrapper";
+const quickPick = "Calendar-module__quickPick";
+const datePickerHeader = "Calendar-module__datePickerHeader";
+const div = "Calendar-module__div";
+const currentDateHeader = "Calendar-module__currentDateHeader";
+const left = "Calendar-module__left";
+const right = "Calendar-module__right";
+const singleIcon = "Calendar-module__singleIcon";
+const doubleIcon = "Calendar-module__doubleIcon";
+const spacerRow = "Calendar-module__spacerRow";
+const day = "Calendar-module__day";
+const today = "Calendar-module__today";
+const inRange = "Calendar-module__inRange";
+const selected = "Calendar-module__selected";
+const startDate = "Calendar-module__startDate";
+const endDate = "Calendar-module__endDate";
+const disabled = "Calendar-module__disabled";
+const otherMonth = "Calendar-module__otherMonth";
+const monthsWrapper = "Calendar-module__monthsWrapper";
+const month = "Calendar-module__month";
+const pickedMonth = "Calendar-module__pickedMonth";
+const buttonWrapper = "Calendar-module__buttonWrapper";
+const style = {
+  datePicker,
+  dualCalendar,
+  dualCalendarWithQuick,
+  border,
+  calendarWrapper,
+  quickPick,
+  datePickerHeader,
+  div,
+  currentDateHeader,
+  left,
+  right,
+  singleIcon,
+  doubleIcon,
+  spacerRow,
+  day,
+  today,
+  inRange,
+  selected,
+  startDate,
+  endDate,
+  disabled,
+  otherMonth,
+  monthsWrapper,
+  month,
+  pickedMonth,
+  buttonWrapper
+};
+export {
+  border,
+  buttonWrapper,
+  calendarWrapper,
+  currentDateHeader,
+  datePicker,
+  datePickerHeader,
+  day,
+  style as default,
+  disabled,
+  div,
+  doubleIcon,
+  dualCalendar,
+  dualCalendarWithQuick,
+  endDate,
+  inRange,
+  left,
+  month,
+  monthsWrapper,
+  otherMonth,
+  pickedMonth,
+  quickPick,
+  right,
+  selected,
+  singleIcon,
+  spacerRow,
+  startDate,
+  today
+};