@monolith-forensics/monolith-ui 1.2.19-alpha.2 → 1.2.19-alpha.3

package/dist/Button/Button.d.ts

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { Size, Variant } from "../core";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: Size;
+    variant?: Variant;
+    color?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/Button.js

@@ -0,0 +1,331 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Loader2Icon } from "lucide-react";
+const colors = {
+    gray: "#888888",
+    red: "#e03131",
+    pink: "#c2255c",
+    grape: "#9c36b5",
+    violet: "#6741d9",
+    indigo: "#3b5bdb",
+    cyan: "#0c8599",
+    teal: "#099268",
+    green: "#2f9e44",
+    lime: "#66a80f",
+    yellow: "#f08c00",
+    orange: "#e8590c",
+};
+const StyledButton = styled.button `
+  user-select: none;
+  display: flex;
+  outline: none;
+  white-space: nowrap;
+
+  width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
+  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-weight: 525;
+  letter-spacing: 0.75px;
+  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`;
+    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 }) => {
+    var _a, _b;
+    if (variant === "default")
+        return theme.palette.text.primary;
+    if (variant === "contained")
+        return "white";
+    if (variant === "filled")
+        return "white";
+    switch (color) {
+        case "primary":
+            return theme.palette.primary.main;
+        case undefined:
+            return theme.palette.text.primary;
+        default:
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.text.primary
+                : theme.palette.text.primary;
+    }
+}};
+
+  background-color: ${({ theme, variant, color, selected }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (variant === "default")
+        return "transparent";
+    switch (variant) {
+        case "contained":
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary;
+        case "filled":
+            return color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary;
+        case "light":
+            return ((color
+                ? ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e[color]) === null || _f === void 0 ? void 0 : _f.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "30");
+        case "outlined":
+            return "transparent";
+        case "text":
+            return "transparent";
+        case "subtle":
+            return selected ? theme.palette.action.hover : "transparent";
+        default:
+            return "transparent";
+    }
+}};
+
+  border-radius: 4px;
+  border: 1px solid
+    ${({ theme, variant, color }) => {
+    var _a, _b, _c, _d;
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "light":
+            return "transparent";
+        case "outlined":
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return "transparent";
+        default:
+            return color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+    }
+}};
+
+  cursor: pointer;
+
+  transition: background-color 0.2s, border 0.2s;
+
+  .inner-span {
+    display: flex;
+    align-items: center;
+  }
+
+  .button-label {
+    display: flex;
+    align-items: center;
+  }
+
+  [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;
+  }
+
+  &:hover {
+    background-color: ${({ theme, variant, color }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (variant === "default")
+        return "transparent";
+    switch (variant) {
+        case "contained":
+            return ((color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "90");
+        case "filled":
+            return ((color
+                ? ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c[color]) === null || _d === void 0 ? void 0 : _d.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "90");
+        case "light":
+            return ((color
+                ? ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e[color]) === null || _f === void 0 ? void 0 : _f.main) ||
+                    colors[color] ||
+                    theme.palette.background.secondary
+                : theme.palette.background.secondary) + "70");
+        case "outlined":
+            return theme.palette.action.hover;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return color
+                ? (((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g[color]) === null || _h === void 0 ? void 0 : _h.main) ||
+                    colors[color]) + "30" ||
+                    theme.palette.action.hover
+                : theme.palette.action.hover;
+        default:
+            return theme.palette.action.hover;
+    }
+}};
+
+    border: 1px solid
+      ${({ theme, variant, color }) => {
+    var _a, _b;
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "light":
+            return "transparent";
+        case "outlined":
+            return color
+                ? colors[color] || theme.palette.divider
+                : theme.palette.divider;
+        case "text":
+            return "transparent";
+        case "subtle":
+            return "transparent";
+        default:
+            return color
+                ? ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a[color]) === null || _b === void 0 ? void 0 : _b.main) ||
+                    colors[color] ||
+                    theme.palette.divider
+                : theme.palette.divider;
+    }
+}};
+    opacity: ${({ variant }) => (variant === "text" ? 0.8 : 1)};
+  }
+
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:active {
+    // simulate physical button press
+    translate: 0px 1px;
+    text-decoration: none;
+  }
+
+  // disabled styles
+  ${({ disabled }) => disabled &&
+    `
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  `}
+`;
+const StyledAnchor = styled.a `
+  text-decoration: none;
+  height: 100%;
+
+  &:hover {
+    text-decoration: none !important;
+  }
+`;
+const StyledLoader = styled.span `
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${({ theme, color }) => color
+    ? theme.palette[color] || colors[color]
+    : theme.palette.primary};
+
+    animation: spin 0.75s linear infinite;
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+`;
+const Button = forwardRef((props, ref) => {
+    const { children, loading = false, leftSection = null, rightSection = null, href = null, download = null } = props, other = __rest(props, ["children", "loading", "leftSection", "rightSection", "href", "download"]);
+    const buttonContent = (_jsx("span", { className: "inner-span", style: { height: "100%", width: "100%" }, children: loading ? (_jsx(StyledLoader, { children: _jsx(Loader2Icon, {}) })) : (_jsxs(_Fragment, { children: [leftSection && _jsx("span", { "data-position": "left", children: leftSection }), _jsx("span", { className: "button-label", children: children }), rightSection && _jsx("span", { "data-position": "right", children: rightSection })] })) }));
+    return (_jsx(StyledButton, Object.assign({ ref: ref }, other, { children: href ? (_jsx(StyledAnchor, { href: href, download: download, children: buttonContent })) : (buttonContent) })));
+});
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { default } from "./Button";

package/dist/Calendar/Calendar.d.ts

@@ -0,0 +1,15 @@
+interface CalendarProps {
+    defaultValue?: Date;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    hourFormat?: "12" | "24";
+    includeTime?: boolean;
+    clearable?: boolean;
+    min?: Date;
+    max?: Date;
+}
+declare const Calendar: {
+    ({ 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

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+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")))
+        return false;
+    if (max && moment(value).startOf("day").isAfter(moment(max).startOf("day")))
+        return false;
+    return true;
+};
+const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hourFormat = "24", includeTime = true, clearable = true, min, max, }) => {
+    const [dateState, setDateState] = useState({
+        current: defaultValue,
+        month: defaultValue.getMonth() + 1,
+        year: defaultValue.getFullYear(),
+        hours: 0,
+        minutes: 0,
+    });
+    const [today, setToday] = useState(new Date());
+    let pressureTimer;
+    let pressureTimeout;
+    let dayTimeout;
+    const addDateToState = (date) => {
+        const isDateObject = isDate(date);
+        const _date = isDateObject ? date : new Date();
+        setDateState({
+            current: isDateObject ? date : null,
+            month: +_date.getMonth() + 1,
+            year: _date.getFullYear(),
+            hours: _date.getHours(),
+            minutes: _date.getMinutes(),
+        });
+    };
+    const getCalendarDates = () => {
+        const { current, month, year } = dateState;
+        const calendarMonth = month || +((current === null || current === void 0 ? void 0 : current.getMonth()) || 0) + 1;
+        const calendarYear = year || (current === null || current === void 0 ? void 0 : current.getFullYear());
+        return calendar(calendarMonth, calendarYear);
+    };
+    //new start
+    const renderMonthAndYear = () => {
+        const { month, year } = dateState;
+        // 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, 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 { current, month, year } = dateState;
+        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 = current && isSameDay(_date, current);
+        // Check if calendar date is in the same month as the state month and year
+        const inMonth = month && year && isSameMonth(_date, new Date([year, month, 1].join("-")));
+        // The click handler
+        const props = {
+            "data-disabled": !checkValidRange(getDateISO(_date), min || null, max || null),
+            index,
+            key: getDateISO(_date),
+            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 renderHours = () => {
+        const { hours } = dateState;
+        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(dateState.current)
+                        .hours(hour.value)
+                        .toDate();
+                    setDateState(Object.assign(Object.assign({}, dateState), { hours: hour.value, current: newTime }));
+                    onChange(newTime);
+                }, children: hour.label }, hour.value));
+        });
+    };
+    const renderMinutes = () => {
+        const { minutes } = dateState;
+        return MINUTES.map((minute) => {
+            const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
+            return (_jsx(MinuteComponent, { 
+                // value={minute}
+                onClick: (e) => {
+                    const newTime = moment(dateState.current)
+                        .minutes(Number(minute))
+                        .toDate();
+                    setDateState(Object.assign(Object.assign({}, dateState), { minutes: Number(minute), current: newTime }));
+                    onChange(newTime);
+                }, children: minute }, minute));
+        });
+    };
+    // new 2
+    const gotoDate = (date) => (evt) => {
+        evt && evt.preventDefault();
+        const { current } = dateState;
+        // Set Hours and Minutes
+        const newTime = moment(date)
+            .hours(includeTime ? dateState.hours : 0)
+            .minutes(includeTime ? dateState.minutes : 0)
+            .toDate();
+        !(current && isSameDay(newTime, current)) && addDateToState(newTime);
+        onChange(newTime);
+    };
+    const gotoPreviousMonth = () => {
+        const { month, year } = dateState;
+        const previousMonth = getPreviousMonth(month, year);
+        setDateState({
+            month: previousMonth.month,
+            year: previousMonth.year,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoNextMonth = () => {
+        const { month, year } = dateState;
+        const nextMonth = getNextMonth(month, year);
+        setDateState({
+            month: nextMonth.month,
+            year: nextMonth.year,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoPreviousYear = () => {
+        const { year } = dateState;
+        setDateState({
+            month: dateState.month,
+            year: year - 1,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const gotoNextYear = () => {
+        const { year } = dateState;
+        setDateState({
+            month: dateState.month,
+            year: year + 1,
+            current: dateState.current,
+            hours: dateState.hours,
+            minutes: dateState.minutes,
+        });
+    };
+    const clearPressureTimer = () => {
+        pressureTimer && clearInterval(pressureTimer);
+        pressureTimeout && clearTimeout(pressureTimeout);
+    };
+    const handlePrevious = (evt) => {
+        evt && evt.preventDefault();
+        const fn = evt.shiftKey ? gotoPreviousYear : gotoPreviousMonth;
+        fn();
+    };
+    const handleNext = (evt) => {
+        evt && evt.preventDefault();
+        const fn = evt.shiftKey ? gotoNextYear : gotoNextMonth;
+        fn();
+    };
+    useEffect(() => {
+        if (value) {
+            addDateToState(value);
+        }
+    }, [value]);
+    // lifecycle methods
+    useEffect(() => {
+        const now = new Date().valueOf();
+        const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
+        const ms = tomorrow - now;
+        dayTimeout = setTimeout(() => {
+            setToday(new Date());
+            clearDayTimeout();
+        }, ms);
+        return () => {
+            clearPressureTimer();
+            clearDayTimeout();
+        };
+    }, []);
+    const clearDayTimeout = () => {
+        dayTimeout && clearTimeout(dayTimeout);
+    };
+    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

@@ -0,0 +1,36 @@
+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 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;
+interface CalendarCellProps {
+    index?: number;
+    inMonth?: boolean | 0;
+    "data-disabled"?: boolean | 0;
+    key: string | null;
+    title?: string;
+}
+export declare const CalendarCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CalendarCellProps>> & string;
+export declare const CalendarDay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CalendarCellProps>> & string;
+export declare const CalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, CalendarCellProps>> & string;
+export declare const HighlightedCalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof CalendarCellProps> & CalendarCellProps, CalendarCellProps>> & string;
+export declare const TodayCalendarDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CalendarCellProps> & CalendarCellProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof CalendarCellProps> & CalendarCellProps, keyof CalendarCellProps> & CalendarCellProps, CalendarCellProps>> & string;
+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 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<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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;
+export {};