josenanodev-react-components-library 1.0.4 → 1.0.6

package/dist/cjs/Services/MulticalendarStatesAndSettings.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.eraseMulticalendarScrollLeftPosition = exports.setMulticalendarScrollLeftPosition = exports.getMulticalendarScrollLeftPosition = exports.eraseMulticalendarScrollTopPosition = exports.setMulticalendarScrollTopPosition = exports.getMulticalendarScrollTopPosition = void 0;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- * @returns saved height scroll position of selected multicalendar
- */
-const getMulticalendarScrollTopPosition = (multicalendarId) => {
-    return sessionStorage.getItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
-};
-exports.getMulticalendarScrollTopPosition = getMulticalendarScrollTopPosition;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- * @param scrollTop scroll height number
- */
-const setMulticalendarScrollTopPosition = (multicalendarId, scrollTop) => {
-    sessionStorage.setItem(`MulticalendarScrollTopPosition-${multicalendarId}`, scrollTop);
-};
-exports.setMulticalendarScrollTopPosition = setMulticalendarScrollTopPosition;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- */
-const eraseMulticalendarScrollTopPosition = (multicalendarId) => {
-    sessionStorage.removeItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
-};
-exports.eraseMulticalendarScrollTopPosition = eraseMulticalendarScrollTopPosition;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- * @returns saved horizontal scroll position of selected multicalendar
- */
-const getMulticalendarScrollLeftPosition = (multicalendarId) => {
-    return sessionStorage.getItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
-};
-exports.getMulticalendarScrollLeftPosition = getMulticalendarScrollLeftPosition;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- * @param xScroll left scroll number
- */
-const setMulticalendarScrollLeftPosition = (multicalendarId, scrollLeft) => {
-    sessionStorage.setItem(`MulticalendarScrollLeftPosition-${multicalendarId}`, scrollLeft);
-};
-exports.setMulticalendarScrollLeftPosition = setMulticalendarScrollLeftPosition;
-/**
- *
- * @param multicalendarId id of the multicalendar (multicalendarId prop)
- */
-const eraseMulticalendarScrollLeftPosition = (multicalendarId) => {
-    sessionStorage.removeItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
-};
-exports.eraseMulticalendarScrollLeftPosition = eraseMulticalendarScrollLeftPosition;

package/dist/cjs/Services/accessToken.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.eraseAccessToken = exports.setAccessToken = exports.getAccessToken = void 0;
-const getAccessToken = () => {
-    return localStorage.getItem("access_token_turbosuite");
-};
-exports.getAccessToken = getAccessToken;
-const setAccessToken = (token) => {
-    localStorage.setItem("access_token_turbosuite", token);
-};
-exports.setAccessToken = setAccessToken;
-const eraseAccessToken = () => {
-    localStorage.removeItem("access_token_turbosuite");
-};
-exports.eraseAccessToken = eraseAccessToken;

package/dist/cjs/common/constants.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.millisecondsOfOneDay = exports.languageCode = exports.propertyManagerLookAndFeelCode = exports.propertyManagerCode = exports.access = void 0;
-exports.access = window.access;
-exports.propertyManagerCode = window.propertyManagerCode;
-exports.propertyManagerLookAndFeelCode = window.propertyManagerLookAndFeelCode;
-exports.languageCode = window.languageCode;
-exports.millisecondsOfOneDay = 86400000;

package/dist/cjs/common/turboSuiteUrls.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-let turboSuiteUrls = {
-    testEnviroment: "http://localhost",
-    apiV1Prod: "https://api.turbosuite.es/v1/",
-    apiV1PreProd: "https://api.demo.turbosuite.com/v1/",
-    middleware: window.actionUrl,
-};
-exports.default = turboSuiteUrls;

package/dist/cjs/common/types.d.ts

