@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/Button/Button.js

@@ -0,0 +1,327 @@
+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 }) => {
+    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";
+        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;
+    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%" }, 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.js

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

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.js

@@ -0,0 +1,164 @@
+import styled from "styled-components";
+export const MainContainer = styled.div `
+  display: flex;
+`;
+export const CalendarContainer = styled.div `
+  font-size: 5px;
+  width: 250px;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+export const CalendarHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const CalendarGrid = styled.div `
+  display: grid;
+  grid-template: repeat(7, auto) / repeat(7, auto);
+`;
+export const CalendarMonth = styled.div `
+  font-weight: 500;
+  font-size: 12px;
+  color: ${(props) => props.theme.palette.text.primary};
+  text-align: center;
+  padding: 0.5em 0.25em;
+  word-spacing: 5px;
+  user-select: none;
+`;
+export const CalendarCell = styled.div `
+  text-align: center;
+  align-self: center;
+  letter-spacing: 0.1rem;
+  padding: 7px;
+  user-select: none;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  grid-column: ${({ index = 0 }) => (index % 7) + 1} / span 1;
+`;
+export const CalendarDay = styled(CalendarCell) `
+  font-weight: bold;
+  font-size: 10px;
+  border-radius: 0px;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+export const CalendarDate = styled(CalendarCell) `
+  font-weight: ${(props) => (props.inMonth ? 500 : 300)};
+  font-size: 10px;
+  cursor: pointer;
+
+  color: ${({ inMonth, theme }) => inMonth ? theme.palette.text.primary : theme.palette.text.secondary};
+  grid-row: ${({ index }) => Math.floor((index || 0) / 7) + 2} / span 1;
+  transition: all 0.2s ease-out;
+  border-radius: 5px;
+  :hover {
+    background: ${({ theme }) => theme.palette.action.hover};
+  }
+
+  &[data-disabled="true"] {
+    pointer-events: none;
+    color: ${({ theme }) => theme.palette.text.disabled};
+  }
+`;
+export const HighlightedCalendarDate = styled(CalendarDate) `
+  color: white !important;
+  background: ${(props) => props.theme.palette.primary.main} !important;
+  border: 1px solid ${(props) => props.theme.palette.primary.main} !important;
+  position: relative;
+  ::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+  }
+`;
+export const TodayCalendarDate = styled(HighlightedCalendarDate) `
+  color: ${(props) => props.theme.palette.text.primary} !important;
+  background: transparent !important;
+  ::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-bottom: 0.75em solid #06c;
+    border-left: 0.75em solid transparent;
+    border-top: 0.75em solid transparent;
+  }
+  :hover {
+    color: ${(props) => props.theme.palette.text.primary} !important;
+    background: ${(props) => props.theme.palette.action.hover} !important;
+  }
+`;
+export const TimeContainer = styled.div `
+  font-size: 12px;
+  width: 150px;
+  height: 100%;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  border-left: none;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+export const TimePickerContainer = styled.div `
+  display: flex;
+  height: 100%;
+`;
+export const TimeHeader = styled.div `
+  font-weight: 500;
+  font-size: 12px;
+  color: ${(props) => props.theme.palette.text.primary};
+  border-bottom: 1px solid ${(props) => props.theme.palette.divider};
+  text-align: center;
+  padding: 5px;
+  line-height: 2.3;
+  height: 40px;
+  user-select: none;
+`;
+export const TimeHourSelect = styled.div `
+  border-right: 1px solid ${(props) => props.theme.palette.divider};
+  width: 50%;
+  height: 250px;
+  overflow-y: auto;
+`;
+export const TimeMinuteSelect = styled.div `
+  width: 50%;
+  height: 250px;
+  overflow-y: auto;
+`;
+export const TimeItem = styled.div `
+  font-weight: 500;
+  font-size: 10px;
+  color: ${(props) => props.theme.palette.text.primary};
+  text-align: center;
+  padding: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  :hover {
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+`;
+export const TimeItemActive = styled(TimeItem) `
+  background: ${(props) => props.theme.palette.primary.main};
+  color: white;
+  &:hover {
+    background: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+export const NoValueButton = styled.button `
+  font-weight: normal;
+  font-size: 12px;
+  color: ${(props) => props.theme.palette.text.secondary};
+  text-align: center;
+  padding: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  :hover {
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+`;