@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.8.1

package/dist/Button/Button.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { Loader2Icon } from "lucide-react";
-import { getControlSizeTokens } from "../core";
 const colors = {
     gray: "#888888",
     lightGray: "#f0f0f0",
@@ -36,14 +35,63 @@ const StyledButton = styled.button `
   white-space: nowrap;
 
   width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ theme, size }) => {
+    switch (size) {
+        case "xxs":
+            return `24px`;
+        case "xs":
+            return `28px`;
+        case "sm":
+            return `34px`;
+        case "md":
+            return `40px`;
+        case "lg":
+            return `48px`;
+        case "xl":
+            return `58px`;
+        default:
+            return `34px`;
+    }
+}};
 
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ theme, size }) => {
+    switch (size) {
+        case "xxs":
+            return `11px`;
+        case "xs":
+            return `12px`;
+        case "sm":
+            return `14px`;
+        case "md":
+            return `16px`;
+        case "lg":
+            return `18px`;
+        case "xl":
+            return `20px`;
+        default:
+            return `14px`;
+    }
+}};
 
   padding: ${({ theme, size, variant }) => {
     if (variant === "text")
         return `0px 0px`;
-    return `0px ${getControlSizeTokens(size).buttonPaddingX}px`;
+    switch (size) {
+        case "xxs":
+            return `0px 8px`;
+        case "xs":
+            return `0px 12px`;
+        case "sm":
+            return `0px 16px`;
+        case "md":
+            return `0px 20px`;
+        case "lg":
+            return `0px 24px`;
+        case "xl":
+            return `0px 30px`;
+        default:
+            return `0px 16px`;
+    }
 }};
 
   color: ${({ theme, variant, color }) => {
@@ -127,7 +175,6 @@ const StyledButton = styled.button `
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   .button-label {
@@ -136,15 +183,17 @@ const StyledButton = styled.button `
   }
 
   [data-position="left"] {
+    margin-inline-end: 6px;
     display: flex;
     align-items: center;
   }
 
   [data-position="right"] {
+    margin-inline-start: 6px;
+    padding-inline-start: 6px;
     margin-left: auto;
     display: flex;
     align-items: center;
-    padding-inline-start: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
   }
 
   &:hover {
@@ -215,8 +264,8 @@ const StyledAnchor = styled.a `
 `;
 const StyledLoader = styled.span `
   svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
+    width: 16px;
+    height: 16px;
     color: ${({ theme, color }) => {
     var _a;
     return color
@@ -236,6 +285,6 @@ const StyledLoader = styled.span `
 `;
 export const Button = forwardRef((props, ref) => {
     const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null, justify = "center" } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download", "justify"]);
-    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { size: other.size, children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
+    const buttonContent = (_jsx("div", { className: "inner-span", style: { height: "100%", width: "100%", justifyContent: justify }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("div", { "data-position": "left", children: leftSection }), _jsx("div", { className: "button-label", children: children }), rightSection && _jsx("div", { "data-position": "right", children: rightSection })] })) }));
     return (_jsx(StyledButton, Object.assign({ ref: ref }, other, { children: href ? (_jsx(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
 });

package/dist/Calendar/Calendar.d.ts

@@ -1,20 +1,15 @@
 interface CalendarProps {
     defaultValue?: Date;
     value?: Date | null;
-    onChange?: (date: Date | null, meta?: {
-        source: "date" | "month" | "year" | "time" | "clear";
-    }) => void;
+    onChange?: (date: Date | null) => void;
     hourFormat?: "12" | "24";
     includeTime?: boolean;
     clearable?: boolean;
     min?: Date;
     max?: Date;
-    timeIntervalMinutes?: number;
-    minuteStep?: number;
-    timeZoneLabel?: string;
 }
 declare const Calendar: {
-    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, timeIntervalMinutes, minuteStep, timeZoneLabel, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultValue, value, onChange, hourFormat, includeTime, clearable, min, max, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Calendar;

package/dist/Calendar/Calendar.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { CalendarContainer, CalendarHeader, CalendarHeaderControls, CalendarHeaderSelect, CalendarNavButton, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHeader, TimeHeaderValue, TimeItem, TimeItemActive, TimeSelectList, TimeZoneBadge, NoValueButton, } from "./CalendarStyles";
-import { DropDownMenu } from "../DropDownMenu";
-import calendar, { createLocalDate, isDate, isSameDay, isSameMonth, getDateISO, getMonthDays, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, } from "./calendarHelpers";
+import { CalendarContainer, CalendarHeader, CalendarGrid, CalendarMonth, CalendarDay, CalendarDate, HighlightedCalendarDate, TodayCalendarDate, TimeContainer, MainContainer, TimePickerContainer, TimeHourSelect, TimeHeader, TimeMinuteSelect, TimeItem, TimeItemActive, NoValueButton, } from "./CalendarStyles";
+import calendar, { isDate, isSameDay, isSameMonth, getDateISO, getNextMonth, getPreviousMonth, WEEK_DAYS, CALENDAR_MONTHS, HOURS24, HOURS12, MINUTES, } from "./calendarHelpers";
 import moment from "moment";
 const checkValidRange = (value, min, max) => {
     if (min && moment(value).startOf("day").isBefore(moment(min).startOf("day")))
@@ -21,14 +20,8 @@ const resolveValue = (value) => {
         minutes: safeValue.getMinutes(),
     };
 };
-const MONTH_OPTIONS = Object.keys(CALENDAR_MONTHS).map((monthName, index) => ({
-    label: monthName,
-    value: index + 1,
-}));
-const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, timeIntervalMinutes, minuteStep = 1, timeZoneLabel = "Local", }) => {
+const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
     const isControlled = useRef(value !== undefined);
-    const activeTimeRef = useRef(null);
-    const hasScrolledInitialTimeIntoView = useRef(false);
     const [valueState, setValueState] = useState(defaultValue);
     const _value = isControlled.current
         ? value
@@ -40,74 +33,16 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     let pressureTimer;
     let pressureTimeout;
     let dayTimeout;
-    const normalizedTimeInterval = Math.max(1, Math.min(1440, timeIntervalMinutes || minuteStep || 1));
-    const selectedMinutesOfDay = calendarState.hours * 60 + calendarState.minutes;
-    const timeOptions = useMemo(() => {
-        const steppedTimes = Array.from({ length: Math.ceil(1440 / normalizedTimeInterval) }, (_, index) => index * normalizedTimeInterval).filter((minutesOfDay) => minutesOfDay < 1440);
-        if (!steppedTimes.includes(selectedMinutesOfDay)) {
-            steppedTimes.push(selectedMinutesOfDay);
-        }
-        return steppedTimes
-            .sort((a, b) => a - b)
-            .map((minutesOfDay) => {
-            const hours = Math.floor(minutesOfDay / 60);
-            const minutes = minutesOfDay % 60;
-            return {
-                value: minutesOfDay,
-                hours,
-                minutes,
-                label: `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`,
-            };
-        });
-    }, [normalizedTimeInterval, selectedMinutesOfDay]);
-    useEffect(() => {
-        var _a;
-        if (!includeTime || hasScrolledInitialTimeIntoView.current)
-            return;
-        (_a = activeTimeRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            block: "center",
-            inline: "nearest",
-        });
-        hasScrolledInitialTimeIntoView.current = true;
-    }, [includeTime]);
-    const syncCalendarState = (date) => {
-        setCalendarState({
-            month: +date.getMonth() + 1,
-            year: date.getFullYear(),
-            hours: date.getHours(),
-            minutes: date.getMinutes(),
-        });
-    };
-    const commitDate = (date, source = "date") => {
-        if (date && isDate(date)) {
-            if (!isControlled.current) {
-                setValueState(date);
-            }
-            syncCalendarState(date);
-            onChange(date, { source });
-            return;
-        }
-        if (!isControlled.current) {
-            setValueState(null);
-        }
-        onChange(null, { source: "clear" });
-    };
-    const getWorkingDate = () => {
-        if (_value && isDate(_value)) {
-            return _value;
-        }
-        const fallbackDay = Math.min(today.getDate(), getMonthDays(calendarState.month, calendarState.year));
-        const fallbackDate = createLocalDate(calendarState.year, calendarState.month, fallbackDay);
-        fallbackDate.setHours(calendarState.hours, calendarState.minutes, 0, 0);
-        return fallbackDate;
-    };
     const addDateToState = (date) => {
         const isDateObject = isDate(date);
         const _date = isDateObject ? date : new Date();
-        if (!isControlled.current) {
-            setValueState(_date);
-        }
-        syncCalendarState(_date);
+        setValueState(_date);
+        setCalendarState({
+            month: +_date.getMonth() + 1,
+            year: _date.getFullYear(),
+            hours: _date.getHours(),
+            minutes: _date.getMinutes(),
+        });
     };
     const getCalendarDates = () => {
         const { month, year } = calendarState;
@@ -115,179 +50,71 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const calendarYear = year || (_value === null || _value === void 0 ? void 0 : _value.getFullYear()) || new Date().getFullYear();
         return calendar(calendarMonth, calendarYear);
     };
-    const setCalendarView = (nextMonth, nextYear) => {
-        setCalendarState((prev) => (Object.assign(Object.assign({}, prev), { month: nextMonth, year: nextYear })));
-    };
-    const commitMonthOrYearSelection = (nextMonth, nextYear, source) => {
-        const workingDate = getWorkingDate();
-        const clampedDay = Math.min(workingDate.getDate(), getMonthDays(nextMonth, nextYear));
-        const nextDate = createLocalDate(nextYear, nextMonth, clampedDay);
-        nextDate.setHours(workingDate.getHours(), workingDate.getMinutes(), 0, 0);
-        commitDate(nextDate, source);
-    };
-    const getYearOptions = () => {
-        var _a, _b;
-        const currentYear = calendarState.year;
-        const minYear = (_a = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _a !== void 0 ? _a : currentYear - 50;
-        const maxYear = (_b = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _b !== void 0 ? _b : currentYear + 50;
-        return Array.from({ length: maxYear - minYear + 1 }, (_, index) => {
-            const optionYear = minYear + index;
-            return {
-                label: `${optionYear}`,
-                value: optionYear,
-            };
-        });
-    };
+    //new start
     const renderMonthAndYear = () => {
         const { month, year } = calendarState;
-        const monthName = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
-        const yearOptions = getYearOptions();
-        const selectedMonthOption = MONTH_OPTIONS.find((option) => option.value === month);
-        const selectedYearOption = yearOptions.find((option) => option.value === year);
-        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, value: selectedMonthOption ? [selectedMonthOption] : [], variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
-                                    style: { maxHeight: 260, width: 125 },
-                                }, buttonProps: {
-                                    title: "Select month",
-                                    size: "xxs",
-                                    style: { minWidth: 95 },
-                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, value: selectedYearOption ? [selectedYearOption] : [], variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
-                                    style: { width: 120, maxHeight: 260 },
-                                }, buttonProps: {
-                                    title: "Select year",
-                                    size: "xxs",
-                                    style: { minWidth: 50 },
-                                }, children: _jsx(CalendarMonth, { children: year }) }) })] }), _jsx(CalendarNavButton, { type: "button", onClick: handleNext, onMouseUp: clearPressureTimer, "aria-label": "Go to next month", title: "Next month. Hold Shift to jump by year.", children: _jsx(ChevronRightIcon, { "aria-hidden": "true" }) })] }));
-    };
-    const handleActionKeyDown = (action) => (evt) => {
-        if (evt.key === "Enter" || evt.key === " ") {
-            evt.preventDefault();
-            action();
-        }
+        // Resolve the month name from the CALENDAR_MONTHS object map
+        const monthname = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
+        return (_jsxs(CalendarHeader, { children: [_jsx(ChevronLeftIcon, { onMouseDown: handlePrevious, onMouseUp: clearPressureTimer }), _jsxs(CalendarMonth, { children: [monthname, " ", year] }), _jsx(ChevronRightIcon, { onMouseDown: handleNext, onMouseUp: clearPressureTimer })] }));
     };
     // Render the label for day of the week
     // This method is used as a map callback as seen in render()
     const renderDayLabel = (day, index) => {
         // Resolve the day of the week label from the WEEK_DAYS object map
         const daylabel = WEEK_DAYS[day];
-        return (_jsx(CalendarDay, { index: index, role: "columnheader", children: daylabel }, daylabel));
+        return (_jsx(CalendarDay, { index: index, children: daylabel }, daylabel));
     };
     // Render a calendar date as returned from the calendar builder function
     // This method is used as a map callback as seen in render()
     const renderCalendarDate = (date, index) => {
-        const [dateYear, dateMonth, dateDay] = date.map(Number);
         const { month, year } = calendarState;
-        const _date = createLocalDate(dateYear, dateMonth, dateDay);
+        const _date = new Date(date.join("-"));
         // Check if calendar date is same day as today
         const isToday = isSameDay(_date, today);
         // Check if calendar date is same day as currently selected date
         const isCurrent = _value && isSameDay(_date, _value);
         // Check if calendar date is in the same month as the state month and year
-        const inMonth = month && year && isSameMonth(_date, createLocalDate(year, month, 1));
-        const isDisabled = !checkValidRange(getDateISO(_date), min || null, max || null);
-        const ariaCurrent = isToday ? "date" : undefined;
-        const handleDisabledAction = (evt) => {
-            evt.preventDefault();
-            evt.stopPropagation();
-        };
+        const inMonth = month && year && isSameMonth(_date, new Date([year, month, 1].join("-")));
         // The click handler
         const props = {
-            "data-disabled": isDisabled,
-            "aria-current": ariaCurrent,
-            "aria-disabled": isDisabled,
-            "aria-label": `${isCurrent ? "Selected" : "Select"} ${_date.toDateString()}`,
-            "aria-pressed": Boolean(isCurrent),
+            "data-disabled": !checkValidRange(getDateISO(_date), min || null, max || null),
             index,
             key: getDateISO(_date),
-            onClick: isDisabled ? handleDisabledAction : gotoDate(_date),
-            onKeyDown: isDisabled
-                ? handleDisabledAction
-                : handleActionKeyDown(() => gotoDate(_date)(undefined)),
-            role: "button",
-            tabIndex: isDisabled ? -1 : 0,
+            onClick: gotoDate(_date),
             title: _date.toDateString(),
             inMonth,
         };
         // Conditionally render a styled date component
         return isCurrent ? (_jsx(HighlightedCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : isToday ? (_jsx(TodayCalendarDate, Object.assign({}, props, { children: _date.getDate() }))) : (_jsx(CalendarDate, Object.assign({}, props, { children: _date.getDate() })));
     };
-    const isTimeOptionDisabled = (hours, minutes) => {
-        const candidate = moment(getWorkingDate())
-            .hours(hours)
-            .minutes(minutes)
-            .seconds(0)
-            .milliseconds(0);
-        if (min && candidate.isBefore(moment(min)))
-            return true;
-        if (max && candidate.isAfter(moment(max)))
-            return true;
-        return false;
-    };
-    const renderTimeOptions = () => {
-        return timeOptions.map((timeOption, index) => {
-            const isActive = timeOption.value === selectedMinutesOfDay;
-            const isDisabled = isTimeOptionDisabled(timeOption.hours, timeOption.minutes);
-            const TimeComponent = isActive ? TimeItemActive : TimeItem;
-            const commitTime = () => {
-                if (isDisabled)
-                    return;
-                const newTime = moment(getWorkingDate())
-                    .hours(timeOption.hours)
-                    .minutes(timeOption.minutes)
-                    .seconds(0)
-                    .milliseconds(0)
-                    .toDate();
-                commitDate(newTime, "time");
-            };
-            return (_jsx(TimeComponent, { ref: isActive ? activeTimeRef : undefined, role: "button", tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled, "aria-disabled": isDisabled, "aria-label": `Select ${timeOption.label}`, "aria-pressed": isActive, onClick: commitTime, onKeyDown: handleTimeKeyDown(index, commitTime), children: timeOption.label }, timeOption.value));
+    const renderHours = () => {
+        const { hours } = calendarState;
+        const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
+        return hoursArray.map((hour, index) => {
+            const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
+            return (_jsx(HourComponent, { 
+                // value={hour.value}
+                onClick: (e) => {
+                    const newTime = moment(_value).hours(hour.value).toDate();
+                    setCalendarState(Object.assign(Object.assign({}, calendarState), { hours: hour.value }));
+                    setValueState(newTime);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
+                }, children: hour.label }, hour.value));
         });
     };
-    const handleTimeKeyDown = (index, selectCurrent) => (evt) => {
-        const findEnabledIndex = (nextIndex, direction) => {
-            let boundedIndex = Math.max(0, Math.min(timeOptions.length - 1, nextIndex));
-            while (boundedIndex >= 0 &&
-                boundedIndex < timeOptions.length &&
-                isTimeOptionDisabled(timeOptions[boundedIndex].hours, timeOptions[boundedIndex].minutes)) {
-                boundedIndex += direction;
-            }
-            if (boundedIndex < 0 || boundedIndex >= timeOptions.length) {
-                return null;
-            }
-            return boundedIndex;
-        };
-        const commitOption = (nextIndex, direction) => {
-            const enabledIndex = findEnabledIndex(nextIndex, direction);
-            if (enabledIndex === null)
-                return;
-            const nextOption = timeOptions[enabledIndex];
-            const newTime = moment(getWorkingDate())
-                .hours(nextOption.hours)
-                .minutes(nextOption.minutes)
-                .seconds(0)
-                .milliseconds(0)
-                .toDate();
-            commitDate(newTime, "time");
-        };
-        if (evt.key === "Enter" || evt.key === " ") {
-            evt.preventDefault();
-            selectCurrent();
-            return;
-        }
-        if (evt.key === "ArrowDown") {
-            evt.preventDefault();
-            commitOption(index + 1, 1);
-        }
-        if (evt.key === "ArrowUp") {
-            evt.preventDefault();
-            commitOption(index - 1, -1);
-        }
-        if (evt.key === "Home") {
-            evt.preventDefault();
-            commitOption(0, 1);
-        }
-        if (evt.key === "End") {
-            evt.preventDefault();
-            commitOption(timeOptions.length - 1, -1);
-        }
+    const renderMinutes = () => {
+        const { minutes } = calendarState;
+        return MINUTES.map((minute) => {
+            const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
+            return (_jsx(MinuteComponent, { 
+                // value={minute}
+                onClick: (e) => {
+                    const newTime = moment(_value).minutes(Number(minute)).toDate();
+                    setCalendarState(Object.assign(Object.assign({}, calendarState), { minutes: Number(minute) }));
+                    setValueState(newTime);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newTime);
+                }, children: minute }, minute));
+        });
     };
     // new 2
     const gotoDate = (date) => (evt) => {
@@ -297,12 +124,8 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
             .hours(includeTime ? calendarState.hours : 0)
             .minutes(includeTime ? calendarState.minutes : 0)
             .toDate();
-        if (!(_value && isSameDay(newTime, _value))) {
-            commitDate(newTime, "date");
-            return;
-        }
-        syncCalendarState(newTime);
-        onChange(newTime, { source: "date" });
+        !(_value && isSameDay(newTime, _value)) && addDateToState(newTime);
+        onChange(newTime);
     };
     const gotoPreviousMonth = () => {
         const { month, year } = calendarState;
@@ -379,7 +202,7 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
     // const clearDayTimeout = () => {
     //   dayTimeout && clearTimeout(dayTimeout);
     // };
-    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { role: "grid", "aria-label": `Calendar view for ${Object.keys(CALENDAR_MONTHS)[calendarState.month - 1]} ${calendarState.year}`, children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { type: "button", onClick: () => commitDate(null, "clear"), "aria-label": "Clear selected date", children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsxs(TimeHeader, { children: [_jsx(TimeHeaderValue, { children: `${String(calendarState.hours).padStart(2, "0")}:${String(calendarState.minutes).padStart(2, "0")}` }), timeZoneLabel && _jsx(TimeZoneBadge, { children: timeZoneLabel })] }), _jsx(TimePickerContainer, { children: _jsx(TimeSelectList, { children: renderTimeOptions() }) })] }))] }));
+    return (_jsxs(MainContainer, { children: [_jsxs(CalendarContainer, { children: [renderMonthAndYear(), _jsxs(CalendarGrid, { children: [_jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }), _jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })] }), clearable && (_jsx("div", { style: { textAlign: "center", marginTop: 3 }, children: _jsx(NoValueButton, { onClick: () => onChange(null), children: "Clear Date" }) }))] }), includeTime && (_jsxs(TimeContainer, { children: [_jsx(TimeHeader, { children: "Select Time" }), _jsxs(TimePickerContainer, { children: [_jsx(TimeHourSelect, { children: renderHours() }), _jsx(TimeMinuteSelect, { children: renderMinutes() })] })] }))] }));
 };
 Calendar.displayName = "Calendar";
 export default Calendar;

package/dist/Calendar/CalendarStyles.d.ts

@@ -1,11 +1,8 @@
 export declare const MainContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CalendarHeaderControls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CalendarNavButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const CalendarGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CalendarMonth: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CalendarHeaderSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface CalendarCellProps {
     index?: number;
     inMonth?: boolean | 0;
@@ -21,9 +18,8 @@ export declare const TodayCalendarDate: import("styled-components/dist/types").I
 export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimePickerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeHeaderValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TimeZoneBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TimeSelectList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeHourSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimeMinuteSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TimeItemActive: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
 export declare const NoValueButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;