@lets-events/react 12.11.3 → 12.11.4

package/src/components/Calendar/styledComponents.ts

@@ -1,508 +1,508 @@
-import { styled } from "../../styles";
-
-export const CalendarStyled = styled("div", {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$14",
-  borderRadius: "$sm",
-  position: "relative",
-  width: "fit-content",
-  variants: {
-    expand: {
-      true: {
-        width: "100%",
-        flex: "1",
-        display: "flex",
-      },
-    },
-  },
-});
-const calendarMobileCentered = {
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  right: "auto",
-  bottom: "auto",
-  transform: "translate(-50%, -50%)",
-  maxWidth: "calc(100vw - 32px)",
-  maxHeight: "90vh",
-  overflowY: "auto",
-};
-
-export const CalendarOverlayStyled = styled("div", {
-  display: "none",
-  "@media (max-width: 748px)": {
-    display: "block",
-    position: "fixed",
-    inset: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    zIndex: 999998,
-  },
-});
-
-export const CalendarButtonStyled = styled("button", {
-  backgroundColor: "transparent",
-  border: "none",
-  maxWidth: "200px",
-  padding: "0",
-  cursor: "pointer",
-  "> div > div": {
-    paddingLeft: "0",
-    input: {
-      textAlign: "right",
-    },
-  },
-  variants: {
-    expand: {
-      true: {
-        flex: "1",
-        display: "flex",
-        maxWidth: "100%",
-      },
-    },
-  },
-});
-export const CalendarContentStyled = styled("div", {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$14",
-  maxWidth: "fit-content",
-  border: "1px solid $neutral300",
-  borderRadius: "$sm",
-  boxShadow: "0px 2px 8px 0px $shadow50",
-  position: "absolute",
-  backgroundColor: "$neutral50",
-  zIndex: "999999",
-  "@media (max-width: 748px)": calendarMobileCentered,
-  variants: {
-    position: {
-      top: {
-        bottom: "110%",
-        left: "0",
-        "@media (max-width: 748px)": calendarMobileCentered,
-      },
-      bottom: {
-        top: "110%",
-        left: "0",
-        "@media (max-width: 748px)": calendarMobileCentered,
-      },
-      "top-right": {
-        bottom: "110%",
-        right: "0",
-        "@media (max-width: 748px)": calendarMobileCentered,
-      },
-      "bottom-right": {
-        top: "110%",
-        right: "0",
-        "@media (max-width: 748px)": calendarMobileCentered,
-      },
-    },
-  },
-});
-
-export const CalendarFooterStyled = styled("div", {
-  borderTop: "2px solid $neutral100",
-  padding: "$4 $16",
-  display: "flex",
-  gap: "1rem",
-  alignItems: "center",
-  height: "3rem",
-  variants: {
-    actionAlign: {
-      left: {
-        justifyContent: "flex-start",
-      },
-      center: {
-        justifyContent: "center",
-      },
-      right: {
-        justifyContent: "flex-end",
-      },
-    },
-  },
-  defaultVariants: {
-    actionAlign: "right",
-  },
-  "@media (max-width: 748px)": {
-    gap: "0",
-    padding: "$4 $12",
-    "> div": {
-      padding: "0!important",
-    },
-  },
-});
-
-export const DayPickerWrapperStyled = styled("div", {
-  ".rt-TextFieldInput": {
-    fontFamily: "$default",
-    fontSize: "$14",
-    color: "$dark500",
-  },
-  ".rdp-root": {
-    padding: "0 $8",
-  },
-  ".rdp-today .rdp-day_button": {
-    color: "$brand500",
-    textDecoration: "underline",
-  },
-  ".rdp-day.rdp-disabled .rdp-day_button": {
-    color: "$dark400",
-  },
-  ".rdp-day_button": {
-    height: "32px",
-    width: "32px",
-    borderRadius: "$sm",
-    fontSize: "$14",
-    color: "$text",
-    backgroundColor: "transparent",
-    border: "1px solid transparent",
-    transition: "all 0.2s ease-in-out",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  ".rdp-day_button:hover": {
-    backgroundColor: "$dark100",
-    borderColor: "$brand600",
-  },
-  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-  },
-  ".rdp-nav": {
-    position: "absolute",
-    width: "100%",
-    left: "0",
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  ".rdp-nav .rdp-chevron": {
-    display: "none",
-  },
-  ".rdp-nav .rdp-button_previous": {
-    display: "block",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "cover",
-    width: "32px",
-    height: "32px",
-  },
-  ".rdp-nav .rdp-button_next": {
-    display: "block",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "cover",
-    width: "32px",
-    height: "32px",
-  },
-  ".rdp-nav .rdp-button_previous:hover": {
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    transition: "all 0.2s ease-in-out",
-  },
-  ".rdp-nav .rdp-button_next:hover": {
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    transition: "all 0.2s ease-in-out",
-  },
-  ".rdp-nav button": {
-    border: "none",
-    backgroundColor: "transparent",
-    cursor: "pointer",
-  },
-  ".rdp-months": {
-    display: "flex",
-    columnGap: "$16",
-    alignItems: "flex-start",
-    paddingTop: "$12",
-  },
-  ".rdp-month": {
-    marginTop: "0",
-    paddingTop: "$6",
-  },
-  ".rdp-month_caption": {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "calc(100% - 64px)",
-    margin: "0 auto",
-    columnGap: "12px",
-  },
-  ".rdp-dropdowns span, .rdp-caption_label": {
-    fontSize: "$16",
-    fontWeight: "$regular",
-    lineHeight: "$20",
-    textTransform: "capitalize",
-  },
-  ".rdp-day.rdp-selected .rdp-day_button": {
-    backgroundColor: "$brand500",
-    color: "$neutral50",
-    borderColor: "$brand600",
-    borderRadius: "0.5rem",
-  },
-  ".rdp-dropdowns": {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "calc(100% - 64px)",
-    columnGap: "12px",
-  },
-  ".rdp-dropdowns .rdp-caption_label": {
-    display: "none",
-  },
-  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
-    border: "none",
-    backgroundColor: "transparent",
-    textTransform: "capitalize",
-    height: "1.25rem",
-    position: "relative",
-    fontFamily: "$default",
-    fontSize: "$16",
-    lineHeight: "1.25rem",
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none",
-    paddingRight: "1.25rem",
-    zIndex: "3",
-  },
-  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
-    border: "none",
-    outline: "none",
-    boxShadow: "none",
-  },
-  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
-  {
-    border: "none",
-  },
-  ".rdp-dropdown_root": {
-    position: "relative",
-  },
-  ".rdp-dropdown_root::after": {
-    content: "",
-    height: "1.25rem",
-    width: "1.25rem",
-    position: "absolute",
-    top: "0",
-    right: "0",
-    display: "block",
-    backgroundColor: "$neutral50",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    borderRadius: "0.5rem",
-    zIndex: "2",
-  },
-  ".rdp-weekday": {
-    textTransform: "uppercase",
-    fontWeight: "$regular",
-    fontSize: "0px",
-  },
-  ".rdp-weekday::first-letter": {
-    fontSize: "$14",
-  },
-  ".rdp-month_grid": {
-    marginTop: "$16",
-    paddingTop: "$16",
-    borderTop: "2px solid $neutral100",
-  },
-  "@media (max-width: 748px)": {
-    ".rdp-months": {
-      flexDirection: "column",
-      alignItems: "center",
-      padding: "16px"
-    },
-  }
-});
-export const DayPickerWrapperStyledToDoubleCalendar = styled("div", {
-  ".rt-TextFieldInput": {
-    fontFamily: "$default",
-    fontSize: "$14",
-    color: "$dark500",
-  },
-  ".rdp-root": {
-    padding: "0 $8",
-  },
-  ".rdp-today .rdp-day_button": {
-    color: "$brand500",
-    textDecoration: "underline",
-  },
-  ".rdp-day.rdp-disabled .rdp-day_button": {
-    color: "$dark400",
-  },
-  ".rdp-day_button": {
-    height: "26px",
-    width: "26px",
-    borderRadius: "$sm",
-    fontSize: "$14",
-    color: "$text",
-    backgroundColor: "transparent",
-    border: "1px solid transparent",
-    transition: "all 0.2s ease-in-out",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  ".rdp-day_button:hover": {
-    backgroundColor: "$dark100",
-    borderColor: "$brand600",
-  },
-  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-  },
-  ".rdp-nav": {
-    position: "absolute",
-    width: "100%",
-    left: "0",
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  ".rdp-nav .rdp-chevron": {
-    display: "none",
-  },
-  ".rdp-nav .rdp-button_previous": {
-    display: "block",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "cover",
-    width: "32px",
-    height: "32px",
-  },
-  ".rdp-nav .rdp-button_next": {
-    display: "block",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    backgroundSize: "cover",
-    width: "32px",
-    height: "32px",
-  },
-  ".rdp-nav .rdp-button_previous:hover": {
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    transition: "all 0.2s ease-in-out",
-  },
-  ".rdp-nav .rdp-button_next:hover": {
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    transition: "all 0.2s ease-in-out",
-  },
-  ".rdp-nav button": {
-    border: "none",
-    backgroundColor: "transparent",
-    cursor: "pointer",
-  },
-  ".rdp-months": {
-    display: "flex",
-    columnGap: "$8",
-    alignItems: "flex-start",
-    paddingTop: "$12",
-  },
-  ".rdp-month": {
-    marginTop: "0",
-    paddingTop: "$6",
-  },
-  ".rdp-month_caption": {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "calc(100% - 64px)",
-    margin: "0 auto",
-    columnGap: "12px",
-  },
-  ".rdp-dropdowns span, .rdp-caption_label": {
-    fontSize: "$16",
-    fontWeight: "$regular",
-    lineHeight: "$20",
-    textTransform: "capitalize",
-  },
-  ".rdp-day.rdp-selected .rdp-day_button": {
-    backgroundColor: "$brand500",
-    color: "$neutral50",
-    borderColor: "$brand600",
-    borderRadius: "0.5rem",
-  },
-  ".rdp-dropdowns": {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "calc(100% - 64px)",
-    columnGap: "12px",
-  },
-  ".rdp-dropdowns .rdp-caption_label": {
-    display: "none",
-  },
-  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
-    border: "none",
-    backgroundColor: "transparent",
-    textTransform: "capitalize",
-    height: "1.25rem",
-    position: "relative",
-    fontFamily: "$default",
-    fontSize: "$16",
-    lineHeight: "1.25rem",
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none",
-    paddingRight: "1.25rem",
-    zIndex: "3",
-  },
-  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
-    border: "none",
-    outline: "none",
-    boxShadow: "none",
-  },
-  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
-  {
-    border: "none",
-  },
-  ".rdp-dropdown_root": {
-    position: "relative",
-  },
-  ".rdp-dropdown_root::after": {
-    content: "",
-    height: "1.25rem",
-    width: "1.25rem",
-    position: "absolute",
-    top: "0",
-    right: "0",
-    display: "block",
-    backgroundColor: "$neutral50",
-    backgroundImage:
-      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    borderRadius: "0.5rem",
-    zIndex: "2",
-  },
-  ".rdp-weekday": {
-    textTransform: "uppercase",
-    fontWeight: "$regular",
-    fontSize: "0px",
-  },
-  ".rdp-weekday::first-letter": {
-    fontSize: "$14",
-  },
-  ".rdp-month_grid": {
-    marginTop: "$16",
-    paddingTop: "$16",
-    borderTop: "2px solid $neutral100",
-  },
-  "@media (max-width: 748px)": {
-    ".rdp-months": {
-      flexDirection: "column",
-      alignItems: "center",
-      padding: "16px"
-    },
-  }
-});
+import { styled } from "../../styles";
+
+export const CalendarStyled = styled("div", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$14",
+  borderRadius: "$sm",
+  position: "relative",
+  width: "fit-content",
+  variants: {
+    expand: {
+      true: {
+        width: "100%",
+        flex: "1",
+        display: "flex",
+      },
+    },
+  },
+});
+const calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto",
+};
+
+export const CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998,
+  },
+});
+
+export const CalendarButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  cursor: "pointer",
+  "> div > div": {
+    paddingLeft: "0",
+    input: {
+      textAlign: "right",
+    },
+  },
+  variants: {
+    expand: {
+      true: {
+        flex: "1",
+        display: "flex",
+        maxWidth: "100%",
+      },
+    },
+  },
+});
+export const CalendarContentStyled = styled("div", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$14",
+  maxWidth: "fit-content",
+  border: "1px solid $neutral300",
+  borderRadius: "$sm",
+  boxShadow: "0px 2px 8px 0px $shadow50",
+  position: "absolute",
+  backgroundColor: "$neutral50",
+  zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
+  variants: {
+    position: {
+      top: {
+        bottom: "110%",
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
+      },
+      bottom: {
+        top: "110%",
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
+      },
+      "top-right": {
+        bottom: "110%",
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
+      },
+      "bottom-right": {
+        top: "110%",
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
+      },
+    },
+  },
+});
+
+export const CalendarFooterStyled = styled("div", {
+  borderTop: "2px solid $neutral100",
+  padding: "$4 $16",
+  display: "flex",
+  gap: "1rem",
+  alignItems: "center",
+  height: "3rem",
+  variants: {
+    actionAlign: {
+      left: {
+        justifyContent: "flex-start",
+      },
+      center: {
+        justifyContent: "center",
+      },
+      right: {
+        justifyContent: "flex-end",
+      },
+    },
+  },
+  defaultVariants: {
+    actionAlign: "right",
+  },
+  "@media (max-width: 748px)": {
+    gap: "0",
+    padding: "$4 $12",
+    "> div": {
+      padding: "0!important",
+    },
+  },
+});
+
+export const DayPickerWrapperStyled = styled("div", {
+  ".rt-TextFieldInput": {
+    fontFamily: "$default",
+    fontSize: "$14",
+    color: "$dark500",
+  },
+  ".rdp-root": {
+    padding: "0 $8",
+  },
+  ".rdp-today .rdp-day_button": {
+    color: "$brand500",
+    textDecoration: "underline",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button": {
+    color: "$dark400",
+  },
+  ".rdp-day_button": {
+    height: "32px",
+    width: "32px",
+    borderRadius: "$sm",
+    fontSize: "$14",
+    color: "$text",
+    backgroundColor: "transparent",
+    border: "1px solid transparent",
+    transition: "all 0.2s ease-in-out",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  ".rdp-day_button:hover": {
+    backgroundColor: "$dark100",
+    borderColor: "$brand600",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+  },
+  ".rdp-nav": {
+    position: "absolute",
+    width: "100%",
+    left: "0",
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  ".rdp-nav .rdp-chevron": {
+    display: "none",
+  },
+  ".rdp-nav .rdp-button_previous": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_next": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_previous:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav .rdp-button_next:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav button": {
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+  },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$16",
+    alignItems: "flex-start",
+    paddingTop: "$12",
+  },
+  ".rdp-month": {
+    marginTop: "0",
+    paddingTop: "$6",
+  },
+  ".rdp-month_caption": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    margin: "0 auto",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns span, .rdp-caption_label": {
+    fontSize: "$16",
+    fontWeight: "$regular",
+    lineHeight: "$20",
+    textTransform: "capitalize",
+  },
+  ".rdp-day.rdp-selected .rdp-day_button": {
+    backgroundColor: "$brand500",
+    color: "$neutral50",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem",
+  },
+  ".rdp-dropdowns": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns .rdp-caption_label": {
+    display: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
+    border: "none",
+    backgroundColor: "transparent",
+    textTransform: "capitalize",
+    height: "1.25rem",
+    position: "relative",
+    fontFamily: "$default",
+    fontSize: "$16",
+    lineHeight: "1.25rem",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    paddingRight: "1.25rem",
+    zIndex: "3",
+  },
+  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
+  {
+    border: "none",
+  },
+  ".rdp-dropdown_root": {
+    position: "relative",
+  },
+  ".rdp-dropdown_root::after": {
+    content: "",
+    height: "1.25rem",
+    width: "1.25rem",
+    position: "absolute",
+    top: "0",
+    right: "0",
+    display: "block",
+    backgroundColor: "$neutral50",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderRadius: "0.5rem",
+    zIndex: "2",
+  },
+  ".rdp-weekday": {
+    textTransform: "uppercase",
+    fontWeight: "$regular",
+    fontSize: "0px",
+  },
+  ".rdp-weekday::first-letter": {
+    fontSize: "$14",
+  },
+  ".rdp-month_grid": {
+    marginTop: "$16",
+    paddingTop: "$16",
+    borderTop: "2px solid $neutral100",
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    },
+  }
+});
+export const DayPickerWrapperStyledToDoubleCalendar = styled("div", {
+  ".rt-TextFieldInput": {
+    fontFamily: "$default",
+    fontSize: "$14",
+    color: "$dark500",
+  },
+  ".rdp-root": {
+    padding: "0 $8",
+  },
+  ".rdp-today .rdp-day_button": {
+    color: "$brand500",
+    textDecoration: "underline",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button": {
+    color: "$dark400",
+  },
+  ".rdp-day_button": {
+    height: "26px",
+    width: "26px",
+    borderRadius: "$sm",
+    fontSize: "$14",
+    color: "$text",
+    backgroundColor: "transparent",
+    border: "1px solid transparent",
+    transition: "all 0.2s ease-in-out",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  ".rdp-day_button:hover": {
+    backgroundColor: "$dark100",
+    borderColor: "$brand600",
+  },
+  ".rdp-day.rdp-disabled .rdp-day_button:hover": {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+  },
+  ".rdp-nav": {
+    position: "absolute",
+    width: "100%",
+    left: "0",
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  ".rdp-nav .rdp-chevron": {
+    display: "none",
+  },
+  ".rdp-nav .rdp-button_previous": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_next": {
+    display: "block",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    width: "32px",
+    height: "32px",
+  },
+  ".rdp-nav .rdp-button_previous:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav .rdp-button_next:hover": {
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    transition: "all 0.2s ease-in-out",
+  },
+  ".rdp-nav button": {
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+  },
+  ".rdp-months": {
+    display: "flex",
+    columnGap: "$8",
+    alignItems: "flex-start",
+    paddingTop: "$12",
+  },
+  ".rdp-month": {
+    marginTop: "0",
+    paddingTop: "$6",
+  },
+  ".rdp-month_caption": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    margin: "0 auto",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns span, .rdp-caption_label": {
+    fontSize: "$16",
+    fontWeight: "$regular",
+    lineHeight: "$20",
+    textTransform: "capitalize",
+  },
+  ".rdp-day.rdp-selected .rdp-day_button": {
+    backgroundColor: "$brand500",
+    color: "$neutral50",
+    borderColor: "$brand600",
+    borderRadius: "0.5rem",
+  },
+  ".rdp-dropdowns": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "calc(100% - 64px)",
+    columnGap: "12px",
+  },
+  ".rdp-dropdowns .rdp-caption_label": {
+    display: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
+    border: "none",
+    backgroundColor: "transparent",
+    textTransform: "capitalize",
+    height: "1.25rem",
+    position: "relative",
+    fontFamily: "$default",
+    fontSize: "$16",
+    lineHeight: "1.25rem",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    paddingRight: "1.25rem",
+    zIndex: "3",
+  },
+  ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+  },
+  ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
+  {
+    border: "none",
+  },
+  ".rdp-dropdown_root": {
+    position: "relative",
+  },
+  ".rdp-dropdown_root::after": {
+    content: "",
+    height: "1.25rem",
+    width: "1.25rem",
+    position: "absolute",
+    top: "0",
+    right: "0",
+    display: "block",
+    backgroundColor: "$neutral50",
+    backgroundImage:
+      "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderRadius: "0.5rem",
+    zIndex: "2",
+  },
+  ".rdp-weekday": {
+    textTransform: "uppercase",
+    fontWeight: "$regular",
+    fontSize: "0px",
+  },
+  ".rdp-weekday::first-letter": {
+    fontSize: "$14",
+  },
+  ".rdp-month_grid": {
+    marginTop: "$16",
+    paddingTop: "$16",
+    borderTop: "2px solid $neutral100",
+  },
+  "@media (max-width: 748px)": {
+    ".rdp-months": {
+      flexDirection: "column",
+      alignItems: "center",
+      padding: "16px"
+    },
+  }
+});