@@ -1,113 +0,0 @@
-import { languageType } from "./assets/languages/types";
-
-export interface customWindow extends Window {
-  access: string;
-  propertyManagerCode: string;
-  propertyManagerLookAndFeelCode: string;
-  languageCode: string;
-  actionUrl: string;
-}
-
-export interface SagaActionParamsType<T> {
-  type: string;
-  payload: T;
-  repeatsLeft: number;
-  persistentReduxAction: string;
-  reduxError: string;
-  showErrorMessage?: boolean;
-  millisecondsWait?: number;
-}
-
-export interface NotificationsReducerStateType {
-  quickNotifications: QuickNotificationsType[];
-}
-
-export interface lookAndFeelType {
-  code: string;
-  logoUrl: string;
-  primaryColor: string;
-  secondaryColor: string;
-  fontFamily: "Roboto" | "Bitter" | "Dosis" | "Figtree" | "Mulish" | "Nunito Sans";
-  enabled: boolean;
-  propertyManagerCode?: string;
-}
-
-export interface AppSettingsReducerStateType {
-  view: "multidestiny";
-  language: languageType;
-  lookAndFeel?: lookAndFeelType;
-}
-
-export interface DestiniesReducerStateType {
-  countries: CountryType[];
-  regions: RegionType[];
-  provinces: ProvinceType[];
-  municipalities: MunicipalityType[];
-  mixedDestinies: DestinyType[];
-}
-
-export interface DatesReducerStateType {
-  draggingOverDateCells: boolean;
-}
-
-export interface QuickNotificationsType {
-  text: string;
-  creation: Date;
-  type: "info" | "error" | "ok";
-}
-
-export interface CountryType {
-  code: string;
-  name: string;
-}
-
-export interface RegionType {
-  code: string;
-  name: string;
-  country: {
-    code: string;
-    name: string;
-  };
-}
-
-export interface ProvinceType {
-  code: string;
-  name: string;
-  country: {
-    code: string;
-    name: string;
-  };
-  region: {
-    code: string;
-    name: string;
-  };
-}
-
-export interface MunicipalityType {
-  code: string;
-  name: string;
-  country: {
-    code: string;
-    name: string;
-  };
-  region: {
-    code: string;
-    name: string;
-  };
-  province: {
-    code: string;
-    name: string;
-  };
-}
-
-export type DestinyType = (CountryType | RegionType | ProvinceType | MunicipalityType) & {
-  type: "country" | "region" | "province" | "municipality";
-};
-
-export type SeasonsType = "high" | "medium high" | "medium" | "medium low" | "low"
-
-export type EventsType = "1" | "2" | "3"
-
-export type HolidaysType = "1" | "2" | "3"
-
-export type OccupationsType = "high" | "medium" | "low"

package/dist/cjs/components/BubbleMenu/BubbleMenu.js

@@ -1,60 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const BubbleMenu_module_scss_1 = __importDefault(require("./BubbleMenu.module.scss"));
-//icons
-const bs_1 = require("react-icons/bs");
-const io5_1 = require("react-icons/io5");
-const BubbleMenuDictionary = {
-    en: {
-        menu: "menu",
-        close: "close",
-    },
-    es: {
-        menu: "menú",
-        close: "cerrar",
-    },
-};
-const BubbleMenu = ({ options, language = "en" }) => {
-    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement("button", { className: BubbleMenu_module_scss_1.default["menu-button"], onClick: () => setShowMenu(!showMenu) },
-            showMenu ? react_1.default.createElement(bs_1.BsX, null) : react_1.default.createElement(io5_1.IoMenu, null),
-            react_1.default.createElement("p", null, showMenu
-                ? BubbleMenuDictionary[language]["close"]
-                : BubbleMenuDictionary[language]["menu"])),
-        react_1.default.createElement("section", { className: BubbleMenu_module_scss_1.default["menu-container"], "data-status": showMenu ? "visible" : "hidden", onClick: () => setShowMenu(false) },
-            react_1.default.createElement("ul", null, options
-                .filter((option) => option.visible)
-                .map((option, index) => (react_1.default.createElement("li", { key: option.text, style: { transitionDelay: `${index * 100}ms` } },
-                react_1.default.createElement("button", { onClick: () => setTimeout(option.optionCallback, 300 + options.length * 100) },
-                    option.icon,
-                    option.text))))))));
-};
-exports.default = BubbleMenu;

package/dist/cjs/components/BubbleMenu/BubbleMenu.module.scss

@@ -1,113 +0,0 @@
-.menu-container {
-  position: fixed;
-  top: 0px;
-  padding-top: 80px;
-  box-sizing: border-box;
-  width: 100vw;
-  height: 100vh;
-  transition: background-color 300ms ease-in-out;
-  &[data-status="visible"] {
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: 1;
-    ul li {
-      opacity: 1;
-      transform: translateX(0px);
-    }
-  }
-  &[data-status="hidden"] {
-    background-color: transparent;
-    z-index: -1;
-    ul li {
-      opacity: 0;
-      transform: translateX(-110px);
-    }
-  }
-  ul {
-    list-style: none;
-    padding-inline-start: 5px;
-    li {
-      transition: all 300ms ease-in-out;
-      button {
-        border-width: 3px;
-        border-style: solid;
-        border-color: #959595;
-        box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
-        color: #959595;
-        background-color: rgba(255, 255, 255, 0.9);
-        -webkit-tap-highlight-color: transparent;
-        user-select: none;
-        cursor: pointer;
-        transition: all 100ms ease-in-out;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 100px;
-        height: 100px;
-        margin: 15px 0px;
-        border-radius: 50px;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        svg {
-          min-width: 40px;
-          min-height: 40px;
-        }
-        &:active {
-          transform: translate(1px, 1px);
-          box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
-        }
-      }
-    }
-  }
-}
-
-.menu-button {
-  position: fixed;
-  z-index: 2;
-  top: 30px;
-  left: 10px;
-  width: 50px;
-  height: 50px;
-  background-color: rgba(255, 255, 255, 0.7);
-  border-radius: 25px;
-  border-width: 3px;
-  border-style: solid;
-  border-color: #959595;
-  box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
-  color: #959595;
-  background-color: rgba(255, 255, 255, 0.9);
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  cursor: pointer;
-  transition: all 100ms ease-in-out;
-  svg {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    width: 100%;
-    height: 34px;
-    color: #0d280b;
-    path {
-      transition: all 0.3s ease-in-out;
-    }
-  }
-  p {
-    position: absolute;
-    top: 30px;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    text-align: center;
-    color: #0d280b;
-    font-size: 10px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-  }
-  &:active {
-    transform: translate(1px, 1px);
-    box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
-  }
-}

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.js

@@ -1,191 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const CalendarDatePicker_module_scss_1 = __importDefault(require("./CalendarDatePicker.module.scss"));
-const bs_1 = require("react-icons/bs");
-const InputBoxWithConfirmation_1 = __importDefault(require("../InputBoxWithConfirmation/InputBoxWithConfirmation"));
-const CalendarScrollableSection_1 = __importDefault(require("./subcomponents/CalendarScrollableSection"));
-const calendarDatePickerDictionary = {
-    en: {
-        january: "january",
-        february: "february",
-        march: "march",
-        april: "april",
-        may: "may",
-        june: "june",
-        july: "july",
-        august: "august",
-        september: "september",
-        october: "october",
-        november: "november",
-        december: "december",
-        monday: "monday",
-        tuesday: "tuesday",
-        wednesday: "wednesday",
-        thursday: "thursday",
-        friday: "friday",
-        saturday: "saturday",
-        sunday: "sunday",
-        today: "today",
-    },
-    es: {
-        january: "enero",
-        february: "febrero",
-        march: "marzo",
-        april: "abril",
-        may: "mayo",
-        june: "junio",
-        july: "julio",
-        august: "agosto",
-        september: "septiembre",
-        october: "octubre",
-        november: "noviembre",
-        december: "diciembre",
-        monday: "lunes",
-        tuesday: "martes",
-        wednesday: "miércoles",
-        thursday: "jueves",
-        friday: "viernes",
-        saturday: "sábado",
-        sunday: "domingo",
-        today: "hoy",
-    },
-};
-const getMonthName = (month, language) => {
-    switch (month) {
-        case 0:
-            return calendarDatePickerDictionary[language].january;
-        case 1:
-            return calendarDatePickerDictionary[language].february;
-        case 2:
-            return calendarDatePickerDictionary[language].march;
-        case 3:
-            return calendarDatePickerDictionary[language].april;
-        case 4:
-            return calendarDatePickerDictionary[language].may;
-        case 5:
-            return calendarDatePickerDictionary[language].june;
-        case 6:
-            return calendarDatePickerDictionary[language].july;
-        case 7:
-            return calendarDatePickerDictionary[language].august;
-        case 8:
-            return calendarDatePickerDictionary[language].september;
-        case 9:
-            return calendarDatePickerDictionary[language].october;
-        case 10:
-            return calendarDatePickerDictionary[language].november;
-        case 11:
-            return calendarDatePickerDictionary[language].december;
-        default:
-            return "";
-    }
-};
-const CalendarDatePicker = ({ mode, onSelectedDatesChange = () => { }, language = "en", customDates = [], title, minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), customStyle, }) => {
-    const [dates, setDates] = (0, react_1.useState)([]);
-    const [year, setYear] = (0, react_1.useState)(new Date().getFullYear());
-    const [month, setMonth] = (0, react_1.useState)(new Date().getMonth());
-    const [reloadKey, setReloadKey] = (0, react_1.useState)(Math.random());
-    const isDateValidForChange = (date) => {
-        const minimumMonthFirstDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), 1);
-        const maximumMonthLastDate = new Date(maximumDate.getFullYear(), maximumDate.getMonth() + 1, 0);
-        const isDateHigherThanMinimumMonthFirstDate = date.valueOf() >= minimumMonthFirstDate.valueOf();
-        const isDateLowerThanMaximumMonthLastDate = date.valueOf() <= maximumMonthLastDate.valueOf();
-        return isDateHigherThanMinimumMonthFirstDate && isDateLowerThanMaximumMonthLastDate;
-    };
-    return (react_1.default.createElement("div", { className: CalendarDatePicker_module_scss_1.default["calendar-date-picker"], style: customStyle },
-        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["title"] },
-            react_1.default.createElement(bs_1.BsFillCalendar3WeekFill, null),
-            title,
-            react_1.default.createElement("button", { className: CalendarDatePicker_module_scss_1.default["today-button"], onClick: () => {
-                    const today = new Date();
-                    if (isDateValidForChange(today)) {
-                        setMonth(today.getMonth());
-                        setYear(today.getFullYear());
-                        setReloadKey(Math.random());
-                    }
-                } }, calendarDatePickerDictionary[language]["today"].slice(0, 1).toUpperCase() +
-                calendarDatePickerDictionary[language]["today"].slice(1))),
-        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["month-and-year"] },
-            react_1.default.createElement("select", { style: { fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily }, className: CalendarDatePicker_module_scss_1.default["month-input"], value: month, onChange: (event) => {
-                    const numericValue = Number(event.target.value);
-                    setMonth(numericValue);
-                    setReloadKey(Math.random());
-                } }, Array(12)
-                .fill(0)
-                .map((_, index) => {
-                const referenceDate = new Date(year, index, 1);
-                const isDisabled = !isDateValidForChange(referenceDate);
-                return (react_1.default.createElement("option", { key: getMonthName(index, language), value: index, disabled: isDisabled }, getMonthName(index, language)));
-            })),
-            react_1.default.createElement(InputBoxWithConfirmation_1.default, { inputType: "number", divWrapperCustomStyle: {
-                    width: "4ch",
-                    border: "none",
-                    backgroundColor: "transparent",
-                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
-                }, inputBoxCustomStyle: {
-                    padding: 0,
-                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
-                }, maxLength: 4, defaultValue: year.toString(), overrideCurrentValue: year.toString(), minimumValue: minimumDate.getFullYear().toString(), maximumValue: maximumDate.getFullYear().toString(), onConfirmAction: (inputCurrentValue) => {
-                    let numericValue = Number(inputCurrentValue);
-                    const referenceDate = new Date(numericValue, month, 1);
-                    if (!isDateValidForChange(referenceDate)) {
-                        if (referenceDate.valueOf() < minimumDate.valueOf()) {
-                            setYear(minimumDate.getFullYear());
-                            setMonth(minimumDate.getMonth());
-                            setReloadKey(Math.random());
-                        }
-                        else if (referenceDate.valueOf() > maximumDate.valueOf()) {
-                            setYear(maximumDate.getFullYear());
-                            setMonth(maximumDate.getMonth());
-                            setReloadKey(Math.random());
-                        }
-                    }
-                    else {
-                        setYear(numericValue);
-                        setReloadKey(Math.random());
-                    }
-                } })),
-        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["week-days"] },
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].monday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].tuesday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].wednesday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].thursday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].friday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].saturday.slice(0, 1).toUpperCase()),
-            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].sunday.slice(0, 1).toUpperCase())),
-        react_1.default.createElement(CalendarScrollableSection_1.default, { key: reloadKey, dates: dates, year: year, month: month, mode: mode, onSelectedDatesChange: (selectedDates) => {
-                onSelectedDatesChange(selectedDates);
-                setDates(selectedDates);
-            }, onFocusedMonth: (month, year) => {
-                setMonth(month);
-                setYear(year);
-            }, customDates: customDates, minimumDate: minimumDate, maximumDate: maximumDate })));
-};
-exports.default = CalendarDatePicker;

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.module.scss

@@ -1,104 +0,0 @@
-@property --angle {
-  sintax: "<angle>";
-  inherits: false;
-  initial-value: 270deg;
-}
-
-@property --color-default {
-  sintax: "<color>";
-  inherits: false;
-  initial-value: white;
-}
-
-@property --color-selected {
-  sintax: "<color>";
-  inherits: false;
-  initial-value: #e3f3e3;
-}
-
-@property --percentage-default {
-  sintax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --percentage-selected {
-  sintax: "<percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-.calendar-date-picker {
-  font-family: Arial, Helvetica, sans-serif;
-  width: 390px;
-  color: #959595;
-  font-weight: 600;
-  font-style: normal;
-  line-height: normal;
-  .title {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    font-size: 16px;
-    svg {
-      margin: 0px 5px;
-    }
-  }
-  .today-button {
-    position: absolute;
-    top: 0px;
-    right: 5px;
-    border: solid 2px #787878;
-    border-radius: 6px;
-    padding: 4px 8px;
-    background-color: white;
-    color: #787878;
-    transition: all 0.1s ease-in-out;
-    cursor: pointer;
-    &:hover {
-      background-color: #f3f3f3;
-    }
-    &:active {
-      background-color: #cfcfcf;
-    }
-  }
-  .month-and-year {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    text-align: center;
-    font-size: 22px;
-    padding: 10px 0px;
-    .month-input {
-      width: fit-content;
-      background-color: transparent;
-      border: transparent;
-      text-align: right;
-      font-size: 18px;
-      color: #959595;
-      cursor: pointer;
-      &:focus {
-        outline: transparent;
-      }
-      option {
-        background-color: white;
-        color: #959595;
-        &:disabled {
-          color: #cfcfcf;
-        }
-      }
-    }
-  }
-  .week-days {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #ebebeb;
-    p {
-      width: calc(100% / 7);
-      margin: 0px;
-      text-align: center;
-    }
-  }
-}